*{margin:0px;padding:0px;}
i,em{font-style:normal;}
html{
 }
body{
 font-family:"Droid Sans Fallback", "微软雅黑", Arial, sans-serif;
 max-width:750px;
 min-width:320px;
 font-size:0.14rem;
 margin:0 auto;
 position:relative;
}
i,em{font-style:normal}
a{text-decoration:none;}
img{display:block;}

.con{
  width:100%;
  height:auto;
}

.header{
  width:100%;
  margin:0 auto;
  height:60px;
  position:relative;
  background:#353940;
  z-index:999;
}

.header_logo{
  width:100px;
  float:left;
  height:100%;
  margin-left:10px;
}

.header_logo a{
  display:block;
  width:100%;
  height:100%;
  background:url(../images/logo.png) center 10px no-repeat;
  background-size:100% auto;
}

.header_r{
  width:20%;
  height:100%;
  float:right;
}
.header_r a{
  display:block;
  width:100%;
  height:100%;
}
.header_r a.header_l{
  width:100%;
  height:100%;
  background:url(../images/menu.png) center no-repeat;
  background-size:40px auto;
}
.header_r a.header_close{
  width:100%;
  height:100%;
  background:url(../images/close.png) center no-repeat;
  background-size:40px auto;
}

.banner{
  width:100%;
  height:auto;
}

.banner img{
  width:100%;
  height:auto;
}

.swiper-pagination-bullet{
  width:25px;
  height:3px;
  border-radius:0;
  background:rgba(0,0,0,1);
}
.swiper-container-horizontal > .swiper-pagination{
  bottom:5px;
  opacity:0.9;
}
.swiper-pagination-bullet-active{
  background:#353940;
 
}

.title1{
  width:100%;
  height:auto;
  background:url(../images/title_1.png) left center no-repeat;
  background-size:auto 70%;
  margin:20px 0;
}

.title1 p{
 font-size:1.8rem;
 color:#333333;
 font-weight:bold;
 padding:10px 0;
 padding-left:30px;
 }
 .title1 span{
 	padding-top: 20px;
 }


.title2{
  width:90%;
  margin:30px auto;
  height:60px;
  
}

.title2 img{
  float:left;
  height:60px;
}

.title2 p{
  display:table;
  font-weight:bold;
  float:left;
  width:auto;
  height:100%;
  margin-left:4%;
}

.title2 p span{
  font-size:1.3rem;
  color:#333;
  display:table-cell;
  vertical-align:middle;
}

.title_con{
  width:90%;
  margin:0 auto;
  font-size:0.9rem;
  color:#999999;
  line-height:25px;
}
.con_button{
  width:89%;
  margin:0 auto;
  height:50px;
  display:block;
  border:1px solid #999999;
  background:url(../images/button1.png) center no-repeat;
  background-size:110px auto;
  margin-top:40px;
  margin-bottom:50px;
}

.as_button{
  width:89%;
  margin:0 auto;
  height:50px;
  display:block;
  border:1px solid #999999;
  background:url(../images/button1_as.png) center no-repeat;
  background-size:110px auto;
  margin-top:40px;
  margin-bottom:50px;
}

.con_2s{
  width:100%;
  height:auto;
  background:url(../images/con2_b.png) top left no-repeat;
  background-size:100% 100%;
  -moz-background-size:100% 100%;
  background-repeat: no-repeat;
  color:white;
  padding-bottom:1px;
}

.con_2s h2{
  font-size:1.4rem;
  text-align:center;
  padding:40px 0;
}
.con2_t{
  width:90%;
  margin:0 auto;
  color:white;
  overflow:hidden;
}

.con2_t img{
  height:60px;
  float:left;
}
.con2_t p{
  display:table;
  float:left;
  margin-left:20px;
  width:70%;
}
.con2_t p i{
  display:block;
  padding-bottom:15px;
  font-size:1.2rem;
  font-weight:bold;
  line-height: 1.6em;
}
.con2_t p span{
  font-size:0.9rem;
  color:rgba(255,255,255,0.7);
  line-height: 1.6em;
}

.con_2s .con_button {
    width: 89%;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 50px;
    height: 50px;
    display: block;
    border: 1px solid white;
    background: url(../images/button2.png) center no-repeat;
    background-size: 110px auto;
}

