@charset "utf-8"; /* space */
.mt0 {
    margin-top: 0 !important;
}

.mt5 {
    margin-top: 5px !important;
}

.mt10 {
    margin-top: 10px !important;
}

.mt15 {
    margin-top: 15px !important;
}

.mt20 {
    margin-top: 20px !important;
}

.mt25 {
    margin-top: 25px !important;
}

.mt30 {
    margin-top: 30px !important;
}

.mt40 {
    margin-top: 40px !important;
}

.pl5 {
    padding-left: 5px;
}

.pl10 {
    padding-left: 10px;
}

.pl15 {
    padding-left: 15px;
}

.pl20 {
    padding-left: 20px;
}

.mb5 {
    margin-bottom: 5px !important;
}

.mb10 {
    margin-bottom: 10px !important;
}

.mb15 {
    margin-bottom: 15px !important;
}

.mb20 {
    margin-bottom: 20px !important;
}

.text-red {
    color: #f04b66 !important;
}

.text-blue {
    color: #37b4dc !important;
}

.text-35 {
    font-size: 35px;
}

.only-mobile {
    display: none;
}

.dash {
    margin-left: 5px;
    margin-right: 5px;
}

.login-wrap .btn-block {
    margin-top: 50px;
}

.select2-container {
    z-index: 10000;
    width: 100% !important;
    font-size: 15px;
}

.select2-container--default .select2-selection--single {
    border-radius: 0px;
    border: 1px solid #888;
}

.select2-container .select2-selection--single {
    height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px;
    color: #101010;
    font-weight: 400;
}

.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #f9f9f9;
}

.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: #807d7d;
}

.select2-results__option {
    padding: 8px 6px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 34px;
}

.share-write .select2-container--default .select2-selection--single {
    border: 0;
    border: 1px solid #888;
}

/* swal2 */
.swal2-styled.swal2-confirm {
    border-radius: 0;
    background-color: #2778c4;
    color: #fff;
    font-size: 14px;
}

.swal2-styled.swal2-cancel {
    border-radius: 0;
    background-color: #757575;
    color: #fff;
    font-size: 14px;
}

.swal2-styled:focus {
    box-shadow: inherit;
}

#nextPoint + .help-block.error {
    display: inline-block;
}

/* input,select */
input {
    width: 100%;
    height: 36px;
    padding-left: 10px;
    font-size: 15px;
    border: 0;
    border: 1px solid #888;
    background: #fff;
    outline: 0;
}

input[type=text]::-ms-clear {
    display: none;
}

input:read-only, textarea:read-only, input:disabled, textarea:disabled {
    background-color: #f9f9f9;
    border: 1px solid #cfcfcf;
}

input.datepicker:disabled {
    background: #f9f9f9 url('../images/sub/ico_cal.png') no-repeat 93% 55%;
    color: #807d7d;
}

input.timepicker:disabled {
    background: #f9f9f9 url('../images/sub/ico_time.png') no-repeat 90% 55%;
    color: #807d7d;
}

select {
    width: 100%;
    height: 34px;
    padding: 0 26px 0 10px;
    font-size: 15px;
    border: 1px solid #e1e1e1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #fff url('../images/sub/ico_pulldown.png') no-repeat right 7px top 50%;
    outline: 0;
}

select::-ms-expand {
    display: none;
}

textarea {
    width: 100%;
    padding: 8px;
    font-size: 15px;
    border: 1px solid #e1e1e1;
    background: #fff;
    outline: 0;
    overflow: auto;
    resize: none;
}

input[type=radio] {
    width: 18px;
    height: 18px !important;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

input[type=radio] + em {
    display: inline-block;
    min-height: 18px;
    margin-left: -18px;
    padding-left: 18px;
    background: url('../images/sub/bg_radio.png') no-repeat 50% 50%;
    vertical-align: middle;
}

input[type=radio]:checked + em {
    background: url('../images/sub/bg_radio_on.png') no-repeat 50% 50%;
}

input[type=checkbox] {
    width: 18px;
    height: 18px !important;
    padding: 0;
    margin: 0;
    border: 0;
    opacity: 0;
    cursor: pointer;
}

input[type=checkbox] + em {
    display: inline-block;
    min-height: 18px;
    margin-left: -18px;
    padding-left: 18px;
    background: url('../images/sub/bg_check.png') no-repeat 50% 50%;
    vertical-align: middle;
}

input[type=checkbox]:checked + em {
    background: url('../images/sub/bg_check_on.png') no-repeat 50% 50%;
}

input[type=checkbox][disabled] {
    cursor: not-allowed;
}

input[type=checkbox][disabled] + em {
    opacity: 0.5;
}

input[type=checkbox][disabled] ~ label {
    opacity: 0.5;
    cursor: not-allowed;
}

input[type=radio] ~ label {
    font-size: 14px;
    color: #101010;
    cursor: pointer;
    padding-left: 7px;
    font-weight: 400;
}

input[type=checkbox] ~ label {
    font-size: 14px;
    color: #101010;
    cursor: pointer;
    padding-left: 7px;
    font-weight: 400;
}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #807d7d;
    font-weight: 300;
}

input:-moz-placeholder, textarea:-moz-placeholder {
    color: #807d7d;
    font-weight: 300;
}

input::-moz-placeholder, textarea::-moz-placeholder {
    color: #807d7d;
    font-weight: 300;
}

input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #807d7d;
    font-weight: 300;
}

input, textarea {
    -webkit-transition: background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in, -webkit-box-shadow 150ms ease-in;
    background-repeat: no-repeat;
    background-size: 0% 100%;
    transition: background-image 150ms ease-in, background-size 150ms ease-in, background-color 150ms ease-in, -webkit-box-shadow 150ms ease-in;
}

input.under-line:focus, textarea.under-line:focus {
    background-image: linear-gradient(to top, #ef4b66, #ef4b66 2px, transparent 2px, transparent 100%);
    background-size: 100% 100%;
    border-bottom: 0px solid #ef4b66;
}

.under-line + .select2-container--default .select2-selection--single:focus {
    background-image: linear-gradient(to top, #ef4b66, #ef4b66 2px, transparent 2px, transparent 100%);
    background-size: 100% 100%;
    border-bottom: 0px solid #ef4b66;
}

/* input.under-line:read-only,textarea.under-line:read-only {border-bottom:0;} */
input.under-line:read-only:focus, textarea.under-line:read-only:focus {
    background-image: none;
    background-size: 100% 100%;
    border-bottom: 0;
}

select:disabled + .select2-container--default .select2-selection--single {
    border: 1px solid #cfcfcf;
}

select:disabled {
    background-color: #f9f9f9;
}

select:disabled {
    color: #807d7d;
}

/* form controls */
.radio-group input[type=radio] {
    margin-left: 17px !important;
}

.radio-group input[type=radio]:first-child {
    margin-left: 0 !important;
}

.check-group input[type=checkbox] {
    margin-left: 35px !important;
}

.check-group input[type=checkbox]:first-child {
    margin-left: 0 !important;
}

.split {
    position: relative;
    top: 2px;
    padding: 0 12px;
    color: #666;
}

.date-wrap + .form-date {
    margin-left: 28px;
}

.date-wrap span.dash {
    margin-left: 5px;
    margin-right: 5px;
}

.input-group {
    display: flex;
    align-items: center;
}

.datepicker {
    z-index: 10000 !important;
}

.ui-timepicker-container {
    z-index: 10001 !important;
}

.ui-timepicker-standard a {
    font-size: 13px;
    text-align: left;
}

.daterangepicker {
    z-index: 10000;
}

input.datepicker {
    background: url('../images/sub/ico_cal.png') no-repeat 93% 55%;
    border-radius: 0;
    width: 115px;
    padding-left: 8px;
    padding-right: 24px;
}

input.timepicker {
    background: url('../images/sub/ico_time.png') no-repeat 90% 55%;
    border-radius: 0;
    width: 75px;
    padding-left: 8px;
    padding-right: 24px;
}

/* button */
button:disabled {
    background-color: #ddd !important;
}

.btn-red:hover {
    opacity: 0.7;
}

.btn-blue:hover {
    opacity: 0.7;
}

.btn-blue.disabled {
    background-color: #ddd;
}

.btn-blue.disabled:hover {
    background-color: #ddd;
    opacity: 1;
    cursor: default;
}

.btn-red.disabled {
    background-color: #ddd;
}

.btn-red.disabled:hover {
    background-color: #ddd;
    opacity: 1;
    cursor: default;
}

.btn-block {
    margin-top: 20px;
    text-align: center;
}

.btn-block:after {
    content: "";
    display: block;
    clear: both;
}

.btn-block a, .btn-block button {
    margin: 0 3px;
}

.btn-down {
    display: inline-block;
    min-width: 110px;
    height: 42px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #ef4b66 !important;
    vertical-align: middle;
    border: 1px solid #ef4b66;
    background: #fff;
    white-space: nowrap;
    padding: 0 15px;
}

.btn-down:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 13px;
    margin-right: 5px;
    background: url('../images/sub/ico_down2.png') no-repeat 50% 50%;
}

.btn-down:hover {
    color: #fff !important;
    background: #ef4b66;
}

.btn-down:hover:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 13px;
    margin-right: 5px;
    background: url('../images/sub/ico_down3.png') no-repeat 50% 50%;
}

.btn-down-xls {
    display: inline-block;
    min-width: 110px;
    height: 42px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #fff !important;
    vertical-align: middle;
    border: 1px solid #ef4b66;
    background: #ef4b66;
    white-space: nowrap;
    padding: 0 15px;
}

.btn-down-xls:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 13px;
    margin-right: 5px;
    background: url('../images/sub/ico_down3.png') no-repeat 50% 50%;
}

.btn-down-xls:hover {
    color: #ef4b66 !important;
    background: #fff;
    border: 1px solid #ef4b66;
}

.btn-down-xls:hover:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 13px;
    margin-right: 5px;
    background: url('../images/sub/ico_down2.png') no-repeat 50% 50%;
}

.btn-down.disabled {
    opacity: 0.4;
    cursor: default;
}

.btn-down.disabled:hover {
    border: 1px solid #ef4b66;
    background: #fff;
    color: #ef4b66 !important;
}

.btn-down.disabled:hover:before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 13px;
    margin-right: 5px;
    background: url('../images/sub/ico_down2.png') no-repeat 50% 50%;
}

.btn-share {
    display: inline-block;
    min-width: 110px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    font-size: 14px;
    color: #fff !important;
    vertical-align: middle;
    background: #ef4b66;
    white-space: nowrap;
}

.btn-share:before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 14px;
    margin-right: 5px;
    background: url('../images/sub/ico_shar2.png') no-repeat 50% 50%;
}

.btn-share:disabled, .btn-share[disabled] {
    border: 1px solid #ddd;
    background-color: #cccccc;
    color: #666666;
}

.btn-share:hover {
    opacity: 0.85;
}

.form-date button {
    min-width: 60px;
    height: 32px;
    line-height: 32px;
    margin-right: 2px;
    padding: 0 8px;
    color: #999 !important;
    font-size: 14px;
    background: #f7f7f7;
    vertical-align: middle;
    white-space: nowrap;
    border-radius: 32px;
}

/* .form-date button.on {color:#fff !important;background:#ef4b66;} */
.form-date button:hover {
    color: #fff !important;
    background: #ef4b66;
}

.btn-sel {
    display: inline-block;
    min-width: 44px;
    height: 25px;
    line-height: 23px;
    margin-left: 5px;
    text-align: center;
    font-size: 13px;
    color: #ef4b66 !important;
    vertical-align: middle;
    border: 1px solid #ef4b66;
    background: #fff;
    white-space: nowrap;
}

.btn-preview {
    display: inline-block;
    min-width: 135px;
    height: 42px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #ef4b66 !important;
    vertical-align: middle;
    border: 1px solid #ef4b66;
    background: #fff;
    white-space: nowrap;
}

.btn-preview:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url('../images/sub/ico_play3.png') no-repeat 50% 50%;
    position: relative;
    top: 2px;
}

.btn-preview:hover {
    color: #fff !important;
    background: #ef4b66;
}

.btn-preview:hover:before {
    background: url('../images/sub/ico_play3_w.png') no-repeat 50% 50%;
}

.btn-save {
    display: inline-block;
    min-width: 135px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    font-size: 14px;
    color: #fff !important;
    vertical-align: middle;
    background: #ef4b66;
    white-space: nowrap;
}

.btn-save:before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 11px;
    margin-right: 5px;
    background: url('../images/sub/ico_check.png') no-repeat 50% 50%;
}

.btn-cancel {
    display: inline-block;
    min-width: 100px;
    height: 42px;
    line-height: 40px;
    padding: 0 20px;
    text-align: center;
    font-size: 14px;
    color: #ef4b66 !important;
    vertical-align: middle;
    border: 1px solid #ef4b66;
    background: #fff;
    white-space: nowrap;
}

.btn-end {
    display: inline-block;
    min-width: 100px;
    height: 42px;
    line-height: 42px;
    padding: 0 20px;
    text-align: center;
    font-size: 14px;
    color: #fff !important;
    vertical-align: middle;
    background: #ef4b66;
    white-space: nowrap;
}

a.filter {
    display: inline-block;
    height: 28px;
    padding: 0 12px 0 12px;
    line-height: 26px;
    font-size: 13px;
    font-weight: 300;
    text-align: center;
    color: #1f1f1f;
    background: #fff;
    border: 1px solid #666;
}

a.filter i {
    font-size: 15px;
}

a.filter.on {
    color: #fff;
    background: #f04b66;
    border: 1px solid #f04b66;
}

a.filter:first-child {
    margin-right: 5px;
}

a.filter:hover {
    color: #fff;
    background: #f04b66;
    border: 1px solid #f04b66;
    opacity: 0.7;
}

a.tooltip .circle.gray {
    display: inline-block;
    font-style: normal;
    padding: 0;
    width: 18px;
    height: 18px;
    line-height: 16px;
    color: #fff;
    font-weight: 700;
    font-size: 12px;
    text-align: center;
    background: #999;
    border-radius: 100%;
    vertical-align: middle;
    font-style: normal;
    position: relative;
    top: -2px;
    margin: 0 2px;
    cursor: pointer;
}

a.tooltip .circle.gray i {
    font-style: normal;
}

a.tooltip:hover {
    color: #000;
}

a.tooltip:hover .circle.gray {
    background: #666;
}

/* AI수학 */
.textbook-title {
    position: relative;
    margin-bottom: 52px;
    color: #20212a;
    font-size: 45px;
    font-weight: bold;
    font-family: 'SDBook';
}

.textbook-title span {
    display: inline-block;
    margin-right: 15px;
    color: #666;
    font-size: 37px;
    font-weight: normal;
}

.textbook-title p {
    display: inline-block;
}

.textbook-title .lnb-menu {
    display: none;
}

#wrap.quiz .textbook-title {
    display: none;
}

.study-tab:after {
    content: "";
    display: block;
    clear: both;
}

.study-tab li {
    float: left;
    width: calc(100% / 3);
    text-align: center;
    background: #fff;
}

.study-tab li.w50 {
    width: calc(100% / 2);
}

.study-tab li a {
    display: block;
    height: 54px;
    line-height: 54px;
    font-size: 22px;
    color: #999;
    border-bottom: 4px solid #ccc;
    transition: all 0.2s;
}

.study-tab li.on a, .study-tab li a:hover {
    color: #212121;
    font-size: 28px;
    font-weight: 700;
    border-bottom: 4px solid #37b4dc;
}

.badge {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    padding: 0 12px;
    font-size: 13px;
    font-weight: 300;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
}

.bg-orange {
    background-color: #f3774b !important;
}

.bg-yellow {
    background-color: #fbc020 !important;
}

.bg-purple {
    background-color: #736ee9 !important;
}

.bg-darkblue {
    background-color: #6591e8 !important;
}

.bg-blue {
    background-color: #55b7ef !important;
}

.bg-green {
    background-color: #4ec1ce !important;
}

.bg-pink {
    background-color: #EE7F95 !important;
}

.study-list li {
    display: flex;
    position: relative;
    padding: 27px 430px 25px 30px;
    font-size: 18px;
    color: #101010;
    line-height: 1.3;
    border-bottom: 1px solid #e8e8e8;
}

.study-list li .badge {
    position: relative;
    top: -1px;
    margin-right: 8px;
    min-width: 60px;
}

.study-list li a {
    color: #101010;
}

.study-list li .tit {
    display: inline-block;
    font-size: 18px;
    color: #101010;
    vertical-align: middle;
}

.study-list li .tit em {
    display: block;
    font-size: 15px;
    color: #f04b66;
    font-weight: 300;
    margin-top: 5px;
}

.study-list li .tit:hover {
    text-decoration: underline;
    text-underline-position: under;
    font-weight: 600;
}

.study-list li .btn-group {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.study-list li .btn-group a {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-left: 10px;
    text-indent: -9999px;
    overflow: hidden;
    background-color: #f4f4f4;
    transition: all 0.3s;
    border-radius: 100%;
    vertical-align: middle;
}

.study-list li .btn-group a.preview {
    background: #f4f4f4 url('../images/sub/ico_preview.png') no-repeat 50% 50%;
}

.study-list li .btn-group a.preview:hover {
    background: #37b4dc url('../images/sub/ico_preview_on.png') no-repeat 50% 50%;
}

.study-list li .btn-group a.share {
    background: #f4f4f4 url('../images/sub/ico_share.png') no-repeat 45% 50%;
}

.study-list li .btn-group a.share:hover {
    background: #37b4dc url('../images/sub/ico_share_on.png') no-repeat 45% 50%;
}

.study-list li .btn-group a.study {
    width: auto;
    height: 30px;
    line-height: 28px;
    padding: 0 14px;
    font-size: 13px;
    color: #37b4dc;
    font-weight: 400;
    background: #fff;
    border: 1px solid #43bee6;
    border-radius: 35px;
    text-indent: 0;
}

.study-list li .btn-group a.study:hover {
    color: #fff;
    background: #43bee6;
}

.study-list li .btn-group a.download {
    background: #f4f4f4 url('../images/sub/ico_down.png') no-repeat 50% 50%;
}

.study-list li .btn-group a.download:hover {
    background: #37b4dc url('../images/sub/ico_down_on.png') no-repeat 50% 50%;
}

.study-list li .btn-group a.download.disabled {
    background: #f4f4f4 url('../images/sub/ico_down.png') no-repeat 50% 50%;
    opacity: 0.6;
    cursor: default;
}

.study-list li .btn-group a.download.disabled:hover {
    background: #f4f4f4 url('../images/sub/ico_down.png') no-repeat 50% 50%;
    opacity: 0.5;
    cursor: default;
}

.study-list li .btn-group a.start {
    background: #f4f4f4 url('../images/sub/ico_start.png') no-repeat 50% 50%;
}

.study-list li .btn-group a.start:hover {
    background: #37b4dc url('../images/sub/ico_start_on.png') no-repeat 50% 50%;
}

.study-list li.no-data {
    padding: 28px 0;
    text-align: center;
    font-size: 16px;
    color: #777;
    display: block;
}

.study-container .category {
    padding: 36px 0 15px;
}

.study-container .category button {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    margin-right: 2px;
    padding: 0 25px;
    color: #666;
    font-size: 14px;
    font-weight: 400;
    background: #f1f1f1;
    border-radius: 32px;
    vertical-align: middle;
    transition: all 0.3s;
}

.study-container .category button.on, .study-container .category button:hover {
    color: #fff;
    font-weight: 500;
    background: #37b4dc;
}

.study-container .category .form-category {
    display: none;
}

.study-container .toggle-list {
    line-height: 1.3;
    border-top: 1px solid #4f4f4f;
}

.study-container .toggle-list dt span {
    display: block;
    padding: 20px 25px;
    font-size: 15px;
    color: #000;
    border-bottom: 1px solid #e1e1e1;
    cursor: pointer;
    transition: all 0.3s;
    background: #fafafa url('../images/sub/ico_arrow.png') no-repeat right 35px top 50%;
}

.study-container .toggle-list dt.on span {
    font-size: 18px;
    font-weight: 500;
    background: #eff9fc url('../images/sub/ico_arrow_on.png') no-repeat right 35px top 50%;
}

.study-container .toggle-list dt span em {
    display: inline-block;
    margin-left: 10px;
    font-size: 13px;
    color: #777;
    font-weight: 300;
}

.study-container .toggle-list .cont {
    display: none;
}

.study-appraisal {
    position: relative;
    margin-top: 30px;
    padding: 40px 50px;
    background: #f4f4f4;
}

.study-appraisal h3 {
    margin-bottom: 20px;
    color: #101010;
    font-size: 24px;
    font-weight: 700;
}

.study-appraisal .step {
    overflow: hidden;
    width: 640px;
}

.study-appraisal .step li {
    position: relative;
    display: table;
    float: left;
    width: 30%;
    height: 35px;
    padding-left: 15px;
    font-size: 14px;
    color: #fff;
    background: #63c2e1;
    text-align: center;
}

.study-appraisal .step li span {
    position: relative;
    top: -1px;
    z-index: 2;
    display: table-cell;
    vertical-align: middle;
}

.study-appraisal .step li:after {
    display: block;
    position: absolute;
    z-index: 1;
    content: '';
    top: 50%;
    right: 0;
    background-color: #63c2e1;
    width: 28px;
    height: 28px;
    border-style: solid;
    border-color: #fff;
    border-width: 0 4px 4px 0;
    transform: translateY(-50%) translateX(50%) rotate(-45deg);
}

.study-appraisal .step li.li02 {
    background: #37b4dc;
}

.study-appraisal .step li.li02:after {
    background-color: #37b4dc;
}

.study-appraisal .step li.li03 {
    background: #1c85a7;
}

.study-appraisal .step li.li03:after {
    border-width: 0;
    background-color: #1c85a7;
}

.study-appraisal .info {
    margin-top: 13px;
}

.study-appraisal .info li {
    position: relative;
    padding-left: 10px;
    color: #666;
    font-size: 15px;
    font-weight: 500;
    line-height: 25px;
}

.study-appraisal .info li strong {
    color: #000;
}

.study-appraisal .info li:before {
    content: "ㆍ";
    position: absolute;
    left: -3px;
    top: 0;
}

.study-appraisal .btn-link {
    position: absolute;
    right: 50px;
    top: 80px;
    display: inline-block;
    width: 205px;
    height: 94px;
    line-height: 94px;
    padding-right: 20px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    font-weight: 300;
    background: #f04b66 url('../images/sub/ico_arrow2.png') no-repeat right 30px top 50%;
    white-space: nowrap;
    box-shadow: 4px 3px 10px 0 rgba(151, 151, 151, 0.22);
}

/* 미리보기 */
.preview-wrap:after {
    content: "";
    display: block;
    clear: both;
}

.preview-wrap .thumb {
    float: left;
    width: 50%;
    padding: 0 42px;
}

.preview-wrap .thumb p.help {
    font-size: 12px;
    color: #777;
    padding-top: 8px;
}

.preview-wrap .thumb-slider {
    position: relative;
    width: 330px;
    height: 466px;
    box-shadow: 0px 30px 50px 0px rgba(120, 120, 120, 0.21);
    border: 1px solid #e1e1e1;
}

.previewImages-wrap .thumb-slider2 {
    position: relative;
    width: 330px;
    height: 466px;
    margin: 0 auto;
    box-shadow: 0px 30px 50px 0px rgba(120, 120, 120, 0.21);
    border: 1px solid #e1e1e1;
}

.preview-wrap .thumb-slider img, .previewImages-wrap .thumb-slider2 img {
    width: 100%;
}

.preview-wrap .thumb-slider .slick-arrow, .previewImages-wrap .thumb-slider2 .slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 20px;
    height: 30px;
    text-indent: -999px;
    overflow: hidden;
}

.preview-wrap .thumb-slider .slick-prev, .previewImages-wrap .thumb-slider2 .slick-prev {
    left: -42px;
    background: url('../images/sub/ico_prev2.png') no-repeat 50% 50%;
}

.preview-wrap .thumb-slider .slick-next, .previewImages-wrap .thumb-slider2 .slick-next {
    right: -42px;
    background: url('../images/sub/ico_next2.png') no-repeat 50% 50%;
}

.preview-wrap .info {
    position: relative;
    float: left;
    width: 50%;
    min-height: 466px;
    padding: 0 0 50px 15px;
}

.preview-wrap .info .subject {
    min-height: 100px;
}

.preview-wrap .info .subject dt {
    position: relative;
    padding-left: 40px;
    margin-bottom: 12px;
    color: #1f1f1f;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
}

.preview-wrap .info .subject dt span {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    color: #ef4b66;
    font-weight: 500;
}

.preview-wrap .info .subject dd {
    position: relative;
    margin-bottom: 5px;
    padding-left: 0px;
    color: #444;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    display: flex;
}

.preview-wrap .info .subject dd span {
    color: #fff;
    border-radius: 3px;
    padding: 0 5px;
    display: inline-block;
    font-size: 12px;
    font-weight: 300;
    margin-right: 5px;
    display: flex;
    align-items: baseline;
}

.preview-wrap .info .subject dd span.type-a {
    background: #37b4dc;
    flex: none;
    height: 20px;
}

.preview-wrap .info .subject dd span.type-b {
    background: #36d88c;
    flex: none;
    height: 20px;
}

.preview-wrap .info .secondary {
    margin-top: 70px;
}

.preview-wrap .info .secondary dt {
    margin-bottom: 12px;
    color: #1f1f1f;
    font-size: 16px;
    font-weight: 300;
    line-height: 1.2;
}

.preview-wrap .info .secondary dt span {
    color: #ef4b66;
    font-weight: 500;
}

.preview-wrap .info .secondary dd {
    margin-bottom: 6px;
    line-height: 1.2;
}

.preview-wrap .info .secondary dd span {
    display: block;
    color: #555;
    font-size: 14px;
    font-weight: 400;
}

.preview-wrap .info .help {
    margin-top: 70px;
    background: #f3f3f5;
    border-radius: 10px;
    padding: 10px 20px;
    font-size: 14px;
    color: #444;
    font-weight: 300;
    line-height: 20px;
}

.preview-wrap .info .help a {
    color: #ef4b66;
    font-weight: 500;
}

.preview-wrap .info .btn-block {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.preview-wrap .info .btn-block a {
    margin: 0 8px;
}

/* 학생 공유 */
.share-write > ul > li {
    display: table;
    width: 100%;
    margin-bottom: 30px;
}

.share-write > ul > li:last-child {
    margin-bottom: 0;
}

.share-write .tit {
    display: block;
    width: 120px;
    padding-top: 8px;
    vertical-align: top;
    font-size: 16px;
    color: #1f1f1f;
}

.share-write .tit.type2 {
    padding-top: 0;
}

.share-write .tit .info {
    display: inline-block;
    width: 19px;
    height: 19px;
    text-indent: -9999px;
    overflow: hidden;
    background: url('../images/common/ico_info.png') no-repeat 0 0;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 3px;
    position: relative;
    top: -2px;
}

.share-write .cont {
    display: table-cell;
    width: 100%;
    vertical-align: top;
    font-size: 14px;
    color: #666;
    font-weight: 300;
}

.share-write #minBtnArea {
    margin-left: 10px;
}

.share-write .cont input.mb15 {
    margin-bottom: 15px;
}

.share-write .cont li {
    margin-bottom: 0px;
}

.share-write .cont li.type2 {
    margin-bottom: 15px;
}

.share-write .cont li .txt {
    display: inline-block;
    vertical-align: middle;
    margin-left: 15px;
    font-size: 13px;
    color: #999;
    font-weight: 300;
}

.share-write .cont li .score {
    text-align: center;
    padding: 0;
    width: 50px;
}

.share-write .btn-block {
    border-top: 1px solid #e1e1e1;
    padding-top: 30px;
    margin-top: 15px;
}

.share-write .add-textbook {
    width: 730px;
    margin-top: 15px;
    text-align: center;
}

.share-write .add-textbook .add-box {
    width: 100%;
    margin-bottom: 12px;
    background: #f3f3f5;
    border-radius: 10px;
    padding: 10px 15px;
    color: #101010;
    font-size: 14px;
    text-align: left;
}

.share-write .add-textbook .add-box .b-point-check {
    display: inline-block;
    width: 22px;
    vertical-align: top;
    margin-right: 5px;
    padding-top: 9px;
}

.share-write .add-textbook .add-box .b-point {
    display: inline-block;
    width: 120px;
    vertical-align: top;
    margin-right: 5px;
}

.share-write .add-textbook .add-box .b-point .help-block.error {
    display: none;
}

.share-write .add-textbook .add-box .b-select {
    display: inline-block;
    width: calc(100% - 160px);
    vertical-align: top;
}

.share-write .add-textbook .add-box .input-group {
    display: inline-block;
    width: calc(100% - 70px);
}

.share-write .add-textbook .add-box .score {
    width: 46px;
    height: 36px;
    padding: 0;
    text-align: center;
}

.share-write .add-textbook .add-box .score:read-only {
    border: 0;
    background: #f3f3f5;
}

.share-write .add-textbook .add-box .form-category {
    height: 36px;
    border: 1px solid #e6e6e6;
    width: 100%;
}

.share-write .add-textbook .add-box .btn {
    min-width: 50px;
    height: 34px;
    line-height: 34px;
    margin-left: 8px;
    padding: 0 8px;
    font-size: 14px;
    vertical-align: middle;
    white-space: nowrap;
    color: #fff !important;
    background: #37b4dc;
    border-radius: 5px;
}

.share-write .add-textbook .btn-add {
    width: 100px;
    height: 40px;
    line-height: 40px;
    background: #37b4dc;
    font-size: 30px;
    color: #fff;
    font-weight: 300;
    border-radius: 10px;
    margin-right: 10px;
}

.share-write .add-textbook .btn-del {
    width: 100px;
    height: 40px;
    line-height: 40px;
    background: #444;
    font-size: 42px;
    color: #fff;
    font-weight: 300;
    border-radius: 10px;
}

.share-write .cont .txt-type {
    padding-top: 8px;
}

.share-write .cont .item-list1 {
    overflow: hidden;
    margin-top: 22px;
}

.share-write .cont .item-list1 > li {
    margin-bottom: 0;
    float: left;
    margin-left: 10px;
}

.share-write .cont .item-list1 > li:first-child {
    margin-left: 0;
}

/*퀴즈 학생 공유옵션 토브에서 수정합니다.원복하지 말아주세요.*/
.share-write .cont .item-list1 li button {
    width: 226px;
    height: 100px;
    padding-bottom: 38px;
    font-size: 14px;
    font-weight: 500;
    color: #a6a6a6;
    background: #f4f4f4 url('../images/sub/ico_play2.png') no-repeat 50% 60px;
    border-radius: 10px;
}

.share-write .cont .item-list1 li button.on {
    color: #ffffff;
    background: #ef4b66 url('../images/sub/ico_play2_on.png') no-repeat 50% 60px;
}

.share-write .cont .item-list2 > li {
    padding-right: 100px;
}

.share-write .cont .item-list2 > li.last {
    margin-top: 0px;
    height: 40px;
    line-height: 40px;
}

.share-write .cont .chk-list {
    overflow: hidden;
}

.share-write .cont .chk-list li {
    float: left;
    width: 25%;
    margin: 0 20px 0px 0;
    height: 40px;
    line-height: 40px;
}

.share-write .cont .chk-list .datepicker {
    height: 28px;
}

/* 퀴즈온 */
.quiz-header {
    margin-bottom: 22px;
}

.quiz-header a {
    display: inline-block;
    padding: 0 24px 0 58px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 15px;
    color: #fff;
    vertical-align: middle;
    white-space: nowrap;
    border-radius: 45px;
}

.quiz-header .btn1 {
    background: #5a5a5a url('../images/sub/ico_quiz1_white.png') no-repeat 24px 50%;
}

.quiz-header .btn2 {
    margin-left: 8px;
    background: #5a5a5a url('../images/sub/ico_quiz2_white.png') no-repeat 24px 50%;
}

.quiz-header .btn1:hover {
    background: #f04b66 url('../images/sub/ico_quiz1_white.png') no-repeat 24px 50%;
}

.quiz-header .btn2:hover {
    background: #f04b66 url('../images/sub/ico_quiz2_white.png') no-repeat 24px 50%;
}

.quiz-header .lnb-menu {
    display: none;
}

.quiz-slider {
    position: relative;
}

.quiz-slider li .quiz-num {
    position: absolute;
    top: 20px;
    left: 20px;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    font-size: 16px;
    color: #1f1f1f;
    font-weight: 300;
    box-shadow: 1px 1px 10px 0px rgba(82, 82, 82, 0.11);
    background: rgba(255, 255, 255, 0.7);
    border-radius: 28px;
    text-align: center;
}

.quiz-slider li .quiz-num .clr1 {
    color: #bb8d00;
}

.quiz-slider li .quiz-num .clr2 {
    color: #708fe7;
}

.quiz-slider li .quiz-num .clr3 {
    color: #dd7527;
}

.quiz-slider .cover {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    background: rgba(0, 0, 0, 0.5);
}

