@charset "utf-8";
/* CSS Document */
*{margin:0px;padding:0px; }
div,p,dl,dd,a,b,u,em,input,textarea,button,select,form,section,label,span,td,li,nav,footer,body,ul,i {
    font-family: "Microsoft YaHei","微软雅黑",helvetica,arial,verdana,tahoma,sans-serif;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    word-wrap:break-word;
    word-break:break-all;
    padding:0;
    margin:0;
    list-style:none
}
a:focus,a:active {
    outline:0
}
body,td,input,textarea,option,select,button {
    /*font-family:Helvetica,Arial,sans-serif;*/
    /*font-family:Verdana,Tahoma,Helvetica,Arial,sans-serif;*/
    /*font-family:Tahoma, Helvetica, Arial, sans-serif;*/
    /*fon-family:'微软雅黑',Helvetica,Arial,sans-serif;*/
    font-size: 1em;
    -webkit-text-size-adjust:none
}
html{width:100%;height:100%}
body {
    -webkit-user-select:none;
    user-select:none;
    overflow-x:hidden;
    min-width:320px;
    height: 100%;
}
img,video,nav,textarea,input,button {
    border:0;
    vertical-align:bottom
}

a,a:visited {
    text-decoration:none;
    color:#000000;/**/
    -webkit-touch-callout:none
}
h1,h2,h3,h4,h5,h6 {
    font-weight: 300;
}

.boxflex{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}
.box-orient{
    -moz-box-orient:vertical;
    -webkit-box-orient:vertical;

    -ms-flex-direction:column;
    -webkit-flex-direction: column;
    flex-direction: column;

    -webkit-box-direction:normal
}
.boxAlignCenter{
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}

.flex_value_auto{
    -webkit-box-flex: auto;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: auto;         /* OLD - Firefox 19- */
    -webkit-flex: auto;          /* Chrome */
    -ms-flex: auto;              /* IE 10 */
    flex: auto;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}


.flex_value{
    -webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 1;         /* OLD - Firefox 19- */
    -webkit-flex: 1;          /* Chrome */
    -ms-flex: 1;              /* IE 10 */
    flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}
