@charset "utf-8";
/* CSS Document */
/* 全局公用的css样式 */
/*---------------------------------约束样式----------------------------------------*/
*{margin:0;padding:0;word-wrap:break-word}
* img{border:0}
* hr{border:1px dashed #d2d2d2}
.swiper-next,.swiper-prev{outline:none; cursor:pointer}
@font-face{
	font-family:NotoSans;
	src:url(../fonts/NotoSans.ttf)}
@font-face{
	font-family:Roboto-L;
	src:url(../fonts/Roboto-Light.ttf)}
@font-face{
	font-family:Roboto-B;
	src:url(../fonts/Roboto-Black.ttf)}
body,h1,h2,h3,h4,h5,h6,td,th,tr{color:#333333;font-weight:normal; font-size:12px; font-family:"Microsoft YaHei"; font-family:NotoSans}
body{overflow-x:hidden}
h1,h2,h3,h4,h5,h6{display:inline}
a{text-decoration:none;outline:none;color:#333333; cursor:pointer}
a:active{star:expression(this.onFocus=this.blur())}
a:focus{outline:none}
textarea{resize:none}
a:hover{color:#71c4c8; -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:transparent}
em{font-style:normal}
img{max-width:100%}
.ul li,.ul{list-style:none}
input,textarea,select{outline:none;font-family:"Microsoft YaHei"}
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{-webkit-box-shadow:rgba(255,255,255,0) 0 0 0px 1000px;
   -moz-box-shadow:rgba(255,255,255,0) 0 0 0px 1000px;
   box-shadow:rgba(255,255,255,0) 0 0 0px 1000px
}

@-webkit-keyframes autofill{to{color:#fff;
		background:rgba(31,39,87,0.3)}
}

input:-webkit-autofill{animation-name:autofill !important;
	animation-fill-mode:both !important}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{background-clip:content-box !important}

.hidden{overflow:hidden}
.clear{width:100%; clear:both; height:1px; overflow:hidden}
.fl{float:left}
.fr{float:right}
.ov_hi{overflow:hidden}
.layout{width:auto; margin:0 1.7rem}
.ul_li{list-style:none}
.ov_hi{overflow:hidden}
.radius{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px; overflow:hidden}
.shadow{-webkit-box-shadow:#DDD9D9 0px 0px 30px;-moz-box-shadow:#DDD9D9 0px 0px 30px;box-shadow:#DDD9D9 0px 0px 30px}
.fl-clr{zoom:1}
.fl-clr:after{display:block;clear:both;height:0;content:"\0020"}
.pc{}
.web{display:none !important}
.opacityli li,.opacity,.opacitybox .box{opacity:0}
.textV{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

.scale img,
.banner-bnt{-webkit-transition:all 0.3s ease;-moz-transition:all 0.3s ease;-o-transition:all 0.3s ease;transition:all 0.3s ease}
.scale:hover img{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-ms-transform:scale(1.1);-o-transform:scale(1.1);transform:scale(1.1)}
.index_show .text,
.join_list li .box,
.join_list li .box:before,
.headbar_bpx,
.colors-list li .box img,
.colors-list li .box .mask{-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;transition:all 1s ease}
/*底部样式*/
.footer{font-size:0.14rem; color:#fff; line-height:0.2rem; padding:0.2rem 0; overflow:hidden; overflow:hidden; color:#fff; border-top:1px solid #fff; margin-top:1.3rem}
.footer .img{ height:0.5rem; float:left}
.footer .txt{ float:right}

/*导航*/
.bh_100{}
.headbar_bpx{position:absolute; width:100%; left:0; top:0; z-index:99; background:#fff}
.headbar_bpx.top{position:fixed; top:0; -webkit-box-shadow:rgba(58,123,200,0.19) 0px 0px 16px;
-moz-box-shadow:rgba(58,123,200,0.19) 0px 0px 16px;
box-shadow:rgba(58,123,200,0.19) 0px 0px 16px;
-webkit-animation-name: animationFade;
animation-name: animationFade;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.35);
box-shadow: 0 10px 10px -10px rgba(0, 0, 0, 0.35)}

@keyframes animationFade {
    from {
        opacity: 0;
        -webkit-transform: translate3d(0, -100%, 0);
        transform: translate3d(0, -100%, 0)}
    to {
        opacity: 1;
        -webkit-transform: none;
        transform: none}
}


.headbar_nav{background:#ffffff; position:relative;  text-align:center}
.headbar_nav .logo{height:0.9rem; z-index:3; position:absolute; top:0; left:0; background:#004962; padding:0.55rem 0.45rem}
.headbar_nav .logo img{height:0.9rem}
.headbar_nav .logo .img1{display:none}
.main-nav-pc{height:1rem; float:right}
.main-nav-pc li{float:left; margin:0 0.25rem; position:relative}
.headbar_nav:before{content:""; position:absolute; left:0; top:0; bottom:0; background:#fff; width:100%; z-index:2}
.main-nav-pc li a{display:block; height:1rem; line-height:1rem; color:#004962; font-size:0.16rem; position:relative; text-align:center; z-index:3}
.main-nav-pc li a:hover,
.main-nav-pc li a.hover{color:#6ec6c8; font-weight:bold}

.headbar_bpx.top .logo{padding:0; height:0.5rem; top:0.25rem; background:none}
.headbar_bpx.top .logo img{height:0.5rem}
.headbar_bpx.top .logo .img{display:none}
.headbar_bpx.top .logo .img1{display:block}

.ioc_switch,
.ioc_search{display:none}


/*首页*/
.index_show{background:#fff; position:relative; overflow:hidden}
.index_show img{width:100%; height:100vh; object-fit: cover}
.index_show .ioc{position:absolute; bottom:2.1rem; width:8.35rem; height:auto; left:50%; transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);-o-transform:translateX(-50%)}
/*.banner-bnt{position:absolute; bottom:1rem; left:50%; width:1.58rem; height:0.38rem; line-height:0.38rem; text-align:center; color:#fff; border:1px solid #fff; transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);-o-transform:translateX(-50%)}*/
.banner-bnt{position:absolute;bottom:1rem;left:50%;width: 1.78rem;height: 0.48rem;line-height: 0.48rem;text-align:center;color:#fff;border:1px solid #fff;transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);-o-transform:translateX(-50%);font-size: 0.23rem;}

.banner-bnt:hover{color:#fff; background:#6FC5C8; border-color:#6FC5C8}


.title-box{}
.title-box .title{color:#71c4c8; font-size:0.28rem; font-weight:bold; margin-bottom:0.25rem; font-family:Roboto-B}
.title-box .txt{font-size:0.45rem; color:#004962; line-height:0.55rem; font-family:Roboto-L}

.index-1{padding:1rem 0 0 0; background:#fff}
.index-1-r{width:7.2rem; width:46%; float:right}
.index-1-r .title-box{}
.title-box .txt span{ display:block}
.index-1-text{font-size:0.16rem; line-height:0.24rem; color:#004962; margin-top:0.5rem; padding-right:1.4rem}
.index-1-text img{height:1.05rem}
.index-1-text .tc-r{text-align:right}
.index-1-r .img3{width:100%; margin-top:0.8rem}

.index-1-l{width:7.9rem; width:50%; float:left}
.index-1-l .img{width:100%}
.index-1-l .box{padding:0.5rem; background:#004962; color:#fff; font-family:Roboto-L}
.index-1-l .box *{overflow:hidden}
.index-1-l .box ul li{line-height:0.55rem; font-size:0.18rem; border-bottom:1px solid #fff; overflow:hidden}
.index-1-l .box ul li span{display:block; float:left}
.index-1-l .box ul li .t{ width:55%}
.index-1-l .box ul li .txt{width:45%}

.index-2{padding:1rem 0 0 0; background:#fff}
.index-2-l{width:6.9rem; width:44%; float:left}
.index-2-l .index-1-text{ padding-right:0}
.index-2-r{width:7.9rem; width:50%; float:right; background:#004962; text-align:center}
.index-2-r img{width:100%}
.index-2-r .box-img{padding:0.25rem 0.3rem}
.index-2-r .img1{}
.index-2-r .img2{}

.index-3{padding:1rem 0; background:#fff}
.index-3 .title-box{text-align:center}

.colors-list{overflow:hidden; margin-top:0.7rem; text-align:center; margin-left:-0.2rem}
.colors-list li{width:24%; display:inline-block}
.colors-list li *{overflow:hidden}
.colors-list li .box{position:relative; margin-left:0.2rem; cursor:pointer; margin-bottom:0.2rem}
.colors-list li .box img{width:100%}
.colors-list li .box .img1{position:absolute; left:0; top:0; opacity:0; -webkit-transform:scale(2.5);-moz-transform:scale(2.5);-ms-transform:scale(2.5);-o-transform:scale(2.5);transform:scale(2.5)}
.colors-list li .box .mask{position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(0,0,0,0.3); opacity:0}
.colors-list li .box .mask span{position:absolute; width:0.6rem; height:0.6rem; left:50%; top:50%; margin-left:-0.3rem; margin-top:-0.3rem}
.colors-list li .box .mask span:before,
.colors-list li .box .mask span:after{content:""; position:absolute; background:#fff}
.colors-list li .box .mask span:before{width:100%; height:1px; left:0; top:50%; transform:translateY(-50%);-ms-transform:translateY(-50%);-moz-transform:translateY(-50%);-webkit-transform:translateY(-50%);-o-transform:translateY(-50%)}
.colors-list li .box .mask span:after{width:1px; height:100%; top:0; left:50%; transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);-o-transform:translateX(-50%)}


.colors-list li .box .text{position:absolute; left:0.25rem; bottom:0.3rem; z-index:3; color:#fff; line-height:0.30rem; text-align:left}
.colors-list li .box .text .t{font-size:0.22rem; font-weight:bold}
.colors-list li .box .text .tt{font-size:0.18rem}
.colors-list li .box:hover .img1,
.colors-list li .box:hover .mask{opacity:1}
.colors-list li .box:hover .img1{-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);-o-transform:scale(1);transform:scale(1)}


/*美图鉴赏弹窗*/
.close{position:absolute; width:.5rem; height:0.5rem; cursor:pointer; transition:all 0.5s; opacity:0.9}
.close:hover{transform:rotate(180deg) !important}
.swiper{overflow:hidden}
.imglist-pop{position:fixed; width:100%; height:100%; left:0; top:0; z-index:9999; background:rgba(0,0,0,0.85); display:none; overflow:auto}
.imglist-pop .box{position:relative; width:6rem; top:50%; transform:translateY(-50%); margin:0 auto}
.imglist-pop .box .text{color:#fff; padding-top:0.1rem; font-size:0.24rem; line-height:0.3rem}
.imglist-pop .box .text .t{}
.imglist-pop .close{position:absolute; right:0.4rem; top:0.3rem; background:url(../images/close.png) no-repeat center center; background-size:100%; position: absolute}
.imglist-pop .box .swiper-slide{overflow:hidden; text-align:center}
.imglist-pop .box img{height:7rem; width:6rem; max-width:100%; object-fit:cover}
.imglist-pop .swiper-button-prev,
.imglist-pop .swiper-button-next{width:0.37rem; height:0.72rem; margin-top: -0.36rem}
.imglist-pop .swiper-button-prev{left:0.35rem; background:url(../images/swiper-button-prev.png) no-repeat; background-size:100%}
.imglist-pop .swiper-button-next{right:0.35rem; background:url(../images/swiper-button-next.png) no-repeat; background-size:100%}

.imglist-pop .swiper-pagination{text-align:right; bottom:0.45rem}
.imglist-pop .swiper-pagination .swiper-pagination-bullet{width:0.3rem; height:2px; border-radius:0; background:#fff; opacity:1}
.imglist-pop .swiper-pagination .swiper-pagination-bullet-active{background:#70c5c8}



.index-4{background:#cce0e7 url(../images/index-4.png) no-repeat center bottom; background-size:100%; height:9.8rem}
.index-4-right{float:right; width:6.90rem; padding-top:1rem}
.index-4-Downloads{overflow:hidden; padding-top:0.4rem}
.index-4-Downloads li{border-bottom:1px solid #004962; padding-top:0.11rem; line-height:0.45rem; font-size:0.18rem; color:#004962; position:relative; overflow:hidden}
.index-4-Downloads li a{float:right; color:#004962}
.index-4-Downloads li a:hover{color:#71c4c8; font-weight:bold}
.index-5{padding:1rem 0 0 0; background:#004962; color:#fff}
.index-5 .title-box{text-align:center}
.index-5 .title-box .txt{color:#fff}
.index-5 .title-box .txt span{ display:inline}

.form-box{overflow:hidden; margin-top:0.6rem; margin-left:-1rem}
.form-box li{float:left; width:50%}
.form-box li .box{line-height:0.4rem; padding-top:0.15rem; border-bottom:1px solid #fff; position:relative; margin-left:1rem}
.form-box li .box .t{font-size:0.18rem; position:absolute; left:0; bottom:0; z-index:2}
.form-box li .box .text{width:100%; background:none; border:0; color:#fff; font-size:0.18rem; height:0.4rem; text-indent:1rem; position:relative; z-index:2}
.form-box li.all{width:100%; margin-bottom:0.5rem}
.form-box li.all .box{padding-left:0; border:0;}
.form-box li.all .box .t{ display:block; position:relative}
.form-box li.all .box textarea{width:97.8%; border:1px solid #fff; height:2.1rem; background:none; padding:0.1rem 1%; color:#fff; font-size:0.18rem}
/*.form-button{ display:block; margin:0 auto; width:1.58rem; height:0.38rem; line-height:0.38rem; text-align:center; border:1px solid #70c5c8; color:#70c5c8; background:none; cursor:pointer}*/
.form-button{display:block;margin:0 auto;width: 1.68rem;height: 0.48rem;line-height: 0.48rem;text-align:center;border:1px solid #70c5c8;color:#70c5c8;background:none;cursor:pointer;font-size: 0.23rem;}

.form-button:hover{background:#70c5c8; color:#fff}

@media screen and (max-width:1340px){
	.headbar_nav{margin:0 20px}
}


@media screen and (max-width:1200px){.layout{width:auto; margin:0 0.25rem}
	/*导航*/
	/*导航*/
	.ioc_switch{display:block; position:absolute; top:0.5rem; right:0.5rem; width:0.5rem; height:0.38rem;  text-align:center; overflow:hidden; border-top:2px solid #004962; border-bottom:2px solid #004962}
	.ioc_switch i{position:absolute; width:100%; left:0; top:50%; margin-top:-1px; height:2px; background:#004962}
	.ioc_switch.on{border:0; width:0.5rem; height:0.5rem}
	.headbar_bpx.open .logo{ background:none}
	.ioc_switch.on i{display:none}
	.ioc_switch.on:before,
	.ioc_switch.on:after{content:""; position:absolute; width:130%; height:1px; background:#fff; left:-4px; top:12px}
	.ioc_switch.on:before{transform: rotate(45deg)}
	.ioc_switch.on:after{transform: rotate(-45deg)}
	.headbar_bpx{background:none; -webkit-transition:all 0s ease;-moz-transition:all 0s ease;-o-transition:all 0s ease;transition:all 0s ease}
	.headbar_nav{height:1.5rem; margin:0; padding:0 0.2rem; background:none}
	.headbar_nav:before{ display:none}
	.headbar_nav .logo{height:0.7rem; top:0; left:0.5rem}
	.headbar_nav .logo img{height:0.7rem}
	.headbar_bpx.top{background:#fff;  -webkit-animation-name: animationFade1; animation-name: animationFade1}
	.headbar_bpx.top .logo,
	.headbar_bpx.open .logo{padding:0; top:0.4rem}
	.headbar_bpx.top .logo img{height:0.7rem}
	

	.main-nav-pc{height:auto; line-height:40px; float:none; width:100%; position:relative; top:3rem; display:none}
	.main-nav-pc li{float:none; width:auto; position:relative; margin-left:0; padding:0.4rem 0}
	.main-nav-pc li a{height:0.4rem; line-height:0.4rem; font-size:0.36rem; color:#fff}
	
	
	.headbar_bpx.open{height:100vh; position:fixed; background:rgba(0, 73, 98, 0.9)}
	.headbar_bpx.open .headbar_nav{height:100vh}
	.headbar_bpx.open .main-nav-pc{ display:block; text-align:center}
	.headbar_bpx.open .logo .img{display:block}
    .headbar_bpx.open .logo .img1{display:none}


	.index_show .ioc{bottom:4rem; width:50%; height:auto}
	.banner-bnt{bottom:2rem; width:3rem; height:0.9rem; line-height:0.9rem; font-size:0.28rem}

}
@media screen and (max-width:900px){
	.index_show .ioc{bottom:4.5rem; width:70%}
    .banner-bnt{bottom:2rem; width:3.5rem; height:1rem; line-height:1rem; font-size:0.32rem}
}

@media screen and (max-width:750px){html,body{overflow-x:hidden}
	.pc{display:none !important}
    .web{display:block !important}
	.layout{width:auto; margin:0}
	.floatBox{display:none}
	.content-box{padding-bottom:0.3rem}


	/*底部样式*/
	.footer{font-size:0.2rem; line-height:0.2rem; padding:0.3rem 0;  margin-top:1.5rem; text-align:center}
	.footer .img{height:0.8rem; float:none; display:block; margin:0 auto} 
	.footer .txt{float:none; display:block; padding-top:0.2rem}


	
	
	/*焦点图*/
	

	
	/*首页*/
	.index_show{background:#fff; position:relative; overflow:hidden; height:100vh}
	.index_show img{width:100%; height:100vh; object-fit: cover}
	.index_show .ioc{bottom:3.15rem; width:6rem; height:auto}
	.banner-bnt{bottom:1.8rem; width:2.38rem; height:0.76rem; line-height:0.76rem; font-size:0.28rem}
	.banner-bnt:hover{color:#fff; background:#6FC5C8; border-color:#6FC5C8}
	
	
	.title-box{}
	.title-box .title{font-size:0.32rem; margin-bottom:0.35rem}
	.title-box .txt{font-size:0.48rem}
	
	.index-web{padding:1rem 0.25rem}
	.index-1{padding:0}
	.index-1-r,
	.index-1-l{width:auto; float:none}
	.index-1-r{padding:0 0.25rem 0.5rem 0.25rem}
	.title-box .txt span{display:none}
	.index-1-text{font-size:0.24rem; line-height:0.36rem; padding-right:0}
	.index-1-text .tc-r{text-align:left}
	.index-1-text img{width:25%; height:auto}
	.index-1-r .img3{width:100%; margin-top:1.2rem}
	
	.index-1-l{ margin-bottom:0.5rem}
	.index-1-l .img{width:100%}
	.index-1-l .box{padding:0.5rem 0.2rem}
	.index-1-l .box ul li{line-height:0.3rem; font-size:0.24rem; padding:0.2rem 0}
	.index-1-l .box ul li span{display:block; float:left}
	.index-1-l .box ul li .t{width:55%}
	.index-1-l .box ul li .txt{width:35%; float:right}
	
	.index-2{padding:1rem 0 0 0}
	.index-2-l,
	.index-2-r{width:auto; float:none}
	.index-2-r .box-img{padding:0.35rem 0.8rem}
	.index-2-r .img1{}
	.index-2-r .img2{}
	.index-2-l{padding:0 0.25rem 0.4rem 0.25rem}
	
	
	.index-3{padding:1rem 0 0 0}
	
	.colors-list{overflow:hidden; margin-top:0.6rem; margin-left:0}
	.colors-list li{width:100%; float:none}
	
	.colors-list li .box{margin-left:0}
	.colors-list li .box .pc{display:block !important; height:4rem;}
	.colors-list li .box .web{display:none !important}
	.colors-list li .box img{ object-fit: cover;}
	.colors-list li .box .text{position:absolute; left:0.25rem; bottom:0.25rem; line-height:0.35rem}
	.colors-list li .box .text .t{font-size:0.28rem}
	.colors-list li .box .text .tt{font-size:0.24rem}
	.colors-list li .box:hover .img1,
	.colors-list li .box:hover .mask{opacity:0}
	
	.imglist-pop .swiper-button-prev,
	.imglist-pop .swiper-button-next{display:none}
	
	
	.index-4{padding:0.8rem 0.5rem 6rem 0.5rem; background:#cce0e7 url(../images/index-4-web.png) no-repeat center bottom; background-size:100%; height:auto}
	.index-4 .title-box{ text-align:center}
	.index-4-right{float:none; width:inherit; padding-top:0}
	.index-4-Downloads{padding-top:0.4rem}
	.index-4-Downloads li{padding-top:0.2rem; line-height:0.45rem; font-size:0.24rem}
	.index-4-Downloads li a{ float:right; font-weight:bold}
	.index-5{padding:1rem 0.5rem 0 0.5rem}
	.index-5 .title-box .txt span{display:block}

	
	.form-box{overflow:hidden; margin-top:0.5rem; margin-left:0}
	.form-box li{float:none; width:100%}
	.form-box li .box{line-height:0.6rem; padding-top:0.2rem; margin-left:0}
	.form-box li .box .t{font-size:0.24rem}
	.form-box li .box .text{font-size:0.24rem; text-indent:1.3rem}
	.form-box li.all .box textarea{width:97.6%; height:3rem; padding:0.1rem 1%; color:#fff; font-size:0.24rem}
	.form-button{width:2.38rem; height:0.78rem; line-height:0.78rem}
	
}