@media screen and (max-width:767px) {
    /* 1. 팝업 내부 전체 여백 줄이기 */
    .popup-content {
        padding: 15px !important;
    }

    .popup-article .content {
        padding: 0 !important;
    }

    /* 2. 텍스트 크기 80% 및 줄간격 최적화 */
    .popup-article .scroll-box, .popup-article .scroll-box p, .popup-article .scroll-box div, .popup-article .scroll-box span, .popup-article .scroll-box h2, .popup-article .scroll-box h3, .popup-article .scroll-box table, .popup-article .scroll-box td, .popup-article .scroll-box th {
        font-size: 90% !important;
        /* 요청하신 80% 설정 */
        line-height: 1.4 !important;
    }

    /* 3. 테이블 패딩 및 레이아웃 강제 교정 */
    .popup-article table {
        width: 100% !important;
        margin: 10px 0 !important;
        table-layout: auto !important;
        /* 글자 길이에 맞춰 유연하게 조절 */
        border-collapse: collapse !important;
    }

    .popup-article table th, .popup-article table td {
        padding: 6px 4px !important;
        /* 패딩 대폭 축소 */
        word-break: keep-all;
        /* 단어 단위 줄바꿈으로 가독성 유지 */
        text-align: left;
    }

    /* 4. 제목 크기 및 상단 여백 축소 */
    .popup-article .title2 {
        font-size: 1rem !important;
        margin-bottom: 15px !important;
        text-align: center;
    }

    .popup-article h2 {
        margin-top: 15px !important;
        margin-bottom: 5px !important;
    }
    /* header */
    .mo_none {
        display: none;
    }
    #header {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 2000;
        transition:.3s;
    }
    #header .inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 70px;
        width: 100%;
    }
    #header h1 a {
        display: block;
        width: 120px;
        height: 30px;
        background: url(/asset/images/main/main_logo01.png);
        background-size: cover;
        transition:.3s;
    }
    #header .btn_box {
        display: flex;
        align-items: center;
        gap:15px;
    }
    #header .navi_btn {
        display: block;
        position: relative;
        width: 20px;
        height: 15px;
    }
    #header .navi_btn span {
        position: absolute;
        width: 100%;
        height: 2px;
        background: #000;
        left: 0;
        transition: .3s;
    }
    #header .navi_btn span:nth-child(1) {
        top: 0;
    }
    #header .navi_btn span:nth-child(2) {
        top: 50%;
        transform: translate(-50% , -50%);
        left: 50%;
    }
    #header .navi_btn span:nth-child(3) {
        bottom: 0;
    }
    #header .navi_btn.on span {
        background: #000;
    }
    #header .navi_btn.on span:nth-child(1) {
        top: 50%;
        transform: translateY(-50%) rotate(45deg);
    }
    #header .navi_btn.on span:nth-child(2) {
        opacity: 0;
    }
    #header .navi_btn.on span:nth-child(3) {
        top: 50%;
        transform: translateY(-50%) rotate(-45deg);
    }
    #header .btn_box a {
        font-size: 15px;
        color: #fff;
        transition: .3s;
        font-weight: 500;
    }
    #header .btn_box a .h_ico01 {
        width: 20px;
    }
    #header .btn_box a .h_ico02 {
        width: 22px;
    }
    #header .btn_box #header_attendance_btn i {
        font-size: 20px;
    }
    .header_auth_btn {
        display: flex;
        align-items: center;
        gap: 6px;
        padding: 5px;
        border-radius: 6px;
        font-size: 14px;
        font-weight: 700;
        color: #fff !important;
        text-decoration: none;
    }
    .header_auth_btn.signup_outline {
        padding: 4px;
    }

    /* gnb */
    .menu_box {
        position: absolute;
        display: none;
        left: 0;
        width: 100%;
        top: 0;
        align-items: center;
        justify-content: center;
    }
    .gnb {
        display: flex;
    }
    .gnb > li > a {
        display: block;
        line-height: 100px;
        text-align: center;
        width: 190px;
        font-size: 17px;
        transition: .3s;
        font-weight: 700;
        color: #fff;
    }
    .gnb > li .fade_box {
        display: none;
        position: absolute;
        width: 100%;
        left: 0;
        top: 100%;
        background: #fafafa;
    }
    .gnb > li ul {
        display: flex;
        width: 100%;
        justify-content: center;
        gap:50px;
    }
    .gnb > li ul li a {
        position: relative;
        display: block;
        line-height: 100px;
        color: #232323;
        font-weight: 600;
    }
    .gnb > li ul li a:hover {
        color: var(--ma_c01);
    }
    .gnb > li ul li a:after {
        content:'';
        position: absolute;
        right: -26px;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 16px;
        background: #232323;
    }
    .gnb > li ul li:last-child a:after {
        display: none;
    }

    /* all_menu */
    #all_menu {
        display: none;
        position: absolute;
        left: 0;
        top: 100px;
        width: 100%;
        background: #fafafa;
        z-index: 2000;
        padding: 50px 0;
    }
    #all_menu ul {
        display: flex;
        justify-content: center;
    }
    #all_menu ul li {
        width: 190px;
    }
    #all_menu ul li a {
        display: block;
        text-align: center;
        font-size: 17px;
        margin-bottom: 15px;
        transition: .2s;
    }
    #all_menu ul li a:hover {
        color: var(--ma_c01);
    }
    #all_menu ul li a:last-child {
        margin-bottom: 0;
    }

    /* 네비게이션 */
    #navigation {
        display: none;
        position: fixed;
        left: 0;
        top: 70px;
        z-index: 1000;
        width: 100%;
        height: calc(100vh - 70px);
        background: rgba(0,0,0,.5);
    }
    #navigation .navi_box {
        position: absolute;
        width: 80%;
        max-width: 340px;
        right: 0;
        top: 0;
        background: #fff;
        height: 100%;
    }
    #navigation .navi_box > ul {
        padding: 6px 8px;
    }
    #navigation .navi_box > ul > li > a {
        height: 48px;
        padding: 0 30px 0 12px;
        font-size: 15px;
    }
    #navigation .navi_box > ul > li > a i {
        width: 36px;
        font-size: 19px;
    }
    #navigation .navi_box > ul > li > a:after {
        right: 12px;
    }
    #navigation .navi_box > ul > li ul {
        margin: 2px 0 6px;
        padding: 5px 6px;
    }
    #navigation .navi_box > ul > li ul li a {
        padding: 11px 10px 11px 42px;
        font-size: 14px;
    }
    /* 드로어 접속자 영역 - 모바일 크기 보정 (가독성 위해 폰트는 축소하지 않음) */
    #navigation .navi_box .drawer_user {
        padding: 18px 14px;
    }
    #navigation .navi_box .drawer_avatar {
        width: 44px;
        height: 44px;
    }
    #navigation .navi_box .drawer_avatar i {
        font-size: 22px;
    }
    #navigation .navi_box .drawer_user_name {
        font-size: 16px;
    }
    #navigation .navi_box .quick_btn {
        height: 42px;
    }
    #navigation .navi_box .drawer_att_banner {
        padding: 13px 12px;
        gap: 10px;
    }
    #navigation .navi_box .drawer_att_banner .att_ico {
        width: 38px;
        height: 38px;
    }
    #navigation .navi_box .drawer_att_banner .att_ico i {
        font-size: 19px;
    }
    #navigation .navi_box .drawer_login_btn {
        height: 46px;
    }
    #navigation .navi_box .drawer_signup_btn {
        height: 46px;
    }
    #navigation .navi_box .drawer_footer {
        padding: 0;
    }
    #navigation .navi_box .drawer_logout_btn {
        height: 68px;
        font-size: 14px;
    }

    /* visual_wrap */
    #visual_wrap {
        margin-top: 70px;
    }
    #visual_wrap .inner {
        width: 100%;
        padding: 0;
    }
    #visual_wrap .slide_box {
        position: relative;
    }
    /* 모바일: 가로형 원본 대신 일러스트 크롭 이미지를 하단에 통째로 표시 (잘림 방지) */
    /* 높이 끝 40px은 하단 중앙 페이저 전용 띠 (슬라이드끼리 높이가 같아야 fade가 어긋나지 않음) */
    /* 일러스트 시작 위치와 텍스트 top은 vh를 섞지 않은 고정 px — 5vh를 쓰면 세로가 짧은 기기에서 그만큼 일러스트가 위로 붙어 버튼과 겹친다 */
    #visual_wrap ul li {
        position: relative;
        width: 100%;
        height: calc(340px + min(48vh, 88vw));
        border-radius: 0;
        overflow: hidden;
    }
    #visual_wrap ul li.visual02 {
        background: #fff url(/asset/images/main/visual01_mob.jpg) no-repeat center top 275px / auto min(48vh, 88vw);
    }
    /* 응원이벤트: 텍스트 블록은 제휴보다 짧지만 원본 일러스트가 상단까지 꽉 차 있어(여백 없음) 그만큼 덜 올린다 */
    #visual_wrap ul li.visual-cheer {
        background: #fff url(/asset/images/main/visual_cheer_mob.jpg) no-repeat center top 265px / auto min(48vh, 88vw);
    }
    /* 퀴즈이벤트: 텍스트 톤은 제휴 슬라이드와 같은 공통 규칙을 쓴다. 본문이 2줄이라 제휴(275px)보다 25px 아래에서 일러스트 시작 */
    #visual_wrap ul li.visual-quiz {
        background: #fff url(/asset/images/main/visual_quiz_mob.jpg) no-repeat center top 300px / auto min(48vh, 88vw);
    }
    #visual_wrap ul li > img {
        display: none;
    }
    #visual_wrap ul li .txt_box {
        position: absolute;
        left: 5%;
        top: 20px;
        opacity: 0;
        transform: translateX(-20px);
        transition: transform .45s ease-out, opacity .45s ease-out;
    }
    #visual_wrap ul li.swiper-slide-active .txt_box {
        transform: translateX(0);
        opacity: 1;
    }
    #visual_wrap ul li .txt_box .txt01 {
        font-size: 22px;
        font-family: 'Taenada';
    }
    #visual_wrap ul li .txt_box .txt01 .c01 {
        color: #0479cc;
    }
    #visual_wrap ul li .txt_box .txt01 .c02 {
        color: #61dcff;
    }
    #visual_wrap ul li .txt_box .txt02 {
        font-size: 32px;
        line-height: 1.2;
        margin: 10px 0 20px;
        font-family: 'Taenada';
    }
    #visual_wrap ul li .txt_box .txt02 .c01 {
        color: #00afff;
    }
    #visual_wrap ul li .txt_box .txt02 .c02 {
        color: #005c9d;
    }
    #visual_wrap ul li .txt_box .txt02 .c03 {
        color: #00bff6;
    }
    #visual_wrap ul li .txt_box .txt03 {
        color: #363636;
        font-size: 18px;
        margin-bottom: 30px;
    }
    #visual_wrap ul li .txt_box a {
        display: flex;
        padding: 0 20px;
        align-items: center;
        height: 50px;
        font-size: 20px;
        border-radius: 50px;
        color: #fff;
        font-family: 'Taenada';
        background: #0d498c;
        border: 1px solid #000;
        width: fit-content;
    }
    #visual_wrap ul li .txt_box a span {
        position: relative;
        top: 5px;
    }
    /* 응원이벤트 슬라이드 — style.css의 세로중앙 배치를 상단 배치로 되돌림 */
    #visual_wrap ul li.visual-cheer .txt_box {
        top: 20px;
        left: 5%;
        transform: translateX(-20px);
        width: 90%;
        text-align: center;
    }
    #visual_wrap ul li.visual-cheer.swiper-slide-active .txt_box {
        transform: translateX(0);
    }
    #visual_wrap ul li.visual-cheer .txt_box .txt01 {
        font-size: clamp(20px, 6.8vw, 28px);
        line-height: 1.2;
    }
    #visual_wrap ul li.visual-cheer .txt_box .txt02,
    #visual_wrap ul li.visual-cheer .txt_box .txt03 {
        font-size: clamp(12px, 3.6vw, 15px);
        line-height: 1.55;
    }
    #visual_wrap ul li.visual-cheer .txt_box .txt02 {
        margin: 12px 0 0;
    }
    #visual_wrap ul li.visual-cheer .txt_box .txt03 {
        margin: 10px 0 0;
    }
    #visual_wrap ul li.visual-cheer .txt_box a {
        height: 44px;
        margin-top: 14px;
        border-radius: 44px;
        font-size: clamp(14px, 4vw, 17px);
    }
    /* 모바일은 스와이프로 넘기므로 좌우 화살표 숨김 — 일러스트 위에 겹쳐 지저분해짐 */
    #visual_wrap .visual_arrow {
        display: none;
    }
    #visual_wrap .visual_items {
        position: absolute;
        display: flex;
        left: 50%;
        transform: translateX(-50%);
        bottom: 12px;
        z-index: 1000;
        align-items: center;
        gap:10px;
    }
    #visual_wrap .visual_items .visual_num {
        display: flex;
        gap:8px;
        align-items: center;
    }
    #visual_wrap .visual_items .visual_num span {
        font-size: 17px;
        font-weight: 800;
    }
    #visual_wrap .visual_items .visual_num em {
        position: relative;
        display: block;
        width: 90px;
        height: 3px;
        background: rgba(0,0,0,.5);
    }
    #visual_wrap .visual_items .visual_num em:after {
        content:'';
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 100%;
        background: #000;
    }
    #visual_wrap .visual_items .btn_box {
        position: relative;
    }
    #visual_wrap .visual_items .btn_box div {
        cursor: pointer;
    }
    #visual_wrap .visual_items .btn_box .play {
        display: none;
    }
    #visual_wrap .visual_items .btn_box img {
        width: 12px;
    }
    #visual_wrap .swiper-slide-active .visual_num em:after {
        animation: visAni01 5s linear forwards;
    }

    @keyframes visAni01 {
        0% {
            width: 0;
        }
        100% {
            width: 100%;
        }
    }

    /* 공통 */
    .main_tit {
        display: flex;
        justify-content: space-between;
        margin-bottom: 40px;
        align-items: center;
    }
    .main_tit h2 {
        position: relative;
        top: 4px;
        padding-left: 14px;
    }
    .main_tit h2::before {
        content:'';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 5px;
        height: 24px;
        border-radius: 3px;
        background: linear-gradient(180deg, #2D67FF, #1A54EB);
    }
    .tit_st01 {
        font-size: 30px;
        font-family: 'Taenada';
    }
    .tit_st02 {
        font-size: 30px;
        font-family: 'Taenada';
        text-align: center;
        margin-bottom: 50px;
    }
    .tit_st02 span {
        color: #00bff6;
    }

    a.btn_st01, button.btn_st01 {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 17px;
        height: 35px;
        border-radius: 35px;
        color: #fff;
        background: #000;
        font-size: 14px;
        font-weight: 700;
        width: fit-content;
        transition: .3s;
    }
    a.btn_st01:hover, button.btn_st01:hover {
        transform: scale(1.1);
    }
    a.btn_st01.white, button.btn_st01.white {
        background: #fff;
        border: 1px solid #000;
        color: #000;
    }
    a.btn_st01.blue, button.btn_st01.blue {
        background: #072e59;
    }

    ul.list_st01 {
        display: flex;
        gap:10px;
        flex-wrap: wrap;
    }
    ul.list_st01 li {
        width: 100%;
    }
    ul.list_st01 li a {
        position: relative;
        display: block;
        border-radius: 20px;
        background: #fff;
        border: 1px solid #ddd;
        transition: .4s;
        padding: 30px 20px;
        max-height: 315px;
    }
    ul.list_st01 li a:hover {
        transform: translateY(-10px);
    }
    ul.list_st01 li a:after {
        content:'';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 20px;
        border: 2px solid #0479cc;
        opacity: 0;
        transition: .4s;
    }
    ul.list_st01 li a:hover:after {
        opacity: 1;
    }
    ul.list_st01 li a .box01 strong {
        font-size: 15px;
        color: #00bff6;
    }
    ul.list_st01 li a .box01 p {
        font-size: 22px;
        font-weight: 700;
        margin: 10px 0;
        white-space: nowrap;
        overflow:hidden;
        text-overflow: ellipsis;
    }
    ul.list_st01 li a .box01 span {
        font-size: 14px;
        font-weight: 500;
        color: #757575;
    }
    ul.list_st01 li a .box02 {
        display: flex;
        margin: 30px 0 30px;
        align-items: flex-end;
        gap:6px;
    }
    ul.list_st01 li a .box02 strong {
        font-size: 30px;
    }
    ul.list_st01 li a .box02 p {
        font-size: 13px;
        font-weight: 500;
    }
    ul.list_st01 li a .box03 {
        display: flex;
        align-items: center;
        gap:20px;
    }
    ul.list_st01 li a .box03 .ico_box {
        width: 80px;
        height: 80px;
        border-radius: 15px;
        overflow: hidden;
    }
    ul.list_st01 li a .box03 .ico_box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    ul.list_st01 li a .box03 .txt_box {
        width: calc(100% - 100px);
    }
    ul.list_st01 li a .box03 .txt_box .txt01 {
        font-size: 13px;
        font-weight: 700;
        margin-bottom: 10px;
    }
    ul.list_st01 li a .box03 .txt_box .txt02 {
        display: flex;
        gap:5px;
        flex-wrap:wrap;
        align-items: center;
    }
    ul.list_st01 li a .box03 .txt_box .txt02 p {
        padding: 0 5px;
        line-height: 21px;
        border: 1px solid #757575;
        border-radius: 5px;
        font-size: 12px;
        font-weight: 500;
        color: #757575;
    }
    ul.list_st01 li a .box03 .txt_box .txt02 span {
        color: #757575;
    }

    .main_bg_box {
        padding: 80px 0 65px;
    }

    /* section01 */
    #section01 {
        padding: 30px 0 80px;
    }

    /* section02 */
    #section02 {
        margin-bottom: 80px;
    }
    #section02 ul {
        display: flex;
        gap:0;
        flex-wrap:wrap;
    }
    #section02 ul li {
        width: 100%;
        border-left: 0;
        border-top: 1px solid #e5e5e5;
    }
    #section02 ul li:first-child {
        border-top: 0;
    }
    /* 태블릿 2단 규칙 해제 (같은 특이도로 되돌림) */
    #section02 ul li:nth-child(n+3) {
        margin-top: 0;
        padding-top: 0;
    }
    #section02 ul li a {
        display: block;
        position: static;
        height: auto;
        padding: 20px 0;
        transition: .3s;
    }
    #section02 ul li:nth-child(2n+1) a,
    #section02 ul li:nth-child(2n) a {
        padding-left: 0;
        padding-right: 0;
    }
    #section02 ul li a strong {
        display: block;
        padding: 0 9px;
        border-radius: 5px;
        line-height: 24px;
        margin-bottom: 12px;
        background: #d4ecfb;
        font-size: 14px;
        color: #005c9d;
        width: fit-content;
    }
    #section02 ul li a strong.notice {
        background: #f1f1f1;
        color: #000;
    }
    #section02 ul li a p {
        font-size: 17px;
        font-weight: 700;
        line-height: 25px;
        color: #000;
        transition: .3s;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-wrap:break-word;
    }
    #section02 ul li a:hover p {
        color: #0479cc;
    }
    #section02 ul li a span {
        position: static;
        display: block;
        margin-top: 10px;
        font-size: 13px;
        font-weight: 500;
        color: #999;
    }

    /* section03 */
    #section03 h2 {
        line-height: 1.2;
    }
    #section03 h2 span {
        display: block;
    }
    #section03 ul {
        display: flex;
        gap:10px;
        justify-content: center;
        flex-wrap:wrap;
        margin-bottom: 50px;
    }
    #section03 ul li {
        padding: 0 33px;
        line-height: 45px;
        font-size: 18px;
        font-weight: 500;
        color: #0d498c;
        background: #e5f7ff;
    }
    #section03 ul li.bl {
        border-radius: 20px 20px 20px 0px;
    }
    #section03 ul li.tr {
        border-radius: 20px 0px 20px 20px;
    }
    #section03 ul li.br {
        border-radius: 20px 20px 0px 20px;
    }
    #section03 ul li.tl {
        border-radius: 0px 20px 20px 20px;
    }
    #section03 ul li.blue01 {
        background: #0d498c;
        color: #fff;
    }
    #section03 ul li.blue02 {
        background: #61dcff;
        color: #fff;
    }
    #section03 ul li.blue03 {
        background: #00afff;
        color: #fff;
    }
    #section03 a.btn_st01 {
        margin: 0 auto;
    }

    /* section04 */
    #section04 {
        padding: 60px 0 50px;
        background:#88cff8;
        height:auto;
    }
    #section04 .inner {
        position: relative;
    }
    #section04 p {
        font-size: 30px;
        font-family: 'Taenada';
    }
    #section04 p strong {
        color: #0d498c;
    }
    #section04 span {
        display: block;
        font-size: 18px;
        font-weight: 500;
        margin: 20px 0 70px;
    }
    #section04 img {
        position: absolute;
        right: -50px;
        bottom: -50px;
        width: 300px;
    }

    /* footer */
    #footer {
        padding: 30px 0;
        /* iOS 앱 웹뷰 하단 safe area — 홈 인디케이터 뒤로 내용이 깔리지 않게 (브라우저에선 env()=0) */
        padding-bottom: calc(30px + env(safe-area-inset-bottom));
    }
    #footer .inner {
        display: block;
        width: 1780px;
        align-items: flex-end;
        justify-content: space-between;
    }
    #footer .left_box {
        margin-bottom: 30px;
    }
    #footer .left_box .logo_box {
        display: flex;
        margin-bottom: 30px;
        justify-content: center;
    }
    #footer .left_box .logo_box img {
        width: 120px;
    }
    #footer .left_box ul {
        display: flex;
        gap:10px;
        margin-bottom: 15px;
        justify-content: center;
    }
    #footer .left_box ul li a {
        font-size: 14px;
        font-weight: 600;
    }
    #footer .left_box address {
        font-style: normal;
        font-size: 12px;
        font-weight: 500;
        color: #757575;
        margin-bottom: 15px;
        line-height: 22px;
        text-align: center;
    }
    #footer .left_box address span {
        padding: 0 7px;
    }
    #footer .left_box address span:nth-child(5) {
        display: block;
        width: 0;
        height: 0;
        opacity: 0;
    }
    #footer .left_box .copy {
        font-size: 13px;
        color: #757575;
        opacity: .7;
        text-align: center;
    }
    #footer .right_box {
        display: flex;
        gap:10px;
        justify-content: center;
    }
    #footer .right_box li a {
        display: block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: url(/asset/images/main/footer_sns01_on.png);
        transition: .3s;
        background-size: cover;
    }
    #footer .right_box li a:hover {
        background: url(/asset/images/main/footer_sns01_on.png);
        background-size: cover;
    }
    #footer .right_box li:nth-child(2) a {
        background: url(/asset/images/main/footer_sns02_on.png);
        background-size: cover;
    }
    #footer .right_box li:nth-child(2) a:hover {
        background: url(/asset/images/main/footer_sns02_on.png);
        background-size: cover;
    }
    #footer .right_box li:nth-child(3) a {
        background: url(/asset/images/main/footer_sns03_on.png);
        background-size: cover;
    }
    #footer .right_box li:nth-child(3) a:hover {
        background: url(/asset/images/main/footer_sns03_on.png);
        background-size: cover;
    }

    /* ---------------------------------------------- sub ----------------------------------------------*/
    /* 공통 */
    .sub_wrap {
        margin-top: 70px;
    }
    .sub_wrap .sub_inner {
        padding: 0 2.6%;
    }

    .sub_wrap02 {
        margin-top: 70px;
        padding: 70px 0;
    }
    .sub_wrap03 {
        padding-bottom: 70px;
    }

    .sub_wrap_detail {
        padding: 40px 0 80px;
    }

    /* 제목 */
    .sub_tit {
        margin-bottom: 40px;
        text-align: center;
    }
    .sub_tit h3 {
        font-size: 24px;
    }
    .sub_tit p {
        font-size: 14px;
        font-weight: 500;
        color: #454545;
        margin-top: 10px;
    }

    .sub_tit02 {
        margin-bottom: 50px;
        text-align: center;
    }
    .sub_tit02 span {
        display: block;
        font-size: 17px;
        font-weight: 600;
        color: var(--ma_c01);
    }
    .sub_tit02 p {
        font-size: 27px;
        font-weight: 500;
        margin:15px 0;
    }
    .sub_tit02 h3 {
        font-size: 32px;
    }

    .sub_tit03 {
        margin-bottom: 50px;
    }
    .sub_tit03 h3 {
        font-size: 32px;
        font-family: var(--font_01);
        text-align: center;
        line-height: 1.3;
    }
    .sub_tit03 h3 span {
        color: var(--ma_c01);
    }
    .sub_tit03 h3 i {
        display: block;
    }
    .sub_tit03 p {
        font-size: 18px;
        font-weight: 500;
        text-align: center;
        margin-top: 10px;
        line-height: 1.4;
    }
    .sub_tit03 p i {
        display: block;
    }

    .sub_tit04 h3 {
        margin:15px 0;
    }
    .sub_tit04 p {
        margin: 0;
        font-size: 16px;
        font-weight: 500;
    }

    /* 검색 */
    .search_box {
        position: relative;
        display: flex;
        width: 100%;
        margin: 0 auto 45px;
        max-width: 600px;
    }
    .search_box input {
        width: calc(100% - 45px);
        padding:0 15px;
        border-radius: 10px 0 0 10px;
        border: 2px solid #1b6da7;
        border-right: 0;
        font-weight: 500;
        height: 45px;
        font-size: 15px;
    }
    .search_box input[type="search"]::-webkit-search-cancel-button {
        -webkit-appearance: none;
    }
    .search_box input::placeholder {
        color: #797979;
    }
    .search_box input:focus {
        outline: none;
    }
    .search_box button {
        position: relative;
        width: 45px;
        padding-left: 10px;
        border-radius: 0 10px 10px 0;
        border: 2px solid #1b6da7;
        border-left: 0;
        text-align: left;
        height: 45px;
    }
    .search_box button:after {
        content:'';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 18px;
        background: #e8e8e8;
    }
    .search_box button img {
        width: 19px;
    }

    /* 페이징 */
    ul.paging {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 45px;
    }
    ul.paging li a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        font-size: 14px;
        font-weight: 700;
        color: #000;
    }
    ul.paging li.on a {
        background: #000;
        color: #fff;
    }

    /* 버튼스타일 */
    .sub_btn.sub_btn_p {
        padding: 0 15px;
    }
    .sub_btn.f_btn {
        display: flex;
        gap:10px;
        margin-top: 15px;
    }
    .sub_btn.f_btn button, .sub_btn.f_btn a {
        width: calc((100% - 10px)/2);
    }
    .sub_btn button, .sub_btn a {
        width: 100%;
        height: 50px;
        border-radius: 10px;
        border: 2px solid #005c9d;
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        background: #005c9d;
    }
    .sub_btn button.white, .sub_btn a.white {
        background: #fff;
        color: #005c9d;
    }
    .sub_btn button.gray, .sub_btn a.gray {
        background: #efefef;
        color: #797979;
        border: 2px solid #efefef;
    }

    /* form스타일 */
    form.form_st01 ul li:not(:last-child) {
        margin-bottom: 30px;
    }
    form.form_st01 ul li.f_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    form.form_st01 ul li input[type="checkbox"] {
        display: none;
    }
    form.form_st01 ul li input[type="checkbox"] + label {
        position: relative;
        padding-left: 27px;
        font-size: 15px;
    }
    form.form_st01 ul li input[type="checkbox"] + label:after {
        content:'';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: url(/asset/images/sub/agree_ico01.png);
        background-size: cover;
        transition: .2s;
    }
    form.form_st01 ul li input[type="checkbox"]:checked + label:after {
        background: url(/asset/images/sub/agree_ico02.png);
    }
    form.form_st01 ul li input[type="checkbox"] + label span {
        color: #797979;
    }
    form.form_st01 ul li input[type="checkbox"] + label strong {
        font-size: 17px;
    }
    form.form_st01 ul li .c_wrap {
        display: flex;
        margin-top: 25px;
        gap:60px;
        padding-left: 20px;
    }
    form.form_st01 ul li button {
        display: flex;
        align-items: center;
        gap:6px;
        color: #005c9d;
        font-size: 15px;
    }
    form.form_st01 .sub_btn.sub_btn_p {
        margin-top: 50px;
    }

    form.info_form ul li {
        display: flex;
        align-items: flex-end;
        gap:5px;
        margin-bottom: 20px;
    }
    form.info_form ul li.mb_b {
        margin-bottom: 43px;
    }
    form.info_form ul li:last-child {
        margin-bottom: 0;
    }
    form.info_form ul li .left_box {
        display: block;
        width: 100%;
        align-items: center;
    }
    form.info_form ul li .left_box p {
        font-size: 14px;
        font-weight: 700;
        width: auto;
        margin-bottom: 10px;
        line-height: 1.4;
    }
    form.info_form ul li .left_box p span {
        position: relative;
    }
    form.info_form ul li .left_box p span:after {
        content:'';
        position: absolute;
        right: -8px;
        top: 2px;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background: #f12c3f;
    }
    form.info_form ul li .left_box input {
        height: 43px;
        width: 100%;
        border: 1px solid #aeaeae;
        border-radius: 8px;
        padding: 0 10px;
        font-weight: 500;
        font-size: 14px;
    }
    form.info_form ul li .left_box input:focus {
        outline: none;
        border: 1px solid #072e59;
    }
    form.info_form ul li .left_box input:read-only {
        background: #f5f6f6;
        color: #999;
    }
    form.info_form ul li .left_box select {
        height: 43px;
        width: 100%;
        border: 1px solid #aeaeae;
        border-radius: 8px;
        padding: 0 10px;
        font-size: 14px;
        font-weight: 500;
        background: url(/asset/images/sub/login_ico01.png) no-repeat right 20px center #fff;
        appearance: none;
    }
    form.info_form ul li .left_box select:focus {
        outline: none;
        border: 1px solid #072e59;
    }
    form.info_form ul li .left_box .i_box {
        position: relative;
        width: 100%;
    }
    form.info_form ul li .left_box .i_box input {
        width: 100%;
    }
    form.info_form ul li .left_box .i_box span {
        position: absolute;
        bottom: -22px;
        left: 0;
        font-size: 13px;
        font-weight: 500;
        color: #f12c3f;
    }
    form.info_form ul li:has(> button) {
        align-items: flex-start;
    }
    form.info_form ul li:has(> button) .left_box {
        width: calc(100% - 70px);
    }
    form.info_form ul li .left_box > .pw_field {
        width: 100%;
    }
    form.info_form ul li .left_box > .valid_msg {
        padding-left: 0;
    }
    form.info_form ul li .left_box + button {
        width: 65px;
        border-radius: 8px;
        border: 1px solid #0d498c;
        font-weight: 700;
        height: 43px;
        color: #0d498c;
        font-size: 13px;
        margin-top: 30px;
    }

    /* 이메일 필드 (모바일) */
    form.info_form ul li .left_box .email_field {
        width: 100%;
        gap:5px;
    }
    form.info_form ul li .left_box .email_field input {
        padding: 0 8px;
    }
    form.info_form ul li .left_box .email_field input:read-only {
        background: #fff;
        color: #333;
    }
    form.info_form ul li .left_box .email_field .custom_select {
        width: 108px;
    }
    form.info_form ul li .left_box .email_field .cs_trigger {
        height: 43px;
        padding: 0 26px 0 10px;
        font-size: 14px;
    }
    form.info_form ul li .left_box .email_field .cs_trigger::after {
        right: 12px;
    }
    form.info_form ul li .left_box .email_field .cs_option {
        height: 38px;
        font-size: 14px;
    }

    /* 가입경로 필드 (모바일) */
    form.info_form ul li .left_box .join_path_field {
        width: 100%;
        gap:5px;
    }
    form.info_form ul li .left_box .join_path_field input {
        padding: 0 8px;
    }
    form.info_form ul li .left_box .join_path_field .custom_select {
        width: 170px;
    }
    form.info_form ul li .left_box .join_path_field .cs_trigger {
        height: 43px;
        padding: 0 26px 0 10px;
        font-size: 14px;
    }
    form.info_form ul li .left_box .join_path_field .cs_trigger::after {
        right: 12px;
    }
    form.info_form ul li .left_box .join_path_field .cs_option {
        height: 38px;
        font-size: 14px;
    }

    form.info_form .sub_btn.sub_btn_p {
        margin-top: 50px;
        padding: 0 15px;
    }

    form.info_form ul.list02 {
        margin-top: 35px;
        padding-top: 45px;
        border-top: 1px solid #ddd;
    }
    form.info_form ul.list02 .gap_none {
        display: block;
        gap:0;
    }
    form.info_form ul.list02 .gap_none .left_box {
        width: auto;
    }
    form.info_form ul.list02 .gap_none .f_box {
        display: flex;
        width: calc(100% - 100px);
        align-items: center;
        gap:10px;
    }
    form.info_form ul.list02 .gap_none .f_box input {
        display: none;
    }
    form.info_form ul.list02 .gap_none .f_box label {
        display: flex;
        padding: 0 10px;
        height: 26px;
        border: 1px solid #464646;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        color: #464646;
        line-height: 26px;
        align-items: center;
        gap:5px;
        cursor: pointer;
    }
    form.info_form ul.list02 .gap_none .f_box .txt_box {
        display: flex;
        align-items: center;
        gap:5px;
    }
    form.info_form ul.list02 .gap_none .f_box .txt_box span {
        font-size: 14px;
    }
    form.info_form ul.list02 .left_box button {
        padding: 0 10px;
        height: 26px;
        border: 1px solid #464646;
        border-radius: 8px;
        font-size: 14px;
        font-weight: 500;
        color: #464646;
    }
    form.info_form .hide_wrap {
        display: none;
        margin-top: 20px;
        padding: 0;
    }
    form.info_form .hide_wrap .hide_box {
        padding: 18px 0;
        background: none;
        border-radius: 0;
        border-top: 1px solid #ddd;
    }
    form.info_form .hide_wrap .hide_box:last-child {
        border-bottom: 1px solid #ddd;
    }
    form.info_form .hide_wrap .hide_box .left_box {
        width: 100%;
    }
    form.info_form .hide_wrap .hide_box button {
        display: block;
        margin-left: auto;
        padding: 0 15px;
        margin-top: 10px;
        line-height: 28px;
        border-radius: 8px;
        background: #fff;
        border: 1px solid #aeaeae;
        font-size: 13px;
        font-weight: 700;
        color: #797979;
    }

    /* 비밀번호 조건 체크리스트 (모바일) */
    form.info_form ul li.mb_pw {
        margin-bottom: 64px;
    }
    form.info_form ul li .i_box .pw_check {
        gap: 5px 12px;
    }
    form.info_form ul li .i_box .pw_check li {
        font-size: 12px;
    }

    /* 팝업 */
    .pop_wrap {
        display: none;
        position: fixed;
        z-index: 2000;
        background: rgba(0,0,0,.7);
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
    }
    .pop_wrap .pop_box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 440px;
        max-width: 90%;
        background: #fff;
        padding: 30px 20px;
        border-radius: 25px;
    }
    .pop_wrap .pop_box .tit_box {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-bottom: 20px;
        margin-bottom: 20px;
        border-bottom: 1px solid #ddd;
    }
    .pop_wrap .pop_box .tit_box::after {
        content:'';
        position: absolute;
        left: 0;
        bottom: -1px;
        height: 2px;
        width: var(--scroll-progress, 0%);
        background: #005c9d;
        transition: width .1s linear;
    }
    .pop_wrap .pop_box .tit_box h4 {
        font-size: 20px;
    }
    .pop_wrap .pop_box .tit_box button {
        font-size: 20px;
        font-weight: 700;
    }
    .pop_wrap .pop_box .con_box {
        overflow-y: scroll;
        height: 360px;
        padding-right: 10px;
        margin-bottom: 0;
        font-size: 14px;
        line-height: 1.5;
    }
    .pop_wrap .pop_box .con_box::-webkit-scrollbar {
        width: 4px;
    }
    .pop_wrap .pop_box .con_box::-webkit-scrollbar-thumb {
        background: #ddd;
        border-radius: 10px;
    }
    .pop_wrap .pop_box .con_box::-webkit-scrollbar-track {
        background: #fff;
    }
    .pop_wrap .pop_box .con_box .txt_box:not(:last-child) {
        margin-bottom: 15px;
    }
    .pop_wrap .pop_box .con_box .txt_box strong {
        display: block;
        margin-bottom: 5px;
    }
    .pop_wrap .pop_box .con_box .txt_box p strong {
        display: inline-block;
    }
    .pop_wrap .pop_box .con_box .txt_box ol {
        list-style: none;
        padding-left: 0;
    }
    .pop_wrap .pop_box .con_box .txt_box ol li {
        list-style: none;
    }
    .pop_wrap .pop_box .con_box .txt_box ul {
        list-style: none;
        padding-left: 12px;
    }
    .pop_wrap .pop_box .con_box .txt_box ul li {
        list-style: none;
    }
    .pop_wrap .pop_box .con_box .txt_box table {
        width: 100%;
        border-collapse: collapse;
        margin: 6px 0 4px;
        font-size: 12px;
    }
    .pop_wrap .pop_box .con_box .txt_box th, .pop_wrap .pop_box .con_box .txt_box td {
        border: 1px solid #ddd;
        padding: 5px 6px;
        text-align: left;
        vertical-align: top;
    }
    .pop_wrap .pop_box .con_box .txt_box th {
        background: #f5f7fa;
        font-weight: 700;
    }

    /* 진행상황 */
    .step_box {
        display: flex;
        gap:65px;
        justify-content: center;
        margin-bottom: 50px;
    }
    .step_box li {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap:10px;
    }
    .step_box li span {
        position: relative;
        display: block;
        width: 25px;
        height: 25px;
        border-radius: 50%;
        line-height: 29px;
        text-align: center;
        font-size: 13px;
        color: #a9c4db;
        font-family: 'Taenada';
        background: #e5f7ff;
    }
    .step_box li:not(:last-child) span:after {
        content:'';
        position: absolute;
        left: 100%;
        top: 50%;
        transform: translateY(-50%);
        width: 105px;
        height: 1px;
        background: #e5f7ff;
    }
    .step_box li.on span {
        background: #0d498c;
        color: #fff;
    }
    .step_box li p {
        font-size: 15px;
    }

    /* 서브 버튼 스타일 */
    .sub_btn_box01 {
        display: flex;
        gap:10px;
        justify-content: center;
    }
    .sub_btn_box01 a, .sub_btn_box01 button {
        display: flex;
        width: 180px;
        height: 45px;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        border: 1px solid #000;
        font-weight: 700;
        font-size: 15px;
    }
    .sub_btn_box01 a.blue, .sub_btn_box01 button.blue {
        background: var(--ma_c04);
        border: 1px solid var(--ma_c04);
        color: #fff;
    }

    /* 게시판 */
    .board_box .top_box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding:0;
        margin-bottom: 10px;
    }
    .board_box .top_box p {
        font-weight: 700;
        color: #666;
        font-size: 14px;
    }
    .board_box .top_box p span {
        color: #000;
    }
    .board_box .top_box .btn_box {
        display: flex;
        gap:10px;
    }
    .board_box .top_box .btn_box button {
        display: flex;
        align-items: center;
        gap:3px;
        color: #888;
        font-size: 14px;
    }
    .board_box .top_box .btn_box button.on {
        color: #000;
    }
    .board_box .top_box .btn_box button img {
        opacity: .6;
        width: 13px;
    }
    .board_box .top_box .btn_box button.on img {
        opacity: 1;
    }

    /* 테이블 → 리스트형 전환 (thead·No. 숨김, 행 = 그리드 2행: 뱃지·조회수 / 제목·날짜) */
    .board_box table {
        display: block;
        width: 100%;
        border-top: 1px solid #e2e8f0;
    }
    .board_box table thead {
        display: none;
    }
    .board_box table tbody {
        display: block;
    }
    .board_box table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 12px;
        row-gap: 14px;
        align-items: center;
        padding: 19px 2px 20px;
        border-bottom: 1px solid #f1f5f9;
    }
    .board_box table td {
        display: block;
        padding: 0;
        border-bottom: none;
        text-align: left;
        font-size: 12px;
    }
    /* No. 열 숨김 — 검색 결과 없음(colspan 단일 td) 행은 예외 */
    .board_box table td:first-child:not(:only-child) {
        display: none;
    }
    .board_box table td:only-child {
        grid-column: 1 / -1;
        text-align: center;
        color: #64748b;
    }
    /* 1행: 구분 뱃지(좌) · 조회수(우) — 공지·설문 = 슬레이트 틴트, 이벤트 = 블루 틴트 */
    .board_box table td:nth-child(2) {
        grid-row: 1;
        grid-column: 1;
        justify-self: start;
        padding: 4px 10px;
        border-radius: 999px;
        background: #f1f5f9;
        font-size: 11px;
        font-weight: 700;
        color: #64748b;
    }
    .board_box table td:nth-child(2).blue {
        background: #eff6ff;
        color: #2563eb;
    }
    .board_box table td:nth-child(2).notice {
        background: #fff7ed;
        color: #d97706;
    }
    .board_box table td:nth-child(5) {
        grid-row: 1;
        grid-column: 2;
        justify-self: end;
        font-size: 12px;
        font-weight: 500;
        color: #94a3b8;
    }
    .board_box table td:nth-child(5):before {
        content: '조회\00A0';
    }
    /* 2행: 제목(좌) · 날짜(우) */
    .board_box table td:nth-child(3) {
        grid-row: 2;
        grid-column: 1;
        min-width: 0;
    }
    .board_box table td:nth-child(3) a {
        padding: 0;
        font-size: 15px;
        font-weight: 700;
        color: #1e293b;
    }
    .board_box table td:nth-child(4) {
        grid-row: 2;
        grid-column: 2;
        justify-self: end;
        font-size: 12px;
        font-weight: 500;
        color: #94a3b8;
    }

    /* 서브 현재 경로 */
    #contents .navi_wrap {
        display: flex;
        align-items: center;
        gap:5px;
        margin-bottom: 20px;
    }
    #contents .navi_wrap li {
        font-size: 16px;
        font-weight: 600;
        color: #797979;
    }
    #contents .navi_wrap li:last-child {
        color: #000;
    }

    /* 서브 비주얼 */
    .sub_visual {
        display: flex;
        height: 300px;
        align-items: center;
        justify-content: center;
        background: url(/asset/images/sub/sub_visual01.jpg)right -450px center no-repeat #f8f8f9;
    }
    .sub_visual .sub_tit02 {
        margin-bottom: 0;
    }

    /* 서브메뉴 */
    .sub_menu {
        margin: 30px 0 60px;
    }
    .sub_menu ul {
        display: flex;
        gap:20px;
    }
    .sub_menu ul li a {
        display: block;
        padding-bottom: 7px;
        font-size: 16px;
        color: #797979;
        font-weight: 800;
    }
    .sub_menu ul li.on a {
        color: var(--ma_c04);
        border-bottom: 2px solid var(--ma_c04);
    }

    /* login_wrap/signup_wrap/survey_list_wrap : sticky footer (로그인/아이디찾기/비번찾기/회원가입 유형선택/설문 리스트 - 푸터 하단 밀착) */
    #wrap:has(#login_wrap), #wrap:has(#signup_wrap), #wrap:has(#survey_list_wrap) {
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        min-height: 100dvh;
    }
    #wrap:has(#login_wrap) #contents, #wrap:has(#signup_wrap) #contents, #wrap:has(#survey_list_wrap) #contents {
        display: flex;
        flex-direction: column;
        flex: 1 0 auto;
    }
    #wrap:has(#login_wrap) #login_wrap, #wrap:has(#signup_wrap) #signup_wrap, #wrap:has(#survey_list_wrap) #survey_list_wrap {
        flex: 1 0 auto;
    }
    #wrap:has(#login_wrap) #footer, #wrap:has(#signup_wrap) #footer, #wrap:has(#survey_list_wrap) #footer {
        flex-shrink: 0;
    }

    /* login_wrap : 모바일 화이트 풀페이지 */
    #login_wrap {
        background: linear-gradient(180deg, #eef4ff 0%, #fff 240px);
    }
    #login_wrap .sub_inner {
        display: flex;
        min-height: 0;
        align-items: flex-start;
        justify-content: center;
        height: 100%;
        padding: 36px 5.1% 56px;
    }
    #login_wrap .login_box {
        width: 460px;
        max-width: 100%;
        padding: 0;
        border-radius: 0;
        background: transparent;
    }
    #login_wrap .login_box h3 {
        position: relative;
        font-size: 26px;
        text-align: left;
        padding-left: 14px;
        margin-bottom: 6px;
    }
    #login_wrap .login_box h3::before {
        content:'';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 5px;
        height: 24px;
        border-radius: 3px;
        background: linear-gradient(180deg, #2D67FF, #1A54EB);
    }
    #login_wrap .login_box .login_greet {
        display: block;
        font-size: 14px;
        color: #8b93a1;
        padding-left: 14px;
        margin-bottom: 28px;
    }
    #login_wrap .login_box ul li.ipt_item {
        position: relative;
    }
    #login_wrap .login_box ul li.ipt_item i {
        display: block;
        position: absolute;
        left: 16px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;
        color: #b6bfd0;
        pointer-events: none;
    }
    #login_wrap .login_box ul li.ipt_item input[type="text"], #login_wrap .login_box ul li.ipt_item input[type="password"] {
        padding-left: 44px;
    }
    #login_wrap .login_box h3:not(:has(+ .login_greet)) {
        margin-bottom: 32px;
    }
    #login_wrap .login_box ul {
        display: flex;
        flex-direction: column;
        gap:10px;
    }
    #login_wrap .login_box ul.gap_l {
        gap:20px;
    }
    #login_wrap .login_box ul li input[type="text"], #login_wrap .login_box ul li input[type="password"] {
        width: 100%;
        height: 52px;
        border: 1px solid transparent;
        background: #f5f7fa;
        padding: 0 16px;
        font-weight: 500;
        border-radius: 12px;
        font-size: 15px;
    }
    #login_wrap .login_box ul li input[type="text"]::placeholder, #login_wrap .login_box ul li input[type="password"]::placeholder {
        color: #9aa1ab;
    }
    #login_wrap .login_box ul li input[type="text"]:focus, #login_wrap .login_box ul li input[type="password"]:focus {
        background: #fff;
        border: 1px solid #2D67FF;
        box-shadow: 0 0 0 4px rgba(45,103,255,.1);
        outline: none;
    }
    #login_wrap .login_box ul li .a_box {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap:3px;
        margin-bottom: 13px;
    }
    #login_wrap .login_box ul li .a_box label.auto_login input[type="checkbox"] {
        accent-color: #2D67FF;
    }
    #login_wrap .login_box ul li .a_box a {
        font-size: 13px;
        font-weight: 500;
        color: #666;
    }
    #login_wrap .login_box ul li .a_box div span {
        color: #ccc;
    }
    #login_wrap .login_box ul li select {
        width: 100%;
        height: 52px;
        border: 1px solid transparent;
        background: #f5f7fa url(/asset/images/sub/login_ico01.png) no-repeat right 20px center;
        padding: 0 16px;
        font-weight: 500;
        border-radius: 12px;
        font-size: 15px;
        appearance: none;
    }
    #login_wrap .login_box ul li select:focus {
        background-color: #fff;
        border: 1px solid #2D67FF;
        box-shadow: 0 0 0 4px rgba(45,103,255,.1);
        outline: none;
    }
    #login_wrap .login_box ul li .cs_trigger {
        height: 52px;
        padding: 0 16px;
        font-size: 15px;
        border: 1px solid transparent;
        background: #f5f7fa;
        border-radius: 12px;
    }
    #login_wrap .login_box ul li .custom_select.is-open .cs_trigger {
        background: #fff;
        border-color: #2D67FF;
        box-shadow: 0 0 0 4px rgba(45,103,255,.1);
    }
    #login_wrap .login_box ul li .cs_option {
        height: 42px;
        font-size: 14px;
    }
    #login_wrap .login_box ul li p {
        position: relative;
        width: fit-content;
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 10px;
    }
    #login_wrap .login_box ul li p:after {
        content:'';
        position: absolute;
        right: -9px;
        top: -1px;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #f12c3f;
    }
    #login_wrap .login_box ul li input + span {
        display: block;
        font-size: 14px;
        font-weight: 500;
        color: #f12c3f;
        margin-top: 10px;
    }
    #login_wrap .sub_btn button, #login_wrap .sub_btn a {
        height: 52px;
        border-radius: 12px;
        border: none;
        background: linear-gradient(135deg, #2D67FF, #1A54EB);
        font-size: 15px;
        color: #fff;
        box-shadow: 0 6px 16px rgba(45,103,255,.25);
    }
    #login_wrap .sub_btn button.white, #login_wrap .sub_btn a.white {
        background: #fff;
        border: 1.5px solid #2D67FF;
        color: #2D67FF;
        box-shadow: none;
    }
    #login_wrap .sub_btn button.gray, #login_wrap .sub_btn a.gray {
        background: #f0f2f5;
        color: #797979;
        border: none;
        box-shadow: none;
    }

    /* signup_wrap : 모바일 화이트 리디자인 */
    #signup_wrap {
        padding: 36px 0 56px;
        background: linear-gradient(180deg, #eef4ff 0%, #fff 240px);
    }
    #signup_wrap .sub_inner {
        padding: 0 5.1%;
    }
    #signup_wrap .sub_tit {
        margin-bottom: 28px;
        text-align: left;
    }
    #signup_wrap .sub_tit h3 {
        position: relative;
        font-size: 26px;
        padding-left: 14px;
    }
    #signup_wrap .sub_tit h3::before {
        content:'';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 5px;
        height: 24px;
        border-radius: 3px;
        background: linear-gradient(180deg, #2D67FF, #1A54EB);
    }
    #signup_wrap .sub_tit p {
        font-size: 14px;
        color: #8b93a1;
        padding-left: 14px;
        margin-top: 6px;
    }
    #signup_wrap ul {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
        margin: 0;
    }
    #signup_wrap ul li {
        width: 100%;
    }
    #signup_wrap ul li a {
        display: flex;
        align-items: center;
        gap: 14px;
        position: relative;
        aspect-ratio: auto;
        padding: 14px;
        border-radius: 16px;
        border: 1px solid #e6eaf2;
        background: #fff;
        box-shadow: 0 2px 10px rgba(20,40,80,.05);
        overflow: hidden;
    }
    #signup_wrap ul li a img {
        width: 64px;
        height: 64px;
        flex-shrink: 0;
        border-radius: 12px;
        object-fit: cover;
        transition: none;
    }
    #signup_wrap ul li a:hover img {
        transform: none;
    }
    #signup_wrap ul li a .type_txt {
        flex: 1;
        min-width: 0;
    }
    #signup_wrap ul li a p {
        position: static;
        width: auto;
        text-align: left;
        font-size: 16px;
        font-weight: 700;
        color: #222;
    }
    #signup_wrap ul li a .type_txt span {
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: #8b93a1;
        margin-top: 3px;
    }
    #signup_wrap ul li a > i {
        display: block;
        font-size: 18px;
        color: #b6bfd0;
    }
    #signup_wrap .login_link {
        margin-top: 28px;
    }
    #signup_wrap .login_link p {
        font-size: 14px;
        margin-bottom: 12px;
    }
    #signup_wrap .login_link a {
        width: 100%;
        height: 52px;
    }

    /* agree_wrap */
    #agree_wrap {
        padding: 60px 0;
    }
    #agree_wrap .agree_box {
        width: 440px;
        max-width: 100%;
        margin: 0 auto;
    }
    #agree_wrap .agree_box .sub_tit {
        margin-bottom: 45px;
    }
    #agree_wrap .agree_box .sub_tit h3 {
        margin-bottom: 20px;
    }

    /* result_wrap */
    #result_wrap {
        padding: 60px 0;
    }
    #result_wrap .con_box {
        display: flex;
        gap:8px;
        align-items: center;
        justify-content: center;
        width: 360px;
        height: 220px;
        max-width: 100%;
        border-radius: 30px;
        background: #f9fafc;
        margin: 0 auto;
    }
    #result_wrap .con_box p {
        font-size: 24px;
        line-height: 32px;
        font-family: 'Taenada';
    }
    #result_wrap .con_box p .blue01 {
        color: #0b5d9b;
    }
    #result_wrap .con_box p .blue02 {
        color: #1eb1fc;
    }
    #result_wrap .sub_btn {
        margin-top: 50px;
    }
    #result_wrap .sub_btn a {
        width: 170px;
        margin:0 auto;
    }

    /* data_wrap_cate */
    #data_wrap_cate .con01 {
        margin-bottom: 100px;
    }
    #data_wrap_cate .con01 ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        margin: 0 auto;
        gap:20px 10px;
        max-width: 600px;
    }
    #data_wrap_cate .con01 ul a {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    #data_wrap_cate .con01 ul a .ico_box {
        position: relative;
    }
    #data_wrap_cate .con01 ul a .ico_box:after {
        content:'';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        border-radius: 15px;
        border: 3px solid var(--ma_c03);
        box-sizing: border-box;
        opacity: 0;
        transition: .2s;
    }
    #data_wrap_cate .con01 ul a.on .ico_box:after, #data_wrap_cate .con01 ul a:hover .ico_box:after {
        opacity: 1;
    }
    #data_wrap_cate .con01 ul a .ico_box img {
        width: 70px;
    }
    #data_wrap_cate .con01 ul a p {
        margin-top: 10px;
        text-align: center;
        font-size: 14px;
        font-weight: 500;
        transition: .2s;
    }
    #data_wrap_cate .con01 ul a:hover p, #data_wrap_cate .con01 ul a.on p {
        color: #005c9d;
    }
    #data_wrap_cate .con02 h4 {
        font-size: 27px;
        font-weight: 800;
        margin-bottom: 25px;
        text-align: center;
    }
    #data_wrap_cate .con03 .btn_box {
        display: flex;
        justify-content: flex-end;
        gap:15px;
        margin-bottom: 20px;
    }
    #data_wrap_cate .con03 .btn_box button {
        display: flex;
        gap:3px;
        align-items: center;
        padding-bottom: 4px;
        border: 1px solid transparent;
        transition: .2s;
        font-size: 15px;
    }
    #data_wrap_cate .con03 .btn_box button.on {
        border-bottom: 2px solid #000;
    }
    #data_wrap_cate .con03 .btn_box button img {
        width: 14px;
    }

    /* data_wrap_detail */
    #data_wrap_detail .con {
        padding: 30px 10px;
        border-bottom: 1px solid #e8e8e8;
    }
    #data_wrap_detail .con:nth-child(2) {
        border-top: 2px solid #000;
    }
    #data_wrap_detail p.tit {
        font-size: 17px;
        font-weight: 800;
        margin-bottom: 25px;
    }
    #data_wrap_detail p.tit span {
        font-size: 13px;
        font-weight: 500;
        padding-left: 5px;
    }
    #data_wrap_detail p.tit span.red {
        color: #f23838;
    }
    #data_wrap_detail .txt_list span {
        display: block;
        font-weight: 500;
        line-height: 1.5;
        color: #333;
        font-size: 13px;
    }
    #data_wrap_detail .con01 .box01 {
        display: flex;
        align-items: center;
        gap:10px;
        margin-bottom: 25px;
    }
    #data_wrap_detail .con01 .box01 .ico_box {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        overflow: hidden;
    }
    #data_wrap_detail .con01 .box01 .ico_box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    #data_wrap_detail .con01 .box01 .txt {
        width: calc(100% - 75px);
    }
    #data_wrap_detail .con01 .box01 .txt span {
        font-size: 15px;
        font-weight: 600;
        color: var(--ma_c01);
    }
    #data_wrap_detail .con01 .box01 .txt p {
        font-size: 22px;
        font-weight: 800;
        margin-top: 5px;
        line-height: 1.5;
    }
    #data_wrap_detail .con01 .box02 {
        display: flex;
        align-items: center;
        gap:30px;
        margin-bottom: 40px;
        flex-direction: column-reverse;
    }
    #data_wrap_detail .con01 .box02 ul {
        width: 100%;
    }
    #data_wrap_detail .con01 .box02 ul li {
        display: flex;
        margin-bottom: 15px;
    }
    #data_wrap_detail .con01 .box02 ul li:last-child {
        margin-bottom: 0;
        align-items: center;
    }
    #data_wrap_detail .con01 .box02 ul li span {
        position: relative;
        display: block;
        top: 4px;
        width: 75px;
        font-size: 14px;
        font-weight: 500;
        color: #757575;
    }
    #data_wrap_detail .con01 .box02 ul li:last-child span {
        top: 1px;
    }
    #data_wrap_detail .con01 .box02 ul li p {
        font-size: 14px;
        font-weight: 600;
        width: calc(100% - 75px);
        line-height: 1.5;
    }
    #data_wrap_detail .con01 .box02 ul li:last-child p {
        font-size: 25px;
        font-weight: 700;
    }
    #data_wrap_detail .con01 .box02 .img_box {
        width: 100%;
        border: 1px solid #e8e8e8;
        overflow: hidden;
    }
    #data_wrap_detail .con01 .box02 .img_box img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    #data_wrap_detail .con02 .s_box {
        width: 100%;
        overflow-x: scroll;
        max-width: 100%;
        height: max-content;
        padding-bottom: 10px;
        margin-bottom: 30px;
        cursor: grab;
    }
    #data_wrap_detail .con02 .s_box::-webkit-scrollbar {
        height: 6px;
    }
    #data_wrap_detail .con02 .s_box::-webkit-scrollbar-thumb {
        height: 30%;
        background: #e8e8e8;
        border-radius: 10px;
    }
    #data_wrap_detail .con02 .s_box::-webkit-scrollbar-track {
        background: #fff;
    }
    #data_wrap_detail .con02 .s_box table {
        border: 1px solid #e8e8e8;
        width: max-content;
        min-width: 100%;
    }
    #data_wrap_detail .con02 .s_box table th {
        padding: 0 20px;
        height: 35px;
        border: 1px solid #e8e8e8;
        font-weight: 600;
        background: #f7f7f7;
        text-align: center;
        font-size: 14px;
    }
    #data_wrap_detail .con02 .s_box table td {
        padding: 0 20px;
        height: 35px;
        border: 1px solid #e8e8e8;
        text-align: center;
        font-size: 13px;
    }
    #data_wrap_detail .con02 .txt p {
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 12px;
    }

    #data_wrap_detail .con03 {
        padding-bottom: 60px;
        margin-bottom: 45px;
    }
    #data_wrap_detail .con03 .tit {
        margin-bottom: 20px;
    }
    #data_wrap_detail .con03 .box02 {
        position: relative;
        display: block;
        align-items: flex-start;
        gap:20px;
        margin-top: 35px;
    }
    #data_wrap_detail .con03 .box02 .left_box {
        width: 100%;
    }
    #data_wrap_detail .con03 .box02 .left_box form {
        padding: 15px;
        border-radius: 4px;
        background: #f7f7f7;
        margin-bottom: 400px;
    }
    #data_wrap_detail .con03 .box02 .left_box form p {
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 10px;
    }
    #data_wrap_detail .con03 .box02 .left_box form ul {
        margin-bottom: 10px;
    }
    #data_wrap_detail .con03 .box02 .left_box form ul li {
        display: flex;
        align-items: center;
        margin-bottom: 5px;
    }
    #data_wrap_detail .con03 .box02 .left_box form ul li:last-child {
        margin-bottom: 0;
    }
    #data_wrap_detail .con03 .box02 .left_box form ul li span {
        display: block;
        width: 80px;
        font-size: 12px;
        font-weight: 500;
    }
    #data_wrap_detail .con03 .box02 .left_box form ul li select {
        width: calc(100% - 80px);
        height: 30px;
        border: 1px solid #e8e8e8;
        padding: 0 10px;
        font-size: 12px;
        appearance: none;
        background: url(/asset/images/sub/data_d_ico01.png) no-repeat center right 15px #fff;
        background-size: 9px auto;
    }
    #data_wrap_detail .con03 .box02 .left_box form ul li select:focus {
        outline: none;
        border: 1px solid #000;
    }
    #data_wrap_detail .con03 .box02 .left_box form button {
        display: block;
        width: 130px;
        height: 35px;
        background: #000;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        border-radius: 12px;
        margin-left: auto;
    }
    #data_wrap_detail .con03 .box02 .left_box .m_box {
        margin-bottom: 25px;
    }
    #data_wrap_detail .con03 .box02 .left_box .m_box .txt01 {
        font-size: 17px;
        font-weight: 700;
        margin-bottom: 20px;
    }
    #data_wrap_detail .con03 .box02 .left_box .m_box .txt02 {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
    }
    #data_wrap_detail .con03 .box02 .left_box .m_box .txt02 span {
        font-weight: 500;
        color: #757575;
    }
    #data_wrap_detail .con03 .box02 .left_box .m_box .txt02 p {
        font-size: 15px;
        font-weight: 500;
    }
    #data_wrap_detail .con03 .box02 .left_box .m_box .txt02 p strong {
        font-size: 23px;
    }
    #data_wrap_detail .con03 .box02 .left_box .sub_btn_box01 button, #data_wrap_detail .con03 .box02 .left_box .sub_btn_box01 a {
        width:200px;
    }

    #data_wrap_detail .con03 .box02 .right_box {
        position: absolute;
        width: 100%;
        padding: 20px 15px;
        border: 1px solid #e8e8e8;
        overflow: scroll;
        height: 350px;
        margin-top: 0px;
        top: 220px;
    }
    #data_wrap_detail .con03 .box02 .right_box::-webkit-scrollbar {
        height: 6px;
        width: 6px;
    }
    #data_wrap_detail .con03 .box02 .right_box::-webkit-scrollbar-thumb {
        height: 30%;
        background: #e8e8e8;
        border-radius: 10px;
    }
    #data_wrap_detail .con03 .box02 .right_box::-webkit-scrollbar-track {
        background: #fff;
    }
    #data_wrap_detail .con03 .box02 .right_box .tit {
        margin-bottom: 20px;
        font-size: 17px;
    }
    #data_wrap_detail .con03 .box02 .right_box table {
        border: 1px solid #e8e8e8;
        width: max-content;
        min-width: 100%;
    }
    #data_wrap_detail .con03 .box02 .right_box table th {
        border: 1px solid #e8e8e8;
        background: #eefafd;
        text-align: center;
        font-size: 12px;
        height: 30px;
        padding: 0 15px;
    }
    #data_wrap_detail .con03 .box02 .right_box table tr:nth-child(1) th {
        font-size: 14px;
    }
    #data_wrap_detail .con03 .box02 .right_box table td {
        border: 1px solid #e8e8e8;
        text-align: center;
        font-size: 12px;
        height: 30px;
        padding: 0 15px;
    }

    /* 게시판 상세 */
    #tidings_detail .detail_box .tit_box {
        padding: 25px 15px 20px;
        border-top: 2px solid #000;
        border-bottom: 1px solid #000;
    }
    #tidings_detail .detail_box .tit_box p {
        font-size: 17px;
        font-weight: 600;
        color: var(--ma_c01);
    }
    #tidings_detail .detail_box .tit_box strong {
        display: block;
        margin: 12px 0 17px;
        font-size: 25px;
        line-height: 1.4;
        font-weight: 800;
    }
    #tidings_detail .detail_box .tit_box span {
        color: #757575;
        font-size: 15px;
        font-weight: 500;
    }
    #tidings_detail .detail_box .txt_box {
        padding: 25px 15px;
        border-bottom: 1px solid #e8e8e8;
        font-size: 15px;
        font-weight: 600;
        line-height: 27px;
        color: #333;
    }
    #tidings_detail .detail_btn {
        display: flex;
        gap:25px;
        align-items: center;
        justify-content: center;
        margin-top: 50px;
    }
    #tidings_detail .detail_btn .btn {
        display: flex;
        align-items: center;
        font-weight: 700;
        font-size: 15px;
    }
    #tidings_detail .detail_btn .btn i {
        font-size: 18px;
    }
    #tidings_detail .detail_btn .btn_st01 {
        margin: 0;
    }

    /* 문의하기: /asset/css/board/apply.css 로 이동 */

    /* introduce 우정샵 소개 */
    #introduce_wrap {
        word-break: keep-all;
    }
    #introduce_wrap .con01 {
        display: flex;
        margin-bottom: 60px;
        align-items: center;
        flex-direction: column-reverse;
        gap:40px;
    }
    #introduce_wrap .con01 .txt {
        width: 100%;
        text-align: center;
    }
    #introduce_wrap .con01 .txt p {
        font-size: 22px;
        color: #0f65c4;
        font-family: var(--font_01);
        line-height: 35px;
        margin-bottom: 10px;
    }
    #introduce_wrap .con01 .txt span {
        font-size: 15px;
        font-weight: 500;
        line-height: 27px;
    }
    #introduce_wrap .con01 .txt span i {
        display: block;
    }
    #introduce_wrap .con01 .txt strong {
        display: block;
        margin-top: 10px;
        font-size: 15px;
        line-height: 27px;
    }
    #introduce_wrap .con01 .txt strong i {
        display: block;
    }
    #introduce_wrap .con01 .img {
        width: 100%;
    }
    #introduce_wrap .con01 .img img {
        display: block;
        width: 100%;
        max-width: 768px;
        margin: 0 auto;
    }

    #introduce_wrap .con02 {
        display: flex;
        margin-bottom: 60px;
        align-items: center;
        gap:30px;
        flex-direction: column;
    }
    #introduce_wrap .con02 .img {
        width: 350px;
    }
    #introduce_wrap .con02 .img img {
        width: 100%;
    }
    #introduce_wrap .con02 .txt {
        width:100%;
        text-align: center;
    }
    #introduce_wrap .con02 .txt .tit {
        font-size: 17px;
        font-weight: 800;
        line-height: 32px;
    }
    #introduce_wrap .con02 .txt ul {
        margin: 35px 0;
        padding-left: 10px;
    }
    #introduce_wrap .con02 .txt ul li {
        display: flex;
        align-items: center;
        gap:15px;
        margin-bottom: 15px;
        justify-content: center;
    }
    #introduce_wrap .con02 .txt ul li:last-child {
        margin-bottom: 0;
    }
    #introduce_wrap .con02 .txt ul li span {
        display: block;
        width: 17px;
        height: 17px;
        border-radius: 2px;
        background: #61dcff;
    }
    #introduce_wrap .con02 .txt ul li:nth-child(2) span {
        background: #38a3ef;
    }
    #introduce_wrap .con02 .txt ul li:nth-child(3) span {
        background: #1064c4;
    }
    #introduce_wrap .con02 .txt ul li:nth-child(4) span {
        background: #05406b;
    }
    #introduce_wrap .con02 .txt ul li p {
        font-size: 17px;
        font-weight: 700;
    }
    #introduce_wrap .con02 .txt .s_txt {
        font-size: 17px;
        font-weight: 500;
        line-height: 30px;
        color: #454545;
    }

    #introduce_wrap .con03 {
        margin-bottom: 80px;
    }
    #introduce_wrap .con03 .tit {
        font-size: 20px;
        line-height: 35px;
        color: #05406b;
        margin-bottom: 30px;
        font-family:var(--font_01);
    }
    #introduce_wrap .con03 .tit span {
        color: #0f65c4;
    }
    #introduce_wrap .con03 .tit br {
        display: none;
    }
    #introduce_wrap .con03 .tit i {
        display: none;
    }
    #introduce_wrap .con03 .tit strong {
        display: block;
    }
    #introduce_wrap .con03 .img_box {
        margin-bottom: 50px;
    }
    #introduce_wrap .con03 .img_box img {
        width: 100%;
    }
    #introduce_wrap .con03 ul {
        padding-left: 10px;
    }
    #introduce_wrap .con03 ul li {
        display: flex;
        gap:10px;
        margin-bottom: 30px;
    }
    #introduce_wrap .con03 ul li:last-child {
        margin-bottom: 0;
    }
    #introduce_wrap .con03 ul li p {
        font-size: 15px;
        color: #fff;
        font-family: var(--font_01);
        width: 27px;
        height: 27px;
        border-radius: 50%;
        background: #78d4f0;
        text-align: center;
        line-height: 32px;
    }
    #introduce_wrap .con03 ul li:nth-child(2) p {
        background: #62bcfc;
    }
    #introduce_wrap .con03 ul li:nth-child(3) p {
        background: #2a80a3;
    }
    #introduce_wrap .con03 ul li:nth-child(4) p {
        background: #1064c4;
    }
    #introduce_wrap .con03 ul li:nth-child(5) p {
        background: #59b2d1;
    }
    #introduce_wrap .con03 ul li .txt {
        width: calc(100% - 37px);
        position: relative;
        top: 7px;
    }
    #introduce_wrap .con03 ul li .txt strong {
        display: block;
        font-size: 20px;
        font-family:var(--font_01);
        margin-bottom: 5px;
    }
    #introduce_wrap .con03 ul li .txt span {
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
    }

    #introduce_wrap .con_list:not(:last-child) {
        margin-bottom: 80px;
    }
    #introduce_wrap .con_list .tit {
        font-size: 25px;
        text-align: center;
        margin-bottom: 30px;
        font-family:var(--font_01);
        color: #00bff6;
    }
    #introduce_wrap .con_list.con05 .tit {
        color: #2ba1f5;
    }
    #introduce_wrap .con_list.con06 .tit {
        color: #1064c4;
    }
    #introduce_wrap .con_list ul {
        display: flex;
        flex-wrap: wrap;
        gap:20px;
    }
    #introduce_wrap .con_list ul li {
        position: relative;
        display: flex;
        gap:10px;
        width: 100%;
        height: 200px;
        border: 1px solid #e8e8e8;
        border-radius: 15px;
        padding: 35px 30px;
        flex-direction: column;
        justify-content: end;
    }
    #introduce_wrap .con_list.con05 ul li {
        background: #fafafa;
        border: 1px solid #fafafa;
    }
    #introduce_wrap .con_list ul li .ico {
        position: absolute;
        top: 25px;
        right: 15px;
        transform: scale(.7);
    }
    #introduce_wrap .con_list ul li p {
        font-size: 20px;
        font-weight: 700;
    }
    #introduce_wrap .con_list ul li span {
        font-size: 15px;
        font-weight: 500;
        line-height: 22px;
    }
    #introduce_wrap .con_list a {
        display: block;
        width: 180px;
        height: 45px;
        border-radius: 10px;
        font-size: 16px;
        font-weight: 700;
        color: #fff;
        margin: 40px auto 0;
        line-height: 45px;
        text-align: center;
        background: #00bff6;
    }
    #introduce_wrap .con_list.con05 a {
        background: #229cf3;
    }
    #introduce_wrap .con_list.con06 a {
        background: #1064c4;
    }

    /* faq 자주묻는 질문 */
    #faq_wrap {
        word-break: keep-all;
    }
    #faq_wrap .con_box ul {
        border-top: 1px solid #e8e8e8;
    }
    #faq_wrap .con_box ul li {
        padding: 20px 15px 20px 0;
        border-bottom: 1px solid #e8e8e8;
    }
    #faq_wrap .con_box ul li .txt01 {
        display: flex;
    }
    #faq_wrap .con_box ul li .txt01 > p {
        position: relative;
        top: 2px;
        width: 70px;
        text-align: center;
        font-size: 13px;
        color: #3ccaf7;
        font-weight: 700;
        padding: 0 5px;
        line-height: 1.5;
    }
    #faq_wrap .con_box ul li .txt01 button {
        display: flex;
        width: calc(100% - 70px);
        justify-content: space-between;
    }
    #faq_wrap .con_box ul li .txt01 button span {
        display: block;
        font-weight: 700;
        font-size: 16px;
        width: calc(100% - 40px);
        text-align: left;
        line-height: 1.5;
    }
    #faq_wrap .con_box ul li .txt01 button img {
        position: relative;
        top: 8px;
        transform: rotate(180deg);
        transition: .3s;
        width: 12px;
    }
    #faq_wrap .con_box ul li.active .txt01 button img {
        transform: rotate(0deg);
    }
    #faq_wrap .con_box ul li .txt02 {
        display: none;
        margin-top: 15px;
        padding-left: 70px;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.5;
    }

    /* usage 이용방법 */
    #usage_wrap .con {
        padding: 50px 0;
        border-radius: 20px;
        border: 1px solid #e8e8e8;
        margin-bottom: 50px;
    }
    #usage_wrap .con:last-child {
        margin-bottom: 0;
    }
    #usage_wrap .con .tit {
        font-size: 30px;
        color: #2ba1f5;
        font-family: var(--font_01);
        margin-bottom: 40px;
        text-align: center;
    }
    #usage_wrap .con02 .tit {
        color: #1189ef;
    }
    #usage_wrap .con03 .tit {
        color: #1064c4;
    }
    #usage_wrap .con .f_box {
        display: flex;
        gap:40px;
        align-items: center;
        justify-content: center;
        margin-bottom: 40px;
        flex-direction: column;
    }
    #usage_wrap .con03 .f_box {
        margin-bottom: 0;
    }
    #usage_wrap .con ul {
        display: flex;
        gap:40px 70px;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
    }
    #usage_wrap .con ul li {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap:12px;
        width: calc((100% - 70px)/2);
    }
    #usage_wrap .con .f_box + ul li:last-child {
        width: 100%;
    }
    #usage_wrap .con ul li:after {
        content:'';
        position: absolute;
        right: -47px;
        top: 76px;
        width: 22px;
        height: 18px;
        background: url(/asset/images/sub/usage_arrow01.png);
        background-size: cover;
    }
    #usage_wrap .con .f_box + ul li:nth-child(2):after {
        right: -59px;
    }
    #usage_wrap .con .f_box ul:nth-child(2) li:last-child:after {
        display: none;
    }
    #usage_wrap .con .f_box + ul li:last-child:after {
        display: none;
    }
    #usage_wrap .con ul li img {
        width: 85%;
        max-width: 140px;
    }
    #usage_wrap .con ul li span {
        width: 90px;
        line-height: 34px;
        border-radius: 34px;
        text-align: center;
        color: #fff;
        font-size: 17px;
        font-weight: 700;
        background: #62bcfc;
    }
    #usage_wrap .con .f_box ul:nth-child(2) li span {
        background: #38a3ef;
    }
    #usage_wrap .con .f_box + ul li:nth-child(1) span {
        background: #38a3ef;
    }
    #usage_wrap .con .f_box + ul li:nth-child(2) span {
        background: #1064c4;
    }
    #usage_wrap .con .f_box + ul li:nth-child(3) span {
        background: #1064c4;
    }
    #usage_wrap .con.con03 ul:nth-child(1) li:nth-child(2) span {
        background: #38a3ef;
    }
    #usage_wrap .con.con03 ul:nth-child(2) li:nth-child(1) span {
        background: #38a3ef;
    }
    #usage_wrap .con.con03 ul:nth-child(2) li:nth-child(2) span {
        background: #1064c4;
    }
    #usage_wrap .con ul li p {
        text-align: center;
        font-size: 16px;
        font-weight: 700;
        line-height: 22px;
    }

    /* cart_wrap 장바구니 */
    #cart_wrap .bd_box {
        padding: 25px 10px;
        border-radius: 10px;
        margin-bottom: 20px;
        border: 1px solid #e8e8e8;
    }
    #cart_wrap .bd_box.con02 {
        margin-bottom: 10px;
    }
    #cart_wrap .con01 .tit_box {
        display: flex;
        margin-bottom: 20px;
        align-items: center;
        justify-content: space-between;
    }
    #cart_wrap .con01 .tit_box p {
        font-size: 18px;
        font-weight: 700;
    }
    #cart_wrap .con01 .tit_box .btn_box {
        display: flex;
        align-items: center;
        gap:10px;
    }
    #cart_wrap .con01 .tit_box .btn_box button {
        padding: 0 7px;
        border-radius: 3px;
        font-weight: 500;
        color: #797979;
        background: #efefef;
        height: 26px;
        font-size: 14px;
    }
    #cart_wrap .con01 table {
        width: 100%;
        table-layout: fixed;
    }
    #cart_wrap .con01 table th {
        padding: 7px 0;
        line-height: 1.5;
        background: #f7f7f7;
        font-weight: 700;
        font-size: 13px;
    }
    #cart_wrap .con01 table th:nth-child(1) {
        text-align: left;
        padding: 0 10px;
    }
    #cart_wrap .con01 table td {
        padding: 25px 0;
        text-align: center;
        border-bottom: 1px solid #e8e8e8;
        font-weight: 500;
        font-size: 12px;
    }
    #cart_wrap .con01 table td:nth-child(1) {
        text-align: left;
        padding: 0 10px;
    }
    #cart_wrap .con01 table td:nth-child(1) label {
        font-size: 13px;
        font-weight: 600;
    }
    #cart_wrap .con01 table td:nth-child(1) label strong {
        font-weight: 600;
    }
    #cart_wrap .con01 table td button img {
        width: 20px;
    }
    #cart_wrap .con01 .txt_box {
        padding: 20px 25px;
    }
    #cart_wrap .con01 .txt_box .txt01 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 15px;
    }
    #cart_wrap .con01 .txt_box .txt01:last-child {
        margin-bottom: 0;
    }
    #cart_wrap .con01 .txt_box .txt01 p {
        font-weight: 500;
        font-size: 14px;
    }
    #cart_wrap .con01 .txt02 {
        display: flex;
        padding: 17px 25px;
        background: #e5f7ff;
        align-items: center;
        justify-content: space-between;
    }
    #cart_wrap .con01 .txt02 p {
        font-size: 14px;
        font-weight: 700;
    }
    #cart_wrap .con01 .txt02 strong {
        font-size: 20px;
        color: #0d498c;
    }

    #cart_wrap .con02 .tit {
        font-size: 18px;
        font-weight: 700;
        margin-bottom: 20px;
    }
    #cart_wrap .con02 .btn_box {
        display: flex;
        gap:10px;
        margin-bottom: 20px;
    }
    #cart_wrap .con02 .btn_box input {
        display: none;
    }
    #cart_wrap .con02 .btn_box label {
        flex: 1;
        height: 40px;
        border-radius: 10px;
        border: 2px solid #dadada;
        line-height: 40px;
        text-align: center;
        font-size: 14px;
        color: #797979;
        font-weight: 700;
        transition: .2s;
    }
    #cart_wrap .con02 .btn_box input:checked + label {
        border: 2px solid #1b7be7;
        color: #0d498c;
    }
    #cart_wrap .con02 .c_wrap .c_box:not(:last-child) {
        margin-bottom: 15px;
    }
    #cart_wrap .con02 .c_wrap .c_box:nth-child(1) label {
        font-size: 16px;
    }
    #cart_wrap .cart_btn {
        width: 100%;
        height: 40px;
        border-radius: 10px;
        background: #005c9d;
        color: #fff;
        font-weight: 700;
    }
}

/* 개인정보처리방침·이용약관 모달: 모바일(또는 가로 회전처럼 세로가 낮은 화면)에서는 전체화면 (앱 웹뷰 포함) */
@media screen and (max-width:767px), screen and (max-height:500px) {
    #modalLayout {
        height: 100dvh;
        backdrop-filter: none;
    }
    .modal_content {
        position: fixed;
        top: 0;
        left: 0;
        transform: none;
        width: 100vw;
        max-width: none;
        height: 100vh;   /* dvh 미지원 폴백 */
        height: 100dvh;  /* 주소창 유무에 따른 세로 높이 대응 */
        border-radius: 0;
        border: none;
        box-shadow: none;
    }
    .modal_header {
        padding: calc(12px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 12px calc(16px + env(safe-area-inset-left));
    }
    .modal_header h2 {
        font-size: 1.2rem;
    }
    #closeModal {
        width: 36px;
        height: 36px;
    }
    #modalBody {
        padding: 16px;
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain; /* 본문 끝에서 뒤 페이지로 스크롤 전파 방지 */
    }
}