.quiz-slider .cover .tit {
    padding: 14px 160px 14px 20px;
    font-size: 16px;
    color: #fff;
    font-weight: 300;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.quiz-slider .cover .right {
    position: absolute;
    right: 20px;
    top: 10px;
}

.quiz-slider .cover .id {
    font-size: 14px;
    color: #fff;
    font-weight: 300;
}

.quiz-slider .cover .play {
    display: inline-block;
    margin-left: 22px;
    padding: 5px 0 5px 25px;
    font-size: 14px;
    color: #fff;
    font-weight: 300;
    background: url('../images/sub/ico_play_white.png') no-repeat 0 50%;
}

.quiz-slider .btns button {
    position: absolute;
    top: 50%;
    width: 45px;
    height: 45px;
    background-color: #333;
    z-index: 1;
    transform: translateY(-50%);
    text-indent: -9999px;
    overflow: hidden;
    border-radius: 45px;
    box-shadow: 7px 0px 30px 0px rgba(145, 145, 145, 0.55);
}

.quiz-slider .btns button.quick_prev {
    left: 17%;
    background: #333 url('../images/sub/ico_prev.png') no-repeat 45% 50%;
}

.quiz-slider .btns button.quick_next {
    right: 17%;
    background: #333 url('../images/sub/ico_next.png') no-repeat 55% 50%;
}

.quiz-slider .mask {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: #000;
    opacity: 0.3;
}

.quiz-slider .owl-item.active .mask {
    width: 0;
    height: 0;
}

.quiz-slider .owl-item.active .cover {
    display: block;
}

.quiz-slider .slideQuizMain {
    height: 343px;
}

@media only all and (max-width: 1024px) {
    .quiz-slider .slideQuizMain {
        height: 34vw;
    }
}

@media only all and (max-width: 767px) {
    .quiz-slider .slideQuizMain {
        height: 37vw;
    }
}

@media only all and (max-width: 480px) {
    .quiz-slider .slideQuizMain {
        height: 55vw;
    }
}

.quiz-tit {
    margin: 80px 0 10px;
    position: relative;
    border-bottom: 4px solid #ccc;
    min-height: 45px;
}

.quiz-tit h3 {
    padding-bottom: 12px;
    font-size: 28px;
    color: #212121;
    font-weight: 700;
}

.quiz-tit .right {
    position: absolute;
    right: 0;
    top: 5px;
}

.quiz-tit .more {
    padding-right: 12px;
    font-size: 13px;
    color: #999;
    font-weight: 300;
    background: url('../images/sub/ico_more.png') no-repeat 100% 60%;
}

.quiz-list ul {
    margin-right: -20px;
}

.quiz-list ul:after {
    content: "";
    display: block;
    clear: both;
}

.quiz-list li {
    position: relative;
    float: left;
    width: calc(25% - 20px);
    margin: 20px 20px 0 0;
    border: 1px solid #e1e1e1;
    transition: all 0.3s;
}

/*.quiz-list li:hover {border:1px solid #f5d81d;box-shadow:0 15px 50px 0 rgba(120, 120, 120, 0.21);}*/
.quiz-list li a {
    display: block;
}

.quiz-list li .thumb {
    position: relative;
    padding-top: 57%;
    overflow: hidden;
}

.quiz-list li .thumb.yellow {
    background: #fbe247;
}

.quiz-list li .thumb.blue {
    background: #6eb9fd;
}

.quiz-list li .thumb.purple {
    background: #a492e8;
}

.quiz-list li .thumb.green {
    background: #4cd5c3;
}

.quiz-list li .thumb.orange {
    background: #ec9357;
}

.quiz-list li .thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.quiz-list li .thumb .tit-wrap {
    position: absolute;
    top: 12px;
    left: 20px;
}

.quiz-list li .thumb .label {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    padding: 0 15px;
    font-size: 13px;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 36px;
}

.quiz-list li .thumb .tit {
    margin-top: 6px;
    padding-right: 10px;
    font-size: 17px;
    color: #1f1f1f;
    font-weight: 500;
    line-height: 25px;
    text-overflow: ellipsis;
    white-space: normal;
    max-height: 4.5em;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

.quiz-list li .quiz-num {
    display: inline-block;
    font-size: 14px;
    color: #3f3f3f;
}

.quiz-list li .quiz-num .clr1 {
    color: #bb8d00;
}

.quiz-list li .quiz-num .clr2 {
    color: #708fe7;
}

.quiz-list li .quiz-num .clr3 {
    color: #dd7527;
}

.quiz-list li .txt-unit {
    display: inline-block;
    font-size: 14px;
    color: #888888;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.quiz-list li .list-info {
    position: relative;
    padding: 13px 20px 16px;
    border-top: 1px solid #f0f0f0;
}

.quiz-list li .badge {
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 10px;
}

.quiz-list li .badge.bg-orange {
    background-color: #e78c48 !important;
}

.quiz-list li .badge.bg-purple {
    background-color: #708fe7 !important;
}

.quiz-list li .play {
    position: absolute;
    right: 0;
    top: -2px;
    display: inline-block;
    padding: 5px 0 5px 25px;
    font-size: 13px;
    color: #999;
    font-weight: 300;
    background: url('../images/sub/ico_play.png') no-repeat 0 50%;
}

.quiz-list li dl {
    padding: 12px 18px 20px;
}

.quiz-list li dt {
    height: 46px;
    font-size: 16px;
    line-height: 22px;
    color: #000;
    text-overflow: ellipsis;
    white-space: normal;
    max-height: 2.8em;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.quiz-list li dt a {
    color: #000;
}

.quiz-list li dd.id {
    margin-top: 12px;
    padding-right: 80px;
    font-size: 13px;
    color: #ababab;
    font-weight: 300;
    line-height: 1.4;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.quiz-list li dd.copy {
    position: absolute;
    right: 18px;
    bottom: 17px;
}

.quiz-list li dd.copy button {
    height: 25px;
    padding: 0 14px 0 32px;
    font-size: 13px;
    color: #999;
    font-weight: 300;
    border: 1px solid #e1e1e1;
    border-radius: 25px;
    background: #fff url('../images/sub/ico_copy.png') no-repeat 14px 50%;
}

.quiz-list li .info-block {
    position: relative;
    min-height: 26px;
}

.quiz-list li .info-block .id {
    display: block;
    margin-top: 12px;
    padding-right: 80px;
    font-size: 13px;
    color: #ababab;
    font-weight: 300;
    line-height: 1.4;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.quiz-list li .info-block .copy {
    position: absolute;
    right: 0;
    top: -1px;
}

.quiz-list li .info-block .copy button {
    width: 70px;
    height: 25px;
    padding: 0 0 0 20px;
    text-align: center;
    font-size: 13px;
    color: #999;
    font-weight: 300;
    border: 1px solid #e1e1e1;
    border-radius: 25px;
    background: #fff url('../images/sub/ico_copy.png') no-repeat 14px 50%;
}

.quiz-list li.no-data {
    width: 100%;
    padding: 100px 0;
    text-align: center;
    font-size: 16px;
    color: #777;
    border: 0;
    margin: 0;
}

.h3-quiz {
    margin-bottom: 60px;
    font-size: 45px;
    color: #1f1f1f;
    font-weight: 700;
    font-family: 'SDBook';
}

.quiz-make {
    overflow: hidden;
    min-height: 770px;
}

.quiz-make .quiz-left {
    position: relative;
    width: 472px;
    float: left;
    padding: 40px;
    border: 1px solid #e8e8e8;
    background: #ffffff;
}

.quiz-make .quiz-left .thumb-wrap .img-thumb {
    position: relative;
    width: 390px;
    height: 220px;
    padding: 35px 30px 30px;
    background: #fbe347;
    border: 1px solid #f0f0f0;
}

/* 업로드한 이미지가 있을 때만 dim 적용되어야 해서 주석처리합니다. 스크립트에서 처리합니다. */
/*.quiz-make .quiz-left .thumb-wrap .img-thumb:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:#fff;opacity: 0.5;}*/
.quiz-make .quiz-left .thumb-wrap .img-thumb .btn-del {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 14px;
    height: 15px;
    background: url('../images/sub/ico_del2.png') no-repeat 50% 50%;
    text-indent: -9999px;
    overflow: hidden;
}

.quiz-make .quiz-left .thumb-wrap .label {
    position: relative;
    display: inline-block;
    height: 35px;
    line-height: 35px;
    padding: 0 20px;
    font-size: 16px;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 36px;
}

.quiz-make .quiz-left .thumb-wrap .tit {
    position: relative;
    margin-top: 8px;
    font-size: 24px;
    color: #1f1f1f;
    font-weight: 500;
    line-height: 34px;
    word-break: break-all;
}

.quiz-make .quiz-left .thumb-wrap .thumb-list {
    overflow: hidden;
    margin-top: 10px;
}

.quiz-make .quiz-left .thumb-wrap .thumb-list li {
    float: left;
    margin-right: 10px;
}

.quiz-make .quiz-left .thumb-wrap .thumb-list .thumb {
    display: inline-block;
    width: 60px;
    height: 40px;
    background: #f4f4f4;
    cursor: pointer;
}

.quiz-make .quiz-left .thumb-wrap .thumb-list .thumb.yellow {
    background: #fbe347;
}

.quiz-make .quiz-left .thumb-wrap .thumb-list .thumb.orange {
    background: #fda264;
}

.quiz-make .quiz-left .thumb-wrap .thumb-list .thumb.blue {
    background: #6eb9fd;
}

.quiz-make .quiz-left .thumb-wrap .thumb-list .thumb.add {
    background: #f4f4f4 url('../images/sub/ico_add.png') no-repeat 50% 50%;
    text-indent: -9999px;
    overflow: hidden;
}

.quiz-make .quiz-left .quiz-tab-wrap {
    position: relative;
}

.quiz-make .quiz-left .quiz-tab-wrap .info {
    position: absolute;
    right: 0;
    top: 8px;
    display: inline-block;
    width: 18px;
    height: 18px;
    text-indent: -9999px;
    overflow: hidden;
    background: url('../images/common/ico_info.png') no-repeat 0 0;
    cursor: pointer;
}

.quiz-make .quiz-left .quiz-tab-wrap .tooltip3 .tooltiptext {
    margin-left: -185px;
}

.quiz-make .quiz-left .quiz-tab-wrap .tooltip3 .tooltiptext::after {
    margin-left: 0px;
}

.quiz-make .quiz-left .quiz-tab {
    margin: 50px 0 30px;
}

.quiz-make .quiz-left .quiz-tab:after {
    content: "";
    display: block;
    clear: both;
}

.quiz-make .quiz-left .quiz-tab li {
    float: left;
    text-align: center;
    background: #fff;
}

.quiz-make .quiz-left .quiz-tab li a {
    display: block;
    height: 38px;
    line-height: 36px;
    padding: 0 27px;
    margin-left: -1px;
    font-size: 14px;
    color: #ef4b66;
    border: 1px solid #ef4b66;
}

.quiz-make .quiz-left .quiz-tab li.on a {
    color: #fff;
    background: #ef4b66;
    font-weight: 500;
}

.quiz-make .quiz-left .quiz-write > li {
    display: table;
    width: 100%;
    margin-bottom: 20px;
}

.quiz-make .quiz-left .quiz-write > li:last-child {
    margin-bottom: 0;
}

.quiz-make .quiz-left .quiz-write > li input {
    font-size: 14px;
    text-overflow: ellipsis;
}

.quiz-make .quiz-left .quiz-write .tit {
    display: block;
    margin-bottom: 5px;
    vertical-align: top;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.quiz-make .quiz-left .quiz-write .cont {
    display: block;
    width: 100%;
    vertical-align: top;
    font-size: 14px;
    color: #666;
    font-weight: 300;
}

.quiz-make .quiz-left .quiz-write > li.type2 .tit {
    width: 85px;
}

.quiz-make .quiz-left .quiz-write > li.type2 .cont {
    display: table-cell;
}

.quiz-make .quiz-left .btn-block {
    margin-top: 40px;
}

.quiz-make .quiz-right {
    width: 780px;
    float: right;
}

.quiz-make .quiz-right .guide-txt {
    padding-bottom: 14px;
    font-size: 13px;
    color: #909fd8;
    font-weight: 300;
    text-align: center;
    line-height: 1.3;
}

.quiz-make .quiz-toggle {
    line-height: 1.3;
    border-top: 1px solid #e1e1e1;
}

/* .quiz-make .quiz-toggle {line-height:1.3;border-top:1px solid #e1e1e1;max-height:700px;overflow:auto;} */
.quiz-make .quiz-toggle > li {
    border-top: 1px solid #e1e1e1;
    margin-top: -1px;
    background: #ffffff;
}

.quiz-make .quiz-toggle > li > .title {
    position: relative;
}

.quiz-make .quiz-toggle > li > .title span {
    display: block;
    min-height: 50px;
    padding: 10px 180px 10px 25px;
    font-size: 15px;
    color: #1f1f1f;
    border-bottom: 1px solid #e1e1e1;
    cursor: pointer;
    transition: all 0.3s;
    background: #fafafa url('../images/sub/ico_arrow3.png') no-repeat right 20px top 50%;
}

.quiz-make .quiz-toggle > li > .title .num {
    display: inline-block;
    margin-right: 10px;
}

.quiz-make .quiz-toggle > li > .title .state {
    display: inline-block;
    height: 28px;
    line-height: 26px;
    margin-right: 5px;
    padding: 0 12px;
    font-size: 13px;
    color: #ef4b66;
    border: 1px solid #ef4b66;
    border-radius: 28px;
}

.quiz-make .quiz-toggle > li > .title .btn-group {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
}

.quiz-make .quiz-toggle > li > .title .btn-copy {
    display: inline-block;
    min-width: 52px;
    height: 28px;
    line-height: 26px;
    margin-left: 5px;
    text-align: center;
    font-size: 13px;
    color: #666 !important;
    vertical-align: middle;
    border: 1px solid #666;
    background: #fff;
    white-space: nowrap;
}

.quiz-make .quiz-toggle > li > .title .btn-del {
    display: inline-block;
    min-width: 52px;
    height: 28px;
    line-height: 28px;
    text-align: center;
    font-size: 13px;
    color: #fff !important;
    vertical-align: middle;
    background: #666;
    white-space: nowrap;
}

.quiz-make .quiz-right .btn-quizadd {
    display: inline-block;
    min-width: 267px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    font-size: 14px;
    color: #fff !important;
    vertical-align: middle;
    background: #666;
    white-space: nowrap;
}

.quiz-make .quiz-toggle > li > .title.on span {
    background: #fcfaf0 url('../images/sub/ico_arrow3_on.png') no-repeat right 20px top 50%;
}

.quiz-make .quiz-toggle > li > .title.on .num {
    padding-top: 4px;
}

.quiz-make .quiz-toggle > li > .title.on .state {
    display: none;
}

.quiz-make .quiz-toggle > li > .title.on .txt {
    display: none;
}

.quiz-make .quiz-toggle .cont {
    display: none;
    padding: 30px 25px;
}

.quiz-make .quiz-toggle .cont .state-tab button {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    padding: 0 15px;
    margin: 0 1px 5px;
    text-align: center;
    color: #666;
    font-size: 13px;
    font-weight: 300;
    background: #f7f7f7;
    border-radius: 28px;
    vertical-align: middle;
}

.quiz-make .quiz-toggle .cont .state-tab button.on, .quiz-make .quiz-toggle .cont .state-tab button:hover {
    color: #fff;
    font-weight: 500;
    background: #f04b66;
}

.quiz-make .quiz-toggle .quiz-write {
    margin-top: 20px;
}

.quiz-make .quiz-toggle .quiz-write > li {
    display: table;
    width: 100%;
    margin-bottom: 10px;
}

.quiz-make .quiz-toggle .quiz-write > li input {
    font-size: 14px;
}

.quiz-make .quiz-toggle .quiz-write .tit {
    display: block;
    width: 65px;
    padding-top: 7px;
    margin-bottom: 5px;
    vertical-align: top;
    font-size: 15px;
    color: #333;
    font-weight: 500;
}

.quiz-make .quiz-toggle .quiz-write .input {
    display: table-cell;
    width: 100%;
    vertical-align: top;
    font-size: 14px;
    color: #666;
    font-weight: 300;
}

.quiz-make .quiz-toggle .quiz-write .input p.help {
    line-height: 20px;
    padding-top: 7px;
    padding-bottom: 5px;
}

.quiz-make .quiz-toggle .quiz-write > li.type2 {
    margin-top: 15px;
}

.quiz-make .quiz-toggle .quiz-write > li.type2 .tit {
    padding-top: 2px;
}

.quiz-make .quiz-toggle .quiz-write .input .form-time {
    height: 20px;
    text-align: center;
    margin-left: 3px;
}

.quiz-make .quiz-toggle .quiz-write .input.media {
    overflow: hidden;
}

.quiz-make .quiz-toggle .quiz-write .input.media ul {
    float: left;
    width: 380px;
}

.quiz-make .quiz-toggle .quiz-write .input.media .media-file-wrap {
    float: right;
}

.quiz-make .quiz-toggle .quiz-write .input.media .media-file {
    position: relative;
    width: 270px;
    height: 150px;
    background: #f3f3f5;
    border: 1px solid #f0f0f0;
}

.quiz-make .quiz-toggle .quiz-write .input.media .btn-add {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 50px;
    height: 50px;
    background: url('../images/sub/ico_add2.png') no-repeat 50% 50%;
    transform: translate(-50%, -50%);
    text-indent: -9999px;
    overflow: hidden;
}

.quiz-make .quiz-toggle .quiz-write .input.media .btn-del {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 14px;
    height: 15px;
    background: url('../images/sub/ico_del2.png') no-repeat 50% 50%;
    text-indent: -9999px;
    overflow: hidden;
}

.quiz-make .quiz-toggle .quiz-write .input .input-group {
    margin-top: 10px;
    position: relative;
}

.quiz-make .quiz-toggle .quiz-write .input .input-group:first-child {
    margin-top: 0;
}

.quiz-make .quiz-toggle .quiz-write .input .del {
    width: 24px;
    height: 16px;
    background: url('../images/sub/ico_del3.png') no-repeat 50% 50%;
    text-indent: -9999px;
    overflow: hidden;
    margin-left: 5px;
}

.quiz-make .quiz-toggle .quiz-write .input .item-add {
    padding: 15px 0 10px;
    text-align: center;
}

.quiz-make .quiz-toggle .quiz-write .input textarea {
    height: 58px;
    margin-bottom: 5px;
    color: #666;
    font-size: 14px;
    border: 1px solid #e1e1e1;
}

.quiz-make .quiz-toggle .quiz-write .input .num {
    width: 40px;
    border: 1px solid #e1e1e1;
    text-align: center;
    margin-right: 10px;
}

#wrap.quiz .aside-lnb .lnb > li a:hover {
    color: #fff;
    font-weight: 500;
    background: #f04b66;
}

.textbook-preview:after {
    content: "";
    display: block;
    clear: both;
}

.textbook-preview .left {
    width: 342px;
    float: left;
    padding: 29px;
    border: 1px solid #e8e8e8;
}

.textbook-preview .left .thumb-wrap .img-thumb {
    width: 284px;
    height: 160px;
    padding: 20px;
    background: #fbe347;
}

.textbook-preview .left .thumb-wrap .label {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    padding: 0 15px;
    font-size: 13px;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 36px;
}

.textbook-preview .left .thumb-wrap .tit {
    margin-top: 8px;
    font-size: 17px;
    color: #1f1f1f;
    font-weight: 500;
    line-height: 25px;
    word-break: break-all;
}

.textbook-preview .left .quiz-info {
    margin-top: 30px;
    width: auto;
}

.textbook-preview .left .quiz-info > li {
    display: table;
    width: 100%;
    margin-bottom: 28px;
    background: none;
    line-height: inherit;
    border-radius: 0;
    min-height: auto;
}

.textbook-preview .left .quiz-info > li:last-child {
    margin-bottom: 0;
}

.textbook-preview .left .quiz-info .tit {
    display: block;
    margin-bottom: 12px;
    vertical-align: top;
    font-size: 16px;
    color: #333;
    font-weight: 500;
}

.textbook-preview .left .quiz-info .tit span {
    font-weight: 400;
    padding: 0;
    width: auto;
    font-size: inherit;
}

.textbook-preview .left .quiz-info .cont {
    display: block;
    width: 100%;
    vertical-align: top;
    font-size: 14px;
    color: #666;
    font-weight: 300;
}

.textbook-preview .left .quiz-info .cont .mail {
    padding-left: 20px;
    background: url('../images/sub/ico_person.png') no-repeat 0 50%;
}

.textbook-preview .left .quiz-info .cont .date {
    padding-left: 20px;
    margin-top: 8px;
    background: url('../images/sub/ico_time.png') no-repeat 0 50%;
}

.textbook-preview .left .quiz-info .cont .tag a {
    display: inline-block;
    margin: 0 10px 12px 0;
    font-size: 13px;
    color: #666;
    font-weight: 300;
    text-decoration: underline;
}

.textbook-preview .left .quiz-info .cont .tag a:hover {
    color: #f1778b;
}

.textbook-preview .left .btn-block {
    width: 284px;
    margin: 30px auto 0;
}

.textbook-preview .left .btn-block .btn-preview {
    width: calc(50% - 6px);
    min-width: auto;
    margin: 0 2px;
}

.textbook-preview .left .btn-block .btn-share {
    width: calc(100% - 4px);
    margin: 10px 0 0;
}

.textbook-preview .left .btn-block .btn-copy {
    width: calc(50% - 6px);
    margin: 0 2px;
    display: inline-block;
    height: 42px;
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #ef4b66 !important;
    vertical-align: middle;
    border: 1px solid #ef4b66;
    background: #fff;
    white-space: nowrap;
}

.textbook-preview .left .btn-block .btn-copy:before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url('../images/sub/ico_copy2.png') no-repeat 50% 50%;
    position: relative;
    top: 2px;
}

.textbook-preview .left .btn-block .btn-copy:hover {
    color: #fff !important;
    background: #ef4b66;
}

.textbook-preview .left .btn-block .btn-copy:hover:before {
    background: url('../images/sub/ico_copy2_w.png') no-repeat 50% 50%;
}

.textbook-preview .right {
    width: 605px;
    float: right;
}

.textbook-preview .right .scroll-box {
    height: 548px;
    overflow: auto;
}

.textbook-preview .right .quiz-type dt {
    position: relative;
    height: 50px;
    padding: 5px 7px;
    background: #f4f4f4;
}

.textbook-preview .right .quiz-type dt .num {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 22px;
    color: #fff;
    font-weight: 700;
    text-align: center;
    background: #5377c8;
    border-radius: 0 40px 40px 40px;
}

.textbook-preview .right .quiz-type dt .cata {
    font-size: 16px;
    color: #333;
    font-weight: 700;
    margin-left: 5px;
    position: relative;
    top: -2px;
}

.textbook-preview .right .quiz-type dt .time {
    position: absolute;
    right: 15px;
    top: 16px;
    padding: 2px 0 2px 20px;
    font-size: 14px;
    background: url('../images/sub/ico_time2.png') no-repeat 0 50%;
}

.textbook-preview .right .quiz-type dd {
    padding: 25px 10px 50px 15px;
}

.textbook-preview .right .quiz-type dd .question {
    position: relative;
    min-height: 22px;
    padding: 2px 0 0 42px;
    font-size: 16px;
    color: #101010;
    font-weight: 300;
    line-height: 1.4rem;
}

.textbook-preview .right .quiz-type dd .question .q {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 19px;
    color: #ef4b66;
    font-weight: 500;
    min-width: 30px;
    text-align: center;
    letter-spacing: -2px;
}

.textbook-preview .right .quiz-type dd .answer {
    margin-top: 20px;
    position: relative;
    min-height: 22px;
    padding: 2px 0 0 42px;
    font-size: 16px;
    color: #101010;
    font-weight: 300;
}

.textbook-preview .right .quiz-type dd .answer .a {
    position: absolute;
    left: 0;
    top: 0;
    font-size: 19px;
    color: #4850c5;
    font-weight: 500;
    min-width: 30px;
    text-align: center;
    letter-spacing: -2px;
}

.textbook-preview .right .quiz-type dd.media-type {
    overflow: hidden;
}

.textbook-preview .right .quiz-type dd.media-type .qa-wrap {
    float: left;
    width: 330px;
}

.textbook-preview .right .quiz-type dd .media-box {
    position: relative;
    float: right;
    width: 220px;
    min-height: 125px;
    height: auto;
    border: 1px solid #d9d9d9;
}

.textbook-preview .right .quiz-type dd .media-box .btn-zoom {
    position: absolute;
    right: 12px;
    top: 14px;
    width: 35px;
    height: 34px;
    text-indent: -9999px;
    overflow: hidden;
    background: url('../images/quiz/ico_zoom_red.png') no-repeat 50% 50%;
}

.textbook-preview .right .quiz-type dd .media-box img {
    width: 100%;
}

.textbook-preview .right .order-list li {
    padding: 10px 40px 10px 20px;
    margin-bottom: 5px;
    line-height: 1.2;
    border-radius: 50px;
    background: #f0f0f0 url('../images/sub/ico_move.png') no-repeat right 15px top 50%;
    cursor: move;
}

.textbook-preview .right .order-list li span.num {
    width: 18px;
    text-align: center;
    margin-right: 10px;
    background-color: #999;
    color: #fff;
    display: inline-block;
}

.textbook-preview .right .initial {
    overflow: hidden;
}

.textbook-preview .right .initial span {
    display: inline-block;
    width: 40px;
    height: 40px;
    line-height: 36px;
    margin: 0 3px 5px 0;
    border: 2px solid #666;
    border-radius: 5px;
    text-align: center;
    font-weight: 700;
}

.textbook-preview .right .initial-input {
    margin-top: 10px;
    border: 1px solid #e1e1e1;
}

.textbook-preview input[type=checkbox][disabled] + em {
    opacity: 1;
}

.secondary-sel li {
    display: flex;
    margin-bottom: 6px;
}

.secondary-sel li * {
    margin: 0 3px;
}

.questions .end-txt {
    margin-top: 80px;
    font-size: 15px;
    line-height: 25px;
}

.questions .end-txt span {
    color: #ef4b66;
}

.questions .end-list {
    margin-top: 15px;
    text-align: center;
}

.questions .end-list li {
    display: table;
    width: 100%;
    min-height: 52px;
    margin-bottom: 5px;
    padding: 12px 20px;
    background: #f4f4f4;
}

.questions .end-list li .tit {
    display: block;
    width: 100px;
    padding-top: 5px;
    vertical-align: top;
    font-size: 16px;
    color: #1f1f1f;
    font-weight: 500;
}

.questions .end-list li .cont {
    display: table-cell;
    width: 100%;
    vertical-align: top;
    font-size: 15px;
    color: #333;
}

.questions .end-list li .cont .link {
    display: inline-block;
    vertical-align: middle;
}

.questions .end-list li .cont .file {
    display: inline-block;
    vertical-align: middle;
}

.questions .end-list li .copy {
    display: inline-block;
    min-width: 80px;
    height: 28px;
    line-height: 26px;
    margin-left: 22px;
    text-align: center;
    font-size: 13px;
    color: #666 !important;
    vertical-align: middle;
    background: #f4f4f4;
    border: 1px solid #666;
    white-space: nowrap;
}

.questions .end-list li .qr-copy {
    display: block;
    min-width: 80px;
    height: 28px;
    line-height: 26px;
    margin-bottom: 5px;
    text-align: center;
    font-size: 13px;
    color: #666 !important;
    vertical-align: middle;
    background: #f4f4f4;
    border: 1px solid #666;
    white-space: nowrap;
}

.questions .end-list li .save {
    display: block;
    min-width: 80px;
    height: 28px;
    line-height: 26px;
    text-align: center;
    font-size: 13px;
    color: #666 !important;
    vertical-align: middle;
    background: #f4f4f4;
    border: 1px solid #666;
    white-space: nowrap;
}

.questions .end-list li .down {
    display: inline-block;
    min-width: 80px;
    height: 30px;
    line-height: 30px;
    margin-left: 20px;
    text-align: center;
    font-size: 13px;
    color: #fff !important;
    vertical-align: middle;
    background: #ef4b66;
    white-space: nowrap;
}

.questions .end-list li .btn-group {
    display: inline-block;
    vertical-align: middle;
    margin-left: 22px;
}

.questions .end-list li .btn-group .copy {
    margin-left: 0;
}

.questions .btn-block {
    margin-top: 25px;
    padding-top: 25px;
    text-align: center;
    border-top: 1px solid #e1e1e1;
}

.questions .btn-class {
    display: inline-block;
    height: 42px;
    line-height: 42px;
    padding: 0 20px;
    text-align: center;
    font-size: 14px;
    color: #fff !important;
    vertical-align: middle;
    background: #666;
    white-space: nowrap;
}

.questions .h3-info {
    margin: 10px 0 20px;
    font-size: 20px;
    color: #1f1f1f;
    font-weight: 700;
}

.questions .h3-info span {
    color: #ef4b66;
}

.questions .h3-info small {
    color: #2f2f2f;
    font-weight: 400;
}

.questions .info-txt {
    margin-bottom: 15px;
    font-size: 15px;
    color: #1f1f1f;
    font-weight: 500;
    line-height: 1.3;
}

/* .questions .info-list {border-bottom:1px solid #e1e1e1;} */
.questions .info-list li {
    display: table;
    width: 100%;
    margin-bottom: 15px;
    font-size: 15px;
    color: #1f1f1f;
    font-weight: 500;
    line-height: 1.3;
}

.questions .info-list li span {
    display: block;
    width: 134px;
    padding-top: 10px;
}

.questions .info-list li span.tit2 {
    padding-top: 2px;
}

.questions .info-list li span.tit3 {
    padding-top: 6px;
}

.questions .info-list li div {
    display: table-cell;
    width: 50%;
    color: #666;
    font-weight: 300;
}

.questions .info-list li div.full {
    width: 100%;
}

.questions .info-list li div.full.input {
    width: 100%;
    position: relative;
    padding-right: 90px;
    vertical-align: top;
}

.questions .info-list li div.full.input #liveClassUrl {
    line-height: 30px;
}

.questions .info-list li div.full .chk-list:after {
    clear: both;
    content: "";
    display: block;
}

.questions .info-list li div.full .chk-list li {
    float: left;
    width: 110px;
    margin-bottom: 0px;
}

.questions .info-list li .down, .questions .info-list li .btn {
    display: inline-block;
    min-width: 80px;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 13px;
    color: #fff !important;
    vertical-align: middle;
    background: #ef4b66;
    white-space: nowrap;
}

.questions .info-list li .btn {
    position: absolute;
    right: 0;
    top: 0
}

.questions .quiz-start {
    text-align: center;
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 20px;
}

.questions .quiz-start .txt {
    font-size: 15px;
    color: #1f1f1f;
    line-height: 25px;
}

.questions .btn-start {
    display: inline-block;
    margin-top: 25px;
    min-width: 164px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    font-size: 13px;
    color: #fff !important;
    vertical-align: middle;
    background: #ef4b66;
    white-space: nowrap;
}

.questions .part-num {
    margin-top: 25px;
    font-size: 20px;
    color: #1f1f1f;
    line-height: 1.3;
}

.questions .part-num span {
    color: #ef4b66;
    font-weight: 700;
}

.questions .part-num .more {
    display: inline-block;
    min-width: 64px;
    height: 28px;
    line-height: 24px;
    padding-right: 10px;
    margin-left: 5px;
    text-align: center;
    font-size: 13px;
    color: #ef4b66 !important;
    vertical-align: middle;
    background: #fff url('../images/sub/ico_arrow4.png') no-repeat 85% 50%;
    border: 1px solid #ef4b66;
    white-space: nowrap;
    border-radius: 28px;
    position: relative;
    top: -2px;
}

.questions .quiz-part {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 100px;
    width: 480px;
    padding: 10px 10px 10px 12px;
    background: #fff;
    transform: translateX(-50%);
    border: 1px solid #e1e1e1;
}

.questions .quiz-part li {
    float: left;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 3px 2px 2px 3px;
    text-align: center;
    font-size: 15px;
    color: #999;
    font-weight: 500;
    background: #f4f4f4;
}

.questions .quiz-part li.on {
    color: #fff;
    background: #00cbb5;
}

.questions .quiz-part .part-txt {
    margin: 25px 0 20px;
    font-size: 20px;
    color: #1f1f1f;
    line-height: 1.3;
}

.questions .quiz-part .part-txt span {
    color: #ef4b66;
    font-weight: 700;
}

.questions .quiz-part .close {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 22px;
    height: 22px;
    text-indent: -9999px;
    overflow: hidden;
    background: url('../images/sub/ico_close.png') no-repeat 0 0;
}

#achievement_download .down-txt {
    margin-bottom: 15px;
    font-size: 15px;
    color: #1f1f1f;
    font-weight: 500;
    line-height: 1.3;
}

#achievement_download .down-list {
    border-bottom: 1px solid #e1e1e1;
}

#achievement_download .down-list li {
    display: table;
    width: 100%;
    margin-bottom: 15px;
    font-size: 15px;
    color: #1f1f1f;
    font-weight: 500;
    line-height: 1.3;
}

#achievement_download .down-list li > span {
    display: block;
    width: 90px;
}

#achievement_download .down-list li div {
    display: table-cell;
    width: 50%;
    color: #666;
    font-weight: 300;
}

#achievement_download .down-list li div.full {
    width: 100%;
}

#achievement_download .btn-group {
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

.keep-header {
    padding-bottom: 5px;
}

.keep-header select {
    width: 105px;
    padding: 0 26px 0 20px;
    font-size: 14px;
    border: 0;
    background: #f4f4f4 url('../images/sub/ico_pulldown2.png') no-repeat right 20px top 50%;
    border-radius: 34px;
    margin-right: 1px;
}

.keep-header .btn-group {
    text-align: right;
}

.keep-header .btn-group .restore {
    display: inline-block;
    width: 16px;
    height: 18px;
    margin-right: 13px;
    vertical-align: middle;
    background: #fff url('../images/sub/ico_restore.png') no-repeat 50% 50%;
    font-size: 0;
}

.keep-list {
    border-top: 1px solid #e8e8e8;
}

.keep-list li {
    padding: 15px 20px 15px 0;
    border-bottom: 1px solid #e8e8e8;
}

.keep-list li:after {
    content: "";
    display: block;
    clear: both;
}

.keep-list li .thumb {
    position: relative;
    width: 248px;
    height: 140px;
    float: left;
    border: 1px solid #f0f0f0;
}

.keep-list li .thumb.yellow {
    background: #fbe247;
}

.keep-list li .thumb.blue {
    background: #6eb9fd;
}

.keep-list li .thumb.purple {
    background: #a492e8;
}

.keep-list li .thumb.green {
    background: #4cd5c3;
}

.keep-list li .thumb.orange {
    background: #ec9357;
}

.keep-list li .thumb .tit-wrap {
    position: absolute;
    top: 12px;
    left: 20px;
}

.keep-list li .thumb .label {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    padding: 0 15px;
    font-size: 13px;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 36px;
}

