/* 主要样式文件 */
/* By：小天 770047789 */
/* 创建于：2022.03.01 */

.c-icons{
	display: flex;
	align-items: center;
	font-size: 12px;
}
.c-icons .iconfont{
	font-size: 18px;
}
/** 顶部BAR模块 **/
.c-topbar{
    height: 35px;
    line-height: 35px;
    width: 100%;
    background: #f6f6f6;
    border: 0;
    border-bottom: 1px #e6e6e6 solid;
    font-size: 12px;
    position: relative;
    z-index: 200;
    color: #333;
}
.c-topbar img.icon{
	width: 20px;
	height: 20px;
}
/* .page-product .c-header{
	background-color: #0e0e0e;
}

.page-product .c-header .e-terms p{
	color: #b99a64
} */
/* .page-product .c-topnavs{
	display: none;

} */
.c-header{
	padding: 25px 0;
}
.c-header .u-left{
	align-items: center;
}
.c-header .u-left img.logo{
	width: 220px;
}
.c-header .e-terms{
	border-left: 2px solid #ccc;
	padding-left: 15px;
}
.c-header .e-terms p{
	/* display: block; */
	color: #666;
}
.c-header .e-terms p.main{
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 3px;
}
.c-header .e-terms .label{
	margin: 0 5px;
}
.c-header .e-card{
	cursor: pointer;
}
.c-header .e-card .tips-text{
	opacity: 0;
}
.c-header .e-card:hover .tips-text{
	opacity: 1;
}

.c-topnavs{
	position: relative;
	z-index: 10;
	/* background-color: #007878; */
	/* position:relative; */
	/* position : sticky ;
	top : 0px ;
	z-index: 99; */
	/* background-color: rgba(255, 255, 255, .5); */
	/* border-top: 2px solid #003041; */
	/* border-bottom: 2px solid #003041; */
	/* position: -webkit-sticky;
	position: sticky;
	top: 10px;
	z-index: 10; */
}
.c-topnavs .u-sticky{
	position:sticky ;
	top:10px ;
	z-index: 99;
}
.c-topnavs .content{

	color:#fff;

}
.c-topnavs .item{
	position:relative;
	/* border-right: 1px solid #003041; */
}
.c-topnavs .item>a{
	display: inline-block;
	padding: 15px 50px;
	color: #fff;
	font-size: 15px;
	/* font-weight: bold; */
}
.c-topnavs .item .label{
	position: absolute;
	display: none;
	right: -5px;
	top:-10px;
	z-index: 9;
	border-radius:0;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
	border-bottom-right-radius: 10px;
}
.c-topnavs .item:nth-child(2) .label{
	display: block;
}
.c-topnavs .item::after{
	content: '';
	width: 1px;
	height: 30px;
	right: 0;
	background-color: #3b6372;
	position:absolute;
	top: 10px;
}
.c-topnavs .item:first-child::before{
	content: '';
	width: 1px;
	height: 30px;
	left: 0;
	background-color: #3b6372;
	position:absolute;
	top: 10px;
}

.c-topnavs .item a:hover,.c-topnavs .item.hover>a{
	background-color: #025979;
	color: #fff;
	
}
.c-topnavs .sonlist{
	position:absolute;
	top: 70px;
	background-color: #fff;
	width: 100%;
	opacity: 0;
	transition: all 0.3s;
	z-index: -1;
	display: none;
}

.c-topnavs .item:hover .sonlist{
	display: block;
	opacity: 1;
	transition: all 0.3s;
	top: 52px;
	z-index: 2;
}

.c-topnavs .sonlist>a{
	text-align: center;
	display: inline-block;
	width: 100%;
	font-size: 13px;
	padding: 15px 0;
}
.m-index-banner .swiper {
	width: 100%;
	height: 100%;
	z-index:-5!important;
}

.swiper-slide {
	text-align: center;
	font-size: 18px;
	background: #fff;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	z-index:0;
	overflow: hidden;
  }
