/* font-family: 'Be Vietnam', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@700&display=swap');

#pop_quest > .group {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
}
#pop_quest > .group:nth-child(1) > .btn.start {
  position: absolute;
  bottom: 142px;
  right: 180px;
  width: 240px;
  height: 54px;
  background-image: url('../img/quiz/startBtn_d.png')
}
#pop_quest > .group:nth-child(1) > .btn.start:hover { background-image: url('../img/quiz/startBtn_u.png') }

/* 퀴즈 영역 */
#pop_quest > .group.quiz > .item.quiz {
  position: relative;
  display: none;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 255, 255, .5); */
}

#pop_quest > .group.quiz > .item.quiz.active {
  display: flex;
}
#pop_quest > .group.quiz > .item.quiz > .options > .item.btn * {
  pointer-events: none;
}
/* #pop_quest > .group.quiz > .item.quiz > .options > .item.selected { z-index: 1 } */
#pop_quest > .group.quiz > .item.quiz > .options > .item.disabled {
  opacity: .5;
}
#pop_quest > .group.quiz > .item.quiz.solved > .options > .item.btn {
  pointer-events: none;
}

#pop_quest > .group.quiz > .item.quiz > .input-area > input {
  color: #222;
  border: 0;
}
#pop_quest > .group.quiz > .item.quiz.solved > .input-area > input {
  color: #0065CB;
}

#pop_quest > .group.quiz > .item.quiz input:focus {
  outline: none;
}

#pop_quest > .group.quiz > .item.quiz span.txt-red {
  color: #CF4323;
}

/* 퀘스트 번호 */
#pop_quest > .group.quiz > .item.quiz > .quest-num {
  position: absolute;
  top: 65px;
  left: 105px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100px;
  height: 80px;
  font-family: 'Be Vietnam', sans-serif;
  font-weight: 700;
  font-size: 3em;
  color: #2F2F2F;
  /* background-color: rgba(255, 0, 0, .5); */
}

#pop_quest > .group.quiz > .item.quiz > .quest {
  position: absolute;
  top: 100px;
  left: 180px;
  right: 40px;
  height: 60px;
  display: flex;
  align-items: center;
  font-size: 24px;
  letter-spacing: -1px;
  word-break: keep-all;
  /* background-color: rgba(0, 0, 255, .5); */
}
#pop_quest > .group.quiz > .item.quiz > .quest:before {
  content: '';
  position: absolute;
  width: 72px;
  height: 72px;
  top: -10px;
  left: -82px;
  opacity: .75;
  display: none;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('../img/quiz/imgO.png');
}
#pop_quest > .group.quiz > .item.quiz.solved > .quest:before {
  display: block;
}

#pop_quest > .group.quiz > .item.quiz.solved.incorrect > .quest:before {
  background-image: url('../img/quiz/imgX.png');      
}
#pop_quest > .group.quiz > .item.quiz > .quest p {
  margin: 0;
}

#pop_quest .item.quiz {
  background-image: url('../img/quiz/quiz-bg.png');
}

#pop_quest .item.quiz > .options > .item,
#pop_quest .item.quiz > .options > .item span.bullet {
  position: relative;
}
/* 마우스오버시 체크이미지 */
#pop_quest .item.quiz > .options > .item span.bullet:before {
  content: '';
  position: absolute;
  width: 34px;
  height: 34px;
  top: -16px;
  left: -4px;
  display: none;
  background: url('../img/quiz/chkImg.png') center no-repeat;
}
#pop_quest .item.quiz > .options > .item:hover span.bullet:before,
#pop_quest .item.quiz > .options > .item.selected span.bullet:before { display: block }
#pop_quest .item.quiz > .options > .item:hover span.bullet:before { opacity: .8; }
#pop_quest > .group.quiz > .item.quiz > .confirm.btn,
#pop_quest > .group.quiz > .item.quiz > .next.btn {
  position: absolute;
  width: 160px;
  height: 54px;
  right: 24px;
  bottom: 88px;
}
#pop_quest > .group.quiz > .item.quiz > .confirm.btn {
  background-image: url('../img/quiz/submitBtn_d.png');
}
#pop_quest > .group.quiz > .item.quiz > .next.btn {
  background-image: url('../img/quiz/nextBtn_d.png');
  display: none;
}
#pop_quest > .group.quiz > .item.quiz > .next.btn:hover { background-image: url('../img/quiz/nextBtn_u.png') }
#pop_quest > .group.quiz > .item.quiz > .confirm.btn:hover { background-image: url('../img/quiz/submitBtn_u.png') }
#pop_quest > .group.quiz > .item.quiz:nth-last-child(1) > .next.btn { background-image: url('../img/quiz/resultBtn_d.png') }
#pop_quest > .group.quiz > .item.quiz:nth-last-child(1) > .next.btn:hover { background-image: url('../img/quiz/resultBtn_u.png') }
#pop_quest > .group.quiz > .item.quiz.solved > .next.btn { display: block; }
#pop_quest > .group.quiz > .item.quiz.solved > .confirm.btn { display: none; }

/* ******************** quiz.type2 - 4지선다 ******************** */
#pop_quest .item.quiz.type2 > .options {
  position: absolute;
  top: 180px;
  left: 106px;
  right: 108px;
  bottom: 90px;
  padding-top: 24px;
  padding-left: 40px;
  padding: 30px 16px 0 40px;
  display: flex;
  flex-direction: column;
  /* background-color: rgba(0, 0, 255, .5); */
}