.keep-list li .thumb .tit {
    margin-top: 6px;
    padding-right: 10px;
    font-size: 17px;
    color: #1f1f1f;
    font-weight: 500;
    line-height: 25px;
    text-overflow: ellipsis;
    white-space: normal;
    max-height: 4.5em;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

.keep-list li dl {
    float: left;
    width: 45%;
    padding: 0 10px 0 17px;
}

.keep-list li dt {
    margin: 18px 0 23px;
    font-size: 18px;
    color: #1f1f1f;
    font-weight: 700;
    line-height: 1.3;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.keep-list li dt .open {
    display: inline-block;
    height: 25px;
    line-height: 23px;
    margin-left: 12px;
    padding: 0 13px;
    text-align: center;
    font-size: 13px;
    color: #fff !important;
    vertical-align: top;
    background: #555;
    white-space: nowrap;
    border-radius: 30px;
}

.keep-list li dt .open.not {
    color: #666 !important;
    background: #f4f4f4;
}

.keep-list li dd {
    font-size: 14px;
    color: #666;
    margin-bottom: 6px;
}

.keep-list li dd .quiz {
    display: inline-block;
    height: 30px;
    line-height: 28px;
    margin-right: 12px;
    padding: 0 15px;
    text-align: center;
    font-size: 13px;
    color: #333 !important;
    vertical-align: middle;
    background: #fff;
    border: 1px solid #dedede;
    white-space: nowrap;
    border-radius: 30px;
}

.keep-list li dd .date {
    position: relative;
    padding-left: 10px;
    margin-left: 8px;
}

.keep-list li dd .date:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 0;
    width: 1px;
    height: 12px;
    background: #666;
}

.keep-list li dd .play {
    display: inline-block;
    min-width: 57px;
    padding: 5px 0 5px 25px;
    margin-left: 34px;
    font-size: 13px;
    color: #999;
    font-weight: 300;
    background: url('../images/sub/ico_play.png') no-repeat 0 50%;
    vertical-align: middle;
}

.keep-list li .btn-group {
    float: right;
    padding-top: 45px;
}

.keep-list > li > .btn-group > a {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-left: 20px;
    text-indent: -9999px;
    overflow: hidden;
    background-color: #f4f4f4;
    transition: all 0.3s;
    border-radius: 100%;
    vertical-align: middle;
}

.keep-list li .btn-group a.preview {
    background: #f4f4f4 url('../images/sub/ico_preview.png') no-repeat 50% 50%;
}

.keep-list li .btn-group a.detail {
    background: #f4f4f4 url('../images/sub/ico_start.png') no-repeat 50% 50%;
}

.keep-list li .btn-group a.share {
    background: #f4f4f4 url('../images/sub/ico_share.png') no-repeat 45% 50%;
}

.keep-list li .btn-group a.option {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-left: 20px;
    text-indent: -9999px;
    overflow: hidden;
    transition: all 0.3s;
    border-radius: 100%;
    vertical-align: middle;
    background: #f4f4f4 url('../images/sub/ico_option.png') no-repeat 50% 50%;
}

.keep-list > li > .btn-group > a:hover {
    background-color: #fbe247;
}

.keep-list .option-wrap {
    position: relative;
}

.keep-list li .option-view {
    display: none;
    position: absolute;
    right: 0;
    top: 40px;
    background: #fff;
    border: 1px solid #e8e8e8;
    box-shadow: 1px 1px 15px 0px rgba(141, 141, 141, 0.25);
    z-index: 1;
}

.keep-list li .option-view.current {
    display: block;
}

.keep-list li .option-view li {
    padding: 10px 0;
    min-width: 80px;
    height: 35px;
    font-size: 13px;
    color: #666;
    text-align: center;
}

.keep-list li .option-view li:last-child {
    border-bottom: 0;
}

.keep-list li .option-view li a {
    display: block;
    margin: 0;
}

.keep-list li.no-data {
    width: 100%;
    padding: 100px 0;
    text-align: center;
    font-size: 16px;
    color: #777;
    border: 0;
    margin: 0;
}

@media only all and (max-width: 1024px) {
    .quiz-header {
        padding: 20px 20px;
        position: relative;
        margin-bottom: 0;
    }

    .quiz-slider .btns button.quick_prev {
        left: 137px;
    }

    .quiz-slider .btns button.quick_next {
        right: 137px;
    }

    .quiz-header .lnb-menu {
        position: absolute;
        right: 0;
        top: 0;
        display: block;
        width: 36px;
        height: 56px;
        padding: 0;
        border-radius: 0;
        background: #35386a url('../images/sub/ico_menu.png') no-repeat 50% 50%;
        background-size: 4px;
        text-indent: -9999px;
        overflow: hidden;
    }

    .quiz-tit {
        margin: 80px 0 10px;
    }

    .quiz-tit h3 {
        padding: 0 20px 12px;
        font-size: 24px;
    }

    .quiz-tit .right {
        right: 20px;
    }

    .quiz-list {
        padding: 0 20px;
    }

    .quiz-list li {
        width: calc(33.333333% - 20px);
    }

    .quiz-list .slick-dots {
        display: block;
        text-align: center;
        margin-right: 15px;
        padding-top: 8px;
    }

    .quiz-list .slick-dots.on {
        z-index: -1;
    }

    .quiz-list .slick-dots li {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 0 4px;
        background: #fff;
        text-indent: -999px;
        overflow: hidden;
        border-radius: 11px;
        cursor: pointer;
        vertical-align: middle;
        border: 1px solid #666;
        float: none;
    }

    .quiz-list .slick-dots li.slick-active {
        background: #333;
    }

    .quiz-list .slick-dots li button {
        text-indent: -999px;
    }

    .h3-quiz {
        margin-bottom: 0;
        font-size: 30px;
        padding: 20px;
    }

    .quiz-make .quiz-left {
        width: auto;
        float: none;
        padding: 25px 25px 40px;
        margin-bottom: 30px;
    }

    .quiz-make .quiz-right {
        width: auto;
        float: none;
    }

    .quiz-make .quiz-left .quiz-tab-wrap .tooltip3 .tooltiptext {
        right: 0;
        left: auto;
    }

    .quiz-make .quiz-left .quiz-tab-wrap .tooltip3 .tooltiptext::after {
        right: 6px;
        left: auto;
    }

    .textbook-preview .right .quiz-type dd.media-type .qa-wrap {
        width: 70%;
    }

    .quiz-make .quiz-left .btn-block {
        margin-top: 40px;
    }

    .textbook-preview .left {
        width: auto;
        float: none;
        padding: 20px;
        margin-bottom: 20px;
    }

    .textbook-preview .right {
        width: auto;
        float: none;
    }

    .keep-list li {
        padding: 15px 0;
    }

    .keep-list li dl {
        width: 53%;
    }

    .keep-list li .btn-group {
        float: none;
        padding-top: 15px;
        clear: both;
    }

    .keep-list li .btn-group a {
        margin-left: 0;
        margin-right: 20px;
    }

    .keep-list li .btn-group a.option {
        margin-left: 0;
    }

    .keep-list li .option-view {
        right: 20px;
        top: 43px;
    }
}

@media only all and (max-width: 930px) {
    .quiz-make .quiz-left {
        position: relative
    }

    .textbook-preview .right .quiz-type dd.media-type .qa-wrap {
        width: 65%;
    }
}

@media only all and (max-width: 830px) {
    .quiz-make .quiz-left {
        position: relative
    }

    .textbook-preview .right .quiz-type dd.media-type .qa-wrap {
        width: 60%;
    }
}

@media only all and (max-width: 767px) {
    .quiz-header a {
        padding: 0 18px 0 43px;
        height: 38px;
        line-height: 38px;
        font-size: 14px;
    }

    .quiz-header .btn1 {
        background: #5a5a5a url('../images/sub/ico_quiz1_white.png') no-repeat 18px 50%;
        background-size: 20px;
    }

    .quiz-header .btn2 {
        background: #5a5a5a url('../images/sub/ico_quiz2_white.png') no-repeat 18px 50%;
        background-size: 20px;
    }

    .textbook-title .lnb-menu {
        height: 50px;
        background-size: 3px;
    }

    .quiz-slider li .quiz-num {
        top: 10px;
        left: 15px;
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        font-size: 14px;
    }

    .quiz-slider .cover {
        height: 40px;
    }

    .quiz-slider .cover .tit {
        padding: 13px 120px 12px 10px;
        font-size: 14px;
    }

    .quiz-slider .cover .right {
        position: absolute;
        right: 10px;
        top: 8px;
    }

    .quiz-slider .cover .id {
        font-size: 13px;
    }

    .quiz-slider .cover .play {
        margin-left: 10px;
        font-size: 13px;
    }

    .quiz-slider .btns button.quick_prev {
        left: 87px;
    }

    .quiz-slider .btns button.quick_next {
        right: 87px;
    }

    .quiz-tit {
        margin: 50px 0 5px;
        min-height: 37px;
    }

    .quiz-tit h3 {
        padding: 0 15px 12px;
        font-size: 20px;
    }

    .quiz-tit .right {
        right: 15px;
    }

    .quiz-tit .right.filter {
        top: 0;
    }

    .quiz-list {
        padding: 0 15px;
    }

    .quiz-list ul {
        margin-right: -15px;
    }

    .quiz-list li {
        width: calc(50% - 15px);
        margin: 15px 15px 0 0;
    }

    .quiz-list li .thumb .tit-wrap {
        top: 10px;
        left: 10px;
    }

    .quiz-list li .thumb .label {
        height: 22px;
        line-height: 22px;
        padding: 0 10px;
        font-size: 12px;
    }

    .quiz-list li .thumb .tit {
        margin-top: 5px;
        font-size: 15px;
        line-height: 20px;
    }

    .quiz-list li .quiz-num {
        display: inline-block;
        font-size: 13px;
        color: #3f3f3f;
    }

    .quiz-list li .list-info {
        padding: 10px 15px 13px;
    }

    .quiz-list li .play {
        font-size: 12px;
    }

    .quiz-list li .info-block {
        min-height: 20px;
    }

    .quiz-list li .info-block .id {
        font-size: 12px;
        padding-right: 70px
    }

    .quiz-list li .info-block .copy button {
        width: 60px;
        height: 24px;
        font-size: 12px;
        background: #fff url('../images/sub/ico_copy.png') no-repeat 10px 50%;
    }

    .quiz-make .quiz-left {
        position: relative;
        padding: 20px 20px 40px;
    }

    .quiz-make .quiz-left .thumb-wrap .img-thumb {
        width: auto;
        padding: 20px;
        background: #fbe347;
    }

    .quiz-make .quiz-left .thumb-wrap .label {
        height: 30px;
        line-height: 30px;
        padding: 0 15px;
        font-size: 15px;
    }

    .quiz-make .quiz-left .thumb-wrap .tit {
        font-size: 20px;
        line-height: 26px;
    }

    .quiz-make .quiz-left .thumb-wrap .thumb-list .thumb {
        width: 50px;
        height: 35px;
    }

    .quiz-make .quiz-left .quiz-tab {
        margin: 30px 0;
    }

    .quiz-make .quiz-left .quiz-tab li a {
        padding: 0 20px;
    }

    .quiz-make .quiz-toggle > li > .title span {
        font-size: 14px;
        padding: 10px 125px 10px 20px;
        background: #fafafa url('../images/sub/ico_arrow3.png') no-repeat right 10px top 50%;
    }

    .quiz-make .quiz-toggle > li > .title .num {
        margin-right: 5px;
    }

    .quiz-make .quiz-toggle > li > .title .state {
        height: 24px;
        line-height: 22px;
        margin-right: 3px;
        padding: 0 8px;
        font-size: 12px;
    }

    .quiz-make .quiz-toggle > li > .title .btn-group {
        right: 30px;
    }

    .quiz-make .quiz-toggle > li > .title .btn-copy {
        min-width: 42px;
        height: 26px;
        line-height: 24px;
        font-size: 12px;
    }

    .quiz-make .quiz-toggle > li > .title .btn-del {
        min-width: 42px;
        height: 26px;
        line-height: 26px;
        font-size: 12px;
    }

    .quiz-make .quiz-toggle > li > .title.on span {
        background: #fcfaf0 url('../images/sub/ico_arrow3_on.png') no-repeat right 10px top 50%;
    }

    .quiz-make .quiz-toggle .quiz-write .tit {
        width: auto;
    }

    .quiz-make .quiz-toggle .quiz-write .input {
        display: block;
    }

    .quiz-make .quiz-toggle .quiz-write .input.media {
        overflow: hidden;
    }

    .quiz-make .quiz-toggle .quiz-write .input.media ul {
        float: none;
        width: auto;
    }

    .quiz-make .quiz-toggle .quiz-write .input.media .media-file {
        float: none;
        margin: 20px auto 0;
    }

    .quiz-make .quiz-toggle .quiz-write .input.media .media-file-wrap {
        float: none;
    }

    .textbook-preview .left {
        padding: 15px;
    }

    .textbook-preview .left .thumb-wrap .img-thumb {
        width: auto;
    }

    .textbook-preview .left .btn-block {
        width: 256px;
        margin-top: 20px;
    }

    .textbook-preview .right .quiz-type dt {
        height: 40px;
    }

    .textbook-preview .right .quiz-type dt .num {
        width: 30px;
        height: 30px;
        line-height: 30px;
        font-size: 18px;
    }

    .textbook-preview .right .quiz-type dt .cata {
        font-size: 15px;
    }

    .textbook-preview .right .quiz-type dt .time {
        right: 10px;
        top: 12px;
        padding: 2px 0 2px 18px;
        font-size: 12px;
    }

    .textbook-preview .right .quiz-type dd {
        padding: 15px 10px 20px 10px;
    }

    .textbook-preview .right .quiz-type dd .question {
        min-height: 20px;
        font-size: 15px;
    }

    .textbook-preview .right .quiz-type dd .question .q {
        font-size: 17px;
    }

    .textbook-preview .right .quiz-type dd .answer {
        margin-top: 15px;
        position: relative;
        min-height: 22px;
        font-size: 15px;
        color: #101010;
        font-weight: 300;
    }

    .textbook-preview .right .quiz-type dd .answer .a {
        font-size: 17px;
    }

    .textbook-preview .right .quiz-type dd.media-type .qa-wrap {
        float: none;
        width: auto;
    }

    .textbook-preview .right .quiz-type dd .media-box {
        margin-top: 20px;
    }

    .textbook-preview .right .quiz-type dd .media-box img {
        width: 100%;
    }

    .textbook-preview .right .scroll-box {
        height: auto;
        overflow: inherit;
    }

    .keep-header .btn-group {
        margin-top: 10px;
    }

    .keep-list li .btn-group {
        display: flex;
        justify-content: space-around;
    }

    .keep-list li .btn-group a {
        margin: 0;
    }

    .keep-list li .option-view {
        right: 0;
        top: 50px;
    }
}

@media only all and (max-width: 640px) {
    .questions .end-txt {
        font-size: 14px;
        line-height: 22px;
    }

    .questions .end-list li .tit {
        width: auto;
        font-size: 15px;
        margin-bottom: 10px;
    }

    .questions .end-list li .cont {
        display: block;
        font-size: 14px;
    }

    .questions .end-list li .cont .link {
        display: block;
    }

    .questions .end-list li .cont .file {
        display: block;
    }

    .questions .end-list li .copy {
        margin-left: 0;
        margin-top: 10px;
    }

    .questions .end-list li .down {
        margin-left: 0;
        margin-top: 10px;
    }

    .questions .end-list li .btn-group {
        display: block;
        margin-top: 10px;
        margin-left: 0;
    }

    .questions .end-list li .btn-group .copy {
        margin-left: 0;
        margin-top: 0;
    }

    .questions .end-list li .qr-copy {
        display: inline-block;
        margin-bottom: 0;
    }

    .questions .end-list li .save {
        display: inline-block;
    }

    .questions .btn-class {
        display: inline-block;
        min-width: 100px;
        height: 42px;
        line-height: 42px;
        text-align: center;
        font-size: 14px;
        color: #fff !important;
        vertical-align: middle;
        background: #666;
        white-space: nowrap;
    }

    .questions .h3-info {
        margin: 25px 0 15px;
        font-size: 15px;
    }

    .questions .info-txt {
        margin-bottom: 10px;
        font-size: 14px;
    }

    .questions .info-list {
        padding-bottom: 20px;
    }

    .questions .info-list li {
        display: block;
        margin-bottom: 0;
        font-size: 14px;
    }

    .questions .info-list li span {
        width: auto;
        margin: 10px 0 5px;
        padding-top: 0;
    }

    .questions .info-list li div {
        display: block;
        width: auto;
    }

    .questions .info-list li .down {
        margin-left: 10px;
    }

    .questions .quiz-start .txt {
        margin-top: 0;
        font-size: 14px;
        line-height: 23px;
    }

    .questions .part-num {
        margin-top: 20px;
        font-size: 18px;
    }

    .questions .quiz-part {
        display: none;
        position: absolute;
        left: 50%;
        bottom: 80px;
        width: 318px;
        padding: 5px;
    }

    .questions .quiz-part li {
        width: 34px;
        height: 34px;
        line-height: 34px;
        margin: 2px;
        font-size: 14px;
    }

    .questions .quiz-part .part-txt {
        margin: 25px 0 20px;
        font-size: 18px;
    }

    .keep-header select {
        width: 90px !important;
        padding: 0 20px 0 12px;
        font-size: 13px;
        background: #f4f4f4 url('../images/sub/ico_pulldown2.png') no-repeat right 12px top 50%;
        margin-bottom: 5px;
    }

    .keep-list li .thumb {
        width: auto;
        float: none;
    }

    .keep-list li dl {
        width: auto;
        float: none;
        padding: 0 5px;
    }

    .keep-list li .btn-group {
        float: none;
        width: auto;
    }

    .keep-list li .thumb .label {
        height: 22px;
        line-height: 22px;
        padding: 0 10px;
        font-size: 12px;
    }

    .keep-list li .thumb .tit {
        font-size: 15px;
        line-height: 20px;
    }

    .keep-list li dt {
        margin: 15px 0 15px;
        font-size: 16px;
    }

    .keep-list li dd {
        font-size: 13px;
    }

    .keep-list li dd .quiz {
        font-size: 12px;
    }

    .keep-list li dd .play {
        font-size: 12px;
    }

    .keep-list li dd .open {
        font-size: 12px;
    }

    .questions .info-list li:nth-child(2) {
        margin-top: 25px;
    }

    .questions .info-list li div.full.input {
        padding-right: 0px;
    }

    .questions .info-list li div.full.input #liveClassUrl {
        width: 100%;
        display: block;
        line-height: 24px;
        word-break: break-all;
    }

    .questions .info-list li .btn {
        position: relative;
        margin-top: 10px;
    }

    .questions .info-list li div.full .chk-list li:nth-child(2) {
        margin-top: 0;
    }
}

@media only all and (max-width: 480px) {
    .share-write > ul > li {
        display: block;
    }

    .quiz-slider .btns button {
        width: 30px;
        height: 30px;
    }

    .quiz-slider .btns button.quick_prev {
        left: 20px;
    }

    .quiz-slider .btns button.quick_next {
        right: 20px;
    }

    .quiz-list {
        padding: 0 10px;
    }

    .quiz-list ul {
        margin-right: -10px;
    }

    .quiz-list li {
        width: calc(50% - 10px);
        margin: 10px 10px 0 0;
    }

    .quiz-list li .thumb .tit {
        margin-top: 5px;
        font-size: 15px;
        line-height: 18px;
        max-height: 3.5em;
        -webkit-line-clamp: 2;
    }
}

/* 검색 */
.search-wrap {
    padding: 10px 0 70px;
}

.search-wrap .input-group {
    position: relative;
    width: 510px;
    margin: 0 auto;
    background: #fff;
}

/* .search-wrap .input-group:hover {border:3px solid #ef4b66;} */
/* .search-wrap .input-group:hover .btn-search {background:#ef4b66 url('../images/common/ico_search.png') no-repeat 50% 50%;} */
.search-wrap .keyword {
    width: 100%;
    height: 59px;
    font-size: 16px;
    padding: 0 60px 0 12px;
    vertical-align: top;
    border: 0;
    color: #000;
    border: 3px solid #333;
}

.search-wrap .keyword:focus {
    border: 3px solid #ef4b66;
}

.search-wrap .keyword:focus + .btn-search {
    background: #ef4b66 url('../images/common/ico_search.png') no-repeat 50% 60%;
}

.search-wrap .btn-search {
    position: absolute;
    top: 0px;
    right: 0px;
    display: inline-block;
    width: 60px;
    height: 56px;
    text-indent: -9999px;
    overflow: hidden;
    background: url('../images/sub/ico_search.png') no-repeat 50% 60%;
    vertical-align: top;
}

.search-tab:after {
    content: "";
    display: block;
    clear: both;
}

.search-tab li {
    float: left;
    width: calc(100% / 3);
    text-align: center;
    background: #fff;
}

.search-tab li a {
    display: block;
    height: 54px;
    line-height: 54px;
    font-size: 22px;
    color: #999;
    border-bottom: 4px solid #ccc;
    transition: all 0.2s;
}

.search-tab li.on a, .search-tab li a:hover {
    color: #212121;
    font-size: 28px;
    font-weight: 700;
    border-bottom: 4px solid #726de7;
}

.search-detail {
    padding: 33px 20px 33px 45px;
    border-bottom: 1px solid #e1e1e1;
    background: #fafafa;
}

.search-detail > ul > li {
    display: table;
    width: 100%;
    margin-bottom: 26px;
}

.search-detail > ul > li:last-child {
    margin-bottom: 0;
}

.search-detail .tit {
    display: block;
    width: 130px;
    vertical-align: top;
    font-size: 15px;
    color: #1f1f1f;
    font-weight: 500;
}

.search-detail .cont {
    display: table-cell;
    width: 100%;
    vertical-align: top;
    font-size: 14px;
    color: #666;
    font-weight: 300;
}

.search-detail .cont .chk-list {
    overflow: hidden;
}

.search-detail .cont .chk-list li {
    float: left;
    width: 123px;
}

.search-detail.curriculum .cont .chk-list li {
    float: left;
    width: 135px;
}

.search-detail.quiz .cont .chk-list li {
    float: left;
    width: 90px;
}

.search-detail .cont .chk-list li.course_so, .search-detail .cont .chk-list li.course_si
, .search-detail .cont .chk-list li.course_ko {
    margin-top: 10px;
}

.search-detail .cont .chk-list li.course_ko.last_width {
    width: 156px;
}

.search-detail .cont .chk-list li.course_mt.last_width {
    width: 156px;
}

.search-detail .cont .chk-list li.course_so.last_width {
    width: 360px;
}

.search-detail .cont .chk-list li.course_si.last_width {
    width: 500px;
}

.search-detail .cont.block-type-checkbox .chk-list li.typeAll {
    height: 100px;
}

.search-detail .cont.block-type-checkbox .chk-list li.ck.course_mt {
    margin-right: 140px;
}

.search-container .study-tit:first-of-type {
    margin-top: 60px;
}

@media only all and (max-width: 1024px) {
    .search-wrap {
        padding: 50px 20px;
    }

    .search-tab li a {
        height: 60px;
        line-height: 60px;
        font-size: 18px;
    }

    .search-tab li.on a, .search-tab li a:hover {
        font-size: 20px;
    }

    .search-detail {
        padding: 25px 30px 20px;
    }

    .search-detail .tit {
        width: 80px;
    }

    .search-detail .cont .chk-list li {
        width: auto;
        margin-right: 20px;
        margin-bottom: 10px;
        min-width: 60px;
    }

    .search-detail .cont.block-type-checkbox .chk-list li.course_so {
        margin-top: 0;
    }

    .search-detail .cont.block-type-checkbox .chk-list li.typeAll {
        height: auto;
    }

    .search-detail .cont.block-type-checkbox .chk-list li.ck.course_mt {
        margin-right: 0px;
    }

    .search-container .study-tit:first-of-type {
        padding-top: 0;
        margin-top: 50px;
    }
}

@media only all and (max-width: 767px) {
    .search-wrap {
        padding: 40px 20px 30px;
    }

    .search-wrap .input-group {
        width: auto;
        border: 2px solid #333;
    }

    .search-wrap .keyword {
        height: 46px;
        font-size: 15px;
    }

    .search-wrap .btn-search {
        width: 40px;
        height: 40px;
        vertical-align: top;
        background-size: 26px;
    }

    .search-tab li a {
        height: 54px;
        line-height: 54px;
        font-size: 15px;
        border-bottom: 3px solid #ccc;
    }

    .search-tab li.on a, .search-tab li a:hover {
        font-size: 15px;
        border-bottom: 3px solid #37b4dc;
    }

    .search-detail {
        padding: 20px 15px 15px;
    }

    .search-detail .tit {
        width: 60px;
    }

    .search-detail > ul > li {
        margin-bottom: 10px;
    }

    .search-container .study-tit:first-of-type {
        margin-top: 40px;
    }
}

@media only all and (max-width: 480px) {
    .search-detail .cont {
        display: block;
        margin-top: 12px;
    }
}

/* modal */
.modal-wrap {
    position: relative;
    margin: 3% auto;
    width: 980px;
    background: #fff;
    display: none;
    box-shadow: 0px 30px 50px 0px rgba(120, 120, 120, 0.21);
}

.modal-wrap.type2 {
    width: 1120px;
}

.modal-wrap.type3 {
    width: 515px;
}

.modal-wrap.type4 {
    width: 640px;
}

.modal-wrap.type5 {
    width: 700px;
}

.modal-wrap.type6 {
    width: 820px;
    border: 6px solid #6591e8;
}

.modal-wrap.type7 {
    width: 1012px;
    border: 6px solid #6591e8;
}

.modal-wrap.type8 {
    width: 630px;
    border: 6px solid #6591e8;
}

.modal-wrap.type9 {
    width: 595px;
}

.modal-wrap.type10 {
    width: 400px;
}

.modal-wrap.img-zoom {
    width: 1100px;
}

.modal-wrap.textbook-report {
    width: 1412px;
}

.modal-head {
    position: relative;
    padding: 40px 50px 0;
}

.modal-head h2 {
    color: #1f1f1f;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.2;
}

.modal-head h2 p {
    display: inline-block;
}

.modal-head h2.type2 {
    font-size: 28px;
}

.modal-head h2.type3 {
    text-align: center;
}

.modal-head h2.type3 span {
    font-weight: normal;
}

.modal-head h2 .txt {
    color: #ef4b66;
    font-weight: 400;
    padding-right: 8px;
}

.modal-head h2 .txt2 {
    color: #ef4b66;
    font-weight: 400;
    padding-left: 15px;
    font-size: 16px;
}

.modal-head h2 .badge {
    vertical-align: bottom;
    height: 30px;
    line-height: 30px;
    margin-right: 10px;
    font-size: 17px;
}

.modal-head.upt h2 small {
    font-size: 16px;
    color: #ef4b66;
    font-weight: 400;
}

.modal-cont {
    padding: 40px 50px 50px;
}

.modal-cont.type2 {
    padding: 20px 50px 50px;
}

.modal-wrap.img-zoom .modal-cont {
    padding: 50px;
}

.modal-wrap .btn-block {
    text-align: center;
}

.modal-close {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 22px;
    height: 22px;
    text-indent: -9999px;
    overflow: hidden;
    background: url('../images/sub/ico_close.png') no-repeat 0 0;
}

@media only all and (max-width: 1024px) {
    .modal-wrap {
        width: 94%;
    }

    .modal-wrap.type2 {
        width: 94%;
    }

    .modal-wrap.textbook-report {
        width: 94%;
    }

    .modal-wrap.type6 {
        width: 94%;
    }

    .modal-wrap.type7 {
        width: 94%;
    }

    .modal-wrap.img-zoom {
        width: 94%;
    }

    .modal-head {
        position: relative;
        padding: 30px 45px 0 25px;
    }

    .modal-cont {
        padding: 30px 25px 30px;
    }

    .modal-cont.type2 {
        padding: 20px 25px 30px;
    }

    .modal-wrap.img-zoom .modal-cont {
        padding: 45px 30px 30px;
    }
}

@media only all and (max-width: 767px) {
    .modal-wrap {
        width: 92%;
    }

    .modal-wrap.type2 {
        width: 92%;
    }

    .modal-wrap.type5 {
        width: 92%;
    }

    .modal-wrap.img-zoom {
        width: 92%;
    }

    .modal-head {
        padding: 30px 45px 0 20px;
    }

    .modal-cont {
        padding: 30px 20px 30px;
    }

    .modal-cont.type2 {
        padding: 15px 20px 30px;
    }

    .modal-wrap.img-zoom .modal-cont {
        padding: 45px 20px 20px;
    }

    .modal-head h2 {
        font-size: 20px;
    }

    .modal-head h2.type2 {
        font-size: 22px;
    }
}

@media only all and (max-width: 640px) {
    .modal-wrap.type3 {
        width: 92%;
    }

    .modal-wrap.type4 {
        width: 92%;
    }

    .modal-wrap.type8 {
        width: 92%;
    }

    .modal-wrap.type9 {
        width: 92%;
    }

    .modal-wrap.type10 {
        width: 92%;
    }

    .modal-wrap.textbook-report {
        width: 92%;
    }
}

/* 로그인 */
#wrap.class {
    background: url('../images/common/bg_pink.png') repeat-x 0 0;
}

#wrap.class.theme2022 {
    background: url('../images/common/bg_green.png') repeat-x 0 0;
}

#wrap.class #header {
    position: relative;
}

#wrap.class #header .header-inner {
    width: 1240px;
}

#wrap.class #header h1 {
    padding-top: 50px;
    transition: none;
}

#wrap.class #container {
    position: relative;
    width: 1240px;
    margin: 0 auto;
    padding: 0 0 100px;
}

#wrap.class #container:before {
    content: "";
    position: absolute;
    right: 0;
    top: -80px;
    display: block;
    width: 100%;
    height: 120px;
    background: url('../images/common/bg_cont_pink.png') no-repeat 100% 0;
}

#wrap.class.theme2022 #container:before {
    background: url('../images/common/bg_cont_green.png') no-repeat 100% 0;
}

#wrap.class #contents {
    float: none;
    width: auto;
}

#wrap.class .btn-class {
    position: absolute;
    right: 0;
    top: 30px;
    display: inline-block;
    height: 32px;
    line-height: 32px;
    margin-left: 10px;
    padding: 0 18px 0 35px;
    font-size: 14px;
    color: #fff;
    background: #6591e8 url('../images/sub/ico_set.png') no-repeat 15px 50%;
    vertical-align: middle;
    border-radius: 32px;
}

.login-wrap {
    position: relative;
    width: 600px;
    margin: 0 auto;
    padding: 20px 0;
    text-align: center;
}

.login-wrap h2 {
    display: inline-block;
    width: 220px;
    height: 90px;
    margin-bottom: 18px;
    margin-left: -14px;
    background: url('../images/common/logo.png') no-repeat 0 0;
    text-indent: -9999px;
    overflow: hidden;
}

.login-wrap .login-tit {
    color: #101010;
    font-size: 45px;
    font-weight: 700;
    line-height: 55px;
    font-family: 'SDBook';
}

.login-wrap .login-tit span {
    color: #5d61c7;
}

.login-wrap .login-input {
    text-align: left;
    margin: 80px auto 0 auto;
    width: 500px;
    margin-left: auto;
}

.login-wrap .login-input > ul > li {
    display: table;
    width: 100%;
}

.login-wrap .login-input > ul > li:last-child {
    margin-bottom: 0;
}

.login-wrap .login-input .tit {
    display: block;
    width: 100px;
    padding-top: 25px;
    vertical-align: top;
    font-size: 16px;
    color: #1f1f1f;
}

.login-wrap .login-input .cont {
    display: table-cell;
    width: 100%;
    vertical-align: top;
    padding-top: 10px;
}

.login-wrap .login-input input {
    height: 44px;
    font-size: 14px;
    padding-left: 10px;
}

.login-wrap .login-txt {
    margin-top: 30px;
    font-size: 13px;
    color: #999;
    line-height: 1.4;
}

.login-wrap .btn-block {
    margin-top: 50px;
    text-align: center;
}

.login-wrap .btn-login {
    display: inline-block;
    width: 163px;
    height: 60px;
    font-size: 18px;
    color: #fff;
    font-weight: 300;
    text-align: center;
    background: #ef4b66;
}

.login-wrap .btn-login:hover {
    background: #e07284;
}

.login-wrap .qrcode {
    width: 150px;
    height: 150px;
    display: block;
    margin: 0 auto 40px auto;
}

#wrap.class.study #header .utility {
    border-bottom: 1px solid #EA9BAA;
}

#wrap.class.study.theme2022 #header .utility {
    border-bottom: 1px solid #44d7c6;
}

#wrap.class.study #header .utility a {
    color: #1f1f1f;
    font-weight: 400;
}

#wrap.class.study #header .header-inner {
    width: 1472px;
}

#wrap.class.study #container {
    position: relative;
    width: 1472px;
    margin: 0 auto;
    padding: 0 0 100px;
}

#wrap.class.study #container:before {
    content: "";
    position: absolute;
    right: 0;
    top: -80px;
    display: block;
    width: 100%;
    height: 120px;
    background: url('../images/common/bg_cont_pink2.png') no-repeat 100% 0;
}

#wrap.class.study.theme2022 #container:before {
    background: url('../images/common/bg_cont_green.png') no-repeat 100% 0;
}

#wrap.class.study #header .name-wrap {
    position: absolute;
    right: 0;
    bottom: 40px;
    text-align: right;
}

#wrap.class.study #header .name-wrap .txt {
    font-size: 18px;
    color: #1f1f1f;
}

#wrap.class.study #header .name-wrap .txt span {
    color: #5d61c7;
    font-weight: 700;
}

#wrap.class.study #header .name-wrap .name {
    margin-top: 8px;
    font-size: 24px;
    color: #1f1f1f;
    font-weight: 700;
}

.study-tit {
    margin: 80px 0 10px;
    position: relative;
    min-height: 27px;
}

.study-tit:first-of-type {
    margin-top: 10px;
}

.study-tit h3 {
    padding-bottom: 3px;
    font-size: 24px;
    color: #1f1f1f;
    font-weight: 700;
}

.study-tit h3 span {
    font-size: 16px;
    color: #736ee9;
    font-weight: 400;
}

.study-tit .right {
    position: absolute;
    right: 0;
    top: 0;
}

.study-tit .right .detail {
    display: inline-block;
    width: 50px;
    height: 30px;
    background: url('../images/sub/ico_arrow3_on.png') no-repeat 50% 50%;
    text-indent: -9999px;
    overflow: hidden;
}

.study-tit .right .detail.on {
    background: url('../images/sub/ico_arrow3.png') no-repeat 50% 50%;
}

.study-tit .right a.down {
    display: inline-block;
    height: 32px;
    padding: 0 15px;
    line-height: 30px;
    font-size: 14px;
    color: #333;
    font-weight: 300;
    text-align: center;
    background: #fff;
    border: 1px solid #666;
    border-radius: 32px;
}

