.ql-editor .ql-font-serif {
    font-family: source-serif-pro;
}

strong {
    font-weight: bold !important;
}

strong * {
    font-weight: bold !important;
}

em {
    font-style: italic;
}

/*===========================================================================
	FONT
============================================================================*/

/*@font-face {
    font-family: 'Pretendard';
    font-weight: 100;
    font-style: normal;
    src: url('../fonts/Pretendard-Thin.eot');
    src: url('../fonts/Pretendard-Thin.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard-Thin.woff2') format('woff2'),
        url('../fonts/Pretendard-Thin.woff') format('woff'),
        url('../fonts/Pretendard-Thin.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 200;
    font-style: normal;
    src: url('../fonts/Pretendard-ExtraLight.eot');
    src: url('../fonts/Pretendard-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard-ExtraLight.woff2') format('woff2'),
        url('../fonts/Pretendard-ExtraLight.woff') format('woff'),
        url('../fonts/Pretendard-ExtraLight.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 300;
    font-style: normal;
    src: url('../fonts/Pretendard-Light.eot');
    src: url('../fonts/Pretendard-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard-Light.woff2') format('woff2'),
        url('../fonts/Pretendard-Light.woff') format('woff'),
        url('../fonts/Pretendard-Light.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 400;
    font-style: normal;
    src: url('../fonts/Pretendard-Regular.eot');
    src: url('../fonts/Pretendard-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard-Regular.woff2') format('woff2'),
        url('../fonts/Pretendard-Regular.woff') format('woff'),
        url('../fonts/Pretendard-Regular.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 500;
    font-style: normal;
    src: url('../fonts/Pretendard-Medium.eot');
    src: url('../fonts/Pretendard-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard-Medium.woff2') format('woff2'),
        url('../fonts/Pretendard-Medium.woff') format('woff'),
        url('../fonts/Pretendard-Medium.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 600;
    font-style: normal;
    src: url('../fonts/Pretendard-SemiBold.eot');
    src: url('../fonts/Pretendard-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard-SemiBold.woff2') format('woff2'),
        url('../fonts/Pretendard-SemiBold.woff') format('woff'),
        url('../fonts/Pretendard-SemiBold.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 700;
    font-style: normal;
    src: url('../fonts/Pretendard-Bold.eot');
    src: url('../fonts/Pretendard-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard-Bold.woff2') format('woff2'),
        url('../fonts/Pretendard-Bold.woff') format('woff'),
        url('../fonts/Pretendard-Bold.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 800;
    font-style: normal;
    src: url('../fonts/Pretendard-ExtraBold.eot');
    src: url('../fonts/Pretendard-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard-ExtraBold.woff2') format('woff2'),
        url('../fonts/Pretendard-ExtraBold.woff') format('woff'),
        url('../fonts/Pretendard-ExtraBold.ttf') format("truetype");
    font-display: swap;
}
@font-face {
    font-family: 'Pretendard';
    font-weight: 900;
    font-style: normal;
    src: url('../fonts/Pretendard-Black.eot');
    src: url('../fonts/Pretendard-Black.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Pretendard-Black.woff2') format('woff2'),
        url('../fonts/Pretendard-Black.woff') format('woff'),
        url('../fonts/Pretendard-Black.ttf') format("truetype");
    font-display: swap;
}*/
/* Pretendard self-host 제거 — 라틴은 Inter, 한글(푸터 한정)은 시스템 폰트로 폴백. */
@font-face {
    font-family: 'Paperlogy';
    font-weight: 600;
    font-style: normal;
    src: url('../fonts/Paperlogy-6SemiBold.ttf') format("truetype");
    font-display: swap;
}

@font-face {
    font-family: 'Paperlogy';
    font-weight: 400;
    font-style: normal;
    src: url('../fonts/Paperlogy-4Regular.ttf') format("truetype");
    font-display: swap;
}


@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);
/* Inter는 nuxt.config.js head의 <link>로 로드 (CSS @import보다 빠른 발견). */

/*===========================================================================
	CSS 초기화
============================================================================*/
* {
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-weight: normal;
}

html,
body,
div,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
em,
img,
strong,
b,
i,
dl,
dt,
dd,
ol,
ul,
li,
form,
label,
legend,
article,
aside,
footer,
header,
menu,
nav,
section,
video,
a {
    border: 0;
    outline: 0;
    font-size: 100%;
    color: #333;
    line-height: 1;
}

body {
    line-height: 1;
    letter-spacing: -0.01em; /* Inter는 Pretendard보다 폭이 넓어 전역 자간 보정 (serif 지문은 style.css에서 제외) */
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ul,
ol,
li {
    list-style: none;
}

strong {
    display: inline-block;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

input,
select {
    vertical-align: middle;
    font-size: 16px;
}

p {
    line-height: 1.5;
    word-break: keep-all;
}

img {
    width: 100%;
    object-fit: contain;
}

input {
    outline: none;
}

button {
    cursor: pointer;
    border: 0;
    outline: 0;
    background: none;
    font-size: 16px;
}

a {
    text-decoration: none;
}

textarea {
    resize: none;
}


/*===========================================================================
	Global
============================================================================*/

:root {
    /* 폰트 */
    --nanumMyeongjo: 'Nanum Myeongjo', serif;
    --Inter: 'Inter', sans-serif;
    /*--sourceSerif : "source-serif-pro", serif;*/
    --sourceSerif: "Source Serif Pro", sans-serif;
    /* 칼라 */
    --pale-grey: #f6f3fc;
    --dark-slate-blue: #283f75;
    --dull-orange: #e37741;
    --warm-grey: #9e9e9e;
    --black: #222;
    --black-two: #333;
    --pale-grey-two: #eff3f8;
    --orangey-red: #ff3d3d;
    --lightish-blue: #5057ff;
}


.mb {
    display: none;
}

@media screen and (max-width: 768px) {
    .container {
        padding: 0 20px;
    }

    .pc {
        display: none;
    }

    .mb {
        display: block;
    }

}




/* ----------------

HEADER

----------------- */

/* header======================================================================================= */
.header.Active {
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
}

.header .container {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #e4e4e4;
    max-width: 1920px;
    padding: 0 140px 0 140px;
}

.header .header-le {
    display: flex;
}

.header .nav-wrap {
    display: flex;
    gap: 20px;
    height: 100%;
}

.header .header-nav {
    display: flex;
    align-items: center;
}

.header .header-nav a {
    font-size: 20px;
}

.header .header-nav li.mb {
    display: none;
}

.header .header-ri>ul li>button {
    width: 48px;
    height: 48px;
}

.header .header-ri>ul li>button i {
    display: none;
}

#header .header-alert {
    padding: 10px 16px;
    background-color: rgba(0, 0, 0, 0.85);
    color: #fff;
    text-align: center;
    font-weight: 300;
}

#header .header-alert b {
    color: #fff;
    font-weight: bold;
}

#header ul.header-nav li {
    margin-bottom: 0px;
    color: #000;
    text-align: center;
    display: flex;
    height: 100%;
    align-items: center;
}

#header ul.header-nav li a {
    box-sizing: border-box;
    display: block;
}

/* 페이지별 header */
#header.practicePage {
    background-color: transparent;
}

#header.shoppingCartPage {
    background-color: transparent;
}

#header.questionBankPage {
    background-color: transparent;
}


/* --------------------------- */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 80px;
    z-index: 99;
}

#header {
    position: relative;
}

#header ul.header-nav {
    display: flex;
    gap: 48px;
    height: 100%;
}

.header .header-ri>ul {
    display: flex;
    align-items: center;
    gap: 40px;
}


@media screen and (max-width: 1570px) {
    .header .container {
        padding: 0 71px 0 71px;
    }
}

@media screen and (max-width: 1080px) {
    .header .container {
        padding: 0 20px;
    }

    .header .header-le {
        gap: 44px;
    }

    #header ul.header-nav>li>a {
        padding: 20px 12px;
    }

    #header .header-alert {
        font-size: 14px;
    }

    #header .header-alert * {
        font-size: 14px !important;
    }
}

@media screen and (max-width: 880px) {

    /* #header {background-color: #fff; } */
    .header .header-ri>ul {
        gap: 20px;
    }

    #header ul.header-nav {
        display: none;
    }

    .header .logo-wrap {
        max-width: 88px;
    }

    .header .nav-wrap {
        display: none;
    }

    .header .header-nav {
        display: none;
    }

    .header .container {
        padding: 0 16px;
    }

    .header .logo {
        max-width: 86px;
    }

    .header {
        height: 56px;
        background-color: #fff;
    }

    /* 페이지별 header */
    #header.practicePage {
        background-color: transparent;
    }

    #header.shoppingCartPage {
        background-color: transparent;
    }

    #header.questionBankPage {
        background-color: transparent;
    }

    .practicePage {
        background-color: transparent;
    }

    .shoppingCartPage {
        background-color: transparent;
    }

    .questionBankPage {
        background-color: transparent;
    }
}

.header .header-le {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 1080px) {
    .header .nav-wrap {
        gap: 20px;
    }
}


.mb-hd {
    display: none;
}

.mb-hd-wrap {
    display: none;
}

#header {
    transition: none !important;
    opacity: 1 !important;
}

#header .mb-hd {
    display: block;
}

#header .mb-hd .mb-hd-wrap {
    display: none;
}

#header .mb-hd .mb-hd-wrap.open {
    width: 337px;
    display: flex;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    justify-content: flex-end;
    z-index: 99;
}

#header .mb-hd .mb-hd-box {
    width: 100%;
    height: 640px;
    background-color: #fff;
    position: relative;
    border-bottom-left-radius: 36px;
    box-shadow: 0 3px 36px 0 rgba(80, 87, 255, 0.16);
}

#header .mb-hd .mb-nav .mb-sm-nav-top {
    width: 100%;
    height: 66px;
    display: flex;
    align-items: center;
    padding-top: 32px;
    padding-bottom: 15px;
    cursor: pointer;
    border-bottom: 1px solid #D5D7FF;
}

#header .mb-hd .mb-nav .mb-sm-nav-top a {
    font-size: 18px;
    font-weight: bold;
    color: rgba(48, 48, 48, 0.8);
}

#header .mb-hd .mb-nav .mb-sm-nav-top.active {
    font-weight: bold;
    color: rgba(48, 48, 48, 0.8);
}

#header .mb-hd .mb-nav .mb-sm-nav {
    flex-direction: column;
    display: none;
    padding-left: 16px;
}

#header .mb-hd .mb-nav .mb-sm-nav a {
    padding: 0 24px;
    font-size: 16px;
    width: 100%;
    height: 40px;
    display: flex;
    align-items: center;
    line-height: 40px;
    color: #303030;
    letter-spacing: -0.45px;
}

#header .mb-hd .mb-nav.re-de a {
    display: block;
    width: 100%;
    font-size: 14px;
    font-weight: 800;
    color: var(--orange);
    border-bottom: unset;
}

#header .mb-hd .close-btn i {
    font-size: 24px;
    color: #333;
}

#header .mb-hd-top {
    display: flex;
    justify-content: space-between;
    padding: 37px 36px 37px 30px;
    box-shadow: 0 3px 12px 0 rgba(44, 53, 252, 0.16);
}

#header .mb-hd-top p {
    font-size: 14px;
    font-weight: bold;
}

#header .mb-hd-top span {
    font-size: 14px;
    font-weight: bold;
}

#header .mb-hd-top .logo-wrap {
    width: 88px;
}

#header .mb-hd-btm {
    position: absolute;
    bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 30px;
    width: 120px;
    height: 37px;
    background-color: #f1f4ff;
    border-radius: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#header .mb-hd-btm i {
    font-size: 20px;
    color: #565656;
    margin-left: 8px;
}

#header .mb-hd-btm li {
    display: flex;
    align-items: center;
    cursor: pointer;
}

#header .mb-nav .mb-nav-title {
    text-transform: uppercase;
    width: 100%;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 800;
    color: var(--orange);
    border-bottom: 1px solid #d5d5d5;
    border-top: 1px solid #d5d5d5;
}

#header .mb-hd-btm .btn-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 48px;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
}

#header .mb-hd-btm .btn-item i {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-size: 19px;
}

#header .mb-hd-btm a.btn-item {
    background-color: var(--orange);
}

#header .mb-hd-btm button.btn-item {
    background-color: rgba(51, 51, 51, 0.4);
}

#header .mb-hd .mb-hd-box .img-wrap {
    max-width: 133px;
}

#header .mb-sm-nav-top {
    font-size: 16px;
    font-weight: bold;
    color: var(--lightish-blue);
}

#header .mb-sm-nav-top img {
    width: 30px;
    height: auto;
    margin-right: 15px;
}

#header .mb-nav {
    margin-left: 30px;
}






/* ----------------

FOOTER

----------------- */
#footer {
    transition: none !important;
    opacity: 1 !important;
}

.footer {
    bottom: 0;
    display: flex;
    align-items: center;
    background-color: #333;
    width: 100%;
    margin: 0 auto;
    z-index: 22;
}

.footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: none;
    padding: 0 140px;
    padding-top: 38px;
    padding-bottom: 44px;
}

.footer p,
.footer a {
    color: #fff;
}

.footer .footer-info_le {
    display: flex;
    flex-direction: column;
}

.footer .footer-logo-wrap {
    max-width: 165px;
    margin-bottom: 24px;
}

.footer .footer-info_le .info-txt {
    font-size: 14px;
    font-weight: 300;
}

.footer .footer-info_le .info-txt {
    margin-bottom: 12px;
}

.footer .footer-info_le .info-txt_copyright {
    opacity: 0.5;
}

.en .footer .footer-info_ri {
    position: relative;
    top: 8px;
    min-width: 375px;
}

.en .footer .footer-info_ri .copyright {
    margin-top: 10px;
    text-align: right;
}

.footer .footer-info_ri {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 334px;
}

.footer .footer-info_ri .info-txt {
    opacity: 0.5;
    text-align: right;
}

.footer .footer-info_ri .policy-wrap {
    display: flex;
    gap: 8px;
    justify-content: right;
    margin-top: 26px;
}

.footer .copyright {
    max-width: 720px;
    font-size: 13px;
    opacity: 0.7;
    color: #fff;
    margin-bottom: 16px;
}

@media screen and (max-width: 1570px) {
    .footer .container {
        padding: 0 74px;
        padding-top: 38px;
        padding-bottom: 44px;
    }
}

@media screen and (max-width: 1020px) {

    .footer .footer-info_le {
        gap: 30px;
    }

    .footer .footer-logo-wrap {
        max-width: 200px;
    }

    .footer .footer-info_ri .info-txt {
        min-width: 188px;
    }

    .footer .footer-info_ri .policy-wrap li:not(:last-child)::after {
        right: -10px;
    }

    .en .footer .footer-info_ri .policy-wrap {
        gap: 8px;
    }

    .en .footer .policy-wrap a {
        padding: 2px 10px;
    }

    .en .footer .footer-info_ri {
        min-width: 330px;
    }
}

@media screen and (max-width: 768px) {
    .footer {
        position: unset;
        height: unset;
        padding-top: 40px;
        padding-bottom: 71px;
    }

    .footer .footer-logo-wrap {
        max-width: 136px;
        margin: unset;
        height: unset;
    }

    .footer .footer-info-wrap p {
        text-align: center;
    }

    .footer .footer-info-wrap .footer-info_le {
        margin: 0 auto;
    }

    .footer .footer-info_ri {
        width: 100%;
        max-width: 500px;
        min-width: unset;
        text-align: start;
        justify-content: center;
        align-items: start;
        order: 1;
    }

    .footer .footer-info_ri .policy-wrap {
        width: 100%;
        gap: 10px;
        justify-content: space-between;
    }

    .footer .footer-info_ri .policy-wrap a {
        font-size: 10px;
        width: 96px;
        white-space: nowrap;
    }

    .footer .container {
        width: 100%;
        flex-direction: column;
        padding: 0 20px;
        max-width: 370px;
    }

    .footer .footer-info_le {
        flex-direction: column;
        align-items: start;
        gap: unset;
        margin-bottom: 24px;
    }

    .footer .footer-info_le .info-txt {
        margin-bottom: 6px;
        font-size: 10px;
    }

    .footer .footer-info_le .info-txt.mb {
        margin-top: 10px;
        opacity: 0.5;
        font-size: 12px;
    }

    .footer .footer-sns-wrap {
        display: flex;
        gap: 16px;
    }

    .footer .footer-sns-wrap .icon-wrap {
        max-width: 40px;
    }

    .footer .footer-support-wrap:after {
        left: 0;
        right: unset;
    }

    .footer .footer-support-wrap {
        padding-right: unset;
        padding-left: 24px;
    }

    .footer .support-guide {
        text-align: start;
    }

    .footer .support-email {
        text-align: left;
    }

    .footer .footer-info_ri .copyright {
        display: block;
        width: 100%;
        margin-top: 24px;
        text-align: right;
    }

    .footer .footer-info_ri .policy-wrap {
        margin-top: 4px;
    }

    .en .footer .footer-info_ri {
        min-width: unset;
    }
}

.footer .footer-sub {
    max-width: 720px;
    font-size: 13px;
    font-size: 200;
    opacity: 0.7;
    color: #fff;
    margin-bottom: 16px;
}

.footer .footer-sub+.footer-sub {
    margin-top: 0;
}

.footer .footer-reserved {
    font-size: 12px;
    font-size: 200;
    opacity: 0.7;
    color: #fff;
}

.footer .footer-support-wrap {
    position: relative;
    text-align: right;
    padding-right: 14px;
}

.footer .footer-support-wrap:after {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    content: "";
    width: 3px;
    height: 100%;
    background-color: #fff;
}

.footer .support-email {
    font-size: 15px;
    font-weight: 300;
    color: #fff;
}

.footer .support-guide {
    font-size: 12px;
    font-weight: 300;
    color: #fff;
    opacity: 0.6;
}

.footer .footer-admin {
    text-align: right;
    margin-top: 24px;
    font-size: 12px;
    font-weight: 300;
    color: #fff;
    opacity: 0.6;
}

.footer .policy-wrap a {
    border-radius: 16px;
    border: 1px solid #fff;
    height: 20px;
    padding: 4px 17px;
    font-size: 12px;
    font-weight: 300;
    color: #fff;
}

@media screen and (max-width: 768px) {
    .footer .footer-sub {
        margin-top: 20px;
        font-size: 12px;
    }

    .footer .footer-admin {
        margin-top: unset;
        text-align: left;
    }

    .footer .footer-support-wrap {
        padding-right: unset;
        padding-left: 10px;
    }
}

#top_menu {
    position: fixed;
    right: 48px;
    top: 42%;
    transform: translateY(-50%);
    z-index: 999;
}

.top-menu {
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-end;
}

.top-menu li {
    position: relative;
}

.top-menu li .btn {
    width: 60px;
    height: 60px;
    border-radius: 30px;
    padding: 16px;
    position: absolute;
    left: 0;
    top: 0;
}

.top-menu li .hover-btn {
    height: 60px;
    border-radius: 30px;
    padding-left: 60px;
    text-align: center;
    width: 0;
    transition: .3s;
    overflow: hidden;
}

.top-menu li:hover .hover-btn {
    width: 172px;
}

.top-menu li .hover-btn p {
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    line-height: 60px;
    opacity: 0;
    transition: .1s;
    transition-delay: 0.3s;
    text-align: center;
    padding-right: 16px;
}

.top-menu li:nth-child(1) .btn,
.top-menu li:nth-child(1) .hover-btn {
    background: var(--orange);
}

.top-menu li:nth-child(2) .btn,
.top-menu li:nth-child(2) .hover-btn {
    background: #fae300;
}

.top-menu li:nth-child(3) .hover-btn {
    background: radial-gradient(circle farthest-corner at 32% 106%, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), linear-gradient(135deg, #234bd7 12%, #c33cbe 58%)
}

.top-menu li:nth-child(2) .hover-btn p {
    color: #3b1d1d;
}

.top-menu li:nth-child(4) .hover-btn p {
    color: #391b1b;
}

.top-menu li:hover .hover-btn p {
    opacity: 1;
}

.top-menu li:last-child {
    width: 60px;
    height: 60px;
    border-radius: 40px;
    background: #363636;
    text-align: center;
    display: flex;
    flex-flow: column;
    justify-content: center;
    transition: .3s;
}

.top-menu li:last-child:hover {
    background: #0e2071;
}

.top-menu li:last-child i {
    color: #fff;
    font-size: 20px;
}

.top-menu li:last-child p {
    color: #fff;
    font-size: 12px;
}

@media screen and (max-width: 768px) {
    #top_menu {
        display: none;
    }
}


/* pagination */
.pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    justify-content: center;
}

.pagination .page-btn {
    display: flex;
    width: 26px;
    height: 26px;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 24px;
    font-size: 20px;
    color: #c1c1c1;
}

.pagination .page-btn i {
    color: #c1c1c1;
}

.pagination .page-btn.active {
    color: var(--lightish-blue);
    font-weight: bold;
}

.pagination .next-btn {
    margin: unset;
}


/* ============================= + SAT ============================= */

@font-face {
    font-family: 'SUIT-Regular';
    src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_suit@1.0/SUIT-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

:root {
    /* 폰트 */
    --nanumMyeongjo: 'Nanum Myeongjo', serif;
    --SUIT: 'SUIT-Regular', serif;


    /* 칼라 */
    --pale-grey: #f6f3fc;
    --dark-slate-blue: #283f75;
    --dull-orange: #e37741;
    --warm-grey: #9e9e9e;
    --black: #222;
    --black-two: #333;
    --pale-grey-two: #eff3f8;
    --orangey-red: #ff3d3d;
    --blue: #3e44d2;
    --lightish-blue: #5057ff;
    --light-blue: #eaeefe;
    --green: #37aa64;
}

.blue {
    color: #3e44d2 !important;
}

.bg-blue {
    color: #3e44d2 !important;
}


/* 컴포넌트 공통 속성 */
.bg-color1 {
    background-color: var(--light-blue);
}

.point-color-blue {
    color: var(--lightish-blue);
    font-weight: bold;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.user-page-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.user-page-btn i {
    font-size: 27px;
    color: #fff;
}

.header-le img {
    width: 165px;
}

.header-ri {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 95px;
}

#header ul.header-nav li a {
    font-size: 18px;
    font-weight: 700;
    color: #404040;
}

#header ul.header-nav li a:hover {
    color: var(--lightish-blue);
}

@media screen and (max-width:1200px) {
    #header ul.header-nav {
        gap: 25px;
    }

    .header-ri {
        gap: 47px;
    }
}

/* @media screen and (max-width: 1080px) {

} */

@media screen and (max-width: 900px) {
    #header ul.header-nav>li>a {
        padding: 20px 6px;
    }

    .header-ri {
        gap: 10px;
    }
}

@media screen and (max-width: 880px) {
    #header .container {
        position: relative;
        border-bottom: unset;
    }

    #header .container .pc {
        display: none;
    }

    .btn-default.user-page-btn {
        position: absolute;
        right: 11px;
    }

    #header .menubar.mb {
        display: block;
        cursor: pointer;
        font-size: 30px;
        margin-right: 36px;
    }

    #header .menubar.mb i {
        color: var(--lightish-blue);
        font-size: 24px;
    }

    .btn-default.user-page-btn {
        background-color: unset;
    }

    .btn-default.user-page-btn i {
        color: var(--lightish-blue);
    }

    .header-le img {
        width: 109px;
    }
}


.header .header-ri {
    height: 100%;
}


/* 페이지별 메뉴 활성화 */
#header.practicePage ul.header-nav li.menu-1 a {
    color: var(--lightish-blue);
    font-weight: bold;
}

#header.questionBankPage ul.header-nav li.menu-2 a {
    color: var(--lightish-blue);
    font-weight: bold;
}

#header.pricingPage ul.header-nav li.menu-3 a {
    color: var(--lightish-blue);
    font-weight: bold;
}

#header.aboutSatPage ul.header-nav li.menu-4 a {
    color: var(--lightish-blue);
    font-weight: bold;
}

#header.questionTypePage ul.header-nav li.menu-4 a {
    color: var(--lightish-blue);
    font-weight: bold;
}

#header.examSchedulePage ul.header-nav li.menu-4 a {
    color: var(--lightish-blue);
    font-weight: bold;
}

/* // */


#header ul.header-nav li {
    position: relative;
    justify-content: center;
}

#header ul.header-nav li a {
    padding: 0 2px;
}

#header ul.header-nav li a:hover {
    font-weight: bold;
}

#header ul.header-nav li a:hover::after {
    position: absolute;
    display: block;
    content: "";
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 48px;
    height: 4px;
    background-color: var(--lightish-blue);
}

#header .user-page-btn-wrap {
    display: flex;
    align-items: center;
    cursor: pointer;
}

#header .user-page-btn-wrap .text {
    margin-left: 8px;
    font-weight: bold;
    color: var(--lightish-blue);
}

#header ul.header-nav .menu-1 {
    min-width: 115px;
}

#header ul.header-nav .menu-2 {
    min-width: 128px;
}

#header ul.header-nav .menu-3 {
    min-width: 64px;
}

#header ul.header-nav .menu-4 {
    min-width: 78px;
}

/* 626 */
#header ul.header-nav .menu-5 {
    min-width: 78px;
}

/* 626 */

#header.practicePage li.menu-1::after {
    position: absolute;
    display: block;
    content: "";
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 48px;
    height: 4px;
    background-color: var(--lightish-blue);
}

#header.questionBankPage li.menu-2::after {
    position: absolute;
    display: block;
    content: "";
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 48px;
    height: 4px;
    background-color: var(--lightish-blue);
}

#header.pricingPage li.menu-3::after {
    position: absolute;
    display: block;
    content: "";
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 48px;
    height: 4px;
    background-color: var(--lightish-blue);
}

#header.aboutSatPage li.menu-4::after {
    position: absolute;
    display: block;
    content: "";
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 48px;
    height: 4px;
    background-color: var(--lightish-blue);
}

#header.questionTypePage li.menu-4::after {
    position: absolute;
    display: block;
    content: "";
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 48px;
    height: 4px;
    background-color: var(--lightish-blue);
}

#header.examSchedulePage li.menu-4::after {
    position: absolute;
    display: block;
    content: "";
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 50%);
    width: 48px;
    height: 4px;
    background-color: var(--lightish-blue);
}

@media screen and (max-width: 1200px) {
    #header .user-page-btn-wrap .text {
        display: none;
    }
}


/* 탑버튼 */
.header .top-btn {
    bottom: 15px;
    position: fixed;
    right: 20px;
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
    width: 38px;
    height: 38px;
    background-color: var(--lightish-blue);
    border-radius: 50%;
    cursor: pointer;
    text-align: center;
}

.header .top-btn i {
    padding-bottom: 3px;
    color: #fff;
    font-size: 20px;
    line-height: 38px;
}

/* // */



/* 로그인 후 - 유저 드랍다운 메뉴 */
#header .user-page-btn {
    position: relative;
}


#header .user-drop-menu {
    position: absolute;
    top: 58px;
    background-color: #fff;
    border-radius: 18px;
    width: 180px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 16px;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    padding: 24px 24px 20px;
    z-index: 1;
}

#header .user-drop-menu .logout-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #e4e4e4;
}

#header .user-drop-menu .user-menu {
    font-size: 17px;
    line-height: 1.4;
    white-space: nowrap;
}

#header .user-drop-menu .user-menu:hover {
    font-weight: 600;
}

#header .user-drop-menu .logout-wrap {
    padding-left: 2px;
}

#header .user-drop-menu .logout-wrap .title {
    font-size: #222;
    font-size: 17px;
}

#header .user-drop-menu i {
    font-size: 20px;
    color: #222;
}


@media screen and (max-width: 1570px) {

    #header .user-drop-menu {
        width: 170px;
    }

    #header .user-drop-menu {
        padding: 24px 20px 20px;
    }
}

.m-mobile {
    display: none !important;
}

@media screen and (max-width: 1080px) {
    .m-pc {
        display: none !important;
    }

    .m-mobile {
        display: block !important;
    }

    .header .container {
        padding: 0 40px;
    }

    .header-ri {
        gap: 32px;
    }

    #header ul.header-nav {
        gap: 20px;
    }

    #header .user-drop-menu {
        display: none;
    }

    #header .user-drop-menu .logout-wrap .title {
        font-size: 14px;
    }

    #header .user-drop-menu i {
        font-size: 18px;
    }

    #header .user-drop-menu {
        padding: 20px 6px 14px;
        width: 105px;
        gap: 12px;
        right: 0;
    }

    #header .user-drop-menu .user-menu {
        font-size: 12px;
        text-align: center;
    }

    #header .user-drop-menu .logout-wrap {
        padding-left: unset;
        justify-content: center;
    }

    #header .user-drop-menu i {
        font-size: 14px;
    }

    #header .user-drop-menu .logout-wrap .title {
        font-size: 12px;
    }

    #header .user-drop-menu .logout-wrap {
        padding-top: 8px;
        gap: 4px;
    }
}

@media screen and (max-width: 1000px) {
    /* 626 */

    #header ul.header-nav {
        gap: 12px;
    }
}



@media screen and (max-width: 880px) {
    #header .user-page-btn:hover {
        background: transparent !important;
    }

    #header .container {
        padding: 0 16px;
    }

    #header .user-page-btn {
        position: absolute;
    }

    #header .user-drop-menu {
        display: none;
    }


}
/* latin-modern-math 폰트는 수식 페이지 전용 → utils/headAssets.js 의 MATH_FONTS 로 이동.
   (style.css 는 전역 로드되므로 여기 @import 하면 홈에서도 불필요하게 받아온다) */

/*
        전체 스크롤 안보이게
          * { -ms-overflow-style: none; scrollbar-width: none;}
          *::-webkit-scrollbar {  display: none; }
          div::-webkit-scrollbar { display: none; }
          div { -ms-overflow-style: none; scrollbar-width: none; }
        */

/*
             팝업
        */

#main {
    min-height: 100vh;
}

/* 팝업배경 -- */
.popup-bg-wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 100000;
    top: 0;
    left: 0;
    background-color: unset;
    display: none;
    background-color: rgba(0, 0, 0, 0.478);
}


.ex-bg-wrap {
    background-color: unset;
}

.popup-bg-wrap .black {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.popup-bg-wrap.open {
    display: flex;
}

/* // 팝업배경 */
/*
        팝업배경사용하는 경우
        .popUp_box {display: none;   position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); flex-direction: column; align-items: center; width: 100vw; max-width: 360px; padding: 64px 44px;  box-shadow: 0 3px 48px 0 rgba(80, 87, 255, 0.12); border: 1px solid  #e4e4e4; border-radius: 16px;  background-color: #fff;  z-index: 99999; }
        .popUp_box.open { display: flex; }
        */
.popUp_box {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    width: 100vw;
    max-width: 400px;
    padding: 64px 40px;
    box-shadow: 0 3px 48px 0 rgba(80, 87, 255, 0.12);
    border: 1px solid #e4e4e4;
    border-radius: 16px;
    background-color: #fff;
    z-index: 99999;
}

.popUp_box .black {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
}

.popUp_box.open {
    display: flex;
}

.popUp_box .popUp-icon-wrap {
    max-width: 56px;
    margin-bottom: 24px;
}

.popUp_box .popUp_title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 16px;
}

.popUp_box .popUp-sub {
    font-size: 16px;
    color: #333;
    margin-bottom: 48px;
}

.popUp_box .popUp-sub a {
    font-weight: bold;
}

.popUp_box .popUp_btn_wrap {
    display: flex;
    gap: 16px;
}

.popUp_box .popUp_btn_wrap * {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    height: 40px;
    width: 240px;
}

.popUp_box .popUp_btn_wrap .popUp_close_btn {
    background-color: #e4e4e4;
    color: #333;
}

.popUp_box .popUp_btn_wrap .popUp_move_btn {
    background-color: var(--squash);
    color: #fff;
    cursor: pointer;
}

.popUp_box .popUp_btn_wrap .grey-btn {
    background-color: #e4e4e4;
    color: #333;
}

.popUp_box .popUp_logo {
    max-width: 200px;
    margin-bottom: 40px;
}

.popUp_box.type1 .modal-line {
    width: 100%;
    border-radius: 6px;
    border: 1px solid #e4e4e4;
    height: 40px;
}

.popUp_box.type1 .modal-btn {
    width: 100%;
    height: 40px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    border-radius: 6px;
    margin-top: 16px;
}

.popUp_box.type1 .link-txt {
    width: 100%;
    font-size: 14px;
    color: #202020;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: right;
}

.popUp_box.type1 .link-txt i {
    font-size: 14px;
    color: var(--lightish-blue);
    margin-left: 4px;
}

.popUp_box.type1 .link-txt.join {
    justify-content: center;
    font-size: 16px;
    font-weight: bold;
    color: #424242;
    margin-top: 56px;
    border-bottom: 1px solid #424242;
    padding-bottom: 4px;
    width: fit-content;
}

.popUp_box.step-login .link-txt.join {
    border-bottom: unset;
    padding-bottom: unset;
}

.popUp_box.step-login .link-txt.join.step-btn {
    height: unset;
    border-radius: unset;
    border-bottom: 1px solid #424242;
}

.popUp_box.type1 input.modal-line {
    padding: 12px 14px;
}

.popUp_box.type1 input::placeholder {
    font-size: 14px;
    font-weight: 500;
    color: #202020;
    opacity: 0.4;
}

.popUp_box.type1 input:focus {
    outline: 2px solid var(--lightish-blue);
}

/* outline 테두리 속성 수정 */

.popUp_box.type1 .pwd-input {
    margin-top: 16px;
}