.m-index-banner .swiper-slide img {
	display: block;
	/* width: 100%; */
	height: 100%;
	object-fit: cover;
	z-index:0;
}
.modular{
	margin: 20px 0;
	position: relative;
}
.modular .u-title{
	text-align: center;
	margin-bottom: 15px;
	font-weight: bold;
	font-size: 26px;
	letter-spacing:3px
}
.m-rec-product{
	padding: 20px 0;
	background: url("../images/rec-bg.jpg") no-repeat center center;
}
.m-rec-product .u-item{
	width: 24%;
	/* background-color: #f3f3f3; */
	/* background-color: #007878; */
	background-color: rgba(0, 120, 120, .8);
	position: relative;
	/* border-radius: 5px; */
	height: 100px;
	/* padding: 15px; */
	cursor: pointer;

}
.m-rec-product .u-item:hover{
	background-color: #007878;
}
.m-rec-product .u-item:hover img{
	top: -30px;
}
/* .m-rec-product .u-item:nth-child(1){
	background-color: #ddeee8;
}
.m-rec-product .u-item:nth-child(2){
	background-color: #f3f9f9;
}
.m-rec-product .u-item:nth-child(3){
	background-color: #dce1f7;
}
.m-rec-product .u-item:nth-child(4){
	background-color: #ddeee8;
} */
/* .m-rec-product .u-item:nth-child(1),.m-rec-product .u-item:nth-child(4){
	background: linear-gradient(90deg, #2e64a7 , #8fb5e3);
}
.m-rec-product .u-item:nth-child(2),.m-rec-product .u-item:nth-child(3){
	background: linear-gradient(90deg, #007878 , #90b2e5);
} */
/* .m-rec-product .u-item:nth-child(3){
	background: linear-gradient(90deg, #00384c , #90b2e5);
} */
.m-rec-product .u-item h4{
	margin: 15px 10px 5px;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	/* text-indent: 2px; */
}
.m-rec-product .u-item p{
	font-size: 12px;
	margin: 0 10px;
	color: #eee;
	opacity: .5;
}
.m-rec-product .u-item .label{
	margin: 0 10px;
	margin-top: 10px;
	border-radius: 5px;
}
.m-rec-product .u-item img{
	position:absolute;
    right: 10px;
    top: -10px;
    width: 120px;
	transition: all .5s;
}
div.zoomDiv {
	z-index: 999;
	position: absolute;
	top: 0;
	left: 0;
	background: #ffffff;
	border: 1px solid #ddd;
	display: none;
	text-align: center;
	overflow: hidden;
	font-size: 0;
}

div.zoomMask {
	position: absolute;
	background: url(../images/mask.png) repeat scroll 0 0 transparent;
	cursor: move;
	z-index: 1;
}

.page-product{

}
.m-crumbs{
	margin: 15px 0;
	font-size: 14px;
	color: #666;
	border-top:1px solid #eee;
	border-bottom:1px solid #eee;
	padding:10px 0;
}
.m-crumbs a{
	color: #666;
}
.page-product .head-col .left-warp{
	width: 1000px;
}
.page-product .head-col .right-warp{
	width: 200px;
	padding-left: 20px;
}

