@media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
     html,body {
         font-size:67.5px;
     }
   }
     @media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
     html,body {
         font-size:60px;
     }
   }
     @media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
     html,body {
         font-size:50px;
     }
   }
     @media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
     html,body {
         font-size:45px;
     }
   }
     @media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
     html,body {
         font-size:40px;
     }
   }
     @media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
     html,body {
         font-size:37.5px;
     }
   }
     @media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
     html,body {
         font-size:33.75px;
     }
   }
     @media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
     html,body {
         font-size:30px;
     }
   }
     @media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
     html,body {
         font-size:25.875px;
     }
   }
     @media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
     html,body {
         font-size:25px;
     }
   }
     @media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
     html,body {
         font-size:23.4375px;
     }
   }
     @media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
     html,body {
         font-size:22.5px;
     }
   }
     @media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
     html,body {
         font-size:20px;
     }
   }
     @media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
     html,body {
         font-size:15px;
     }
   }
  @charset "utf-8";
body{ margin:0; padding:0; font:normal 100% "Microsoft YaHei",\5b8b\4f53,Arial, Helvetica, sans-serif; -webkit-tap-highlight-color: rgba(0,0,0,0);}
div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,form,input,select,textarea,table,td{ margin:0; padding:0;}
area{outline:none;}
img{ border:0;}
ol,ul{list-style:none;}
a{ text-decoration:none; outline:none;}
.clearfix:after {content:"";display:block;height:0;clear:both;} 
.clearfix {zoom:1;}
.pub_clr{clear:both;font-size:0;height:0;line-height:0;overflow:hidden;}
.auto{left: 50%; -webkit-transform:translate(-50%,0); -moz-transform:translate(-50%,0); -ms-transform:translate(-50%,0); -o-transform:translate(-50%,0); transform:translate(-50%,0);}
.box_justify{ display: -webkit-box; display: -moz-box; display: -o-box; display: -ms-box; -webkit-box-pack:justify; -moz-box-pack:justify; -o-box-pack:justify; -ms-box-pack:justify; box-pack:justify;}

