@charset "utf-8";
.hide {
    display: none !important;
}
.dictionary {
    height: 100%;
    padding: 40px 88px;
}
.dictionary.vary {
    padding: 20px 88px;
}
.dictionary * {
    font-family: "KoPubWorldDotum";
    font-weight: 500;
}

.dictionary .top_area {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.dictionary.is_tab .top_area {
    margin-top: -8px;
}
.dictionary .top_area .tit_wrap {
    text-align: left;
}
.dictionary .top_area h3 {
    font-size: 36px;
    line-height: 55px;
    color: #484d4d;
}

.dictionary .top_area h2 {
    font-family: "KOTRA_BOLD-Bold";
    font-style: normal;
    font-weight: 700;
    font-size: 60px;
    line-height: 87px;
    color: #008891;
}

.dictionary .top_area .subject {
    position: relative;
    top: -8px;
    left: -29px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.dictionary .top_area .subject * {
    font-family: "KOTRA_BOLD-Bold";
    font-weight: 700;
    font-size: 28px;
    line-height: 41px;
    color: #484d4d;
}
.dictionary .top_area .subject.s1 > span::after {
    content: "①";
    position: relative;
    top: -3px;
    display: inline-block;
    margin-left: 4px;
}
.dictionary .top_area .subject.s2 > span::after {
    content: "②";
}
.dictionary .top_area .subject .txt {
    display: flex;
    align-items: center;
    margin-top: 4px;
}
.dictionary .top_area .subject em {
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    width: 52px;
    height: 52px;
    background: #12c3ce;
    border-radius: 100%;
    padding-top: 5px;
}

.dictionary .top_area .subject em + em {
    margin-left: -9px;
}
/* Tab */
.dictionary ul.tabs {
    display: flex;
}
.dictionary ul.tabs li {
    width: calc(50% + 1px);
    cursor: pointer;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    line-height: 37px;
    color: #abafaf;
    background: #e9f0f0;
    border: 2px solid #d6dfe0;
    border-radius: 24px 24px 0 0;
}

.dictionary ul.tabs li + li {
    margin-left: -2px;
}
.dictionary ul.tabs li.current {
    background: #ffffff;
    border-bottom: none;
    color: #008891;
    font-weight: bold;
}
.dictionary .tab_content {
    display: none;
}

.dictionary .tab_content.current {
    display: inherit;
}

.dictionary .tab_index .tab_content {
    border: 2px solid #d6dfe0;
    border-top: none;
    border-radius: 0 0 24px 24px;
    padding: 16px 6px;
    margin-top: -1px;
}
.dictionary .tab_index ul.words {
    height: 434px;
    overflow-y: auto;
    padding-left: 16px;
}
.dictionary.is_tab .tab_index ul.words {
    height: 451px;
}
.dictionary .is_all .tab_index ul.words {
    max-height: 358px;
}
.dictionary .tab_index ul.words > li {
    display: flex;
    cursor: pointer;
}
.dictionary .tab_index ul.words > li + li {
    margin-top: 8px;
}

.dictionary .tab_index ul.words .checkbox {
    width: 40px;
    height: 40px;
    background: url(../img/chk.png) no-repeat center / 100%;
    margin-top: 8px;
    margin-right: 10px;
    -webkit-tap-highlight-color: transparent;
}
.dictionary .tab_index ul.words > li.chk .checkbox {
    background-image: url(../img/chk_o.png);
}
.dictionary .tab_index ul.words > li .word {
    width: 350px;
    padding: 9px 16px 7px;
    font-size: 32px;
    line-height: 120%;
    letter-spacing: -0.025em;
    color: #484d4d;
    text-align: left;
    border-radius: 8px;
    -webkit-tap-highlight-color: transparent;
}

.dictionary .tab_index ul.words > li .word.on {
    background-color: #e8f9fa;
    color: #000000;
    font-weight: 700;
}

/* Dictionary Main */
.dictionary .main {
    display: flex;
    align-items: flex-start;
    margin-top: 22px;
}

.dictionary.is_tab .main {
    margin-top: 20px;
}
.dictionary .tab_content .word {
    font-size: 32px;
    outline: none;
}
.dictionary .tab_content .btn.down {
    width: 424px;
    height: 56px;
    background: #e9f0f0;
    border: 2px solid #d6dfe0;
    border-radius: 8px;
    padding: 0 26px 0 16px;
    display: flex;
    align-items: center;
    margin: 16px auto 0;
}

.dictionary .tab_content .btn.down > span {
    font-weight: 700;
    font-size: 28px;
    line-height: 43px;
    color: #008891;
    flex: 1;
}

.dictionary .tab_content .btn.down::before {
    content: "";
    width: 40px;
    height: 40px;
    background: url(../img/icon_down.png) no-repeat center / 100%;
}

.dictionary .list_area .btn.view {
    width: 100%;
    height: 60px;
    border: 2px solid #d6dfe0;
    background: #e9f0f0;
    border-radius: 16px;
    font-family: "KOTRA_BOLD-Bold";
    font-weight: 700;
    font-size: 28px;
    color: #008891;
    justify-content: center;
    margin-bottom: 16px;
    display: none;
}
.dictionary .list_area.is_all .btn.view {
    display: block;
}
.dictionary .word_list {
    width: 456px;
}

.dictionary .word_content {
    position: relative;
    width: 1264px;
    height: 606px;
    background-color: #e9f0f0;
    margin-left: 24px;
    border-radius: 24px;
    padding: 26px 34px;
}

.dictionary.is_tab .word_content {
    height: 624px;
}
.dictionary .word_content .wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    overflow: auto;
    padding: 26px 34px;
}
.dictionary .word_content .top {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.dictionary .word_content .page {
    position: relative;
    font-size: 28px;
    line-height: 43px;
    color: #abafaf;
    margin-top: 6px;
    white-space: nowrap;
}

.dictionary .word_content .page::before {
    content: "";
    position: absolute;
    top: 3px;
    left: -36px;
    width: 32px;
    height: 32px;
    background: url(../img/icon_page.png) no-repeat center / 100%;
}

.dictionary .word_content .word {
    font-family: "KOTRA_BOLD-Bold";
    font-weight: 700;
    font-size: 56px;
    line-height: 81px;
    color: #000000;
    text-align: left;
}
.dictionary .word_content .word br {
    display: none;
}
.dictionary .word_content .word.pr35 {
    padding-right: 200px;
}
.dictionary .word_content .word.pr200 {
    padding-right: 280px;
}

.dictionary .word_content .lang,
.dictionary .word_content .lang * {
    font-size: 32px;
    line-height: 49px;
    color: #484d4d;
}
.dictionary .word_content .lang {
    margin-top: 7px;
}
.dictionary .word_content .lang .cha {
    font-weight: 700;
    font-size: 36px;
}
.dictionary .word_content .lang > em {
    color: #f44931;
}
.dictionary .word_content hr {
    width: 100%;
    height: 2px;
    background: #d6dfe0;
    margin: 20px 0 30px;
}
.dictionary .word_inner {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex: 1;
}
.dictionary .word_inner .mean_wrap {
    width: 100%;
    height: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.dictionary .word_inner .meaning {
    font-size: 36px;
    line-height: 55px;
    color: #484d4d;
    text-align: justify;
  letter-spacing: -0.03em;
}

.dictionary .word_inner .meaning.txt_justify {
    text-align: justify;
  
}
.dictionary .word_inner .meaning.ls_1e {
    letter-spacing: -0.01em;
}

.dictionary .word_inner .example {
    position: relative;
    width: 100%;
    min-height: 156px;
    background: #ffffff;
    border: 1px solid #008891;
    border-radius: 16px;
    padding: 54px 50px 50px;
    font-size: 32px;
    line-height: 49px;
    color: #484d4d;
    text-align: justify;
    margin-top: 46px;
    display: none;
}

.dictionary .word_inner .example::before {
    content: "짧은 문장";
    position: absolute;
    top: -30px;
    left: 30px;
    width: 172px;
    height: 56px;
    background: #008891;
    border-radius: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 28px;
    color: #ffffff;
}
.dictionary .word_inner .example em {
    color: #f44931;
}
.dictionary .word_inner .img_wrap {
    margin-left: 30px;
    border-radius: 16px;
    min-width: 480px;
    min-height: 480px;
    background: #fff;
    display: none;
}
.dictionary .word_inner .img_wrap img {
    width: 480px;
    object-fit: cover;
    border-radius: 16px;
    display: none;
}

.dictionary .word_content .opt {
    display: none;
}
.dictionary .word_content .opt.show {
    display: block;
}

.dictionary .word_content .btn.extend {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: url(../img/icon_extend.png) no-repeat center / 100%;
}

.dictionary .tail_area {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}
.dictionary .tail_area .guide {
    font-weight: 500;
    font-size: 20px;
    line-height: 31px;
    color: #484d4d;
    display: flex;
    align-items: center;
    margin-top: 12px;
    padding-left: 25px;
}

.dictionary .tail_area .guide .chk {
    width: 32px;
    height: 32px;
    background: url(../img/chk_o.png) no-repeat center / 100%;
    margin-right: 2px;
}

.dictionary .tail_area .btn.game {
    width: 280px;
    height: 80px;
    background: #12c3ce;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2),
        inset 0px 4px 4px rgba(255, 255, 255, 0.25);
    border-radius: 80px;
    font-family: "KOTRA_BOLD-Bold";
    font-weight: 700;
    font-size: 36px;
    color: #ffffff;
    justify-content: center;
    margin-top: 24px;
    padding-top: 6px;
}
/* 도덕 이외 과목 */
.dictionary.vary * {
    font-family: "KoPubWorldDotum" !important;
}
.dictionary.vary .top_area {
    margin-top: 12px;
}
.dictionary.vary .top_area h2 {
    color: #4472c4;
}
.dictionary.vary .top_area .subject em {
    background: #4472c4;
}
.dictionary.vary ul.tabs li {
    background: #f2f2f7;
    border-color: #d9d9e1;
}

.dictionary.vary ul.tabs li.current {
    background: #ffffff;
    color: #4472c4;
}

.dictionary.vary .lesson_tabs {
    margin-top: 14px;
}
.dictionary.vary .lesson_tabs ul.tabs {
    border-top: 2px solid #f2f2f7;
    border-bottom: 2px solid #f2f2f7;
}
.dictionary.vary .lesson_tabs li {
    height: 74px;
    border: none;
    font-weight: 500;
    font-size: 24px;
    line-height: 120%;
    letter-spacing: -0.025em;
    color: #a6a6af;
    background: none !important;
    border-radius: 0;
}

.dictionary.vary .lesson_tabs li.current {
    color: #4472c4;
}
.dictionary.vary .lesson_tabs li span {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-weight: bold;
}

.dictionary.vary .lesson_tabs li.current span::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    border-radius: 8px;
    background: #4472c4;
}
.dictionary.vary ul.order_tabs li {
    font-weight: 500;
}
.dictionary.vary ul.order_tabs li strong {
    font-weight: 600;
}
.dictionary.vary .tab_index .tab_content {
    border-color: #d9d9e1;
}

.dictionary.vary .tab_index ul.words {
    height: 487px;
}

.dictionary.vary .tab_index ul.words > li.chk .checkbox {
    background-image: url(../img/chk_o2.png);
}

.dictionary.vary .tab_index ul.words > li .word.on {
    background-color: #e4edff;
}
.dictionary.vary .main {
    margin-top: 55px;
}
.dictionary.vary .tab_content .btn.down {
    background: #f2f2f7;
    border-color: #d9d9e1;
}
.dictionary.vary .tab_content .btn.down > span {
    color: #4472c4;
}
.dictionary.vary .tab_content .btn.down::before {
    background: url(../img/icon_down2.png) no-repeat center / 100%;
}
.dictionary.vary .word_content {
    height: 660px;
    background-color: #f2f2f7;
}
.dictionary.vary .word_content .page {
    color: rgba(68, 114, 196, 0.8);
}
.dictionary.vary .word_content .page::before {
    top: 0px;
    left: -47px;
    width: 40px;
    height: 40px;
    background: url(../img/icon_page2.png) no-repeat center / 100%;
}
.dictionary.vary .tail_area .guide {
    position: relative;
    padding-left: 0;
    font-size: 24px;
    padding-left: 12px;
}
.dictionary.vary .tail_area .guide::before {
    content: "";
    position: absolute;
    top: 13px;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 100%;
    background: #4472c4;
}
.dictionary.vary .tail_area .guide .chk {
    background: url(../img/chk.png) no-repeat center / 100%;
    margin-left: 7px;
    margin-right: 0;
}
.dictionary.vary .tail_area .guide em {
    color: #4472c4;
    font-weight: 700;
}

/* PDF */
.pdf_wrap {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}
.pdf_wrap.show {
    z-index: 5;
    overflow: auto;
    pointer-events: all;
}
.pdf_wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    z-index: 1;
}
.pdf_wrap.show::before {
    display: none;
}
#pdfContent {
    position: absolute;
    top: 0;
    left: 0;
    width: 1785px;
    height: auto !important;
    padding: 0 120px;
    background: #fff;
    text-align: left;
}
#pdfContent .inner {
    width: 100%;
    height: 2523.88px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 120px;
    overflow: hidden;
}
#pdfContent .top_area {
    width: 100%;
    margin-bottom: 100px;
}
#pdfContent.all .top_area {
    justify-content: flex-start;
    padding-top: 54px;
    padding-left: 50px;
    margin-bottom: 109px;
}
#pdfContent .top_area h3 {
    margin-top: -11px;
    margin-bottom: 14px;
}
#pdfContent.all .top_area h3 {
    display: none;
}
#pdfContent.all .top_area .lesson_name {
    font-size: 70px;
}
#pdfContent.all .top_area .lesson_name.s1::after {
    content: "①";
    position: relative;
    top: -6px;
    margin-left: 10px;
    display: inline-block;
}
#pdfContent.all .top_area .lesson_name.s2::after {
    content: "②";
}

