/* reset */
html,body,div,p,ul,li,dl,dt,dd,em,i,span,a,img,input,h1,h2,h3,h4,h5 {margin:0;padding:0}
a,img,input {border:none;vertical-align: middle;}
body{font: 14px/1.75  -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-tap-highlight-color: rgba(0,0,0,0);}
a {text-decoration:none;}
ul,li{list-style: none}
html{font-size: 100px;}

#afooter {
    background: #021a26;
    text-align: left;
    color: #FFFFFF;
    font-size: .24rem;
    padding: .2rem .2rem;
    /* display: none; */
}
#afooter a {
    color: #FFFFFF;
}


html,body{overflow-x: hidden;background: #102a61;}
.topbar {position: fixed;z-index: 889;box-sizing: border-box;width: 100%;height: 1.34rem;background: rgba(0, 0, 0, 0.9);padding: .16rem .2rem;}
.topbar .icon {position: absolute;display: block;background: url("//game.gtimg.cn/images/ffm/m/m201712/avatar.png") no-repeat;width: 1rem;height: 1rem;background-size: 100%;}
.topbar .titl {position: absolute;left: 1.4rem;top: .18rem;color: #ffffff;}
.topbar .titl p:nth-of-type(1) {font-size: .34rem;}
.topbar .titl p:nth-of-type(2) {font-size: .24rem;}
.topbar .download {width: 1.8rem;height: .57rem;background: url("./enter.png") no-repeat;  position: absolute;top: .16rem;overflow: hidden;margin-left: 1.90rem;background-size: 100%;}
.btn_slide {display: inline-block;position: absolute;right: 0;width: .48rem;height: .3rem;right: .2rem;top: .48rem;color: rgba(0, 0, 0, 0.9);}
.com_nav {width: 0;height: 0;position: fixed;top: 1.2rem;z-index: 9999;opacity: 0;-webkit-transition: all .5s;-webkit-transform-style: preserve-3d;-webkit-backface-visibility: hidden;}
.com_nav-open {position: fixed;width: 7.50rem;height: 100%;opacity: 1;top: 1.20rem;left: 0;z-index: 9999;-webkit-transform: scale3d(1, 1, 1);background: #1e1919;}
.com_nav ul {width: 100%;overflow: hidden;text-align: center;}
.com_nav li:first-child {border-top: none;}
.com_nav li {height: .9rem;overflow: hidden;line-height: .9rem;position: relative;border: .01rem solid #2c2c2c;}
.com_nav a {color: #fff;display: block;height: 100%;font-size: .3rem;}
.draw-close .swi {background: transparent;}
.draw-close .swi:before {top: 0;-webkit-transform: rotate(45deg);background: #00b7ac;}
.draw-close .swi:after {top: 0;-webkit-transform: rotate(-45deg);background: #00b7ac;}
.swi, .swi:before, .swi:after {width: .52rem;height: .06rem;background: #00b7ac;position: absolute;left: 0;top: .12rem;transition: all .5s;transform-style: preserve-3d;}
.swi:after {content: ".";top: .16rem;}
.swi:before {content: ".";top: -.16rem;}
.download{position: absolute;display: block;top: 2.8rem;left: 50%;margin-left: -.79rem;}
.wrapper{width: 100%;margin: 0 auto;overflow: hidden;}
.logo{background: url("./logo.png") no-repeat;width: 1.63rem;height: .55rem;background-size: 100%;position: absolute;top: 1.5rem;left: .2rem;}


.kv{background: url("./kv.jpg") no-repeat center top;width: 100%;height: 10.59rem;position: relative;background-size: 100%;}
.login{position: absolute;color: #fff;font-size: .22rem;top: 1.5rem;right: .2rem;width: 5.4rem;text-align: right;}
.login a{color: #fff;}
.login{line-height: 15px;}

.content{width: 100%;height: auto;margin-top: -2.8rem;position: relative;}

/* 切换按钮 */
.tab-box{width: 6.72rem;height: 0.72rem;margin: 0 auto;overflow: hidden;}
.tab-box li{float: left;width: 2.1rem;height: 0.72rem;margin-left:0.2rem; }
.tab-box li:first-child{margin-left: 0;}
.tab-box .tab1{background: url("./tab1.png") no-repeat;background-size: 100%;}
.tab-box .tab2{background: url("./tab2.png") no-repeat;background-size: 100%;}
.tab-box .tab3{background: url("./tab3.png") no-repeat;background-size: 100%;}
.tab-box .tab1.ac{background: url("./tab1-ac.png") no-repeat;background-size: 100%;}
.tab-box .tab2.ac{background: url("./tab2-ac.png") no-repeat;background-size: 100%;}
.tab-box .tab3.ac{background: url("./tab3-ac.png") no-repeat;background-size: 100%;}

#tab-box2{width: 7.19rem;height: 1.1rem;margin: 0 auto;overflow: hidden;margin-bottom: 0.4rem;}
#tab-box2  li{width: 2.48rem;height: 1.1rem;margin-left:-0.13rem;}
#tab-box2  li:first-child{margin-left:0;}
#tab-box2 .tab1{background: url("./tab4.png") no-repeat;background-size: 100%;}
#tab-box2 .tab2{background: url("./tab5.png") no-repeat;background-size: 100%;}
#tab-box2 .tab3{background: url("./tab6.png") no-repeat;background-size: 100%;}
#tab-box2 .tab1.ac{background: url("./tab4-ac.png") no-repeat;background-size: 100%;}
#tab-box2 .tab2.ac{background: url("./tab5-ac.png") no-repeat;background-size: 100%;}
#tab-box2 .tab3.ac{background: url("./tab6-ac.png") no-repeat;background-size: 100%;}

/* 现实中的足球开始 */
.main{width: 7.5rem;margin: 0 auto;font-size: 0.24rem;color: #102a61;margin-top: 0.15rem;}
.main.hide{display: none;}
.page1{width: 7.5rem;height: 1rem;background: url("./page1.png") no-repeat ;background-size: 100%;padding-top: 0.7rem;}
.page2{width: 6.5rem;height: auto;background: url("./page2.png");background-size: 100%;padding: 0rem 0.5rem 0 0.5rem;}
.page3{width: 7.5rem;height: 1.66rem;background: url("./page3.png") no-repeat ;background-size: 100%;padding-top: 0.6rem;}
.wrap{display: none;}
.title{margin: 0 auto;width: 4.08rem;height: 0.69rem;margin-bottom: 0.3rem;}
.title1{ background: url("./title1.png") no-repeat;background-size: 100%;}
.title2{ background: url("./title2.png") no-repeat;background-size: 100%;}
.title3{width: 3.09rem; background: url("./title3.png") no-repeat;background-size: 100%;}
.question{font-size: 0.28rem;color: #0b1f5a;font-weight:800;margin-bottom: 0.3rem;margin-top: 0.4rem; }

.radio-box{padding-top: 0.1rem;overflow: hidden;}
.radio-box .label{display: block; width: 1.8rem;margin-left: 0.1rem;float: left;line-height: 0.6rem;}
.radio-box .label input{margin-right: 0.12rem;}
.radio-box .label input[type='radio']{ display: none;}
.radio-box input[type="radio"] + label::before {content: '';display: inline-block;width: 0.4rem;height: 0.37rem;vertical-align: middle;box-sizing: border-box;margin-right: 0.14rem;background: url("./radio.png") no-repeat 30% 30%;background-size: 63%;}
.radio-box input[type='radio']:checked+label:before{width: 0.4rem;height: 0.37rem;margin-right: 0.14rem;margin-top: -0.16rem;background: url("./radio-ac.png")  no-repeat  50% 50%;background-size: 100%;}  
.radio-box .label input[type='checkbox']{ display: none;}
.radio-box input[type="checkbox"] + label::before {content: '';display: inline-block;width: 0.4rem;height: 0.37rem;vertical-align: middle;box-sizing: border-box;margin-right: 0.14rem;background: url("./checkbox.png") no-repeat 20% 30%;background-size: 60%;}
.radio-box input[type='checkbox']:checked+label:before{width: 0.4rem;height: 0.37rem;margin-right: 0.14rem;margin-top: -0.16rem;background: url("./checkbox-ac.png")  no-repeat  50% 50%;background-size: 100%;}  
#select1-01-w{margin-left: 2.0rem;}

.other{display: inline-block;margin-left: 0.48rem;}
.other input{width:1.4rem;  background: none;outline: none;border-bottom: 1px solid #0b1f5a}
#main2 .other{margin-left: 0.2rem;}
#main2 .other input{width: 5rem;}
.main select{margin: 0 0.6rem 0.42rem 0.5rem; color: #96b1ea;background: #4466b1;font-size: 0.24rem;height: 0.56rem;width: 2.0rem;text-align: center;text-align-last: center;}
.question input{width:2.6rem;  background: none;outline: none;border-bottom: 1px solid #0b1f5a;}
.qustype1 .label{margin-right: 0.2rem}
.qustype2 .label{width: 99%;line-height: 0.42rem;margin-bottom: 0.26rem;margin-left: 0.1rem;}
.qustype3 .label{width: 44%;line-height: 0.42rem;margin-bottom: 0.26rem;margin-left: 0.1rem;}
.qustype4 .label{width: 40%;line-height:  0.42rem;margin-bottom: 0.26rem;margin-left: 0.1rem;margin-right: 0.5rem;}
.qustype5 .label{width: 99%;line-height:  0.42rem;margin-bottom: 0.26rem;margin-left: 0.6rem;}
.submit{display: block; width: 2.24rem;height: 0.72rem;margin: 0 auto;background: url("./submit.png") no-repeat;background-size: 100%;}
.submit.over{background: url("./submit-over.png") no-repeat;background-size: 100%;}

/* 问卷礼包 */
.gift-bg{width: 7.31rem;height: 6.04rem;margin: 0 auto;margin-top: 0.3rem; background: url("./gift-bg.png") no-repeat;background-size: 100%;}
.gift-list{width: 6.72rem;height: 2.12rem;margin: 0 auto;padding-top: 1.3rem;overflow: hidden;}
.gift-list li{float: left;width: 1.83rem;height: 2.12rem;margin-left: 0.3rem;}
.gift-3{background: url("./gift-3.png") no-repeat;background-size: 100%;}
.gift1-1{background: url("./gift1-1.png") no-repeat;background-size: 100%;}
.gift1-2{background: url("./gift1-2.png") no-repeat;background-size: 100%;}
.gift2-1{background: url("./gift2-1.png") no-repeat;background-size: 100%;}
.gift2-2{background: url("./gift2-2.png") no-repeat;background-size: 100%;}
.gift3-1{background: url("./gift3-1.png") no-repeat;background-size: 100%;}
.gift3-2{background: url("./gift3-2.png") no-repeat;background-size: 100%;}
.gift-btn{display: block;width: 2.24rem;height: 0.72rem;margin: 0 auto;margin-top: 0.5rem;background: url("./gift-btn.png") no-repeat;background-size: 100%;}
.gift-btn.over{background: url("./gift-btn-over.png") no-repeat;background-size: 100%;}
.gift-tips{text-align: center;color: #fff;line-height: 0.8rem;}

.login-pop{background: url("./login-pop.png") no-repeat;width: 7.18rem;height: 4.68rem;position: relative;overflow: hidden;background-size: 100%;}
.login-content a{display: block;float: left;}
.qq{background: url("./qq.png") no-repeat;width: 1.6rem;height: 2rem;background-size: 100%;margin-top: 1.3rem;margin-left: 1.43rem;}
.wx{background: url("./wx.png") no-repeat;width: 1.6rem;height: 2rem;background-size: 100%;margin-top:1.3rem;margin-left: 1rem;}
.close{background: url("./close.png") no-repeat;width: .79rem;height: .8rem;background-size: 100%;position: absolute;top: 0.4rem;right: 0.4rem;}


.tips-pop{background: url("./tip-pop.png") no-repeat;width: 7.18rem;height: 6.06rem;background-size: 100%;position: relative;overflow: hidden;color: #fff;z-index: 2;}
.tip{text-align: center;width: 62%;margin: 2.2rem auto 0;font-size: 0.3rem; }
.btn-box{width: 4rem;height: 0.54rem;position: absolute;left: 50%;margin-left: -2rem;bottom: 0.34rem;overflow: hidden;}

.ok{display: block;margin: 0 auto;margin-top: 0.8rem; width: 2.10rem;height: 0.72rem;background: url("./ok-btn.png") no-repeat;background-size: 100%;}
.btn-box .cancel{background: url("./cancle-btn.png") no-repeat;background-size: 100%;float: right;}

@media screen and (orientation: landscape) {

    .topbar{display: none;}
    .wrapper{padding-top: 0;}
    .kv{background: url("./hkv.png") no-repeat center top;width: 100%;height: 11.29rem;background-size: contain;}
    .main{width: 13.34rem;}
    .page1{width: 13.34rem;height: 1.6rem;background: url("./hpage1.png") no-repeat ;background-size: 100%;padding-top: 0.9rem;}
    .page2{width: 10.04rem;height: auto;background: url("./hpage2.png");background-size: 100%;padding: 0rem 1.5rem 0 1.8rem;}
    .page3{width: 13.34rem;height: 2.89rem;background: url("./hpage3.png") no-repeat ;background-size: 100%;padding-top: 0.6rem;}
    .qustype1 .label{width: 1.7rem;}
    .radio-box input[type="radio"] + label::before{margin-right: 0;}
    .radio-box input[type='radio']:checked+label:before{margin-right: 0;}
    .radio-box input[type="checkbox"] + label::before {margin-right: 0;}
    .radio-box input[type='checkbox']:checked+label:before{margin-right: 0;}  

    .title{width: 6.12rem;height: 1rem;}
    .title1{ background: url("./htitle1.png") no-repeat;background-size: 100%;}
    .title2{ background: url("./htitle2.png") no-repeat;background-size: 100%;}
    .title3{width: 4.64rem; background: url("./htitle3.png") no-repeat;background-size: 100%;}
    
    .tab-box{width: 9.88rem;height: 1.08rem;margin: 0 auto;overflow: hidden;}
    .tab-box li{float: left;width: 3.16rem;height: 1.08rem;margin-left:0.2rem; }
    .tab-box li:first-child{margin-left: 0;}
    .tab-box .tab1{background: url("./htab1.png") no-repeat;background-size: 100%;}
    .tab-box .tab2{background: url("./htab2.png") no-repeat;background-size: 100%;}
    .tab-box .tab3{background: url("./htab3.png") no-repeat;background-size: 100%;}
    .tab-box .tab1.ac{background: url("./htab1-ac.png") no-repeat;background-size: 100%;}
    .tab-box .tab2.ac{background: url("./htab2-ac.png") no-repeat;background-size: 100%;}
    .tab-box .tab3.ac{background: url("./htab3-ac.png") no-repeat;background-size: 100%;}

    #tab-box2{width: 10.71rem;height: 1.5rem;margin: 0 auto;overflow: hidden;margin-bottom: 0.4rem;}
    #tab-box2  li{width: 3.57rem;height: 1.5rem;margin-left:-0.13rem;}
    #tab-box2  li:first-child{margin-left:0;}
    #tab-box2 .tab1{background: url("./htab4.png") no-repeat;background-size: 100%;}
    #tab-box2 .tab2{background: url("./htab5.png") no-repeat;background-size: 100%;}
    #tab-box2 .tab3{background: url("./htab6.png") no-repeat;background-size: 100%;}
    #tab-box2 .tab1.ac{background: url("./htab4-ac.png") no-repeat;background-size: 100%;}
    #tab-box2 .tab2.ac{background: url("./htab5-ac.png") no-repeat;background-size: 100%;}
    #tab-box2 .tab3.ac{background: url("./htab6-ac.png") no-repeat;background-size: 100%;}

    .submit{display: block; width: 3.17rem;height: 0.97rem;margin: 0 auto;background: url("./hsubmit.png") no-repeat;background-size: 100%;}
    .submit.over{background: url("./hsubmit-over.png") no-repeat;background-size: 100%;}

    .gift-bg{width: 11rem;height: 6.6rem;margin: 0 auto;margin-top: 0.3rem; background: url("./hgift-bg.png") no-repeat;background-size: 100%;}
    .gift-list{width: 90%;height: 2.12rem;padding-top: 1.6rem;overflow: hidden;}
    .gift-list li{float: left;width: 1.83rem;height: 2.12rem;margin: 0 0.68rem 0  0.68rem; }
    .gift-btn{display: block;width: 3.17rem;height: 0.96rem;margin: 0 auto;margin-top: 0.5rem;background: url("./hgift-btn.png") no-repeat;background-size: 100%;}
    .gift-btn.over{background: url("./hgift-btn-over.png") no-repeat;background-size: 100%;}
}



