/* header start */
header{
    position: fixed;
    width:100%;
    height:100px;
    min-width:1400px;
    z-index: 9999;
    top:0;
    left:0;
    transition: all .3s ease-in-out;
}
header.on{
    position: fixed;
    width:100%;
    min-width:1440px;
    top:0;
    left:0;
    background-color: #fff;
    border-bottom:1px solid #ccc;
}
header .logo h1{
    position: absolute;
    width:207px;
    height:80px;
    top:10px;
    left:0;
    transition:all .3s ease-in-out;
    background: url(../img/logo_w.png) 50% 50% no-repeat;
    background-size: 207px;
    z-index: 9999;
}
header .logo h1.on{
    background: url(../img/logo.png) 50% 50% no-repeat;
    background-size: 207px;
}
header .logo h1 a{
    display: block;
    width:207px;
    height:80px;
}

header:hover{background-color: #fff; transition: all .3s ease-in-out;}
header:hover .logo h1{background: url(../img/logo.png) 50% 50% no-repeat; background-size:207px; transition:all .3s ease-in-out;}
header:hover .gnb li a{color:#333;  transition:all .3s ease-in-out;}
header:hover .menubtn_wrap ul li{background-color: #333;}


.pos{position: relative;}
.bar{
    width:0;
    height: 3px;
    background-color: #012458;
    position: absolute;
    left: 0;
    bottom: 0;
}
nav{
    width:100%;
    max-width:1400px;
    min-width:1400px;
    margin:0 auto;
    z-index: 999;
    position: relative;
}
.gnb{
    display: flex;
    align-items: center;
    justify-content: end;
    gap:80px;
}
.gnb > li{text-align: center;}
.gnb > li > .gnb_wrap > a{
    color:#fff;
    font-size:20px;
    font-weight: 600;
    height:100px;
    line-height: 100px;
    position: relative;
}
.gnb > li > .gnb_wrap > a.on{color:#333;}
.gnb > li > .gnb_wrap > a::after{content:'';
    display: block;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    position: absolute;
    top: -25px;
    left: 50%;
    background-color: #de051a;
    transform: translateX(-50%);
    transition: all .3s ease-in-out;
    opacity: 0;
}

.menu_bg{
    position: absolute;
    left: 0;
    top: 99px;
    width: 100%;
    height: 220px;
    display: none;
    z-index: 9;
    background-color: #fff;
    border-top:1px solid #ccc;
    border-bottom:3px solid #012458;
}

.gnb > li > .gnb_wrap{position: relative;}
.sub_menu{
    font-size:0;
    display:none;
    position: absolute;
    z-index:99;
    left:50%;
    transform: translateX(-50%);
    width:100%;
    width:180px;
    background-color: #fff;
    border-bottom:3px solid #012458;
    border-radius: 0 0 10px 10px;
    overflow: hidden;
}
.sub_menu li{transition: all .2s ease-in-out;}
.sub_menu a{
    font-size:16px;
    font-weight: 400;
    color: #464243 !important;
    line-height: 36px;
    display: block;
    position: relative;
    transition: all .2s ease-in-out;
    overflow: hidden;
}
.sub_menu a::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 130%;
    height: 200%;
    border-radius: 50%;
    transform: translate3d(-50%,-50%,0) scale3d(0,0,0);
    transition: opacity .4s cubic-bezier(.19,1,.22,1),transform .75s cubic-bezier(.19,1,.22,1);
    /* background-color: #bf0b2c; */
    background-color: #012458;
    opacity: 0;
    z-index: -1;
    transition: all .2s ease-in-out;
}
.sub_menu a:hover::before{
    opacity: 1;
    transition-duration: .85s;
    transition: all .2s ease-in-out;
    transform: translate3d(-50%,-50%,0) scale3d(1,1,1);
}
.sub_menu a:hover{color: #fff !important; transition: all .2s ease-in-out;}


/* header menu active */
header.active1 .gnb > li:nth-child(1) .gnb_wrap > a,
header.active2 .gnb > li:nth-child(2) .gnb_wrap > a,
header.active3 .gnb > li:nth-child(3) .gnb_wrap > a,
header.active4 .gnb > li:nth-child(4) .gnb_wrap > a,
header.active5 .gnb > li:nth-child(5) .gnb_wrap > a,
header.active6 .gnb > li:nth-child(6) .gnb_wrap > a,
header.active7 .gnb > li:nth-child(7) .gnb_wrap > a{color: #de051a;}

header.active1 .gnb > li:nth-child(1) > .gnb_wrap a::after,
header.active2 .gnb > li:nth-child(2) > .gnb_wrap a::after,
header.active3 .gnb > li:nth-child(3) > .gnb_wrap a::after,
header.active4 .gnb > li:nth-child(4) > .gnb_wrap a::after,
header.active5 .gnb > li:nth-child(5) > .gnb_wrap a::after,
header.active6 .gnb > li:nth-child(6) > .gnb_wrap a::after,
header.active7 .gnb > li:nth-child(7) > .gnb_wrap a::after{opacity: 1;}
/* header end */

/* header end */

/* visual swiper start */
.visual {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 700px;
    max-height: 1080px;
    overflow: hidden;
    background-color: #07172c;
}

.visual .visual_slide {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 10;
}

.visual .swiper-slide {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background-color: #07172c;
}

/* 슬라이드 배경 이미지 레이어 */
.visual .slide_bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform: scale(1);
    /* 6초 동안 서서히 줌인 */
    transition: transform 6s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

/* 활성화 슬라이드 배경 줌인 트리거 */
.visual .swiper-slide-active .slide_bg {
    transform: scale(1.12);
}

/* 2. 딤 오버레이 (밝은 체육관 사진 위에서 흰 글씨 가독성 확보) */
.visual .dim_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg, 
        rgba(7, 23, 44, 0.35) 0%, 
        rgba(7, 23, 44, 0.45) 50%, 
        rgba(7, 23, 44, 0.70) 100%
    );
    z-index: 2;
}

/* 3. 텍스트 컨테이너 */
.visual .textbox {
    position: relative;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: #ffffff;
    width: 100%;
    max-width: 1240px;
    padding: 0 20px;
    box-sizing: border-box;
    pointer-events: none;
}

/* 4. 메인 타이틀 (기본: 투명 + 아래로 40px 이동 상태) */
.visual .textbox .title {
    display: block;
    font-size: clamp(38px, 4.2vw, 64px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.03em;
    color: #ffffff;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out 0.25s, transform 0.8s ease-out 0.25s;
    word-break: keep-all;
}

/* 5. 서브 슬로건 (기본: 투명 + 아래로 30px 이동 상태) */
.visual .textbox .slogan {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.7;
    color: #e2e8f0;
    margin-top: 24px;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out 0.5s, transform 0.8s ease-out 0.5s;
    word-break: keep-all;
}

/* 6. [핵심] 활성화된 슬라이드에서 글자가 스르륵 위로 떠오르며 등장 */
.visual .swiper-slide-active .textbox .title,
.visual .swiper-slide-active .textbox .slogan {
    opacity: 1;
    transform: translateY(0);
}


/* 페이징 불릿 */
.visual .visual_pagination {
    position: absolute;
    bottom: 60px;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    z-index: 15;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
}

.visual .visual_pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    margin: 0;
    background: rgba(255, 255, 255, 0.45);
    opacity: 1;
    border-radius: 5px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.visual .visual_pagination .swiper-pagination-bullet-active {
    width: 34px;
    background: var(--color-accent);
}

/* 스크롤 인디케이터 */
.visual .scrolling {
    position: absolute;
    bottom: 0;
    right: 80px;
    z-index: 15;
    color: #ffffff;
    transform-origin: right bottom;
    transform: rotate(90deg);
    line-height: 1;
    display: flex;
    align-items: center;
    font-size: 13px;
    letter-spacing: 2px;
    font-weight: 500;
}

.visual .scrolling .gage {
    width: 70px;
    height: 2px;
    position: relative;
    background-color: rgba(255, 255, 255, 0.3);
    margin-left: 12px;
    overflow: hidden;
}

.visual .scrolling .gage .gage_bar {
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background-color: #ffffff;
    animation: mainScroll 1.2s infinite linear;
}

@keyframes mainScroll {
    0% { left: -50%; }
    100% { left: 100%; }
}

/* 반응형 */
@media (max-width: 1024px) {
    .visual .textbox .title {
        white-space: normal;
        font-size: 40px;
    }
    .visual .textbox .slogan {
        font-size: 17px;
        line-height: 1.6;
        margin-top: 18px;
    }
    .visual .scrolling {
        right: 40px;
    }
}

@media (max-width: 768px) {
    .visual {
        min-height: 600px;
    }
    .visual .textbox .title {
        font-size: 30px;
    }
    .visual .textbox .slogan {
        font-size: 15px;
        line-height: 1.5;
        margin-top: 14px;
    }
    .visual .visual_pagination {
        bottom: 35px;
    }
    .visual .scrolling {
        display: none;
    }
}


/* ========================================================
   메인 비주얼 좌우 화살표 네비게이션 버튼
   ======================================================== */
.visual .visual_btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 20;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(7, 23, 44, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #ffffff;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.3s ease;
}

.visual .visual_prev {
    left: 40px;
}

.visual .visual_next {
    right: 40px;
}

/* 마우스 호버 시 포인트 컬러 확장 */
.visual .visual_btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #ffffff;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 8px 22px rgba(217, 4, 41, 0.45);
}

/* 태블릿 및 모바일 반응형 */
@media (max-width: 1024px) {
    .visual .visual_btn {
        width: 46px;
        height: 46px;
        font-size: 20px;
    }
    .visual .visual_prev { left: 16px; }
    .visual .visual_next { right: 16px; }
}

@media (max-width: 768px) {
    /* 모바일에서는 터치 스와이프로 넘기도록 버튼 숨김 처리 */
    .visual .visual_btn {
        display: none;
    }
}
.visual .visual_btn i {
    pointer-events: none; /* 아이콘 클릭 간섭 차단 */
}
/* visual swiper end */

/*****************  버튼 공통 *****************/
/* image_show_wrap 공통 */
section .image_show_wrap,
section .image_show_wrap2{
    position: relative;
    top: 0px;
    left: 0%;
    width: 100%;
}
section .image_show_wrap{overflow: hidden; animation-duration: 1.4s;}
section .image_show_wrap2{animation-duration: 1.4s;}

section .show_img01{animation-name: show_img01;}
@keyframes show_img01{
    0%{opacity: 0; transform: translate3d(-100%, 0, 0);}
}
section .show_img02{animation-name: show_img02;}
@keyframes show_img02{
    0%{opacity: 0; transform: translate3d(100%, 0, 0);}
}
section .show_img03{animation-name: show_img03;}
@keyframes show_img03{
    0%{opacity: 0; transform: translate3d(100%, 0, 0);}
}
section .show_img04{animation-name: show_img04;}
@keyframes show_img04{
    0%{opacity: 0; transform: translate3d(-100%, 0, 0);}
}
section .show_img05{animation-name: show_img05;}
@keyframes show_img05{
    0%{opacity: 0; transform: translate3d(0, 100%, 0);}
}
section .show_img06{animation-name: show_img06;}
@keyframes show_img06{
    0%{opacity: 0; transform: translate3d(0, -100%, 0);}
}
section .show_img07{animation-name: show_img07;}
@keyframes show_img07{
    0%{opacity: 0; transform: translate3d(0, -100%, 0);}
}
section .show_img08{animation-name: show_img08;}
@keyframes show_img08{
    0%{opacity: 0; transform: translate3d(0, 100%, 0);}
}
/* image_show_wrap 공통 */

/* image 확대 공통 */
.clip-animation {
    clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    animation: clipExpand 1s cubic-bezier(0.770, 0.000, 0.175, 1.000) forwards;
}
@keyframes clipExpand {
    from {
        clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
    }
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}
/* image 확대 공통 */

/* ------------------------------------- section ------------------------------------- */
/* ========================================================
   SECTION 1 VIBE STYLE
   ======================================================== */

.cont1 {
    padding: 70px 0 100px 0;
    background-color: var(--bg-sub);
}

.cont1 h2 { font-size: 48px; font-weight: 800; line-height: 1.25; letter-spacing: -0.03em; }
.cont1 h3 { font-size: 32px; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; }
.cont1 p  { font-size: 18px; font-weight: 400; line-height: 1.6; }

/* 1. 자격증 간편 신청 바 (수정본) */
.cont1 .cert_ticket_bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #0b2545;
    border-radius: 8px;
    padding: 20px 30px;
    box-shadow: 0 15px 35px rgba(11, 37, 69, 0.12);
    margin-bottom: 40px;
    border-left: 6px solid var(--color-accent);
    gap: 24px;
}

/* 좌측 배지/타이틀 */
.cont1 .cert_ticket_bar .ticket_badge {
    padding-right: 28px;
    border-right: 1px dashed rgba(255, 255, 255, 0.2);
    white-space: nowrap;
}

.cont1 .cert_ticket_bar .ticket_badge .tag {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--color-secondary);
    margin-bottom: 2px;
}

.cont1 .cert_ticket_bar .ticket_badge h3 {
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

/* 중앙 한 줄 안내 설명 */
.cont1 .cert_ticket_bar .ticket_desc {
    flex: 1;
}

.cont1 .cert_ticket_bar .ticket_desc p {
    color: #cbd5e1;
    font-size: 15px;
    line-height: 1.5;
    word-break: keep-all;
    margin: 0;
}

/* 우측 신청 버튼 */
.cont1 .btn_ticket_apply {
    height: 48px;
    padding: 0 24px;
    background: var(--color-accent);
    color: #ffffff;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(230, 57, 70, 0.35);
    transition: all 0.25s ease;
}

.cont1 .btn_ticket_apply i {
    font-size: 18px;
    transition: transform 0.25s ease;
}

.cont1 .btn_ticket_apply:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(230, 57, 70, 0.5);
}

.cont1 .btn_ticket_apply:hover i {
    transform: translateX(4px);
}

/* 태블릿 및 반응형 미디어쿼리 */
@media (max-width: 900px) {
    .cont1 .cert_ticket_bar {
        flex-direction: column;
        align-items: flex-start;
        padding: 24px;
        gap: 16px;
    }

    .cont1 .cert_ticket_bar .ticket_badge {
        border-right: none;
        padding-right: 0;
    }

    .cont1 .btn_ticket_apply {
        width: 100%;
        justify-content: center;
    }
}
/* 2. 와이드 비주얼 배너 */
.cont1 .identity_banner {
    display: flex;
    background: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    box-shadow: 0 15px 35px rgba(11, 37, 69, 0.04);
}

.cont1 .banner_img_area {
    flex: 1.2;
    position: relative;
    min-height: 480px;
    background: #0b2545;
}

.cont1 .banner_img_area img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cont1 .banner_img_area .img_overlay_tag {
    position: absolute;
    bottom: 24px;
    left: 24px;
    background: rgba(11, 37, 69, 0.85);
    color: #ffffff;
    padding: 8px 16px;
    font-family: 'Permanent Marker', cursive;
    font-size: 16px;
    letter-spacing: 1px;
    border-left: 4px solid var(--color-accent);
}

.cont1 .banner_txt_area {
    flex: 1;
    padding: 50px 44px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cont1 .banner_txt_area .sub_label {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--color-secondary);
    margin-bottom: 12px;
}

.cont1 .banner_txt_area h2 {
    color: var(--text-primary);
    margin-bottom: 36px;
    word-break: keep-all;
}

.cont1 .punch_list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cont1 .punch_list li {
    position: relative;
    padding-left: 20px;
    border-left: 3px solid #e2e8f0;
    transition: all 0.25s ease;
}

.cont1 .punch_list li:hover {
    border-left-color: var(--color-accent);
    padding-left: 26px;
}

.cont1 .punch_list li strong {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
}

.cont1 .punch_list li p {
    font-size: 16px;
    color: var(--text-muted);
    margin-top: 4px;
    word-break: keep-all;
}
/* sec1 */



/* sec2 */
/* ========================================================
   SECTION 2 FULL STYLE (Swiper 10 + Strength 5)
   ======================================================== */

.cont2 {
    padding: 110px 0;
    background-color: var(--bg-main);
    position: relative;
    overflow: hidden;
}

/* 타이포 규격 */
.cont2 h2 { font-size: 48px; font-weight: 800; line-height: 1.25; letter-spacing: -0.03em; }
.cont2 h3 { font-size: 32px; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; }
.cont2 h4 { font-size: 24px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.cont2 p  { font-size: 16px; font-weight: 400; line-height: 1.6; }

/* 1. 상단 타이틀 & 컨트롤러 */
.cont2 .cont2_header_flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 44px;
}

.cont2 .title_box .sub_en {
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--color-accent);
    margin-bottom: 12px;
}

