/**
 * 사이트 기본 색상
 *
 * @format
 */

body {
    font-size: 1em;
    font-family: 'SC-4', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', '맑은 고딕', helvetica, 'Apple SD Gothic Neo', sans-serif;
    line-height: 1.8;
    overflow-y: auto;
    height: 100%;
}

.sound_only {
    display: inline-block !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0;
    line-height: 0;
    border: 0 !important;
    overflow: hidden !important;
}

.wrap {
    background-color: #ecebf1;
}
.wrap .inner {
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: 0 16px;
}

.text-right {
    text-align: right !important;
}
/* 스크롤 */

/* 아래의 모든 코드는 영역::코드로 사용 */
.scrollBar::-webkit-scrollbar {
    width: 10px; /* 스크롤바의 너비 */
}

.scrollBar::-webkit-scrollbar-thumb {
    height: 30%; /* 스크롤바의 길이 */
    background: #217af4; /* 스크롤바의 색상 */

    border-radius: 10px;
}

.scrollBar::-webkit-scrollbar-track {
    background: rgba(33, 122, 244, 0.1); /*스크롤바 뒷 배경 색상*/
}

/* 스크롤바 스타일 */
.scrollBar {
    overflow-y: auto !important;
    height: 100%;
}
.scrollBar::-webkit-scrollbar {
    width: 5px;
}
.scrollBar::-webkit-scrollbar-thumb {
    height: 17%;
    background-color: #2b085a;
    border-radius: 10px;
}

.scrollBar::-webkit-scrollbar-track {
    background-color: #563187;
}
/* header */
.header-wrap {
    position: fixed;
    top: 0;
    z-index: 101;
    width: 100%;
}
.header-wrap .inner {
    background-color: var(--basic-color);
    box-shadow: 0px 8px 10px 0px rgba(23, 23, 23, 0.06);
    display: flex;
    top: 0;
    justify-content: space-between;
    align-items: center;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    transition: 0.5s;
}
.header-wrap.active .inner {
    background-color: var(--header-wrap-active);
}
.gnb_open .header-wrap .inner {
    background-color: var(--header-wrap-active);
    border-bottom: 1px solid rgba(255, 255, 255, 0.125);
}
.header-wrap .home {
    background-image: url(../img/logo.svg);
    background-repeat: no-repeat;
    background-position: center;
    width: 40px;
    height: 40px;
}
.header-wrap .header_tit {
    color: #fff;
    font-weight: normal;
    font-family: 'SC-6';
    font-size: 1.5rem;
    padding: 8px;
}
.header-wrap .header_menu {
    width: 40px;
    height: 40px;
    position: relative;
}
.header-wrap .header_menu .icon_list {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 28px;
    cursor: pointer;
}
.header-wrap .header_menu .icon_list span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    transition: all 0.3s;
    position: relative;
}
.header-wrap .header_menu .icon_list span + span {
    margin-top: 6px;
}
.header-wrap .header_menu .icon_list span:nth-child(2) {
    width: 80%;
    margin-left: 20%;
}
.header-wrap .header_menu.active .icon_list span:nth-child(1) {
    animation: ease 0.5s top forwards;
}

.header-wrap .header_menu.not-active .icon_list span:nth-child(1) {
    animation: ease 0.5s top-2 forwards;
}

.header-wrap .header_menu.active .icon_list span:nth-child(2) {
    animation: ease 0.5s scaled forwards;
}

.header-wrap .header_menu.not-active .icon_list span:nth-child(2) {
    animation: ease 0.5s scaled-2 forwards;
}

.header-wrap .header_menu.active .icon_list span:nth-child(3) {
    animation: ease 0.5s bottom forwards;
}

.header-wrap .header_menu.not-active .icon_list span:nth-child(3) {
    animation: ease 0.5s bottom-2 forwards;
}

@keyframes top {
    0% {
        top: 0;
        transform: rotate(0);
    }
    50% {
        top: 8px;
        transform: rotate(0);
    }
    100% {
        top: 8px;
        transform: rotate(45deg);
    }
}

@keyframes top-2 {
    0% {
        top: 8px;
        transform: rotate(45deg);
    }
    50% {
        top: 8px;
        transform: rotate(0deg);
    }
    100% {
        top: 0;
        transform: rotate(0deg);
    }
}

