/*20250305 신규 작성_SCH*/
html {
    font-size: 10px;
    min-width: 320px;
}

@media screen and (max-width: 1940px) {
}
@media screen and (max-width: 1400px) {
}
@media screen and (max-width: 780px) {
    html {font-size: 8px;}
}
@media screen and (max-width: 660px) {
}
@media screen and (max-width: 450px) {
}

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

:root {
    --font-size-xxl: 4.5rem;  /* 매우 큰 화면에서 사용 */
    --font-size-xl: 3.6rem;   /* 큰 화면에서 사용 */
    --font-size-lg: 2.4rem;   /* 중간 크기 화면에서 사용 */
    --font-size-md: 1.8rem;   /* 작은 화면에서 사용 */
    --font-size-sm: 1.6rem;   /* 매우 작은 화면에서 사용 */
}

/*html rem 반응형 폰트 사이즈 지정*/
input:-webkit-autofill {
    box-shadow: 0 0 0 1000px white inset !important;
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    -webkit-text-fill-color: #000 !important;
    transition: background-color 9999s ease-out;
}

body {
    font-size: 1.8rem;
}

strong, em {
    font-weight: 600;
}

input::placeholder {
    font-size: 1.6rem;
}

/* 헤더 */
.header_gnb {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    z-index: -1;
    display: flex;
    height: 100%;
}

.lang_wrap {
    width: 100%;
    margin: 0 auto;
    max-width: 1400px;
    padding: 6px 30px;
    background-color: #fff;
    /*border-bottom: 1px solid #ddd;*/
    display: flex;
    justify-content: flex-end;
}

.langSelect {
    display: inline-block;
}

.langSelect li {
    margin: 5px;
    display: inline-block;
    cursor: pointer;
}

.langSelect li img {
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 1px solid #929292;
}

/*#langSelectWrap {*/
/*    color: #202020;*/
/*    position: relative;*/
/*    width: 100px;*/
/*    z-index: 5;*/
/*}*/
/*#langSelectWrap li {*/
/*    text-align: start;*/
/*    font-family: "Noto Sans KR";*/
/*    font-size: var(--font-size-md);*/
/*    font-style: normal;*/
/*    font-weight: 500;*/
/*}*/
/*#langSelectWrap li > img {*/
/*    width: 20px;*/
/*    height: 20px;*/
/*    margin-right: 6px;*/
/*    border: 1px solid black;*/
/*    border-radius: 4px;*/
/*}*/
/*#langSelectWrap li.select a {*/
/*    color: #008dff;*/
/*}*/

.header_gnb > ul {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    gap: 80px;
    color: #202020;
    text-align: center;
    font-family: "Noto Sans";
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    border-radius: 100px;
    background: #FFF;
    /*box-shadow: 0px 10px 20px 0px rgba(33, 158, 248, 0.10);*/
}
.header_gnb > ul > li {
    position: relative; /* 드롭다운 위한 위치 기준 */
    display: flex;
    justify-content: center;
    align-items: center;
}
.header_gnb > ul > li > a {
    cursor: pointer;
    text-decoration: none;
    position: relative;
    display: block;
    text-align: center;
    line-height: 100px;
}
.header_gnb > ul > li:hover > a {
    color: #008dff;
}
.header_gnb > ul > .parent_menu:hover > a::after {
    content: '';
}

/* 드롭다운 영역 */
.header_gnb > ul > li > ul {
    display: none;
    position: absolute;
    top: 100px;
    padding: 12px;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    z-index: 10;
    min-width: 180px;
}
.header_gnb > ul > li:hover > ul {
    display: block;
    box-shadow: 0px 10px 20px 0px rgba(33, 158, 248, 0.10);
}
.header_gnb > ul > li > ul > li {
    margin: 10px 20px;
    text-align: start;
    font-weight: normal;
    white-space: nowrap;
}
.header_gnb > ul > li > ul > li > a {
    cursor: pointer;
    text-decoration: none;
    color: #202020;
    text-align: right;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 18px */
    letter-spacing: -0.54px;
}
.header_gnb > ul > li > ul > li > a:hover {
    font-weight: 600;
    color: #008dff;
}

/* 로그인 스타일 유지 */
.header_login {
    position: absolute;
    top: 50%;
    right: 3%;
    transform: translate(0, -50%);
    align-items: center;
}
.header_login .highlight-btn a {
    background: #0064C2;
    color: #ffffff;
    border: none;
}
.header_login > ul {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.header_login > ul > li > a {
    padding: 10.41px 37.3px 11.59px 38.7px;
    border: 1px solid #ddd;
    border-radius: 30px;
    font-size: 1.6rem;
    font-weight: 600;
    text-decoration: none;
}
.header_login > ul > li > a:hover {
    /*color: #369aff;*/
    /*border: 1px solid #369aff;*/
}
#gnb {
    /*right: 100px;*/
    width: 290px;
    /*height: auto!important;*/
    padding: 50px 20px 30px;
    border-radius: 12px;
}
#gnb > ul > li > a {
    height: 50px;
    margin: 0;
    border-bottom: 1px solid #e5e5e5;
    border-radius: 0;
    background-color: inherit;
    transition: none;
    font-size: 1.6rem;
}
#gnb > ul > li > a:hover {
    background-color: inherit;
    border: none;
    color: inherit;
}
#gnb .pc_block {
    display: flex;
    flex-direction: column;
    padding: 0;
}

#header {
}
#header .header_inner {
    width: 100%;
    height: 100%;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1100;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
    background: #fff;
    box-shadow: 0 1px 5px 0 rgb(0 0 0 / 15%);
    border-radius: 100px;
}
#header.open .btn_close {
    right: 15px;
}
#header.open #gnb {
    right: 3%;
    height: auto;
    padding-left: 20px;
}
#header h1 {
    top: 50%;
    transform: translate(0, -50%);
}
#header h1 a {
    width: 153px;
    height: 45px;
    background: url(../images/common/logo.png) no-repeat center center;
    background-size: contain;
}
#header .btn_nav {
    display: none;
}
#gnb > .pc_block > li {
    margin: 0;
    padding: 2px;
}
#gnb .pc_block > li > a {
    /*border: none;*/
    margin: 0;
    padding: 0;
    height: 50px;
    line-height: 50px;
    background: none;
    color: #008dff;
    border: 1px solid #96d0ff;
    cursor: pointer;
    border-radius: 5px;
}
#gnb .pc_block > li > a:hover {
    background: #008dff;
    color: #fff;
    border: 1px solid #96d0ff;
}
#gnb > ul > li > ul > li > a {
    font-size: 1.6rem;
}
#gnb > ul > li > ul > li > a.on::before {
    background: #008dff;
}
.mo_block {
    display: none!important;
}
.log_lay {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 1200px) {
    #gnb > ul .langSelect {
        display: flex;
        flex-direction: column;
    }

    #gnb > ul .langSelect li {
        display: flex;
        position: relative;
    }

    #gnb > ul .langSelect li > img {
        width: 20px;
        height: 20px;
        margin-right: 6px;
        border-radius: 6px;
        border: 1px solid black;
        position: absolute;
        top: 50%;
        transform: translate(0, -50%);
        left: 6px;
    }

    #gnb > ul .langSelect li a {
        width: 100%;
        padding-left: 20px;
        padding-right: 25px;
        position: relative;
        display: block;
        padding: 0 26px 0 31px;
        height: 46px;
        line-height: 46px;
        color: #666;
        font-size: var(--font-size-sm);
        font-family: 'Pretendard', '돋움', dotum, sans-serif;
        text-align: left;
    }

    #gnb > ul .langSelect li.select a {
        width: 100%;
        text-decoration: none;
        background: rgba(185, 231, 255, 0.45);
        color: #008dff !important;
        font-weight: 600;
        transition: 0.3s;

    }
}
@media screen and (max-width:1400px) {
    .header_gnb > ul {
        gap: 20px;
        font-size: 0.8em;
    }
}
@media screen and (max-width:1200px) {

    .header_gnb {
        display: none;
    }

    #header.open #gnb {
        right: 0;
        height: 100%;
        padding-left: 0;
    }

    #header .btn_nav {
        display: block;
    }

    #gnb {
        width: 290px;
        border-radius: 0;
    }

    #gnb .pc_block {
        display: none;
    }

    .mo_block {
        display: flex!important;
        flex-direction: column;
        /*gap: 10px;*/
    }

    .mo_block > li {
        padding: 5px;
        /*border-bottom: 1px solid #f5f5f5;*/
        cursor: pointer;
        position: relative;
    }

    .header_login {
        display: none;
    }

    .mo_block > li > ul {
        display: none;
    }

    .mo_block > li.open > ul {
        display: block;
    }

    #gnb > .mo_block > li > a:hover ,
    #gnb > .mo_block > li.open > a {
        /*background: rgba(185, 231, 255, 0.45);*/
        border-bottom: 1px solid #369aff;
        color: #369aff;
    }


    .mo_block > li.open > a::before {
        display: block;
    }

    #gnb > .mo_block > li > a {
        display: flex;
        justify-content: space-between;
        align-items: center;

        transition: 0.3s;
    }

    #gnb > .mo_block > li > a:hover,
    #gnb > .mo_block > li.open > a {
        border-bottom: 1px solid #ddd;
    }

    #gnb > .mo_block > li > a > img {
        transition: 0.3s;
    }

    #gnb > .mo_block > li.open > a > img {
        transform: rotate(180deg);
    }

    .mo_block > li > ul > li > a:hover,
    .mo_block > li > ul > li > a.on {
        text-decoration: none;
        background: rgba(185, 231, 255, 0.45);
        color: #008dff!important;
        font-weight: 600;
        transition: 0.3s;
    }

    .mo_block > li > ul > li > a:hover::before {
        background: #008dff!important;
    }
    #gnb > ul > .log_box {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 5px;

        padding: 0 15px 15px;
        border-bottom: 1px solid #ddd;
    }

    #gnb > ul > .log_box strong {
        /*font-size: 1.125rem;*/
        font-weight: 600;
    }

    #gnb > ul > .log_box > .mo_log {
        width: 100%;
        height: 40px;
        color: #008dff;
        border: 1px solid #96d0ff;
        border-radius: 6px;

        display: flex;
        justify-content: center;
        align-items: center;
    }

    #gnb > ul > .log_box > .mo_log:hover {
        color: #fff;
        background: #008dff;
    }

    #gnb > ul > li:hover > a {
        background: none;
        border: none;
        color: #008dff;
    }

    .mo_block > li > ul > li > a.on ~ #gnb > ul > li:hover > a {
        color: #008dff;
    }

}

