@charset "utf-8";

/* ==========================================================================
   1. COMMON / SUB NAV LAYOUT
   ========================================================================== */
#sub-nav { height: 568px; }
#sub-nav .visual__wrap { height: 568px; overflow: hidden; }
#sub-nav .visual__wrap .nav-title { text-align: left; max-width: 1400px; width: 100%; left: 50%; bottom: 231px; text-align: center; text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.70)}
#sub-nav .visual__wrap .nav-sub-title { text-align: left; max-width: 1400px; width: 100%; left: 50%; bottom: 341px; transform: translate(-50%, -70%); color: #58DDFF; position: absolute; font-size: clamp(18px, 2vw, 20px); text-align: center; }

.nav-sub-title { letter-spacing: 0.5em;  text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.70)}

#sub-nav .nav-route { background: #fff; border-bottom: 1px solid #d1d1d1; }
#sub-nav .nav-route > ul { max-width: 1400px; width: 100%; margin: 0 auto; }
#sub-nav .nav-route > ul > li:first-child { width: auto; padding: 0 44px 0 0; }
#sub-nav .nav-route > ul > li { padding: 0 44px; height: 15px; font-size: 20px; border-right: 1px solid #000; margin: 33px 0px; width: 270px; display: inline-flex; align-items: center; justify-content: space-between; position: relative; }
#sub-nav .nav-route > ul > li:last-child { border-right: none; }