@keyframes bottom {
    0% {
        bottom: 0;
        transform: rotate(0);
    }
    50% {
        bottom: 8px;
        transform: rotate(0);
    }
    100% {
        bottom: 8px;
        transform: rotate(135deg);
    }
}

@keyframes bottom-2 {
    0% {
        bottom: 8px;
        transform: rotate(135deg);
    }
    50% {
        bottom: 8px;
        transform: rotate(0);
    }
    100% {
        bottom: 0;
        transform: rotate(0);
    }
}

@keyframes scaled {
    50% {
        transform: scale(0);
    }
    100% {
        transform: scale(0);
    }
}

@keyframes scaled-2 {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(0);
    }
    100% {
        transform: scale(1);
    }
}

/* 메뉴 */
.gnb_open {
    overflow: hidden;
}
#gnb {
    width: 100%;
    z-index: 10;
    padding-top: 59px;
    opacity: 0;
    pointer-events: none;
    transition: 0.5s;
    position: fixed;
    top: 0;
    height: 100%;
    margin: 0 auto;
    overflow-y: auto;
    background-color: var(--basic-color);
}

.gnb_open #gnb {
    opacity: 1;
    pointer-events: auto;
    z-index: 100;
}
#gnb .inner {
    padding: 0;
    height: calc(100vh - 59px);
}
#gnb .inner .gnb_item {
    font-size: 1.25rem;
    font-family: 'SC-5';
    padding: 12px 16px;
    line-height: 1.4;
}
.gnb_wrap {
    padding: 16px 0;
}
#gnb .inner .gnb_item a {
    color: #fff;
    display: block;
}
#gnb .inner .gnb_item > div {
    opacity: 0.2;
    color: #fff;
}
#gnb .inner .gnb_item div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#gnb .inner .gnb_item span {
    width: calc(100% - 35px);
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#gnb .inner .gnb_item i {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
}
#gnb .inner .gnb_item a i {
    background-color: rgba(0, 0, 0, 0.125);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90' fill='%23fff'%3E%3Cpath d='M75.4,14.3c-0.9,0-1.7,0.7-1.7,1.7v70.2H24.5c-4,0-7.2-3.2-7.2-7.2s3.2-7.2,7.2-7.2h45.9V1H24.5C18.7,1,14,5.7,14,11.5 v66.4V79c0,5.8,4.7,10.5,10.5,10.5H77V15.9C77,15,76.3,14.3,75.4,14.3z M17.3,11.5c0-4,3.2-7.2,7.2-7.2h42.6v64.2H24.5 c-2.8,0-5.3,1.1-7.2,2.9V11.5z'/%3E%3Cpath d='M24.5,77.3c-0.9,0-1.7,0.7-1.7,1.7s0.7,1.7,1.7,1.7h44.2c0.9,0,1.7-0.7,1.7-1.7s-0.7-1.7-1.7-1.7H24.5z'/%3E%3C/svg%3E");
    background-size: 18px;
}
#gnb .inner .gnb_item.reading a i {
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23472476' class='bi bi-book' viewBox='0 0 16 16'%3E%3Cpath d='M1 2.828c.885-.37 2.154-.769 3.388-.893 1.33-.134 2.458.063 3.112.752v9.746c-.935-.53-2.12-.603-3.213-.493-1.18.12-2.37.461-3.287.811V2.828zm7.5-.141c.654-.689 1.782-.886 3.112-.752 1.234.124 2.503.523 3.388.893v9.923c-.918-.35-2.107-.692-3.287-.81-1.094-.111-2.278-.039-3.213.492V2.687zM8 1.783C7.015.936 5.587.81 4.287.94c-1.514.153-3.042.672-3.994 1.105A.5.5 0 0 0 0 2.5v11a.5.5 0 0 0 .707.455c.882-.4 2.303-.881 3.68-1.02 1.409-.142 2.59.087 3.223.877a.5.5 0 0 0 .78 0c.633-.79 1.814-1.019 3.222-.877 1.378.139 2.8.62 3.681 1.02A.5.5 0 0 0 16 13.5v-11a.5.5 0 0 0-.293-.455c-.952-.433-2.48-.952-3.994-1.105C10.413.809 8.985.936 8 1.783z'/%3E%3C/svg%3E");
    background-size: 18px;
}