.study-tit .right a.down:hover {
    color: #fff;
    background: #6591e8;
    border: 1px solid #6591e8;
}

.study-tit.current {
    position: relative;
}

.study-tit.current:before {
    content: "";
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 100%;
    height: 1px;
    background: #4f4f4f;
}

.study-tit .term {
    display: inline-block;
    height: 32px;
    line-height: 30px;
    margin-right: 5px;
    padding: 0 30px;
    font-size: 14px;
    color: #333;
    background: #fff;
    vertical-align: middle;
    border-radius: 32px;
    border: 1px solid #6591e8;
}

.study-tit .term:hover {
    color: #fff;
    background: #b0caff;
    border: 1px solid #b0caff;
}

.study-tit .term.on {
    color: #fff;
    background: #6591e8;
}

.textbook-list {
    border-top: 1px solid #4f4f4f;
}

.textbook-list > li {
    position: relative;
    padding: 24px 300px 24px 25px;
    line-height: 1.3;
    border-bottom: 1px solid #e8e8e8;
    overflow: hidden;
}

.textbook-list .subject {
    float: left;
    width: 21%;
    font-size: 16px;
    color: #333;
    font-weight: 500;
    line-height: 24px;
}

.textbook-list .subject span {
    font-size: 16px;
    color: #666;
    font-weight: 300;
    display: block;
}

.textbook-list .txt-wrap {
    float: left;
    width: 79%;
}

.textbook-list .txt-wrap .inner {
    display: table;
}

.textbook-list .txt-wrap .badge {
    display: inline-block;
    position: relative;
    top: 0;
    margin-right: 10px;
    min-width: 70px;
}

.textbook-list .txt-wrap .tit {
    display: table-cell;
    vertical-align: middle;
}

.textbook-list .txt-wrap .tit .txt1 {
    font-size: 18px;
    color: #1f1f1f;
}

.textbook-list .txt-wrap .tit a.txt1:hover {
    text-decoration: underline;
    text-underline-position: under;
    font-weight: 600;
}

.textbook-list .txt-wrap .tit .txt2 {
    font-size: 14px;
    color: #333;
    margin-top: 10px;
}

.textbook-list .txt-wrap .tit .txt2 em {
    color: #999;
}

.textbook-list .txt-wrap .tit .txt2 span {
    display: inline-block;
    margin-left: 40px;
}

.textbook-list .txt-wrap .tit .txt2 span:first-child {
    margin-left: 0;
}

.textbook-list .txt-wrap .tit .text-red {
    color: #f04b66 !important;
}

.textbook-list li a {
    color: #1f1f1f;
}

.textbook-list li a:hover {
    color: #0f8db5;
}

.textbook-list li .btn-group {
    position: absolute;
    right: 30px;
    top: 50%;
    transform: translateY(-50%);
}

.textbook-list li .btn-group a {
    display: inline-block;
    width: 48px;
    height: 48px;
    margin-left: 20px;
    text-indent: -9999px;
    overflow: hidden;
    background-color: #f4f4f4;
    transition: all 0.3s;
    border-radius: 100%;
    vertical-align: middle;
}

.textbook-list li .btn-group a.preview {
    background: #f4f4f4 url('../images/sub/ico_preview_list.png') no-repeat 50% 50%;
}

.textbook-list li .btn-group a.download {
    background: #f4f4f4 url('../images/sub/ico_down.png') no-repeat 50% 50%;
}

.textbook-list li .btn-group a.share {
    background: #f4f4f4 url('../images/sub/ico_share.png') no-repeat 45% 50%;
}

.textbook-list li .btn-group a.study {
    width: auto;
    height: 35px;
    line-height: 32px;
    padding: 0 18px;
    font-size: 13px;
    color: #37b4dc;
    font-weight: 400;
    background: #fff;
    border: 1px solid #43bee6;
    border-radius: 35px;
    text-indent: 0;
}

.textbook-list li .btn-group a.modify {
    background: #f4f4f4 url('../images/sub/ico_detail2.png') no-repeat 50% 50%;
}

.textbook-list li .btn-group a.delete {
    background: #f4f4f4 url('../images/sub/ico_delete.png') no-repeat 50% 50%;
}

.textbook-list li .btn-group a.preview:hover {
    background: #79a0ed url('../images/sub/ico_preview_list_on.png') no-repeat 50% 50%;
}

.textbook-list li .btn-group a.download:hover {
    background: #79a0ed url('../images/sub/ico_down_on.png') no-repeat 50% 50%;
}

.textbook-list li .btn-group a.download.disabled {
    background: #f4f4f4 url('../images/sub/ico_down.png') no-repeat 50% 50%;
    opacity: 0.6;
    cursor: default;
}

.textbook-list li .btn-group a.download.disabled:hover {
    background: #f4f4f4 url('../images/sub/ico_down.png') no-repeat 50% 50%;
    opacity: 0.5;
    cursor: default;
}

.textbook-list li .btn-group a.share:hover {
    background: #79a0ed url('../images/sub/ico_share_on.png') no-repeat 45% 50%;
}

.textbook-list li .btn-group a.study:hover {
    color: #fff;
    background: #43bee6;
}

.textbook-list li .btn-group a.modify:hover {
    background: #79a0ed url('../images/sub/ico_detail2_on.png') no-repeat 50% 50%;
}

.textbook-list li .btn-group a.delete:hover {
    background: #79a0ed url('../images/sub/ico_delete_on.png') no-repeat 50% 50%;
}

.textbook-list li .btn-group a.start {
    background: #f4f4f4 url('../images/sub/ico_start.png') no-repeat 50% 50%;
}

.textbook-list li .btn-group a.start:hover {
    background: #79a0ed url('../images/sub/ico_start_on.png') no-repeat 50% 50%;
}

.textbook-list li .btn-group a.take {
    width: 130px;
    height: 42px;
    line-height: 40px;
    margin-left: 7px;
    font-size: 15px;
    color: #fff;
    text-align: center;
    text-indent: 0;
    border-radius: 0;
    background: #f04b66;
}

.textbook-list li .btn-group a.re-take {
    width: 130px;
    height: 42px;
    line-height: 40px;
    margin-left: 7px;
    font-size: 15px;
    color: #fff;
    text-align: center;
    text-indent: 0;
    border-radius: 0;
    background: #f04b66;
}

.textbook-list li .btn-group a.result {
    width: 130px;
    height: 42px;
    line-height: 42px;
    margin-left: 7px;
    font-size: 15px;
    color: #f04b66;
    text-align: center;
    text-indent: 0;
    border-radius: 0;
    background: #fff;
    border: 1px solid #f04b66;
}

.textbook-list li .btn-group a.non-take {
    width: 130px;
    height: 42px;
    line-height: 42px;
    margin-left: 7px;
    font-size: 15px;
    color: #666;
    text-align: center;
    text-indent: 0;
    border-radius: 0;
    background: #fff;
    cursor: default;
}

.textbook-list li .btn-group a.add-take {
    width: 130px;
    height: 42px;
    line-height: 42px;
    margin-left: 7px;
    font-size: 15px;
    color: #fff;
    text-align: center;
    text-indent: 0;
    border-radius: 0;
    background: #f04b66;
}

.textbook-list li.no-data {
    padding: 100px 0;
    text-align: center;
    font-size: 16px;
    color: #777;
}

.textbook-list .add-list {
    margin-top: 25px;
}

.textbook-list .add-list li {
    display: block;
}

.textbook-list .add-list li a {
    font-size: 14px;
    color: #333;
    margin-top: 7px;
    padding: 6px 20px 8px 30px;
    background: #f4f4f4;
    border-radius: 30px;
    display: inline-block;
}

.textbook-list .add-list li a:hover {
    text-decoration: underline;
    text-underline-position: under;
    font-weight: 600;
}

.textbook-list .check {
    float: left;
    width: 5%;
}

.textbook-list .check + .txt-wrap {
    width: 95%;
}

.textbook-list li.add-item {
    padding: 0 0 24px;
    margin-top: -2px;
    background: #fff;
}

.textbook-list li.add-item .item-box {
    position: relative;
    padding: 2px 230px 2px 17.5%;
    overflow: hidden;
}

.textbook-list li.add-item .item-box .txt-wrap {
    margin: 3px 0;
    padding: 10px 20px 10px 25px;
    background: #f4f4f4;
    font-size: 14px;
    color: #333;
    border-radius: 30px;
    width: auto;
}

.textbook-list li.add-item .btn-group {
    top: 0;
    transform: none;
}

.textbook-list li.add-item .text-red {
    color: #f04b66 !important;
}

.textbook-list li.add-item .txt1 {
    margin-right: 20px;
}

.textbook-list li.add-item .txt2 em {
    color: #999;
}

.student-list {
    border-top: 1px solid #4f4f4f;
}

.student-list > li {
    position: relative;
    line-height: 1.3;
    border-bottom: 1px solid #e8e8e8;
    overflow: hidden;
    padding: 12px 0;
}

.student-list > li.header {
    font-weight: 700;
    color: #222;
}

.student-list > li.header .tit.check label {
    font-weight: 700;
    color: #222;
    font-size: 16px;
}

.student-list > li.item .txtCnt, .student-list > li.item .txtIngCnt, .student-list > li.item .txtEndCnt, .student-list > li.item .txtName {
    line-height: 48px;
}

.student-list > li.item input, .student-list > li.item .btn-save2 {
    margin-top: 5px;
}

.student-list > li.item input[type=checkbox] {
    margin-top: 15px;
}

.student-list > li.item input[type=checkbox] + em {
    margin-top: 15px;
}

.student-list > li .tit {
    float: left;
    text-align: center;
    padding: 5px 3px;
}

.student-list > li .tit:nth-child(1) {
    width: 15%;
}

.student-list > li .tit:nth-child(2) {
    width: 20%;
    font-size: 16px;
    color: #1f1f1f;
    letter-spacing: 1px;
}

.student-list > li .tit:nth-child(2) input {
    font-size: 16px;
    color: #1f1f1f;
    letter-spacing: 1px;
}

.student-list > li .tit:nth-child(2) a:hover {
    color: #1f1f1f;
    text-decoration: underline;
    text-underline-position: under;
    font-weight: 600;
}

.student-list > li .tit:nth-child(3) {
    width: 18%;
}

.student-list > li .tit:nth-child(4) {
    width: 20%;
}

.student-list > li .tit:nth-child(5) {
    width: 8%;
}

.student-list > li .tit:nth-child(6) {
    width: 8%;
}

.student-list > li .tit:nth-child(7) {
    width: 8%;
}

.student-list > li input {
    text-align: center;
}

.student-list > li .tit:nth-child(1) input {
    max-width: 50px;
}

.student-list > li .tit:nth-child(2) input {
    max-width: 100px;
}

.student-list > li .tit:nth-child(3) input {
    max-width: 80px;
}

.student-list > li a.btn {
    padding: 0 5px;
    display: inline-block;
    min-width: 60px;
    height: 32px;
    line-height: 30px;
    text-align: center;
    font-size: 14px;
    vertical-align: middle;
    white-space: nowrap;
}

.student-list > li .btn-save2 {
    color: #fff !important;
    border: 1px solid #6591e8;
    background: #6591e8;
}

.student-list > li .btn-save2:before {
    background: inherit;
}

.student-list > li input[type=checkbox] {
    vertical-align: top;
    margin-top: 2px;
}

.student-list > li input[type=checkbox] + em {
    vertical-align: top;
    margin-top: 2px;
}

.student-list > li a.txtName {
    display: block;
    line-height: 34px;
}

.student-list > li .block-btn a {
    display: inline-block;
    width: 48px;
    height: 48px;
    text-indent: -9999px;
    overflow: hidden;
    background-color: #f4f4f4;
    transition: all 0.3s;
    border-radius: 100%;
    vertical-align: middle;
}

.student-list > li a.btn-report {
    background: #f4f4f4 url('../images/sub/ico_preview_list.png') no-repeat 50% 50%;
}

.student-list > li a.btn-modify {
    background: #f4f4f4 url('../images/sub/ico_detail2.png') no-repeat 50% 50%;
}

.student-list > li a.btn-delete {
    background: #f4f4f4 url('../images/sub/ico_delete.png') no-repeat 50% 50%;
}

.student-list > li a.btn-report:hover {
    background: #79a0ed url('../images/sub/ico_preview_list_on.png') no-repeat 50% 50%;
}

.student-list > li a.btn-modify:hover {
    background: #79a0ed url('../images/sub/ico_detail2_on.png') no-repeat 50% 50%;
}

.student-list > li a.btn-delete:hover {
    background: #79a0ed url('../images/sub/ico_delete_on.png') no-repeat 50% 50%;
}

.student-list > li input:disabled {
    background: #fff;
    border: 0;
}

.student-list > li a.btn-modify.on {
    background: #444 url('../images/sub/ico_detail2_on.png') no-repeat 50% 50%;
}

.student-list li.no-data {
    padding: 100px 0;
    text-align: center;
    font-size: 16px;
    color: #777;
}

/* paginate */
.paginate {
    margin-top: 50px;
    text-align: center;
    line-height: 16px;
    display: flex;
    justify-content: center;
}

.paginate a.pre, .paginate a.next {
    width: 33px;
    padding: 7px 8px 8px;
    text-indent: -9999px;
    overflow: hidden;
    background-color: #fff;
}

.paginate a.pre {
    background: url('../images/sub/ico_paging_prev.png') no-repeat 50% 50%;
}

.paginate a.next {
    background: url('../images/sub/ico_paging_next.png') no-repeat 50% 50%;
}

.paginate a.pre:hover, .paginate a.next:hover {
    color: #fff;
    background-color: #fff;
    border: 1px solid #e3e3e3;
}

.paginate a {
    display: inline-block;
    padding: 7px 12px 8px;
    font-size: 13px;
    color: #333;
    text-align: center;
    border: 1px solid #e8e8e8;
    vertical-align: middle;
    background: #fff;
    margin-left: -1px;
}

.paginate a.active, .paginate a:hover {
    color: #ef5a72;
    font-weight: 500;
    background-color: #f9f9f9;
    border: 1px solid #e8e8e8;
}

/* 리포트 */
.report-header {
    padding-bottom: 60px;
    position: relative;
}

.report-header .tit {
    display: inline-block;
    font-size: 45px;
    color: #1f1f1f;
    vertical-align: middle;
    font-family: 'SDBook';
    font-weight: bold;
}

.report-header .tit em {
    color: #6490e6;
    font-weight: bold;
}

.report-header .btn-class {
    display: inline-block;
    height: 32px;
    line-height: 32px;
    margin-left: 10px;
    padding: 0 18px 0 35px;
    font-size: 14px;
    color: #fff;
    background: #6591e8 url('../images/sub/ico_set.png') no-repeat 15px 50%;
    border-radius: 32px;
}

.report-header .btn-class:hover {
    opacity: 0.85;
}

.report-header .btn-class {
    float: right;
}

.report-tab:after {
    content: "";
    display: block;
    clear: both;
}

.report-tab li {
    float: left;
    width: calc(100% / 3);
    text-align: center;
    background: #fff;
}

.report-tab li a {
    display: block;
    height: 54px;
    line-height: 54px;
    font-size: 22px;
    color: #999;
    border-bottom: 4px solid #ccc;
    transition: all 0.2s;
}

.report-tab li a span {
    font-size: 18px;
}

.report-tab li.on a, .report-tab li a:hover {
    color: #212121;
    font-size: 28px;
    font-weight: 700;
    border-bottom: 4px solid #726de7;
}

.report-container .study-tit:first-of-type {
    margin-top: 60px;
}

.report-container .study-tit span.txt {
    vertical-align: sub;
}

.report-header .re-tit {
    display: inline-block;
}

.report-header .re-tit i {
    display: inline-block;
    width: 30px;
    height: 30px;
    position: relative;
    top: -4px;
    vertical-align: middle;
    background: url('../images/sub/ico_sel.png') no-repeat 50% 50%;
    transition: all 0.3s;
}

.report-header .re-tit.on i {
    transform: rotate(180deg);
}

.report-header .report-item {
    display: none;
    position: absolute;
    left: 0;
    top: 55px;
    width: 280px;
    padding: 14px 20px;
    border: 1px solid #e1e1e1;
    background: #fff;
    box-shadow: 11px 11px 20px 0px rgba(131, 131, 131, 0.1);
}

.report-header .report-item a {
    display: block;
    font-size: 16px;
    color: #1f1f1f;
    padding: 6px;
}

.report-header .report-item a:hover {
    color: #6591e8;
}

@media only all and (max-width: 1024px) {
    #wrap.class #header .header-inner {
        width: auto;
    }

    #wrap.class #header h1 {
        padding-top: 0;
    }

    #wrap.class #container {
        width: auto;
    }

    #wrap.class #container:before {
        display: none;
    }

    #wrap.class .btn-class {
        right: 15px;
        top: 14px;
    }

    #wrap.class.study #header {
        height: 100px;
    }

    #wrap.class.study #header .utility {
        display: block;
    }

    #wrap.class.study #header .inner {
        width: auto;
        height: 36px;
        padding: 8px 15px 0 0;
    }

    #wrap.class.study #header .header-inner {
        width: auto;
        height: 60px;
    }

    #wrap.class.study #container {
        width: auto;
    }

    #wrap.class.study #container:before {
        display: none;
    }

    #wrap.class.study #header .name-wrap {
        right: 20px;
        bottom: 8px;
    }

    #wrap.class.study #header .name-wrap .txt {
        font-size: 16px;
    }

    #wrap.class.study #header .name-wrap .name {
        margin-top: 5px;
        font-size: 22px;
    }

    .study-tit {
        margin: 50px 0 10px;
        padding: 0 20px;
    }

    .study-tit:first-of-type {
        margin-top: 0;
        padding-top: 50px;
    }

    .study-tit .right {
        right: 20px;
    }

    .textbook-list .subject {
        float: none;
        width: auto;
        margin-bottom: 5px;
    }

    .textbook-list .txt-wrap {
        width: 100%;
    }

    .textbook-list .txt-wrap .tit .txt2 span {
        margin-left: 15px;
    }

    .textbook-list li .btn-group {
        right: 20px;
    }

    .textbook-list .check {
        width: 10%;
    }

    .textbook-list .check + .txt-wrap {
        width: 90%;
    }

    .textbook-list li.add-item .item-box {
        padding: 2px 300px 2px 20px;
    }

    .login-wrap {
        padding: 60px 20px 20px;
    }

    .report-header {
        padding: 40px 20px 50px;
    }

    .report-header .tit {
        font-size: 40px;
    }

    .report-tab li a {
        height: 60px;
        line-height: 60px;
        font-size: 18px;
    }

    .report-tab li.on a, .report-tab li a:hover {
        font-size: 20px;
    }

    .report-container .study-tit:first-of-type {
        padding-top: 0;
        margin-top: 50px;
    }

    .student-list > li a.btn {
        min-width: 54px;
    }

    .report-header .report-item {
        left: 20px;
        top: 85px;
        width: 255px;
        padding: 12px 15px;
    }
}

@media only all and (max-width: 767px) {
    #wrap.class.study #header .name-wrap {
        right: 15px;
        bottom: 9px;
    }

    #wrap.class.study #header .name-wrap .txt {
        font-size: 13px;
        letter-spacing: -1px;
    }

    #wrap.class.study #header .name-wrap .name {
        font-size: 19px;
        margin-top: 3px;
    }

    .study-tit {
        margin: 40px 0 10px;
        padding: 0 15px;
    }

    .study-tit:first-of-type {
        padding-top: 40px;
    }

    .study-tit h3 {
        font-size: 20px;
    }

    .study-tit h3 span {
        font-size: 14px;
    }

    .study-tit .right {
        right: 15px;
    }

    .study-tit .right .detail {
        width: 26px;
        height: 26px;
    }

    .study-tit .right a.down {
        height: 30px;
        padding: 0 10px;
        line-height: 28px;
        font-size: 12px;
    }

    .study-tit .term {
        height: 30px;
        line-height: 28px;
        margin-right: 2px;
        padding: 0 15px;
        font-size: 12px;
    }

    .textbook-list li {
        padding: 15px;
    }

    .textbook-list .subject {
        font-size: 14px;
        line-height: 20px;
    }

    .textbook-list .subject span {
        padding-left: 0;
        font-size: 14px;
        margin-right: 10px;
    }

    .textbook-list .txt-wrap {
        float: none;
        display: inline-block;
    }

    .textbook-list .txt-wrap .tit .txt1 {
        font-size: 15px;
        color: #1f1f1f;
    }

    .textbook-list .txt-wrap .tit .txt2 {
        font-size: 13px;
        color: #333;
        margin-top: 5px;
    }

    .textbook-list .txt-wrap .tit .txt2 em {
        margin-right: 10px;
    }

    .textbook-list .txt-wrap .tit .txt2 span {
        margin-left: 0;
        margin-right: 10px;
    }

    .textbook-list li .btn-group {
        position: static;
        text-align: right;
        transform: none;
        display: block;
        margin-top: 10px;
    }

    .textbook-list li .btn-group a.take {
        width: 110px;
        height: 32px;
        line-height: 30px;
        margin-left: 0;
        font-size: 14px;
    }

    .textbook-list li .btn-group a.re-take {
        width: 110px;
        height: 32px;
        line-height: 30px;
        margin-left: 0;
        font-size: 14px;
    }

    .textbook-list li .btn-group a.result {
        width: 110px;
        height: 32px;
        line-height: 32px;
        margin-left: 0;
        font-size: 14px;
    }

    .textbook-list li .btn-group a.non-take {
        width: 110px;
        height: 32px;
        line-height: 32px;
        margin-left: 0;
        font-size: 14px;
    }

    .textbook-list li .btn-group a.add-take {
        width: 110px;
        height: 32px;
        line-height: 30px;
        margin-left: 0;
        font-size: 14px;
    }

    .textbook-list .add-list {
        margin-top: 15px;
    }

    .textbook-list .add-list li {
        max-width: none;
        padding: 6px 15px 8px 15px;
        text-align: right;
    }

    .textbook-list .add-list li a {
        font-size: 13px;
    }

    .textbook-list li.add-item .item-box {
        padding: 2px 15px 5px 15px;
    }

    .textbook-list li.add-item .btn-group {
        margin-top: 5px;
    }

    .textbook-list li.add-item .txt2 {
        display: block;
        font-size: 13px;
        margin-top: 2px;
    }

    .paginate {
        margin-top: 25px;
    }

    .report-header {
        padding: 30px 15px 20px;
    }

    .report-header .tit {
        font-size: 26px;
    }

    .report-tab li a {
        height: 48px;
        line-height: 48px;
        font-size: 15px;
        border-bottom: 3px solid #ccc;
    }

    .report-tab li a span {
        font-size: 10px;
    }

    .report-tab li.on a, .search-tab li a:hover {
        font-size: 15px;
        border-bottom: 3px solid #37b4dc;
    }

    .report-container .study-tit:first-of-type {
        margin-top: 40px;
    }

    .student-list-wrap {
        overflow-x: auto;
    }

    .student-list {
        width: 767px;
    }

    .student-list > li .tit {
        font-size: 14px;
    }

    .only-mobile {
        display: block;
        margin-top: 10px;
        padding-left: 10px;
        font-size: 14px;
        color: #6591e8;
    }

    .report-header .re-tit i {
        width: 22px;
    }

    .report-header .report-item {
        left: 15px;
        top: 60px;
        width: 175px;
        padding: 10px 12px;
    }

    .report-header .report-item a {
        font-size: 14px;
        padding: 5px;
    }
}

@media only all and (max-width: 640px) {
    .login-wrap {
        width: auto;
        padding: 60px 20px 20px;
    }

    .login-wrap h2 {
        width: 180px;
        height: 70px;
        margin-left: -10px;
        background: url('../images/common/logo.png') no-repeat 0 0;
        background-size: 180px;
    }

    .login-wrap .login-tit {
        font-size: 26px;
        line-height: 35px;
    }

    .login-wrap .login-input {
        margin-top: 20px;
        width: 100%;
    }

    .login-wrap .login-input .tit {
        width: 70px;
        font-size: 15px;
    }

    .login-wrap .btn-block {
        margin-top: 40px;
    }

    /* .report-header .tit {display:block;} */
    .report-header .btn-class {
        margin: -3px 8px 0 0;
        padding: 0 12px 0 25px;
        background: #6591e8 url('../images/sub/ico_set.png') no-repeat 8px 50%;
    }

    #wrap.class #container, #wrap.class.study #container {
        padding: 0;
    }

    #contents {
        min-height: 550px;
    }
}

/* 학습지리포트 */
.textbook-report .modal-head .subject {
    margin-bottom: 15px;
    color: #1f1f1f;
    font-size: 18px;
}

.textbook-report .modal-head .subject span.txtYear {
    position: relative;
    color: #ef4b66;
    font-weight: 500;
    padding-right: 15px;
    margin-right: 8px;
}

.textbook-report .modal-head .subject span.txtYear:after {
    content: "";
    position: absolute;
    top: 8px;
    right: 0;
    width: 1px;
    height: 11px;
    background: #999;
}

.textbook-report .modal-head .subject span.txtGrade {
    position: relative;
    color: #1f1f1f;
    font-weight: 500;
    padding-right: 15px;
    margin-right: 8px;
}

.textbook-report .modal-head .subject span.txtGrade:not(.no-pipe):after {
    content: "";
    position: absolute;
    top: 8px;
    right: 0;
    width: 1px;
    height: 11px;
    background: #999;
}

.textbook-report .modal-head h2 {
    color: #1f1f1f;
    font-size: 45px;
    font-weight: 700;
    font-family: 'SDBook';
    padding-right: 100px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.textbook-report .modal-head h2 .btn-blue {
    font-weight: 400;
    font-family: 'Noto Sans KR';
    vertical-align: middle;
}

.textbook-report .modal-head h2 span.badge {
    vertical-align: middle;
    font-size: 30px;
    height: 44px;
    line-height: 44px;
}

.textbook-report .modal-head .date {
    margin-top: 5px;
    color: #999;
    font-size: 16px;
}

.textbook-report .modal-head .right {
    position: absolute;
    right: 50px;
    bottom: 0;
}

.modal-head .form-category {
    width: 115px;
    margin: 2px 0;
}

.textbook-report .modal-cont {
    padding: 0 50px 50px;
}

.textbook-report .h3-wrap {
    position: relative;
    margin: 90px 0 40px;
    padding-bottom: 12px;
    border-bottom: 4px solid #ccc;
    min-height: 45px;
}

.textbook-report .h3-wrap:first-of-type {
    margin-top: 70px;
}

.textbook-report .h3-tit {
    position: relative;
    display: inline-block;
    color: #1f1f1f;
    font-size: 28px;
    font-weight: 700;
    z-index: 1;
}

.textbook-report .h3-tit:after {
    content: "";
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 100%;
    height: 8px;
    background: #a3bcf1;
    z-index: -1;
}

.textbook-report .h3-wrap.type2 {
    margin: 60px 0 40px;
}

.textbook-report .h3-wrap .txt {
    display: inline-block;
    margin-left: 10px;
    color: #666;
    font-size: 16px;
    font-weight: 300;
}

.textbook-report .h3-wrap span.end {
    display: inline-block;
    margin-left: 10px;
    color: #f04b66;
    font-size: 16px;
    font-weight: 300;
}

.textbook-report .h3-wrap .right {
    position: absolute;
    right: 0;
    bottom: 5px;
}

.textbook-report .h3-wrap .help {
    display: inline-block;
    width: 18px;
    height: 18px;
    line-height: 16px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    text-align: center;
    background: #999;
    border-radius: 100%;
    vertical-align: middle;
    font-style: normal;
    position: relative;
    top: -2px;
    margin: 0 2px;
    cursor: pointer;
}

.textbook-report .h4-wrap {
    position: relative;
    margin: 50px 0 12px;
    min-height: 20px;
}

.textbook-report .h4-wrap .h4-tit {
    margin: 0;
}

.textbook-report .h4-tit {
    margin: 40px 0 12px;
    display: inline-block;
    color: #1f1f1f;
    font-size: 20px;
    font-weight: 700;
}

.textbook-report .h4-tit.vm {
    vertical-align: middle;
}

.textbook-report .h4-tit2 {
    margin: 0 0 20px;
    display: inline-block;
    color: #1f1f1f;
    font-size: 20px;
    font-weight: 700;
}

.textbook-report .h4-wrap .txt {
    display: inline-block;
    margin-left: 5px;
    color: #666;
    font-size: 14px;
    font-weight: 300;
}

.textbook-report .h4-wrap .link {
    color: #4280c6;
    font-weight: 500;
}

.textbook-report .h4-wrap .right {
    position: absolute;
    right: 0;
    bottom: -5px;
}

#student-report.textbook-report .blockSelGrade {
    width: 200px;
    display: inline-block;
    margin-left: 10px;
}

.btn-blue {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    padding: 0 18px 0 16px;
    font-size: 13px;
    color: #fff !important;
    background: #6591e8;
}

.btn-red {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    padding: 0 18px 0 16px;
    font-size: 13px;
    color: #fff !important;
    background: #f04b66;
}

.btn-red-line {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    padding: 0 18px 0 16px;
    font-size: 13px;
    color: #f04b66 !important;
    background: #fff;
    border: 1px solid #f04b66;
}

.btn-inline {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 5px 0 15px;
    font-size: 13px;
    color: #f04b66 !important;
    background: #fff;
    border: 1px solid #f04b66;
}

.btn-gray {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    padding: 0 18px;
    font-size: 13px;
    color: #fff !important;
    background: #666;
}

.ico-textbook {
    position: relative;
    top: 3px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url('../images/sub/ico_textbook.png') no-repeat 50% 50%;
}

.ico-student {
    position: relative;
    top: 3px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url('../images/sub/ico_student.png') no-repeat 50% 50%;
}

.ico-result {
    position: relative;
    top: 3px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url('../images/sub/ico_result.png') no-repeat 50% 50%;
}

.ico-use {
    position: relative;
    top: 3px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url('../images/sub/ico_use.png') no-repeat 50% 50%;
}

.ico-share {
    position: relative;
    top: 3px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url('../images/sub/ico_share3.png') no-repeat 50% 50%;
}

.ico-down {
    position: relative;
    top: 3px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url('../images/sub/ico_down3.png') no-repeat 50% 50%;
}

.ico-arrow {
    position: relative;
    top: 3px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 5px;
    background: url('../images/sub/ico_arrow5.png') no-repeat 50% 50%;
}

.ico-arrow2 {
    position: relative;
    top: 3px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 5px;
    background: url('../images/sub/ico_arrow4.png') no-repeat 50% 50%;
}

.ico-preview {
    position: relative;
    top: 3px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url('../images/sub/ico_preview5.png') no-repeat 50% 50%;
}

.ico-book {
    position: relative;
    top: 3px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url('../images/sub/ico_book.png') no-repeat 50% 50%;
}

.ico-person {
    position: relative;
    top: 3px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url('../images/sub/ico_person2.png') no-repeat 50% 50%;
}

.ico-percent {
    position: relative;
    top: 3px;
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background: url('../images/sub/ico_percent.png') no-repeat 50% 50%;
}

.btn-red-line .ico-down {
    background: url('../images/sub/ico_down4.png') no-repeat 50% 50%;
}

.btn-large {
    height: 45px;
    line-height: 45px;
    padding: 0 22px 0 20px;
}

.report-coltype:after {
    content: "";
    display: block;
    clear: both;
}

.report-coltype .col {
    position: relative;
    float: left;
    width: 50%;
    padding-left: 30px;
}

.report-coltype .col:first-child {
    padding: 0 30px 0 0;
}

.report-coltype .col-55 {
    position: relative;
    float: left;
    width: 55%;
    padding: 0 30px 0 0;
}

.report-coltype .col-45 {
    position: relative;
    float: left;
    width: 45%;
    padding-left: 30px;
}

.report-coltype .btn-red-line {
    position: absolute;
    right: 0;
    top: -3px;
    font-weight: 500;
}

.report-coltype .btn-red-line, .report-coltype .btn-red {
    font-size: 14px;
}

.report-coltype .btn-group {
    text-align: center;
    margin-top: 30px;
}

.report-coltype .btn-group .btn-red {
    width: 130px;
    margin: 0 3px;
}

.diagram-wrap {
    border: 1px solid #e8e8e8;
}

.diagram-wrap .diagram {
    position: relative;
    height: 390px;
    background: url('../images/sub/bg_diagram.png') no-repeat 50% 50%;
}

.diagram-wrap .diagram .tit {
    margin: 0;
    display: table;
    width: 150px;
    height: 150px;
    background: #f29748;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.diagram-wrap .diagram .tit span {
    display: table-cell;
    padding-bottom: 10px;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    vertical-align: middle;
    line-height: 28px;
}

.diagram-wrap .diagram .tit em {
    display: block;
    font-size: 16px;
    font-weight: 500;
}

.diagram-wrap .diagram-state {
    height: 35px;
    padding: 10px 25px;
    color: #333;
    font-size: 14px;
    background: #f4f4f4;
}

.diagram-wrap .diagram-state span {
    display: inline-block;
    padding: 0 30px 0 5px;
}

.diagram-wrap .label1 {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #adc5f4;
}

.diagram-wrap .label2 {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #6591e8;
}

.diagram-wrap .label3 {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    background: #ee7387;
}

.diagram-wrap .item .label1 {
    position: absolute;
}

.diagram-wrap .item .label2 {
    position: absolute;
}

.diagram-wrap .item .label3 {
    position: absolute;
}

.diagram-wrap .item.left {
    text-align: right;
    padding-right: 20px;
}

.diagram-wrap .item.right {
    text-align: left;
    padding-left: 20px;
}

.diagram-wrap .item {
    display: block;
    line-height: 18px;
    position: absolute;
}

.diagram-wrap .item .txt p {
    letter-spacing: -0.5px;
    color: #333;
    font-size: 14px;
    font-weight: 500;
    max-width: 170px;
    margin: 0;
}

.diagram-wrap .item .txt span {
    color: #666;
    font-size: 13px;
    font-weight: 300;
    max-width: 170px;
}

.diagram-wrap .item i {
    margin: 5px;
}

.diagram-wrap .item.item1 {
    left: 4%;
    top: 12%;
}

.diagram-wrap .item.item2 {
    left: 3.5%;
    top: 33%;
}

