@charset "utf-8";
.nav-son-left {}
.vct.web .nav-son-left {position:fixed; top:45%; left:1%; z-index:8;}
.vct.web .nav-son-left li {width:10px; height:10px; padding:5px 0; background:url(../images/position-blur.png) no-repeat 50% 50%; background-size:50% auto;}
.vct.web .nav-son-left li.focus {background:url(../images/position-focus.png) no-repeat 50% 50%; background-size:100% auto;}

.index {}
.index .page {position:relative; overflow:hidden;}
.index .page .bg {}
.index .page .bg img {}
.index .page a {display:block; width:100px; height:20px; margin:0 auto; background:#0098da; text-align:center; font-size:1rem; color:#FFF; line-height:20px;}
.index .page .text {position:absolute; top:5%; left:0%; width:100%; height:95%; text-align:center;}
.index .page .text span {font-size:1rem;}
.index .page .text p {font-size:1rem;}
.index .page .text p span {font-size:1rem;}
.index .page .img {position:absolute; bottom:0%; left:5%; width:90%;}
.index .page .btn {position:absolute; bottom:1%; left:5%; width:90%;}
.index .page .rs {position:absolute; top:35%; left:24%; width:50%; text-align:center; font-size:1rem;}
.index .page .rs img {width:36%; margin:0 auto;}
.index .page .rs span {font-size:1rem;}
.index .page .rs a {margin-top:2%;}
.index .page .lite {position:absolute; top:35%; left:54%; width:50%; text-align:center; font-size:1rem;}
.index .page .lite img {width:40%; margin:0 auto; }
.index .page .lite span {font-size:1rem;}
.index .page .lite a {margin-top:2%;}

.index .page .rp {position:absolute; top: 35.4%; left:-8%; width:50%; text-align:center; font-size:1rem;}
.index .page .rp img {width:36%; margin:0 auto;}
.index .page .rp span {font-size:1rem;}
.index .page .rp a {margin-top:2%;}

.index .page1 .bg {}

.index .page1 .bg img {}
.index .page2 .p1-animate  {margin-bottom: 20px;}
.index .page3 .p1-animate  {margin-bottom: 20px;}

.index .page1 .text {top:18%; left:-15%; zoom:1; z-index:2;}
.index .page1 .text p {letter-spacing:0.5rem; font-size:1.75rem; color:#0098da;}
.index .page1 .text p span {display:block; letter-spacing:0rem; color:#666;}
.index .page1 a {width:11px; height:11px;}
.index .page1 .shop {position:absolute; bottom:5%; right:5%; width:100px; height:20px; background:#ee0a3b;}
.index .page1 .icon {position:absolute; bottom:7.5%; left:45%; width:10%; height:31px; background:url(../images/icon.png) no-repeat 50% 50%; z-index:2; display:none;}
.index .page2 .text {}
.index .page2 a {}
.index .page2 .img1 {position:absolute; top:62.3%; left:7.9%; width:12.2%;}
.index .page2 .img2 {position:absolute; top:44.4%; left:32.8%; width:4.3%;}
.index .page2 .img3 {position:absolute; top:55%; left:45.4%; width:8.1%;}
.index .page2 .img4 {position:absolute; top:71.7%; left:67.1%; width:6.3%;}
.index .page2 .img5 {position:absolute; top:50.4%; left:72.3%; width:4.75%;}
.index .page2 .img6 {position:absolute; top:27.9%; left:87.4%; width:6.4%;}
.index .page3 .text {}
.index .page4 .text {}

.index .page4 .lite{display:none;}

.index .page4 { min-height: auto;}
.index .page4 .rp {left:38%;}
.index .page4 .rs {left:63%;}

	.page4 .proground strong{    font-size: 2rem;}
.index .page4 .proground{display:none;}

.index .page4 .rp span,
.index .page4 .rs span
{display:block;}

.index .page5 .text {top:24%;    width: 73%;}

.index .page5 a {}
.index .page6 .text {left:-20%;}
.index .page6 a {margin:8% auto;}

.index .page7 {min-height:200px;}
.index .page7 .proground{padding: 0 10px; position:relative;}
.index .page7 .bg {position:absolute;}
.index .page7 .rp {top:19.9%; left:6%;}
.index .page7 .rp .span1 {display:inline-block; width:13px; height:13px; background:#FFF; border:solid 1px #797979; margin-top:2%;}
.index .page7 .rp .span2 {display:inline-block; width:13px; height:13px; background:#000; border:solid 1px #a69174; margin-top:2%;}

.index .page7 .text { display: block; margin-bottom: 20px; position:relative;}

.index .page7 .rs { top: 19%;left: 42%; position:static; }
.index .page7 .rp { top: 19%;left: 42%; position:static;}
.index .page7 .rt { top: 19%;left: 42%; position:static;}

.index .page7 .rs .span1 {display:inline-block; width:13px; height:13px; background:#FFF; border:solid 1px #797979; margin-top:2%;}
.index .page7 .rs .span2 {display:inline-block; width:13px; height:13px; background:#a69174; border:solid 1px #a69174; margin-top:2%;}
.index .page7 .rs .span3 {display:inline-block; width:13px; height:13px; background:#d9b2ad; border:solid 1px #d9b2ad; margin-top:2%;}
.index .page7 .rs .span4 {display:inline-block; width:13px; height:13px; background:#b7e3ff; border:solid 1px #b7e3ff; margin-top:2%;}
.index .page7 .lite .span5 {display:inline-block; width:13px; height:13px; background:#B3CCB6; border:solid 1px #B3CCB6; margin-top:2%;}
.index .page7 .lite {top:20%; left: 59%; position:static;}
.index .page7 .lite .span1 {display:inline-block; width:13px; height:13px; background:#FFF; border:solid 1px #797979; margin-top:2%;}
.index .page7 .lite .span2 {display:inline-block; width:13px; height:13px; background:#fae685; border:solid 1px #fae685; margin-top:2%;}
.index .page7 .lite .span3 {display:inline-block; width:13px; height:13px; background:#ffcdd5; border:solid 1px #ffcdd5; margin-top:2%;}
.index .page7 .lite .span4 {display:inline-block; width:13px; height:13px; background:#b7e3ff; border:solid 1px #b7e3ff; margin-top:2%;}

.index .page7 .proground div{ display:inline-block;    width: 49%; margin-bottom: 30px;}

.index .page8 .text {top:1%; height:auto;}
.index .page8 ul {margin-top:10%;}
.index .page8 ul li {margin-bottom:5%;}
.index .page8 ul li a {width:100%; height:auto; background:#FFF;}
.index .page8 ul li img {width:90%; margin:0 auto; cursor:pointer;}
.index .page8 ul li p {width:80%; margin:1% auto 0; text-align:center; font-size:1rem; color:#000;}
.index .page8 ul li p span {display:block; font-size:1rem; color:#0098da;}
.index .page8 a {margin-bottom:5%;}

.vct.web .index {padding:0 60px}
.vct.web .index .page {min-height: 768px;}
.vct.web .index .page .bg {position:absolute; top:-12.5%; left:-50%; width:200%; height:125%;}
.vct.web .index .page .bg img {width:auto; height:99.5%; margin:0 auto;}
.vct.web .index .page .bg .slides img{}
.vct.web .index .page4 .bg img { }
.vct.web .index .page a {width:150px; height:24px; font-size:1.25rem; line-height:24px;}
.vct.web .index .page .text {top:10%; height:90%;}
.vct.web .index .page .text span {}
.vct.web .index .page .text p {font-size:2rem;}
.vct.web .index .page .text p span {font-size:1.5rem;}
.vct.web .index .img {bottom:5%; left:25%; width:50%;}
.vct.web .index .btn {bottom:7.5%; left:25%; width:50%;}
.vct.web .index .page .rs {left:63%; width:20%; font-size:2rem;}
.vct.web .index .page .rs img {width:50%;}
.vct.web .index .page .rs span {display:block; font-size:1.25rem;}
.vct.web .index .page .rs a {}
.vct.web .index .page .lite {left:77%; width:20%; font-size:2rem;display:block;}
.vct.web .index .page .lite img {width:50%;}
.vct.web .index .page .lite span {display:block; font-size:1.25rem;}
.vct.web .index .page .lite a {}

.vct.web .index .page .rp { left: 49%;width: 20%;font-size: 2rem;text-align: center;position: absolute;top: 35%;}
.vct.web .index .page .rp img { width: 46%;display: block;margin: 0 auto;}
.vct.web .index .page .rp span {display:block; font-size:1.25rem;}
.vct.web .index .page .rp a {margin-top: 2%;}

.vct.web .index .page1 .bg {top:0; height:100%;} 
.vct.web .index .page1 .bg img {height: 110%;}
.vct.web .index .page1 .text {top:40%; left:-10%;}

.vct.web .index .page2 .p1-animate { margin-bottom: 20px;position: relative;top: -30px;}
.vct.web .index .page3 .p1-animate { margin-bottom: 15px;position: relative;top: -30px;}

.vct.web .index .page1 .text p {font-size:3rem;}
.vct.web .index .page1 .text p span {}
.vct.web .index .page1 a {width:11px; height:11px;}
.vct.web .index .page1 .shop {position:absolute; bottom:5%; right:30%; width:150px; height:24px; background:#ee0a3b;}
.vct.web .index .page1 .icon {display:block;}
.vct.web .index .page2 {opacity:0;}
.vct.web .index .page2 .text {}
.vct.web .index .page2 a {margin-top:2%;}
.vct.web .index .page3 .text {top:20%; left:-25%;}

#.vct.web .index .page4 {min-height: 875px;}
.vct.web .index .page4 {}
.vct.web .index .page4 .text {left:25%;}

.vct.web .index .page4 .proground{ width: 520px;text-align: center;margin-left: auto;margin: 0 auto;position: relative;left: 26%;top: 225px; display:block;}
.vct.web .index .page4 .rp,
.vct.web .index .page4 .rs,
.vct.web .index .page4 .rt,
.vct.web .index .page4 .lite{
  position:static;
  display:inline-block;
  width: 200px;
  margin-bottom: 20px;
}

.vct.web .index .page4 .rp img,
.vct.web .index .page4 .rs img,
.vct.web .index .page4 .rt img,
.vct.web .index .page4 .lite img {
  width: auto;
}

.vct.web .index .page5 .text {}
.vct.web .index .page5 a {margin-top:2%;}
.vct.web .index .page6 .text {top:20%;}
.vct.web .index .page6 a {margin:4% auto;}
.vct.web .index .page7 .text {height: auto; position:relative;z-index:10;}
.vct.web .index .page7 .rs {top:25%; left:34%; width:30%;}
.vct.web .index .page7 .rs .span1 {display:inline-block;}
.vct.web .index .page7 .rs .span2 {display:inline-block;}
.vct.web .index .page7 .rs .span3 {display:inline-block;}
.vct.web .index .page7 .rs .span4 {display:inline-block;}
.vct.web .index .page7 .lite {top:25%; left:62%; width:30%;display:block;}
.vct.web .index .page7 .lite .span1 {display:inline-block;}
.vct.web .index .page7 .lite .span2 {display:inline-block;}
.vct.web .index .page7 .lite .span3 {display:inline-block;}
.vct.web .index .page7 .lite .span4 {display:inline-block;}
.vct.web .index .page7 .lite .span5 {display:inline-block;}

.vct.web .index .page7 .rp {top:25.2%; left:5%; width:30%;}
.vct.web .index .page7 .rp .span1 {display:inline-block;}
.vct.web .index .page7 .rp .span2 {display:inline-block;}

.vct.web .index .page7 .proground {text-align:center;margin: 0 auto; margin-top: 175px;}
.vct.web .index .page7 .proground > div{position:static;}

.vct.web .index .page7 .proground .rp,
.vct.web .index .page7 .proground .rs,
.vct.web .index .page7 .proground .lite,
.vct.web .index .page7 .proground .rt{
  display:inline-block;
  width: 230px;
}

.vct.web .index .page7 .proground .rp img,
.vct.web .index .page7 .proground .rs img,
.vct.web .index .page7 .proground .lite img,
.vct.web .index .page7 .proground .rt img{
  width: auto;
}

.vct.web .index .page8 .text {top:5%; height:auto;}
.vct.web .index .page8 ul {width:80%; margin:10% auto 0; overflow:auto;}
.vct.web .index .page8 ul li {float:left; width:33%;}
.vct.web .index .page8 ul li a {width:100%; height:auto; background:#FFF;}
.vct.web .index .page8 ul li img {}
.vct.web .index .page8 ul li p {font-size:1.25rem;}
.vct.web .index .page8 ul li p span {font-size:1.5rem;}
.vct.web .index .page8 a {}
.vct.web .index .page8 a.opacity {opacity:0;}

.vct.web .animate {opacity:0; transform:translateY(30px); transition:opacity 2s ease,transform 2s ease;}
.vct.web .animate.after {opacity:1; transform:translateY(0px);}

.vct.web .hover-blur:hover {box-shadow:0px 0px 10px 5px #6CF;}
.vct.web .hover-gray:hover {box-shadow:0px 0px 10px 5px #CCC;}

.maskLayer{position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 100; overflow: auto; opacity: 1; background: rgba(0,0,0,0.5); display: block;}
.videoBox{width: 800px; height: 500px; margin-left: -400px; margin-top: -250px; top: 50%; position: absolute; left: 50%;}
.videoBoxContainer{width: 800px; height: 500px; padding: 0px; background: #fff;}
.popinsider{padding: 20px;}
.maskLayer .videoPlay{background: url(../images/loading-l.gif) no-repeat center #000000;}
.maskLayer .videoBox a {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 30px;
    height: 30px;
    background: transparent url('../images/fancybox.png') -40px 0px;
    cursor: pointer;
}

/*.flexslider .slides li {margin-right: 50px; height: 100%;}*/

@media screen and (min-width: 320px) and (max-width: 400px) {
  .index .page2 .text {top:.5%;}
  .index .page2 .text p {line-height: 16px;}

  .index .page4 .text p{ line-height: 1.2;margin-top: -1%;}

  .index .page4 .rp {left: 33%;  }
  .index .page4 .rs {left: 61%;  }
	
  .index .page5 .text .sp-p5 {display:block;}
  .index .page5 .text p {margin-bottom: 1rem;}
  .brw400 {display:none;}
}