#gnb .inner .gnb_item.on i {
    background-color: var(--menu_icon_bgc);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-check' viewBox='0 0 16 16'%3E%3Cpath d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 0 1 .02-.022z'/%3E%3C/svg%3E");
    background-size: 26px;
}
#gnb .inner .gnb_item i {
    background-color: rgba(255, 255, 255, 0.75);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px' fill='%23472476'%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E");
    background-size: 20px;
}
#gnb .inner .gnb_item.on.reading a i {
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M15.7,2.6c-1-0.4-2.5-1-4-1.1C10.4,1.4,9,1.5,8,2.3c-1-0.8-2.4-1-3.7-0.8c-1.5,0.2-3,0.7-4,1.1C0.1,2.7,0,2.9,0,3.1v11 c0,0.3,0.2,0.5,0.5,0.5c0.1,0,0.1,0,0.2,0c0.9-0.4,2.3-0.9,3.7-1c1.4-0.1,2.6,0.1,3.2,0.9c0.2,0.2,0.5,0.2,0.7,0.1 c0,0,0.1,0,0.1-0.1c0.6-0.8,1.8-1,3.2-0.9c1.4,0.1,2.8,0.6,3.7,1c0.3,0.1,0.5,0,0.7-0.2c0-0.1,0-0.1,0-0.2v-11 C16,2.9,15.9,2.7,15.7,2.6z M12.6,5.3l-4,5c-0.3,0.3-0.8,0.3-1.1,0c0,0,0,0,0,0L4.9,7.6c-0.3-0.3-0.3-0.8,0-1.1 c0.3-0.3,0.8-0.3,1.1,0c0,0,0,0,0,0L8,8.7l3.5-4.4c0,0,0,0,0,0h0c0.3-0.3,0.8-0.3,1.1,0C12.8,4.5,12.8,5,12.6,5.3z'/%3E%3C/svg%3E%0A");
    background-size: 18px;
}

/* 글씨 크기조절 버튼 */
.text_size {
    display: flex;
    justify-content: right;
    padding: 1em 16px;
}
.text_size button {
    background-color: #ecebf1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    position: relative;
}
.text_size button:disabled {
    cursor: auto;
    opacity: 0.3;
}
.text_size button + button {
    margin-left: 8px;
}
.text_size button i span {
    background-color: #472476;
    width: 14px;
    height: 2px;
    display: block;
}
.text_size button .icon_plus span + span {
    position: absolute;
    transform: translateY(-50%);
    top: 50%;
    left: calc(50% - 1px);
    width: 2px;
    height: 14px;
}

/* 퀴즈 */
.bx_type_radio label {
    display: flex;
}
.bx_type_radio label input + i,
.bx_type_radio label input + i + span {
    cursor: pointer;
}
.bx_type_radio label input:disabled + i,
.bx_type_radio label input:disabled + i + span {
    cursor: default;
}
.bx_type_radio label span {
    padding-left: 30px;
    position: relative;
}
.bx_type_radio label i {
    width: 24px;
    height: 24px;
    border: 1px solid #d9d9d9;
    background-color: #f7f7f7;
    border-radius: 50%;
}
.lecture_quiz form ol li .bx_type_radio label input[type='radio']:disabled + i::after {
    color: #999;
}
.lecture_quiz form ol li .bx_type_radio label input[type='radio']:disabled + i + span {
    color: #666;
}
.fontSize_15 .bx_type_radio label i,
.fontSize_16 .bx_type_radio label i {
    margin-top: 0.125em;
}
.fontSize_17 .bx_type_radio label i,
.fontSize_18 .bx_type_radio label i {
    margin-top: 0.25em;
}
.fontSize_19 .bx_type_radio label i,
.fontSize_20 .bx_type_radio label i {
    margin-top: 0.325em;
}
.fontSize_21 .bx_type_radio label i,
.fontSize_22 .bx_type_radio label i {
    margin-top: 0.35em;
}
.fontSize_23 .bx_type_radio label i,
.fontSize_24 .bx_type_radio label i {
    margin-top: 0.4em;
}
.fontSize_25 .bx_type_radio label i,
.fontSize_26 .bx_type_radio label i {
    margin-top: 0.45em;
}
.bx_type_radio label input[type='radio'] {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    font-size: 0;
    z-index: -1;
    opacity: 0;
}
.bx_type_radio label input[type='radio']:checked + i {
    border-color: var(--basic-color);
    background-color: var(--basic-color);
    position: relative;
}
.bx_type_radio .true input[type='radio']:checked + i {
    border-color: #217af4;
    background-color: #217af4;
}
.bx_type_radio .false input[type='radio']:checked + i {
    border-color: #ed2020;
    background-color: #ed2020;
}

