.quiz_intro {
   position: relative;
   border-radius: 1rem;
   overflow: hidden;
}

.quiz_intro .start {
   position: absolute;
   bottom: 2rem;
   left: 50%;
   transform: translateX(-50%);
   width: 80%;
   text-align: center;
}

.quiz_intro .godap {
   position: absolute;
   bottom: 1.5rem;
   left: 50%;
   transform: translateX(-50%);
   width: 80%;
   text-align: center;
}


/********************** 분리 ***********************/
.quiz_bg {
   background: url(/img/app/sub04/quiz_bg.jpg) no-repeat center center;
   padding: 1.5rem 2rem;
   background-size: cover;
   border-radius: 1rem;
   position: relative;
   overflow:hidden;
}

.subConfull {
   height: 75.76%;
   background-color: #fff;
   margin: 4.06% 0 0;
}

/* 실천퀴즈 */
.innerPop .infoPop {
   width: 92%;
   padding-top: 104%;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background: url('/img/web/sub/sub02/info_bg.png') no-repeat center 0;
   background-size: 100% auto;
   text-align: center;
}

.innerPop .infoPop .txt {
   position: absolute;
   bottom: 5.8rem;
   line-height: 1.5;
   left: 50%;
   transform: translateX(-50%);
}

.innerPop .infoPop .txt b {
   display: block;
   font-size: 2.6rem;
   color: #0081e1;
}

.innerPop .close {
   position: absolute;
   right: 0rem;
   top: 0rem;
}

.quiz_bg form {
   height: 100%;
}

.time {
   display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;
   background: #e2dddb;
   width: 100%;
   margin: 0 auto;
   padding: 1.5rem;
   border-radius: .8rem;
   margin-top: 2%;
}

.time div {
   flex-basis: 33.33%;
   max-width: 15rem;
   padding: 0 0.8rem;
   text-align: center;
   color: #612c16;
}

.time div.num {}

.time div.num em {
   font-size: 3.2rem;
   font-weight: 600;
}

.time div.num img {
   width: 100%;
   margin-bottom: .8rem;
}

.time .timeSet {
   position: absolute;
   top: -2rem;
   left: 50%;
   width: 10rem;
   transform: translateX(-50%);
}

.time .timeSet p {
   display: block;
   position: relative;
   width: 100%;
   background: url('/img/web/sub/sub02/time.png') no-repeat center center;
   background-size: 100% auto;
   padding-top: 130%;
}

.time .timeSet p span {
   font-size: 160%;
   line-height: 1;
   font-weight: 600;
   position: absolute;
   bottom: 23%;
   left: 50%;
   transform: translateX(-50%);
}

.ques {
   display: block;
   position: relative;
   margin-top: 5%;
   background: #fff;
   padding: 4rem 1.4rem 2rem;
   height: 70%;
   border-radius: .8rem;
   text-align: center;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
}

.ques h4 {
   font-size: 1.8rem;
   line-height: 2.6rem;
   height: 10.4em;
   letter-spacing: -0.08em;
   word-break: break-all;
   margin-bottom: 2rem;
   color: #003D85;
   display: flex;
   justify-content: center;
}

.ques p {
   position: absolute;
   top: -1rem;
   left: 50%;
   transform: translateX(-50%);
   text-align: center;
   background: url('/img/web/sub/sub02/qnum_bg.png') center center no-repeat;
   background-size: 100% 100%;
   padding: 0.5rem 4.6rem;
}

.answer {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: space-between;
}

.radio2 {
   display: inline-block;
   flex-basis: 47%;
}

.radio2 input[type="radio"] {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0;
}

.radio2 input[type="radio"]+label {
   padding: 0;
   display: inline-block;
   position: relative;
   width: 100%;
   font-size: 6rem;
   color: #fff;
   padding-top: 65%;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   z-index: 0;
   font-weight: 900;
}

.radio2 input[type="radio"]+label em {
   font-size: 1.6rem;
   position: absolute;
   left: 50%;
   top: 50%;
   -ms-transform: translate(-50%, -50%);
   transform: translate(-50%, -50%);
}

/* .radio2 input[type="radio"] + label:before {content: ' '; position:absolute; top:0; left:0; display: block; width: 100%; height: 100%;  background:#BDBDBD;border-radius:8px; z-index:-1;}*/
.radio2 input[type="radio"].disabled+label:before {
   background: #EBEAE4;
}

.radio2 input[type="radio"]:checked+label:before {
   background: #50b848;
}

.quiz_hint_btn {
   display: flex;
   align-items: center;
   text-align: center;
   gap: .4rem;
   padding: .5rem 2rem;
   border: 2px solid var(--color0078E8);
   background-color: var(--color28B6F6);
   border-radius: 5rem;
}