.diagram-wrap .item.item3 {
    left: 2%;
    top: 55%;
}

.diagram-wrap .item.item4 {
    left: 18.2%;
    top: 78%;
}

.diagram-wrap .item.item5 {
    left: 55%;
    top: 12%;
}

.diagram-wrap .item.item6 {
    left: 68.7%;
    top: 30%;
}

.diagram-wrap .item.item7 {
    left: 65.8%;
    top: 52%;
}

.diagram-wrap .item.item8 {
    left: 60%;
    top: 69%;
}

.diagram-wrap br {
    display: none;
}

.study-cont li {
    height: 133px;
    margin-top: 13px;
    display: table;
    width: 100%;
    background: #f4f4f4;
}

.study-cont li:first-child {
    margin-top: 0;
}

.study-cont li .tit {
    width: 114px;
    height: 133px;
    display: table-cell;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-align: center;
    vertical-align: middle;
}

.study-cont li:nth-child(1) .tit {
    background: #6591e8;
}

.study-cont li:nth-child(2) .tit {
    background: #666;
}

.study-cont li:nth-child(3) .tit {
    background: #ee7387;
}

.study-cont li .cont {
    display: table-cell;
    height: 133px;
    padding: 10px 30px;
    vertical-align: middle;
    line-height: 24px;
}

.study-cont li .cont p {
    color: #1f1f1f;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    padding: 3px 0;
}

.study-cont li .cont p span {
    display: inline-block;
    height: 25px;
    line-height: 25px;
    padding: 0 12px;
    margin-right: 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 300;
    text-align: center;
    background: #666;
    border-radius: 25px;
}

.textbook-result {
    overflow: hidden;
}

.textbook-result > ul {
    display: flex;
    margin: 0 -9px;
}

.textbook-result > ul > li {
    min-height: 214px;
    margin: 0 9px;
    border: 1px solid #e8e8e8;
    flex: 1 1 0;
    width: 0;
}

.textbook-result ul li .head {
    position: relative;
    height: 90px;
    padding: 10px 14px;
    background: #f4f4f4;
}

.textbook-result ul li .head .score {
    display: inline-block;
    min-width: 80px;
    height: 30px;
    line-height: 30px;
    padding: 0 12px;
    margin-right: 5px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    text-align: center;
    background: #6590e7;
    border-radius: 30px;
}

.textbook-result ul li .head .btn-red {
    float: right;
    height: 30px;
    line-height: 30px;
    padding: 0 10px 0 8px;
    font-size: 13px;
}

.textbook-result ul li .head .tit {
    margin-top: 15px;
    color: #333;
    font-size: 20px;
    font-weight: 500;
    width: calc(100% - 45px);
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: normal !important;
    display: inline-block;
    vertical-align: sub;
}

.textbook-result ul li .head .b-select {
    margin-top: 10px;
}

.textbook-result ul li .head .b-select .btn.preview {
    margin-left: 5px;
    display: inline-block;
    width: 30px;
    height: 25px;
    text-indent: -9999px;
    overflow: hidden;
    background: #fff url('../images/sub/ico_preview4.png') no-repeat 50% 50%;
}

.textbook-result ul li .head .b-select .select2.select2-container.select2-container--default {
    width: calc(100% - 40px) !important;
}

.textbook-result ul li .head a.preview {
    margin-left: 10px;
    display: inline-block;
    width: 30px !important;
    height: 30px !important;
    background: #666;
    border-radius: 30px;
    line-height: 30px;
    text-align: center;
}

.textbook-result ul li .head a.preview i {
    color: #fff;
    font-size: 12px;
    vertical-align: bottom;
}

.textbook-result ul li .head a.preview:hover {
    background: #f04b66;
}

.textbook-result ul li .cont {
    padding: 20px;
}

.textbook-result ul li .cont .txt {
    color: #1f1f1f;
    font-size: 15px;
    line-height: 28px;
    display: block;
    min-height: 80px;
}

.textbook-result ul li .cont.name-tag {
    padding: 0 10px;
    overflow: hidden;
}

.textbook-result ul li .cont.name-tag a {
    float: left;
    min-width: 110px;
    height: 36px;
    margin: 12px 4px 4px 4px;
    color: #1f1f1f;
    font-size: 14px;
    border: 1px solid #e8e8e8;
    border-radius: 36px;
    background: #fff;
    padding: 0 12px;
    line-height: 36px;
}

.textbook-result ul li .cont.name-tag a small {
    margin-left: 5px;
}

.textbook-result.block-additionalY ul li .cont.name-tag a {
    border: 0;
    cursor: default;
    border: 1px solid #ccc;
}

.rate-box {
    padding: 25px 40px;
    background: #f4f4f4;
}

.rate-box .tit {
    margin-bottom: 15px;
    color: #1f1f1f;
    font-size: 16px;
    font-weight: 700;
}

.rate-box li {
    overflow: hidden;
    margin-top: 10px;
}

.rate-box li .date {
    float: left;
    min-width: 85px;
    height: 25px;
    line-height: 25px;
    padding: 0 12px;
    margin-right: 17px;
    color: #fff;
    font-size: 13px;
    text-align: center;
    background: #666;
    border-radius: 30px;
}

.rate-box li .txt {
    float: left;
    width: 90%;
    padding: 2px 20px 4px 0;
    color: #1f1f1f;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
}

.rate-box li .progress-state {
    float: left;
    margin-top: 5px;
}

.progress-state {
    position: relative;
    text-align: left;
}

.progress-state .state {
    display: inline-block;
    width: 380px;
    height: 15px;
    text-align: left;
    overflow: hidden;
    background: #fff;
    vertical-align: middle;
}

.progress-state .state.light-gray {
    background: #efefef;
}

.progress-state .state em {
    display: inline-block;
    height: 100%;
    vertical-align: top;
    background: #51cdc0;
}

.progress-state .state-txt {
    display: inline-block;
    vertical-align: middle;
    text-align: right;
    width: 58px;
    color: #1f1f1f;
    font-size: 14px;
}

.step-tab {
    margin: 0 -5px 30px;
    overflow: hidden;
}

.step-tab li {
    float: left;
    width: calc(100% / 3 - 10px);
    text-align: center;
    background: #fff;
    margin: 0 5px;
}

.step-tab li a {
    display: block;
    height: 45px;
    line-height: 38px;
    font-size: 16px;
    color: #666;
    font-weight: 500;
    border: 3px solid #e8e8e8;
    transition: all 0.2s;
}

.step-tab li.on a {
    color: #fff;
    border: 3px solid #6591e8;
    background: #6591e8;
}

.nav-tab {
    margin-bottom: 20px;
}

.nav-tab:after {
    content: "";
    display: block;
    clear: both;
}

.nav-tab li {
    float: left;
    text-align: center;
    background: #fff;
}

.nav-tab li a {
    display: block;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    color: #999;
    border-bottom: 4px solid #ccc;
    transition: all 0.2s;
}

.nav-tab li.on a, .study-tab li a:hover {
    color: #f04b66;
    font-size: 16px;
    font-weight: 700;
    border-bottom: 4px solid #f04b66;
}

.nav-tab.tab1 li {
    width: 100%;
}

.nav-tab.tab2 li {
    width: calc(100% / 2);
}

.nav-tab.tab3 li {
    width: calc(100% / 3);
}

.nav-tab.tab4 li {
    width: calc(100% / 4);
}

.nav-tab.tab5 li {
    width: calc(100% / 5);
}

.nav-tab.tab6 li {
    width: calc(100% / 6);
}

.nav-tab.tab7 li {
    width: calc(100% / 7);
}

.study-member {
    margin-bottom: 20px;
    font-size: 15px;
    color: #666;
}

.study-member span {
    display: inline-block;
    margin-right: 12px;
    padding-left: 22px;
    font-size: 16px;
    color: #1f1f1f;
    font-weight: 700;
    background: url(../images/sub/ico_member.png) no-repeat 0 50%;
}

.tbl-header {
    position: relative;
    margin-bottom: 10px;
    padding-top: 8px;
    min-height: 36px;
}

.tbl-header .txt {
    color: #ef4b66;
    font-size: 16px;
    font-weight: 500;
}

.tbl-header .form-category {
    width: 75px;
    height: 28px;
    color: #1f1f1f;
    font-size: 13px;
    margin-left: 10px;
    position: relative;
    top: -2px;
}

.tbl-header .right {
    position: absolute;
    right: 0;
    bottom: 0;
}

.tbl-header .btn-red {
    padding: 0 5px 0 18px;
    font-size: 15px;
}

.tbl-txt {
    color: #1f1f1f;
    font-size: 16px;
    padding-bottom: 12px;
    line-height: 1.3;
}

.tbl-check {
    position: relative;
    padding: 13px 15px 13px 110px;
    margin-bottom: 25px;
    background: #f4f4f4;
}

.tbl-check span {
    position: absolute;
    left: 0;
    top: 18px;
    width: 80px;
    display: inline-block;
    text-align: center;
    font-size: 15px;
    font-weight: 500;
}

.tbl-check span:before {
    content: "";
    position: absolute;
    top: 1px;
    right: 0;
    width: 1px;
    height: 14px;
    background: #666;
}

.tbl-check .chk-list {
    overflow: hidden;
    display: inline-block;
}

.tbl-check .chk-list li {
    float: left;
    margin: 2px 60px 2px 0;
}

.tbl-check .chk-list li:last-child {
    margin-right: 0;
}

.tbl-type {
    width: 100%;
    line-height: 18px;
}

.tbl-type > thead > tr > th {
    height: 50px;
    padding: 5px;
    color: #1f1f1f;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    border: 1px solid #e8e8e8;
    border-top: 2px solid #1f1f1f;
    border-bottom: 1px solid #999;
    border-right: 0;
    background: #fff;
}

.tbl-type > tbody > tr > td {
    height: 50px;
    padding: 5px;
    color: #666;
    font-size: 14px;
    text-align: center;
    border: 1px solid #e8e8e8;
    border-right: 0;
    background: #fff;
}

.tbl-type > tbody > tr > th {
    color: #1f1f1f;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid #e8e8e8;
}

.tbl-type > thead > tr > th span.red {
    color: #ee7387;
}

.tbl-type > thead > tr > th:first-child {
    border-left: 0;
}

.tbl-type > tbody > tr > td:first-child {
    border-left: 0;
}

.tbl-type .tleft {
    padding: 5px 5px 5px 15px;
    text-align: left;
}

.tbl-type .level-1 {
    color: #ee7387;
    font-weight: 500;
}

.tbl-type .level-2 {
    color: #6591e8;
    font-weight: 500;
}

.tbl-type .level-3 {
    color: #666;
    font-weight: 500;
}

.tbl-type .link {
    color: #4280c6;
    font-weight: 500;
}

.tbl-type .link.disabled {
    color: #666;
    font-weight: 400;
}

.tbl-type .link.disabled:hover {
    text-decoration: none;
    cursor: default;
}

.tbl-type .txt-red {
    color: #ee7387;
}

.tbl-type .txt-red-bold {
    color: #ef4b66;
    font-weight: 500;
}

.tbl-type .txt1 {
    color: #999;
    font-size: 13px;
}

.tbl-type .txt2 {
    color: #999;
    font-size: 14px;
}

.tbl-type .noline {
    border-left: 0;
}

.tbl-type .achieve {
    padding: 0;
    text-align: left;
}

.tbl-type .achieve .progress-state .state {
    display: inline-block;
    width: 80%;
    height: 20px;
}

.tbl-type .achieve .progress-state .state-txt {
    width: 50px;
    color: #666;
}

.tbl-type .bg-gray {
    background: #f9f9f9;
}

.tbl-type .no-data {
    height: 200px;
}

.tbl-type.top01 .bg-gray {
    padding-left: 15px;
}

.tbl-wrap.scroll {
    max-height: 554px;
    overflow: auto;
    border-top: 2px solid #1f1f1f;
}

.tbl-wrap.scroll .tbl-type > thead > tr > th {
    position: sticky;
    top: 0;
    z-index: 1;
    border-top: 0;
    border-bottom: 0;
}

.tbl-wrap.scroll .tbl-type > thead > tr > th:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: #999;
}

.txt-mobile {
    display: none;
}

.achieve-img {
    text-align: center;
}

.report-note {
    display: flex;
}

.report-note .report-tit {
    width: 210px;
    min-height: 330px;
    flex: none;
    margin-right: 45px;
    background: #f4f4f4 url(../images/sub/bg_report_tit.png) no-repeat 50% 65px;
    text-indent: -9999px;
    overflow: hidden;
}

.report-note .report-list {
    width: 100%;
}

.report-note .report-list .list dt {
    position: relative;
    margin: 30px 0 13px;
    color: #1f1f1f;
    font-size: 24px;
    display: inline-block;
}

.report-note .report-list .list dt span {
    font-weight: 700;
}

.report-note .report-list .list dt:after {
    content: "";
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 100%;
    height: 8px;
    background: #fee64b;
    z-index: -1;
}

.report-note .report-list .list dd {
    position: relative;
    padding-left: 13px;
    margin: 13px 0;
    color: #333;
    font-size: 15px;
    line-height: 1.3;
}

.report-note .report-list .list dd:before {
    content: "";
    position: absolute;
    top: 8px;
    left: 0;
    width: 3px;
    height: 3px;
    background: #666;
    border-radius: 100%;
}

.report-note .report-list .btn-group {
    text-align: left;
    margin-top: 25px;
}

.report-note .report-list .btn-group a {
    text-align: center;
}

#add-student-result table > tbody > tr.no-data > td {
    height: 200px;
}

#student-report table > tbody > tr.no-data > td {
    height: 200px;
}

@media only all and (max-width: 1024px) {
    .textbook-report .modal-head .subject {
        font-size: 17px;
    }

    .textbook-report .modal-head h2 {
        font-size: 35px;
    }

    .textbook-report .modal-head .date {
        font-size: 15px;
    }

    .textbook-report .modal-head .right {
        right: 20px;
    }

    .textbook-report .modal-cont {
        padding: 0 20px 50px;
    }

    .textbook-report .h3-wrap {
        margin: 70px 0 40px;
    }

    .textbook-report .h3-wrap:first-of-type {
        margin-top: 50px;
    }

    .textbook-report .h3-tit {
        font-size: 25px;
    }

    .textbook-report .h3-wrap .txt {
        font-size: 15px;
        line-height: 1.3;
    }

    .textbook-report .h3-wrap.type2 .txt {
        display: block;
        margin: 10px 0 0;
    }

    .textbook-report .h3-wrap.type2 .right {
        position: relative;
        right: auto;
        bottom: auto;
        display: inline-block;
        margin-top: 10px;
    }

    .textbook-report .h4-wrap {
        margin: 40px 0 12px;
    }

    .textbook-report .h4-tit {
        margin: 40px 0 12px;
        font-size: 18px;
    }

    .textbook-report .h4-tit2 {
        font-size: 18px;
    }

    .textbook-report .h4-wrap .txt {
        display: block;
        margin: 10px 0 0;
        line-height: 1.3;
    }

    .report-coltype .col {
        float: none;
        width: auto;
        padding-left: 0;
    }

    .report-coltype .col:first-child {
        padding: 0;
        margin-bottom: 30px;
    }

    .diagram-wrap .item.item1 {
        right: 64%;
        left: auto;
    }

    .diagram-wrap .item.item2 {
        right: 65.5%;
        left: auto;
    }

    .diagram-wrap .item.item3 {
        right: 66%;
        left: auto;
    }

    .diagram-wrap .item.item4 {
        right: 60.2%;
        left: auto;
    }

    .textbook-result > ul {
        margin: 0 -5px;
    }

    .textbook-result > ul > li {
        margin: 0 5px;
    }

    .textbook-result ul li .head .score {
        min-width: 70px;
    }

    .textbook-result ul li .head .end {
        right: 10px;
        font-size: 12px;
    }

    .textbook-result ul li .head .tit {
        font-size: 20px;
    }

    .textbook-result ul li .head .select select {
        width: 140px;
        font-size: 15px;
    }

    .textbook-result ul li .cont {
        padding: 15px;
    }

    .textbook-result ul li .cont .name-tag {
        padding: 0;
        text-align: center;
    }

    .textbook-result ul li .cont .name-tag li {
        display: inline-block;
    }

    .rate-box li .txt {
        width: 100%;
        padding: 10px 0;
        line-height: 1.3;
    }

    .tbl-wrap {
        overflow: auto;
    }

    .tbl-wrap .tbl-type {
        width: 1000px;
    }

    .tbl-wrap.type2 .tbl-type {
        width: 100%;
    }

    .txt-mobile {
        display: block;
        margin-top: 10px;
        font-size: 13px;
        color: #6591e8;
    }

    .txt-pc {
        display: none !important;
    }

    .tbl-type .achieve .progress-state .state {
        width: 78%;
    }

    .tbl-type .achieve .progress-state .state-txt {
        width: 18%;
    }

    .share-write #minBtnArea {
        margin-left: 0px;
    }
}

@media only all and (max-width: 767px) {
    .textbook-report .modal-head {
        padding: 60px 20px 0 20px;
    }

    .textbook-report .modal-head .subject {
        font-size: 16px;
    }

    .textbook-report .modal-head h2 {
        font-size: 25px;
        padding-right: 0;
        white-space: normal;
    }

    .textbook-report .modal-head h2 .txtCcNm {
        display: block;
        margin-top: 10px;
    }

    .textbook-report .modal-head h2 span.badge {
        font-size: 20px;
        height: 28px;
        line-height: 28px;
    }

    .textbook-report .modal-head .date {
        font-size: 14px;
        margin-top: 10px;
    }

    .textbook-report .modal-head .right {
        display: block;
        position: static;
        margin-top: 10px;
    }

    .textbook-report .modal-cont {
        padding: 0 20px 50px;
    }

    .textbook-report .h3-wrap {
        margin: 50px 0 30px;
        padding-bottom: 8px;
        min-height: 36px;
        border-bottom: 3px solid #ccc;
    }

    .textbook-report .h3-wrap:first-of-type {
        margin-top: 30px;
    }

    .textbook-report .h3-wrap.type2 {
        margin: 40px 0 30px;
    }

    .textbook-report .h3-tit {
        font-size: 20px;
    }

    .textbook-report .h3-wrap .txt {
        font-size: 14px;
        display: block;
        margin: 10px 0 0;
    }

    .textbook-report .h3-wrap .right {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 10px;
        display: inline-block;
    }

    .textbook-report .h4-wrap {
        margin: 30px 0 10px;
    }

    .textbook-report .h4-tit {
        margin: 30px 0 10px;
        font-size: 16px;
    }

    .textbook-report .h4-tit2 {
        font-size: 16px;
    }

    .textbook-report .h4-wrap .h4-tit {
        display: block;
        margin-bottom: 10px;
    }

    /* .textbook-report .h4-wrap .right {position:relative;right:auto;bottom:auto;margin-top:10px;display:inline-block;} */
    .btn-blue {
        height: 30px;
        line-height: 30px;
        padding: 0 10px 0 8px;
    }

    .btn-red {
        height: 30px;
        line-height: 30px;
        padding: 0 10px 0 8px;
    }

    .btn-red-line {
        height: 30px;
        line-height: 30px;
        padding: 0 10px 0 8px;
    }

    .btn-gray {
        height: 30px;
        line-height: 30px;
        padding: 0 10px 0 8px;
    }

    .diagram-wrap .diagram {
        height: 250px;
        background-size: 410px
    }

    .diagram-wrap .diagram .tit {
        width: 90px;
        height: 90px;
    }

    .diagram-wrap .diagram .tit span {
        padding-bottom: 5px;
        font-size: 13px;
        line-height: 18px;
    }

    .diagram-wrap .diagram .tit em {
        font-size: 12px;
    }

    .diagram-wrap .diagram-state {
        height: auto;
        padding: 10px 10px;
        font-size: 13px;
        line-height: 20px;
    }

    .diagram-wrap .diagram-state span {
        padding: 0 0 0 5px;
    }

    .diagram-wrap br {
        display: inline-block;
    }

    .diagram-wrap .label1 {
        width: 6px;
        height: 6px;
    }

    .diagram-wrap .label2 {
        width: 6px;
        height: 6px;
    }

    .diagram-wrap .label3 {
        width: 6px;
        height: 6px;
    }

    .diagram-wrap .item {
        line-height: 12px;
        letter-spacing: -1px;
    }

    .diagram-wrap .item .txt p {
        font-size: 8px;
    }

    .diagram-wrap .item .txt span {
        font-size: 8px;
    }

    .diagram-wrap .item i {
        margin: 3px;
        flex: none;
    }

    .diagram-wrap .item.item1 {
        right: 64%;
        left: auto;
    }

    .diagram-wrap .item.item2 {
        right: 65.5%;
        left: auto;
    }

    .diagram-wrap .item.item3 {
        right: 66%;
        left: auto;
    }

    .diagram-wrap .item.item4 {
        right: 60.2%;
        left: auto;
    }

    .report-coltype .col-55 {
        position: relative;
        float: none;
        width: 100%;
        padding: 0 0 40px 0;
    }

    .report-coltype .col-45 {
        position: relative;
        float: none;
        width: 100%;
        padding: 0;
    }

    .study-cont li .tit {
        width: 90px;
        font-size: 14px;
        line-height: 20px;
    }

    .study-cont li .cont {
        padding: 10px 20px;
    }

    .study-cont li .cont p {
        font-size: 13px;
        line-height: 22px;
        padding: 2px 0;
    }

    .report-coltype .btn-red-line {
        top: 0;
    }

    .report-coltype .btn-red-line, .report-coltype .btn-red {
        font-size: 13px;
    }

    .report-coltype .btn-group {
        margin-top: 20px;
    }

    .report-coltype .btn-group .btn-red {
        width: 100px;
    }

    .textbook-result > ul {
        display: block;
        margin: 0;
    }

    .textbook-result > ul > li {
        min-height: auto;
        margin: 0 0 15px 0;
        width: 100%;
    }

    .textbook-result ul li .head {
        height: auto;
        min-height: 94px;
        padding: 10px 14px;
    }

    .textbook-result ul li .head .tit {
        font-size: 18px;
    }

    .textbook-result ul li .head .select select {
        width: 200px;
        font-size: 14px;
    }

    .textbook-result ul li .cont .txt {
        font-size: 14px;
        line-height: 24px;
    }

    .textbook-result ul li .cont .name-tag button {
        min-width: 70px;
        margin: 2px;
        font-size: 13px;
    }

    .rate-box {
        padding: 20px;
    }

    .rate-box .tit {
        font-size: 15px;
    }

    .rate-box li {
        margin-top: 10px;
    }

    .rate-box li .date {
        float: none;
        margin-right: 0;
        font-size: 12px;
        display: inline-block;
    }

    .rate-box li .txt {
        float: none;
        font-size: 13px;
    }

    .rate-box li .progress-state {
        float: none;
    }

    .rate-box li .progress-state .state {
        width: 80%;
    }

    .rate-box li .progress-state .state-txt {
        width: 15%;
        font-size: 13px;
    }

    .step-tab {
        margin: 0 -3px 20px;
    }

    .step-tab li {
        margin: 0 3px;
    }

    .step-tab li a {
        height: 40px;
        line-height: 36px;
        font-size: 15px;
        border: 2px solid #e8e8e8;
    }

    .step-tab li.on a {
        border: 2px solid #6591e8;
    }

    .nav-tab li a {
        border-bottom: 3px solid #ccc;
    }

    .nav-tab li.on a, .study-tab li a:hover {
        font-size: 14px;
        border-bottom: 3px solid #f04b66;
    }

    .study-member {
        margin-bottom: 15px;
        font-size: 13px;
        line-height: 1.3;
    }

    .study-member span {
        font-size: 14px;
    }

    .tbl-header .txt {
        font-size: 15px;
    }

    .tbl-header .right {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 10px;
        display: inline-block;
    }

    .tbl-header .btn-red {
        padding: 0 5px 0 15px;
        font-size: 13px;
    }

    .tbl-txt {
        font-size: 14px;
    }

    .tbl-check {
        padding: 10px 15px 10px;
        margin-bottom: 20px;
    }

    .tbl-check span {
        position: relative;
        left: auto;
        top: auto;
        width: auto;
        display: block;
        text-align: left;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .tbl-check span:before {
        display: none;
    }

    .tbl-check .chk-list {
        overflow: hidden;
        display: inline-block;
    }

    .tbl-check .chk-list li {
        float: left;
        margin: 5px 20px 5px 0;
        min-width: 60px;
    }

    .tbl-wrap .tbl-type {
        width: 910px;
    }

    .tbl-type > thead > tr > th {
        height: 40px;
        font-size: 14px;
    }

    .tbl-type > tbody > tr > td {
        height: 40px;
        font-size: 13px;
    }

    .tbl-type > tbody > tr > th {
        font-size: 14px;
    }

    .tbl-type .tleft {
        padding: 5px 5px 5px 10px;
    }

    .tbl-type .txt1 {
        color: #999;
        font-size: 12px;
    }

    .tbl-type .txt2 {
        color: #999;
        font-size: 13px;
    }

    .tbl-type .achieve .progress-state .state {
        height: 14px;
    }

    .tbl-type .achieve .progress-state .state-txt {
        font-size: 13px;
    }

    .tbl-wrap.scroll {
        max-height: 512px;
    }

    .report-note .report-tit {
        width: 150px;
        min-height: 280px;
        margin-right: 25px;
        background: #f4f4f4 url(../images/sub/bg_report_tit.png) no-repeat 50% 65px;
        background-size: 100px;
    }

    .report-note .report-list .list dt {
        margin: 20px 0 10px;
        font-size: 18px;
    }

    .report-note .report-list .list dd {
        padding-left: 10px;
        margin: 10px 0;
        font-size: 14px;
    }
}

@media only all and (max-width: 640px) {
    .textbook-report .modal-head .right {
        position: relative;
        right: auto;
        bottom: auto;
        margin-top: 10px;
        display: inline-block;
    }
}

@media only all and (max-width: 480px) {
    .report-note .report-tit {
        width: 70px;
        margin-right: 15px;
        background: #f4f4f4 url(../images/sub/bg_report_tit.png) no-repeat 50% 20px;
        background-size: 50px;
    }

    .report-note .report-list .btn-group a {
        width: 90px;
    }
}

/* 퀴즈리포트 상세 */
.textbook-report .modal-head h2 .sort {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 500;
    color: #fff !important;
    background: #ffa164;
    border-radius: 35px;
    vertical-align: middle;
    font-family: 'Noto Sans KR';
}

.textbook-report .modal-head .desc {
    padding: 7px 0;
    color: #999;
    font-size: 16px;
    line-height: 1.4;
}

.textbook-report .modal-head .desc span {
    margin-right: 30px;
}

.textbook-report .modal-head .desc em {
    color: #999;
    font-size: 16px;
}

.textbook-report .modal-head .right .link {
    display: inline-block;
    height: 35px;
    margin-right: -4px;
    padding: 9px 18px;
    color: #666;
    font-size: 14px;
    background: #f4f4f4;
    vertical-align: middle;
}

.textbook-report .modal-head .logo {
    float: left;
    margin-right: 20px;
}

.rank-box {
    height: 318px;
    border: 7px solid #e8e8e8;
}

.col-chart {
    display: flex;
    justify-content: center;
    padding-top: 10px;
}

.col-chart .chart {
    width: 20%;
    height: 250px;
    display: flex;
    flex-direction: column;
    margin: 20px;
    justify-content: end;
    -webkit-justify-content: flex-end;
}

.col-chart .box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 2px;
    text-align: center;
    background-color: #51cdc0;
}

.col-chart .box a {
    display: block;
    width: 100%;
    height: 100%;
}

.col-chart .txt {
    padding: 10px 0;
    text-align: center;
    color: #36afa2;
    font-weight: 500;
}

.col-chart.type2 .chart {
    width: 6%;
    height: 200px;
    margin: 20px 50px;
}

.col-chart .name {
    padding: 10px 0;
    text-align: center;
    color: #1f1f1f;
    font-weight: 500;
}

.score-rate {
    height: 318px;
    padding: 20px 0;
    border: 7px solid #e8e8e8;
    overflow: auto;
    margin-bottom: 25px;
}

.score-rate li {
    display: flex;
    padding: 10px 15px;
}

.score-rate .qnum {
    display: inline-block;
    width: 60px;
    vertical-align: middle;
    font-weight: 700;
    text-align: center;
    flex: none;
}

.score-rate .progress-state {
    width: 100%;
}

.score-rate .progress-state .state {
    width: 80%;
}

.score-rate .progress-state .state-txt {
    width: 10%;
}

.score-rate .num {
    display: inline-block;
    width: 70px;
    height: 26px;
    line-height: 24px;
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
    border: 1px solid #e8e8e8;
    flex: none;
}

.question-wrap {
    position: relative;
    margin: 55px 0 20px;
    padding-bottom: 12px;
    border-bottom: 4px solid #ccc;
    min-height: 45px;
}

.question-wrap .question {
    display: inline-block;
    color: #1f1f1f;
    font-size: 28px;
    font-weight: 500;
    vertical-align: middle;
    margin-right: 10px;
}

.question-wrap .sort {
    display: inline-block;
    height: 35px;
    line-height: 35px;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 500;
    color: #fff !important;
    background: #6591e8;
    border-radius: 35px;
    vertical-align: middle;
    margin-right: 10px;
}

.question-wrap .txt {
    font-size: 20px;
    vertical-align: middle;
}

.question-wrap .txt2 {
    display: inline-block;
    margin-left: 15px;
    color: #666;
    font-size: 14px;
    font-weight: 300;
    vertical-align: middle;
}

.chart-box {
    position: relative;
    padding: 20px;
    background: #f4f4f4;
    min-height: 200px;
}

.chart-box .btn-group {
    position: absolute;
    right: 20px;
    top: 20px;
}

.question-item .question-head {
    padding: 16px 20px;
    margin-bottom: 30px;
    color: #1f1f1f;
    font-size: 15px;
    background: #f4f4f4;
    line-height: 1.4;
}

.question-item .question-head span {
    display: inline-block;
    margin-right: 20px;
}

.question-item .question-head span:last-child {
    margin-right: 0;
}

.question-item .question-head em {
    color: #ef4b66;
    font-weight: 500;
}

.question-item .question-scroll {
    max-height: 600px;
    overflow: auto;
}

.question-item .question-box {
    margin-top: 30px;
}

.question-item .question-box:first-child {
    margin-top: 0;
}

.question-item .question-box li {
    display: flex;
    min-height: 50px;
    align-items: center;
    line-height: 1.3;
}

.question-item .question-box li .question {
    width: 100px;
    flex: none;
    color: #1f1f1f;
    font-weight: 500;
}

.question-item .question-box li .answer {
    width: 100%;
    min-height: 50px;
    padding: 10px 0;
    border-bottom: 1px solid #e1e1e1;
    align-items: center;
    display: flex;
}

.question-item .question-box li .sort {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    padding: 0 12px;
    font-size: 13px;
    color: #fff !important;
    background: #ef4b66;
    border-radius: 28px;
    vertical-align: middle;
    margin-right: 10px;
    flex: none;
}

.question-item .question-box li .txt {
    width: 90%;
}

.question-item .question-box li .time {
    display: inline-block;
    width: 70px;
    color: #ef4b66;
    text-align: center;
}

.question-item .question-box li .rate {
    display: inline-block;
    width: 70px;
    font-weight: 500;
    text-align: center;
    color: #ef4b66;
}

.question-item .question-box li .correct {
    display: inline-block;
    width: 18px;
    height: 18px;
    text-indent: -9999px;
    overflow: hidden;
    background: url('../images/sub/ico_correct.png') no-repeat 50% 50%;
    margin: 0 5px;
}

.question-item .question-box li .wrong {
    display: inline-block;
    width: 18px;
    height: 18px;
    text-indent: -9999px;
    overflow: hidden;
    background: url('../images/sub/ico_wrong.png') no-repeat 50% 50%;
    margin: 0 5px;
}

@media only all and (max-width: 1024px) {
    .textbook-report .modal-head .desc {
        font-size: 17px;
    }

    .textbook-report .modal-head .desc span {
        margin-right: 20px;
    }

    .textbook-report .modal-head .right.quiz {
        position: relative;
        right: auto;
        bottom: auto;
        display: inline-block;
        margin-top: 10px;
    }

    .textbook-report .modal-head .logo {
        float: none;
        margin-right: 0;
        width: 150px;
        margin-bottom: 5px;
    }

    .question-wrap .question {
        font-size: 25px;
    }

    .col-chart.type2 .chart {
        width: 10%;
        margin: 20px 30px;
    }
}

