/* ===========================================================
    RESPONSIVE - medi.css
    Breakpoints: 1600 / 1280 / 1024 / 780 / 360
    Base font-size: 1.5rem (1rem = 10px 기준 → 15px)
=========================================================== */
.nav-toggle, .mobile-nav { display:none; }
/* -----------------------------------------------------------
    1600px
----------------------------------------------------------- */
@media (min-width:781px) and (max-width:1400px){
    .product-title{min-height: 50px;}
    /* section05 */
    /* .product-thumb { height:auto; aspect-ratio:1 / 1; } */
}
@media (max-width:1600px){
    body{width: 100%; max-width: 100%; font-size:1.5rem;}
    .w1420, .header-inner, .main-header-inner, .section01 .inner, .section03 .history-tabs-sticky.w1420, .section03 .history-wrap.w1420, .section05 .product-slider-wrap, .section02 .card, .footer-inner.w1420 { width:100%; max-width:100%; padding-left:35px; padding-right:35px; }
    .section04 .cert-left { width:min(1420px, 100%); max-width:100%; margin-left: 4rem; box-sizing:border-box; }
    .section04 .cert-right { width:calc(100% - 40%); }
    .history-result.hr_01 { margin-top: 120px;}
    /* .section03 .timeline-tag { padding:4px 7px; border-radius:5px;} */
    /* .section03 .timeline-tag::before { display: none; } */
}
/* -----------------------------------------------------------
    1280px
----------------------------------------------------------- */
@media (max-width:1280px){
    /* .main h1 { font-size:4.6rem; } */
    .top_title { width: 100%; padding: 0 35px; }
    .section01{min-height:920px;}
    .section01 .headline { font-size:4rem; }
    .section01 .typing { font-size:1.9rem; word-break:keep-all; overflow-wrap:normal; }
    /* section02 */
    .section02 .card h3{font-size:3.6rem;}
    .section02 .card p{font-size:2.1rem;}

    /* section03 */
    /* .top_title h2, .section05 .product-head-left h2, .section04 .cert-top h2, .section06 .major-head .sub-title { font-size:2.8rem; } */
    .section03 .inner{padding-top: 40px;}
    .history-title{font-size:2.8rem;}
    .section03 .history-left { width:45%; }
    .history-year{font-size:5.2rem;}
    .timeline-item p{font-size:1.98rem;}
    .result-box .count{font-size:3rem;}
    .section03 .history-left{width: 40%;}


    /* section04 */
    .section04{padding: 0;}
    .section04 .inner{gap: 60px;}
    .section04 .cert-right { width:100%;position: relative;}
    
    .section04 .cert-left .top_title{text-align: center;}
    .section04 .cert-left { position:relative; left:auto; top:auto; width:100%; min-height: auto; display: flex; align-items: center; gap:14px; margin: 0; transform: none; }
    .section04 .inner { flex-direction:column; }
    .section05{padding-top: 0;}
    .section05 .product-slider-wrap { padding:0 35px; }
    .section06{padding: 60px 20px;}
    .major-head{margin-bottom: 60px; text-align: center;}
    .major-list{gap: 20px;}
    .section06 .inner { width:100%; }

    /* section05 */
    .section05{padding-bottom: 100px;}
}

@media (max-width:1280px) and (min-width:1025px){
    .top_title{margin-top: 90px;}
    .section03 .top_title{margin-top:0;}
}