.con_2s .as_button {
    width: 89%;
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 50px;
    height: 50px;
    display: block;
    border: 1px solid white;
    background: url(../images/button2_as.png) center no-repeat;
    background-size: 110px auto;
}


.con_s3{
   width:90%;
   margin:0 auto;
   height:auto;
   padding-bottom:30px;
}

.con_s3 h2{
   font-size:1.5rem;
   font-weight:bold;
   color:#333333;
   padding-top:50px;
}
.con_s3 p{
   width:100%;
   height:auto;
   line-height:25px;
   color:#999; 
   font-size:0.9rem;
   padding:20px 0;
}

.con_s3 img{
   width:90%;
   margin:0 auto;
}


.form{
   width:90%;
   margin:0 auto;
   height:auto;
}
.form>img{
  display:block;
  width:70%;
  margin:0 auto;
}

.form>p{
   width:100%;
   height:auto;
   padding:10px 0;
   font-size:1rem;
   color:#999;
   line-height: 2em;
}
.form .mail{
   display:block;
   font-size:1.3rem;
   font-weight:bold;
   color:#5ab82c;
   margin-bottom:30px;
}

.form_box{
   width:100%;
   height:auto;
}

.form_box p{
  width:100%;
  height:auto;
  margin-bottom:20px;
}

.form_box p input{
  display:block;
  width:100%;
  height:50px;
  outline:none;
  border:1px solid #d0d0d0;
  line-height:50px;
  text-indent:20px;
  font-size:1rem;
  background:#fafafa;
  color:#d0d0d0;
}
.form_box p input:focus{
  border-color:#5ab82c;
  color:#5ab82c;
}

.form_box p a{
  display:block;
  width:100%;
  height:50px;
  font-size:1.2rem;
  font-weight:bold;
  color:white;
  text-align:center;
  line-height:50px;
  background:#5ab82c;
}
.form_box textarea{
  width:100%;
  height:120px;
  resize:none;
  padding:15px 0;
  outline:none;
  background:#fafafa;
  border:1px solid #d0d0d0;
  margin-bottom:20px;
}

.form_box textarea:focus{
  border-color:#5ab82c;
  color:#5ab82c;
  text-indent:15px;
  font-size:1rem;
}

.con_s3_l{
  width:70%;
  height:auto;
  margin:0 auto;
  overflow:hidden;
  padding:20px 0;
  padding-bottom:40px;
}
.con_s3_l a{
  display:block;
  width:20%;
  float:left;
  margin-right:20%;
}
.con_s3_l a:last-child{
  margin-right:0;
  float:right;
}
.con_s3_l a img{
  width:100%;
  height:auto;
}

.footer{
  width:100%;
  height:auto;
  background:#353940;
  padding-bottom:30px;
}

.footer_box{
  width:90%;
  margin:0 auto;
  background:url(../images/logo.png) -15px 12px no-repeat;
  background-size:120px auto;
  padding-top:80px;
}

.footer_box>p{
  width:100%;
  height:auto;
  border-top:1px solid #484e57;
  border-bottom:1px solid #484e57;
  padding:20px 0;
}

.footer_box>p span{
  display:block;
  width:100%;
  height:auto;
  padding:15px 0;
  color:white;
  font-size:1rem;
}

.footer_box>p a{
  display:block;
  padding:5px 0;
  color:#86888b;
  font-size:0.9rem;
}

.footer_box>span{
  display:block;
  width:100%;
  height:auto;
  padding:20px 0;
  color:white;
  font-size:0.8rem;
  line-height:25px;
}

.footer_box i{
  display:block;
  font-size:0.7rem;
  
}
.footer_box i a{
  color:#86888b;
}

.con .vip_con1{
  width:100%;
  height:auto;
}
.con .vip_con1 .img_title{
   width:90px;
   height:auto;
   margin:0 auto;
   padding-top:50px;
}

.con .vip_con1 h2{
   text-align:center;
   font-weight:bold;
   color:#333;
   padding-bottom:20px;
   font-size:2rem;
}
.vip_con1 .vip_con{
   width:90%;
   margin:0 auto;
   font-size:0.9rem;
   text-align:center;
   color:#999;
   line-height:25px;
}
.vip_con1 .vip_img{
   display:block;
   width:70%;
   margin:0 auto;
   padding:20px 0;
}