@media only all and (max-width: 767px) {
    .textbook-report .modal-head h2 .sort {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        font-size: 12px;
    }

    .textbook-report .modal-head .desc {
        font-size: 14px;
    }

    .textbook-report .modal-head .desc span {
        margin-right: 10px;
    }

    .textbook-report .modal-head .right.quiz {
        display: flex;
    }

    .textbook-report .modal-head .right .link {
        height: 30px;
        padding: 7px 10px;
        color: #666;
        font-size: 13px;
        width: 100%;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .textbook-report .modal-head .right.quiz .btn-red {
        flex: none;
    }

    .textbook-report .modal-head .logo {
        width: 120px;
    }

    .rank-box {
        height: 260px;
    }

    .col-chart .chart {
        height: 200px;
    }

    .col-chart.type2 .chart {
        width: 22%;
        margin: 10px 3px;
    }

    .score-rate {
        height: 310px;
        padding: 15px 0;
    }

    .score-rate li {
        padding: 10px 10px 10px 0;
    }

    .score-rate .qnum {
        width: 50px;
        font-size: 14px;
    }

    .score-rate .num {
        width: 60px;
        font-size: 13px;
        margin-left: 10px;
    }

    .question-wrap {
        margin: 40px 0 20px;
        padding-bottom: 8px;
        border-bottom: 3px solid #ccc;
        min-height: 36px;
    }

    .question-wrap .question {
        font-size: 20px;
    }

    .question-wrap .sort {
        height: 30px;
        line-height: 30px;
        padding: 0 10px;
        font-size: 12px;
    }

    .question-wrap .txt {
        display: block;
        margin-top: 10px;
    }

    .question-item .question-head {
        padding: 10px 10px;
        margin-bottom: 10px;
        font-size: 14px;
    }

    .question-item .question-head span {
        margin-right: 10px;
    }

    .question-item .question-scroll {
        max-height: 425px;
    }

    .question-item .question-box li .question {
        width: 75px;
    }

    .question-item .question-box li .time {
        width: 60px;
    }
}

@media only all and (max-width: 640px) {
    .textbook-report .modal-head h2 .tit {
        display: block;
        margin: 5px 0;
    }

    .col-chart .chart {
        margin: 10px;
    }
}

/* 라이브퀴즈 */
.live-quiz {
    height: auto;
    background: #fff;
}

.quiz-wrap {
    width: 1100px;
    margin: 0 auto;
    position: relative;
}

.btn-pink {
    display: inline-block;
    min-width: 250px;
    height: 70px;
    line-height: 68px;
    padding: 0 10px;
    font-size: 24px;
    font-weight: 700;
    color: #fff !important;
    background: #f04b66;
    transition: all 0.3s;
}

.btn-pink-line {
    display: inline-block;
    min-width: 250px;
    height: 70px;
    line-height: 68px;
    padding: 0 10px;
    font-size: 24px;
    font-weight: 700;
    color: #f04b66 !important;
    background: #fff;
    border: 1px solid #f04b66;
    transition: all 0.3s;
}

.btn-black {
    display: inline-block;
    min-width: 200px;
    height: 70px;
    line-height: 68px;
    padding: 0 10px;
    font-size: 24px;
    font-weight: 700;
    color: #fff !important;
    background: #333;
}

.btn-black-line {
    display: inline-block;
    min-width: 200px;
    height: 70px;
    line-height: 68px;
    padding: 0 10px;
    font-size: 24px;
    font-weight: 700;
    color: #333 !important;
    background: #fff;
    border: 1px solid #333;
}

.btn-block a, .btn-block button {
    vertical-align: middle;
}

.quiz-wrap .btn-block {
    width: 540px;
    margin: 20px auto;
    padding: 0 0 30px;
    background: #fff;
}

.div-quiz-option {
    min-height: 780px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.quiz-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 100px;
    padding-top: 20px;
}

.quiz-title .tit {
    font-size: 30px;
    font-weight: 700;
    color: #333;
    line-height: 36px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.quiz-title .name {
    flex: none;
    margin-left: 20px;
    text-align: right;
    font-size: 24px;
    font-weight: 700;
    color: #333;
}

.quiz-title .name em {
    font-weight: 300;
    color: #999;
}

.time-line {
    display: inline-block;
    width: 100%;
    height: 15px;
    text-align: left;
    overflow: hidden;
    vertical-align: top;
    background: #f1f1f1;
}

.time-line span {
    display: inline-block;
    height: 100%;
    vertical-align: top;
    background: #00cbb5;
    /* background:-webkit-linear-gradient(left,  #fee01e 0%,#feb71e 50%,#fe821e 90%);background: linear-gradient(to right,  #fee01e 0%,#feb71e 50%,#fe821e 90%) */;
}

.time-txt {
    display: flex;
    justify-content: space-between;
    padding-top: 15px;
}

.time-txt .num {
    font-size: 28px;
    font-weight: 500;
    color: #a0a1a6;
}

.time-txt .item-num {
    display: flex;
    flex: auto;
    margin: 0 20px;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.time-txt .item-num em {
    display: inline-block;
    width: 32px;
    height: 32px;
    line-height: 29px;
    margin: 0 4px;
    border: 1px solid #dbdbdb;
    flex: 0 0 auto;
    background: #f4f4f4;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
}

.time-txt .item-num em.correct {
    border: 1px solid #3c8bee;
    background: #3c8bee;
    color: #fff;
}

.time-txt .item-num em.wrong {
    border: 1px solid #ef4b66;
    background: #ef4b66;
    color: #fff;
}

.time-txt .time {
    padding: 2px 0 2px 33px;
    font-size: 28px;
    font-weight: 700;
    color: #111;
    background: url('../images/quiz/ico_time.png') no-repeat 0 50%;
}

.quiz-cont {
    text-align: center;
    position: relative;
}

.quiz-cont .info-important {
    text-align: center;
    padding: 50px 0;
}

.quiz-cont .info-important p {
    font-size: 30px;
    margin-top: 20px;
    font-weight: 600;
}

.quiz-cont .info-cnt {
    text-align: center;
}

.quiz-cont .info-cnt p {
    font-size: 30px;
    margin-top: 20px;
    font-weight: 600;
}

.quiz-cont .question {
    padding: 20px 30px 0;
    font-size: 40px;
    font-weight: 700;
    color: #333;
    line-height: 50px;
}

.quiz-cont .media {
    margin-top: 38px;
    display: flex;
    justify-content: center;
}

.quiz-cont .media .thumb {
    display: table;
    position: relative;
}

.quiz-cont .media .thumb img {
    width: auto;
}

.quiz-cont .media .txt {
    display: table;
    position: relative;
    width: 500px;
    height: 200px;
}

.quiz-cont .media .txt em {
    display: table-cell;
    vertical-align: middle;
    background: #f4f4f4;
    text-align: center;
    font-size: 24px;
    font-weight: 300;
    color: #999;
    line-height: 34px;
}

.quiz-cont .media .thumb .btn-zoom {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 35px;
    height: 34px;
    text-indent: -9999px;
    overflow: hidden;
    background: url('../images/quiz/ico_zoom_red.png') no-repeat 50% 50%;
}

.quiz-cont .media video {
    width: 500px;
}

.quiz-cont .answer {
    margin-top: 45px;
    padding: 0 5%;
}

.quiz-cont .explanation {
    padding: 0 30px;
    font-size: 35px;
    font-weight: 700;
    color: #333;
    line-height: 50px;
}

.quiz-cont .ox ul {
    display: flex;
    justify-content: center;
}

.quiz-cont .ox ul li {
    padding: 0 15px;
    width: 100%;
}

.quiz-cont .ox ul li button {
    position: relative;
    width: 100%;
    height: 130px;
    border-radius: 20px;
    text-indent: -9999px;
    overflow: hidden;
}

.quiz-cont .ox ul li:nth-child(1) button {
    background: #f0f0f0 url('../images/quiz/ico_o.png') no-repeat 50% 50%;
}

.quiz-cont .ox ul li:nth-child(1) button:hover {
    background: #00cbb5 url('../images/quiz/ico_o.png') no-repeat 50% 50%;
}

.quiz-cont .ox.text ul li:nth-child(1) button:hover {
    background: #00cbb5;
}

.quiz-cont .ox ul li:nth-child(1) button.checked {
    background: #00cbb5 url('../images/quiz/ico_o.png') no-repeat 50% 50%;
}

.quiz-cont .ox.text ul li:nth-child(1) button.checked {
    background: #00cbb5;
}

.quiz-cont .ox ul li:nth-child(2) button {
    background: #f0f0f0 url('../images/quiz/ico_x.png') no-repeat 50% 50%;
}

.quiz-cont .ox ul li:nth-child(2) button:hover {
    background: #00cbb5 url('../images/quiz/ico_x.png') no-repeat 50% 50%;
}

.quiz-cont .ox.text ul li:nth-child(2) button:hover {
    background: #00cbb5;
}

.quiz-cont .ox ul li:nth-child(2) button.checked {
    background: #00cbb5 url('../images/quiz/ico_x.png') no-repeat 50% 50%;
}

.quiz-cont .ox.text ul li:nth-child(2) button.checked {
    background: #00cbb5;
}

.quiz-cont .ox ul li button.checked:after {
    content: '';
    position: absolute;
    width: 100px;
    height: 75px;
    right: 0px;
    top: 30px;
    background: url('../images/quiz/ico_check.png') no-repeat 50% 50%;
}

.quiz-cont .ox.text ul li {
    margin: 0 10px;
    padding: 0;
    background: #f0f0f0;
    border-radius: 20px;
}

.quiz-cont .ox.text ul li button {
    text-indent: 0;
    background: none;
    text-align: left;
    padding: 20px;
    font-size: 24px;
    font-weight: 700;
    color: #000;
    line-height: 1.4;
    height: auto;
    min-height: 130px;
    padding: 8px 80px 8px 35px;
}

/* .quiz-cont .objective ul {overflow:hidden;} */
.quiz-cont .objective ul li {
    float: left;
    width: calc(50% - 20px);
    margin: 8px 10px;
    position: relative;
}

/* .quiz-cont .objective ul li span.no.badge {background:#f04b66;height:34px; width:34px;border-radius:34px;line-height: 34px;font-size: 18px;position: absolute;left: -10px; top:-10px;z-index:10;} */
.quiz-cont .objective ul li button {
    position: relative;
    width: 100%;
    padding: 8px 80px 8px 35px;
    min-height: 60px;
    border-radius: 15px;
    text-align: left;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
}

.quiz-cont .objective ul li button {
    background: #f0f0f0;
    height: 80px;
}

.quiz-cont .objective ul li button.checked {
    background: #00cbb5;
}

.quiz-cont .objective ul li button.checked:after {
    content: '';
    position: absolute;
    width: 70px;
    height: 80px;
    right: 20px;
    top: 0px;
    background: url('../images/quiz/ico_check.png') no-repeat 50% 50%;
    background-size: 64px;
}

.quiz-cont .order ul {
    padding: 0 10%;
}

.quiz-cont .order ul li {
    display: table;
    width: 100%;
    padding: 8px 60px 8px 35px;
    min-height: 60px;
    margin: 10px 0;
    text-align: left;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 50px;
    background: #f0f0f0 url('../images/quiz/ico_move.png') no-repeat right 30px top 50%;
    cursor: move;
}

.quiz-cont .order ul li span {
    display: table-cell;
    vertical-align: middle;
}

.quiz-cont .subjective div, .quiz-cont .initial div {
    padding: 0 8%;
}

.quiz-cont .subjective .form-keyword, .quiz-cont .initial .form-keyword {
    height: 108px;
    padding: 0 30px;
    border: 6px solid #d9d9d9;
    font-size: 30px;
    font-weight: 700;
    color: #333;
}

.quiz-cont .subjective .form-keyword:focus, .quiz-cont .initial .form-keyword:focus {
    background-image: linear-gradient(to top, #ef4b66, #ef4b66 3px, transparent 3px, transparent 100%);
    background-size: 100% 100%;
    border-bottom: 6px solid #d9d9d9;
}

.quiz-cont .explanation div {
    height: 200px;
    margin: 0 8%;
    padding: 20px;
    font-size: 35px;
    font-weight: 700;
    color: #333;
    text-align: center;
    line-height: 1.3;
}

.quiz-cont .txt-box div {
    min-height: 200px;
    margin: 0 8%;
    padding: 20px;
    font-size: 30px;
    font-weight: 700;
    color: #333;
    text-align: center;
    line-height: 1.3;
}

.quiz-cont .initial-keyword {
    margin: 40px 0;
    display: flex;
    justify-content: center;
}

.quiz-cont .initial-keyword div {
    display: table;
    margin: 0 7px;
}

.quiz-cont .initial-keyword div span {
    width: 140px;
    height: 140px;
    background: #fbbf3b;
    border-radius: 20px;
    font-size: 120px;
    font-weight: 700;
    color: #fff;
    display: table-cell;
    vertical-align: middle;
    line-height: 1;
}

.quiz-wrap .quiz-head h2 {
    padding-top: 80px;
    font-size: 35px;
    font-weight: 700;
    color: #333;
    line-height: 36px;
    text-align: center;
}

.quiz-info {
    width: 700px;
    margin: 115px auto 0;
}

.quiz-info li {
    width: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    background: #f4f4f4;
    border-radius: 15px;
    text-align: left;
    line-height: 1.3;
}

.quiz-info li span {
    width: 220px;
    flex: none;
    padding: 10px 10px 10px 85px;
    font-size: 24px;
    color: #1f1f1f;
    font-weight: 700;
}

.quiz-info li em {
    width: 100%;
    padding: 10px 10px 10px 0;
    font-size: 24px;
    color: #1f1f1f;
}

.quiz-info li:nth-child(1) {
    background: #f4f4f4 url('../images/quiz/ico_info1.png') no-repeat 50px 50%;
}

.quiz-info li:nth-child(2) {
    background: #f4f4f4 url('../images/quiz/ico_info2.png') no-repeat 50px 50%;
}

.quiz-info li:nth-child(3) {
    background: #f4f4f4 url('../images/quiz/ico_info5.png') no-repeat 50px 50%;
}

.quiz-info li:nth-child(4) {
    background: #f4f4f4 url('../images/quiz/ico_info4.png') no-repeat 50px 53%;
}

.quiz-info li:nth-child(5) {
    background: #f4f4f4 url('../images/quiz/ico_info3.png') no-repeat 50px 53%;
}

.quiz-wrap.strart .quiz-cont {
    position: relative;
}

.quiz-wrap.strart .btn-block {
    margin-top: 80px;
}

.quiz-wrap .part-num {
    margin-top: 20px;
    font-size: 30px;
    color: #1f1f1f;
    line-height: 1.3;
}

.quiz-wrap .part-num span {
    color: #ef4b66;
    font-weight: 700;
}

.quiz-wrap .part-num .more {
    display: inline-block;
    min-width: 85px;
    height: 35px;
    line-height: 33px;
    padding-right: 10px;
    margin-left: 5px;
    text-align: center;
    font-size: 13px;
    color: #fff !important;
    vertical-align: middle;
    background: #ef4b66 url('../images/quiz/ico_arrow.png') no-repeat 85% 50%;
    white-space: nowrap;
    position: relative;
    top: -2px;
}

.quiz-part {
    left: 50%;
    bottom: 50px;
    width: 480px;
    padding: 10px 10px 10px 12px;
    background: #fff;
}

.quiz-part ul {
    padding-bottom: 100px;
}

.quiz-part li {
    float: left;
    width: 40px;
    height: 40px;
    line-height: 40px;
    margin: 3px 2px 2px 3px;
    text-align: center;
    font-size: 15px;
    color: #999;
    font-weight: 500;
    background: #f4f4f4;
}

.quiz-part li.on {
    color: #fff;
    background: #00cbb5;
}

.quiz-part .part-txt {
    margin: 25px 0 20px;
    font-size: 20px;
    color: #1f1f1f;
    line-height: 1.3;
}

.quiz-part .part-txt span {
    color: #ef4b66;
    font-weight: 700;
}

.quiz-part .close {
    position: absolute;
    right: 20px;
    top: 20px;
    width: 22px;
    height: 22px;
    text-indent: -9999px;
    overflow: hidden;
    background: url('../images/sub/ico_close.png') no-repeat 0 0;
}

.quiz-wrap .part-desc {
    width: 550px;
    margin: 100px auto 30px;
    font-size: 24px;
    color: #1f1f1f;
    line-height: 1.3;
    text-align: center;
}

.quiz-wrap.end .btn-block {
    margin-top: 120px;
}

.quiz-wrap.end .quiz-cont {
    overflow: hidden;
    padding-top: 35px;
}

.quiz-wrap.end .quiz-rank {
    float: right;
    width: 520px;
    position: relative;
}

.quiz-wrap.end .quiz-rank .rank {
    position: absolute;
    right: 10.8%;
    top: 21%;
    font-size: 55px;
    color: #333;
    font-weight: 700;
    width: 100px;
    text-align: center;
}

.quiz-wrap.end .quiz-result {
    float: left;
    width: 410px;
    padding-top: 95px;
}

.quiz-wrap.end .quiz-result .result1 li {
    width: 100%;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    line-height: 1.3;
    text-align: left;
}

.quiz-wrap.end .quiz-result .result1 li span {
    width: 190px;
    height: 58px;
    line-height: 58px;
    margin-right: 22px;
    flex: none;
    font-size: 30px;
    color: #fff;
    font-weight: 500;
    background: #ef4b66;
    border-radius: 58px;
    text-align: center;
}

.quiz-wrap.end .quiz-result .result1 li em {
    width: 100%;
    font-size: 36px;
    color: #333;
    font-weight: 700;
}

.quiz-wrap.end .quiz-result .result1 li em i {
    color: #ef4b66;
    font-style: normal;
}

.quiz-wrap.end .quiz-result .result2 {
    margin-top: 50px;
    padding: 20px 30px;
    background: #f4f4f4;
}

.quiz-wrap.end .quiz-result .result2 li {
    display: flex;
    align-items: start;
    margin: 6px 0;
    line-height: 1.3;
    text-align: left;
}

.quiz-wrap.end .quiz-result .result2 li span {
    width: 75px;
    flex: none;
    font-size: 20px;
    color: #333;
    font-weight: 700;
}

.quiz-wrap.end .quiz-result .result2 li em {
    width: 100%;
    font-size: 20px;
    color: #333;
}

.question-num {
    display: flex;
    justify-content: center;
    padding: 60px 0;
    margin: 0 -1px;
}

.question-num .inner {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.question-num button {
    display: inline-block;
    width: 58px;
    height: 58px;
    line-height: 58px;
    margin: 0 2px;
    background: #f4f4f4;
    text-align: center;
    font-size: 25px;
    font-weight: 700;
    color: #333;
    flex: none;
}

.question-num button.correct {
    background: #3c8bee;
    color: #fff;
}

.question-num button.wrong {
    background: #ef4b66;
    color: #fff;
}

.question-num button.prev {
    text-indent: -9999px;
    overflow: hidden;
    background: #f4f4f4 url('../images/quiz/ico_prev.png') no-repeat 50% 50%;
}

.question-num button.next {
    text-indent: -9999px;
    overflow: hidden;
    background: #f4f4f4 url('../images/quiz/ico_next.png') no-repeat 50% 50%;
}

.result-box {
    padding: 40px 30px;
    border: 1px solid #e8e8e8;
}

.result-box.scroll-box {
    max-height: 460px;
    overflow: auto;
}

.result-box li {
    display: flex;
    align-items: start;
    margin: 5px 0;
    line-height: 1.3;
}

.result-box li.first {
    margin-bottom: 30px;
}

.result-box li span {
    width: 130px;
    flex: none;
    font-size: 25px;
    color: #333;
    font-weight: 700;
}

.result-box li span.correct {
    color: #ef4b66;
}

.result-box li em {
    width: 100%;
    font-size: 25px;
    color: #333;
}

@media only all and (max-width: 1120px) {
    .quiz-wrap {
        width: auto;
    }

    .quiz-title {
        padding: 20px 20px 0;
    }

    .time-txt {
        padding: 15px 20px 0;
    }

    .quiz-cont .initial-keyword {
        padding: 0 15px;
    }

    .quiz-cont .initial-keyword div span {
        width: 17vw;
        height: 15vw;
        font-size: 10vw;
    }

    .quiz-wrap .quiz-head h2 {
        padding: 80px 20px 0;
    }

    .quiz-wrap.end .quiz-cont {
        padding: 35px 20px;
    }
}

@media only all and (max-width: 1024px) {
    .quiz-cont .objective ul li {
        float: none;
        width: calc(100% - 0px);
        margin: 20px 0;
    }

    .quiz-cont .objective ul li span.no.badge {
        background: #fbe347;
        height: 28px;
        width: 28px;
        border-radius: 28px;
        line-height: 28px;
        font-size: 14px;
        position: absolute;
        left: -10px;
        top: -10px;
        z-index: 10;
    }

    .quiz-cont .order ul {
        padding: 0;
    }

    .quiz-cont .subjective div, .quiz-cont .initial div {
        padding: 0 5px;
    }

    .quiz-wrap.end .quiz-rank {
        float: none;
        width: 52vw;
        margin: 0 auto;
    }

    .quiz-wrap.end .quiz-rank .rank {
        right: 10%;
        top: 20%;
        font-size: 7vw;
    }

    .quiz-wrap.end .quiz-result {
        float: none;
        width: auto;
        padding-top: 50px;
    }

    .quiz-wrap.end .btn-block {
        margin-top: 30px;
    }
}

@media only all and (max-width: 767px) {
    .btn-pink {
        min-width: auto;
        height: 50px;
        line-height: 48px;
        font-size: 18px;
    }

    .btn-pink-line {
        min-width: auto;
        height: 50px;
        line-height: 48px;
        font-size: 18px;
    }

    .btn-black {
        min-width: auto;
        height: 50px;
        line-height: 48px;
        font-size: 18px;
    }

    .btn-black-line {
        min-width: auto;
        height: 50px;
        line-height: 48px;
        font-size: 18px;
    }

    .quiz-wrap .btn-block {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .quiz-wrap .btn-block a {
        width: 100%;
        min-width: auto;
        margin: 0;
    }

    .quiz-wrap .btn-block a:only-child {
        width: 100%;
    }

    .quiz-head.quiz {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        background: #fff;
        z-index: 1;
    }

    .quiz-title {
        min-height: 56px;
        padding: 4px 15px 0;
        display: none;
    }

    .quiz-title .tit {
        font-size: 20px;
        line-height: 26px;
    }

    .quiz-title .name {
        margin-left: 19px;
        font-size: 19px;
    }

    .time-line {
        height: 10px;
    }

    .time-txt {
        padding: 5px 15px;
    }

    .time-txt .num {
        font-size: 17px;
    }

    .time-txt .item-num {
        margin: 0 10px;
    }

    .time-txt .item-num em {
        width: 22px;
        height: 22px;
        line-height: 20px;
        margin: 0 2px;
        font-size: 13px;
        font-weight: 500;
    }

    .time-txt .time {
        padding: 2px 0 2px 22px;
        font-size: 17px;
        background: url('../images/quiz/ico_time.png') no-repeat 0 2PX;
        background-size: 16px;
    }

    .quiz-cont {
        padding: 60px 0 85px;
    }

    .quiz-wrap.strart .quiz-cont {
        padding: 0 15px 85px;
    }

    .quiz-cont .question {
        padding: 20px 15px 0;
        font-size: 21px;
        line-height: 30px;
    }

    .quiz-cont .media {
        margin-top: 30px;
    }

    .quiz-cont .media video {
        width: 100%;
    }

    .quiz-cont .answer {
        margin-top: 35px;
        padding: 0 3%;
    }

    .quiz-cont .explanation {
        padding: 20px 15px 0;
        font-size: 21px;
        line-height: 30px;
    }

    .quiz-cont .ox ul li {
        padding: 0 10px;
    }

    .quiz-cont .objective ul {
        margin: 0 5px;
    }

    .quiz-cont .objective ul li button {
        padding: 8px 50px 8px 15px;
        min-height: 50px;
        font-size: 16px;
        font-weight: 500;
        border-radius: 10px;
    }

    .quiz-cont .objective ul li button.checked:after {
        width: 40px;
        height: 30px;
        right: 10px;
        top: 10px;
        background-size: 100%;
    }

    .quiz-cont .order ul {
        margin: 0 5px;
    }

    .quiz-cont .order ul li {
        padding: 6px 40px 6px 20px;
        min-height: 44px;
        font-size: 16px;
        background: #f0f0f0 url('../images/quiz/ico_move.png') no-repeat right 20px top 50%;
    }

    .quiz-cont .subjective .form-keyword, .quiz-cont .initial .form-keyword {
        height: 70px;
        padding: 0 15px;
        border: 4px solid #d9d9d9;
        font-size: 18px;
        font-weight: 700;
        color: #333;
        letter-spacing: -1px;
    }

    .quiz-cont .subjective .form-keyword:focus, .quiz-cont .initial .form-keyword:focus {
        background-image: linear-gradient(to top, #ef4b66, #ef4b66 2px, transparent 2px, transparent 100%);
        background-size: 100% 100%;
        border-bottom: 4px solid #d9d9d9;
    }

    .quiz-cont .explanation div {
        height: 126px;
        margin: 0 3%;
        padding: 10px 15px;
        font-size: 18px;
    }

    .quiz-cont .txt-box div {
        height: 126px;
        margin: 0 3%;
        padding: 10px 15px;
        border: 4px solid #d9d9d9;
        font-size: 18px;
    }

    .quiz-wrap .quiz-head h2 {
        padding: 30px 15px 0;
        font-size: 25px;
        line-height: 28px;
    }

    .quiz-info {
        width: auto;
        margin: 50px auto 0;
    }

    .quiz-info li {
        min-height: 46px;
        margin-bottom: 10px;
        border-radius: 10px;
    }

    .quiz-info li span {
        width: 130px;
        padding: 10px 10px 10px 48px;
        font-size: 17px;
    }

    .quiz-info li em {
        padding: 10px 10px 10px 0;
        font-size: 17px;
    }

    .quiz-info li:nth-child(1) {
        background: #f4f4f4 url('../images/quiz/ico_info1.png') no-repeat 20px 50%;
        background-size: 20px;
    }

    .quiz-info li:nth-child(2) {
        background: #f4f4f4 url('../images/quiz/ico_info2.png') no-repeat 20px 50%;
        background-size: 20px;
    }

    .quiz-info li:nth-child(3) {
        background: #f4f4f4 url('../images/quiz/ico_info5.png') no-repeat 20px 50%;
        background-size: 20px;
    }

    .quiz-info li:nth-child(4) {
        background: #f4f4f4 url('../images/quiz/ico_info4.png') no-repeat 20px 53%;
        background-size: 20px;
    }

    .quiz-info li:nth-child(5) {
        background: #f4f4f4 url('../images/quiz/ico_info3.png') no-repeat 20px 53%;
        background-size: 20px;
    }

    .quiz-wrap .part-num {
        margin-top: 80px;
        font-size: 21px;
    }

    .quiz-wrap .part-num .more {
        min-width: 60px;
        height: 30px;
        line-height: 28px;
        padding-right: 10px;
        font-size: 12px;
    }

    .quiz-wrap .part-desc {
        width: auto;
        margin: 50px auto 20px;
        font-size: 14px;
    }

    .quiz-wrap.strart .btn-block {
        margin-top: 0;
    }

    .quiz-wrap.end .btn-block {
        margin-top: 0;
    }

    .question-num {
        padding: 20px 0 30px;
    }

    .question-num button {
        height: 9vw;
        line-height: inherit;
        margin: 0 2px;
        font-size: 16px;
        flex: auto;
    }

    .question-num button.prev {
        background-size: 8px;
    }

    .question-num button.next {
        background-size: 8px;
    }

    .result-box {
        padding: 20px;
    }

    .result-box li {
        margin: 5px 0;
    }

    .result-box li.first {
        margin-bottom: 20px;
    }

    .result-box li span {
        width: 90px;
        font-size: 17px;
    }

    .result-box li em {
        font-size: 17px;
    }

    .quiz-wrap.end .quiz-cont {
        padding: 15px 15px 85px;
    }

    .quiz-wrap.end .quiz-result {
        padding-top: 35px;
    }

    .quiz-wrap.end .quiz-result .result1 li {
        margin-bottom: 10px;
    }

    .quiz-wrap.end .quiz-result .result1 li span {
        width: 120px;
        height: 42px;
        line-height: 40px;
        margin-right: 10px;
        font-size: 20px;
    }

    .quiz-wrap.end .quiz-result .result1 li em {
        font-size: 23px;
    }

    .quiz-wrap.end .quiz-result .result2 {
        margin-top: 20px;
        padding: 15px 20px;
    }

    .quiz-wrap.end .quiz-result .result2 li span {
        width: 65px;
        font-size: 17px;
    }

    .quiz-wrap.end .quiz-result .result2 li em {
        font-size: 17px;
    }

    .quiz-wrap.end .quiz-rank .rank {
        width: 11vw;
        letter-spacing: -2px;
    }

    .quiz-cont .objective ul li button {
        height: auto;
    }
}

@media only all and (max-width: 640px) {
    .quiz-cont .ox ul li button.checked:after {
        content: '';
        position: absolute;
        width: 60px;
        height: 50px;
        right: 5px;
        top: 5px;
        background-size: 100%;
    }

    .quiz-cont .initial-keyword {
        margin: 40px 0;
    }

    .quiz-cont .initial-keyword div {
        margin: 0 3px;
    }

    .quiz-cont .initial-keyword div span {
        border-radius: 10px;
    }

    .quiz-part {
        bottom: 45px;
        width: 100%;
        padding: 5px;
    }

    .quiz-part li {
        width: 34px;
        height: 34px;
        line-height: 34px;
        margin: 2px;
        font-size: 14px;
    }

    .quiz-part .part-txt {
        margin: 25px 0 20px;
        font-size: 18px;
    }

    .quiz-cont .info-important p {
        font-size: 22px;
        margin-top: 20px;
        font-weight: 600;
    }

    .quiz-cont .info-cnt p {
        font-size: 22px;
        margin-top: 20px;
        font-weight: 600;
    }
}

@media only all and (max-width: 480px) {
    .quiz-cont .media .thumb {
        width: 100%;
    }

    .quiz-cont .media .thumb .btn-zoom {
        right: 10px;
        top: 10px;
        width: 26px;
        height: 26px;
        background-size: 26px;
    }

    .quiz-cont .media .txt {
        width: 100%;
        height: 160px;
    }

    .quiz-cont .media .txt em {
        font-size: 18px;
        line-height: 24px;
    }

    .quiz-cont .ox ul li button {
        height: 120px;
    }

    .quiz-cont .ox ul li:nth-child(1) button {
        background-size: 70px;
    }

    .quiz-cont .ox ul li:nth-child(2) button {
        background-size: 70px;
    }

    .quiz-cont .ox ul li button.checked:after {
        content: '';
        position: absolute;
        width: 60px;
        height: 50px;
        right: 0;
        top: 5px;
        background-size: 100%;
    }

    .quiz-wrap.end .quiz-rank {
        width: 65vw;
    }

    .quiz-wrap.end .quiz-rank .rank {
        right: 11.5%;
        top: 20%;
        font-size: 9vw;
    }
}

/* 이용안내 */
.guide-tab:after {
    content: "";
    display: block;
    clear: both;
}

.guide-tab li {
    float: left;
    width: calc(100% / 3);
    text-align: center;
    background: #fff;
}

.guide-tab li a {
    display: block;
    height: 54px;
    line-height: 54px;
    font-size: 22px;
    color: #999;
    font-weight: 700;
    border-bottom: 4px solid #ccc;
    transition: all 0.2s;
}

.guide-tab li.on a, .guide-tab li a:hover {
    color: #212121;
    font-size: 28px;
    border-bottom: 4px solid #f0824f;
}

.ai-class .dlist {
    padding-top: 60px;
    text-align: center;
}

.ai-class .dlist dt {
    margin-bottom: 12px;
    font-size: 24px;
    color: #f0824f;
    font-weight: 500;
}

.ai-class .dlist dd.dd01 {
    margin-bottom: 20px;
    font-size: 60px;
    color: #1f1f1f;
    font-weight: 700;
    font-family: 'SDBook';
}

.ai-class .dlist dd.dd02 {
    font-size: 20px;
    color: #1f1f1f;
    font-weight: 500;
    line-height: 32px;
}

.ai-class .dlist dd.dd02 span {
    color: #666;
    font-weight: 300;
}

.ai-class .h3-tit, .ai-guide .h3-tit {
    position: relative;
    margin: 80px 0 20px;
    display: inline-block;
    color: #1f1f1f;
    font-size: 28px;
    font-weight: 700;
    z-index: 1;
}

.ai-class .h3-tit:after, .ai-guide .h3-tit:after {
    content: "";
    position: absolute;
    bottom: -2px;
    right: 0;
    width: 100%;
    height: 8px;
    background: #f4a783;
    z-index: -1;
}

.ai-class .txt1 {
    color: #1f1f1f;
    font-size: 18px;
    line-height: 28px;
}

.ai-class .img {
    text-align: center;
    padding-top: 50px;
}

.ai-guide .block-btn {
    padding: 0 20px 20px;
    text-align: right;
}

.ai-guide .block-btn a {
    display: inline-block;
    height: 45px;
    line-height: 45px;
    margin-right: 2px;
    padding: 0 25px;
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    background: #37b4dc;
    border-radius: 45px;
    vertical-align: middle;
    font-size: 16px;
}

.ai-guide .block-btn a i {
    font-size: 18px;
}

.ai-guide .block-btn a:hover {
    background: #239dc5;
}

.ai-guide .block-btn a:nth-child(2) {
    margin-left: 10px;
}

.ai-guide .slide-img img {
    text-align: center;
}

.ai-guide .slide-img img {
    margin-bottom: 20px;
}

.ai-guide .block-btn a.pink {
    background: #ef4b66;
}

.ai-guide .block-btn a.pink:hover {
    background: #b73b4f;
}

.ai-guide .block-btn a.orange {
    background: #f0824f;
}

.ai-guide .block-btn a.orange:hover {
    background: #e67643;
}

.use-tab {
    margin: 35px -5px 40px;
}

.use-tab:after {
    content: "";
    display: block;
    clear: both;
}

.use-tab li {
    float: left;
    width: calc(100% / 3 - 10px);
    margin: 0 5px;
    text-align: center;
    background: #fff;
}

.use-tab li a {
    display: block;
    height: 82px;
    line-height: 76px;
    font-size: 24px;
    color: #999;
    font-weight: 500;
    border: 3px solid #e8e8e8;
    transition: all 0.2s;
}

.use-tab li a span {
    color: #666;
    font-weight: 700;
}

.use-tab li.on a, .use-tab li a:hover {
    color: #ffd7c4;
    border: 3px solid #f0824f;
    background: #f0824f;
}

.use-tab li.on a span, .use-tab li a:hover span {
    color: #fff;
}

.sub-tab {
    margin: 35px 0 0;
    display: flex;
    justify-content: center;
}

.sub-tab li {
    margin: 0 5px;
    text-align: center;
    background: #fff;
}

.sub-tab li a {
    display: block;
    padding: 10px 20px;
    font-size: 20px;
    color: #999;
    font-weight: 500;
    border: 3px solid #e8e8e8;
    transition: all 0.2s;
}

.sub-tab li.on a, .sub-tab li a:hover {
    color: #ffd7c4;
    border: 3px solid #f0824f;
    background: #f0824f;
}

.use-box {
    background: #f4f4f4;
    padding: 75px 30px 0;
    margin-bottom: 90px;
}

.use-box:after {
    content: "";
    display: block;
    clear: both;
}

.use-box .col {
    float: left;
    width: 50%;
    padding: 0 34px;
    text-align: center;
}

.use-box .col .img-box {
    width: 560px;
    margin-bottom: -75px;
    box-shadow: 10px 17px 50px 0px rgba(30, 30, 30, 0.2);
}

.use-box .col.full {
    float: none;
    width: auto;
    padding: 0;
}

.use-box .col.full .img-box-wrap:after {
    content: "";
    display: block;
    clear: both;
}

.use-box dt {
    margin-bottom: 14px;
    font-size: 35px;
    color: #1f1f1f;
    font-weight: 700;
    font-family: 'SDBook';
}

.use-box dd {
    font-size: 18px;
    color: #1f1f1f;
    line-height: 28px;
}

.use-box dd.dd01 {
    padding: 30px 0 40px;
}

.use-box dd .btn {
    display: inline-block;
    min-width: 100px;
    height: 40px;
    line-height: 40px;
    padding-right: 12px;
    text-align: center;
    font-size: 14px;
    color: #fff !important;
    vertical-align: middle;
    white-space: nowrap;
    background: url('../images/sub/ico_arrow6.png') no-repeat right 18px top 50%;
}

.use-box dd .btn.lightblue {
    background-color: #36b4dc;
}

.use-box dd .btn.yellow {
    background-color: #fdb324;
}

.use-box dd .btn.pink {
    background-color: #ef4b66;
}

.use-box dd .btn.blue {
    background-color: #6591e8;
}

.ai-class .gray-box {
    margin-top: 40px;
    background: #f4f4f4;
    padding: 60px 50px;
    text-align: center;
}

.ai-class .gray-box + .gray-box {
    margin-top: 20px;
}

.ai-class .gray-box dt {
    margin-bottom: 12px;
    font-size: 35px;
    color: #1f1f1f;
    font-weight: 700;
    font-family: 'SDBook';
}

.ai-class .gray-box dd {
    font-size: 18px;
    color: #1f1f1f;
    line-height: 28px;
}

.ai-class .gray-box .list {
    margin-top: 40px;
    overflow: hidden;
}

.ai-class .gray-box .list li {
    float: left;
    width: calc(100% / 4);
    padding-top: 80px;
    font-size: 15px;
    color: #1f1f1f;
    border-left: 1px solid #e0e0e0;
    line-height: 24px;
}

.ai-class .gray-box .list li:first-child {
    border-left: 0;
}

.ai-class .gray-box .list li span {
    display: block;
    font-size: 18px;
    font-weight: 700;
}

.ai-class .gray-box .list li:nth-child(1) {
    background: url('../images/sub/ico_class1.png') no-repeat 50% 0;
}

.ai-class .gray-box .list li:nth-child(2) {
    background: url('../images/sub/ico_class2.png') no-repeat 50% 0;
}

.ai-class .gray-box .list li:nth-child(3) {
    background: url('../images/sub/ico_class3.png') no-repeat 50% 0;
}

.ai-class .gray-box .list li:nth-child(4) {
    background: url('../images/sub/ico_class4.png') no-repeat 50% 0;
}

.ai-class .gray-box .list.type2 li:nth-child(1) {
    background: url('../images/sub/ico_class5.png') no-repeat 50% 0;
}

.ai-class .gray-box .list.type2 li:nth-child(2) {
    background: url('../images/sub/ico_class6.png') no-repeat 50% 0;
}

.ai-class .gray-box .list.type2 li:nth-child(3) {
    background: url('../images/sub/ico_class7.png') no-repeat 50% 0;
}

.ai-class .gray-box .list.type2 li:nth-child(4) {
    background: url('../images/sub/ico_class8.png') no-repeat 50% 0;
}

.search-wrap.faq {
    padding: 60px 0;
}

.search-detail.faq {
    border-top: 1px solid #4f4f4f;
}

ul.faq-list {
    margin-top: 45px;
    border-top: 1px solid #4f4f4f;
}

ul.faq-list > li {
    border-bottom: 1px solid #e8e8e8;
}

ul.faq-list > li > span {
    display: flex;
    padding: 28px 70px 28px 0;
    font-size: 15px;
    line-height: 22px;
    color: #1f1f1f;
    background: url('../images/sub/ico_arrow_down.png') no-repeat right 50px top 50%;
    cursor: pointer;
}

ul.faq-list > li > span > em {
    display: inline-block;
    width: 130px;
    padding: 0 20px;
    font-size: 16px;
    color: #1f1f1f;
    font-weight: 700;
    text-align: center;
    flex: none;
}

ul.faq-list > li.on > span {
    background: url('../images/sub/ico_arrow_up.png') no-repeat right 50px top 50%;
}

ul.faq-list > li.answer {
    display: none;
    padding: 40px 50px;
    font-size: 14px;
    color: #333;
    background: #f4f4f4;
    line-height: 25px;
}

ul.faq-list > li.answer > dt {
    margin-top: 10px;
    font-size: 16px;
    color: #333;
    font-weight: 700;
}

ul.faq-list > li.answer > dd {
    position: relative;
    padding-left: 8px;
}

ul.faq-list > li.answer > dd:before {
    content: "-";
    position: absolute;
    left: 0;
    top: 0;
}

ul.faq-list .fileList {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e7e7e7;
}

ul.faq-list .fileList p {
    margin-bottom: 10px;
}

ul.faq-list .fileList a {
    padding-left: 20px;
    color: #444;
    font-size: 13px;
    letter-spacing: 0px;
}

ul.faq-list .fileList a i {
    margin-right: 10px;
}

ul.faq-list .fileList a:hover {
    text-decoration: underline;
    text-underline-position: under;
    font-weight: 600;
}

.ai-guide .sub-tab {
    margin-top: 30px;
}

.ai-guide .sub-tab li a {
    padding: 0 20px;
    border: 0;
}

.ai-guide .sub-tab li.on a, .sub-tab li a:hover {
    color: #f0824f;
    border: 0;
    background: #fff;
}

.ai-guide .use-tab {
    margin: 20px -5px 40px;
}

.ai-guide .use-tab li {
    width: calc(100% / 2 - 10px);
}

.ai-guide .btn_tit {
    display: flex;
    margin: 80px 0 40px;
    justify-content: space-between;
    align-items: center
}

.ai-guide .btn_tit .h3-tit {
    margin: 0;
}

.ai-guide .btn_tit .block-btn {
    padding: 0;
}

.ai-guide .video_list {
    display: flex;
    margin-left: -16px;
}

.ai-guide .video_list .list .vod {
    padding-left: 16px;
}

.ai-guide .video_list .list .vod video {
    width: 100%;
    height: 100%;
}

.ai-guide .video_list .list .tit {
    display: block;
    margin-top: 25px;
    padding-left: 16px;
    font-size: 24px;
    color: #1f1f1f;
    font-weight: 700;
}

.ai-guide .video_list .list p {
    margin-top: 10px;
    padding-left: 16px;
    font-size: 18px;
    line-height: 26px;
    color: #1f1f1f;
}

@media only all and (max-width: 1024px) {
    .guide-tab li a {
        height: 60px;
        line-height: 60px;
        font-size: 18px;
    }

    .guide-tab li.on a, .guide-tab li a:hover {
        font-size: 20px;
    }

    .ai-class {
        padding: 0 20px;
    }

    .ai-class .dlist dt {
        font-size: 22px;
    }

    .ai-class .dlist dd.dd01 {
        font-size: 50px;
    }

    .ai-class .dlist dd.dd02 {
        font-size: 18px;
    }

    .ai-class .h3-tit, .ai-guide .h3-tit {
        margin: 60px 0 30px;
        font-size: 25px;
    }

    .use-tab li a {
        font-size: 20px;
    }

    .use-box {
        margin-bottom: 0;
    }

    .use-box .col {
        float: none;
        width: auto;
        padding-bottom: 70px
    }

    .use-box .col .img-box {
        width: auto;
        margin-bottom: 0;
    }

    .ai-class .gray-box {
        padding: 50px 25px;
    }

    .search-wrap.faq {
        padding: 40px 30px;
    }

    .ai-guide .btn_tit {
        padding: 0 20px;
    }

    .ai-guide .h3-tit {
        margin: 60px 20px 30px;
    }

    .ai-guide .btn_tit .h3-tit {
        margin: 0;
    }

    .ai-guide .use-tab {
        margin: 20px 0 40px;
        padding: 0 15px;
    }

    .ai-guide .video_list {
        margin-left: 0;
    }

    .ai-guide .video_list .list .vod {
        position: relative;
        margin: 0 20px;
        padding: 0;
    }

    .ai-guide .video_list .list .vod:after {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
    }

    .ai-guide .video_list .list.slick-current .vod:after {
        display: none;
    }

    .ai-guide .video_list button[class^='slick-'] {
        position: absolute;
        top: calc(50% - 50px);
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        color: #fff;
        z-index: 10;
        font-size: 0;
        line-height: 0;
        color: transparent;
        cursor: pointer;
        background: url('../images/guide/arr_guide_video.png') center no-repeat;
    }

    .ai-guide .video_list button.slick-prev {
        left: 20px;
    }

    .ai-guide .video_list button.slick-next {
        right: 20px;
        transform: translateY(-50%) rotate(180deg);
    }

    .ai-guide .video_list .list .tit {
        font-size: 20px;
    }

    .ai-guide .video_list .list p {
        font-size: 16px;
        line-height: 22px;
    }
}

@media only all and (max-width: 767px) {
    .guide-tab li a {
        height: 54px;
        line-height: 54px;
        font-size: 15px;
        border-bottom: 3px solid #ccc;
    }

    .guide-tab li.on a, .guide-tab li a:hover {
        font-size: 15px;
        border-bottom: 3px solid #f0824f;
    }

    .ai-class {
        padding: 0 15px;
    }

    .ai-class .dlist {
        padding-top: 40px;
    }

    .ai-class .dlist dt {
        font-size: 18px;
    }

    .ai-class .dlist dd.dd01 {
        margin-bottom: 15px;
        font-size: 36px;
    }

    .ai-class .dlist dd.dd02 {
        font-size: 16px;
        line-height: 26px;
    }

    .ai-class .h3-tit, .ai-guide .h3-tit {
        margin: 30px 0 20px;
        font-size: 20px;
    }

    .ai-class .txt1 {
        font-size: 15px;
        line-height: 22px;
    }

    .ai-class .img {
        padding-top: 30px;
    }

    .use-tab {
        margin: 25px -3px 30px;
    }

    .use-tab li {
        width: calc(100% / 3 - 6px);
        margin: 0 3px;
    }

    .use-tab li a {
        height: 60px;
        line-height: 54px;
        font-size: 16px;
    }

    .use-tab li.on a, .use-tab li a:hover {
        border: 2px solid #f0824f;
    }

    .sub-tab {
        margin: 25px 0 0;
    }

    .sub-tab li a {
        font-size: 16px;
        border: 2px solid #e8e8e8;
    }

    .sub-tab li.on a, .sub-tab li a:hover {
        border: 2px solid #f0824f;
    }

    .use-box {
        padding: 50px 15px 0;
    }

    .use-box .col {
        padding: 0 10px 50px;
    }

    .use-box dt {
        font-size: 24px;
    }

    .use-box dd {
        font-size: 16px;
        line-height: 22px;
    }

    .use-box dd.dd01 {
        padding: 20px 0 30px;
    }

    .ai-class .gray-box {
        margin-top: 30px;
        padding: 30px 10px 10px;
    }

    .ai-class .gray-box dt {
        font-size: 24px;
    }

    .ai-class .gray-box dd {
        font-size: 16px;
        line-height: 22px;
    }

    .ai-class .gray-box .list {
        margin-top: 30px;
    }

    .ai-class .gray-box .list li {
        margin-bottom: 20px;
        width: calc(100% / 2);
        padding-top: 70px;
        font-size: 14px;
    }

    .ai-class .gray-box .list li:nth-child(3) {
        border-left: 0;
    }

    .ai-class .gray-box .list li span {
        font-size: 16px;
    }

    .search-wrap.faq {
        padding: 20px 15px;
    }

    .search-detail.faq {
        padding: 15px 15px 7px;
    }

    .search-detail.faq .cont {
        margin-top: 3px;
    }

    .faq-list {
        margin-top: 30px;
    }

    .faq-list li span {
        padding: 15px 40px 15px 10px;
        font-size: 14px;
        line-height: 20px;
        background: url('../images/sub/ico_arrow_down.png') no-repeat right 15px top 50%;
    }

    .faq-list li em {
        width: 100px;
        padding: 0 5px 0 0;
        font-size: 15px;
    }

    .faq-list li.on span {
        background: url('../images/sub/ico_arrow_up.png') no-repeat right 15px top 50%;
    }

    .faq-list li.answer {
        padding: 20px 20px;
        font-size: 13px;
        line-height: 23px;
    }

    .faq-list li.answer dt {
        font-size: 15px;
    }

    .ai-guide .block-btn {
        padding: 20px 0;
        text-align: center;
    }

    .ai-guide .block-btn a:nth-child(2) {
        margin-left: 0px;
        margin-top: 0;
    }

    .ai-guide .block-btn a {
        height: 40px;
        line-height: 38px;
        margin-right: 2px;
        padding: 0 20px;
        font-size: 14px;
    }

    .ai-guide .block-btn a i {
        font-size: 16px;
    }

    .ai-guide .sub-tab {
        margin-top: 20px;
    }

    .ai-guide .h3-tit {
        margin-left: 20px;
    }

    .ai-guide .btn_tit {
        margin: 30px 0 20px;
    }

    .ai-guide .btn_tit .h3-tit {
        margin-left: 0;
    }

    .ai-guide .use-tab {
        margin-bottom: 0;
    }

    .ai-guide .use-tab li {
        width: calc(100% / 2 - 6px);
    }

    .ai-guide .video_list {
        margin: 0 20px;
    }

    .ai-guide .video_list .list .vod {
        margin: 0;
    }

    .ai-guide .video_list .list .vod:after {
        display: none;
    }

    .ai-guide .video_list button[class^='slick-'] {
        background-color: rgba(0, 0, 0, 0.3)
    }

    .ai-guide .video_list button.slick-prev {
        left: 0;
    }

    .ai-guide .video_list button.slick-next {
        right: 0;
    }

    .ai-guide .video_list .list .tit {
        margin-top: 20px;
        padding-left: 0;
        font-size: 16px;
    }

    .ai-guide .video_list .list p {
        margin-top: 5px;
        padding-left: 0;
        font-size: 12px;
        line-height: 20px;
    }
}

@media only all and (max-width: 640px) {
    .use-tab li a {
        line-height: 18px;
        font-size: 15px;
        padding-top: 9px;
    }

    .use-tab li a span {
        display: block;
    }

    .ai-guide .use-tab li a {
        padding-top: 17px;
    }
}

/* main */
@media only all and (min-width: 1025px){
    #wrap.main #gnb{
        display:flex;
        justify-content:space-between;
        width:46%;
        max-width:914px;
        padding:0 20px;
        background:rgba(255,255,255,0.8);
    }
    #wrap.main #gnb li a{
        padding:0;
    }
}

.main-contents {
    background: #fff;
    overflow: hidden;
}

.main-visual {
    position: relative;
    float: left;
    width: 50%;
    height: 1200px;
    z-index: 1;
}

.main-visual .visual-slider {
    position: relative;
    width: 635px;
    float: right;
}

.main-visual .visual-slider li {
    position: relative;
    height: 1200px;
}

.main-visual .visual-slider li.li01 {
    background: #fdec68;
}

.main-visual .visual-slider li.li02 {
    background: #36b4dc;
}

.main-visual .visual-slider li.li03 {
    background: #fee01e;
}

.main-visual .visual-slider li.li04 {
    background: #6591e8;
}

.main-visual .visual-slider li.li05 {
    background: #00cbb5;
}

.main-visual .visual-slider li.li06 {
    background: #666ee4;
}

.main-visual .visual-slider li.li07 {
    background: #00cbb5;
}

.main-visual .visual-slider li dl {
    padding: 102px 0 0 57px;
}

.main-visual .visual-slider li dt {
    margin-bottom: 10px;
    font-size: 75px;
    color: #fff;
    font-weight: 700;
    font-family: 'SDBook';
}

.main-visual .visual-slider li dd {
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
}

.main-visual .visual-slider li .go-cont {
    margin-top: 40px;
}

.main-visual .visual-slider li .go-cont a {
    display: inline-block;
    min-width: 143px;
    height: 45px;
    line-height: 43px;
    text-decoration: none;
    font-weight: 400;
    text-align: center;
    font-size: 18px;
    color: #fff !important;
    white-space: nowrap;
    background: url('../images/main/ico_arrow.png') no-repeat right 23px top 50%;
    border-radius: 45px;
}

.main-visual .visual-slider li dt {
    animation-fill-mode: both;
    animation-name: fadeUp;
    animation-delay: 0.7s;
    animation-duration: 0.7s;
}

.main-visual .visual-slider li dd {
    animation-fill-mode: both;
    animation-name: fadeUp;
    animation-delay: 1.0s;
    animation-duration: 0.7s;
}

.main-visual .visual-slider li.slick-active .go-cont {
    animation-fill-mode: both;
    animation-name: fadeUp;
    animation-delay: 1.5s;
    animation-duration: 0.7s;
}

.main-visual .visual-slider li.slick-active .ico {
    position: absolute;
    right: 50px;
    bottom: 140px;
    display: inline-block;
    animation-fill-mode: both;
    animation-name: fadeInUp;
    animation-delay: 1.9s;
    animation-duration: 0.7s;
}

.main-visual .visual-slider li.li01 dl {
    padding: 160px 0 0;
    text-align: center;
    position: relative;
    z-index: 1;
}

.main-visual .visual-slider li.li01 dt {
    margin-bottom: 18px;
    font-size: 40px;
    color: #e69021;
    font-weight: 400;
    font-family: 'Noto Sans KR';
}

.main-visual .visual-slider li.li01 dt span, .main-visual .visual-slider li dt span.element {
    display: inline-block;
    height: 40px;
    line-height: 38px;
    font-weight: 300;
    text-align: center;
    font-size: 18px;
    color: #fff !important;
    white-space: nowrap;
    background: #101010;
    border-radius: 45px;
    padding: 0 20px;
    margin-bottom: 35px;
}
.main-visual .visual-slider li.li07 dt span.element{
    background: #015c61;
}

.main-visual .visual-slider li.li01 dd {
    font-size: 75px;
    color: #101010;
    font-weight: 700;
    font-family: 'SDBook';
    line-height: 1;
}

.main-visual .visual-slider li.li01 dd.open {
    font-size: 70px;
}

.main-visual .visual-slider li.li01 .go-cont {
    margin-top: 65px;
}

.main-visual .visual-slider li.li01 .go-cont a {
    display: block;
    width: 215px;
    margin: 13px auto 0;
    background: #37b4dc url('../images/main/ico_arrow.png') no-repeat right 18px top 50%;
    font-family: 'Noto Sans KR';
}

.main-visual .visual-slider li.li01 .go-cont a:hover {
    background-color: #239dc5;
    transition: all 0.3s;
}

.main-visual .visual-slider li.li01.slick-active .ico1 {
    position: absolute;
    right: 0;
    top: 0;
    display: inline-block;
    width: 272px;
    height: 238px;
    background: url('../images/main/ico_img1.png') no-repeat 0 0;
    animation-fill-mode: both;
    animation-name: fadeInDown;
    animation-delay: 0.1s;
    animation-duration: 2s;
}

.main-visual .visual-slider li.li01.slick-active .ico2 {
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-block;
    width: 175px;
    height: 206px;
    background: url('../images/main/ico_img3.png') no-repeat 0 0;
    opacity: 0.3;
    animation-fill-mode: both;
    animation-name: fadeInUp;
    animation-delay: 0.1s;
    animation-duration: 2s;
}

.main-visual .visual-slider li.li01.slick-active .ico3 {
    position: absolute;
    left: 40px;
    bottom: 80px;
    display: inline-block;
    width: 420px;
    height: 260px;
    background: url('../images/main/ico_img8.png') no-repeat 0 0;
    opacity: 0.3;
    animation-fill-mode: both;
    animation-name: fadeInUp;
    animation-delay: 1.5s;
    animation-duration: 2s;
}

.main-visual .visual-slider li.li01.slick-active .ico4 {
    position: absolute;
    left: 310px;
    bottom: 80px;
    display: inline-block;
    width: 300px;
    height: 210px;
    background: url('../images/main/ico_img9.png') no-repeat 0 0;
    opacity: 0.3;
    animation-fill-mode: both;
    animation-name: fadeInUp;
    animation-delay: 2s;
    animation-duration: 2s;
}

.main-visual .visual-slider li.li01.slick-active .ico5 {
    position: absolute;
    left: 290px;
    bottom: 80px;
    display: inline-block;
    width: 150px;
    height: 210px;
    background: url('../images/main/ico_img10.png') no-repeat 0 0;
    opacity: 0.3;
    animation-fill-mode: both;
    animation-name: fadeInUp;
    animation-delay: 2.5s;
    animation-duration: 2s;
}

.main-visual .visual-slider li.li02 dd {
    color: #0f7292;
}

.main-visual .visual-slider li.li02 .go-cont a {
    background-color: #1993ba;
}

.main-visual .visual-slider li.li02 .ico {
    width: 243px;
    height: 242px;
    background: url('../images/main/ico_img4.png') no-repeat 0 0;
}

.main-visual .visual-slider li.li03 dt {
    color: #101010;
}

.main-visual .visual-slider li.li03 dd {
    color: #d9a10a;
}

.main-visual .visual-slider li.li03 .go-cont a {
    background-color: #ecac09;
}

.main-visual .visual-slider li.li03 .ico {
    width: 249px;
    height: 282px;
    background: url('../images/main/ico_img5.png') no-repeat 0 0;
}

.main-visual .visual-slider li.li04 dd {
    color: #345087;
}

.main-visual .visual-slider li.li04 .go-cont a {
    background-color: #4363a4;
}

.main-visual .visual-slider li.li04 .ico {
    width: 243px;
    height: 241px;
    background: url('../images/main/ico_img6.png') no-repeat 0 0;
}

.main-visual .visual-slider li.li05 dd {
    color: #228479;
}

.main-visual .visual-slider li.li05 .go-cont a {
    background-color: #18998b;
}

.main-visual .visual-slider li.li05 .ico {
    width: 269px;
    height: 242px;
    background: url('../images/main/ico_img7.png') no-repeat 0 0;
}

.main-visual .visual-slider li.li06 .dlist1 {
    position: relative;
    padding: 70px 0 0;
    text-align: center;
    position: relative;
    z-index: 1;
}

.main-visual .visual-slider li.li06 .dlist1 dt {
    margin-bottom: 18px;
    font-size: 40px;
    color: #252857;
    font-weight: 400;
    font-family: 'Noto Sans KR';
}

.main-visual .visual-slider li.li06 .dlist1 dt span {
    display: inline-block;
    height: 40px;
    line-height: 38px;
    font-weight: 300;
    text-align: center;
    font-size: 18px;
    color: #fff !important;
    white-space: nowrap;
    background: #101010;
    border-radius: 45px;
    padding: 0 20px;
    margin-bottom: 35px;
}

.main-visual .visual-slider li.li06 .dlist1 dd {
    font-size: 75px;
    color: #fff;
    font-weight: 700;
    font-family: 'SDBook';
    line-height: 1;
}

.main-visual .visual-slider li.li06 .go-cont {
    margin-top: 65px;
}

.main-visual .visual-slider li.li06 .go-cont a {
    display: block;
    width: 295px;
    margin: 13px auto 0;
    color: #111110 !important;
    background: #fce567 url('../images/main/ico_arr.png') no-repeat right 18px top 50%;
    font-family: 'Noto Sans KR';
}

.main-visual .visual-slider li.li06 .go-cont a:hover {
    background-color: #ECC606;
    transition: all 0.3s;
}

.main-visual .visual-slider li.li06 .dlist2 {
    padding: 0;
    text-align: center;
    margin-top: 90px;
}

.main-visual .visual-slider li.li06 .dlist2 dt {
    margin-top: 50px;
    font-size: 22px;
    color: #feef9b;
    font-weight: 500;
    font-family: 'Noto Sans KR';
}

.main-visual .visual-slider li.li06 .dlist2 dd {
    display: inline-block;
    position: relative;
    margin-top: 12px;
    font-size: 32px;
    color: #fff;
    font-family: 'GmarketSansMedium';
}

.main-visual .visual-slider li.li06 .dlist2 dd:before {
    content: "";
    position: absolute;
    bottom: 0;
    left: -6px;
    right: -6px;
    height: 11px;
    background: #3d44a3;
    z-index: -1;
}

.main-visual .visual-slider li.li06.slick-active .ico1 {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-block;
    width: 166px;
    height: 178px;
    background: url('../images/main/ico_nimg1.png') no-repeat 0 0;
    animation-fill-mode: both;
    animation-name: fadeInDown;
    animation-delay: 0.1s;
    animation-duration: 2s;
}

.main-visual .visual-slider li.li06.slick-active .ico2 {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-block;
    width: 206px;
    height: 274px;
    background: url('../images/main/ico_nimg2.png') no-repeat 0 0;
    opacity: 0.3;
    animation-fill-mode: both;
    animation-name: fadeInUp;
    animation-delay: 0.1s;
    animation-duration: 2s;
}
.main-visual .visual-slider li.li07.slick-active .ico1, .main-visual .visual-slider li.li07.slick-active .ico2{
    filter: grayscale(100%) brightness(11);
}

.main-visual .visual-slider li.li06.slick-active .ico3 {
    position: absolute;
    right: 86px;
    top: 55px;
    display: inline-block;
    width: 122px;
    height: 127px;
    background: url('../images/main/ico_nimg3-1.png') no-repeat 0 0;
    opacity: 0.3;
    animation-fill-mode: both;
    animation-name: fadeInDown;
    animation-delay: 0.3s;
    animation-duration: 2s;
}

.main-visual .slick-dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 48px;
    text-align: center;
    display: none;
}

/* [240206] .li06 Custom */
.main-visual .visual-slider li.new06{
    text-align: center;
    font-family: 'Noto Sans KR';
}
.main-visual .visual-slider li.new06 dt{
    font-family: 'Noto Sans KR';
    font-weight: 400;
}
.main-visual .visual-slider li.new06 dl{
    padding: 40px 0 0;
}
.main-visual .visual-slider li.new06 img.speaker_logo{
    position: absolute;
    margin-left: 70px;
}
.main-visual .visual-slider li.new06 dt.title{
    font-size: 30pt;
    font-weight: 400;
    margin-top: 20px;
}
.main-visual .visual-slider li.new06 dt.title p.yellow{
    color: #feef9b;
    margin-bottom: 10px;
}
.main-visual .visual-slider li.new06 dt.title span.title_name{
    font-size: 60px;
    font-weight: 500;
}
.main-visual .visual-slider li.new06 go-cont{
    margin-top: 40px;
}
.main-visual .visual-slider li.new06 .dlist2 dd{
    font-size: 15pt;
    display: block;
}
.main-visual .visual-slider li.new06 .dlist2 dd div span{
    position: relative;
}
.main-visual .visual-slider li.new06 .dlist2 dd div span:before{
    content: "";
    position: absolute;
    bottom: 0;
    left: -6px;
    right: -6px;
    height: 3px;
    background: #3d44a3;
    z-index: -1;
}
.main-visual .visual-slider li.li07 .dlist2 dd div span:before{
    background: #017c81;
}
.main-visual .visual-slider li.li06 .dlist2 dd:before{
    background: none;
}


.main-visual .slick-dots li {
    height: 5px;
    display: inline-block;
}

.main-visual .slick-dots li button {
    width: 14px;
    height: 14px;
    margin: 0 5px;
    background: #fff;
    text-indent: -9999px;
    overflow: hidden;
    border-radius: 14px;
}

.main-visual .slick-dots li.slick-active button {
    background: #71706e;
}

.main-slogan {
    position: relative;
    float: right;
    width: 50%;
    height: 1200px;
}

.main-slogan .pos_cont {
    position: absolute;
    top: 50%;
    left: 9%;
    width:90%;
    transform: translateY(-45%);
    word-break:keep-all;
}

/* .main-slogan .txt-wrap .bg-txt span {display:block;font-size:128px;color:#fff;font-family:'Montserrat';font-weight:700;letter-spacing:-4px;animation-fill-mode:both;animation-name:fadeLeft;animation-delay:0.1s;animation-duration:1.5s;white-space:nowrap;} */

.main-slogan .block-btn + .txt-wrap{
    margin-top:110px;
}

.main-slogan .txt-wrap .txt {
    font-size: 20px;
    color: #20212a;
    line-height: 34px;
    transform: translateY(10%);
    letter-spacing: 0;
}

/* .main-slogan .txt-wrap .txt {position:absolute;top:54%;left:0;font-size:20px;color:#20212a;line-height:34px;transform:translateY(-50%);letter-spacing:0;} */
.main-slogan .txt-wrap .txt > span {
    display: block;
    font-family: 'SDBook';
    font-weight: 700;
    font-size: 23px;
    animation-fill-mode: both;
    animation-name: fadeLeft;
    animation-delay: 1s;
    animation-duration: 2s;
}
.main-slogan .txt-wrap .txt > span .new{
    display:inline-block;
    margin-left:10px;
    font-size:12px;
    color:#DB3702;
    vertical-align: super;
}

.main-slogan .txt-wrap .txt em {
    display: block;
    animation-fill-mode: both;
    animation-name: fadeLeft;
    animation-delay: 2s;
    animation-duration: 2s;
    color: #666;
    line-height: 30px;
    margin-top: 10px;
}
.main-slogan .txt-wrap .txt em .fc{
    color:#000;
}

/* .main-visual .visual-slider li.li01 .go-cont a {display:block;width:215px;margin:13px auto 0;background:#37b4dc url('../images/main/ico_arrow.png') no-repeat right 18px top 50%;font-family:'Noto Sans KR';}
.main-visual .visual-slider li.li01 .go-cont a:hover {background-color:#239dc5;transition:all 0.3s;} */
.main-slogan .block-btn{
    margin-top:38px;
}
.main-slogan .block-btn a {
    position:relative;
    display: inline-block;
    width: 125px;
    height: 38px;
    line-height: 38px;
    margin-right: 2px;
    color: #fff;
    font-family: 'Noto Sans KR';
    font-size: 16px;
    font-weight: 400;
    text-align:center;
    background: #37b4dc;
    border-radius: 45px;
    vertical-align: middle;
}
.main-slogan .block-btn a:after{
    content:'';
    display:block;
    position:absolute;
    right:18px;
    top:50%;
    width:8px;
    height:12px;
    margin-top:-6px;
    background:url('../images/main/ico_arrow.png') no-repeat 0 0;
    vertical-align: middle;
}

.main-slogan .block-btn a.ko {
    display: inline-block;
    width: 150px;
    height: 45px;
    line-height: 45px;
    margin-right: 2px;
    padding: 0 45px;
    color: #fff;
    font-family: 'Noto Sans KR';
    font-size: 14px;
    font-weight: 400;
    background: #37b4dc url('../images/main/ico_arrow.png') no-repeat right 18px top 50%;
    border-radius: 45px;
    vertical-align: middle;
    font-size: 16px;
}

.main-slogan .block-btn a i {
    font-size: 18px;
}

.main-slogan .block-btn a:hover {
    background-color: #239dc5;
    transition: all 0.3s;
}

.main-slogan .block-btn a:nth-child(2) {
    margin-left: 10px;
    margin-right: 10px;
}

/* .main-slogan .block-btn a:nth-child(3) {margin-left:10px;} */
.main-slogan .block-btn a.green {
    background: #ef4b66;
}

.main-slogan .block-btn a.green:hover {
    background: #b73b4f;
}
.main .main_event_btn{
    display:inline-block;
    position:absolute;
    right:calc(50% + 5px);
    top:20px;
    z-index:11;
    width:132px;
    cursor:pointer;
}

@keyframes fadeLeft {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-40px);
        -ms-transform: translateX(-40px);
        transform: translateX(-40px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
    }
}

@-webkit-keyframes fadeUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

@keyframes fadeUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(40px);
        -ms-transform: translateY(40px);
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }
}

@media only all and (max-width: 1600px) {
    .main-slogan .txt-wrap .bg-txt span {
        font-size: 120px;
    }

    .main-slogan .txt-wrap .txt {
        font-size: 19px;
    }

    .main-slogan .txt-wrap .txt > span {
        font-size: 22px;
    }
}

@media only all and (max-width: 1024px) {
    .main-visual .visual-slider {
        width: 100%;
    }

    .main-visual .visual-slider li dl {
        padding: 102px 30px 0 30px;
    }

    .main-visual .visual-slider li dt {
        font-size: 65px;
    }

    .main-visual .visual-slider li.li01 dd {
        font-size: 70px;
    }

    .main-slogan .txt-wrap {
        right: 3%;
    }

    .main-visual .visual-slider li.li01.slick-active .ico3 {
        left: 5%;
        bottom: 8%;
        width: 38vw;
        background-size: 100%;
    }

    .main-visual .visual-slider li.li01.slick-active .ico4 {
        left: 45%;
        bottom: 8.6%;
        width: 27vw;
        background-size: 100%;
    }

    .main-visual .visual-slider li.li01.slick-active .ico5 {
        left: 43%;
        bottom: 9.2%;
        width: 14vw;
        background-size: 100%;
    }

    .main-visual .visual-slider li.li06.slick-active .ico3 {
        right: 0;
    }

    .main-slogan .txt-wrap:before {
        height: 0px;
    }

    .main-slogan .block-btn a {
        display: block;
        margin: 0 0 10px 0;
        width: 220px;
    }

    .main-slogan .block-btn a.ko {
        display: block;
        margin: 0 0 10px 0;
        width: 220px;
    }

    .main-slogan .block-btn a:nth-child(2) {
        margin-left: 0;
    }
}

@media only all and (max-width: 767px) {
    .main-visual {
        float: none;
        width: auto;
        height: 100vh;
        z-index: 1;
    }

    .main-visual .visual-slider li {
        position: relative;
        height: 100vh;
    }

    .main-visual .visual-slider li dt {
        font-size: 45px;
    }

    .main-visual .visual-slider li dd {
        font-size: 17px;
        font-weight: 500;
        line-height: 24px;
    }

    .main-visual .visual-slider li .go-cont a {
        min-width: 120px;
        height: 40px;
        line-height: 38px;
        font-size: 16px;
        padding-right: 5px;
        background: url('../images/main/ico_arrow.png') no-repeat right 18px top 50%;
    }

    .main-visual .visual-slider li.slick-active .ico {
        right: 30px;
        bottom: 80px;
    }

    .main-visual .visual-slider li.li01 dl {
        padding: 170px 0 0;
        text-align: center;
    }

    .main-visual .visual-slider li.li01 dt {
        font-size: 18px;
    }

    .main-visual .visual-slider li.li01 dt span {
        height: 34px;
        line-height: 32px;
        font-size: 16px;
    }

    .main-visual .visual-slider li.li01 dd {
        font-size: 50px;
    }

    .main-visual .visual-slider li.li01 .go-cont a {
        min-width: 135px;
    }

    .main-visual .visual-slider li.li01 .ico1 {
        width: 180px;
        height: 155px;
        background-size: 180px;
    }

    .main-visual .visual-slider li.li01 .ico2 {
        width: 180px;
        height: 115px;
        background-size: 100px;
    }

    .main-visual .visual-slider li.li02 .ico {
        width: 160px;
        height: 160px;
        background-size: 160px;
    }

    .main-visual .visual-slider li.li03 .ico {
        width: 160px;
        height: 180px;
        background-size: 160px;
    }

    .main-visual .visual-slider li.li04 .ico {
        width: 160px;
        height: 160px;
        background-size: 160px;
    }

    .main-visual .visual-slider li.li05 .ico {
        width: 160px;
        height: 145px;
        background-size: 160px;
    }

    .main-visual .visual-slider li.li01.slick-active .ico3 {
        left: 12%;
        bottom: auto;
        top: 75%;
        width: 55vw;
    }

    .main-visual .visual-slider li.li01.slick-active .ico4 {
        left: 49%;
        bottom: auto;
        top: 77%;
        width: 38vw;
    }

    .main-visual .visual-slider li.li01.slick-active .ico5 {
        left: 45%;
        bottom: auto;
        top: 75%;
        width: 20vw;
    }

    .main-visual .visual-slider li.li06 .dlist1 {
        padding: 100px 0 0;
        text-align: center;
    }

    .main-visual .visual-slider li.li06 .dlist1 dt {
        font-size: 18px;
    }

    .main-visual .visual-slider li.li06 .dlist1 dt span {
        height: 34px;
        line-height: 32px;
        font-size: 16px;
    }

    .main-visual .visual-slider li.li06 .dlist1 dd {
        font-size: 50px;
    }

    .main-visual .visual-slider li.li06 .go-cont a {
        min-width: 135px;
    }

    .main-visual .visual-slider li.li06 .dlist2 {
        margin-top: 90px;
    }

    .main-visual .visual-slider li.li06 .dlist2 dt {
        margin-top: 30px;
        font-size: 18px;
    }

    .main-visual .visual-slider li.li06 .dlist2 dd {
        margin-top: 5px;
        font-size: 20px;
    }

    .main-visual .visual-slider li.li06 .dlist2 dd:before {
        left: -5px;
        right: -5px;
        height: 8px;
        bottom: 2px;
    }

    .main-visual .visual-slider li.li06.slick-active .ico3 {
        right: 20px;
        top: 70px;
        width: 100px;
        height: 102px;
        background-size: 100%;
    }

    .main-visual .slick-dots {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 30px;
        text-align: center;
    }

    .main-visual .slick-dots li {
        height: 4px;
    }

    .main-visual .slick-dots li button {
        width: 10px;
        height: 10px;
    }

    .main-slogan {
        float: none;
        width: auto;
        height: 300px;
        margin-bottom: 180px;
    }

    .main-slogan .pos_cont{
        width:80%;
    }

    .main-slogan .txt-wrap .bg-txt span {
        font-size: 80px;
        letter-spacing: -3px;
    }

    .main-slogan .txt-wrap .txt {
        font-size: 16px;
        color: #20212a;
        line-height: 28px;
        letter-spacing: 0;
    }

    .main-slogan .txt-wrap .txt > span {
        font-size: 18px;
        animation-fill-mode: both;
        animation-name: fadeLeft;
        animation-delay: 1s;
        animation-duration: 2s;
    }
    .main-slogan .txt-wrap .txt > span .new{
        margin-left:5px;
        font-size:11px;
    }
    .main-slogan .txt-wrap .txt em{
        margin-top:15px;
    }
    .main-slogan .block-btn{
        width:220px;
        margin:38px auto 0;
    }
    .main-slogan .block-btn a,
    .main-slogan .block-btn a:nth-child(2){
        margin-left:0;
        margin-right:0;
    }
    .main .main_event_btn{
        right:5%;
        top:60px;
        width:94px;
    }
}

.refresh-floating {
    position: fixed;
    right: 20px;
    bottom: 50px;
    z-index: 10;
}

.refresh-floating a {
    display: block;
}

.refresh-floating a {
    display: inline-block;
    width: 60px;
    height: 60px;
    box-shadow: 0px 10px 15px 0px rgba(179, 179, 179, 0.21);
    background: #f04b66 url('../images/sub/ico_refresh.png') no-repeat 50% 50%;
    border-radius: 100%;
    text-indent: -9999px;
    overflow: hidden;
}

@media only all and (max-width: 767px) {
    .refresh-floating {
        bottom: 90px;
    }

    .refresh-floating a {
        width: 50px;
        height: 50px;
        background-size: 56%;
    }
}

@media only all and (max-width: 1024px) {
    .textbook-title {
        height: 56px;
        padding: 17px 36px 0 20px;
        margin-bottom: 0;
        color: #20212a;
        font-size: 20px;
        font-family: 'Noto Sans KR';
        border-bottom: 1px solid #dfdfdf;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .textbook-title span {
        margin-right: 5px;
        color: #4caecd;
        font-size: 20px;
        font-weight: 300;
    }

    .textbook-title .lnb-menu {
        position: absolute;
        right: 0;
        top: 0;
        display: block;
        width: 36px;
        height: 56px;
        background: #35386a url('../images/sub/ico_menu.png') no-repeat 50% 50%;
        background-size: 4px;
        text-indent: -9999px;
        overflow: hidden;
    }

    #wrap.quiz .textbook-title {
        display: block;
    }

    .study-tab li a {
        height: 60px;
        line-height: 60px;
        font-size: 18px;
    }

    .study-tab li.on a, .study-tab li a:hover {
        font-size: 20px;
    }

    .study-list li {
        padding: 20px 260px 20px 20px;
    }

    .study-list li .badge {
        margin-bottom: 3px;
    }

    .study-list li .tit {
        display: block;
        font-size: 17px;
        font-weight: 500;
    }

    .study-list li .btn-group {
        right: 20px;
    }

    .study-list li .btn-group a {
        margin-left: 10px;
        font-size: 0;
    }

    .down-wrap .preview-down .block-button a {
        font-size: 13px;
        margin-left: 0px;
    }

    /* .study-list li .btn-group a.study {width:48px;height:48px;background:#f4f4f4 url('../images/sub/ico_study.png') no-repeat 50% 50%;border:1px solid #f4f4f4;border-radius:100%;text-indent:-9999px;background-size:19px;font-size:0;}
	.study-list li .btn-group a.study:hover {background:#37b4dc url('../images/sub/ico_study_on.png') no-repeat 50% 50%;background-size:19px;}
 */
    .study-container .category {
        padding: 20px 20px 15px;
    }

    .study-container .category button {
        margin-bottom: 5px;
    }

    .study-container .toggle-list {
        border-top: 1px solid #d8d8d8;
    }

    .study-container .toggle-list dt span {
        padding: 20px 50px 20px 25px;
        background: #fafafa url('../images/sub/ico_arrow.png') no-repeat right 20px top 50%;
    }

    .study-container .toggle-list dt.on span {
        font-size: 16px;
        font-weight: 400;
        background: #eff9fc url('../images/sub/ico_arrow_on.png') no-repeat right 20px top 50%;
    }

    .study-appraisal {
        padding: 30px;
    }

    .study-appraisal h3 {
        font-size: 22px;
    }

    .study-appraisal .btn-link {
        right: 30px;
        top: 75px;
    }

    .preview-wrap .thumb {
        padding: 0 30px;
    }

    .preview-wrap .thumb-slider {
        width: auto;
        height: auto;
    }

    .preview-wrap .thumb-slider .slick-prev, .preview-wrap .thumb-slider2 .slick-prev {
        left: -30px;
    }

    .preview-wrap .thumb-slider .slick-next, .preview-wrap .thumb-slider2 .slick-next {
        right: -30px;
    }

    .share-write .form-date {
        display: block;
        margin-top: 10px;
        margin-left: 0;
    }

    .share-write .cont .item-list1 li {
        width: calc(100% / 3 - 10px);
    }

    .share-write .cont .item-list1 li button {
        width: 100%;
    }

    .share-write .cont .item-list2 > li {
        padding-right: 0;
    }
}

