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

    /* header */
    #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: 80px;
        width: 100%;
    }
    #header h1 a {
        display: block;
        width: 154px;
        height: 38px;
        background: url(/asset/images/main/main_logo01.png);
        background-size: cover;
        transition:.3s;
    }
    #header .btn_box {
        display: flex;
        align-items: center;
        gap:20px;
    }
    #header .navi_btn {
        display: block;
        position: relative;
        width: 22px;
        height: 19px;
    }
    #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;
    }
    /* 태블릿/모바일: 헤더 아이콘은 드로어로 이동 — 인라인 style·JS 제어를 이기기 위해 !important */
    #header #user_menu_area, #header #auth_area {
        display: none !important;
    }

    /* 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;
    }

    /* 네비게이션 */
    #navigation {
        display: none;
        position: fixed;
        left: 0;
        top: 80px;
        z-index: 1000;
        width: 100%;
        height: calc(100vh - 80px);
        background: rgba(0,0,0,.5);
    }
    #navigation .navi_box {
        position: absolute;
        width: 50%;
        right: 0;
        top: 0;
        background: #fff;
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    #navigation .navi_box > ul {
        flex: 1 1 auto;
        overflow-y: auto;
        padding: 8px 10px;
        border-top: 1px solid #e2e8f0;
    }
    /* 드로어 상단: 접속자 정보 (프로필 + 퀵버튼) */
    #navigation .navi_box .drawer_user {
        flex-shrink: 0;
        padding: 22px 18px;
        background: linear-gradient(180deg,#f8fbff 0%,#fff 100%);
    }
    #navigation .navi_box .drawer_profile {
        display: flex;
        align-items: center;
        gap: 13px;
        margin-bottom: 16px;
    }
    #navigation .navi_box .drawer_avatar {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg,#60a5fa 0%,#2563eb 100%);
        box-shadow: 0 3px 8px rgba(37,99,235,.25);
    }
    #navigation .navi_box .drawer_avatar i {
        font-size: 24px;
        color: #fff;
    }
    #navigation .navi_box .drawer_name_line {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }
    #navigation .navi_box .drawer_user_name {
        font-size: 17px;
        font-weight: 700;
        color: #1e293b;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    #navigation .navi_box .drawer_user_type {
        flex-shrink: 0;
        font-size: 11px;
        font-weight: 600;
        font-style: normal;
        padding: 4px 10px;
        border-radius: 20px;
        color: #2563eb;
        background: #eff6ff;
        border: 1px solid #dbeafe;
    }
    #navigation .navi_box .drawer_quick {
        display: flex;
        gap: 9px;
    }
    #navigation .navi_box .quick_btn {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex: 1;
        height: 44px;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        background: #fff;
        font-size: 14px;
        font-weight: 600;
        color: #334155;
    }
    #navigation .navi_box .quick_btn i {
        font-size: 16px;
    }
    #navigation .navi_box .quick_btn.primary {
        background: #2563eb;
        border: none;
        color: #fff;
        box-shadow: 0 4px 10px rgba(37,99,235,.22);
    }
    #navigation .navi_box #drawer_cart_btn .red_dot {
        top: 8px;
        right: 12px;
    }
    #drawer_cart_btn.active .red_dot {
        display: block !important;
    }
    /* 출석체크 배너 (퀵버튼 아래) — 흰 카드 + 블루 틴트 아이콘 타일, 출석 완료 시 .done */
    #navigation .navi_box .drawer_att_banner {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-top: 12px;
        padding: 14px;
        border-radius: 14px;
        background: #fff;
        border: 1px solid #e2e8f0;
    }
    #navigation .navi_box .drawer_att_banner .att_ico {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        background: #eff6ff;
    }
    #navigation .navi_box .drawer_att_banner .att_ico i {
        font-size: 21px;
        color: #2563eb;
    }
    #navigation .navi_box .drawer_att_banner .att_txt {
        display: flex;
        flex-direction: column;
        gap: 3px;
        flex: 1;
        min-width: 0;
    }
    #navigation .navi_box .drawer_att_banner .att_txt strong {
        font-size: 15px;
        font-weight: 700;
        color: #1e293b;
    }
    #navigation .navi_box .drawer_att_banner .att_txt em {
        font-size: 13px;
        color: #64748b;
        font-style: normal;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    #navigation .navi_box .drawer_att_banner .att_chip {
        flex-shrink: 0;
        display: inline-flex;
        align-items: center;
        gap: 3px;
        padding: 7px 13px;
        border-radius: 20px;
        background: #2563eb;
        color: #fff;
        font-size: 13px;
        font-weight: 700;
    }
    #navigation .navi_box .drawer_att_banner.done .att_chip {
        background: #f1f5f9;
        color: #94a3b8;
    }
    #navigation .navi_box .drawer_att_banner.done .att_ico {
        background: #f1f5f9;
    }
    #navigation .navi_box .drawer_att_banner.done .att_ico i {
        color: #94a3b8;
    }
    #navigation .navi_box .drawer_login_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        height: 48px;
        border-radius: 12px;
        background: #2563eb;
        color: #fff;
        font-size: 15px;
        font-weight: 700;
        box-shadow: 0 4px 12px rgba(37,99,235,.25);
    }
    #navigation .navi_box .drawer_signup_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        height: 48px;
        margin-top: 10px;
        border-radius: 12px;
        background: #eff6ff;
        border: 1px solid #dbeafe;
        color: #2563eb;
        font-size: 15px;
        font-weight: 700;
    }
    /* 드로어 하단: 로그아웃 */
    #navigation .navi_box .drawer_footer {
        flex-shrink: 0;
        padding: 0;
        border-top: 1px solid #e2e8f0;
    }
    #navigation .navi_box .drawer_logout_btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        width: 100%;
        height: 74px;
        border: 0;
        border-radius: 0;
        background: #fff;
        font-size: 15px;
        font-weight: 600;
        color: #64748b;
    }
    #navigation .navi_box .drawer_logout_btn:active {
        background: #f8fafc;
    }
    #navigation .navi_box > ul > li > a {
        position: relative;
        display: flex;
        align-items: center;
        height: 54px;
        padding: 0 36px 0 14px;
        border-radius: 10px;
        font-size: 15px;
        font-weight: 700;
        color: #64748b;
        transition: .2s;
    }
    #navigation .navi_box > ul > li > a i {
        flex-shrink: 0;
        width: 40px;
        font-size: 21px;
        color: #64748b;
        transition: .2s;
    }
    #navigation .navi_box > ul > li > a:after {
        content:'';
        position: absolute;
        transition: .3s;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 8px;
        background: url(/asset/images/main/navi_ico01.png);
    }
    #navigation .navi_box > ul > li.on > a:after {
        transform: translateY(-50%) rotate(180deg);
    }
    #navigation .navi_box > ul > li > a.no_ico:after {
        display: none;
    }
    #navigation .navi_box > ul > li > a:hover {
        color: #2563eb;
    }
    #navigation .navi_box > ul > li > a:hover i {
        color: #2563eb;
    }
    #navigation .navi_box > ul > li > a.cur {
        color: #2563eb;
        background: #eff6ff;
    }
    #navigation .navi_box > ul > li > a.cur i {
        color: #2563eb;
    }
    #navigation .navi_box > ul > li ul {
        display: none;
        background: #f8fafc;
        border-radius: 12px;
        margin: 2px 2px 8px;
        padding: 6px 8px;
    }
    #navigation .navi_box > ul > li ul li a {
        display: flex;
        align-items: center;
        padding: 12px 12px 12px 44px;
        font-size: 14px;
        color: #64748b;
        border-radius: 8px;
        transition: .2s;
    }
    #navigation .navi_box > ul > li ul li a:before {
        content:'';
        flex-shrink: 0;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #cbd5e1;
        margin-right: 10px;
        transition: .2s;
    }
    #navigation .navi_box > ul > li ul li.on a {
        color: #2563eb;
        font-weight: 600;
        background: #eff6ff;
    }
    #navigation .navi_box > ul > li ul li.on a:before {
        background: #2563eb;
    }

    /* visual_wrap */
    #visual_wrap {
        margin-top: 80px;
    }
    #visual_wrap .inner {
        width: 100%;
        padding: 0;
    }
    #visual_wrap .slide_box {
        position: relative;
    }
    #visual_wrap ul li {
        position: relative;
        width: 100%;
        height: calc(100vh - 80px);
        border-radius: 0;
        overflow: hidden;
    }
    #visual_wrap ul li > img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform .8s ease-out;
        will-change: transform;
    }
    #visual_wrap ul li.swiper-slide-active > img {
        transform: scale(1.03);
    }
    #visual_wrap ul li .txt_box {
        position: absolute;
        left: 7%;
        top: 10%;
        opacity: 0;
        transform: translateX(-30px);
        transition: transform .5s ease-out, opacity .5s 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: 40px;
        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: 55px;
        line-height: 1.2;
        margin: 10px 0 25px;
        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: 23px;
        margin-bottom: 40px;
    }
    #visual_wrap ul li .txt_box a {
        display: flex;
        padding: 0 35px;
        align-items: center;
        height: 70px;
        font-size: 30px;
        border-radius: 70px;
        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;
    }
    #visual_wrap .visual_items {
        position: absolute;
        display: flex;
        left: 7%;
        bottom: 12%;
        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: 20px;
        font-weight: 800;
    }
    #visual_wrap .visual_items .visual_num em {
        position: relative;
        display: block;
        width: 110px;
        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: 50px;
    }
    .tit_st01 {
        font-size: 50px;
        font-family: 'Taenada';
    }
    .tit_st02 {
        font-size: 50px;
        font-family: 'Taenada';
        text-align: center;
        margin-bottom: 60px;
    }
    .tit_st02 span {
        color: #00bff6;
    }

    a.btn_st01, button.btn_st01 {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 20px;
        height: 40px;
        border-radius: 40px;
        color: #fff;
        background: #000;
        font-size: 16px;
        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;
    }
    ul.list_st01 li {
        width: calc((100% - 20px)/3);
    }
    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: 25px;
    }
    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:10px;
    }
    ul.list_st01 li a .box03 .ico_box {
        width: 70px;
        height: 70px;
        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% - 80px);
    }
    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: 120px 0 95px;
    }

    /* section01 */
    #section01 {
        padding: 120px 0 100px;
    }

    /* section02 */
    #section02 {
        margin-bottom: 150px;
    }
    #section02 ul {
        display: flex;
        gap:0;
        flex-wrap:wrap;
    }
    #section02 ul li {
        width: 50%;
        border-left: 1px solid #e5e5e5;
    }
    #section02 ul li:nth-child(2n+1) {
        border-left: 0;
    }
    #section02 ul li:nth-child(n+3) {
        border-top: 1px solid #e5e5e5;
        margin-top: 40px;
        padding-top: 40px;
    }
    #section02 ul li a {
        display: block;
        position: relative;
        height: 210px;
        padding: 0 30px;
        transition: .3s;
    }
    #section02 ul li:nth-child(2n+1) a {
        padding-left: 0;
        padding-right: 30px;
    }
    #section02 ul li:nth-child(2n) a {
        padding-left: 30px;
        padding-right: 0;
    }
    #section02 ul li a strong {
        display: block;
        padding: 0 9px;
        border-radius: 5px;
        line-height: 24px;
        margin-bottom: 16px;
        background: #d4ecfb;
        font-size: 15px;
        color: #005c9d;
        width: fit-content;
    }
    #section02 ul li a strong.notice {
        background: #f1f1f1;
        color: #000;
    }
    #section02 ul li a p {
        font-size: 20px;
        font-weight: 700;
        line-height: 30px;
        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: absolute;
        left: 30px;
        bottom: 0;
        font-size: 15px;
        font-weight: 500;
        color: #999;
    }
    #section02 ul li:nth-child(2n+1) a span {
        left: 0;
    }

    /* section03 */
    #section03 ul {
        display: flex;
        gap:20px;
        justify-content: center;
        flex-wrap:wrap;
        margin-bottom: 70px;
    }
    #section03 ul li {
        padding: 0 43px;
        line-height: 60px;
        font-size: 23px;
        font-weight: 500;
        color: #0d498c;
        background: #e5f7ff;
    }
    #section03 ul li.bl {
        border-radius: 25px 25px 25px 0px;
    }
    #section03 ul li.tr {
        border-radius: 25px 0px 25px 25px;
    }
    #section03 ul li.br {
        border-radius: 25px 25px 0px 25px;
    }
    #section03 ul li.tl {
        border-radius: 0px 25px 25px 25px;
    }
    #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: 90px 0 70px;
        background:#88cff8;
        height: 400px;
    }
    #section04 .inner {
        position: relative;
    }
    #section04 p {
        font-size: 60px;
        font-family: 'Taenada';
    }
    #section04 p strong {
        color: #0d498c;
    }
    #section04 span {
        display: block;
        font-size: 26px;
        font-weight: 500;
        margin: 30px 0 90px;
    }
    #section04 img {
        position: absolute;
        right: -50px;
        bottom: -65px;
        width: 500px;
    }

    /* footer */
    #footer {
        padding: 40px 0;
    }
    #footer .inner {
        display: flex;
        width: 1780px;
        align-items: flex-end;
        justify-content: space-between;
    }
    #footer .left_box .logo_box {
        display: block;
        margin-bottom: 45px;
    }
    #footer .left_box ul {
        display: flex;
        gap:30px;
        margin-bottom: 15px;
    }
    #footer .left_box ul li a {
        font-size: 16px;
        font-weight: 600;
    }
    #footer .left_box address {
        font-style: normal;
        font-size: 16px;
        font-weight: 500;
        color: #757575;
        margin-bottom: 35px;
        line-height: 24px;
    }
    #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: 14px;
        color: #757575;
        opacity: .7;
    }
    #footer .right_box {
        display: flex;
        gap:10px;
    }
    #footer .right_box li a {
        display: block;
        width: 50px;
        height: 50px;
        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: 80px;
    }
    .sub_wrap .sub_inner {
        padding: 0 2.6%;
    }

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

    .sub_wrap_detail {
        padding: 80px 0;
    }

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

    .sub_tit02 {
        margin-bottom: 60px;
        text-align: center;
    }
    .sub_tit02 span {
        display: block;
        font-size: 20px;
        font-weight: 600;
        color: var(--ma_c01);
    }
    .sub_tit02 p {
        font-size: 37px;
        font-weight: 500;
        margin:20px 0;
    }
    .sub_tit02 h3 {
        font-size: 42px;
    }

    .sub_tit03 {
        margin-bottom: 80px;
    }
    .sub_tit03 h3 {
        font-size: 45px;
        font-family: var(--font_01);
        text-align: center;
    }
    .sub_tit03 h3 span {
        color: var(--ma_c01);
    }
    .sub_tit03 p {
        font-size: 22px;
        font-weight: 500;
        text-align: center;
        margin-top: 20px;
    }

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

    /* 검색 */
    .search_box {
        position: relative;
        display: flex;
        width: 600px;
        margin: 0 auto 65px;
    }
    .search_box input {
        width: calc(100% - 55px);
        padding:0 25px;
        border-radius: 12px 0 0 12px;
        border: 2px solid #1b6da7;
        border-right: 0;
        font-weight: 500;
        height: 54px;
    }
    .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: 55px;
        padding-left: 12px;
        border-radius: 0 12px 12px 0;
        border: 2px solid #1b6da7;
        border-left: 0;
        text-align: left;
    }
    .search_box button:after {
        content:'';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 18px;
        background: #e8e8e8;
    }

    /* 페이징 */
    ul.paging {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 75px;
    }
    ul.paging li a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 16px;
        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: 20px;
    }
    .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: 15px;
        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: 30px;
    }
    form.form_st01 ul li input[type="checkbox"] + label:after {
        content:'';
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        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: 18px;
    }
    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;
    }
    form.form_st01 .sub_btn.sub_btn_p {
        margin-top: 60px;
    }

    form.info_form ul.list02 {
        margin-top: 35px;
        padding-top: 45px;
        border-top: 1px solid #ddd;
    }
    form.info_form ul.list02 .gap_none {
        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 .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: 20px 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 18px;
        margin-top: 10px;
        line-height: 32px;
        border-radius: 8px;
        background: #fff;
        border: 1px solid #aeaeae;
        font-size: 15px;
        font-weight: 700;
        color: #797979;
    }

    /* 진행상황 */
    .step_box {
        display: flex;
        gap:85px;
        justify-content: center;
        margin-bottom: 55px;
    }
    .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.on span {
        background: #0d498c;
        color: #fff;
    }

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

    .board_box table {
        width: 100%;
        table-layout: fixed;
        border-top:2px solid #000;
    }
    .board_box table th {
        height: 65px;
        border-bottom: 1px solid #e8e8e8;
        text-align: center;
        background: #f7f7f7;
        font-weight: 700;
        font-size: 14px;
    }
    .board_box table td {
        padding: 23px 0;
        text-align: center;
        font-size: 16px;
        font-weight: 500;
        border-bottom: 1px solid #e8e8e8;
    }
    .board_box table td:last-child {
        color: #666;
    }
    .board_box table td.blue {
        color: var(--ma_c04);
    }
    .board_box table td a {
        display: block;
        font-size: 18px;
        font-weight: 700;
        white-space: nowrap;
        overflow:hidden;
        text-overflow: ellipsis;
        text-align: left;
        padding: 0 10px;
    }

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

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

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

    /* login_wrap */
    #login_wrap {
        background: url(/asset/images/sub/login_bg01.jpg);
    }
    #login_wrap .sub_inner {
        display: flex;
        min-height: calc(100vh - 80px);
        align-items: center;
        justify-content: center;
        height: 100%;
        padding: 40px 2.6%;
    }
    #login_wrap .login_box {
        width: 460px;
        max-width: 100%;
        padding: 70px 50px 85px;
        border-radius: 25px;
        background: #fff;
    }
    #login_wrap .login_box h3 {
        font-size: 22px;
        text-align: center;
        margin-bottom: 45px;
    }
    #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: 50px;
        border: 1px solid #aeaeae;
        padding: 0 15px;
        font-weight: 500;
        border-radius: 10px;
        font-size: 15px;
    }
    #login_wrap .login_box ul li input[type="text"]::placeholder, #login_wrap .login_box ul li input[type="password"]::placeholder {
        color: #757575;
    }
    #login_wrap .login_box ul li input[type="text"]:focus, #login_wrap .login_box ul li input[type="password"]:focus {
        border: 1px solid #072e59;
        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 a {
        font-size: 14px;
        font-weight: 500;
    }
    #login_wrap .login_box ul li select {
        width: 100%;
        height: 50px;
        border: 1px solid #aeaeae;
        padding: 0 15px;
        font-weight: 500;
        border-radius: 10px;
        font-size: 15px;
        background: url(/asset/images/sub/login_ico01.png) no-repeat right 20px center;
        appearance: none;
    }
    #login_wrap .login_box ul li select:focus {
        border: 1px solid #072e59;
        outline: none;
    }
    #login_wrap .login_box ul li p {
        position: relative;
        width: fit-content;
        font-size: 16px;
        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;
    }

    /* signup_wrap */
    #signup_wrap {
        padding: 120px 0 150px;
    }
    #signup_wrap ul {
        display: flex;
        gap:20px;
        width: 860px;
        max-width: 100%;
        margin: 0 auto;
    }
    #signup_wrap ul li {
        width: calc((100% - 40px)/3);
    }
    #signup_wrap ul li a {
        display: block;
        position: relative;
        border-radius: 10px;
        overflow: hidden;
        aspect-ratio: 13/14;
    }
    #signup_wrap ul li a img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .3s;
    }
    #signup_wrap ul li a:hover img {
        transform: scale(1.05);
    }
    #signup_wrap ul li a p {
        position: absolute;
        bottom: 30px;
        left: 0;
        width: 100%;
        text-align: center;
        font-size: 20px;
        font-weight: 700;
        color: #fff;
    }

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

    /* data_wrap_cate */
    #data_wrap_cate .con01 {
        margin-bottom: 130px;
    }
    #data_wrap_cate .con01 ul {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        width: 600px;
        margin: 0 auto;
        gap:20px 10px;
    }
    #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: 90px;
    }
    #data_wrap_cate .con01 ul a p {
        margin-top: 12px;
        text-align: center;
        font-size: 17px;
        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: 35px;
        font-weight: 800;
        margin-bottom: 30px;
        text-align: center;
    }
    #data_wrap_cate .con03 .btn_box {
        display: flex;
        justify-content: flex-end;
        gap:15px;
        margin-bottom: 25px;
    }
    #data_wrap_cate .con03 .btn_box button {
        display: flex;
        gap:3px;
        align-items: center;
        padding-bottom: 4px;
        border: 1px solid transparent;
        transition: .2s;
    }
    #data_wrap_cate .con03 .btn_box button.on {
        border-bottom: 2px solid #000;
    }

    /* data_wrap_detail */
    #data_wrap_detail .con {
        padding: 35px 15px;
        border-bottom: 1px solid #e8e8e8;
    }
    #data_wrap_detail .con:nth-child(2) {
        border-top: 2px solid #000;
    }
    #data_wrap_detail p.tit {
        font-size: 25px;
        font-weight: 800;
        margin-bottom: 30px;
    }
    #data_wrap_detail p.tit span {
        font-size: 16px;
        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;
    }
    #data_wrap_detail .con01 .box01 {
        display: flex;
        align-items: center;
        gap:25px;
        margin-bottom: 45px;
    }
    #data_wrap_detail .con01 .box01 .ico_box {
        width: 100px;
        height: 100px;
        border-radius: 15px;
        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% - 125px);
    }
    #data_wrap_detail .con01 .box01 .txt span {
        font-size: 20px;
        font-weight: 600;
        color: var(--ma_c01);
    }
    #data_wrap_detail .con01 .box01 .txt p {
        font-size: 32px;
        font-weight: 800;
        margin-top: 20px;
    }
    #data_wrap_detail .con01 .box02 {
        display: flex;
        align-items: center;
        gap:30px;
        margin-bottom: 40px;
    }
    #data_wrap_detail .con01 .box02 ul {
        width: calc(100% - 350px);
    }
    #data_wrap_detail .con01 .box02 ul li {
        display: flex;
        margin-bottom: 20px;
    }
    #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: 80px;
        font-size: 15px;
        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: 15px;
        font-weight: 600;
        width: calc(100% - 80px);
        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: 320px;
        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: 40px;
        cursor: grab;
    }
    #data_wrap_detail .con02 .s_box::-webkit-scrollbar {
        height: 8px;
    }
    #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 30px;
        height: 40px;
        border: 1px solid #e8e8e8;
        font-weight: 600;
        background: #f7f7f7;
        text-align: center;
    }
    #data_wrap_detail .con02 .s_box table td {
        padding: 0 30px;
        height: 40px;
        border: 1px solid #e8e8e8;
        text-align: center;
        font-size: 14px;
    }
    #data_wrap_detail .con02 .txt p {
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 15px;
    }

    #data_wrap_detail .con03 {
        padding-bottom: 100px;
        margin-bottom: 65px;
    }
    #data_wrap_detail .con03 .tit {
        margin-bottom: 25px;
    }
    #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: 23px;
        border-radius: 4px;
        background: #f7f7f7;
        margin-bottom: 470px;
    }
    #data_wrap_detail .con03 .box02 .left_box form p {
        font-size: 20px;
        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: 15px;
        font-weight: 500;
    }
    #data_wrap_detail .con03 .box02 .left_box form ul li select {
        width: calc(100% - 80px);
        height: 32px;
        border: 1px solid #e8e8e8;
        padding: 0 15px;
        font-size: 14px;
        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: 160px;
        height: 42px;
        background: #000;
        color: #fff;
        font-size: 15px;
        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: 20px;
        font-weight: 700;
        margin-bottom: 25px;
    }
    #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: 18px;
        font-weight: 500;
    }
    #data_wrap_detail .con03 .box02 .left_box .m_box .txt02 p strong {
        font-size: 30px;
    }
    #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: 25px;
        border: 1px solid #e8e8e8;
        overflow: scroll;
        height: 415px;
        margin-top: 30px;
        top: 230px;
    }
    #data_wrap_detail .con03 .box02 .right_box::-webkit-scrollbar {
        height: 8px;
        width: 8px;
    }
    #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: 25px;
        font-size: 20px;
    }
    #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: 14px;
        height: 40px;
    }
    #data_wrap_detail .con03 .box02 .right_box table tr:nth-child(1) th {
        font-size: 16px;
    }
    #data_wrap_detail .con03 .box02 .right_box table td {
        border: 1px solid #e8e8e8;
        text-align: center;
        font-size: 14px;
        height: 40px;
    }

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

    /* introduce 우정샵 소개 */
    #introduce_wrap .con01 {
        display: flex;
        margin-bottom: 80px;
        align-items: center;
        flex-direction: column-reverse;
        gap:50px;
    }
    #introduce_wrap .con01 .txt {
        width: 100%;
        text-align: center;
    }
    #introduce_wrap .con01 .txt p {
        font-size: 35px;
        color: #0f65c4;
        font-family: var(--font_01);
        line-height: 50px;
        margin-bottom: 10px;
    }
    #introduce_wrap .con01 .txt span {
        font-size: 20px;
        font-weight: 500;
        line-height: 32px;
    }
    #introduce_wrap .con01 .txt strong {
        display: block;
        margin-top: 10px;
        font-size: 20px;
    }
    #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: 100px;
        align-items: center;
        gap:50px;
        flex-direction: column;
    }
    #introduce_wrap .con02 .img {
        width: 450px;
    }
    #introduce_wrap .con02 .img img {
        width: 100%;
    }
    #introduce_wrap .con02 .txt {
        width:100%;
        text-align: center;
    }
    #introduce_wrap .con02 .txt .tit {
        font-size: 25px;
        font-weight: 800;
        line-height: 40px;
    }
    #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: 24px;
        height: 24px;
        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: 20px;
        font-weight: 700;
    }
    #introduce_wrap .con02 .txt .s_txt {
        font-size: 20px;
        font-weight: 500;
        line-height: 32px;
        color: #454545;
    }

    #introduce_wrap .con03 {
        margin-bottom: 90px;
    }
    #introduce_wrap .con03 .tit {
        font-size: 30px;
        line-height: 50px;
        color: #05406b;
        margin-bottom: 50px;
        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: block;
    }
    #introduce_wrap .con03 .img_box {
        margin-bottom: 50px;
    }
    #introduce_wrap .con03 .img_box img {
        width: 100%;
    }
    #introduce_wrap .con03 ul {
        padding-left: 60px;
    }
    #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: 20px;
        color: #fff;
        font-family: var(--font_01);
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background: #78d4f0;
        text-align: center;
        line-height: 37px;
    }
    #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 {
        position: relative;
        top: 7px;
    }
    #introduce_wrap .con03 ul li .txt strong {
        display: block;
        font-size: 24px;
        font-family:var(--font_01);
        margin-bottom: 7px;
    }
    #introduce_wrap .con03 ul li .txt span {
        font-size: 18px;
        font-weight: 500;
        line-height: 26px;
    }

    #introduce_wrap .con_list:not(:last-child) {
        margin-bottom: 90px;
    }
    #introduce_wrap .con_list .tit {
        font-size: 35px;
        text-align: center;
        margin-bottom: 40px;
        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: calc((100% - 20px)/2);
        height: 250px;
        border: 1px solid #e8e8e8;
        border-radius: 15px;
        padding: 40px 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: 30px;
        right: 20px;
        transform: scale(.8);
    }
    #introduce_wrap .con_list ul li p {
        font-size: 24px;
        font-weight: 700;
    }
    #introduce_wrap .con_list ul li span {
        font-size: 16px;
        font-weight: 500;
        line-height: 22px;
    }
    #introduce_wrap .con_list a {
        display: block;
        width: 200px;
        height: 50px;
        border-radius: 10px;
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        margin: 60px auto 0;
        line-height: 50px;
        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: 30px 40px 30px 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: 120px;
        text-align: center;
        font-size: 16px;
        color: #3ccaf7;
        font-weight: 700;
        padding: 0 7px;
        line-height: 1.5;
    }
    #faq_wrap .con_box ul li .txt01 button {
        display: flex;
        width: calc(100% - 120px);
        justify-content: space-between;
    }
    #faq_wrap .con_box ul li .txt01 button span {
        display: block;
        font-weight: 700;
        font-size: 20px;
        width: calc(100% - 90px);
        text-align: left;
        line-height: 1.5;
    }
    #faq_wrap .con_box ul li .txt01 button img {
        position: relative;
        top: 10px;
        transform: rotate(180deg);
        transition: .3s;
    }
    #faq_wrap .con_box ul li.active .txt01 button img {
        transform: rotate(0deg);
    }
    #faq_wrap .con_box ul li .txt02 {
        display: none;
        margin-top: 25px;
        padding-left: 120px;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.5;
    }

    /* usage 이용방법 */
    #usage_wrap .con {
        padding: 60px 0;
        border-radius: 20px;
        border: 1px solid #e8e8e8;
        margin-bottom: 70px;
    }
    #usage_wrap .con:last-child {
        margin-bottom: 0;
    }
    #usage_wrap .con .tit {
        font-size: 35px;
        color: #2ba1f5;
        font-family: var(--font_01);
        margin-bottom: 50px;
        text-align: center;
    }
    #usage_wrap .con02 .tit {
        color: #1189ef;
    }
    #usage_wrap .con03 .tit {
        color: #1064c4;
    }
    #usage_wrap .con .f_box {
        display: flex;
        gap:70px;
        align-items: flex-start;
        justify-content: center;
        margin-bottom: 55px;
    }
    #usage_wrap .con03 .f_box {
        margin-bottom: 0;
    }
    #usage_wrap .con ul {
        display: flex;
        gap:70px;
        justify-content: center;
    }
    #usage_wrap .con ul li {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap:12px;
    }
    #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: 110px;
    }
    #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;
    }

}