.vip_con1 .vip_button{
  display:block;
  width:90%;
  margin:0 auto;
  height:50px;
  background:#333333;
  line-height:50px;
  margin-bottom:20px;
}
.vip_con1 .vip_button span{
  display:table;
  width:250px;
  margin:0 auto;
  height:100%;
  font-weight:bold;
  color:white;
  font-size:0.9rem;
  background:url(../images/vip_b1.png) left center no-repeat;
  background-size:35px auto;
  text-indent:40px;
}
.vip_con1 .vip_button2 span{
  background:url(../images/vip_b2.png) left center no-repeat;
  background-size:35px auto;
}


.vip_con1 .vip_con2{
   width:100%;
   margin:0 auto;
   font-size:0.9rem;
   text-align:center;
   color:#333333;
   line-height:25px;
   background:url(../images/vip_con2b.png) center bottom no-repeat;
   background-size:100% auto;
   padding-bottom:15%;
}
.vip_con1 .vip_con2 p{
   width:90%;
   margin:0 auto;
}


.vip_con1 .vip_con3{
   width:100%;
   margin:0 auto;
   font-size:0.9rem;
   text-align:center;
   color:white;
   line-height:25px;
   background:url(../images/vip_con3b.png) center bottom no-repeat #38464d;
   background-size:100% auto;
   padding-bottom:50px;
   padding-top:30px;
}

.vip_con1 .vip_con3 p{
   width:86%;
   margin:0 auto;
}
.vip_con4{
   width:100%;
   margin:0 auto;
   font-size:0.9rem;
   text-align:center;
   background:white;
   padding-top:20px;
}
.vip_con1 .vip_con4>p{
   width:90%;
   margin:0 auto;
   line-height:25px;
   color:#333;
}
.vip_con4_box{
   width:86%;
   margin:0 auto;
   overflow:hidden;
   padding:20px 2%;
   margin-top:20px;
   margin-bottom:20px;
}

.vip_con4_box>p{
  width:45%;
  float:left;
  background:white;
  border-radius:5px;
  box-shadow:0px 6px 16px rgba(201,205,208,0.3)
}
.vip_con4_box>p:last-child{
  float:right;
}
.vip_con4_box>p img{
  width:80%;
  margin:0 auto;
}
.vip_con4_box>p span{
  display:block;
  text-align:center;
  font-size:0.8rem;
  font-weight:bold;
  line-height:20px;
  color:#333;
  margin-top:-15px;
}
.vip_con4_box>p a{
  display:block;
  width:80%;
  height:35px;
  line-height:35px;
  border:1px solid #d0d0d0;
  background:url(../images/vip_con4_3.png) center no-repeat;
  margin:15px auto;
  background-size:120px auto;
}

.vip_con1 .vip_button_b{
  background:#3b5998;
}
.vip_con1 .vip_button_b span{
   display:table;
   margin:0 auto;
   overflow:hidden;
   background:none;
   width:140px;
   font-size:0.7rem;
   text-align:left;
}
.vip_button_b span img{
   display:block;
   float:left;
   width:auto;
   height:30px;
   margin-top:10px;
}

.vip_con1 .vip_button_b span i{
  display:block;
  float:Left;
  text-align:left;
  margin-left:-25px;
}

.header_list{
  position:absolute;
  top:60px;
  left:0;
  width:100%;
  height:auto;
  background:rgba(53,57,64,0.98);
  display:none;
}

.header_list ul{
 
}

.header_list li{
  width:100%;
  margin:0 auto;
  height:50px;
  line-height:50px;
  list-style:none;
  position:relative;
}
.header_list li:last-child a{
  border:none;
}
.header_list li a{
  display:block;
  height:100%;
  width:90%;
  margin:0 auto;
  font-size:0.9rem;
  color:white;
  text-align:center;
  border-bottom:1px solid #575b61;
}