.nav-route > ul > li .pnav-ul,
.nav-route > ul > li .pnav-2ul { position: absolute; left: 0; top: 48px; border: 1px solid #ededed; background-color: #fff; z-index: 1; width: 100%; text-align: left; border-top: none; }

.nav-route > ul > li .pnav-ul li ul.pnav-1ul li,
.nav-route > ul > li .pnav-2ul li ul.pnav-2ul li { border-bottom: 1px solid #e3e3e3; border-right: 1px solid #e3e3e3; transition: 0.3s; background: #fff; height: 50px; z-index: 99; padding: 0 30px; display: flex; align-items: center; }

.nav-route > ul > li .pnav-ul li ul.pnav-1ul li a,
.nav-route > ul > li .pnav-2ul li ul.pnav-2ul li a { width: 100%; }

.nav-route > ul > li .pnav-ul li ul.pnav-1ul li:first-child,
.nav-route > ul > li .pnav-2ul li ul.pnav-2ul li:first-child { border-top: 1px solid #e3e3e3; }

.nav-route > ul > li .pnav-ul li .pnav-1a,
.nav-route > ul > li .pnav-2ul li .pnav-2a { display: block; font-size: 18px; height: 50px; line-height: 48px; font-weight: 400; cursor: pointer; padding: 0 25px; letter-spacing: -2px; position: relative; }

.nav-route > ul > li .pnav-ul li .pnav-1a > span,
.nav-route > ul > li .pnav-2ul li .pnav-2a > span { display: block; content: ''; position: absolute; background: url('../img/sub/nav-plus.png') no-repeat center; right: 15px; top: 50%; width: 16px; height: 12px; margin-top: -6px; transition: all 0.5s; }

.nav-route > ul > li .pnav-ul li .pnav-1a .on,
.nav-route > ul > li .pnav-2ul li .pnav-2a .on { transform: rotate(180deg); }

/* Common Responsive for Nav */
#sub-nav.sub2_1_bg { background-image: url('../img/sub/sub_visual_2_1.jpg'); }
#sub-nav.sub2_2_bg { background-image: url('../img/sub/sub_visual_2_2.jpg'); }
#sub-nav.sub2_3_bg { background-image: url('../img/sub/sub_visual_2_3.jpg'); }
#sub-nav.sub2_4_bg { background-image: url('../img/sub/sub_visual_2_4.jpg'); }
#sub-nav.sub2_5_bg { background-image: url('../img/sub/sub_visual_2_5.jpg'); }

@media screen and (max-width: 1440px) {
    #sub-nav.nav02 { background-size: auto; }
    #sub-nav .visual__wrap .nav-title,
    #sub-nav .visual__wrap .nav-sub-title { text-align: center; }
    #sub-nav .nav-route > ul > li { padding: 0 20px !important; }
}

@media screen and (max-width: 768px) {
    #sub-nav { height: 400px; }
    #sub-nav .visual__wrap { height: 400px; }
    #sub-nav .visual__wrap .nav-title { text-align: center; left: 50%; transform: translate(-50%, -50%); top: 70%; }
    #sub-nav .visual__wrap .nav-sub-title { text-align: center; left: 50%; transform: translate(-50%, -50%); top: 60%; }
}

@media screen and (max-width: 500px) {
    #sub-nav .visual__wrap .nav-title { text-align: left; left: calc(50% + 20px); top: 70%; }
    #sub-nav .visual__wrap .nav-sub-title { text-align: left; left: calc(50% + 20px); top: 80%; }
}


/* ==========================================================================
   2. SUB 2-1: CERTIFICATION & SLIDES
   ========================================================================== */
.sub2_1 { margin-top: clamp(40px, 4.4vw, 80px); margin-bottom: clamp(40px, 10vw, 140px); }

.sub_content2_1 { text-align: center; }
.sub_content2_1 .text_box .title { font-weight: bold; font-size: clamp(26px, 2vw, 50px); margin: 100px 0 45px 0; color: #091a2e; }
.sub_content2_1 .text_box .sub-title { font-size: clamp(18px, 2vw, 24px); font-weight: 300; line-height: 35px; }
.sub_content2_1 .text_box .sub-title > .bold { font-weight: bold; color: #091a2e; display: inline; }

.sub_content2_1 .content_box { margin-top: 67px; }
.sub_content2_1 .content_box .switch { position: relative; width: 123px; padding: 30px 0 0 35px; }
.sub_content2_1 .content_box .switch > span { color: #4089eb; font-weight: bold; position: absolute; right: 16%; top: 57%; transform: translate(-10%, -7%); }
.sub_content2_1 .content_box.blue { background-color: #e5edf8; border-radius: 35px; }
.sub_content2_1 .content_box.gray { background-color: #f7f7f7; border-radius: 35px; }
.sub_content2_1 .content_box .img_box { display: flex; align-items: center; justify-content: center; padding: 50px 80px; gap: 55px; flex-wrap: wrap; position: relative; }

.sub_content2_1 .content_box.blue .img_box > img { width: calc(50%); object-fit: contain; max-width: 677px; height: 434px; }
.sub_content2_1 .content_box.gray .img_box > img { width: calc(50%); object-fit: contain; max-width: 642px; height: 371px; }
.sub_content2_1 .content_box .detail_box { background: #fff; width: calc(50% - 55px); height: 340px; border-radius: 26px; }
.sub_content2_1 .content_box .info_box { margin: 0 80px; display: flex; }
.sub_content2_1 .content_box .info_box > div { border: 1px solid #000; border-radius: 35px; background-color: #fff; display: flex; flex: 1 1 40%; }
.sub_content2_1 .content_box .info_box p.bg { background-color: #091a2e; border-radius: 35px; color: #fff; line-height: 70px; font-size: clamp(20px, 2vw, 24px); font-weight: 600; padding-left: 0; display: block; flex: 50%; }
.sub_content2_1 .content_box .info_box p { text-align: center; font-size: clamp(18px, 2vw, 20px); font-weight: 300; padding-left: clamp(20px, 5.2vw, 100px); display: flex; gap: 17px; flex: 50%; align-items: center; line-height: 1.6em; }
.sub_content2_1 .content_box .more { color: #3b78c9; font-weight: bold; padding: clamp(22px, 2vw, 55px) 0 clamp(22px, 2vw, 55px) 0; font-size: clamp(22px, 2vw, 24px); cursor: pointer; }
.sub_content2_1 .content_box + .text_box { margin-top: 50px; }

/* Sub 2-1 Slider & Certification */
.sub2_1 .slick-slider div { height: 100%; }
.sub2_1 .slide_list .slick-slide > div,
.sub2_1 .slide_list2 .slick-slide > div { display: flex; justify-content: center; align-items: center; }
.sub2_1 .is-dragging { pointer-events: none; }
.sub2_1 .certification-wrap { height: 100%; }
.sub2_1 .certification-wrap > .inner { position: relative; height: 100%; }
.sub2_1 .certification-wrap > .img-wrap { display: none; height: 100%; justify-content: center; align-items: center; }
.sub2_1 .slide_list .slick-slide, .sub2_1 .slide_list2 .slick-slide { margin: 0 60px; transition: all ease 0.3s; }
.sub2_1 .slide_list .img, .sub2_1 .slide_list2 .img { box-sizing: border-box; padding: 0 30px; }
.sub2_1 .slide_list .img img, .sub2_1 .slide_list2 .img img { width: 100%; max-height: 490px; }
.sub2_1 .slide_list .slick-center .img, .sub2_1 .slide_list2 .slick-center .img { padding: 0; }
.sub2_1 .slide_list .slick-center .img img, .sub2_1 .slide_list2 .slick-center .img img { transform: scale(1); }
.sub2_1 .slide_list .slick-center .cer-info .title, .sub2_1 .slide_list2 .slick-center .cer-info .title { font-size: 38px; padding-top: 50px; }

.sub2_1 .inner .cer__slide-prev.slick-arrow > img,
.sub2_1 .inner .cer__slide-next.slick-arrow > img,
.sub2_1 .inner .cer__slide-prev2.slick-arrow > img,
.sub2_1 .inner .cer__slide-next2.slick-arrow > img { width: 62px; height: 133px; }

.sub2_1 .certification-wrap .slick-arrow { border-radius: 100%; position: absolute; z-index: 100; top: calc(50% - 0px); transform: translateY(-50%); cursor: pointer; background: rgb(186 186 186 / 10%); border-radius: 10px; height: 100%; width: 100%; max-width: 36px; max-height: 96px; display: flex !important; align-items: center; justify-content: center; }
.sub2_1 .certification-wrap .cer__slide-prev, .sub2_1 .certification-wrap .cer__slide-prev2 { left: 50px; }
.sub2_1 .certification-wrap .cer__slide-next, .sub2_1 .certification-wrap .cer__slide-next2 { right: 50px; }

.sub2_1 .inner .explan { position: absolute; bottom: 0; background-color: rgba(0, 0, 0, 0.67); text-align: center; width: 100%; z-index: 999; height: 150px; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 29px; }
.sub2_1 .inner .explan h5 { font-size: 2em; }
.sub2_1 .inner .explan p { font-weight: 400; }

.sub2_1 .slick-slider div .img img { object-fit: none; }
.slider-nav .slide-con, .slider-nav2 .slide-con { padding: 15px 15px 0 0; position: relative; }

/* Sub 2-1 Responsive */
@media screen and (max-width: 1440px) {
    .sub_content2_1 .content_box { flex-direction: column; padding: 0 120px; }
}
@media screen and (max-width: 1024px) {
    .sub_content2_1 .content_box.blue .img_box > img,
    .sub_content2_1 .content_box.gray .img_box > img { max-width: 632px; flex: 100%; width: 100%; }
    .sub_content2_1 .content_box .detail_box { width: 100%; height: 340px; }
    .sub2_1 .certification-wrap .slick-arrow { top: 50%; }
    .sub2_1 .slide_list .img img, .sub2_1 .slide_list2 .img img { max-height: 300px; }
    .sub_content2_1 .text_box .sub-title br { display: none; }
    
    .sub_content2_1 .content_box { overflow: hidden; min-height: auto; }
    .sub_content2_1 .content_box.blue, .sub_content2_1 .content_box.gray { border-radius: 0; }
    .sub_content2_1 .content_box .img_box { padding: 20px 40px; gap: 25px; }
    .sub_content2_1 .content_box .info_box { margin: 0 40px; }
    .sub_content2_1 .content_box .info_box p { padding-left: 0; font-size: clamp(18px, 2vw, 20px); display: flex; justify-content: center; padding: 12px 0; }
    .sub_content2_1 .content_box .info_box p.bg { border-radius: 0; padding: 0; }
    .sub_content2_1 .content_box .info_box > div { border-radius: 0; flex-direction: column; }
}
@media screen and (max-width: 768px) {
    .sub2_1 .slide_list .img img, .sub2_1 .slide_list2 .img img { max-height: 180px; }
    .sub2_1 .slick-slider div .img img { object-fit: cover; }
    .sub_content2_1 .content_box .switch { display: none; }
    .sub_content2_1 .content_box .info_box p { display: none !important; }
    .sub_content2_1 .content_box .info_box p.bg { display: block !important; }
    .sub_content2_1 .content_box .detail_box { width: 100%; height: 220px; }
    .sub_content2_1 .content_box .info_box { margin: 0; }
    .sub_content2_1 .content_box .info_box p:last-child { padding-left: 0; font-size: clamp(18px, 2vw, 20px); display: flex; justify-content: center; }
    .sub_content2_1 .text_box .title { margin: clamp(40px, 2vw, 100px) 0 clamp(20px, 2vw, 45px) 0; }
    .sub_content2_1 .content_box .img_box { gap: 20px; flex-direction: column; }
    .sub_content2_1 .content_box .img_box > img { width: 100%; }
    
    .sub2_1 .inner .explan { height: 100px; gap: 11px; }
    .sub2_1 .inner .explan h5 { font-size: 1.5em; }
    .sub2_1 .inner .explan p { font-size: 0.8em; }
    .sub2_1 .inner .cer__slide-prev.slick-arrow > img,
    .sub2_1 .inner .cer__slide-next.slick-arrow > img,
    .sub2_1 .inner .cer__slide-prev2.slick-arrow > img,
    .sub2_1 .inner .cer__slide-next2.slick-arrow > img { width: 40px; height: 90px; }
}
@media screen and (max-width: 600px) {
    .sub2_1 .inner .cer__slide-prev.slick-arrow > img,
    .sub2_1 .inner .cer__slide-next.slick-arrow > img,
    .sub2_1 .inner .cer__slide-prev2.slick-arrow > img,
    .sub2_1 .inner .cer__slide-next2.slick-arrow > img { display: none; }
    .sub2_1 .inner .explan { height: 80px; }
    .sub2_1 .inner .explan h5 { font-size: 1.2em; }
    .sub2_1 .inner .explan p { font-size: 0.6em; }
    .sub_content2_1 .content_box { padding: 0; }
}
@media screen and (max-width: 425px) {
    .sub2_1 { padding: 0; }
    .sub2_1 .inner .explan { height: 50px; gap: 5px; }
    .sub2_1 .inner .explan h5 { font-size: 1em; }
    .sub2_1 .inner .explan p { font-size: 0.5em; }
}


/* ==========================================================================
   3. SUB 2-1-1 / 2-1-2: DISTRIBUTION & HOTSPOTS
   ========================================================================== */
.dist-wrap { max-width: 1500px; margin: 0 auto; padding: clamp(30px, 5vw, 60px) 20px clamp(50px, 5vw, 100px); }
.dist-header { display: flex; align-items: center; margin-bottom: 30px; gap: 20px; }
.dist-title { font-size: 40px; font-weight: 800; color: #000; position: relative; padding-left: 25px; line-height: 1.2; }
.dist-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; background: #1f448e; border-radius: 5px; }
.dist-subtitle { font-size: 22px; color: #a9a9a9; font-weight: 400; letter-spacing: 1px; margin-top: 8px; }

/* Visual & Hotspots */
/* Visual & Hotspots */
.dist-visual { position: relative; width: 100%; height: 577px; border-radius: 20px; margin-bottom: 50px; background: #eef; }
.dist-visual img.bg-img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; }

/* Base Hotspot Style (Dot Style - Default for Sub 2-1-1) */
.hotspot { 
    position: absolute; 
    width: 14px; 
    height: 14px; 
    background: #fff; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    cursor: pointer; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); 
    transform: translate(-50%, -50%); 
    transition: transform 0.3s, background 0.3s; 
    padding: 0;
}
.hotspot .hs-icon { display: none; } /* Hide icon by default */
.hotspot .hs-num { display: none; } /* Hide number by default */

/* Active State for Dot: Expand & Show Number */
.hotspot:hover, .hotspot.active { 
    width: clamp(30px, 2vw, 45px); 
    height: clamp(30px, 2vw, 45px); 
    transform: translate(-50%, -50%); 
    background: #1f448e !important; 
    z-index: 10;
}
.hotspot:hover .hs-num, .hotspot.active .hs-num { 
    display: block !important; 
    color: #fff; 
    font-weight: 700; 
    font-size: clamp(14px,2vw,20px); 
}

/* Icon mode overrides removed to unify dot style across all pages */

/* Hotspot Positions */
.hotspot.pos-1 {left: 42%;top: 34%;}
.hotspot.pos-2 {left: 50%;top: 38%;}
.hotspot.pos-3 { left: 58%; top: 34%; }
.hotspot.pos-4 { left: 64%; top: 50%; }
.hotspot.pos-5 { left: 38%; top: 50%; }
.hotspot.pos-6 { left: 30%; top: 65%; }
.hotspot.pos-7 { left: 46%; top: 60%; }
.hotspot.pos-8 { left: 44%; top: 80%; }
.hotspot.pos-9 { left: 80%; top: 60%; }
.hotspot.pos-10 { left: 42%; top: 74%; }

/* Sub 2-1-2 Specific Hotspot Positions (Override) */
.sub2_1_2 .hotspot.pos-1 {left: 40%;top: 40%;}
.sub2_1_2 .hotspot.pos-2 {left: 48%;top: 30%;}

/* Sub 2-1-3 Specific Hotspot Positions (Override) */
.sub2_1_3 .hotspot.pos-1 {left: 30%;top: 60%;}

/* Sub 2-1-4 Specific Hotspot Positions (Override) */
.sub2_1_4 .hotspot.pos-1 {left: 52%;top: 22%;}
.sub2_1_4 .hotspot.pos-2 {left: 52%;top: 60%;}
.sub2_1_4 .hotspot.pos-3 {left: 58%;top: 36%;}

/* Sub 2-1-5 Specific Hotspot Positions (Override) */
.sub2_1_5 .hotspot.pos-1 {left: 46%;top: 38%;}


/* Detail Section */
.dist-detail { background: #fff; border-radius: 20px; padding: 48px 47px; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; box-shadow: 0 0 20px rgba(31, 68, 142, 0.2); }
.detail-header { display: flex; gap: 15px; align-items: center; width: 100%; flex-wrap: wrap; }
.sample-title-btn { display: inline-flex; justify-content: center; align-items: center; width: 200px; height: 52px; background: #1f448e; color: #fff; font-size: 25px; font-weight: 700; border-radius: 5px; padding: 10px 0; flex-shrink: 0; }
.detail-content-text { width: 100%; }
.item-title { font-size: 20px; font-weight: 700; color: #000; margin-bottom: 5px; margin-top: 20px; }
.item-title:first-child { margin-top: 0; }
.item-desc { font-size: 20px; font-weight: 400; color: #000; line-height: 1.6; margin-bottom: 0; letter-spacing: -0.8px; word-break: keep-all; }
.mobile-num { display: none; }

/* Guide Tooltip */
.guide-tooltip { position: absolute; top: 30px; right: 50px; background: #FFFFFF; padding: 15px 30px; border-radius: 20px; display: flex; align-items: center; gap: 15px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
.sub2_1_3 .guide-tooltip { right: auto; left: 50px; }
.hand-icon { width: 82px; height: 82px; background: #EEF1F7; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.guide-text { font-size: 16px; font-weight: 600; color: #333; }

/* Mobile Nav Slider (Shared mostly detailed here) */
.mobile-nav-slider { display: block; margin-bottom: 30px; padding: 0 20px; }

/* Slider enabled for all subpages */

.nav-track { display: flex; gap: clamp(10px,2vw,26px); overflow-x: auto; padding-bottom: 10px; padding-right: 20px; scrollbar-width: none; justify-content: center; }
.nav-track::-webkit-scrollbar { display: none; }
.nav-btn { flex: 0 0 50px; height: 50px; border-radius: 50%; background: #fff; border: 1px solid #ddd; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 700; color: #333; cursor: pointer; transition: all 0.3s; }
.nav-btn.active { background: #1f448e; color: #fff; border-color: #1f448e; }

/* Category Menu (Sub2_1_1, Sub2_1_2) */
.sub2-category-menu { max-width: 1500px; margin: 0 auto; padding: clamp(30px, 5vw, 60px) 20px; }
.sub2-category-menu ul { display: flex; justify-content: center; gap: 18px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.sub2-category-menu ul li {flex: 0 1 calc(100%/6 - 18px);height: 68px;}
.sub2-category-menu ul li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: #eef1f7; border-radius: 7px; font-size: 22px; font-weight: 500; color: #000; text-decoration: none; transition: all 0.3s; }
.sub2-category-menu ul li.active a, .sub2-category-menu ul li a:hover { background: #1f448e; color: #fff; font-weight: 700; }
.sub_content2_1 .grid3 { display: flex; flex-wrap: wrap; gap: 0 30px; } /* Used in sub2_1_2 */
.sub_content2_1 .grid3 .box { width: calc(100% / 3 - 30px); }
.sub_content2_1 .grid3 .box a > img { border-radius: 25px; max-height: 392px; width: 50vmin; height: 50vmin; object-fit: cover; border: 1px solid #bac7d9; }
.sub_content2_1 .grid3 .box a > img:hover { border: 10px solid #3b78c9; }
.sub_content2_1 .grid3 .box .txt-box { margin: 26px 0; }
.sub_content2_1 .grid3 .box .txt-box > p.title { font-size: clamp(22px, 2vw, 24px); font-weight: bold; padding-top: 0; }
.sub_content2_1 .grid3 .box:hover .txt-box > p.title { color: #3b78c9; }
.sub_content2_1 .grid3 .box .txt-box > p { font-weight: 200; padding-top: 10px; }
/* Hotspot Tooltip (Logo Style) */
.hs-tooltip {
    position: absolute;
    left: 60px; /* Positioned to the right of the expanded hotspot */
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    height: auto;
    min-height: 70px; /* Base height */
    padding: 15px 30px; /* Padding for pill shape */
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    white-space: normal; /* Allow wrapping */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 20;
    pointer-events: none;
    border: 1px solid #e1e1e1;
    
    display: flex;
    flex-wrap: wrap; /* Allow wrapping */
    align-items: center;
    justify-content: center;
    gap: 10px 15px; /* Reduced horizontal gap slightly */
    width: max-content;
    max-width: 450px; /* Increased to comfortably fit 3 items (100*3 + 15*2 + 60padding = 390px) */
}
.hs-tooltip span {
    font-size: 18px;
    font-weight: 800;
    color: #cc0000;
    display: block;
    font-family: 'Arial', sans-serif;
    letter-spacing: -0.5px;
    width: 100%; /* Text spans full width */
    text-align: center;
}
.hs-tooltip img {
    height: 40px;
    width: auto;
    display: block;
    object-fit: contain;
    max-width: 100px; /* Limit logo width */
    flex: 0 0 auto;
}
/* Removed has-image padding override as standard padding works for both */

.hotspot:hover .hs-tooltip,
.hotspot.active .hs-tooltip {
    opacity: 1;
    visibility: visible;
    /* left is fixed, no sliding needed or maybe slight slide for effect */
    left: 60px; 
}

/* Specific Override for Hotspot 1: Position Bottom instead of Right */
.hotspot[data-id="1"]:hover .hs-tooltip,
.hotspot[data-id="1"].active .hs-tooltip {
    left: 50%;
    top: 100%;
    transform: translate(-50%, 15px);
}

/* Responsive Tooltip */
/* Responsive Tooltip */
@media (max-width: 1200px) {
    .hs-tooltip {
        /* Allow 3 columns on tablet/laptop as well */
        max-width: 450px; 
        
        /* Laptop/Tablet: Position ABOVE hotspot to prevent covering */
        left: 50% !important;
        top: auto !important;
        bottom: 100% !important;
        transform: translate(-50%, -15px) !important; /* Move up by 15px */ 
    }
}

@media (max-width: 768px) {
    .hs-tooltip {
        /* Mobile Specific Adjustments */
        gap: 8px 15px;
        padding: 12px 20px;
        
        /* Ensure it doesn't overflow screen width too easily */
        width: max-content;
        max-width: 80vw;
    }
    .hs-tooltip img {
        height: 35px; /* Slightly smaller images */
        max-width: 80px;
    }
}

/* Sub 2-1-1/2 Responsive */
@media (max-width: 1200px) {
    .dist-detail { padding: 30px; flex-wrap: wrap; gap: 40px; }
    .detail-img { width: 100%; max-width: 500px; }
}
@media (max-width: 1024px) {
    .dist-visual { height: 400px; min-height: 300px; }
    .dist-detail { flex-direction: column; padding: 30px; }
    .sample-title-btn { width: 100%; }
    .detail-img { width: 100%; max-width: 100%; }
}
@media (max-width: 768px) {
    .dist-visual { height: auto; min-height: auto; margin-bottom: 20px; }
    .dist-visual .bg-img { position: relative; }
    .sample-title-btn { width: 100%; font-size: 20px; }
    .item-title, .item-desc { font-size: 16px; }
    .mobile-num { display: inline-block; margin-right: 5px; color: #1f448e; }

    .guide-tooltip { display: none; }
    .mobile-nav-slider { display: block; }
    .detail-header { width: 100%; }

    .sub2-category-menu ul { gap: 10px; }
    .sub2-category-menu ul li { flex: 1 1 45%; height: 50px; }
    .sub2-category-menu ul li a { font-size: 18px; }
    .sub_content2_1 .grid3 .box { flex: 0 1 calc(100% / 2 - clamp(16px, 2vw, 20px)); }
    .sub_content2_1 .grid3 .box a > img { width: auto; height: auto; }

    /* Mobile Hotspots: Now utilizing global dot style */
    /* Only overrides for icon-mode below */
    

    /* Icon mode overrides removed to unify dot style across all pages */
}

@media (max-width: 600px) {
    /* Mobile Nav Grid Fix */
    .nav-btn { flex: 0 0 38px; width: 38px; height: 38px; font-size: 14px; }
    .nav-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 0; justify-items: center; padding-right: 0; overflow-x: visible; }
}
@media (max-width: 500px) {
    .sub_content2_1 .grid3 .box { flex: 100%; }
}
@media (max-width: 425px) {
    .sub_content2_1 .grid3 .box { /* transform: scale(0.8); */ }
}


/* ==========================================================================
   4. SUB 2-2: EQUIPMENT & STRUCTURAL DESIGN
   ========================================================================== */
.equipment-wrap { max-width: 1500px; margin: 0 auto; padding: 60px 20px 100px; }
.equipment-header { margin-bottom: 60px; padding-bottom: 30px; border-bottom: 1px solid #ddd; }
.equipment-title { font-size: 40px; font-weight: 800; color: #000; position: relative; padding-left: 20px; display: inline-block; }
.equipment-title::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 13px; height: 13px; background: #1f448e; border-radius: 5px; }

.equipment-list { display: flex; flex-direction: column; gap: 40px; }
.equipment-item { display: flex; align-items: center; gap: 80px; }
.equipment-visual { width: 50%; background: #fff; border: 1px solid #e1e1e1; border-radius: 20px; padding: 20px; box-shadow: 0px 0px 20px rgba(31, 68, 142, 0.20); }
.equipment-visual .img-box { width: 100%; height: 350px; border-radius: 10px; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; }
.equipment-visual img { max-width: 100%; max-height: 100%; object-fit: contain; }
.equipment-info { width: 50%; }
.model-name { font-size: 30px; font-weight: 700; color: #000; line-height: 1.2; margin-bottom: 30px; }
.model-spec p { font-size: 22px; color: #333; margin-bottom: 10px; line-height: 1.5; }

.sub2_2 { margin-top: clamp(40px, 4.4vw, 80px); margin-bottom: clamp(40px, 10vw, 140px); }
.sub_content2 > .bg_img { background-image: url(../img/sub/sub_visual2_2.png); }
.sub_content2 > .sub2_2 > .content { display: flex; justify-content: space-around; align-items: center; margin: 50px 0; }
.sub_content2 > .sub2_2 > .content > .img_box { position: relative; display: flex; width: calc(50%); text-align: center; justify-content: center; align-items: center; }
.sub_content2 > .sub2_2 > .content > .img_box:after { content: 'Aircraft Structural Design'; position: absolute; top: 50%; left: 42%; color: #fff; width: 50px; text-align: center; display: inline-flex; font-size: clamp(28px, 2vw, 40px); font-weight: bold; transform: translate(-50%, -50%); }
.sub_content2 > .sub2_2 > .content > .img_box .round > div { font-size: clamp(18px, 2vw, 20px); display: flex; border: 1px solid #3b78c9; background-color: #fff; border-radius: 50%; width: 140px; height: 140px; text-align: center; align-items: center; justify-content: center; font-weight: bold; }
.sub_content2 > .sub2_2 > .content > .img_box > .round { position: absolute; display: flex; flex-direction: column; }

/* Round Positions */
.sub_content2 > .sub2_2 > .content > .img_box > .round > .p_12 { transform: translate(0%, 115%); }
.sub_content2 > .sub2_2 > .content > .img_box > .round > .p_1 { transform: translate(130%, 64%); }
.sub_content2 > .sub2_2 > .content > .img_box > .round > .p_3 { transform: translate(250px, 107%); }
.sub_content2 > .sub2_2 > .content > .img_box > .round > .p_5 { transform: translate(115%, 136%); }
.sub_content2 > .sub2_2 > .content > .img_box > .round > .p_7 { transform: translate(-113%, 44%); }
.sub_content2 > .sub2_2 > .content > .img_box > .round > .p_9 { transform: translate(-185%, -195%); }
.sub_content2 > .sub2_2 > .content > .img_box > .round > .p_11 { transform: translate(-138%, -430%); }

.sub_content2 > .sub2_2 > .content > .text { border-top: 1px solid rgba(0, 0, 0, 0.12); }
.sub_content2 > .sub2_2 > .content > .text > .text-group { display: flex; padding: 56px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.12); align-items: center; }
.sub_content2 > .sub2_2 > .content > .text > .text-group > .number { font-size: clamp(35px, 2vw, 50px); font-weight: bold; color: #3b78c9; }
.sub_content2 > .sub2_2 > .content > .text > .text-group > .txt { font-size: clamp(20px, 2vw, 30px); padding-left: 50px; font-weight: 300; white-space: pre-line; }
.sub_content2 > .sub2_2 .text_box .title { font-weight: bold; font-size: clamp(26px, 3.4vw, 50px); margin: clamp(40px, 4.8vw, 100px) 0 clamp(20px, 2.8vw, 45px) 0; text-align: center; }
.sub_content2 > .sub2_2 .img_box { display: flex; gap: clamp(12px, 2vw, 30px); flex-wrap: wrap; }
.sub_content2 > .sub2_2 .img_box > img { width: calc(100% / 3 - clamp(8px, 2vw, 20px)); border-radius: 26px; border: 1px solid #bac7d9; }
.sub_content2 > .sub2_2 .img_box:last-child > img { width: calc(100% / 2 - clamp(8px, 2vw, 20px)); }

.sub_con .prod-fixed2 .prod_list2 { border-radius: 60px; }
.sub_con .prod-fixed2 .prod_list_wrap2 ul li.active a { color: #3b78c9; }
.sub_con .prod-fixed2 .prod_list_wrap2 ul li a { color: #b2bdcd; font-size: clamp(20px, 1.2vw, 30px); }
.prod-fixed2 .prod_list_wrap2 ul { justify-content: center; gap: unset; margin: 18px 50px; flex-wrap: wrap; }
.prod-fixed2 .prod_list_wrap2 ul li { padding: 0 clamp(12px, 3.2vw, 55px); border-right: 1px solid #ababab; }
.prod-fixed2 .prod_list_wrap2 ul li:last-child { border-right: none; }
.prod-fixed2 .prod_list_wrap2 ul li:after { display: none; }
.prod-fixed2 .prod_list_wrap2 ul li:last-child:after { display: none; }

/* Sub 2-2 Responsive */
@media (max-width: 1440px) {
    .sub_content2 > .sub2_2 > .content { transform: scale(0.8); margin: 50px 0; gap: 100px; }
}
@media (max-width: 1024px) {
    .equipment-item { flex-direction: column; gap: 30px; align-items: flex-start; }
    .equipment-visual, .equipment-info { width: 100%; }
    .model-name { font-size: 30px; }
    .sub_content2 > .bg_img { height: 280px; }
    .sub_content2 > .sub2_2 > .content { transform: scale(1); flex-direction: column; gap: 50px; }
    .sub_content2 > .sub2_2 > .content > .img_box:after { left: 40%; }
    .sub_content2 > .sub2_2 > .content > .text { width: 90%; }
    .sub_content2 > .sub2_2 > .content > .text > .text-group { padding: 15px 10px; }
    .sub_content2 > .sub2_2 > .content > .text > .text-group > .txt { white-space: normal; }
    .sub_content2 > .sub2_2 > .content > .img_box > .round { transform: scale(0.6); }
}
@media (max-width: 860px) {
    .prod-fixed2 .prod_list2 { height: auto; }
    .prod-fixed2 .prod_list_wrap2 ul { justify-content: center; flex-wrap: wrap; gap: 8px 25px; margin: 10px 40px; }
}
@media (max-width: 768px) {
    .sub_content2 > .bg_img { height: 200px; }
    .sub_con .prod-fixed2 .prod_list_wrap2 ul li a:after { position: absolute; width: 2px; height: 25px; background: #ababab; content: ''; top: 50%; transform: translateY(-50%); left: -10px; height: 1px; width: 10px; }
    .sub_content2 > .sub2_2 > .content > .img_box:after { left: 35%; }
    .sub_content2 > .sub2_2 > .content > .img_box2:after { left: 35%; }
    .prod-fixed2 .prod_list_wrap2 ul { justify-content: center; flex-wrap: wrap; gap: 8px 25px; margin: 10px 40px; width: 100%; }
}
@media (max-width: 500px) {
    .sub_content2 > .sub2_2 .img_box > img { width: 100%; max-height: 120px; object-fit: contain; }
    .sub_content2 > .sub2_2 .img_box:last-child > img { width: 100%; max-height: 120px; object-fit: cover; }
}


/* ==========================================================================
   5. SUB 2-3: PRODUCTION & PROCESS
   ========================================================================== */
.production-wrap { max-width: 1500px; margin: 0 auto; padding: 60px 20px 100px; }
.production-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.production-item { display: flex; justify-content: center; }
.production-item .img-box { width: 100%; height: 391px; background: #fff; border: 1px solid #d1d1d1; border-radius: 11px; box-shadow: 0 0 11px rgba(0, 70, 82, 0.2); overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; transition: transform 0.3s ease; }
.production-item .img-box:hover { transform: translateY(-5px); }
.production-item .img-box img { max-width: 90%; max-height: 90%; object-fit: contain; }

.sub_content2_3 { text-align: center; }
.sub_content2_3 .text_box .title { font-weight: bold; font-size: clamp(40px, 2vw, 50px); margin: clamp(40px, 4.8vw, 100px) 0 clamp(20px, 2vw, 45px) 0; }
.sub_content2_3 .text_box .sub-title { font-size: clamp(22px, 2vw, 24px); font-weight: 300; }
.sub_content2_3 .text_box .sub-title > .bold { font-weight: bold; }
.sub_content2_3 .grid3 { display: flex; flex-wrap: wrap; gap: 20px; }
.sub_content2_3 .grid3 .box { position: relative; width: calc(100% / 3 - 30px); }
.sub_content2_3 .grid3 .box img { border-radius: 25px; width: 50vmin; min-height: 392px; object-fit: none; border: 1px solid #bac7d9; }
.sub_content2_3 .grid3 .box img:hover { border: none; filter: brightness(0.3); }
.sub_content2_3 .grid3 .box .txt-box { margin: 26px 0; }
.sub_content2_3 .grid3 .box .txt-box > p.title { font-size: clamp(22px, 2vw, 24px); font-weight: bold; padding-top: 0; }
.sub_content2_3 .grid3 .box .txt-box > p { font-weight: 200; padding-top: 10px; }
.sub_content2_3 .grid3 .box:hover .txt-box > p.title { color: #000; }
.sub_content2_3 .grid3 .box:hover::before { content: ''; position: absolute; bottom: 25%; left: 10%; font-size: 45px; font-weight: bold; color: #fff; z-index: 1; }
.sub_content2_3 .grid3 .box:hover::after { content: ''; position: absolute; top: 30px; right: 40px; background-image: url('../img/sub/sub2_3_1_img_hover.png'); z-index: 9; width: 45px; height: 45px; background-repeat: no-repeat; }

.sub_content2_3.sub2_3_1 .text_box .title { font-weight: bold; font-size: clamp(26px, 2vw, 50px); margin: clamp(40px, 4.8vw, 100px) 0 clamp(20px, 2vw, 45px) 0; }
.sub_content2_3.sub2_3_1 .content_box { display: flex; margin: 30px 0; gap: clamp(40px, 4.8vw, 100px); align-items: center; }
.sub_content2_3.sub2_3_1 .content_box .box { flex: 0 1 calc(50% - clamp(25px, 4.8vw, 50px)); height: 30rem; object-fit: none; border: 1px solid #cfd6de; border-radius: 26px; overflow: hidden; }
.sub_content2_3.sub2_3_1 .content_box .box > img { height: 100%; width: 100%; object-fit: cover; }
.sub_content2_3.sub2_3_1 .content_box .txt-box { flex: 0 1 calc(50% - clamp(25px, 4.8vw, 50px)); }
.sub_content2_3.sub2_3_1 .content_box .txt-box > table { width: 100%; }
.sub_content2_3.sub2_3_1 .content_box .txt-box tr { border-bottom: 1px solid #000; }
.sub_content2_3.sub2_3_1 .content_box .txt-box tr > th { width: 200px; }
.sub_content2_3.sub2_3_1 .content_box .txt-box tr > th, .sub_content2_3.sub2_3_1 .content_box .txt-box tr > td { padding: 20px 30px; text-align: left; font-size: clamp(16px, 2vw, 22px); white-space: nowrap; }
.sub_content2_3.sub2_3_1 .content_box .txt-box tr > td { font-weight: 200; }
.sub_content2_3.sub2_3_1 .content_box .txt-box tr > td > strong { line-height: 35px; }

.sub_content2_3 .navigation_footer { margin: 50px 0; border-top: 1px solid #000; border-bottom: 1px solid #000; display: flex; justify-content: space-between; height: 70px; align-items: center; padding: 0 70px; }
.sub_content2_3 .navigation_footer > .next > a, .sub_content2_3 .navigation_footer > div > a, .sub_content2_3 .navigation_footer > .prev > a { font-weight: bold; }
.sub_content2_3 .navigation_footer > .next img, .sub_content2_3 .navigation_footer > .prev img { padding: 10px 12px; }

/* Sub 2-3 Responsive */
@media (max-width: 1200px) {
    .production-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) {
    .sub_content2_3.sub2_3_1 .content_box { flex-direction: column; }
    .sub_content2_3.sub2_3_1 .content_box .txt-box { flex: 100%; }
}
@media (max-width: 768px) {
    .production-list { grid-template-columns: 1fr; }
    .production-item .img-box { height: 300px; }
    .sub_content2_3 .grid3 .box { transform: scale(0.9); }
    .sub_content2_3 .grid3 .box img { min-width: 50vw; min-height: auto; }
    .sub_content2_3.sub2_3_1 .content_box .txt-box { width: auto; }
    .sub_content2_3 .grid3 .box { flex: calc(100% / 2 - clamp(8px, 2vw, 12px)); transform: scale(0.9); }
}
@media (max-width: 600px) {
    .sub_content2_3 .grid3 .box { flex: 100%; }
    .sub_content2_3 .grid3 .box a { width: 100%; }
    .sub_content2_3 .grid3 .box img { width: 100%; object-fit: cover; height: 180px; }
}
@media (max-width: 500px) {
    .sub_content2_3.sub2_3_1 .content_box .txt-box tr > th { width: auto; }
    .sub_content2_3.sub2_3_1 .content_box .txt-box tr > th, .sub_content2_3.sub2_3_1 .content_box .txt-box tr > td { display: block; text-align: left; width: max-content; }
}


/* ==========================================================================
   6. SUB 4: FACILITY & INFO
   ========================================================================== */
.prod-info-line > h1 { font-size: clamp(26px, 3.4vw, 50px); text-align: center; }
.prod-info-line > h1.left { font-size: clamp(26px, 3.4vw, 50px); text-align: left; }
.sub_content4 > .bg_img { height: 280px; position: relative; overflow: hidden; margin: 87px 0; }
.sub_content4 > .bg_img > img { top: -100%; position: absolute; left: 50%; transform: translate(-50%, 0%); }
.sub_content4 .content { display: flex; align-items: center; justify-content: space-between; gap: 100px; padding: 50px 0; }
.sub_content4 .content + .content { border-top: 1px solid #e1e1e1; }
.sub_content4 .content > .text > .title { font-size: clamp(48px, 2vw, 50px); font-weight: bold; }
.sub_content4 .content > .text > .sub-title { font-size: clamp(30px, 2vw, 32px); color: #3b78c9; font-weight: bold; padding: 100px 0 60px 0; }
.sub_content4 .content > .text > p { line-height: 28px; font-size: clamp(20px, 2vw, 25px); }
.sub_content4 .content > .img_box { width: 80vmin; }

/* Sub 4-3 */
.sub4_3 .cer-info .title { font-size: 30px; font-weight: 800; text-align: center; padding-top: 30px; transition: all ease 0.7s; }
.sub4_3 .certification-wrap { background: url('../img/sub/sub4_img_bg.png') no-repeat top center; padding: 100px 0; position: relative; background-size: 700px; height: 800px; }
.sub4_3 .is-dragging { pointer-events: none; }
.sub4_3 .slide_list .slick-slide { margin: 0 60px; transition: all ease 0.3s; }
.sub4_3 .slide_list .img { box-sizing: border-box; padding: 0 30px; }
.sub4_3 .slide_list .img img { width: 100%; transform: scale(0.8); max-height: 490px; box-shadow: 1px 1px 20px #00000021; }
.sub4_3 .slide_list .slick-center .img { padding: 0; }
.sub4_3 .slide_list .slick-center .img img { transform: scale(1); }
.sub4_3 .slide_list .slick-center .cer-info .title { font-size: 38px; padding-top: 50px; }
.sub4_3 .certification-wrap .slick-arrow { border-radius: 100%; position: absolute; z-index: 100; top: calc(50% - 140px); transform: translateY(-50%); cursor: pointer; }
.sub4_3 .certification-wrap .cer__slide-prev { left: calc(0% - 0px); }
.sub4_3 .certification-wrap .cer__slide-next { right: calc(0% - 0px); }

/* Sub 4 Responsive */
@media screen and (max-width: 1660px) {
    .sub4_3 { padding: 0 20px; }
}
@media screen and (max-width: 1500px) {
    .sub4_3 .certification-wrap .slick-arrow { width: 30px; top: calc(50% - 80px); }
    .sub4_3 .certification-wrap .cer__slide-prev { left: calc(0% + 10px); }
    .sub4_3 .certification-wrap .cer__slide-next { right: calc(0% + 10px); }
}
@media screen and (max-width: 1460px) {
    .sub_content4_3 .content { padding: clamp(20px, 2.8vw, 50px) 20px; }
}
@media screen and (max-width: 1440px) {
    .sub4_3 .certification-wrap { padding: 30px 0; background-size: 600px; min-height: 660px; }
    .sub4_3 .certification-wrap .slide_list .slick-slide { margin: 0 30px; }
    .sub4_3 .certification-wrap .slide_list .slick-center .cer-info .title { padding-top: 60px; font-size: 36px; }
    .sub4_3 .certification-wrap .cer-info .title { padding-top: 15px; font-size: 28px; }
}
@media screen and (max-width: 1200px) {
    .sub4_3 .certification-wrap { height: auto; }
}
@media screen and (max-width: 1024px) {
    .sub_content4 .content > .text > p br { display: none; }
    .prod-info-line > h1 br { display: none; }
    .sub4_3 .certification-wrap { min-height: 500px; background-size: 500px; }
    .sub4_3 .certification-wrap .cer-info .title { font-size: 22px; }
    .sub4_3 .certification-wrap .slide_list .slick-center .cer-info .title { padding-top: 50px; font-size: 30px; }
    .sub4_3 .certification-wrap .slide_list .img { padding: 0 20px; }
    .sub4_3 .certification-wrap .slide_list .slick-slide { margin: 0; }
    .sub4_3 .certification-wrap .slick-arrow { top: calc(50% - 80px); }
    .sub4_3 .certification-wrap .cer__slide-prev { left: 0; }
    .sub4_3 .certification-wrap .cer__slide-next { right: 0; }
}
@media screen and (max-width: 768px) {
    .sub_content4_3 > .bg_img { height: 35vw; }
    .sub_content4_3 .content { flex-direction: column; }
    .sub_content4_3 .content > .img_box > img { max-height: 300px; }
    .sub4_3 .certification-wrap { min-height: unset; background-position: center; }
    .sub4_3 .certification-wrap .slide_list .slide-con { text-align: center; }
    .sub4_3 .certification-wrap .slide_list .cer-info .title { padding-top: 30px; font-size: 24px; }
    .sub4_3 .certification-wrap .slide_list .slick-center .cer-info .title { padding-top: 30px; font-size: 24px; }
    .sub4_3 .certification-wrap .slick-arrow { width: 25px; top: calc(50% - 60px); }
}
@media screen and (max-width: 500px) {
    .sub_content4_3 .content > .img_box > img { max-height: 160px; }
    .sub4_3 .certification-wrap { padding: 0; background-size: 350px; }
    .sub4_3 .certification-wrap .slick-arrow { width: 15px; }
    .sub4_3 .certification-wrap .cer__slide-prev { left: -10px; }
    .sub4_3 .certification-wrap .cer__slide-next { right: -10px; }
    .sub4_3 .certification-wrap .slide_list .img { padding: 0; }
    .sub4_3 .certification-wrap .slide_list .img img { max-height: unset; width: 200px; transform: unset; height: 284px; object-fit: contain; box-shadow: none; }
    .sub4_3 .certification-wrap .slide_list .slick-center .img img { max-height: unset; }
}
@media screen and (max-width: 400px) {
    .sub4_3 .certification-wrap { background-size: 280px; }
    .sub4_3 .certification-wrap .slick-arrow { top: calc(50% - 30px); }
    .sub4_3 .certification-wrap .slide_list .img img { width: 200px; height: 100%; }
}


/* ==========================================================================
   7. SUB 5-2: TABLES
   ========================================================================== */
.sub5_2 .sub_content5 .table-style { width: 100%; min-width: 520px; }
.sub5_2 .sub_content5 .table-style .thead .tr { display: flex; height: 126px; align-items: center; justify-content: space-between; border-top: 2px solid #000; }
.sub5_2 .sub_content5 .table-style .thead .tr.th { text-align: right; width: 100%; font-weight: bold; padding: clamp(12px, 2vw, 25px); border-top: 2px solid #000; }
.sub5_2 .sub_content5 .table-style .thead .tr.th > div { padding: 0; width: 100%; position: relative; display: flex; padding: 0 0 0 clamp(25px, 2vw, 35px); flex-direction: row; flex: 0 1 calc(100% / 4); justify-content: flex-start; font-size: clamp(22px, 2vw, 30px); color: #091a2e; }

.sub5_2 .sub_content5 .table-style .tr.th > div.open { display: flex; justify-content: flex-end; gap: 55px; padding-right: clamp(20px, 2.8vw, 60px); align-items: center; font-size: clamp(18px, 2vw, 20px); font-weight: 100; }
.sub5_2 .sub_content5 .table-style .tr.th > div.close { display: none; }

.sub5_2 .sub_content5 .table-style .thead .tr.th > div.close p { border: 1px solid #cdcdcd; border-radius: 50%; position: absolute; width: 50px; height: 50px; background-color: #fff; right: 0; top: -85%; position: relative; }
.sub5_2 .sub_content5 .table-style .thead .tr.th > div.close p::before { content: ''; width: 17px; height: 2px; background: #000; transform: rotate(-50deg); position: absolute; top: 50%; left: 23%; }
.sub5_2 .sub_content5 .table-style .thead .tr.th > div.close p::after { content: ''; width: 17px; height: 2px; background: #000; transform: rotate(50deg); position: absolute; top: 50%; left: 44%; }

.sub5_2 .sub_content5 .table-style .thead .tr.th > div.open p { border: 1px solid #000; border-radius: 50%; position: absolute; width: 50px; height: 50px; background-color: #fff; right: 0; top: -85%; position: relative; }
.sub5_2 .sub_content5 .table-style .thead .tr.th > div.open p::before { content: ''; width: 25px; height: 1px; background: #000; position: absolute; top: 50%; transform: translate(-50%, -50%); left: 50%; }
.sub5_2 .sub_content5 .table-style .thead .tr.th > div.open p::after { content: ''; width: 24px; height: 1px; background: #000; transform: translate(-50%, -50%) rotate(90deg); position: absolute; top: 50%; left: 50%; }

.sub5_2 .sub_content5 .table-style .tbody { display: none; }
.sub5_2 .sub_content5 .table-style .tbody .tr { border-bottom: 1px solid #000; display: flex; flex-wrap: wrap; justify-content: space-around; }
.sub5_2 .sub_content5 .table-style .tbody .tr.th { font-weight: bold; padding: clamp(12px, 2vw, 25px); }
.sub5_2 .sub_content5 .table-style .tbody .tr.th > div { width: 100%; text-align: center; flex: 0 1 calc(100% / 4); font-size: clamp(22px, 2vw, 25px); }
.sub5_2 .sub_content5 .table-style .tbody .tr > .td { padding: 15px 0; }

.sub5_2 .sub_content5 .table-style.action .thead { background-color: #e5edf9; border-bottom: 2px solid; }
.sub5_2 .sub_content5 .table-style.action .tr.th > div.open { display: none; }
.sub5_2 .sub_content5 .table-style.action .tr.th > div.close { display: flex; justify-content: flex-end; gap: 55px; padding-right: clamp(20px, 2.8vw, 60px); align-items: center; font-size: clamp(18px, 2vw, 20px); font-weight: 100; }
.sub5_2 .sub_content5 .table-style.action .tbody { display: block; }
.sub5_2 .sub_content5 .table-style .tbody .tr.th > div:nth-child(1) { padding: 0 0 0 clamp(20px, 2vw, 35px); text-align: left; }
.sub5_2 .sub_content5 .table-style .tbody .tr > .td:nth-child(1) { padding: 15px 0 15px clamp(20px, 2vw, 35px); text-align: left; }
.sub5_2 .sub_content5 .table-style .tbody .tr:last-child { border-bottom: 0px; }
.sub5_2 .sub_content5 .table-style:nth-child(3) .tr.th { border-bottom: 2px solid; }
.sub5_2 .sub_content5 .table-style:nth-child(3) .tr.tr:last-child { border-bottom: 1px solid; }

@media screen and (max-width: 500px) {
    .sub5_2 .sub_content5 { overflow: scroll; }
    .sub5_2 .x-scr-view { background: url(../img/swipe.png) no-repeat top 160px center rgba(255, 255, 255, .8); display: block; padding-top: 30px; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 999; }
}


/* ==========================================================================
   8. SUB 6: CONTACT & LOCATION
   ========================================================================== */
.sub_content6 { text-align: center; }
.sub_content6 .text_box .title { font-weight: bold; font-size: clamp(40px, 2vw, 50px); }
.sub_content6 .text_box .sub-title { font-size: clamp(22px, 2vw, 24px); font-weight: 500; }
.sub_content6 .sub6 { display: flex; flex-direction: column; margin: 96px auto; }
.sub_content6 .sub6 .content { display: flex; flex-direction: row; justify-content: space-between; }
.sub_content6 .sub6 .content .text { background-color: #f9f9f9; width: 50%; padding: 99px 92px; text-align: left; }
.sub_content6 .sub6 .content .text > .title { font-size: clamp(30px, 2vw, 35px); font-weight: bold; padding-bottom: 44px; }
.sub_content6 .sub6 .content .text > .sub-title { font-size: clamp(22px, 2vw, 24px); line-height: 30px; font-weight: 400; }


/* ==========================================================================
   9. MODAL
   ========================================================================== */
#modal { display: none; position: relative; z-index: 9; }
#modal > .bg { background-color: #000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); }
#modal > .bg > div { position: absolute; padding: 55px; box-sizing: border-box; border-radius: 15px; max-width: 40vw; width: 100%; max-height: 65vh; height: 100%; background: #fff; top: 54%; left: 50%; transform: translate(-50%, -50%); box-shadow: 7px 7px 5px rgba(0, 0, 0, 0.2); }
#modal > .bg > div > .close::before { content: ''; width: 25px; height: 5px; background: #3b78c9; transform: rotate(-45deg); position: absolute; top: 22px; right: 22px; }
#modal > .bg > div > .close::after { content: ''; width: 25px; height: 5px; background: #3b78c9; transform: rotate(45deg); position: absolute; top: 22px; right: 22px; }
#modal > .bg > div > img { object-fit: contain; height: 100%; width: 100%; }
#modal.img02 > .bg > div { max-height: 80vh; max-width: 50vw; }

@media screen and (max-width: 1200px) {
    #modal > .bg > div { max-width: 80vw; max-height: 60vw; }
    #modal.img02 > .bg > div { max-width: 80vw; max-height: 70vw; }
}
@media screen and (max-width: 500px) {
    #modal > .bg > div { max-width: 96vw; max-height: 80vw; }
    #modal.img02 > .bg > div { max-width: 90vw; max-height: 100vw; }
}