.popUp_box.type1 .google-btn {
    display: flex;
    gap: 15px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.popUp_box.type1 .google-btn img {
    max-width: 18px;
}

.popUp_box.type1 .google-btn .title {
    margin-left: 6px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    position: relative;
    left: -8px;
    color: rgba(0, 0, 0, 0.54);
    line-height: 1
}

.popUp_box.type1 .guide-txt {
    font-size: 16px;
    font-weight: 300;
    color: #202020;
    opacity: 0.4;
    margin: 24px 0 24px;
}

.popUp_box.type1 .chk-wrap {
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100%;
    position: relative;
    font-size: 14px;
    color: #c1c1c1;
    margin-top: 14px;
    margin-bottom: 20px;
    line-height: 1.5;
}

.popUp_box.type1 .btn-close {
    position: absolute;
    top: 15px;
    right: 15px;
}

.popUp_box.type1 .btn-close i {
    font-size: 20px;
    font-weight: bold;
}

.popUp_box.type1 input[type="checkbox"] {
    display: block;
    margin-right: 6px;
    border: 1px solid #e4e4e4;
}

.popUp_box.type1 .chk-wrap .policy-btn {
    display: block;
    color: #424242;
    font-weight: bold;
    border-bottom: 1px solid #424242;
}

.popUp_box.type1 .login-guide {
    display: flex;
    gap: 11px;
    align-items: center;
    margin-top: 20px;
}

.popUp_box.type1 .login-guide .title {
    font-size: 17px;
    color: #202020;
}

.popUp_box.type1 .login-guide .link-txt {
    margin-top: unset;
    width: fit-content;
    font-size: 17px;
    font-weight: bold;
    color: var(--lightish-blue);
}

.popUp_box.step-login .guide-txt {
    margin: 24px 0;
}

.popUp_box.step-login .modal-btn {
    margin-top: 24px;
}

.popUp_box.type1 .guide-msg {
    position: absolute;
    top: 34px;
    font-size: 12px;
    color: #d50f00;
}

.popUp_box.type1 .guide-msg i {
    color: #d50f00;
    margin-right: 4px;
}

.popUp_box .step-account {
    padding-bottom: 45px;
}

.popUp_box.type1 .guide-policy {
    font-size: 12px;
    line-height: 1.4;
    color: #989898;
    text-align: center;
    opacity: unset;
}

.popUp_box.type1 .guide-policy .link-txt {
    display: inline-block;
    margin-top: unset;
    width: unset;
    font-weight: bold;
    color: #989898;
    font-weight: bold;
    font-size: 10px;
    border-bottom: unset;
}


/* ------------- 계정 만들기 팝업 */
.popUp_box.step-account {
    padding-bottom: 48px;
}

.popUp_box.step-account .chk-wrap {
    color: #202020;
}

.popUp_box.step-account .guide-policy .link-txt {
    border-bottom: 1px solid #989898;
    font-weight: bold;
    font-size: 12px;
}

.popUp_box.step-account .login-guide .link-txt {
    height: unset;
    border-bottom: 1px solid var(--lightish-blue);
    border-radius: unset;
}

.popUp_box.step-account input[type="checkbox"] {
    width: 12px;
    margin-right: unset;
}

.popUp_box.step-account .modal-btn {
    margin-top: 21px;
    text-transform: capitalize;
}

/* ------------- 메일 확인 팝업 */
.popUp_box.mail-send-modal {
    max-width: 560px;
    padding: 64px auto 72px;
}

.mail-send-modal .title {
    font-size: 32px;
    font-weight: 600;
    color: #202020;
}

.mail-send-modal .link-guide {
    font-size: 16px;
    color: #202020;
    opacity: 0.8;
    text-align: center;
    margin-top: 24px;
    line-height: 1.38;
}

.mail-send-modal .user-mail {
    font-weight: bold;
    opacity: unset;
    display: inline-block;
}

.mail-send-modal .try-guide {
    margin-top: 59px;
}

.mail-send-modal .try-guide .try-txt {
    font-size: 14px;
    color: #202020;
    opacity: 0.86;
}

.mail-send-modal .try-guide .try-btn {
    font-size: 14px;
    color: #2c35fc;
    font-weight: bold;
    opacity: unset;
    border-bottom: 1px solid #2c35fc;
    margin-left: 3px;
}

@media screen and (max-width: 1080px) {
    .ex-bg-wrap {
        background-color: rgba(0, 0, 0, 0.478);
    }
}

@media screen and (max-width: 768px) {
    .mail-send-modal .title {
        font-size: 20px;
    }

    .mail-send-modal .link-guide {
        font-size: 14px;
    }

    .mail-send-modal .try-guide {
        margin-top: 28px;
    }

    .mail-send-modal .try-guide .try-txt {
        font-size: 12px;
    }

    .mail-send-modal .try-guide .try-btn {
        font-size: 12px;
    }
}

/* ------------- 메일 인증 후 팝업 */
.popUp_box.mail-verify-modal {
    max-width: 1040px;
    padding: 32px auto 40px;
}

.mail-verify-modal .inner-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 96px;
    border-radius: 24px;
    background-image: linear-gradient(116deg, #c3e1fca4 5%, #8ec5fc81 93%);
}

.mail-verify-modal .title {
    font-size: 40px;
    font-weight: bold;
    color: #202020;
}

.mail-verify-modal .title-sub {
    font-size: 20px;
    color: #202020;
    margin-top: 24px;
}

.mail-verify-modal .title-sub span {
    font-weight: bold;
}

.mail-verify-modal .verify-btn {
    margin-top: 64px;
    transition: all 0.3s;
}

.mail-verify-modal .verify-btn:hover {
    background-color: #2c35fc;
    color: #fff;
}

.mail-verify-modal .offers-info {
    font-size: 16px;
    font-weight: 200;
    opacity: 0.7;
    color: #202020;
    text-align: center;
    margin-top: 56px;
}

.mail-verify-modal .domain-link {
    font-size: 20px;
    color: #202020;
    border-bottom: 1px solid #202020;
    margin-top: 72px;
}

@media screen and (max-width: 768px) {
    .mail-verify-modal .title {
        font-size: 22px;
    }

    .mail-verify-modal .title-sub {
        font-size: 16px;
        margin-top: 14px;
    }

    .mail-verify-modal .inner-wrap {
        text-align: center;
        padding-bottom: 60px;
    }

    .mail-verify-modal .verify-btn {
        margin-top: 35px;
    }

    .mail-verify-modal .offers-info {
        font-size: 13px;
        margin-top: 36px;
    }

    .mail-verify-modal .domain-link {
        font-size: 18px;
        margin-top: 55px;
    }
}

/* ------------- 회원가입 추가 정보 팝업 */
.btn_select.active p {
    opacity: 1 !important;
}

.popUp_box.info-add-modal {
    max-width: 560px;
    padding: 64px auto 80px;
}

.info-add-modal .popUp_logo {
    max-width: 200px;
    margin-bottom: 32px;
}

.info-add-modal .title {
    font-size: 16px;
    color: #202020;
}

.info-add-modal .modal-line {
    max-width: 360px;
}

.info-add-modal .modal-line.top {
    margin-top: 24px;
}

.info-add-modal .account-btn {
    width: 100%;
    height: 40px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    border-radius: 6px;
    margin-top: 16px;
    max-width: 360px;
    background-color: #c1c1c1;
    transition: all 0.3s;
}

.info-add-modal .account-btn:hover {
    background-color: var(--lightish-blue);
    color: #fff;
}

.info-add-modal .account-btn.active {
    background-color: var(--lightish-blue);
    color: #fff;
}

.info-add-modal .select-box {
    position: relative;
    border-radius: 28px;
    background-color: #fff;
    /* box-shadow: 0 3px 24px 0 rgba(80, 87, 255, 0.12); */
    margin-top: 12px;
}

.info-add-modal .select-box .btn_select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 12px 14px;
    z-index: 2;
    position: relative;
}

.info-add-modal .select-box .btn_select p {
    font-size: 14px;
    font-weight: 500;
    color: #424242;
    opacity: 0.4;
}

.info-add-modal .select-box .btn_select i {
    font-size: 14px;
    color: #424242;
    opacity: 0.4;
}

.info-add-modal .select-box .list_member {
    display: none;
    position: absolute;
    top: 40px;
    left: 0;
    padding: 8px 12px;
    background-color: #fff;
    width: 100%;
    border-radius: 6px;
    border: 2px solid var(--lightish-blue);
    box-shadow: 0 3px 24px 0 rgba(80, 87, 255, 0.12);
    z-index: 1;
}

.info-add-modal .select-box .list_member li {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
}

.info-add-modal .select-box .list_member li p {
    font-size: 14px;
    font-weight: 500;
    color: #424242;
}

.info-add-modal .select-box .list_member li:hover {
    background-color: #eff0fc;
    border-radius: 6px;
}

.info-add-modal .select-box .list_member li:hover p {
    color: #2c35fc;
    font-weight: bold;
}

.info-add-modal .select-box.open {
    box-shadow: 0 3px 24px 0 rgba(80, 87, 255, 0.12);
    border: 2px solid var(--lightish-blue);
    background-color: #fff;
    z-index: 4;
}

.info-add-modal .select-box.open .btn_select i {
    transform: rotate(0.5turn);
    color: var(--lightish-blue);
    margin-top: -8px;
}

.info-add-modal .select-box.open .list_member {
    display: block;
    background-color: #fff;
}

/* ------------- 회원가입완료 팝업  join-complete-modal  */
.popUp_box.join-complete-modal {
    max-width: 720px;
    padding: 64px auto 72px;
}

.join-complete-modal .title {
    font-size: 32px;
    font-weight: 600;
    color: #202020;
}

.join-complete-modal .title i {
    font-size: 32px;
    color: #202020;
}

.join-complete-modal .title-sub {
    font-size: 14px;
    color: #202020;
    opacity: 0.8;
    text-align: center;
    margin-top: 24px;
}

.join-complete-modal .home-btn {
    margin-top: 60px;
}

/* ------------- // 회원가입완료 팝업  join-complete-modal  */


/* ------------  */
@media screen and (max-width: 768px) {
    .popUp_box {
        width: 90%;
        padding: 40px 24px;
    }

    .popUp_box .popUp_btn_wrap * {
        width: 140px;
        height: 48px;
    }

    .popUp_box .popUp-sub {
        margin-bottom: 40px;
    }

    .popUp_box .popUp_title {
        margin-bottom: 8px;
    }

    .popUp_box.type1 .guide-msg {
        top: 15px;
    }

    .popUp_box.mail-verify-modal {
        padding: 22px 20px;
    }
}

@media screen and (max-height: 928px) {

    .info-add-modal .select-box .list_member li {
        padding: 6px 20px;
    }

}

@media screen and (max-height: 683px) {

    .info-add-modal .select-box .list_member li {
        padding: 3px 10px;
    }

}

/* // */


/* 체크박스 */
.checkbox-wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.checked-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.checked-item .check-icon {
    width: 20px;
    height: 20px;
    background-color: #a2a2a2;
    border-radius: 2px;
    display: flex;
    justify-content: center;
}

.checked-item .check-icon i {
    color: #fff;
    font-weight: bold;
    font-size: 18px;
}

.checked-item .check-title {
    font-size: 16px;
    color: #a2a2a2;
}

.form-checkbox:checked + .check-icon {
    background: var(--orange);
}

.form-checkbox:checked + .check-icon i {
    color: #fff;
    font-weight: bold;
}

.form-checkbox:checked ~ .check-title {
    color: var(--orange);
}

/* // */


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
           메인페이지
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 메인페이지 - 메인베너 */
section.main-banner {
    background-image: url(../images/main-banner.webp);
    width: 100%;
    background-size: 100% auto;
    background-position: center;
    background-repeat: no-repeat;
}

section.main-banner:after {
    content: '';
    display: block;
    padding: 16.8245%;
}

.main-banner {
    position: relative;
}

