@charset "utf-8";
@media screen and (min-width: 240px) {
    html,body,button,input,select,textarea {
        font-size: 9px
    }
}
@media screen and (min-width:1280px) {
    .boxtext{
        width:1280px;
        margin:0 auto;
    }
}
@media screen and (min-width: 320px) { /*iphone 4,5*/
    html,body,button,input,select,textarea {
        font-size: 12px
    }
}

@media screen and (min-width: 360px) { /*samsung n3*/
    html,body,button,input,select,textarea {
        font-size: 13.5px
    }
}

@media screen and (min-width: 375px) { /*iphone 6*/
    html,body,button,input,select,textarea {
        font-size: 14px
    }
}

@media screen and (min-width: 414px) { /*iphone 6p*/
    html,body,button,input,select,textarea {
        font-size: 15.5px
    }
}

@media screen and (min-width: 450px) {
    html,body,button,input,select,textarea {
        font-size: 17px
    }
}

@media screen and (min-width: 480px) {
    html,body,button,input,select,textarea {
        font-size: 18px
    }
}

@media screen and (min-width: 540px) {
    html,body,button,input,select,textarea {
        font-size: 20.25px
    }
}

@media screen and (min-width: 600px) {
    html,body,button,input,select,textarea {
        font-size: 22px
    }
}

@media screen and (min-width: 640px) {
    html,body,button,input,select,textarea {
        font-size: 24px
    }
}

@media screen and (min-width: 768px) {
    html,body,button,input,select,textarea {
        font-size: 29px
    }
}

body,html {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: arial,"Heiti SC";
    color: #000;
    font-size: 1.2rem;
}
* {
/*    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box*/
}
a{
    text-decoration:none;
    color: white;
}
li{
    list-style-type: none;
}
header{
    width: 100%;
    height: 3rem;
}
header div{
    height: 3rem;
    width: 100%;
    font-weight: 700;
    text-align: center;
    color: white;
    background-color: #d91d36;
    line-height: 3rem;
    font-size: 1.2rem;
    position: fixed;
    z-index: 100;
}
header div img{
    width: 1.8rem;
    position: absolute;
    left: 0.5rem;
    top: 0.8rem;
    transform:rotate(-90deg);
    -ms-transform:rotate(-90deg);     /* IE 9 */
    -moz-transform:rotate(-90deg);    /* Firefox */
    -webkit-transform:rotate(-90deg); /* Safari 和 Chrome */
    -o-transform:rotate(-90deg);  /* Opera */
}
.head{
    width: 100%;
    height: 11rem;
    position: relative;
    border-bottom: 1px solid #CECECE;
    background-image: url(../image/bg.png);
    background-size: 100% 11rem;
}
.head-top{
    position: absolute;
    width: 100%;
    text-align: center;
}
.head div.logo{
    display: inline-block;
    padding-top: 1rem;
}
.head li.logo{
    display: inline-block;
    width: 5.5rem;
    height: 5.5rem;
    background-image: url(../image/logo.png);
    background-size: 5.5rem;
    background-repeat: no-repeat;
    /*border-radius: 0.8rem;
    box-shadow: 5px 5px 30px 4px white;*/
}
.head div.logo{
    display: inline-block;
    width: 7.5rem;
    height: 5rem;
}
.head div.explain{
    position: relative;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}