@media only all and (max-width: 900px) {
    .study-appraisal .btn {
        display: block;
        text-align: center;
    }

    .study-appraisal .btn-link {
        position: relative;
        right: auto;
        top: auto;
        height: 60px;
        line-height: 60px;
        margin-top: 15px;
    }

    .share-write .add-textbook {
        width: 100%;
        height: auto;
    }

    .share-write .add-textbook .add-box {
        float: none;
        width: auto;
        height: auto;
        margin-bottom: 10px;
        margin-right: 0;
        padding: 10px;
    }

    .share-write .add-textbook .add-box .form-category {
        width: 150px;
    }

    .share-write .add-textbook .add-box .input-group {
        margin-top: 0;
        display: inline-block;
        margin-left: 0px;
    }

    .textbook-list .subject span {
        display: inline-block;
        margin-left: 10px;
    }
}

@media only all and (max-width: 767px) {
    .mt10 {
        margin-top: 8px !important;
    }

    .mt15 {
        margin-top: 10px !important;
    }

    .mt20 {
        margin-top: 12px !important;
    }

    .mt25 {
        margin-top: 15px !important;
    }

    .mt30 {
        margin-top: 20px !important;
    }

    .mt40 {
        margin-top: 25px !important;
    }

    .mb15 {
        margin-bottom: 10px !important;
    }

    .radio-group input[type=radio] {
        margin-left: 15px !important;
    }

    .check-group input[type=checkbox] {
        margin-left: 15px !important;
    }

    .textbook-title {
        height: 50px;
        padding: 15px 36px 0 15px;
        font-size: 17px;
    }

    .textbook-title span {
        font-size: 17px;
    }

    .textbook-title .lnb-menu {
        height: 50px;
        background-size: 3px;
    }

    .study-tab li a {
        height: 54px;
        line-height: 54px;
        font-size: 17px;
        border-bottom: 3px solid #ccc;
    }

    .study-tab li.on a, .study-tab li a:hover {
        font-size: 17px;
        border-bottom: 3px solid #37b4dc;
    }

    .study-container .category {
        padding: 20px;
    }

    .study-container .category .btn-group {
        display: none;
    }

    .study-container .category .form-category {
        display: block;
        height: 48px;
        padding-left: 15px;
        font-size: 14px;
        color: #242424;
        border: 1px solid #d8d8d8;
        background: #f9f9f9 url('../images/sub/ico_pulldown_mobile.png') no-repeat right 10px top 50%;
    }

    .badge {
        height: 22px;
        line-height: 22px;
        padding: 0 8px;
        font-size: 12px;
    }

    .study-list li {
        padding: 13px 20px;
        display: block;
    }

    .study-list li .tit {
        font-size: 16px;
    }

    .study-list li .btn-group {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        margin-top: 8px;
        display: inline-block;
        width: 100%;
        text-align: right;
    }

    .study-list li .btn-group a {
        margin-left: 5px;
    }

    .study-list li.no-data {
        font-size: 16px;
    }

    .down-wrap .preview-down {
        left: 40%
    }

    .study-container .toggle-list dt span {
        padding: 15px 50px 15px 20px;
        font-size: 14px;
    }

    .study-container .toggle-list dt.on span {
        font-size: 15px;
    }

    .study-container .toggle-list dt span em {
        margin-left: 5px;
        font-size: 12px;
    }

    .study-appraisal {
        padding: 30px 20px;
    }

    .study-appraisal h3 {
        font-size: 20px;
    }

    .study-appraisal .step {
        width: auto;
    }

    .study-appraisal .step li {
        width: 31%;
        height: 40px;
        padding: 0 0 0 10px;
        font-size: 12px;
    }

    .study-appraisal .step li.li02 {
        padding: 0 0 0 20px;
    }

    .study-appraisal .step li.li03 {
        padding: 0 0 0 20px;
    }

    .study-appraisal .info li {
        font-size: 14px;
    }

    .study-appraisal .btn-link {
        width: 160px;
        height: 50px;
        line-height: 50px;
        font-size: 18px;
    }

    .preview-wrap .info {
        min-height: auto;
        padding: 0 0 0 30px;
    }

    .preview-wrap .info .secondary {
        margin-top: 30px;
    }

    .preview-wrap .info .btn-block {
        position: relative;
        margin-top: 30px;
    }

    .preview-wrap .info .btn-block a {
        margin: 0 1px;
    }

    .share-write .cont .item-list1 > li {
        margin-left: 5px;
    }

    .share-write .cont .item-list1 li {
        width: calc(100% / 3 - 5px);
    }

    .share-write .cont .item-list1 li button {
        padding: 19px 4px 42px;
        font-size: 13px;
        font-weight: 500;
        word-break: keep-all;
    }

    .share-write .cont .item-list1 li button {
        background: #f4f4f4;
    }

    .share-write .cont .item-list1 li button.on {
        background: #ef4b66;
    }

    .share-write .cont .chk-list li {
        float: none;
        width: auto;
        margin: 0 20px 10px 0;
        display: inline-block;
    }

    .share-write .add-textbook .add-box .b-select {
        display: block;
        width: 100%;
        margin-top: 10px;
    }

    .share-write .add-textbook .add-box .b-select .input-group {
        margin-left: 0px;
    }

    .share-write .add-textbook .add-box .b-select .input-group .select2-container {
        width: auto;
    }

    .share-write .add-textbook .add-box .input-group .btn.preview {
        margin-left: 0px;
        margin-top: 10px;
    }

    .date-wrap span.dash {
        display: block;
        margin: 10px 0;
    }

    .btnPreviewImages.study.twins, .btnPreviewImages.study.like {
        margin-bottom: 5px;
        margin-top: 5px;
    }

    .mobile-enter {
        display: block;
        margin-bottom: 10px;
    }

    .student-list > li.item {
        padding: 0;
    }

    .report-container .study-tit:first-of-type {
        margin-top: 15px;
    }
}