.main-banner .content-wrap {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.main-banner .content_title {
    font-size: 56px;
    font-weight: bold;
    line-height: 1.25;
    color: #fff;
}

.main-banner .content_sub {
    font-size: 21px;
    color: #fff;
    opacity: 0.8;
    margin-top: 30px;
}

.main-banner .free-start-btn {
    margin: 60px auto 0;
}

.main-banner .free-start-btn i {
    font-size: 16px;
    color: #202020;
    margin-left: 4px;
}

.main-banner .guide-txt {
    display: none;
    font-size: 15px;
    font-weight: 600;
    color: #ffcd57;
    margin-top: 30px;
}

.main-banner .guide-txt i {
    font-size: 15px;
    font-weight: 600;
    color: #ffcd57;
    margin-right: 5px;
}

.main-banner img {
    display: block;
}

@media screen and (max-width: 1280px) {

    .main-banner .content_title {
        font-size: 40px;
    }

    .main-banner .content_sub {
        font-size: 18px;
        margin-top: 20px;
    }

    .main-banner .free-start-btn {
        margin: 30px auto 0;
    }
}

@media screen and (max-width: 768px) {
    .banner-mid .content_title .pc {
        display: none;
    }

    section.main-banner {
        background-image: url(../images/main-banner-m.webp);
    }

    section.main-banner:after {
        padding: 25.105%;
    }

    .main-banner .free-start-btn {
        display: none;
    }

    .main-banner .content-wrap {
        top: unset;
        bottom: 30px;
        left: 35px;
        text-align: left;
        max-width: 304px;
        transform: unset;
    }

    .main-banner .content_title {
        font-size: 29px;
    }

    .main-banner .content_sub {
        font-size: 15px;
        margin-top: 19px;
        line-height: 1.43;
    }

    .main-banner .free-start-btn {
        margin: 30px auto 0;
    }

    .main-banner .guide-txt {
        display: block;
    }
}

@media screen and (max-width: 573px) {
    section.main-banner {
        min-height: 360px;
        background-size: cover;
    }

    section.main-banner:after {
        padding: unset;
    }

    .main-banner .content-wrap {
        bottom: 30px;
        left: 35px;
        text-align: left;
    }
}

section.banner-mid {
    background-color: #A7B8FF;
}

.banner-mid .inner-container {
    display: block;
    max-width: unset;
    width: 100%;
    padding: unset;
}

.banner-mid .content-wrap {
    display: block;
    position: relative;
    max-width: 1280px;
    padding: 32px 20px 30px 63px;
    background-image: url(../images/main-bg_1.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0 auto;
}

.banner-mid .content_title {
    font-size: 26px;
    font-weight: 600;
}

.banner-mid .content_title .pc {
    font-size: 26px;
    font-weight: bold;
}

.banner-mid .content_sub {
    font-size: 18px;
    font-family: 300;
    margin-top: 9px;
}

.banner-mid .info-btn {
    position: absolute;
    top: 16px;
    right: 0;
    width: 32px;
    height: 32px;
    background-color: #fff;
    border-radius: 50%;
    margin-right: 20px;
}

.banner-mid .info-btn i {
    transform: rotate(40deg);
    font-size: 22px;
    color: var(--lightish-blue);
}

@media screen and (max-width: 768px) {
    .banner-mid .content-wrap {
        background-image: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 20px;
    }

    .banner-mid .content_title {
        font-size: 18px;
        font-weight: bold;
    }

    .banner-mid .content_sub {
        font-size: 14px;
        margin-top: 5px;
    }

    .banner-mid .info-btn {
        width: 24px;
        height: 24px;
    }

    .banner-mid .info-btn i {
        font-size: 17px;
    }
}

@media screen and (max-width: 370px) {
    .main-banner .content-wrap {
        left: 17px;
    }
}

.price-intro .content-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 70px 0px 85px;
}

.price-intro .le-img-wrap {
    max-width: 584px;
}

.price-intro .top-wrap {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 80px;
}

.price-intro .top_title {
    font-size: 35px;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.02em; /* em은 상속 시 px로 굳어 큰 제목엔 비율 보정이 필요 — 전역 body값으론 부족 */
}

.price-intro .price-btn {
    width: 180px;
    height: 50px;
    border-radius: 25px;
}

.price-intro .price-btn .title {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.price-intro .price-btn i {
    font-size: 16px;
    margin-left: 4px;
    color: #fff;
}

.price-intro .mid-txt {
    font-size: 21px;
    font-weight: 300;
    color: #202020;
    margin-top: 24px;
}

.price-intro .btm-wrap {
    display: flex;
    justify-content: space-between;
    max-width: 520px;
    margin: 96px auto 0;
}

.price-intro .item-img-wrap {
    display: flex;
    justify-content: center;
    max-width: 72px;
    margin: 0 auto 12px;
}

.price-intro .item_title {
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 0.3px;
    text-align: center;
    color: #484848;
}

.price-intro .mid-item {
    position: relative;
}

.price-intro .mid-item::after {
    position: absolute;
    top: 30%;
    left: -68%;
    transform: translate(-50%, -50%);
    content: "";
    display: block;
    width: 130%;
    height: 2px;
    background-image: linear-gradient(to right, #cbccd5 33%,
    rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 6px 1px; /*점선 간격 수정*/
    background-repeat: repeat-x;
    color: #cbccd5;
}

.price-intro .mid-item::before {
    position: absolute;
    top: 30%;
    right: -68%;
    transform: translate(50%, -50%);
    content: "";
    display: block;
    width: 130%;
    height: 2px;
    background-image: linear-gradient(to right, #cbccd5 33%,
    rgba(255, 255, 255, 0) 0%);
    background-position: bottom;
    background-size: 6px 1px; /*점선 간격 수정*/
    background-repeat: repeat-x;
    color: #cbccd5;
}

@media screen and (max-width: 1230px) {
    .price-intro .top-wrap {
        min-width: 604px;
    }
}

@media screen and (max-width: 1171px) {
    .price-intro .btm-wrap {
        margin-top: 48px;
    }
}

@media screen and (max-width: 1280px) {
    section.price-intro {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    .price-intro .mb {
        display: block;
    }

    .price-intro .content-wrap {
        flex-direction: column;
        padding: unset;
        gap: 20px;
    }

    .price-intro .btm-wrap {
        display: none;
    }

    .price-intro .top-wrap {
        min-width: unset;
        display: flex;
        flex-direction: column;
        gap: 106px;
    }

    .price-intro .le-img-wrap {
        max-width: 300px;
    }

    .price-intro .top_title {
        text-align: center;
    }

    .price-intro .content_ri {
        position: relative;
    }

    .price-intro .mid-txt {
        position: absolute;
        width: 100%;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        margin-top: unset;
    }

    .price-intro .price-btn {
        margin-bottom: 10px;
    }

    .price-intro .top_title {
        font-size: 32px;
    }

    .price-intro .mid-txt {
        font-size: 20px;
    }

}

@media screen and (max-width: 768px) {
    .price-intro i.pc {
        display: none;
    }

    .price-intro .top_title {
        font-size: 25px;
    }

    .price-intro .mid-txt {
        font-size: 16px;
        line-height: 1.38;
        top: 50%;
        margin-top: 15px;
    }

    .price-intro .price-btn .title {
        font-size: 14px;
    }

    .price-intro .le-img-wrap {
        max-width: 242px;
    }

    .price-intro .top-wrap {
        gap: 96px;
    }

}


section.inquiry-intro {
    padding: 80px 0;
}

.inquiry-intro {
    text-align: center;
}

.inquiry-intro .inquiry-btn {
    width: 160px;
    height: 50px;
    border-radius: 25px;
    margin: 31px auto 0;
}

.inquiry-intro .inquiry-btn .title {
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}

.inquiry-intro .inquiry-btn i {
    font-size: 16px;
    color: #fff;
    margin-left: 4px;
}

.inquiry-intro .title {
    font-size: 36px;
    font-weight: 600;
}

.inquiry-intro .sub {
    font-size: 21px;
    font-weight: 300;
    margin-top: 16px;
}

.inquiry-intro .logo-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 978px;
    margin: 48px auto 0;
}

.inquiry-intro .logo-img-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.inquiry-intro .repo-img-wrap {
    padding-top: 17px;
}

.inquiry-intro .repo-img-wrap .icon-title {
    margin-top: 8px;
}

.inquiry-intro .img-wrap {
    max-width: 132px;
    transition: all .3s;
}

.inquiry-intro .img-wrap:hover {
    transform: scale(1.1);
}

.inquiry-intro .icon-title {
    font-size: 21px;
    font-weight: bold;
}


/* 제휴문의 팝업  inquiry-modal------------ */
.popUp_box.inquiry-modal {
    max-width: 560px;
    padding: 64px auto 80px;
}

.inquiry-modal .title {
    font-size: 22px;
    color: #202020;
    font-weight: bold;
    color: #202020;
}

.inquiry-modal .title-sub {
    font-size: 14px;
    color: #424242;
    line-height: 1.29;
    text-align: center;
    margin-top: 23px;
}

.inquiry-modal .modal-line {
    max-width: 100%;
    max-width: 464px;
    margin-bottom: 12px;
    padding: 12px 14px;
}

.inquiry-modal .modal-line.top {
    margin-top: 24px;
}

.popUp_box.type1 .modal-textarea {
    height: 120px;
}

.popUp_box.type1 .modal-textarea::placeholder {
    color: #202020;
    opacity: 0.4;
    font-size: 14px;
    font-weight: 500;
}

.inquiry-modal .send-inquriy-btn {
    width: 100%;
    height: 40px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
    border-radius: 6px;
    margin-top: 16px;
    background-color: var(--lightish-blue);
}

.popUp_box.type1 .chk-wrap {
    max-width: 464px;
}

.inquiry-modal .chk-wrap {
    font-size: 14px;
    color: #c1c1c1;
    font-weight: bold;
}

.inquiry-modal .chk-wrap .privacy-link {
    font-size: 14px;
    color: #424242;
    font-weight: bold;
    margin-right: 3px;
}

.inquiry-modal .chk-wrap .privacy-link a {
    font-size: 14px;
    color: #424242;
    font-weight: bold;
    text-decoration: underline;
}

.inquiry-modal .chk-wrap label {
    cursor: pointer;
    font-size: 14px;
    color: #c1c1c1;
    font-weight: bold;
}

/* //  ---------------------------------- */
@media screen and (max-width: 1280px) {
    .inquiry-intro .title > .mb {
        display: block;
    }

    .inquiry-intro .logo-wrap {
        flex-wrap: wrap;
        max-width: 768px;
    }

    .en .service-intro .top_title {
        font-size: 32px;
    }

    .inquiry-intro .title {
        font-size: 32px;
    }

    .inquiry-intro .sub {
        font-size: 20px;
    }

    .inquiry-intro .icon-title {
        font-size: 20px;
    }

    .service-intro .content-item .item-txt {
        font-size: 22px;
    }

}

@media screen and (max-width: 768px) {
    section.inquiry-intro {
        padding: 48px 0;
    }

    .inquiry-intro .title {
        font-size: 25px;
    }

    .inquiry-intro .sub {
        font-size: 16px;
        margin-top: 15px;
    }

    .inquiry-intro .logo-wrap {
        justify-content: center;
        max-width: 573px;
        gap: 16px 0;
        margin-top: 24px;
    }

    .inquiry-intro .logo-wrap .logo-img-wrap {
        width: 50%;
    }

    .inquiry-intro .icon-title {
        font-size: 14px;
    }

    .inquiry-intro .img-wrap {
        max-width: 80px;
    }

    .inquiry-intro .logo-wrap .logo-img-wrap img {
        max-width: 88px;
    }

    .inquiry-intro .logo-wrap .logo-img-wrap:nth-child(3) img {
        max-width: 65px;
    }

    .inquiry-intro .inquiry-btn i {
        display: none;
    }

    .inquiry-intro .inquiry-btn {
        width: 130px;
        height: 40px;
        border-radius: 20px;
    }


    .inquiry-intro .inquiry-btn i {
        display: none;
    }
}


@media screen and (max-width: 640px) {
    .inquiry-intro .icon-title {
        font-size: 16px;
    }
}

@media screen and (max-width: 573px) {

    .inquiry-intro .img-wrap {
        max-width: unset;
    }

    .inquiry-intro .repo-img-wrap {
        padding-top: 16px;
    }

}

section.service-intro {
    padding: 80px 0;
    padding-top: 60px;
}

section.service-intro .container {
    padding-left: 40px;
}

.service-intro .content-wrap {
    display: flex;
    justify-content: space-between;
}

.service-intro .content_le {
    display: flex;
    align-items: center;
    width: calc(100% - 777px);
    min-width: 453px;
}

.service-intro .top_title {
    font-size: 36px;
    font-weight: 600;
    line-height: 1.4;
    color: #202020;
    letter-spacing: -0.02em; /* em은 상속 시 px로 굳어 큰 제목엔 비율 보정이 필요 — 전역 body값으론 부족 */
}

.en .service-intro .top_title {
    font-size: 34px;
}

.service-intro .content-list {
    margin-top: 64px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.service-intro .content-item {
    display: flex;
    align-items: center;
    position: relative;
    top: -23px;
}

.service-intro .content-item img {
    max-width: 48px;
}

.service-intro .content-item .item-txt {
    font-size: 24px;
    font-weight: 500;
    color: #202020;
    margin-left: 24px;
}

.service-intro .ri-img-wrap {
    max-width: 700px;
    margin-bottom: -30px;
    margin-right: -30px;
}

.service-intro .que-btn {
    border-radius: 25px;
    max-width: 380px;
    margin-top: 1vh;
    height: 50px;
}

.service-intro .que-btn .title {
    font-size: 19px;
    font-weight: 600;
    color: #fff;
}

.service-intro .que-btn i {
    font-size: 16px;
    margin-left: 4px;
    color: #fff;
}

.service-intro .que-btn.mobile {
    display: none;
}

@media screen and (max-width: 1280px) {

    .service-intro .que-btn {
        margin-top: unset;
    }
}

@media screen and (max-width: 1000px) {
    section.service-intro {
        padding: 48px 0 56px;
        padding-top: 38px;
    }

    .service-intro .content-wrap {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: unset;
    }

    .service-intro .content_le {
        order: 2;
        width: 100%;
        display: flex;
        justify-content: center;
        min-width: unset;
        margin-top: 28px;
    }

    .service-intro .content-list {
        gap: 20px;
        margin-top: 48px;
    }

    .service-intro .ri-img-wrap {
        margin: unset;
        max-width: 573px;
    }

    section.service-intro .container {
        padding-left: 20px;
    }

    .service-intro .que-btn {
        margin-left: unset;
        margin-top: unset;
    }

    .service-intro .content-item img {
        max-width: 46px;
    }
}

@media screen and (max-width: 768px) {

    section.service-intro {
        padding-bottom: 48px;
    }

    .service-intro .content-list {
        margin-top: 24px;
    }

    .service-intro .que-btn.pc {
        display: none;
    }

    .service-intro .que-btn.mobile {
        display: flex !important;
    }

    .service-intro .ri-img-wrap {
        max-width: 419px;
    }

    .service-intro .top_title {
        font-size: 24px;
        line-height: 1.5;
    }

    .en .service-intro .top_title {
        font-size: 25px;
    }

    .service-intro .content-item {
        top: auto;
    }

    .service-intro .content-item img {
        max-width: 24px;
        position: relative;
        top: 1px;
    }

    .service-intro .content-item .item-txt {
        font-size: 17px;
        margin-left: 10px;
    }

    .service-intro .ri-img-wrap {
        max-width: 419px;
    }

    .service-intro .que-btn {
        margin-top: 12px;
        height: 40px;
    }

    .service-intro .que-btn .title {
        font-size: 15px;
    }

    .service-intro .que-btn i {
        display: none;
    }


}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
           서브페이지
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/* 서브페이지 컴포넌트  */
.subpage {
    background-image: linear-gradient(131deg, #fbfcff 5%, #eeeffc 94%);
}

/* -------------------- 페이지 타이틀  page-title */
section.page-title {
    padding-top: 40px;
}

section.page-title .title {
    position: relative;
    font-size: 44px;
    font-weight: bold;
    color: var(--lightish-blue);
}

section.page-title .title::after {
    position: relative;
    content: "";
    display: block;
    width: 96px;
    height: 4px;
    background-color: var(--lightish-blue);
    bottom: -5px;
}

section.page-title .sub {
    margin-top: 20px;
    font-size: 20px;
    font-weight: normal;
    color: #303030;
}

@media screen and (max-width: 1080px) {
    section.page-title {
        max-width: 768px;
        margin: 0 auto;
        padding-top: 48px;
    }
}

/* 페이지별 타이틀 padding-top: header높이+title패딩  .. margin-top: header높이 */
.subpage.practicePage section.page-title {
    padding-top: 120px;
    margin-top: -80px;
}

.subpage.shoppingCartPage section.page-title {
    padding-top: 120px;
    margin-top: -80px;
}

.subpage.shoppingCartPage .btn-other {
    display: block; width:100%; max-width:354px; margin:0 auto;
    padding:8px 16px; margin-top:12px;
    border:1px solid var(--lightish-blue); color:var(--lightish-blue); border-radius:10px;
    background-color:#fff;
}

.subpage.questionBankPage section.page-title {
    padding-top: 120px;
    margin-top: -80px;
}

@media screen and (max-width: 900px) {
    .subpage.shoppingCartPage .btn-other {
        max-width:90%; margin:0 auto; margin-top:16px;
    }

}


@media screen and (max-width: 768px) {
    .subpage.practicePage section.page-title {
        padding-top: 96px;
        margin-top: -56px;
    }

    .subpage.shoppingCartPage section.page-title {
        padding-top: 96px;
        margin-top: -56px;
    }

    .subpage.questionBankPage section.page-title {
        padding-top: 96px;
        margin-top: -56px;
    }

}

/* // */


/* -------------------- 아이템 스티커 */
.state-sticker {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #fff;
    border-radius: 10px;
    height: 21px;
    line-height: 2;
}

.free-sticker {
    max-width: 48px;
    background-color: #37aa64;
}

.difficult-sticker {
    background-color: #7899df;
}

.locked-sticker {
    max-width: 68px;
    background-color: #707070;
}

.available-sticker {
    max-width: 77px;
    background-color: #4a51e9;
}

.skill-sticker {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    color: #fff;
    border-radius: 10px;
    max-width: 180px;
    height: 20px;
    line-height: 2;
}

.skill-sticker .skill-img {
    position: absolute;
    left: -15px;
    display: flex;
    width: 32px;
    height: 32px;
    background-color: #fff;
    border-radius: 50%;
    border: 2px solid #e8ecff;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 32px;
}

.skill-free {
    background-color: #e8ecff;;
    color: #202020;
}

.skill-free .skill-img {
    background-image: url('../images/lock-black.png') !important;
}

.skill-free .skill-txt {
    color: #202020;
}

.skill-0 {
    background-color: #e8ecff;;
    color: #202020;
}

.skill-0 .skill-img {
    background-image: url('../images/unlock-blue.png');
}

.skill-txt {
    margin-left: 9px;
    color: #202020;
}

.skill-50 {
    background-color: #7899df;
    color: #fff;
}

.skill-50 .skill-img {
    border: 2px solid #7899df;
    background-image: url('../images/unlock-blue.png');
}

.skill-50 .skill-txt {
    color: #fff;
}


.skill-100 {
    background-color: #3e44d2;
}

.skill-100 .skill-img {
    border: 2px solid #3e44d2;
    background-image: url('../images/trophy.png');
}

.skill-100 .skill-txt {
    color: #fff;
}

.continue-sticker {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 56px;
    height: 20px;
    background-color: var(--lightish-blue);
    color: #fff;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
}

@media screen and (max-width: 768px) {
    .free-sticker {
        max-width: 44px;
        font-size: 12px;
    }
}

/* -------------------- 버튼 */
.btn-bg-blue {
    background-color: var(--blue);
}

.btn-green {
    background-color: #37aa64;
}
.btn-green:hover {
    background-color: #37aa64 !important;
}

.btn-bg-lightBlue {
    background-color: var(--lightish-blue);
}
.btn-bg-lightBlue:hover {
    background-color: var(--lightish-blue) !important;
}
.btn-line-lightBlue {
    background-color: #fff;
    border: 2px solid var(--lightish-blue) !important;
}
.btn-line-blue {
    background-color: #fff;
    border: 2px solid var(--blue);
}

.btn-line-red {
    background-color: #fff;
    border: 1px solid #d50f00;
}

.btn-line-black {
    border: 2px solid #202020;
}

.btn-default {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
}

.restart-btn {
    width: 112px;
    height: 48px;
    border-radius: 8px;
    border: 2px solid var(--lightish-blue);
    color: var(--lightish-blue);
    background-color: #fff;
    font-size: 18px;
    font-weight: 600;
}


.continue-btn {
    color: #fff;
    background-color: var(--blue);
}

.first-start-btn {
    color: #fff;
    background-color: var(--blue);
}

.purchase-btn {
    color: #fff;
    background-color: #424242;
}

.add-cart-btn {
    width: 180px;
    border-radius: 8px;
    padding: 12px 0;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    margin: 24px auto 0;
}

.checkout-btn {
    width: 100%;
    max-width: 354px;
    border-radius: 16px;
    padding: 18px 0 17px;
    font-size: 24px;
    font-weight: 600;
    color: #fff;
    margin: 0 auto;
}

.checkout-btn i {
    font-size: 24px;
    color: #fff;
    margin-left: 8px;
    margin-top: 2px;
}

.package-start-btn {
    width: 100%;
    max-width: 272px;
    height: 51px;
    border-radius: 8px;
    border: 2px solid #e4e4e4;
    background-color: var(--blue);
    color: #fff;
    font-size: 20px;
    font-weight: bold;
}

.logout-btn {
    width: 110px;
    height: 37px;
    background-color: #f5f5f8;
    border-radius: 20px;
}

.logout-btn i {
    margin-right: 4px;
    font-size: 20px;
}

.solve-btn {
    width: 162px;
    height: 48px;
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.result-btn {
    width: 240px;
    height: 48px;
    border-radius: 8px;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
}


.continue-btn {
    width: 112px;
    height: 48px;
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.solution-btn {
    width: 120px;
    height: 32px;
    border-radius: 16px;
    background-color: #424242;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.32px;
}

.input-btn {
    width: 128px;
    height: 48px;
    border-radius: 6px;
    color: #fff;
    font-size: 18px;
    font-weight: 500;
}

.disconnect-btn {
    background-color: #424242;
}

.save-btn {
    width: 240px;
    height: 56px;
    border-radius: 6px;
    /* background-color: #2c35fc; */
    background-color: var(--lightish-blue);
    color: #fff;
    font-size: 22px;
    font-weight: 500;
}

.delect-btn {
    width: 160px;
    height: 48px;
    border-radius: 6px;
    background-color: #fff;
    color: #d50f00;
    font-size: 18px;
    font-weight: 500;
}

.state-btn {
    display: flex;
    align-items: center;
    width: 120px;
    height: 48px;
    border-radius: 24px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}

.resume-btn {
    width: 200px;
    height: 56px;
    border-radius: 28px;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
}

.undo-btn {
    height: 24px;
    padding: 2px 8.1px 2px 8px;
    background-color: #fff;
    border-radius: 12px;
}

.reviewPage-btn {
    width: 185px;
    height: 40px;
    border-radius: 20px;
    color: var(--lightish-blue);
    font-size: 16px;
    font-weight: bold;
}

.popup-sendReport-btn {
    width: 100%;
    height: 40px;
    border-radius: 6px;
    color: #fff;
    font-size: 16px;
    background-color: #2c35fc;
}

.popup-close-btn {
    width: 120px;
    height: 48px;
    border-radius: 24px;
    color: #202020;
    font-size: 18px;
    font-weight: bold;
}

.free-start-btn {
    width: 240px;
    height: 56px;
    border-radius: 28px;
    background-color: #fff;
    color: #202020;
    font-size: 20px;
    font-weight: 700;
}

.en .free-start-btn {
    font-size: 20px;
    font-weight: 700;
}

.verify-btn {
    width: 240px;
    height: 64px;
    border-radius: 8px;
    background-color: #fff;
    color: #2c35fc;
    font-size: 26px;
}

.home-btn {
    width: 100%;
    max-width: 360px;
    height: 40px;
    border-radius: 6px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.step-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 400px;
    height: 51px;
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}

.delect-account-btn {
    width: 100%;
    height: 40px;
    border-radius: 6px;
    background-color: #2c35fc;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

.cancle-btn {
    width: 100%;
    height: 40px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    color: #707070;
    background-color: #fff;
    border: 1px solid #707070;
}

.solution-move-btn {
    padding: 10px 31px 9px 24px;
    border-radius: 20px;
    background-color: var(--lightish-blue);
}

.view-score-btn {
    width: 100%;
    max-width: 214px;
    height: 48px;
    border-radius: 24px;
    box-shadow: 0 3px 6px 0 rgba(80, 87, 255, 0.16);
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}

.step-start-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 400px;
    height: 51px;
    border-radius: 8px;
    color: #fff;
    font-size: 18px;
    font-weight: bold;
}

@media screen and (max-width: 1080px) {
    .package-start-btn {
        max-width: unset;
        background-color: var(--lightish-blue);
        color: #fff;
        border: unset;
        font-size: 18px;
        height: 44px;
    }

    .solve-btn {
        width: 106px;
        height: 36px;
        font-size: 14px;
    }

    .save-btn {
        width: 100%;
        height: 50px;
        font-size: 20px;
    }
}

@media screen and (max-width: 900px) {
    .checkout-btn {
        max-width: 90%;
    }
}

@media screen and (max-width: 768px) {
    .price-intro .price-btn {
        width: 130px;
        height: 40px;
        border-radius: 20px;
        margin-bottom: unset;
    }

    .add-cart-btn {
        width: 130px;
        padding: 10px 0;
        font-size: 15px;
    }

    .state-btn {
        height: 40px;
    }

    .verify-btn {
        width: 180px;
        height: 50px;
        font-size: 20px;
    }
}


/* -------------------- input */
.input-default {
    font-size: 18px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid #e4e4e4;
    padding: 13.5px 24px;
}

.input-readonly {
    border: 1px solid #e4e4e4;
    background-color: #f5f5f5;
}


/* -------------------- interval */
.interval-12 {
    margin-bottom: 12px;
}

.interval-32 {
    margin-bottom: 32px;
}

/* // 서브페이지 컴포넌트 */


/* practice test
        =====================================  */
section.page-updated .updated-box {
    margin-top: 58px;
    margin-bottom: 32px;
    width: 100%;
    max-width: 1256px;
    background-color: #fff;
    padding: 12px 24px 16px;
    border-radius: 16px;
    /* 공지(comment)는 클라이언트에서 비동기 로드됨 → 텍스트가 채워지며 박스가 커지는
       CLS 방지를 위해 로드 전 공간을 미리 확보 (현재 공지 기준 데스크탑 약 2줄). */
    min-height: 108px;
}

section.page-updated .updated-box .title {
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 12px;
}

section.page-updated .updated-box .sub {
    font-size: 15px;
    font-weight: 500;
    opacity: 0.7;
}

section.list-section {
    padding-bottom: 152px;
}

section.list-section .btn-default {
    width: 120px;
    height: 48px;
    border-radius: 8px;
    font-size: 17px;
    font-weight: 600;
}

section.list-section .btn-default:hover {
    background-color: #3e44d2;
    color: #fff;
}

.practicePage section.list-section .restart-btn {
    border-color: var(--blue);
    color: var(--blue);
}

.practicePage section.list-section .restart-btn:hover {
    background-color: var(--blue) !important;
}

.practicePage section.list-section .continue-btn {
    background-color: var(--blue);
}

/* ------------- 아이템 컴포넌트 */
.test-list {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 32px;
}

.test-list .list-item {
    width: calc((100% - (32px * 1)) / 2);
}

.test-list .list-item .item-wrap {
    width: 100%;
    padding: 20px 30px 24px;
    position: relative;
    background-color: #f5f5f8;
    border: 1px solid #e4e4e4;
    border-radius: 16px;
}

.test-list .list-item .item-wrap.item-free-active {
    background-color: #fff;
    box-shadow: 0 3px 24px 0 rgba(80, 87, 255, 0.12);
    border: unset;
}

.test-list .list-item .item-active {
    background-color: #fff;
    box-shadow: 0 3px 24px 0 rgba(80, 87, 255, 0.12);
    border: unset;
}

.test-list .list-item .item-title {
    font-size: 24px;
    font-weight: 600;
    letter-spacing: 0.52px;
}

.test-list .list-item .states {
    display: flex;
    gap: 8px;
}

.test-list .list-item .state-sticker {
    margin-top: 10px;
    padding: 0px 12px;
}

.test-list .list-item .item-btm-wrap {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-top: 12px;
}

.test-list .list-item .item-info {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.28px;
    color: #424242;
    padding-right: 8px;
}

.test-list .list-item .item-btn-wrap {
    display: flex;
    gap: 16px;
}

.test-list .list-item .item-btn-wrap button:hover {

    color: #fff;
}

.test-list .list-item .item-locked {
    position: relative;
}

.test-list .list-item .item-locked .item-btm-wrap {
    justify-content: flex-end;
}

.test-list .list-item .update-info {
    position: absolute;
    top: 16px;
    right: 32px;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 4px;
}

.test-list .list-item .update-info i, .update-content {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.32px;
    color: #2c35fc;
}

.test-list .list-item .item-wrap .mb-type {
    display: none;
    width: 100%;
    height: 38px;
    border-radius: 10px;
    background-color: rgba(80, 87, 255, 0.12);
    justify-content: center;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--lightish-blue);
    margin-top: 10px;
}

/* 시작전 팝업 startModal ============== */
.popUp_box.startModal {
    max-width: 512px;
    padding: 50px 40px 30px;
    box-shadow: 0 3px 36px 0 rgba(0, 0, 0, 0.16);
    align-items: start;
}

.popUp_box.startModal .section {
    display: flex;
    margin-bottom: 30px;
}

.popUp_box.startModal .section:last-child {
    margin-bottom: 0;
}

.popUp_box.startModal .section .section-left {
    flex: 0 0 auto;
    margin-right: 20px;
}

.popUp_box.startModal .section .section-left .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    position: relative;
    top: -5px;
    background-color: #5057ff;
    border-radius: 100%;
}

.popUp_box.startModal .section .section-left .icon i {
    font-size: 20px;
    color: #fff;
}

.popUp_box.startModal .section-right .title {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: bold;
}

.popUp_box.startModal .section-right .body {
    font-size: 15px;
    font-weight: 300;
    line-height: 1.67;
    word-break: keep-all;
}

.popUp_box.startModal .section-right .body .point {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.67;
}

.startModal .startModal-title {
    font-size: 22px;
    font-weight: bold;
    color: #202020;
    margin-bottom: 16px;
}

.startModal .startModal-sub {
    font-size: 15px;
    font-weight: 300;
    color: #202020;
    line-height: 1.67;
}

.startModal .startModal-title:not(:first-child) {
    margin-top: 46px;
}

.startModal .startModal-msg {
    margin: 0 auto;
    margin-top: 24px;
    font-size: 18px;
    font-weight: bold;
    color: #202020;

}

.startModal .step-start-btn {
    margin-top: 30px;
}

.startModal .box-timer {
    display: flex; align-items: center; justify-content: center; gap:8px;
    width:100%;
    margin-top:8px;
}
.startModal .box-timer .box-select {
    position:relative;
}
.startModal .box-timer .box-select .name {
    min-width:72px;
}
.startModal .box-timer .box-select .name .icon {
    font-size:12px;
}
.startModal .box-timer .box-select .options {
    width:100px;
    padding:8px;
    position: absolute; top:calc(100% + 12px);
    background-color:#fff;
    border:1px solid #888;
    border-radius:10px;
}
.startModal .box-timer .box-select .options .option {
    width:100%;
    padding:2px; padding-top:4px; margin-top:8px;
    font-size:14px;
    color:#999; border:1px solid #999; border-radius:5px;
    transition:all .3s;
}
.startModal .box-timer .box-select .options .option.active {
    border-color:var(--lightish-blue);
    color:var(--lightish-blue);
}
.startModal .box-timer .box-select .options .option:first-of-type {
    margin-top:0;
}

@media screen and (max-width: 768px) {
    .popUp_box.startModal {
        padding: 40px 20px;
    }

    .popUp_box.startModal .section-right .title {
        font-size: 16px;
    }

    .popUp_box.startModal .section-right .body {
        font-size: 14px;
        line-height: 18px;
    }
}

/* // 시작전 팝업 startModal ============ */


@media screen and (max-width: 978px) {
    .test-list .list-item .item-btn-wrap {
        gap: 8px;
    }

    .test-list .list-item .item-wrap {
        padding: 20px;
        padding-top: 33px;
    }
}

@media screen and (max-width: 918px) {
    section.list-section .btn-default {
        width: 94px;
        height: 42px;
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {
    .question-list .list-item .item-btm-wrap {
        display: none !important;
    }

    section.page-title {
        padding-top: 40px;
        max-width: 573px;
    }

    section.page-title .title {
        font-size: 26px;
        line-height: 1.35;
    }

    section.page-title .title::after {
        width: 60px;
    }

    section.page-title .sub {
        font-size: 14px;
        margin-top: 10px
    }

    section.page-updated .updated-box {
        margin-top: 25px;
        max-width: 573px;
        margin: 25px auto;
        box-shadow: 0 3px 12px 0 rgba(47, 65, 103, 0.12);
        /* 좁은 폭에서 공지가 더 여러 줄로 감김 → 모바일 기준으로 더 확보 */
        min-height: 132px;
    }

    section.page-updated .updated-box .title {
        margin-bottom: 10px;
    }

    section.page-updated .updated-box .sub {
        font-size: 12px;
        line-height: 1.33;
    }

    section.list-section {
        padding-bottom: 80px;
    }

    section.list-section .btn-default {
        width: 100%;
    }

    .test-list .list-item .item-wrap .pc-type {
        display: none;
    }

    .test-list .list-item .item-wrap .mb-type {
        display: flex;
    }

    .test-list .list-item .item-btm-wrap {
        display: flex;
        flex-direction: column;
        align-items: unset;
        margin-top: 20px;
    }

    .test-list .list-item .update-info {
        position: unset;
        justify-content: start;
        margin-bottom: 10px;
    }

    .test-list .list-item .item-wrap {
        padding-top: 20px;
    }

    .test-list .list-item .item-info {
        padding-right: unset;
    }

    .test-list {
        gap: 30px;
    }

    .test-list .list-item {
        width: 100%;
        max-width: 573px;
        margin: 0 auto;
    }

    .test-list .list-item .item-title {
        font-size: 20px;
        letter-spacing: 0.36px;
    }

    .test-list .list-item .state-sticker {
        margin-top: 5px;
    }

    .test-list .list-item .update-info i, .update-content {
        font-size: 12px;
    }
}

/* // practice test
        ==================================  */


/* Question Bank
        =====================================  */

section.list-section .list-title {
    font-size: 32px;
    font-weight: bold;
    color: #202020;
}

section.list-section .list-title.btm {
    margin-top: 88px;
    margin-bottom: 32px;
}

.question-list .list-item {
    width: calc((100% - (32px * 2)) / 3);
}

.question-list .list-item .item-btm-wrap {
    justify-content: start;
}

.question-list .skill-sticker {
    margin-top: 16px;
    margin-left: 16px;
}

section.list-section .question-list .list-item .item-btn-wrap {
    width: 100%;
    gap: 12px;
    justify-content: end;
}

section.list-section .question-list .restart-btn {
    width: 104px;
    height: 42px;
    border-color: var(--blue) !important;
    color: var(--blue) !important;
}

section.list-section .question-list .restart-btn:hover {
    background-color: var(--blue) !important;
    color: #fff !important;
}

section.list-section .question-list .continue-btn {
    width: 104px;
    height: 42px;
    background-color: var(--blue) !important;
}

section.list-section .question-list .first-start-btn {
    width: 104px;
    height: 42px
}

section.list-section .question-list .list-item .item-wrap {
    padding: 28px 24px 12px;
    min-height: 165px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

section.list-section .question-list .list-item {
    min-height: 165px;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 3px 24px 0 rgba(80, 87, 255, 0.12);

}

section.list-section .question-list .list-item .item-title {
    font-size: 22px;
    line-height: 1.15;
    margin-bottom: 4px;
}

/* 아이템 높이값 */
section.list-section .question-list .list-item .item-top {
    height: calc((22px * 1.15 * 2) + 36px);
}

/* 로딩 중 공간 예약용 스켈레톤 카드 (CLS 방지). API 응답 전 빈 리스트로 표시됨.
   question-list(고정 높이)·test-list(가변 높이) 공통. 내부 구조는 visibility:hidden 으로
   레이아웃 박스(높이)만 유지하고, 중앙에 스피너를 띄움 → 실제 카드와 높이가 맞아
   데이터 도착 시 shift 없음. */
.test-list .list-item .item-wrap.item-skeleton {
    box-shadow: none;
    background-color: #f5f6fa;
}

/* 높이 확보용 내부 요소는 숨김(스피너만 보임) */
.test-list .list-item .item-wrap.item-skeleton > :not(.card-spinner) {
    visibility: hidden;
}

/* 중앙 스피너: transform: rotate 만 사용 → GPU 컴포지팅, 메인 스레드/TBT 부담 없음 */
.test-list .list-item .item-wrap.item-skeleton .card-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 32px;
    height: 32px;
    margin: -16px 0 0 -16px;
    border: 3px solid #e4e4e4;
    border-top-color: var(--blue);
    border-radius: 50%;
    animation: card-spin 0.8s linear infinite;
}

@keyframes card-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .test-list .list-item .item-wrap.item-skeleton .card-spinner {
        animation: none;
    }
}

/* 상태 확정 전(클라 filter() 완료 전) 컨트롤 자리 표시용 shimmer 로딩 인디케이터.
   제목(LCP 요소)은 실제로 렌더되고, 스티커/버튼 자리만 부드러운 shimmer 로 표시한다.
   .state-sticker / .btn-default 클래스를 재사용 → 실제 컨트롤과 동일 높이 → 전환 시 CLS 0. */
.test-list .list-item .ph-pill,
.test-list .list-item .ph-bar {
    position: relative;
    overflow: hidden;
    border: none !important;
    color: transparent !important;
    background-color: #e9ecf2 !important;
    pointer-events: none;
}

.test-list .list-item .ph-pill {
    width: 72px;
}

/* 좌→우로 한 번씩 쓸고 지나가는 하이라이트. transform 만 애니메이트 → GPU 컴포지팅(메인스레드/TBT 부담 없음). */
.test-list .list-item .ph-pill::after,
.test-list .list-item .ph-bar::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
    animation: ph-shimmer 1.25s ease-in-out infinite;
}

@keyframes ph-shimmer {
    100% { transform: translateX(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .test-list .list-item .ph-pill::after,
    .test-list .list-item .ph-bar::after {
        animation: none;
    }
}

/* categories(question-list) 카드용 placeholder 치수: 진행도 스티커/버튼 자리에 맞춤(CLS 0). */
.test-list.question-list .skill-sticker.ph-pill {
    width: 140px;
}

.test-list.question-list .ph-bar {
    width: 104px;
    height: 42px;
}

/* question-list 상단 Lock/Unlock 배너의 상태확정 전 placeholder.
   실제 문구를 그대로 두되 글자를 transparent 로 가려 폭/높이를 동일하게 유지(CLS 0) + shimmer 표시. */
.list-title-wrap .lock-guide .ph-text {
    position: relative;
    overflow: hidden;
    color: transparent !important;
    background-color: #e9ecf2;
    border-radius: 6px;
}

.list-title-wrap .lock-guide .ph-text::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent 0, rgba(255, 255, 255, 0.65) 50%, transparent 100%);
    animation: ph-shimmer 1.25s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .list-title-wrap .lock-guide .ph-text::after {
        animation: none;
    }
}

.list-title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 72px;
    margin-bottom: 32px;
}

.list-title-wrap .lock-guide img {
    width: 32px;
    /* img 의 width/height 속성(lock-black 64×64, CLS용)이 있어도
       CSS 로 폭만 줄이면 32×64 로 늘어나므로 비율 유지 */
    height: auto;
}

.list-title-wrap .lock-guide .guide-txt {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.28px;
    color: #101010;
}

.list-title-wrap .lock-guide {
    display: flex;
    align-items: center;
    border-radius: 16px;
    background-color: #fff;
    width: 100%;
    max-width: fit-content; /* 고정 420px → 텍스트 폭에 맞춤 (Inter 폭 증가로 잘리던 문제 해결) */
    padding: 0 16px 0 12px;
}

.list-title-wrap .unlock-guide {
    max-width: fit-content; /* 고정 232px → 텍스트 폭에 맞춤 (폰트 폭 증가로 두 줄 되던 문제 해결) */
}

.list-title-wrap .unlock-guide .guide-txt {
    color: var(--lightish-blue);
}

@media screen and (max-width: 1140px) {
    .question-list .list-item {
        width: calc((100% - (32px * 1)) / 2);
    }

    section.list-section .question-list .list-item .item-wrap {
        min-height: 175px;
    }

}

@media screen and (max-width: 768px) {

    .question-list .list-item {
        width: 100%;
    }

    .list-title-wrap {
        flex-direction: column;
        align-items: start;
        max-width: 573px;
        margin: 25px auto 20px;
    }

    .list-title-wrap .list-title {
        order: 2;
        margin-top: 35px;
    }

    .list-title-wrap .lock-guide {
        order: 1;
        max-width: unset;
        box-shadow: 0 3px 12px 0 rgba(47, 65, 103, 0.12);
        padding: 8px 12px;
    }

    .list-title-wrap .lock-guide .guide-txt {
        letter-spacing: 0.24px;
        line-height: 1;
        font-size: 14px;
    }

    section.list-section .list-title {
        font-size: 18px;
        letter-spacing: 0.36px;
    }

    section.list-section .list-title.btm {
        margin-top: 40px;
        margin-bottom: 20px;
    }

    .question-list .list-item .item-btm-wrap {
        margin-top: 33px;
    }

    .list-title-wrap .lock-guide img {
        width: 28px;
    }

    section.list-section .question-list .list-item .item-wrap {
        min-height: unset;
        padding: 24px;
    }

    section.list-section .question-list .list-item {
        min-height: unset;
    }

    section.list-section .question-list .restart-btn {
        width: 100%;
    }

    section.list-section .question-list .continue-btn {
        width: 100%;
    }

    section.list-section .question-list .first-start-btn {
        width: 100%;
    }

    section.list-section .question-list .list-item .item-title {
        font-size: 20px;
    }

    section.list-section .question-list .list-item .item-top {
        height: unset;
    }
}

/* // Question Bank
        ==================================  */


/* Shopping Cart
         =====================================  */
section.cart {
    padding-bottom: 140px;
}

.cart .box-wrap {
    width: 100%;
    display: flex;
    gap: 40px;
    margin-top: 72px;
}

.cart .le-box {
    width: calc(100% - 24px - 376px);
}

.cart .ri-box {
    width: calc(100% - 24px - 840px);
    min-width: 335px;
}

.cart .le-box .inner-wrap {
    padding: 32px 40px 40px;
    background-color: #f5f5f8;
    border: 4px solid #fff;
    border-radius: 16px;
    box-shadow: 0 3px 24px 0 rgba(80, 87, 255, 0.16);
}

.cart .box-wrap .box-title {
    font-size: 32px;
    font-weight: 600;
    letter-spacing: 0.64px;
    color: #202020;
    margin-bottom: 24px;
}

.cart .inner-title {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.52px;
    color: #202020;
    margin-bottom: 26px;
}

.cart .choose-num {
    display: inline-block;
    margin: 0 5px;
    color: var(--lightish-blue);
    font-weight: bold;
}

.cart .choose-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.cart .choose-list .chk-box {
    width: calc((100% - (16px * 1)) / 2);
}

.cart .choose-list .chk-test-box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
    height: 84px;
    background-color: #fff;
    font-size: 20px;
    font-weight: 500;
    color: #424242;
    cursor: pointer;
}

.cart .choose-list .chk-test-title {
    font-size: 20px;
    font-weight: 600;
    color: #424242;
}

.cart .choose-list .chk-test-icon {
    display: none;
    font-size: 22px;
    color: #2c35fc;
    margin-right: 8px;
}

.cart .choose-list input {
    display: none;
}

.cart .choose-list input:checked ~ label {
    border: 3px solid var(--lightish-blue);
    box-shadow: 0 3px 24px 0 rgba(80, 87, 255, 0.08);
}

.cart .choose-list input:checked ~ label .chk-test-title {
    font-size: 20px;
    font-weight: bold;
    color: #2c35fc;
}

.cart .choose-list input:checked ~ label .chk-test-icon {
    display: block;
}

.cart .choose-list .state-disabled {
    display: flex;
    flex-direction: column;
    background-color: #e4e4e4;
    cursor: unset;
}

.cart .choose-list .state-disabled .chk-test-title {
    font-weight: 500;
    color: #707070;
}

.cart .choose-list .chk-test-info {
    font-size: 12px;
    font-weight: 300;
    color: #707070;
}

.cart .ri-box .select-box {
    position: relative;
    border-radius: 28px;
    background-color: #fff;
    box-shadow: 0 3px 24px 0 rgba(80, 87, 255, 0.12);
    height: 56px;
}

.cart .ri-box .select-box .btn_select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 18px 32px;
    z-index: 2;
    position: relative;
}

.cart .ri-box .select-box .btn_select p {
    font-size: 18px;
    font-weight: 500;
    color: #424242;
}

.cart .ri-box .select-box .btn_select i {
    font-size: 21px;
    color: #202020;
}

.cart .ri-box .select-box .list_member {
    display: none;
    position: absolute;
    top: 58px;
    left: 0;
    padding: 12px;
    background-color: #fff;
    width: 100%;
    border-radius: 32px;
    border: 2px solid var(--lightish-blue);
    box-shadow: 0 3px 24px 0 rgba(80, 87, 255, 0.12);
    z-index: 1;
}

.cart .ri-box .select-box .list_member li {
    display: flex;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
}

.cart .ri-box .select-box .list_member li p {
    font-size: 18px;
    font-weight: 500;
    color: #424242;
}

.cart .ri-box .select-box .list_member li:hover {
    background-color: #eff0fc;
    border-radius: 26.5px;
}

.cart .ri-box .select-box .list_member li:hover p {
    color: #2c35fc;
    font-weight: bold;
}

.cart .ri-box .select-box.open {
    box-shadow: 0 3px 24px 0 rgba(80, 87, 255, 0.12);
    border: 2px solid var(--lightish-blue);
    background-color: #fff;
}

.cart .ri-box .select-box.open .btn_select i {
    transform: rotate(0.5turn);
    color: var(--lightish-blue);
    margin-top: -8px;
}

.cart .ri-box .select-box.open .list_member {
    display: block;
    background-color: #f5f5f5;
}

.cart .ri-box .cart-wrap {
    margin-top: 32px;
    margin-bottom: 32px;
    padding: 32px 32px 24px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 3px 24px 0 rgba(80, 87, 255, 0.12);
}

.cart .ri-box .cart-wrap .inner-title {
    margin-bottom: unset;
}

.cart .ri-box .cart-wrap .recipt-wrap {
    width: 100%;
    height: 196px;
    overflow-y: scroll;
    background-color: #f5f5f5;
    padding: 24px 16px;
    margin: 16px 0 24px;
    border-radius: 16px;
}

.cart .ri-box .btn-wrap .comment {
    margin-top: 12px;
}

.cart .ri-box .btn-wrap .comment {
    margin-top: 12px;
    text-align: center;
    font-size: 15px;
    color: #777;
}

.cart .ri-box .btn-wrap .comment .point {
    font-size: 15px;
    color: var(--lightish-blue);
}

.cart .ri-box .total-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cart .ri-box .total-txt {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.52px;
    color: #202020;
}

.cart .ri-box .total-num {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.52px;
    color: #2c35fc;
}

.cart .user-pick-wrap .user-pick-item {
    display: flex;
    justify-content: space-between;
}

.cart .user-pick-item .user-pick-title {
    font-size: 18px;
    font-weight: 500px;
    color: #202020;
}

.cart .user-pick-item .user-pick-price {
    font-size: 18px;
    font-weight: 500px;
    color: #202020;
}

.cart .user-pick-wrap .user-pick-detail-list {
    margin-top: 16px;
    margin-bottom: 24px;
}

.cart .user-pick-wrap .user-pick-detail-item {
    font-size: 16px;
    line-height: 1.71;
    color: #202020;
}

.page-title .mb-title {
    font-size: 14px;
    font-weight: 300;
    color: #565656;
    margin-top: 10px;
}

@media screen and (max-width: 900px) {
    .cart .box-wrap {
        position: relative;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .cart .le-box {
        width: unset;
        margin-top: 160px;
    }

    .cart .ri-box {
        width: unset;
        min-width: 335px;
    }

    .cart .inner-wrap-list {
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
    }

    .cart .checkout-btn {
        margin: 0 auto;
    }
}

@media screen and (max-width: 768px) {
    section.cart {
        padding-bottom: 80px;
    }

    .cart .box-wrap .box-title {
        font-size: 18px;
        letter-spacing: 0.36px;
        margin-bottom: 20px;
    }

    .cart .inner-title {
        font-size: 15px;
    }

    .cart .choose-num {
        margin: unset;
    }

    .cart .le-box .inner-wrap {
        padding: 16px 21px;
    }

    .cart .ri-box .select-box .btn_select {
        padding: 15px 25px;
    }

    .cart .choose-list .chk-test-title {
        font-size: 14px;
        line-height: 1;
    }

    .cart .choose-list input:checked ~ label {
        border: 2px solid var(--lightish-blue);
        box-shadow: 0 3px 16px 0 rgba(80, 87, 255, 0.08);
    }

    .cart .choose-list input:checked ~ label .chk-test-title {
        font-size: 14px;
    }

    .cart .choose-list input:checked ~ label .chk-test-icon {
        font-size: 14px;
        margin-right: 4px;
    }

    .cart .choose-list .chk-test-box {
        padding: 20px 0;
        border-radius: 8px;
    }

    .cart .choose-list .chk-test-info {
        font-size: 10px;
        margin-top: 5px;
        line-height: 1;
    }

    .cart .choose-list .state-disabled .chk-test-title {
        line-height: 1;
    }

    .cart .choose-list .state-disabled {
        padding: 12px 0 13px;
    }

    section.page-title .container {
        padding-left: unset;
        padding-right: unset;
    }

    section.myPage-title .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    .cart .box-wrap {
        gap: unset;
        margin: 40px auto 0;
        max-width: 573px;
    }

    .cart .ri-box {
        width: 100%;
        min-width: unset;
    }

    .cart .ri-box .cart-wrap {
        margin-top: 25px;
        padding: 20px;
    }

    .cart .ri-box .cart-wrap .recipt-wrap {
        height: 150px;
        padding: 20px;
        margin: 14px 0 20px;
    }

    .cart .ri-box .total-txt {
        font-size: 15px;
    }

    .cart .ri-box .total-num {
        font-size: 15px;
    }

    .checkout-btn {
        max-width: 285px;
        padding: 13px 25px;
        font-size: 20px;
    }

    .cart .le-box {
        margin-top: 140px;
    }

    .cart .user-pick-item .user-pick-title {
        font-size: 15px;
    }

    .cart .user-pick-item .user-pick-price {
        font-size: 15px;
    }

    .cart .choose-list .chk-test-box {
        height: 64px;
    }
}

@media screen and (max-width: 605px) {
    .page-title {
        padding: 0 20px;
    }

    .myPage-title {
        padding: unset;
    }
}

/* // Shopping Cart
        ==================================  */


/* =====================================
        pricing */

.pricing-subpage {
    background-image: unset;
    width: 100%;
    margin-top: 0 !important;
   
}


.subpage .bg-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: clamp(448px, 43vw, 545px); 
    background-image: linear-gradient(104deg, #c3e1fc 5%, #8ea4fc 93%);
    opacity: 0.4;
    z-index: -1;
}

section.pricing {
    position: relative;
    padding-top: 50px;
}

section.pricing .title {
    position: unset;
    text-align: center;
    font-size: 48px;
    font-weight: 800;
    color: #202020;
}

section.pricing .title::after {
    display: none;
}

section.pricing .comment {
    text-align: center;
    font-size: 18px;
}

section.pricing .sub {
    text-align: center;
    font-size: 20px;
    font-weight: normal;
    color: #202020;
    margin-top: 14px;
}

section.price-package {
    margin-top: 40px;
}

.price-package .package-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    justify-content: center;
    padding: 0 20px 108px;
    transition: all 0.3;
}

.price-package .package-type {
    position: relative;
    width: calc((100% - (24px * 3)) / 4);
    max-width: 320px;
    overflow: hidden;
    padding: 38px 24px 32px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 3px 32px 0 rgba(80, 87, 255, 0.16);
    transition: all 0.3s;
    transform: translateZ(0);
    -webkit-font-smoothing: subpixel-antialiased;
}

.price-package .package-type:hover {
    transform: scale(1.05);
    -webkit-font-smoothing: subpixel-antialiased;
    backface-visibility: hidden;
}

.price-package .package-name {
    margin-bottom: 4px;
    font-size: 22px;
    font-weight: bold;
    color: var(--lightish-blue);
}

.price-package .package-price-wrap {
    display: flex;
    align-items: baseline;
    padding-bottom: 28px;
    border-bottom: 1px solid #e4e4e4;
}

.price-package .package-price-wrap .price {
    display: flex;
    align-items: baseline;
    font-size: 33px;
    font-weight: 600;
    color: #202020;
    margin-right: 10px;
    line-height: 1;
}

.price-package .price-wrap-en .price {
    align-items: center;
}

.price-package .package-price-wrap .period {
    font-size: 19px;
    font-weight: 500;
    color: #202020;
    line-height: 1;
}

.price-package .package-price-wrap .currency-symbol {
    display: block;
    margin-right: 5px;
    font-size: 26px;
    font-weight: 600;
}

.price-package .package-info {
    margin-top: 32px; min-height:258px;
}

.price-package .package-info .info-wrap {
    display: flex;
    align-items: flex-start;
    gap: 4px;
}

.price-package .package-info .info-wrap:not(:last-child) {
    margin-bottom: 16px;
}

.price-package .info-wrap .info-icon {
    margin-top: 5px;
    font-size: 16px;
}

.price-package .info-wrap .info-txt {
    font-size: 17px;
    font-weight: 600;
    color: #565656;
}

.price-package .info-wrap .info-txt.point-color-blue {
    color: var(--lightish-blue);
}

.price-package .package-start-btn {
    margin-top: 35px;
}

.price-package .package-start-btn.package-free-start-btn {
    background-color: #37aa64;
}

.price-package .box-tape {
    position: absolute;
    right: -66px;
    top: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 31px;
    background-color: #ffa32a;
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    transform: rotate(40deg);
}

@media screen and (max-width: 1350px) {
    .price-package .package-wrap {
        gap: 24px;
    }

    .price-package .package-type {
        width: calc((100% - (24px * 3)) / 3);
    }
}

@media screen and (max-width: 1080px) {
    /* .subpage .bg-content {
        height: 280px;
    } */

    .price-package .package-type {
        width: 100%;
        max-width: 768px;
        padding: 20px 20px 25px;
    }

    .price-package .package-top {
        border-bottom: 2px solid #e4e4e4;
    }

    .price-package .package-price-wrap {
        border: unset;
        padding-bottom: 11px;
    }

    .price-package .package-name {
        font-size: 20px;
        margin-bottom: 3px;
    }

    .price-package .package-price-wrap .price {
        font-size: 28px;
    }

    .price-package .package-price-wrap .period {
        font-size: 26px;
    }

    .price-package .package-info {
        margin-top: 20px;
        min-height: unset;
    }

    .price-package .info-inner-wrap {
        display: flex;
        flex-wrap: wrap;
        max-width: 304px;
    }

    .price-package .info-inner-wrap .info-wrap {
        min-width: 152px;
    }

    .price-package .package-info .info-wrap {
        margin-bottom: 10px;
    }

    .price-package .package-info .info-wrap:not(:last-child) {
        margin-bottom: 10px;
    }

    .price-package .package-start-btn {
        margin-top: 25px;
    }

    .price-package .type-best .package-price-wrap {
        margin-right: 80px;
    }

    .price-package .info-wrap .info-txt {
        font-size: 14px;
    }

    .price-package .package-type:hover {
        transform: unset;
    }

    section.pricing .title {
        font-size: 29px;
        font-weight: bold;
    }

    section.price-package {
        margin-top: 25px;
    }
}

@media screen and (max-width: 1080px) {
    .price-package .info-inner-wrap .info-wrap:nth-child(2n-2) {
        min-width: unset;
        width: fit-content;
    }
}

@media screen and (max-width: 768px) {
    /* .subpage .bg-content {
        height: 200px;
    } */

    .price-package .package-price-wrap .price {
        font-size: 28px;
        margin-right: 3px;
        line-height: 1;
    }

    .price-package .package-price-wrap .period {
        font-size: 15px;
    }
    
.pricing-subpage {
    /* padding-top: 56px !important; */
}

}

/* // pricing
         ==================================  */


/* =====================================
         aboutSAT  */
section.column-contents {
    margin-top: 72px;
}

section.about-contents {
    max-width: 1280px;
    margin: 72px auto 0;
}

.column-wrap {
    display: flex;
    margin: 0 auto;
    gap: 56px;
}

.column-wrap .menu-container {
    width: unset;
    margin: unset;
}

.le-menu-wrap {
    width: 240px;
}

.le-menu-wrap .le-menu-list {
    width: 100%;
}

.le-menu-wrap .le-menu-list li:not(:last-child) {
    margin-bottom: 12px;
}

.le-menu-list .le-menu {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 24px;
    height: 56px;
    border-radius: 28px;
    background-color: #f5f5f8;
    font-size: 17px;
    font-weight: 500;
    color: #20202087;
}

.le-menu-list .le-menu i {
    display: none;
    font-size: 21px;
    color: var(--lightish-blue);
}

.le-menu-list .le-menu:hover {
    background-color: #fff;
    font-weight: bold;
    color: var(--lightish-blue);
    border: 2px solid var(--lightish-blue);
}

.le-menu-list .le-menu.active {
    background-color: #fff;
    font-weight: bold;
    color: var(--lightish-blue);
    border: 2px solid var(--lightish-blue);
}

.le-menu-list .le-menu.active i {
    display: block;
}

section.about-contents .contents-container {
    padding: unset;
    padding-bottom: 80px;
    padding-right: 20px;
    max-width: 1300px;
}

.column-wrap .contents-container {
    margin-bottom: 00px;
}

.ri-contents-wrap .content.box1 {
    margin-bottom: 64px;
}

.ri-contents-wrap .content.box2 {
    margin-bottom: 72px;
}

section.about-contents .ri-contents-wrap .content-title {
    color: #5057FF;
}

.ri-contents-wrap .content-title {
    font-size: 32px;
    font-weight: 800;
    color: #202020;
    margin-bottom: 25px;
}

.ri-contents-wrap .content-sub {
    font-size: 19px;
    font-weight: 500;
    color: #202020;
    line-height: 29px;
}

.ri-contents-wrap .content.box3 .content-sub {
    line-height: 1.33;
}

.ri-contents-wrap .content-list {
    list-style: unset;
    list-style-type: disc;
    margin-left: 20px;
}

.ri-contents-wrap .content-list .list-item {
    list-style: unset;
}

.ri-contents-wrap .content-list .list-item::marker {
    font-size: 20px;
}

.ri-contents-wrap .content-list .list-item:not(:last-child) {
    margin-bottom: 12px;
}

.ri-contents-wrap .content-list .list-item {
    font-weight: 500;
    line-height: 1.43;
}

.ri-contents-wrap .content-img-wrap {
    margin-top: 32px;
}

.ri-contents-wrap .adapte-img-wrap {
    margin-top: 8px;
}

.ri-contents-wrap table {
    width: 100%;
}

.ri-contents-wrap .content-table-wrap {
    margin-top: 16px;
    margin-bottom: 5px;
    width: 100%;
    padding: 8px 0;
    border-top: 2px solid #202020;
    border-bottom: 2px solid #202020;
}

.content-table-wrap .table-row-wrap {
    display: flex;
    padding: 16px 0;
}

.content-table-wrap .RW-table .table-row-wrap:not(:last-child) {
    border-radius: unset;
    padding: 16px 0 16px;
}

.content-table-wrap .table-row-wrap:not(:last-child) {
    border-bottom: 1px solid #e4e4e4;
}

.content-table-wrap .RW-table .table-row-wrap:last-child {
    padding-bottom: 10px;
}

.content-table-wrap .math-table .table-row-wrap:not(:last-child) {
    border-radius: unset;
    padding: 16px 0 16px;
}

.content-table-wrap .math-table .table-row-wrap:last-child {
    padding-bottom: 10px;
}

.content-table-wrap .table-row-le {
    padding-right: 36px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 220px;
}

.content-table-wrap .table-row-mid {
    width: 63%;
    padding-left: 23px;
}

.content-table-wrap .table-row-ri {
    padding-left: 31px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-table-wrap .table-row .row-title {
    font-size: 14px;
    font-weight: 800;
    color: #999;
    margin-bottom: 6px;
    line-height: 1;
}

.content-table-wrap .table-row .row-title i {
    margin-left: 4px;
    font-size: 14px;
    color: #999;
}

.content-table-wrap .table-row .row-info {
    font-size: 20px;
    font-weight: bold;
    color: #202020;
}

.content-table-wrap .table-row-ri .row-info {
    font-size: 16px;
    font-weight: 600;
    color: #202020;
}

.content-table-wrap .table-row .row-list-item {
    display: flex;
    align-items: start;
    font-size: 16px;
    font-weight: 600;
    color: #202020;
}

.content-table-wrap .table-row .row-list-item span {
    font-size: 20px;
    font-weight: 600;
    color: #202020;
    margin-right: 8px;
}

.content-table-wrap .table-row .row-list-item .list-item-txt {
    font-size: 16px;
    font-weight: 600;
    color: #202020;
}

.content-table-wrap .table-row .row-list-item .circle-num {
    font-size: 20px;
    margin-right: 3px;
}

.content-table-wrap .table-row-mid {
    border-left: 1px solid #e4e4e4;
    border-right: 1px solid #e4e4e4;
}

.ri-contents-wrap .content-btm-title {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 16px;
}

.ri-contents-wrap .content-list-sub {
    font-size: 18px;
    color: #707070;
}

.ri-contents-wrap .content-list-sub.top {
    margin-top: 12px;
}

.ri-contents-wrap .content-list-sub.origin {
    font-size: 16px;
}

.ri-contents-wrap .box3 .content-img-wrap {
    margin-bottom: 4px;
    margin-top: 28px;
}

.ri-contents-wrap .content-guide-sub {
    font-size: 18px;
    font-weight: bold;
    color: #2c35fc;
    line-height: 1.33;
    margin-top: 22px;
}


@media screen and (max-width: 1080px) {
    section.about-contents .contents-container {
        padding: 0 20px;
    }

    section.column-contents {
        max-width: 768px;
    }

    .column-wrap {
        flex-direction: column;
    }

    .column-wrap .scroll-wrap {
        overflow-x: scroll;
        margin-bottom: -1.5px;
    }

    .column-wrap .scroll-wrap::-webkit-scrollbar {
        display: none;
    }

    .column-wrap .scroll-wrap {
        -ms-overflow-style: none; /* 인터넷 익스플로러 */
        scrollbar-width: none; /* 파이어폭스 */
    }

    .le-menu-wrap {
        width: 100%;
        margin: 0 auto;
        min-width: 450px;
    }

    .le-menu-wrap .le-menu-list {
        display: flex;
        gap: 30px;
        width: 100%;
        padding-left: 20px;
    }

    .le-menu-list .le-menu {
        background-color: unset;
        border-radius: unset;
        padding: unset;
        line-height: 1.5;
        min-width: fit-content;
        height: unset;
    }

    .le-menu-wrap .le-menu-list li:not(:last-child) {
        margin-bottom: unset;
    }

    .le-menu-list .le-menu.active {
        border: unset;
        border-bottom: 2px solid var(--lightish-blue);
    }

    .le-menu-list .le-menu.active i {
        display: none;
    }

    .column-wrap .menu-container {
        padding: unset;
        border-bottom: 2px solid #e4e4e4;
    }

    .le-menu-list .le-menu:hover {
        border: unset;
        border-bottom: 2px solid #e4e4e4;
    }
}

@media screen and (max-width: 1080px) {
    .column-wrap .contents-container {
        margin-bottom: 80px;
    }

    .column-wrap {
        gap: 40px;
    }

    .ri-contents-wrap .pc {
        display: none;
    }

    .ri-contents-wrap .mb {
        display: block;
    }

    .ri-contents-wrap .content-title {
        font-size: 24px;
        margin-bottom: 8px;
    }

    .ri-contents-wrap .content-sub {
        font-size: 15px;
        line-height: 1.43;
        margin-top: 20px;
    }

    .ri-contents-wrap .content.box1 {
        margin-bottom: 50px;
    }

    .ri-contents-wrap .content.box2 {
        margin-bottom: 50px;
    }

    .ri-contents-wrap .content-table-wrap {
        padding: unset;
    }

    .ri-contents-wrap .content-list-sub.top {
        margin-top: 10px;
    }

    .content-table-wrap .table-row-le {
        width: unset;
        margin-bottom: 15px;
    }

    .content-table-wrap .table-row-wrap {
        flex-direction: column;
        padding: 15px 0 10px;
        border-bottom: 2px solid #e4e4e4;
    }

    .content-table-wrap .table-row-mid {
        border: unset;
        padding-left: unset;
        width: unset;
        margin-bottom: 15px;
    }

    .content-table-wrap .table-row-ri {
        padding-left: unset;
    }

    .content-table-wrap .table-row .row-title {
        margin-bottom: 5px;
        font-size: 12px;
    }

    .content-table-wrap .table-row .row-info {
        font-size: 18px;
        line-height: 1.33;
    }

    .content-table-wrap .table-row .row-list-item {
        font-size: 14px;
    }

    .content-table-wrap .table-row-ri .row-info {
        font-size: 14px;
    }

    .ri-contents-wrap .content-list .list-item.re-po {
        line-height: 1.43;
    }

    .ri-contents-wrap .content-btm-title {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .ri-contents-wrap .box3 .content-img-wrap {
        margin-top: 30px;
    }

    .ri-contents-wrap .content-list-sub {
        font-size: 15px;
    }

    .ri-contents-wrap .content-guide-sub {
        font-size: 14px;
        color: #2c35fc;
        line-height: 1.43;
        margin-top: 15px;
    }

    .ri-contents-wrap .content-list .list-item:not(:last-child) {
        margin-bottom: 2px;
    }

    .ri-contents-wrap .content-list-sub.origin {
        font-size: 14px;
    }

}

@media screen and (max-width: 768px) {
    .le-menu-wrap {
        min-width: auto;
    }

    .le-menu-list .le-menu {
        font-size: 14px;
    }
}

/* //
        aboutSAT ==================================  */


/*  =====================================
        quesionType  */
.quesionType-contents-wrap {
    margin-bottom: 140px;
}

@media screen and (max-width: 1080px) {
    .quesionType-contents-wrap .ql-snow.solution-detail * {
        font-size: 15px !important;
    }

    .quesionType-contents-wrap .ql-snow.solution-detail .katex .mord.mtight {
        font-size: 13px !important;
    }
}

.drop-content:not(:last-child) {
    margin-bottom: 8px;
}

.drop-content .quesion-title-wrap {
    width: 100%;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f5f5f8;
    padding: 0 32px;
    border-radius: 16px;
    cursor: pointer;
}

.drop-content .quesion-title {
    font-size: 20px;
    font-weight: 500;
    color: #202020;
}

.drop-content .drop-icon {
    font-size: 24px;
}

.drop-content.on .quesion-title-wrap {
    background-color: #eaeefe;
}

.drop-content.on .quesion-title {
    font-weight: bold;
    color: #2c35fc;
}

.drop-content.on .drop-icon {
    color: #2c35fc;
    transform: rotate(180deg);
}

.drop-content .quesion-info-box {
    display: none;
    padding: 32px 24px;
}

.drop-content .box-description * {
    font-family: 'Inter' !important;
}

.drop-content .box-description .katex * {
    font-family: KaTeX_Main, serif !important;
}

.drop-content .quesion-info-box .editor-wrap * {
    font-size: 19px;
    line-height: 26px;
}

.drop-content .quesion-info-box .title {
    display: inline-block;
    margin-bottom: 16px;
    padding: 8px 16px;
    background-color: #e2f0d9;
    font-weight: 600;
    font-size: 16px;
    border-radius: 20px;
}

.drop-content .quesion-info-box .text-body {
    margin-bottom: 40px;
}

.drop-content .test-body .problem-wrap {
    padding-right: 28px;
}

.drop-content .test-body .option-wrap {
    padding-left: 28px;
}

.drop-content .test-body .test-container {
    height: auto;
    padding: 0;
    border-bottom: none;
}

.drop-content .test-body .ql-editor * {
    font-size: 18px;
}

.drop-content .quesion-info-box .option-title {
    padding-top: 0;
}

.drop-content section.question-footer {
    position: static;
    padding: 0;
}

.drop-content .question-footer .index-wrap {
    opacity: 0;
}

.drop-content .question-footer .inner-wrap {
    margin-top: 20px;
    padding: 0;
    position: static;
}

.drop-content .math-example-wrap {
    padding: 0 80px;
}

.drop-content .m-divide.type01 {
    margin: 40px 0;
    margin-top: 16px;
}

.drop-content .example-wrap .explanation-btn {
    white-space: nowrap;
}

.drop-content .state-btn-wrap {
    justify-content: flex-end;
}

.drop-content .test-body .problem-box {
    padding-right: 0;
}

.drop-content .multiful-body .option-wrap {
    width: 100%;
    padding: 0px;
}

.m-divide.type01 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.m-divide.type01 .dot {
    width: 6px;
    height: 6px;
    content: "";
    margin: 0 4px;
    background-color: #ccc;
    border-radius: 100%;
}

@media screen and (max-width: 1080px) {
    .drop-content .math-example-wrap {
        padding: 0;
    }

    .drop-contents-wrap {
        margin-top: 15px;
    }

    .drop-content .quesion-title {
        font-size: 15px;
    }

    .drop-content .drop-icon {
        font-size: 18px;
    }

    .drop-content .quesion-title-wrap {
        padding: 0 10px;
        height: 40px;
    }

    .quesionType-contents-wrap {
        margin-bottom: unset;
    }

    .drop-content .quesion-info-box {
        padding: 14px 0 30px;
    }

    .drop-content .quesion-info-box img {
        max-width: 100%;
    }

    .tip * {
        font-size: 15px !important;
    }

    .drop-content .quesion-info-box .editor-wrap * {
        font-size: 15px;
    }

    .drop-content .test-body .option-wrap {
        padding-left: 0;
        margin-top: 20px;
    }

    .drop-content .katex * {
        font-size: 15px !important;
    }
}

/* // quesionType
        ==================================  */


/* =====================================
         examSchedule  */
.content-guide-box {
    width: 100%;
    border-radius: 16px;
    background-color: #f5f5f8;
    padding: 16px 24px;
}

.content-guide-box .content-guide {
    display: flex;
}

.content-guide .guide-le {
    display: flex;
    gap: 6px;
    min-width: 200px;
}

.content-guide .le-head {
    display: flex;
    align-items: center;
    font-size: 15px;
    font-weight: 800;
}

.content-guide .le-head i {
    margin-right: 8px;
    position: relative;
    top: -1px;
    color: #999;
}

.content-guide .le-title {
    font-size: 15px;
    font-weight: 500;
    color: #202020;
}

.content-guide .guide-ri {
    font-size: 15px;
    font-weight: 500;
    color: #202020;
    opacity: 0.56;
}

.ri-contents-wrap .examSchedule-table-wrap {
    border: unset;
}

.examSchedule-table-wrap .table-row-wrap {
    padding: 26px 24px;
    align-items: center;
}

.examSchedule-table-wrap .table-row-wrap > div {
    flex: 1;
}

.examSchedule-table-wrap .table-row-wrap:not(:last-child) {
    border: unset;
    border-top: 1px solid #e4e4e4;
}

.examSchedule-table-wrap .table-row-wrap:last-child {
    border-bottom: 1px solid #e4e4e4;
    border-top: 1px solid #e4e4e4;
}

.examSchedule-table-wrap .table-row-le {
    padding-right: 0px;
}

.examSchedule-table-wrap .table-row-mid {
    width: unset;
    padding-left: unset;
}

.examSchedule-table-wrap .table-row-mid.mid-le {
    width: 22.8%;
    padding-left: 16px;
}

.examSchedule-table-wrap .table-row {
    padding: 0 16px;
}

.examSchedule-table-wrap .table-row-mid.mid-ri {
    width: 22.8%;
}

.examSchedule-table-wrap .table-row-ri {
    padding-left: 17px;
    padding-right: 16px;
}

.examSchedule-table-wrap .table-row:not(:last-child) {
    border-right: 1px solid #e4e4e4;
}

.examSchedule-table-wrap .table-row .row-title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: unset;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}

.examSchedule-table-wrap .table-row .title-bold {
    display: block;
    font-weight: 600;
    color: #5057ff;
    font-size: 15px;
}

.examSchedule-table-wrap .table-row .row-info {
    font-size: 20px;
    font-weight: bold;
    color: #202020;
}

.examSchedule-table-wrap .table-row .date-info {
    color: var(--lightish-blue);
}

.examSchedule-table-wrap .table-row .date-title {
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
}

.examSchedule-table-wrap .table-row .date-year {
    font-size: 20px;
    font-weight: bold;
    line-height: 1;
}

.examSchedule-table-wrap .table-row-ri .row-info {
    font-size: 16px;
    font-weight: 600;
    color: #202020;
}

.examSchedule-table-wrap .table-row .row-list-item {
    justify-content: center;
    font-size: 19px;
    font-weight: 600;
}

.examSchedule-table-wrap .table-row-mid {
    border-right: 1px solid #e4e4e4;
}

.examSchedule-table-wrap .soon-date-row {
    background-color: #f1f3ff;
}

@media screen and (max-width: 1080px) {
    .content-guide-box {
        margin-top: 15px;
        background-color: unset;
        box-shadow: 0 3px 12px 0 rgba(47, 65, 103, 0.12);
        background-color: #fff;
    }

    .content-guide-box .content-guide {
        flex-direction: column;
    }

    .examSchedule-table-wrap .table-row-wrap:not(:last-child) {
        border-top: unset;
    }

    .examSchedule-table-wrap .table-row-wrap:not(:first-child) {
        border-bottom: 1px solid #e4e4e4;
    }

    .content-table-wrap .table-row-wrap {
        border-radius: 16px;
        border-radius: unset;
    }

    .content-table-wrap .table-row-wrap:first-child {
        padding: 15px;
        border-radius: 16px;
    }

    .content-table-wrap .table-row-wrap:last-child {
        padding-bottom: 30px;
        margin-bottom: unset;
    }

    .content-table-wrap .table-row {
        width: 100%;
        padding-left: unset;
    }

    .examSchedule-table-wrap .table-row-mid {
        width: 100%;
    }

    .examSchedule-table-wrap .table-row:not(:last-child) {
        border: unset;
    }

    .examSchedule-table-wrap .table-row-mid.mid-le {
        width: 100%;
        padding-left: unset;
    }

    .examSchedule-table-wrap .table-row-mid.mid-ri {
        width: 100%;
        padding-left: unset;
    }

    .examSchedule-table-wrap .table-row .date-title {
        margin-bottom: 5px;
    }

    .examSchedule-table-wrap .table-row .row-list-item {
        font-size: 15px;
    }
}

/* // examSchedule
        =====================================  */


/*  마이페이지 공통  =====================================  */
section.myPage-title {
    padding-top: 57px;
}

section.myPage-title .title-wrap {
    display: flex;
    align-items: center;
}

section.myPage-title .title {
    font-size: 32px;
    font-weight: 800;
    color: #202020;
}

section.myPage-title .title::after {
    width: 96px;
    height: 4px;
    background-color: #202020;
}

.myPage-title .logout-btn {
    margin-left: 15px;
    position: relative;
}

.myPage-title .logout-btn .text {
    font-weight: 500;
}

section.chart-contents .contents-container {
    margin-bottom: 0;
}

@media screen and (max-width: 1080px) {
    section.myPage-title {
        max-width: 768px;
    }

    section.chart-contents {
        max-width: 868px;
    }

    section.myPage-title .title-wrap {
        justify-content: space-between;
    }

    section.myPage-title .title {
        font-size: 26px;
    }

    section.myPage-title .title::after {
        width: 60px;
    }
}

/*  // 마이페이지 공통  ==================================  */


/* ==================================
        testRecord */
.myPage-contents-wrap {
    margin-bottom: 140px;
}

.myPage-contents-wrap .column-contents {
    display: flex;
    justify-content: space-between;
    gap: 32px;
}

.myPage-contents-wrap .column-contents.box {
    margin-bottom: 39px;
}

.myPage-contents-wrap .column-content {
    width: calc((100% / 2) - 14px);
}

.myPage-contents-wrap .content-title {
    font-size: 26px;
    font-weight: bold;
    margin-bottom: 16px;
}

.myPage-contents-wrap .content-box-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.myPage-contents-wrap .content-box .box-le {
    padding-right: 20px;
}

.myPage-contents-wrap .content-box .btn-default {
    width: 128px;
    flex: 0 0 auto;
}

.myPage-contents-wrap .content-box .btn-default i {

    margin-left: 8px;
    font-size: 14px;
    color: #fff;
}

.myPage-contents-wrap .content-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px;
    border-radius: 16px;
    border: 1px solid #d5d4d4;
    box-shadow: 0 3px 24px 0 rgba(80, 87, 255, 0.08);
}

.myPage-contents-wrap .chart-box {
    padding: 19px 22px;
}

.myPage-contents-wrap .content-box .box-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--lightish-blue);
}

