@charset "UTF-8";
/* 초성맞추기[초성 box style]
<span class='init'><b>ㄱ</b><b>ㄴ</b></span>
<span class='init'>
  <b>ㄱ</b><b>ㄴ</b>
</span>

문제 텍스트 애매하게 떨어질 때(해당 영역을 묶고 justify 적용 / br태그 쓰지마세요)
<span class='line-break'>
</span>
해설 텍스트 애매하게 떨어질 때(해당 영역을 묶고 justify 적용 / br태그 쓰지마세요)
<p class='line-break'>
</p>

문제 영역 width 사이즈 줄이기
<span class='narrow-area'>
</span>

문제 영역 width 사이즈 늘리기
<span class='wide-area'>
</span>

해설 영역 width 사이즈 늘리기
<p class='wide-area'>
</p>

해설영역 4줄 이상(폰트 사이즈 45px) - 기본(클라이언트가 제시한 사이즈)
<p class='small-d'>
</p>

해설영역 4줄 이상 적용해도 넘칠 때(폰트 사이즈 44px)
<p class='small-d too'>
</p>

그래도 넘칠 때(line-height 조정)
<p class='small-d too line-h-s'>
</p>

small-d 보다 크게(폰트 사이즈 47px) - 기본이 이상할 때<<웬만하면 쓸 일 없을거예요
<p class='middle-d'>
</p>

「」, 『』 특수문자 있을 시
<span class='par'>
</span>

밑줄
<span class='under-line'>
</span>
흰색 밑줄
<span class='under-line white'>
</span> */

/* 공통 배열 맞추기 위해 짜여진 css , */
.overlay{padding: 45px 80px;}
.overlay .badge-quiz{top:28px;left:60px;}
.overlay .desc {margin-top: 60px; text-align: justify; line-height:70px;word-break: break-word;}
.overlay .desc p.middle-d{font-size: 47px;}
.overlay .desc p.small-d{font-size: 45px;}
.overlay .desc p.small-d.too{font-size: 44px;}
.overlay .desc p.small-d.too.line-h-s{line-height: 1.2;}

/* .wrap-quiz .area-question{width: 490px;} */
.wrap-quiz .area-question .question { text-align: justify; word-break: break-word;} 
.wrap-quiz .area-question .question .wide-area{width: 515px;}
.line-break{display:block !important;text-align-last: justify;}
.wrap-quiz .area-question .question span.init{display:inline;}
.wrap-quiz .area-question .question span.init b{
    display:inline-block;width:44px;height:44px;margin: 0 1px;text-align:center;vertical-align:text-top;box-sizing:border-box;
    border:2px solid #6774E9;background: #fff;border-radius: 10px;color:#6774E9;line-height: 42px;
    transform: translateY(2px);
}
.wrap-quiz .area-question .question span.init b:first-child{margin-left: 2px;}
.wrap-quiz .area-question .question span.init b:last-child{margin-right: 2px;}

span.par{display: inline-block;margin-left: -15px;margin-right: -13px;}
.wrap-quiz .wrap-btn .btn-answer-choice .txt-answer span.par{margin-left: -10px;margin-right: 0;}
.overlay .desc span.par{margin-left: -25px;margin-right: -20px;}
.overlay .desc span.par.too{margin-right: -25px;}

.wrap-quiz .wrap-btn button{padding: 0 20px;}
.wrap-quiz .wrap-btn .btn-answer-choice .txt-answer{text-align: justify;}

.under-line{position: relative;}
.under-line::before{content:"";display: block;width:100%;height:3px;background: #000;position: absolute;left:0;bottom:3px;}
.under-line.white::before{background: #fff;}

.narrow-area{width: 484px;}

.overlay .desc .wide-area{width: 1070px;}