@font-face {
    font-family: siyuan;
    src: url(../resource/siyuan.OTF)
}
#main{
	width: 100%;
	height: auto;
	overflow: hidden;
}
#nameplate{
	width: 100%;
	height: 140px;
	background: #f6f7f8;
	padding-top: 50px;
}
.nameplate{
	width: 67%;
	height: 100%;
	margin: auto;
	overflow: hidden;
}
.nameplate .fl{
	float: left;
}
.nameplate .fl h4{
	margin: 0;
	line-height: 22px;
	color: #00B3C4;
	font-size: 22px;
	width: 80%;
	margin-left: 25%;
}
.nameplate .fl h4 span{
	font-size: 14px;
	color: #aeaeae;
}
.nameplate .fr{
	float: right;
	font-size: 16px;
}
.nameplate .fr a{
	color: #333;
}
.nameplate .fr a:hover{
	text-decoration: none;
}
.nameplate .fr span{
	padding:4px 15px;
	
}
.nameplate .fr span.bor-bot{
	display: inline-block;
	height: 100%;
	
}


.nameplate .fr span.bg-red{
	background: #00B3C4;
	color: #fff;
	border-radius: 12px;
}
.nameplate .fr span.bg-red a{
	
	color: #fff;
	
}
#menu {
	position:fixed;
	top:45%;
	right:40px;
	width:30px;
	height: auto;
	z-index: 1000;
}
#menu ul{
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
}
#menu ul li {
	position:relative;
	width:10px;
	height:10px;
	list-style:none;
	border-radius: 5px;
	cursor:pointer;
	background: #bcbcbc;
	margin-top: 10px;
}
#menu ul li.active {	
	background:#4bb2e5;
}

.main{
	width: 100%;
	height: auto;
}
.main_img{
	width: 100%;
	height: 9.67rem;
	position: relative;
}
.main_img img{
	width: 100%;
	height: auto;
}
.main_img .txt{
	position: absolute;
	top: 13%;
	left: 0;
	right: 0;
	margin:0 auto;
}

.main_img .txt h2{
	text-align: center;

	line-height: 46px;
	font-family: siyuan;
}
.main_img .txt.ts7 h2{
	margin: 0;
}

.main_img .txt.active h2{
	font-size: 0.4rem;
	opacity: 1;
	font-weight: normal;
}
.main_img .txt>p{
	text-align: center;
	/*opacity: 0;
	transition: all 1.5s ease-in-out;*/
	margin: 0;
	line-height: 22px;
	font-family: siyuan;
}
.main_img .txt.active p{
	opacity: 1;
}
.main_img .txt.active p span{font-family: siyuan;}
.main_img .txt.ts h2,.main_img .txt.ts p{	
	text-align: left;
	padding-left: 20%;
	margin: 0;
}
.main_img .txt.ts1 h2,.main_img .txt.ts1 p{	
	text-align: right;
	padding-right: 25%;
}
.main_img .txt.ts6{
	top: 25%;
}
.main_img .txt.ts9{
	width: 100%;
	top: 10%;
	left: 0%;
}
.main_img .txt.ts6 h2,.main_img .txt.ts6 p{	
	text-align: left;
	padding-left: 47%;
}
.main_img .txt.ts6 h2{font-size: 30px;}
.main_img .txt.ts2{
	position: absolute;
	top: 40%;	
	left: 55%;
	width: 30%;
	margin: 0;
}

.main_img .txt.ts3{
	position: absolute;
	top: 15%;	
	width: 100%;
	margin: 0;
}
.main_img .txt.ts4{
	position: absolute;
	top: 10%;	
	width: 100%;
	margin: 0;
}
.main_img .txt.ts4 h2,.main_img .txt.ts4 p{
	text-align: left;
}
/*产品规格*/
#cp_main{
	width: 67%;
	margin: auto;
}
#cp_main .cp_main{
	border-bottom: 1px solid #d6d6d6;
}
#cp_main .cp_main_xl{
	padding: 5% 1.5%;	
}
#cp_main .cp_main_xl .txt_p{
	color: #5e5e5f;
	padding-left: 14px;
	width: 16%;
	float: left;
	margin: 0;
}
#cp_main .cp_main_xl .cp_center{	
	width: 36%;
	padding-right: 11%;
	float: left;
}
#cp_main .cp_main_xl .cp_right{
	width: 40%;
	padding-left: 5%;
	float: left;
}
.yuan{
	width: 45px;
	height: 45px;
	border-radius:50%;
	border: 1px solid #a9a9a9;
}
.yuan1{
	width: 45px;
	height: 45px;
	border-radius:50%;
	border: 1px solid #a9a9a9;
	background: #000;
}