.head div.explain h3{
    position: relative;
    margin: 0;
    color: white;
    height: 2rem;
    line-height: 2rem;
}
.head div.explain p{
    width: 100%;
    margin: 0;
    height: 1.5rem;
    position: absolute;
    bottom: -3.2rem;
    color: white;
    font-size: 1rem;
}
.head div.explain li{
    width: 100%;    
    color: white;
    font-size: 0.9rem;
}
.head div.explain li.star{
    width: 40%;
    display: inline-block;
    line-height: 1.5rem;
    padding-right: 0.5rem;
}
.head div.explain li.star span{
    float: right;
    display: inline-block;
    width: 1.1rem;
    height: 1rem;
    margin: 0.25rem 0;
    background-image: url(../image/star.png);
    background-size: 1rem 1rem;
    background-repeat: no-repeat;
}
.head div.explain li.star span:first-child{
    background-image: url(../image/half-star.png);
}
.head div.explain li.font{
    font-size: 1rem;
    height: 1.5rem;
    line-height: 1.7rem;
}
.head div.explain li.font span{
    padding-right: 0.6rem;
    color: white;
}
.head div.download{
    padding-left: 9rem;
    padding-top: 2rem;
    text-align: center;
    height: 10rem;
    box-sizing: border-box;
}
.head div.download a{
    display: inline-block;
    width: 15rem;
    height: 2.5rem;
}
.head div.download li{
    display: inline-block;
    width: 15.5rem;
    height: 3rem;
    padding-bottom: 0.5rem;
}
.head div.download li.ios{
    background-image: url(../image/ios.png);
    background-repeat: no-repeat;
    background-size: 15rem;
}
.head div.download li.android{
    background-image: url(../image/android.png);
    background-repeat: no-repeat;
    background-size: 15rem;
}

.head div.tab{
    text-align: center;
    font-size: 0;
}
.head div.tab li.tab{
    width: 40%;
    display: inline-block;
    border: 1px solid #848484;
    font-size: 1rem;
    line-height: 1.8rem;
    color: #848484;
}
.head div.tab li.tab:nth-child(1){
    border-radius: 3px 0 0 3px
}
.head div.tab li.tab:nth-child(2){
    border-left: 0;
    border-radius: 0 3px 3px 0;
}
.head div.tab li.on{
    background-color: #848484;
    color: white;
}
#canvas{
    position: relative;
    width: 100%;
    height: 25.4rem;
    padding-left: 0.8rem;
    overflow-x: auto;
    box-sizing: border-box;
}
#canvas ul{
    position: absolute;
    overflow-x: auto;
    padding:0;
    font-size: 0;
    margin-top: 0.8rem;
    margin-bottom: 0.8rem;
    padding-right: 0.8rem;
}
#canvas li{
    width: 13rem;
    height: 23.4rem;
    display: inline-block;
    margin-right: 0.8rem;
    background-color: #dedede;
}
#canvas .ol{
    position: absolute;
    bottom: 50px;
    height: 0.5rem;
    text-align: center;
}
#canvas .ol span{
    display: inline-block;
    height: 8px;
    width: 8px;
    border-radius: 8px;
    background-color: #666666;
    margin-right: 10px; 
}
#canvas .ol span.white{
    background-color: white;
}
#canvas .out{
    position: absolute;
    bottom: 0;
    height: 50px;
}
#canvas .out li{
    width: 100%;
    text-align: center;
    color: white;
}
.img_big{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 400;
    background-color: white;
    opacity: 0.99;
}
.img_big .img_head{
    height: 3rem;
    border-bottom: 1px solid #BCBCBC;
}
.img_big #canvas_big{
    position: relative;
    overflow-x: hidden;
}
.img_big #canvas_big ul{
    padding: 0;
    margin: 0;
    padding-top: 2rem;
    font-size: 0;
    overflow-x: hidden;
}
.img_big #canvas_big ul li{
    display: inline-block;
    margin:0 0.5rem;
    max-width: 20rem;
}
.img_big #canvas_big ul li img{
    position: relative;
    width: 100%;
    height: 100%;
}
.img_big .img_head p{
    margin: 0;
    line-height: 3rem;
    width: 4rem;
    text-align: center;
    float: right;
    font-size: 1.2rem;
    color: #1C71FF;
}
.img_big .ol{
    position: absolute;
    height: 2rem;
    padding-top: 1rem;
    text-align: center;
    bottom: 0;
    left: 0;
    z-index: 403;
}
.img_big .ol span{
    display: inline-block;
    height: 10px;
    width: 10px;
    border-radius: 10px;
    background-color: #666666;
    margin-right: 10px; 
}
.img_big .ol span.blue{
    background-color: blue;
}
.word{
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}
.word div{
    padding-bottom: 2rem;
}
.word h3{
    position: relative;
    margin: 0;
    margin-bottom: 0.8rem;
    padding-top: 0.5rem;
    border-top: 1px solid #CECECE;
    padding-left: 1.8rem;
    height: 2rem;
    line-height: 2rem;
}
.word h3 img{
    position: absolute;
    left: 0;
    top: 0.75rem;
    height: 1.5rem;
}
.word li{
    color: #616161;
    font-size: 1rem;
    line-height: 1.5rem;
}
.word li.indent{
    text-indent:2em;
}
.word li.indent .red{
    color: #d91d36;
}
#activity{
    margin:1rem;
    border:1px solid #c2c2c2;
    -moz-border-radius:0.5rem;
    -webkit-border-radius:0.5rem;
    border-radius:0.5rem;
    background:#fff;
}

