/* ==========================================================================
   main-add.css
   ========================================================================== */

header .inner,
.section .inner{clear: both;width: 1400px; max-width: 1400px;}

@media screen and (max-width : 1400px){
    header .inner,
    .section .inner{clear: both;width: 100%; max-width: 100%;padding: 0 20px;}
}

/* --------------------------------------------------------------------------
   Footer - 하단 배너 스와이퍼
   -------------------------------------------------------------------------- */
#footerswiper{overflow: hidden;}
.main_footer_banner{background-color: #f0f0f0;}
.main_footer_banner_box{padding: 10px 0 10px 150px;}
.main_footer_banner .swiper-slide a{display: block;height: 30px;}
.main_footer_banner .swiper-slide a img{width: 100%; height: 100%; object-fit: contain;}
.footerswiper_btn{position: absolute;top: calc(50% - 17px);left:0}
.footerswiper_btn a{display: inline-block;border:1px solid #d2d2d2;background-color: #fff;padding: 3px;}
.footerswiper_btn a i{font-weight: 600;font-size: 2rem;}

@media screen and (max-width : 1400px){
  .footerswiper_btn{left: 10px;}
  .main_footer_banner_box{padding: 10px 0 10px 80px;}
}

/* --------------------------------------------------------------------------
   section01
   -------------------------------------------------------------------------- */
.section{position: relative;overflow: hidden;}
#section01{ padding: 170px 0 100px; background-image: url(../../images/khmi/main/section01_bg.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; }
@media screen and (max-width : 768px){
    #section01{padding-top: 140px;}
}
#section01 .section01_top{display: flex; justify-content: space-between;gap: 40px;}

#section01 .section01_tit{line-height: 1.15;}
#section01 .section01_con{padding-left: 40px;}
#section01 .section01_tit .tit_line + .tit_line{margin-top: 30px;}
#section01 .section01_tit .tit_light,
#section01 .section01_tit .tit_bold{font-family: 'Montserrat';font-weight: 800;line-height: .78;}
#section01 .section01_tit .tit_light{display: block;font-size: 9rem;}
#section01 .section01_tit .tit_bold{font-size: 10rem;letter-spacing: -.05em;}
#section01 .section01_tit .tit_line:nth-child(1) .tit_light{color:#6C85B7;}
#section01 .section01_tit .tit_line:nth-child(1) .tit_bold{color: #000a56;}
#section01 .section01_tit .tit_line:nth-child(2) .tit_light{color:#747FD2;}
#section01 .section01_tit .tit_line:nth-child(2) .tit_bold{color: #3f00b2;}
#section01 .section01_txt{margin-top: 20px;font-family: 'ONE Mobile Title';font-size: 2rem;color: #3f3f3f;letter-spacing: -.01em;padding-left: 5px;}

/* section01 */
#section01 .section01_visual{
    position: relative;flex-shrink: 0;
    --notch-w: 262px;--notch-h: 74px;--notch-r: 26px;--card-r: 30px;
}
#section01 .visual_shadow{filter: drop-shadow(0 20px 40px rgba(0,0,0,.18));}

#section01 .main_visual_swiper{
    position: relative;width: 800px;height: 470px;overflow: hidden;border-radius: var(--card-r);
    --m-solid: linear-gradient(#000,#000);
    --m-fillet: radial-gradient(circle at bottom left, transparent var(--notch-r), #000 calc(var(--notch-r) + .5px));
    --m-corner: radial-gradient(circle at top right, #000 var(--card-r), transparent calc(var(--card-r) + .5px));
    -webkit-mask-image: var(--m-fillet),var(--m-solid),var(--m-solid),var(--m-corner),var(--m-solid),var(--m-solid),var(--m-corner);
            mask-image: var(--m-fillet),var(--m-solid),var(--m-solid),var(--m-corner),var(--m-solid),var(--m-solid),var(--m-corner);
    -webkit-mask-size:
        var(--notch-r) var(--notch-r),
        100% calc(100% - var(--notch-h) - var(--card-r)),
        calc(100% - var(--card-r)) calc(100% - var(--notch-h)),
        var(--card-r) var(--card-r),
        calc(100% - var(--notch-w) - var(--card-r)) 100%,
        var(--card-r) calc(100% - var(--card-r)),
        var(--card-r) var(--card-r);
            mask-size:
        var(--notch-r) var(--notch-r),
        100% calc(100% - var(--notch-h) - var(--card-r)),
        calc(100% - var(--card-r)) calc(100% - var(--notch-h)),
        var(--card-r) var(--card-r),
        calc(100% - var(--notch-w) - var(--card-r)) 100%,
        var(--card-r) calc(100% - var(--card-r)),
        var(--card-r) var(--card-r);
    -webkit-mask-position:
        calc(var(--notch-w) - var(--notch-r)) calc(100% + var(--notch-r) - var(--notch-h)),
        left top, right top, left calc(100% - var(--notch-h)), right top, var(--notch-w) top, var(--notch-w) 100%;
            mask-position:
        calc(var(--notch-w) - var(--notch-r)) calc(100% + var(--notch-r) - var(--notch-h)),
        left top, right top, left calc(100% - var(--notch-h)), right top, var(--notch-w) top, var(--notch-w) 100%;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
}
#section01 .main_visual_swiper .swiper-slide a{display: block;width: 100%;height: 100%;}
/* 20260914 수정*/
#section01 .main_visual_swiper .swiper-slide a:focus-visible{outline: 3px solid #fff;outline-offset: -6px;border: none;box-shadow: inset 0 0 0 3px #6d42c1;}
#section01 .main_visual_swiper .swiper-slide img{width: 100%;height: 100%;object-fit: cover;display: block;}

@supports not ((-webkit-mask-image:linear-gradient(#000,#000)) or (mask-image:linear-gradient(#000,#000))){
    #section01 .visual_control{position: static;width: auto;height: auto;padding: 14px 2px 0;}
}

#section01 .visual_control{position: absolute;left: 0;bottom: 0;z-index: 5;width: var(--notch-w);height: var(--notch-h);box-sizing: border-box;display: flex;align-items: center;gap: 20px;padding: 0 22px 0 10px;}

#section01 .visual_pagination{ display: flex; align-items: center; font-size: 1.8rem; font-weight: 700; color: #d7d6d8; }
#section01 .visual_pagination .swiper-pagination-current,
#section01 .visual_pagination .swiper-pagination-total{color: #555;}
#section01 .visual_pagination .swiper-pagination-current{margin-right: 8px;}
#section01 .visual_pagination .swiper-pagination-total{margin-left: 8px;}
#section01 .visual_sep{display: inline-block;width: 1.5px;height: 17px;margin: 0 10px;background-color: #d7d6d8;border-radius: 1px;transform: rotate(20deg);vertical-align: -3px;}
#section01 .visual_btn{display: flex;align-items: center;gap: 5px;margin-left: auto;}
#section01 .visual_btn button{ width: 40px; height: 40px; border: 0; padding: 0; border-radius: 50%; background-color: #343434; background-image: url(../../images/khmi/main/swiper_btn.png); background-repeat: no-repeat; cursor: pointer; transition: background-color .2s; }
#section01 .visual_btn button:hover,
#section01 .visual_btn button:focus-visible{background-color: #555;}
#section01 .visual_btn button:focus-visible{outline: 2px solid #6d42c1;outline-offset: 2px;}
#section01 .visual_btn .visual_prev{background-position: 15px 13px;}
#section01 .visual_btn .visual_toggle{background-position: -32px 13px;}
#section01 .visual_btn .visual_toggle[aria-pressed="false"]{background-image: url(../../images/khmi/main/swiper_play.png);background-position: center;background-size: 10px 12px;}
#section01 .visual_btn .visual_next{background-position: -76px 13px;}

/* section01 */
#section01 .section01_bottom{display: flex;align-items: flex-start;gap: 70px;margin-top: 100px;}
/* 20260914 수정*/
#section01 .section01_notice{width: 700px;max-width: 100%;height: 250px;flex-shrink: 0;display: grid;grid-template-columns: 1fr auto;grid-template-rows: auto auto 1fr;grid-template-areas: "head more" "bline bline" "list list";align-items: center;}
#section01 .notice_head{grid-area: head;padding: 0 0 0 10px;}
#section01 .notice_head .notice_tit{font-size: 3rem;color: #6d42c1;font-weight: 800;}
#section01 .more_btn{grid-area: more;display: inline-flex;align-items: center;gap: 6px;font-size: 1.4rem;color: #000;}
#section01 .more_btn img{display: block;}
#section01 .section01_notice .notice_bline{grid-area: bline;align-self: start;margin-top: 20px;border: 2px solid #333333;}

#section01 .notice_list{grid-area: list;align-self: stretch;min-height: 0;display: flex;flex-direction: column;justify-content: space-between;list-style: none;margin: 12px 0 0;padding: 0;overflow: hidden;}
#section01 .notice_item{flex: 0 0 auto;}
#section01 .notice_link{display: flex;align-items: center;padding: 0;text-decoration: none;}
#section01 .notice_link::before{content: '';flex: 0 0 auto;width: 4px;height: 4px;margin-right: 10px;border-radius: 50%;background-color: #333333;}
#section01 .notice_link .notice_txt{flex: 1 1 auto;min-width: 0;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;font-size: 1.8rem;color: #222222;}
#section01 .notice_link .notice_date{flex: 0 0 auto;margin-left: 20px;font-size: 1.5rem; color: #666666;}
#section01 .notice_link:hover .notice_txt,
#section01 .notice_link:focus-visible .notice_txt{color: #6d42c1;}
#section01 .notice_link:focus-visible{outline: 2px solid #6d42c1;outline-offset: -2px;}

/* section01 */
#section01 .section01_role{display: grid;grid-template-columns: repeat(3, 1fr);gap: 15px;flex: 1 1 auto;min-width: 0;margin: 0;padding: 0;list-style: none;}
#section01 .role_card{position: relative;height: 250px;padding: 30px 20px;background-color: #fff;border-radius: 16px;box-shadow: 0 4px 20px 0 rgba(0,0,0,.08);overflow: hidden;transition: background-color .25s ease;}
#section01 .role_tit{font-size: 2.2rem;color: #333333;font-weight: 600;line-height: 1.35;transition: color .25s ease;}
#section01 .role_more{display: inline-flex;align-items: center;gap: 6px;margin-top: 30px;font-size: 1.5rem;color: #6d42c1;text-decoration: none;transition: color .25s ease;}
#section01 .role_more_ico{display: block;width: 26px;height: 8px;background-image: url(../../images/khmi/main/icon_plus2.png);background-repeat: no-repeat;background-position: center;background-size: contain;transition: background-image .25s ease;}
#section01 .role_more:hover,
#section01 .role_more:focus-visible{text-decoration: underline;}
#section01 .role_more:focus-visible{outline: 2px solid #6d42c1;outline-offset: 2px;}

#section01 .role_card:not(.role_card_dl):hover,
#section01 .role_card:not(.role_card_dl):focus-within{background-color: #6d42c1;cursor: pointer;}
#section01 .role_card:not(.role_card_dl):hover .role_tit,
#section01 .role_card:not(.role_card_dl):focus-within .role_tit{color: #fff;}
#section01 .role_card:not(.role_card_dl):hover .role_more,
#section01 .role_card:not(.role_card_dl):focus-within .role_more{color: #fff;}
#section01 .role_card:not(.role_card_dl):hover .role_more_ico,
#section01 .role_card:not(.role_card_dl):focus-within .role_more_ico{background-image: url(../../images/khmi/main/icon_plus3.png);}
#section01 .role_card:not(.role_card_dl):focus-within .role_more:focus-visible{outline-color: #fff;}
#section01 .role_icon{position: absolute;right: 16px;bottom: 16px;width: 56px;height: auto;pointer-events: none;}

#section01 .role_card_dl{transition: background-color .25s ease;}
#section01 .role_card_dl .role_tit{transition: color .25s ease;}
#section01 .dl_btns{display: flex;gap: 5px;margin-top: 30px;}
#section01 .dl_btn{display: inline-flex;align-items: center;justify-content: center;gap: 12px;flex: 1 1 0;padding: 10px 0;background-color: #856fde;border-radius: 10px;font-size: 1.5rem;color: #fff;text-decoration: none;transition: background-color .25s ease, color .25s ease;}
#section01 .dl_btn:focus-visible{outline: 2px solid #333333;outline-offset: 2px;}
#section01 .dl_btn .dl_ico{width: 14px;height: 14px;background-image: url(../../images/khmi/main/icon_main_dwn2.png);background-repeat: no-repeat;background-position: center;background-size: contain;}
#section01 .role_card_dl:hover,
#section01 .role_card_dl:focus-within{background-color: #6d42c1;cursor: pointer;}
#section01 .role_card_dl:hover .role_tit,
#section01 .role_card_dl:focus-within .role_tit{color: #fff;}
#section01 .role_card_dl:hover .dl_btn,
#section01 .role_card_dl:focus-within .dl_btn{background-color: #fff;color: #6d42c1;}
#section01 .role_card_dl:hover .dl_ico,
#section01 .role_card_dl:focus-within .dl_ico{background-image: url(../../images/khmi/main/icon_main_dwn.png);}

/* --------------------------------------------------------------------------
   section02
   -------------------------------------------------------------------------- */
#section03{padding: 100px 0;background-color: #fff;}

/* section02 - 상단 타이틀 + 더보기 */
/* 20260914 수정: more_btn이 DOM상 스와이퍼/페이지네이션 뒤로 이동(초점 순서 변경)해도 시각적 위치는 그대로 유지하기 위해 inner를 grid로 전환 */
#section03 .inner{display: grid;grid-template-columns: minmax(0,1fr) auto;grid-template-areas: "tit more" "swiper swiper" "pagination pagination";align-items: center;}
#section03 .section02_head{grid-area: tit;}
#section03 .section02_tit{font-size: 3rem;color: #6d42c1;font-weight: 800;}
#section03 .more_btn{grid-area: more;display: inline-flex;align-items: center;justify-content: center;gap: 6px;width: 80px;height: 36px;border: 1px solid #e5e5e5;border-radius: 18px;font-size: 1.4rem;color: #000;text-decoration: none;box-sizing: border-box;transition: border-color .2s ease;}
#section03 .more_btn img{display: block;}
#section03 .more_btn:hover,
#section03 .more_btn:focus-visible{border-color: #6d42c1;}
#section03 .more_btn:focus-visible{outline: 2px solid #6d42c1;outline-offset: 2px;}

/* section02 */
#section03 .media_swiper_wrap{grid-area: swiper;min-width:0;position: relative;margin-top: 30px;} /* 20260914 수정: grid-area 추가, Swiper의 grid 최소 너비 제한 */
#section03 .media_swiper{width: 100%;overflow: hidden;}

#section03 .media_swiper_prev,
#section03 .media_swiper_next{position: absolute;top: 125px;transform: translateY(-50%);z-index: 5;flex: 0 0 auto;width: 65px;height: 65px;padding: 0;border: 0;border-radius: 50%;background-color: #5b5b5b;background-repeat: no-repeat;background-position: center;cursor: pointer;transition: background-color .2s ease;}
#section03 .media_swiper_prev{left: -90px;background-image: url(../../images/khmi/main/swiper_prev.png);}
#section03 .media_swiper_next{right: -90px;background-image: url(../../images/khmi/main/swiper_next.png);}
#section03 .media_swiper_prev:disabled,
#section03 .media_swiper_next:disabled,
#section03 .media_swiper_prev.swiper-button-disabled,
#section03 .media_swiper_next.swiper-button-disabled{background-color: #dedede;cursor: default;}
#section03 .media_swiper_prev:focus-visible,
#section03 .media_swiper_next:focus-visible{outline: 2px solid #6d42c1;outline-offset: 2px;}

#section03 .media_card{display: block;text-decoration: none;}
#section03 .media_card:focus-visible{outline: 2px solid #6d42c1;outline-offset: 4px;}
#section03 .media_thumb{width: 100%;height: 250px;border-radius: 15px;border: 1px solid #ccc;overflow: hidden;}
#section03 .media_thumb img{width: 100%;height: 100%;object-fit: cover;display: block;}

#section03 .media_badge{display: block;margin-top: 30px;font-size: 1.5rem;color: #452ecc;font-weight: 600;}
#section03 .media_tit{margin-top: 20px;font-size: 2rem;color: #222222;font-weight: 600;line-height: 1.35;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
#section03 .media_card:hover .media_tit,
#section03 .media_card:focus-visible .media_tit{color: #6d42c1;}
#section03 .media_date{display: block;margin-top: 40px;font-size: 1.5rem;color: #a8a8a8;}

/* section02 - 페이지네이션 */
#section03 .media_swiper_pagination{grid-area: pagination;display: flex;align-items: center;justify-content: center;gap: 22px;margin-top: 50px;} /* 20260914 수정*/
/* 20260914 수정*/
#section03 .media_swiper_pagination .swiper-pagination-bullet{position: relative;margin: 0;width: 18px;height: 18px;background: transparent;border-radius: 50%;opacity: 1;cursor: pointer;}
#section03 .media_swiper_pagination .swiper-pagination-bullet::before{content: '';position: absolute;top: 50%;left: 50%;width: 18px;height: 18px;border-radius: 50%;background-color: #d3d9de;transform: translate(-50%, -50%);transition: background-color .2s ease, width .2s ease, border-radius .2s ease;}
#section03 .media_swiper_pagination .swiper-pagination-bullet-active::before{width: 30px;border-radius: 9px;background-color: #856fde;}
/* 20260914 수정: 포커스 아웃라인이 active 점의 배경색(#6d42c1)과 같아서 구분이 안 되고, active pill(30px)이 outline 기준 박스(18px)보다 커서 링이 pill보다 작게 그려지던 문제
   → outline 대신 ::before(실제 보이는 모양, 원/pill)에 box-shadow로 링을 그려서 항상 실제 모양을 그대로 따라가게 함 */
#section03 .media_swiper_pagination .swiper-pagination-bullet:focus-visible{outline: none;}
#section03 .media_swiper_pagination .swiper-pagination-bullet:focus-visible::before{box-shadow: 0 0 0 2px #fff, 0 0 0 4px #111;}

/* --------------------------------------------------------------------------
   section03
   -------------------------------------------------------------------------- */
#section02{padding: 100px 0;background-color: #ecefff;}
#section02 .section03_row{display: flex;align-items: flex-start;gap: 150px;}

/* section03 - 좌측 타이틀 */
#section02 .section03_left{flex: 0 0 320px;}
#section02 .section03_tit{font-size: 5rem;color: #39378c;font-weight: 600;line-height: 1.2;}
#section02 .section03_desc{margin-top: 20px;font-size: 2rem;color: rgba(57,55,140,.8); line-height: 1.4;}

/* section03 - 우측 임무 리스트 */
#section02 .section03_right{flex: 1 1 auto;min-width: 0;}
#section02 .mission_list{display: flex;flex-direction: column;gap: 5px;margin: 0;padding: 0;list-style: none;}
#section02 .mission_card{box-sizing: border-box;height: 72px;padding: 20px;display: flex;align-items: center;background-color: #fff;border: 1px solid #d2d6ed;border-radius: 15px;box-shadow: 0 4px 14px 0 rgba(57,55,140,.08);transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;}
#section02 .mission_card:hover,
#section02 .mission_card:focus-within{transform: translateY(-4px);box-shadow: 0 12px 26px 0 rgba(57,55,140,.18);border-color: #b9c0ef;}

#section02 .mission_no{flex: 0 0 auto;display: inline-flex;align-items: center;justify-content: center;width: 70px;height: 32px;border-radius: 16px;background-color: #e4e8fb;color: #39378c;font-size: 1.4rem;transition: background-color .25s ease, color .25s ease;}
#section02 .mission_card:hover .mission_no,
#section02 .mission_card:focus-within .mission_no{background-color: #39378c;color: #fff;}
#section02 .mission_tit{flex: 1 1 auto;min-width: 0;margin: 0 0 0 20px;font-size: 2rem;color: #222222;font-weight: 600;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;transition: color .25s ease;}
#section02 .mission_card:hover .mission_tit,
#section02 .mission_card:focus-within .mission_tit{color: #39378c;}

#section02 .mission_more{flex: 0 0 auto;margin-left: 20px;display: inline-flex;align-items: center;gap: 10px;font-size: 1.5rem;color: #39378c;text-decoration: none;}
#section02 .mission_more img{display: block;transition: transform .25s ease;}
#section02 .mission_more:hover,
#section02 .mission_more:focus-visible{text-decoration: underline;}
#section02 .mission_more:focus-visible{outline: 2px solid #39378c;outline-offset: 2px;}
#section02 .mission_card:hover .mission_more img,
#section02 .mission_card:focus-within .mission_more img{transform: translateX(4px);}

@media (prefers-reduced-motion: reduce){
    #section02 .mission_card,
    #section02 .mission_no,
    #section02 .mission_tit,
    #section02 .mission_more img{transition: none;}
}

/* --------------------------------------------------------------------------
   section04
   -------------------------------------------------------------------------- */
#section04{padding: 100px 0;background-color: #fff;}
#section04 .section04_row{display: flex;align-items: flex-start;justify-content: space-between;}

#section04 .pro_video_tit{font-size: 3rem;color: #6d42c1;font-weight: 800;}

/* section04 - 좌측 Promotional Video */
/* 20260914 수정*/
#section04 .section04_left{display: grid;grid-template-columns: minmax(0,1fr) auto;grid-template-areas: "tit more" "list list";align-items: center;}
#section04 .pro_video_head{grid-area: tit;}
#section04 .more_btn{grid-area: more;display: inline-flex;align-items: center;gap: 6px;font-size: 1.4rem;color: #000;text-decoration: none;}
#section04 .more_btn img{display: block;}

#section04 .pro_video_list{grid-area: list;display: flex;gap: 30px;margin: 30px 0 0;padding: 0;list-style: none;} /* 20260914 수정*/
#section04 .pro_video_item{width: 480px;max-width: 100%;}
#section04 .pro_video_link{display: block;text-decoration: none;}
#section04 .pro_video_link:focus-visible{outline: 2px solid #6d42c1;outline-offset: 4px;}
#section04 .pro_video_thumb{width: 480px;max-width: 100%;height: 270px;border-radius: 20px;overflow: hidden;}
#section04 .pro_video_thumb img{width: 100%;height: 100%;object-fit: cover;display: block;}

#section04 .pro_video_tit2{margin-top: 20px;font-size: 2.2rem;color: #222222;font-weight: 800;line-height: 1.3;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}
#section04 .pro_video_txt{margin-top: 8px;font-size: 1.7rem;color: #333333;font-weight: 200;line-height: 1.3;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

/* section04 - 우측 SNS */
#section04 .section04_right{flex-shrink: 0;}
#section04 .sns_link{display: block;text-decoration: none;}
#section04 .sns_link:focus-visible{outline: 2px solid #6d42c1;outline-offset: 4px;}
#section04 .sns_thumb{position: relative;margin-top: 30px;width: 350px;height: 350px;border-radius: 20px;overflow: hidden;}
#section04 .sns_thumb img{width: 100%;height: 100%;object-fit: cover;display: block;}

#section04 .sns_info{position: absolute;left: 0;right: 0;bottom: 0;min-height: 75px;padding: 20px;display: flex;align-items: flex-start;gap: 10px;background-color: rgba(0,0,0,.7);box-sizing: border-box;}
#section04 .sns_ico{flex: 0 0 auto;display: block;line-height: 0;}
#section04 .sns_ico img{display: block;}
#section04 .sns_txt{flex: 1 1 auto;min-width: 0;font-size: 1.6rem;color: #ffffff;line-height: 1.35;display: -webkit-box;-webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}

/* ==========================================================================
   반응형 - 1400px 이하
   ========================================================================== */
@media screen and (max-width : 1400px){
    #section01{padding-bottom: 80px;}
    #section03{padding: 80px 0;}
    #section04{padding: 80px 0;}

    #section01 .section01_top{flex-wrap: wrap;}
    #section01 .section01_visual{width: 100%;max-width: 800px;flex-shrink: 1;--notch-w: 226px;--notch-h: 66px;--notch-r: 22px;--card-r: 22px;}
    #section01 .main_visual_swiper{width: 100%;height: auto;aspect-ratio: 800 / 470;}
    #section01 .section01_bottom{margin-top: 60px;flex-direction: column;gap: 40px;}
    #section01 .section01_notice{width: 100%;}
    #section01 .section01_role{width: 100%;}

    /* 1400px 이하부터는 트랙 폭이 줄어들어 좌우 버튼을 트랙 옆 flex 레이아웃으로 전환.
       이미지가 유동폭이라 버튼을 세로 중앙(align-items:center)에 맞추면 카드 하단 텍스트까지 포함한
       전체 카드 높이 기준으로 center가 잡혀 이미지보다 아래로 처지므로, flex-start로 상단 정렬해두고
       실제 썸네일 높이의 절반만큼 margin-top을 JS(main.js의 syncMediaNavOffset)에서 계산해 넣는다. */
    #section03 .media_swiper_wrap{display: flex;align-items: flex-start;gap: 16px;}
    #section03 .media_swiper_prev,
    #section03 .media_swiper_next{position: static;top: auto;left: auto;right: auto;transform: none;width: 50px;height: 50px;background-size: 21px 17px;}
    #section03 .media_thumb{height: auto;aspect-ratio: 450 / 250;}

    #section02{padding: 80px 0;}
    #section02 .section03_row{flex-direction: column;gap: 40px;}
    #section02 .section03_left{flex: none;width: 100%;}
    #section02 .section03_tit{font-size: 3.8rem;}
    #section02 .section03_desc{font-size: 1.7rem;}
    #section02 .section03_right{width: 100%;}

    #section04 .section04_row{flex-wrap: wrap;gap: 50px;}
    #section04 .section04_left{width: 100%;}
    #section04 .section04_right{width: 100%;}
    #section04 .pro_video_list{flex-wrap: wrap;}
    #section04 .pro_video_item{flex: 1 1 320px;width: auto;max-width: 480px;}
    #section04 .pro_video_thumb{width: 100%;max-width: 480px;height: auto;aspect-ratio: 480 / 270;}
    #section04 .sns_thumb{width: 100%;max-width: 350px;height: auto;aspect-ratio: 1 / 1;}
}

/* ==========================================================================
   반응형 - 768px 이하
   ========================================================================== */
@media screen and (max-width : 768px){
    #section01{padding-bottom: 60px;}

    #section01 .section01_con{padding-left: 0;}
    #section01 .section01_tit .tit_bold{font-size: 7rem;}
    #section01 .section01_tit .tit_light{font-size: 6.3rem;}
    #section01 .section01_tit .tit_line + .tit_line{margin-top: 8px;}
    #section01 .section01_txt{margin-top: 10px;font-size: 1.3rem;}

    /* 카드 대비 노치가 과도하게 커지므로 mask를 해제하고 컨트롤을 카드 아래 일반 흐름으로 내림 */
    #section01 .main_visual_swiper{-webkit-mask-image: none;mask-image: none;}
    #section01 .visual_control{position: static;width: auto;height: auto;margin-top: 14px;gap: 10px;padding: 0 2px;}
    #section01 .visual_pagination{font-size: 1.3rem;}
    #section01 .visual_btn{gap: 4px;}
    #section01 .visual_btn button{width: 32px;height: 32px;background-size: 81.6px 12.8px;}
    #section01 .visual_btn .visual_prev{background-position: 12px 10.4px;}
    #section01 .visual_btn .visual_toggle{background-position: -25.6px 10.4px;}
    #section01 .visual_btn .visual_toggle[aria-pressed="false"]{background-size: 8px 9.6px;}
    #section01 .visual_btn .visual_next{background-position: -60.8px 10.4px;}

    #section01 .section01_bottom{margin-top: 50px;gap: 30px;}
    #section01 .notice_head .notice_tit{font-size: 2.2rem;}
    #section01 .section01_notice .notice_bline{border-width: 1px;}
    #section01 .notice_link .notice_txt{font-size: 1.5rem;}
    #section01 .notice_link .notice_date{margin-left: 12px;font-size: 1.3rem;}

    #section01 .section01_role{grid-template-columns: 1fr;gap: 12px;}
    #section01 .role_card{display: grid;grid-template-columns: 56px 1fr;grid-template-areas: "icon title" "icon link";column-gap: 16px;align-items: center;height: auto;padding: 16px;border-radius: 12px;}
    #section01 .role_tit{grid-area: title;font-size: 1.6rem;line-height: 1.3;}
    #section01 .role_more{grid-area: link;margin-top: 6px;font-size: 1.3rem;}
    #section01 .dl_btns{grid-area: link;margin-top: 8px;}
    #section01 .dl_btn{font-size: 1.3rem;padding: 8px 0;}
    #section01 .role_icon{grid-area: icon;position: static;width: 48px;justify-self: start;}

    #section03{padding: 60px 0;}
    #section03 .section02_tit{font-size: 2.2rem;}
    #section03 .media_swiper_wrap{gap: 12px;margin-top: 20px;}
    #section03 .media_swiper_prev,
    #section03 .media_swiper_next{width: 40px;height: 40px;background-size: 17px 14px;}
    #section03 .media_thumb{border-radius: 12px;}
    #section03 .media_badge{margin-top: 20px;font-size: 1.3rem;}
    #section03 .media_tit{margin-top: 12px;font-size: 1.7rem;}
    #section03 .media_date{margin-top: 24px;font-size: 1.3rem;}
    #section03 .media_swiper_pagination{margin-top: 30px;}

    #section02{padding: 60px 0;}
    #section02 .section03_row{gap: 30px;}
    #section02 .section03_tit{font-size: 3rem;}
    #section02 .section03_desc{margin-top: 14px;font-size: 1.5rem;}
    #section02 .mission_list{gap: 10px;}
    #section02 .mission_card{height: auto;min-height: 64px;padding: 14px 16px;border-radius: 12px;}
    #section02 .mission_no{width: 60px;height: 28px;border-radius: 14px;font-size: 1.2rem;}
    #section02 .mission_tit{margin-left: 14px;font-size: 1.6rem;}
    #section02 .mission_more{margin-left: 14px;gap: 6px;font-size: 1.3rem;}

    #section04{padding: 60px 0;}
    #section04 .pro_video_tit{font-size: 2.2rem;}
    #section04 .pro_video_list{flex-direction: column;gap: 24px;}
    #section04 .pro_video_item{flex: none;max-width: 100%;}
    #section04 .pro_video_tit2{margin-top: 16px;font-size: 1.8rem;}
    #section04 .pro_video_txt{margin-top: 6px;font-size: 1.5rem;}
    #section04 .sns_thumb{margin-top: 20px;}
    #section04 .sns_info{padding: 14px;gap: 8px;}
    #section04 .sns_txt{font-size: 1.4rem;}
}

/* ==========================================================================
   반응형 - 480px 이하
   ========================================================================== */
@media screen and (max-width : 480px){
    #section01{padding-bottom: 40px;}
    #section03{padding: 40px 0;}
    #section04{padding: 40px 0;}

    #section01 .notice_link .notice_date{margin-left: 10px;}

    #section03 .section02_head{align-items: flex-start;}
    #section03 .media_swiper_wrap{gap: 8px;}
    #section03 .media_swiper_prev,
    #section03 .media_swiper_next{width: 32px;height: 32px;background-size: 14px 11px;}
    #section03 .media_tit{font-size: 1.5rem;}
    #section03 .media_swiper_pagination{gap: 8px;margin-top: 24px;} /* 20260914 수정*/

    #section01 .visual_btn button{width: 28px;height: 28px;background-size: 71.4px 11.2px;}
    #section01 .visual_btn .visual_prev{background-position: 10.5px 9.1px;}
    #section01 .visual_btn .visual_toggle{background-position: -22.4px 9.1px;}
    #section01 .visual_btn .visual_toggle[aria-pressed="false"]{background-size: 7px 8.4px;}
    #section01 .visual_btn .visual_next{background-position: -53.2px 9.1px;}

    #section01 .role_card{grid-template-columns: 48px 1fr;column-gap: 12px;padding: 14px;}
    #section01 .role_icon{width: 40px;}

    #section02{padding: 40px 0;}
    #section02 .section03_tit{font-size: 2.6rem;}
    #section02 .section03_desc{font-size: 1.4rem;}
    #section02 .mission_card{flex-wrap: wrap;row-gap: 8px;padding: 14px;}
    #section02 .mission_no{width: 56px;height: 26px;border-radius: 13px;font-size: 1.1rem;}
    #section02 .mission_tit{margin-left: 10px;font-size: 1.4rem;white-space: normal;overflow: visible;text-overflow: clip;}
    #section02 .mission_more{margin-left: 0;width: 100%;justify-content: flex-end;font-size: 1.2rem;}
}

/* 리뉴얼 동적 콘텐츠 / 기존 공통 스타일 유지 */
/* 퍼블의 weight 200은 Thin이 아닌 ExtraLight. 메인에서만 덮어쓴다. */
@font-face{font-family:'Pretendard';font-style:normal;font-weight:200;font-display:swap;src:url('../../fonts/khmi/Pretendard-ExtraLight.woff2') format('woff2');}
@font-face{font-family:'Pretendard';font-style:normal;font-weight:800;font-display:swap;src:url('../../fonts/khmi/Pretendard-ExtraBold.woff2') format('woff2');}
.thumbnail_empty{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:120px;background:#f3f3f3;color:#666;font-size:1.5rem;}
.empty_list{padding:30px 0;color:#666;}
#section01 button.role_more{border:0;background:none;padding:0;font-family:inherit;cursor:pointer;}
#section01 .role_card>form{display:contents;}
#section01 .role_more{line-height:1.5;vertical-align:top;}
/* 퍼블의 a.dl_btn과 동일한 줄 높이: PC 22.5px + 상하 padding 20px */
#section01 button.dl_btn{font-family:inherit;line-height:1.5;border:0;}
#section01 button.dl_btn:disabled{cursor:default;opacity:1;}
#section04 .section04_left{min-width:0;}
#section04 .pro_video_item{min-width:0;}
/* 퍼블의 영상 카드 480px 두 개 + 간격 30px. 더보기를 카드 오른쪽 끝에 맞춘다. */
@media screen and (min-width:1401px){#section04 .section04_left{width:990px;}}
@media screen and (max-width:768px){#section01 .role_card>form{grid-area:link;}}