/* 메인 */
.main_banner {
    height: 880px;
    width: 100%;
    /*background: url("../images/main/main_banner.png")no-repeat center center /cover;*/
}
.main_banner .banner_image {
    height: 540px;
    max-width: 1230px;
    width: 100%;
    background: url("../images/main/main_banner.png")no-repeat center center;
    background-size: cover;
    margin: 0 auto;
}
.main_banner .banner_quick {
    display: flex;
    gap: 30px;
    margin-top: 60px;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 0 20px;
}
.main_banner .banner_quick li {
    display: flex;
    width: 270px;
    height: 66px;
    padding: 15px 15px 15px 25px;
    justify-content: space-between;
    align-items: center;
    border-radius: 70px;
    cursor: pointer;
}
.main_banner .banner_quick .quick_ai {
    color: #0064C2;
    text-align: center;
    font-family: "Noto Sans";
    font-size: var(--font-size-lg);
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 24px */
    letter-spacing: -0.24px;
    border: 2px solid #0064C2;
    background: #FFF;
}
.main_banner .banner_quick .quick_ai span {
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 20px;
    background: #0064C2;
}
.main_banner .banner_quick .quick_quiz {
    color: #FFF;
    text-align: center;
    font-family: "Noto Sans";
    font-size: var(--font-size-lg);
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 24px */
    letter-spacing: -0.24px;
    background: linear-gradient(91deg, #0064C2 0.08%, #00B59B 99.92%);
}
.main_banner .banner_quick .quick_quiz span {
    display: flex;
    width: 40px;
    height: 40px;
    padding: 0px 14px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 20px;
    background: #FFF;
}
.banner_inner {
    width: 1400px;
    margin: 0 auto;

    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
.banner_text {
    width: 100%;
    margin-top: 110px;
    padding: 0 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 12px;
}
.banner_text h2 {
    color: #202020;
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: 55px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 66px */
    letter-spacing: -2.6px;
}
.banner_text > p {
    color: #0064C2;
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: 20px;
    font-style: normal;
    font-weight: 600;
    line-height: 140%; /* 28px */
    letter-spacing: -0.4px;
}
.banner_text h2 span {
    position: relative;
    width: 100%;
}
.banner_text h2 span:before {
    content: '';
    display: inline-block;
    width: 100%;
    height: 50%;
    background: #FFDBEB;

    position: absolute;
    bottom: -5px;
    z-index: -1;
}
.main_container.bg_f9 {
}
.main_container > .inner {
    margin: 0;
    width: 100%;
    max-width: none;
    background-color: #FFFFFF;
}

.search_wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0;
    padding: 0 20px;
    width: 80%;
}

.search_box {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.search_box form {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 40px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    padding: 5px 15px;
    transition: all 0.3s ease;
    width: 100%;
    max-width: 480px;
}

.search_wrap fieldset {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.search_box form:focus-within {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.2);
}

.search_box input[type="text"] {
    border: none;
    outline: none;
    font-size: 16px;
    padding: 10px 15px;
    background: transparent;
    width: 100%;
}

.search_box input[type="text"]::placeholder {
    color: #aaa;
}

.btn_sch {
    border: none;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s ease;
}

/*.btn_sch:hover {*/
/*    background: #005fcc;*/
/*}*/

.srch_txt {
    flex: 1;
}

.btn_sch::before {
    content: "";
    width: 35px;
    height: 35px;
    color: #fff;
    background-image: url("../images/common/ico_search_btn.png");
    background-size: cover;
}

.main_box {
    display: flex;
    width: 100%;
    max-width: 1400px;
    height: 680px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    margin: 0 auto;
}
.main_bot_image {
    width: 300px;
    height: 374px;
    position: absolute;
    right: 50px;
    top: 20px;
    z-index: 4;
}
.welcome_message {
    color: #202020;
    font-family: "Noto Sans";
    font-size: 100px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 120px */
    letter-spacing: -2px;
    position: absolute;
    opacity: 0.05;
    top: 50px;
    word-wrap: break-word;  /* Allows long words to break to the next line */
    overflow-wrap: break-word;
    white-space: nowrap;

    animation: slideLeft 30s linear infinite; /* Apply animation */
}

@keyframes slideLeft {
    0% {
        transform: translateX(0%);
    }
    100% {
        transform: translateX(-50%);
    }
}

.main_bot_image img {
    width: 100%;
    height: 100%;
}
.main_top_box {
    width: 600px;
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.main_top_box .box_style {
    width: 100%;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.06);
    padding: 30px;
}
.box_style {
    display: flex;
    flex-direction: column;
}
.box_lay {
    height: 100%;
    display: flex;

}
.box_style h3 {
    font-weight: 800;
    font-size:3.6rem;
    line-height: normal;
    margin: 0 0 5px 0;
    color: #1A1A1A;
}
.box_left {
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.box_right {
    width: 40%;
    display: flex;
    justify-content: flex-end;
}
.box_right img {
    width: 170px;
    height: 170px;
}
.box_left p {
    font-weight: 500;
    color: #1a1a1a;
}
.box_left a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    width: 155px;
    padding: 15px 25px;
    background: #fff;
    border-radius: 30px;
    font-size: 2.4rem;
    font-weight: 600;
    text-decoration: none;
}
.card_txt {
    margin-left: 10px;
}
.main_top_box .box_style {
    background: #FFF172;
}
.main_box .main_bottom_box {
    width: 100%;
    /* position: relative; */
}
.ntc_box {
    gap: 10px;
    /* max-width: 1400px; */
    align-items: end;
    width: 100%;
}

.faq_category {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #0064c2;
}

.ntc_box .left_box {
    z-index: 2;
    width: 420px;
    height: 480px;
    flex-shrink: 0;
    border-radius: 25px;
    background: #0078E8;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 50px 25px;

    background-image: url("../../coding/images/main/main_faq_background.png");
    background-size: 240px auto; /* Set the width to 250px and auto-adjust the height */
    background-position: left center;
    background-repeat: no-repeat;
}
.ntc_box .left_box .ntc_tit {
    color: #FFF;
    font-family: "Noto Sans KR";
    font-size: 55px;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 55px */
    margin-bottom: 15px;
    display: block;
}
.ntc_box .left_box p {
    color: #FFF;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.ntc_ctrl {
    align-items: center;
}
.ntc_ctrl .prev::before {
    width: 52px;
    height: 52px;
    margin-right: 16px;
    background: url(../../coding/images/main/prev_slide.png);
}
.ntc_ctrl .next::before {
    width: 52px;
    height: 52px;
    background: url(../../coding/images/main/next_slide.png);
}
.ntc_ctrl_icon > a{

}
.ntc_box .right_slider {
    position: relative;
    bottom: 20px;
    z-index: 5;
    width: 68%;
}
.slick-dotted.slick-slider {
    margin-bottom: 0!important;
}
.ntc_box .right_slider ul li {
    display: flex;
    width: 400px;
    padding: 52px 40px 48px 40px;
    margin: 10px;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 47px;
    border-radius: 15px;
    background: #FFF;
    box-shadow: 6px 9px 10px 0px rgb(82 82 82 / 10%);
}
.ntc_box .right_slider ul li .num {
    color: #0064C2;
    font-family: "Noto Sans";
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 18px */
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.ntc_box .right_slider ul li .num:after {
    content: '';
    background-image: url("../../coding/images/main/faq_move_icon.svg");
    display: block;
    right: 0;
    width: 26px;
    height: 13px;
}
.slick-slide p {
    /*-webkit-line-clamp: 4!important;*/
    /*height: auto!important;*/
}
.iti--allow-dropdown {width: 100%; height: 100%;}
.iti__flag-container {width: 100%; height: 100%;}
.iti__country-list {
    width: 100%;
    font-size: 14px;
}
.national-cont .iti__arrow {
    display: none !important;
}
.national-cont .iti {
    background-color: transparent !important;
}
.national-cont .iti__selected-flag:hover {
    background-color: transparent !important;
}
.national-cont .iti__flag-container:hover {
    background-color: transparent !important;
    background: transparent !important;
}
.national-cont .iti--allow-dropdown:hover {
    background-color: transparent !important;
}
.national-cont:hover {
    background-color: transparent !important;
}
.iti__selected-flag {
    background-color: transparent !important;
}
.iti__flag-container:hover,
.iti__flag-container:focus {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
.iti__selected-flag:hover,
.iti__selected-flag:focus {
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}
.national-cont {
    position: relative;
    height: 50px;
    padding: 0 30px 0 7px;
    border: 1px solid #d4d4d4;
    background: #fff url(../images/common/ico_arr_down.png) right 10px top 50% no-repeat;
    cursor: pointer;
    background-size: 9px auto;
    -webkit-appearance: none;
    -moz-appearance: none;
}
.titleTopBackground {
    border-radius: 0px 0px 100px 100px;
    background: #eef2f8;
    position: absolute;
    width: 100%;
    top: 0;
    height: 400px;
    /*background-image: url("../images/common/topBackground.svg");*/
    /*background-size: cover;*/
}

/* 왼쪽 이미지 */
.titleTopBackground::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    height: 80%;
    width: 40%;
    background-image: url("../images/common/topBackground_left.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left top;
    pointer-events: none;
}

/* 오른쪽 이미지 */
.titleTopBackground::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    height: 80%;
    width: 40%;
    background-image: url("../images/common/topBackground_right.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right top;
    pointer-events: none;
}


.dash {
    content: '';
    height: 1px;
    align-self: stretch;
    background: #DAE3F3;
    margin: 40px 0;
}
.buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    width: 100%;
}
.buttons button {
    display: flex;
    max-width: 300px;
    width: 100%;
    min-height: 66px;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-lg);
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 24px */
    letter-spacing: -0.24px;
    border-radius: 15px;
    padding: 10px 30px;
}
.btn_highlight {
    background: var(--GR01, linear-gradient(91deg, #0063c1 0.08%, #00B59B 99.92%));
    color: #FFF;
}
.btn_base {
    background: #0064C2;
    color: #FFF;
}
.btn_sub {
    border: 2px solid #0063c1;
    background: #FFF;
    color: #0063c1;
}

.btn_base.disabled {
    background: #dce3ea;
    color: #85898D;
}

.bottom_bar {
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    padding: 0px;
    background-color: #F3FAFF;
}
.bottom_inner {
    max-width: 1400px;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 12px;
    gap: 20px;
}
.bottom_inner p {
    color: #202020;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-lg);
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 22px */
    letter-spacing: -0.66px;
    text-align: center; /* Optional: if you want to center the text inside <p> */
}
.logo_cntl {
    display: flex;
    align-items: center;
    gap: 12px;
}
.logo_cntl > span {
    border-radius: 6px;
    border: 1px solid #EEE;
    background: #FFF;
    display: flex;
    width: 31px;
    height: 31px;
    padding: 10px 0px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.bottom_bar .inner {
}
.bottom_lay {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px;
}
.bottom_bar .inner div,
.bottom_bar .inner div a {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}
.bottom_bar .inner div a {
    text-decoration: none;
}
.bottom_bar .inner div a::before {
    content: '|';
    display: inline-block;
    padding: 0 10px;
    opacity: 0.3;
}
.bottom_bar .bottom_inner_top {
    flex: 1;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 20px;
}
#logoSlide {
    position: relative;
    height: auto;
    padding: 0;
    width: calc(100% - 250px);
}
#logoSlide .slick-item {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 5px;
}
#logoSlide .slick-item .logo-item {
    display: flex; /* Ensures the img inside the item stretches to fill the parent */
    justify-content: center; /* Centers the image horizontally */
    align-items: center; /* Centers the image vertically */
    height: 100%;
    width: 100%;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 6px 9px 10px 0px rgb(82 82 82 / 10%);
}
.logo-item img {
    max-width: 100%;  /* Ensures the image stretches to the full width */
    max-height: 100%; /* Ensures the image stretches to the full height */
    object-fit: cover; /* Maintains aspect ratio while filling the space */
    padding: 12px;
}
#logoSlide .logo_scroll .slick-slide {
    display: flex;
    padding: 16px 32.389px 14px 33px;
    justify-content: center;
    align-items: center;
    flex: 1 0 0;
    border-radius: 10px;
    background: #FFF;
    box-shadow: 10px 10px 40px 0px rgba(0, 0, 0, 0.10);
}
.main_box strong {
    position: relative;
    z-index: 2;
}
.main_box .right_box .guide_box ul {
    z-index: 1;
}
.main_box .main_intro {
    position: relative;
    /*width: 35%;*/
    /*height: 686px;*/
    margin-right: 25px;
    border-radius: 26px 26px 26px 100px;
    background: #FFDC4F;
    overflow: hidden;
}
.ntc_box .right_slider ul li p {
    color: #202020;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    height: 55px;
    -webkit-box-orient: vertical;
}

@media screen and (max-width: 1200px) {
    .bottom_inner {
        flex-direction: column;
        gap: 10px;
    }

    .bottom_bar .bottom_inner_top {
        width: 100%;
        justify-content: space-between;
    }

    #logoSlide {
        width: 100%;
    }
}

@media screen and (max-width: 520px) {
    .logo-item img {
        width: 90%;
    }
}

@media screen and (max-width: 450px) {
    .logo-item img {
        width: auto;
    }
}

/* 전체 반투명 배경 */
.full-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    min-height: 100svh;
    background-color: rgba(0, 0, 0, 0.7); /* 반투명 검정 */
    color: white;
    z-index: 999;

    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* 중앙 메시지 */
.center-img {
    position: relative;
    width: 700px;
    max-height: 700px;
    border-radius: 35px;
    overflow-y: scroll;
    text-align: center;
}

.hide_scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
    overflow-y: scroll;
}

.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.center-img img {
    width: 100%;
}

.img_bottom_bar {
    width: 100%;
    height: 100px;
    background: #9F0026;
    position: sticky;
    bottom: -1px;

    display: flex;
    justify-content: center;
    align-items: center;
}