.titBox{
    margin:0 auto;
    border-bottom:1px solid #c2c2c2;
}
.titBox .tit{
    margin:0.5rem auto;
    text-align:center;
    font-size:1.4rem;
    font-weight:700;
    background:url(../image/gift.png) 1rem center no-repeat;
    background-size:contain;
}
.titBox .time{
    margin:1rem auto;
    font-size:1.0rem;
    color:#d91d36;
    text-indent:1rem;
}
.conBox{
    margin:1rem;
}
.conBox .con{
    display:inline-block;
    font-size:0.9rem;
    line-height:2rem;
}
.conBox .con h3{
    margin:0;
}


/* 分享 */
#share{
    margin:0 auto;
    width:100%;
    max-width:460px;
}
#share h2{
    margin:0 auto;
    text-align:center;
    width:100%;
    color:#d91d36;
    padding:2rem 0 0;
}
#share .qrcode{
    margin:3rem auto 0;
    width:80%;
    border:1px solid #929292;
    color:#929292;
    position:relative;
}
#share .qrcode span{
    position:absolute;
    background:#fff;
    text-align:center;
    top:-2rem;
    left:50%;
    margin-left:-7rem;
    width:14rem;
    font-size:1rem;
    line-height:1.8rem;
    text-align:center;
}
#share .qrcode li{
    display:inline-block;
    width:100%;
    text-align:center;
}
#share .qrcode img{
    display:inline-block;
    /*width:80%;*/
    width:80%;
    margin:3rem 0 2rem;
}
#share .con{
    margin:1.5rem auto 0;
    text-align:center;
    width:100%;
    font-size:1.2rem;
    line-height:2.4rem;
    color:#d91d36;
}

