.topH{ display: none}
@media (min-width:1400x) {
.header .auto{max-width:none; width: 87%;}
}
@media (min-width:1025px) {
.header{ position: fixed; /*top:20px;*/ background: none}
.header .logo img{filter: grayscale(100%) brightness(500%);}
.header .top-nav{ border-left-color: rgba(255,255,255,0.3)}
.header .open-search{background-image: url(../image/top-search2.png)}
.header menu li span a{ color: #fff;font-size: 18px;}
}

@-webkit-keyframes img-scale{
0%{transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1);}
to{transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);}
}
@keyframes img-scale{
0%{transform:scale(1.1); -webkit-transform:scale(1.1); -moz-transform:scale(1.1);}
to{transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);}
}

.h_more a{border: solid 1px #127da8; color: #127da8; line-height:44px; padding-left: 30px; padding-right: 60px; display:inline-block; cursor: pointer; position: relative; transition: 0.5s; margin-top: 3%}
.h_more a:after{ content: ''; position: absolute; right: 30px; width: 16px; height: 100%; top: 0; background: url("../image/jt2.png") no-repeat right center; transition: 0.5s}
.h_more a:hover{ color: #fff; background: #127da8}
.h_more a:hover:after{ right: 20px; background-position: left center}
@media (max-width:768px) {
.h_more a{line-height:36px; padding-left:20px; padding-right:50px;}
}

.ind_title{ padding:4% 0; margin: 0; font-weight:normal; line-height: 0.5}
.ind_title span{ display: block}
.ind_title span.en{ font-size:7.29165vw; opacity: 0.08; text-transform: uppercase; color: #799cad}

@keyframes firstPart {
	0% {bottom: 60px;}
	100% {bottom: 40px;	}
}
@-webkit-keyframes firstPart
{
	0% {bottom: 60px;}
	100% {bottom: 40px;	}
}
.roller { display:none;
	background: url(../image/roller.png) no-repeat;
	width: 36px;
	height: 77px;
	position: absolute;
    display: block;
	bottom: 40px;
	left: 50%;
	margin-left: -18px;
	z-index: 100;
	cursor: auto;
	animation-name: firstPart;
	animation-duration: 0.8s;
	animation-timing-function: linear;
	animation-delay: 0.3s;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-play-state: running;
	-moz-animation-name: firstPart;
	-moz-animation-duration: 0.8s;
	-moz-animation-timing-function: linear;
	-moz-animation-delay: 0.3s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-direction: alternate;
	-moz-animation-play-state: running;
	-webkit-animation-name: firstPart;
	-webkit-animation-duration: 0.8s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-delay: 0.3s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-direction: alternate;
	-webkit-animation-play-state: running;
	-o-animation-name: firstPart;
	-o-animation-duration: 0.8s;
	-o-animation-timing-function: linear;
	-o-animation-delay: 0.3s;
	-o-animation-iteration-count: infinite;
	-o-animation-direction: alternate;
	-o-animation-play-state: running;
}

.index_banner{ position: relative}
.index_banner .item a{ position: absolute; width: 100%; height: 100%}
.index_banner img{ width: 100%;}
.index_banner .wap{ display: none}
.index_banner .slick-dots{ font-size: 0; left: 10%; bottom:4%; width: auto; position: absolute;}
.index_banner .slick-arrow:not(:hover){ opacity: 0.3}
.index_banner .slick-prev{left:5%;}
.index_banner .slick-next{ right:5%;}
.index_banner .numbox{ right: 10%; bottom: 5%; position: absolute; z-index:101; color: #fff}
.index_banner .numbox b,
.index_banner .numbox span{ padding: 0 5px; font-weight: normal}

@media (min-width:768px) {
.index_banner .slick-current img{-webkit-animation: img-scale 5s ease-out forwards; animation: img-scale 5s ease-out forwards;}
}
@media (max-width:768px) {
.index_banner .pc{ display: none}
.index_banner .wap{ display:block}
.roller{ display: none}
}


.index_about{ padding-top: 4%; padding-bottom: 4%; background: url(../image/home_aboutbg.jpg) no-repeat center bottom; background-size: 100%}
.index_about .info{ padding-right: 5%;}
.index_about .txt{ padding-top: 3%; padding-bottom: 3%; max-width: 730px; line-height: 1.8; color: #000000}
.index_about .photo{ width: 40%; position: relative}
.index_about .photo img{ width: 100%; transition: 0.5s}
.index_about .play{ position: absolute; top:0; bottom: 0; right: 20%; z-index: 1; margin: auto; cursor: pointer; width: 59px; height: 59px; background: url(../image/video_icon.png) no-repeat center center}
.index_about video{ position: absolute; width: 100%; margin: auto; top: 0; bottom: 0; z-index: 5}
@media (min-width:1600px) {
.index_about .photo img{ right: -10%; position: relative}
}
@media (max-width:768px) {
.index_about .info,
.index_about .photo{ display: block; padding: 2% 0; width: 100%}
.index_about .photo{ display: none}
}

.index_product{ background: url(../image/home_productbg.jpg) no-repeat center top; background-size: 100%}
.index_product .wap_box .h_more{ float: right; padding-top:3%}
.index_product .infolist{ padding-bottom: 5%}
.index_product .infolist .pic{ width: 54%; text-align: center}
.index_product .infolist h3{ padding: 4% 0}
.index_product .infolist h3 a:not(:hover){ color: #333}
.index_product .infotxt p{ line-height: 2; color: #333}
.index_product .goodness{ padding: 3% 0; color: #127da8;}
.index_product .goodness .box{ padding: 10px 0}
.index_product .goodness .icon{ width: 55px;}
.index_product .goodness .icon img{ width: 50px;}
.index_product .titlelist{ position: relative; text-align: center}
.index_product .titlelist:before{ content: ''; position: absolute; left: 0; top: 50%; width: 100%; border-bottom: dotted 1px #127da8; }
.index_product .titlelist .auto{ padding-left: 50px; padding-right: 50px;z-index: 101; background: #edf2f6}
.index_product .titlelist .slick-list{ margin: auto;padding: 0px 3px}
.index_product .titlelist .item{ height: 70px; cursor: pointer; position: relative}
.index_product .titlelist .item:before,
.index_product .titlelist .item:after{top:0; position: absolute; content: ''; width:0px; height: 100%;}
.index_product .titlelist .item:before{left:-3px;border-left: dotted 1px #127da8}
.index_product .titlelist .item:after{right:2px;border-right: dotted 1px #127da8}
.index_product .titlelist .item img{ width: 50px;}
.index_product .titlelist .slick-current{color: #127da8;}
@media (min-width:768px) {
.index_product .wap_box{ display: none}
.index_product .titlelist .slick-track{margin: 0 auto;}
}
@media (max-width:768px) {
.index_product{ background-position: right top; background-size: 200%}
.index_product .wap_box{padding: 0 2.5% 5% 2.5%}
.index_product .infolist .pic,
.index_product .infolist .info{ display: block; width:100%}
.index_product .infolist .pic{width:90%;margin: auto;}
.index_product .infolist .info{ padding-bottom: 2%}
.index_product .titlelist .item{ padding-left: 5px; padding-right:5px;}
.index_product .titlelist .auto{padding-left:34px; padding-right:34px; width: 100%}
.index_product .goodness{display: none}
}

.index_news{ padding-top: 4%; padding-bottom: 4%}
.index_news .h_more{ float: right; padding-top:3%;position: relative;z-index: 9;}
.index_news .fl_list .txt{color: #fff; position: absolute; width: 100%; bottom: 0; padding: 5%;background: linear-gradient(to bottom,rgba(0,0,0,0) 0%,#127da8 100%)}
.index_news .fl_list .txt h4{ margin-bottom: 3%}

.index_news .fr_list ul li:not(:last-child){ padding-bottom:26px; margin-bottom:26px; border-bottom: solid 1px #e4e9ec}
.index_news .fr_list .txt{ padding-right: 5%;}
.index_news .fr_list .pic { width:30.923%;}
.index_news .fr_list .pic span{ height:128px}
.index_news .fr_list h4{ color: #333333; padding: 16px 0}
.index_news .fr_list time{ color: #333333;}
.index_news .fr_list p{color: #999999; line-height: 26px}
@media (min-width:768px) {
.index_news .fl_list{ float: left; width: 46.7142%}
.index_news .fl_list .pic span{ height: 506px}
.index_news .fl_list .slick-dots{ position: absolute; bottom: 5px;}
.index_news .fr_list{ float: right; width: 50.3571%}
}
@media (max-width:768px) {
.index_news .fl_list{ padding: 4% 0}
.index_news .fr_list ul li:not(:last-child){ padding-bottom:10px; margin-bottom:10px;}
.index_news .fl_list .pic span{padding-bottom: 60%}
.index_news .fr_list h4{ padding: 15px 0}
.index_news .fr_list .pic span{ height:109px}
}


.index_join { position: relative;color: #fff; background: no-repeat left center; background-size: cover}
.index_join .auto{height: 540px; }
.index_join .info{ text-align: right}
.index_join .txt{ display: inline-block; max-width:656px; line-height: 1.8;}
.index_join .h_more a:not(:hover){ border-color: #fff;color: #fff;}
.index_join .h_more a:after{ background-position: left center}
@media(min-width: 1025px){
	.ind_title span{font-size:46px;}
	.index_join .txt{margin-bottom:50px;font-size:19px;}
}

@media (max-width:960px) {
.index_join .auto{ height: auto; padding-top: 5%; padding-bottom:7%}
}
@media (max-width:640px) {
.index_join .info{text-align: left}
.index_join:before{ content: ''; width: 100%; height: 100%; position: absolute; background: rgba(0,0,0,0.5)}
.index_join .auto{z-index: 10; position: relative}
}