.bottom_bar_btn {
    padding: 15px 25px;
    border: 2px solid #fff;
    border-radius: 30px;

    font-size: 2.4rem;
    font-weight: 600;

    text-decoration: none!important;
    cursor: pointer;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.bottom_bar_btn img {
    width: 10px;
    height: 18px;
}

.scroll_alert {
    position: absolute;
    top: -60px;

    padding: 10px 30px;
    border-radius: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    background: #fff;
    color: #000;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.scroll_alert p {
    font-weight: 600;
}

.scroll_alert img {
    width: 16px;
    height: 16px;
}


/* 하단 중앙 버튼 영역 */
.bottom-right-buttons {
    width: 700px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

/* 버튼 공통 스타일 */
.bottom-right-buttons button {
    /*background-color: #fff;*/
    color: #fff;
    border: none;
    padding: 10px 16px;
    /*border-radius: 4px;*/
    font-size: 2rem;
    cursor: pointer;

    display: flex;
    align-items: center;
    gap: 5px;
}

.bottom-right-buttons button:hover {
    font-weight: 600;
}

.mobile-break {
    display: inline;
}

.pc-break {
    display: block;
}

.main_fixed {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-direction: column;
    gap: 20px;

    position: fixed;
    top: 50%;
    right: 60px;
    transform: translate(0 , -50%);

    z-index: 999;
}

.sub_fixed {
    top: auto;
    bottom: 60px;
    transform: translate(0, 0);
}

.main_fixed button img {
    width: 100px;
    height: 100px;
}

/*footer relative 지정*/

.board_box {
    margin-bottom: 20px;
}

.footer_cont address {
    letter-spacing: -0.6px;
    word-break: keep-all;
}

/*메인화면 공지 모달창*/

.ntc_modal_lay {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
}

.ntc_modal {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 30px;

    max-width: 1200px;

    padding: 30px;
    border: 5px solid #369aff;

    background: #fff;

    color: #333;
}

.ntc_modal_tit {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.ntc_modal_tit h3 {
    color: #3588dd;
    font-size: 3.6rem;
}

.ntc_modal_line {
    width: 100%;
    height: 1px;
    background: #ddd;
}

.ntc_modal_txt {
    min-height: 200px;
    max-height: 500px;
    overflow-y: auto;

    padding: 1px;

    text-align: center;
    font-size: 2.4rem;
    font-weight: 600;

    word-break: keep-all;
}

.ntc_close_btn {
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    top: 0;
    right: -56px;

    cursor: pointer;
}

.ntc_close_btn img:last-child {
    display: none;
}

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

.view_box {
    border: 8px solid #369aff;
    overflow: hidden;
}

.view_box .tit strong {
    color: #3588dd;
    font-family: 'pretendard', serif;
    font-weight: 600;
}

.view_box .tit strong::before {
    margin-top: -8px;
}

.view_box .cont_pop p {
    /*min-height: 150px;*/
    max-height: 300px;
    padding: 1px;

    word-break: keep-all;
    overflow: auto;
}

.view_box .cont_pop p::-webkit-scrollbar {
    width: 3px;
    height:3px;
}
.view_box .cont_pop p::-webkit-scrollbar-thumb {
    background: #a9a9a9;
}





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

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

@media screen and (max-width: 1400px) {
    .banner_inner {
        width: 100%;
    }

    .main_fixed {
        top: auto;
        bottom: 30px;
        right: 30px;
        transform: translate(0,0);
    }

    .bottom_bar .inner {
        width: 100%;
    }

    .bottom_bar .inner div a {
        display: none;
    }

    .ntc_modal {
        max-width: 800px;
    }
}


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

    .main_box .right_box .guide_box {
        height: 421px;
        padding: 60px 40px 50px 40px;
    }
}

@media screen and (max-width: 1100px) {
    .banner_text h2 {
        font-size: 3.6rem;
    }

    .main_box .right_box .guide_box {
        background-size: 120% 100%;
        background-position: -80px;
    }

    .main_box .right_box .guide_box::after {
        position: absolute;
        content: '';
        width: 460px;
        height: 400px;
        right: -20px;
        scale: 0.8;
    }

    .tablet-break {
        display: block;
    }

}

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

    .ntc_modal_lay {
        justify-content: center;
        align-items: center;
    }

    .ntc_modal_txt {
        max-height: 350px;
        font-size: 2rem;
    }

}

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

    .main_top_box {
        flex-direction: column;
    }

    .main_box .main_bottom_box {
        width: 100%;
    }

    .main_box .main_intro {
        margin-bottom: 20px;
        background-size: 300px;
        background-position: right -10px bottom -20px;
    }

    .main_box .right_box .guide_box::after {
        top: 0;
        right: 0;
    }

    .center-img {
        width: calc(100% - 60px);
        height: calc(100svh - 200px);
    }

    .center-img > img {
        width: 100%;
        padding-bottom: 50px;
        background: #0A2138;
    }

    .ntc_close_btn {
        top: 30px;
        right: 30px;

    }

    .ntc_close_btn img:first-child {
        display: none;
    }

    .ntc_close_btn img:last-child {
        display: block;
    }

}

@media screen and (max-width: 768px) {
    #header h1 a {
        width: 226px;
        height: 40px;
    }

    .banner_text h2 {
        font-size: 3rem;
    }

    .main_banner {
        width: 100%;
        /*background: url("../images/main/mo_banner.png") no-repeat center center/ cover;*/
    }

    .banner_inner {
        width: 100%;
        justify-content: flex-start;
    }

    .banner_text {
        width: 100%;
        text-align: center;
        margin-top: 50px;
    }

    .main_box {
        padding: 25px 0;
        margin-top: 0;
        gap: 30px;
    }

    .main_top_box {
        width: 100%;
    }

    .box_left a {
        font-size: 1.8rem;
        width: 135px;
    }

    .ntc_box .right_slider ul li p {
        font-size: 1.6rem;
        height: auto;
    }

    .ntc_box .right_slider {
    }

    .bottom_bar .inner {
        width: 100%;
    }

    .mobile-break  {
        display: block;
    }

    .bottom_lay {
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 15px;
        padding-left: 0;
    }

    .bottom_bar {
        height: auto;
    }

    .bottom_bar .inner div {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .fs_16 {
        font-size: 1.6rem;
    }

    .bottom_bar .inner div a {
        display: none;
    }

    .bottom_bar .inner div .ml15 {
        margin-left: 0!important;
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .bottom_bar .inner::before {
        background: url("../images/main/mo_bottom_character.png") no-repeat center center/ cover;
        width: 120px;
        height: 120px;

        left: auto;
        bottom: -25px;
        right: -30px;
    }

    .bottom-right-buttons {
        width: 100%;
        padding: 0 20px;
    }

    .main_fixed {
        bottom: 10px;
        right: 10px;
        gap: 10px;
    }

    .main_fixed button img {
        width: 80px;
        height: 80px;
    }

    .bottom_bar_btn {
        font-size: 2rem;
    }

    .ntc_modal {
        max-width: calc(100% - 60px);
    }

    .ntc_close_btn {
        right: 60px;

    }

}

@media screen and (max-width: 720px) {
    .ntc_box .right_slider ul li {
        min-height: 200px;
    }
}

@media screen and (max-width: 620px) {
    #header h1 a {
        width: 180px;
        height: 32px;
    }

    .main_box strong {
        /*font-size: 1.875rem;*/
        line-height: 125%;
    }

    .main_box .right_box .guide_box {
        padding: 30px;
        height: 350px;
    }

    .main_box .right_box .guide_box::after {
        top: -20px;
        right: -50px;
        scale: 0.7;
    }

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

    .banner_text p {
        font-size: 1.8rem;
    }


    .main_box .right_box .guide_box {
        margin-bottom: 20px;
        background-size: 120% 100%;
        background-position: -80px;
    }

    .main_box .right_box .guide_box ul {
        top: 120px;
    }

    .main_box .right_box .guide_box::after {
        top: 20px;
        right: -80px;
        scale: 0.6;
    }

    .box_left {
        gap: 30px;
    }

    .box_style h3 {
        font-size: 2.4rem;
    }

    .box_right {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .box_right img {
        width: 120px;
        height: 120px;
    }


}

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

    .main_box .right_box .guide_box {
        margin-bottom: 20px;
        background-size: 160% 100%;
        background-position: -80px;
    }

    .main_box .main_intro {
        background-size: 250px;
    }

    .main_box .right_box .guide_box::after {
        top: 20px;
        right: -80px;
        scale: 0.6;
    }

    .bottom-right-buttons button  {
        font-size: 1.8rem;
    }

    .footer li.footer_cont .footer_link a,
    .footer li.footer_cont address span {
        font-size: 1.3rem;
    }

    .ntc_modal_tit img {
        width: 30px;
        height: 30px;
    }

    .ntc_modal_tit h3 {
        font-size: 2.4rem;
    }

    .ntc_modal_txt {
        font-size: 1.6rem;
    }

    .ntc_close_btn {
        top: 20px;
        right: 50px;
    }
}

@media screen and (max-width: 360px) {
    #footer {
    }

    .ntc_modal_tit h3 {
        font-size: 2rem;
    }
}



/*------*/

input[disabled], select[disabled] {
    pointer-events: none;  /* 클릭, 포커스 방지 */
}

.exmpt_box {
    max-width: 1400px;
}

/*common.css*/
.upload_wrap {
    padding: 15px;
}

.upload_wrap .file_preview {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 6px;
}

.upload_wrap .file_preview li {
    display: flex;
    align-items: center;
    margin-right: 6px;
    padding: 6px;
    border-radius: 4px;
    border: 1px solid #dddddd;
}

.upload_wrap .file_preview li p {
    margin-right: 8px;
    max-width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1
}

.upload_wrap .file_preview li img {
    width: 20px;
    height: 20px;
}

.gpki_box .radio_wrap {
    background-color: #ffffff;
}

.radio_wrap {
    position: relative;
    padding: 10px;
    border-radius: 6px;
    background-color: #f4f4f5;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
}
.radio_wrap label {
    position: relative;
    /*margin-right: 12px;*/
    /*padding-top: 5px;*/
}
.checkbox + label:after {
    border: 2px solid #0064c2;
    border-top: none;
    border-right: none;
}
.content_box {
    border-top: 0;
    padding: 60px 0 10px;
}

.content_box .main_layout_box {
    padding: 70px 30px;
    background: #FFF;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.content_box .main_layout_box .main_layout_inner {
    max-width: 800px;
    width: 100%;
}



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

    }

    .file-upload span {
        width: 80% !important;
    }

    .file-upload label {
        padding: 15px 10px!important;
    }
}

/*style*/

.flex_column {
    display: flex;
    flex-direction: column;
}

.flex_fs {
    display: flex;
    align-items: flex-start!important;
}

.table_style th {
    text-align: center;
    font-weight: 600;
}

.table_style th, .table_style td {
    border: 1px solid #ddd;
    color: #333;
    padding: 5px 10px;
}

.table tr th {
    font-size: 1.8rem;
}

.table tr td {
    font-size: 1.8rem;
}

/* 모바일에서 스택 처리 (예: 600px 이하) */
@media (max-width: 600px) {
    .file_table {
        display: block;
        font-size: 0.8em;
    }

    .file_table thead {
        display: none;                 /* 헤더 숨김 */
    }

    .file_table thead tr th:nth-child(1) {
        display: none;
    }

    .file_table tbody {
        display: block;
        width: 100%;
    }

    .file_table tbody tr {
        display: flex;
        flex-direction: column;
    }

    .file_table tbody tr td {
        word-break: break-all;
        display: flex;
        font-size: 12px;
    }

    .file_table tbody tr td:nth-child(1) {
        display: none;
    }

    .file_table tbody tr td:nth-child(3) {
        border-bottom: 2px solid black;
    }

    .file_table tbody tr td a{
        display: flex;
        word-break: break-all;
    }
}

.contents h2 {
    margin: 110px 0 73px;
    color: #202020;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.4px;
}

.table_style.franc_table {
    background: #fff;
    border: 1px solid #ddd;
}

.table_style.franc_table thead {
    background: #ccc;
}

.table_style.franc_table tbody tr td {
    text-align: center;
    /*font-size: 1.4rem;*/
    line-height: 130%;
    word-break: keep-all;
    padding: 10px 0;
}

.table_style.franc_table tbody tr td:last-child {
    text-align: left;
}

.franc_table_dep1 {
    background: #f2f2f2;
    font-weight: 600;
}

.in_table td {
    border: none;
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}

