/********index*********/
.index{background: #000000;position: relative; height: 100%;}
.swiper-container{ width: 100%;  height: 100%; margin-left: auto; margin-right: auto;}
.swiper-slide { width: 100%; height: 100%; }
.section-01{ background-image: url(../images/index/FirstScreen01.jpg); background-position: top center;}
.section-02{ background-image: url(../images/index/FirstScreen02.jpg);}
.section-03{ background-image: url(../images/index/FirstScreen03.jpg);}
.section-04{ background-image: url(../images/index/FirstScreen04.jpg);}
.index-title{ text-align: center; padding-top: 3.5%;}
.index-title img{ max-width: 70%;}
@media screen and (max-width:1400px) and (min-width:1000px) and (max-height:620px){	
	.index-title{ text-align: center; padding-top:1%;}
	.index-title img{ max-width:30%;}
}
.amore{ display:inline-block; height: 20px; line-height: 20px; font-family:Microsoft YaHei;}
.amore i{vertical-align: middle; display: inline-block; width: 0px; height: 0px; border-style: dashed dashed dashed solid;  border-color: transparent transparent transparent #df3343; border-width:5px;}
.w1000{ width: 100%; max-width: 1000px; margin:0 auto; position:relative;}
@media screen and (max-width:1040px) {
	.w1000{ padding: 0px 40px; }
}
@media screen and (max-width:720px) {
	.w1000{ padding: 0px 20px;}
}


/****index video***/
.section-01-text{ position: absolute; left:-80px; top:50%;}
.section-01-box{ float: right; width: 100%; max-width: 625px; padding-top:14%; text-align: center;}
.section-01-box .tit{ line-height: 40px; height: 40px; font-size: 32px; overflow: hidden;}
.section-01-box p{ font-size: 20px; height: 30px; line-height: 30px;}
.section-01-box video{ margin-top:5%; width: 100%; max-width:625px;}
@media screen and (max-width:1600px) {
	.section-01-text{ top:40%;}
}
@media screen and (max-width:1200px) {
	.section-01-text{ width:30%; left:10px; top:40%; }
	.section-01-box{ padding-top:7%;}
}
@media screen and (max-width:960px) {
	.section-01-text{ position: relative; left:auto; top:auto; margin:13% auto 0px; width:45%; display: block;} 
	.section-01-box{ padding-top:10%; margin: 0 auto; float: none;}
}
@media screen and (max-width:480px) {
	.section-01-text{ width:70%; margin:10% auto 0px;}
	.section-01-box .tit{ font-size:25px;}
	.section-01-box p{ font-size: 16px;}
}
@media screen and (max-width:400px) {
	.section-01-box .tit{ font-size:22px;}
}
@media screen and (max-width:320px) {
	.section-01-box .tit{ font-size:18px;}
}
@media screen and (max-width:1400px) and (min-width:1000px) and (max-height:600px){
	.section-01-box{ padding-top:3%; }
}


/****section-02***/
.section-02 .w1022{ padding-top:3%; width: 1022px; margin: 0 auto;}
.section-02 .amore{ float: right;}
.section-02 .aimg{ display: block; position: relative;}
.section-02 .aimg img{ position: absolute; top:0px; left:0px; width: 100%; height: 100%;}
.section-02 .aimg i{ display: inline-block; padding-bottom: 68%;}
.section-02-box{ width:493px; height: 479px; padding: 21px; background-image: url(../images/index/section-02-box1.png); position: relative;}
.section-02-box div{ width: 400px; margin: 0 auto;}
.section-02-box span{ display: inline-block; height: 46px; line-height: 46px; font-size: 12px; color: #df3343;}
.section-02-box p{ font-size: 18px; line-height: 24px; }
.section-02-box .amore{ position: absolute; bottom:20px; right:60px;}
.section-02-ul li{ position: relative; margin-bottom:8px; width: 513px; height: 154px; padding: 21px; background-image:url(../images/index/section-02-box2.png);}
.section-02-ul li .aimg{ float: left; width: 160px;}
.section-02-ul li div{ float:left; margin-left: 15px; width: 275px; }
.section-02-ul li div span{ display: inline-block; height: 30px; line-height: 30px; font-size: 12px; color: #df3343;}
.section-02-ul li div p{ font-size: 16px; line-height: 22px;} 
.section-02-ul li div .amore{ position: absolute; bottom:20px; right:50px;}
@media screen and (max-width:1400px) {
	.section-02 .w1022{ width: 700px;}
	.section-02 .amore{font-size: 12px;}
	.section-02-box{margin: 0 auto;  width:340px; height: 330px; padding: 15px;}
	.section-02-box div{ width: 280px;}
	.section-02-box span{ height:24px; line-height: 24px; }
	.section-02-box p{ font-size: 13px; line-height: 20px; height:40px;}
	.section-02-box .amore{right:40px; bottom: 15px;}
	.section-02-ul{ margin:0 auto; width: 340px;}
	.section-02-ul li{ margin-bottom:12px; width: 340px; height: 102px; padding:12px;}
	.section-02-ul li .aimg{ width: 108px;}
	.section-02-ul li div{ margin-left:10px; width: 170px; }
	.section-02-ul li div span{ height:20px; line-height: 20px;}
	.section-02-ul li div p{ font-size: 12px;  line-height: 20px;} 	
	.section-02-ul li div .amore{ bottom:10px; right:25px;}
}
@media screen and (max-width:1030px) {
	.section-02 .w1022{ width: 620px;}
	.section-02 .amore{font-size: 12px;}
	.section-02-box{ width:290px; height: 282px; }
	.section-02-box div{ width: 220px;}
	.section-02-box p{ line-height: 18px; height: 36px; }
	.section-02-box .amore{ display: none;}
	.section-02-ul{width: 290px;}
	.section-02-ul li{ margin-bottom:12px; width: 290px; height: 87px;  padding:8px;}
	.section-02-ul li .aimg{ width:98px;}
	.section-02-ul li div{ width: 150px; }
	.section-02-ul li div span{ line-height: 18px; height: 18px;}
	.section-02-ul li div p{ line-height: 18px; height:36px;}
	.section-02-ul li div .amore{ display: none;}
}
@media screen and (max-width:680px) {
	.section-02 .slick-list{ padding-bottom:10px;}
	.section-02 .w1022{ width:100%; padding-top:8%;}	
}
@media screen and (max-width:1400px) and (min-width:1030px) and (max-height:620px){
	.section-02 .w1022{ padding-top: 2%; }
}




/****slick***/
.slick-for{ width: 1030px; margin: 0px auto; }
.slick-for .box{ margin-top: 5%; position: relative;float: left; width: 654px; height: 342px; padding:10px; background-image:url(../images/index/section-03-box.png);}
.slick-for .box .dimg{ float:left; width: 248px; position: relative;}
.slick-for .box .dimg i{ display: inline-block; padding-bottom: 116.8%;}
.slick-for .box .dimg img{ position: absolute; top:0px; left:0px; width: 100%; height: 100%;}
.slick-for .box .con{ float: left; margin-left: 30px; width:320px; }
.slick-for .box .con div{ font-size: 32px; height:100px; line-height: 100px; overflow: hidden; text-overflow:ellipsis;white-space:nowrap;}
.slick-for .box .con p{ height: 160px; line-height: 20px; font-size: 13px; overflow: hidden; }
.slick-for .box .con .amore{ position: absolute; bottom:20px; right:35px;}
.slick-for .big-img{ float: right; width: 370px; position: relative;}
.slick-for .big-img img{ position: absolute; top:0px; left:0px; width: 100%; height: 100%;}
.slick-for .big-img i{ display: inline-block; padding-bottom:108.1%;}
.slick-nav{ max-width: 620px; width: 100%; margin:4% auto 0px;}
.slick-nav .slick-track{margin-left: -248px; }
.slick-nav .slick-slide{ position: relative;}
.slick-nav .slick-slide span{ display: block; margin: 0 auto; width: 97px; position: relative;}
.slick-nav .slick-slide span i{ display: none; position: absolute; top:0px; left:0px; width: 97px; height: 103px; background:url(../images/index/slick-nav-active.png) no-repeat; }
.slick-nav .slick-center span i{ display: inline-block;}
@media screen and (max-width: 1030px){
	.slick-for { width: 1000px;}
	.slick-for .big-img{ margin-top: 2%; width:340px;}
}
@media screen and (max-width: 1000px){
	.slick-for { width:100%; margin-top:5%;}
	.slick-for .box{ float: none; margin: 0 auto;}
	.slick-for .big-img{ display: none;}
}
@media screen and (max-width: 720px){
    .slick-for { width:90%; border: 1px solid #829bbe;  background:rgba(0,0,0,.6);  -moz-box-shadow:0px 0px 10px rgba(93,183,255,.6); -webkit-box-shadow:0px 0px 10px rgba(93,183,255,.6); box-shadow:0px 0px 10px rgba(93,183,255,.6); }
	.slick-for .box{ width: 100%; height:auto; background:none; position: relative;}
	.slick-for .box .dimg{ width: 40%;}
	.slick-for .box .con{ float: right; margin-left:3%; width: 56%;}
	.slick-for .box .con div{ font-size: 18px; height:50px; line-height: 50px; }
	.slick-for .box .con p{ height: auto; line-height: 20px; font-size: 12px; }
	.slick-for .box .con .amore{  display:none;}
	.slick-nav{ width: 372px; }
	.slick-nav .slick-track{ margin-left: -124px;}
}
@media screen and (max-width: 480px){
	.slick-prev { left: 0px; }
	.slick-next { right: 0px;}
}
@media screen and (max-width: 430px){
	.slick-for .box .con div{ font-size: 15px; height:40px; line-height: 40px; }
	.slick-nav{ width: 248px; }	
	.slick-prev { left: -20px; }
	.slick-next { right: -20px;}
}
@media screen and (max-width:1400px) and (min-width:1000px) and (max-height:780px){	
	.slick-for .box{ margin-top:0px;}
	.slick-for{ width: 800px; padding-top:8px;}
	.slick-for .box{ width: 500px; height: 262px; padding:7px;}
	.slick-for .box .dimg{ width:190px; }
	.slick-for .box .con{ float: left; margin-left:20px; width:265px; }
	.slick-for .box .con div{ font-size: 20px; height:54px; line-height: 54px;}
	.slick-for .box .con p{ height:auto; font-size: 12px;}
	.slick-for .box .con .amore{ right:18px; font-size: 12px;}
	.slick-for .big-img{ width: 250px; margin-top:-10px;}
	.slick-nav{ margin-top:0px;}
}




/****section-04***/
.section-04-box{ float: right; margin-top:6%; position: relative; width: 418px; height: 314px; padding:40px; background-image:url(../images/index/section-04-box.png);}
.section-04-box .tit{ font-size: 25px; line-height:30px; overflow: hidden;}
.section-04-box p{ margin-top: 15px; line-height: 22px; font-size: 13px; }
.section-04-box .amore{ position: absolute; right:35px; bottom:25px;}
@media screen and (max-width: 720px) {
	.section-04-box{ float: none; margin:15% auto 0px; }
}
@media screen and (max-width:480px) {
	.section-04-box{  width: 300px; height: 225px; padding: 20px; margin:25% auto 0px; }
	.section-04-box .tit{ font-size: 16px; line-height: 24px;}
	.section-04-box p{ margin-top: 5px; font-size: 13px; line-height: 20px;}
	.section-04-box .amore{ right:20px; bottom:15px; }
}
@media screen and (max-width:350px) {
	.section-04-box{ margin-left: -18px; }
}
@media screen and (max-width:1400px) and (min-width:1000px) and (max-height:600px){
	.section-04-box{ margin-top:3%;  margin-right: 15%; }
}



.fly{position: fixed; bottom:128px; right:10px; z-index: 99;display: block; height: 80px; -webkit-animation: arrowGo 1.5s infinite ; animation: arrowGo 1.5s infinite; -webkit-transform: translate(0, 30%);transform: translate(0, 30%);}
.fly i{ margin-right: -2px; vertical-align: middle; display: inline-block; width: 0px; height: 0px; border-style: dashed dashed dashed solid;  border-color: transparent transparent transparent #FFFFFF; border-width:5px;}
.fly img{ vertical-align: middle;}
.fly span{ margin-right: 10px; display: inline-block; vertical-align: middle;}
@media screen and (max-width:1600px){
	.fly{ height: 50px;}
	.fly img{ height: 50px;}
}
@media screen and (max-width:720px){
	.fly{ height: 26px; font-size: 12px; bottom:105px; }
	.fly img{ height: 26px;}
}
@-webkit-keyframes arrowGo {
	0%{ 
		-webkit-transform: translate(0, 30%);
	}
	50%{ 
		-webkit-transform: translate(0, 0%);
	}
	100%{
		-webkit-transform:translate(0, 30%);
	}
}
@keyframes arrowGo {
	0%{ 
		transform: translate(0, 30%);
	}
	50%{
		transform: translate(0, 0%);
	}
	100%{
		transform:translate(0, 30%);
	}
}