.cont2 .title_box h2 {
    color: var(--text-primary);
    margin-bottom: 12px;
}

.cont2 .title_box p {
    color: var(--text-muted);
    font-size: 18px;
}

/* 스와이퍼 화살표 버튼 */
.cont2 .swiper_ctrl {
    display: flex;
    gap: 10px;
}

.cont2 .swiper_ctrl button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--border-color);
    font-size: 22px;
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.cont2 .swiper_ctrl button:hover {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(11, 37, 69, 0.15);
}

/* 2. 포스터 카드 슬라이드 */
.cont2 .bizSwiper {
    margin-bottom: 70px;
    overflow: visible;
}

.cont2 .poster_card {
    position: relative;
    height: 480px;
    border-radius: 14px;
    overflow: hidden;
    background: #0b2545;
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 30px rgba(11, 37, 69, 0.06);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
}

.cont2 .poster_img {
    width: 100%;
    height: 100%;
    background: #cbd5e1;
}

.cont2 .poster_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* 상단 독립 고대비 배지 번호 */
.cont2 .poster_card .big_num {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 3;
    font-family: 'Raleway', sans-serif;
    font-size: 18px;
    font-weight: 900;
    line-height: 1;
    color: #ffffff;
    background: var(--color-primary);
    border: 1px solid rgba(255, 255, 255, 0.25);
    padding: 8px 14px;
    border-radius: 6px;
    letter-spacing: 1px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* 하단 텍스트 영역 (가독성 높은 그라데이션) */
.cont2 .poster_info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 34px 26px 28px 26px;
    background: linear-gradient(to top, rgba(7, 23, 44, 0.95) 0%, rgba(7, 23, 44, 0.72) 65%, transparent 100%);
    box-sizing: border-box;
    z-index: 2;
}