[class*='lecture_quiz'] > div > * {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
.lecture_quiz legend {
    text-align: center;
    color: var(--basic-color);
    font-family: 'SC-6';
    font-size: 1.5rem;
    line-height: 1;
    margin-bottom: 1em;
}
.lecture_quiz legend span {
    display: inline-block;
    padding-bottom: 4px;
    position: relative;
}
.lecture_quiz legend span::after {
    content: '';
    background-color: var(--basic-color);
    width: 100%;
    height: 1px;
    opacity: 0.25;
    position: absolute;
    bottom: 0;
    left: 0;
}
.lecture_quiz form ol li {
    padding: 1rem 0 0 0;
    margin-top: 1rem;
}
.lecture_quiz form ol li:first-child {
    margin-top: 0;
}
.lecture_quiz form ol li dt {
    font-size: 1em;
    font-family: 'SC-5';
    letter-spacing: 0.05rem;
    display: flex;
}
.lecture_quiz form ol li dt b {
    font-weight: normal;
    margin-right: 4px;
}
.lecture_quiz form ol li dd {
    margin-top: calc(0.5em + 2px);
    font-family: 'SC-5';
}
.lecture_quiz form ol li .bx_type_radio label {
    display: flex;
    flex-wrap: wrap;
}
.lecture_quiz form ol li .bx_type_radio label + label {
    margin-left: 0;
    margin-top: 0.5em;
}
.lecture_quiz form ol li .bx_type_radio label,
.lecture_quiz form ol li .bx_type_radio label span {
    font-size: 1em;
}
.lecture_quiz form ol li .bx_type_radio label input[type='radio']:checked + i + span {
    color: var(--basic-color);
}
.lecture_quiz form ol li .bx_type_radio .true input[type='radio']:checked + i + span {
    color: #217af4;
}
.lecture_quiz form ol li .bx_type_radio .false input[type='radio']:checked + i + span {
    color: #ed2020;
}
.lecture_quiz form ol li .bx_type_radio label span {
    padding-left: 0.5em;
    width: calc(100% - 24px);
}
.lecture_quiz form ol li .bx_type_radio label input[type='radio'] + i::after {
    font-style: normal;
    font-size: 1rem;
    line-height: 24px;
    width: 22px;
    text-align: center;
    position: absolute;
    color: #666;
}
.lecture_quiz form ol li .bx_type_radio label input[type='radio']:checked + i::after {
    color: #fff;
}
.lecture_quiz form ol li .bx_type_radio label:nth-child(1) input[type='radio'] + i::after {
    content: '1';
}
.lecture_quiz form ol li .bx_type_radio label:nth-child(2) input[type='radio'] + i::after {
    content: '2';
}
.lecture_quiz form ol li .bx_type_radio label:nth-child(3) input[type='radio'] + i::after {
    content: '3';
}
.lecture_quiz form ol li .bx_type_radio label:nth-child(4) input[type='radio'] + i::after {
    content: '4';
}
[class*='lecture_quiz'] .quiz_result {
    text-align: center;
    margin-top: 30px;
}
[class*='lecture_quiz'] .quiz_result .btn {
    display: inline-block;
    padding: 0.75em 1.5em;
    color: #fff;
    font-size: 1em;
    letter-spacing: normal;
    vertical-align: top;
    background: var(--basic-color);
    border: 0 none;
    border-radius: 10px;
    margin-top: 1em;
}
[class*='lecture_quiz'] .quiz_result .btn span {
    display: inline-block;
    background-size: 1em;
    background-repeat: no-repeat;
}
[class*='lecture_quiz'] .quiz_result .test_again {
    /* background-color: #0c52e3; */
}
[class*='lecture_quiz'] .quiz_result .test_again span {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-arrow-clockwise' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z'/%3E%3Cpath d='M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z'/%3E%3C/svg%3E");
    padding-left: 1.25em;
    background-position: 0 center;
}
[class*='lecture_quiz'] .quiz_result .test_ok {
    background-color: #3ac351;
}
[class*='lecture_quiz'] .quiz_result .test_ok span {
    padding-right: 1.25em;
    background-position: right center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-arrow-right' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E");
}
/* 내용 */
#main_box {
    padding-top: 60px;
}
#main_box .inner {
    padding: 0;
}