#cp_main .cp_main_xl .cp_img{
	width: 73%;
	height: auto;
	margin: auto;
}
#cp_main .cp_main_xl .cp_img img{
	width: 100%;
	height: auto;
}

.box{
	width: 100%;
	padding-bottom: 35px;
}
.box p{
	margin: 0;
}
.cpc_left,.cpc_right{
	float: left;
	width: 35%;
}


.nameplate .fr a.col{
	color: #333;
}
.nameplate .fr a.col:hover{
	color: #00b3c4;
}
.imgbox1,.imgbox2{
	width: 30%;
	height: auto;
	position: absolute;
}
.imgbox1{
	top: 32%;
	left: 28%;
	transform: translateX(-100px);
	transition: all 1s ease-in-out;
}
.imgbox2{
	top: 35%;
	left: 42%;
	z-index: 10;
	transform: translateX(100px);
	transition: all 1s ease-in-out;
}
.imgbox1.active,.imgbox2.active{
	transform: translateX(0px);
}

.checkScale{width: 60%;margin: 25px auto;display: flex;justify-content: space-between;padding: 0;}
.checkScale li{overflow: hidden;line-height: 0;}
.checkScale li span{display: inline-block;line-height: 150%;color: #333;font-size: .22rem;color: #FFFFFF;}
.checkScale li div{display: inline-block;vertical-align: bottom;width: .35rem;cursor: pointer;height: .35rem;border-radius: 50%;border: 1px solid #fff;}
.checkScale li div::after{margin: 0.025rem 0 0 0.025rem;display: block;background-color: #fff;content: "";width: .28rem;height: .28rem;border-radius: 50%;}
.checkScale li.active span{color: #333;}
.checkScale li:nth-of-type(1).active div{border-color: #1761b2;}
.checkScale li:nth-of-type(2).active div{border-color: #80a6da;}
.checkScale li:nth-of-type(3).active div{border-color: #000;}
.checkScale li:nth-of-type(1).active div::after{background-image: linear-gradient(#1761b2,#494ea0,#b574aa);}
.checkScale li:nth-of-type(2).active div::after{background-image: linear-gradient(#80a6da,#95c2e3,#afe4ec);}
.checkScale li:nth-of-type(3).active div::after{background-image: linear-gradient(#5d4347,#cca277,#de774a);}

.checkExterial{position: absolute;bottom: 30px;left: 30%;width: 40%;display: flex;justify-content: space-between;padding: 0;}
.checkExterial li{display: flex;justify-content: space-between;cursor: pointer;}
.checkExterial li div{width: 40px;height: 40px;border-radius: 50%;background-color: #969696;}
.checkExterial li span{display: inline-block;line-height: 40px;margin-left: 10px;}

.cs20c_minilogo{width: 30%;margin: 0 auto;display: flex;justify-content: space-between;padding: 0;}
.cs20c_minilogo li{text-align: center;}
.cs20c_minilogo li img{width: .6rem;}
.cs20c_minilogo li p{font-size: 13px;color: rgba(0,0,0,.5);text-align: center;}

.indicator_wrap{width: 1rem!important;text-align: center;}
.indicator_wrap img{width:.6rem;}
.indicator_wrap p{width: 1rem;font-size: .16rem;color:#333333;line-height: 120%;text-align: center;font-family: siyuan;}

.wave{
	 -webkit-animation: warn 2s ease-out;
    -moz-animation: warn 2s ease-out;
    animation: warn 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.wave1{
	-webkit-animation: warn1 2s ease-out;
    -moz-animation: warn1 2s ease-out;
    animation: warn1 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.wave2{
	-webkit-animation: warn2 2s ease-out;
    -moz-animation: warn2 2s ease-out;
    animation: warn2 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.wave3{
	-webkit-animation: warn3 2s ease-out;
    -moz-animation: warn3 2s ease-out;
    animation: warn3 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
.wave4{
	-webkit-animation: warn4 2s ease-out;
    -moz-animation: warn4 2s ease-out;
    animation: warn4 2s ease-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}
@keyframes warn4 {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        opacity: 0.0;
    }
}
@keyframes warn3 {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        opacity: 0.0;
    }
}
@keyframes warn2 {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.2);
        -webkit-transform: scale(1.2));
        opacity: 0.0;
    }
}
@keyframes warn1 {
    0% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0.5;
    }
    100% {
        transform: scale(1.2);
        -webkit-transform: scale(1.2);
        opacity: 0.0;
    }
}
@keyframes warn {
    0% {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0.0;
    }
}
@keyframes warn1 {
    0% {
        transform: scale(0.8);
        -webkit-transform: scale(0.8);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        -webkit-transform: scale(1);
        opacity: 0.0;
    }
}
.checkExterior{width: 100%;height: 9.67rem;background: url(../img/x2_1.png) no-repeat;background-size:100% 100%;}

@media only screen and (min-width: 1400px) {
	.main_img .txt h2{
		font-size: 42px;
		line-height: 60px;
	}
	.main_img .txt p{
		font-size: 18px;
		line-height: 24px;
	}
	.main_img:nth-of-type(1) .txt h2{
		font-size: 0.6rem;
		line-height: 120%;
		color: #333333;
	}
	.main_img:nth-of-type(1) .txt p:nth-of-type(1){
		font-size: .28rem;
		line-height: 32px;
	}
	.main_img:nth-of-type(1) .txt p:nth-of-type(2){
		font-size: 18px;
		line-height: 24px;
	}
}
.wifi-symbol{
	position: absolute;
	bottom: 23%;
	right: 39%;
	width: 50px;
	height: 50px;
	transform: rotate(-135deg);
	overflow: hidden;
}
.wifi-circle{
    border: 4px solid #FFFFFF;
    border-radius: 50%;
    position: absolute;
}
.first_wifi{top: 0;left: 0;opacity: 0;width: 9px;height: 9px;animation: run1 5s linear infinite;}
.second_wifi{width: 40px;opacity: 0;height: 40px;top: -15px;left: -15px;animation: run2 5s linear infinite;animation-delay:1s;}
.third_wifi{width: 60px;opacity: 0;height: 60px;top: -23px;left: -23px;animation: run3 5s linear infinite;animation-delay:2s;}
.fourth_wifi{width: 80px;opacity: 0;height: 80px;top: -30px;left: -30px;animation: run4 5s linear infinite;animation-delay:3s;}
@keyframes run1{
	 0% {
	 	opacity: 1;
	 }
	 99% {
	 	opacity: 1;
	 }
	 100% {
	 	opacity: 0;
	 }
}
@keyframes run2{
	 0% {
	 	opacity: 1;
	 }
	 99% {
	 	opacity: 0;
	 }
	 100% {
	 	opacity: 1;
	 }
}
@keyframes run3{
	 0% {
	 	opacity: 1;
	 }
	 99% {
	 	opacity: 0;
	 }
	 100% {
	 	opacity: 1;
	 }
}
@keyframes run4{
	 0% {
	 	opacity: 1;
	 }
	 99% {
	 	opacity: 0;
	 }
	 100% {
	 	opacity: 1;
	 }
}

.xScale{position: absolute;bottom: 10%;left: 30%;padding: 0;list-style: none;width: 40%;height: 4.65rem;}
.xScale li{transition: all 1s linear;line-height: 0;}
.xScale li:nth-of-type(7){transform: translateY(0.2rem);}
.xScale li:nth-of-type(6){transform: translateY(0.3rem);}
.xScale li:nth-of-type(5){transform: translateY(0.9rem);}
.xScale li:nth-of-type(4){transform: translateY(1.1rem);}
.xScale li:nth-of-type(3){transform: translateY(1.2rem);}
.xScale li:nth-of-type(2){transform: translateY(1.3rem);}
.xScale li:nth-of-type(1){transform: translateY(1.3rem);}
.xScale li.active{transform: translateY(0);}
.xScale li:nth-of-type(1).active{transform: translateY(-0.35rem);}
.xScale li:nth-of-type(2).active{transform: translateY(-0.25rem);}
.xScale li:nth-of-type(3).active{transform: translateY(-0.25rem);}
.xScale li:nth-of-type(6).active{transform: translateY(0.2rem);}
.xScale li:nth-of-type(5).active{transform: translateY(0.2rem);}

.cs20cScale{list-style: none;width: 70%;position: absolute;left: 15%;bottom: 10%;}
.cs20cScale li{transition: all 1s linear;line-height: 0;}
.cs20cScale li.active{transform: translateY(0);}
.cs20cScale li:nth-of-type(6){transform: translateY(.3rem);}
.cs20cScale li:nth-of-type(5){transform: translateY(.9rem);}
.cs20cScale li:nth-of-type(4){transform: translateY(1.1rem);}
.cs20cScale li:nth-of-type(3){transform: translateY(1.2rem);}
.cs20cScale li:nth-of-type(2){transform: translateY(1.3rem);}
.cs20cScale li:nth-of-type(1){transform: translateY(1.3rem);}

.cs20cScale li:nth-of-type(1).active{transform: translateY(-0.1rem);}
.cs20cScale li:nth-of-type(2).active{transform: translateY(0px);}
.cs20cScale li:nth-of-type(3).active{transform: translateY(0px);}
.cs20cScale li:nth-of-type(4).active{transform: translateY(0px);}
.cs20cScale li:nth-of-type(6).active{transform: translateY(-0.1rem);}
.cs20cScale li:nth-of-type(7).active{transform: translateY(0.1rem);}
.cs20cScale li:nth-of-type(5).active{transform: translateY(0px);}


@media only screen and (max-width: 750px) {
	#nameplate{padding: 0;height: auto;}
	.nameplate{padding: .4rem 0;width: 92%;}
	.nameplate .fl{float: none;}
	.nameplate .fl h4{margin: 0;}
	.nameplate .fr{float: left;}
	.nameplate .fr span.bor-bot{padding: 4px 15px 4px 0;}
	
	/*cs20c*/
	.main_img{padding-bottom: 0!important;height: auto;}
	.main_img .txt.ts3{width: 100%;left: 0;top: 7%!important;}
	.main_img:nth-of-type(1) .txt p:nth-of-type(1){font-size: 20px;margin-bottom:5px;}
	
	.main_img:nth-of-type(2) .txt{width: 92%;top: 7%;}
	.main_img:nth-of-type(2) .txt h2{text-align: left;line-height: 110%;}
	.main_img:nth-of-type(2) .txt p{text-align: left;}
	
	.main_img:nth-of-type(3) .txt{top: 6%;}
	.main_img:nth-of-type(3) .txt h2{text-align: left;line-height: 110%;}
	.main_img:nth-of-type(3) .txt p{text-align: left;}
	
	.main_img:nth-of-type(4) .txt{width: 92%;top: 7%;}
	.main_img:nth-of-type(4) .txt h2{text-align: left;line-height: 110%;}
	.main_img:nth-of-type(4) .txt p{text-align: left;}
	
	.main_img:nth-of-type(5) .txt{width: 92%;top: 7%!important;}
	.main_img:nth-of-type(5) .txt h2{text-align: left;line-height: 110%;padding: 0;}
	.main_img:nth-of-type(5) .txt p{text-align: left;padding: 0;color: #676767;}
	
	.main_img:nth-of-type(6) .txt{width: 92%;top: 0%!important;}
	.main_img:nth-of-type(6) .txt h2{line-height: 110%;}
	.main_img:nth-of-type(6) .txt .line{width: 10%; height:2px;background-color: #FFFFFF;margin: 1rem auto;}
	
	
	/*cs10c*/
    .mini_img:nth-of-type(1) .txt{width: 92%;top: 10%;margin-left: 5%;}
	.mini_img:nth-of-type(1) .txt h2{font-size: 0.6rem;text-align: center;line-height: 120%;color: #fff!important;}
	.mini_img:nth-of-type(1) .txt p:nth-of-type{text-align: center;color: #fff!important;font-weight: bold;}
	.mini_img:nth-of-type(1) .txt p:nth-of-type(1) span{line-height: 135%;border-radius:7px!important;color: #353535;border-color: #353535!important;}
	
	.mini_img:nth-of-type(2) .txt{width: 100%;top: 7%;}
	.mini_img:nth-of-type(2) .txt h2{font-size: .5rem;text-align: left;line-height: 110%;important;color: #FFFFFF!important;text-align: center;}
	.mini_img:nth-of-type(2) .txt p{text-align: center;width: 90%;margin-left: 5%;line-height: 150%;}
	
	.mini_img:nth-of-type(3) .txt{width: 92%;top: 6%;margin-left: 4%;margin-top: 10px!important;}
	.mini_img:nth-of-type(3) .txt h2{font-size: 3rem;text-align: center;line-height: 110%;margin-bottom: 1rem!important;}
	.mini_img:nth-of-type(3) .txt p{text-align: center;}
	
	.mini_img:nth-of-type(4) .txt{width: 100%;}
	.mini_img:nth-of-type(4) .txt h2{width: 100%;position: absolute;top: 3%;left: 0;font-size: .5rem;text-align: center;line-height: 110%;margin-bottom: 1rem!important;color: #333!important;}
	.mini_img:nth-of-type(4) .txt p:nth-of-type(2){font-size: .35rem;width: 90%;position: absolute;margin:0 5%;top: 10%;line-height: 150%;color: #333;text-align: center;}

    .mini_img:nth-of-type(5) .txt{width: 92%;top: 3%!important;margin-left: 4%;}
	.mini_img:nth-of-type(5) .txt h2{font-size: .5rem;text-align: center;line-height: 110%;color: #333;}
	.mini_img:nth-of-type(5) .txt p{text-align: center;font-size: .35rem;color: #333;line-height: 150%;}
	
	.mini_img:nth-of-type(6) .txt{width: 100%;top: 15%;}
	.mini_img:nth-of-type(6) .txt h2{font-size: 3rem;text-align: left;line-height: 110%;}
	.mini_img:nth-of-type(6) .txt p{text-align: center;margin-top: 5%;font-size: .35rem;line-height: 150%;}
	
	.mini_img:nth-of-type(7) .txt{width: 92%;top: 6%;margin-left: 4%;}
	.mini_img:nth-of-type(7) .txt h2{font-size: 2.5rem;text-align: center;line-height: 110%;margin-bottom: 1rem!important;}
	.mini_img:nth-of-type(7) .txt p{text-align: center;font-size: 12px;}
	
	/*x*/
	.minx:nth-of-type(1) .txt{width: 100%;text-align: center;left: 0;top: 6%;}
	.minx:nth-of-type(1) .txt h2{font-size: .6rem;}
	.minx:nth-of-type(1) .txt p{font-size: .35rem;}
	
	.minx:nth-of-type(2) .txt{width: 92%;text-align: center;left: 0;top: 6%;}
	.minx:nth-of-type(2) .txt h2{font-size: 3rem;}
	.minx:nth-of-type(2) .txt p{font-size: 1.3rem;}
	
	.minx:nth-of-type(3) .txt{width: 92%;text-align: center;left: 0;top: 5%;}
	.minx:nth-of-type(3) .txt h2{font-size: .5rem;color: #333;text-align: center;}
	.minx:nth-of-type(3) .txt p{font-size: .35rem;color: #333;line-height: 150%;text-align: center;}
	
	.minx:nth-of-type(4) .txt{width: 92%;text-align: center;left: 0;top: 5%;}
	.minx:nth-of-type(4) .txt h2{font-size: 3rem;}
	.minx:nth-of-type(4) .txt p{font-size: 1.3rem;}
	
	.minx:nth-of-type(5) .txt{width: 92%;text-align: center;left: 0;top: 5%!important;}
	.minx:nth-of-type(5) .txt h2{font-size: 3rem;}
	.minx:nth-of-type(5) .txt p{font-size: 1.3rem;}
	
	.minx:nth-of-type(6) .txt{width: 92%;text-align: left;left: 0;top: 5%!important;}
	.minx:nth-of-type(6) .txt h2{font-size: 3rem;text-align: left;}
	.minx:nth-of-type(6) .txt p{font-size: 1.3rem;text-align: left;}
	
	#index-main .foot-nav .fn{background-color: #FFFFFF;}
	.botlist{background-color: #FFFFFF;}
	.botlist>li:nth-of-type(1){border-top:1px solid #d3d3d3;}
	
	/*产品参数详情页兼容*/
	#cp_main{width: 92%;}
	#cp_main .cp_main_xl .txt_p{width: 100%;float: none;padding-left: 0;}
	#cp_main .cp_main_xl .cp_center{margin: 0 auto;float: none;padding:0;width: 85%;}
	#cp_main .cp_main_xl .cp_left{width: 80%;margin: 0 auto;padding: 0;}
	#cp_main .cp_main_xl .cp_right{width: 80%;margin: 0 auto;padding: 0;float: none;}
	
	.cs20c_minilogo li img{width: .7rem;}
	.indicator_wrap img{width: .7rem;}
	.indicator_wrap p{font-size: .22rem;color:#333333;line-height: 120%;font-family: siyuan;}
	
	.checkScale li{text-align: center;}
	.checkScale li div::after {
	    margin: 0.01rem 0 0 0.015rem;
	    background-color: #969696;
	}
	.checkScale li div {
	    border: 1px solid #969696;
	}
	.checkScale li:nth-of-type(3).active div::after {
	    background-image: linear-gradient(#5d4347,#cca277,#de774a);
	}
	.checkScale li:nth-of-type(3).active div{
	    border-color: #de774a;
	}
	.checkScale li span{display:block;}
	
	.checkExterior{height: auto;background: auto;}
}

@media only screen and (max-width: 375px) {
	.nameplate .fr{font-size: 13px;}
	
	.main_img .txt.ts3{left: 0;top: 5%!important;}
	.main_img .txt.ts3 h2{margin: 8px auto;}

	
	.main_img:nth-of-type(3) .txt h2{margin: 0;}
	.main_img:nth-of-type(5) .txt h2{margin-bottom: 0rem!important;}
}