.cont2 .poster_info h4 {
    color: #ffffff;
    margin-bottom: 8px;
    word-break: keep-all;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.cont2 .poster_info p {
    font-size: 15px;
    color: #e2e8f0;
    line-height: 1.5;
    word-break: keep-all;
}

/* 호버 인터랙션 */
.cont2 .poster_card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 36px rgba(11, 37, 69, 0.12);
}

.cont2 .poster_card:hover .poster_img img {
    transform: scale(1.06);
}

.cont2 .poster_card:hover .big_num {
    background: var(--color-accent);
    color: #ffffff;
    transform: scale(1.05);
}

/* 3. 하단 5대 강점 밴드 */
.cont2 .strength_band {
    background: linear-gradient(135deg, #0b2545 0%, #07172c 100%);
    border-radius: 12px;
    padding: 44px 40px;
    box-shadow: 0 15px 35px rgba(11, 37, 69, 0.12);
}

.cont2 .strength_head {
    display: flex;
    align-items: center;
    gap: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    padding-bottom: 20px;
    margin-bottom: 30px;
}

.cont2 .strength_head .tag {
    font-family: 'Raleway', sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    background: var(--color-accent);
    color: #ffffff;
    padding: 4px 10px;
    border-radius: 4px;
}

.cont2 .strength_head h3 {
    color: #ffffff;
}

.cont2 .strength_list {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
}

.cont2 .strength_item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 8px;
}