.in_table tr:first-child td:last-child {
    border-right: none;
    border-bottom: none;
}

.in_table tbody tr:last-child td {
    border-bottom: none;
}

.art_table tbody tr td {
    border: none;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
}

.art_table tbody tr:first-child td:last-child {
    border-bottom: 1px solid #ddd;
}

.art_table tbody tr td:last-child {
    border-right: none;
}

.util_box {
    border-radius: 40px;
    border: 1px solid #DAE3F3;
    background: #FFF;
    display: flex;
    height: 80px;
    padding: 0px;
    align-items: center;
    flex-shrink: 0;
}
.util_box li {
    margin: 0;
}

.util_box li span {
    padding: 0 5px;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.util_box li.menu {
    display: flex;
    align-items: center;
    gap: 79px;
    flex-shrink: 0;
    align-self: stretch;
    padding: 0 20px;
}

.util_box li.home {
    border-radius: 40px 0px 0px 40px;
    background: #F0F4FA;
    display: flex;
    width: 78px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    align-self: stretch;
    cursor: pointer;
}

/*로그인*/
.login_box {
    max-width: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.login_box .buttons button{
    max-width: none;
}
.login_box > h3 {
    color: #202020;
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 50.4px */
    letter-spacing: -1.08px;
}
.login_box ul li,
.login_box ul li input {
    border-radius: 5px;
    font-size: 1.8rem;
}
.login_box ul li.login_link {
    justify-content: flex-end;
    margin: 0;
    font-size: var(--font-size-md);
}

.login_box ul li.login_link .right_link {
    display: flex;
    flex-wrap: wrap;
}

.login_box .login_btn {
    border-radius: 8px;
}

/* 인풋 스타일 */
.join_box {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.join_box .info {
    margin-bottom: 0;
}
.join_box .info.info-btn input, .join_box .info.info-btn select {
    width: 100%;
}
.join_box .info.error_info input  {
    border-radius: 8px;
    border: 1px solid #EE1B37;
    background: #FFF9FA;
}

.join_box .info .info_txt,
.join_box .info .cont,
.join_box .info .cont input {
    min-height: 60px;
    height: auto;
    border-radius: 5px;
    font-size: var(--font-size-md);
}
.join_box .info input, .join_box .info select {
    padding: 0 15px;
    border-radius: 8px;
    border: 1px solid #F5F5F5;
    background: #F5F5F5;
}
.join_box .info .input_placeholder {
    color: #777;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.48px;
    margin-top: 10px;
    display: flex;
    align-items: center;
}
.join_box .info input:focus, .join_box .info select:focus {
    border: 1px solid var(--CO01, #0064C2);
    background: #FFF;
    outline: none;
}
.join_box .info .input_error {
    color: #EE1B37;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.48px;
    margin-top: 10px;
}
.join_box .info .input_placeholder:before {
    display: block;
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: #999;
    margin-right: 8px;
}
.join_box .info .tit {
    color: #202020;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.8px;
}
.join_box .info .cont {
    /*display: flex;*/
    /*flex-direction: column;*/
    /*gap: 10px;*/
    border: none;
}
.join_box .info .cont a.confirm {
    border-radius: 6px;
    height: auto;
    line-height: normal;
    color: #FFF;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: 500;
    padding: 10px;
    min-width: 100px;
    width: auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    line-break: anywhere;
    margin-top: 12px;
    display: inline-block;
}
.join_box .info .notification {
    display: flex;
    font-size: 1.8rem;
}
.join_box .info .notification p {
    position: relative;
    margin-right: 20px;
}
.form_box > ul > li.notification span {
    position: relative;
    padding-left: 30px;
    margin-right: 20px;
}
.form_box > ul > li.notification span::before {
    position: absolute;
    left: 0;
    top: 0;
    width: 22px;
    height: 22px;
    border-radius: 100%;
    border: 1px solid #d0d0d0;
    background-color: #fff;
    content: '';
}
.form_box > ul > li.notification span.chk::after {
    content: '';
    position: absolute;
    left: 6px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 100%;
    transition: all 0.2s;
    background-color: #369AFF;
}
.join_btn {
    border-radius: 8px;
    margin: 0;
    max-width: none;
}

.password_btn {
    width: auto;
    padding: 10px 30px;
    border-radius: 6px;
    background: #333;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    display: inline-block;
}

.password_btn a {
    font-size: 1.6rem;
    text-decoration: none;
}


/* 모달 디자인 */
html.modal-show {
    overflow: hidden;
}
.modal {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.modal.show {
    display: flex;
}
.modal-content {
    background-color: #fff;
    border-radius: 1rem;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    animation: fadeIn 0.3s ease-in-out;
    overflow: hidden;
}
.modal .modal-wrap {
    width: 600px;
    background-color: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 15px;
    margin: 10px;
}
.modal-header {
    display: flex;
    justify-content: space-between;
    padding: 10px 30px;
    box-shadow: 1px -3px 20px 0px rgba(0, 0, 0, 0.10);
    gap: 20px;
}
.modal-header > h3 {
    font-size: 2.8rem;
    line-break: anywhere;
}
.modal-header .btn_close {
    background: url("../images/common/modal_close.png");
    background-size: cover;
    width: 21px;
    height: 21px;
    padding: 12px;
    margin: 12px;
}
.modal-header p {
    font-size: 2.4rem;
}
.modal-header .pop_close_btn {
    cursor: pointer;
    color: #ffffff;
    font-weight: 800;
}
.modal-main {
    padding: 30px;
    color: #333;
    display: flex;
    gap: 5px;
    text-align: center;
    max-height: 500px;
    overflow: auto;
}
.modal-main > strong {
    font-size: 2rem;
}
.modal-main h4 {
    font-size: 2.4rem;
    font-weight: 600;
    color: #369aff;
}
.modal-main p {
    letter-spacing: -1.5px;
    word-break: keep-all;
    margin: 5px 0;
}
.modal-caution {
    display: flex;
    flex-direction: column;
}
.modal-caution p {
    margin: 0;
}
.modal-caution span {
    font-weight: 600;
}
.caution_txt {
    display: flex;
    align-items: center;
    gap: 5px;
}
.caution_txt img {
    width: 16px;
}
.caution_txt strong {
    letter-spacing: -0.6px;
}
.modal-footer {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    padding: 20px 0;
    /*background-color: #f9f9f9;*/
    border-bottom-right-radius: 15px;
    border-bottom-left-radius: 15px;
}
.modal-footer button {
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    font-size: 20px;
    padding: 10px;
    min-width: 150px;
    height: 50px;
}
.modal-footer .btn_cancel {
    background-color: #555;
    color: #fff;
}
.modal-footer .btn_cancel:hover {
    font-weight: 600;
}
.modal-footer .btn_apply {
    background-color: #369aff;
    color: white;
}
.modal-footer .btn_apply:hover {
    font-weight: 600;
}
@keyframes fadeIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* sweetAlert 커스텀 디자인 */
.swal-modal {
    border-radius: 12px;
}
.swal-modal .swal-text {
    font-weight: 600;
}
.swal-title {
    border-radius: 12px 12px 0 0;
    padding: 15px 0;
    background: #369aff;
    color: #fff;
    font-size: 2.4rem;
}
.swal-title:first-child {
    margin-top: 0;
}
.swal-title:not(:last-child) {
    margin-bottom: 30px;
}
.swal-text {
    font-size: 1.8rem;
}
.swal-footer {
    text-align: center;
    margin-top: 0!important;
}
.swal-button {
    background-color: #369aff;
    padding: 10px 40px;
}
.swal-button--cancel {
    background-color: #b5b5b5 !important;
    color: #fff !important;
    outline: none !important;
    box-shadow: none !important;
}
.swal-button--cancel:hover,
.swal-button--cancel:focus,
.swal-button--cancel:active {
    background-color: #b5b5b5 !important;
    color: #fff !important;
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer;
}
.swal-button-blue {
    background: #369aff;
}
.swal-button:not([disabled]):hover {
    background: #369aff;
}

/* 로딩 */
.loading-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5); /* 반투명 배경 */
    z-index: 9998;
}
#loadingSpinner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
}
.spinner img {
    /*width: 200px;*/
    height: 200px;
}

/* 마크다운 디자인 */
.agreeMarkedCont {
    height: 100%;
}
.marked_inner {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: var(--font-size-sm);
    color: #333;
    line-height: 1.7;
    text-align: start;
}
.marked_inner > h3{
    font-size: 2.1em;
}
.markedCont {
}
.markedCont h1, .markedCont h2, .markedCont h3,
.markedCont h4, .markedCont h5, .markedCont h6 {
    font-weight: bold;
    line-height: 1.3;
}
.markedCont h1 {
    font-size: 2em;
    padding-bottom: 0.3em;
}
.markedCont h2 {
    font-size: 1.75em;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.3em;
}
.markedCont h3 { font-size: 1.5em; }
.markedCont h4 { font-size: 1.25em; }
.markedCont h5 { font-size: 1.1em; }
.markedCont h6 {
    font-size: 1em;
    color: #666;
}
.markedCont p {
    margin: 1em 0;
}
.markedCont ul,
.markedCont ol {
    padding-left: 2em;
}
.markedCont li {
    margin: 0.3em 0;
}

/* 기본: ul의 li는 disc */
.markedCont ul > li { list-style-type: disc; }

/* ol은 decimal (기본이지만 명시) */
.markedCont ol > li { list-style-type: decimal; }

/* li 안에 ol이 있으면, 그 부모 li의 불릿 제거 */
.markedCont li:has(ol) {
    list-style-type: none;   /* 불릿 없애기 */
}

/* 일부 브라우저에서 확실히 제거 */
.markedCont li:has(ol)::marker {
    content: none;
}


/*.markedCont ul {*/
/*    list-style-type: disc; !* 점을 기본적으로 표시 *!*/
/*}*/
/*.markedCont ol {*/
/*    list-style-type: decimal; !* 숫자를 기본적으로 표시 *!*/
/*}*/




.markedCont blockquote {
    border-left: 4px solid #ccc;
    padding-left: 1em;
    color: #666;
    margin: 1em 0;
    background: #f9f9f9;
}
.markedCont a {
    color: #0078d4;
    text-decoration: none;
}
.markedCont a:hover {
    text-decoration: underline;
}
.markedCont img {
    max-width: 100%;
    height: auto;
    margin: 1em 0;
    display: block;
}
.markedCont b {
    font-weight: bold;
}
.markedCont i {
    font-style: italic;
}
.markedCont del {
    text-decoration: line-through;
}
.markedCont code {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 2px 4px;
    font-family: Consolas, monospace;
    font-size: 0.95em;
    border-radius: 4px;
}
.markedCont pre {
    background: #272822;
    color: #f8f8f2;
    padding: 1em;
    overflow: auto;
    border-radius: 6px;
    margin: 1.5em 0;
}
.markedCont pre code {
    background: none;
    border: none;
    padding: 0;
    color: inherit;
    font-size: 0.95em;
}
.markedCont table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: 0.95em;
}
.markedCont th,
.markedCont td {
    border: 1px solid #ddd;
    padding: 0.75em 1em;
    text-align: left;
    vertical-align: top;
}
.markedCont thead th {
    background-color: #f2f2f2;
    font-weight: 600;
}
.markedCont tbody tr:nth-child(even) {
    background-color: #fafafa;
}
.markedCont tbody tr:hover {
    background-color: #f0f8ff;
}
.markedCont td code,
.markedCont th code {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 2px 4px;
    font-family: Consolas, monospace;
    border-radius: 4px;
}
.markedCont hr {
    border: 0;
    border-top: 2px solid #eee;
    margin: 1.5em 0;
}
.markedCont sup {
    font-size: 0.8em;
}
.markedCont sub {
    font-size: 0.8em;
}

/* FAQ 페이지 */
.search_style {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding-left: 10px;
}
.board_top ul .search_style input {
    border: none;
    padding: 0;
    outline: none;
}
.search_style .search_btn {
    height: 100%;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.board_top .total {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 12px;
}
.faq_box {
    width: 100%;
}
.accordion_wrap {border-top: 1px solid #ddd;}
.accordion_wrap ul li {border-bottom: 1px solid #ddd;}
.accordion_wrap ul li .tit a {position: relative; text-decoration: none;}
.accordion_wrap ul li .tit a:hover {color: #369AFF;}
.accordion_wrap ul li .tit a {display: block; padding: 54px 20px; font-size: var(--font-size-lg); font-weight: 600; color: #222;}
.accordion_wrap ul li .tit a::before {content: ""; display: block; position: absolute; bottom: -1px; left: 0; width: 0; height: 1px; background-color: #369AFF; transition: .35s width ease-in-out;}
.accordion_wrap ul li .tit a:hover::before {width: 100%;}
.accordion_wrap ul li .tit a::after {content: '\e942'; position: absolute; right: 20px; color: #999; font-family: 'xeicon'; transition: .25s all;}
.accordion_wrap ul li.on .tit a::after {opacity: 1; transform: rotate(-180deg);}
.accordion_wrap ul li .tit a span {margin-right: 40px;}
.accordion_wrap ul li .acc_submenu {display: none; padding: 40px 60px; font-size: var(--font-size-md); border-top:1px solid #ddd; background-color: #f9f9f9;}
.accordion_wrap ul li {
    position: relative;
}
.accordion_wrap ul li .tit a {
    display: flex;
    justify-content:flex-start;
    align-items: center;
    gap: 5px;
    line-height: 130%;

    word-break: keep-all;
    text-align: left;
    padding: 45px 50px 45px 20px;
    font-size: 2.4rem;
}
.accordion_wrap ul li .tit a.click {
    color: #008dff;
    border-bottom: 1px solid #008dff;
}
.accordion_wrap ul li .tit a::after {
    content: url(../images/sub/faq_arrow.png);
}
.accordion_wrap ul li .tit a.click::after {
    transform: rotate(180deg);
}
.accordion_wrap ul li .acc_submenu {
    padding: 0 40px;
    line-height: 160%;
    letter-spacing: -0.6px;
    word-break: keep-all;
    border-top: 1px solid #ddd;
    background-color: #f9f9f9;
    display: flex;
    align-items: center;
    transition: 0.3s;
}
.accordion_wrap ul li .acc_submenu.active {
    padding: 40px;
}
.acc_submenu {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.1s ease-out, opacity 0.3s ease-out;
}
.acc_submenu.active {
    max-height: 500px;
    opacity: 1;
}

/* 퀴즈 */
.quizMainContents .main_layout_box {
    background: none;
}
.quizMainBox {
    display: flex;
    justify-content: center;
    gap: 40px;
    width: 100%;
}
.quizMainBox form {
    width: 100%;
}
.quizMainBox .quizInner {
    display: flex;
    padding: 70px 85px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex: 1 0 0;
    background: #FFF;
}
.quizMainBox .quizInner > .icon_inner {
    height: 250px;
    display: flex;
    justify-content: center;
}

.quizMainBox .quizInner > .icon_inner img {
}

.quizMainBox .quizInner > .contents > .tit {
    color: #202020;
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 63px */
    letter-spacing: -1.35px;
    margin-bottom: 10px;
}
.quizMainBox .quizInner > .contents > .sub {
    color: #202020;
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.54px;
}
.quizMainBox .quizInner .buttons button {
    display: flex;
    max-width: 500px;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 15px;
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-lg);
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 36px */
    letter-spacing: -0.36px;
}
.quizBlock {position: relative;}
.quizBlock .main_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}
.quizBlock .options .option label {border: 2px solid #DAE3F3;}
.quizBlock .section .options {
    display: flex;
    align-items: center;
    gap: 26px;
}
.quizBlock .section .options .option {
    position: relative;
    display: flex;
    min-height: 68px;
    width: 100%;
    justify-content: center;
    align-items: center;
    border: none;
}
.quizBlock .section .options .option label {
    border-radius: 20px;
    padding: 20px 60px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #202020;
    font-family: Roboto;
    font-size: 2.8rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 28px */
    text-align: center;
    line-break: anywhere;
}
.quizBlock .section2 .options .option label {
    border-radius: 20px;
}
.quizBlock .options .option label:before {
    position: absolute;
    left: 20px;
    top: 22px;
    width: 26px;
    height: 26px;
    border: 1px solid #d0d0d0;
    background-color: #fff;
    content: '';
    outline: none;
}
.quizBlock .options .option .radio+label:after {
    left: 26px;
    top: 28px;
    width: 16px;
    height: 16px;
}
.quizBlock .options .option .checkbox+label:after {
    left: 26.5px;
    top: 26px;
    border: 3px solid #0063c1;
    border-top: none;
    border-right: none;
}
.quizBlock .options .option .radio:checked+label:after {
    background: #0063c1;
}
.quizBlock .section .options .option .radio:checked+label {
    background: var(--CO01, #0063c1);
    border: 2px solid var(--CO01, #0063c1);
    box-shadow: 10px 10px 40px 0px rgba(0, 0, 0, 0.10);
    color: #FFF;
    font-family: Roboto;
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 28px */
}
.quizBlock .section .options .option .checkbox:checked+label {
    border: 2px solid var(--CO01, #0063c1);
    box-shadow: 10px 10px 40px 0px rgba(0, 0, 0, 0.10);
}
.quizBlock .section2 .options .option .checkbox:checked+label,
.quizBlock .section2 .options .option .radio:checked+label {
    color: black;
}
.quizBlock.quizOptionInner h2 {
    color: #202020;
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -1.35px;
    margin: 0;
}
.quizBlock.quizOptionInner .section {
    width: 100%;
}
.quizBlock.quizOptionInner .section .section-title {
    color: #555;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-lg);
    font-style: normal;
    font-weight: 700;
    line-height: 160%; /* 38.4px */
    margin-bottom: 10px;
}
.quizBlock.quizOptionInner .options .option.disabled {opacity: 0.5;}
.quizBlock.quizOptionInner .quiz_category {}
.quizBlock.quizOptionInner .quiz_category .options {
    gap: 10px;
    flex-wrap: wrap;
}
.quizBlock.quizOptionInner .quiz_category .options .option {
    /*width: calc(33% - 16px);*/
    width: calc(50% - 5px);
    flex: none;
    display: flex;
    height: 220px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 20px;
    background: #FEF7E0;
}
.quizBlock.quizOptionInner .quiz_category .options .option label {
    flex-direction: column;
    gap: 25px;
    padding: 20px;
}
.quizBlock.quizOptionInner .quiz_category .options .option img {width: 105px; height: 105px; background-size: cover;}
.quizBlock.quizOptionInner .quiz_category .options :nth-child(1).option label {background: #E5F8ED;}
.quizBlock.quizOptionInner .quiz_category .options :nth-child(1).option img {background-image: url("../images/quizCenter/quizCategory_비자.svg");}
.quizBlock.quizOptionInner .quiz_category .options :nth-child(2).option label {background: #F0F6FE;}
.quizBlock.quizOptionInner .quiz_category .options :nth-child(2).option img {background-image: url("../images/quizCenter/quizCategory_취업.svg");}
.quizBlock.quizOptionInner .quiz_category .options :nth-child(3).option label {background: #FEF7E0;}
.quizBlock.quizOptionInner .quiz_category .options :nth-child(3).option img {background-image: url("../images/quizCenter/quizCategory_생활.svg");}
.quizBlock.quizOptionInner .quiz_category .options :nth-child(4).option label {background: #FFEFF0;}
.quizBlock.quizOptionInner .quiz_category .options :nth-child(4).option img {background-image: url("../images/quizCenter/quizCategory_법률.svg");}
.quizBlock.quizOptionInner .quiz_category .options :nth-child(5).option label {background: #F4F2FF;}
.quizBlock.quizOptionInner .quiz_category .options :nth-child(5).option img {background-image: url("../images/quizCenter/quizCategory_교육.svg");}
.quizBlock.quizOptionInner .quiz_category .options :nth-child(6).option label {background: #EEFBFF;}
.quizBlock.quizOptionInner .quiz_category .options :nth-child(6).option img {background-image: url("../images/quizCenter/quizCategory_한국어.svg");}
.quizBlock.quizOptionInner .quiz_category .options :nth-child(even).option .image_overlay {background: #FFF9E6;}
.quizBlock.quizOptionInner .quiz_category .options :nth-child(odd).option .image_overlay {background: #E5F7FF;}
.quizBlock.quizOptionInner .quiz_category .options .option .image_overlay {
    position: relative;
    display: flex;
    width: 100px;
    height: 100px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    aspect-ratio: 1/1;
    border-radius: 999px;
    overflow: hidden;
}
.quizBlock.quizOptionInner .quiz_category .options .option .image_overlay > img {
    position: absolute;
}
.quizBlock.quizOptionInner .quiz_type {}
.quizBlock.quizOptionInner .quiz_type .options.backgroundOptions .option label{
    background: #F0F4FA;
}
.quizBlock.quizOptionInner .quiz_type .options.backgroundOptions .option input:checked+label {
    background: #F0F4FA;
}
.quizBlock.quizPlayInner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    width: 100%;
}
.quizBlock.quizPlayInner .section {
    width: 100%;
}
.quizBlock.quizPlayInner .section .section-title {color: #555; font-family: "Noto Sans KR"; font-size: var(--font-size-lg); font-style: normal; font-weight: 700; line-height: 160%; /* 38.4px */ margin-bottom: 10px;}
.quizBlock.quizPlayInner .top_section {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 20px;
    border-bottom: 1px solid #DAE3F3;
    position: sticky;
    top: 0;
    z-index: 500;
    background: #fff
}
.quizBlock.quizPlayInner .top_section .progress_wrap {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}
.quizBlock.quizPlayInner .top_section .progress_wrap > p {
    color: #202020;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 25.2px */
    letter-spacing: -0.54px;
}
.quizBlock.quizPlayInner .top_section .progress_wrap > ul {
    color: #202020;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: 600;
    line-height: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 10px;
}
.quizBlock.quizPlayInner .top_section .progress_wrap > ul li {
    display: flex;
    padding: 5px 15px 7px 15px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    background: #F5F5F5;
}
.quizBlock.quizPlayInner .top_section .progress_wrap > ul li.on {
    color: #fff;
    background: #0063c1;
}
.quizBlock.quizPlayInner .top_section .score_wrap {
    display: flex;
    padding: 0px 20px;
    align-items: center;
    justify-content: space-around;
    min-width: 400px;
    height: 100%;
    gap: 20px;
    border-radius: 12px;
    background: #F5F5F5;
}
.quizBlock.quizPlayInner .top_section .score_wrap .score {
    display: flex;
    flex-direction: column;
    min-height: 63px;
    padding: 10px 0px;
    align-items: center;
    gap: 10px;
    color: #000;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 25.2px */
    letter-spacing: -0.54px;
    justify-content: center;
}
.quizBlock.quizPlayInner .top_section .score_wrap .score > span {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    font-size: var(--font-size-md);
}
.quizBlock.quizPlayInner .top_section .score_wrap .score > span .num {
    color: #202020;
    text-align: right;
    font-family: "Noto Sans";
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 36px */
}
.quizBlock.quizPlayInner .top_section .score_wrap .score.correct > span .num {
    color: #05C653;
}
.quizBlock.quizPlayInner .top_section .score_wrap .score.incorrect > span .num {
    color: #E21B1B;
}
.quizBlock.quizPlayInner .quiz_progress {
    appearance: none;
    height: 10px;
    width: 100%;
    margin-top: auto;
}
.quizBlock.quizPlayInner .quiz_progress::-webkit-progress-bar {
    border-radius: 0px 999px 999px 0px;
    background: rgba(218, 227, 243, 0.50);
}
.quizBlock.quizPlayInner .quiz_progress::-webkit-progress-value {
    border-radius: 999px;
    background: #0064C2;
    background: -webkit-linear-gradient(to right, #0064C2, #0064C2);
    background: linear-gradient(to right, #0064C2, #0064C2);
}
.quizBlock.quizPlayInner .section .options {
    flex-wrap: wrap;
}
.quizBlock.quizPlayInner .section .options .option {
    flex: none;
    width: 100%;
}
.quizBlock.quizPlayInner .section .options .option label {background: #F0F4FA;}
.quizBlock.quizPlayInner .options.backgroundOptions .option label{background: #F0F4FA;}
.quizBlock.quizPlayInner .options.backgroundOptions .option input:checked+label {background: #F0F4FA;}
.quizBlock.quizPlayInner #quizAnswerOption.evaluation .option .ico {width: 40px; height: 40px;  position: absolute; right: 15px; pointer-events: none; background-size: cover;}
.quizBlock.quizPlayInner #quizAnswerOption.evaluation .option.correct input:checked+label {border: 2px solid #05C653; background: #05C653; color: #fff;}
.quizBlock.quizPlayInner #quizAnswerOption.evaluation .option.correct input:checked+label .ico {
    background-image: url(../images/quizCenter/ico_quiz_correct.svg);
}
.quizBlock.quizPlayInner #quizAnswerOption.evaluation .option.incorrect input:checked+label {border: 2px solid #E21B1B; background: #FAEDED;}
.quizBlock.quizPlayInner #quizAnswerOption.evaluation .option.incorrect input:checked+label .ico {
    background-image: url(../images/quizCenter/ico_quiz_incorrect.svg);
}
.quizBlock.quizPlayInner .main_section.oxQuestion #quizAnswerOption .option {width: calc(50% - 13px);}
.quizBlock.quizPlayInner .main_section.oxQuestion #quizAnswerOption .option label {min-height: 280px; flex-direction: column; justify-content: center; align-items: center;  gap: 30px;}
.quizBlock.quizPlayInner .main_section.oxQuestion #quizAnswerOption .option label {padding: 20px;}
.quizBlock.quizPlayInner .main_section.oxQuestion #quizAnswerOption .option label p {height: 30px; text-align: center}
.quizBlock.quizPlayInner .main_section.oxQuestion #quizAnswerOption .option label:before {display: none;}
.quizBlock.quizPlayInner .main_section.oxQuestion #quizAnswerOption .option label:after {display: none;}
.quizBlock.quizPlayInner .main_section.oxQuestion #quizAnswerOption.evaluation .option .ico {width: 150px; height: 150px;  position: relative; pointer-events: none; right: auto; display: block;}
.quizBlock.quizPlayInner .main_section.oxQuestion #quizAnswerOption.evaluation .option.correct input:checked+label {border: 2px solid #05C653; background: #05C653; color: #fff;}
.quizBlock.quizPlayInner .main_section.oxQuestion #quizAnswerOption.evaluation .option.incorrect input:checked+label {border: 2px solid #E21B1B; background: #FAEDED;}
.quizBlock.quizPlayInner .main_section.oxQuestion #quizAnswerOption.evaluation .option.o .ico {background-image: url(../images/quizCenter/ico_quiz_o.svg);}
.quizBlock.quizPlayInner .main_section.oxQuestion #quizAnswerOption.evaluation .option.x .ico {background-image: url(../images/quizCenter/ico_quiz_x.svg);}
.quizBlock.quizPlayInner .question_section {
    color: #202020;
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 63px */
    letter-spacing: -1.35px;
}
.quizBlock.quizPlayInner .question_section > p {
    white-space: pre-line;
}
.quizBlock.quizPlayInner .count_section {
    color: #000;
    text-align: center;
    font-family: "Noto Sans";
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.4px;
    display: flex;
    justify-content: center;
}
.quizBlock.quizPlayInner .count_section > p {
    opacity: 0.25;
}
.quizBlock.quizPlayInner .count_section .num {
    color: #0064C2;
    opacity: 1;
}

.quizBlock .quiz_option .options {
    flex-direction: column;
    gap: 10px;
}

.quizBlock .quiz_size .options {
    flex-direction: column;
    gap: 10px;
}

.quizBlock .quiz_type .options {
    flex-direction: column;
    gap: 10px;
}

/* 퀴즈 평가 */
.quizEvaluationInner {}
.quizEvaluationInner .main_section .section {width: 100%;}
.quizEvaluationInner .main_section .section > h3 {
    color: #202020;
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 63px */
    letter-spacing: -1.35px;
}
.quizEvaluationInner .main_section .section > p {
    color: #202020;
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.54px;
}
.quizEvaluationInner .main_section .section .quiz_evaluation_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
}
.quizEvaluationInner .main_section .section .quiz_evaluation_list .quiz_evaluation_item {
    display: flex;
    padding: 30px 40px 40px 40px;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border-radius: 20px;
    background: #F4F7FB;
}
.quizEvaluationInner .section .options .option label {
    background: #FFF;
}
.quizEvaluationInner .main_section .section .quiz_evaluation_list .quiz_evaluation_item > p {
    color: #202020;
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 50.4px */
    letter-spacing: -1.08px;
    white-space: pre-line;
}
.quizEvaluationInner .main_section .section .quiz_evaluation_list .quiz_evaluation_item > .number {
    color: #999;
    text-align: center;
    font-family: "Noto Sans";
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}
.quizEvaluationInner .main_section .section .quiz_evaluation_list .quiz_evaluation_item .list_btn_wrap {
    flex-direction: column;
    flex-direction: column;
    margin-top: 50px;
    gap: 15px;
    width: 100%;
}
.quizEvaluationInner .main_section .section .quiz_evaluation_list .quiz_evaluation_item .list_btn_wrap .option {
    width: 100%;
}

/* 퀴즈 결과 */
.quizResultInner {

}

.quizResultInner .result_wrap {
    display: flex;
    gap: 35px;
    border-radius: 25px;
    background: #F9FCFF;
    box-shadow: 10px 10px 40px 0 rgba(0, 0, 0, 0.10);
    padding: 10px 30px;
    margin-bottom: 15px;
    width: 100%;
}

.quizResultInner .result_wrap > div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.quizResultInner .result_wrap .result_correct .num {
    color: #05C653;
}
.quizResultInner .result_wrap .result_incorrect .num {
    color: #E21B1B;
}

.quizResultInner .result_wrap > div > span {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    font-weight: 700;
    gap: 4px;
    margin-top: 15px ;
}

.quizResultInner .result_wrap > div > p {
    color: #000;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 25.2px */
    letter-spacing: -0.54px;
}

.quizResultInner .result_wrap .num {
    color: #202020;
    text-align: right;
    font-family: "Noto Sans";
    font-size: var(--font-size-xl);
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 36px */
}

.quizResultInner .result_wrap img {
    width: 80px;
    height: 80px;
}

.quizResultInner .section h3 {
    text-align: center;
    color: #202020;
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 63px */
    letter-spacing: -1.35px;
}

.quizResultInner .section p {
    text-align: center;
    color: #202020;
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.54px;
}

/* 차트 통계 */
.quizHistoryBox {
    background: #ffffff;
    border-radius: 16px;
    padding: 30px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Noto Sans KR', sans-serif;
}
.quizHistoryBox .quizHistoryInnerBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 20px;
}
.quizHistoryBox .quizHistoryInnerBox > h3 {
    color: #202020;
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-xxl);
    font-style: normal;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -1.35px;
    margin: 0;
}
.quizHistoryBox .history_top {
    color: #202020;
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.54px;
}
.quizHistoryBox .history_tab {
    border-radius: 999px;
    border: 1px solid #DAE3F3;
    background: #F4F7FB;
    display: flex;
    width: 100%;
    padding: 10px;
    align-items: flex-start;
    margin: 40px 0;
}
.quizHistoryBox .history_tab li {
    flex: 1;
}
.quizHistoryBox .history_tab label {
    display: flex;
    height: 60px;
    padding: 0 30px;
    justify-content: center;
    align-items: center;
    color: #202020;
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-lg);
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 24px */
    letter-spacing: -0.24px;
}
.quizHistoryBox .history_tab li input:checked+label {
    border-radius: 999px;
    background: #0064C2;
    box-shadow: 10px 10px 40px 0 rgba(0, 0, 0, 0.10);

    color: #FFF;
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-lg);
    font-style: normal;
    font-weight: 600;
    line-height: 100%; /* 24px */
    letter-spacing: -0.24px;
}
.quizHistoryBox .history_top strong {
    font-weight: bold;
}
.quizChartContainer {
    width: 100%;
    display: flex;
}
.quizHistoryBox .quizChartWrap {
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}
.quizHistoryBox .quizChartWrap > h3 {
    color: #555;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-lg);
    font-style: normal;
    font-weight: 700;
    line-height: 160%;
    margin-bottom: 10px;
}
.quizHistoryBox .quizChartWrap .chart-container {
    width: 100%;              /* 부모가 반응형 */
    max-width: 100vw;         /* 전체 뷰포트 너비 사용 */
    padding: 0;
    margin: 0 auto;
}
.quizHistoryBox .quizChartWrap .chart-container canvas {
    width: 100% !important;   /* 가로 전체 */
    height: 500px !important; /* 필요에 따라 조정 */
    display: block;
}
.quizHistoryBox .quizChartWrap .chart-legend {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: start;
    margin-top: 20px;
}
.quizHistoryBox .quizChartWrap .chart-legend li {
    position: relative;

}
.quizHistoryBox .quizChartWrap .chart-legend li label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #202020;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 16px */
    height: 22px;
}
.quizHistoryBox .quizChartWrap .chart-legend li .checkbox:checked + label::before {
    border: 1px solid #0063c1;
}
.quizHistoryBox .quizChartWrap .chart-legend li .checkbox + label::after {
    border: 2px solid #0063c1;
    border-top: none;
    border-right: none;
}
.quizHistoryBox .quizChartWrap .chart-legend .legend-color {
    display: block;
    width: 16px;
    height: 16px;
    aspect-ratio: 1/1;
    border-radius: 999px;
}
.quizHistoryBox .quizChartWrap .chart-info {
    display: flex;
    padding: 20px;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    width: 100%;
    border-radius: 15px;
    background: #F7F9FC;
}
.quizHistoryBox .search_list {
}
.quizHistoryBox .search_list > .form-group{
    position: relative;
}
.quizHistoryBox .search_list > .form-group > input {
    border-radius: 100px;
    border: 1px solid #DAE3F3;
    background: #FFF;
    box-shadow: 0 10px 20px 0 rgba(33, 158, 248, 0.10);
    display: flex;
    padding: 6px 15px 6px 30px;
    align-items: center;
    gap: 5px;

    color: #000;
    text-align: center;
    font-family: "Noto Sans";
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    letter-spacing: -0.48px;
}
.quizHistoryBox .search_list > .form-group > input:focus {
    outline: none;
}
.quizHistoryBox .search_list > .form-group::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 4px;
    transform: translate(0 , -50%);
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 999px;
    background: #0064C2 url("../images/quizCenter/ico_calender.svg") center center no-repeat;
    background-size: 16px 16px;
}

.quiz_result_modal .modal-wrap{
    width: 100%;
    max-width: 1000px;
    padding: 50px;
    margin: 40px;
}

.quiz_result_modal .modal-main {
    max-height: none;
    padding: 0px;
}

.quiz_result_main {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

.quiz_result_modal .modal-footer {
    gap: 30px;
    padding: 0;
    margin-top: 30px;
}

.quiz_result_modal .modal-footer button {
    display: flex;
    width: 300px;
    height: 66px;
    justify-content: center;
    align-items: center;
}

.quiz_result_modal #retryQuiz {
    border: 2px solid #0063c1;
}

.quiz_result_main .result_box {
    position: relative;
    border-radius: 25px;
    background: #F0F4FA;
    display: flex;
    height: 400px;
    justify-content: center;
    align-items: flex-start;
    align-self: stretch;
    margin-top: 0;
}

.quiz_result_main .result_box .result_radio {
    display: flex;
    height: 250px;
    max-width: 500px;
    padding: 30px 20px 20px 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    flex: 1 0 0;
    border-radius: 25px;
    box-shadow: 10px 10px 40px 0 rgba(0, 0, 0, 0.10);
    margin: 30px;
    margin-top: 50px;
}

.quiz_result_main .result_box .result_radio .ico {
    width: 150px;
    height: 150px;
}
.quiz_result_main .result_box .result_radio.o {
    border: 2px solid #05C653;
    background: #05C653;
}
.quiz_result_main .result_box .result_radio.o > .ico {
    background-image: url(../images/quizCenter/ico_quiz_o.svg);
}
.quiz_result_main .result_box .result_radio.x {
    border: 2px solid #E21B1B;
    background: #FAEDED;
}
.quiz_result_main .result_box .result_radio.x > .ico {
    background-image: url(../images/quizCenter/ico_quiz_x.svg);
}
.quiz_result_main .result_box img {
    position: absolute;
    left: 0;
    bottom: 0;
}

.quiz_result_main > h3 {
    text-align: center;
    font-family: "Noto Sans KR";
    font-size: 45px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 63px */
    letter-spacing: -1.35px;
    margin-bottom: 30px;
}

.quiz_result_main.correct > h3 {
    color: #00B449;

}

.quiz_result_main.incorrect > h3 {
    color: #E21B1B;
}

.chart-info {
    list-style: none;
    padding: 0;
    margin: 0;
    flex: 1;
    gap: 15px;
    margin-top: 60px;
}
.chart-info li {
    color: #777;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: 500;
    line-height: 100%; /* 16px */
    display: flex;
    border-bottom: 1px dashed #DAE3F3;
    padding-bottom: 10px;
    width: 100%;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.chart-info li:last-child {
    padding: 0;
    border: none;
}
.chart-info .color-box {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 999px;
}
.chart-info .stat-cont {
    display: flex;
    align-items: center;
    gap: 10px;
}
.chart-info .stat-text {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.chart-info strong {
    color: #202020;
    font-family: "Noto Sans";
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: 700;
    line-height: 100%; /* 16px */
    margin-left: 6px;
}
.chart-info .wrong-rate {

}
.chart-info .wrong-rate.rate1 {color: #d74545;}
.chart-info .wrong-rate.rate2 {color: #db7a7a;}
.chart-info .wrong-rate.rate3 {color: #f0953f;}
.chart-info .wrong-rate.rate4 {color: #4b8635;}
.chart-info .wrong-rate.rate5 {color: #25f85a;}

/* 약관 동의 */
.join_box_wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    justify-content: center;
    align-items: center;
}
.join_box_wrap .sm-tit {
    color: #202020;
    font-family: "Noto Sans KR";
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -0.54px;
    margin-bottom: 15px;
    width: 100%;
    text-align: start;
}
.agree_box {
    display: flex;
    padding: 30px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    width: 100%;
    border-radius: 15px;
    border: 1px solid #DAE3F3;
    margin-bottom: 60px;
}
.agree_box .agree_item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding-left: 30px;
}
.agree_box .agree_item .btn_agree_detail {
    display: flex;
    width: 125px;
    min-height: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 8px;
    border: 2px solid #0064C2;
    background: #FFF;
    color: var(--CO01, #0064C2);
    text-align: center;
    font-family: Inter;
    /*font-size: var(--font-size-md);*/
    font-style: normal;
    font-weight: 600;
    /*line-height: 38px;*/
}
.agree_box .agree_item .agree_req {
    color: var(--CO01, #0064C2);
    font-family: "Noto Sans KR";
    font-size: var(--font-size-md);
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -1px;
}
.agree_box .agree_item .agree_input {
    position: relative;
    flex: 1;
}
.agree_box .agree_item .agree_input label {
    line-break: anywhere;
    padding-left: 0;
}
.agree_box .agree_item .agree_input label:before {
    left: -30px;
}
.agree_box .agree_item .agree_input label:after {
    left: -25px;
}
.agree_box .all_agree_item {
    color: #202020;
    font-family: "Noto Sans KR";
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: -1px;
}
.agree_box .all_agree_item label {
    padding-left: 40px;
    line-break: anywhere;
}
.agree_box .agree_item .checkbox+label:before {
    top: 2px;
}
.agree_box .agree_item .checkbox+label:after {
    top: 6px;

}
.agree_box .all_agree_item .checkbox+label:before {
    top: 4px;
}
.agree_box .all_agree_item .checkbox+label:after {
    top: 8px;
}
.agree_box .dash {
    display: flex;
    margin: 10px 0;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    height: 1px;
    background: #DAE3F3;
}

/* footer */
#footer .background,
#footer  .background * {
    box-sizing: border-box;
}
#footer .background {
    background: #222222;
    height: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
#footer .container {
    display: flex;
    flex-direction: column;
    gap: 28px;
    align-items: center;
    justify-content: center;
    max-width: 1400px;
    width: 100%;
    padding: 60px 25px;
}
#footer .frame-21 {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
#footer .list {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    /*flex-shrink: 0;*/
    position: relative;
    margin-right: 10px;
}
#footer .div {
    color: #1b91ff;
    text-align: left;
    font-family: "NotoSansKr-Medium", sans-serif;
    font-size: var(--font-size-sm);
    line-height: 100%;
    font-weight: 500;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}
#footer .background2 {
    background: #797979;
    border-radius: 2px;
    flex-shrink: 0;
    width: 4px;
    height: 4px;
    position: relative;
}
#footer .div2 {
    color: #c7cfd7;
    text-align: left;
    font-family: "NotoSansKr-Medium", sans-serif;
    font-size: var(--font-size-sm);
    line-height: 100%;
    font-weight: 500;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}
#footer .frame-20 {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    cursor: pointer;
}
#footer .top {
    color: #c7cfd7;
    text-align: center;
    font-family: "NotoSans-Bold", sans-serif;
    font-size: var(--font-size-md);
    line-height: 100%;
    font-weight: 700;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
#footer .layer-1 {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
    overflow: visible;
    aspect-ratio: 1;
}
#footer .horizontal-border {
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.2);
    border-width: 1px 0px 0px 0px;
    padding: 30px 0px 0px 0px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
#footer .frame-19 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    align-self: stretch;
    flex-shrink: 0;
    position: relative;
}
#footer .frame-17 {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    width: 100%;
}
#footer .group-3 {
    opacity: 0.7;
    flex-shrink: 0;
    width: 154.15px;
    height: 30px;
    position: relative;
    overflow: visible;
    aspect-ratio: 154.15/30;
}
#footer .frame-18 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
    justify-content: flex-start;
    position: relative;
}
#footer ._44675-201 {
    color: #c7cfd7;
    text-align: left;
    font-family: "NotoSans-Medium", sans-serif;
    font-size: var(--font-size-sm);
    line-height: 100%;
    font-weight: 500;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#footer .ulsan-metropolitan-city-all-rights-reserved {
    color: #C7CFD7;
    font-family: "Noto Sans";
    font-size: var(--font-size-sm);
    font-style: normal;
    font-weight: 500;
    line-height: 120%; /* 19.2px */
}
#footer .frame-182 {
    display: flex;
    flex-direction: row;
    gap: 9px;
    align-items: center;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
    margin-left: auto;
}
#footer .layer-12 {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    position: relative;
    overflow: visible;
    aspect-ratio: 1;
}
#footer .frame-183 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: flex-start;
    justify-content: flex-start;
    flex-shrink: 0;
    position: relative;
}
#footer .frame-22 {
    padding: 0px 1px 0px 1px;
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
}
#footer .div3 {
    color: #c7cfd7;
    text-align: left;
    font-family: "NotoSans-SemiBold", sans-serif;
    font-size: var(--font-size-sm);
    line-height: 100%;
    letter-spacing: -0.02em;
    font-weight: 600;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#footer ._1588-0000 {
    color: #1b91ff;
    text-align: left;
    font-family: "Roboto-Medium", sans-serif;
    font-size: 26px;
    line-height: 100%;
    font-weight: 500;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
#footer ._1588-0000-span {
    letter-spacing: -0.09em;
}
#footer ._1588-0000-span2 {
}
#footer .caution {
    width: 100%;
    padding: 0 210px 0 170px;
}

@media screen and (max-width:1200px) {
    #footer .container {
        padding: 20px 25px;
    }
}

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



    /*#footer {padding: 30px 0;}*/
    .footer li.footer_logo > img {width: 120px;}
    .footer li.footer_cont .footer_link a {font-size: 14px;}
    .footer li.footer_cont address span {font-size: 14px;}
    #footer .tel {right: 3%; padding: 20px 40px; font-size: var(--font-size-sm);}
    #footer .frame-17 {
        flex-direction: column;
        justify-content: flex-start;
        align-items: start;
    }

    #footer .frame-182 {
        margin-left: 0;
    }

    #footer .caution {
        padding: 0;
    }

    #footer .horizontal-border {
    }

}

