:root {
    --cc-card-bg: #fff;
    --cc-card-color: #333;
    --cc-sentence-bg: #fff;
    --cc-sentence-word-border: #999;
    --cc-word-slash: #ccc;
    --cc-sentence-guide-color: #777;
    --cc-sentence-guide-bg: #fff;
}

[data-bs-theme=dark] {
    color-scheme: dark;
    --cc-card-bg: #4D4E54;
    --cc-card-color: #fff;
    --cc-sentence-bg: #1F2024;
    --cc-sentence-word-border: #fff;
    --cc-word-slash: #777;
    --cc-sentenct-guide-color: #C6C6C6;
    --cc-sentence-guide-bg: var(--cc-sentence-bg);
}

html, body { height: 100%; }

.slide-wrapper { flex-direction: column; height: 100%; min-width: 1240px; position: relative;  }
.slide-wrapper>.col { position: relative; }
.slide-wrapper>.col.top { flex: 0 0 auto; height: 76px; z-index: 1; display: none; }
.slide-wrapper>.col.bottom { flex: 0 0 auto; height: 76px; }
.slide-wrapper.comp>.col.bottom { display: none; }
.slide-wrapper.sentence { background: var(--cc-sentence-bg); }

.ly-back { position: absolute; right: 16px; top: 16px; z-index: 10; font-size: 28px; }
.ly-back .btn-back { background: #FFE9E8; border-radius: 100px; padding: 0px 5px; filter: drop-shadow(0px 2px 2px rgba(0, 0, 0, 0.25)); }
.ly-back .btn-back>i { top: -1px; }
.ly-back .btn-back:hover { background: #FBC4DE; }

.slide-body { height: 100%; padding: 56px; overflow: hidden; }

.slide-btn-prev { position: absolute; left: 10px; top: calc(50% - 44px); }
.slide-btn-next { position: absolute; right: 10px; top: calc(50% - 44px); }
.btn-step-body { width: 88px; height: 88px; align-items: center; text-align: center; font-size: 40px; background: #AFF1FF; border-radius: 100%; }
.btn-step-body i.cc { vertical-align: 4px; }
.slide-wrapper.even .btn-step-body { background: #FBC4DE; }

.slide-wrapper.sentence .btn-step-body { background: transparent; color: var(--cc-card-color); }

.custom-center-body, #customCenterModal.modal .modal-dialog { bottom: 70px; }

.header { height: 100%; align-items: center; padding: 0 56px; color: #fff; }
.btn-top-menu { display: inline-block; font-size: 20px; font-weight: 600; user-select: none; }
.btn-top-menu i { font-size: 128%; position: relative; }
.btn-top-menu>a { padding: 14px 12px; border-radius: 6px; }
.btn-top-menu>a.r4 { padding-right: 4px; }
.btn-top-menu>a.active { color: #78d024; }
.btn-top-menu>a:hover { background: rgba(255, 255, 255, 0.1); }
.slide-wrapper.sentence .header { color: #222328 }
.slide-wrapper.sentence .btn-top-menu>a:hover { background: rgba(0, 0, 0, 0.1); }
.btn-top-menu.seperate>a { border-left: 1px solid rgba(0, 0, 0, 0.4); }
.btn-top-menu.seperate-r>a { border-right: 1px solid rgba(0, 0, 0, 0.4); }

.footer-dropdown .dropdown-menu { left: auto; right: 0px; top: 33px; background: #484B59; border-radius: 0; border: none; padding: 8px 15px; }
.footer-dropdown .dropdown-menu li a { padding: 11px 10px; color: #fff; border-bottom: 1px solid #D8D8D8; }
.footer-dropdown .dropdown-menu li a:hover { color: #333; }
.footer-dropdown .dropdown-menu li:last-child a { border-bottom: none; }

.footer { height: 100%; padding: 0px 16px; align-items: center; background: #333439; }
.slide-wrapper.sentence .footer { background: #DBDBDB; }

.btn-bottom-menu { height: 44px; align-items: center; padding: 0 10px; border-radius: 10px; background: #fff; font-size: 20px; font-weight: 600; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1); }
.btn-bottom-menu:hover { background: #dfdfdf; }
.active .btn-bottom-menu { color: #78d024; }

.footer .cc-tab-box>* { border-color: transparent !important; background: #fff; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1); }
.footer .cc-tab-box>*:first-child { border-radius: 10px 0 0 10px; }
.footer .cc-tab-box>*:last-child { border-radius: 0 10px 10px 0; }
.footer .cc-tab-box>*:after { width: 2px; border-radius: 10px; background: #C0C0C0; z-index: 2; }
.footer .cc-tab-box>*:last-child:after { background: transparent; }
.footer .cc-tab-box>*>a { color: #333; font-size: 20px; font-weight: 600; padding: 7px 28px; }
.footer .cc-tab-box>*.toggle-image>a { font-size: 28px; padding: 1px 20px !important; }
.footer .cc-tab-box>*:hover { background: #dfdfdf; }
.footer .cc-tab-box.success.solid>*.active { background: #78d024; }
.footer .cc-tab-box.success.solid>*.active>a { color: inherit; }

.card-list { position: relative; width: 100%; height: 100%; }
/* .slide-content { height: 100%; position: relative; } */
.slide-content { height: 100%; position: inherit; }
.slide-content .slide-box { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.3s all ease; }
.slide-content .slide-box.prev { display: block; top: -80%; opacity: 0; pointer-events: none; }
.slide-content .slide-box.current { display: block; top: 0; opacity: 1; transition-delay: 0.5s; }
.slide-content .slide-box.next { display: block; top: 80%; opacity: 0; pointer-events: none; }

.slide-box .slide-step { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; transition: 0.5s all ease; overflow: hidden; text-align: center; font-size: 150px; font-weight: 600; background: var(--cc-card-bg); color: var(--cc-card-color); border: 10px solid #AFF1FF; border-radius: 20px; padding: 30px 80px; }
.slide-wrapper.sentence .slide-box .slide-step { background: var(--cc-sentence-bg); }
.slide-box .slide-step.prev { display: block; left: -100%; transform: scale(0.5); transform-origin: right; opacity: 0; }
.slide-box .slide-step.current { display: block; left: 0; transform: scale(1); transform-origin: center; opacity: 1; transition-delay: 0.6s; }
.slide-box .slide-step.next { display: block; left: 100%; transform: scale(0.5); transform-origin: left; opacity: 0; }
.slide-box .slide-step img { width: 100%; object-fit: cover; object-position: left top; }
.slide-box .slide-step img.h { width: auto; height: 100%; }
.slide-box .slide-step .vertical-mid>div { width: 100%; }
.slide-box .slide-step:first-child:after { content: ""; height: 0; width: 0; position: absolute; top: 0; left: 0; border: 150px solid transparent; border-bottom-width: 0; border-left-width: 0; border-top-color: #AFF1FF; }

.slide-body.no-ani .slide-box .slide-step { transition: none; }
.slide-body.no-ani .slide-box .slide-step.current { transition-delay: 0s; }
.slide-body.no-ani .slide-box .slide-step.next, .slide-body.no-ani .slide-box .slide-step.prev { display: none;}

.card-list .slide-box:nth-child(2n) .slide-step { border-color: #FBC4DE; }
.card-list .slide-box:nth-child(2n) .slide-step:first-child:after { border-top-color: #FBC4DE; }

.slide-wrapper.sentence .slide-box .slide-step { border: none; padding: 0px; border-radius: 0px; }
.slide-wrapper.sentence .slide-box .slide-step:first-child:after { border-top-color: transparent; }

.exam-data { color: #78d024; font-weight: 600; }
.slide-box .slide-step:first-child .exam-data { color: transparent; box-shadow: inset 0 -8px 0 #78d024; }

.footer-dropdown .dropdown-menu { left: -80px; right: -80px; top: auto; bottom: 105%; width: auto; height: 400px; border-radius: 4px; padding: 8px 0px; }
.footer-dropdown .dropdown-menu:before { content: ""; position: absolute; left: calc(50% - 5px); top: -10px; border-color: transparent; border-style: solid; border-width: 0 8px 10px; border-bottom-color: #484B59; }
.footer-dropdown .dropdown-menu li span { color: #13141C; font-weight: 600; padding: 16px 18px 3px; display: inline-block; }
.footer-dropdown .dropdown-menu li hr { margin: 4px 11px; border-top-color: #353640; }
.footer-dropdown .dropdown-menu li a { padding: 3px 32px; color: #fff; border: none; }
.footer-dropdown .dropdown-menu li a.active { color: #78D024; }
.footer-dropdown .dropdown-menu li a:hover { background: rgba(216, 216, 216, 0.15); color: #fff; }

.slide-text { word-break: break-word; }
.slide-text .txt-back { text-decoration: underline; cursor: pointer; }
.slide-text .txt-back > span { color: transparent; }
.slide-text .txt-back.active { text-decoration: none; }
.slide-text .txt-back.active > span { color: inherit; }

#remoteGuideModal .modal-dialog { display: block; min-height: auto; margin: 0px; position: absolute; bottom: 75px; left: 10px; }
#remoteGuideModal .modal-dialog:before { content: ""; position: absolute; left: 50px; bottom: -14px; border-color: transparent; border-style: solid; border-width: 15px 12px 0px; border-top-color: #fff; }

.remote-popup-guide:before { content: ""; position: absolute; width: 0; height: 0; border-color: transparent; border-style: solid; bottom: -10px; left: 12%; border-width: 10px 10px 0px 10px; border-top-color: #7F59C7;}
.remote-popup-guide {display: block; left: 15px; background: #7F59C7; color: #fff; border: none;
    padding: 25px 15px; bottom: 140%; width: 240px; opacity: 0.95; position: absolute; z-index: 1000;
    float: left; margin: 2px 0 0; font-size: 18px; list-style: none; border-radius: 4px; box-shadow: 0 6px 12px rgba(0,0,0,.175);}


.sentence-body .sentence-word { cursor: pointer; }
.sentence-body .sentence-word.clicked.quest { color: #333; cursor: default; }
.sentence-body .sentence-word .items:first-child { display: none; }
.sentence-body .sentence-word .items:last-child { display: inline; color: transparent; border-bottom: 2px solid var(--cc-sentence-word-border); }
.sentence-body .card-top .sentence-word .items:last-child { color: inherit; border-bottom: inherit; }
.sentence-body .sentence-word.active .items:first-child, .sentence-body .sentence-word.clicked .items:first-child, .sentence-body .sentence-word.force .items:first-child { display: inline; }
.sentence-body .sentence-word.active .items:last-child, .sentence-body .sentence-word.clicked .items:last-child, .sentence-body .sentence-word.force .items:last-child { display: none; }
.sentence-body .sentence-word.active .items:first-child { color: #999; }
.sentence-body .sentence-word.clicked .items:first-child, .sentence-body .sentence-word.force .items:first-child { color: inherit; }
.sentence-body .sentence-word:hover .items:first-child { color: #999; }
.sentence-body .sentence-word:hover .items:last-child { border-bottom-color: #999; color: #999; }

.btn-sentence-align { font-size: 24px; padding: 8px 5px; }
.btn-sentence-align.active { color: #78d024; }
.btn-sentence-align:hover { background: rgba(255, 255, 255, 0.09); }
.btn-sentence-align i { vertical-align: -3px; }

.sen-guide { position: absolute; left: 0; top: 0; right: 0; bottom: 0; font-size: 40px !important; font-weight: 500; background: var(--cc-sentence-guide-bg); color: var(--cc-sentence-guide-color); }
.txt-back.active .sen-guide { display: none; }

.slide-select { border-color: transparent; border-radius: 10px; font-size: 20px; font-weight: 600; padding: 6px 40px 6px 15px; outline: none; box-shadow: 0px 4px 4px rgb(0 0 0 / 10%); -webkit-appearance:none; -moz-appearance:none; appearance:none; position: relative; cursor: pointer; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 7 6-6'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 1.25rem center; background-size: 16px 12px; background-color: #fff; }
.slide-select:hover { background-color: #dfdfdf; }

.slide-wrapper.comp .top { background: #F3F3F3; display: block; box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10); }
.slide-wrapper.comp.sentence .top { box-shadow: none; }
.slide-wrapper.comp .top .top-right { display: none; }
.slide-wrapper .bottom .bottom-comp { display: none; }
.slide-wrapper.comp .bottom .bottom-normal { display: none; }
.slide-wrapper.comp .bottom .bottom-comp { display: flex; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.5); }
.slide-wrapper.comp .comp-middle { height: calc(100% - 76px); padding-top: 1rem; flex: 0 0 auto; background: #F3F3F3; }
.slide-wrapper.comp.sentence .comp-middle { background: #DBDBDB; padding-top: 0; }
.slide-wrapper.comp .comp-middle .slide-body { overflow-y: auto; padding: 0rem 0rem; scroll-behavior: smooth; }

.slide-wrapper.comp .slide-body .card-list { background: #F3F3F3; }
.slide-wrapper.comp .slide-body .card-list .comp-row { font-size: 3rem; background: #F3F3F3; padding: 2rem; border-top: 1px solid transparent; border-bottom: 1px solid transparent; position: relative; }
/* .slide-wrapper.comp .slide-body .card-list .comp-row.active { background: #fff; border-color: #78D024; } */
.slide-wrapper.comp .slide-body .card-list .comp-row.active { background: #fff; border-color: transparent; }
.slide-wrapper.comp .slide-body .card-list .comp-row:first-child { margin-top: 0rem; }
.slide-wrapper.comp .slide-body .card-list .comp-row>*:not(.canvas-body) { position: relative; z-index: 2; }
.slide-wrapper.comp .slide-body .card-list .comp-row .canvas-body { position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: 1; }
.slide-wrapper.comp .slide-body .card-list .comp-row .front { --bs-prog-per: 0%; --bs-prog-color: rgba(120, 208, 36, 0.5); cursor: pointer; }
.slide-wrapper.comp .slide-body .card-list .comp-row .front>span { background-image: linear-gradient(90deg, var(--bs-prog-color) 0%, var(--bs-prog-color) var(--bs-prog-per), transparent 0%, transparent 100%) !important; }
.slide-wrapper.comp.ko .slide-body .card-list .comp-row .front>span { background: #dbdbdb; color: transparent; cursor: pointer; }
.slide-wrapper.comp.ko .slide-body .card-list .comp-row.active .front>span { background: #f3f3f3; }
.slide-wrapper.comp.ko .slide-body .card-list .comp-row .front.active>span, .slide-wrapper.comp .slide-body .card-list .comp-row .front:hover>span { background: inherit; color: inherit; }
.slide-wrapper.comp .slide-body .card-list .comp-row .back { font-size: 2rem; color: #777; margin-top: 1rem; }
.slide-wrapper.comp .slide-body .card-list .comp-row .back>span { background: rgb(230, 243, 230); border-radius: 3px; color: transparent; cursor: pointer; margin-right: 0.5rem; }
.slide-wrapper.comp .slide-body .card-list .comp-row .back>span.active, .slide-wrapper.comp.ko .slide-body .card-list .comp-row .back>span { background: inherit; color: inherit; }

.slide-wrapper.comp .slide-body .btn-comp-audio { margin-right: 2rem; vertical-align: middle; }
.slide-wrapper.comp .slide-body .btn-comp-audio>i:last-child { display: none; }
.slide-wrapper.comp .slide-body .btn-comp-audio.active { color: #78d024; }
.slide-wrapper.comp .slide-body .btn-comp-audio.active>i:first-child { display: none; }
.slide-wrapper.comp .slide-body .btn-comp-audio.active>i:last-child { display: inline-block; }

.ly-dic { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; display: none; }
.ly-dic.active { display: block; }
.ly-dic .frame-body { position: absolute; right: 0; top: 0; width: 42rem; height: calc(100% - 5px); background: #fff; box-shadow: -1px 0px 5px; }
.ly-dic .frame-body>iframe { border: none; width: 100%; height: 100%; }

.word { cursor: pointer; }
.word-slash { color: var(--cc-word-slash); }
.slash { background: #F3F3F3; color: #ccc; }
.slide-wrapper.comp .slide-body .card-list .comp-row.active .slash { background: #fff; }

/* .comp-short-info { display: none; }
@media (min-width: 1000px) {
    .comp-short-info { display: block; }
} */

.slide-wrapper.comp .footer .cc-tab-box>*>a { padding: 7px 16px; }
.slide-wrapper.comp .slide-select { padding: 6px 30px 6px 10px; background-position: right 0.8rem center; }

.btn-slide>.row2 { align-items: center; height: 44px; margin: 0 auto; padding: 0px 10px; border-radius: 10px; background: var(--White, #FFF); box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.10); font-size: 20px; font-weight: 600; }
.btn-slide:hover>.row2 { background: #dfdfdf; }
.btn-slide>.row2 i { display: inline-block; top: 3px; font-size: 120%; padding-right: 5px; }
.btn-slide.comp_repeat_yn.active { color: #FF6159; }

.slide_user_popup.common-popup { background: #78D024; }
.slide_user_popup.common-popup:after { border-top-color: #78D024; left: auto; right: 35px; }
.slide_user_popup.common-popup .popup-title { color: #292929; }
.slide_user_popup.common-popup .popup-detail { color: #fff; background: #000; }