.cont2 .strength_item .st_icon {
    font-size: 26px;
    color: var(--color-secondary);
    line-height: 1;
    margin-top: 2px;
}

.cont2 .strength_item .st_txt h4 {
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 4px;
}

.cont2 .strength_item .st_txt p {
    font-size: 13px;
    color: #94a3b8;
    line-height: 1.5;
    word-break: keep-all;
}

/* 반응형 */
@media (max-width: 1024px) {
    .cont2 .cont2_header_flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .cont2 .strength_list {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 640px) {
    .cont2 .strength_list {
        grid-template-columns: 1fr;
    }
}
/* sec2 */




/* sec3 */
/* ========================================================
   SECTION 3 STYLE (Activity Gallery - Swiper)
   ======================================================== */

.cont3 {
    padding: 110px 0;
    background-color: var(--bg-sub);
    position: relative;
    overflow: hidden;
}

/* 폰트 규격 적용 */
.cont3 h2 { font-size: 48px; font-weight: 800; line-height: 1.25; letter-spacing: -0.03em; }
.cont3 h3 { font-size: 32px; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; }
.cont3 h4 { font-size: 24px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.cont3 p  { font-size: 16px; font-weight: 400; line-height: 1.6; }

/* 1. 섹션 헤더 & 네비게이션 flex */
.cont3 .cont3_header_flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 44px;
}

.cont3 .title_wrap .sub_en {
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--color-accent);
    margin-bottom: 12px;
}