/* -----------------------------------------------------------
    1024px - Tablet / Mobile Nav / Quick Menu
----------------------------------------------------------- */
@media (max-width:1024px){
    body.is-nav-open, body.is-quick-open { overflow:hidden; }
    body.is-quick-open::before { content:""; position:fixed; inset:0; background:rgba(0,0,0,0.35); z-index:250; }
    /* .wrap { padding-bottom:70px; } */
    .footer-top-btn-anchor { right:28px; }
    .footer-top-btn { top:calc(100vh - 148px); }

    #main,#section01,#section02,#section03,#section04,#section05,#section06{scroll-margin-top:28px;}

    .header-inner, .main-header-inner{height: 80px;}
    .header .logo img, .main-header .logo img{height: 36px;}
    .top_title h2, .section05 .product-head-left h2, .section04 .cert-top h2{font-size:4rem;}
    .w1420, .header-inner, .main-header-inner, .section01 .inner, .section03 .history-tabs-sticky.w1420, .section03 .history-wrap.w1420, .section05 .product-slider-wrap, .section02 .card, .footer-inner.w1420 { padding-left:21px; padding-right:21px; }
    /* Header */
    .header .gnb, .main-header .gnb { display:none; }
    .header .logo img, .main-header .logo img{height: 50px;}
    .nav-toggle { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; width:39px; height:39px; padding:0; border:none; border-radius:7px; background:transparent; cursor:pointer; flex-shrink:0; }
    .nav-toggle span { display:block; width:19px; height:2px; background:#111; border-radius:2px; transition:transform .3s ease, opacity .3s ease; }
    .nav-toggle--light span { background:#fff; }
    .nav-toggle.is-active span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
    .nav-toggle.is-active span:nth-child(2) { opacity:0; }
    .nav-toggle.is-active span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
    .nav-toggle.is-active span { background:#111; }
    /* Mobile Nav Drawer */
    .mobile-nav { display:block; position:fixed; inset:0; z-index:500; pointer-events:none; }
    .mobile-nav.is-open { pointer-events:auto; }
    .mobile-nav-dim { position:absolute; inset:0; background:rgba(0,0,0,0.35); opacity:0; transition:opacity .35s ease; }
    .mobile-nav.is-open .mobile-nav-dim { opacity:1; }
    .mobile-nav-panel { position:absolute; top:0; right:0; width:min(280px, 78vw); height:100%; background:#fff; box-shadow:-7px 0 28px rgba(0,0,0,0.12); transform:translateX(100%); transition:transform .4s cubic-bezier(0.4, 0, 0.2, 1); display:flex; flex-direction:column; padding:21px 18px 28px; }
    .mobile-nav.is-open .mobile-nav-panel { transform:translateX(0); }
    .mobile-nav-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:21px; padding-bottom:14px; border-bottom:1px solid #eee; }
    .mobile-nav-head strong { font-size:2rem; font-weight:700; color:#111; }
    .mobile-nav-close { width:28px; height:28px; border:none; background:transparent; font-size:4rem; line-height:1; color:#666; cursor:pointer; }
    .mobile-nav-list { display:flex; flex-direction:column; gap:4px; }
    .mobile-nav-list a { display:block; padding:12px 7px; font-size:2rem; font-weight:500; color:#222; border-radius:7px; transition:background .25s ease, color .25s ease; }
    .mobile-nav-list a:hover, .mobile-nav-list a:focus { background:#fafafa; color:#f28a00; }
    /* Main */
    .main h1 { min-height:auto; padding:0 14px;font-size:5rem }
    .main-content p { font-size:3rem; }
    .main .scroll-down { padding:0 21px; bottom:112px; }
    .arrow-down span{width:2rem;height:2rem;}
    /* title */
    .top_title { width: 100%; margin: 0; text-align: center; }
    /* Section01 */
    .section01 { min-height:auto; padding:80px 0; }
    .section01::before { top:-112px; right:-112px; width:392px; height:392px; }
    .section01::after { bottom:-84px; left:-84px; width:308px; height:308px; }
    .section01 .inner { overflow:hidden; }
    .section01 .headline { font-size:3.6rem; margin-bottom:28px; }
    .section01 .typing { font-size:2rem; line-height:1.8; min-height:auto; margin-bottom:50px; padding:0 7px; word-break:keep-all; overflow-wrap:normal; }
    .section01-list { flex-wrap:wrap; gap:25px 28px; }
    .section01-list li h3 { font-size:2rem; }
    .section01 .flow-bg__area { display: none; }
    /* Section02 */
    .section02 { min-height:auto; padding-bottom:28px; }
    .section02-title { padding-top:60px; }
    .section02 .cards { position:relative; bottom:auto; margin-top:21px; margin-bottom:0; gap:18px; }
    .section02 .card { width:100%; height:auto !important; min-height:400px; padding:25px 21px !important; }
    .section02 .card1, .section02 .card2, .section02 .card3 { height:auto !important; overflow:visible; }
    .section02 .card h3 { font-size:3.2rem; margin-bottom:14px; }
    .section02 .card p { font-size:2rem; margin-bottom:50px; word-break:keep-all; overflow-wrap:normal; }
    .section02 .card2 h3, .section02 .card3 h3 { margin-top:0; }
    .section02 .card2 h3, .section02 .card2 p, .section02 .card2 .btn-primary,
    .section02 .card3 h3, .section02 .card3 p, .section02 .card3 .btn-primary { opacity:1; }
    /* Section03 */
    .section03{padding-bottom: 30px;}
    .section03 .inner { padding-top: 0; }
    .history-tabs-sticky{top: 80px;}
    /* .section03 .history-left { position:relative; top:auto; width:100%; margin-bottom:28px; } */
    .section03 .inner{padding-top: 28px;}
    /* Section03 - tablet: step별 상단에 연혁 정보 표시 */
    .section03 .history-left { display:none; }
    .section03 .history-wrap { flex-direction:column; gap:0; }
    .section03 .history-right { width:100%; }
    .section03 .step-intro { display:block; margin-bottom:6rem; }
    .section03 .step-intro .history-title { margin-bottom:20px; }
    .section03 .history-tabs { flex-wrap:wrap; gap:7px; }
    .section03 .history-tabs .tab { flex:1; font-size:2rem; padding:20px 14px; }
    .step { min-height: auto; }
    .step.step02 { padding-top: 100px; }
    .step:last-child { padding-top: 0; }
    .timeline{padding-left: 50px;}
    .timeline .line{left: 25px;}
    /* .timeline-content{display: flex; align-items: center;} */
    .timeline-item p{font-size:2.2rem; word-break:keep-all; overflow-wrap:normal;}
    .section03 .timeline-tag{font-size:1.5rem;}
    /* .section03 .timeline-tag{position: absolute;left: 0;top: -45px;} */
    .timeline-long .line{height: calc(100% - 40px);}
    /* Section04 */
    .section04{padding: 60px 0;}
    .section04 .inner{padding-bottom: 0px; gap: 60px;}
    .section04 .cert-right { width:100%; }
    .section04::before{bottom: 0%;background-size: cover;}
    .result-box { flex-direction:column; align-items:flex-start; gap: 2px; }
    .result-box .count { font-size:3.2rem; }
    .history-title{font-size:3rem;}
    .history-year{font-size:5.6rem;}
    .history-wrap{margin:60px 0 0 0;}
    .history-result h4{margin-bottom: 20px;}
    .cert-card-title{font-size:1.8rem;}
    .cert-card-desc{font-size:1.6rem;}
    .result-box strong{font-size: 1.8rem;}
    .history-result.hr_01 { margin-top: 70px; }
    /* Section05 */
    .section05{padding: 70px 0;}
    .section05 .top_title{margin-bottom: 60px;}
    .section05 .product-head { flex-direction:column; align-items:center; gap:20px; }
    .section05 .product-desc { max-width:100%; font-size:2rem; }
    .section05 .product-prev { left:7px; }
    .section05 .product-next { right:7px; }
    .section05 .product-slider { width:100%; overflow:hidden; }
    .section05 .product-card { flex:0 0 calc((100% - 40px) / 3); }

    .product-title{font-size:2rem;}
    .product-text{font-size:1.6rem;}
    .product-btns a{font-size:1.4rem;}

    /* Section06 */
    .section06{padding: 56px 0;}
    .section06 .inner{width: 100%;}
    .major-head{margin-bottom: 50px; gap: 10px;}
    .section06 .major-list { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px;padding:14px }
    .major-item{ width:100%; min-width:0; height:85px;min-height: auto; padding:14px; }
    .major-item img{ width:160px; height:100%; object-fit:contain; }
    /* Quick Menu - Bottom Center */
    .quick-menu { top:auto; right:auto; left:50%; bottom:14px; transform:translateX(-50%); width:200px;gap: 10px; height:auto; z-index:300; }
    .quick-toggle { position:relative;left: 50% !important;transform: translate(-50%, 0) !important; top:auto; width:100%; height:auto; flex-direction:row; justify-content:center; align-items:center; gap:9px; padding:12px 18px; border-radius:999px; box-shadow:0 7px 21px rgba(242,138,0,0.35); }
    /* 열려도 닫힘 상태와 동일한 위치 유지 (style.css의 top:0, left:-3.8rem 무효화) */
    .quick-menu.is-open .quick-toggle{ position:relative; top:auto; left:50%; transform:translate(-50%, 0); width:100%; gap: 10px; }
    /* .quick-menu.is-open .quick-toggle { position:fixed; top: auto; left:50%; bottom:14px; transform:translateX(-50%); width:min(308px, calc(100% - 28px)); z-index:302; gap:9px; } */
    .quick-menu.is-open .quick-label { display:block; }
    .quick-label { writing-mode:horizontal-tb; text-orientation:unset; font-size:1.8rem; letter-spacing:0; }
    .quick-icon img { transform: scaleY(-1) rotate(90deg); }
    .quick-panel { position:fixed; left:50%; bottom:56px; width:100%; max-width:364px; height:auto; box-shadow:0 -7px 28px rgba(0,0,0,0.12); transform:translate(-50%, calc(100% + 56px)); opacity:0; transition:transform .4s cubic-bezier(0.55, 0.06, 0.68, 0.19), opacity .3s ease, visibility .4s; }
    .quick-menu.is-open .quick-panel { transform:translate(-50%, 0); opacity:1; visibility:visible; transition:transform .55s cubic-bezier(0.16, 1, 0.3, 1), opacity .35s ease, visibility .55s; }
    .quick-menu.is-open .quick-icon img { transform: scaleY(-1) rotate(-90deg); }
    .quick-panel-head strong { font-size:1.5rem; }
    .quick-panel-head p, .quick-panel-list li { font-size:1.5rem; }
    /* Footer */
    .footer-inner { flex-direction:column; align-items:flex-start; }
    .footer-top { flex-direction:column; gap:14px; }
    .footer-links { padding-top: 0; }
    .footer-info-list { justify-content:center; text-align:center; }
    .footer-info-list > li { font-size:1.5rem; }
    .footer-copy{text-align: center;}


}
/* -----------------------------------------------------------
    780px
----------------------------------------------------------- */
@media (max-width:780px){
    .header-inner, .main-header-inner{height: 60px;}
    .header .logo img, .main-header .logo img{height: 36px;}
    .section01 .headline{font-size:3.5rem; }
    .main h1 { font-size:4rem;line-height:1.45;}
    /* .top_title h2, .section05 .product-head-left h2, .section04 .cert-top h2{font-size:2.8rem;} */
    /* .section01 .headline { font-size:3.6rem; } */
    .section01 .typing { font-size:1.8rem; }
    .top_title h2, .section05 .product-head-left h2, .section04 .cert-top h2, .major-head h2 { font-size:4rem; }
    .top_title .sub-title, .section06 .sub-title { font-size:2.4rem; }
    .major-head{font-size:2.3rem; margin-bottom: 28px;}
    .major-head p{font-size:2rem; padding: 0 14px;}
    .section01-list {margin: 0 auto;width: 80%; gap:21px; }
    .section01 .flow-bg__area { display: none; }
    .section01-list li h3{font-size:1.6rem;}
    .section01-list li img{width: 80%;}
    /* .section02 .card h3 { font-size:1.9rem; } */
    /* .section02 .card p { font-size:1.5rem; margin-bottom:18px; } */
    .section02 .card { /*min-height:300px;*/ padding:30px 18px !important; }
    .section02 .btn-primary { font-size:1.8rem; padding:9px 21px; }
    /* .result-box p, .result-box strong, .history-result h4 { font-size:1.5rem; } */
    .timeline-item{position: relative;}
    .timeline-content .timeline-con-list-wrap {margin-top: 0;}
    .history-tabs-sticky{top: 60px;}
    /* section03 : 탭 2개씩 보이는 가로 슬라이드 */
    .section03 .history-tabs { flex-wrap:nowrap;justify-content: flex-start;overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
    .section03 .history-tabs::-webkit-scrollbar { display:none; }
    .section03 .history-tabs .tab{ flex:0 0 calc((100% - 7px) / 2); white-space:nowrap; font-size: 1.6rem; padding: 14px 10px;}
    .section03 .timeline-item p { font-size:2.3rem; word-break:keep-all; overflow-wrap:normal; }
    .section03 .timeline-content { display:flex; align-items: flex-start; flex-direction: column; gap:5px; width:100%; max-width:100%; }
    .section03 .timeline-tag { position:static; margin-left:0; transform:none; margin-top:0; font-size:1.8rem; padding:4px 7px; border-radius:5px; }
    .section03 .timeline-tag::before { display: none; }
    .timeline-item{margin-bottom: 40px;}
    .section03 .timeline-item p{font-size:2rem;}
    .timeline .line {top: 18px;}
    .timeline-long .line02{height: calc(100% - 30px);}
    .timeline-long .line03{height: calc(100% - 40px);}
    .section03 .step-intro{margin-bottom: 5rem;}
    .step:last-child {padding-top: 0;}
    .result-box p {font-size: 1.7rem;}
    .result-box .count {font-size: 3rem;}

    .major-item {min-height: auto;height:60px}
    .major-item img{ width:100px; height:24px; object-fit:contain; }
    .section06 .major-list { grid-template-columns:repeat(3, minmax(0, 1fr)); }
    .section04 .cert-slider { width:100%; margin-bottom: 0; }
    /* 중앙 1장 + 양옆 1/3씩 : 카드폭 = (슬라이더폭 - 간격2개) * 3/5 */
    .section04 .cert-track { width:100%; display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 48px) * 0.6); gap:24px; }
    .section04 .cert-card { flex:none; width:auto; }
    /*.section04 .cert-right { padding: 0 56px; }*/
    .section05 .top_title{margin-bottom: 30px;}
    .section05 .product-slider { width:100%; overflow:hidden; }
    .section05 .product-track { width:100%; display:grid; grid-auto-flow:column; grid-auto-columns:100%; gap:20px; }
    .section05 .product-card { flex:none; width:auto; }
    .product-thumb { height: 280px; }

    /* 패널 내부 콘텐츠는 살짝 늦게 따라오게 */
    .quick-panel-head, .quick-panel-list {
        opacity:0;
        transform:translateY(10px);
        transition:opacity .2s ease, transform .2s ease;
    }
    .quick-menu.is-open .quick-panel-head,
    .quick-menu.is-open .quick-panel-list {
        opacity:1;
        transform:translateY(0);
        transition:opacity .4s ease .12s, transform .45s cubic-bezier(0.16, 1, 0.3, 1) .12s;
    }

    .cert-card-body {
    padding: 22px;}

    .cert-card-thumb {padding: 20px;}

}

/* 480px */
@media (max-width:480px){
        .section01-list {width: 100%; gap: 10px;}
        .timeline-content .timeline-con-list-wrap .timeline-con-list{ font-size: 1.8rem;}
}

/* 420px */
@media (max-width:420px){
    .section04 .inner{gap: 12px;}
    .section03 .step-intro {margin-bottom: 1rem;}

    .product-thumb { height: 200px; }

    .timeline-long .line03 { height: calc(100% - 60px);}
}

/* 400px */
@media (max-width:400px){
    .timeline .line01 {height: calc(100% - 45px);}
    .timeline-long .line04 {height: calc(100% - 35px);}

    .history-result { padding: 28px 40px; }
    .history-result.hr_01 { margin-top: 30px; }
    .history-result h4 { font-size: 1.8rem; }
    .result-box strong { font-size: 1.7rem; }
    .result-box .count { font-size: 2.9rem; }
}

/* 390px */
@media (max-width:390px){
    .timeline-long .line02 { height: calc(100% - 50px);}
}
/* -----------------------------------------------------------
    360px
----------------------------------------------------------- */
@media (max-width:360px){
    .top_title h2, .section05 .product-head-left h2, .section04 .cert-top h2{font-size:2.6rem;}
    .top_title .sub-title, .section06 .sub-title{font-size:2rem}
    .header-inner, .main-header-inner, .section01 .inner, .section03 .history-tabs-sticky.w1420, .section03 .history-wrap.w1420, .section05 .product-slider-wrap, .section02 .card, .footer-inner.w1420 { padding-left:14px; padding-right:14px; }
    .main h1 { font-size:3rem; }
    .main-content p{font-size:2.2rem;}

    /* section01 */
    .section01 .headline{font-size:2.6rem;}
    .section01-list { width:100%;grid-template-columns:1fr 1fr; gap:14px; }
    .section01-list li{width:100%}
    .section01-list li img{width:80%}
    .section01-list li h3{font-size:1.6rem;}

    
    /* section02 */
    .section02 .card h3{font-size:2.2rem;}
    .section02 .card p{font-size:1.8rem;}
    

    /* section03 */

    .step{padding: 50px 0;}
    .section03 .step-intro{margin-bottom: 30px;}
    .history-year{font-size:4.4rem;}
    .history-title{font-size:2.1rem;}
    .section03 .timeline-item p{font-size:1.9rem;}

    .step.step02 { padding-top: 0; }


    /* section04 */
    .timeline{padding-left: 50px}
    .timeline .line{left: 25px;}
    .cert-card-title{font-size:1.8rem;}

    /* section05 */
    .section05 .product-desc{font-size:1.8rem;}
    .product-title{font-size:1.8rem;}
    .product-text{font-size:1.6rem;}
    .product-btns{display: block;}
    .product-btns a{font-size:1.4rem;width:fit-content}
    .product-btns a:nth-child(3) { margin-top:5px; }

    /* .product-thumb { height:auto; aspect-ratio:1 / 1; } */

    /* section06 */
    .major-head{padding: 0 2rem;}
    .major-head .sub-title{font-size:2.6rem;}
    .major-head p{font-size:1.8rem;}
    .product-desc, .major-head p { text-align:center; word-break:keep-all; overflow-wrap:normal; }

    .footer-info-list { flex-direction:column; align-items:center; }
    .footer-info-divider { display:none; }

    /* modal */
    .mobile-nav-panel { width:min(252px, 84vw); }
    .quick-menu { width:calc(100% - 21px); }
    .quick-menu.is-open .quick-toggle { width:100%; }
    .quick-toggle { padding:11px 14px; }
    .quick-panel { max-width:100%; }
    .section06 .major-list { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:11px; }
    .major-item img{ width:100%; height:100%; object-fit:contain; }
}