.m-product{
	margin-top: 15px;
}
.m-product-slide{
	width: 380px;
	overflow: hidden;
}
.m-product-slide .slide-view{
	overflow: hidden;
}
.m-product-slide .slide-view .swiper-container {
	width: 100%;
	/* border: #e22434 1px solid; */
}
.m-product-slide .slide-view .imgauto{
	width: 100%;
	height: 310px;
	line-height: 310px;
	position: relative;
}
.m-product-slide .slide-view .imgauto img{
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

.m-product-slide .slide-view .imgauto video{
	width: 100%;
	height: 100%;
	background: #000;
}

.m-product-slide .slide-view .imgauto .label-video{
	background-color: rgba(0, 0, 0, .8);
	color:#fff;
	position: absolute;
	top: 20px;
	right: 40px;
	z-index: 66;
	line-height: 25px;
	font-size: 13px;
	border-radius: 25px;
	padding: 3px 10px;
	text-align: center;
	padding-left: 10px;
}
.m-product-slide .slide-view .imgauto .label-video b{
	color:red
}

.m-product-slide .slide-preview {
	width: 100%;
	margin-top: 10px;
	position: relative;
}

.m-product-slide .slide-preview .swiper-container {
	margin: 0 30px;
	overflow: hidden;
}

.m-product-slide .slide-preview .swiper-slide .imgauto {
	width: 100%;
	height: 80px;
	border: 1px solid #ddd;
	text-align: center;
	cursor: pointer;
	position: relative;
}

.m-product-slide .slide-preview .swiper-slide .imgauto img {
	max-width: 100%;
	max-height: 100%;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	z-index: -1;
}

.m-product-slide .slide-preview .arrow-left {
	background: url(../images/feel3.png) no-repeat left top;
	position: absolute;
	left: 0;
	top: 50%;
	margin-top: -9px;
	width: 9px;
	height: 18px;
	z-index: 10;
}

.m-product-slide .slide-preview .arrow-right {
	background: url(../images/feel4.png) no-repeat left bottom;
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -9px;
	width: 9px;
	height: 18px;
	z-index: 10;
}

.m-product-slide .slide-preview img {
	padding: 1px;
}

.m-product-slide .slide-preview .active-nav .imgauto {
	border: 1px solid #007878;
}
.m-product-slide .slide-preview .swiper-slide .imgauto i.iconfont{
    /* width: 100px; */
    font-size: 40px;
    top: ceil(50%);
    /* top: 0; */
    position: relative;
    top: ca;
    top: calc(100% - 70px);
    opacity: .6;
}
.m-product-infos{
	margin-left: 15px;
	width: 600px;
}
.m-product-infos .e-title{
	font-size: 20px;
	font-weight: bold;
}
.m-product-infos .e-desc{
	font-size: 13px;
	color: #666;
	margin: 15px 0;
}
.m-product-infos .u-price{
	width: 100%;
	border-top: 2px solid #ffefe4;
    background: #f3f3f3;
    padding: 6px 0;
}
/* .m-product-infos .u-price .label{
	position: relative;
} */
.m-product-infos .u-price p{
	font-size: 13px;
	color: #999;
	line-height: 45px;
}
.m-product-infos .u-price p span.title{
    display: inline-block;
    width: 70px;
    margin-left: 15px;
}
.m-product-infos .u-price p span.desc{
	color: #333;
}
.m-product-infos .u-price p b{
    font-size: 24px;
    color: #f60;
    vertical-align: top;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.m-product-infos .u-rollorder{
	margin: 10px 0;
	height: 30px;
	overflow: hidden;
	/* padding: 0 15px; */
}
.m-product-infos .u-rollorder .swiper-slide{
	height: 30px;
	background: transparent!important;
}
.m-product-infos .u-rollorder .e-roll-item{
	width: 100%;
	font-size: 14px;
	color:#666
}
.m-product-infos .u-rollorder .e-roll-item span{
	color: #999;
	font-size: 13px;
}
.m-product-infos .u-btns{
	/* margin-top: 20px; */
}
.m-product-infos .e-btn{
	padding: 10px 55px;
    font-size: 14px;
    border-radius: 3px;
    cursor: pointer;
	margin-right: 15px;
}
.m-product-infos .e-tips{
	color: red;
	font-size: 12px;
	margin: 15px 0;
}
.right-warp .modular{
	
}

.m-product-codes{

	text-align: center;
	border:1px solid #ccc;
	position: relative;
	padding-top: 10px;
	margin: 10px 0;
}
.m-product-codes .e-title{
	position: absolute;
	top: -10px;
	width: 100px;
	text-align: center;
	left: 50%;
	margin-left: -50px;
	background-color: #fff;
}
.m-product-codes img{
	width: 150px;
}
.m-product-codes .e-desc{
	font-size: 12px;
	padding:3px 10px;
	border-radius: 25px;
	display: inline-block;
	margin-bottom: 10px;
}

.page-product .content-col .left-warp{
	width: 300px;
}
.page-product .content-col .right-warp{
	width:	900px;
	padding-left: 20px;
}
.m-details{
	border:1px solid #eee;
	background-color: #fff;
}
.m-details .u-title{
	background-color: #eee;
	position: sticky;
    top: 0;
	
}
.m-details .u-title span.c-icons{
	padding: 15px;
	font-size: 14px;
	font-weight: bold;
	border-top: 2px solid #00384c;
	background-color: #fff;
}
.m-details .u-title span.e-btn{
	padding: 5px 15px;
	margin-right: 15px;
	border-radius: 3px;
	display: inline-block;
	cursor: pointer;
}
.m-details .u-title span.c-icons i{
	font-weight: 400;
}

.m-details .e-content{
	padding: 20px;
}
.m-details .e-content img{
	max-width: 100%;
}

.c-sidebar{

}
.c-sidebar .sidebar{
	width: 100%;
    box-sizing: border-box;
    background: #FFF;
    overflow: hidden;
    border: #eee solid 1px;
    margin-bottom: 15px;
}
.c-sidebar .sidebar .e-title{
    height: 50px;
    background: #FFF;
    line-height: 50px;
    border: 0;
	background-color: #f3f3f3;
    /* background-image: linear-gradient(to right, rgba(202, 167, 120, 0.25), #FFF); */
	padding:0 15px;
	align-items: center;
}
.c-sidebar .sidebar .e-title a.more{
	font-size: 12px;
	color: #666;
}
.c-sidebar .sidebar .e-title h2{
	
	font-size: 16px;
	font-weight: bold;
}
.m-cates .content ul li{
	padding: 10px 15px;
	border-bottom: 1px dashed #eee;
}

.m-reclist .imgwarp{
	height: 80px;
	overflow: hidden;
}
.m-reclist .content ul{
	padding: 4%;
}
.m-reclist .content ul li{
	display: inline-block;
	width: 46%;
	margin-bottom: 10px;
}
.m-reclist .content ul li p{
	font-size: 12px;
	background-color: #f3f3f3;
	padding: 3px 5px;
}
.m-reclist .content img{
	max-width: 100%;
}



.animat{
	position:relative;
	animation:mymove 5s infinite;
	-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
	animation-direction:alternate;/*轮流反向播放动画。*/
	animation-timing-function: ease-in-out; /*动画的速度曲线*/
	/* Safari 和 Chrome */
	-webkit-animation:mymove 5s infinite;
	-webkit-animation-direction:alternate;/*轮流反向播放动画。*/
	-webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/
}
@keyframes mymove
{
	0%{
	transform: scale(1);  /*开始为原始大小*/
	}
	25%{
		transform: scale(1.1); /*放大1.1倍*/
	}
	50%{
		transform: scale(1);
	}
	75%{
		transform: scale(1.1);
	}

}

@-webkit-keyframes mymove /*Safari and Chrome*/
{
	0%{
	transform: scale(1);  /*开始为原始大小*/
	}
	25%{
		transform: scale(1.1); /*放大1.1倍*/
	}
	50%{
		transform: scale(1);
	}
	75%{
		transform: scale(1.1);
	}
}