.header_list li p{
  display:none;
  width:100%;
  height:auto;
  background:rgba(53,57,64,0.98);
  position:absolute;
  top:50px;
  left:0;
  display:none;
}
.header_list li.list_k.active>a{
  background:url(../images/img_left.png) left center no-repeat;
  background-size:25px auto;
}
.header_list li p a{
  width:90%;
  margin:0 auto;
  height:50px;
  line-height:50px;
    border-bottom:0;
  border-top:1px solid #575b61;
  list-style:none;
  position:relative;
  font-size:0.8rem;
  color:rgba(255,255,255,0.7);
}


.pro1_con{
  width:100%;
  height:auto;
  margin-top:24px;
  padding-bottom:40px;
  background:url(../images/pro1.png) right 40% no-repeat,
  url(../images/pro2.png) left 93% no-repeat;
}

.pro1_con p{
  width:85.4%;
  margin:0 auto;
  font-size:1rem;
  color:#999999;
  line-height:1.5em ;
}

.pro1_con a{
  width:85.4%;
  margin:0 auto;
  font-size:1rem;
  color:#666666;
  line-height:1.5em ;
}

.pro1_con span{
  display:block;
  height:auto;
  font-size:1.2rem;
  color:#333333;
  width:85.4%;
  margin:0 auto;
  font-weight:bold;
  margin-top:15px;
  padding-bottom:15px;
}
.pro1_con i{
  display:block;
  width:85.4%;
  margin:0 auto;
  font-size:1rem;
  color:#333;
  padding-top:20px;
  padding-bottom:15px;
}

.pro1_con  ol{
  display:block;
  width:75%;
  margin:0 auto;
  font-size:0.9rem;
  color:#999999;
}




.applock{
  width:100%;
  height:auto;
}
.applock .titles{
  width:90%;
  margin:0 auto;
  text-align:center;
  padding-top:40px;
}
.applock .titles>img{
  width:70px;
  height:auto;
  margin:0 auto;
  margin-bottom:10px;
}

.applock .titles i{
  display:block;
  font-weight:bold;
  color:#333;
  font-size:1.3rem;
  margin-bottom:10px;
}

.applock .titles em{
  display:block;
  color:#333;
  font-size:1rem;
  margin-bottom:10px;
  font-weight:bold;
}

.applock .titles span{
  display:block;
  width:100%;
  line-height:23px;
  font-size:0.9rem;
  color:#999;
  
}

.applock .titles a{
  display:block;
  width:100%;
  margin:0 auto;
  margin-top:30px;
}

.applock .titles a img{
  width:100%;
  height:auto;
}

.applock_1{
  width:100%;
  height:auto;
  margin-top:25px;
  background:url(../img/b1.png) left 60px no-repeat;
  background-size:100% auto;
}
.applock_1>img{
  width:80%;
  margin:0 auto;
  height:auto;
}
.applock_1 ul{
  width:88%;
  margin:0 auto;
  padding:10px 1%;
  margin-top:25px;
}

.applock_1 ul li{
  list-style:none;
  text-align:center;
  padding:20px 0;
  padding-bottom:30px;
  border-radius: 10px;
  background: white;
  margin-bottom:30px;
  box-shadow: 0px 6px 16px rgba(201,205,208,0.3);
}
.applock_1 ul li img{
  width:30%;
  margin:0 auto;
}

.applock_1 ul li span{
  display:block;
  font-size:1.3rem;
  color:#333333;
  font-weight:bold;
}

.applock_1 ul li p{
  display:block;
  width:80%;
  margin:0 auto;
  color:#999;
  font-size:0.8rem;
  line-height:20px;
  margin-top:10px;
}

.applock_2{
  width:90%;
  margin:0 auto;
  height:auto;
}
.applock_2 p{
  width:100%;
  height:auto;
  line-height:23px;
  color:#666;
  font-size:0.9rem;
  padding:30px 0;
}

.applock_2 img{
  width:80%;
  margin:0 auto;
}

.applock_3{
  width:100%;
  height:auto;
  margin-top:50px;
}

.applock_3 img{
  width:100%;
  height:auto;
}
.applock_4{
  padding:30px 0;
}

.mixnote{
  width:100%;
  height:auto;
  background:url(../img/b2.png) bottom center no-repeat #DEDEDE;
  background-size:100% auto;
  padding-bottom:25%;
}

