/* 样式模板 */

.black{color: #000}.white{color: #fff}









.fs78{font-size: 78px}
.fs32{font-size: 32px}
.fs24{font-size: 24px}
.fs20{font-size: 20px}
.fs18{font-size: 18px}
.fs14{font-size: 14px}
.mt20{margin-top: 20px}
.mt50{margin-top: 50px}
.lh{line-height: 1.14;}
.lh34{line-height: 34px}
.lh28{line-height: 28px}
.fw7{font-weight: 700}
.c3{color: #333}
.c9{color: #999}
.ts4 {
    transition: all .4s ease;
}
@media all and (max-width:1700px){
	.fs78,.fs79,.fs80,.fs81{font-size: 62px}
	.fs32,.fs33,.fs34{font-size: 32px}
	.mt20{margin-top: 18px} 
	.mt48,.mt50{margin-top: 42px}
}
@media all and (max-width:1590px){
	.fs78,.fs79,.fs80,.fs81{font-size: 52px}
	.fs32,.fs33,.fs34{font-size: 26px}
	.fs23,.fs24,.fs25{font-size: 20px}
	.fs19,.fs20,.fs21,.fs22{font-size: 18px}
	.fs17,.fs18{font-size: 16px}
	.mt20{margin-top: 14px}
	.mt48,.mt50{margin-top: 36px}
}
@media all and (max-width:1270px){
	.fs32,.fs33,.fs34{font-size: 24px}
	.fs23,.fs24,.fs25{font-size: 18px}
	.fs19,.fs20,.fs21,.fs22{font-size: 16px}
	.fs16,.fs17,.fs18{font-size: 15px}
	.mt20{margin-top: 12px}
	.mt48,.mt50{margin-top: 28px}
}
@media all and (max-width:720px){
	.fs78,.fs79,.fs80,.fs81{font-size:32px}
	.fs31,.fs32,.fs33,.fs34,.fs35{font-size:17px}
	.fs23,.fs24,.fs25,.fs26{font-size:15px}
	.fs19,.fs20,.fs21,.fs22{font-size:14px}
	.fs16,.fs17,.fs18{font-size:13px}
	.fs14{font-size: 12px}
	.mt20{margin-top:8px}
	.mt44,.mt46,.mt48,.mt50{margin-top:18px}
	
}
.pos {
    position: relative;
}
.flex{display: flex;flex-wrap: wrap}

.center{text-align: center}

.flex-center{display: flex;align-items: center;justify-content: center;text-align: center}

/*.indPro::before{content: "";position: absolute;left: 0;top: 0;width: calc(1440px * 0.73 + (100vw - 1440px)/2);height: 100%;background: #fafbfc url('../images/picture/indPro-bg2.png') no-repeat center bottom/50% auto;}
.indPro::after{content: "";position: absolute;right: 0;top: 0;width: calc(1440px * 0.27 + (100vw - 1440px)/2);height: 100%;background: rgb(244, 245, 249) url('../images/picture/indPro-bg.png') no-repeat left center/auto 100%;}*/
.indPro::before{content: "";position: absolute;left: 0;top: 0;/*width: 62.8%;*/width: 68%;height: 100%;background: #fafbfc url('../images/picture/indPro-bg2.png?v=1.3') no-repeat center bottom/50% auto;}
.indPro::after{content: "";position: absolute;right: 0;top: 0;/*width: 37.2%;*/width: 32%;height: 100%;background: rgb(244, 245, 249) url('../images/picture/indPro-bg.png') no-repeat left center/auto 100%;}
.indPro-next{z-index: 5; border-radius: 50%;border: 1px solid transparent; width: 50px;height: 50px;position: absolute;transform: rotate(180deg); left: 0;/*top: 42%;*/ top: calc(42% + 35px); user-select: none;cursor: pointer; background: url(../images/picture/comBtn-icon5.png) center no-repeat; background-size: 30% auto;box-sizing: border-box; border: rgba(0,0,0,0.1) solid 2px;}
.indPro-prev{z-index: 5; border-radius: 50%;border: 1px solid transparent; width: 50px;height: 50px;position: absolute;transform: rotate(180deg); left: 0;top: calc(42% - 35px);user-select: none;cursor: pointer; background: url(../images/picture/comBtn-icon4.png) center no-repeat; background-size: 30% auto; box-sizing: border-box; border: rgba(0,0,0,0.1) solid 2px;}
.indPro-prev:hover{
	background: url(../images/picture/comBtn-icon4a.png) center no-repeat; background-size: 30% auto; border: #328b9b solid 2px;
}
.indPro-next:hover{
	background: url(../images/picture/comBtn-icon5a.png) center no-repeat; background-size: 30% auto; border: #328b9b solid 2px;
}
.indPro-prev.swiper-button-disabled{
	opacity: .35;
    cursor: auto;
    pointer-events: none;    
}
.indPro-next.swiper-button-disabled{
	opacity: .35;
    cursor: auto;
    pointer-events: none;
}

.indPro{position: relative; padding-top: 120px; padding-bottom: 170px;}
.indPro .box{position: relative;z-index: 2;}
.indPro-con{display: none;}
.indPro-con:first-child{display: block;}
.indPro-con .indPro-con-box{
	position: relative;
}
.indPro-gallery{/*width: 66%;*/ width: 72%;}
.indPro-gallery .swiper-container{height: 570px;}
.indPro-gallery-slide{height: 100%;align-items: center;padding-left: 60px;}
.indPro-gallery-con{width: 300px;}
.indPro-gallery-title .title-en{position: absolute;left: 0;bottom: 16px;white-space: nowrap;color: #f7f7f7;line-height: 1;}
.indPro-gallery-title .title{position: relative;z-index: 2;}
.indPro-gallery-img{flex: 1;height: 100%;position:relative;z-index:3}
.indPro-gallery-img img{max-height: 90%;max-width: 80%;}
.indPro-thumbs{/*width: 34%;*/ width: 28%;}
.indPro-thumbs .swiper-container{height: 510px;}
.indPro-thumbs-slide{height: 100%;position: relative;padding-right: 90px;margin-right: 60px; align-items: center;user-select: none;cursor: pointer;}
.indPro-thumbs-slide .title{text-align: right;width: 100%;}
.indPro-thumbs-slide .img-box{transition: all .4s ease; position: absolute;right: 0;top: 50%;transform: translate(50%,-50%);width: 65px;height: 65px;}
.indPro-thumbs-slide .img-box::after{content: "";position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%); width: 133%;height: 133%;border-radius: 50%;border: 1px solid transparent;transition: all .4s ease;}
.indPro-thumbs-slide .img{width: 100%;height: 100%;border-radius: 50%;border: 1px solid #e0e9f3;position: relative;z-index: 2;}
.indPro-thumbs-slide .img img{max-width: 80% ;max-height: 80% ;}
.swiper-slide-active .indPro-thumbs-slide .title{font-weight: 700;color: #000;}
.swiper-slide-active .indPro-thumbs-slide .img-box{width: 90px;height: 90px;}
.swiper-slide-active .indPro-thumbs-slide .img-box::after{background: #fff;border-color: #e0e9f3;}
.swiper-slide-active .indPro-thumbs-slide .img{/*background: #fcdf00;*/ background: #46b5c5;}

.indPro-menu{
	position: absolute;
	left: 4%;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5; 
	font-size: 14px;
	max-width: 8%;
}
.indPro-menu li{display: flex; align-items: center;height: 60px;flex-wrap: nowrap;user-select: none;cursor: pointer;}
.indPro-menu .btn{position: relative;margin-right: 10px;}
.indPro-menu .btn::after{content: "";position: absolute;left: calc(50% - 3px);top: calc(50% - 3px);width: 6px;height: 6px;border-radius: 50%;background: #ccc;transition: all .4s ease;}
.indPro-menu .title{color: #a3a3a3;transition: all .4s ease;}
.circular-chart{display: block;width: 22px;transition: all .4s ease;opacity: 0;}
.circle-bg {fill: none;stroke: #eee;stroke-width: 3.8;}
.circle {fill: none;stroke-width: 2.8;stroke-dasharray: 100 100;stroke-linecap: round;}
@keyframes progress {0% {stroke-dasharray: 0 100;}}
.indPro-menu li.active .title,.indPro-menu li:hover .title{ color: #000;}
.indPro-menu li.active .btn::after{opacity: 0;}
.indPro-menu li.active .btn .circular-chart{opacity: 1;}
.indPro-menu li.active .btn .circle{animation: progress 1s ease-out forwards; /*stroke:#0099d9;*/stroke:#328b9b;}


/* 公共样式 */
.comBtn{transition: all .4s ease;width: 152px;height: 50px;border-radius: 40px;border: 2px solid #ddd; color: #000000;}
.comBtn i{display: block;position: relative;margin-left: 7px;width: 24px;height: 12px;overflow: hidden;}
.comBtn i::after,.comBtn i::before{content: "";transition: all .6s ease; display: block;width: 100%;height: 100%;background: url('../image/comBtn-icon1.png') no-repeat center/auto 100%;}
.comBtn i::before{position: absolute;right: 100%;top: 0;background-image: url('../images/picture/comBtn-icon2.png');}
.comBtn.color{border-color: #666;color: #333;}
.comBtn.color i::after, .comBtn.color i::before{background-image: url('../images/picture/comBtn-icon3.png');}
.comBtn:hover,.comBtn.hover{border-color: #fcdf00;background: #fcdf00;}
.comBtn.hover i::after{background-image: url('../images/picture/comBtn-icon2.png');}
.comBtn:hover i::after,.comBtn:hover i::before{transform: translateX(100%);}

@media all and (max-width:1800px){
	.indPro-menu{left: 2%; max-width: 10%;}
}
@media all and (max-width:1590px){
	.indPro-menu{left: 2%;}
    .indPro-menu .btn{margin-right: 15px;}
    .indPro-menu li{height: 44px;}
    .indPro-gallery{
    	/*width:62%;*/
    	width: 68%;
    }
    .indPro-thumbs{
    	/*width: 38%;*/
    	width: 32%;
    }
    .indPro-gallery .swiper-container{height: 430px;}
    .indPro-thumbs .swiper-container{height: 430px;}
    .indPro-thumbs-slide .img-box{width: 55px;height: 55px;}
    .swiper-slide-active .indPro-thumbs-slide .img-box{width: 70px;height: 70px;}
    .indPro-thumbs-slide{margin-right: 50px;padding-right: 70px;}
    /*.indPro-next{top: 39%;}
    .indPro::before{width: calc(1200px * 0.73 + (100vw - 1200px)/2);}
    .indPro::after{width: calc(1200px * 0.27 + (100vw - 1200px)/2);}*/
   	
   	.indPro-prev{
   		width: 45px;
   		height: 45px;
   	}
   	.indPro-next{
   		width: 45px;
   		height: 45px;
   		top: calc(42% + 25px);
   	}
    .indPro-gallery-slide{padding-left: 80px;}
}
@media all and (max-width:1024px){
	.indPro{
		padding-top: 150px;
	}
	.indPro::before{
		width: 67%;
	}
	.indPro::after{
		width: 33%;
	}
	.indPro-prev{
   		width: 40px;
   		height: 40px;
   		left: 4%;
   		top: calc(42% - 30px);
   	}
   	.indPro-next{
   		width: 40px;
   		height: 40px;
   		top: calc(42% + 25px);
   		left: 4%;
   	}
	.indPro-menu{padding: 0 4%; position: relative;left: auto;top: auto;transform: unset;display: flex;flex-wrap: nowrap;overflow-x: auto;white-space: nowrap;}
    .indPro-menu li{margin-left: 15px;}
    .indPro-menu li:first-child{margin-left: 0;}
    .circular-chart{width: 12px;}
    .indPro-menu .btn{margin-right: 8px;}
    .indPro-menu .btn::after{width: 4px;height: 4px;top: calc(50% - 2px);left: calc(50% - 2px);}
    .indPro .box{position: static;}
    .indPro .comTitle{position: absolute;left: 0;top: 40px;width: 100%;padding: 0 4%;}
    .indPro-gallery-slide{padding-left: 0;flex-direction: column-reverse;}
    .indPro-gallery{
    	width: 65%;
    }
    .indPro-thumbs{
    	width: 35%;
    }
}
@media all and (max-width:1000px){
	.indPro{padding: 120px 0 40px;background: #f3f5f7;}
    .indPro::after,.indPro::before{display: none;}
    .indPro-gallery{width: 100%;}
    .indPro-gallery-con{width: 100%;margin-top: 20px;}
    .indPro-gallery-img{flex: unset;width: 100%;height: 250px;}
    .indPro-gallery .swiper-container,.indPro-thumbs .swiper-container{height: auto;}
    .indPro-thumbs{width: 100%;margin-top: 40px;}
    .indPro-prev,
    .indPro-next{display: none;}
    .indPro-thumbs-slide{padding: 80px 0 0;margin: 0;flex-direction: column-reverse;align-items: center;}
    .indPro-thumbs-slide .img-box{transform: translate(50%,-50%);right: 50%;top: 50px;}
    .indPro-thumbs-slide .title{text-align: center;margin-top: 30px;}
    .comBtn{width: 110px;height: 38px;border-width: 1px;padding-left: 3px;}
    .comBtn i{margin-left: 5px;height: 10px;width: 20px;}
}





.comTitle .title{
	color: #000000;
	font-size: 48px;
    font-weight: bold;
}
.comTitle .text{
	color: #000000;
	font-size: 18px;
    margin-top: 10px;
}
@media screen and (max-width: 1600px){
	.comTitle .title{
		font-size: 40px;
	}
	.comTitle .text{
		font-size: 16px;
	}
}
@media screen and (max-width: 1024px){
	.comTitle .title{
		font-size: 32px;
	}
	.comTitle .text{
		font-size: 15px;
	}
}
@media screen and (max-width: 768px){
	.comTitle .title{
		font-size: 22px;
	}
	.comTitle .text{
		font-size: 12px;
	}
}


/**/
.comBtn,
.comBtn.hover{
	position: relative;
	z-index: 1;
	color: #ffffff;
	border: none;
	background: linear-gradient(#a2c4c9, #40b4c5);
	overflow: hidden;
    transition: all 300ms ease-in-out;
}
.comBtn:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -ms-transform: scaleX(0);
    -o-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    -moz-transform-origin: 50%;
    -ms-transform-origin: 50%;
    -o-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.comBtn:hover:before{
	background-color: rgb(14, 163, 185);
    background-image: none;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background: linear-gradient(#a2c4c9, #0ea3b9);
    -webkit-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -ms-transform: scaleX(1);
    -o-transform: scaleX(1);
    transform: scaleX(1);
}
.comBtn i{
	-webkit-filter: brightness(0) invert(1);
    filter: brightness(0) invert(1);
}
/**/