#pdfContent .top_area .subject {
    margin-top: 28px;
}
#pdfContent.all .top_area .subject {
    margin-top: 0;
    margin-left: 98px;
}

#pdfContent.all .top_area .subject > span {
    display: none;
}
#pdfContent.all .top_area .subject .txt em {
    width: 78px;
    height: 78px;
    font-size: 39px;
}
#pdfContent.all .top_area .subject .txt em + em {
    margin-left: -13px;
}
#pdfContent .row {
    width: 100%;
    display: flex;
}

#pdfContent .row .word {
    font-family: "KOTRA_BOLD-Bold";
    font-weight: 700;
    font-size: 56px;
    line-height: 81px;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 240px;
    border-top: 2px solid #c1c1c1;
    border-bottom: 2px solid #c1c1c1;
    margin-right: 100px;
}

#pdfContent .row .detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-top: 2px solid #c1c1c1;
    border-bottom: 2px solid #c1c1c1;
    flex: 1;
}
#pdfContent .row + .row .word,
#pdfContent .row + .row .detail {
    border-top: 0;
}

#pdfContent .inner[data-page="1"] .row:nth-child(2) .word,
#pdfContent .inner[data-page="1"] .row:nth-child(2) .detail {
    border-top: 2px solid #c1c1c1;
}