.cont3 .title_wrap h2 {
    color: var(--text-primary);
    margin-bottom: 12px;
    word-break: keep-all;
}

.cont3 .title_wrap p {
    color: var(--text-muted);
    font-size: 18px;
    word-break: keep-all;
}

/* 스와이퍼 컨트롤러 화살표 */
.cont3 .swiper_ctrl {
    display: flex;
    gap: 10px;
}

.cont3 .swiper_ctrl button {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--border-color);
    font-size: 22px;
    color: var(--color-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
}

.cont3 .swiper_ctrl button:hover {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(11, 37, 69, 0.15);
}

/* 2. Swiper 컨테이너 및 카드 스타일 */
.cont3 .gallerySwiper {
    overflow: visible; /* 슬라이드가 양옆으로 자연스럽게 이어지는 느낌 */
    margin-bottom: 50px;
}

.cont3 .swiper-slide {
    height: auto; /* 카드 높이 균일화 */
}

.cont3 .gallery_card {
    height: 100%;
    background: #ffffff;
    border-radius: 12px;
    border: 1px solid var(--border-color);
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(11, 37, 69, 0.04);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.cont3 .gallery_card .card_link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

/* 이미지 썸네일 */
.cont3 .gallery_thumb {
    width: 100%;
    height: 270px;
    background-color: #cbd5e1;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cont3 .gallery_thumb .guide_txt {
    font-size: 14px;
    color: #475569;
    font-weight: 600;
}

.cont3 .gallery_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

/* 분류 배지 */
.cont3 .gallery_thumb .badge_cate {
    position: absolute;
    top: 20px;
    left: 20px;
    background: rgba(11, 37, 69, 0.88);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 4px;
    backdrop-filter: blur(4px);
    letter-spacing: -0.3px;
    border-left: 3px solid var(--color-accent);
}

/* 텍스트 영역 */
.cont3 .gallery_info {
    padding: 30px 26px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.cont3 .gallery_info h4 {
    color: var(--text-primary);
    margin-bottom: 12px;
    word-break: keep-all;
    transition: color 0.3s;
}

.cont3 .gallery_info p {
    color: var(--text-muted);
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 24px;
    word-break: keep-all;
}

.cont3 .gallery_info .view_more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--color-secondary);
    transition: all 0.25s ease;
}

/* 호버 효과 */
.cont3 .gallery_card:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 35px rgba(11, 37, 69, 0.1);
    border-color: #cbd5e1;
}

