body{ color: #000000; }
#a9 img{ max-width: 100%; width: 100%; vertical-align: bottom; }
.float-left{ float: left; }
.clear{ clear: both; }
.overflow{ overflow: hidden; }
.center{ text-align: center; }
.positon-absolute{ position: absolute; }
#a9 .bbs{ font-size: 2.4vw; line-height: 2.8vw; }
#a9 .mss{ font-size: 2.3vw; line-height: 2.6vw; margin: 0.5vw 0px 1.8vw 0px; }
#a9 .sss{ font-size: 1.4vw; line-height: 2.4vw; }
#a9 .box1{ overflow: hidden; position: relative; }
#a9 .box1 .boxBox{ width: 30%; left: 15%; top: 20%; position: absolute; }
#a9 .box1 .boxBox .android{ width: 67%;  }
#a9 .box1 .boxBox .big{ font-size: 3.2vw; line-height: 3.6vw; margin: 1% 0px 1% 0px; }
#a9 .box1 .boxBox .middle{ font-size: 1.6vw; line-height: 2.2vw; }
#a9 .box1 .boxBox .mt{ margin-top: 8%; }
#a9 .box1 .boxBox .small{ font-size: 1.2vw; line-height: 2.4vw; margin-bottom: 2%; }
#a9 .box1 .boxBox .img{ width: 10%; margin-right: 2%; vertical-align: middle; }
#a9 .box1 .tips{ width: 70%; left: 15%; position: absolute; bottom: 1%; font-size: 0.8vw; line-height: 1.2vw; }
#a9 .box1 .imgPhone{ position: absolute; width: 32%; left: 49%; top: 5%; }
#a9 .box2 {  overflow: hidden; }
#a9 .box2 .positon-absolute{ width: 100%; text-align: center; top: 72%; left: 0%; }
#a9 .box2 ul{ overflow: hidden; width: 74%; margin: 4% auto; }
#a9 .box2 ul li{ float: left; width: 24.25%; position: relative; }
#a9 .box2 ul li.mr{ margin-right: 1%; }
#a9 .box2 ul li.mt{ margin-bottom: 3%; }
#a9 .box2 .s{ font-size: 1vw; line-height: 1.4vw; }
#a9 .box3{ position: relative; overflow: hidden; }
#a9 .box3 .boxBox{ position: absolute; width: 74%; left: 13%; top: 4%; text-align: center; }
#a9 .box3 ul{ overflow: hidden ; width: 74%; left: 13%; top: 90%; position: absolute; }
#a9 .box3 ul li{ float: left; width: 50%; text-align: center; }
#a9 .box3 ul li .b{ font-size: 1.4vw; line-height: 1.8vw;  }
#a9 .box3 ul li .s{ font-size: 1vw; line-height: 1.4vw;  }
#a9 .box4{ position: relative; overflow: hidden; }
#a9 .box4 .boxBox{ position: absolute; width: 74%; left: 13%; top: 4%; text-align: center; }
#a9 .box4 .tips{ width: 74%; margin: 1% auto 2% auto; font-size: 1vw; line-height: 1.6vw; text-align: center; }
#a9 .box4 .yueya1{ position: absolute; width: 1%; left: 41%; top: 43%; }
#a9 .box4 .yueya2{ position: absolute; width: 1.5%; left: 43%; top: 41%; }
#a9 .box4 .yueya3{ position: absolute; width: 2%; left: 46%; top: 39%; }
#a9 .box4 .yueya4{ position: absolute; width: 2.5%; left: 48%; top: 37%; }
#a9 .box4 .yueya5{ position: absolute; width: 3%; left: 50%; top: 35%; }


#a9 .box5{ position: relative; overflow: hidden; }
#a9 .box5 .boxBox{ position: absolute; width: 74%; left: 13%; top: 4%; text-align: center; }
#a9 .box5 ul{ overflow: hidden ; width: 74%; left: 13%; top: 85%; position: absolute; }
#a9 .box5 ul li{ float: left; width: 14.28%; text-align: center; }
#a9 .box5 ul li .b img{ width: 30%; }
#a9 .box5 ul li .s{ font-size: 1vw; line-height: 1.4vw;  }
#a9 .box6{ position: relative; overflow: hidden; }
#a9 .box6 .boxBox{ position: absolute; width: 74%; left: 13%; top: 4%; text-align: center; color: #ffffff; }
#a9 .box6 .positon-absolute{ width: 20%; color:#ffffff; }
#a9 .box6 .positon-absolute img{ position: absolute; width: 15%; left: -17%; top: 6%; }
#a9 .box6 .p1{ left: 33%; top: 85%; }
#a9 .box6 .p2{ left: 31%; top: 20%; }
#a9 .box6 .p3{ left: 44%; top: 20%; }
#a9 .box6 .p4{ left: 60%; top: 20%; }
#a9 .box6 .p5{ left: 50%; top: 87%; }
#a9 .box6 .p5 img{ top: -36%; }
#a9 .box6 .s{ font-size: 1vw; line-height: 1.6vw; }
#a9 .box7{ overflow: hidden; }
#a9 .box7 .boxBox{  width: 74%; margin: 4% auto 2% auto; text-align: center; }
#a9 .box7 .po{ position: relative; width: 74%; margin: 2% auto 4% auto; overflow: hidden; border-radius: 10px; }
#a9 .box7 .bg{ width: 100%; top: 0%; height: 100%; position: absolute ; background-color: rgba(0,0,0,0.5); animation: all 0.7s linear; }
#a9 .box7 .bg.active{ -webkit-animation: bg 0.7s linear ; animation: bg 0.7s linear ;animation-iteration-count:1; animation-fill-mode: forwards; }
@-webkit-keyframes bg {
   0% {width: 100%}
   50%{ width: 0%; }
   100% {width:50%;}
}
@keyframes bg {
   0% {width: 100%}
   50%{ width: 0%; }
   100% {width:50%;}
}
#a9 .box7 .p{ position: absolute; width: 10%; font-size: 1.4vw; line-height: 1.8vw; color: #ffffff; }
#a9 .box7 .before{ left: 2%; bottom: 2%; }
#a9 .box7 .after{ right: 2%; bottom: 2%; text-align: right; }
#a9 .box8{ position: relative; overflow: hidden; }
#a9 .box8 .boxBox{ width: 74%; position: absolute;top: 2%; left: 13%; text-align: center; z-index: 1; }
#a9 .box8 .positon-absolute{ position: absolute; background-color: #ffffff; }
#a9 .box8 .top{ width: 100%; height: 30%; left: 0%; top: 0%;transition:all 0.3s linear; -moz-transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -o-transition:all 0.3s linear; }
#a9 .box8 .right{ width: 23%; height: 100%; right: 0%; top: 0%; transition:all 0.3s linear; -moz-transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -o-transition:all 0.3s linear;}
#a9 .box8 .bottom{ width: 100%; height: 11%; left: 0%; bottom: 0%;transition:all 0.3s linear; -moz-transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -o-transition:all 0.3s linear; }
#a9 .box8 .left{ width: 23%; height: 100%; left: 0%; top: 0%;transition:all 0.3s linear; -moz-transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -o-transition:all 0.3s linear; }
#a9 .box8 .top.active{ height: 0%; }
#a9 .box8 .right.active{ width: 0%; }
#a9 .box8 .bottom.active{ height: 0%; }
#a9 .box8 .left.active{ width: 0%; }

#a9 .box9{ position: relative; overflow: hidden; }
#a9 .box9 .boxBox{ position: absolute; width: 74%; left: 13%; top: 4%; text-align: center; }
#a9 .box10{ position: relative; overflow: hidden; }
#a9 .box10 .boxBox{ width: 74%; margin: 4% auto 2% auto; text-align: center; }
#a9 .box10 .pBox{ width: 74%; border-radius: 30px; margin: 2% auto 4% auto; overflow: hidden;  }
#a9 .box11{ position: relative; overflow: hidden;color: #ffffff; background-color: #000000; }
#a9 .box11 .boxBox{ position: absolute; width: 74%; left: 13%; top: 6%; text-align: center; }
#a9 .box11 ul{ overflow: hidden ; width: 74%; left: 13%; top: 51%; position: absolute;  }
#a9 .box11 ul li{ float: left; width: 25%; text-align: center; }
#a9 .box11 ul li img{ width: 20%; }
#a9 .box11 ul li .b{ font-size: 1.4vw; line-height: 1.8vw;  }
#a9 .box11 ul li .s{ font-size: 1vw; line-height: 1.4vw;  }
#a9 .box11 .width{ width: 74%;margin: 6% auto; position: relative; overflow: hidden; }
#a9 .box11 .width .circle{ width: 40%; margin-left: 10%; }
#a9 .box11 .width .bbox{ width: 40%; position: absolute; left: 60%; top: 16%; }
#a9 .box11 .width .bbox .b{ font-size: 1.6vw; line-height: 1.8vw; }
#a9 .box11 .width .bbox .m{ font-size: 1vw; line-height: 1.6vw; margin-top: 5%;  }
#a9 .box11 .width .bbox .bb{ font-size: 1.2vw; line-height: 1.4vw;  margin: 6% auto 2% auto; }
#a9 .box11 .width .bbox .bb.color-yellow{ color: #FBE10C; }
#a9 .box11 .width .bbox .mm{ font-size: 1vw; line-height: 1.2vw; }
#a9 .box11 .width .bbox .tips{ font-size: 0.8vw; line-height: 1.2vw; margin-top: 10%; }
#a9 .box11 .width .line1{ position: absolute; top: 68%; left: 73%; width: 0%; border-radius: 10px; height: 8px; background-color: #F5B001;transition:all 0.3s linear; -moz-transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -o-transition:all 0.3s linear; }
#a9 .box11 .width .line2{ position: absolute; top: 74%; left: 73%; width: 0%; border-radius: 10px; height: 8px; background-color: #12ABF5;transition:all 0.3s linear; -moz-transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -o-transition:all 0.3s linear; }
#a9 .box11 .width .line1.active{ width: 26%; }
#a9 .box11 .width .line2.active{ width: 20%; }
#a9 .box11 .width .pp{ width: 20%; position: absolute; left: 20%; top: 35%; text-align: center; }
#a9 .box11 .width .pp .sss{ font-size: 1.4vw; line-height: 1.6vw; }
#a9 .box11 .width .pp .bbb{ font-size: 3vw; line-height: 3.2vw;margin: 7% 0px; }
#a9 .box11 .width .pp .mmm{ font-size: 1.4vw; line-height: 1.6vw; }

#a9 .box12{ position: relative; overflow: hidden;color: #ffffff; }
#a9 .box12 .boxBox{ position: absolute; width: 74%; left: 13%; top: 10%; text-align: center; }
#a9 .box12 .pBox{ position: absolute; width: 30%; left: 13%; top: 36%; }
#a9 .box12 .pBox .b{ font-size: 1.6vw; line-height: 2vw; color: #d0bc03; }
#a9 .box12 .pBox .b .game{ height: 2vw; width: auto; }
#a9 .box12 .pBox .s{ font-size: 1vw; line-height: 2vw; }
#a9 .box12 .pBox .mt{ margin: 3% 0px 8% 0px; }
#a9 .box12 .pBox .color-white{ color: #ffffff; }
#a9 .box12 .pBox .bs{ font-size: 1.6vw; line-height: 2vw; color: #d0bc03; margin-top: 8%; }
#a9 .box12 .pBox .ms{ font-size: 1.2vw; line-height: 1.6vw; margin-top: 1%; }
#a9 .box12 .pBox .line{ width: 0%; height: 8px; margin-top: 3%; border-radius: 50px; outline: none; border:inherit;transition:all 0.3s linear; -moz-transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -o-transition:all 0.3s linear;  }
#a9 .box12 .pBox .l1{ background-color: #14c4f6; }
#a9 .box12 .pBox .l2{ background-color: #fcdb04; }
#a9 .box12 .pBox .l3{ background-color: #14c4f6; }
#a9 .box12 .pBox .l4{ background-color: #fcdb04; }
#a9 .box12 .pBox .l1.active{  width: 46%; }
#a9 .box12 .pBox .l2.active{ width: 60%; }
#a9 .box12 .pBox .l3.active{width: 48%; }
#a9 .box12 .pBox .l4.active{ width: 60%; }
#a9 .box12 .pBox .tips{ font-size: 0.8vw; line-height: 1.2vw; color: #6f6f71; margin-top: 1%; }

#a9 .box13{ position: relative; overflow: hidden; color: #ffffff; }
#a9 .box13 .boxBox{ position: absolute; width: 40%; left: 13%; top: 60%; }
#a9 .box14{ position: relative; overflow: hidden; }
#a9 .box14 .width{ width: 74%; margin: 6% auto; }
#a9 .box14 .boxBox{ position: absolute; width: 28%; left: 13%; top: 17%; }
#a9 .box14 .imgBox{ width: 50%; margin-left: 50%; position: relative; }
#a9 .box14 .imgBox .img1{ position: relative; z-index: 1; }
#a9 .box14 .imgBox .img2{ position: absolute; z-index: 0; left: 0%; top: 0%; }
#a9 .box14 .imgBox .img3{ position: absolute; z-index: 0; left: 0%; top: 0%; }
#a9 .box14 .mt{ margin-top: 12%; }
#a9 .box14 .boxBox .m{ font-size: 1.4vw; line-height: 2.2vw; }
#a9 .box14 ul{ overflow: hidden; position: absolute; width: 70%; left: 13%; top: 80%; }
#a9 .box14 ul li{ float: left; margin-right: 2%; cursor: pointer; width: 10vw; text-align: center; height: 2vw; font-size: 1vw; line-height: 2vw; border-radius: 2vw; border: 1px solid #b2b2b2; }
#a9 .box14 ul li:nth-child(1).active{ background-color: #215C9C;color: #ffffff; border: 1px solid #215C9C; }
#a9 .box14 ul li:nth-child(2).active{ background-color: #0C858A;color: #ffffff; border: 1px solid #0C858A; }
#a9 .box14 ul li:nth-child(3).active{ background-color: #3B3B3B;color: #ffffff; border: 1px solid #3B3B3B; }
#a9 .box15{ position: relative; overflow: hidden; }
#a9 .box15 .boxBox{  width: 74%; margin: 4% auto 2% auto; text-align: center; }
#a9 .box16{ position: relative; overflow: hidden;height: 80vw;}
#a9 .box16 .boxBox{ position: absolute; width: 74%; left: 13%; top: 2%; text-align: center; }
#a9 .box16 .boxBox .img{ height: 2.4vw; width: auto; vertical-align: top; }
#a9 .box16 .circle{ position: absolute; left: -31%; top: 23.2%; width: 60%;transition:all 3s linear; -moz-transition:all 3s linear; -webkit-transition:all 3s linear; -o-transition:all 3s linear; }
#a9 .box16 .circle.active{ -webkit-animation: circleScroll 3s linear infinite; animation: circleScroll 3s linear infinite; }
@-webkit-keyframes circleScroll {
   from{ transform: rotate(0deg) ;}
   to{ transform: rotate(360deg); }
}
@keyframes circleScroll {
   from{ transform: rotate(0deg) ;}
   to{ transform: rotate(360deg); }
}
#a9 .box16 .img1{ position: absolute; width: 15%; left: 33.2%; top: 36.5%; z-index: 2; transition:all 0.3s linear; -moz-transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -o-transition:all 0.3s linear; }
#a9 .box16 .img2{ position: absolute; width: 15%; left: 52.5%; top: 44%; z-index: 2; }
#a9 .box16 .img3{ position: absolute; width: 15%; left: 71.5%; top: 36.5%; z-index: 2; transition:all 0.3s linear; -moz-transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -o-transition:all 0.3s linear; }
#a9 .box16 .img4{ position: absolute; width: 64%; left: 29.5%; top: 63.5%; z-index: 1; transition:all 0.3s linear; -moz-transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -o-transition:all 0.3s linear; }
#a9 .box16 .img5{ position: absolute; width: 54%; left: 29%; top: 31.5%; z-index: 1; transition:all 0.3s linear; -moz-transition:all 0.3s linear; -webkit-transition:all 0.3s linear; -o-transition:all 0.3s linear; }
#a9 .box16 .img5.active{ left: 42%; }
#a9 .box16 .img4.active{ left: 42.5%; }
#a9 .box16 .img1.active{ top: 44%; }
#a9 .box16 .img3.active{ top: 44%; }
#a9 .box16 .img1.active2{ top: 51.5%; }
#a9 .box16 .img3.active2{ top: 51.5%; }
#a9 .box16 .pt{ position: absolute; width: 54%; left: 23%; top: 21%; }
#a9 .box17{ position: relative; overflow: hidden;color: #ffffff; }
#a9 .box17 .boxBox{ position: absolute; width: 74%; left: 13%; top: 6%; text-align: center; }
#a9 .box18{ position: relative; overflow: hidden;color: #ffffff; }
#a9 .box18 .boxBox{ position: absolute; width: 74%; left: 13%; top: 6%; text-align: center; }