#pdfContent .row .detail .box {
    position: relative;
    width: 100%;
    background: #e9f0f0;
    padding: 18px 20px 8px;
}
#pdfContent .row .page {
    position: absolute;
    top: 14px;
    right: 26px;
    font-size: 28px;
    line-height: 43px;
    color: #abafaf;
    margin-top: 6px;
    white-space: nowrap;
}
#pdfContent .row .page > i {
    position: absolute;
    top: 3px;
    left: -36px;
    width: 32px;
    height: 32px;
    background: url(../img/icon_page.png) no-repeat center / 100%;
}

#pdfContent .row .lang,
#pdfContent .row .lang * {
    font-size: 32px;
    line-height: 49px;
    color: #484d4d;
}

#pdfContent .row .lang .cha {
    font-weight: 700;
    font-size: 36px;
}

#pdfContent .row .lang > em {
    color: #f44931;
}
#pdfContent .row .meaning {
    font-size: 34px;
    line-height: 55px;
    color: #484d4d;
}
#pdfContent .row .lang + .meaning {
    margin-top: -3px;
}

#pdfContent .row .example {
    position: relative;
    font-size: 32px;
    line-height: 49px;
    color: #484d4d;
    width: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    height: 122px;
}

#pdfContent .row .example::before {
    content: "짧은 문장";
    width: 172px;
    height: 56px;
    background: #008891;
    border-radius: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 28px;
    color: #ffffff;
    margin-right: 24px;
}
#pdfContent .row .example > div {
    letter-spacing: -0.04em;
    word-break: keep-all;
    flex: 1;
}
#pdfContent .row .example em {
    color: #f44931;
}