@media only all and (max-width: 640px) {
    .preview-wrap .thumb {
        float: none;
        width: auto;
        padding: 0 20px;
    }

    .preview-wrap .thumb-slider {
        width: 240px;
        height: 339px;
        margin: 0 auto;
    }

    .previewImages-wrap .thumb-slider2 {
        width: 220px;
        height: 311px;
    }

    .preview-wrap .info {
        float: none;
        width: auto;
        padding: 0;
        margin-top: 30px;
    }

    .share-write .tit {
        display: block;
        width: auto;
        padding-top: 0;
        font-size: 15px;
        margin-bottom: 10px;
    }

    .share-write .cont {
        display: block;
        font-size: 13px;
    }

    .share-write .cont li .txt {
        margin-left: 0;
        margin-top: 10px;
        display: block;
    }

    .share-write input {
        font-size: 13px;
    }

    .share-write input[type=checkbox] ~ label {
        font-size: 13px;
    }

    .select2-container {
        font-size: 13px;
    }

    /* .share-write .add-textbook .add-box .form-category {width:120px;} */
    /* .preview-wrap .info .subject dd {display: block;}
	.preview-wrap .info .subject dd span {display:block; width: max-content; margin:10px 5px 5px 0;} */
    /* .study-tit .right.block {position: static; text-align:right;margin-top:5px;text-align: right;width: 100%;display: block;} */
    .textbook-list .add-list li a {
        padding: 6px 10px 8px 10px;
        margin-top: 0px;
    }

    .textbook-list li .btn-group {
        text-align: right;
    }

    .textbook-list li .btn-group a {
        text-align: center;
    }

    /* .textbook-report .h4-wrap .right, .textbook-report .h3-wrap.type2 .right {position: static;text-align: right;margin-top: 5px;width: 100%;display: block;} */
    .textbook-list .txt-wrap .tit .txt2 em {
        display: block;
        margin-bottom: 5px;
    }

    /* .student-list {width: 640px;} */
    .student-list > li.header .tit {
        font-size: 14px;
        font-weight: 400;
    }

    .student-list > li.item {
        padding: 0;
    }

    .student-list > li.item .tit {
        font-size: 13px;
    }

    .student-list > li.item input {
        font-size: 13px;
    }

    .student-list > li .block-btn a {
        width: 40px;
        height: 40px;
    }
}

#student-report .chart-container {
    width: 100%;
}

#student-report .tab-container .no-data {
    width: 100%;
    text-align: center;
    line-height: 200px;
    height: 200px;
    color: #666;
    font-size: 14px;
}

#student-report .btn-group {
    margin-top: 50px;
}

#tbodyAcht tr:not(.no-data) > td:first-child {
    border-left: 1px solid #e8e8e8;
}

#tempTrAllAcht tr:not(.no-data) > td:first-child {
    border-left: 1px solid #e8e8e8;
}

.no-data.large {
    width: 100%;
    height: 200px;
    line-height: 200px;
    text-align: center;
}

.ck-content ol, .ck-content ul {
    padding-left: 2rem !important;
    margin-top: 0;
    margin-bottom: 1rem;
}

.ck-content ul {
    list-style: disc;
}

.ck-content ul ul {
    list-style: circle;
}

.ck-content ul ul ul {
    list-style: square;
}

.ck-content ol {
    list-style: decimal;
}

.ck-content li {
    list-style: inherit;
}

.ck-content p {
    margin-top: 0;
    margin-bottom: 1rem;
}

.ck-content .table {
    display: block !important;
}

.no-data.h200 {
    width: 100%;
    text-align: center;
    line-height: 200px;
    height: 200px;
    color: #666;
    font-size: 14px;
}

.no-data.h240 {
    width: 100%;
    text-align: center;
    line-height: 240px;
    height: 240px;
    color: #666;
    font-size: 14px;
}

.quiz-wrap.end .quiz-rank {
    height: 475px;
}

.quiz-wrap.end .quiz-rank .rank {
    z-index: 4;
    animation-fill-mode: both;
    animation-name: fadeIn;
    animation-delay: 1.5s;
    animation-duration: 2s;
}

.quiz-wrap.end .quiz-rank .img {
    position: absolute;
    animation-fill-mode: both;
}

.quiz-wrap.end .quiz-rank .img1 {
    left: 0;
    top: 0;
    z-index: 1;
    animation-name: flash;
    animation-delay: 0.1s;
    animation-duration: 1s;
}

.quiz-wrap.end .quiz-rank .img2 {
    left: 0;
    top: 0;
    z-index: 2;
    animation-name: bounceIn;
    animation-delay: 0.5s;
    animation-duration: 2s;
}

.quiz-wrap.end .quiz-rank .img3 {
    right: 0;
    top: 0;
    z-index: 3;
    animation-name: bounceIn;
    animation-delay: 1s;
    animation-duration: 2s;
}

.quiz-wrap.end .quiz-rank .img4 {
    left: 0;
    bottom: 40%;
    z-index: 4;
    animation-name: flash;
    animation-delay: 1s;
    animation-duration: 2s;
}

.quiz-wrap.end .quiz-rank .img5 {
    left: 0;
    bottom: 65%;
    z-index: 4;
    animation-name: flash;
    animation-delay: 1.1s;
    animation-duration: 2s;
}

.quiz-wrap.end .quiz-rank .img6 {
    left: 22%;
    top: 3%;
    z-index: 4;
    animation-name: flash;
    animation-delay: 1.3s;
    animation-duration: 2s;
}

.quiz-wrap.end .quiz-rank .img7 {
    left: 48%;
    top: 1%;
    z-index: 4;
    animation-name: flash;
    animation-delay: 1.5s;
    animation-duration: 2s;
}

.quiz-wrap.end .quiz-rank .img8 {
    left: 50%;
    top: 10%;
    z-index: 4;
    animation-name: flash;
    animation-delay: 1.7s;
    animation-duration: 2s;
}

.quiz-wrap.end .quiz-rank .img9 {
    left: 68%;
    top: 12%;
    z-index: 4;
    animation-name: flash;
    animation-delay: 1.9s;
    animation-duration: 2s;
}

.quiz-wrap.end .quiz-rank .img10 {
    right: 12%;
    top: 55%;
    z-index: 4;
    animation-name: flash;
    animation-delay: 2.1s;
    animation-duration: 2s;
}

.quiz-wrap.end .quiz-rank .img11 {
    right: 6%;
    top: 7%;
    z-index: 3;
    animation-name: bounceIn;
    animation-delay: 1s;
    animation-duration: 2s;
}

@media only all and (max-width: 640px) {
    .quiz-wrap.end .quiz-rank {
        width: 70vw;
        height: 75vw;
    }

    .quiz-wrap.end .quiz-rank .img2 {
        width: 63.4vw;
    }

    .quiz-wrap.end .quiz-rank .img3 {
        top: 5px;
        width: 30vw;
    }

    .quiz-wrap.end .quiz-rank .img4 {
        width: 16px;
    }

    .quiz-wrap.end .quiz-rank .img5 {
        width: 26px;
    }

    .quiz-wrap.end .quiz-rank .img7 {
        width: 16px;
    }

    .quiz-wrap.end .quiz-rank .img8 {
        width: 10px;
    }

    .quiz-wrap.end .quiz-rank .img9 {
        width: 10px;
    }

    .quiz-wrap.end .quiz-rank .img10 {
        width: 14px;
    }

    .quiz-wrap.end .quiz-rank .img11 {
        width: 22vw;
        right: 0;
        top: 10%;
    }
}

/* 결과화면추가 */
.quiz-wrap.end.type2 {
    width: auto;
}

.quiz-wrap.end.type2 .quiz-head h2 {
    width: 900px;
    margin: 0 auto;
    padding: 70px 20px 50px;
    line-height: 1.4;
}

.quiz-wrap.end.type2 .quiz-cont {
    background: #f4f4f4;
    padding-top: 30px;
}

.quiz-wrap.end.type2 .quiz-cont .inner {
    width: 900px;
    margin: 0 auto;
    overflow: hidden;
}

.quiz-wrap.end.type2 .quiz-result {
    float: right;
    padding-top: 75px;
    width: 50%;
}

.quiz-wrap.end.type2 .quiz-result .result1 li {
    display: block;
    text-align: center;
}

.quiz-wrap.end.type2 .quiz-result .result1 li span {
    display: inline-block;
    margin-right: 0;
}

.quiz-wrap.end.type2 .quiz-result .result1 li em {
    display: inline-block;
    font-size: 80px;
    margin-top: 25px;
}

.quiz-wrap.end.type2 .quiz-result .result1 li .txt1 {
    font-size: 35px;
    color: #333;
    font-weight: 700;
    margin-top: 20px;
}

.quiz-wrap.end.type2 .quiz-result .result1 li .txt2 {
    font-size: 25px;
    font-weight: 400;
}

.quiz-wrap.end.type2 .quiz-rank {
    float: left;
    width: 50%;
}

.quiz-wrap.end.type2 .btn-block {
    margin-top: 64px;
}

.quiz-wrap.end.type3 {
    width: auto;
}

.quiz-wrap.end.type3 .quiz-head h2 {
    width: 900px;
    margin: 0 auto;
    padding: 70px 20px 50px;
    line-height: 1.4;
}

.quiz-wrap.end.type3 .quiz-cont {
    background: #f4f4f4;
    padding: 40px 0 35px;
}

.quiz-wrap.end.type3 .quiz-cont .inner {
    width: 900px;
    margin: 0 auto;
    overflow: hidden;
}

.quiz-wrap.end.type3 .quiz-result {
    float: none;
    padding-top: 0;
    width: auto;
    line-height: 1.3;
}

.quiz-wrap.end.type3 .quiz-result .txt1 {
    font-size: 35px;
    color: #333;
    font-weight: 700;
    margin-top: 20px;
}

.quiz-wrap.end.type3 .quiz-result .txt2 {
    font-size: 25px;
    font-weight: 400;
}

.quiz-wrap.end.type3 .btn-block {
    margin-top: 64px;
}

.quiz-wrap.end .quiz-img {
    position: relative;
}

.quiz-wrap.end .quiz-img .img {
    animation-fill-mode: both;
}

.quiz-wrap.end .quiz-img .img1 {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    animation-name: flash;
    animation-delay: 1s;
    animation-duration: 1s;
}

.quiz-wrap.end .quiz-img .img2 {
    animation-name: bounceIn;
    animation-delay: 0.5s;
    animation-duration: 2s;
}

.quiz-thumb {
    width: 700px;
    margin: 0 auto;
    padding-top: 30px;
    display: table;
}

.quiz-thumb span {
    display: table-cell;
    height: 340px;
    text-align: center;
    vertical-align: middle;
}

.quiz-thumb img {
    height: 100%;
}

.quiz-thumb img.logo {
    width: auto;
    height: auto;
}

.quiz-thumb + .quiz-cont .quiz-info {
    margin-top: 20px;
}

.question-result {
    position: relative;
    padding: 0 40px;
}

.question-result button {
    display: inline-block;
    width: 48px;
    height: 48px;
    line-height: 48px;
    background: #f4f4f4;
    position: absolute;
    top: 50%;
    text-indent: -9999px;
    overflow: hidden;
    transform: translateY(-50%);
}

.question-result button.prev {
    left: -20px;
    background: #f4f4f4 url('../images/quiz/ico_prev.png') no-repeat 50% 50%;
}

.question-result button.next {
    right: -20px;
    background: #f4f4f4 url('../images/quiz/ico_next.png') no-repeat 50% 50%;
}

.question-result .question-correct {
    margin-top: 20px;
    padding: 10px;
    color: #fff;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    background: #ef4b66;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.question-result .question-correct span {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #fff;
    border-radius: 50%;
    font-size: 20px;
    color: #1f1f1f;
    margin-right: 10px;
    text-align: center;
    flex: none;
}

.question-result .question-wrong {
    margin-top: 20px;
    padding: 10px;
    color: #fff;
    font-size: 22px;
    font-weight: 500;
    line-height: 1.2;
    background: #7f7f7f;
    border-radius: 10px;
    display: flex;
    align-items: center;
}

.question-result .question-wrong span {
    display: inline-block;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background: #fff;
    border-radius: 50%;
    font-size: 20px;
    color: #1f1f1f;
    margin-right: 10px;
    text-align: center;
    flex: none;
}

.question-result .question-tit {
    padding: 45px 0 25px;
    color: #1f1f1f;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.question-result .result-box {
    padding: 20px 30px;
}

.text-center {
    text-align: center !important
}

@media only all and (max-width: 1024px) {
    .quiz-wrap.end.type2 .quiz-head h2 {
        width: auto;
    }

    .quiz-wrap.end.type2 .quiz-cont .inner {
        width: auto;
    }

    .quiz-wrap.end.type2 .quiz-result {
        float: none;
        width: auto;
        padding-top: 30px;
    }

    .quiz-wrap.end.type2 .quiz-rank {
        float: none;
        width: auto;
        width: 47vw;
    }

    .quiz-wrap.end.type3 .quiz-head h2 {
        width: auto;
    }

    .quiz-wrap.end.type3 .quiz-cont .inner {
        width: auto;
    }
}

@media only all and (max-width: 767px) {
    .quiz-wrap.end.type2 .quiz-head h2 {
        padding: 30px 20px 30px;
    }

    .quiz-wrap.end.type2 .quiz-cont {
        padding: 15px 15px 20px;
    }

    .quiz-wrap.end.type2 .quiz-result {
        padding-top: 0;
    }

    .quiz-wrap.end.type2 .quiz-result .result1 li em {
        font-size: 50px;
        margin-top: 10px;
    }

    .quiz-wrap.end.type2 .quiz-result .result1 li .txt1 {
        font-size: 25px;
        margin-top: 10px;
    }

    .quiz-wrap.end.type2 .quiz-result .result1 li .txt2 {
        font-size: 20px;
    }

    .quiz-wrap.end.type2 .quiz-rank {
        height: 60vw;
    }

    .quiz-wrap.end.type3 .quiz-result .txt1 {
        font-size: 25px;
        margin-top: 10px;
    }

    .quiz-wrap.end.type3 .quiz-result .txt2 {
        font-size: 20px;
    }

    .quiz-wrap.end.type3 .quiz-cont {
        padding: 40px 0 85px;
    }

    .quiz-thumb {
        width: 100%;
    }

    .quiz-thumb span {
        height: auto;
    }

    .quiz-thumb span img {
        max-width: 100%;
        max-height: 100%;
        height: auto;
    }

    .quiz-thumb img.logo {
        padding: 50px 0;
    }

    .question-result {
        position: relative;
        padding: 0 30px;
    }

    .question-result button {
        width: 40px;
        height: 40px;
        line-height: 40px;
    }

    .question-result .question-correct {
        font-size: 18px;
    }

    .question-result .question-correct span {
        font-size: 18px;
    }

    .question-result .question-wrong {
        font-size: 18px;
    }

    .question-result .question-wrong span {
        font-size: 18px;
    }

    .question-result .question-tit {
        padding: 35px 0 20px;
        font-size: 18px;
    }

    .question-result .result-box {
        padding: 15px 20px;
    }
}

@media only all and (max-width: 640px) {
    .quiz-wrap.end.type2 .quiz-rank {
        width: 50vw;
        height: 65vw;
    }
}

/* pagetop */
.page-top {
    display: none;
    position: fixed;
    right: 5%;
    top: 575px;
    width: 54px;
    text-align: center;
    z-index: 10;
    transition: all 0.5s;
}

.page-top a {
    display: block;
    width: 54px;
    height: 54px;
    line-height: 54px;
    text-indent: -999px;
    background-color: #666;
    border-radius: 54px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    transition: all 0.3s;
    overflow: hidden;
}

.page-top a:hover {
    background-color: #f04b66;
}

.page-top .top {
    background: #666 url(../images/common/ico_pagetop.png) no-repeat 50% 50%;
}

@media only all and (max-width: 1700px) {
    .page-top {
        right: 1%;
    }
}

@media only all and (max-width: 1024px) {
    .page-top {
        right: 1%;
        top: auto;
        bottom: 10%;
    }
}

@media only all and (max-width: 767px) {
    .page-top {
        width: 38px;
        right: 15px;
    }

    .page-top a {
        width: 38px;
        height: 38px;
        line-height: 38px;
        margin-bottom: 6px;
    }

    .page-top .top {
        background-size: 12px;
    }
}

.quiz-qrcode {
    padding: 30px 0;
    text-align: center;
}

.quiz-name {
    margin: 35px auto 50px;
}

.quiz-name li {
    width: 100%;
    min-height: 60px;
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    border-radius: 15px;
    text-align: left;
    line-height: 1.3;
    background: #f4f4f4 url('../images/quiz/ico_info2.png') no-repeat 20px 50%;
}

.quiz-name li span {
    width: 140px;
    flex: none;
    padding: 10px 10px 10px 55px;
    font-size: 20px;
    color: #1f1f1f;
    font-weight: 700;
}

.quiz-name li em {
    width: 100%;
    padding: 10px 10px 10px 0;
    font-size: 20px;
    color: #1f1f1f;
}

@media only all and (max-width: 767px) {
    .quiz-name {
        margin: 10px auto 30px;
    }

    .quiz-name li span {
        width: 120px;
        font-size: 16px;
    }

    .quiz-name li em {
        font-size: 16px;
    }
}

/* 20220802 추가 */
.down-wrap {
    position: relative;
    display: inline-block;
}

.down-wrap .preview-down {
    display: none;
    position: absolute;
    left: 50%;
    top: 30px;
    transform: translateX(-50%);
}

.down-wrap .preview-down .block-button {
    position: relative;
    height: 24px;
    padding: 0 10px;
    font-size: 13px;
    white-space: nowrap;
    color: #37b4dc;
    font-weight: 400;
    color: #fff;
    background: #1c85a7;
    border-radius: 5px;
    margin-left: 10px;
    margin-top: 4px;
    display: none;
}

.down-wrap .preview-down .block-button:before {
    content: "";
    position: absolute;
    top: -4px;
    bottom: auto;
    left: auto;
    left: 50%;
    transform: translateX(-50%);
    border-width: 0 6px 6px;
    border-style: solid;
    border-color: #1c85a7 transparent;
    display: none;
}

.down-wrap .preview-down .block-button a {
    background-color: transparent;
    width: auto;
    height: 22px;
    color: #fff;
    line-height: 24px;
    vertical-align: top;
    text-indent: initial;
    margin: 0 10px;
    overflow: visible;
    display: none;
}

.down-wrap .preview-down .block-button a:hover {
    text-decoration: underline;
    text-underline-position: under;
    display: none;
}

.down-wrap:hover .preview-down {
    display: block !important;
}

.down-wrap:hover .preview-down .block-button {
    display: flex;
}

.down-wrap:hover .preview-down .block-button a {
    display: block !important;
}

.win-close {
    position: absolute;
    right: 0;
    top: 15px;
    width: 22px;
    height: 22px;
    text-indent: -9999px;
    overflow: hidden;
    background: url('../images/sub/ico_close.png') no-repeat 0 0;
    display: none;
}

.quiz-prev {
    position: absolute;
    left: -80px;
    top: 50%;
    width: 65px;
    height: 65px;
    text-indent: -9999px;
    overflow: hidden;
    transition: all 0.3s;
    background: url('../images/quiz/left.png') no-repeat 0 0;
    display: none;
}

.quiz-prev:hover {
    background: url('../images/quiz/left_hover.png') no-repeat 0 0;
    display: none;
}

.quiz-next {
    position: absolute;
    right: -80px;
    top: 50%;
    width: 65px;
    height: 65px;
    text-indent: -9999px;
    overflow: hidden;
    transition: all 0.3s;
    background: url('../images/quiz/right.png') no-repeat 0 0;
    display: none;
}

.quiz-next:hover {
    background: url('../images/quiz/right_hover.png') no-repeat 0 0;
    display: none;
}

.answer-mark {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    display: none;
}

@media only all and (max-width: 1120px) {
    .win-close {
        right: 20px;
    }

    .quiz-prev {
        display: none;
    }

    .quiz-next {
        display: none;
    }
}

@media only all and (max-width: 767px) {
    .down-wrap .preview-down {
        top: 36px;
    }

    .down-wrap .preview-down button {
        margin-left: 5px;
    }

    .win-close {
        display: none;
    }

    .down-wrap .preview-down {
        left: 30%
    }

    .down-wrap .preview-down .block-button:before {
        left: 60%;
    }
}