/* 퀴즈 */
.topBotton {
    position: fixed;
    bottom: 16px;
    right: 16px;
    z-index: 99;
}

.topBotton div {
    width: 38px;
    height: 38px;
    background-color: var(--topBotton-bg);
    color: #fff;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0px 1px 8px 0px rgba(23, 23, 23, 0.4);
}
.topBotton .moveTopBtn {
    border-radius: 50% 50% 0 0;
}
.topBotton .moveBottomBtn {
    border-radius: 0 0 50% 50%;
}
#ox_quiz {
    background-color: var(--ox_quiz-bg);
    color: #fff;
}
#ox_quiz .tit {
    text-align: center;
}
#ox_quiz .tit span {
    position: relative;
}
#ox_quiz .tit span::after {
    content: '';
    width: 100%;
    height: 1px;
    background-color: #fff;
    opacity: 0.5;
    position: absolute;
    bottom: 0;
    left: 0;
}

.quizA {
    display: flex;
    justify-content: center;
}
.quizQ {
    margin-top: 16px;
    margin-bottom: 24px;
    text-align: center;
}

.quizA button,
.quizA a {
    padding: 0 16px;
    min-width: 120px;
    line-height: 2.5em;
    color: var(--basic-color);
    background-color: #fff;
    border-radius: 3em;
    font-size: 1em;
    font-family: 'SC-5';
    text-align: center;
}
.quizA > * + * {
    margin-left: 12px;
}

/* 퀴즈 다시풀기 */
.resultBox {
    border: 1px solid #f0f0f0;
    background-color: #fafafa;
    padding: 8px 16px;
    border-radius: 5px;
    margin-bottom: 16px;
}
.resultBox span,
.resultBox strong {
    font-family: 'SC-6';
    font-size: 1.25em;
}
.resultBox strong {
    font-weight: normal;
    background-color: #217af4;
    color: #fff;
    padding: 0 0.25em;
    border-radius: 5px;
}

/* 비디오 관련 */
.video-container {
    display: block;
    max-width: 1000px;
    margin: 24px auto;
}

.youtube-player,
.vimeo-player_box {
    position: relative;
    padding-bottom: 56.23%;
    /* Use 75% for 4:3 videos */
    height: 0;
    overflow: hidden;
    max-width: 100%;
    background: #000;
}

.youtube-player iframe,
.vimeo-player_box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    background: transparent;
}

.youtube-player img,
.vimeo-player img {
    bottom: 0;
    display: block;
    left: 0;
    margin: auto;
    max-width: 100%;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
    border: none;
    height: auto;
    cursor: pointer;
    -webkit-transition: 0.4s all;
    -moz-transition: 0.4s all;
    transition: 0.4s all;
}

.youtube-player img:hover,
.vimeo-player img:hover {
    -webkit-filter: brightness(75%);
}

.play {
    height: 60px;
    width: 60px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-play-fill' viewBox='0 0 16 16'%3E%3Cpath d='m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z'/%3E%3C/svg%3E");
    background-size: 36px;
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    border: 2px solid #fff;
    border-radius: 50%;
    backdrop-filter: blur(0.5px);
    -webkit-backdrop-filter: blur(0.5px);
    box-shadow: 0px 8px 10px 0px rgba(23, 23, 23, 0.25);
}