#pdfContent.vary .top_area {
    margin-top: 0;
    margin-bottom: 64px;
}
#pdfContent.vary .top_area h2 {
    font-size: 70px;
}
#pdfContent.vary .top_area .subject {
    margin-top: 0;
}
#pdfContent.vary .row + .row {
    margin-top: 0;
}
#pdfContent.vary .row .word {
    border-top: none !important;
    border-bottom: none;
    font-weight: 700;
    font-size: 36px;
    line-height: 55px;
    letter-spacing: -0.05em;
    color: #000000;
    width: 300px;
    margin-right: 0;
    background: #ececf8;
    border-radius: 15px 0 0 15px;
    text-align: center;
    padding: 10px;
    word-break: keep-all;
}
#pdfContent.vary .row + .row {
    padding-top: 52px;
}

#pdfContent.vary .inner[data-page="1"] .row:nth-child(2) {
    padding-top: 0;
}
#pdfContent.vary .inner .row:nth-child(1) {
    padding-top: 0;
}

#pdfContent.vary .row .detail {
    border: none !important;
    background: #f2f2f7;
    border-radius: 0 15px 15px 0;
}
#pdfContent.vary .row .detail .box {
    background: none;
    padding: 20px 28px 16px;
}
#pdfContent.vary .row .box_word {
    font-weight: 700;
    font-size: 36px;
    line-height: 55px;
    color: #484d4d;
    margin-bottom: 10px;
}
#pdfContent.vary .row .box_word br {
    display: none;
}
#pdfContent.vary .row .page {
    top: 20px;
    right: 30px;
    color: #4472c4;
}