body{ background: url(../images/bg.jpg) no-repeat center top; background-size: 100% auto;}
.header{ position: relative; height: 20.55rem;}
.logoImg{ position: absolute; top: 0.6rem; left: 1rem; width: 2.95rem;}
.login{ position: absolute; left: 0; bottom: 0; width: 100%; height: 1.875rem; line-height: 1.875rem; text-align: center;}
.login .before a{ display: inline-block; width: 5rem; height: 1.875rem; background-color: #38b2a3; font-size: 0.6rem; color: #f7f7f7;}
.login .after{ display: none; font-size: 0.4rem; color: #000;}
.login .after span{ color: #247057;}
.login .after .logout{ color: #9f3f3a; text-decoration: underline;}
.login .after .guessing_btn{ display: inline-block; width: 2.95rem; height: 0.85rem; line-height: 0.85rem; background-color: #964c49; font-size: 0.4rem; color: #f0ece1;}
.qualified_nav{ width: 15.55rem; margin: 0.25rem auto;}
.qualified_nav li{ float: left; margin: 0.25rem 0.425rem; width: 6.625rem; height: 1.85rem; line-height: 1.85rem; text-align: center; border: 3px solid #904842; font-weight: bold; font-size: 0.6rem; color: #904842;}
.qualified_nav li.on{ background-color: #353433; border-color: #353433; color: #d0b57e;}
.qualified_content{ display: none; width: 14.75rem; overflow-x: hidden; margin: 0 auto;}
.qualified_box dd{ padding: 0.375rem 0; border-bottom: 1px dashed #d4d4d4;}
.qualified_box .vs{ height: 5.75rem; padding: 0 1.125rem; text-align: center; background:#f2f2f1 url(../images/vs.png) no-repeat center center; background-size: 12.35rem 0.95rem;}
.qualified_box .vs div{ width: 5.15rem;}
.qualified_box .vs h2, .qualified_4 h2{ padding: 0.25rem 0.75rem; font-size: 0.6rem; color: #36393c; height: 1.5rem;}
.qualified_4 h2{ padding: 0.5rem 1.375rem;}
.qualified_box .vs p, .qualified_4 p{ visibility: hidden; font-size: 0.45rem; color: #36393c;}
.qualified_box .vs p span, .qualified_4 p span{ color: #9f3f3a;}
.qualified_box .vs a, .qualified_4 a{ display: inline-block; margin-top: 1rem; width: 5.15rem; height: 1.375rem; line-height: 1.375rem; font-size: 0.45rem; background-color: #898989; color: #353433;}
.qualified_4 a{ margin-top: 0.5rem;}
.qualified_box .vs a.sure, .qualified_4 a.sure{ background-color: #d0b57e;}
.qualified_4{ position: relative;}
.qualified_4 dt{ position: absolute; top: 6.275rem; left: 6.65rem; width: 1.45rem; height: 0.95rem; background: url(../images/VS_4.png) no-repeat 0 0; background-size: 100% auto;}
.qualified_4 dd{ float: left; width: 6.375rem; height: 5.75rem; margin: 0.5rem; background-color: #f2f2f1; text-align: center;}
.prompt_btn{ text-align: center; padding: 2rem 0;}
.prompt_btn a{ display: inline-block; margin: 0 0.175rem; width: 7.25rem; height: 2.375rem; line-height: 2.375rem; font-size: 0.6rem; color: #FFF;}
.prompt_btn a.rule_btn{ background-color: #38b2a3;}
.prompt_btn a.reward_btn{ background-color: #964c49;}

.prompt_bg{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 99;}
.prompt{ display: none; position: fixed; top: 50%; left: 50%; -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); transform:translate(-50%,-50%); z-index: 100;}

.prompt{ display: none; position: fixed; width: 13.65rem; padding: 0 0.625rem 1.5rem 0.625rem; background-color: #383738;}
.prompt .close{ position: absolute; top: 0.5rem; right: 0.45rem; width: 0.775rem; height: 0.675rem; background: url(../images/close.png) no-repeat 0 0; background-size: 100% auto;}
.prompt h1.title{ padding: 1.125rem 0 0.25rem 0; margin-bottom: 0.75rem; text-align: center; font-size: 0.6rem; color: #c7a156; border-bottom: 1px solid #7a756a;}
.prompt ul.list{ font-size: 0.45rem; color: #f7f7f7; line-height: 0.9rem;}
.prompt ul.list span{ color: #c7a156;}
.prompt_reward dl{ margin: 0 auto; width: 9rem;}
.prompt_reward dd{ float: left; width: 4.5rem; text-align: center;}
.prompt_reward .sub_title{ height: 1.15rem;}
.prompt_reward .sub_title p{ font-size: 0.45rem; color: #c7a156;}
.prompt_reward .sub_title span{ display: inline-block; padding: 0 0.125rem; background-color: #54342a; font-size: 0.4rem; color: #a4a19a; border-radius:3px;}
.prompt_reward .name{ padding-bottom: 0.75rem; font-size: 0.45rem; color: #f4f0e7;}
.quiz_record .scroll{ height: 10rem; overflow: auto;}
.quiz_record table{ width: 100%; border-left: 1px solid #242324; border-top: 1px solid #242324; font-size: 0.45rem;}
.quiz_record td{ height: 0.975rem; text-align: center; border-bottom: 1px solid #242324; border-right: 1px solid #242324; color: #191919; background-color: #5e5d5d;}
.quiz_record thead td{ height: 1.025rem; background-color: #242324; color: #bcae93;}
.quiz_record thead td.bc{ border-right-color: #313031;}
.prompt_system{ text-align: center;}
.prompt_system .text{ padding-top: 2.125rem; font-size: 0.6rem; color: #f7f7f7;}
.prompt_system .btn{ margin-top: 1.25rem;}
.prompt_system .btn a{ display: inline-block; margin: 0 0.2rem; width: 6rem; height: 1.625rem; line-height: 1.625rem; font-size: 0.6rem; color: #f7f7f7;}
.prompt_system .btn a.on{ background-color: #38b2a3;}
.prompt_system .btn a.off{ background-color: #964c49;}
.prompt_alert .content{ margin-top: 0.5rem; font-size: 0.6rem; color: #c7a156;}

/*导航*/
#menu{display:block;width:1.6rem;height:1.875rem;background:url(../images/menu.png) no-repeat center;background-size:100% auto;position:absolute;top:0.425rem;right:0.5rem;z-index:20;}
/*侧边导航*/
#slide{width:4rem;height:100%;padding-top:2rem;position:fixed;right:0;top:0;background:#5696c1;z-index:333;transform:translate3d(100%,0,0);}
#slide a{display:block;width:3rem;margin:0 auto;height:1.875rem;line-height:1.875rem;font-size:0.45rem;text-align:center;color:#fff;border-bottom:1px solid #fff;}
#slide a:last-child{border-bottom:none;}
#shou{display:block;width:0.9rem;height:0.875rem;background:url(../images/closeBtn.png) no-repeat center;background-size:100% auto;text-indent:-999em;cursor:pointer;text-indent:-999em;position:absolute;top:0.5rem;right:0.5rem;}
/*阴影层*/
#layer{width:100%;height:100%;position:fixed;top:0;left:0;background:rgba(0,0,0,0.6);z-index:222;display:none;}

/* css animation */
@-webkit-keyframes fadeInLeft{0%{opacity:1;-webkit-transform:translate3d(0,0,0);}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);}}
@-moz-keyframes fadeInLeft{0%{opacity:1;-moz-transform:translate3d(0,0,0);}100%{opacity:0;-moz-transform:translate3d(100%,0,0);}}
@-ms-keyframes fadeInLeft{0%{opacity:1;-ms-transform:translate3d(0,0,0);}100%{opacity:0;-ms-transform:translate3d(100%,0,0);}}
@-o-keyframes fadeInLeft{0%{opacity:1;-o-transform:translate3d(0,0,0);}100%{opacity:0;-o-transform:translate3d(100%,0,0);}}
@keyframes fadeInLeft{0%{opacity:1;transform:translate3d(0,0,0);}100%{opacity:0;transform:translate3d(100%,0,0);}}
@-webkit-keyframes fadeOutLeft{0%{opacity:0;-webkit-transform:translate3d0,0,0);}100%{opacity:1;-webkit-transform:translate3d(0,0,0);}}
@-moz-keyframes fadeOutLeft{0%{opacity:0;-moz-transform:translate3d0,0,0);}100%{opacity:1;-moz-transform:translate3d(0,0,0);}}
@-ms-keyframes fadeOutLeft{0%{opacity:0;-ms-transform:translate3d0,0,0);}100%{opacity:1;-ms-transform:translate3d(0,0,0);}}
@-o-keyframes fadeOutLeft{0%{opacity:0;-o-transform:translate3d0,0,0);}100%{opacity:1;-o-transform:translate3d(0,0,0);}}
@keyframes fadeOutLeft{0%{opacity:0;transform:translate3d(0,0,0);}100%{opacity:1;transform:translate3d(0,0,0);}}
.fadeInLeft,.fadeOutLeft{
-webkit-animation-duration:.5s;-moz-animation-duration:.5s;-ms-animation-duration:.5s;-o-animation-duration:.5s;animation-duration:.5s;
-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;-ms-animation-fill-mode:forwards;-o-animation-fill-mode:forwards;animation-fill-mode:forwards;
}
.fadeInLeft{-webkit-animation-name:fadeInLeft;-moz-animation-name:fadeInLeft;-ms-animation-name:fadeInLeft;-o-animation-name:fadeInLeft;animation-name:fadeInLeft;}
.fadeOutLeft{-webkit-animation-name:fadeOutLeft;-moz-animation-name:fadeOutLeft;-ms-animation-name:fadeOutLeft;-o-animation-name:fadeOutLeft;animation-name:fadeOutLeft;}