/* 내용 */
.chapter {
    background-color: #fff;
    padding: 56px 40px;
    margin-top: 8px;
    opacity: 0;
    transition: 0.5s top ease-in, 0.5s opacity ease-in;
    position: relative;
    top: 40px;
}
.chapter::after {
    content: '';
    display: block;
    clear: both;
}
.clear:after {
    content: '';
    display: block;
    clear: both;
}
.chapter.chapter_margin0 {
    padding: 56px 0 0;
}
.lecture_quiz.chapter {
    margin-top: 0;
    top: 0;
}
.chapter.show {
    opacity: 1;
    top: 0;
}
.chapter p,
.content_header p,
.chapter .div_p {
    margin-top: 0.5em;
    /* word-break: keep-all; */
    text-align: justify;
    text-indent: 0.625em;
}
.chapter > p + .div_p,
.chapter .div_p + p {
    margin-top: 2em;
}
/* .chapter p br, .content_header p br, .chapter .div_p br{
  content: '';
  white-space: pre;
} */
/* .chapter p br:after,
.content_header p br:after ,
.chapter .div_p br::after{
  content: '\A  ';
} */
.text_indent {
    display: inline-block;
    margin-left: 0.3125em;
}
.chapter p + p,
.chapter .div_p + div {
    margin-top: 2em;
}
.chapter .imgP {
    text-indent: 0;
}
.chapter .imgP img {
    float: left;
    width: 80px;
    margin-right: 16px;
}
.chapter .tit_xs {
    text-indent: 0;
    margin-top: 2em;
    margin-bottom: 0.5em;
    font-family: 'SC-5';
}
.chapter_margin0.chapter .tit_s,
.chapter_margin0.chapter p {
    padding: 0 40px;
}
.chapter .img_box {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    position: relative;
}
.chapter .img_box figure div {
    position: relative;
}
.chapter .img_box img {
    display: block;
    width: 100%;
    image-rendering: -moz-crisp-edges; /* firefox */
    image-rendering: -o-crisp-edges; /* opera */
    image-rendering: -webkit-optimize-contrast; /* chrome(비표준) */
    image-rendering: crisp-edges;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 5px;
}
.chapter .img_box figcaption {
    color: #333;
    text-align: center;
    font-size: 0.875em;
    word-break: keep-all;
    margin-top: 1em;
    margin-bottom: 0.5em;
}
.chapter .img_box figcaption b {
    color: var(--tit-color);
}
.chapter .img_box figcaption p {
    color: #666;
}
.chapter li {
    padding: 0.25em 0;
}
.chapter .text_num_box li {
    padding: 0;
}
.chapter ol li {
    text-indent: -1.25em;
    padding-left: 1.25em;
}
.chapter .quiz_list li {
    text-indent: 0;
    padding-left: 0;
}
figure + figure {
    margin-top: 2em;
}
/* 돋보기 zoom */
.view_btn {
    width: 34px;
    height: 34px;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, 0.26);
    position: absolute;
    bottom: 0;
    right: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23fff' class='bi bi-zoom-in' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zM13 6.5a6.5 6.5 0 1 1-13 0 6.5 6.5 0 0 1 13 0z'/%3E%3Cpath d='M10.344 11.742c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1 6.538 6.538 0 0 1-1.398 1.4z'/%3E%3Cpath fill-rule='evenodd' d='M6.5 3a.5.5 0 0 1 .5.5V6h2.5a.5.5 0 0 1 0 1H7v2.5a.5.5 0 0 1-1 0V7H3.5a.5.5 0 0 1 0-1H6V3.5a.5.5 0 0 1 .5-.5z'/%3E%3C/svg%3E");
    background-size: 22px;
    background-repeat: no-repeat;
    background-position: center;
    transition: 0.4s background-color ease-in-out;
}
.view_btn:hover {
    background-color: rgba(0, 0, 0, 0.5);
}
.view_btn span {
    display: inline-block;
    text-indent: -9999em;
}

@media (min-width: 740px) {
    .viewer-open .header-wrap {
        left: -8.5px;
    }
    .viewer-open .topBotton {
        right: 34px;
    }
}
@media (max-width: 540px) {
    .chapter {
        padding: 32px 16px;
    }
    .chapter .tit_s {
        font-size: 1.25em;
        font-family: 'SC-5';
    }
    .chapter.chapter_margin0 {
        padding-top: 32px;
    }
    .chapter_margin0.chapter .tit_s,
    .chapter_margin0.chapter p {
        padding: 0 16px;
    }
}

/* 모달 */
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1005; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0, 0, 0); /* Fallback color */
    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}

.modal_btn {
    color: var(--modal-link-color);
    cursor: pointer;
    text-decoration: underline;
    -webkit-text-decoration: underline;
}
/* Modal Content/Box */
.modal-content {
    position: relative;
    background-color: #fff;
    margin: auto;
    padding: 0;
    max-width: 600px;
    width: 80%;
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.2s;
    animation-name: animatetop;
    animation-duration: 0.2s;
}