#pdfContent.vary .row .page > i {
    top: 0px;
    left: -47px;
    width: 40px;
    height: 40px;
    background: url(../img/icon_page2.png) no-repeat center / 100%;
}
#pdfContent.vary .row .meaning {
    border-top: 2px dashed #acacac;
    margin-top: 16px;
    padding-top: 18px;
    font-size: 36px;
}
/* 확장 팝업 */
.ui_pop[data-pop="wordExtend"] .inner {
    padding: 0;
    background-color: #e9f0f0;
    border: 4px solid #c8c8c8;
    border-radius: 24px;
}
.ui_pop[data-pop="wordExtend"] .close {
    top: 42px;
    right: 44px;
    z-index: 1;
    background: url(../img/close2.png) no-repeat center / 100%;
}
.ui_pop .word_content {
    width: 100%;
    height: 100%;
    margin-left: 0;
    padding: 52px 68px 70px;
}
.ui_pop .word_content .word {
    font-size: 60px;
}

.ui_pop .word_content .top {
    margin-top: 30px;
}
.ui_pop .word_content .page {
    font-size: 32px;
    margin-top: 10px;
}

.ui_pop .word_content .lang,
.ui_pop .word_content .lang * {
    font-size: 36px;
}
.ui_pop .word_content .lang .cha {
    font-size: 40px;
}
.ui_pop .word_inner .meaning {
    font-size: 40px;
}
/* Pop Quiz */
.ui_pop .inner {
    position: relative;
    width: 1744px;
    height: 784px;
    padding: 0;
    border: 4px solid #e1e1ea;
    border-radius: 24px;
    transform: none;
    top: calc((1080px - 784px) / 2);
    left: calc((1920px - 1744px) / 2);
}

.ui_pop .guide_hand {
    position: absolute;
    width: 104px;
    height: 104px;
    background: url(../img/guide_hand.png) no-repeat center / 100%;
    z-index: 5;
    pointer-events: none;
}
.ui_pop .guide_hand.on {
    display: none;
}

