@charset "utf-8";
[v-cloak] { display: none; }
 html,body,.content-body{
    background: #e94a47;
 }
 .content-body{
  max-width: 640px;
  margin:0 auto;
 }
 .tiku-banner img{
  width: 100%;
 }
 #TiKu{
  position: relative;
 }
 /*题干*/
.swiper-tiku{
    margin-top:-3em;
    width: 100%;
    padding:15px;
    padding-bottom:35px;
    overflow-x: hidden;
 }
.swiper-tiku._end{margin-top:-4em;}
._end .swiper-wrapper{
  height: auto !important;
}
.swiper-wrapper,.swiper-slide{
  width: 100%;
}
.swiper-slide{
padding:15px;
border-radius:10px;
background: #fff;
height: auto;
overflow-x: hidden;
overflow-y: auto;
}
.swiper-slide label{
display: block;
padding:5px;
}
.swiper-slide label:active{
background: #eee;
}
.swiper-slide label.myactive{
  background: #ffdddd;
}
.swiper-slide label.success,.swiper-slide label.success.myactive{
  background: #e2fbe2;
}
.swiper-slide .title1{
padding-bottom:5px;
font-size: 15px;
border-bottom: 1px solid #eee;
color: #999;
}
.swiper-slide .title2{
  padding:5px 0;
  font-size: 15px;
  font-weight: bold;
}
.swiper-slide .title3{
  color: #999;
}
/*答案解析*/
.answer-right{
  padding-top:5px;
  margin-top:5px;
  border-top: 1px solid #eee;
}
.answer-right h4{
  font-weight: bold;
}
.answer-right p{
  color: #999;
   font-weight: normal;
}


/*按钮组*/
.tool{
  display:flex;
  margin-top:10px;
  background: #fff;
  border-radius:8px;
}
.tool > div{
  display: flex;
  flex:1;
  text-align: center;
}
.tool .tool-before + div a{
border-radius:0 8px 8px 0;
}
.tool a{
  flex:1;
  background: #fed643;
  padding:10px;
  border-radius:8px;
}
.tool span{
  flex: 1;
  padding:10px 0;
  border-right:1px solid #eee;
}
.tool span:last-child{
  border-right: 0;
}

/*倒计时组件*/
.olny-time{
  position: absolute;
  top:-3em;
  left:50%;
  margin-left: -3em;
  width: 6em;
  height: 6em;
  overflow: hidden;
  background: #fff;
  border-radius:100%;
  z-index: 9;
  box-shadow: 0 0 8px 2px rgba(0,0,0,.3);
}
.olny-time span{
  position:absolute;
  top:.5em;
  left: .5em;
  width: 5em;
  height: 5em;
}
.olny-time span:after{
    content: '';
    width: 2.5em;
    height: 5em;
    position:absolute;
    top:0;
 }