@media screen and (max-width:720px) {
    .footer {flex-direction: column;}
    .footer li.footer_logo {margin-right: 0; margin-bottom: 20px;}
    .footer li.footer_cont .footer_link {margin-bottom: 20px;}
}

@media screen and (max-width:620px) {
    .footer li.footer_cont .footer_link a {display:inline-block;}
    .footer li.footer_cont .footer_link a::after {margin-right:8px; margin-left:8px;}
    #footer .frame-19 {
        flex-direction: column;
    }
    #footer .background {
        height: auto;
        position: relative;
    }
    #footer .frame-19 {
        gap: 20px;
    }
    #footer .frame-21 {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 25px;
    }
    #footer .frame-20 {
        justify-content: flex-end;
        width: 100%;
    }

    #footer .container {
        top: 0px;
        position: relative;
        padding: 25px;
        height: auto;
    }
}

@media screen and (max-width:420px) {
    #footer .tel {padding: 15px; font-size: 14px;}
    .footer li.footer_cont .footer_link br {display:block;}
}

/*------*/

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

    .main_box {
    }

    .ntc_box .right_slider {
        width: 80%;
        left: -150px;
    }

    .main_bot_image {
        right: 50px;
    }
}
@media screen and (max-width: 1480px) {
    .main_box {
        margin-left: 30px;
    }
}
@media screen and (max-width: 1400px) {

    .quizBlock .section .options .option label {
        font-size: 22px;
    }

    .quizMainBox .quizInner > .contents > .tit {
        font-size: 35px;
    }

    .titleTopBackground {
        border-radius: 0;
    }

    .main_banner {
        height: auto;
    }

    .main_banner .banner_image {
        height: 440px;
    }

    .inner.main_inner {
        padding-left: 0%;
        padding-right: 0%;
    }


    .main_bot_image {
        right: 60px;
    }
}
@media screen and (max-width: 1200px) {

    .chart-info li {
        flex-direction: column;
        align-items: flex-start;
    }

    .quizBlock.quizPlayInner .main_section.oxQuestion #quizAnswerOption .option {
        flex: 1;
    }

    .quizBlock.quizPlayInner .top_section {
        flex-direction: column;
    }

    .quizBlock.quizPlayInner .top_section .progress_wrap {
        width: 100%;
    }

    .quizBlock.quizPlayInner .top_section .score_wrap {
        width: 100%;
        min-width: auto;
    }

    .quizBlock.quizPlayInner .top_section .score_wrap .score {
        flex: 1;
        align-items: center;
    }

    .quizMainBox .quizInner > .icon_inner {
        height: 200px;
    }

    .quizMainBox .quizInner {
        padding: 70px 30px;
    }

    .quizMainBox .quizInner > .contents > .tit {
    }

    .titleTopBackground {
        background-image: url("../images/common/topBackground.svg");
        background-size: cover;
    }

    .titleTopBackground::before {display: none;}
    .titleTopBackground::after {display: none;}
}
@media screen and (max-width: 1000px) {
    .quiz_result_main .result_box img {
        transform: scale(0.7) translateX(-27%) translateY(22%);
    }
    .quiz_result_main .result_box {
        height: 350px;
    }
    .quiz_result_main .result_box .result_radio {
        display: flex;
        height: 200px;
        max-width: 500px;
        padding: 0 20px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex: 1 0 0;
    }
}
@media screen and (max-width:820px) {
    .quiz_result_modal .modal-footer {
        flex-direction: column;
        gap: 10px;
    }

    .quiz_result_modal .modal-footer button {
        width: 100%;
    }

    .quiz_result_main.incorrect > h3 {
        text-align: center;
        font-family: "Noto Sans KR";
        font-size: 36px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%; /* 50.4px */
        letter-spacing: -1.08px;
    }
}
@media screen and (max-width: 780px) {

    .quizBlock.quizPlayInner .top_section {
        padding-top: 50px;
    }

    .quizBlock.quizPlayInner .top_section .score_wrap .score > p {
        display: none;
    }

    .quizBlock.quizPlayInner .top_section .score_wrap .score {
        align-items: center;
        min-height: auto;
    }

    .quizResultInner .result_wrap > div > p {
        display: none;
    }

    .board_top .total {
        display: none;
    }

    .search_style {
        flex:1;
    }

    .board_top ul {
        width: 100%;
    }

    .board_top ul .search_style input {
        width: 100%;
    }

    .board_top ul li select {
        width: 120px;
    }


    .chart-info .stat-cont {
        gap: 6px;
    }

    .quizHistoryBox .history_tab label {
        height: 50px;
        font-size: 20px;
    }

    .quizBlock.quizOptionInner h2 {
        font-size: 28px;
    }

    .dash {
        margin: 20px 0;
    }

    .quizBlock.quizOptionInner .quiz_category .options .option {
        width: calc(50% - 5px);
    }

    .quizBlock .section .options {
        gap: 10px;
    }

    .quizBlock.quizOptionInner .quiz_category .options .option {
        height: 180px;
    }

    .quizBlock.quizOptionInner .quiz_category .options .option label {
        gap: 10px;
        justify-content: flex-end;
    }

    .quizBlock.quizOptionInner .quiz_category .options .option .image_overlay {
        width: 80px;
        height: 80px;
    }

    .quizBlock .section .options .option label {
        font-size: 20px;
        padding: 20px 60px;
        justify-content: flex-start;
        text-align: start;
    }

    .quizBlock .section .quiz_evaluation_list .options .option label {
        justify-content: center;
        text-align: center;
    }

    .quizBlock .quiz_option .options .option label {
        justify-content: center;
        text-align: center;
    }

    .quizBlock .quiz_category .options .option label {
        justify-content: center;
        text-align: center;
    }

    .quizBlock .quiz_size .options .option label {
        justify-content: center;
        text-align: center;
    }
    .quizBlock .quiz_type .options .option label {
        justify-content: center;
        text-align: center;
    }

    .quizMainBox .quizInner > .icon_inner {
        height: 150px;
    }

    .quizMainContents .main_layout_box {
        background: #fff;
        padding: 40px 30px;
    }

    .content_box {
        padding: 0;
    }

    .inner {
        padding-left: 0;
        padding-right: 0;
    }

    .add_child strong {
    }

    .swal-text {
    }

    .marked_inner {
    }

    .quizMainBox .quizInner .buttons button {
        max-width: 300px;
    }

    .quizMainBox {
        gap: 20px;
    }

    .quizMainBox .quizInner {
        padding: 50px 20px;
        border-radius: 15px;
        background: #FFF;
        box-shadow: 10px 10px 40px 0 rgba(0, 0, 0, 0.10);
    }

    .bottom_inner p {

    }

    .mypage_box h3 {
        margin-bottom: 20px;
    }

    .login_box > h3 {
    }

    #header h1 a {
        width: 100px;
        height: 30px;
    }

    #header .btn_nav button {
        height: 40px;
    }

    #header {
        height: 60px;
    }

    .util_box {
        height: 50px;
        margin: 0 30px;
        position: relative;
        margin-bottom: -25px;
        z-index: 600;
    }

    .contents h2 {
        margin: 21px 0 34px;
    }

    .titleTopBackground {
        height: 240px;
        background: #F0F4FA;
    }

    .main_banner .banner_image {
        height: 340px;
    }

    .main_bot_image {
        width: 182px;
        height: 227px;
        top: 35px;
    }

    .main_box {
        height: 514px;
    }

    .ntc_box .left_box {
        width: 336px;
        height: 404px;
    }

    .ntc_box .right_slider ul li {
        height: 200px;
        min-height: 200px;
        padding: 30px 40px;
    }

    .ntc_box .left_box p {
        color: #FFF;
        font-family: Pretendard;
    }

    .util_box li.menu {
        flex: 1;
        justify-content: space-between;
        gap: 6px;
        padding: 0 6px;
    }

    .util_box li.home {
        width: 38px;
    }

    .util_box li.home::after {
        width: 12px;
        height: 12px;
        background-size: cover;
    }

    .ntc_box .left_box .ntc_tit {
        color: #FFF;
        font-family: Pretendard;
        font-style: normal;
        font-weight: 700;
        line-height: 100%; /* 44px */
    }

    .welcome_message {
        display: none;
    }

    .ntc_box .right_slider {
        left: -330px;
        width: 100%;
    }

    .ntc_ctrl {
        display: none;
    }
}
@media screen and (max-width: 660px) {

    .buttons {
        flex-direction: column;
    }

    .buttons button {
        width: 100%;
        min-height: 54px;
        max-width: none;
    }

    .main_banner .banner_quick {
        gap: 10px;
    }
    .quizHistoryBox .quizChartWrap .chart-container canvas {
        height: 300px !important; /* 필요에 따라 조정 */
    }

    .quizBlock.quizPlayInner .question_section {
        font-size: 28px;
    }

    .quizBlock.quizPlayInner .main_section.oxQuestion #quizAnswerOption .option label {
        min-height: 220px;
    }

    .quizBlock.quizPlayInner .main_section.oxQuestion #quizAnswerOption.evaluation .option .ico {
        width: 100px;
        height: 100px;
    }


    .quizBlock .quiz_option .options {
        flex-direction: column;
        gap: 10px;
    }

    .quizBlock .quiz_size .options {
        flex-direction: column;
        gap: 10px;
    }

    .quizBlock .quiz_type .options {
        flex-direction: column;
        gap: 10px;
    }

    .main_banner .banner_image {
        height: 240px;
    }

    .main_box {
        height: auto;
        padding: 10px 0;
    }

    .main_bot_image img {
        display: none;
    }

    .ntc_box .right_slider {
        width: 120%;
    }

    .quizMainBox {
        flex-direction: column;
    }
    .quizMainBox .quizInner > .icon_inner {
        display: none;
    }

    .quizMainBox .quizInner {
        padding: 20px;
    }
}
@media screen and (max-width:620px) {
    .quiz_result_main .result_box img {
        display: none;
    }
    .quiz_result_main .result_box .result_radio {
        margin: 0;
    }

    .quiz_result_main .result_box {
        height: auto;
    }
    .quiz_result_main.incorrect > h3 {
        text-align: center;
        font-family: "Noto Sans KR";
        font-size: 28px;
        font-style: normal;
        font-weight: 700;
        line-height: 140%; /* 39.2px */
        letter-spacing: -0.84px;
    }
}
@media screen and (max-width: 450px) {

    .join_box .info .cont a.confirm {
        width: 100%;
    }


    .quizResultInner .result_wrap > div .unit {
        display: none;
    }

    .quizBlock.quizPlayInner .top_section .score_wrap .score {
        /*background: #fff;*/
        border-radius: 6px;
    }

    .quizBlock.quizPlayInner .top_section .score_wrap .score .unit {
        display: none;
    }

    .quizResultInner .result_wrap > div > span {
        margin-top: 5px;
    }

    .quizResultInner .section h3 {
        font-size: 28px;
    }

    .quizResultInner .section p {
        font-size: 16px;
    }

    .quizResultInner .result_wrap img {
        width: 30px;
        height: 30px;
    }

    .main_banner .banner_quick {
        flex-direction: column;
        margin-top: 30px;
    }

    .agree_box .agree_item .btn_agree_detail {
        font-size: 0; /* 텍스트 숨기기 */
        position: relative;
        width: 24px;   /* 버튼 사이즈 */
        height: 24px;
        background: none;
        border: none;
        cursor: pointer;
    }

    .agree_box .agree_item .btn_agree_detail::before {
        content: '';
        display: inline-block;
        width: 100%;
        height: 100%;
        background-image: url('../images/common/agree_open.png'); /* 👈 아이콘 경로 */
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }

    #logoSlide .slick-item {
        height: 50px;
    }



    .quizHistoryBox .history_tab {
        padding: 0;
        flex-direction: column;
        background: none;
        border: none;
        gap: 10px;
        margin: 20px 0 0 0;
    }

    .quizHistoryBox .history_tab li {
        width: 100%;
        border: 1px solid #DAE3F3;
        background: #F4F7FB;
        border-radius: 999px;
    }

    .quizBlock.quizPlayInner #quizAnswerOption.evaluation .option .ico {
        width: 25px;
        height: 25px;
        background-size: cover;
    }

    .quizBlock.quizPlayInner #quizAnswerOption .option label {
        padding: 20px 50px 20px 20px
    }

    .password_btn {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .quizBlock .options .option label:before {display: none;}
    .quizBlock .options .option label:after {display: none;}
    .quizBlock .section .options .option label {
        padding: 20px;
    }

    .buttons {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .util_box {
        margin: 0 10px -25px 10px;
    }

    .quizBlock .section .options .option label {
        font-size: 16px;
    }

    #header {
        margin: 30px 10px;
        width: calc(100% - 20px);
    }

    .marked_inner {
    }

    .main_banner .banner_image {
        height: 180px;
    }

    .ntc_box .right_slider {
        width: 150%;
    }
}