.flex_value_2{
    -webkit-box-flex: 2;      /* OLD - iOS 6-, Safari 3.1-6 */
    -moz-box-flex: 2;         /* OLD - Firefox 19- */
    -webkit-flex: 2;          /* Chrome */
    -ms-flex: 2;              /* IE 10 */
    flex: 2;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

html {
    font-size: 20px!important;
}
body {
    font-size: 14px!important;
}
@media only screen and (min-width: 320px) {
    html {
        font-size:18.559px!important;
    }
}
@media only screen and (min-width: 330px) {
    html {
        font-size:19.139px!important;
    }
}
@media only screen and (min-width: 340px) {
    html {
        font-size:19.718px!important;
    }
}
@media only screen and (min-width: 350px) {
    html {
        font-size:20.3px!important;
    }
}
@media only screen and (min-width: 360px) {
    html {
        font-size: 20.875px!important;
    }
}
@media only screen and (min-width: 370px) {
    html {
        font-size: 21.459px!important;
    }
}
@media only screen and (min-width: 380px) {
    html {
        font-size: 22.039px!important;
    }
}
@media only screen and (min-width: 390px) {
    html {
        font-size: 22.618px!important;
    }
}
@media only screen and (min-width: 400px) {
    html {
        font-size: 23.2px!important;
    }
}
@media only screen and (min-width: 410px) {
    html {
        font-size: 23.779px!important;
    }
}
@media only screen and (min-width: 420px) {
    html {
        font-size: 24.359px!important;
    }
}
@media only screen and (min-width: 430px) {
    html {
        font-size: 24.939px!important;
    }
}
@media only screen and (min-width: 440px) {
    html {
        font-size: 25.519px!important;
    }
}
@media only screen and (min-width: 450px) {
    html {
        font-size: 26.1px!important;
    }
}
@media only screen and (min-width: 460px) {
    html {
        font-size: 26.679px!important;
    }
}
@media only screen and (min-width: 470px) {
    html {
        font-size: 27.259px!important;
    }
}
@media only screen and (min-width: 480px) {
    html {
        font-size: 27.839px!important;
    }
}
@media only screen and (min-width: 490px) {
    html {
        font-size: 28.418px!important;
    }
}
@media only screen and (min-width: 500px) {
    html {
        font-size:29px!important;
    }
}
@media only screen and (min-width: 510px) {
    html {
        font-size:29.579px!important;
    }
}
@media only screen and (min-width: 520px) {
    html {
        font-size:30.159px!important;
    }
}
@media only screen and (min-width: 530px) {
    html {
        font-size:30.739px!important;
    }
}
@media only screen and (min-width: 540px) {
    html {
        font-size:31.318px!important;
    }
}
@media only screen and (min-width: 550px) {
    html {
        font-size:31.9px!important;
    }
}
@media only screen and (min-width: 560px) {
    html {
        font-size:32.479px!important;
    }
}
@media only screen and (min-width: 570px) {
    html {
        font-size:33.059px!important;
    }
}
@media only screen and (min-width: 580px) {
    html {
        font-size:33.639px!important;
    }
}
@media only screen and (min-width: 590px) {
    html {
        font-size:34.218px!important;
    }
}
@media only screen and (min-width:600px) {
    html {
        font-size:34.8px!important;
    }
}
@media only screen and (min-width:610px) {
    html {
        font-size:35.379px!important;
    }
}
@media only screen and (min-width:620px) {
    html {
        font-size:35.959px!important;
    }
}
@media only screen and (min-width:630px) {
    html {
        font-size:36.539px!important;
    }
}
@media only screen and (min-width: 640px) {
    html {
        font-size:37.118px!important;
    }
}
@media only screen and (min-width:720px) {
    html {
        font-size:41.759px!important;
    }
}

.body{
    min-width: 320px;
    /*max-width: 640px;*/
    margin: 0 auto;
    color: #0d0a03;
}
.indexbody{
    position: relative;
    background-color: #b1f3ff;
    background-image: url(img/bg.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
    padding-top:177.77%;
}
.start{
    width:100%;
    position: absolute;
    z-index: 10;
    top:61%;
    left: 0;
}
.start a{
    display: block;
    width:65.69%;
    margin: 0 auto;
}
.hand{
    width:33.06%;
    position: absolute;
    z-index: 20;
    right: 0;
    bottom: 0;
}
.ansbody{
    position: relative;
    background-image:url(img/bg2.png), url(img/bg1.jpg);
    background-repeat:no-repeat,repeat-y;
    background-size:100% auto,100% auto;
    background-position:top 40% center,top center;
}
.allhead{
    width: 100%;
    height:1.5rem;
}
.rectopic{
    width:88.33%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    padding: 5% 0;
}
.rectopic .topic-center{
    width: 100%;
    background-image:url(img/angle1.png), url(img/angle2.png);
    background-repeat:no-repeat,no-repeat;
    background-size:1.5rem auto,2rem auto;
    background-position:top left,bottom right;
    padding: 0.2rem 0 0.4rem 0;
}
.rectopic .topic-center h3{
    text-align: center;
    color: #cc3c33;
    font-size: 1.5rem;
    font-weight: bold;
}
.rectopic .topic-bottom{
    padding: 1% 3%;
}
.rectopic .topic-bottom p{
   color: #333333;
    font-size: 0.7rem;
    line-height: 1.1rem;
}
.recan{
    width: 100%;
    background-image: url(img/bg3.png);
    background-repeat: no-repeat;
    background-size:100% auto;
    background-position:top center;
    height:19rem;
    padding-top:2.2rem;
}
.recan ul{
    width:72%;
    margin-left: auto;
    margin-right: auto;
    display: block;
}
.recan ul li{
    width: 100%;
    height: 2.5rem;
    margin:1rem 0;
    font-size: 0.7rem;
}
.recan ul li a{
    width: 14rem;
    color: #333333;
    border:2px solid #000000;
    background-color: #ffffff;
    border-radius:10px;
    padding-left: 2rem;
    height: 2.8rem;
    display: table-cell;
    vertical-align: middle;
}
.recan ul li .check{
    background-color: #cc3c33;
    border: 2px solid #000000;
    color: #ffffff;
    position: relative;
}
.recan ul li .check:before{
    content: "";
    width:1.2rem;
    height:2.5rem;
    position: absolute;
    left:0.3rem;
    top: 0;
    background-image: url(img/ico_check.png);
    background-position: center;
    background-size: 1.2rem auto;
    background-repeat: no-repeat;
}
.recan ul li .cross{
    background-color: #cc3c33;
    border: 2px solid #000000;
    color: #ffffff;
    position: relative;
}
.recan ul li .cross:before{
    content: "";
    width:1.2rem;
    height:2.5rem;
    position: absolute;
    left:0.3rem;
    top: 0;
    background-image: url(img/ico_cross.png);
    background-position: center;
    background-size: 1.2rem auto;
    background-repeat: no-repeat;
}
.pen{
    width:16.66%;
    position: absolute;
    z-index: 20;
    right: 0;
    bottom:2%;
}


.resultbody{
   width: 100%;
    position: relative;
    background-image: url(img/bg5_a.jpg);
    background-position:top center;
    background-size:100% auto;
    background-repeat: no-repeat;
    padding-top:50.83%;
}
.result{
    width: 100%;
    position: relative;
}
.result .sult-center{
    width: 100%;
    height: 16rem;
}
.result .sult-bottom{
    width: 100%;
    position: relative;
    height:5.8rem;
}
.result .sult-center .photo{
    width:85%;
    margin-left: auto;
    margin-right: auto;
    background-position:top center;
    background-size:9.5rem auto;
    background-repeat: no-repeat;
    height:10.2rem;
    position: relative;
}
.result .sult-center .photo .title {
    width: 100%;
    background-image: url(img/title_bg.png);
    background-position: top center;
    background-size:auto 2.425rem;
    background-repeat: no-repeat;
    height: 2.425rem;
    line-height: 2.425rem;
    text-align: center;
    position: absolute;
    left: 0;
    bottom:0;
    color:#ffffff;
    font-size: 1.3rem;
    font-weight: bold;
}
.result .sult-center .intr{
    width:72%;
    margin-left: auto;
    margin-right: auto;
    color: #333333;
    font-size: 0.65rem;
    padding:3% 0;
}
.result .sult-center .intr p{
    text-align: center;
    color: #333333;
    font-size: 0.8rem;
}
.result .sult-bottom ul{
    display: block;
    width: 100%;
    overflow: hidden;
    padding:2% 2%;
}
.result .sult-bottom ul li{
    width: 50%;
    float: left;
    padding:0 3%;
}
.result .sult-bottom ul li a{
    display: block;
}
.mainbody{
    width: 100%;
    background-image: url(img/bg5_b.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    padding-top:170%;
    position: relative;
}
.main{
    width:78%;
    position:absolute;
    z-index: 10;
    bottom:0;
    left:10.6%;
    background-image: url(img/bg6.jpg);
    background-repeat: no-repeat;
    background-position: top center;
    background-size:cover;
    padding-top:128.47%;
}
.main .tv{
    width: 94%;
    position: absolute;
    z-index: 20;
    top: 5%;
    left: 3%;
}
.main .tvbox {
    position: relative;
    width: 94%;
    margin-left: 3%;
    padding-top: 48.27%;
}
.main .tv1 {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}
.main .tv .show{
    width:94.11%;
    margin: 0 auto;
    background-repeat: no-repeat;
    background-position:bottom center;
    background-size:contain;
    padding-top: 48.27%;
}
.main .tv .show a{
    display: block;
    width: 3.25rem;
    height: 3.25rem;
    position: absolute;
    z-index: 30;
    top: 50%;
    left: 50%;
    text-align:center;
    transform: translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%); 	/* IE 9 */
    -moz-transform:translate(-50%, -50%); 	/* Firefox */
    -webkit-transform:translate(-50%, -50%); /* Safari 和 Chrome */
    -o-transform:translate(-50%, -50%);
}
.main .tv .pillar{
    position: absolute;
    z-index: 30;
    bottom:-12.7%;
    left: 0;
    width: 100%;
    background-image: url(img/line.png);
    background-repeat: no-repeat;
    background-position: top center;
    background-size:contain;
    padding-top: 6.69%;
}
.main .ico{
    width: 100%;
    position: absolute;
    z-index:20;
    top:36%;
    left: 0;
}
.main .ico ul{
    width: 100%;
    overflow: hidden;
    padding: 0 1%;
}
.r1{
    -moz-transform:rotate(-2deg);
    -webkit-transform:rotate(-2deg);
    -o-transform:rotate(-2deg);
}
.r2{
    -moz-transform:rotate(1deg);
    -webkit-transform:rotate(1deg);
    -o-transform:rotate(1deg);
}
.main .ico ul li{
    width: 25%;
    float: left;
    padding:3% 2%;
}
.main .ico ul li span{
    display: block;
    width: 100%;
    padding-top: 93.17%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.main .ico ul li p{
    color: #333333;
    font-size: 0.5rem;
    line-height: 1rem;
    text-align: center;
}
.main .ico .game{
    position: absolute;
    z-index:30;
    bottom:3%;
    right: 2%;
    width: 5.8rem;
}
.main .ico .game span{
    display: block;
    width: 100%;
    height: 2.25rem;
    background-size:5.5rem auto;
    background-repeat: no-repeat;
    background-position: center;
}
.main .ico .game p{
    color: #333333;
    font-size: 0.5rem;
    text-align: center;
    line-height: 1rem;
}
/*弹框*/
.alert_box{
    background-color: rgba(0,9,14,0.6);
    padding:0 0 0 0;
    width: 100%;
    height: 100%;
    left:0;
    top: 0;
    position: absolute;
    z-index: 200;
}
.alert_bg{
    width:100%;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    position:fixed;
    z-index: 220;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform:translate(-50%, -50%); 	/* IE 9 */
    -moz-transform:translate(-50%, -50%); 	/* Firefox */
    -webkit-transform:translate(-50%, -50%); /* Safari 和 Chrome */
    -o-transform:translate(-50%, -50%);
}
.analysis{
    width:87.22%;
    margin: 0 auto;
    height: 19.6rem;
    background-image: url(img/albg.png);
    background-size: contain;
    background-position:top center;
    background-repeat: no-repeat;
    position: relative;
    padding-top: 5rem;
}
.analysis .close{
    width: 1.25rem;
    position: absolute;
    z-index: 240;
    top: 0.1rem;
    right: 2%;
}
.analysis .key{
    width: 100%;
    text-align: left;
    color: #ffffff;
    padding:  0 7% 0 14%;
}
.analysis .key h3{
    font-size: 0.75rem;
    font-weight: bold;
    line-height: 1.5rem;
}
.analysis .key p{
    font-size:0.6rem;
    line-height: 1.2rem;
}
.analysis .next{
    display: block;
    width: 68.79%;
    position: absolute;
    z-index: 220;
    bottom:21%;
    left:20%;
}
.share_bg{
    width: 100%;
    position: absolute;
    z-index:220;
    top: 0;
    left: 0;
}
.main .main_bg{
    padding:0 0 0 0;
    width: 25%;
    left:25%;
    top: 75%;
    position: absolute;
    z-index: 200;
}
.main .masking{
    padding:0 0 0 0;
    width: 100%;
    height: 100%;
    left:0;
    top: 0;
    position: absolute;
    z-index: 199;
}
.blur {
    filter: url(blur.svg#blur); /* FireFox, Chrome, Opera */

    -webkit-filter: blur(10px); /* Chrome, Opera */
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);
    filter: blur(10px);

    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=10, MakeShadow=false); /* IE6~IE9 */
}
.main .main_bg h3{
    color: #ffffff;
    text-align: center;
    font-size: 0.3rem;
}
.main .main_bg .gift{
    width:82%;
    margin:4% auto;
    padding: 4% 0;
    background-color: rgba(212,212,212,0.6);
    border-radius:10px;
}
.main .main_bg .gift ul{
    width: 100%;
    overflow: hidden;
}
.main .main_bg .gift ul li{
    width: 33.33%;
    float: left;
    padding: 3% 5%;
}
.main .main_bg .gift ul li span{
    display: block;
    width: 100%;
    padding-top: 98.09%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.main .main_bg .gift ul li p{
    text-align: center;
    color: #ffffff;
    font-size: 0.1rem;
}
/*下载提示*/
.alert_box1 {
    background-color: rgba(0,9,14,0.6);
    padding: 0 0 0 0;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: fixed;
    font-size: 14px;
    z-index: 199;
}
.alert_bg {
    width: 100%;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    z-index: 100;
}
.alert_bg .close {
    width: 1.3rem;
    height: 1.3rem;
    display: block;
    margin-left: 80%;
    margin-bottom: 1rem;
}
.alert_bg .container {
    width: 76%;
    background-color: #ffffff;
    margin-left: auto;
    margin-right: auto;
    border-radius: 0.5rem;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: bottom center;
    position: relative;
    padding:2rem 0.5rem 3rem 0.5rem;
}
.alert_bg .container .title {
    width: 80%;
    height: 2.4rem;
    line-height: 2.4rem;
    background-image: url("http://pic01.v.vnet.mobi/image/tmpl/2017/06/15/7005472720.png");
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    color: #ffffff;
    font-size: 1.2rem;
    position: absolute;
    z-index: 110;
    left: 10%;
    top: -1.2rem;
}
.alert_bg .container p {
    color: #666666;
    font-size: 0.9rem;
    line-height: 1.5rem;
    text-align: center;
}
.alert_bg .container .sure {
    display: block;
    width: 71%;
    margin-left: auto;
    margin-right: auto;
    height: 2rem;
    line-height: 2rem;
    border-radius: 1rem;
    text-align: center;
    font-size: 0.9rem;
    margin-top:1rem;
    border: 2px solid #2e9dee;
    color: #2e9dee;
}