.olny-time span.cir1,.olny-time span.cir3{
    -webkit-transform-origin: center center;
    transform-origin: center center;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.olny-time span.cir1:after{
    width: 2.6em;
    height: 5.2em;
    top:-.1em;
    right: -.1em;
    background: #fff;
    border-radius: 0 5.2em 5.2em 0;
}
.olny-time span.cir2:after{
    right: 0;
    background: #fed643;
    border-radius: 0 5em 5em 0;
}
.olny-time span.cir3:after{
    width: 2.6em;
    height: 5.2em;
    top:-.1em;
    left: -.1em;
    background: #fff;
    border-radius:5.2em 0 0 5.2em;
}
.olny-time span.cir4:after{
    left: 0;
    background: #fed643;
    border-radius:5em 0 0 5em;
}
.olny-time .cir0{
    position: absolute;
    top:.8em;
    left:.8em;
    width: 4.4em;
    height: 4.4em;
    background: #fff;
    border-radius:100%;
    z-index: 9;
    text-align: center;
    padding-top:.5em;
}
.olny-time .cir0 div{
    font-size: 12px;
    line-height: 1.2;
}
.now-time big{
    font-size: 26px;
}
.now-time small{
    font-size: 14px;
}

/*答题板*/
.answer-mask{
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  background:rgba(0,0,0,.1);
  z-index: 8;
}
.answer{
    position: fixed;
    width: 100%;
    height: 80px;
    top:calc(100vh);
    left:0;
    background: #fff;
    border-top:1px solid #ddd;
    transition:all .3s ease 0s;
    -moz-transition:all .3s ease 0s;
    -webkit-transition:all .3s ease 0s;
    -o-transition:all .3s ease 0s;
    z-index: 9;
}
.answer.show{
    top:calc(100vh - 80px);
}
.answer .answer-div{
    display: block;
    width: 100%;
    height: 80px;
    overflow-y: auto;
}
.answer .answer-div a{
    display: inline-block;
    padding:10px 15px;
    border-right:1px solid #ddd;
    border-bottom:1px solid #ddd;
}
.answer .answer-div a.active{
    background: #d5f2ff;
}
.answer .answer-div a.over{
    background: #ffdddd;
}
.answer .answer-div a.over.success{
    background: #e2fbe2 !important;
}
.answer-btn{
    position:absolute;
    bottom:100%;
    left:50%;
    width: 80px;
    margin-left: -40px;
    background: #fff;
    text-align: center;
    border-radius: 4px 4px 0 0;
    border-top:4px solid #eee;
    box-shadow: 0 -2px 4px 1px rgba(0,0,0,.1);
}
a.answer-btn:active{
    background: #eee;
}

/*倒计时动画*/
.olny-time span.action1{
    -webkit-animation: load1 5s linear;
    animation: load1 5s linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
.olny-time span.action2{
    -webkit-animation: load1 5s 5s linear;
    animation: load1 5s 5s linear;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}
@-webkit-keyframes load1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    visibility: hidden;
  }
}
@keyframes load1 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    visibility: hidden;
  }
}

/*分数*/
.score-mask{
  position: fixed;
  width: 100%;
  height: 100%;
  top:0;
  left: 0;
  background:rgba(0,0,0,.75);
  z-index: 10;
}
.my-score{
  position: fixed;
  width: 80%;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  background: #fff;
  border-radius:8px;
  padding:20px 15px;
  text-align: center;
  z-index: 11;
}
.my-score_bd{
  background:url(../img/tiku/success_bg.png) no-repeat top center;
  background-size: 100% auto;
}

.my-score img{
  position: absolute;
  bottom:100%;
  left:50%;
  width: 80%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}
.my-score h2{
  font-size: 18px;
}
.my-score h1{
  padding:30px 0;
  font-size: 66px;
  color: #f44336;
}
.my-score h1 small{ font-size: 16px;}
.my-score_bd.kulian{
  background: url(../img/tiku/kulian.png) no-repeat top center;
  background-size: 100% auto;
}
.my-score_bd.kulian h1{
  color: #666;
  line-height: 1;
}
.my-score_bd.kulian p{
  margin-top:-20px;
  padding-bottom:25px;
  font-size: 16px;
  color:#999;
}
.my-score_btn{
  /*display: flex;*/
}
.my-score_btn a{
  display: block;
  margin:15px 0;
  padding:10px;
  background: #ffa627;
  color:#fff;
  border-radius:4px;
}
.my-score_btn a + a{
  background: #ff635b;
}
.my-score_btn a.die{
  background: #999 !important;
}


/*抽奖*/
.cj-bd{
  border-bottom: 4px solid #f8c70e;
}
.cj-banner img{
  width: 100%;
}
.cj-box{
  padding:15px;
}
.cj-list_user{
  margin-top:15px;
  min-height: 100px;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid #ddd;
  padding:5px;
}
.cj-box .cj-list_item{
  padding:6px;
  float: left;
  width: 50%;
  color:#888;
  border-bottom: dashed 1px #ddd;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left;
}

.cj-tt{
  width: 200px;
  height: 33px;
  margin:0 auto;
  line-height: 33px;
  text-align: center;
  color:#fff;
  font-weight: bold;
  background: url(../img/tiku/cj_tt.png) no-repeat center center;
  background-size: 100% 100%;
  text-indent: 32px;
}
.cj-list_user{
  max-height: 200px;
  overflow-y:auto; 
}
.cj-rule{
  text-align: center;
  margin-top: -4em;
  margin-bottom: 40px;
}
.cj-rule a{
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  text-decoration: underline;
}
.luck-user{padding-top:0;}
#D-box .jp:nth-child(2n-1){
    color:#000;
}