/* The Close Button */
.close {
    color: var(--basic-color);
    font-size: 1.75rem;
    order: 1;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
/* Modal Header */
.modal-header {
    padding: 2px 16px;
    background-color: #fafafa;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.modal-header .tit {
    font-family: 'SC-5';
    font-size: 1.25em;
}
/* Modal Body */
.modal-body {
    padding: 16px;
}

/* Modal Footer */
.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes animatetop {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* 테이블 기본*/
.table {
    width: 100%;
    margin: 1.5em 0;
}
.table td,
.table th {
    padding: 4px;
}

/* 이미지 넣기 */

.chapter .img_left img,
.chapter .img_right img,
.start-card .img_right img {
    display: block;
    width: 40%;
    /* padding-bottom: 0.25em; */
    margin-bottom: 0.25em;
    margin-top: 0.325em;
    image-rendering: -webkit-optimize-contrast;
    transform: translateZ(0);
    backface-visibility: hidden;
    overflow: hidden;
    border-radius: 5px;
}
.chapter .img_left img {
    float: left;
    margin-right: 1em;
}
.chapter .img_right img,
.start-card .img_right img {
    float: right;
    margin-left: 1em;
}
.chapter .img_right .img_box,
.chapter .img_left .img_box.left {
    float: right;
    margin-left: 1em;
    margin-top: 0.35em;
    margin-bottom: 0;
}
.chapter .img_left .img_box,
.chapter .img_right .img_box.left {
    float: left;
    margin-right: 1em;
    margin-top: 0.35em;
    margin-bottom: 0;
}
.chapter .img_right .img_box img,
.chapter .img_left .img_box img {
    margin: 0;
    width: 100%;
}

.chapter .img_left .img_right,
.chapter .img_right .img_r,
.chapter .img_left .img_r {
    float: right;
    margin-right: 0;
    margin-left: 1em;
}
.chapter .img_right .img_left,
.chapter .img_right .img_l,
.chapter .img_left .img_l {
    float: left;
    margin-left: 0;
    margin-right: 1em;
}
.chapter .img_right .img_r,
.chapter .img_right .img_l,
.chapter .img_left .img_r,
.chapter .img_left .img_l {
    width: 40%;
}
.chapter .img_right .img_r img,
.chapter .img_right .img_l img,
.chapter .img_left .img_r img,
.chapter .img_left .img_l img {
    float: initial;
}

/* 박스 */
.text_box {
    padding: 32px 16px;
    margin: 2em 0;
}
.text_box .text_box-tit {
    font-size: 1.125rem;
    font-family: 'SC-5';
}
.mobile_only {
    display: none;
}
.cont-sub-tit {
    color: var(--basic-color);
    margin-top: 1.5em;
    font-family: 'SC-5';
}
.cont-sub-tit::before {
    content: '■ ';
    font-size: 0.725em;
}
@media (max-width: 540px) {
    .chapter .img_left img,
    .chapter .img_right img {
        width: 50%;
    }
    .start-card .img_right img {
        width: 40%;
    }
    .pc_only {
        display: none;
    }
    .mobile_only {
        display: initial;
    }
}

/* 책표지 */
.book_cover {
    padding-top: 144.4445%;
    background-repeat: no-repeat;
    position: relative;
    background-color: #fff;
    animation-duration: 1s;
    background-position: center top;
    animation-name: background_opacity;
    background-attachment: fixed;
}

@keyframes background_opacity {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}
.book_cover .text {
    position: absolute;
    top: 12%;
    left: 7.5%;
    font-size: 48px;
    font-family: 'SC-6';
    color: #fff;
    line-height: 1.4;
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.26);
}
.book_cover .text span {
    display: block;
    opacity: 0;
    animation-delay: 1s;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    animation-name: text_ani;
}
.book_cover .text span + span {
    animation-duration: 1.75s;
    animation-name: text_ani;
}
.book_cover .text span + span + span {
    animation-duration: 2.5s;
    animation-name: text_ani;
}
@keyframes text_ani {
    from {
        margin-top: 20px;
        opacity: 0;
    }

    to {
        margin-top: 0;
        opacity: 1;
    }
}

@media (max-width: 720px) {
    .book_cover {
        background-size: contain;
        background-position: center 60px;
    }
    .book_cover .text {
        font-size: 6.725vw;
    }
}

/* 추천인 모달 */
.modalPopup {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 9998;
}
.modalPopup.fRecommended .modal-content {
    padding: 40px 24px 24px;
    border-radius: 10px;
}
.modalPopup.fRecommended .box_txt {
    font-family: 'SC-5';
    font-size: calc(1rem + 2px);
}
.modalPopup.fRecommended .box_txt span {
    display: block;
    margin-top: 8px;
    font-family: 'SC-4';
    font-size: calc(1rem - 2px);
    line-height: calc(1em + 4px);
}
.modalPopup.fRecommended .box_fArea {
    margin-top: 10px;
    text-align: center;
}
.modalPopup.fRecommended .box_fArea input {
    text-align: center;
    border: 1px solid #d0d3db;
    background: #fff;
    color: #000;
    vertical-align: middle;
    border-radius: 3px;
    padding: 10px 12px;
    -webkit-box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%);
    font-size: 1rem;
}
.modalPopup.fRecommended .box_fArea span {
    display: block;
    margin-top: 4px;
    font-size: calc(1rem - 2px);
}
.modalPopup.fRecommended .bx_btn {
    margin-top: 1rem;
    text-align: center;
}
.modalPopup.fRecommended .bx_btn > * {
    position: static;
    width: 12.5rem;
    height: 40px;
    color: #fff;
    font-size: calc(1rem + 2px);
    font-family: 'SC-6';
    font-weight: 400;
    line-height: 1.25;
    background: var(--color-dark);
    border: 0 none;
    border-radius: calc(0.25rem + 2px);
}
.modalPopup.fRecommended .bx_btn > *:not(button) {
    display: inline-block;
    line-height: calc(40px + 1px);
    background-color: var(--basic-color);
}