.myPage-contents-wrap .content-box .quesionType-title {
    font-size: 22px;
    font-weight: 600;
    color: #202020;
    letter-spacing: 0.48px;
}

.myPage-contents-wrap .record-box {
    align-items: start;
    padding: 33px 32px;
}

.myPage-contents-wrap .record-box-wrap {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.myPage-contents-wrap .record-box .box-ri {
    padding-left: 32px;
    border-left: 1px solid #e4e4e4;
    border-radius: 0.5px;
}

.myPage-contents-wrap .record-box .box-ri .ri-btn-wrap {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.myPage-contents-wrap .record-box .box-title {
    font-size: 26px;
    font-weight: 600;
    letter-spacing: 0.52px;
    color: #202020;
}

.myPage-contents-wrap .record-box .box-ri-item {
    display: flex;
    gap: 12px;
}

.myPage-contents-wrap .record-box .ri-title {
    min-width: 85px;
    font-size: 16px;
    font-weight: 500;
    color: #717171;
}

.myPage-contents-wrap .record-box .ri-item-info {
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0.32px;
}

.myPage-contents-wrap .record-box .complete-date {
    color: #202020;
}

.myPage-contents-wrap .record-box .my-score {
    color: var(--lightish-blue);
}

.myPage-contents-wrap .record-box .result-btn {
    margin-top: 22px;
}



.myPage-contents-wrap .continue-box .ri-btn-wrap button {
    transition: all 0.3s;
}

.myPage-contents-wrap .continue-box .ri-btn-wrap button:hover {
    background-color: #2c35fc;
    color: #fff;
}

.myPage-contents-wrap .continue-box .box-ri {
    padding: unset;
    border: unset;
}

.myPage-contents-wrap .continue-box .continue-sticker {
    margin-top: 8px;
}

.myPage-contents-wrap .continue-box .ri-btn-wrap {
    display: flex;
    align-items: end;
    gap: 16px;
    margin-top: 72px;
}

.myPage-contents-wrap .mb-guide {
    width: 100%;
    background-color: #F1F2FF;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: #2c35fc;
    padding: 10px 33px;
    margin-top: 20px;
}

@media screen and (max-width: 1080px) {
    .myPage-contents-wrap {
        margin-bottom: unset;
    }

    .myPage-contents-wrap .content-title {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .myPage-contents-wrap .content-box .box-title.finish-title {
        width: 100%;
    }

    .myPage-contents-wrap .record-box .box-ri {
        margin-top: 8px;
    }

    .myPage-contents-wrap .column-contents {
        flex-direction: column;
        gap: 50px;
        margin-bottom: 50px;
    }

    .myPage-contents-wrap .column-content {
        width: 100%;
    }

    .myPage-contents-wrap .content-box .box-title {
        font-size: 18px;
    }

    .myPage-contents-wrap .content-type-box .box-title {
        font-size: 12px;
        margin-bottom: 0px;
    }

    .myPage-contents-wrap .content-box .quesionType-title {
        font-size: 16px;
    }

    .myPage-contents-wrap .record-box {
        flex-direction: column;
        padding: 20px;
        border: unset;
        box-shadow: 0 3px 24px 0 rgba(80, 87, 255, 0.12);
    }

    .myPage-contents-wrap .record-box .box-ri {
        border: unset;
        padding-left: unset;
        width: 100%;
    }

    .myPage-contents-wrap .record-box .box-ri .ri-btn-wrap {
        display: none;
    }

    .myPage-contents-wrap .record-box .ri-title {
        min-width: 53px;
        padding-bottom: 0;
        font-size: 14px;
        border-bottom: none;
    }

    .myPage-contents-wrap .record-box .complete-date {
        font-size: 14px;
    }

    .myPage-contents-wrap .record-box .ri-item-info {
        font-size: 14px;
    }

    .myPage-contents-wrap .record-box .result-btn {
        margin-top: 15px;
    }

    .myPage-contents-wrap .continue-box .ri-btn-wrap.pc {
        display: none;
    }

    .myPage-contents-wrap .continue-box .ri-btn-wrap.mb {
        display: block;
    }

    .myPage-contents-wrap .content-box {
        padding: 15px;
    }

    .myPage-contents-wrap .mb-guide {
        padding: 10px 23px;
        text-align: center;
    }
}

/* // testRecord
        =============================== */


/* ===============================
         resultPage */
.myPage-contents-wrap .result-content .content-title {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: #202020;
    margin-bottom: 13px;
}

.myPage-contents-wrap .result-content .test-date {
    font-size: 20px;
    font-weight: 500;
    color: #565656;
}

.myPage-contents-wrap .final-score-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 19px 32px;
    border-radius: 16px;
    border: 1px solid #d5d4d4;
    margin-top: 32px;
    margin-bottom: 16px;
}

.final-score-wrap .score-title {
    font-size: 22px;
    font-weight: 500;
    color: #202020;
}

.final-score-wrap .score-ri {
    display: flex;
    align-items: center;
}

.final-score-wrap .user-score {
    font-size: 32px;
    font-weight: 600;
    color: #2c35fc;
}

.final-score-wrap .total-score {
    font-size: 24px;
    font-weight: 500;
    color: #202020;
    opacity: 0.4;
}

.final-score-wrap .score-icon {
    font-size: 24px;
    font-weight: 500;
    color: #202020;
    opacity: 0.4;
    margin: 0 5px 0 12px;
}

.myPage-contents-wrap .box2 {
    margin-top: 32px;
}

.myPage-contents-wrap .score-chart-wrap {
    display: flex;
    gap: 24px;
    justify-content: space-between;
}

.score-chart-wrap .chart-content {
    width: calc((100% / 2) - 12px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 32px;
    padding-bottom: 24px;
    background-color: #f5f5f8;
    border: 1px solid #fff;
    border-radius: 16px;
}

.score-chart-wrap .chart-content .inner-wrap {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.score-chart-wrap .chart-le {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/*

    .score-chart-wrap .most-type-wrap {
        margin-bottom:auto;
    } */
.score-chart-wrap .chart-title {
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 0.36px;
    color: #202020;
}

.score-chart-wrap .chart-score {
    display: flex;
    align-items: center;
}

.score-chart-wrap .user-score {
    font-size: 32px;
    font-weight: 600;
    color: #2c35fc;
}

.score-chart-wrap .total-score {
    font-size: 24px;
    font-weight: 500;
    color: #202020;
    opacity: 0.4;
}

.score-chart-wrap .score-icon {
    font-size: 24px;
    font-weight: 500;
    color: #202020;
    opacity: 0.4;
    margin: 0 5px 0 10px;
}

.score-chart-wrap .most-title {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.32px;
    color: #2c35fc;
}

.score-chart-wrap .most-type-item {
    padding-left: 12px;
    position: relative;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.32px;
    color: #202020;
}

.score-chart-wrap .most-type-item:before {
    content: "-";
    position: absolute;
    top: 0px;
    left: 0;
}


/* 240411 모듈 표시 */
.score-chart-wrap .module-wrap {
    display: flex;
    flex-direction: column;
}

.score-chart-wrap .mudule-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.score-chart-wrap .module-score {
    display: flex;
    align-items: center;
}

.score-chart-wrap .module-wrap .item-title {
    font-size: 16px;
    font-weight: bold;
}

.score-chart-wrap .module-score .user-score,
.score-chart-wrap .module-score .total-score,
.score-chart-wrap .module-score .score-icon {
    font-size: 15px;
    line-height: 1;
}

.score-chart-wrap .module-score .score-icon {
    margin: 0 6px;
}

@media screen and (max-width: 1220px) {

    .score-chart-wrap .chart-le {
        gap: 4px;
    }

    .score-chart-wrap .mudule-item {
        flex-direction: column;
        justify-content: start;
        align-items: start;
        gap: unset;
    }

    .score-chart-wrap .module-wrap {
        gap: 4px;
        margin-bottom: 8px;
    }

    .score-chart-wrap .module-score {
        margin-left: 12px;
    }
}

@media screen and (max-width: 1024px) {
    .score-chart-wrap .chart-content {
        padding: 21px;
        padding-bottom: 20px;
    }
}


/* 도넛차트 속성 */
.score-chart-wrap .chart-ri {
    width: 100%;
    max-width: 156px;
    max-height: 156px;
    position: relative;
    border: 3px solid #202020;
    border-radius: 24px;
    background-color: #fff;
    padding: 3px;
}

.score-chart-wrap .chart-ri #myChart {
    width: 100% !important;
    height: auto;
}

.score-chart-wrap .chart-ri #myChart2 {
    width: 100% !important;
}

.score-chart-wrap .chart-ri .chart-score-box {
    position: absolute;
    display: block;
    content: "";
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 60px;
    height: 60px;
    border: 3px solid #202020;
}

/* // 도넛 차트 속성   */
.myPage-contents-wrap .result-tab-content {
    margin-top: 40px;
}

.result-tab-content .result-tabs {
    margin: 0px;
    padding: 0px;
    z-index: 1;
    display: flex;
    gap: 8px;
}

.result-tab-content .result-tabs .result-tab-btn {
    background: #d5d4d4;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: -0.4px;
    color: #fff;
    display: inline-block;
    padding: 10px 27px 46px;
    border-radius: 16px;
    cursor: pointer;
}

.result-tab-content .result-tabs .result-tab-btn.current {
    background: var(--lightish-blue);
    color: #fff;
}

.result-tab-content .result-tab-content {
    display: none;
    margin-top: -40px;
    border-radius: 16px;
    border: 1px solid #d5d4d4;
    background-color: #fff;
    overflow: hidden;
}

.result-tab-content .result-tab-content.current {
    display: inherit;
    position: relative;
    z-index: 33;
}

.result-tab-content .result-list .result-item {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 20px 0;
    background-color: #fff;
}

.result-tab-content .result-list .result-item .ql-editor * {
    font-family: 'Inter';
}

.result-tab-content .result-list .result-item:nth-child(2n-2) {
    background-color: #5056ff11;
}

.result-tab-content .result-list .result-item-head {
    padding: 14.5px 0;
}

.result-tab-content .result-list .sort-btn {
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-tab-content .result-list .sort-btn.sort-active .item-head-title {
    color: var(--lightish-blue);
}

.result-tab-content .result-list .sort-btn.sort-active .item-head-icon {
    color: var(--lightish-blue);
    transform: rotate(180deg);
}

.result-tab-content .result-list .result-item .item-head-title.item-choice {
    color: #202020;
}

.result-tab-content .result-list .item-head-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.32px;
    color: #202020;
    line-height: 1;
}

.result-tab-content .result-list .result-item .item-num {
    width: 10.7%;
    max-width: 97px;
    text-align: center;
}

.result-tab-content .result-list .result-item .item-section {
    width: 32%;
    padding-left: 24px;
}

.result-tab-content .result-list .result-item .item-type {
    width: 17%;
}

.result-tab-content .result-list .result-item .item-answer {
    width: 14%;
    text-align: center;
}

.result-tab-content .result-list .result-item .item-answer * {
    text-align: center;
}

.result-tab-content .result-list .result-item .item-choice {
    width: 13%;
    text-align: center;
    color: #14ac51;
}

.result-tab-content .result-list .result-item .wrong-choice {
    color: #d50f00;
}

.result-tab-content .result-list .result-item .item-solution {
    width: 13%;
    padding: 0 10px;
    display: flex;
    justify-content: center;
}

.result-tab-content .result-list .sort-btn.item-section {
    padding-left: 24px;
    justify-content: unset;
}

.result-tab-content .result-list .item-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.32px;
    color: #202020;
}

/* 해설 팝업 ------------------------- */
.popUp_box.solution-modal {
    width: calc(100vw - 100px);
    max-width: 1280px;
    padding: 24px 32px 38px 32px;
    height: calc(100vh - 100px);
    max-height: 1096px;
}

.popUp_box.solution-modal .solution-body {
    width: 100%;
}

.solution-modal .paragraph {
    line-height: 1.44;
}

.solution-modal .solution-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 32px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e4e4e4;
}

.solution-modal .header-le .title {
    font-size: 22px;
    font-weight: bold;
    color: #111;
}

.solution-modal .header-le .title-type {
    font-size: 18px;
    font-weight: bold;
    color: var(--lightish-blue);
    margin-top: 4px;
}

.solution-modal .header-ri {
    gap: 32px;
}
.solution-modal .header-ri .btn-download {
    white-space: nowrap; color:#5057FF; font-weight:bold;
}
.solution-modal .header-ri .title {
    font-size: 18px;
    font-weight: bold;
    color: #d50f00;
}

.solution-modal .header-ri .close-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    padding: 10px;
    border: 2px solid #424242;
    background-color: #fff;
    border-radius: 8px;
    cursor: pointer;
}

.solution-modal .header-ri .close-btn i {
    font-size: 20px;
}

.solution-modal .solution-body {
    position: relative;
    display: flex;
    margin-top: 39px;
    overflow-y: scroll;
}

.solution-modal .solution-body::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    content: "";
    height: 100%;
    width: 1px;
    background-color: #e4e4e4;
}

.solution-modal .body-content {
    width: 50%;
    padding: 0 32px;
}

.solution-modal .problem-title, .solution-modal .option-title {
    font-size: 24px;
    font-weight: bold;
    color: #202020;
    line-height: 1.33;
    margin-bottom: 8px;
}

.solution-modal .problem-box {
    font-size: 18px;
    line-height: 1.44;
}

.solution-modal .problem-box p {
    font-size: 17px;
    line-height: 1.44;
    color: #111;
}

.solution-modal .option-title {
    padding-top: 70px;
}

.solution-modal .option-item label {
    cursor: unset;
}

.solution-modal .option-item .option-item-content {
    margin-bottom: 12px;
}

/*  유저 선택  user-choice */
.solution-modal .option-item.user-choice label {
    border: 2px solid #d50f00;
}

.solution-modal .option-item.user-choice .item-num {
    background-color: #d50f00;
    color: #fff;
}

/*  정답   correct */
.solution-modal .option-item.user-correct-choice label {
    border: 2px solid var(--green);
}

.solution-modal .option-item.correct.user-choice label {
    border: 2px solid var(--green);
    position: relative;
}

.solution-modal .option-item.correct label {
    position: relative;
    border: 2px solid var(--lightish-blue);
}

.solution-modal .option-item.correct.user-choice label:after {
    display: block;
    content: "";
    width: calc(100% + 8px);
    height: calc(100% + 6px);
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    border: 2px solid var(--lightish-blue);
    border-radius: 28px;
}

.solution-modal .option-item.correct .item-num {
    background-color: var(--lightish-blue);
    color: #fff;
}

.solution-modal .solution-mark-wrap {
    display: flex;
    justify-content: right;
    gap: 64px;
    margin-top: 12px;
}

.solution-modal .solution-mark-wrap .solution-mark {
    display: flex;
    align-items: center;
    position: relative;
    font-size: 16px;
    font-weight: bold;
}

.solution-modal .solution-mark-wrap .user-choice {
    color: #d50f00;
}

.solution-modal .solution-mark-wrap .user-choice::before {
    position: absolute;
    display: block;
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    top: 50%;
    left: -24px;
    transform: translateY(-50%);
    background-color: #d50f00;
}

.solution-modal .solution-mark-wrap .user-correct-choice {
    color: var(--green);
}

.solution-modal .solution-mark-wrap .user-correct-choice::before {
    background-color: var(--green);
}

.solution-modal .solution-mark-wrap .user-correct-choice::before {
    background-color: var(--green);
}

.solution-modal .solution-mark-wrap .correct {
    color: var(--lightish-blue);
}

.solution-modal .solution-mark-wrap .correct::before {
    position: absolute;
    display: block;
    content: "";
    width: 16px;
    height: 16px;
    border-radius: 50%;
    top: 50%;
    left: -24px;
    transform: translateY(-50%);
    background-color: var(--lightish-blue)
}

.solution-modal .explanation-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.solution-modal .move-btn-wrap {
    display: flex;
    gap: 15px;
    justify-content: space-between;
}

.solution-modal .inner-btn-wrap i {
    font-size: 20px;
    color: #fff;
}

.solution-modal .inner-btn-wrap {
    display: flex;
    gap: 15px;
}

.solution-modal .inner-btn-wrap .solution-move-btn {
    display: flex;
    justify-content: center;
    align-items: center;
}

.solution-modal .inner-btn-wrap .solution-move-btn p {
    font-size: 18px;
    color: #fff;
    font-weight: bold;
}

.solution-modal .inner-btn-wrap .solution-move-btn.prev i {
    margin-right: 10px;
}

.solution-modal .inner-btn-wrap .solution-move-btn.next {
    padding: 10px 24px 9px 30px;
}

.solution-modal .inner-btn-wrap .solution-move-btn.next i {
    margin-left: 10px;
}

.solution-modal .move-btn-wrap .sendReport-btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

.solution-modal .move-btn-wrap .sendReport-btn .btn-title {
    font-size: 16px;
    font-weight: 500;
    color: #707070;
    transition: all 0.5s;
}

.solution-modal .move-btn-wrap .sendReport-btn i {
    font-size: 20px;
    font-weight: normal;
    color: #707070;
    transition: all 0.5s;
}

@media screen and (max-width: 1400px) {
    .popUp_box.solution-modal {
        height: calc(100vh - 60px)
    }

    .solution-modal .header-le .title-type {
        margin-top: 0;
    }

}
@media screen and (max-width: 1080px) {
    .solution-modal .header-ri .btn-download {
        margin-top:16px;
    }
}


/* //해설 팝업 ---------------------------*/


/* // resultPage ======================================= */


/* purchasedExam ============================= */
.purchased-contents-wrap {
    margin-bottom: 204px;
}

.purchased-contents-wrap .content-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.purchased-contents-wrap .solve-btn {
    width: auto;
    height: 36px;
    padding: 0 20px;
    font-size: 15px;
    border-radius: 24px;
}

.purchased-contents-wrap .solve-btn i {
    margin-left: 8px;
    color: #fff;
}

.myPage-contents-wrap .purchased-wrap {
    display: flex;
    gap: 24px 32px;
    flex-wrap: wrap;
}

.purchased-wrap .purchased-box {
    width: calc((100% / 2) - 16px);
    display: flex;
    flex-direction: column;
    align-items: start;
    padding: 25px 24px 27px;
}

.purchased-wrap .purchased-box .purchased-title {
    font-size: 25px;
    font-weight: 600;
    letter-spacing: 0.48px;
    color: #202020;
}

.purchased-wrap .purchased-box .expiration-date {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.32px;
    color: #2c35fc;
    margin-top: 4px;
}

.myPage-contents-wrap .payment-content {
    margin-top: 40px;
}

.payment-content .payment-list-wrap {
    background-color: #fff;
    border-radius: 16px;
    border: 1px solid #d5d4d4;
    padding-bottom: 40px;
}

.payment-content .payment-list-wrap #pagination {
    margin-top: 52px;
}

.payment-content .payment-list .payment-item {
    display: flex;
    width: 100%;
    align-items: center;
    padding: 12px 0 13px;
    background-color: #fff;
    border-radius: unset;
}

.payment-content .payment-list .payment-item:nth-child(2n-2):not(:first-child) {
    background-color: #5056ff11;
}

.payment-content .payment-list .payment-item-head {
    padding: 14.5px 0;
    border-radius: 16px;
}

.payment-content .payment-list .item-head-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.32px;
    color: #202020;
    line-height: 1;
    text-align: center;
}

.payment-content .payment-list .payment-item .item-date {
    width: 25.5%;
    text-align: center;
}

.payment-content .payment-list .payment-item .item-product {
    width: 53%;
}

.payment-content .payment-list .payment-item .item-pay {
    width: 20%;
}

.payment-content .payment-list .payment-item .item-date {
    width: 25.5%;
    text-align: center;
}

.payment-content .payment-list .payment-item .item-refund {
    width: 9.5%;
    display: flex;
    justify-content: center;
}

.payment-content .payment-list .refund-btn {
    color: #8d8d8d;
}

.payment-content .payment-list .item-title {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.32px;
    color: #202020;
    text-align: center;
}

.payment-content .payment-list .item-list-item {
    line-height: 1;
    margin-top: 4px;
}

.payment-content .payment-list .item-product .item-title {
    text-align: start; text-align: center;
}

.payment-content .payment-list .item-mb-title {
    display: none;
    font-size: 14px;
    font-weight: 600;
    color: #202020;
    letter-spacing: 0.28px;
    margin-right: 3px
}

.payment-content .payment-list .btn-mb-title {
    display: none;
    font-size: 14px;
    color: #8d8d8d;
    letter-spacing: 0.28px;
}

.payment-content .payment-list-wrap .refund-guide-wrap {
    width: 100%;
    text-align: center;
    margin-top: 24px;
}

.payment-content .payment-list-wrap .refund-guide-wrap .refund-txt {
    font-size: 14px;
    letter-spacing: 0.28px;
    color: #202020;
    line-height: 1.57;
}

.payment-content .payment-list-wrap .refund-guide-wrap .refund-txt .point-txt {
    font-weight: 600;
    color: var(--lightish-blue);
}

/* 환불모달 ---------- */
.popUp_box.refund-modal {
    max-width: 560px;
    padding: 40px 48px;
    align-items: start;
}

.refund-modal .title {
    font-size: 22px;
    font-weight: bold;
    color: #202020;
    margin-bottom: 32px;
}

.refund-modal .title-sub.guide {
    font-size: 14px;
    color: #424242;
    line-height: 1.29;
    margin: unset;
}

.refund-modal .title-sub {
    font-size: 16px;
    font-weight: 600;
    line-height: 2;
    margin: 32px 0;
    color: #202020;
}

.refund-modal .modal-textarea {
    margin-top: 16px;
    margin-bottom: 24px;
    height: 120px;
    border-radius: 6px;
    padding: 12px 16px;
}

/* -------------- // */

@media screen and (max-width: 1080px) {
    section.purchased-contents {
        margin-top: 30px;
    }

    .purchased-contents-wrap {
        margin-bottom: unset;
    }

    .purchased-wrap .purchased-box {
        width: 100%;
        box-shadow: 0 3px 16px 0 rgba(80, 87, 255, 0.08);
        padding: 15px;
    }

    .purchased-wrap .purchased-box .purchased-title {
        font-size: 15px;
    }

    .purchased-wrap .purchased-box .expiration-date {
        font-size: 12px;
        margin-top: 3px;
    }

    .myPage-contents-wrap .purchased-wrap {
        gap: 15px;
    }

    .myPage-contents-wrap .payment-content {
        margin-top: 50px;
    }

    .payment-content .payment-list-wrap {
        border: unset;
        border-radius: unset;
        border-top: 1px solid #202020;
        padding-bottom: unset;
    }

    .payment-content .payment-list .payment-item-head {
        display: none;
    }

    .payment-content .payment-list .payment-item {
        position: relative;
        flex-direction: column;
        align-items: start;
        border-radius: unset;
        padding: 25px 15px;
        border-bottom: 1px solid #e4e4e4;
    }

    .payment-content .payment-list .payment-item .item-date {
        width: unset;
        order: 4;
        display: flex;
        align-items: center;
        font-weight: normal;
    }

    .payment-content .payment-list .payment-item .item-pay {
        width: unset;
        margin-bottom: 15px;
    }

    .payment-content .payment-list .payment-item .item-product {
        width: unset;
        margin-bottom: 15px;
    }

    .payment-content .payment-list .item-mb-title {
        display: block;
    }

    .payment-content .payment-list .refund-btn {
        position: absolute;
        right: 15px;
        top: 24px;
        font-size: 14px;
    }

    .payment-content .payment-list .btn-mb-title {
        display: block;
    }

    .payment-content .payment-list-wrap #pagination {
        margin-top: 31px;
    }
}

@media screen and (max-width: 768px) {
    .payment-content .payment-list-wrap .refund-guide-wrap {
        text-align: left;
    }

    .refund-br {
        display: none;
    }

    .payment-content .payment-list-wrap .refund-guide-wrap .refund-txt {
        font-size: 12px;
    }
}

/* // purchasedExam
        ============================= */


/*  ===============================
        memberInfo */
.myPage-contents-wrap .info-input-wrap {
    width: 100%;
    background-color: #f5f5f8;
    border-radius: 16px;
    padding: 56px 88px;
}

.info-input-wrap .info-input-box {
    display: flex;
    align-items: center;
    gap: 40px;
}

.info-input-box .input-default {
    width: 100%;
    max-width: 360px;
}

.info-input-box .input-wrap {
    display: flex;
    gap: 16px;
    width: 100%;
}

.info-input-box .input-type {
    width: 100%;
    max-width: 360px;
    display: flex;
    align-items: center;
    padding: 5px;
    background-color: #fff;
}

.info-input-box .input-title {
    min-width: 199px;
    font-size: 18px;
    font-weight: 500;
}

.info-input-box .input-type .img-wrap {
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 6px;
    border: 1px solid #e4e4e4;
    background-color: #fff;
}

.info-input-box .input-type .img-wrap img {
    max-width: 18px;
}

.info-input-box .input-type .account-txt {
    margin-left: 16px;
    font-size: 18px;
    font-weight: 500;
    color: #202020;
}

.info-input-box .select-box {
    position: relative;
}

.info-input-box .select-box.input-default {
    padding: unset;
}

.info-input-box .select-box .btn_select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    z-index: 2;
    position: relative;
    padding: 11.5px 24px;
}

.info-input-box .select-box .btn_select p {
    font-size: 18px;
    color: #202020;
}

.info-input-box .select-box .btn_select i {
    font-size: 18px;
    color: #202020;
}

