/*******************************************************************************
                                테스트 컨텐츠
********************************************************************************/
/* 테스트 전 후 */
.cdt-content-nontest {width:60%;margin:0 auto;padding:2rem;}
.cdt-content-nontest .rubric-block {font-size:1.125rem;}
.cdt-content-nontest .rubric-block [class^="sp-"] {margin-right:0.5rem;}
.cdt-content-nontest .column {margin-top:1rem;padding:2rem;background:#f6f8fc;}
.cdt-content-nontest .column .title {margin-bottom:0.5rem;font-size:1.25rem;}
.cdt-content-nontest .column .dot-list {margin-left:2rem;}
.cdt-content-nontest .column .notice-info {margin-top:1rem;}
.cdt-content-nontest .column .button-wrap {margin-top:2rem;text-align:center;}
.cdt-content-nontest .column .button-wrap .button {position:relative;display:inline-block;width:15rem;padding:8px 0 10px;border:1px solid #b9c4d9;border-radius:4px;background:#fff;color:#4e7cc8;font-size:1rem;text-transform:capitalize;z-index:1;}
.cdt-content-nontest .column .button-wrap .button:hover {box-shadow: 0 5px 2px #dae2ef;}
.cdt-content-nontest .column .notice-info.start-test {margin-top:2rem;text-align:center;}
.cdt-content-nontest .column .notice-info.start-test + .button-wrap {margin-top:1rem;}

/* 테스트 화면 기본 */
.cdt-content {height:calc(100vh - 95px);padding:2rem;box-sizing:border-box; }
.cdt-content img {max-width:100%;}
.cdt-content > .column {height:90%;min-height:470px;margin-top:2rem;padding:2rem;box-sizing:border-box;background:#f6f8fc;overflow-y:auto;}
.cdt-content > .column .title {margin-bottom:2rem;}
.cdt-content > .column .title em {font-weight:bold;}
.cdt-content > .column .title em + p {margin-top:0.5rem;}
.cdt-content > .column.multistage {padding:0 !important;overflow:visible;}
.cdt-content > .column.multistage.writing {height:85%;}
.cdt-content > .column.multistage.speaking {height:80%;}
.cdt-content > .column.multistage .left {width:50%;float:left;height:100%;padding:2rem;box-sizing:border-box;overflow:auto;overflow-x:hidden;}
.cdt-content > .column.multistage .right {width:50%;float:right;height:100%;padding:2rem;box-sizing:border-box;overflow:auto;}
body.writing .cdt-content > .column.multistage .right {overflow: hidden;}
.cdt-content > .column .question {font-size:100%; margin-bottom:1rem;}
.cdt-content > .column .question-ib {display:inline-block;margin-bottom:0;font-size:100%; }
.cdt-content > .column [class^="question"] .num {display:inline-block;font-weight:bold;margin-right:0.4rem;}
.cdt-content > .column .tbl-basic .question {margin-bottom:0;}

.cdt-content .rubric-block {padding:10px 1.5rem;border:1px solid #b9c4d9;background:#fff;font-size:1.125rem;font-weight:bold;}
.cdt-content .rubric-block i {display:inline-block;margin-left:0.5rem;font-style:italic;}
.cdt-content .rubric-block .small-text {display:block;font-size:90%;font-weight:normal; }

.given-text p + p, .given-text p + div, .given-text div + p {margin-top:1.5rem;}
.given-text p + ul {margin:0.5rem 0 1.5rem;}
.given-text p i {font-style:italic;}
.given-text img {max-width:100%;}

.involve-order {position:relative;padding-left:2rem;}
.involve-order .order {position:absolute;top:0;left:0;display:inline-block;width:auto;font-weight:bold;}
.involve-order + .involve-order {margin-top:1.5rem;}

ul.involve-order {padding-left:0;}
ul.involve-order li {position:relative;padding-left:1.5rem;line-height:160%;}
ul.involve-order li + li {margin-top:1rem;}
ul.involve-order li .order {left:0;}


/* 유형별 */
.multiple-choice .objective {margin-bottom:3rem;}
.multiple-choice .question {margin-bottom:1rem;}
.multiple-choice .question .num {font-weight:bold;}
.multiple-choice .item input + label {margin-left:5px;}
.multiple-choice .item li ~ li {margin-top:0.5rem;}
.multiple-choice.col2 .objective {width:48%;height:10rem;float:left;margin-bottom:2rem;}
.multiple-choice.col2 .objective:nth-of-type(2n) {float:right;}
.title + .multiple-choice.accordion {margin-top:-1rem;}
.multiple-choice.accordion .tab-list ~ .tab-list {margin-top:1rem;}
.multiple-choice.accordion .tab-list p {padding:0.5rem 1rem;border:1px solid #afbbd4;background:linear-gradient(#f7f9ff 50%, #f0f3f9 50%);letter-spacing:-1px;cursor:pointer;}
.multiple-choice.accordion .tab-list p:hover {background:linear-gradient(#e8ecf7 50%, #dee0f2 50%);}
.multiple-choice.accordion .tab-list .num {font-weight:bold;}
.multiple-choice.accordion .tab-list .item {display:none;margin-top:0.5rem;padding-left:1rem;}
.multiple-choice.accordion .tab-list.open .item {display:block;}
.multiple-choice.accordion .tab-list.open p {background:#fff;}

.labelling {display:inline-block;width:100%;}
.labelling .given {width:50%;float:left;}
.labelling .check-tbl {width:50%;float:right;}
.labelling .check-tbl table {width:100%;border:1px solid #333;border-collapse:collapse;border-spacing:0;}
.labelling .check-tbl table thead {background:#c3d9ff;}
.labelling .check-tbl table thead th {padding:5px 0;border-left:1px solid #333;}
.labelling .check-tbl table tbody tr:hover {background:#e8f0ff;}
.labelling .check-tbl table tbody th, .labelling .check-tbl table tbody td {padding:5px 0;border:1px solid #333;}
.labelling .check-tbl table tbody th {text-align:left;text-indent:1rem;}
.labelling .check-tbl table tbody td {position:relative;text-align:center;border-left:1px solid #333;}
.labelling .check-tbl table tbody td input[type=checkbox], .labelling .check-tbl table tbody td input[type=radio] {display:none;}
.labelling .check-tbl table tbody td input[type=checkbox] + label,
.labelling .check-tbl table tbody td input[type=radio] + label {position:absolute;top:0;left:0;display:block;width:100%;height:100%;cursor:pointer;}
.labelling .check-tbl table tbody td input[type=checkbox]:checked + label,
.labelling .check-tbl table tbody td input[type=radio]:checked + label {background:url(../img/cdt/icon_check_green.png) center no-repeat;}

.matching .slot {display:block;width:100%;max-width:100%;min-height:36px;margin-bottom:10px;padding:0;box-sizing:border-box;vertical-align:top;}
.matching .slot:empty {width:40%;padding:5px 10px;border:1px solid #b9c4d9;background:#fff;}
.matching .slot:empty.focus {border:1px solid #4e7cd5;background:#e6f0fd;}
.matching .drag-item {display:block;width:100%;padding:5px 10px;box-sizing:border-box;border:1px solid #b9c4d9;background:#fff;color:#333;font-weight:bold;line-height:160%;cursor:pointer;}
.matching .drag-item ~ .drag-item {margin-top:0.5rem;}
.matching .slot.drag-enter {display:block;width:40%;height:36px;padding:0;border:1px dashed #4e7cd5;background:#e6f0fd;}
.matching .slot .drag-item {display:inline-block;margin-top:0;width:100%;}
.matching .involve-order {position:inherit;padding:0;}
.matching .involve-order:after {content:'';display:block;width:100%;clear:both;}
.matching .involve-order .order {position:relative;top:auto;left:auto;width:5%;float:left;}
.matching .involve-order .context {width:94%;float:right;margin:0;}

.highlight, .highlighted {background-color:yellow;}
.right-click-menu {display:none;width:140px;border:1px solid #fff;background:#fff;z-index:100;box-shadow:0 0 5px rgba(0,0,0,0.2);}
.right-click-menu .button {display:block;width:100%;padding:4px;border:none;background:none;-webkit-appearance:none;text-transform:capitalize;text-align:left;}
.right-click-menu .button img {margin-right:5px;}
.right-click-menu .button:hover  {background:#3399ff;}
.right-click-menu .pop-note {display:none;position:absolute;top:-1px;left:-1px;width:225px;box-shadow:0 0 5px rgba(0,0,0,0.2);font-size:0.875rem;}
.right-click-menu .pop-note .pop-menu {position:relative;width:100%;height:30px;border-bottom:1px solid #5a5a5a;background-color:#e4c82f;text-align:right;}
.right-click-menu .pop-note .pop-menu button {position:Absolute;top:4px;right:5px;border:none;background:none;-webkit-appearance:none;}
.right-click-menu .pop-note #cwt {min-height:200px;padding:10px;background-color:#fff046;;}

.completion {overflow-wrap:break-word;line-height:2rem;}
.completion input[type=text] {width:150px;padding:5px;border:1px solid #b9c4d9;box-sizing:border-box;}
.completion input[type=text]:focus {border:1px solid #4e7cd5;background:#e6f0fd;outline:none;}
.completion input[type=text].wide {width:90%;}
.completion input[type=text].expandable {min-width:150px;max-width:100%;}
.completion .dot-list li:before {top:0.9rem;}
.completion .context {overflow-wrap:break-word;line-height:2rem;}
.completion .context .dot-list li:before {top:1.2rem;}
.completion .context p + p {margin-top:1.5rem;}



.writing-area {width:100%; height:100%; overflow: hidden; border: solid 1px #b9c4d9; background-color: #fff; }
.writing-area textarea { width:100%; height: 100% !important; border: none; padding: 10px; overflow-wrap:break-word; box-sizing:border-box; background-color: transparent;}
.writing-area .num {display:block;width:100%;font-size:0.92rem;color:#666;}

.speaking-record {padding:1rem;border:1px solid #b9c4d9;background:#fff;}
.speaking-record .part em {display:block;font-weight:bold;margin-bottom:10px;text-transform:uppercase;}
.speaking-record .part .select-btn:after {content:'';display:block;width:100%;clear:both;}
.speaking-record .part .select-btn span {display:block;width:49%;float:left;padding:10px 0;border:1px solid #8aa0cb;background:#8aa0cb;color:#fff;box-sizing:border-box;text-align:center;cursor:pointer;}
.speaking-record .part .select-btn span [class^="icon"] {display:inline-block;width:20px;height:20px;margin-right:5px;background:url(/ielts/lib/images/subpage/writing/sp_writing.png);vertical-align:middle;}
.speaking-record .part .select-btn span .icon-upload {background-position:-85px 0;}
.speaking-record .part .select-btn span .icon-mike {background-position:-145px 0;}
.speaking-record .part .select-btn span.active {border-color:#333;background:#fff;color:#333;font-weight:bold;}
.speaking-record .part .select-btn span.active .icon-upload {background-position:-55px 0;}
.speaking-record .part .select-btn span.active .icon-mike {background-position:-115px 0;}
.speaking-record .part .select-btn span + span {margin-left:2%;}

.speaking-record .part *[class*="item-"] {margin-top:10px;}
.speaking-record .part *[class*="item-"]:after {content:'';display:block;width:100%;clear:both;}
.speaking-record .part *[class*="item-"] *[class*="-file"] {position:relative;display:block;width:49%;height:40px;float:left;padding:0;border:1px solid #ddd;box-sizing:border-box;}
.speaking-record .part *[class*="item-"] *[class*="-file"] + *[class*="-file"] {margin-left:2%;}
.speaking-record .part *[class*="item-"] input[type="file"] {width:100%;height:100%;padding:5px;box-sizing:border-box;border:none;line-height:100%;}
.speaking-record .part *[class*="item-"] *[class*="-file"] .read-wrap audio {width:100%;height:40px;border-radius:0;}
.speaking-record .part *[class*="item-"] input[type="file"] + .btn {position:absolute;top:0;right:0;width:20%;height:38px;margin-left:-1px;border:none;border-left:1px solid #ddd;background:#fff;box-shadow:none;font-size:14px;cursor:pointer;letter-spacing:-1px;}

.speaking-record .part .item-record .record-file { padding:4px;}
.speaking-record .part .item-upload .play-file, .speaking-record .part .item-record .play-file {height:auto;border:none;}
.speaking-record .part .item-record .record-file .record-btn {display:inline-block;height:30px; padding:0 20px;border-radius:20px;font-size:0.92rem;color:#fff;line-height:28px;letter-spacing:-1px;}
.speaking-record .part .item-record .record-file .record-btn:before {content:'';display:inline-block;width:20px;height:20px;background:url(/ielts/lib/images/subpage/writing/sp_writing.png);vertical-align:middle;}
.speaking-record .part .item-record .record-file .record-btn.play {background:#f33939;}
.speaking-record .part .item-record .record-file .record-btn.stop {background:#666;}
.speaking-record .part .item-record .record-file .record-btn.play:before {content:'';background-position:-265px 4px;}
.speaking-record .part .item-record .record-file .record-btn.stop:before {content:'';background-position:-235px 4px;}
.speaking-record .part .item-record .record-file .timer {margin-left:10px;font-size:90%;color:#666;}

@media screen and (max-width: 1023px) {
}
@media screen and (max-width: 767px) {
}

/* 레이어팝업 */
.pop-wrap {display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:100;}
.pop-container {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);width:770px;border-radius:10px;overflow:hidden;}
.pop-fixtop {position:relative;padding:0.8rem 1.5rem 0.5rem;background:#8caae4;color:#fff;}
.pop-fixtop h2 {font-size:1.2rem;}
.pop-fixtop .sp-close {position:absolute;top:50%;right:1.5rem;width:20px;height:20px;margin-top:-10px;text-indent:-999px;cursor:pointer;}
.pop-content {width:100%;height:500px;overflow-y:auto;padding:2rem 1.5rem;box-sizing:border-box;background:#fff;}
.pop-content .tab-menu {position:relative;width:100%;margin-bottom:2rem;border-bottom:1px solid #6684bd;z-index:1;}
.pop-content .tab-menu:after {content:'';display:block;width:100%;clear:both;}
.pop-content .tab-menu a {position:relative;display:inline-block;float:left;margin-bottom:-1px;padding:5px 1rem;border:1px solid #b9c4d9;border-bottom:0;border-radius:9px 9px 0 0;background:#e8eff9;color:#585d62;z-index:-1;}
.pop-content .tab-menu a ~ a {margin-left:0.5rem;}
.pop-content .tab-menu a.active {margin-bottom:-2px;border:1px solid #6684bd;border-bottom:2px solid #fff;background:#fff;color:#333;font-weight:bold;z-index:2;}
.pop-content .tab-content ~ .tab-content {display:none;}
.pop-content .tit {font-weight:bold;}
.pop-content .con {margin:1rem 0;}
.pop-content .con ul {padding-left:2rem;}
.pop-content .con p + p {margin-top:10px;}
.pop-content .con + h3 {margin-top:2rem;}
.pop-content .con .ex-img {display:inline-block;margin-right:1rem;vertical-align:middle;}
.pop-content .con .ko {display:inline-block;vertical-align:middle;}
.pop-content .con .en {display:none;}
.pop-content.settings {height:320px;}
.pop-content.settings .column {width:90%;margin:2rem auto 0;}
.pop-content.settings .column:after {content:'';display:block;width:100%;clear:both;}
.pop-content.settings .column .col3 {width:30%;float:left;margin-left:5%;}
.pop-content.settings .column .col3:nth-of-type(3n+1) {margin-left:0;}
.pop-content.settings .column .col3 strong {display:block;margin-bottom:0.5rem;font-size:1.08rem;}
.pop-content.settings .column .col3 span {display:block;}
.pop-content.settings .column .col3 span input + label {margin-left:0.5rem;}
.pop-content.hidden {height:260px;}
.pop-content .button-wrap {margin-top:2rem;text-align:center;}
.pop-content .button-wrap .button {position:relative;display:inline-block;width:15rem;padding:8px 0 10px;border:1px solid #b9c4d9;border-radius:4px;background:#fff;color:#4e7cc8;font-size:1rem;text-transform:capitalize;z-index:1;}
.pop-content .button-wrap .button:hover {box-shadow: 0 5px 2px #dae2ef;}

/*******************************************************************************
                                    set 공통
********************************************************************************/
hr {border:transparent;border-top:1px solid #b9c4d9;}
.illust {margin:0 auto;text-align:center;}
.illust .tit {margin-bottom:1rem;}
.illust img {max-width:100%;}
.context {margin-top:1rem;word-break:keep-all;}
.large-title {font-size:2rem;margin-bottom:1rem;}
.large-title .exp {display:block;font-size:70%;}
.exp {margin-top:0.5rem;font-size:80%;color:#666;}

.t-center {text-align:center;}
.t-right {text-align:right;}
.t-left {text-align:left;}
.t-bold {font-weight:bold;}
.t-underline {text-decoration:underline;}

.chk {}
.chk ~ .chk {margin-left:1rem;}
.chk label + input {margin-left:0.5rem;}
.chk input + label {margin-left:5px;}

.box-basic {width:650px;max-width:100%;padding:1rem;box-sizing:border-box;}
.box-line {width:650px;max-width:100%;margin:1rem 0;padding:1rem;border:2px solid #b9c4d9;box-sizing:border-box;}
body.writing .box-line {margin: 0}
.box-hidden {display:none;}
[class^="box-"] p + p {margin-top:1rem;}
[class^="box-"] + p {margin-top:1rem;}

.tbl-basic {width:100%;font-size:0.875rem;}
.tbl-basic p {line-height:140%;}
.tbl-basic strong {font-size:1rem;}
.tbl-basic p + table {margin-top:0.5rem;}
.tbl-basic table {width:100%;border-top:1px solid #b9c4d9;border-spacing:0;border-collapse:collapse;}
.tbl-basic thead {background:#e6f0fd;}
.tbl-basic th, .tbl-basic td {padding:5px;border-bottom:1px solid #b9c4d9}
.tbl-basic .center {text-align:center;}
.tbl-basic + .tbl-basic, .tbl-basic + .context, .context + .tbl-basic, .context + .context {margin-top:2rem;}
.tbl-basic.v-top th, .tbl-basic.v-top td {vertical-align:top;}
.tbl-basic.v-line th, .tbl-basic.v-line td {border-right:1px solid #b9c4d9;}
.tbl-basic.v-line tr th:first-child, .tbl-basic.v-line tr td:first-child {border-left:1px solid #b9c4d9;}
.v-align-reset label, .v-align-reset input {vertical-align:inherit;}

/*******************************************************************************
    CDT 컨텍스트 메뉴 및 노트 스타일
********************************************************************************/
.right-click-menu { display: none; position: fixed; z-index: 1000; background-color: white; border: 1px solid #ccc; box-shadow: 0 2px 5px rgba(0,0,0,0.2); border-radius: 4px; padding: 8px 0; }
.right-click-menu .button { display: block; width: 100%; padding: 8px 12px; text-align: left; border: none; background: none; cursor: pointer; font-size: 14px; white-space: nowrap; }
.right-click-menu .button:hover { background-color: #f5f5f5; }
.right-click-menu .button img { width: 16px; height: 16px; margin-right: 8px; vertical-align: middle; }

/* 노트 팝업 스타일 - 포스트잇 디자인 */
#globalPopNote { background-color: #fff9c4; border-radius: 2px; box-shadow: 1px 2px 6px rgba(0,0,0,0.2); width: 300px; padding: 15px; z-index: 98; position: absolute; display: none; }

.pop-menu { display: flex; justify-content: flex-end; margin-bottom: 8px; padding-bottom: 8px; border-bottom: 1px dashed rgba(0,0,0,0.1); }
.pop-menu button { background: #e4c82f; color: #000; border: none; padding: 3px 8px; cursor: pointer; border-radius: 3px; font-weight: bold; }
.pop-menu button:hover { background: #d3b92e; }

.note-editor { height: 170px; background-color: transparent; font-family: 'Comic Sans MS', cursive, sans-serif; font-size: 14px; line-height: 1.5; color: #424242; overflow-y: auto; outline: none; }
.note-editor:focus { outline: none !important; box-shadow: none !important; border: none !important; }

/* 인라인 노트 아이콘 */
.inline-note-icon { position: absolute; width: 24px; height: 24px; cursor: move; z-index: 99; background-color: rgba(255, 240, 70, 0.7); border-radius: 50%; display: flex !important; align-items: center; justify-content: center; transition: transform 0.1s ease, opacity 0.2s ease; opacity: 0.7; user-select: none; box-shadow: 1px 1px 2px rgba(0,0,0,0.2); }
.inline-note-icon:hover { transform: scale(1.2); opacity: 1; box-shadow: 0 0 5px rgba(0,0,0,0.2); }
.inline-note-icon:active { transform: scale(1.1); opacity: 0.9; }
.inline-note-icon.has-content { background-color: rgba(255, 240, 70, 0.9); }
.inline-note-icon svg { fill: #5d5805; pointer-events: none; margin-left: 2px; }


/* Speaking 녹음 컴포넌트 스타일 */
.recording-header { margin-bottom:15px; border-bottom:1px solid #eee; padding-bottom:10px; }
.recording-header h3 { margin:0; font-size:18px; color:#333; }
.recorder-tabs { margin-bottom:20px; }

.recorder-tabs .tab-list { display:flex; list-style:none; padding:0; margin:0; border-bottom:1px solid #ddd; }
.tab-item { margin-right:5px; white-space: nowrap; }
.tab-btn { padding:8px 15px; background:none; border:none; border-bottom:2px solid transparent; cursor:pointer; font-size:14px; display:flex; align-items:center; gap:6px; }
.tab-btn.active { border-bottom:2px solid #1a73e8; color:#1a73e8; }
.tab-panel { display:none; padding:15px; background:#fff; border-radius:4px; border:1px solid #eee; }
.tab-panel.active { display:block; }

.recorder-controls { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.record-timer { font-size:24px; font-weight:bold; font-family:monospace; color:#333; background:#f0f0f0; padding:10px 15px; border-radius:4px; min-width:80px; text-align:center; }
.control-buttons { display:flex; gap:10px; }
.btn-record, .btn-pause, .btn-stop, .btn-upload { padding:8px 15px; border:none; border-radius:4px; cursor:pointer; display:flex; align-items:center; gap:5px; }
.btn-record { background-color:#d23f31; color:white; }
.btn-record.recording { background-color:#d23f31; animation:pulse 1.5s infinite; }
.btn-pause { background-color:#f5a623; color:white; }
.btn-stop { background-color:#5f6368; color:white; }
.btn-upload { background-color:#1a73e8; color:white; }
.reset-container { margin-top:15px; text-align:right; }
.btn-reset { background-color:#ea4335; color:white; padding:5px 10px; border:none; border-radius:4px; cursor:pointer; font-size:12px; display:inline-flex; align-items:center; gap:5px; }
.btn-reset:hover { background-color:#d32f2f; }
.btn-record:disabled, .btn-pause:disabled, .btn-stop:disabled, .btn-upload:disabled { background-color:#f1f3f4; color:#9aa0a6; cursor:not-allowed; }
.recorder-status, .upload-status { margin-bottom:15px; font-size:14px; color:#5f6368; }
.audio-preview { margin-top:20px; display:none; }
.audio-label { margin-bottom:8px; font-size:14px; color:#5f6368; }
.file-upload-controls { display:flex; align-items:center; margin-bottom:15px; }
.file-input-wrapper { flex:1; margin-right:10px; display:flex; align-items:center; }
.file-input { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0, 0, 0, 0); border:0; }
.file-label { background-color:#1a73e8; color:white; padding:8px 15px; border-radius:4px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.file-name { margin-left:10px; font-size:14px; color:#5f6368; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:250px; }
.submission-status { margin-top:15px; padding:10px; border:1px solid #eee; border-radius:4px; }
.status-indicator { display:flex; align-items:center; gap:8px; }
.status-icon { width:12px; height:12px; border-radius:50%; background-color:#9aa0a6; }
.status-icon.success { background-color:#34a853; }
.status-icon.error { background-color:#ea4335; }
.status-icon.recording { background-color:#d23f31; animation:pulse 1.5s infinite; }
.status-icon.uploading { background-color:#1a73e8; }
.status-text { font-size:14px; color:#5f6368; }
.speaking-submit-container { text-align:center; margin:30px 0; }
.submit-btn { background-color:#34a853; color:white; border:none; padding:12px 24px; font-size:16px; border-radius:4px; cursor:pointer; }
.submit-btn:hover { background-color:#2e7d49; }
@keyframes pulse { 0% { opacity:1; } 50% { opacity:0.7; } 100% { opacity:1; } }

/*******************************************************************************
                                    cdt-main
********************************************************************************/
*[class^="pc"] {display:inline-block;}
*[class^="mo"] {display:none;}
img {max-width:100%;}

.cdt-main {}
.cdt-main h3 {display:block;border-bottom:2px solid #333;padding-bottom:10px;margin-bottom:20px;font-weight:bold;}
.cdt-main .exp {display:inline-block;margin-left:5px;font-weight:normal;color:#747474;vertical-align:middle;}
.cdt-main .cdt-list {position:relative;display:block;width:100%;}
.cdt-main .cdt-list .sel-box {position:relative;width:100%;max-width:540px;border:1px solid #747474;border-radius:4px;overflow:hidden;background:transparent;z-index:1;}
.cdt-main .cdt-list .sel-box:after {content:'';position:absolute;top:0;right:0;width:40px;height:100%;border-left:1px solid #747474;background:#f6f6f6 url(/ielts/cdt/images/icon_arr_down.png) center no-repeat;z-index:-1;}
.cdt-main .cdt-list .sel-box select {width:100%;padding:10px;border:none;appearance:none;-webkit-appearance:none;-moz-appearance:none;background:none;}
.cdt-main .cdt-list .sel-box select option .exp {color:#666;}
.cdt-main .cdt-list .dot-list {margin-top:20px;padding:0 20px;box-sizing:border-box;}
.cdt-main .cdt-list .no-list {text-align:center;}
.cdt-main .cdt-list .no-list strong {font-size:120%;}
.cdt-main .cdt-list .no-list .button-wrap {margin-top:20px;}
.cdt-main .cdt-list .no-list .button-wrap .button {border:none;background:#6cb741;}

@media screen and (max-width: 641px) {
    *[class^="pc"] {display:none;}
    *[class^="mo"] {display:inline-block;}
    .cdt-main .cdt-list * {font-size:13px;letter-spacing:-1px;}
    .cdt-main h3:first-of-type {margin-top:0;}
    .cdt-main .exp {display:inline;}
    .cdt-main .cdt-list .sel-box {padding-right:30px;box-sizing:border-box;}
    .cdt-main .cdt-list .sel-box:after {width:30px;}
    .cdt-main .cdt-list .sel-box select {padding:5px;}
    .cdt-main .cdt-list .dot-list {margin-top:10px;padding:0;}
}

.cdt-main .cdt-list .represent {display:block;width:100%;}
.cdt-main .cdt-list .represent:after {content:'';display:block;width:100%;clear:both;}
.cdt-main .cdt-list .represent .thumb {width:20%;max-width:176px;float:left;}
.cdt-main .cdt-list .represent .summary {width:75%;float:right;}
.cdt-main .cdt-list .represent .summary .dot-list li {position:relative;padding-left:10px;letter-spacing:0;}
.cdt-main .cdt-list .represent .summary .dot-list li + li {margin-top:5px;}
.cdt-main .cdt-list .represent .summary .dot-list li:before {content:'';position:absolute;top:10px;left:0;display:block;width:3px;height:3px;border-radius:50%;background:#333;}
.cdt-main .cdt-list .represent .summary .dot-list li span {position:relative;}
.cdt-main .cdt-list .represent .summary .dot-list li span + span {margin-left:10px;padding-left:11px;}
.cdt-main .cdt-list .represent .summary .dot-list li span + span:before {content:'';display:block;width:1px;height:12px;position:absolute;top:4px;left:0;background:#ccc;}

@media screen and (max-width: 641px) {
    .cdt-main .cdt-list .represent .thumb {display:none;}
    .cdt-main .cdt-list .represent .summary {width:100%;float:none;}
    .cdt-main .cdt-list .represent .summary .dot-list li + li {margin-top:0;}
}

.cdt-main .cdt-list .bg-wrap {position:relative;margin-top:20px;padding:20px;background:#f6f6f6;}
.cdt-main .cdt-list .bg-wrap .title {font-size:16px;font-weight:bold;color:#747474;}
.cdt-main .cdt-list .bg-wrap .title:after {content:'';display:block;width:100%;clear:both;}
.cdt-main .cdt-list .bg-wrap .title .toggle-btn {position:relative;cursor:pointer;}
.cdt-main .cdt-list .bg-wrap .title .toggle-btn:before {content:'';position:absolute;top:0;left:100%;display:inline-block;width:40px;height:100%;background:url(/ielts/cdt/images/icon_sarr_down.png) center no-repeat;}
.cdt-main .cdt-list .bg-wrap .toggle-obj {display:none;}
.cdt-main .cdt-list .bg-wrap.open .toggle-obj {display:block;}
.cdt-main .cdt-list .bg-wrap.open .title .toggle-btn:before {transform:rotate(180deg);}
.cdt-main .cdt-list .bg-wrap .title .button-wrap {float:right;margin:-5px 0;}
.cdt-main .cdt-list .bg-wrap .title .button-wrap .button {height:43px;border:none;background:#6cb741;color:#fff;line-height:43px;}
.cdt-main .cdt-list .bg-wrap .title .sel-box {display:inline-block;margin:-5px 0;margin-left:10px;vertical-align:middle;border-color:#e0e0e0;background:#fff;}
.cdt-main .cdt-list .bg-wrap .title .sel-box:after {border-color:#e0e0e0;}
.cdt-main .cdt-list .bg-wrap .list-view table {width:100%;margin-top:20px;border-collapse:collapse;color:#333;}
.cdt-main .cdt-list .bg-wrap .list-view th, .cdt-main .cdt-list td {padding:6px 5px;}
.cdt-main .cdt-list .bg-wrap .list-view thead {border:1px solid #ddd;}
.cdt-main .cdt-list .bg-wrap .list-view tbody td {border-bottom:1px solid #ddd;}
.cdt-main .cdt-list .bg-wrap .list-view tbody td.pc-only {display:table-cell;}
.cdt-main .cdt-list .bg-wrap .column {margin-top:20px;overflow:hidden;}
.cdt-main .cdt-list .bg-wrap .column:after {content:'';display:block;width:100%;clear:both;}
.cdt-main .cdt-list .bg-wrap .column .col-box {position:relative;display:block;width:18.8%;float:left;background:#fff;z-index:0;}
.cdt-main .cdt-list .bg-wrap .column .col-box ~ .col-box {margin-left:1.5%;}
.cdt-main .cdt-list .bg-wrap .column .col-box .score {padding:20px 0;text-align:center;font-size:18px;}
.cdt-main .cdt-list .bg-wrap .column .col-box .score strong {display:block;font-size:200%;}
.cdt-main .cdt-list .bg-wrap .column .col-box .button-wrap {border-top:1px solid #e3e3e3;}
.cdt-main .cdt-list .bg-wrap .column .col-box .button-wrap:after {content:'';display:block;width:100%;clear:both;}
.cdt-main .cdt-list .bg-wrap .column .col-box .button-wrap .button {display:block;width:50%;float:left;margin:0;padding:0;border:none;background:none;color:#333;}
.cdt-main .cdt-list .bg-wrap .column .col-box .button-wrap .button + .button {border-left:1px solid #e3e3e3;box-sizing:border-box;}
.cdt-main .cdt-list .bg-wrap .column .col-box .button-wrap .button:only-child {width:100%;}
.cdt-main .cdt-list .bg-wrap .column .col-box .button-wrap .button.complete {color:#de0909;}
.cdt-main .cdt-list .bg-wrap .column .col-box.overall {/*display:block;width:18.8%;padding:20px 0 ;float:right;background:#fff;text-align:center;*/}
.cdt-main .cdt-list .bg-wrap .column .col-box.overall .txt {margin-top:6px;}
.cdt-main .cdt-list .bg-wrap .column .col-box.overall strong {font-size:250%;}

@media screen and (max-width: 641px) {
    .cdt-main .cdt-list .bg-wrap {margin-top:10px;padding:10px;}
    .cdt-main .cdt-list .bg-wrap .title {font-size:14px;}
    .cdt-main .cdt-list .bg-wrap .title .toggle-btn:before {width:30px;}
    .cdt-main .cdt-list .bg-wrap .title .sel-box {width:90%;float:right;margin-left:0;}
    .cdt-main .cdt-list .bg-wrap .title .button-wrap {display:block;width:100%;margin-top:10px;}
    .cdt-main .cdt-list .bg-wrap .title .button-wrap:after {content:'';display:block;width:100%;clear:both;}
    .cdt-main .cdt-list .bg-wrap .title .button-wrap .button {width:49%;float:left;height:30px;line-height:30px;}
    .cdt-main .cdt-list .bg-wrap .title .button-wrap .button + .button {margin-left:2%;}
    .cdt-main .cdt-list .bg-wrap .title .button-wrap .button:only-child {width:100%;}
    .cdt-main .cdt-list .bg-wrap .list-view table {margin-top:10px;border-top:1px solid #ddd;border-collapse:separate;border-spacing:0 5px;}
    .cdt-main .cdt-list .bg-wrap .list-view table thead {display:none;}
    .cdt-main .cdt-list .bg-wrap .list-view tbody td {border:none;padding:0;}
    .cdt-main .cdt-list .bg-wrap .list-view table tbody tr {display:block;width:100%;}
    .cdt-main .cdt-list .bg-wrap .list-view table tbody tr td + td {position:relative;padding-left:20px;}
    .cdt-main .cdt-list .bg-wrap .list-view table tbody tr td + td:before {content:'';position:absolute;top:50%;left:10px;display:block;width:1px;height:10px;margin-top:-4px;background:#ddd;}
    .cdt-main .cdt-list .bg-wrap .list-view table tbody tr td:only-child {width:100%;}
    .cdt-main .cdt-list .bg-wrap .list-view tbody .mo-only {margin-top:-5px;border-bottom:1px solid #ddd;}
    .cdt-main .cdt-list .bg-wrap .column .col-box {width:49%;min-width:0;margin:0;}
    .cdt-main .cdt-list .bg-wrap .column .col-box ~ .col-box {margin-left:0;}
    .cdt-main .cdt-list .bg-wrap .column .col-box:nth-of-type(2n) {margin-left:2%;}
    .cdt-main .cdt-list .bg-wrap .column .col-box:nth-of-type(2) ~ .col-box {margin-top:10px;}
    .cdt-main .cdt-list .bg-wrap .column .col-box .button-wrap .button {position:relative;}
    .cdt-main .cdt-list .bg-wrap .column .col-box .button-wrap .button.enter {position:relative;font-weight:normal;color:#999;z-index:-1;}
    /*.cdt-main .cdt-list .bg-wrap .column .col-box .button-wrap .button.enter:before {content:'';display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;background:#ccc;}*/
    .cdt-main .cdt-list .bg-wrap .column .col-box .button-wrap .button span {position:absolute;top:50%;left:0;width:100%;line-height:100%;transform:translateY(-50%);}

}

.cdt-main .cdt-list .graph-donut {margin-top:13px;font-size:100px;}
.cdt-main .cdt-list .graph-donut * {font-size:100px !important;/*그래프사이즈조절*/}
.cdt-main .cdt-list .graph-donut .num {font-size:16px !important;line-height:20px;text-transform:capitalize;}
.cdt-main .cdt-list .graph-donut .num em {display:block;font-size:24px !important;line-height:20px;}
.cdt-main .cdt-list .graph-donut .donut:before {border:0.07em solid #eee;}
.cdt-main .cdt-list .graph-donut .left-side:before, .cdt-main .cdt-list .graph-donut .right-side:before {border:0.07em solid #999;}
.cdt-main .cdt-list .graph-donut .num {color:#777;}

.cdt-main .area-info {margin-top:20px;padding:20px;}
.cdt-main .area-info h4 {margin-bottom:20px;}
.cdt-main .area-info li {list-style:disc;margin-left:20px;margin-top:5px;}
.cdt-main .area-info li:first-child {margin-top:0;}

.cdt-popup {display:none;position:fixed;max-width:90%;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);z-index:999;}
.cdt-popup .pop-close {position:absolute;top:0;right:0;width:24px;margin:30px 30px 0 0;z-index:1;text-indent:-1900px;cursor:pointer;}
.cdt-popup .pop-close:before {content:'';position:absolute;top:50%;display:block;width:100%;height:2px;transform:rotate(45deg);background:#333;}
.cdt-popup .pop-close:after {content:'';position:absolute;top:50%;display:block;width:100%;height:2px;transform:rotate(-45deg);background:#333;}
.cdt-popup .pop-apply-correct {position:relative;width:600px;max-width:100%;max-height:700px;padding:30px;border:1px solid #eee;background:#fff;box-sizing:border-box;box-shadow:5px 5px 10px rgba(0,0,0,0.2);}
.cdt-popup .pop-apply-correct .pop-tit {display:block;border-bottom:2px solid #333;padding-bottom:10px;margin-bottom:20px;font-family:'NanumSquare';font-size:120%;font-weight:bold;}
.cdt-popup .pop-apply-correct .represent .thumb {width:30%;}
.cdt-popup .pop-apply-correct .represent .summary {width:65%;}
.cdt-popup .pop-apply-correct .represent .button-wrap {width:100%;clear:both;padding-top:1rem;text-align:center;}

@media screen and (min-width: 640px) {

}
@media screen and (max-width: 641px) {
    .cdt-popup .pop-apply-correct {max-height:90%;padding:15px;}
    .cdt-popup .pop-close {width:20px;margin:15px 15px 0 0;}
    .cdt-popup .pop-apply-correct .represent .summary {width:100%;}
}