/* 注册 */
.bg_reg{
    background-color:#fff;
}
.bg_black{
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: black;
    opacity: 0.6;
    z-index: 300;
}
footer{
    height: 5rem;
    background-color: white;
}
footer div{
    position: fixed;
    width: 100%;
    height: 5rem;
    box-sizing: border-box;
    text-align: center;
    padding-top: 0.7rem;
    bottom: 0;
    background-color: white;
    z-index: 100;
}
footer p{
    width: 100%;
    height: 1.5rem;
    line-height: 1.5rem;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    text-align: center;
    background-color: white;
}
footer li.register{
    display: inline-block;
    width: 10rem;
    height: 2rem;
    background-color: #d91d36;
    border-radius: 100px;
    line-height: 2rem;
    color: white;
    font-weight: 600;
    font-size: 1.2rem;
}
footer li.register a{
    display: inline-block;
    width: 10rem;
    height: 2rem;
    line-height: 2rem;
}
footer li.old{
    display: inline-block;
    line-height: 1.9rem;
    font-size: 1rem;
    position: absolute;
    left: 0.8rem;
    top: 2.3rem;
}
footer a.old{
    color: blue;
}
#reg{
    background-image:url(../image/share_bg.png);
    background-position:center top;
    background-repeat:no-repeat;
    /*background-size:24rem;*/
    background-size:100% 18.5rem;
    margin:0 auto;
    width:100%;
    max-width:750px;
    padding-bottom: 4rem;
    position: fixed;
    bottom: -33rem;
    background-color: white;
    z-index: 301;
}
#reg img.close{
    height: 1.6rem;
    padding: 0.5rem;
    float: right;
}
#reg .logo{
    display:inline-block;
    margin:0 auto;
    width:100%;
    text-align:center;
    position:relative;
    height:13rem;
}
#reg .logo h2{
    display:inline-block;
    width:100%;
    margin:1rem 0 0;
    height:7.5rem;
    background-image:url(../image/logo.png);
    background-position:center top;
    background-repeat:no-repeat;
    background-size:contain;
}
#reg .logo h2.six{
    background-image:url(../image/6.png);
}
#reg .logo .ver{
    position:absolute;
    width:100%;
    left:0;
    z-index:2;
}
#reg .logo li{
    float:left;
    width:100%;
    line-height:1.4rem;
    font-size:0.9rem;
    color:#939393;
    font-family: arial;
}
#reg .logo li:nth-child(1){
    font-family: "Heiti SC";
    font-size:1.2rem;
    padding:0 0 1rem;
    /*font-weight:bold;*/
    color:#000;
}
#reg .regBox{
    display:inline-block;
    margin:2rem auto 0;
    width:100%;
}
#reg .regBox li{
    float:left;
    width:100%;
    border-bottom:1px solid #ededed;
    position:relative;
    height:2.6rem;
    line-height:2.6rem;
    font-family: "Heiti SC";
}
#reg .regBox li label{
    position:absolute;
    left:1.6rem;
    top:0;
    width:30%;
    text-align:left;
    font-size:0.9rem;
}
#reg .regBox li:nth-child(1) label{
    letter-spacing:0.6rem;
}
#reg .regBox li:nth-child(2) label{
    letter-spacing:2.1rem
}
#reg .regBox li span{
    float:right;
    width:76%;
    position:relative;
    font-size:0.9rem;
}
#reg .regBox li:nth-child(1) span em{
    top:-1.5rem;
}
#reg .regBox li span em{
    position:absolute;
    right:0.5rem;
    top:0;
    font-style:normal;
    text-align:right;
    color:red;
    font-size:1rem;
    /*font-weight:bold;*/
}
#reg .regBox li span input{
    display:inline-block;
    border:0;
    padding:0;
    width:100%;
    color:#939393;
    line-height:2rem;
}
#reg .regBox li:nth-child(1) span input{
    width:17rem;
    padding:0 0 0 0.1rem;
}
#reg .regBox li:last-child{
    border:0;
    padding:1rem 0 0;
    text-align:center;
}
.btn-submit{
    display:inline-block;
    margin:0.6rem 0 0;
    width:80%;
    text-align:center;
    border:0;
    -webkit-border-radius:0.4rem;
    -moz-border-radius:0.4rem;
    border-radius:0.4rem;
    background:#d91d36;
    color:#fff;
    line-height:3rem;
    font-size:1.2rem;
}
#reg .downBox{
    display:inline-block;
    margin:3.8rem auto 0;
    width:100%;
}
.service{
    margin:0 auto 2rem 0.6rem;
    text-align:center;
}
.service a{
    display:inline-block;
    height:3rem;
    line-height:3rem;
    text-decoration:none;
    color:#000;
    background-size:contain;
    background-position:left center;
    background-repeat:no-repeat;
    font-size:1.1rem;
    text-align:left;
    text-indent:3.2rem;
    margin-right:3%;
}
.service a.qq{
    background-image:url(../image/qq.png);
}
.service a.wx{
    background-image:url(../image/wx.png);
}
.service a.online{
    background-image:url(../image/online.png);
}
#reg .downBox li{
    float:left;
    width:100%;
    text-align:center;
    padding:0.5rem 0 0.8rem;
    /*height:4.5rem;*/
}
#reg .downBox li a{
    display:inline-block;
    width:81%;
}
#reg .downBox li a img{
    width:20rem;
}
#reg .downBox li a:active img{
    width:19rem;
}
#reg .downBox li p{
    display:inline-block;
    width:100%;
    height:2rem;
    padding:0;
    margin:0.5rem 0 0;
}
#reg .downBox li p img{
    display:inline-block;
    width:1.6rem;
    font-size:0;
    margin:0 0.6rem 0 0;
    vertical-align:middle;
}
#reg .downBox li p a{
    width:auto;
    color:#000;
    line-height:2rem;
}
img.gray{
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}
#reg .downBox li a:active img.gray{
    width:20rem;
}