.info-input-box .select-box .list_member {
    display: none;
    position: absolute;
    top: 57px;
    left: 0;
    background-color: #fff;
    width: 100%;
    border-radius: 6px;
    border: 1px solid #e4e4e4;
    z-index: 1;
}

.info-input-box .select-box .list_member li {
    display: flex;
    align-items: center;
    padding: 13.5px 24px;
    cursor: pointer;
}

.info-input-box .select-box .list_member li p {
    font-size: 18px;
    font-weight: 500;
    line-height: 1;
}

.info-input-box .select-box .list_member li:hover p {
    font-weight: bold;
}

.info-input-box .select-box.open .btn_select i {
    transform: rotate(0.5turn);
}

.info-input-box .select-box.open .list_member {
    display: block;
    background-color: #fff;
}

.info-input-wrap .btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid #e4e4e4;
}

.myPage-contents-wrap .delect-btn {
    margin-top: 32px;
}

/* 탈퇴팝업 ------------------------ */
.popUp_box.delect-account-modal {
    max-width: 720px;
    padding: 40px 56px;
}

.delect-account-modal .title {
    font-size: 22px;
    font-weight: bold;
    color: #202020;
}

.delect-account-modal .title-sub {
    font-size: 16px;
    color: #424242;
    text-align: center;
    margin-top: 23px;
}

.delect-account-modal .title-sub > span {
    font-weight: bold;
}

.delect-account-modal .modal-line {
    margin-top: 24px;
}

.delect-account-modal .btn-wrap {
    width: 100%;
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 24px;
}

/* //탈퇴팝업 -----------------------*/


@media screen and (max-width: 1080px) {
    .interval-32 {
        margin-bottom: 25px;
    }

    .interval-12 {
        margin-bottom: 15px;
    }

    .member-contents .container {
        padding: unset;
    }

    .member-contents .column-wrap {
        gap: unset;
    }

    .myPage-contents-wrap .info-input-wrap {
        padding: 40px 20px;
        border-radius: unset;
        background-color: #F1F4FF;
    }

    .info-input-wrap .info-input-box {
        flex-direction: column;
        align-items: start;
        gap: 10px;
    }

    .info-input-box .input-default {
        max-width: 768px;
        padding: 11px 15px;
        font-size: 15px;
    }

    .info-input-box .input-title {
        font-size: 14px;
        min-width: unset;
    }

    .info-input-box .input-readonly {
        padding: 4px;
    }

    .info-input-box .input-type .img-wrap {
        width: 32px;
        height: 32px;
    }

    .info-input-box .input-type .account-txt {
        font-size: 15px;
    }

    .info-input-wrap .btn-wrap {
        margin-top: 25px;
        padding-top: 25px;
    }

    .myPage-contents-wrap .delect-btn {
        margin: 50px auto 80px;
    }

    .myPage-contents-wrap .delect-btn {
        font-size: 14px;
    }

    .info-input-box .input-wrap {
        gap: 10px;
    }

    .myPage-contents-wrap .input-btn {
        height: 42px;
        font-size: 14px;
    }

    .info-input-box .select-box .btn_select {
        padding: 2.5px 14px;
        font-size: 15px;
    }

    .info-input-box .select-box .btn_select p {
        font-size: 15px;
    }
}

@media screen and (max-width: 768px) {
    .popUp_box.delect-account-modal {
        padding: 20px 28px;
    }
}

@media screen and (max-width: 395px) {
    .popUp_box.delect-account-modal {
        padding: 20px 17px;
    }

    .delect-account-modal .btn-wrap {
        gap: 8px;
    }
}

/* // memberInfo  ============================= */


/* =====================

         문제 푸는 페이지 공통 컴포넌트

        =======================*/
/* paragraph는 고정 폰트 스타일임. */
.paragraph {
    font-family: var(--sourceSerif);
    font-size: 19px;
    font-weight: 400;
    line-height: 29px;
    color: #202020;
}

/* source-serif 지문/해설은 Inter용 전역 자간 보정(body -0.01em)에서 제외 — serif는 본래 자간 유지 */
.paragraph,
.m-comments.type01 .m-comment,
.test-body .ql-editor *,
.math-body .test-container .problem-wrap .problem-title,
.essay-body .option-body p,
.essay-body .option-body span,
.m-before-bullet.type01,
.ql-snow.solution-detail * {
    letter-spacing: normal;
}

.m-comments.type01 .m-comment {
    padding-left: 12px;
    margin-top: 8px;
    position: relative;
    font-weight: 400;
    font-size: 19px;
    font-family: var(--sourceSerif);
}

.m-comments.type01 .m-comment:first-of-type {
    margin-top: 0;
}

.m-comments.type01 .m-comment:before {
    content: "";
    width: 4px;
    height: 4px;
    position: absolute;
    left: 0;
    top: 10px;
    font-size: 17px;
    background-color: black;
}

.m-comments.type01 .m-comment span {
    font-weight: 600;
    font-family: var(--sourceSerif);
}

@media screen and (max-width: 1600px) {
    .m-comments.type01 .m-comment {
        font-size: 17px;
    }
}

.paragraph .comment {
    position: relative;
}

.paragraph .comment:before {
    content: "·";
    position: absolute;
    left: 0;
    top: 6px;

}

.paragraph .point {
    font-family: var(--sourceSerif);
    font-weight: bold;
}

.section.test-body {
    margin-top: 40px;
}

.test-container {
    padding: 25px 24px 14px 40px;
    min-height: 656px;
    border-bottom: 2px solid #e4e4e4;
}

/* .practice-wrap.problem-wrap {
        border-bottom: 2px solid #e4e4e4;
    }*/
.practice-wrap .test-container {
    border-bottom: none;
}

.test-body .test-container {
    display: flex;
    max-width: 1920px;
    margin: 0 auto;
    /* height: calc(100vh - 95px - 75px); */
    min-height: unset;
    /* overflow-y: auto; */
}

.questionBanks .option-title {
    padding-top: 43px;
}

.questionBanks .test-body .test-container {
    height: calc(100vh - 95px - 108px);
    padding: 25px 120px;
}

.test-body .problem-wrap {
    width: calc(100% / 2);
    height: calc(100vh - 95px - 134px);
    position: relative;
    padding-right: 60px;
    overflow-y: auto;
}

.test-body .problem-wrap::after {
    position: absolute;
    right: 0;
    top: 0;
    transform: translate(-50%);
    content: "";
    display: block;
    height: 100%;
    width: 1px;
    background-color: #e4e4e4;
}

.test-body .option-wrap {
    width: calc(100% / 2);
    height: calc(100vh - 95px - 134px);
    padding-left: 40px;
    padding-right: 24px;
    overflow-y: auto;
}

.test-body .problem-box {
    max-width: 808px;
    max-height: 800px;
    padding-right: 20px;
}

.test-body .problem-box {
    -ms-overflow-style: none; /* 인터넷 익스플로러 */
    scrollbar-width: none; /* 파이어폭스 */
}

.test-body .problem-title {
    margin-bottom: 8px;
    font-family: 'Inter';
    font-size: 24px;
    font-weight: bold;
    color: #202020;
}

.test-body .option-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ================ 지문 선택지 - 라디오박스로 구현 */
.option-title {
    padding-top: 57px;
    margin-bottom: 24px;
    font-size: 19px;
}

.option-item {
    position: relative;
}

.option-item label:after {
    display: none;
    width: 80px;
    text-align: left;
    font-weight: 500;
    position: absolute;
    right: -100px;
    top: 50%;
    transform: translateY(-50%);
}

.option-item.wrong-choice label:after {
    content: "Incorrect";
    color: red !important;
}

.option-item.wrong-choice label {
    border-color: red !important;
}

.option-item.wrong-choice label .item-num {
    background-color: red !important;
    color: transparent !important;
}

.option-item.wrong-choice label .paragraph {
    font-weight: 600 !important;
    color: red !important;
}

.option-item.wrong-choice label .item-num:after {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../images/x.svg") no-repeat;
    background-size: 100%;
    color: #fff;
}

.option-item.correct-choice label {
    border-color: #37aa64 !important;
}

.option-item.correct-choice label:after {
    content: "Correct!";
    color: #37aa64 !important;
}

.option-item.correct-choice label .item-num {
    background-color: #37aa64 !important;
    color: transparent !important;
}

.option-item.correct-choice label .paragraph {
    font-weight: 600 !important;
    color: #5057ff !important;
}

.option-item.correct-choice label .item-num:after {
    content: "";
    width: 18px;
    height: 18px;
    position: absolute;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url("../images/check.svg") no-repeat;
    background-size: 100%;
    color: #fff;
}

.option-item .option-item-content {
    padding-left: 60px;
}

.option-item .option-item-content * {
    cursor: pointer;
}

.option-item .item-num {
    position: absolute;
    left: 10px;
    top: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 18px;
    background-color: #e4e4e4;
    color: #202020;
    font-size: 18px;
    font-weight: 500;
    transform: translateY(-50%);
}

.option-item input {
    display: none;
}

.option-item label {
    display: flex;
    padding: 14px 20px;
    border-radius: 24px;
    border: 2px solid #e4e4e4;
    background-color: #fff;
    cursor: pointer;
}

.option-item label .paragraph {
    font-size: 18px;
    font-weight: 500;
    color: #202020;
    line-height: 1.44;
}

.option-item input:checked ~ label {
    border: solid 2px var(--lightish-blue);
    box-shadow: 0 3px 16px 0 rgba(80, 87, 255, 0.16);
}

.option-item input:checked ~ label p {
    color: #303030;
}

.option-item input:checked ~ label .item-num {
    background-color: var(--lightish-blue);
    color: #fff;
}

/* ============== // 지문 선택지 - 라디오박스로 구현 */

@media screen and (max-width: 1230px) {
    .questionBanks .test-body .test-container {
        padding: 25px 20px;
    }
}

/* // 문제 푸는 페이지 공통 컴포넌트  */


/* questionPage ==============================  */
.question-header {
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 23px 120px;
    background: linear-gradient(93deg, #fbfcff 5%, #eeeffc 93%);
}

.q-header-le .q-le-title {
    font-family: var(--Inter);
    font-size: 16px;
    font-weight: 800;
    color: #2c35fc;
}

.q-header-le .q-le-type {
    font-family: var(--Inter);
    font-size: 18px;
    font-weight: 800;
    color: #202020
}

.question-header .q-header-ri {
    display: flex;
    align-items: center;
    gap: 32px;
}

.q-header-ri .util-wrap {
    display: flex;
    gap: 32px;
}

.q-header-ri .util-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
}

.q-header-ri .util-icon {
    font-size: 32px;
    color: #202020;
    max-width: 32px;
}

.q-header-ri .util-name {
    font-size: 14px;
    font-weight: bold;
    color: #202020;
    margin-top: 4px;
}

.q-header-ri .saveExit-btn {
    border-radius: 20px;
    width: 160px;
    height: 40px;
    font-size: 17px;
    font-weight: bold;
    color: #202020;
}

.q-header-ri .saveExit-btn:hover {
    background-color: #202020;
    color: #fff;
}

section.question-footer {
    max-width: 1920px;
    margin-top: 0px;
    margin-bottom: 0px;
    display: flex;
    justify-content: right;
    padding-right: 96px;
    padding-left: 38%;
}

section.question-footer .explanation-btn {
    font-size: 17px;
}

section.question-footer .state-btn {
    font-size: 17px;
}

.index-wrap {
    height: 40px;
    width: 360px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    background-color: #f5f5f5;
}

.index-wrap .index-txt {
    font-size: 16px;
    font-weight: bold;
    color: #202020;
}

.state-btn-wrap {
    display: flex;
    gap: 24px;
    margin-left: auto;
    align-items: center;
}

.state-btn-wrap .state-btn {
    line-height: 40px;
}

.state-btn-wrap .state-btn i {
    font-size: 20px;
    color: #fff;
    margin-left: 4px;
}

.words-modal .state-btn-wrap .state-btn {
    width:120px;
}
.state-btn-wrap .state-btn.state-again {
    width: 172px; min-width:120px;
}

.state-btn-wrap .explanation-btn {
    font-size: 18px;
    font-weight: 500;
    height: fit-content;
    color: #2c35fc;
    border-bottom: 1px solid #2c35fc;
    line-height: 1;
    cursor: pointer;
}

/*  explanation 모달  */
.popUp_box.explanation-modal {
    max-width: 800px;
    align-items: start;
    padding: 32px 32px 48px;
    border-radius: 36px;
    border: 1px solid #e4e4e4;
    background-color: #fff;
    box-shadow: 0 3px 36px 0 rgb(80 87 255 / 8%);
}


.explanation-modal .close-btn {
    position: absolute;
    right: 32px;
    top: 32px;
    font-size: 24px;
    color: #202020;
    cursor: pointer;
}

.explanation-modal .explanation-title {
    font-size: 22px;
    font-weight: bold;
    color: #202020;
    margin-bottom: 24px;
}

.explanation-modal .explanation-box {
    max-height: 600px;
    overflow-y: scroll;
}

.explanation-modal .explanation-box * {
    font-family: 'Inter';
    font-size: 17px;
    color: #111;
}

/*
    .explanation-modal .explanation-box::-webkit-scrollbar {
        display: none;
    }
    */

.explanation-modal .explanation-box {
    /*
        -ms-overflow-style: none;
        scrollbar-width: none;
         */
    overflow-y: auto;
}

/*  // explanation 모달  */


@media screen and (max-width: 1080px) {


    .question-header {
        padding: unset;
    }

    .question-header .q-header-le {
        width: 100%;
        padding: 15px 20px;
    }

    .question-header .q-header-ri {
        justify-content: space-between;
        padding: 0 20px 0 0px;
    }

    .q-header-ri .util-wrap {
        gap: unset;
    }

    .q-header-ri .util-item {
        padding: 5px;
        border-right: 1px solid #e4e4e4;
    }

    .q-header-ri .util-icon {
        max-width: 20px;
        font-size: 20px;
    }

    .q-header-ri .util-name {
        font-size: 10px;
    }

    .q-header-ri .saveExit-btn {
        width: 92px;
        height: 24px;
        font-size: 12px;
    }

    .test-body .problem-title {
        font-size: 15px;
    }

    .test-body .test-container {
        flex-direction: column;
        padding: 40px 20px 32px;
        border-bottom: unset;
        min-height: unset;
    }

    .test-body .problem-wrap {
        width: 100%;
        height: auto;
        padding-right: unset;
        position: unset;
        overflow-y: visible;
    }

    .test-body .problem-box {
        max-height: unset;
        padding-right: unset;
        max-width: unset;
    }

    .test-body .option-wrap {
        width: 100%;
        padding-left: unset;
        overflow-y: unset;
    }

    .option-title {
        padding-top: 80px;
    }

    /*  explanation 모달 ========  */
    .popUp_box.explanation-modal {
        display: flex;
        left: unset;
        right: 0;
        top: 42px;
        transform: unset;
        max-width: 337px;
        max-height: 640px;
        border-top-right-radius: unset;
        border-bottom-right-radius: unset;
        padding: 37px 30px 30px 32px;
    }

    .explanation-modal .explanation-box {
        max-height: 500px;
    }

    .explanation-modal .close-btn {
        top: 37px;
        right: 30px;
    }

    .explanation-modal .explanation-title {
        line-height: 1;
    }

    /* // explanation 모달 ====== */
}

/* // questionPage ==============================  */


/*practicePage ==============================  */
.practice-wrap {
    padding: 0 140px;
}

.practice-wrap .test-body .test-container {
    padding: 40px 0 40px 0;
}

section.practice-header {
    position: relative;
}

.practice-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 25px 24px 14px 40px;
    background: #fff;
    border: 2px solid #e4e4e4;
    border-bottom-left-radius: 36px;
    border-bottom-right-radius: 36px;
}

.p-header-le .p-le-title {
    font-size: 18px;
    font-weight: 600;
    color: #202020;
}

.p-header-le .p-le-type {
    font-family: var(--Inter);
    font-size: 18px;
    font-weight: 800;
    color: #202020
}

.practice-header .direction-btn {
    display: flex;
    align-items: center;
    gap: 4px;
}

.practice-header .direction-btn .btn-title {
    font-size: 16px;
    color: #202020;
}

.practice-header .direction-btn i {
    margin-top: 4px;
}

.practice-header .direction-btn.open i {
    transform: rotate(180deg);
}


@media screen and (max-width: 1080px) {
    .p-header-le .p-le-title {
        font-size: 14px;
    }

    .practice-header {
        padding-left: 24px;
    }

    .practice-header .direction-btn .btn-title {
        font-size: 12px;
    }

    .practice-header .direction-btn i {
        font-size: 13px;
    }

    .practice-wrap {
        padding: 0 20px;
    }
}

@media screen and (max-width: 768px) {
    .practice-header {
        padding: 25px 12px 14px 12px;
    }
}

/* ------------- directions  팝업 -----------------------------------------------------*/
.directions-popup.popUp_box {
    width: 80%;
    max-width: 1257px;
    border-radius: unset;
    padding-bottom: 32px;
    display: flex;
}

.directions-popup .direction-content {
    width: 100%;
    height: 500px;
    overflow-y: auto;
}

.directions-popup .btn-wrap {
    justify-content: right;
    margin-top: 20px;
}

.directions-popup .popup-close-btn:hover {
    background-color: #202020;
    color: #fff;
}

@media screen and (max-width: 1600px) {
    .directions-popup.popUp_box {
        width: 70%;
    }

    .directions-popup .direction-content {
        font-size: 17px;
    }

}

/* ------------- // ----------------------------------------------------------------- */

.p-header-ri .saveExit-btn {
    border-radius: 20px;
    width: 160px;
    height: 40px;
    font-size: 18px;
    font-weight: bold;
    color: #202020;
    line-height: 1;
}

.p-header-ri .saveExit-btn:hover {
    background-color: #202020;
    color: #fff;
}

.p-header-mid {
    position: absolute;
    left: 50%;
    transform: translate(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
}

.p-header-mid .time-view-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 25px;
    border: 1px solid #202020;
    border-radius: 12.5px;
    background-color: #fff;
    font-size: 18px;
    font-weight: bold;
    color: #202020;
    line-height: 1;
    cursor: pointer;
}

.p-header-mid .text-time {
    font-size: 26px;
    font-weight: 600;
    color: #202020;
    line-height: 1;
    margin-bottom: 4px;
}

.p-header-mid .icon-time {
    font-size: 26px;
    font-weight: 600;
    color: #202020;
    margin-bottom: 4px;
}

.p-header-mid .icon-time.hide {
    display: none;
}

.p-header-mid .text-time.hide {
    display: none;
}

.option-head {
    position: relative;
    width: 100%;
    height: 48px;
    display: flex;
    justify-content: space-between;
    background-color: #f5f5f8;
    padding: 14px 24px 14px 62px;
    border-radius: 24px;
}

.option-head .option-head-le {
    display: flex;
    align-items: center;
}

.option-head-num {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    background-color: #202020;
    color: #fff;
    border-top-left-radius: 24px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    font-size: 20px;
    font-weight: bold;
}

.option-head .paragraph {
    font-family: 'Inter';
    font-weight: 500;
    font-size: 17px;
}

.practice-body .mark-btn input {
    display: none;
}

.practice-body .mark-btn label i {
    font-size: 26px;
    color: #202020;
    cursor: pointer;
}

.practice-body .mark-btn label i.done {
    color: #ff7f27;
}

.practice-body .mark-btn {
    margin-right: 8px;
}

.practice-body .undo-btn {
    position: relative;
    font-size: 14px;
    font-weight: 600;
    color: #202020;
}

.practice-body .undo-btn::after {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translate(-50%);
    content: "";
    display: block;
    height: 33px;
    width: 1px;
    background-color: #202020;
    transform: rotate(62deg);
}

.practice-body .undo-btn.active {
    background-color: #2c35fc;
    color: #fff;
}

.practice-body .undo-btn.active::after {
    background-color: #fff;
}

.practice-body .problem-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: start;
    overflow-y: auto;
}

.problem-wrap {
    /*       -ms-overflow-style: none; !* 인터넷 익스플로러 *!
        scrollbar-width: none; !* 파이어폭스 *!*/
}

.test-body .sendReport-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    margin-top: 40px;
    margin-bottom: 40px;
    gap: 8px;
}

.test-body .sendReport-btn * {
    color: #b0b0b0;
}

.problem-wrap .sendReport-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: auto;
    margin-top: 40px;
    margin-bottom: 40px;
    margin-left: auto;
    gap: 8px;
}

.problem-wrap .sendReport-btn .btn-title {
    font-size: 16px;
    font-weight: 500;
    color: #b0b0b0;
    transition: all 0.5s;
}

.problem-wrap .sendReport-btn i {
    font-size: 20px;
    font-weight: normal;
    color: #b0b0b0;
    transition: all 0.5s;
}

.practice-body .option-title {
    padding-top: 24px;
}

.practice-body .option-item .item-num {
    top: 50%;
    transform: translateY(-50%);
}

.practice-body .option-item label .paragraph {
    display: flex;
    align-items: center;
}

.practice-body .problem-box {
    padding-right: unset;
}

/* undo-btn 액션 (1)(2)(3)*/
.practice-body .option-item {
    display: flex;
    transition: all 1s;
}

.practice-body .option-item .option-item-content {
    width: 100%;
}

.practice-body .option-item .option-item-content * {
    cursor: pointer;
}

.practice-body .option-item .option-item-content.undo-line {
    position: relative;
}

.practice-body .option-item .option-item-content.undo-line::after {
    position: absolute;
    content: '';
    display: block;
    width: calc(100% + 20px);
    height: 1px;
    background-color: #202020;
    left: -7%;
    top: 50%;
    transform: translate(5%, -50%);
}

.practice-body .option-item .option-undo-btn {
    width: fit-content;
    height: fit-content;
    border-bottom: 1px solid #202020;
    font-size: 18px;
    font-weight: bold;
    color: #202020;
}

.practice-body .option-item .option-undo-btn.before {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    position: relative;
    min-width: 30px;
    min-height: 30px;
    border: 1px solid #202020;
    border-radius: 50%;
}

.practice-body .option-item .option-undo-btn.before::after {
    position: absolute;
    display: block;
    content: "";
    width: 38px;
    height: 1px;
    background-color: #202020;
    left: 50%;
    top: 50%;
    transform: translate(-50%);
}

.practice-body .option-item .undo-wrap {
    display: none;
    min-width: 100px;
    justify-content: center;
    align-items: center;
}

.practice-body .option-item .undo-wrap.active {
    display: flex;
}

.practice-body .option-item .undo-wrap.active .option-undo-btn.before.hidden-chk {
    display: none;
}

.practice-body .option-item .undo-wrap.active .option-undo-btn.after {
    display: none;
}

.practice-body .option-item .undo-wrap.active .option-undo-btn.after.undo-chk {
    display: block;
}

.practice-body .option-item.undo-out .item-num {
    color: #e4e4e4;
    background-color: #fff;
    border: 3px solid #e4e4e4;
}

.practice-body .option-item.undo-out .paragraph {
    color: #e4e4e4;
}

.practice-body .option-item.undo-out input:checked ~ label {
    border: solid 2px #e4e4e4e4;
    box-shadow: unset;
}

.practice-body .option-item.undo-out input:checked ~ label p {
    color: #e4e4e4;
}

.practice-body .option-item.undo-out input:checked ~ label .item-num {
    color: #e4e4e4;
    background-color: #fff;
    border: 3px solid #e4e4e4;
}

/* //undo-btn 액션  */

section.practice-footer {
    width: 100%;
    padding: 20px 140px;
    margin: 14px auto 0px;
    position: fixed;
    bottom: 0px;
    left: 0;
    z-index: 1;
    background-color: #fff;
    border-top: 2px solid #e4e4e4;
}

.practice-footer .inner-wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}

.practice-footer .footer-title-wrap {
    display: flex;
    align-items: baseline;
}

.practice-footer .fixed-title {
    font-size: 14px;
    font-weight: 500;
    margin-right: 8px;
}

.practice-footer .test-title {
    font-size: 18px;
    font-weight: bold;
}

.practice-footer .index-wrap {
    height: 40px;
    width: 185px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 20px;
    background-color: #fff;
    border: 2px solid #e4e4e4;
    cursor: pointer;
}

.practice-footer .index-wrap .index-txt {
    font-size: 16px;
    font-weight: bold;
    color: #202020;
}

.practice-footer .index-wrap i {
    font-size: 16px;
    color: #202020;
    margin-left: 8px;
}

.practice-footer .state-btn-wrap {
    display: flex;
    gap: 24px;
    align-items: center;
}

.practice-footer .state-btn-wrap .state-btn {
    line-height: 40px;
}
.practice-footer .state-btn-wrap .state-prev:hover {
    background-color: #fff !important;
    color: #5057ff !important;
    border: 2px solid #5057ff !important;
}

.practice-footer .state-btn-wrap .state-btn i {
    font-size: 20px;
    color: #fff;
    margin-left: 4px;
}

.practice-footer .state-btn-wrap .state-prev i {
    margin-left: 0;
    margin-right: 4px;
}

.practice-footer .state-btn-wrap .state-btn.state-again {
    width: 172px;
}

.practice-footer .state-btn-wrap .explanation-btn {
    font-size: 18px;
    font-weight: 500;
    height: fit-content;
    color: #2c35fc;
    border-bottom: 1px solid #2c35fc;
    line-height: 1;
    cursor: pointer;
}

.practice-footer .state-board-btn.open i {
    transform: rotate(180deg);
}


@media screen and (max-width: 1080px) {
    .p-header-mid .text-time {
        font-size: 20px;
    }

    .p-header-mid .icon-time {
        font-size: 20px;
    }

    .p-header-mid .time-view-btn {
        width: 60px;
        height: 20px;
        font-size: 15px;
    }
}

/* ------------- 상태 보드 팝업 -----------------------------------------------------*/
.state-board.popUp_box {
    max-width: 640px;
    padding: 27px 32px 20px;
}

.state-board img {
    max-width: 18px;
}

.state-board .mark-icon {
    color: #ff7f27;
    font-size: 21px;
}

.state-board .current-icon {
    color: #202020;
    font-size: 18px;
}

.state-board .close-icon {
    position: absolute;
    font-size: 20px;
    color: #424242;
    right: 32px;
    top: 30px;
    cursor: pointer;
}

.state-board .board-item-wrap {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding: 7px 56px;
    border-top: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
}

.state-board .board-item-wrap .fragment {
    display: flex;
}

.state-board .board-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.state-board .board-title {
    font-size: 18px;
    font-weight: bold;
    color: #202020;
    text-align: center;
}

.state-board .unanswered-item {
    margin: 0 24px 0 38px;
}

.state-board .board-map-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 22px 16px;
    padding-left: 8px;
    margin: 30px auto 24px;
    margin-bottom: 24px;
    padding: 0 54px;
}

.state-board .board-map-wrap .item-wrap {
    position: relative;
}

.state-board .board-map-wrap .map-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 32px;
    height: 32px;
    border: 1px dashed #707070;
    font-size: 16px;
    font-weight: 600;
    color: #202020;
}

.state-board .board-map-wrap .map-item.answered {
    background-color: #5057ff;
    color: #fff;
}

.state-board .item-wrap .current-icon {
    position: absolute;
    top: -59%;
    left: 50%;
    transform: translate(-50%);
}

.state-board .item-wrap .mark-icon {
    position: absolute;
    top: -5px;
    right: -10px;
}

.state-board .reviewPage-btn {
    margin: 0 auto;
    cursor: pointer;
}

/* ------------- // -----------------------------------------------------*/

/* ------------- sendReport 팝업 -----------------------------------------------------*/
.sendReport-popup.popUp_box {
    max-width: 560px;
    padding: 40px 48px 40px 47px;
}

.sendReport-popup .popup-title {
    font-size: 22px;
    font-weight: bold;
    color: #202020;
    text-align: center;
}

.sendReport-popup .popup-sub {
    font-size: 16px;
    color: #424242;
    text-align: center;
    margin-top: 23px;
}

.sendReport-popup .input-default {
    width: 100%;
    height: 120px;
    padding: 12px 16px;
    margin-top: 24px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.43;
}

.sendReport-popup .input-default::placeholder {
    font-size: 14px;
    font-weight: 500;
    color: #202020;
    opacity: 0.4;
}

.sendReport-popup .popup-sendReport-btn {
    margin-top: 24px;
}

/* ------------- // -----------------------------------------------------*/


.question-footer .inner-wrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 20px 120px;
    position: fixed;
    bottom: 0;
    left: 0;
}

.index-wrap {
    height: 40px;
    width: 360px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background-color: #f5f5f5;
}

.index-wrap .index-txt {
    font-size: 16px;
    font-weight: bold;
    color: #202020;
}

.state-btn-wrap {
    display: flex;
    gap: 24px;
    align-items: center;
}

.state-btn-wrap .state-btn {
    line-height: 40px;
}

.state-btn-wrap .state-btn i {
    font-size: 20px;
    color: #fff;
    margin-left: 4px;
}

.state-btn-wrap .state-btn.state-again {
    width: 172px;
}

.state-btn-wrap .btn-green.state-btn.state-again {
    width: 120px;
}

.step-login > .title {
    margin-bottom: 32px;
    font-size: 20px;
    font-weight: 500;
}

.step-login > .title .point {
    font-weight: bold;
    font-size: 20px;
    color: var(--lightish-blue);
}

@media screen and (max-width: 768px) {
    .step-login > .title {
        font-size: 18px;
    }

    .step-login > .title .point {
        font-size: 18px;
    }
}

.state-btn-wrap .explanation-btn {
    font-size: 16px;
    font-weight: 500;
    height: fit-content;
    color: #2c35fc;
    border-bottom: 1px solid #2c35fc;
    line-height: 1;
    cursor: pointer;
}

@media screen and (max-width: 1768px) {
    .practice-wrap {
        padding: 0 60px;
    }

    section.practice-footer {
        padding: 20px 60px;
    }

    .practice-footer .inner-wrap {
        padding-left: 14px;
    }
}

@media screen and (max-width: 1280px) {
    .test-body .test-container {
        height: unset;
        max-height: unset;
    }
}

@media screen and (max-width: 1230px) {
    section.question-footer {
        padding: unset;
    }

    .question-footer .inner-wrap {
        padding: 20px;
        max-width: unset;
        align-items: center;
    }

    .question-footer .inner-wrap .state-btn-wrap {
        margin-top: 0;
        margin-right: 0;
    }

    .question-footer .inner-wrap .index-wrap {
        margin-right: auto;
        margin-left: 0;
        position: static;
        transform: none;
    }

    section.question-footer .explanation-btn {
        margin-left: auto;
    }

    .index-wrap {
        margin: 0 auto;
    }

    .state-btn-wrap {
        margin: 0 auto;
        justify-content: space-between;
        margin-top: 20px;
    }

    .practice-footer .state-btn-wrap {
        width: unset;
        margin: unset;
    }
}

@media screen and (max-width: 1080px) {
    .practice-body .problem-wrap {
        padding-left: unset;
    }

    .practice-body .option-wrap {
        margin-top: 80px;
    }
}

@media screen and (max-width: 768px) {
    section.question-footer {
        justify-content: center;
        width: 95%;
    }

    .question-footer .inner-wrap {
        width: 100%;
    }

    .question-footer .index-wrap {
        width: 100%;
    }

    .state-btn-wrap {
        width: 100%;
    }
}

/* // practicePage ==============================  */


/* ======================================
        mathMultifulpage 수학 객관식 페이지 */

/* ---- math 페이지 공통 */
.math-header .q-header-ri {
    display: flex;
    gap: 24px;
    align-items: center;
}

.math-body .test-container {
    position: relative;
}

.math-body .test-container .problem-wrap .problem-title {
    font-family: var(--sourceSerif);
}

.math-body .sendReport-btn .btn-title {
    font-size: 16px;
    font-weight: 500;
    color: #b0b0b0;
    transition: all 0.5s;
}

.math-body .sendReport-btn i {
    font-size: 20px;
    font-weight: normal;
    color: #b0b0b0;
    transition: all 0.5s;
}

/* ------------- */

.multiful-body .test-container {
    justify-content: center;
    padding-top: 48px;
}

/* //mathMultifulpage 수학 객관식 페이지
        =========================================*/


/* mathEssayPage 주관식 페이지 */
.essay-body .option-body {
    margin-top: 24px;
}

.essay-body .option-body p, .essay-body .option-body span {
    font-family: var(--sourceSerif);
}

.essay-body .answer-box {
    margin-top: 30px;
    border: 1px solid #202020;
    border-radius: 10px;
    height: 50px;
    width: 130px;
    padding: 0 10px;
}

.essay-body .preview-box {
    display: flex;
    align-items: center;
    min-height: 25px;
    margin-top: 30px;
}

.essay-body .preview-box .box-state {
    margin-left: 20px;
}

.essay-body .preview-box .state {
    font-weight: bold;
}

.essay-body .preview-box .state.incorrect {
    color: red;
}

.essay-body .preview-box .state.correct {
    color: #37aa64;
}

.essay-body .preview-box .preview-box-title {
    margin-right: 8px;
    font-size: 16px;
    font-weight: 500;
}

.essay-body .answer-box + #output {
    margin-top: 16px;
}

/*
    .essay-body .answer-box + #output .katex .mord.mtight {
        font-size:16px;
    }
     */
.essay-body .answer-box .answer-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid #202020;
    margin-top: 5px;
    text-align: center;
}

.essay-body .problem-wrap::after {
    display: none;
}

.essay-body .option-wrap {
    position: relative;
}

.essay-body .option-wrap::after {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(-50%);
    content: "";
    display: block;
    height: 100%;
    width: 1px;
    background-color: #e4e4e4;
}

/* // mathEssayPage 주관식 페이지 */


/* testBreack ====================================  */
.breakPage {
    background-color: #333;
}

.break-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1728px;
    height: 96px;
    padding: 0 96px;
    margin: 0 auto;
}

.break-header .break-title {
    font-size: 26px;
    font-weight: bold;
    color: #fff;
}

.break-header .break-fixed {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    margin-right: 4px;
}

.break-header .saveExit-btn {
    border-radius: 20px;
    width: 160px;
    height: 40px;
    font-size: 18px;
    font-weight: bold;
    color: #202020;
    line-height: 1;
}

.breakPage .problem-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.breakPage .time-box {
    border: 1px solid #fff;
    text-align: center;
    border-radius: 16px;
    padding: 22px 33px;
}

.breakPage .time-box .time-title {
    font-size: 24px;
    font-weight: 600;
    color: #fff;
}

.breakPage .time-box .time {
    font-size: 80px;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}

.breakPage .option-wrap {
    display: flex;
    overflow-y: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.breakPage .option-wrap::-webkit-scrollbar {
    display: none;
}

.breakPage .option-wrap .break-info-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 400px;
}

.breakPage .option-wrap p {
    color: #fff;
}

.breakPage .option-wrap .break-title {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 26px;
}

.breakPage .option-wrap .break-title.block-3 {
    font-size: 18px;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 14px;
}

.breakPage .option-wrap .break-sub {
    display: flex; margin-bottom:6px;
    font-size: 18px;
    opacity: 0.72;
    line-height: 1.6;
}

.breakPage .option-wrap .break-sub p {
    font-size: 18px;
    line-height: 1.6;
}

.breakPage .block-1 {
    padding-bottom: 24px;
    border-bottom: 1px solid #fff;
    line-height: 1.78;
}

.breakPage .block-2 {
    margin-top: 32px;
}

.breakPage .option-wrap .break-sub.mid {
    margin-bottom: 16px;
    line-height: 1;
}

.breakPage .option-wrap .break-sub.btm {
    margin-bottom: 20px;
    line-height: 1;
}

.breakPage .break-sub .list-num {
    height: fit-content;
    margin-top: 5px;
    display: inline-block;
    font-size: 18px;
    color: #fff;
    opacity: 0.72;
    min-width: 24px;
}

.breakPage .question-footer {
    max-width: 1728px;
    justify-content: left;
    padding-left: unset;
    margin: unset;
    padding-right: unset;
    padding-left: 120px;
    margin: 0 auto;
    border-top: 1px solid #fff;
}

.breakPage .user-name {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
    padding: 22px 0 24px;
}