.survey-container {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo', sans-serif;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
}

.survey-container .popup {
    display: block;
    background: white;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.3s ease-out;
    position: relative;
    height: auto;
    width: auto;
}

.survey-container .popup_image {
    position: relative;
}

.survey-container .popup_image img {
    height: 100%;
    width: 100%;
    max-height: 80vh;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.survey-container .popup .close-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.survey-container .popup .close-btn:hover {
    background: white;
    color: #333;
    transform: rotate(90deg);
}

.survey-container .popup .header {
    background: linear-gradient(135deg, #FDB827 0%, #FCCA46 100%);
    padding: 40px 30px;
    text-align: center;
}

.survey-container .popup .header .icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.survey-container .popup .header .title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
}

.survey-container .popup .header .subtitle {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
}

.survey-container .popup .content {
    overflow: auto;
}

.survey-container .popup .content .info-box {
    background: #F8F9FA;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
}

.survey-container .popup .content .info-box .info-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    color: #333;
}

.survey-container .popup .content .info-box .info-item:last-child {
    margin-bottom: 0;
}

.survey-container .popup .content .info-box .info-item .info-icon {
    margin-right: 8px;
    font-size: 16px;
}

.survey-container .popup .content .section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
}

.survey-container .popup .content .section-title .check-icon {
    color: #4CAF50;
    margin-right: 8px;
}