.quiz_hint_btn .hint_count {
   color: var(--colorfff);
   font-size: 2.2rem;
   font-weight: 900;
   margin-bottom: -3px;
}
.quiz_hint_modal_content .hint_box {
   padding: 2rem;
   background-color: var(--colorE8E2FF);
   text-align: center;
   font-size: 1.8rem;
   color: var(--color333);
   border-radius: 1rem;
   line-height: 1.4;
}
@media (min-width:768px) {
   .time .timeSet p span {
      bottom: 22%;
   }

   .time .timeSet {
      width: 9rem;
   }

   .ques {
      padding-top: 3rem;
      height: 63%;
      padding: 4rem 2.4rem 2rem;
   }

   .ques h4 {
      font-size: 1.8rem;
      margin-bottom: 3rem;
      height: 7.8rem;
   }

   .radio2 input[type="radio"]+label {
      font-size: 4rem;
      padding-top: 38%;
   }
}


@media (max-width:360px) {
   .time .timeSet p span {
      bottom: 22%;
   }

   .time .timeSet {
      width: 9rem;
   }

   .time div.num em {
      font-size: 2.2rem;
   }

   .ques {
      padding-top: 3rem;
      height: 70%;
   }

   .ques h4 {
      font-size: 1.8rem;
      margin-bottom: 1.5rem;
   }

   .radio2 input[type="radio"]+label {
      font-size: 4rem;
      padding-top: 48%;
   }

   .overview {
      line-height: 1.5;
   }
}

@media (max-width:320px) {
   .ques {
      padding-top: 3rem;
      height: auto;
   }

   .ques h4 {
      font-size: 1.6rem;
      margin-bottom: 1rem;
   }

   .overview {
      font-size: 1.5rem;
      line-height: 1.4;
   }

   .overview ul li {
      line-height: 1.1;
      font-size: 1.2rem;
   }

}


@media (max-width:280px) {
   .ques {
      height: 72%;
   }

   .ques h4 {
      margin-bottom: 4rem;
   }
}



.ques_frame {
   height: 70%;
   margin-top: 5%;
   background-color: white;
   border-radius: .8rem;
   overflow-y: auto;
   padding: 2rem 1.4rem 2rem;
}

.ques {
   padding-top: 2rem;
   height: 100% !important;
   margin-top: 0 !important;
   padding: 0 !important;
}

.ques h4 {
   font-weight: 500;
   letter-spacing: -1.62px;
   color: #333;
   height: auto !important;
   word-break: keep-all;
}

.quiz1 {
   display: block;
}

.radio2 input[type="radio"]+label {
   border-radius: .8rem;
   background-color: #fff;
   height: 9rem;
   padding: 0;
}

.radio2 input[type="radio"]+label img {
   width: 5rem;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

.radio2 input[type="radio"]+label.yes {
   border: solid 2px #b1d5ff;
}

.radio2 input[type="radio"]+label.no {
   border: solid 2px #ffb8b8;
}

.radio2 input[type="radio"]+label.yes:active {
   background-color: #e3f5ff
}

.radio2 input[type="radio"]+label.no:active {
   background-color: #ffb8b8
}

.answer.ox_quiz {
   padding-top: 2rem;
}

.initial_hint_frmae {
   display: flex;
   width: 100%;
   align-items: center;
   justify-content: center;
   margin-bottom: 2rem;
}

.initial_hint {
   display: inline-block;
   border-radius: .8rem;
   border: solid 2px #b1d5ff;
   background-color: #fff;
   text-align: center;
   color: #1e42ff;
   padding: 1.4rem;
   font-size: 3rem;
   margin: 0 0.2rem;
   font-weight: 900;
}

.initial_hint.five {
   font-size: 2.4rem;
   padding: 1rem;
}

.init_input {
   width: 100%;
   color: #333 !important;
   padding: 0.6rem !important;
   background-color: #f4f4f4 !important;
   font-size: 1.4rem !important;
   text-align: center !important;
   margin-bottom: 1rem;
   margin-top: 2rem;
}

.init_input::placeholder {
   color: #838383;
   font-size: 1.4rem;
   text-align: center;
}

.init_button.radio2 {
   display: block;
   width: 100%;
}

.init_button.radio2 input[type="radio"]+label {
   border-radius: 58px;
   border: solid 3px #ffab45;
   background-color: #ffe240;
   font-size: 1.4rem;
   width: 100%;
   height: auto;
   padding: 0.6rem;
   color: #333;
   font-weight: bold;
}

.objective_hint_frame {
   display: inline-block;
   width: 46%;
   margin: 0.4rem;
}

.objective_hint {
   border-radius: .8rem;
   border: solid 2px #b1d5ff;
   text-align: center;
   padding: 2rem;
   color: #333;
   font-size: 2rem;
}

.objective_hint_frame.radio2 input[type="radio"]+label {
   font-size: 1.8rem;
   color: #333;
   font-weight: bold;
   height: 8rem;
}

.objective_hint_frame.radio2 input[type="radio"]+label em {
   width: 100%;
}

.objective_hint_frame.radio2 input[type="radio"]+label:active {
   background-color: #e3f5ff;
}