.breakPage .test-body .test-container {
    max-width: 1728px;
    height: calc(100vh - 96px - 73px);
    min-height: unset;
    overflow-y: scroll;
    padding-top: 51px;
    padding-bottom: 79px;
    border-bottom: unset;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.breakPage .test-body .test-container::-webkit-scrollbar {
    display: none;
}

@media screen and (max-width: 1080px) {
    .break-header {
        padding: 0 20px;
    }

    .breakPage .question-footer {
        padding-left: 24px;
    }
}

/* ------ resume testing 높이 반응형 ----------------------*/

@media screen and (max-height: 920px) {
    .break-header {
        height: 56px;
        padding-top: 10px;
    }

    .breakPage .test-body .test-container {
        height: calc(100vh - 56px - 73px);
    }
}

@media screen and (max-height: 900px) {
    .breakPage .option-wrap .break-title {
        margin-bottom: 15px;
        line-height: 1;
    }

    .breakPage .option-wrap .break-sub {
        line-height: 1.5;
    }

    .breakPage .option-wrap .break-sub p {
        line-height: 1.5;
    }

    .breakPage .block-1 {
        padding-bottom: 12px;
    }

    .breakPage .block-2 {
        margin-top: 20px;
    }

    .breakPage .option-wrap .break-sub.mid {
        margin-bottom: 12px;
    }

    .breakPage .option-wrap .break-title.block-3 {
        margin-top: 20px;
        margin-bottom: 12px;
    }

    .breakPage .option-wrap .break-sub.btm {
        margin-bottom: 12px;
    }
}

@media screen and (max-height: 780px) {
    .breakPage .option-wrap .break-info-wrap {
        min-height: 520px;
    }
}

@media screen and (max-height: 768px) {
    .breakPage .option-wrap .break-sub.mid {
        margin-bottom: 10px;
    }

    .breakPage .option-wrap .break-sub.btm {
        margin-bottom: 10px;
    }

    .breakPage .test-body .test-container {
        padding-bottom: 59px;
    }
}

@media screen and (max-height: 710px) {
    .breakPage .option-wrap .break-info-wrap {
        min-height: 500px;
    }
}

@media screen and (max-height: 690px) {
    .breakPage .option-wrap .break-info-wrap {
        min-height: 600px;
    }
}

/* ------ //resume testing 높이 반응형 -------------------------------------*/

/* // testBreack ====================================  */


/* finshedPage */
section.finish-section {
    height: calc(100vh - 90px);
    display: flex;
    align-items: center;
}

.finish-section .container {
    max-width: 720px;
    margin: 0 auto 0;
    text-align: center;
}

.finish-section .finish-title {
    font-size: 40px;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: #202020;
}

.finish-section .finish-content-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 11px 0;
    border-radius: 30px;
    background-color: #fff;
    box-shadow: 0 3px 36px 0 rgba(0, 0, 0, 0.08);
    border: solid 1px #e4e4e4;
    margin-top: 32px;
}

.finish-section .finish-content-wrap .img-wrap {
    max-width: 604px;
}

.finish-section .finish-content-wrap .finish-sub {
    font-size: 16px;
    letter-spacing: 0.32px;
    color: #202020;
    margin-top: -50px;
    margin-bottom: 30px;
}

.finish-section .view-score-btn {
    margin: 42px auto 0;
}

/* // finshedPage */


/* =====================================
    orderResultPage */
.orderResult-subpage {
    min-height: unset !important;
    background-image: unset;
}

.orderResult-subpage .bg-content {
    min-height: calc(100vh - 256px);
    height: 100%;
}

section.orderResult {
    position: relative;
    padding: 80px 0;
    min-height: calc(100vh - 80px - 256.5px);
    display: flex;
    align-items: center;
}

section.orderResult .title {
    position: unset;
    text-align: center;
    font-size: 52px;
    font-weight: bold;
    color: #202020;
    letter-spacing: 1.04px;
}

section.orderResult .title::after {
    display: none;
}

section.orderResult .sub {
    text-align: center;
    font-size: 20px;
    font-weight: normal;
    color: #202020;
    margin-top: 17px;
    letter-spacing: 0.4px;
}

section.orderResult .btn-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 119px;
}

section.orderResult .move-btn {
    width: 100%;
    max-width: 214px;
    height: 48px;
    border-radius: 24px;
    box-shadow: 0 3px 6px 0 rgba(80, 87, 255, 0.16);
    background-color: #f4f6fb;
    color: #2c35fc;
    font-weight: bold;
    font-size: 18px;
}

section.orderResult .move-btn i {
    color: #2c35fc;
    font-weight: bold;
    font-size: 18px;
    margin-left: 8px;
}

@media screen and (max-width: 768px) {
    .orderResult-subpage .bg-content {
        height: calc(100vh - 56px);
    }

    section.orderResult .title {
        font-size: 40px;
    }

    section.orderResult .btn-wrap {
        margin-top: 50px;
        gap: 12px;
    }

    section.orderResult {
        padding-top: unset;
        height: calc(100vh - 111px);
    }

    section.orderResult .move-btn {
        font-size: 15px;
    }

    section.orderResult .move-btn i {
        font-size: 15px;
    }
}

/*  //orderResultPage */


/* =====================================
    moveBoardPage */
.moveBoardPage .practice-footer {
    background-color: #fff;
    bottom: 10px;
}

section.moveBoard-section {
    height: calc(100vh - 90px - 80px);
}

.moveBoard-section .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.moveBoard-section .board-title-wrap {
    margin-top: 20px;
    width: fit-content;
    text-align: center;
}

.moveBoard-section .board-title-wrap .board-title {
    font-size: 52px;
}

.moveBoard-section .board-title-wrap .board-sub {
    font-size: 18px;
}

.moveBoard-section .board-title-wrap .board-sub.top {
    margin-top: 20px;
}

.moveBoard-section .board-title-wrap .board-sub.btm {
    margin-top: 4px;
}

.moveBoard-section .state-board {
    margin-top: 36px;
    margin-bottom: 100px;
    width: 100%;
    max-width: 800px;
    border-radius: 16px;
    box-shadow: 0 3px 36px 0 rgba(0, 0, 0, 0.08);
    background-color: #fff;
    padding: 20px;
}

.moveBoard-section .state-board .board-map-wrap {
    gap: 30px 28px;
}

.moveBoard-section .state-board .board-map-wrap .map-item {
    width: 40px;
    height: 40px;
}

.moveBoard-section .state-board .mark-icon {
    font-size: 28px;
}

.moveBoard-section .state-board .item-wrap .mark-icon {
    top: -11px;
    right: -12px;
}

.moveBoard-section .state-board .current-icon {
    font-size: 26px;
    top: -63%;
}

.moveBoard-section .state-board .board-map-wrap {
    margin: 40px auto 24px;
}

.moveBoard-section .bold {
    font-weight: bold;
}

/* //moveBoardPage */

@media screen and (max-width: 1600px) {
    .moveBoard-section .board-title-wrap .board-title {
        font-size: 30px;
    }

    .moveBoard-section .board-title-wrap .board-sub.top {
        margin-top: 12px;
    }

    .moveBoard-section .board-title-wrap .board-sub {
        font-size: 16px;
    }

    .moveBoard-section .state-board {
        margin-top: 24px;
    }
}


/*===========================================================================
          이용약관
        ============================================================================*/

:root {
    --mainColor: #e8961e; /* 사이트 메인색상 */
    --linkColor: #2680eb; /* 링크텍스트 색상 */
    --poRed: red;
}

.policy .container {
    padding-bottom: 300px;
}

.privacy .container {
    padding-bottom: 140px;
}

.policy .policy-top {
    margin-top: 5%;
    margin-bottom: 56px;
    display: flex;
    justify-content: center;
    text-align: center;
}

.policy .policy-top h2 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.79;
    color: #202020;
}

.policy .policy-list {
    max-width: 1280px;
    display: flex;
    margin: 0 auto;
    flex-direction: column;
    gap: 40px;
    padding-top: 15px;
    margin-bottom: 52px;
    word-break: keep-all;
}

.policy .policy-list .scroll-wrap {
    width: 100%;
    overflow: scroll;
}

.policy .policy-list h3 {
    margin-bottom: 8px;
    font-size: 22px;
    font-weight: bold;
    color: #202020;
    word-break: keep-all;
}

.policy .policy-list p {
    font-size: 20px;
    font-weight: 500;
    line-height: 32px;
    color: #202020;
    word-break: keep-all;
}

.policy .policy-list table {
    width: 100%;
    font-size: 10px;
    margin-top: 20px;
    border: 1px solid #333;
}

.policy .policy-list thead {
    text-align: center;
    background-color: #dadada;
}

.policy .policy-list tbody {
    text-align: center;
}

.policy .policy-list th {
    padding: 8px;
    border: 1px solid #333;
}

.policy .policy-list td {
    padding: 8px;
    border: 1px solid #333;
    line-height: 1.5;
}

.policy .policy-num-wrap {
    display: flex;
    gap: 5px;
}

.policy a {
    color: var(--linkColor);
}

.policy .po-left {
    margin-left: 15px;
}

.policy .po-2depth {
    margin-left: 30px;
}

.policy .br-573 {
    display: none;
}

@media screen and (max-width: 1440px) {
    .policy .container {
        width: 100%;
        padding: 0 20px;
    }
}

@media screen and (max-width: 573px) {
    .policy .policy-top h2 {
        font-size: 35px;
    }

    .policy .br-573 {
        display: block;
    }
}

/* // */


.find-password .m-input-text input {
    height: 50px;
    text-align: center;
}

.signup {
    min-height: calc(100vh - 372px);
    padding: 160px 20px 120px;
    background: #f5f5f5;
}

.signup.align-center {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
}

.signup .main-title-wrap {
    text-align: center;
    width: 100%;
    max-width: 720px;
    margin: 0 auto 80px;
}

.signup .main-title-wrap .title {
    font-size: 48px;
    margin-bottom: 24px;
}

.signup .main-title-wrap .txt {
    font-size: 17px;
    font-weight: 300;
    margin-bottom: 48px;
}

.signup .main-title-wrap .signup-state {
    justify-content: center;
    gap: 120px;
}

.signup .main-title-wrap .signup-state-item {
    position: relative;
    z-index: 0;
}

.signup .main-title-wrap .signup-state-item:not(:first-child)::after {
    content: '';
    display: block;
    width: 122px;
    height: 2px;
    background: #adadad;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-25%, -50%);
    z-index: -1;
}

.signup .main-title-wrap .signup-state-item .number {
    display: block;
    width: 32px;
    height: 32px;
    border: 2px solid #adadad;
    text-align: center;
    line-height: 28px;
    font-size: 14px;
    font-weight: 500;
    color: #adadad;
    border-radius: 50%;
    background: #f5f5f5;
}

.signup .main-title-wrap .signup-state-item .txt {
    position: absolute;
    font-size: 14px;
    color: #adadad;
    font-weight: 500;
    white-space: nowrap;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
    bottom: -16px;
    margin: 0;
}

.signup .main-title-wrap .signup-state-item.active::after {
    background: #5057ff;
}

.signup .main-title-wrap .signup-state-item.active .number {
    border: 2px solid #5057ff;
    color: #5057ff;
}

.signup .main-title-wrap .signup-state-item.active .txt {
    color: #5057ff;
    font-weight: 500;
}

.signup .main-title-wrap .signup-state-item.prev::after {
    background: #5057ff;
}

.signup .main-title-wrap .signup-state-item.prev .number {
    border: 2px solid #5057ff;
    background: #5057ff;
    color: #fff;
}

.signup .main-title-wrap .signup-state-item.prev .txt {
    color: #5057ff;
    font-weight: 500;
}

.signup-wrap {
    width: 100%;
    max-width: 650px;
    margin: 0 auto;
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.15);
    border-radius: 16px;
    overflow: hidden;
}

.signup-form {
    width: 100%;
    background: #fff;
    padding: 56px;
}

.signup-form .title-wrap {
    margin-bottom: 42px;
    text-align: center;
    position: relative;
}

.signup-form .title-wrap .title {
    font-size: 32px;
    color: #5057ff;
}

.signup-form .title-wrap .number {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #5057ff;
    text-align: center;
    line-height: 48px;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
    margin: 0 auto 24px;
}

.signup-form .title-wrap .sub-title {
    font-size: 18px;
    margin-top: 24px;
}

.signup-form .title-wrap .notice {
    font-size: 16px;
    color: #ff0000;
    font-weight: bold;
    text-align: right;
    position: absolute;
    bottom: 16px;
    right: 0;
}

.signup-wrap .btn-wrap {
    justify-content: center;
    margin-top: 48px;
}

.signup-wrap .submit-btn {
    width: 100%;
    height: 76px;
    line-height: 76px;
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #fff;
    background: #5057ff;
    padding: 0;
}

.signup-wrap .next-btn {
    padding: 0 64px;
    height: 56px;
    border-radius: 28px;
    border: 2px solid #5057ff;
    background: #fff;
    text-align: center;
    line-height: 52px;
    font-size: 16px;
    font-weight: bold;
    color: #5057ff;
}

@media screen and (max-width: 768px) {
    .signup {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .signup-form .title-wrap .title {
        font-size: 24px;
    }

    .signup-form .title-wrap .sub-title {
        font-size: 14px;
        word-break: keep-all;
    }

    .signup-form .title-wrap .sub-title br {
        display: none;
    }

    .signup-form .m-btn.type01 {
        font-size: 14px;
    }
}

/* signup 원페이지 */
.onepage {
    padding: 160px 0 120px;
    min-height: calc(100vh - 259px);
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.onepage-wrap {
    text-align: center;
}

.onepage-wrap .title {
    margin-bottom: 40px;
}

.onepage-wrap .title .icon {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    border: 4px solid #0097ff;
    text-align: center;
    line-height: 78px;
    margin: 0 auto 40px;
}

.onepage-wrap .title .icon i {
    font-size: 48px;
    color: #0097ff;
    line-height: 76px;
}

.onepage-wrap .title h2 {
    font-size: 48px;
    font-weight: normal;
}

.onepage-wrap .title h2 .blue {
    font-weight: 600;
    font-size: 48px;
    width: fit-content;
}

.onepage-wrap .txt {
    margin-bottom: 40px;
    display: flex;
    flex-flow: column;
    gap: 16px;
}

.onepage-wrap .txt p {
    font-size: 18px;
    color: #878787;
}

.onepage-wrap .txt a {
    font-size: 18px;
    color: #0097ff;
    text-decoration: underline;
}

.onepage-wrap .onepage-btn {
    width: 300px;
    height: 64px;
    text-align: center;
    line-height: 64px;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);
    border-radius: 32px;
    background: #0097ff;
    font-size: 18px;
    color: #fff;
    font-weight: bold;
    margin: 0 auto;
    transition: .2s;
}

.onepage-wrap .onepage-btn:hover {
    background: #0a8ce2;
}

/* 회원가입 완료 */
.signup.onepage {
    background: #fff;
}

.signup.onepage .onepage-wrap .title {
    font-size: 48px;
    font-weight: 500;
}

.signup.onepage .onepage-wrap .title .blue {
    font-weight: bold;
}

.lightBlue {
    color:var(--lightish-blue) !important;
}
.mt-12 {
    margin-top: 12px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-50 {
    margin-top: 50px;
}

.m-btn.type01 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    height: 40px;
    font-size: 18px;
    font-weight: 500;
    border-radius: 6px;
    color: #fff;
}

.m-btn.type01.type-middle {
    min-width: 120px;
}

.m-btn.type02 {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid transparent;
    color: #fff;
    background-color: #5057ff;
}

.primary {
    color: #5057ff !important;
}

.bg-primary {
    background-color: #5057ff !important;
}

.second {
    color: #37aa64 !important;
}


.ql-editor {
    padding: 0;
    overflow: unset;
}

.ql-editor img {
    width: auto;
}

.ql-editor * {
    font-size: 17px;
}

.test-body .ql-editor * {
    font-family: var(--sourceSerif);
    font-size: 19px;
    font-weight: 300;
    line-height: 28px;
    color: #202020;
}

.ql-snow.solution-detail * {
    font-family: var(--sourceSerif);
    font-weight: 400;
    color: #111;
}

.solution-modal .ql-snow.solution-detail * {
    font-family: 'Inter';
    font-weight: 400;
    color: #111;
    letter-spacing: -0.01em; /* 이 모달은 serif가 아니라 Inter → 전역 보정(-0.01em) 유지 */
}

.solution-modal .explanation-wrap * {
    font-family: 'Inter';
}

.solution-modal .explanation-wrap .problem-box p {
    font-family: 'Inter';
}

.solution-modal .option-item-content * {
    font-family: 'Inter';
}

@media screen and (max-width: 1600px) {
    .test-body .ql-editor * {
        font-size: 17px;
        line-height: 24px;
    }
}


.red {
    color: #be2c38 !important;
}

.bg-revert-primary {
    background-color: #fff !important;
    color: #5057ff !important;
    border: 2px solid #5057ff !important;
}

.modal-confirm-exist .popUp_box {
    min-width: 600px;
    padding: 40px 50px;
}

.modal-confirm-exist .popUp_box .body {
    font-size: 18px;
}

.modal-confirm-exist .m-spaces.type01 {
    padding-left: 160px;
}

.m-spaces.type01 {
    display: flex;
    width: 100%;
    margin: -4px;
}

.m-spaces.type01 .m-space-wrap {
    flex: 1;
    padding: 4px;
}


.ql-editor ol, .ql-editor ul {
    padding-left: 32px;
}

.ql-editor li:not(.ql-direction-rtl)::before {
    text-align: left;
}

.ql-editor li::before {
    width: 12px;
}

.ql-editor .ql-indent-1:not(.ql-direction-rtl) {
    padding-left: 16px;
}

.ql-snow img {
    width: auto;
    max-width: 100%;
}

/*
    .paragraph.option-title > .ql-snow .ql-editor * {
        font-family: serif !important; font-weight:600;
    }*/

.katex * {
    font-weight: 500;
    font-size: 20px !important;
}

.katex .mtight {
    font-size: 14px !important;
}


.ql-editor h1 {
    line-height: 15px !important;
    font-size: unset;
}

.ql-editor h1 * {
    display: inline-block;
    line-height: 2 !important;
}

.ql-editor h2 {
    font-size: unset;
    line-height: 1.7 !important;
}

.ql-editor h2 * {
    display: inline-block;
    line-height: 1.7 !important;
}

#card-fields-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.paypal-button-container-wrap {
    opacity: 0;
    transition: all .3s;
}

.paypal-button-container-wrap.active {
    opacity: 1;
}

.find-password .signup-form .title-wrap {
    margin-bottom: 30px;
}

.find-password .m-input-text input {
    width: 100%;
    height: 40px;
    padding: 0 16px;
    text-align: left;
    font-size: 16px;
    border-color: #e1e1e1;
    border-radius: 5px;
}

.find-password .signup-form {
    padding: 56px 157px;
}

.find-password .btns {
    margin-top: 40px;
}

@media screen and (max-width: 1600px) {
    .katex * {
        font-weight: 500;
        font-size: 20px !important;
    }
}

/* 영문 추가 */
.policy-en .policy-top {
    display: flex;
    flex-direction: column;
}

.policy-en .policy-top p {
    font-size: 22px;
    font-weight: 500;
    line-height: 1.3;
    color: #202020;
    word-break: keep-all;
}

.policy-en .policy-list h4 {
    margin-bottom: 20px;
    font-size: 24px;
    font-weight: bold;
    color: #202020;
    word-break: keep-all;
}

.policy-en .bold-txt {
    font-size: 22px;
    font-weight: bold;
    color: #202020;
}

.policy-en .policy-list p.bold-txt {
    font-size: 22px;
    font-weight: bold;
    color: #202020;
}

.policy-en .small-txt {
    font-size: 18px;
    color: #202020;
}

.policy-en .mb {
    display: none;
}

.policy-en .policy-list table {
    width: 100%;
    font-size: 10px;
    margin-top: 20px;
    border: 1px solid #333;
}

.policy-en .policy-list thead {
    text-align: center;
    background-color: #dadada;
}

.policy-en .policy-list tbody {
    text-align: center;
}

.policy-en .policy-list th {
    font-size: 18px;
    color: #202020;
    font-weight: bold;
    padding: 8px;
    border: 1px solid #333;
    text-align: start;
}

.policy-en .policy-list td {
    font-size: 18px;
    color: #202020;
    padding: 8px;
    border: 1px solid #333;
    line-height: 1.5;
    text-align: left;
}

.policy-en .policy-list .center-td {
    text-align: center;
}

.policy-en .policy-list .center-th {
    text-align: center;
}

@media screen and (max-width: 1440px) {
    .policy .container {
        width: 100%;
        padding: 0 20px;
    }
}

@media screen and (max-width: 573px) {
    .policy .policy-top h2 {
        font-size: 35px;
    }

    .policy .br-573 {
        display: block;
    }

    .policy-en .mb {
        display: block;
    }

    .policy-en .policy-list td {
        padding: 4px;
        font-size: 16px;
        line-height: 1.3;
    }
}

.m-input-text.type01 input {
    width: 100%;
    height: 40px;
    padding: 0 16px;
    text-align: left;
    font-size: 16px;
    border: 1px solid #e1e1e1;
    border-radius: 5px;
    outline: none;
}

.m-delay.type01 {
    display: flex;
    align-items: center;
    justify-content: center;
    content: "";
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: #eee;
    z-index: 100;
}

.m-delay.type01 .content {
    text-align: center;
}

.m-delay.type01 .content .title {
    margin-bottom: 20px;
    font-size: 32px;
    color: #5057ff;
}

.m-delay.type01 .content .bodies {
    margin-bottom: 30px;
}

.m-delay.type01 .content .bodies > .body {
    margin-top: 8px;
    font-size: 20px;
}

.m-delay.type01 .content .bodies > .body:first-child {
    margin-top: 0;
}

.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #5057ff;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.m-before-bullet.type01 {
    margin-left: 12px;
    font-family: var(--sourceSerif);
}

/*
    .m-before-bullet.type01 {
        padding-left:16px;
        position: relative;
    }
    .m-before-bullet.type01:before {
        content:"";
        width:3px; height:3px;
        position: absolute; left:0; top:11px;
        font-weight:bold; background-color:black;
        border-radius:100%;
    }*/
.ql-editor ol li:not(.ql-direction-rtl), .ql-editor ul li:not(.ql-direction-rtl) {
    margin-top: 10px;
}

.m-tabs.type01 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.m-tabs.type01 .m-tabs-tab {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 160px;
    padding: 9px 12px;
    position: relative;
    font-size: 18px;
    font-weight: 600;
    background-color: #fff;
    border-radius: 20px;
    border: 2px solid white;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.06);
    transition: all .3s;
}

.m-tabs.type01 .m-tabs-tab .label {
    padding: 4px 7px;
    position: absolute;
    left: -14px;
    top: -12px;
    font-size: 14px;
    background-color: #ffa82a;
    border-radius: 10px;
    color: #fff;

}

.m-tabs.type01 .m-tabs-tab.active {
    border-color: #5057FF;
    color: #5057FF;
}

.m-loading.type01 {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1000001;
}

.m-loading.type01 .m-loading-inner {
    width: 48px;
    height: 48px;
    border: 5px solid #5057ff;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    position: fixed;
    top: 50%;
    left: 48.2%;
    transform: translate(-50%, -50%);
}

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.m-before-hyphen {
    padding-left: 12px;
    position: relative;
    font-size: 15px;
    word-break: keep-all;
    color: #555;
}

.m-before-hyphen:before {
    content: "-";
    position: absolute;
    top: 0px;
    left: 0;
    color: #555;
}

.popUp_box.orderProblemModal .section-right .title {
    font-size: 16px;
}


/* =====
    단어장 vocab
======== */


section.vocab-contents {
    max-width: 1320px;
}

.vocab-contents .column-wrap {
    gap: 4%;
}

.menu-container {
    position: relative;
    padding-right: 0;
}

.le-vocab-wrap {
    width: 340px;
}

.vocab-state-wrap {
    border-radius: 16px;
    box-shadow: 0 3px 24px 0 rgba(80, 87, 255, 0.12);
    background-color: #fff;
    padding: 32px 24px; padding-top:32px; padding-bottom:40px;
}

.le-vocab-wrap .title-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.le-vocab-wrap .title-wrap .title {
    font-size: 24px;
    font-weight: bold;
    letter-spacing: 0.52px;
    color: #202020;
}

.le-vocab-wrap .help-icon {
    font-size: 24px;
    color: #202020;
    opacity: 0.5;
    cursor: pointer;
}

.le-vocab-wrap .mastery-wrap {
    margin-top: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}

.le-vocab-wrap .mastery-wrap .point-wrap {
    text-align: center;
}

.le-vocab-wrap .icon-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.le-vocab-wrap .icon-wrap img {
    margin-bottom: 16px;
    max-width: 80px;
}

.le-vocab-wrap .icon-wrap .title {
    font-size: 20px;
    font-weight: 600;
    color: var(--blue);
}

.le-vocab-wrap .myPoint-wrap {
    display: flex;
    align-items: center; justify-content: center;
    gap: 4px;
}

.le-vocab-wrap .myPoint {
    font-size: 32px;
    font-weight: bold;
    color: var(--lightish-blue);
}

.le-vocab-wrap .point {
    font-size: 16px;
    font-weight: 500;
    color: #202020;
}

.le-vocab-wrap .point-wrap .title {
    font-size: 16px;
    font-weight: 500;
    color: #202020;
}

.le-vocab-wrap .btn-wrap {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.le-vocab-wrap .markBtn {
    /* 여기부터 */
    height: 50px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 19px;
    font-weight: 500;
}

.le-vocab-wrap .marks-btn * {
    color: #fff;
}

.le-vocab-wrap .quiz-btn * {
    color: var(--blue);
}

.le-vocab-wrap .logged-out .title {
    line-height: 1.38;
    text-align: center;
}

.le-vocab-wrap .logged-out .blue {
    font-size: 18px;
    font-weight: 500;
}

.vocab-scroll-wrap {
    position: sticky;
    top: 32px;
    z-index: 5;
}

.mastery-guide-wrap {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 32px;
    left: 336px;
    width: fit-content;
    padding: 32px 24px;
    border-radius: 16px;
    border: solid 1px #e4e4e4;
    background-color: #fff;
}
.mastery-guide-wrap > .title {
    margin-bottom:32px;
    font-size:19px; font-weight:bold; text-align: center; line-height:32px;
}
.mastery-guide-wrap > .title .sub {
    display: block;
    font-size:14px; font-weight:500; color:var(--blue);
    text-align: center;
}
.mastery-guide-wrap .top-wrap {
    display: flex;
    align-items: center;
    gap: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid #e4e4e4;
    margin-bottom: 16px;
}

.mastery-guide-wrap .item-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.mastery-guide-wrap .item-icon {
    width: 55px;
    min-width: 55px;
}

.mastery-guide-wrap .item-title {
    font-size: 14px;
    font-weight: 600;
    color: #202020;
}

.mastery-guide-wrap .point {
    font-size: 14px;
    font-weight: unset;
}

.mastery-guide-wrap .guide-txt {
    font-size: 16px;
    line-height: 1.43;
    word-break: keep-all;
}

.ri-vocab-wrap .list-title-wrap {
    margin-top: unset;
    justify-content: start;
    gap: 24px;
}

.ri-vocab-wrap .list-title-wrap .lock-guide {
    max-width: fit-content;
    padding: 0 16px 0 8px;
}

.ri-vocab-wrap .test-list {
    gap: 24px;
}

.ri-vocab-wrap .vocab-list {
    margin-bottom: 24px;
}

.ri-vocab-wrap .levelSection {
    padding-bottom: 82px;
}

.ri-vocab-wrap .openSection .guide-txt {
    color: var(--lightish-blue);
}

.ri-vocab-wrap section.list-section .list-item {
    min-height: 177px;
    width: calc((100% - (24px * 1)) / 2);
}

.ri-vocab-wrap .list-item .item-active .item-btn-wrap {
    visibility: visible;
}

.ri-vocab-wrap .list-item .item-btn-wrap {
    visibility: hidden;
}

.ri-vocab-wrap section.list-section .question-list .list-item .item-wrap {
    min-height: 177px;
    padding-top: 32px;
    padding-bottom: 24px;
    padding-left: 28px;
}
.ri-vocab-wrap section.list-section .question-list .item-test.item-active {
    background-color: #fffaeb;
}
.ri-vocab-wrap section.list-section .question-list .item-final {
    border: solid 2px #a2bfff;
    background-color: #e2ebff !important;
}
.ri-vocab-wrap section.list-section .question-list .item-final.lock {
    border: none !important;
}
.ri-vocab-wrap section.list-section .question-list .lock {
    background-color: #E7E6E6 !important;
}

.ri-vocab-wrap section.list-section .vocab-list .list-item {
    min-height: 122px;
}


.ri-vocab-wrap .vocab-list .item-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 28px;
    height: 100%;
    border: solid 2px #a2bfff;
    background-color: #e2ebff;
}

.ri-vocab-wrap .vocab-list .list-item .item-title {
    line-height: 1;
    text-align: start;
    font-size: 22px; /* 다른 페이지 카드 제목(22px)과 통일 */
}

.ri-vocab-wrap .vocab-list .arrow-icon {
    font-size: 32px;
    color: #202020;
}

.ri-vocab-wrap .vocab-list .item-sub {
    font-size: 16px;
    margin-top: 8px;
    text-align: start;
}

.ri-vocab-wrap section.list-section .question-list .list-item .item-title {
    font-size: 22px; /* 다른 페이지 카드 제목(22px)과 통일 */
}

/* --- vocab 스티커 라벨 */

.ri-vocab-wrap .skill-sticker {
    max-width: 244px;
}

.point-0 {
    background-color: #e8ecff;
    color: #202020;
}

.point-0 .skill-img {
    border: 2px solid #e8ecff;
    background-image: url('../images/point-0.svg');
}

.point-0 .skill-txt {
    color: #202020;
}

.point-50 {
    background-color: #7899df;
    color: #fff;
}

.point-50 .skill-img {
    border: 2px solid #7899df;
    background-image: url('../images/point-50.svg');
}

.point-50 .skill-txt {
    color: #fff;
}

.point-100 {
    background-color: #3e44d2;
    color: #fff;
}

.point-100 .skill-img {
    border: 2px solid #3e44d2;
    background-image: url('../images/point-100.svg');
}

.point-100 .skill-txt {
    margin-left: 14px;
    color: #fff;
}

/* --- // vocab 스티커 라벨  */


/* vocab 모달  */

.popUp_box.vocab-modal {
    max-height: 820px;
}

.vocab-modal .solution-body {
    margin-top: 30px;
}

.vocab-modal .solution-body::after {
    display: none;
}

.vocab-modal .solution-header,
.question-modal .solution-header {
    padding: unset;
    padding-bottom: 20px;
}

.vocab-modal .header-le .title-type,
.question-modal .header-le .title-type {
    font-size: 18px;
    font-weight: bold;
    margin-top: unset;
}

.vocab-modal .header-le .title,
.question-modal .header-le .title {
    font-size: 22px;
    font-weight: bold;
}

.vocab-modal .header-le {
    display: flex;
    align-items: center;
    gap: 100px;
    width: 100%;
}

.vocab-modal .quiz-btn {
    display: flex; align-items: center; justify-content: center;
    width: 100%;
    max-width: 230px;
    border-radius: 8px;
    border: solid 2px #5057ff;
    background-color: #fff;
    height: 40px; padding-bottom:1px;
    margin-left:auto; margin-right:24px;
}

.vocab-modal .quiz-btn {
    font-size: 18px;
    font-weight: 600;
    color: #5057ff;
}

.vocab-modal .quiz-btn i {
    margin-left: 8px;
    font-size: 20px;
    font-weight: unset;
    color: #5057ff;
}


.vocab-modal .solution-body {
    max-height: calc(100vh - 240px);
    overflow-y:auto;
}
.vocab-modal .scroll-wrap {
    width: 100%;
/*<<<<<<< HEAD

=======
    max-height: calc(100vh - 400px);
    overflow-y: auto;
>>>>>>> 491d5d47b1599f0d6215b3fa3f57122287190172*/
}

.vocab-modal .vocab-item-wrap {
    display: flex;
    flex-direction: column;
    gap: 28px; position: relative;
}

.vocab-modal .vocab-item {
    display: flex; align-items: start;
    gap: 8px;
    position:relative;
}

.vocab-modal .title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 200px;
}

.vocab-modal .bookmarkBtn {
    display: flex;
    position: relative;
    top: 2px;
}

.vocab-modal .bookmarkBtn .bookmark-icon {
    font-size: 26px;
    opacity: 0.4;
    color: #202020;
}

.vocab-modal .bookmarkBtn.active .bookmark-icon {
    font-size: 24px;
    opacity: unset;
    color: #2c35fc;
}

.vocab-modal .bookmarkBtn.active .bookmark-icon:before {
    content: "\ea1c";
}

.vocab-modal .pos-title {
    font-size: 20px;
    font-weight: bold;
    color: #111;
    min-width: 100px;
}