.mixnote_title{
  width:100%;
  height:auto;
  padding-top:55px;
  text-align:center;
  
}

.mixnote_title>img{
  margin:0 auto;
  width:80%;
}

.mixnote_title>img:nth-child(1){
  width:70px;
}
.mixnote_title span{
  display:block;
  font-size:1.3rem;
  color:#333;
  font-weight:bold;
  padding-top:20px;
}

.mixnote_title p{
  font-size:0.9rem;
  color:#999;
  padding:13px 0;
  padding-bottom:25px;
  width:90%;
  margin:0 auto;
  line-height:25px;
}
.mixnote_title a{
  display:block;
  width:90%;
  height:auto;
  margin:0 auto;
  margin-top:30px;
}
.mixnote_title a img{
  display:block;
  width:100%;
  height:auto;
}

.mixnote_1{
  width:100%;
  height:auto;
}

.mixnote_1 p{
  width:90%;
  margin:0 auto;
  padding:35px 0;
  font-size:0.9rem;
  color:#333;
  line-height:25px;
}
.mixnote_1 img{
  width:100%;
  margin:0 auto;
}

.mixnote_1 span{
  display:block;
  padding:20px 3%;
  width:94%;
  background:#2e2e2e;
  font-size:0.9rem;
  line-height:25px;
  color:white;
  text-align:center;
}

.mixnote_2{
  width:100%;
  height:auto;
  margin-top:50px;
}
.mixnote_2 p{
  width:90%;
  margin:0 auto;
  font-size:0.9rem;
  color:#333;
  text-align:center;
  line-height:25px;
}
.mixnote_2 img{
  width:90%;
  margin:0 auto;
}



.anihero_con{
  width:100%;
  height:auto;
}
.anihero_con1{
  width:100%;
  position:relative;
  height:0;
  height:auto;
  padding-bottom:25px;
}
.anihero_con1 .ani_img_title{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:auto;
  z-index:-1;
}
.anihero_con1 p{
  position:relative;
  z-index:2;
  height:45px;
  margin-left:10%;
  padding-top:45px;
  overflow:hidden;
}
.anihero_con1 p img{
  position:relative;
  z-index:5;
  float:left;
  height:100%;
  width:auto;
}
.anihero_con1 p span{
  display:block;
  float:left;
  font-size:1rem;
  color:#ffd04c;
  font-weight:bold;
  margin-left:10px;
}
.anihero_con1 .ani_big_img{
  width:74%;
  height:auto;
  margin:0 auto;
  position:relative;
  z-index:5;
  margin-top:20px;
}
.anihero_con1 em{
  display:block;
  width:80%;
  margin:0 auto;
  position:relative;
  z-index:5;
  font-size:0.95rem;
  color:#666666;
}
.anihero_con2{
  position:relative;
  width:100%;
  height:0;
}
.anihero_con2>img{
  width:100%;
  height:auto;
}
.anihero_con2>a{
  position:absolute;
  width:60%;
  left:20%;
  bottom:0;
}
.anihero_con2>a img{
  width:100%;
  height:auto;
}

.ani_buttons{
  width:70%;
  margin:0 auto;
  position:relative;
  z-index:5;
  padding-top:10%;
}
.ani_buttons a{
  display:block;
  width:100%;
  
  margin-bottom:3%;
}
.ani_buttons img{
  width:100%;
  height:auto;
}

.koe_con .anihero_con2 > a{
  width:50%;
  left:25%;
  bottom:5%;
}

.koe_con .anihero_con1 em{
  position:absolute;
  bottom:9%;
  width:80%;
  left:10%;
  
}


.apple_button{
  display:block;
  width:90%;
  margin:0 auto;
  height:50px;
  background:#333333;
  line-height:50px;
  margin-bottom:20px;
}
.apple_button span{
  display:table;
  width:250px;
  margin:0 auto;
  height:100%;
  font-weight:bold;
  color:white;
  font-size:0.9rem;
  background:url(../images/vip_b1.png) left center no-repeat;
  background-size:35px auto;
  text-indent:40px;
}
.play_button span{
  background:url(../images/vip_b2.png) left center no-repeat;
  background-size:35px auto;
}



