/* container */
body {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background:url('../images/bg_body.png') no-repeat center / cover;}
body.reading {background-image:url('../images/bg_body_reading.png');}
body.voca {background-image:url('../images/bg_body_voca.png');}
body.listening {background-image:url('../images/bg_body_listening.png');}
body.training {background-image:url('../images/bg_body_training.png');}
body.sentence {background-image:url('../images/bg_body_sentence.png');}
body.grammar {background-image:url('../images/bg_body_grammar.png');}
body.pattern {background-image:url('../images/bg_body_pattern.png');}
body.essay {background-image:url('../images/bg_body_essay.png');}
body:not(.print)::-webkit-scrollbar {display:none;}
body.print {background:#fff; display:block; height:auto !important; min-width:1200px; margin:0 auto; overflow-x:auto;}
.container {max-width:1230px; margin:0 auto; padding:0 15px; width:100%;}
.is-pc {display:block;}
.is-m {display:none;}
.ft-red {color:#f00 !important;}
@media (max-width:991px){
body {display:block; background-position:left center;}
.is-pc {display:none;}
.is-m {display:block;}
}

/* learn-box */
.learn-box {width:100%; max-width:1230px; padding:0 15px; margin:30px auto;}

/* main-box */
.main-box {overflow:hidden; border-radius:24px; box-shadow:0 0 12px rgba(0,0,0,0.1); background:#fff;}
.main-box .main-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; height:60px; padding:0 44px; background:#5D5B65;}
.main-box .main-head h2 {display:flex; flex-wrap:wrap; align-items:center; font-size:24px; font-weight:bold; color:#fff;}
.main-box .main-head h2:before {display:inline-block; content:""; width:6px; height:6px; border-radius:50%; background:#fff; margin:0 10px 0 0;}
.main-box .main-head ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; flex:1; min-width:0;}
.main-box .main-head ul li {display:flex; flex-wrap:wrap; align-items:center;}
.main-box .main-head ul li:after {display:inline-block; content:""; width:1px; height:8px; background:#d9d9d9; margin:0 10px;}
.main-box .main-head ul li:last-of-type:after {display:none;}
.main-box .main-head ul li > * {font-size:16px; font-weight:bold; color:#fff;}
.main-box .main-head ul li > *:hover {color:#fff;}
.main-box .main-head ul li b {height:24px; padding:0 10px; font-size:16px; font-weight:500; color:#333; display:flex; flex-wrap:wrap; align-items:center; margin:0 5px 0 0; border-radius:50px; background:#D9D9D9;}
.main-box .main-head ul li p {overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.main-box .main-head.full {height:auto; padding:15px 44px;}
.main-box .main-head.full h2 {width:100%; margin:0 0 10px;}
.main-box .main-head.full ul {width:100%; display:flex; flex-wrap:wrap; margin:0 -5px -10px; flex:none; justify-content:flex-start;}
.main-box .main-head.full ul li {width:calc(40% - 10px); margin:0 5px 10px;}
.main-box .main-head.full ul li:nth-of-type(odd) {width:calc(60% - 10px);}
.main-box .main-head.full ul li:after {display:none;}
.main-box .main-head.full ul li b {width:120px; justify-content:center; text-align:center;}
.main-box .main-head.full ul li p {flex:1; min-width:0;}
.main-box .main-body {height:700px; position:relative;}
.main-box .main-body .main-start {padding:50px 0; height:100%; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center;}
.main-box .main-body .main-start.reading1 {background:url('../images/bg_main_start_reading1.png') no-repeat center / cover;}
.main-box .main-body .main-start.reading2 {background:url('../images/bg_main_start_reading2.png') no-repeat center / cover;}
.main-box .main-body .main-start.voca {background:url('../images/bg_main_start_voca.png') no-repeat center / cover;}
.main-box .main-body .main-start.listening {background:url('../images/bg_main_start_listening.png') no-repeat center / cover;}
.main-box .main-body .main-start.training {background:url('../images/bg_main_start_training.png') no-repeat center / cover;}
.main-box .main-body .main-start.pattern {background:url('../images/bg_main_start_pattern.png') no-repeat center / cover;}
.main-box .main-body .main-start.sentence {background:url('../images/bg_main_start_sentence.png') no-repeat center / cover;}
.main-box .main-body .main-start.grammar1 {background:url('../images/bg_main_start_grammar1.png') no-repeat center / cover;}
.main-box .main-body .main-start.grammar2 {background:url('../images/bg_main_start_grammar2.png') no-repeat center / cover;}
.main-box .main-body .main-start.essay {background:url('../images/bg_main_start_essay.png') no-repeat center / cover;}
.main-box .main-body .main-start > * {width:100%; text-align:center;}
.main-box .main-body .main-start > h2 {font-size:42px; font-weight:bold; line-height:1.3; margin:0 0 10px; color:#4a4a4a;}
.main-box .main-body .main-start > h3 {font-size:54px; font-weight:bold; line-height:1.3; margin:0 0 32px; color:#4a4a4a;}
.main-box .main-body .main-start > h3 time {font-size:54px; font-weight:bold; line-height:1.3; color:#5CA901;}
.main-box .main-body .main-start > p {font-size:24px; font-weight:500; line-height:1.3; color:#7a7a7a; word-break:keep-all;}
.main-box .main-body .main-start > p b {display:block; text-align:center; font-size:24px; font-weight:700; line-height:1.3; color:#4A4A4A; word-break:keep-all; margin:0 0 4px;}
/* * 리셋(font-size:14px) 때문에 strong이 본문보다 작아 보이는 문제 보정 */
.main-box .main-body .main-start > p strong {
	font-size: inherit;
	font-weight: 700;
	font-family: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	vertical-align: baseline;
	color: #4a4a4a;
}
.main-box .main-body .main-start > p.bg-white {margin:15px auto 0; max-width:800px; width:calc(100% - 30px); padding:20px; line-height:1.5; border-radius:10px; border:1px solid #d9d9d9; box-shadow:0 0 10px rgba(0,0,0,0.1);}
.main-box .main-body .main-start > div.lt-complete-actions {max-width:800px; width:calc(100% - 30px); margin:24px auto 0; padding:0; display:block;}
.main-box .main-body .main-start > div.lt-complete-actions .button-box {padding:0; justify-content:center;}
.main-box .main-body .main-start > dl {background:rgba(159, 232, 112, 0.2); border-radius:24px; padding:24px 42px; margin:24px auto 50px; max-width:600px;}
.main-box .main-body .main-start > dl dd {display:flex; flex-wrap:wrap; margin:0 0 8px;}
.main-box .main-body .main-start > dl dd:last-of-type {margin:0;}
.main-box .main-body .main-start > dl dd b {display:flex; flex-wrap:wrap; align-items:center; width:110px; font-size:24px; font-weight:500; line-height:1.4; color:#7a7a7a;}
.main-box .main-body .main-start > dl dd b:before {display:inline-block; content:""; width:5px; height:5px; background:#7a7a7a; border-radius:50%; margin:0 10px 0 0;}
.main-box .main-body .main-start > dl dd p {flex:1; min-width:0; padding:0 0 0 5px; font-size:24px; font-weight:500; line-height:1.4; color:#4a4a4a; text-align:left;}
.main-box .main-body .main-start > div {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:100px 0 0;}
.main-box .main-body .main-start > div .start {width:240px; height:60px; background:#5CA901; color:#fff; font-size:30px; font-weight:bold; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50px;}
.main-box .main-body .main-start > div .start:after {display:inline-block; content:""; width:36px; height:36px; margin:0 0 0 14px; background:url('../images/icon_more.png') no-repeat center / cover;}
.main-box .main-body .main-start > div.level {margin:20px auto; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center;}
.main-box .main-body .main-start > div.level b {background:#D9D9D9; padding:3px 15px; font-size:25px; font-weight:500; color:#333; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50px;}
.main-box .main-body .main-start > div.level strong {width:100%; margin:5px 0 0; font-size:25px; font-weight:bold; color:#333;}
.main-box .main-body .main-content {padding:20px; height:100%; display:flex; flex-wrap:wrap; overflow-y:auto;}
.main-box .main-body .main-content::-webkit-scrollbar {width:4px; border-radius:5px; background:#eee;}
.main-box .main-body .main-content::-webkit-scrollbar-thumb {background:#d9d9d9; border-radius:5px;}
.main-box .main-body .main-content .content-left {flex:1; min-width:0; height:100%;}
.main-box .main-body .main-content .content-left .left-question {border:1px solid #d9d9d9; border-radius:12px; padding:15px;}
.main-box .main-body .main-content .content-left .left-question p {font-size:18px; font-weight:600; line-height:1.5;}
.main-box .main-body .main-content .content-left .left-detail {border:1px solid #d9d9d9; border-radius:12px; padding:15px; margin:12px 0 0; overflow:hidden;}
.main-box .main-body .main-content .content-left .left-detail .inner {height:100%; padding:0 10px 0 0; overflow-y:auto;}
.main-box .main-body .main-content .content-left .left-detail .inner::-webkit-scrollbar {width:4px; border-radius:5px; background:#eee;}
.main-box .main-body .main-content .content-left .left-detail .inner::-webkit-scrollbar-thumb {background:#d9d9d9; border-radius:5px;}
.main-box .main-body .main-content .content-left .left-detail .inner p {font-size:18px; line-height:1.5; font-weight:300;}
.main-box .main-body .main-content .content-left .left-detail .inner ul li {margin:0 0 25px;}
.main-box .main-body .main-content .content-left .left-detail .inner ul li:last-of-type {margin:0;}
.main-box .main-body .main-content .content-right {width:400px; height:100%; margin:0 0 0 30px; display:flex; flex-wrap:wrap; align-items:center; align-content:space-between;}
.main-box .main-body .main-content .content-right .inner {width:100%;}
.main-box .main-body .main-content .content-right .inner:first-of-type {overflow-y:auto; padding:0 10px 0 0;}
.main-box .main-body .main-content .content-right .inner:first-of-type::-webkit-scrollbar {width:4px; border-radius:5px; background:#eee;}
.main-box .main-body .main-content .content-right .inner:first-of-type::-webkit-scrollbar-thumb {background:#d9d9d9; border-radius:5px;}
.main-box .main-body .main-content .content-right .inner:last-of-type {padding:30px 0 0;}
.main-box .main-body .main-content .content-full {width:100%;}
.main-box .main-body .main-content .content-full.full {height:100%; overflow-y:auto; overflow-x:hidden;}
.main-box .main-body .main-content .content-full.full ~ .content-full {margin:15px 0 0;}
.main-box .main-body .main-content .content-full.column {display:flex; flex-direction:column;}
.main-box .main-body .main-content .content-full.column .write-box.hfull {height:100%;}
.main-box .main-body .main-content.column {flex-wrap:nowrap; flex-direction:column;}
.main-box .main-head.full ~ .main-body {height:600px;}
@media (max-width:991px){
.main-box {border-radius:10px;}
.main-box .main-head {height:auto; padding:10px 15px;}
.main-box .main-head h2 {font-size:18px; margin:0 0 5px;}
.main-box .main-head h2:before {display:none;}
.main-box .main-head ul {width:100%; margin:-3px 0; flex:none; justify-content:flex-start;}
.main-box .main-head ul li {margin:3px 0;}
.main-box .main-head ul li:after {margin:0 5px;}
.main-box .main-head ul li > * {font-size:13px; font-weight:400; line-height:1.4;}
.main-box .main-head ul li b {height:18px; margin:0 3px 0 0; font-size:12px;}
.main-box .main-head.full {padding:10px 15px;}
.main-box .main-head.full ul {margin:0;}
.main-box .main-head.full ul li {width:100%; margin:0 0 5px;}
.main-box .main-head.full ul li:last-of-type {margin:0;}
.main-box .main-head.full ul li b {width:90px;}
.main-box .main-body {height:auto;}
.main-box .main-body .main-start {background-position:left bottom !important;}
.main-box .main-body .main-start.reading2 {background-position:right bottom !important;}
.main-box .main-body .main-start > h2 {font-size:30px;}
.main-box .main-body .main-start > h3 {font-size:40px;}
.main-box .main-body .main-start > h3 time {font-size:40px;}
.main-box .main-body .main-start > p {font-size:18px;}
.main-box .main-body .main-start > p b {font-size:22px;}
.main-box .main-body .main-start > p.bg-white {margin:0;}
.main-box .main-body .main-start > div.lt-complete-actions {margin:16px auto 0;}
.main-box .main-body .main-start > dl {width:calc(100% - 30px); padding:15px; border-radius:5px; margin:15px auto 30px;}
.main-box .main-body .main-start > dl dd b {font-size:15px; width:65px;}
.main-box .main-body .main-start > dl dd b:before {width:3px; height:3px; margin:0 5px 0 0;}
.main-box .main-body .main-start > dl dd p {font-size:15px;}
.main-box .main-body .main-start > div {margin:50px 0 0;}
.main-box .main-body .main-start > div .start {width:200px; height:50px; font-size:20px;}
.main-box .main-body .main-start > div .start:after {width:28px; height:28px; margin:0 0 0 10px;}
.main-box .main-body .main-start > div.level {margin:10px auto;}
.main-box .main-body .main-start > div.level b {font-size:16px; padding:2px 10px;}
.main-box .main-body .main-start > div.level strong {font-size:16px;}
.main-box .main-body .main-content .content-left {flex:none; width:100%;}
.main-box .main-body .main-content .content-left .left-question {border-radius:5px;}
.main-box .main-body .main-content .content-left .left-question p {font-size:16px;}
.main-box .main-body .main-content .content-left .left-detail {border-radius:5px; height:500px !important;}
.main-box .main-body .main-content .content-left .left-detail .inner {padding:0;}
.main-box .main-body .main-content .content-left .left-detail .inner p {font-size:16px;}
.main-box .main-body .main-content .content-right {width:100%; margin:24px 0 0;}
.main-box .main-body .main-content .content-right .inner:first-of-type {height:auto !important; padding:0;}
.main-box .main-body .main-content .content-right .inner:first-of-type::-webkit-scrollbar {display:none;}
.main-box .main-head.full ~ .main-body {height:auto;}
}
@media (max-width:767px){
.main-box .main-body .main-start {padding:100px 0;}
.main-box .main-body .main-start h2 {font-size:22px;}
.main-box .main-body .main-start h3 {font-size:20px; margin:0 0 20px;}
.main-box .main-body .main-start h3 time {font-size:20px;}
.main-box .main-body .main-start p {font-size:15px;}
.main-box .main-body .main-content {padding:24px 15px;}
.main-box .main-body .main-content .content-left .left-question p {font-size:15px;}
.main-box .main-body .main-content .content-left .left-detail {height:auto !important;}
.main-box .main-body .main-content .content-left .left-detail .inner p {font-size:14px; max-height:400px;}
}

/* title-box */
.title-box {margin:0 0 12px; padding:10px 0; position:relative;}
.title-box h3 {font-size:20px; font-weight:600; line-height:1.4; word-break:keep-all;}
.title-box h3.active {color:#079500;}
.title-box h3.blue {color:#3B77B9;}
.title-box h3.sound {position:relative; padding:0 0 0 30px;}
.title-box h3.sound:before {position:absolute; left:0; top:1px; content:""; width:24px; height:24px; background:url('../images/icon_sound.png') no-repeat center / cover;}
.title-box .title-control {position:absolute; right:0; top:50%; transform:translateY(-50%); display:flex; flex-wrap:wrap; align-items:center; gap:10px;}
.title-box .title-control .camera {display:none; width:35px; height:35px; display:none; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50%; background:#ddd; font-size:0;}
.title-box .title-control .camera:after {display:inline-block; content:""; width:20px; height:20px; background:url('../images/icon_camera.svg') no-repeat center / cover;}
.title-box .title-control .file {width:35px; height:35px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50%; background:#ddd; font-size:0; position:relative;}
.title-box .title-control .file input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.title-box .title-control .file:after {display:inline-block; content:""; width:20px; height:20px; background:url('../images/icon_upload.svg') no-repeat center / cover;}
@media (max-width:991px){
.title-box h3 {font-size:18px;}
.title-box h3.sound {padding:0 0 0 25px;}
.title-box h3.sound:before {width:18px; height:18px; top:4px;}
.title-box .title-control {gap:5px;}
.title-box .title-control .camera {display:flex; width:30px; height:30px;}
.title-box .title-control .camera:after {width:16px; height:16px;}
.title-box .title-control .file {width:30px; height:30px;}
.title-box .title-control .file:after {width:16px; height:16px;}
}

/* cate-box */
.cate-box ul {display:flex; flex-wrap:wrap; margin:0 0 12px;}
.cate-box ul li {flex:1; min-width:0; margin:0 5px 0 0;}
.cate-box ul li:last-of-type {margin:0;}
.cate-box ul li a {height:40px; border:1px solid #4a4a4a; font-size:17px; font-weight:500; color:#4a4a4a; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; text-align:center; border-radius:50px; background:#fff; transition:all ease 0.5s; word-break:keep-all;}
.cate-box ul li a:hover {background:#5D5B65; color:#fff;}
.cate-box ul li.active a {background:#2F5597; border-color:#2F5597; color:#fff; font-weight:bold;}
@media (max-width:1200px){
.cate-box ul li {margin:0 12px 0 0;}
}
@media (max-width:991px){
.cate-box ul li a {font-size:17px;}
}
@media (max-width:767px){
.cate-box {margin:0 0 12px;}
.cate-box ul {margin:0 -2.5px -5px;}
.cate-box ul li {flex:none; width:calc(33.33% - 5px); margin:0 2.5px 5px;}
.cate-box ul li:last-of-type {margin:0 2.5px 5px;}
.cate-box ul li a {font-size:15px;}
}

/* button-box */
.button-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.button-box .btn {font-size:20px; font-weight:bold; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50px; height:50px; flex:1; min-width:0;}
.button-box .btn.sm {height:35px; border-radius:5px; font-size:14px;}
.button-box .btn-red {background:#FF0000; color:#fff;}
.button-box .btn-green {background:#5CA901; color:#fff;}
.button-box .btn-blue {background:#3B77B9; color:#fff;}
.button-box .btn-blue-outline {color:#3B77B9; border:2px solid #3B77B9;}
.button-box .btn-gray {background:#7A7A7A; color:#fff;}
.button-box .btn-gray:hover {background:#666;}
.button-box .btn-white {background:#fff; border:1px solid #d9d9d9; color:#4B90DC;}
.button-box .btn-answer {border:1px solid #d9d9d9; background:rgba(217, 217, 217, 0.2) url('../images/icon_answer.png') no-repeat center / 42px; font-size:0 !important;}
.button-box .btn-wrong {border:1px solid #d9d9d9; background:rgba(217, 217, 217, 0.2) url('../images/icon_wrong.png') no-repeat center / 42px; font-size:0 !important;}
.button-box.button-mtm {margin-top:-51px !important;}
@media (max-width:991px){
.button-box .btn {border-radius:5px; font-size:16px; height:40px;}
.button-box .btn-answer {background-size:30px;}
.button-box .btn-wrong {background-size:30px;}
.button-box.button-mtm {margin-top:12px !important;}
}

/* timer-box */
.timer-box time {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; font-size:18px; font-weight:#4a4a4a; font-weight:600;}
.timer-box time:before {display:inline-block; content:""; margin:0 4px 0 0; width:24px; height:24px; background:url('../images/icon_timer.png') no-repeat center / cover;}
.timer-box .timer {margin:8px 0 0; height:18px; background:#d9d9d9; border-radius:50px; position:relative; overflow:hidden;}
.timer-box .timer > div {position:absolute; left:0; top:0; height:100%; border-radius:50px; background:#89D72D; transition:all ease 0.5s;}
.timer-box .timer.hurry > div {background:#FF0000; animation-name:hurry; animation-duration:1s; animation-fill-mode:forwards; animation-iteration-count:infinite;}
@media (max-width:991px){
.timer-box time {font-size:16px;}
.timer-box time:before {width:20px; height:20px;}
.timer-box .timer {height:12px;}
}
@keyframes hurry {
    0% {opacity:0.1;}
    10% {opacity:0.2;}
    20% {opacity:0.4;}
    30% {opacity:0.6;}
    40% {opacity:0.8;}
    50% {opacity:1;}
    60% {opacity:0.8;}
    70% {opacity:0.6;}
    80% {opacity:0.4;}
    90% {opacity:0.2;}
    100% {opacity:0.1;}
}

/* step-box */
.step-box ul {display:flex; flex-wrap:wrap; margin:0 -2.5px -5px;}
.step-box ul li {width:calc(12.5% - 5px); margin:0 2.5px 5px;}
.step-box ul li a {display:block;}
.step-box ul li a p {position:relative; width:32px; border-radius:4px; background:#8E9193; margin:0 auto;}
.step-box ul li a p:after {display:block; content:""; padding-bottom:100%;}
.step-box ul li a p b {font-size:16px; font-weight:800; color:#fff; position:absolute; left:0; top:0; width:100%; height:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.step-box ul li a time {display:block; text-align:center; margin:3px 0 0; font-size:14px; font-weight:500; color:#4a4a4a;}
.step-box ul li.answer a p {background:#FF0000;}
.step-box ul li.wrong a p {background:#3B77B9;}
.step-box ul li.dental a p {background:#FF7016;}
.step-box ul li.active a p {background:#89D72D;}
.step-box ul li.yellow a p {background:#FBD33C;}
.step-box ul li.purple a p {background:#C53CFB;}
.step-box.many ul li {width:calc(4% - 5px);}
@media (max-width:991px){
.step-box ul li a p {width:100%; max-width:40px;}
.step-box ul li a p b {font-size:14px;}
.step-box ul li a time {font-size:12px;}
.step-box.many ul li {width:calc(10% - 5px);}
}
@media (max-width:767px){
.step-box.many ul li {width:calc(12.5% - 5px);}
}
@media (max-width:320px){
.step-box ul li a time {font-size:10px;}
}

/* question-box */
.question-box ul li {margin:0 0 20px; position:relative;}
.question-box ul li:last-of-type {margin:0;}
.question-box ul li input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.question-box ul li label {position:relative; display:flex; flex-wrap:wrap; cursor:pointer;}
.question-box ul li label em {letter-spacing:0; position:relative; top:2px; width:22px; height:22px; font-size:16px; color:#4a4a4a; border:1px solid #4a4a4a; background:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50%;}
.question-box ul li label p {flex:1; min-width:0; font-size:18px; line-height:1.4; color:#4a4a4a; padding:0 0 0 10px; word-break:keep-all;}
.question-box ul li input:checked ~ label em {background:#4a4a4a; color:#fff;}
.question-box ul li input:checked ~ label p {font-weight:600;}
.question-box ul li.answer label em {background:#FF0000; color:#fff;}
.question-box ul li.wrong label em {background:#3B77B9; color:#fff;}
@media (max-width:991px){
.question-box ul li {margin:0 0 12px;}
.question-box ul li label em {width:18px; height:18px; font-size:14px;}
.question-box ul li label p {font-size:15px; padding:0 0 0 5px;}
}

/* analysis-box */
.analysis-box .sound {width:40px; height:40px; margin:0 10px 0 0; position:relative; top:5px; font-size:0; background:url('../images/icon_sound.svg') no-repeat center / cover;}
.analysis-box .anal-head {border-radius:12px; padding:15px; border:1px solid #d9d9d9; margin:0 0 12px; flex:1; min-width:0;}
.analysis-box .anal-head p {font-size:16px; font-weight:600; line-height:1.5; color:#4a4a4a;}
.analysis-box .anal-body textarea {padding:15px; font-size:16px; font-weight:600; line-height:1.5; color:#4a4a4a; display:block; width:100%; height:80px; border-radius:12px; border:1px solid #d9d9d9; background:rgba(217, 217, 217, 0.2);}
.analysis-box .anal-foot {margin:25px 0 0;}
.analysis-box .anal-foot ul {display:flex; flex-wrap:wrap;}
.analysis-box .anal-foot ul li {flex:1; min-width:0; margin:0 20px 0 0;}
.analysis-box .anal-foot ul li:last-of-type {margin:0;}
.analysis-box .anal-foot ul li .content {border:1px solid #d9d9d9; border-radius:12px; padding:15px;}
.analysis-box .anal-foot ul li .content .content-inner {height:190px; padding:0 10px 0 0; overflow-y:auto;}
.analysis-box .anal-foot ul li .content .content-inner::-webkit-scrollbar {width:4px; border-radius:5px; background:#eee;}
.analysis-box .anal-foot ul li .content .content-inner::-webkit-scrollbar-thumb {background:#d9d9d9; border-radius:5px;}
.analysis-box .anal-foot ul li .content .content-inner p {font-size:16px; font-weight:600; color:#4a4a4a; line-height:1.4;}
.analysis-box .anal-foot ul li .content .content-inner.lg {height:195px;}
.analysis-box .anal-foot ul li .content .content-inner.xl {height:400px;}
.analysis-box .anal-foot ul li .button {margin:20px 0 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;}
.analysis-box .anal-foot ul li .button p {font-size:16px; font-weight:500; color:#7a7a7a; line-height:1.5; word-break:keep-all; flex:1; min-width:0; padding:0 15px 0 0;}
@media (max-width:991px){
.analysis-box .sound {width:30px; height:30px;}
.analysis-box .anal-head {border-radius:5px;}
.analysis-box .anal-head p {font-size:15px;}
.analysis-box .anal-body textarea {font-size:15px; border-radius:5px;}
.analysis-box .anal-foot ul li {flex:none; width:100%; margin:0 0 32px;}
.analysis-box .anal-foot ul li .content {border-radius:5px;}
.analysis-box .anal-foot ul li .content .content-inner {height:150px;}
.analysis-box .anal-foot ul li .content .content-inner p {font-size:15px;}
.analysis-box .anal-foot ul li .content .content-inner.xl {height:200px;}
.analysis-box .anal-foot ul li .button {margin:10px 0 0;}
.analysis-box .anal-foot ul li .button p {font-size:15px;}
}

/* blank-box */
.blank-box {margin:24px 0 0;}
.blank-box .blank-head {margin:0 0 12px;}
.blank-box .blank-head p {font-size:16px; line-height:1.5; color:#7a7a7a; word-break:keep-all;}
.blank-box .blank-head p b {font-size:16px; line-height:1.5; color:#7a7a7; font-weight:600;}
.blank-box .blank-body {border:1px solid #D9D9D9; background:rgba(217, 217, 217, 0.2); padding:24px 15px;}
.blank-box .blank-body p {margin:0 0 24px; font-size:16px; color:#4a4a4a; line-height:1.5;}
.blank-box .blank-body p:last-of-type {margin:0;}
.blank-box .blank-body p b {font-size:16px; color:#4a4a4a; line-height:1.5; font-weight:600;}
.blank-box .blank-body p span {text-align:center; margin:0 5px; display:inline-block; position:relative; top:-2px;}
.blank-box .blank-body p span input {background:#fff; border:1px solid #d9d9d9; height:28px; text-align:center; border-radius:5px; font-size:16px; font-weight:600; color:#4a4a4a;}
.blank-box .blank-body p span b {width:100%; margin:3px 0 0; display:inline-block; text-align:center; font-size:16px; font-weight:600; color:#ff0000;}
.blank-box .blank-body p:last-of-type {margin:0;}
.blank-box .blank-body div p {font-size:32px; font-weight:600; color:#4a4a4a;}
.blank-box .blank-body div b {font-size:25px; color:#f00; text-align:center; font-weight:600; width:100%; display:block; border-top:1px solid #f00;}
@media (max-width:991px){
.blank-box .blank-head p {font-size:15px;}
.blank-box .blank-head p b {font-size:15px;}
.blank-box .blank-body p {font-size:15px;}
.blank-box .blank-body p span {top:0;}
.blank-box .blank-body p span input {height:25px; font-size:13px;}
.blank-box .blank-body p span b {font-size:13px;}
.blank-box .blank-body div p {font-size:17px;}
.blank-box .blank-body div b {font-size:15px;}
}

/* table-box */
.table-box {overflow-x:auto; white-space:nowrap;}
.table-box table {table-layout:fixed; border:1px solid #d9d9d9; border-radius:12px;}
.table-box table tr td {border:1px solid #d9d9d9; border-width:0 1px 1px 0; font-size:16px; font-weight:600; color:#4a4a4a; padding:24px 5px;}
.table-box table tr td.fw6 {color:#111;}
.table-box table tr td:first-of-type {width:90px;}
.table-box table tr td:last-of-type {border-right:0;}
.table-box table tr td.result {font-size:30px;}
.table-box table tr td.result.answer {color:#3B77B9;}
.table-box table tr td.result.wrong {color:#FF2020;}
.table-box table tr td.native {color:#3B77B9; font-weight:700 !important;}
.table-box table tr td.excellent {color:#89D72D; font-weight:700 !important;}
.table-box table tr td.good {color:#FB8C3C; font-weight:700 !important;}
.table-box table tr td.cheerup {color:#FF0000; font-weight:700 !important;}
.table-box table tr:last-of-type td {border-bottom:0;}
@media (max-width:991px){
.table-box {margin:0 -15px;}
.table-box table {table-layout:auto; margin:0 15px; width:calc(100% - 30px); border-radius:5px;}
.table-box table tr td {font-size:13px; padding:15px 5px;}
.table-box table tr td:first-of-type {width:auto;}
.table-box table tr td.result {font-size:16px;}
}

/* text-box */
.text-box p {font-size:18px; line-height:1.5; color:#4a4a4a; word-break:keep-all; margin:0 0 5px;}
.text-box p:last-of-type {margin:0;}
@media (max-width:991px){
.text-box p {font-size:14px; margin:0 0 3px;}
}

/* unit-box */
.unit-box {font-size:16px; font-weight:500; line-height:1.4; color:#4a4a4a;}
.unit-box em {font-size:16px; font-weight:500; line-height:1.4; color:#4a4a4a;}

/* textarea-box */
.textarea-box textarea {display:block; width:100%; height:200px; border-radius:12px; padding:14px; font-size:16px; line-height:1.4; border:1px solid #d9d9d9;}
@media (max-width:991px){
.textarea-box textarea {border-radius:5px; font-size:15px;}
}

/* check-box */
.check-box {position:relative;}
.check-box input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.check-box label {display:flex; flex-wrap:wrap; align-items:center; font-size:16px; font-weight:600; color:#4a4a4a;}
.check-box label:before {display:inline-block; content:""; margin:0 4px 0 0; width:24px; height:24px; background:url('../images/icon_check.png') no-repeat center / cover;}
.check-box input:checked ~ label:before {background-image:url('../images/icon_check_on.png');}
.check-group-box {display:flex; flex-wrap:wrap; gap:10px 20px;}
@media (max-width:991px){
.check-box label {font-size:15px;}
.check-box label:before {width:20px; height:20px;}
.check-group-box {gap:10px;}
}

/* radio-box */
.radio-box {position:relative;}
.radio-box input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.radio-box label {display:flex; flex-wrap:wrap; align-items:center; font-size:16px; font-weight:600; color:#4a4a4a;}
.radio-box label:before {display:inline-block; content:""; margin:0 4px 0 0; width:24px; height:24px; background:url('../images/icon_radio.png') no-repeat center / cover;}
.radio-box input:checked ~ label:before {background-image:url('../images/icon_radio_on.png');}
.radio-group-box {display:flex; flex-wrap:wrap; gap:10px 20px;}
@media (max-width:991px){
.radio-box label {font-size:15px;}
.radio-box label:before {width:20px; height:20px;}
.radio-group-box {gap:10px;}
}

/* toggle-box */
.toggle-box ul li {margin:0 0 18px; display:flex; flex-wrap:wrap; align-items:flex-start;}
.toggle-box ul li:last-of-type {margin:0;}
.toggle-box ul li .sound {width:40px; height:40px; margin:0 10px 0 0; position:relative; top:5px; font-size:0; background:url('../images/icon_sound.svg') no-repeat center / cover;}
.toggle-box ul li a {flex:1; min-width:0; display:flex; flex-wrap:wrap; align-items:center; border-radius:12px; border:1px solid #d9d9d9; background:#fff; overflow:hidden;}
.toggle-box ul li a strong {display:flex; flex-wrap:wrap; align-items:center; width:100%; padding:14px; font-size:16px; font-weight:600; color:#4a4a4a; line-height:1.4;}
.toggle-box ul li a p {width:100%; display:none; padding:14px; background:#5CA901; font-size:16px; font-weight:600; color:#fff; line-height:1.4;}
@media (max-width:991px){
.toggle-box ul li {margin:0 0 12px;}
.toggle-box ul li .sound {width:30px; height:30px;}
.toggle-box ul li a {border-radius:5px;}
.toggle-box ul li a strong {font-size:15px; padding:10px;}
.toggle-box ul li a p {font-size:15px; padding:10px;}
}

/* bottom-box */
.bottom-box {position:absolute; left:0; bottom:0; width:100%; padding:24px 15px;}
@media (max-width:991px){
.bottom-box {position:static; padding:0;}
}

/* popup-box */
.popup-box {pointer-events:none; opacity:0; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:9999; transition:all ease 0.5s;}
.popup-box .box {pointer-events:none; opacity:0; transition:all ease 0.5s; padding:12px 12px 42px; width:calc(100% - 30px); max-width:464px; position:absolute; left:50%; top:45%; transform:translate(-50%,-50%); background:#fff; border-radius:12px; max-height:80%; overflow-x:hidden; overflow-y:auto;}
.popup-box .box.md {max-width:565px;}
.popup-box .box .popup-head {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; margin:6px 0 0;}
.popup-box .box .popup-head .close {display:block; font-size:0; width:24px; height:24px; background:url('../images/icon_close.png') no-repeat center / cover;}
.popup-box .box .popup-body .popup-text p {font-size:20px; font-weight:500; line-height:1.4; word-break:keep-all; color:#4a4a4a; text-align:center;}
.popup-box .box .popup-body img.teacher {display:block; margin:15px auto 0; width:194px;}
.popup-box.fixed {pointer-events:inherit; opacity:1;}
.popup-box.fixed .box.active {pointer-events:inherit; opacity:1; top:50%;}
@media (max-width:991px){
.popup-box .box .popup-body .popup-text p {font-size:16px;}
}

/* print-box */
.print-box {max-width:1200px; background:#fff; margin:0 auto; padding:24px;}
.print-box .print-head {margin:0 0 42px;}
.print-box .print-head div {display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
.print-box .print-head div a {height:40px; width:100px; border-radius:8px; border:1px solid #111; font-size:16px; font-weight:bold; color:#111; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.print-box .print-head div a:before {display:inline-block; content:""; width:24px; height:24px; margin:0 4px 0 0; background:url('../images/icon_print.png') no-repeat center / cover;}
.print-box .print-head div .inner {display:flex; flex-wrap:wrap; align-items:center; height:40px; border-radius:8px; border:1px solid #111; margin:0 5px 0 0; padding:0 10px 0 20px; position:relative;}
.print-box .print-head div .inner:after {display:block; content:""; width:24px; height:24px; margin:0 0 0 5px; background:url('../images/icon_sort.png') no-repeat center / cover;}
.print-box .print-head div .inner b {font-size:16px; font-weight:bold; color:#111;}
.print-box .print-head div .inner button {position:absolute; right:10px; top:0; width:24px; height:50%;}
.print-box .print-head div .inner button.down {top:auto; bottom:0;}
.print-box .print-head h2 {font-size:40px; font-weight:bold; text-align:center;}
.print-box .print-body .print-info {background:#F8F8F8; padding:24px;}
.print-box .print-body .print-info ul {display:flex; flex-wrap:wrap; margin:0 0 -8px;}
.print-box .print-body .print-info ul li {display:flex; flex-wrap:wrap; margin:0 0 8px;}
.print-box .print-body .print-info ul li:nth-of-type(odd) {width:75%;}
.print-box .print-body .print-info ul li:nth-of-type(even) {width:25%;}
.print-box .print-body .print-info ul li b {width:120px; font-size:22px; font-weight:500; line-height:1.4; display:flex; flex-wrap:wrap; align-items:center;}
.print-box .print-body .print-info ul li b:before {display:inline-block; content:""; width:5px; height:5px; background:#111; border-radius:50%; margin:0 10px 0 0;}
.print-box .print-body .print-info ul li p {flex:1; min-width:0; font-size:22px; font-weight:500; line-height:1.4;}
.print-box .print-body .print-question {margin:34px 0 0;}
.print-box .print-body .print-question > ul > li {border-bottom:1px solid #000; padding:0 60px 34px; margin:0 0 34px;}
.print-box .print-body .print-question > ul > li:last-of-type {border:0; padding:0 60px; margin:0;}
.print-box .print-body .print-question > ul > li h3 {position:relative; font-size:25px; font-weight:600; line-height:1.3; margin:0 0 24px;}
.print-box .print-body .print-question > ul > li h3:before {position:absolute; left:-45px; top:-18px; width:104px; height:75px; content:""; background-size:cover; background-position:center;}
.print-box .print-body .print-question > ul > li h3.answer:before {height:81px; background-image:url('../images/icon_check_answer.png');}
.print-box .print-body .print-question > ul > li h3.wrong:before {background-image:url('../images/icon_check_wrong.png');}
.print-box .print-body .print-question > ul > li .question-text {margin:0 0 24px; display:flex; flex-wrap:wrap;}
.print-box .print-body .print-question > ul > li .question-text:last-of-type {margin:0;}
.print-box .print-body .print-question > ul > li .question-text span {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:40px; width:90px; font-size:18px; font-weight:500; color:#fff; margin:-6px 0 0;}
.print-box .print-body .print-question > ul > li .question-text span.gray {background:#4A4A4A;}
.print-box .print-body .print-question > ul > li .question-text span.green {background:#5CA901;}
.print-box .print-body .print-question > ul > li .question-text span.blue {background:#3B77B9;}
.print-box .print-body .print-question > ul > li .question-text p {flex:1; min-width:0; padding:0 0 0 15px; font-size:22px; font-weight:500; line-height:1.3;}
.print-box .print-body .print-question > ul > li .question-detail {padding:24px; background:#F8F8F8; border:1px solid #d9d9d9; margin:0 0 24px;}
.print-box .print-body .print-question > ul > li .question-detail dl {margin:0 0 32px;}
.print-box .print-body .print-question > ul > li .question-detail dl:last-of-type {margin:0;}
.print-box .print-body .print-question > ul > li .question-detail dl dt {font-size:22px; font-weight:500; line-height:1.5;}
.print-box .print-body .print-question > ul > li .question-detail dl dd {font-size:22px; font-weight:500; line-height:1.5; padding:0 0 0 15px;}

/* print-text-box */
.print-text-box {border-radius:12px; border:1px solid #d9d9d9; padding:15px 20px; margin:0 0 20px;}
.print-text-box p {font-size:18px; font-weight:600; word-break:keep-all;}

/* print-list-box */
.print-list-box > ul.list01 {display:flex; flex-wrap:wrap; margin:0 0 -20px;}
.print-list-box > ul.list01 > li {width:calc(50% - 20px); margin:0 10px 20px; display:flex; flex-wrap:wrap;}
.print-list-box > ul.list01 > li b {width:24px; height:24px; border:1px solid #4a4a4a; font-size:18px; color:#4a4a4a; margin:0 10px 0 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50%;}
.print-list-box > ul.list01 > li p {flex:1; min-width:0; font-size:18px; word-break:keep-all; color:#4a4a4a;}
.print-list-box > ul.list01 > li.answer b {background:#3B77B9; color:#fff; border-color:#3B77B9;}
.print-list-box > ul.list01 > li.wrong b {background:#FF0000; color:#fff; border-color:#FF0000;}

/* print-list-box */
.print-list-box > ul.list02 > li {margin:0 0 10px; overflow-x:auto; overflow-y:hidden; white-space:nowrap;}
.print-list-box > ul.list02 > li:last-of-type {margin:0;}
.print-list-box > ul.list02 > li table {border-collapse:collapse;}
.print-list-box > ul.list02 > li table tr th {border:1px solid #d9d9d9; font-size:18px; font-weight:500; padding:12px; background:rgba(218,218,218,0.19);}
.print-list-box > ul.list02 > li table tr td {border:1px solid #d9d9d9; font-size:18px; padding:12px;}
.print-list-box > ul.list02 > li table tr td:last-of-type {text-align:left;}
.print-list-box > ul.list02 > li table tr td b {font-size:18px; font-weight:600; text-decoration:underline;}
.print-list-box > ul.list02 > li table tr td b.wrong {color:#FF0000;}
.print-list-box > ul.list02 > li table tr td b.answer {color:#0059FF;}
.print-list-box > ul.list02 > li table tr td strong {display:inline-block; border-bottom:2px solid #000; min-height:20px;}
.print-list-box > ul.list02 > li table tr td dl {display:flex; flex-wrap:wrap; gap:5px;}
.print-list-box > ul.list02 > li table tr td dl dd {display:flex; flex-wrap:wrap; align-items:center; border:1px solid #d9d9d9; border-radius:4px; padding:0 8px; font-size:18px;}
.print-list-box > ul.list02 > li table tr td.answer {position:relative;}
.print-list-box > ul.list02 > li table tr td.answer:before {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:65px; height:65px; content:""; background:url('../images/icon_check_answer.png') no-repeat center / 65px auto;}
.print-list-box > ul.list02 > li table tr td.wrong {position:relative;}
.print-list-box > ul.list02 > li table tr td.wrong:before {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:65px; height:65px; content:""; background:url('../images/icon_check_wrong.png') no-repeat center / 65px auto;}

/* print-sentence-box */
.print-sentence-box {border-radius:12px; border:1px solid #d9d9d9; padding:15px 20px; display:flex; flex-wrap:wrap;}
.print-sentence-box p {font-size:18px; font-weight:600;}
.print-sentence-box p b {width:100%; display:block; text-decoration:none; font-size:18px; font-weight:600; color:#FF0000; text-align:center; margin:5px 0 0;}
.print-sentence-box p strong {font-size:18px; font-weight:600; margin:0 10px; border-bottom:2px solid #333; display:block; min-height:25px; text-align:center;}
.print-sentence-box ul {width:100%;}
.print-sentence-box ul li {display:flex; flex-wrap:wrap; margin:0 0 20px;}
.print-sentence-box ul li:last-of-type {margin:0;}

/* drag-box */
/*
.drag-box ul {background:rgba(217, 217, 217, 0.2); border:1px solid #d9d9d9; border-radius:12px; padding:15px 15px 42px; width:calc(100% + 4px); margin:0 -4px -8px; display:flex; flex-wrap:wrap;}
.drag-box ul li {cursor:pointer; margin:0 4px 8px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; background:#fff; border-radius:6px; border:1px solid #d9d9d9; height:24px; padding:0 10px; font-size:16px; font-weight:600; color:#4a4a4a;}
.drag-box ul:not(#sortable2, .answer) li:hover {background:#4B90DC; border-color:#4B90DC; color:#fff;}
.drag-box ul#sortable2 {display:inline-flex; width:calc(100% + 4px);}
.drag-box ul#sortable2 li {display:inline-block; border-radius:0; background:none; height:auto; padding:0; border:0; line-height:1.3; margin:0 4px;}
.drag-box ul#sortable2 li:hover {color:#2F5597; text-decoration:underline;}

.drag-box ul.answer {display:inline-flex; width:calc(100% + 4px);}
.drag-box ul.answer li {cursor:inherit; display:inline; border-radius:0; background:none; height:auto; padding:0; border:0; line-height:1.3; margin:0 4px;}
*/

.drag-box ul {background:rgba(217, 217, 217, 0.2); border:1px solid #d9d9d9; border-radius:12px; padding:15px 15px 32px; width:100%;}
.drag-box ul:after {display:block; content:""; clear:both;}
.drag-box ul li {float:left; background:#fff; border-radius:6px; border:1px solid #d9d9d9; padding:5px 10px; margin:0 2px 4px; font-size:16px; font-weight:600; color:#4a4a4a;}
.drag-box ul li b.wrong {font-size:16px; font-weight:600; color:#f00; text-decoration:underline;}
.drag-box ul#sortable1 li:hover {background:#2F5597; border-color:#2F5597; color:#fff;}
.drag-box ul#sortable2 li {background:none; border-radius:0; border:0; padding:5px;}
.drag-box ul#sortable2 li:hover {color:#2F5597; text-decoration:underline;}
.drag-box ul.answer li {background:none; border-radius:0; border:0; padding:0 2px;}

/* paging-box */
.paging-box {margin:50px 0 0;}
.paging-box ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.paging-box ul li {margin:0 8px 0 0;}
.paging-box ul li:last-of-type {margin:0;}
.paging-box ul li a {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50%; width:50px; height:50px; background:#5CA901; font-size:20px; font-weight:bold; color:#fff;}
.paging-box ul li.active a {background:#2F5597;}
@media (max-width:991px){
.paging-box {margin:30px 0 0;}
.paging-box ul li {margin:0 5px 0 0;}
.paging-box ul li a {width:35px; height:35px; font-size:14px;}
}

/* sound-check-list-box */
.sound-check-list-box > ul > li {margin:0 0 10px; display:flex; flex-wrap:wrap;}
.sound-check-list-box > ul > li:last-of-type {margin:0;}
.sound-check-list-box > ul > li .list-left {width:calc(40% - 10px); margin:0 10px 0 0; padding:10px; border:1px solid #d9d9d9; border-radius:10px; display:flex; flex-wrap:wrap; align-items:center;}
.sound-check-list-box > ul > li .list-left p {flex:1; min-width:0; font-size:18px; line-height:1.3;}
.sound-check-list-box > ul > li .list-left:before {display:inline-block; content:""; width:21px; height:21px; margin:0 8px 0 0; background:url('../images/icon_sound_check.png') no-repeat center / cover;}
.sound-check-list-box > ul > li .list-right {flex:1; min-width:0; padding:10px; border:1px solid #d9d9d9; border-radius:10px;}
.sound-check-list-box > ul > li .list-right p {font-size:18px; line-height:1.3;}
.sound-check-list-box > ul > li.on .list-left:before {background-image:url('../images/icon_sound_check_on.png');}
.sound-check-list-box > ul > li.active .list-left {background:rgba(0,152,174,0.1);}
.sound-check-list-box > ul > li.active .list-left:before {background-image:url('../images/icon_sound_check_on.png');}
.sound-check-list-box > ul > li.active .list-right {background:rgba(0,152,174,0.1);}
@media (max-width:991px){
.sound-check-list-box > ul > li {border-radius:10px; padding:10px; border:1px solid #d9d9d9;}
.sound-check-list-box > ul > li .list-left {width:100%; padding:0; border:0; margin:0;}
.sound-check-list-box > ul > li .list-left p {font-size:15px; font-weight:500;}
.sound-check-list-box > ul > li .list-left:before {width:16px; height:16px; margin:0 4px 0 0;}
.sound-check-list-box > ul > li .list-right {flex:none; width:100%; padding:10px 0 0; margin:10px 0 0; border:0; border-radius:0; border-top:1px solid #d9d9d9;}
.sound-check-list-box > ul > li .list-right p {font-size:14px;}
.sound-check-list-box > ul > li.active {background:rgba(0,152,174,0.1);}
.sound-check-list-box > ul > li.active .list-left {background:none;}
.sound-check-list-box > ul > li.active .list-right {background:none;}
}

/* sound-image-box */
.sound-image-box {position:relative; max-width:460px; margin:0 auto;}
.sound-image-box:before {display:block; content:""; padding-bottom:100%;}
.sound-image-box img {z-index:2; position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover;}
.sound-image-box > .inner {z-index:4; pointer-events:none; opacity:0; position:absolute; left:0; top:0; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center; width:100%; height:100%;}
.sound-image-box > .inner * {width:100%; margin:0 0 20px; text-align:center;}
.sound-image-box > .inner *:last-child {margin:0;}
.sound-image-box > .inner p {font-size:42px; font-weight:600; color:#4a4a4a;}
.sound-image-box.active:after {position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(255,255,255,0.8); content:""; z-index:3;}
.sound-image-box.active > .inner {pointer-events:inherit; opacity:1;}
@media (max-width:991px){
.sound-image-box {width:85%;}
.sound-image-box > .inner * {margin:0 0 10px;}
.sound-image-box > .inner p {font-size:20px;}
}

/* word-box */
.word-box {margin:24px 0;}
.word-box > * {border-radius:12px; border:1px solid #d9d9d9; padding:14px; font-size:32px; font-weight:600; color:#4a4a4a; text-align:center; margin:0 0 10px; display:block;}
.word-box > *:last-of-type {margin:0;}
.word-box > *.gray {background:rgba(217,217,217,0.1);}
.word-box > * strong {border-bottom:2px solid #333; min-height:50px; display:inline-block;}
.word-box small {width:100%; display:block; text-align:center; margin:10px 0 0; font-size:30px; font-weight:500;}
.word-box > ul {margin:10px 0 0 !important; border:1px solid #d9d9d9; padding:14px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.word-box > ul li {font-size:32px; font-weight:600; color:#4a4a4a;}
.word-box > ul li.under {border-bottom:1px solid #000; min-width:33px; min-height:41px;}
.word-box > ul li.under.active {position:relative; top:1px; cursor:pointer;}
.word-box > ul.square {gap:5px;}
.word-box > ul.square li {cursor:pointer; border:1px solid #d9d9d9; border-radius:4px; width:60px; height:60px; background:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.word-box > ul.square li.under {min-height:0; min-height:0;}
.word-box > ul.square li.under.active {position:static;}
.word-box > ul.square li:hover {border-color:#89D72D; background:rgba(137,215,45,0.1);}
.word-box > ul.square li.blank {border:0; width:auto; padding:0 10px;}
.word-box > ul.square li.answer {border-color:#3B77B9; background:rgba(59,119,185,0.1);}
.word-box > ul.square li.wrong {border-color:#FF0000; background:rgba(255,0,0,0.1);}
@media (max-width:991px){
.word-box > ul.square li {width:35px; height:35px;}
.word-box > ul.square li.blank {padding:0 5px;}
.word-box small {font-size:17px;}
}

/*
.word-box > ul li.under.active {border:0; min-width:0; min-height:0;}
*/
@media (max-width:991px){
.word-box {margin:15px 0;}
.word-box > * {font-size:17px; border-radius:10px; padding:10px; margin:0 0 5px;}
.word-box > * strong {font-size:17px; min-height:25px;}
.word-box > ul li {font-size:17px;}
.word-box > ul li.under {min-width:20px; min-height:22px;}
}

/* word-input-box — 철자 입력 사각형 (base.css * {border:0} 무력화) */
.word-input-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:5px; margin:10px 0 0 !important;}
.word-input-box input,
.word-input-box input[type="text"],
.word-input-box .word-input,
.word-input-box .word-hint {
	appearance:none;
	-webkit-appearance:none;
	display:inline-flex;
	align-items:center;
	justify-content:center;
	text-align:center;
	width:60px;
	height:60px;
	min-width:60px;
	min-height:60px;
	padding:0;
	margin:0;
	font-size:28px;
	font-weight:600;
	line-height:1;
	color:#4a4a4a;
	font-family:inherit;
	background:#fff;
	border:1px solid #d9d9d9 !important;
	border-radius:4px;
	box-sizing:border-box;
	vertical-align:middle;
}
.word-input-box .word-hint {
	background:rgba(59,119,185,0.12);
	border-color:#3B77B9 !important;
	color:#1f2937;
	cursor:default;
	user-select:none;
}
.word-input-box input:focus,
.word-input-box input[type="text"]:focus,
.word-input-box .word-input:focus {
	border-color:#89D72D !important;
	background:rgba(137,215,45,0.1);
	outline:0;
}
.word-input-box input::placeholder {
	color:#c8c8c8;
	opacity:1;
	font-size:22px;
}
.word-input-box .blank {padding:0 10px; width:auto; min-width:12px; height:auto; border:0 !important; background:transparent;}
.word-input-box .special-char {
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:60px;
	height:60px;
	min-width:60px;
	font-size:28px;
	font-weight:600;
	color:#4a4a4a;
	border:1px solid #d9d9d9;
	border-radius:4px;
	background:rgba(217,217,217,0.15);
	box-sizing:border-box;
}
@media (max-width:991px){
.word-input-box {gap:4px;}
.word-input-box input,
.word-input-box input[type="text"],
.word-input-box .word-input,
.word-input-box .word-hint,
.word-input-box .special-char {
	width:35px;
	height:35px;
	min-width:35px;
	min-height:35px;
	font-size:18px;
}
.word-input-box input::placeholder {font-size:14px;}
.word-input-box .blank {padding:0 5px;}
}

/* word-drag-box */
.word-drag-box ul {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px;}
.word-drag-box ul li {border:1px solid #d9d9d9; border-radius:4px; font-size:18px; font-weight:600; color:#4a4a4a; padding:10px 14px; background:#fff; cursor:pointer;}
.word-drag-box ul li:hover {border-color:#89D72D; background:rgba(137,215,45,0.1);}
@media (max-width:991px){
.word-drag-box ul {gap:5px;}
.word-drag-box ul li {font-size:15px; padding:7px 10px;}
}

/* word-text-input-box */
.word-text-input-box {display:flex; flex-wrap:wrap; align-items:center; margin:10px 0 0 !important;}
.word-text-input-box p {font-size:32px; font-weight:600; color:#4a4a4a;}
.word-text-input-box input {font-size:32px; font-weight:600; border-bottom:2px solid #4a4a4a; width:auto; margin:0 10px; text-align:center;}
@media (max-width:991px){
.word-text-input-box p {font-size:18px;}
.word-text-input-box input {font-size:18px;}
}

/* word-list-box */
.word-list-box ul {display:flex; flex-wrap:wrap; margin:0 -10px -20px;}
.word-list-box ul li {width:calc(50% - 20px); margin:0 10px 20px; border:1px solid #d9d9d9; border-radius:4px;}
.word-list-box ul li .link {padding:10px; display:block; font-size:18px; font-weight:600; color:#333;}
.word-list-box ul li:hover {border-color:#89D72D; background:rgba(137,215,45,0.1);}
.word-list-box ul li.answer {border-color:#3B77B9; background:rgba(59,119,185,0.1);}
.word-list-box ul li.wrong {border-color:#FF0000; background:rgba(255,0,0,0.1);}

/* timer-count-box */
.timer-count-box {width:240px; display:block; position:relative; background:url('../images/img_timer_count.png') no-repeat center / cover;}
.timer-count-box:after {display:block; content:""; padding-bottom:100%;}
.timer-count-box .timer {position:absolute; left:21%; top:25%; width:58%; height:59%; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; font-size:70px; font-weight:900; color:#3B77B9; letter-spacing:-2px;}
.timer-count-box.hurry {background-image:url('../images/img_timer_count_hurry.png');}
.timer-count-box.hurry .timer {color:#FF0000;}
@media (max-width:991px){
.timer-count-box {width:100px; margin:0 auto;}
.timer-count-box .timer {font-size:35px;}
}

/* write-box */
.write-box > ul {border:1px solid #D9D9D9; border-radius:12px;}
.write-box > ul > li {border-bottom:1px solid #d9d9d9; display:flex; flex-wrap:wrap;}
.write-box > ul > li:last-of-type {border:0;}
.write-box > ul > li > strong {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-right:1px solid #d9d9d9; width:120px; font-size:16px; font-weight:600; padding:10px 5px;}
.write-box > ul > li > div {flex:1; min-width:0; padding:20px;}
.write-box > ul > li > div input[type=text] {display:block; width:100%; height:50px; border:1px solid #d9d9d9; border-radius:10px; padding:10px; font-size:16px;}
.write-box > ul > li > div input[type=text].flex-1 {width:auto;}
.write-box > ul > li > div select {display:block; width:100%; height:50px; border:1px solid #d9d9d9; border-radius:10px; padding:0 30px 0 10px; font-size:16px; background:url('../images/icon_arrow_down.svg') no-repeat calc(100% - 10px) center / 20px;}
.write-box > ul > li > div .btn {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; height:50px; border-radius:10px; padding:0 30px; font-size:16px; font-weight:500; color:#fff; background:var(--color-active);}
.write-box > ul > li > div.flex {gap:10px;}
.write-box.no-border > ul {border:0; border-radius:0;}
.write-box.no-border > ul > li > strong {border:0;}
.write-box.no-border > ul > li > div {padding:10px;}
@media (max-width:991px){
.write-box > ul > li > strong {width:100%; border-right:0; border-bottom:1px solid #d9d9d9; font-size:15px; justify-content:flex-start; padding:10px 15px;}
.write-box > ul > li > div {padding:10px 15px;}
.write-box > ul > li > div input[type=text] {height:45px; font-size:14px;}
.write-box > ul > li > div select {height:45px; font-size:14px;}
.write-box > ul > li > div .btn {height:45px; font-size:14px; padding:0 20px;}
.write-box > ul > li > div.flex {gap:5px;}
.write-box.no-border > * {padding:0;}
.write-box.no-border > ul > li > strong {padding:0 0 10px; width:80px;}
.write-box.no-border > ul > li > div {padding:10px 0; flex:1; min-width:0;}
}

/* image-select-list-box */
.image-select-list-box ul {display:flex; flex-wrap:wrap;}
.image-select-list-box ul li {flex:1; min-width:0; margin:0 10px 0 0 !important; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center;}
.image-select-list-box ul li:last-of-type {margin:0 !important;}
.image-select-list-box ul li b {width:24px; height:24px; margin:0 auto 5px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50px; border:1px solid #4a4a4a; color:#4a4a4a; font-size:16px;}
.image-select-list-box ul li img {width:100%; border:1px solid #d9d9d9;}
@media (max-width:991px){
.image-select-list-box {overflow:hidden;}
.image-select-list-box ul {margin:0 -5px -10px; overflow:hidden !important;}
.image-select-list-box ul li {width:calc(25% - 10px); margin:0 5px 10px !important;}
.image-select-list-box ul li:last-of-type {margin:0 5px 10px !important;}
.image-select-list-box ul li b {width:18px; height:18px; font-size:14px;}
}

/* image-select-number-box */
.image-select-number-box img {display:block; max-width:100%;}
.image-select-number-box ul {margin:15px 0 0;}
.image-select-number-box ul li {margin:0 0 15px !important; display:flex; flex-wrap:wrap; align-items:center;}
.image-select-number-box ul li:last-of-type {margin:0 !important;}
.image-select-number-box ul li b {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border:1px solid #4a4a4a; color:#4a4a4a; font-size:16px; margin:0 10px 0 0; border-radius:50px; width:24px; height:24px;}
.image-select-number-box ul li p {flex:1; min-width:0; font-size:16px;}
@media (max-width:991px){
.image-select-number-box ul {margin:10px 0 0;}
.image-select-number-box ul li {margin:0 0 10px !important;}
.image-select-number-box ul li b {width:18px; height:18px; font-size:14px; margin:0 5px 0 0;}
.image-select-number-box ul li p {font-size:14px;}
}

/* playbar-box */
.playbar-box {display:flex; flex-wrap:wrap; align-items:center; border:1px solid #d9d9d9; border-radius:50px; padding:10px; margin:0 0 10px;}
.playbar-box time {font-size:18px; font-weight:600; color:#4a4a4a;}
.playbar-box .timer-box {flex:1; min-width:0; margin:0 10px;}
.playbar-box .timer-box .timer {margin:0;}
.playbar-box .replay {width:24px; height:24px; font-size:0; background:url('../images/icon_replay.png') no-repeat center / cover;}
@media (max-width:991px){
.playbar-box .replay {width:20px; height:20px;}
.playbar-box time {font-size:14px;}
}

/* speaking-box */
.speaking-box {display:flex; flex-wrap:wrap; align-items:flex-start;}
.speaking-box .list-left {flex:1; min-width:0; margin:0 20px 0 0;}
.speaking-box .list-left .inner {border:1px solid #d9d9d9; border-radius:12px; padding:15px; height:335px; overflow-y:auto;}
.speaking-box .list-left .inner > ul > li {margin:0 0 30px;}
.speaking-box .list-left .inner > ul > li:last-of-type {margin:0;}
.speaking-box .list-left .inner > ul > li p {font-size:18px; color:#4a4a4a;}
.speaking-box .list-left .inner > ul > li p.active {color:#0059FF; font-weight:600;}
.speaking-box .list-right {width:410px; border:1px solid #d9d9d9; border-radius:12px; padding:15px;}
.speaking-box .list-right .right-title {display:block; font-size:16px; font-weight:bold; color:#4a4a4a;}
.speaking-box .list-right .right-text {font-size:14px; color:#4a4a4a; line-height:1.3;}
.speaking-box .list-right .right-info {border-top:1px solid #d9d9d9; padding:12px 0 0; margin:12px 0 0;}
.speaking-box .list-right .right-info li {margin:0 0 5px; display:flex; flex-wrap:wrap; justify-content:space-between;}
.speaking-box .list-right .right-info li:last-of-type {margin:0;}
.speaking-box .list-right .right-info li b {font-size:16px; font-weight:500; color:#4a4a4a;}
.speaking-box .list-right .right-info li b:last-of-type {font-weight:600;}
.speaking-box .list-right .right-info li b.native {color:#3B77B9;}
.speaking-box .list-right .right-info li b.excellent {color:#89D72D;}
.speaking-box .list-right .right-info li b.good {color:#FB8C3C;}
.speaking-box .list-right .right-info li b.cheerup {color:#FF0000;}
.speaking-box .list-right .right-graph {margin:15px 0 0; border:1px solid #d9d9d9; border-radius:12px; padding:10px; background:rgba(217,217,217,0.2); text-align:center;}
@media (max-width:991px){
.speaking-box .list-left {flex:none; width:100%; margin:0 0 30px;}
.speaking-box .list-left .inner {height:200px;}
.speaking-box .list-left .inner > ul > li {margin:0 0 15px;}
.speaking-box .list-left .inner > ul > li p {font-size:15px;}
.speaking-box .list-right {width:100%;}
}

/* speaking-button-box */
.speaking-button-box {display:flex; flex-wrap:wrap; align-items:center;}
.speaking-button-box > * {width:34px; height:34px; font-size:0; background-size:cover; background-position:center; margin:0 8px 0 0;}
.speaking-button-box > *:last-of-type {margin:0;}
.speaking-button-box > *.talk {background-image:url('../images/icon_mike.png');}
.speaking-button-box > *.listen {background-image:url('../images/icon_listen.png');}
.speaking-button-box > *.re {background-image:url('../images/icon_re.svg');}
.speaking-button-box > *.talk.active {background-image:url('../images/icon_mike_on.png'); animation-name:hurry; animation-duration:1s; animation-fill-mode:forwards; animation-iteration-count:infinite;}
.speaking-button-box > *.listen.active {background-image:url('../images/icon_listen_on.png');}
.speaking-button-box.large {justify-content:center;}
.speaking-button-box.large > * {width:50px; height:50px;}

/* video-box */
.video-box {position:relative; overflow:hidden; max-width:1024px; margin:0 auto;}
.video-box:after {display:block; content:""; padding-bottom:56.5%;}
.video-box video {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:contain;}

/* start-text-box */
.start-text-box {width:calc(100% - 30px) !important; max-width:950px; margin:20px auto 0 !important; background:rgba(255,255,255,0.8); border:1px solid #d9d9d9; border-radius:12px; padding:24px;}
.start-text-box p {font-size:18px; color:#4a4a4a; text-align:left; word-break:keep-all; margin:0 0 15px;}
.start-text-box p:last-of-type {margin:0;}
@media (max-width:991px){
.start-text-box {border-radius:8px; padding:15px;}
.start-text-box p {font-size:14px;}
}

/* sound-play-box */
.sound-play-box {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; margin:50px 0;}
.sound-play-box button {height:75px; padding:0 42px; font-size:32px; font-weight:600; color:#fff; background:#3B77B9; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-radius:50px;}
.sound-play-box button:before {display:inline-block; content:""; width:50px; height:50px; margin:0 12px 0 0; background:url('../images/icon_sound_play.svg') no-repeat center / cover;}
.sound-play-box button.active {background:#FF0000;}
.sound-play-box button.active:before {background-image:url('../images/icon_sound_play_off.svg');}
@media (max-width:991px){
.sound-play-box button {height:50px; padding:0 30px; font-size:20px;}
.sound-play-box button:before {width:35px; height:35px; margin:0 8px 0 0;}
}

/* pattern-result-box */
.pattern-result-box .result-state {margin:0 0 15px;}
.pattern-result-box .result-state ul {display:flex; flex-wrap:wrap; align-items:center;}
.pattern-result-box .result-state ul li {display:flex; flex-wrap:wrap; align-items:center; margin:0 30px 0 0;}
.pattern-result-box .result-state ul li:last-of-type {margin:0;}
.pattern-result-box .result-state ul li p {font-size:20px; font-weight:600; color:#4a4a4a;}
.pattern-result-box .result-state ul li:before {display:inline-block; content:""; width:44px; height:24px; margin:0 10px 0 0; border-radius:50px;}
.pattern-result-box .result-state ul li.state01:before {background:#FF0000;}
.pattern-result-box .result-state ul li.state02:before {background:#DD00FF;}
.pattern-result-box .result-content {display:flex; flex-wrap:wrap;}
.pattern-result-box .result-content .list-left {flex:1; min-width:0; margin:0 20px 0 0; padding:24px; border:1px solid #d9d9d9; border-radius:12px;}
.pattern-result-box .result-content .list-left ul li {margin:0 0 25px; display:flex; flex-wrap:wrap;}
.pattern-result-box .result-content .list-left ul li > b {font-size:18px; font-weight:bold; color:#4a4a4a; margin:0 8px 0 0;}
.pattern-result-box .result-content .list-left ul li > div {flex:1; min-width:0;}
.pattern-result-box .result-content .list-left ul li > div p {font-size:18px; font-weight:bold; color:#4a4a4a; word-break:keep-all; margin:0 0 8px;}
.pattern-result-box .result-content .list-left ul li > div p:last-of-type {margin:0;}
.pattern-result-box .result-content .list-left ul li > div p.answer {color:#3B77B9;}
.pattern-result-box .result-content .list-left ul li > div p.answer b {font-size:18px; font-weight:bold;}
.pattern-result-box .result-content .list-left ul li > div p.answer b.state01 {color:#FF0000;}
.pattern-result-box .result-content .list-left ul li > div p.answer b.state02 {color:#DD00FF;}
.pattern-result-box .result-content .list-right {width:40%;}
.pattern-result-box .result-content .list-right .inner {margin:0 0 30px;}
.pattern-result-box .result-content .list-right .inner:last-of-type {margin:0;}
.pattern-result-box .result-content .list-right .inner h3 {display:flex; flex-wrap:wrap; align-items:center; margin:0 0 12px; font-size:20px; font-weight:600; color:#4a4a4a;}
.pattern-result-box .result-content .list-right .inner h3:before {display:inline-block; content:""; width:24px; height:24px; margin:0 8px 0 0; background:url('../images/icon_pattern_result_title.svg') no-repeat center / cover;}
@media (max-width:991px){
.pattern-result-box .result-state {margin:0 0 10px;}
.pattern-result-box .result-state ul li {margin:0 20px 0 0;}
.pattern-result-box .result-state ul li p {font-size:15px;}
.pattern-result-box .result-state ul li:before {width:30px; height:15px; margin:0 5px 0 0;}
.pattern-result-box .result-content .list-left {flex:1; min-width:0; width:100%; margin:0 0 15px; padding:15px; border-radius:8px;}
.pattern-result-box .result-content .list-left ul li {margin:0 0 15px;}
.pattern-result-box .result-content .list-left ul li > b {font-size;15px;}
.pattern-result-box .result-content .list-left ul li > div p {font-size:15px;}
.pattern-result-box .result-content .list-left ul li > div p.answer b {font-size:15px;}
.pattern-result-box .result-content .list-right {width:100%; display:flex; flex-wrap:wrap;}
.pattern-result-box .result-content .list-right .inner {flex:1; min-width:0; margin:0 15px 0 0;}
.pattern-result-box .result-content .list-right .inner:last-of-type {margin:0;}
.pattern-result-box .result-content .list-right .inner h3 {font-size:18px;}
.pattern-result-box .result-content .list-right .inner h3:before {width:20px; height:20px;}
}

/* chart-box */
.chart-box {width:210px; margin:0 auto; position:relative;}
.chart-box:after {display:block; content:""; padding-bottom:100%;}
.chart-box .pie-chart {position:absolute; left:0; top:0; display:block; width:100%; height:100%; border-radius:50%; transition:0.3s; margin:0 auto;}
.chart-box .pie-chart span.center {background:#fff; display:block; position:absolute; top:50%; left:50%; width:75%; height:75%; border-radius:50%; text-align:center; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; font-size:32px; font-weight:bold; transform:translate(-50%,-50%);}
@media (max-width:991px){
.chart-box {width:130px;}
.chart-box .pie-chart span.center {font-size:18px;}
}

/* modal-box */
.modal-box {pointer-events:none; opacity:0; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999; transition:all ease 0.5s;}
.modal-box .box {pointer-events:none; opacity:0; position:absolute; left:50%; top:45%; transition:all ease 0.5s; transform:translate(-50%,-50%); width:calc(100% - 30px); max-height:90%; background:#fff; border-radius:15px; max-width:400px;}
.modal-box .box.lg {max-width:600px;}
.modal-box .modal-head {width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; padding:15px;}
.modal-box .modal-head h2 {flex:1; min-width:0; font-size:22px; font-weight:600; margin:0 12px 0 0;}
.modal-box .modal-head .close {width:24px; height:24px; background:url('../images/icon_close.png') no-repeat center / cover; font-size:0;}
.modal-box .modal-body {width:100%; height:100%; overflow-y:auto; padding:15px;}
.modal-box .modal-foot {width:100%; padding:15px;}
.modal-box .modal-foot .button-box .btn {margin:0 8px 0 0; height:45px; font-size:16px;}
.modal-box .modal-foot .button-box .btn:last-of-type {margin:0;}
.modal-box .modal-text img {display:block; margin:0 auto 10px; width:200px;}
.modal-box .modal-text strong {display:block; text-align:center; font-size:20px; font-weight:600; word-break:keep-all; margin:0 0 5px;}
.modal-box .modal-text p {text-align:center; font-size:16px; font-weight:500; word-break:keep-all;}
.modal-box .modal-text .count {display:flex; flex-wrap:wrap; align-items:center; justify-content:center; font-size:20px; font-weight:600; background:#3B77B9; color:#fff; padding:5px 10px; margin:0 5px;}
.modal-box.fixed {pointer-events:inherit; opacity:1;}
.modal-box.fixed .box {pointer-events:inherit; opacity:1; top:50%;}
@media (max-width:991px){
.modal-box .modal-head h2 {font-size:20px;}
.modal-box .modal-text strong {font-size:18px;}
.modal-box .modal-text p {font-size:14px;}
.modal-box .modal-text .count {font-size:14px; padding:3px 10px;}
}

/* state-box */
.state-box {display:flex; flex-wrap:wrap; align-items:center; padding:12px; background:#F5F5F5; margin:0 auto}
.state-box .state-progress {flex:1; min-width:0; margin:0 30px 0 0; border-radius:50px; position:relative; overflow:hidden; height:18px; background:#D9D9D9;}
.state-box .state-progress .progress {position:absolute; left:0; top:0; height:100%; content:""; background:#89D72D; border-radius:50px; transition:all ease 0.5s;} 
.state-box .state-sound {display:flex; flex-wrap:wrap; align-items:center;}
.state-box .state-sound:before {display:block; content:""; width:24px; height:24px; margin:0 5px 0 0; background:url('../images/icon_sound_on.svg') no-repeat center / cover;}
.state-box .state-sound input {width:95px; height:18px; border-radius:50px; appearance:none; background:#d9d9d9;}
.state-box .state-sound input::-webkit-slider-runnable-track {height:18px; background:linear-gradient(#89D72D, #89D72D) 0/var(--percent) 100% no-repeat, #D9D9D9; border-radius:50px;}
.state-box .state-sound input::-webkit-slider-thumb {appearance:none; width:18px; height:18px; background:url('../images/icon_range.svg') no-repeat center / cover;}
.state-box .state-sound input::-moz-range-progress {height:18px; background:linear-gradient(#89D72D, #89D72D) 0/var(--percent) 100% no-repeat, #D9D9D9; border-radius:50px;}
.state-box .state-sound input::-moz-range-track {height:18px; background:linear-gradient(#89D72D, #89D72D) 0/var(--percent) 100% no-repeat, #D9D9D9; border-radius:50px;}
.state-box .state-sound input::-moz-range-thumb {width:22px; height:22px; background:url('../images/icon_range.svg') no-repeat center / cover;}

/* read-text-image-box */
.read-text-image-box h3 {font-size:24px; font-weight:600; margin:0 0 24px; text-align:center; color:#4A4A4A;}
.read-text-image-box .inner {border:1px solid #D9D9D9; border-radius:12px; padding:20px; display:flex; flex-wrap:wrap; align-items:flex-start;}
.read-text-image-box .inner .read-text {flex:1; min-width:0; padding:0 20px 0 0;}
.read-text-image-box .inner .read-text p {font-size:18px; color:#7a7a7a; word-break:keep-all; line-height:1.7}
.read-text-image-box .inner .read-image {width:315px; position:relative; overflow:hidden;}
.read-text-image-box .inner .read-image:before {display:block; content:""; padding-bottom:100%;}
.read-text-image-box .inner .read-image img {width:100%; height:100%; left:0; top:0; position:absolute; object-fit:cover;}
.read-text-image-box .inner .read-image button {width:42px; height:42px; font-size:0; background:url('../images/icon_read_image_arrow.svg') no-repeat center / cover; position:absolute; top:50%; transform:translateY(-50%);}
.read-text-image-box .inner .read-image button.prev {left:10px; background-image:url('../images/icon_read_image_arrow2.svg');}
.read-text-image-box .inner .read-image button.next {right:10px;}
.read-text-image-box .inner .read-writer {width:100%; margin:30px 0 0;}
.read-text-image-box .inner .read-writer p {text-align:right; font-size:24px; margin:0 0 5px;}
.read-text-image-box .inner .read-writer p:last-of-type {margin:0;}
.read-text-image-box .inner .read-writer p b {font-size:24px; font-weight:600;}
.read-text-image-box.print .inner {border:0; border-radius:0; padding:0;}
.read-text-image-box.print .inner .read-image {width:220px;}
@media screen and (max-width:991px){
.read-text-image-box h3 {font-size:20px; margin:0 0 15px;}
.read-text-image-box .inner {padding:15px;}
.read-text-image-box .inner .read-text {flex:none; padding:0; margin:15px 0 0; order:2; width:100%;}
.read-text-image-box .inner .read-text p {font-size:15px;}
.read-text-image-box .inner .read-image {order:1; width:100%; max-width:280px; margin:0 auto;}
}

/* image-swiper-box */
.image-swiper-box {position:relative; margin:50px 0 0;}
.image-swiper-box .swiper-container {max-width:682px; margin:0 auto;}
.image-swiper-box .swiper-container .swiper-slide {background:#F5F5F5;}
.image-swiper-box .swiper-container .swiper-slide:after {display:block; content:""; padding-bottom:70%;}
.image-swiper-box .swiper-container .swiper-slide img {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); max-width:100%; max-height:100%; object-fit:cover;}
.image-swiper-box .swiper-button-prev {left:10px; width:80px; height:80px; background:url('../images/icon_image_swiper_prev.png') no-repeat center / cover;}
.image-swiper-box .swiper-button-next {right:10px; width:80px; height:80px; background:url('../images/icon_image_swiper_next.png') no-repeat center / cover;}
@media (max-width:991px){
.image-swiper-box {margin:15px 0 0;}
.image-swiper-box .swiper-button-prev {display:none; left:0; width:30px; height:30px; top:100%; margin:0;}
.image-swiper-box .swiper-button-next {display:none; left:30px; right:0; width:30px; height:30px; top:100%; margin:0;}
}

.typing-box {
    position: relative;
    width:100%;
}

.typing-box textarea {
    width: 100%;
    min-height: 160px;
    padding: 16px;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    background: transparent;
    color: transparent;          /* 사용자가 친 글자는 숨김 */
    caret-color: transparent;           /* 커서는 보이게 */
    outline: none;
	font-size:16px;
}

.typing-box .prompt {
    position: absolute;
    inset: 0;
    padding: 16px;               /* textarea padding과 동일 */
    pointer-events: none;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: hidden;
	font-size:16px;
}

.typing-box .prompt .ch {
    color: #9aa0a6;              /* 기본: 회색 */
    transition: color .08s linear;
	font-size:16px;
}

.typing-box .prompt .ch.correct {
    color: #000;       
	font-size:16px;
	font-weight:600;
}

/* (선택) 현재 위치 커서 느낌 */
.typing-box .prompt .ch.cursor {
    position: relative;
	font-size:16px;
}

.typing-box .prompt .ch.cursor::after {
    content: "";
    position: absolute;
    right: -1px;
    top: 2px;
    width: 1px;
    height: 1.2em;
    background: #111;
    opacity: .9;
	display:none;
}

.loader {
    display: block;
    width: 35px;
    height: 35px;
    margin: 10px auto 0;
    border-radius: 50%;
    background: radial-gradient(farthest-side,#3B77B9 94%,#0000) top/4px 4px no-repeat, conic-gradient(#0000 30%,#3B77B9);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 4px),#000 0);
    animation: s3 1s infinite linear;
}

@keyframes s3 {
    100% {
        transform: rotate(1turn)
    }
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.2; }
}

.typing-box .prompt.blinking {
    animation: blink 1.2s ease-in-out infinite;
}

/* write-box */
.write-box {display:flex; flex-wrap:wrap; gap:30px;}
.write-box > * {border:1px solid #d9d9d9; border-radius:15px; padding:20px; height:100%;}
.write-box .write-left {flex:1; min-width:0;}
.write-box .write-left textarea {width:100%; height:100%; display:block; font-size:16px;}
.write-box .write-right {width:350px;}
.write-box .write-right strong {display:block; font-size:16px; font-weight:700; color:#4a4a4a; margin:0 0 10px;}
.write-box .write-right ul {padding:0 0 0 20px;}
.write-box .write-right ul li {list-style:disc; font-size:15px; color:#4a4a4a; word-break:keep-all; margin:0 0 8px;}
.write-box .write-right ul li:last-of-type {margin:0;}
.write-box .write-right ul li b {font-size:15px; font-weight:700; color:#f00;}
@media (max-width:991px){
.write-box {height:auto; gap:0;}
.write-box > * {border-radius:10px; padding:15px; height:auto;}
.write-box .write-left {flex:none; width:100%; order:2; margin:10px 0 0;}
.write-box .write-left textarea {font-size:15px; height:150px;}
.write-box .write-right {width:100%;}
.write-box .write-right strong {font-size:15px;}
.write-box .write-right ul li {margin:0 0 5px; font-size:14px;}
.write-box .write-right ul li b {font-size:14px;}
}

/* view-box */
.view-box ul {border:1px solid #D9D9D9; border-radius:12px; overflow:hidden; margin:0 0 15px;}
.view-box ul:last-of-type {margin:0;}
.view-box ul li {border-bottom:1px solid #d9d9d9; display:flex; flex-wrap:wrap;}
.view-box ul li:last-of-type {border:0;}
.view-box ul li strong {padding:10px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; border-right:1px solid #d9d9d9; width:200px; font-size:16px; font-weight:600; text-align:center; color:#4A4A4A;}
.view-box ul li p {font-size:16px; color:#4a4a4a; text-align:left; display:flex; flex-wrap:wrap; align-items:center; padding:15px; flex:1; min-width:0;}
.view-box ul li p.lg {font-size:18px;}
@media (max-width:991px){
.view-box ul li strong {width:100px; font-size:13px;}
.view-box ul li p {font-size:13px;}
}

/* academy-select-box */
.academy-select-box > ul > li {border-bottom:1px solid #d9d9d9; position:relative;}
.academy-select-box > ul > li:last-of-type {border:0;}
.academy-select-box > ul > li input {position:absolute; left:0; top:0; width:100%; height:100%; opacity:0; cursor:pointer;}
.academy-select-box > ul > li label {display:flex; align-items:center; gap:10px; padding:10px 0;}
.academy-select-box > ul > li label:before {display:inline-block; content:""; width:24px; height:24px; background:url('../images/icon_check.png') no-repeat center / cover;}
.academy-select-box > ul > li label span {overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:16px; font-weight:500; min-width:0;}
.academy-select-box > ul > li label span:first-of-type {color:var(--color-active); margin:0; flex:0 0 46%; width:46%;}
.academy-select-box > ul > li label span:last-of-type {flex:1; text-align:left;}
.academy-select-box > ul > li input:checked ~ label:before {background-image:url('../images/icon_check_on.png');}

/* title-big-box */
.title-big-box {height:100%; display:flex; flex-wrap:wrap; align-items:center; align-content:center; justify-content:center;}
.title-big-box:before {display:block; content:""; width:64px; height:62px; margin:0 auto 20px; background:url('../images/icon_title_sound.svg') no-repeat center / cover;}
.title-big-box p {width:100%; font-size:28px; font-weight:600; color:#4a4a4a; word-break:keep-all; text-align:center; line-height:1.5;}
@media (max-width:991px){
.title-big-box {padding:50px 0;}
.title-big-box:before {width:32px; height:30px; margin:0 auto 10px;}
.title-big-box p {font-size:20px;}
}