.cont3 .gallery_card:hover .gallery_thumb img {
    transform: scale(1.08);
}

.cont3 .gallery_card:hover .gallery_info h4 {
    color: var(--color-accent);
}

.cont3 .gallery_card:hover .view_more {
    color: var(--color-accent);
    transform: translateX(6px);
}

/* 3. 하단 전체보기 버튼 */
.cont3 .gallery_btn_wrap {
    text-align: center;
}

.cont3 .btn_gallery_more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 36px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: 30px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    transition: all 0.25s ease;
    box-shadow: 0 4px 14px rgba(11, 37, 69, 0.05);
}

.cont3 .btn_gallery_more:hover {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(11, 37, 69, 0.15);
}

/* 태블릿 및 모바일 반응형 */
@media (max-width: 1024px) {
    .cont3 .cont3_header_flex {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}
/* sec3 */




/* sec4 */
/* ========================================================
   SECTION 4 STYLE (Notice & Media Banner)
   ======================================================== */

.cont4 {
    padding: 110px 0;
    background-color: var(--bg-main);
    position: relative;
}

/* 폰트 규격 적용 */
.cont4 h2 { font-size: 48px; font-weight: 800; line-height: 1.25; letter-spacing: -0.03em; }
.cont4 h3 { font-size: 32px; font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; }
.cont4 h4 { font-size: 24px; font-weight: 700; line-height: 1.35; letter-spacing: -0.01em; }
.cont4 p  { font-size: 18px; font-weight: 400; line-height: 1.6; }

.cont4 .cont4_wrap {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 48px;
}

/* 1. 좌측: 게시판 영역 */
.cont4 .board_area {
    flex: 1.3;
    display: flex;
    flex-direction: column;
}

.cont4 .board_header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 2px solid var(--color-primary);
    padding-bottom: 20px;
    margin-bottom: 10px;
}

.cont4 .board_header .title_box .sub_en {
    display: inline-block;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 3px;
    color: var(--color-accent);
    margin-bottom: 8px;
}

.cont4 .board_header .title_box h2 {
    color: var(--text-primary);
}

/* 게시판 전환 탭 */
.cont4 .board_tab {
    display: flex;
    gap: 8px;
}

.cont4 .board_tab .tab_link {
    padding: 8px 18px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-muted);
    background: #f1f5f9;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cont4 .board_tab .tab_link.on {
    background: var(--color-primary);
    color: #ffffff;
    border-color: var(--color-primary);
}

/* 게시글 리스트 */
.cont4 .board_panel {
    display: none;
}

.cont4 .board_panel.on {
    display: block;
}

.cont4 .post_list {
    margin-top: 10px;
}

.cont4 .post_list li {
    border-bottom: 1px solid var(--border-color);
}

.cont4 .post_list li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 8px;
    transition: all 0.2s ease;
}

.cont4 .post_list li a:hover {
    padding-left: 14px;
    background-color: var(--bg-sub);
}

.cont4 .post_info {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    overflow: hidden;
}
.cont4 .cate {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    overflow: hidden;
}

/* 배지 스타일 */
/* 공지사항 및 질문게시판 정렬 공통 적용 */
.cont4 .post_info,
.cont4 .cate {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    overflow: hidden;
}