#install{
    margin:1rem;
}
#install h4{
    margin:2rem 0 1rem;
}
#install .button{
    padding:1rem 0 4rem;
}

.loading{
    position:fixed;
    z-index:101;
    left:0;
    top:0;
    width:100%;
    height:100%;
    display:none;
}
.loading .shadow{
    float:left;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
}
.loading .img{
    position:fixed;
    z-index:11;
    left:0;
    top:50%;
    width:100%;
    text-align:center;
    font-size:0;
}
.loading .img img{
    width:8rem;
    height:8rem;
    margin:-4rem 0 0;
}
.loading .gzh{
    position:fixed;
    z-index:11;
    left:0;
    top:50%;
    width:100%;
    text-align:center;
    font-size:0;
    margin-top:-10rem;
}
.loading .gzh .box{
    margin:0 auto;
    display:inline-block;
    width:16rem;
    height:22rem;
    overflow:hidden;
    font-size:1.2rem;
}
.loading .gzh .box li{
    display:inline-block;
    width:100%;
    margin-bottom:1rem;
}
.loading .gzh .box li:first-child{
    background:#fff;
    font-weight:bold;
    padding:1rem 0;
}
.loading .gzh .box li p{
    display:inline-block;
    width:100%;
    margin:0;
    color:#000;
    line-height:2rem;
}
.loading .gzh .box li img{
    width:12rem;
    font-size:0
}
.loading .gzh .box li a{
    display:inline-block;
    width:10rem;
    height:2rem;
    line-height:2rem;
    border:1px solid #d2d2d2;
    background:#fff;
    color:#000;
    text-decoration:none;
    border-radius:0.4rem;
}

.loading1{
    position:fixed;
    z-index:10;
    left:0;
    top:0;
    width:100%;
    height:100%;
    display:none;
}
.loading1 .shadow1{
    float:left;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.7);
}
.loading1 .img{
    position:fixed;
    z-index:11;
    left:0;
    top:50%;
    width:100%;
    text-align:center;
    font-size:0;
}
.loading1 .img img{
    width:8rem;
    height:8rem;
    margin:-4rem 0 0;
}
.loading1 .gzh{
    position:fixed;
    z-index:11;
    left:0;
    top:50%;
    width:100%;
    text-align:center;
    font-size:0;
    margin-top:-10rem;
}
.loading1 .gzh .box{
    margin:0 auto;
    display:inline-block;
    width:16rem;
    height:22rem;
    overflow:hidden;
    font-size:1.2rem;
}
.loading1 .gzh .box li{
    display:inline-block;
    width:100%;
    margin-bottom:1rem;
}
.loading1 .gzh .box li:first-child{
    background:#fff;
    font-weight:bold;
    padding:1rem 0;
}
.loading1 .gzh .box li p{
    display:inline-block;
    width:100%;
    margin:0;
    color:#000;
    line-height:2rem;
}
.loading1 .gzh .box li img{
    width:12rem;
    font-size:0
}
.loading1 .gzh .box li a{
    display:inline-block;
    width:10rem;
    height:2rem;
    line-height:2rem;
    border:1px solid #d2d2d2;
    background:#fff;
    color:#000;
    text-decoration:none;
    border-radius:0.4rem;
}
div.lx{
    height: 8rem;
    padding-left: 0.8rem;
    padding-right: 0.8rem;
}
div.lx h3{
    padding-top: 0.5rem;
    border-top: 1px solid #CECECE;
}