/* #pop_quest .item.quiz.type2 > .options > .item {
  position: relative;
} */
#pop_quest .item.quiz.type2 > .options > .item + .item {
  margin-top: 20px;
}
#pop_quest .item.quiz.type2 > .options > .item:before {
  /* display: block; */
  top: -12px;
  left: 0;
}
#pop_quest .item.quiz.type2 > .options > .item > p {
  margin: 0;
  display: flex;
  align-items: center;
}
#pop_quest .item.quiz.type2 > .options > .item > p > span {
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  line-height: 1;
}

#pop_quest .item.quiz > .options > .item span.bullet,
#pop_quest > .group.quiz > .item.quiz > .comment > p:nth-child(1) > span.value.num {
  font-family: 'Noto Sans KR', sans-serif;
  background-color: #F8CF43;
}

#pop_quest .item.quiz.type2 > .options > .item span.bullet {
  width: 30px;
  height: 30px;
  border-radius: 30px;
  border: 3px solid #111;
  font-size: 24px;
  font-weight: 700;
  color: #111;
  flex-shrink: 0;
  padding-bottom: 2px;
}
#pop_quest .item.quiz.type2 > .options > .item span.text {
  font-size: 22px;
  letter-spacing: -1px;
  line-height: 1.4;
  margin-left: 10px;
  word-break: keep-all;
}
#pop_quest .item.quiz.type2.solved > .options > .item.ans span.bullet {
  background-color: #CF4323;
  border-color: #EEE;
  color: #FEFEFE;
}
#pop_quest .item.quiz.type2.solved > .options > .item.ans span.text {
  color: #CF4323;
}

/* 퀴즈 정답보기 */
#pop_quest > .group.quiz > .item.quiz > .comment {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16px 0;
  background-color: rgba(0, 0, 0, .75);
  font-size: 20px;
  letter-spacing: -1px;
  color: #FEFEFE;
  display: none;
  overflow: visible;
}

#pop_quest > .group.quiz > .item.quiz.solved > .comment {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

#pop_quest > .group.quiz > .item.quiz > .comment p {
  display: flex;
  margin: 0;
}

#pop_quest > .group.quiz > .item.quiz > .comment > p:nth-child(1) {
  width: 170px;
  border-right: 1px solid #EEE;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#pop_quest > .group.quiz > .item.quiz > .comment > p:nth-child(1) > span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0;
}

#pop_quest > .group.quiz > .item.quiz > .comment > p:nth-child(1) > span + span {
  margin-top: 8px;
}

#pop_quest > .group.quiz > .item.quiz > .comment > p:nth-child(1) > span.value.num {
  width: 32px;
  height: 32px;
  border-radius: 32px;
  line-height: 32px;
  letter-spacing: normal;
  border: 3px solid #111;
  color: #111;
}
#pop_quest > .group.quiz > .item.quiz > .comment > p:nth-child(1) > span.value.str {
  color: #F8CF43;
  display: flex;
  flex-direction: column;
  text-align: center;
  word-break: keep-all;
}
#pop_quest > .group.quiz > .item.quiz > .comment > p:nth-child(1) > span.value.str > span {
  display: block;
  font-size: .9em;
}
#pop_quest > .group.quiz > .item.quiz > .comment > p:nth-child(1) > span.value.str > span:nth-child(2) {
  font-size: .68em;
  font-weight: normal;
}
#pop_quest > .group.quiz > .item.quiz > .comment > p:nth-child(1) > span.value.str > span:nth-child(2):before {
  content: '(또는 ';
}
#pop_quest > .group.quiz > .item.quiz > .comment > p:nth-child(1) > span.value.str > span:nth-child(2):after {
  content: ')'
}

#pop_quest > .group.quiz > .item.quiz > .comment > p:nth-child(2) {
  padding: 16px;
  width: 100%;
}

/* 퀴즈 결과보기 */
#opedu_poplayer .layer-item[data-name="quiz"] > .tab-item[data-name="result"] > .tab-item-child > .cont {
  position: relative;;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 380px;
  height: 400px;
  /* background-color: rgba(0, 0, 255, .5); */
}

#opedu_poplayer .layer-item[data-name="quiz"] > .tab-item[data-name="result"] > .tab-item-child > .cont > .text.wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 98px;
  height: 50px;
  padding-right: 74px;
  font-size: 34px;
  font-weight: 700;
  color: #222;
  /* background-color: rgba(0, 255, 255, .5); */
}

#opedu_poplayer .layer-item[data-name="quiz"] > .tab-item[data-name="result"] > .tab-item-child > .cont > .ox.wrap {
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin: 80px 20px 12px;
  height: 90px;
  /* background-color: rgba(255, 255, 0, .5); */
}

#opedu_poplayer .layer-item[data-name="quiz"] > .tab-item[data-name="result"] > .tab-item-child > .cont > .ox.wrap > .item {
  /* flex: 1; */
  width: 90px;
  height: 100%;
  /* background-color: rgba(255, 0, 0, .5); */
  background-image: url('../img/quiz/imgX.png');
}
#opedu_poplayer .layer-item[data-name="quiz"] > .tab-item[data-name="result"] > .tab-item-child > .cont > .ox.wrap > .item + .item {
  margin-left: 2px;
}
#opedu_poplayer .layer-item[data-name="quiz"] > .tab-item[data-name="result"] > .tab-item-child > .cont > .ox.wrap > .item.correct {
  background-image: url('../img/quiz/imgO.png');
}
#opedu_poplayer .layer-item[data-name="quiz"] > .tab-item[data-name="result"] > .tab-item-child > .cont > .retry.btn {
  margin: 0 auto;
  width: 160px;
  height: 54px;
  background-image: url('../img/quiz/reBtn_d.png');
}
#opedu_poplayer .layer-item[data-name="quiz"] > .tab-item[data-name="result"] > .tab-item-child > .cont > .retry.btn:hover {
  background-image: url('../img/quiz/reBtn_u.png');
}