.modalPopup .btn_close {
    display: flex;
    position: absolute;
    top: calc(40px / 2);
    right: calc(40px / 2);
    padding: 0;
    width: calc(60px / 2);
    height: calc(60px / 2);
    background-color: #fafafa;
    border: 1px solid #eee;
    border-radius: 4px;
    font-size: 30px;
    align-items: center;
    justify-content: center;
}
.modalPopup .btn_close span {
    font-size: 0;
}

/**/
.openModalBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    position: fixed;
    right: 20px;
    bottom: calc(70px + 30px);
    bottom: calc((70px + 20px) + 10px + 10px);

    width: 56px;
    height: 56px;
    font-size: 0;
    background: #5d4085;

    border-radius: 9999px;
    overflow: visible;
    cursor: pointer;
    z-index: 10;
    z-index: 1;
}
.openModalBtn img {
    width: 30px;
}
.openModalBtn .text {
    display: block;
    position: absolute;
    bottom: 0;
    width: 100%;
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    background: #000;
    border-radius: 6px;
    transform: translateY(50%);
}
.openModalBtn.active .text {
    display: none;
}

.modalNew {
    display: block;
    position: fixed;
    width: 440px;
    height: 600px;
    bottom: calc((70px + 20px) + 10px + 10px + (56px + 10px));
    right: 20px;
    opacity: 0;
    z-index: -1;
    transition: all 0.5s;
    box-shadow: rgba(255, 255, 255, 0.12) 0px 0px 2px 0px inset, rgba(0, 0, 0, 0.05) 0px 0px 2px 1px, rgba(0, 0, 0, 0.3) 0px 12px 60px;
}
.modalNew.active {
    /* display: block; */
    opacity: 1;
    z-index: 2;
}
.modalNew iframe {
    width: 100%;
    height: 100%;
}
.closeModalBtn {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 56px;
    height: 56px;
    font-size: 0;
    transform: translate(0, calc(56px + 10px));
    background-color: #000;
    border: 0 none;
    border-radius: 9999px;
    cursor: pointer;
}
.topBotton {
    right: calc(14px + (56px / 2));
    right: 20px;
    bottom: 20px;
    transform: translate(50%, 0);

    width: 56px;
    transform: none;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
}

@media screen and (max-width: 767px) {
    .openModalBtn {
        right: auto;
        left: 20px;
    }
    .openModalBtn,
    .topBotton {
        bottom: auto;
        top: 100%;
        margin-top: calc((76px + 20px) * -1);
    }
}
@media screen and (max-width: 499px) {
    .modalNew {
        width: calc(100% - (20px * 2));
        height: 80vh;
        /* bottom: auto; */
        /* right: auto; */
        bottom: calc((76px + 20px) + 10px);
        left: 20px;
        /* top: 100%; */
    }
    .modalNew.active {
        z-index: 9999;
    }
    .closeModalBtn {
        right: auto;
        left: 0;
    }
}