@charset "utf-8";
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,button,input,textarea,th,td{margin:0;padding:0}body{font-size:12px;font-style:normal;font-family:"\5FAE\8F6F\96C5\9ED1",Helvetica,sans-serif}small{font-size:12px}h1{font-size:18px}h2{font-size:16px}h3{font-size:14px}h4,h5,h6{font-size:100%}ul,ol{list-style:none}a{text-decoration:none;background-color:transparent}a:hover,a:active{outline-width:0;text-decoration:none}table{border-collapse:collapse;border-spacing:0}hr{border:0;height:1px}img{border-style:none}img:not([src]){display:none}svg:not(:root){overflow:hidden}html{-webkit-touch-callout:none;-webkit-text-size-adjust:100%}input,textarea,button,a{-webkit-tap-highlight-color:rgba(0,0,0,0)}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]),video:not([controls]){display:none;height:0}progress{vertical-align:baseline}mark{background-color:#ff0;color:#000}sub,sup{position:relative;font-size:75%;line-height:0;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}button,input,select,textarea{font-size:100%;outline:0}button,input{overflow:visible}button,select{text-transform:none}textarea{overflow:auto}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.clear:after{display:block;height:0;content:"";clear:both}


html,body,.swiper-container{
    width: 100%;
    height: 100%;
    /*overflow: hidden;*/
}
.clear:after{
    display: block;
    content: "";
    clear:both;
}
body{
    font-family: "Microsoft Yahei", "微软雅黑", "宋体", "Arial";
    /*background-color: #fbe5b2;*/
    position: fixed;
    top:0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.swiper-wrapper{
    width: 100%;
    height: 100%;
}
.swiper-slide{
    width: 100%;
    height: 100%;
    position: relative;
    background: url("../images/bg.jpg")no-repeat;
    background-size: 100%;
}


/*首页*/
.swiper-wrapper .homePage{
    text-align: center;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}
.swiper-wrapper .homePage .left-line{
    width: 8.2rem;
    height: 3rem;
    position: absolute;
    top:-0.5rem;
    left: -1rem;
    background: url("../images/homePage-line-left.png");
    background-size: 100%;
}
.swiper-wrapper .homePage .right-line{
    width: 6.5rem;
    height: 12.7rem;
    position: absolute;
    top:-0.5rem;
    right: -0.5rem;
    background: url("../images/home-page-line-right.png");
    background-size: 100%;
}
.swiper-wrapper .homePage .logo{
    width: 3.6rem;
    height: 0.78rem;
    position: absolute;
    top:0.48rem;
    right: 0.38rem;
    background: url("../images/logo.png");
    background-size: 100%;
}
.swiper-wrapper .homePage .person{
    width: 100%;
    height: 10.1rem;
    position: absolute;
    top:11.66rem;
    background: url("../images/homePage-person.png")no-repeat;
    background-size: 100% auto;
}
.swiper-wrapper .homePage .text1{
    width: 7rem;
    height: 0.6rem;
    background: url("../images/homePage-text1.png")no-repeat;
    background-size: 100%;
    position: absolute;
    top:3rem;
    left: 50%;
    margin-left: -3.5rem;
}
.swiper-wrapper .homePage .text2{
    position: absolute;
    top:4.4rem;
    left: 1.65rem;
}
.swiper-wrapper .homePage .text2>li{
    display: inline-block;
    height: 2.18rem;
    width: 2.18rem;
    margin: 0.1rem;
    background:url(../images/homePage-text2-3.png)no-repeat;
    background-size: auto 100%;
    /*background-color: green;*/
    border: 2px solid #b24e26;
}
.swiper-wrapper .homePage .text2 li:nth-child(2){
    background-position: -2.39rem 0;
}
.swiper-wrapper .homePage .text2 li:nth-child(3){
    background-position: -4.7rem 0;
}
.swiper-wrapper .homePage .text2 li:nth-child(4){
    background-position: -7.19rem 0;
}
.swiper-wrapper .homePage .text3{
    width: 7.22rem;
    height: 0.7rem;
    background: url("../images/homePage-text3.png")no-repeat;
    background-size: 100%;
    position: absolute;
    top:7.1rem;
    left: 50%;
    margin-left: -3.61rem;
}
.swiper-wrapper .homePage .text4{
    width: 7.06rem;
    height: 7.43rem;
    background: url(../images/homePage-text4-reset1.png)no-repeat;
    background-size: 100%;
    position: absolute;
    top: 8rem;
    left: 0.26rem;
}
.swiper-wrapper .homePage .text5{
    width: 5rem;
    height: 0.95rem;
    float: left;
    background: url("../images/homePage-text5.png")no-repeat;
    background-size: 100%;
    position: absolute;
    top:15.55rem;
    left: 0.89rem;
    z-index: 10;

}
/*首页隐藏*/
.homePage-hidden .text1{
    display: none;
}
.homePage-hidden .text2{
    display: none;
}
.homePage-hidden .text3{
    display: none;
}
.homePage-hidden .text4{
    display: none;
}
.homePage-hidden .text5{
    display: none;
}
.homePage-hidden .left-line{
    display: none;
}
.homePage-hidden .right-line{
    display: none;
}
.homePage-hidden .logo{
    display: none;
}
.homePage-hidden .person{
    display: none;
}

/*首页出现动画*/
.homePage-active .text1{
    -webkit-animation:bounceInDown 1s 1s ease both;
    animation:bounceInDown 1s 1s ease both;
}
.homePage-active .text2{

}
.homePage-active .text2 li:nth-child(1){
    animation:fadeIn 0.8s 2s linear both;
    -webkit-animation:fadeIn 0.8s 2s linear both;
}
.homePage-active .text2 li:nth-child(2){
    animation:fadeIn 0.8s 2.4s linear both;
    -webkit-animation:fadeIn 0.8s 2.4s linear both;
}
.homePage-active .text2 li:nth-child(3){
    animation:fadeIn 0.8s 2.8s linear both;
    -webkit-animation:fadeIn 0.8s 2.8s linear both;
}
.homePage-active .text2 li:nth-child(4){
    animation:fadeIn 0.8s 3.2s linear both;
    -webkit-animation:fadeIn 0.8s 3.2s linear both;
}
.homePage-active .text3{
    -webkit-animation:bounceInDown 1s .21s linear both;
    animation:bounceInDown 1s .21s linear both;
}
.homePage-active .text4{
    -webkit-animation:flipInY 1s 2.5s linear both;
    animation:flipInY 1s 2.5s linear both;
}
.homePage-active .text5{
    animation:pulses 2s 1s ease infinite both;
    -webkit-animation:pulses 2s 1s ease infinite both;
}
.homePage-active .left-line{
    animation:pulse 3s .2s ease infinite both;
    -webkit-animation:pulse 3s .2s ease infinite both;
}
.homePage-active .right-line{
    animation:pulse 3s 1s ease infinite both;
    -webkit-animation:pulse 3s 1s ease infinite both;
}
.homePage-active .logo{

}
.homePage-active .person{
    animation:fadeIn 4s .2s ease both;
    -webkit-animation:fadeIn 4s .2s ease both;

}

/*首页隐藏动画*/
.homePage-hidden-active .text1{
    animation:zoomOutLeft 2s 0s ease both;
    -webkit-animation:zoomOutLeft 2s 0s ease both;
}
.homePage-hidden-active .text2{
    animation:zoomOut 2s 1s ease both;
    -webkit-animation:zoomOut 2s 1s ease both;
}
.homePage-hidden-active .text3{
    animation:zoomOutRight 2s 0s ease both;
    -webkit-animation:zoomOutRight 2s 0s ease both;
}
.homePage-hidden-active .text4{
    animation:flipOutY 2s 1s ease both;
    -webkit-animation:flipOutY 2s 1s ease both;
}
.homePage-hidden-active .text5{
    animation:flipOutY 2s .2s ease both;
    -webkit-animation:flipOutY 2s .2s ease both;
}
.homePage-hidden-active .left-line{
    animation:fadeOutLeft 2s 2.2s ease both;
    -webkit-animation:fadeOutLeft 2s 2.2s ease both;
}
.homePage-hidden-active .right-line{
    animation:fadeOutRight 2s 2.2s ease both;
    -webkit-animation:fadeOutRight 2s 2.2s ease both;
}
.homePage-hidden-active .logo{
    animation:flipOutX 2s 1.2s ease both;
    -webkit-animation:flipOutX 2s 1.2s ease both;
}
.homePage-hidden-active .person{
    animation:fadeScaleOut 2s 2s ease both;
    -webkit-animation:fadeScaleOut 2s 2s ease both;
}
@-webkit-keyframes fadeScaleOut {
    0% {
        opacity: 1;
        -webkit-transform: scale(1);
    }

    100% {
        opacity: 0;
        -webkit-transform: scale(3);
    }
}

@keyframes fadeScaleOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(2);
    }
}



