@charset "utf-8";

body{ background: #fafbfe;}
img{max-width: 100%;}
h2{font-size: 35px;line-height: 39px; padding:85px 0 25px;text-align: center; color: #000;}
.main04 h2,.main07 h2{color: #000;}
p{line-height: 30px;}
.main03 .detail>p,.main04 .detail>p,.main05 .detail>p,.main07 .detail>p{padding: 0 100px;line-height: 30px; text-align: center;}
/*----------*/

.main02 .btn{text-align: center;padding: 30px 0 0;}
.main02 .btn a{display: inline-block;border:1px solid #0eb1fc;font-size: 15px;color: #0eb1fc;text-decoration: none;line-height: 46px;padding: 0 50px;border-radius: 5px;}
.main02 .btn a:hover{background: #0eb1fc; color: #fff;}
/*----------*/

.main01{background: url(../images/lite/bg1.jpg) no-repeat center bottom #d8e5ed; height:658px; text-align: center;}
.main01 h2{font-size: 54px;font-weight: bold;padding: 60px 0 25px;}
.main01 h1{font-size:26px;line-height: 26px;}
.main01 p {font-size: 18px; padding: 10px 130px 0;}
.main01 ul { padding: 10px 0 0; }
.main01 ul {  width: 600px;  margin: 0 auto; padding: 35px 0 0; }
.main01 ul li { width: 150px; float: left; text-align: center; }
.main01 ul li a{ color: #0071a6; text-decoration: none;}
.main01 ul li a:hover{text-decoration: none;}
.main01 ul li i { display: block; font-style: normal;font-size: 13px; }
.main01 .btn { padding: 120px 0 0; }
.main01 .btn a {text-decoration: none; margin:0 20px;}
.main01 .btn .Down {  background: #0fb4ff; color: #fff; border:1px solid #0fb4ff; display: inline-block; }
.main01 .btn .Down:hover { background: none;  color: #0fb4ff;  }
.main01 .btn .Buy {  background: #ffab1b; color: #fff; border:1px solid #ffab1b;  display: inline-block; }
.main01 .btn .Buy:hover { background: none;  color: #ffab1b; border:1px solid #ffab1b;  }

.btn-text-li{display:inline-block; width:252px; margin:10px 20px 0;}
.btn-text-a{color:#fff; text-decoration:none;}
.btn-text-a:hover{text-decoration:underline;}

.main01_bottom{ text-align:center; padding:100px 0 0; color:#fff; font-size:17px;}
.main01_bottom .get_code { width:670px; margin:20px auto 0;}
.main01_bottom .get_code input{ width:330px; height:51px; border:1px solid #e8e8e8; border-right:none; border-top-left-radius:5px; background:#fff;	border-bottom-left-radius:5px; padding:0 0 0 18px; font-size:16px; float:left;}
.main01_bottom .get_code .get_key{ background:#20c1f7; color:#fff; line-height:53px; float:left; cursor:pointer; padding:0 30px; font-size:22px; border-radius:0 5px 5px 0;}
.main01_bottom .get_code .mess{ padding:20px 0 0;}
.main01_bottom .get_code .mess a{ color:#fff;}


/*----------*/

.main02{background: url(../images/lite/bg2.jpg) no-repeat center bottom #f6f7f9; height: 658px;}
.main02 .text{float: right;padding: 80px 70px 0 0; width: 370px;}
.main02 .main02_content{ margin:0 0 0 80px; width: 432px; float: left; position: relative; }
.main02 .main02_content >img{ position: absolute; transition: all 0.5s ease-in-out; top: 180px; left: 160px; }
.main02 .main02_content >img:nth-child(1){top: 0; left: 0;}
.main02 .main02_content >img:nth-child(2){top: 128px; left: 0;}
.main02 .main02_content >img:nth-child(3){top: 277px; left:0;}
.main02 .main02_content >img:nth-child(4){top: 44px; left: 160px;}
.main02 .main02_content >img:nth-child(5){top: 320px;left: 150px;}
.main02 .main02_content >img:nth-child(6){top: 63px; left: 318px;}
.main02 .main02_content >img:nth-child(7){top: 213px;left: 308px;}
.main02 .main02_content >img:nth-child(8){top: 353px;left: 308px;}
.main02 .main02_content >img:nth-child(9){top: 160px;left: 150px;}
.main02 .main02_content.focus > img:nth-child(1){animation: 3s 0s ease-out img1;}
.main02 .main02_content.focus > img:nth-child(2){animation: 3s 0s ease-out img2;}
.main02 .main02_content.focus > img:nth-child(3){animation: 3s 0s ease-out img3;}
.main02 .main02_content.focus > img:nth-child(4){animation: 3s 0s ease-out img4;}
.main02 .main02_content.focus > img:nth-child(5){animation: 3s 0s ease-out img5;}
.main02 .main02_content.focus > img:nth-child(6){animation: 3s 0s ease-out img6;}
.main02 .main02_content.focus > img:nth-child(7){animation: 3s 0s ease-out img7;}
.main02 .main02_content.focus > img:nth-child(8){animation: 3s 0s ease-out img8;}
.main02 .main02_content.focus >img:nth-child(9){top: 160px!important;left: 150px!important;}
@keyframes img1 {
	0%{top: 0; left: 0;} 20%{top: 0; left: 0;} 40%{top: 180px;left: 160px;}	60%{top: 0; left: 0;} 100%{top: 0; left: 0;}
}
@keyframes img2 {
	0%{top: 128px; left: 0;} 20%{top: 128px; left: 0;} 40%{top: 180px;left: 160px;}	60%{top: 128px; left: 0;} 100%{top: 128px; left: 0;}
}
@keyframes img3 {
	0%{top: 277px; left: 0;} 20%{top: 277px; left: 0;} 40%{top: 180px;left: 160px;}	60%{top:277px; left: 0;} 100%{top: 277px; left: 0;}
}
@keyframes img4 {
	0%{top: 44px; left: 160px;} 20%{top: 44px; left: 160px;} 40%{top: 180px;left: 160px;} 60%{top: 44px; left: 160px;} 100%{top: 44px; left: 160px;}
}
@keyframes img5 {
	0%{top: 320px;left: 150px;} 20%{top: 320px;left: 150px;} 40%{top: 180px;left: 160px;} 60%{top: 320px;left: 150px;} 100%{top: 320px;left: 150px;}
}
@keyframes img6 {
	0%{top: 63px; left: 318px;} 20%{top: 63px; left: 318px;} 40%{top: 180px;left: 160px;} 60%{top: 63px; left: 318px;} 100%{top: 63px; left: 318px;}
}
@keyframes img7 {
	0%{top: 213px;left: 308px;} 20%{top: 213px;left: 308px;} 40%{top: 180px;left: 160px;} 60%{top: 213px;left: 308px;} 100%{top: 213px;left: 308px;}
}
@keyframes img8 {
	0%{top: 353px;left: 308px;} 20%{top: 353px;left: 308px;} 40%{top: 180px;left: 160px;} 60%{top: 353px;left: 308px;} 100%{top: 353px;left: 308px;}
}
/*----------*/

.main03{background: url(../images/lite/bg3.jpg) no-repeat center bottom #f6f7f9; height:700px; text-align: center;}
.main03 .main03_content{text-align: center;padding: 55px 0 0; position: relative;}
.main03 .main03_content >img{  position: absolute; top: 180px; }
.main03 .main03_content >img:nth-child(1){ left: 110px;top: 180px; opacity: 0; }
.main03 .main03_content >img:nth-child(2){ left: 175px; top: 340px;opacity: 0; }
.main03 .main03_content >img:nth-child(3){ left: 247px;top:485px; opacity: 0; }
.main03 .main03_content.focus >img:nth-child(1){top: 53px; transition: all 0.5s ease-in-out;opacity: 1; }
.main03 .main03_content.focus >img:nth-child(2){top: 125px;transition: all 0.5s 0.3s ease-in-out;opacity: 1; }
.main03 .main03_content.focus >img:nth-child(3){top: 165px;transition: all 0.5s 0.5s ease-in-out;opacity: 1; }
/*----------*/

.main04{background: url(../images/lite/bg4.jpg) no-repeat center bottom #06191f; height:680px; text-align: center;}
.main04 h2{color: #fff;}
.main04 p{color: #e5e5e5;}
.main04_content { position:relative;}
.main04_content .one { width:240px; position:absolute; top:280px; left:260px;}
.main04_content .one .pic{display:none;}
.main04_content .one .t{font-size:17px; color:#fff; font-weight:bold; padding-bottom:5px;}
.main04_content .one  p{ line-height:23px;}
.main04_content .two{position:absolute; top:210px; left:525px;}
.main04_content .three{position:absolute; top:110px; left:805px;}
.main04_content .three p{ border:1px solid #576b6c; border-radius:5px; padding:8px;}
/*----------*/

.main05{background: url(../images/lite/bg5.jpg) no-repeat center top #f8fafd; height:893px; text-align: center;}
.main05 .main05_content{padding: 40px 0 0;}
.main05_content .ma05_one{ background: url(../images/lite/b0.png); width: 180px;height: 249px; padding: 1px 0 0; float: left; margin: 0 40px 35px 0; }
.main05_content .ma05_one .mess{ background: #008ffc; filter:Alpha(opacity=60);background:rgba(0,143,252,0.6); color: #fff;height: 65px; margin-top: 184px; }
.ma05_one .mess .t{font-size: 17px;padding-bottom: 10px;}
.ma05_one .mess .pic >img{ margin: -30px 0 0; }
.ma05_one .mess p{font-size: 13px; line-height: 25px; text-align: left; padding: 0 10px;display: none;}
.ma05_one:hover .mess{height: 190px; margin-top: 59px;}
.ma05_one:hover .mess p{display: block;}
.main05_content .ma05_one:nth-child(2){background: url(../images/lite/b9.png); margin: 30px 40px 35px 0;}
.main05_content .ma05_one:nth-child(3){background: url(../images/lite/b8.png); margin: 60px 40px 35px 0;}
.main05_content .ma05_one:nth-child(4){background: url(../images/lite/b7.png); margin: 30px 40px 35px 0;}
.main05_content .ma05_one:nth-child(5){background: url(../images/lite/b6.png); margin: 0 0 35px;}
.main05_content .ma05_one:nth-child(6){background: url(../images/lite/b5.png); margin: -50px 40px 0 0;clear: both;}
.main05_content .ma05_one:nth-child(7){background: url(../images/lite/b4.png); margin: -20px 40px 0 0;}
.main05_content .ma05_one:nth-child(8){background: url(../images/lite/b3.png); margin: 10px 40px 35px 0;}
.main05_content .ma05_one:nth-child(9){background: url(../images/lite/b2.png); margin: -20px 40px 35px 0;}
.main05_content .ma05_one:nth-child(10){background: url(../images/lite/b1.png); margin: -50px 0 35px;}
/*----------*/

.main07{background: #f7f7f7 url(../images/lite/pc.png) no-repeat left bottom; padding-bottom: 50px;}
.main07 ul{padding: 60px 0 0; float: right; width: 490px;}
.main07 ul li{padding: 13px 0 13px 35px; background: url(../images/lite/list2.png) no-repeat left center;}
.main07 .compo{text-align: right; padding: 100px 50px 0 0;}
.main07 .compo span{ display: inline-block;padding: 0 13px; }
/*----------*/

.main09{background: url(../images/lite/bg8.jpg) repeat-x center top; height: 699px;}
.main09 .text{float: left;width: 400px;padding: 110px 0 0 35px;}
.main09 .text h2{text-align: left; line-height: 45px;}
.main09 .main09_right{float: right; padding: 85px 0 0;}
.main09 .main09_pic{background: url(../images/lite/pic3.png) no-repeat; margin-right: -140px; width: 654px; height: 569px;  }
.main09_pic .pic_box{width: 652px; height:395px; overflow: hidden;position: relative; margin-left: 2px;border-radius: 18px 18px 0 0; }
.main09_pic .pic_box> img{position: absolute;left: 0; top: 0;transform: translateZ(0); }
.main09_pic.focus .pic_box>img:nth-child(1){  animation:picture 5s ease-in-out infinite alternate; }
.main09_pic.focus .pic_box>img:nth-child(2){}
@keyframes picture {
	0%{transform: scale(1);}
	100%{transform: scale(1.2);}
}
/*----------*/

.DivMain15 {  background: #fafcff; }
.DivMain15 .Details { padding: 20px 0 100px; }
.DivMain15 h3 { font-size: 29px; text-align: center; padding: 20px 0; }
.DivMain15 .row { width: 1080px; text-align: center; padding: 50px 0 0; }
.DivMain15 .slider {width:1080px; height:710px; position:relative; }
.DivMain15 .slider .wrapper {width:1080px; height:710px; position:relative; left:0; overflow:hidden; text-align: center; }
.DivMain15 .slider .wrapper .content { position:absolute;width:8000px;height:530px;}
.DivMain15 .slider .wrapper .content .slider-item { width:1080px; height:710px; float:left; text-align:center;}
.DivMain15 .slider .prev {position:absolute; left:-42px; top:308px; width:22px; height:44px; cursor:pointer; z-index: 100;}
.DivMain15 .slider .next {position:absolute; right:-42px; top:308px; width:22px; height:44px; cursor:pointer; z-index: 100;}
/*---------*/

.DivMain16 { background: url(../../img/div16-bg.jpg) no-repeat center bottom #1a1e2b;height: 385px; }
.DivMain16 .Details {  text-align: center; color: #fff; }
.DivMain16 h2 {  font-size: 42px; font-weight: 800; padding: 70px 0 0; color: #fff; }
.DivMain16 h2 img { vertical-align: middle; }
.DivMain16 h3 { color: #ccc; font-size: 19px; padding: 30px 0; }
.DivMain16 .Btn { padding: 30px 0 0; }
.DivMain16 .Btn .Margin { margin: 0 40px 0 0; }
.DivMain16 .Btn a {text-decoration: none;}
.DivMain16 .Btn .Down {  background: #0fb4ff; color: #fff; border:1px solid #0fb4ff; display: inline-block; }
.DivMain16 .Btn .Down:hover { background: none;  color: #0fb4ff;}
.DivMain16 .Btn .Buy { background: #ffab1b; color: #fff; border:1px solid #ffab1b;  display: inline-block; }
.DivMain16 .Btn .Buy:hover { background: none;  color: #ffab1b; border:1px solid #ffab1b;  }

.gohome{padding:100px 0 50px; text-align:center;}
.gohome a{background:#0fb4ff; color:#fff; text-decoration:none; display:inline-block; line-height:53px; border-radius:10px; font-size:21px; padding:0 20px;}

.pcNo,.pic_mobile{display: none;}
.main02_pic{text-align: center;}
.main03_pic{padding: 20px 0 0;}
/*----------*/
.pop{ width:720px; height:379px;background:url(../images/lite/pop.png) no-repeat  center; }
.pop .main{ width:683px; margin:0 auto; padding:10px 0 0;}
.pop .main .close{ cursor:pointer; width:25px; height:25px; float:right; margin-right:10px;}
.pop .main .close img{display:none;}
.pop .main h2{ text-align:center; font-size:25px; color:#fff; font-weight:normal; padding:50px 0 120px;}
.pop .main p{ text-align:center; font-size:15px; color:#666;}
.pop .main .t{ text-align:center; font-size:17px; font-weight:bold; padding:30px 0 0;}
/* CSS Document */

@media (max-width: 979px) {

	.mobileNo{display: none;}
	.pcNo{display: block;}
	.detail{padding:0 5px; width: auto;}
	.main03 .detail> p,.main04 .detail>p,.main05 .detail>p,.main07 .detail>p{padding:0 20px;}
	/*----------*/

	.main01 h2{padding-top: 40px;}
	.main01 p{padding: 10px 0 0;}
	/*----------*/

	.main02{height: auto;}
	.main02 .text{float: none;width: auto; padding: 20px 0 0;}
	/*----------*/

	.main03{height: auto;}
	/*----------*/

	.main04{background:url(../images/lite/div02-bg01.jpg) repeat-x 0 top #000;height: auto; padding-bottom: 30px;}
	.main04_content .one{ position:relative; top:auto; left:auto; float:left; padding:20px 0 0;}
	.main04_content .one .pic{display:block;}
	/*----------*/

	.main05{height: auto;}
	.main05_content .ma05_one{ margin: 0 20px 20px 0!important; }
	.main05_content .ma05_one:nth-child(6){clear: none;}
	/*----------*/

	.main07{background: none; height: auto;}
	.main07 ul{width: auto; float: none;}
	.main07 .compo{text-align: left; padding: 20px 0 0;}
	/*----------*/

	.main09{height: auto;}
	.main09 .text{float: none; width: auto; padding: 20px 0 0 10px;}
	.main09 .main09_right{float: none;}
	/*----------*/
	
	.vc-close-a{right:16px; top:0;}
	/*----------*/

}

@media (max-width: 767px) {

	.main09_pic{display: none;}
	.pic_mobile{display: block;}
	h2{font-size: 30px;line-height: 30px; padding: 25px 0;}
	/*----------*/

	.main01{height: auto;}
	.main01 h2{padding-top: 50px;}
	.main01 h1{padding: 0 5px;}
	.main01 .btn .Margin{margin: 10px 0;}
	.main01 ul{width: auto;}
	.main01 .btn{padding: 100px 0 10px;}
	/*----------*/

	.main02,.main05{height: auto;padding-bottom: 30px;}
	.main02 h3{font-size: 18px;}
	.main03 .detail>p,.main04 .detail>p,.main05 .detail>p,.main07 .detail>p{padding:0;}
	/*----------*/

	.main04_content .one{float:none; width:auto; padding:20px 0;}

	.main05_content .ma05_one{ margin: 0 5px 20px 0!important; width: 48%; }
	/*----------*/


	.main09 .main09_pic,.main09_pic .pic_box{width: 100%;}
	/*----------*/

	.DivMain16{height: auto; background:#1a1e2b; padding-bottom: 20px;}
	.DivMain16 .Btn .Margin{margin: 10px 0;}
	/*----------*/

}

@media (max-width: 479px) {

	.main01_bottom .get_code{ width:auto;}
	.main01_bottom .get_code input{ width:95%; padding:0 2%; border-radius:5px; float:none; }
	.main01_bottom .get_code .get_key{ width:auto; float:none;border-radius:5px; margin:10px 0 0;}
	.main01_bottom .get_code .mess{ padding:5px 0 0;}
	/*----------*/

}