/* 제목 기본 규격 (18px) */
.cont4 .post_info .post_subject,
.cont4 .cate .post_subject {
    font-size: 18px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 제목 strong 규격 */
.cont4 .post_info .post_subject strong,
.cont4 .cate .post_subject strong {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

/* 마우스 호버 시 */
.cont4 .post_list li a:hover .post_subject,
.cont4 .post_list li a:hover .post_subject strong {
    color: var(--color-accent);
}


.cont4 .badge_notice {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    background: var(--color-accent);
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    animation: cont4TextBlink 1.2s infinite ease-in-out;
}

.cont4 .badge_normal {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-secondary);
    background: #e0f2fe;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.cont4 .badge_accent {
    font-size: 12px;
    font-weight: 700;
    color: #ffffff;
    background: var(--color-secondary);
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}

.cont4 .badge_end {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
    background: #e2e8f0;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
}






.cont4 .bbs_chip {
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 4px;
    white-space: nowrap;
    display: inline-block;
}

/* 접수완료 = badge_normal 규격 (연파랑 배경 / 파란 텍스트) */
.cont4 .bbs_chip.ready {
    font-weight: 600;
    color: var(--color-secondary);
    background: #e0f2fe;
}

/* 답변완료 = badge_notice 규격 (크림슨 레드 배경 / 흰색 텍스트) */
.cont4 .bbs_chip.end {
    font-weight: 700;
    color: #ffffff;
    background: var(--color-accent);
    animation: cont4TextBlink 1.2s infinite ease-in-out; /* 깜빡임 추가 */
}
@keyframes cont4TextBlink {
    0%, 100% {
        color: #ffffff;
    }
    50% {
        color: transparent; /* 글자만 쏙 숨김 */
    }
}

.cont4 .post_subject {
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cont4 .post_list li a:hover .post_subject {
    color: var(--color-accent);
}

.cont4 .post_date {
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    color: var(--text-muted);
    margin-left: 20px;
    white-space: nowrap;
}

.cont4 .board_more {
    margin-top: 24px;
    text-align: right;
}

.cont4 .btn_more_link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.cont4 .btn_more_link:hover {
    color: var(--color-primary);
}

/* 2. 우측: 미디어 배너 영역 */
.cont4 .media_banner_area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* SNS 카드 */
.cont4 .sns_card {
    background: var(--bg-sub);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 36px 32px;
}

.cont4 .sns_card .card_head .sub_tag {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--color-secondary);
    display: block;
    margin-bottom: 6px;
}

.cont4 .sns_card .card_head h4 {
    color: var(--text-primary);
    margin-bottom: 6px;
}

.cont4 .sns_card .card_head p {
    font-size: 15px;
    color: var(--text-muted);
    margin-bottom: 24px;
}

.cont4 .sns_btn_group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cont4 .btn_sns {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 20px;
    border-radius: 8px;
    background: #ffffff;
    border: 1px solid var(--border-color);
    transition: all 0.25s ease;
}

.cont4 .btn_sns i {
    font-size: 28px;
    line-height: 1;
}

.cont4 .btn_sns.youtube i { color: #ff0000; }
.cont4 .btn_sns.insta i { color: #e1306c; }

.cont4 .btn_sns div strong {
    display: block;
    font-family: 'Raleway', sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--text-primary);
}

.cont4 .btn_sns div span {
    font-size: 13px;
    color: var(--text-muted);
}

.cont4 .btn_sns:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(11, 37, 69, 0.08);
    border-color: #cbd5e1;
}

/* 프로모션 배너 (이미지 플레이스홀더) */
.cont4 .promo_banner {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    min-height: 220px;
    background-color: #0b2545;
    display: flex;
    align-items: center;
}

.cont4 .promo_banner .guide_txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(255, 255, 255, 0.2);
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
}

.cont4 .promo_banner img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cont4 .promo_txt_overlay {
    position: relative;
    z-index: 2;
    padding: 34px 32px;
    background: linear-gradient(90deg, rgba(11, 37, 69, 0.95) 0%, rgba(11, 37, 69, 0.7) 100%);
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.cont4 .promo_txt_overlay .label {
    font-family: 'Raleway', sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--color-accent);
    margin-bottom: 8px;
    display: block;
}

.cont4 .promo_txt_overlay h4 {
    color: #ffffff;
    margin-bottom: 8px;
}

.cont4 .promo_txt_overlay p {
    font-size: 14px;
    color: #cbd5e1;
    margin-bottom: 18px;
    word-break: keep-all;
}

.cont4 .promo_txt_overlay .btn_inquiry {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    background: var(--color-accent);
    padding: 8px 18px;
    border-radius: 4px;
    align-self: flex-start;
    transition: background 0.2s ease;
}

.cont4 .promo_txt_overlay .btn_inquiry:hover {
    background: var(--color-accent-hover);
    color: #ffffff;
}

/* 태블릿 및 반응형 */
@media (max-width: 1024px) {
    .cont4 .cont4_wrap {
        flex-direction: column;
        gap: 50px;
    }
}
/* sec4 */




/* footer */
/* ========================================================
   FOOTER SECTION STYLE
   ======================================================== */

footer {
    width: 100%;
    background-color: var(--color-primary-dark);
    color: #94a3b8;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.footer_wrap {
    padding: 60px 0 50px 0;
}

/* 1. 푸터 상단 바 (정책 링크 & SNS) */
.footer_top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 36px;
}

.f_policy_list {
    display: flex;
    align-items: center;
    gap: 24px;
}

.f_policy_list li a {
    color: #cbd5e1;
    font-size: 15px;
    transition: color 0.2s ease;
}

.f_policy_list li a:hover {
    color: #ffffff;
}

.f_policy_list li a strong {
    color: #ffffff;
    font-weight: 700;
}

/* 푸터 SNS 아이콘 링크 */
.f_sns_list {
    display: flex;
    align-items: center;
    gap: 12px;
}

.f_sns_list a {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
    font-size: 18px;
    transition: all 0.25s ease;
}

.f_sns_list a:hover {
    background: var(--color-accent);
    color: #ffffff;
    transform: translateY(-2px);
}