/*猜题页*/
.swiper-wrapper .answer .mask{
    position: absolute;
    box-sizing: border-box;
    top:0;
    left: 0;
    height: 100%;
    width: 100%;
}
.swiper-wrapper .answer .mask-show{
    display: block;
}
.swiper-wrapper .answer .mask-hidden{
    display: none;
}
.swiper-wrapper .answer .mask .mask-mask{
    position: absolute;
    top:0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0.5;
    background-color: #000000;
}
.swiper-wrapper .answer .mask .answer-mask-text{
    /* width: 12.21rem; */
    /* height: 9.62rem; */
    /* position: absolute; */
    /* top: 4.68rem; */
    /* left: 50%; */
    /* margin-left: -6.1rem; */
    /* background: #fbb03b url(../images/answer-mask-text.png)no-repeat; */
    /* border-radius: 10px; */
    /* background-size: 100%; */
    width: 11rem;
    height: 8.54rem;
    position: absolute;
    top: 4.68rem;
    left: 50%;
    margin-left: -5.4rem;
    background: #fbb03b url(../images/answer-mask-text.png)no-repeat;
    border-radius: 10px;
    background-size: 100% 100%;
}
.swiper-wrapper .answer .mask .answer-mask-text>h2{
    margin: 0.5rem auto;
    text-align: center;
    font-size: 17px;
    font-weight: 900;
    color: #8b1001;
}
.swiper-wrapper .answer .mask .answer-mask-text>p{
    line-height: 0.84rem;
    padding: 0.1rem 0.74rem 0 0.74rem;
    /*padding: 0.1rem 1.74rem 0 1.74rem;*/
    font-size: 15px;
    color: #b24e26;
    text-align: left;
    box-sizing: border-box;
}
.swiper-wrapper .answer .mask .answer-mask-text>p>span{
    display: inline-block;
    height: 0.84rem;
    line-height: 0.84rem;
    font-size: 15px;
    color: #8b1001;
    font-weight: 900;
}
.swiper-wrapper .answer .mask .answer-mask-btn{
    position: absolute;
    text-align: center;
    top:15.78rem;
    width: 4.8rem;
    height: 1.5rem;
    line-height: 1.4rem;
    background:url(../images/answer-mask-btn.png)no-repeat;
    background-size: 100%;
    color: white;
    font-size: 15px;
}
.swiper-wrapper .answer .mask .answer-mask-btn-left{
    left: 1.54rem;
    line-height: 1.4rem;
    vertical-align: bottom;
}
.swiper-wrapper .answer .mask .answer-mask-btn-left>b{
    color: #ed1c24;
}
.swiper-wrapper .answer .mask .answer-mask-btn-right{
    right:1.54rem ;
}
.swiper-wrapper .answer .answer-headline{
    position: absolute;
    top:2rem;
    left: 50%;
    margin-left: -3.71rem;
    right: 50px;
    width: 7.42rem;
    height: 1.29rem;
    background: url("../images/answer-tag.png")no-repeat;
    background-size: 100%;
}
.swiper-wrapper .answer .answer-topic{
    text-align: left;
    width: 11.16rem;
    position: absolute;
    top: 4.3rem;
    left: 50%;
    margin-left: -5.58rem;
    line-height: 1.6rem;
    font-size:0.76rem;
    color: #86634d;
}
.swiper-wrapper .answer .answer-topic>span{
    display: inline-block;
    height: 1.6rem;
    width: 1.6rem;
    background: url("../images/answer-grid.png")no-repeat;
    background-size: 100%;
    text-align: center;
    vertical-align: bottom;
    margin: 0 0.1rem;
    font-size: 22px;
    color: #8b1001;
    font-weight: 900;
}
.swiper-wrapper .answer .answer-answer{
    width: 11.68rem;
    height: 7.39rem;
    position: absolute;
    bottom:1.95rem;
    left: 50%;
    margin-left: -5.84rem;
}
.swiper-wrapper .answer .answer-answer>span{
    position: absolute;
    width: 3.32rem;
    height: 0.947rem;
    color: white;
    text-align: center;
    line-height: 0.947rem;
    font-size: 0.58rem;
    background-color: #b44e28;
}
.swiper-wrapper .answer .answer-answer .tag{
    position: absolute;
    top:0;
    left: 50%;
    margin-left: -1.66rem;
}
.swiper-wrapper .answer .answer-answer .left-btn{
    position: absolute;
    bottom: 0;
    left: 0.48rem;
}
.swiper-wrapper .answer .answer-answer .right-btn{
    position: absolute;
    right: 0.48rem;
    bottom: 0;
}
.swiper-wrapper .answer .answer-answer .btn{
    box-shadow: 2px 2px 3px 0px #772e18;
}
.swiper-wrapper .answer .answer-answer .text-wrap{
    width: 100%;
    position: absolute;
    top:1.4rem;
}
.swiper-wrapper .answer .answer-answer .text-wrap>ul{
    width: 100%;
    text-align: center;
    font-size: 1rem;
    user-select: none;
    -webkit-user-select: none;
}
.swiper-wrapper .answer .answer-answer .text-wrap>ul>li{
    display: inline-block;
    box-sizing: border-box;
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1.4rem;
    border: 1px solid #8b1001;
    /*box-shadow: 1px 1px 1px 0px  #772e18;*/
    margin: 0.15rem 0.5rem;
    color: #8b1001;
    font-weight: 600;
}