.ui_pop .close {
    position: absolute;
    top: 40px;
    right: 40px;
    width: 64px;
    height: 64px;
    background: url(../img/close.png) no-repeat center / 100%;
    text-indent: -9999px;
    z-index: 5;
}
.ui_pop.finish .close {
    animation: blink-effect 1.5s ease;
    animation-iteration-count: 2;
}
@keyframes blink-effect {
    50% {
        opacity: 0;
    }
}
.ui_pop .slidepage {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 200px;
    overflow: hidden;
    margin: 0px auto;
}
.ui_pop .slidepage_wrap {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: left 0.2s ease-in-out;
    z-index: 2;
}
.ui_pop .slidepage_item {
    position: relative;
    float: left;
    width: 100%;
    height: 100%;
    min-height: 200px;
    padding: 98px 40px 40px;
}
.ui_pop .quiz_area {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 50px;
}
.ui_pop .quiz_area.finish .drag_item {
    pointer-events: none;
}
.ui_pop .quiz_area .quiz_txt {
    position: relative;
    width: 100%;
    font-weight: 700;
    font-size: 52px;
    line-height: 85px;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: #000000;
    padding-left: 155px;
    padding-right: 70px;
    word-break: break-word;
    letter-spacing: -0.02em;
}
.ui_pop .quiz_area .quiz_txt > em {
    position: absolute;
    top: 10px;
    left: 68px;
    width: 64px;
    height: 64px;
    background: #12c3ce;
    box-shadow: inset 0px 3.2px 8px rgba(0, 0, 0, 0.2);
    border-radius: 100%;
    font-family: "KOTRA_BOLD-Bold";
    font-weight: 700;
    font-size: 42px;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 6px;
}
.ui_pop .quiz_area .drop_area {
    position: relative;
    min-width: 208px;
    height: 88px;
    background: #e9f0f0;
    border: 4px dashed #f44931;
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    font-weight: 700;
    font-size: 52px;
    line-height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #f44931;
    padding: 0 30px;
    margin: 0 4px;
}
.ui_pop .quiz_area .drop_area > span {
    position: relative;
    top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
}
.ui_pop .quiz_area .drop_area.drop > span {
    opacity: 1;
}
.ui_pop .quiz_area .drop_area::before {
    content: "?";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.ui_pop .quiz_area .drop_area.drop::before {
    display: none;
}

.ui_pop .quiz_area .drag_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex: 1;
}
.ui_pop .quiz_area .drag_wrap .row {
    display: flex;
    align-items: center;
}
.ui_pop .quiz_area .item_wrap {
    margin: 18px 22px;
}
.ui_pop .quiz_area .drag_item {
    width: 300px;
    height: 124px;
    background: #e9f0f0;
    box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.1);
    border-radius: 24px;
    font-family: "KOTRA_BOLD-Bold";
    font-weight: 700;
    font-size: 52px;
    line-height: 75px;
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 8px;
    cursor: pointer;
}
.ui_pop .quiz_area .drag_item.drop {
    /* opacity: 0; */
    pointer-events: none;
    background: #e7e7e7;
    box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.1);
}

.ui_pop button.fix {
    position: absolute;
    bottom: 37px;
    left: 40px;
    z-index: 2;
    width: 160px;
    height: 80px;
    background: #e4edff;
    border: 2px solid rgba(68, 114, 196, 0.5);
    border-radius: 80px;
    font-family: "KOTRA_BOLD-Bold";
    font-weight: 700;
    font-size: 32px;
    color: #4472c4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ui_pop button.fix.blink {
    animation: blink-effect 2s ease-in infinite;
}
@keyframes blink-effect {
    50% {
        opacity: 0.2;
    }
}
.ui_pop .btn-prev:disabled,
.ui_pop .btn-next:disabled {
    background: #e9f0f0;
    border-color: #d6dfe0;
    color: #abafaf;
    pointer-events: none;
}
.ui_pop .btn-next.fix,
.ui_pop .btn-finish.fix {
    left: unset;
    right: 40px;
}
.ui_pop .btn-finish.fix {
    border-color: #12c3ce;
    background-color: #e8f9fa;
    color: #12c3ce;
    display: none;
}
.ui_pop.finish .btn-next.fix {
    display: none;
}
.ui_pop.finish .btn-finish.fix {
    display: block;
}

.ui_pop .slidepage-paging {
    position: absolute;
    bottom: 66px;
    left: 50%;
    transform: translate(-50%, 0);
    text-align: center;
    z-index: 100;
}
.ui_pop .slidepage-paging span {
    display: inline-block;
    float: left;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #e9f0f0;
    margin: 0 16px;
    cursor: pointer;
}
.ui_pop .slidepage-paging span.off {
    pointer-events: none;
}
.ui_pop .slidepage-paging span.current {
    background: #12c3ce;
    pointer-events: none;
}

/*스크롤바 스타일*/
#container *::-webkit-scrollbar {
    width: 16px;
    background-color: #e9f0f0;
    border-radius: 16px;
    border: none;
}
#container *::-webkit-scrollbar-track {
    width: 16px;
}

#container *::-webkit-scrollbar-thumb {
    background-color: #d6dfe0;
    border-radius: 12px;
    background-clip: padding-box;
    border: 2px solid transparent;
}

#container .dictionary.vary *::-webkit-scrollbar {
    background-color: #f2f2f7;
}
#container .dictionary.vary *::-webkit-scrollbar-thumb {
    background-color: #d9d9e1;
}
.loading-wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #0002;
    z-index: 3;
    display: none;
}
.loading-wrap.show {
    display: flex;
}
.loading-spinner {
    width: 40px;
    height: 40px;
    border: 5px solid #3498db;
    border-top: 5px solid transparent;
    border-radius: 50%;
}
.loading-wrap.show .loading-spinner {
    animation: rotate 1s linear infinite;
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}