.survey-container .popup .content .event-list {
    background: #F8F9FA;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 25px;
}

.survey-container .popup .content .event-list .event-item {
    font-size: 13px;
    color: #666;
    margin-bottom: 8px;
    padding-left: 12px;
    position: relative;
}

.survey-container .popup .content .event-list .event-item:before {
    content: '※';
    position: absolute;
    left: 0;
}

.survey-container .popup .content .event-list .event-item:last-child {
    margin-bottom: 0;
}

.survey-container .popup .content .rating-section {
    margin-bottom: 25px;
}

.survey-container .popup .content .rating-section .rating-title {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.survey-container .popup .content .rating-section .rating-scale {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.survey-container .popup .content .rating-section .rating-scale .rating-btn {
    flex: 1;
    height: 50px;
    border: 2px solid #E0E0E0;
    border-radius: 10px;
    background: white;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    color: #666;
    transition: all 0.2s;
}

.survey-container .popup .content .rating-section .rating-scale .rating-btn:hover {
    border-color: #FDB827;
    background: #FFF9E6;
}

.survey-container .popup .content .rating-section .rating-scale .rating-btn.selected {
    border-color: #FDB827;
    background: #FDB827;
    color: white;
}

.survey-container .popup .submit-wrap {
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #c5cce4;
    padding: 10px 0px;
}

.survey-container .popup .submit-btn {
    height: auto;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    cursor: pointer;
    padding: 10px 30px;
    background: #F75666;
    box-shadow: 3px 3px 0 0 #19202F;
    width: auto;
}

.survey-container .popup .dont-show-box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    background: #83838394;
    border-top: 1px solid #e7e7e7;
    flex: 1;
    cursor: pointer;
}

.survey-container .popup .dont-show-box input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    cursor: pointer;
    background: #fff;
}

.survey-container .popup .dont-show-box:last-child {
    border-left: 1px solid #fff;
}

.survey-container .popup .dont-show-box label {
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    user-select: none;
}

.survey-container .popup .thank-you {
    display: none;
    text-align: center;
    padding: 40px 30px;
}

.survey-container .popup .thank-you.active {
    display: block;
}

.survey-container .popup .thank-you .thank-you-icon {
    font-size: 60px;
    margin-bottom: 20px;
}

.survey-container .popup .thank-you .thank-you-title {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin-bottom: 12px;
}

.survey-container .popup .thank-you .thank-you-text {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.survey-container .survey-buttons {
    position: sticky;
    bottom: 0;
    left: 0;
    height: 50px;
    width: 100%;
    background: #000;
    display: flex;
}

@media screen and (max-width:820px) {
    .survey-container .popup .submit-btn {
        font-size: 22px;
    }
}

@media screen and (max-width:460px) {
    .survey-container .popup .submit-btn {
        font-size: 14px;
    }
}