/* css reset */
* {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

html, body {
  height: 100%;
}


.qus {
  height: 100%;

  padding:  .533333rem;

  background-image: url("../img/answer_question/bg_anwserquestion@2x.png");
  background-size: cover;
  background-position: center;

  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.qus_hdr {
  margin-bottom: .213333rem;
}

/* 关卡提示信息 */
.qus_tip {
  display: flex;
  display: -webkit-flex;

  margin-bottom: .213333rem;
}

.qus-tip_ctn{
  width: 6.04rem;
  height: 1.56rem;

  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  color:#fff;
}

.qus-tip_qus-info {
  font-size: .32rem;
  line-height: .32rem;

  margin-bottom: .13333rem;
}

.qus-tip_qus-type {
  margin-top: .13333rem;
}

.qus-tip_cur-qus-index {
  font-size: .8rem;
  line-height: .8rem;
  color:#FED80F;
  font-weight: bold;
}

/* 标题 */
.qus-tle {

  padding: .333333rem;
  max-height: 10.786667rem;

  background-color: #fff;

  font-size: .426667rem;
  color:#333;
  font-weight: 500;
  line-height:  .613333rem;

  border:solid  .04rem #000;
  border-radius: .223333rem .49333rem .3533333rem .3433333rem;

  background-image: url("../img/answer_question/bg_question@2x.png");
  background-size: 101% 100%;
  background-position: center;
}

.qus-tle_inner {
  text-indent: 1.5em;
}

.qus-tle_item {
  margin-bottom: .133333rem;
}

.qus-tle_item:last-child {
  margin-bottom: 0;
}

/* 选项区域 */
.qus_answer-list {
  margin-top: .566667rem;
}

.answer-list-item {
  padding: .4rem .56rem;
  margin-bottom: 1.066667rem;

  background:rgba(0,0,0,0.6);
  border-radius: .266667rem;

  color:#fff;
  font-size: .373333rem;
  line-height: .613333rem;

  position:relative ;
}

.answer-list-item::after {
  position: absolute;

  content: '';
  display: block;
  width: .746667rem;
  height: .773333rem;

  top:0;

  transform: translateY(-50%);

  background-position: center;
  background-size: 100% 100%;
}

.answer-list-item:nth-child(2n)::after {
  right:.3333rem;
}

.answer-list-item:nth-child(2n+1)::after{
  left:.3333rem;
}

.answer-list-item--1::after {
  background-image: url("../img/answer_question/A@2x.png");
}

.answer-list-item--2::after {
  background-image: url("../img/answer_question/B@2x.png");
}

.answer-list-item--3::after {
  background-image: url("../img/answer_question/C@2x.png");
}

.answer-list-item--4::after {
  background-image: url("../img/answer_question/D@2x.png");
}

.answer-list-item--5::after {
  background-image: url("../img/answer_question/E@2x.png");
}

.answer-list-item--6::after {
  background-image: url("../img/answer_question/F@2x.png");
}

.answer-list-item--7::after {
  background-image: url("../img/answer_question/G@2x.png");
}

.answer-list-item--8::after {
  background-image: url("../img/answer_question/H@2x.png");
}

.answer-list-item--9::after {
  background-image: url("../img/answer_question/I@2x.png");
}

.answer-list-item--10::after {
  background-image: url("../img/answer_question/J@2x.png");
}

.answer-list-item--active {
  background:#fed80f;
  color:#1B1B1B;
  font-weight:400;
}

/* 底部 */
.qus_ftr {
  height: 1.36rem;
}

.qus_ftr img {
  height: 100%;
}


/* 图标 */
.police-icon {
  width: 2.166667rem;
  height: 1.866667rem;

  background-image: url("../img/animations/run_right.gif");
  background-size: cover;
  background-position: center;
}

.cheater-icon {
  width: 1.466667rem;
  height: 1.866667rem;

  background-image: url("../img/animations/cheat.gif");
  background-size: cover;
  background-position: center;

  margin-left: .533333rem;
}

/* 进度条 */
.progress {
  position: relative;
}

.progress_ctn {

  display: flex;
  display: -webkit-flex;
  align-items: center;
}

.progress-ctn_item {
  width: .253333rem;
  height: .093333rem;
  margin-right: .053333rem;

  background-image: url("../img/answer_question/dot_white.png");
  background-size: 100% 100%;
  background-position: center;
}

.progress-ctn_item--active {
  background-image: url("../img/answer_question/dot_yellow.png");
}

.progress_arrow {
  position: absolute;
  right: -.233333rem;
  top:0;

  transform: translateY(-47%);

  height: .546667rem;
  width: .396667rem;

  background-image: url("../img/answer_question/arrow_white.png");
  background-size: 100% 100%;
  background-position: center;
}

.progress_arrow--active {
  background-image: url("../img/answer_question/arrow_yellow.png");
}

/* 答案解析弹窗 */

.layer {
  position: fixed;
  top:0;
  left: 0;

  width: 100%;
  height: 100%;

  background:rgba(0,0,0,0.8);

  display: none;
}

.pop-up {
  background-color: #fff;

  width: 8.933333rem;


  margin:0 auto;

  margin-top:50%;
  transform: translateY(-15%);

  border-radius: .213333rem;

  position: relative;
}

.pop-up .close-btn {

  position: absolute;

  right: 0;
  top: -.966667rem;

  background-color: rgba(0, 0, 0, 0.8);

  content: '';
  display: block;

  width:  .8rem;
  height: .8rem;
}

.pop-up_logo-wrap {
  text-align: center;
}

.pop-up_logo {
  width: 1.893333rem;
  height: 1.226667rem;

  margin-top: .746667rem;
  margin-bottom:  .333333rem;
}

.pop-up_nav {
  padding: 0 1.186667rem;

  display: flex;
  display: -webkit-flex;

  justify-content: space-between;
}

.pop-up-nav_item-link{
  display: block;
  width: 2.32rem;
  height: 1.066667rem;
  background-size: 100% 100%;
}

.pop-up-nav_item-link--analyse {
  background-image: url("../img/answer_question/jfjx_normal@2x.png");
}

.pop-up-nav_item-link--help {
  background-image: url("../img/answer_question/fpts_normal@2x.png");
}

.pop-up-nav_item-link--active.pop-up-nav_item-link--analyse {
  background-image: url("../img/answer_question/jfjx_checked@2x.png");
}

.pop-up-nav_item-link--active.pop-up-nav_item-link--help {
  background-image: url("../img/answer_question/fpts_checked@2x.png");
}


.pop-up_info {
  text-indent: 2em;

  font-size: .373333rem;
  line-height: .533333rem;
  color:#333;

  max-height: 4.106667rem;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;

  padding: 0 .466667rem;
  margin-top: .746667rem;
}

.pop-up_cfm-btn {

  display: block;
  text-align: center;

  padding-bottom: .653333rem;
  margin-top:  .786667rem;
}

.pop-up_cfm-btn img {
  width: 4.08rem;
  height:  1.066667rem;
}

.tab-panel {
  display: none;
}

.tab-panel--active {
  display: block;
}

.qus--nice::after {
  position: fixed;
  top:50%;
  right: 50%;

  content: '';
  display: block;

  width: 1.733333rem;
  height: 1.733333rem;

  transform: translate(50%, -25%);
  -webkit-transform: translate(50%, -25%);

  background-image: url("../img/answer_question/nice.gif");
  background-size: cover;

  z-index: 999;
}

.tip-layer {
  position: fixed;

  top:0;
  left: 0;

  width: 100%;
  height: 100%;

  background: rgba(0, 0, 0, 0.8);

  display: none;

  z-index: 40;
}

.tip-layer .pop-up {
  min-height: 4.64rem;

  margin:0 .546667rem;

  border-radius:  .213333rem;
  background-image: #fff;

  margin-top:60%;

  position: relative;
}

.tip-layer .pop-up .close-btn {

  position: absolute;

  right: 0;
  top: -.966667rem;

  background-color: rgba(0, 0, 0, 0.1);

  content: '';
  display: block;

  width:  .8rem;
  height: .8rem;
}

.tip-layer .pop-up_logo-wrap {
  text-align: center;

  padding-top: .466667rem;
}

.tip-layer .pop-up_logo {
  width: 2.32rem;
}

.tip-layer .pop-up_text {
  color:#FF1382;
  font-size:  .426667rem;
  line-height: .613333rem;
  font-weight: 500;
  text-align: center;

  margin-top: .573333rem;
  margin-bottom: .52rem;
}

.tip-layer .pop-up_btn-wrap {
  display: flex;
  display: -webkit-flex;

  justify-content: space-between;
  padding:0 .693333rem;

  padding-bottom:  .64rem;
}

.tip-layer .pop-up_btn {

  display: block;

  width:  3.066667rem;
  height:  .8rem;


  background-size: 100% 100%;
}

.tip-layer .pop-up_btn--continue {
  background-image: url("../img/animations/btn_lately@3x.png");
}

.tip-layer .pop-up_btn--goToDraw {
  background-image: url("../img/animations/btn_reanswer@3x.png");
}