/*答题动画*/
 .answer-active .answer-headline{
     animation:zoomIn 1s 2.2s ease both;
     -webkit-animation:zoomIn 1s 2.2s ease both;
 }
 .answer-active .answer-topic{
     animation:zoomIn 1s 2.4s ease both;
     -webkit-animation:zoomIn 1s 2.4s ease both;
 }
 .answer-active .answer-answer{
     animation:zoomInUp 2.5s 2s linear both;
     -webkit-animation:zoomInUp 2.5s 2s linear both;
 }
 .answer-active {}
 .answer-active {}



/*答题隐藏*/
.answer-hidden .answer-headline{
    display: none;
}
.answer-hidden .answer-topic{
    display: none;
}
.answer-hidden .answer-answer{
    display: none;
}
/*.answer-hidden .answer-answer mask{*/
    /**/
/*}*/



/*动画*/
@keyframes pulses{
    0%{transform:scale(1)}
    50%{transform:scale(1.2)}
    100%{transform:scale(1)}
}
@-webkit-keyframes pulses{
    0%{-webkit-transform:scale(1)}
    50%{-webkit-transform:scale(1.2)}
    100%{-webkit-transform:scale(1)}
}



@keyframes  fadeIn{
0%{opacity:0}
100%{opacity:1}
}
@-webkit-keyframes  fadeIn{
0%{opacity:0}
100%{opacity:1}
}



@-webkit-keyframes fadeInDownBig{/*上方淡入*/
    0%{opacity:0;
        -webkit-transform:translateY(-2000px)}
    100%{opacity:1;
        -webkit-transform:translateY(0)}
}
@keyframes fadeInDownBig{
    0%{opacity:0;
        transform:translateY(-2000px)}
    100%{opacity:1;
        transform:translateY(0)}
}


@-webkit-keyframes flipInY{/*Y轴淡入*/
    0%{-webkit-transform:perspective(400px) rotateY(90deg);
        opacity:0}
    40%{-webkit-transform:perspective(400px) rotateY(-10deg)}
    70%{-webkit-transform:perspective(400px) rotateY(10deg)}
    100%{-webkit-transform:perspective(400px) rotateY(0deg);
        opacity:1}
}
@keyframes flipInY{
    0%{transform:perspective(400px) rotateY(90deg);
        opacity:0}
    40%{transform:perspective(400px) rotateY(-10deg)}
    70%{transform:perspective(400px) rotateY(10deg)}
    100%{transform:perspective(400px) rotateY(0deg);
        opacity:1}
}