/* 2. 푸터 하단 상세 정보 영역 */
.footer_bottom {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

/* 좌측 협회 심볼/로고 텍스트 */
.footer_bottom .f_logo_area {
    min-width: 180px;
}

.footer_bottom .f_logo_area .f_logo_txt {
    font-family: 'Raleway', sans-serif;
    font-size: 32px;
    font-weight: 900;
    color: #ffffff;
    letter-spacing: 2px;
    display: block;
    line-height: 1;
}

.footer_bottom .f_logo_area .f_slogan {
    font-size: 13px;
    color: var(--color-secondary);
    margin-top: 8px;
    font-weight: 600;
    letter-spacing: -0.3px;
}

/* 우측 텍스트 정보 리스트 */
.footer_bottom .f_info_area {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.footer_bottom .f_info_area .info_row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 14px;
    line-height: 1.8;
    color: #94a3b8;
}

.footer_bottom .f_info_area .info_row strong {
    color: #cbd5e1;
    font-weight: 500;
}

/* 태그 없이 CSS 가상요소로 세로 구분선(|) 자동 부여 */
.footer_bottom .f_info_area .info_row span + span::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 11px;
    background-color: rgba(255, 255, 255, 0.2);
    margin: 0 12px;
    vertical-align: -1px;
}

.footer_bottom .f_info_area .web_domain span {
    color: #64748b;
}

/* 카피라이트 */
.footer_bottom .f_info_area .f_copyright {
    margin-top: 16px;
    font-family: 'Raleway', sans-serif;
    font-size: 13px;
    color: #64748b;
    letter-spacing: 0.5px;
}

/* 반응형 처리 (1024px 이하) */
@media (max-width: 1024px) {
    .footer_top {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    
    .footer_bottom {
        flex-direction: column;
        gap: 28px;
    }
}
/* footer */

/* ========================================================
   MODAL / POPUP STYLE
   ======================================================== */

/* 모달 오픈 시 바닥페이지 스크롤 고정 */
body.modal_open {
    overflow: hidden !important;
}

/* 팝업 배경 딤(Overlay) */
.modal_overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(7, 23, 44, 0.65);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.modal_overlay.show {
    opacity: 1;
}

/* 모달 본체 박스 */
.modal_box {
    background: #ffffff;
    width: 100%;
    max-width: 680px;
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    display: flex;
    flex-direction: column;
    max-height: 82vh;
    transform: translateY(20px);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    overflow: hidden;
}

.modal_overlay.show .modal_box {
    transform: translateY(0);
}

/* 모달 헤더 */
.modal_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 28px;
    border-bottom: 1px solid #e2e8f0;
}

.modal_head h3 {
    font-size: 22px;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0;
}

.btn_modal_close {
    background: transparent;
    border: none;
    font-size: 26px;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.2s, background-color 0.2s;
}

.btn_modal_close:hover {
    color: var(--color-primary);
    background-color: #f1f5f9;
}

/* 모달 컨텐츠 영역 (스크롤) */
.modal_body {
    padding: 28px;
    overflow-y: auto;
    flex: 1;
}

.modal_body .policy_sec {
    margin-bottom: 24px;
}

.modal_body .policy_sec:last-child {
    margin-bottom: 0;
}

.modal_body h4 {
    font-size: 16px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 8px;
}

.modal_body p {
    font-size: 14px;
    color: #475569;
    line-height: 1.65;
    word-break: keep-all;
    margin: 0 0 8px 0;
}

.modal_body ul {
    background-color: #f8fafc;
    padding: 14px 18px;
    border-radius: 8px;
    border: 1px solid #edf2f7;
}

.modal_body ul li {
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
    margin-bottom: 4px;
}

.modal_body ul li:last-child {
    margin-bottom: 0;
}

/* 모달 커스텀 스크롤바 */
.custom_scroll::-webkit-scrollbar {
    width: 6px;
}
.custom_scroll::-webkit-scrollbar-track {
    background: #f1f5f9;
}
.custom_scroll::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 3px;
}
.custom_scroll::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* 모달 푸터 버튼 */
.modal_foot {
    padding: 18px 28px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    justify-content: flex-end;
    background: #f8fafc;
}

.modal_foot .btn_confirm {
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 700;
    color: #ffffff;
    background: var(--color-primary);
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.modal_foot .btn_confirm:hover {
    background: var(--color-accent);
}

/* 반응형 모바일 */
@media (max-width: 640px) {
    .modal_box {
        max-height: 90vh;
    }
    .modal_head, .modal_body, .modal_foot {
        padding: 20px;
    }
    .modal_head h3 {
        font-size: 19px;
    }
}


/* ------------------------------------- section ------------------------------------- */


/* top_btn */
.topbtn{
    position: fixed;
    bottom:60px;
    right:60px;
    z-index:9999999999999;
    width:50px;
    height:50px;
    border-radius: 40px;
    background-color:  #012458;
    transition: all 0.5s ease;
    opacity: 0;
}
.topbtn.on{opacity: 1;}

.topbtn img{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:30px;
}

.topbtn:hover{
    transition: all 0.5s ease;
    background-color: #151515;
}
/* top_btn */