.vocab-modal .content-wrap {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.vocab-modal .vocab-inner-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vocab-modal .top-wrap {
    display: flex;
    align-items: baseline;
    gap: 8px;
}


/* --------- posSticker 속성 */

.vocab-modal .posSticker {
    min-width: 90px;
    background-color: #5057FF;
    border-radius: 4px;
    text-align: center;
    padding: 2px 0;
    height: 26px;
    line-height: 22px;
    font-size: 17px;
    font-weight: 500;
    color: #111;
}

/* [pos 개별 속성] */
.vocab-modal .vocab-adj .posSticker {
    background-color: #5057FF;
}

.vocab-modal .vocab-n .posSticker {
    background-color: #ff5d2a;
}

.vocab-modal .vocab-v .posSticker {
    background-color: #14ac51;
}

.vocab-modal .vocab-adjective .posSticker {
    background-color: #daeafe;
}
.vocab-modal .vocab-noun .posSticker {
    background-color: #ffe7d9;
}

.vocab-modal .vocab-verb .posSticker {
    background-color: #dbf2da;
}

.vocab-modal .vocab-adverb .posSticker {
    background-color: #fff6dd;
}


.vocab-modal .definition {
    font-size: 18px;
    font-weight: 500;
    color: #111;
    line-height: 1.2;
}


/* -- 단어 퀴즈 모달  */

.popUp_box.question-modal {
    max-height: 508px;
}

.question-modal .body-content {
    padding: unset;
}

.question-modal .practice-body {
    padding-left: 2%;
}

.question-modal .option-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.question-modal .option-item {
    cursor: pointer;
}

.question-modal .solution-body {
    margin-top: 38px;
    overflow:visible;
}

.vocab-modal .exampleSentence {
    font-size: 18px;
    font-style: italic;
    opacity: 0.7;
    color: #202020;
    line-height: 1.2;

}

.question-modal .saveExit-btn {
    border-radius: 20px;
    width: 160px;
    height: 40px;
    font-size: 17px;
    font-weight: bold;
    color: #202020;
}

.question-modal .saveExit-btn:hover {
    background-color: #202020;
    color: #fff;
}

.question-modal .state-btn {
    width: 100%;
    max-width: 188px;
    width: 188px;
}

.question-modal section.question-footer {
    width: 100%;
    padding: unset;
    justify-content: center;
    margin-top: 40px;
    border-top: 1px solid #e4e4e4;
}

.question-modal .question-footer .inner-wrap {
    bottom: unset;
    margin: 0 auto;
    padding: 26px 32px 0;
    align-items: center;
}

.question-modal .question-footer .index-wrap {
    height: 48px;
}


.question-modal .practice-body .option-item .option-item-content {
    max-width: 656px;
    margin-bottom: unset;
}

/* 오답 */
.question-modal .incorrect label {
    border: solid 2px #d50f00;
    box-shadow: 0 3px 16px 0 rgba(80, 87, 255, 0.16);
}

.question-modal .incorrect label .item-num {
    background-color: #d50f00;
    color: #fff;
    line-height: 34px;
}

.question-modal .popUp_box.solution-modal {
    max-height: 540px;
}

.vocab-modal .popUp_box.solution-modal {
    height: unset;
}


/* ------------------- question-modal */

@media screen and (max-width: 1320px) {
    /* .question-modal .popUp_box.solution-modal {
    height: unset;
} */
}

@media screen and (max-width: 1320px) {
    .ri-vocab-wrap section.list-section .question-list .list-item .item-top {
        height: unset;
    }
}

@media screen and (max-width: 1230px) {
    .question-modal .question-footer .inner-wrap .index-wrap {
        position: absolute;
        transform: translateX(-50%);
    }
}

@media screen and (max-width: 1080px) {

    .popUp_box.question-modal {
        max-height: unset;
        height: unset;
        padding-bottom: unset;
        padding: 24px 0 0;
        overflow: hidden;
    }

    .question-modal .popUp_box.solution-modal {
        max-width: unset;
        min-width: unset;
        width: 90%;
        height: calc(100vh - 10%);
        max-height: 552px;
    }

    .question-modal .solution-header {
        max-width: 90%;
        margin: 0 auto
    }

    .question-modal .body-content {
        width: 100%;
        padding-left: unset;
    }

    .question-modal .index-wrap .index-txt {
        font-size: 12px;
        font-weight: 500;
    }

    .question-modal .practice-body .option-item .option-item-content {
        max-width: unset;
        padding: 8px 20px;
        padding-left: 48px;
    }

    .question-modal .solution-body {
        margin: 24px auto 0;
        flex-direction: column;
        max-width: 90%;
    }

    .question-modal .practice-body {
        margin-top: 24px;
    }

    .question-modal .solution-body::after {
        display: none;
    }

    .question-modal section.question-footer {
        margin-top: 32px;
        border-top: unset;
    }

    .question-modal .question-footer .inner-wrap {
        flex-direction: column;
        padding: unset;
        gap: 32px;
        position: unset;
    }

    .question-modal .question-footer .inner-wrap .index-wrap {
        position: unset;
        transform: unset;
        order: 2;
        border-radius: unset;
        width: 100%;
    }

    .question-modal .question-footer .inner-wrap .state-btn-wrap {
        order: 1;
        width: 90%;
        margin: 0 auto;
        justify-content: end;
    }

    .question-modal .header-ri {
        position: absolute;
        right: 8px;
        top: 13px;
    }

    .question-modal .saveExit-btn {
        font-size: 14px;
        width: 110px;
        height: 32px;
        border: 1px solid #202020;
        font-weight: 500;
    }

    .vocab-modal .header-le .title,
    .question-modal .header-le .title {
        font-size: 16px;
    }

    .question-modal .problem-title,
    .vocab-modal .option-title {
        font-size: 20px;
    }

    .question-modal .problem-box p {
        font-size: 15px;
    }

    .question-modal section.question-footer .state-btn {
        height: 32px;
        line-height: 32px;
        max-width: 120px;
        font-size: 14px;
        line-height: 1;
    }

    .question-modal section.question-footer .state-btn i {
        font-size: 14px;
    }

    .question-modal .option-item .item-num {
        left: 6px;
        width: 32px;
        height: 32px;
    }

    .question-modal section.question-footer {
        width: 100%;
    }

    .question-modal .solution-body {
        max-width: 80%;
        padding-right: 3%;
    }

    .question-modal .question-footer .inner-wrap .state-btn-wrap {
        max-width: 100%;
    }

    .question-modal .popUp_box.solution-modal {
        padding: 25px 0 0;
        overflow: hidden;
    }

}

@media screen and (max-width: 768px) {


    .vocab-contents .question-list .list-item .item-btm-wrap {
        display: flex !important;
        margin-top: 12px;
    }

    .question-modal .problem-title {
        font-size: 18px;
        font-weight: 600;
    }

    .question-modal .practice-body .option-item label .paragraph {
        font-weight: 400;
    }
}

@media screen and (max-width: 321px) {

    .question-modal .solution-body {
        margin-top: 12px;
    }

    .question-modal .practice-body {
        margin-top: 8px;
    }

    .question-modal .option-list {
        gap: 8px;
    }

    .question-modal .problem-title {
        font-size: 16px;
    }

    .question-modal .problem-box p {
        font-size: 13px;
    }

    .question-modal .practice-body .option-item label .paragraph {
        font-size: 13px;
    }

    .question-modal .option-item .item-num {
        width: 24px;
        height: 24px;
        font-size: 16px;
    }

    .question-modal .practice-body .option-item .option-item-content {
        padding-left: 36px;
    }

    .question-modal section.question-footer {
        margin-top: 24px;
    }

    .question-modal .question-footer .inner-wrap {
        gap: 24px;
    }

    .question-modal .question-footer .index-wrap {
        height: 32px;
    }

    .question-modal .saveExit-btn {
        font-size: 13px;
        height: 24px;
        width: 90px;
    }

    .question-modal section.question-footer .state-btn {
        font-size: 13px;
        max-width: 120px;
    }

    .question-modal section.question-footer .state-btn i {
        font-size: 13px;
    }
}

/* ------------------- Vocab-modal */

@media screen and (max-width: 1080px) {
    .vocab-modal .header-le {
        gap: 12px;
        flex-direction: column;
        align-items: start;
    }

    .vocab-modal .solution-header {
        align-items: start;
        flex-wrap:wrap;
    }

    .vocab-modal .quiz-btn {
        height: 32px;
        max-width: 180px;
    }

    .vocab-modal .quiz-btn,
    .vocab-modal .quiz-btn i {
        font-size: 16px;
    }


    .solution-modal .header-ri .close-btn {
        width: 24px;
        height: 24px;
        border-radius: 4px;
        position: absolute; top:20px; right:20px;
    }

    .solution-modal .header-ri .close-btn i {
        font-size: 16px;
    }

    .vocab-modal .vocab-item-wrap {
        gap: 24px;;
    }

    .vocab-modal .title-wrap {
        min-width: 120px;
    }

    .vocab-modal .vocab-inner-wrap {
        gap: 8px;
    }

    .vocab-modal .pos-title,
    .vocab-modal .bookmarkBtn .bookmark-icon {
        font-size: 20px;
    }

    .vocab-modal .definition,
    .vocab-modal .exampleSentence {
        font-size: 17px;
    }

    .vocab-modal .posSticker {
        min-width: 72px;
        position:absolute; top:0; right:0;
        font-size: 14px;
    }
}

@media screen and (max-width: 768px) {
    .vocab-modal .popUp_box.solution-modal {
        max-width: unset;
        min-width: unset;
        width: 90%;
        max-height: calc(100vh - 10%);
    }

    .popUp_box.solution-modal {
        max-width: 473px;
        min-width: 320px;
        padding: 25px 20px;
    }

    .vocab-modal .header-le {
        gap: 8px;
    }

    .vocab-modal .solution-body {
        margin-top: 16px;
    }

    .vocab-modal .quiz-btn,
    .vocab-modal .quiz-btn i {
        font-size: 12px;
        margin-left: 0px;
        max-width: 140px;
    }

    .vocab-modal .vocab-item {
        flex-direction: column;
    }

    .vocab-modal .top-wrap {
        flex-direction: column;
    }

    .vocab-modal .pos-title,
    .vocab-modal .bookmarkBtn .bookmark-icon {
        font-size: 18px;
    }

    .vocab-modal .bookmarkBtn.active .bookmark-icon {
        font-size: 18px;
    }

    .vocab-modal .definition,
    .vocab-modal .exampleSentence {
        font-size: 15px;
    }

}

@media screen and (max-width: 1140px) {
    .vocab-contents .column-wrap {
        gap: 3%;
    }

    .le-vocab-wrap {
        width: 338px;
    }

}

@media screen and (max-width: 1080px) {

    section.vocab-contents {
        max-width: 768px;
        margin-top: 24px;
    }

    .le-vocab-wrap {
        width: calc(100% - 40px);
    }

    .le-vocab-wrap .title-wrap {
        justify-content: space-between;
    }

    .mastery-guide-wrap {
        top: 72px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 99;
        width: calc(100% - 40px);
        max-width: 573px;
    }

    .vocab-state-wrap {
        padding-top: 24px;
    }

    .mastery-guide-wrap .top-wrap {
        flex-wrap: wrap;
        gap: 12px;
    }

    .vocab-scroll-wrap {
        position: unset
    }

    .mastery-guide-wrap .item-wrap {
        width: calc((100% - (12px * 2)) / 3);
    }

    .mastery-guide-wrap .item-icon {
        min-width: 56px;
        max-width: 56px;
    }
}

@media screen and (max-width: 1080px) {
    .le-vocab-wrap {
        max-width: 573px;
    }

    .ri-contents-wrap {
        max-width: 574px;
        margin: 0 auto;
    }

    .ri-vocab-wrap section.list-section .list-item {
        width: 100%;
        min-height: unset;
    }

    .ri-vocab-wrap .vocab-list .item-wrap {
        padding: 24px;
    }

    .ri-vocab-wrap section.list-section .question-list .list-item .item-wrap {
        padding: 24px;
        min-height: unset;
    }

    .ri-vocab-wrap .vocab-list {
        margin-bottom: unset;
    }

    .ri-vocab-wrap .levelSection {
        padding-bottom: 30px;
    }

    .ri-vocab-wrap .vocab-list .arrow-icon {
        font-size: 20px;
    }

    .ri-vocab-wrap .vocab-list .item-sub {
        margin-top: 4px;
    }

    .vocab-contents .column-wrap .menu-container {
        border-bottom: unset;
        margin-bottom: 35px;
    }

    .ri-vocab-wrap .list-title-wrap {
        flex-direction: row;
        justify-content: space-between;
        gap: 12px;
    }

    .le-vocab-wrap .title-wrap .title {
        font-size: 24px;
        line-height: 1.2;
    }

    .le-vocab-wrap .markBtn {
        font-size: 20px;
        height: 56px;
    }

    .le-vocab-wrap .icon-wrap img {
        max-width: 80px;
    }

    .le-vocab-wrap .myPoint {
        font-size: 26px;
    }
}

@media screen and (max-width: 768px) {

    .vocab-contents .list-title-wrap .list-title {
        order: 1;
        margin-top: unset;
    }

    .ri-vocab-wrap section.list-section .question-list .list-item .item-title {
        font-size: 20px;
    }

    .ri-vocab-wrap .vocab-list .list-item .item-title {
        font-size: 20px; /* 모바일은 question 카드와 동일하게 20px 유지 */
    }
}

@media screen and (max-width: 321px) {
    .ri-vocab-wrap .vocab-list {
        margin-bottom: 12px;
    }

    .ri-vocab-wrap .skill-sticker {
        font-size: 12px;
    }

    .ri-vocab-wrap .skill-txt {
        margin-left: 3px;
    }

    .point-100 .skill-txt {
        margin-left: 4px;
    }

    .le-vocab-wrap .title-wrap .title {
        font-size: 20px;
    }

    .le-vocab-wrap .myPoint {
        font-size: 24px;
    }

    .le-vocab-wrap .point {
        font-size: 14px;
    }

    .le-vocab-wrap .btn-wrap {
        gap: 8px;
    }

    .le-vocab-wrap .point-wrap .title {
        font-size: 14px;
    }

    .le-vocab-wrap .icon-wrap .title {
        font-size: 16px;
    }

    .le-vocab-wrap .markBtn {
        height: 48px;
        border-radius: 12px;
        font-size: 18px;
    }
}

.words-modal .problem-box p {
    font-family: 'Inter';
}
.words-modal .problem-title, .words-modal .option-title {
    font-family: 'Inter';
}
.words-modal .btn-default {
    border-radius:100px !important;
}
.words-modal .btn-line-black:hover {
    background-color:white !important; color:#111 !important;;
}
.words-modal .popUp_box.solution-modal {
    max-height:none; height:auto;
    max-width:1080px !important;
    padding-bottom:100px;
}
.words-modal .problem-box {
    padding-right:20px;
}
.words-modal .problem-box p {
    font-size:18px;
}
.words-modal .option-item label .paragraph {
    font-weight:400;
}


/* 241016작성  ------ */
@media screen and (max-width: 1080px) {
    .myPage-contents-wrap.ri-contents-wrap {
        max-width:unset;
    }
    .ri-contents-wrap .result-btn.pc {
        display: flex;
        width: 100%;
        justify-content: center;
        align-items: center;
        height: 35px;
        font-size: 15px;
    }

    .ri-contents-wrap .mb {
        display: none;
    }

    .ri-contents-wrap .continue-box .mb {
        display: flex;
    }
}

@media screen and (max-width: 1024px) {
    .solution-modal .move-btn-wrap {
        flex-direction: column;
    }

    .solution-modal .move-btn-wrap .inner-btn-wrap {
        justify-content: right;
    }
}

@media screen and (max-width: 768px) {

    .ri-contents-wrap .result-btn.pc {
        display: none;
    }

    .ri-contents-wrap .mb-guide.mb {
        display: flex; justify-content: center;
    }
}

@media screen and (max-width: 840px) {

    .score-chart-wrap .chart-ri {
        max-width: 128px;
        max-height: 128px;
    }

    .solution-btn {
        padding:0 3px;
    }
}


@media screen and (max-width: 1080px) {

    .popUp_box.solution-modal {
        max-width: 90%;
    }

    .solution-modal .solution-mark-wrap .solution-mark {
        font-size: 14px;
    }


    .solution-modal .move-btn-wrap .solution-move-btn{
        padding: 5px 20px 4px 12px;
    }

    .solution-modal .move-btn-wrap .solution-move-btn.next {
        padding: 5px 12px 4px 20px;
    }

    .solution-modal .move-btn-wrap .solution-move-btn p {
        font-size: 14px;
    }

    .solution-modal .move-btn-wrap i {
        font-size: 16px;
    }

    .solution-modal .move-btn-wrap .solution-move-btn i {
        margin-right: 5px;
    }

    .solution-modal .move-btn-wrap .solution-move-btn.next i {
        margin-left: 5px;
    }

    .solution-modal .move-btn-wrap .sendReport-btn {
        margin-top: 24px;
    }

}

@media screen and (max-width: 1024px) {

    .solution-modal .move-btn-wrap .solution-move-btn {
        justify-content: center;
    }
}


/* 250211 프리미엄 추가 item-premium-wrap */
.test-list .list-item .item-premium-wrap {
    background-color: #8c90de;
    position: relative;
}
section.list-section .question-list .item-premium-wrap .continue-btn {
    color:#fffaeb !important;
}

.item-premium-wrap .premium_top {
    position: absolute;
    right: 0;
    top: 0;
    max-width: 105px;
    /* img 의 width/height 속성(210×210, CLS용) 때문에 max-width 로 줄어도
       height 가 210px 로 고정돼 105×210 으로 늘어남 → Start 버튼을 덮어 클릭 차단 */
    height: auto;
    /* 장식용 오버레이가 카드 내 버튼 클릭을 가로채지 않도록 */
    pointer-events: none;
}

.item-premium-wrap .premium_btm {
    position: absolute;
    left: 0;
    bottom: 0;
    max-width: 105px;
}

.item-premium-wrap .item-title {
    color: #fff;
}


section.list-section  .question-list .item-premium-wrap .restart-btn {
    border-color: #fff !important;
    background-color: #8c90de;
    color: #fff !important;
}
section.list-section  .question-list .item-premium-wrap .restart-btn:hover {
    background-color: #fff !important;
    color: #8c90de !important;
}
section.list-section .question-list .item-premium-wrap .continue-btn {
    border-color: #fff !important;
    background-color: #fff !important;
    color: #5057ff !important;
}



@media screen and (max-width: 1024px) {

    .item-premium-wrap .mb {
        display: block;
    }

    .item-premium-wrap .premium_top {
        max-width: 82px;
    }

    .item-premium-wrap .premium_btm {
        max-width: 64px;
    }
}





/*!
*  XEIcon 2.2.0 by @NAVER - http://xpressengine.github.io/XEIcon/ - @XEIcon
*  License - http://xpressengine.github.io/XEIcon/license.html (Font: SIL OFL 1.1, CSS: MIT License)
*/
.xi-fw,.xi-li{text-align:center}@font-face{font-family:xeicon;src:url(/fonts/xeicon.eot?v=2.2.0);src:url(/fonts/xeicon.eot?#iefix&v=2.2.0) format('embedded-opentype'),url(/fonts/xeicon.woff2?v=2.2.0) format('woff2'),url(fonts/xeicon.woff?v=2.2.0) format('woff'),url(fonts/xeicon.ttf?v=2.2.0) format('truetype'),url(fonts/xeicon.svg?v=2.2.0#xeicon) format('svg');font-weight:400;font-style:normal;font-display:swap}i{font-family:xeicon!important;display:inline-block;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.xi-angle-down:before{content:"\e941"}.xi-angle-down-min:before{content:"\e942"}.xi-angle-down-thin:before{content:"\e943"}.xi-angle-left:before{content:"\e93b"}.xi-angle-left-thin:before{content:"\e93d"}.xi-angle-left-min:before{content:"\e93c"}.xi-angle-right:before{content:"\e93e"}.xi-angle-right-min:before{content:"\e93f"}.xi-angle-right-thin:before{content:"\e940"}.xi-angle-up:before{content:"\e944"}.xi-angle-up-min:before{content:"\e945"}.xi-angle-up-thin:before{content:"\e946"}.xi-apps:before{content:"\e903"}.xi-arrow-bottom:before{content:"\e904"}.xi-arrow-down:before{content:"\e905"}.xi-arrow-left:before{content:"\e906"}.xi-arrow-right:before{content:"\e907"}.xi-arrow-top:before{content:"\e912"}.xi-arrow-up:before{content:"\e915"}.xi-arrows:before{content:"\e90c"}.xi-arrows-alt:before{content:"\e90d"}.xi-arrows-h:before{content:"\e90e"}.xi-arrows-v:before{content:"\e90f"}.xi-bars:before{content:"\e91c"}.xi-caret-down:before{content:"\e935"}.xi-caret-down-circle:before{content:"\e937"}.xi-caret-down-circle-o:before{content:"\e938"}.xi-caret-down-min:before{content:"\e936"}.xi-caret-down-square:before{content:"\e939"}.xi-caret-down-square-o:before{content:"\e93a"}.xi-caret-up:before{content:"\e92f"}.xi-caret-up-circle:before{content:"\e931"}.xi-caret-up-circle-o:before{content:"\e932"}.xi-caret-up-min:before{content:"\e930"}.xi-caret-up-square:before{content:"\e933"}.xi-caret-up-square-o:before{content:"\e934"}.xi-catched:before{content:"\e923"}.xi-cog:before{content:"\e986"}.xi-compare-arrows:before{content:"\e947"}.xi-compress:before{content:"\e911"}.xi-compress-square:before{content:"\e955"}.xi-dashboard:before{content:"\e948"}.xi-dashboard-o:before{content:"\e95e"}.xi-drag-handle:before{content:"\e960"}.xi-drag-vertical:before{content:"\e996"}.xi-ellipsis-h:before{content:"\e94a"}.xi-ellipsis-v:before{content:"\e949"}.xi-expand:before{content:"\e910"}.xi-expand-square:before{content:"\e954"}.xi-external-link:before{content:"\e980"}.xi-eye:before{content:"\e951"}.xi-eye-o:before{content:"\e950"}.xi-eye-off:before{content:"\e953"}.xi-eye-off-o:before{content:"\e952"}.xi-filter:before{content:"\e9d9"}.xi-flag:before{content:"\e961"}.xi-flag-o:before{content:"\e962"}.xi-hamburger-back:before{content:"\eb46"}.xi-hamburger-out:before{content:"\eb45"}.xi-home:before{content:"\e900"}.xi-home-o:before{content:"\e902"}.xi-lock:before{content:"\e964"}.xi-lock-o:before{content:"\e966"}.xi-log-in:before{content:"\e963"}.xi-log-out:before{content:"\e972"}.xi-long-arrow-down:before{content:"\e90a"}.xi-long-arrow-left:before{content:"\e908"}.xi-long-arrow-right:before{content:"\e90b"}.xi-long-arrow-up:before{content:"\e909"}.xi-refresh:before{content:"\e973"}.xi-renew:before{content:"\e977"}.xi-scroll:before{content:"\e94b"}.xi-search:before{content:"\e97a"}.xi-subdirectory:before{content:"\e97e"}.xi-subdirectory-arrow:before{content:"\e981"}.xi-sync:before{content:"\e982"}.xi-trash:before{content:"\e96e"}.xi-trash-o:before{content:"\e96f"}.xi-unlock:before{content:"\e965"}.xi-unlock-o:before{content:"\e967"}.xi-view-array:before{content:"\e983"}.xi-view-carousel:before{content:"\e984"}.xi-view-column:before{content:"\e985"}.xi-view-day:before{content:"\e98d"}.xi-view-list:before{content:"\e993"}.xi-view-module:before{content:"\e997"}.xi-view-stream:before{content:"\e99a"}.xi-wrench:before{content:"\e99b"}.xi-zoom-in:before{content:"\e97b"}.xi-zoom-out:before{content:"\e97c"}.xi-bookmark:before{content:"\ea1c"}.xi-bookmark-o:before{content:"\ea1d"}.xi-check:before{content:"\e928"}.xi-check-circle:before{content:"\e92b"}.xi-check-circle-o:before{content:"\e92c"}.xi-check-min:before{content:"\e929"}.xi-check-square:before{content:"\e92d"}.xi-check-square-o:before{content:"\e92e"}.xi-check-thin:before{content:"\e92a"}.xi-close:before{content:"\e921"}.xi-close-circle:before{content:"\e924"}.xi-close-circle-o:before{content:"\e925"}.xi-close-min:before{content:"\e922"}.xi-close-square:before{content:"\e926"}.xi-close-square-o:before{content:"\e927"}.xi-close-thin:before{content:"\e9af"}.xi-cut:before{content:"\e9b0"}.xi-label:before{content:"\e9b1"}.xi-label-o:before{content:"\e9b2"}.xi-library-add:before{content:"\e9b3"}.xi-library-bookmark:before{content:"\e9b4"}.xi-lightbulb:before{content:"\e9be"}.xi-lightbulb-o:before{content:"\e9bf"}.xi-link:before{content:"\e9c0"}.xi-mail:before{content:"\ea06"}.xi-mail-o:before{content:"\ea07"}.xi-mail-read:before{content:"\ea08"}.xi-mail-read-o:before{content:"\ea09"}.xi-minus:before{content:"\e91a"}.xi-minus-circle:before{content:"\e91d"}.xi-minus-circle-o:before{content:"\e91e"}.xi-minus-min:before{content:"\e91b"}.xi-minus-square:before{content:"\e91f"}.xi-minus-square-o:before{content:"\e920"}.xi-minus-thin:before{content:"\e9c1"}.xi-package:before{content:"\e9c2"}.xi-pen:before{content:"\e9c3"}.xi-pen-o:before{content:"\e9c4"}.xi-plus:before{content:"\e913"}.xi-plus-circle:before{content:"\e916"}.xi-plus-circle-o:before{content:"\e917"}.xi-plus-min:before{content:"\e914"}.xi-plus-square:before{content:"\e918"}.xi-plus-square-o:before{content:"\e919"}.xi-plus-thin:before{content:"\e9c5"}.xi-radiobox-blank:before{content:"\e9c6"}.xi-radiobox-checked:before{content:"\e9c7"}.xi-redo:before{content:"\e9c8"}.xi-reply:before{content:"\ea0d"}.xi-reply-all:before{content:"\ea0c"}.xi-save:before{content:"\e9b9"}.xi-send:before{content:"\ea0b"}.xi-switch-off:before{content:"\e9c9"}.xi-switch-on:before{content:"\e9ca"}.xi-tag:before{content:"\ea36"}.xi-tags:before{content:"\ea37"}.xi-toggle-off:before{content:"\e9cb"}.xi-toggle-on:before{content:"\e9cd"}.xi-undo:before{content:"\e9d2"}.xi-at:before{content:"\ea0a"}.xi-call:before{content:"\e9d3"}.xi-call-made:before{content:"\e9d4"}.xi-call-missed:before{content:"\e9d5"}.xi-call-received:before{content:"\e9d6"}.xi-comment:before{content:"\e9d7"}.xi-comment-o:before{content:"\e9d8"}.xi-crown:before{content:"\e9da"}.xi-emoticon:before{content:"\e9dd"}.xi-emoticon-bad:before{content:"\e9de"}.xi-emoticon-bad-o:before{content:"\e9df"}.xi-emoticon-cool:before{content:"\e9e0"}.xi-emoticon-cool-o:before{content:"\e9e1"}.xi-emoticon-devil:before{content:"\e9e2"}.xi-emoticon-devil-o:before{content:"\e9e3"}.xi-emoticon-happy:before{content:"\e9e4"}.xi-emoticon-happy-o:before{content:"\e9e6"}.xi-emoticon-neutral:before{content:"\e9eb"}.xi-emoticon-neutral-o:before{content:"\e9ec"}.xi-emoticon-o:before{content:"\e9ed"}.xi-emoticon-sad:before{content:"\e9ee"}.xi-emoticon-sad-o:before{content:"\e9ef"}.xi-forum:before{content:"\e9f0"}.xi-forum-o:before{content:"\e9f1"}.xi-group:before{content:"\ea2e"}.xi-heart:before{content:"\ea10"}.xi-heart-o:before{content:"\ea11"}.xi-message:before{content:"\ea14"}.xi-message-o:before{content:"\ea15"}.xi-note:before{content:"\ea1a"}.xi-note-o:before{content:"\ea1b"}.xi-profile:before{content:"\e9f2"}.xi-profile-o:before{content:"\ea2a"}.xi-send2:before{content:"\ea0e"}.xi-share:before{content:"\e9fa"}.xi-share-alt:before{content:"\e9e9"}.xi-share-alt-o:before{content:"\e9ea"}.xi-speech:before{content:"\ea12"}.xi-speech-o:before{content:"\ea13"}.xi-star:before{content:"\ea0f"}.xi-star-o:before{content:"\ea16"}.xi-thumbs-down:before{content:"\ea29"}.xi-thumbs-up:before{content:"\ea28"}.xi-trophy:before{content:"\ea38"}.xi-user:before{content:"\e9f3"}.xi-user-address:before{content:"\e9f4"}.xi-user-o:before{content:"\e9f5"}.xi-user-plus:before{content:"\e9f7"}.xi-user-plus-o:before{content:"\e9f8"}.xi-users:before{content:"\e9f9"}.xi-users-o:before{content:"\ea04"}.xi-users-plus:before{content:"\ea17"}.xi-video-call:before{content:"\ea18"}.xi-voicemail:before{content:"\ea19"}.xi-alarm:before{content:"\ea1e"}.xi-alarm-o:before{content:"\ea1f"}.xi-alarm-off:before{content:"\ea20"}.xi-ban:before{content:"\e9ae"}.xi-bell:before{content:"\e99c"}.xi-bell-o:before{content:"\e99d"}.xi-bell-off:before{content:"\e99e"}.xi-bell-off-o:before{content:"\e99f"}.xi-calendar:before{content:"\e9a0"}.xi-calendar-add:before{content:"\e9a1"}.xi-calendar-cancle:before{content:"\e9a3"}.xi-calendar-check:before{content:"\e9a4"}.xi-calendar-list:before{content:"\e9a5"}.xi-calendar-remove:before{content:"\e9a2"}.xi-error:before{content:"\e9aa"}.xi-error-o:before{content:"\e9ab"}.xi-hand-paper:before{content:"\ea21"}.xi-help:before{content:"\e9ad"}.xi-help-o:before{content:"\e9ac"}.xi-info:before{content:"\e9a6"}.xi-info-o:before{content:"\e9a7"}.xi-key:before{content:"\ea22"}.xi-wifi:before{content:"\ea23"}.xi-new:before{content:"\e9a8"}.xi-new-o:before{content:"\e9a9"}.xi-security:before{content:"\ea24"}.xi-shield-checked:before{content:"\ea25"}.xi-shield-checked-o:before{content:"\ea26"}.xi-snooze:before{content:"\ea27"}.xi-time:before{content:"\ea2b"}.xi-time-o:before{content:"\ea2c"}.xi-warning:before{content:"\ea2d"}.xi-align-center:before{content:"\e958"}.xi-align-justify:before{content:"\e956"}.xi-align-left:before{content:"\e957"}.xi-align-right:before{content:"\e959"}.xi-bold:before{content:"\e96a"}.xi-border-bottom:before{content:"\ea32"}.xi-border-clear:before{content:"\ea33"}.xi-border-color:before{content:"\ea39"}.xi-border-horizontal:before{content:"\ea45"}.xi-border-inner:before{content:"\ea46"}.xi-border-left:before{content:"\ea49"}.xi-border-outer:before{content:"\ea4f"}.xi-border-right:before{content:"\ea51"}.xi-border-style:before{content:"\ea52"}.xi-border-top:before{content:"\ea54"}.xi-border-vertical:before{content:"\ea5c"}.xi-caps:before{content:"\e96d"}.xi-code:before{content:"\ea5d"}.xi-color-dropper:before{content:"\e97d"}.xi-color-fill:before{content:"\ea5e"}.xi-color-helper:before{content:"\ea5f"}.xi-crop:before{content:"\e999"}.xi-dedent:before{content:"\e95b"}.xi-document:before{content:"\e998"}.xi-eraser:before{content:"\e970"}.xi-eraser-o:before{content:"\e971"}.xi-face:before{content:"\ea62"}.xi-font:before{content:"\ea63"}.xi-border-all:before{content:"\e987"}.xi-indent:before{content:"\e95a"}.xi-italic:before{content:"\e96c"}.xi-layout:before{content:"\e988"}.xi-layout-aside:before{content:"\e98b"}.xi-layout-aside-o:before{content:"\e991"}.xi-layout-column:before{content:"\e98c"}.xi-layout-column-o:before{content:"\e992"}.xi-layout-full:before{content:"\e989"}.xi-layout-full-o:before{content:"\e98f"}.xi-layout-o:before{content:"\e98e"}.xi-layout-snb:before{content:"\e98a"}.xi-layout-snb-o:before{content:"\e990"}.xi-line-style:before{content:"\ea66"}.xi-line-weight:before{content:"\ea67"}.xi-line-height:before{content:"\e976"}.xi-link-broken:before{content:"\ea68"}.xi-link-insert:before{content:"\ea6a"}.xi-list:before{content:"\e95f"}.xi-list-dot:before{content:"\e95c"}.xi-list-number:before{content:"\ea6b"}.xi-list-square:before{content:"\e95d"}.xi-omega:before{content:"\ea6c"}.xi-opacity:before{content:"\ea6d"}.xi-overscan:before{content:"\ea78"}.xi-palette:before{content:"\e995"}.xi-paperclip:before{content:"\ea7f"}.xi-paragraph:before{content:"\e968"}.xi-rotate-left:before{content:"\e979"}.xi-rotate-right:before{content:"\e978"}.xi-scissors:before{content:"\e994"}.xi-sort-asc:before{content:"\e974"}.xi-sort-desc:before{content:"\e975"}.xi-spellcheck:before{content:"\eaa9"}.xi-strikethrough:before{content:"\e969"}.xi-text-color:before{content:"\eaaa"}.xi-text-format:before{content:"\eab9"}.xi-text-size:before{content:"\eaba"}.xi-text-type:before{content:"\e97f"}.xi-transform:before{content:"\eabb"}.xi-translate:before{content:"\eabc"}.xi-underline:before{content:"\e96b"}.xi-valign-bottom:before{content:"\eabd"}.xi-valign-center:before{content:"\eabe"}.xi-valign-top:before{content:"\eabf"}.xi-airplay:before{content:"\eac0"}.xi-alarm-clock:before{content:"\eac1"}.xi-alarm-clock-o:before{content:"\eac2"}.xi-alarm-clock-off:before{content:"\eac3"}.xi-alt:before{content:"\e94d"}.xi-backspace:before{content:"\eac4"}.xi-battery:before{content:"\eac5"}.xi-battery-10:before{content:"\eac6"}.xi-battery-20:before{content:"\eac7"}.xi-battery-30:before{content:"\eac8"}.xi-battery-40:before{content:"\eac9"}.xi-battery-50:before{content:"\eacb"}.xi-battery-60:before{content:"\eacc"}.xi-battery-70:before{content:"\eacd"}.xi-battery-80:before{content:"\eace"}.xi-battery-90:before{content:"\eacf"}.xi-battery-o:before{content:"\ead0"}.xi-bluetooth:before{content:"\ead1"}.xi-bluetooth-off:before{content:"\ead2"}.xi-bluetooth-on:before{content:"\ead3"}.xi-bluetooth-search:before{content:"\ead4"}.xi-brightness:before{content:"\ead5"}.xi-capslock:before{content:"\ead6"}.xi-clock:before{content:"\ead7"}.xi-clock-o:before{content:"\ead8"}.xi-command:before{content:"\e94e"}.xi-contrast:before{content:"\ead9"}.xi-desktop:before{content:"\eada"}.xi-devices:before{content:"\eadb"}.xi-diskette:before{content:"\e9ba"}.xi-enter:before{content:"\eadc"}.xi-esc:before{content:"\e94f"}.xi-fax:before{content:"\e9bc"}.xi-flashlight:before{content:"\eadd"}.xi-flashlight-off:before{content:"\eade"}.xi-flight-off:before{content:"\eadf"}.xi-flight-on:before{content:"\eae0"}.xi-gamepad:before{content:"\eae1"}.xi-gps:before{content:"\eae2"}.xi-gps-none:before{content:"\eae3"}.xi-gps-off:before{content:"\eae4"}.xi-hdd:before{content:"\eae5"}.xi-hdmi:before{content:"\eae6"}.xi-keyboard:before{content:"\eae7"}.xi-keyboard-o:before{content:"\eae8"}.xi-laptop:before{content:"\eae9"}.xi-lock-rotation:before{content:"\eaea"}.xi-memory:before{content:"\eaeb"}.xi-memory-o:before{content:"\eaec"}.xi-mobile:before{content:"\eaed"}.xi-mouse:before{content:"\e9b6"}.xi-mouse-pointer:before{content:"\eaee"}.xi-plug:before{content:"\e9d0"}.xi-power-off:before{content:"\e94c"}.xi-presentation:before{content:"\e9cf"}.xi-print:before{content:"\e9bb"}.xi-projector:before{content:"\e9ce"}.xi-router:before{content:"\eaef"}.xi-router-o:before{content:"\eaf0"}.xi-sdcard:before{content:"\e9b7"}.xi-signal:before{content:"\eaf1"}.xi-signal-1:before{content:"\eaf2"}.xi-signal-2:before{content:"\eaf3"}.xi-signal-3:before{content:"\eaf4"}.xi-signal-4:before{content:"\eaf5"}.xi-signal-none:before{content:"\eaf6"}.xi-space-bar:before{content:"\eaf7"}.xi-speaker:before{content:"\ea60"}.xi-tab:before{content:"\eaf8"}.xi-tablet:before{content:"\eaf9"}.xi-touch:before{content:"\eafa"}.xi-tv:before{content:"\eafb"}.xi-usb:before{content:"\eafc"}.xi-usb-drive:before{content:"\e9b8"}.xi-usim:before{content:"\e9bd"}.xi-watch:before{content:"\e9b5"}.xi-webcam:before{content:"\e9cc"}.xi-wifi-signal:before{content:"\eafd"}.xi-wifi-signal-mid:before{content:"\eafe"}.xi-wifi-signal-min:before{content:"\eaff"}.xi-wifi-signal-off:before{content:"\eb00"}.xi-album:before{content:"\ea61"}.xi-backward:before{content:"\ea47"}.xi-book:before{content:"\ea34"}.xi-book-o:before{content:"\ea35"}.xi-camera:before{content:"\ea4b"}.xi-camera-o:before{content:"\ea4a"}.xi-chart-bar:before{content:"\e901"}.xi-chart-bar-square:before{content:"\eb01"}.xi-chart-line:before{content:"\eb02"}.xi-chart-pie:before{content:"\eb03"}.xi-chart-pie-o:before{content:"\eb04"}.xi-chart-pyramid:before{content:"\ea69"}.xi-eject:before{content:"\ea42"}.xi-equalizer:before{content:"\eb05"}.xi-equalizer-thin:before{content:"\ea55"}.xi-exposure:before{content:"\eb06"}.xi-fast-backward:before{content:"\eb07"}.xi-fast-forward:before{content:"\eb08"}.xi-flash:before{content:"\eb09"}.xi-flash-off:before{content:"\eb0a"}.xi-focus-center:before{content:"\eb0b"}.xi-focus-frame:before{content:"\eb0c"}.xi-focus-weak:before{content:"\eb11"}.xi-forward:before{content:"\ea48"}.xi-game:before{content:"\eb12"}.xi-headset:before{content:"\ea64"}.xi-image:before{content:"\ea50"}.xi-image-o:before{content:"\ea4e"}.xi-library-books:before{content:"\eb14"}.xi-library-books-o:before{content:"\eb16"}.xi-library-image:before{content:"\eb17"}.xi-library-image-o:before{content:"\eb18"}.xi-library-music:before{content:"\eb19"}.xi-library-video:before{content:"\eb1a"}.xi-microphone:before{content:"\ea57"}.xi-microphone-o:before{content:"\ea56"}.xi-microphone-off:before{content:"\ea58"}.xi-movie:before{content:"\eb1b"}.xi-movie-o:before{content:"\eb1c"}.xi-music:before{content:"\ea65"}.xi-pacman:before{content:"\eb1d"}.xi-paper:before{content:"\eb1e"}.xi-paper-o:before{content:"\eb1f"}.xi-pause:before{content:"\ea3b"}.xi-pause-circle:before{content:"\ea3d"}.xi-pause-circle-o:before{content:"\ea3c"}.xi-play:before{content:"\ea3e"}.xi-play-circle:before{content:"\ea40"}.xi-play-circle-o:before{content:"\ea3f"}.xi-radio:before{content:"\eb20"}.xi-recording:before{content:"\eb21"}.xi-recording-stop:before{content:"\eb24"}.xi-repeat:before{content:"\eb25"}.xi-repeat-one:before{content:"\eb26"}.xi-shuffle:before{content:"\eb27"}.xi-step-backward:before{content:"\ea43"}.xi-step-forward:before{content:"\ea44"}.xi-stop:before{content:"\ea41"}.xi-timer:before{content:"\eb29"}.xi-timer-o:before{content:"\eb2a"}.xi-timer-off-o:before{content:"\eb2f"}.xi-timer-sand:before{content:"\eb30"}.xi-timer-sand-o:before{content:"\eb31"}.xi-trending-down:before{content:"\eb33"}.xi-trending-flat:before{content:"\eb36"}.xi-trending-up:before{content:"\eb37"}.xi-tune:before{content:"\eb38"}.xi-videocam:before{content:"\ea4d"}.xi-videocam-o:before{content:"\ea4c"}.xi-volume-down:before{content:"\ea5a"}.xi-volume-mute:before{content:"\ea59"}.xi-volume-off:before{content:"\eb39"}.xi-volume-up:before{content:"\ea5b"}.xi-airplane:before{content:"\eb3a"}.xi-all:before{content:"\eb3b"}.xi-bank:before{content:"\eb3e"}.xi-beach:before{content:"\eb3f"}.xi-bicycle:before{content:"\eb40"}.xi-building:before{content:"\eb41"}.xi-bus:before{content:"\eb42"}.xi-business:before{content:"\eb43"}.xi-cafe:before{content:"\eb44"}.xi-cake:before{content:"\eb47"}.xi-car:before{content:"\eb48"}.xi-church:before{content:"\eb49"}.xi-city:before{content:"\eb4a"}.xi-compass:before{content:"\eb4b"}.xi-compass-o:before{content:"\eb4c"}.xi-convenience-store:before{content:"\eb4d"}.xi-directions:before{content:"\eb4e"}.xi-factory:before{content:"\eb4f"}.xi-fitness-center:before{content:"\eb50"}.xi-flight-land:before{content:"\eb3d"}.xi-flight-takeoff:before{content:"\eb3c"}.xi-florist:before{content:"\eb32"}.xi-garden:before{content:"\eb51"}.xi-gas-station:before{content:"\eb52"}.xi-glass:before{content:"\eb28"}.xi-golf:before{content:"\eb53"}.xi-hand-pointing:before{content:"\eb54"}.xi-hlz:before{content:"\eb34"}.xi-hospital:before{content:"\eb55"}.xi-hotel:before{content:"\eb56"}.xi-laundry:before{content:"\eb2e"}.xi-library:before{content:"\eb57"}.xi-location-arrow:before{content:"\eb58"}.xi-man:before{content:"\ea30"}.xi-map:before{content:"\eb22"}.xi-map-marker:before{content:"\eb59"}.xi-map-o:before{content:"\eb23"}.xi-marker-check:before{content:"\eb5a"}.xi-marker-plus:before{content:"\eb5b"}.xi-market:before{content:"\eb2b"}.xi-motorcycle:before{content:"\eb5c"}.xi-my-location:before{content:"\eb5d"}.xi-navigation:before{content:"\eb5e"}.xi-park:before{content:"\eb35"}.xi-pharmacy:before{content:"\eb2c"}.xi-pin-drop:before{content:"\eb5f"}.xi-pool:before{content:"\eb60"}.xi-pregnant-woman:before{content:"\eb61"}.xi-restaurant:before{content:"\eb62"}.xi-run:before{content:"\eb63"}.xi-school:before{content:"\eb64"}.xi-ship:before{content:"\eb65"}.xi-spa:before{content:"\eb66"}.xi-stroller:before{content:"\eb67"}.xi-subway:before{content:"\eb68"}.xi-taxi:before{content:"\eb69"}.xi-theater:before{content:"\eb6a"}.xi-toilet:before{content:"\ea31"}.xi-traffic:before{content:"\eb6b"}.xi-train:before{content:"\eb6c"}.xi-walk:before{content:"\eb6d"}.xi-wheelchair:before{content:"\eb6e"}.xi-woman:before{content:"\ea2f"}.xi-basket:before{content:"\e9fe"}.xi-box:before{content:"\ea01"}.xi-briefcase:before{content:"\ea7c"}.xi-calculator:before{content:"\ea7e"}.xi-cart:before{content:"\eb6f"}.xi-cart-add:before{content:"\e9fc"}.xi-cart-o:before{content:"\e9fb"}.xi-cart-remove:before{content:"\e9fd"}.xi-coupon:before{content:"\ea03"}.xi-credit-card:before{content:"\ea77"}.xi-dollar:before{content:"\ea74"}.xi-euro:before{content:"\ea72"}.xi-exchange:before{content:"\ea53"}.xi-fragile:before{content:"\ea02"}.xi-gift:before{content:"\eb70"}.xi-gift-o:before{content:"\ea3a"}.xi-medicine:before{content:"\eb2d"}.xi-money:before{content:"\ea79"}.xi-percent:before{content:"\ea7d"}.xi-peso:before{content:"\ea75"}.xi-piggy-bank:before{content:"\ea7a"}.xi-pound:before{content:"\ea71"}.xi-receipt:before{content:"\eb71"}.xi-rial:before{content:"\ea73"}.xi-rupee:before{content:"\ea76"}.xi-shop:before{content:"\ea05"}.xi-strongbox:before{content:"\ea7b"}.xi-truck:before{content:"\eb72"}.xi-wallet:before{content:"\eb73"}.xi-won:before{content:"\ea6f"}.xi-yen:before{content:"\ea70"}.xi-yuan:before{content:"\ea6e"}.xi-attachment:before{content:"\eb74"}.xi-cloud:before{content:"\eb75"}.xi-cloud-download:before{content:"\eb76"}.xi-cloud-download-o:before{content:"\eb77"}.xi-cloud-o:before{content:"\eb78"}.xi-cloud-off:before{content:"\eb79"}.xi-cloud-upload:before{content:"\eb7a"}.xi-cloud-upload-o:before{content:"\eb7b"}.xi-documents:before{content:"\ea98"}.xi-documents-o:before{content:"\ea84"}.xi-download:before{content:"\eb7c"}.xi-file:before{content:"\ea94"}.xi-file-add:before{content:"\ea95"}.xi-file-add-o:before{content:"\ea81"}.xi-file-check:before{content:"\eaa0"}.xi-file-check-o:before{content:"\ea8c"}.xi-file-code:before{content:"\ea9c"}.xi-file-code-o:before{content:"\ea88"}.xi-file-download:before{content:"\ea9f"}.xi-file-download-o:before{content:"\ea8b"}.xi-file-image:before{content:"\ea99"}.xi-file-image-o:before{content:"\ea85"}.xi-file-music:before{content:"\ea9b"}.xi-file-music-o:before{content:"\ea87"}.xi-file-o:before{content:"\ea80"}.xi-file-remove:before{content:"\ea96"}.xi-file-remove-o:before{content:"\ea82"}.xi-file-text:before{content:"\ea97"}.xi-file-text-o:before{content:"\ea83"}.xi-file-upload:before{content:"\ea9e"}.xi-file-upload-o:before{content:"\ea8a"}.xi-file-video:before{content:"\ea9a"}.xi-file-video-o:before{content:"\ea86"}.xi-file-zip:before{content:"\ea9d"}.xi-file-zip-o:before{content:"\ea89"}.xi-folder:before{content:"\eaa1"}.xi-folder-add:before{content:"\eaa2"}.xi-folder-add-o:before{content:"\ea8e"}.xi-folder-check:before{content:"\eaa4"}.xi-folder-check-o:before{content:"\ea90"}.xi-folder-download:before{content:"\eaa6"}.xi-folder-download-o:before{content:"\ea92"}.xi-folder-o:before{content:"\ea8d"}.xi-folder-open:before{content:"\eaa8"}.xi-folder-remove:before{content:"\eaa3"}.xi-folder-remove-o:before{content:"\ea8f"}.xi-folder-shared:before{content:"\eb7d"}.xi-folder-upload:before{content:"\eaa5"}.xi-folder-upload-o:before{content:"\ea91"}.xi-folder-zip:before{content:"\eaa7"}.xi-folder-zip-o:before{content:"\ea93"}.xi-upload:before{content:"\eb7e"}.xi-accessibility:before{content:"\eb7f"}.xi-antenna:before{content:"\e9f6"}.xi-barcode:before{content:"\e9ff"}.xi-branch:before{content:"\eb80"}.xi-bug:before{content:"\eb81"}.xi-central-router:before{content:"\e9e8"}.xi-central-signal:before{content:"\e9e7"}.xi-cookie:before{content:"\eb82"}.xi-css3:before{content:"\eb83"}.xi-fingerprint:before{content:"\eb84"}.xi-fork:before{content:"\eb85"}.xi-globus:before{content:"\e9d1"}.xi-html5:before{content:"\eb86"}.xi-javascript:before{content:"\eb87"}.xi-csharp:before{content:"\eb88"}.xi-laravel:before{content:"\eb89"}.xi-log:before{content:"\eb8a"}.xi-merge:before{content:"\eb8b"}.xi-milestone:before{content:"\eb8c"}.xi-network-company:before{content:"\eb8d"}.xi-network-folder:before{content:"\eb8e"}.xi-network-home:before{content:"\eb8f"}.xi-network-public:before{content:"\eb90"}.xi-php:before{content:"\eb91"}.xi-pull-requests:before{content:"\eb92"}.xi-puzzle:before{content:"\eb93"}.xi-python:before{content:"\eb94"}.xi-qr-code:before{content:"\ea00"}.xi-rss:before{content:"\eb95"}.xi-rss-square:before{content:"\e9e5"}.xi-server:before{content:"\eb96"}.xi-server-network:before{content:"\eb97"}.xi-sitemap:before{content:"\eb98"}.xi-sitemap-o:before{content:"\eb99"}.xi-browser:before{content:"\e9db"}.xi-browser-text:before{content:"\e9dc"}.xi-spinner-1:before{content:"\ec33"}.xi-spinner-2:before{content:"\ec34"}.xi-spinner-3:before{content:"\ec35"}.xi-spinner-4:before{content:"\ec36"}.xi-spinner-5:before{content:"\ec37"}.xi-brightness-1:before{content:"\eb0d"}.xi-brightness-2:before{content:"\eb9a"}.xi-brightness-3:before{content:"\eb0e"}.xi-brightness-4:before{content:"\eb9b"}.xi-cloudy:before{content:"\eb9c"}.xi-crescent:before{content:"\eb0f"}.xi-fog:before{content:"\eb9d"}.xi-foggy:before{content:"\eb9e"}.xi-lightning:before{content:"\eb9f"}.xi-night:before{content:"\eb10"}.xi-partly-cloudy:before{content:"\eba0"}.xi-pouring:before{content:"\eba1"}.xi-snow-crystal:before{content:"\eb15"}.xi-snowy:before{content:"\eba2"}.xi-sun:before{content:"\eba3"}.xi-sun-o:before{content:"\eba4"}.xi-sunset:before{content:"\eba5"}.xi-sunset-down:before{content:"\eba6"}.xi-sunset-up:before{content:"\eba7"}.xi-thermometer:before{content:"\eba8"}.xi-tint:before{content:"\eba9"}.xi-tint-o:before{content:"\ebaa"}.xi-tornado:before{content:"\ebab"}.xi-umbrella:before{content:"\ebac"}.xi-umbrella-o:before{content:"\ebad"}.xi-wind:before{content:"\eb13"}.xi-windy:before{content:"\ebae"}.xi-windy-variant:before{content:"\ebaf"}.xi-cc-by:before{content:"\eaae"}.xi-cc-cc:before{content:"\eaad"}.xi-cc-nc:before{content:"\eab1"}.xi-cc-nc-eu:before{content:"\eab2"}.xi-cc-nc-jp:before{content:"\eab3"}.xi-cc-nd:before{content:"\eab0"}.xi-cc-pd:before{content:"\eab5"}.xi-cc-remix:before{content:"\eab4"}.xi-cc-sa:before{content:"\eaaf"}.xi-cc-sampling:before{content:"\eab6"}.xi-cc-share:before{content:"\eab8"}.xi-cc-zero:before{content:"\eab7"}.xi-copyleft:before{content:"\ebb0"}.xi-copyright:before{content:"\ebb1"}.xi-registered:before{content:"\eaab"}.xi-trademark:before{content:"\eaac"}.xi-500px:before{content:"\ebb2"}.xi-adobe:before{content:"\ebb3"}.xi-amazon:before{content:"\ebb4"}.xi-android:before{content:"\ebb5"}.xi-apple:before{content:"\ebb6"}.xi-beats:before{content:"\ebb7"}.xi-behance:before{content:"\ebb8"}.xi-bing:before{content:"\ebb9"}.xi-bitbucket:before{content:"\ebba"}.xi-blackberry:before{content:"\ebbb"}.xi-blogger:before{content:"\ebbc"}.xi-silverstripe:before{content:"\ebbd"}.xi-cc-amex:before{content:"\ebbe"}.xi-cc-discover:before{content:"\ebbf"}.xi-cc-mastercard:before{content:"\ebc0"}.xi-cc-paypal:before{content:"\ebc1"}.xi-cc-stripe:before{content:"\ebc2"}.xi-cc-visa:before{content:"\ebc3"}.xi-chak:before{content:"\ebc4"}.xi-chrome:before{content:"\ebc5"}.xi-codepen:before{content:"\ebc6"}.xi-connectdevelop:before{content:"\ebc7"}.xi-d2:before{content:"\ebc8"}.xi-dashcube:before{content:"\ebc9"}.xi-delicious:before{content:"\ebca"}.xi-deviantart:before{content:"\ebcb"}.xi-digg:before{content:"\ebcc"}.xi-disqus:before{content:"\ebcd"}.xi-dribbble:before{content:"\ebce"}.xi-dropbox:before{content:"\ebcf"}.xi-drupal:before{content:"\ebd0"}.xi-edge:before{content:"\ebd1"}.xi-evernote:before{content:"\ebd2"}.xi-facebook:before{content:"\ebd3"}.xi-facebook-messenger:before{content:"\ebd4"}.xi-facebook-official:before{content:"\ebd5"}.xi-feedly:before{content:"\ebd6"}.xi-firefox:before{content:"\ebd7"}.xi-flickr:before{content:"\eaca"}.xi-flickr-square:before{content:"\ebd8"}.xi-foursquare:before{content:"\ebd9"}.xi-ghost:before{content:"\ebda"}.xi-git:before{content:"\ebdb"}.xi-git-symbol:before{content:"\ebdc"}.xi-github:before{content:"\ebdd"}.xi-github-alt:before{content:"\ebde"}.xi-gmail:before{content:"\ebdf"}.xi-google:before{content:"\ebe0"}.xi-google-play:before{content:"\ebe1"}.xi-google-plus:before{content:"\ebe2"}.xi-google-wallet:before{content:"\ebe3"}.xi-gratipay:before{content:"\ebe4"}.xi-hangouts:before{content:"\ebe5"}.xi-hunie:before{content:"\ebe6"}.xi-illustrator:before{content:"\ebe7"}.xi-illustrator-circle:before{content:"\ebe8"}.xi-instagram:before{content:"\ebe9"}.xi-internet-explorer:before{content:"\ebea"}.xi-jira:before{content:"\ebeb"}.xi-joomla:before{content:"\ebec"}.xi-jsfiddle:before{content:"\ebed"}.xi-kakao:before{content:"\ebee"}.xi-kakaostory:before{content:"\ebef"}.xi-kickstarter:before{content:"\ebf0"}.xi-line:before{content:"\ebf1"}.xi-line-messenger:before{content:"\ebf2"}.xi-linkedin:before{content:"\ebf3"}.xi-linkedin-square:before{content:"\ebf4"}.xi-linux:before{content:"\ebf5"}.xi-magento:before{content:"\ebf6"}.xi-maxcdn:before{content:"\ebf7"}.xi-medium:before{content:"\ebf8"}.xi-naver:before{content:"\ebf9"}.xi-naver-square:before{content:"\ebfa"}.xi-office:before{content:"\ebfb"}.xi-opencart:before{content:"\ebfc"}.xi-opera:before{content:"\ebfd"}.xi-oscommerce:before{content:"\ebfe"}.xi-path:before{content:"\ebff"}.xi-paypal:before{content:"\ec00"}.xi-photoshop:before{content:"\ec01"}.xi-photoshop-circle:before{content:"\ec02"}.xi-pinterest:before{content:"\ec03"}.xi-pinterest-p:before{content:"\ec04"}.xi-pocket:before{content:"\ec05"}.xi-qq:before{content:"\ec06"}.xi-quicktime:before{content:"\ec07"}.xi-reddit:before{content:"\ec08"}.xi-renren:before{content:"\ec09"}.xi-safari:before{content:"\ec0a"}.xi-sellsy:before{content:"\ec0b"}.xi-simplybuilt:before{content:"\ec0c"}.xi-sketch:before{content:"\ec0d"}.xi-skype:before{content:"\ec0e"}.xi-slack:before{content:"\ec0f"}.xi-slideshare:before{content:"\ec10"}.xi-soundcloud:before{content:"\ec11"}.xi-spotify:before{content:"\ec12"}.xi-stack-exchange:before{content:"\ec13"}.xi-stack-overflow:before{content:"\ec14"}.xi-steam:before{content:"\ec15"}.xi-steam-square:before{content:"\ec16"}.xi-stumbleupon:before{content:"\ec17"}.xi-stumbleupon-circle:before{content:"\ec18"}.xi-telegram:before{content:"\ec19"}.xi-tencent-weibo:before{content:"\ec1a"}.xi-trello:before{content:"\ec1b"}.xi-tumblr:before{content:"\ec1c"}.xi-tumblr-square:before{content:"\ec1d"}.xi-twich:before{content:"\ec1e"}.xi-twitter:before{content:"\ec1f"}.xi-ubercart:before{content:"\ec20"}.xi-ubuntu:before{content:"\ec21"}.xi-ubuntu-circle:before{content:"\ec22"}.xi-vimeo:before{content:"\ec23"}.xi-vine:before{content:"\ec24"}.xi-vk:before{content:"\ec25"}.xi-wechat:before{content:"\ec26"}.xi-whatsapp:before{content:"\ec27"}.xi-wikipedia:before{content:"\ec28"}.xi-windows:before{content:"\ec29"}.xi-wordpress:before{content:"\ec2a"}.xi-wordpress-official:before{content:"\ec2b"}.xi-xe:before{content:"\ec2c"}.xi-xing:before{content:"\ec2d"}.xi-xpressengine:before{content:"\ec2e"}.xi-yahoo:before{content:"\ec2f"}.xi-yelp:before{content:"\ec30"}.xi-youtube:before{content:"\ec31"}.xi-youtube-play:before{content:"\ec32"}.xi-x{font-size:1.33333333em;line-height:.75em;vertical-align:-15%}.xi-2x{font-size:2em}.xi-3x{font-size:3em}.xi-4x{font-size:4em}.xi-5x{font-size:5em}.xi-spin{-webkit-animation:xi-spin 2s infinite linear;animation:xi-spin 2s infinite linear}@-webkit-keyframes xi-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}@keyframes xi-spin{0%{-webkit-transform:rotate(0);transform:rotate(0)}100%{-webkit-transform:rotate(359deg);transform:rotate(359deg)}}.xi-rotate-90{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg)}.xi-rotate-180{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);-webkit-transform:rotate(180deg);-ms-transform:rotate(180deg);transform:rotate(180deg)}.xi-rotate-270{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);-webkit-transform:rotate(270deg);-ms-transform:rotate(270deg);transform:rotate(270deg)}.xi-flip-horizontal{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1)}.xi-flip-vertical{filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);-webkit-transform:scale(1,-1);-ms-transform:scale(1,-1);transform:scale(1,-1)}:root .xi-flip-horizontal,:root .xi-flip-vertical,:root .xi-rotate-180,:root .xi-rotate-270,:root .xi-rotate-90{filter:none}.xi-fw{width:1.28571429em}.xi-ul{padding-left:0;margin-left:2.14285714em;list-style-type:none}.xi-ul>li{position:relative}.xi-li{position:absolute;left:-2.14285714em;width:2.14285714em;top:.14285714em}.xi-li.xi-lg{left:-1.85714286em}.xi-border{padding:.2em .25em .15em;border:.08em solid #eee;border-radius:.1em}.pull-right{float:right}.pull-left{float:left}.xi.pull-left{margin-right:.3em}.xi.pull-right{margin-left:.3em}
/**
 * Swiper 9.3.2
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2023 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: May 15, 2023
 */

 @font-face{font-family:swiper-icons;src:url('data:application/font-woff;charset=utf-8;base64, d09GRgABAAAAAAZgABAAAAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAGRAAAABoAAAAci6qHkUdERUYAAAWgAAAAIwAAACQAYABXR1BPUwAABhQAAAAuAAAANuAY7+xHU1VCAAAFxAAAAFAAAABm2fPczU9TLzIAAAHcAAAASgAAAGBP9V5RY21hcAAAAkQAAACIAAABYt6F0cBjdnQgAAACzAAAAAQAAAAEABEBRGdhc3AAAAWYAAAACAAAAAj//wADZ2x5ZgAAAywAAADMAAAD2MHtryVoZWFkAAABbAAAADAAAAA2E2+eoWhoZWEAAAGcAAAAHwAAACQC9gDzaG10eAAAAigAAAAZAAAArgJkABFsb2NhAAAC0AAAAFoAAABaFQAUGG1heHAAAAG8AAAAHwAAACAAcABAbmFtZQAAA/gAAAE5AAACXvFdBwlwb3N0AAAFNAAAAGIAAACE5s74hXjaY2BkYGAAYpf5Hu/j+W2+MnAzMYDAzaX6QjD6/4//Bxj5GA8AuRwMYGkAPywL13jaY2BkYGA88P8Agx4j+/8fQDYfA1AEBWgDAIB2BOoAeNpjYGRgYNBh4GdgYgABEMnIABJzYNADCQAACWgAsQB42mNgYfzCOIGBlYGB0YcxjYGBwR1Kf2WQZGhhYGBiYGVmgAFGBiQQkOaawtDAoMBQxXjg/wEGPcYDDA4wNUA2CCgwsAAAO4EL6gAAeNpj2M0gyAACqxgGNWBkZ2D4/wMA+xkDdgAAAHjaY2BgYGaAYBkGRgYQiAHyGMF8FgYHIM3DwMHABGQrMOgyWDLEM1T9/w8UBfEMgLzE////P/5//f/V/xv+r4eaAAeMbAxwIUYmIMHEgKYAYjUcsDAwsLKxc3BycfPw8jEQA/gZBASFhEVExcQlJKWkZWTl5BUUlZRVVNXUNTQZBgMAAMR+E+gAEQFEAAAAKgAqACoANAA+AEgAUgBcAGYAcAB6AIQAjgCYAKIArAC2AMAAygDUAN4A6ADyAPwBBgEQARoBJAEuATgBQgFMAVYBYAFqAXQBfgGIAZIBnAGmAbIBzgHsAAB42u2NMQ6CUAyGW568x9AneYYgm4MJbhKFaExIOAVX8ApewSt4Bic4AfeAid3VOBixDxfPYEza5O+Xfi04YADggiUIULCuEJK8VhO4bSvpdnktHI5QCYtdi2sl8ZnXaHlqUrNKzdKcT8cjlq+rwZSvIVczNiezsfnP/uznmfPFBNODM2K7MTQ45YEAZqGP81AmGGcF3iPqOop0r1SPTaTbVkfUe4HXj97wYE+yNwWYxwWu4v1ugWHgo3S1XdZEVqWM7ET0cfnLGxWfkgR42o2PvWrDMBSFj/IHLaF0zKjRgdiVMwScNRAoWUoH78Y2icB/yIY09An6AH2Bdu/UB+yxopYshQiEvnvu0dURgDt8QeC8PDw7Fpji3fEA4z/PEJ6YOB5hKh4dj3EvXhxPqH/SKUY3rJ7srZ4FZnh1PMAtPhwP6fl2PMJMPDgeQ4rY8YT6Gzao0eAEA409DuggmTnFnOcSCiEiLMgxCiTI6Cq5DZUd3Qmp10vO0LaLTd2cjN4fOumlc7lUYbSQcZFkutRG7g6JKZKy0RmdLY680CDnEJ+UMkpFFe1RN7nxdVpXrC4aTtnaurOnYercZg2YVmLN/d/gczfEimrE/fs/bOuq29Zmn8tloORaXgZgGa78yO9/cnXm2BpaGvq25Dv9S4E9+5SIc9PqupJKhYFSSl47+Qcr1mYNAAAAeNptw0cKwkAAAMDZJA8Q7OUJvkLsPfZ6zFVERPy8qHh2YER+3i/BP83vIBLLySsoKimrqKqpa2hp6+jq6RsYGhmbmJqZSy0sraxtbO3sHRydnEMU4uR6yx7JJXveP7WrDycAAAAAAAH//wACeNpjYGRgYOABYhkgZgJCZgZNBkYGLQZtIJsFLMYAAAw3ALgAeNolizEKgDAQBCchRbC2sFER0YD6qVQiBCv/H9ezGI6Z5XBAw8CBK/m5iQQVauVbXLnOrMZv2oLdKFa8Pjuru2hJzGabmOSLzNMzvutpB3N42mNgZGBg4GKQYzBhYMxJLMlj4GBgAYow/P/PAJJhLM6sSoWKfWCAAwDAjgbRAAB42mNgYGBkAIIbCZo5IPrmUn0hGA0AO8EFTQAA');font-weight:400;font-style:normal}:root{--swiper-theme-color:#007aff}.swiper,swiper-container{margin-left:auto;margin-right:auto;position:relative;overflow:hidden;list-style:none;padding:0;z-index:1;display:block}.swiper-vertical>.swiper-wrapper{flex-direction:column}.swiper-wrapper{position:relative;width:100%;height:100%;z-index:1;display:flex;transition-property:transform;transition-timing-function:var(--swiper-wrapper-transition-timing-function,initial);box-sizing:content-box}.swiper-android .swiper-slide,.swiper-wrapper{transform:translate3d(0px,0,0)}.swiper-horizontal{touch-action:pan-y}.swiper-vertical{touch-action:pan-x}.swiper-slide,swiper-slide{flex-shrink:0;width:100%;height:100%;position:relative;transition-property:transform;display:block}.swiper-slide-invisible-blank{visibility:hidden}.swiper-autoheight,.swiper-autoheight .swiper-slide{height:auto}.swiper-autoheight .swiper-wrapper{align-items:flex-start;transition-property:transform,height}.swiper-backface-hidden .swiper-slide{transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-3d.swiper-css-mode .swiper-wrapper{perspective:1200px}.swiper-3d .swiper-wrapper{transform-style:preserve-3d}.swiper-3d{perspective:1200px}.swiper-3d .swiper-cube-shadow,.swiper-3d .swiper-slide,.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{transform-style:preserve-3d}.swiper-3d .swiper-slide-shadow,.swiper-3d .swiper-slide-shadow-bottom,.swiper-3d .swiper-slide-shadow-left,.swiper-3d .swiper-slide-shadow-right,.swiper-3d .swiper-slide-shadow-top{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}.swiper-3d .swiper-slide-shadow{background:rgba(0,0,0,.15)}.swiper-3d .swiper-slide-shadow-left{background-image:linear-gradient(to left,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-right{background-image:linear-gradient(to right,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-top{background-image:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-3d .swiper-slide-shadow-bottom{background-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,0))}.swiper-css-mode>.swiper-wrapper{overflow:auto;scrollbar-width:none;-ms-overflow-style:none}.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar{display:none}.swiper-css-mode>.swiper-wrapper>.swiper-slide{scroll-snap-align:start start}.swiper-horizontal.swiper-css-mode>.swiper-wrapper{scroll-snap-type:x mandatory}.swiper-vertical.swiper-css-mode>.swiper-wrapper{scroll-snap-type:y mandatory}.swiper-centered>.swiper-wrapper::before{content:'';flex-shrink:0;order:9999}.swiper-centered>.swiper-wrapper>.swiper-slide{scroll-snap-align:center center;scroll-snap-stop:always}.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child{margin-inline-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-horizontal>.swiper-wrapper::before{height:100%;min-height:1px;width:var(--swiper-centered-offset-after)}.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child{margin-block-start:var(--swiper-centered-offset-before)}.swiper-centered.swiper-vertical>.swiper-wrapper::before{width:100%;min-width:1px;height:var(--swiper-centered-offset-after)}.swiper-lazy-preloader{width:42px;height:42px;position:absolute;left:50%;top:50%;margin-left:-21px;margin-top:-21px;z-index:10;transform-origin:50%;box-sizing:border-box;border:4px solid var(--swiper-preloader-color,var(--swiper-theme-color));border-radius:50%;border-top-color:transparent}.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader,swiper-container:not(.swiper-watch-progress) .swiper-lazy-preloader{animation:swiper-preloader-spin 1s infinite linear}.swiper-lazy-preloader-white{--swiper-preloader-color:#fff}.swiper-lazy-preloader-black{--swiper-preloader-color:#000}@keyframes swiper-preloader-spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.swiper-virtual .swiper-slide{-webkit-backface-visibility:hidden;transform:translateZ(0)}.swiper-virtual.swiper-css-mode .swiper-wrapper::after{content:'';position:absolute;left:0;top:0;pointer-events:none}.swiper-virtual.swiper-css-mode.swiper-horizontal .swiper-wrapper::after{height:1px;width:var(--swiper-virtual-size)}.swiper-virtual.swiper-css-mode.swiper-vertical .swiper-wrapper::after{width:1px;height:var(--swiper-virtual-size)}:root{--swiper-navigation-size:44px}.swiper-button-next,.swiper-button-prev{position:absolute;top:var(--swiper-navigation-top-offset,50%);width:calc(var(--swiper-navigation-size)/ 44 * 27);height:var(--swiper-navigation-size);margin-top:calc(0px - (var(--swiper-navigation-size)/ 2));z-index:10;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--swiper-navigation-color,var(--swiper-theme-color))}.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled{opacity:.35;cursor:auto;pointer-events:none}.swiper-button-next.swiper-button-hidden,.swiper-button-prev.swiper-button-hidden{opacity:0;cursor:auto;pointer-events:none}.swiper-navigation-disabled .swiper-button-next,.swiper-navigation-disabled .swiper-button-prev{display:none!important}.swiper-button-next:after,.swiper-button-prev:after{font-family:swiper-icons;font-size:var(--swiper-navigation-size);text-transform:none!important;letter-spacing:0;font-variant:initial;line-height:1}.swiper-button-prev,.swiper-rtl .swiper-button-next{left:var(--swiper-navigation-sides-offset,10px);right:auto}.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{content:'prev'}.swiper-button-next,.swiper-rtl .swiper-button-prev{right:var(--swiper-navigation-sides-offset,10px);left:auto}.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{content:'next'}.swiper-button-lock{display:none}.swiper-pagination{position:absolute;text-align:center;transition:.3s opacity;transform:translate3d(0,0,0);z-index:10}.swiper-pagination.swiper-pagination-hidden{opacity:0}.swiper-pagination-disabled>.swiper-pagination,.swiper-pagination.swiper-pagination-disabled{display:none!important}.swiper-horizontal>.swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:var(--swiper-pagination-bottom,8px);top:var(--swiper-pagination-top,auto);left:0;width:100%}.swiper-pagination-bullets-dynamic{overflow:hidden;font-size:0}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transform:scale(.33);position:relative}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-main{transform:scale(1)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-prev-prev{transform:scale(.33)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next{transform:scale(.66)}.swiper-pagination-bullets-dynamic .swiper-pagination-bullet-active-next-next{transform:scale(.33)}.swiper-pagination-bullet{width:var(--swiper-pagination-bullet-width,var(--swiper-pagination-bullet-size,8px));height:var(--swiper-pagination-bullet-height,var(--swiper-pagination-bullet-size,8px));display:inline-block;border-radius:var(--swiper-pagination-bullet-border-radius,50%);background:var(--swiper-pagination-bullet-inactive-color,#000);opacity:var(--swiper-pagination-bullet-inactive-opacity, .2)}button.swiper-pagination-bullet{border:none;margin:0;padding:0;box-shadow:none;-webkit-appearance:none;appearance:none}.swiper-pagination-clickable .swiper-pagination-bullet{cursor:pointer}.swiper-pagination-bullet:only-child{display:none!important}.swiper-pagination-bullet-active{opacity:var(--swiper-pagination-bullet-opacity, 1);background:var(--swiper-pagination-color,var(--swiper-theme-color))}.swiper-pagination-vertical.swiper-pagination-bullets,.swiper-vertical>.swiper-pagination-bullets{right:var(--swiper-pagination-right,8px);left:var(--swiper-pagination-left,auto);top:50%;transform:translate3d(0px,-50%,0)}.swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet{margin:var(--swiper-pagination-bullet-vertical-gap,6px) 0;display:block}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{top:50%;transform:translateY(-50%);width:8px}.swiper-pagination-vertical.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-vertical>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{display:inline-block;transition:.2s transform,.2s top}.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin:0 var(--swiper-pagination-bullet-horizontal-gap,4px)}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic{left:50%;transform:translateX(-50%);white-space:nowrap}.swiper-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,.swiper-pagination-horizontal.swiper-pagination-bullets.swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s left}.swiper-horizontal.swiper-rtl>.swiper-pagination-bullets-dynamic .swiper-pagination-bullet,:host(.swiper-horizontal.swiper-rtl) .swiper-pagination-bullets-dynamic .swiper-pagination-bullet{transition:.2s transform,.2s right}.swiper-pagination-fraction{color:var(--swiper-pagination-fraction-color,inherit)}.swiper-pagination-progressbar{background:var(--swiper-pagination-progressbar-bg-color,rgba(0,0,0,.25));position:absolute}.swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background:var(--swiper-pagination-color,var(--swiper-theme-color));position:absolute;left:0;top:0;width:100%;height:100%;transform:scale(0);transform-origin:left top}.swiper-rtl .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{transform-origin:right top}.swiper-horizontal>.swiper-pagination-progressbar,.swiper-pagination-progressbar.swiper-pagination-horizontal,.swiper-pagination-progressbar.swiper-pagination-vertical.swiper-pagination-progressbar-opposite,.swiper-vertical>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite{width:100%;height:var(--swiper-pagination-progressbar-size,4px);left:0;top:0}.swiper-horizontal>.swiper-pagination-progressbar.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite,.swiper-pagination-progressbar.swiper-pagination-vertical,.swiper-vertical>.swiper-pagination-progressbar{width:var(--swiper-pagination-progressbar-size,4px);height:100%;left:0;top:0}.swiper-pagination-lock{display:none}.swiper-scrollbar{border-radius:var(--swiper-scrollbar-border-radius,10px);position:relative;-ms-touch-action:none;background:var(--swiper-scrollbar-bg-color,rgba(0,0,0,.1))}.swiper-scrollbar-disabled>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-disabled{display:none!important}.swiper-horizontal>.swiper-scrollbar,.swiper-scrollbar.swiper-scrollbar-horizontal{position:absolute;left:var(--swiper-scrollbar-sides-offset,1%);bottom:var(--swiper-scrollbar-bottom,4px);top:var(--swiper-scrollbar-top,auto);z-index:50;height:var(--swiper-scrollbar-size,4px);width:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar.swiper-scrollbar-vertical,.swiper-vertical>.swiper-scrollbar{position:absolute;left:var(--swiper-scrollbar-left,auto);right:var(--swiper-scrollbar-right,4px);top:var(--swiper-scrollbar-sides-offset,1%);z-index:50;width:var(--swiper-scrollbar-size,4px);height:calc(100% - 2 * var(--swiper-scrollbar-sides-offset,1%))}.swiper-scrollbar-drag{height:100%;width:100%;position:relative;background:var(--swiper-scrollbar-drag-bg-color,rgba(0,0,0,.5));border-radius:var(--swiper-scrollbar-border-radius,10px);left:0;top:0}.swiper-scrollbar-cursor-drag{cursor:move}.swiper-scrollbar-lock{display:none}.swiper-zoom-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center;text-align:center}.swiper-zoom-container>canvas,.swiper-zoom-container>img,.swiper-zoom-container>svg{max-width:100%;max-height:100%;object-fit:contain}.swiper-slide-zoomed{cursor:move;touch-action:none}.swiper .swiper-notification,swiper-container .swiper-notification{position:absolute;left:0;top:0;pointer-events:none;opacity:0;z-index:-1000}.swiper-free-mode>.swiper-wrapper{transition-timing-function:ease-out;margin:0 auto}.swiper-grid>.swiper-wrapper{flex-wrap:wrap}.swiper-grid-column>.swiper-wrapper{flex-wrap:wrap;flex-direction:column}.swiper-fade.swiper-free-mode .swiper-slide{transition-timing-function:ease-out}.swiper-fade .swiper-slide{pointer-events:none;transition-property:opacity}.swiper-fade .swiper-slide .swiper-slide{pointer-events:none}.swiper-fade .swiper-slide-active,.swiper-fade .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube{overflow:visible}.swiper-cube .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1;visibility:hidden;transform-origin:0 0;width:100%;height:100%}.swiper-cube .swiper-slide .swiper-slide{pointer-events:none}.swiper-cube.swiper-rtl .swiper-slide{transform-origin:100% 0}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-cube .swiper-slide-active,.swiper-cube .swiper-slide-next,.swiper-cube .swiper-slide-next+.swiper-slide,.swiper-cube .swiper-slide-prev{pointer-events:auto;visibility:visible}.swiper-cube .swiper-slide-shadow-bottom,.swiper-cube .swiper-slide-shadow-left,.swiper-cube .swiper-slide-shadow-right,.swiper-cube .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-cube .swiper-cube-shadow{position:absolute;left:0;bottom:0px;width:100%;height:100%;opacity:.6;z-index:0}.swiper-cube .swiper-cube-shadow:before{content:'';background:#000;position:absolute;left:0;top:0;bottom:0;right:0;filter:blur(50px)}.swiper-flip{overflow:visible}.swiper-flip .swiper-slide{pointer-events:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;z-index:1}.swiper-flip .swiper-slide .swiper-slide{pointer-events:none}.swiper-flip .swiper-slide-active,.swiper-flip .swiper-slide-active .swiper-slide-active{pointer-events:auto}.swiper-flip .swiper-slide-shadow-bottom,.swiper-flip .swiper-slide-shadow-left,.swiper-flip .swiper-slide-shadow-right,.swiper-flip .swiper-slide-shadow-top{z-index:0;-webkit-backface-visibility:hidden;backface-visibility:hidden}.swiper-creative .swiper-slide{-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden;transition-property:transform,opacity,height}.swiper-cards{overflow:visible}.swiper-cards .swiper-slide{transform-origin:center bottom;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}