@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
:root{ --white: #ffffff; --black: #000000; --muted:#7C8794;--line:#D5DAE0;--blue:#045296;--sky:#1392ce;--blue-d:#01315E;--blue-pale:#EAF2F9;--orange:#F2901A;--sec-pd:clamp(90px,11vw,160px);--pad:clamp(20px,5vw,80px);--maxw:1440px; 
  --bg-gray: #F8F9FA;    --font-en: 'Outfit', sans-serif; --font-tit: 'GMarketSans';}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Pretendard',system-ui,sans-serif;font-size:20px;font-weight:300;line-height:1.6;color:#000;-webkit-font-smoothing:antialiased;overflow-x:hidden;word-break:keep-all}
h1{font-size:clamp(44px,8vw,132px);line-height:1.2;letter-spacing:-0.035em;font-family:var(--font-tit);font-weight:700}
h2{font-size:clamp(32px,5.4vw,80px);line-height:1.2;letter-spacing:-0.032em;font-family:var(--font-tit);font-weight:700}
h3{font-size:clamp(25px,3.4vw,50px);line-height:1.2;letter-spacing:-0.026em;font-family:var(--font-tit);font-weight:500}
h4{font-size:clamp(20px,2vw,26px);line-height:1.2;letter-spacing:-0.015em;font-family:var(--font-tit);font-weight:700}
h5{font-size:clamp(16px,1.6vw,22px);line-height:1.2;letter-spacing:-0.01em;;font-weight:700}
h6{font-size:clamp(14px,1.3vw,16px);line-height:1.2;letter-spacing:-0.005em;;font-weight:500}

h2 .blue{font-weight:700}
hr{margin:0;padding:0;border:0;background:none;height:clamp(90px,11vw,160px)}
hr.h50{margin:0;padding:0;border:0;background:none;height:50px}
a{color:#333;text-decoration:none}
b,strong{}
img{display:block;max-width:100%}
button{cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--blue);color:#fff}
p{font-weight:300}
.en{font-family:var(--font-en)}

.small{font-size:16px}
.blue{color:var(--blue)}
.upper{text-transform:uppercase}
.muted{color:var(--muted)}
.wrap{max-width:var(--maxw);width:100%;margin:0 auto;/*padding-left:var(--pad);padding-right:var(--pad)*/}
.eyebrow{display:inline-flex;align-items:center;color:var(--sky);position:relative;font-size:18px;font-weight:700;margin-bottom:20px;}
.eyebrow::before{content:"";width:8px;height:8px;background:var(--orange);border-radius:50%;position:absolute;top:-10px;left:0}
.more{display:inline-flex;align-items:center;gap:12px;margin-top:32px;transition:gap .35s cubic-bezier(.16,1,.3,1),background .35s ease,border-color .35s ease,color .35s ease;border:1px solid #ccc;padding:12px 30px;border-radius:3em;font-size:16px;}
.more:hover{background:var(--blue);border-color:var(--blue);color:#fff;gap:16px}
.more::after{content:"→"}
.more-w{display:inline-flex;align-items:center;gap:12px;margin-top:32px;transition:gap .35s cubic-bezier(.16,1,.3,1),background .35s ease,border-color .35s ease,color .35s ease;border:1px solid rgba(255,255,255,.5);padding:12px 30px;border-radius:3em;font-size:16px;color:#fff}
.more-w:hover{background:#fff;border-color:#fff;color:var(--blue);gap:16px}
.more-w::after{content:"→"}

.nop{display:none}
.nom{display:block}

@media(max-width:768px){
:root{--sec-pd:clamp(50px,11vw,160px);--pad:clamp(16px,5vw,80px)}
body { font-size: 16px; word-break:keep-all}
.wrap { padding:0 20px !important}
.board_commom{ margin: 0 auto; padding:var(--sec-pd) 20px;}
h1 { line-height: 1.4; letter-spacing: -0.03em; }
h2 {  line-height: 1.4; letter-spacing: -0.03em; margin-bottom:20px}
h3 {line-height: 1.4; }
h4 { line-height: 1.4; }
h5 {  line-height: 1.4; }
h6 {  line-height: 1.4; }

.nop{display:block}
.nom{display:none}
hr{height:60px;display:block;content:'';border:0;margin:0;padding:0}
.eyebrow{display:inline-flex;align-items:center;color:var(--sky);position:relative;font-size:18px;font-weight:700;margin-bottom:0px;}
}




/* ===== 트랜지션 ===== */
.reveal{opacity:0;transform:translateY(46px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.reveal-l{opacity:0;transform:translateX(-70px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.reveal-r{opacity:0;transform:translateX(70px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.show{opacity:1;transform:none}
.reveal-scale{opacity:0;transform:scale(1.08);transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.16,1,.3,1)}
.reveal-scale.show{opacity:1;transform:none}


/* ===== ANI 트랜지션 ===== */
.ani-up{opacity:0;transform:translateY(46px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.ani-down{opacity:0;transform:translateY(-46px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.ani-left{opacity:0;transform:translateX(-70px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.ani-right{opacity:0;transform:translateX(70px);transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.ani-scale{opacity:0;transform:scale(1.08);transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.16,1,.3,1)}
.ani-scale-up{opacity:0;transform:scale(.92);transition:opacity 1.2s ease,transform 1.4s cubic-bezier(.16,1,.3,1)}
.ani-fade{opacity:0;transition:opacity 1.2s ease}

.ani-up.show,.ani-down.show,.ani-left.show,.ani-right.show,
.ani-scale.show,.ani-scale-up.show,.ani-fade.show{opacity:1;transform:none}


.delay1{transition-delay:.1s}
.delay2{transition-delay:.2s}
.delay3{transition-delay:.3s}
.delay4{transition-delay:.4s}
.delay5{transition-delay:.5s}
.delay6{transition-delay:.6s}
.delay7{transition-delay:.7s}
.delay8{transition-delay:.8s}

@media(prefers-reduced-motion:reduce){
  .ani-up,.ani-down,.ani-left,.ani-right,.ani-scale,.ani-scale-up,.ani-fade{opacity:1;transform:none}
}

/* ===== LOGO z:200 ===== */
.brandlogo{position:fixed;top:24px;left:var(--pad);z-index:200;animation:logoIn 1s cubic-bezier(.16,1,.3,1) both;transition:opacity .3s}
.brandlogo .lw{display:block;height:60px;width:auto;transform-origin:left top;will-change:transform,opacity}
.brandlogo .lc{position:absolute;left:0;top:0;display:block;width:auto;opacity:0;will-change:opacity}

.brandlogo{pointer-events:none}
.brandlogo .lc{pointer-events:auto}
.brandlogo{position:fixed;top:24px;left:var(--pad);z-index:200;animation:logoIn 1s cubic-bezier(.16,1,.3,1) both;transition:opacity .3s,transform .4s ease}
.brandlogo.hide{transform:translateY(-140%);opacity:0}

@keyframes logoIn{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
body.menu-open .brandlogo{opacity:0!important;pointer-events:none}

/* ===== HEADER z:190 ===== */
.hdr{position:fixed;inset:0 0 auto 0;z-index:190;transition:background .5s,border-color .5s,backdrop-filter .5s}
.hdr{position:fixed;inset:0 0 auto 0;z-index:190;transition:background .5s,border-color .5s,backdrop-filter .5s,transform .4s ease}
.hdr.hide{transform:translateY(-100%)}
.hdr .bar{position:relative;display:flex;align-items:center;justify-content:flex-end;width:100%;padding:0 var(--pad);height:100px;border-bottom:1px solid transparent}
body.past-hero .hdr{background:rgba(255,255,255,.92);backdrop-filter:blur(18px)}
body.menu-open .hdr{background:var(--blue)!important;backdrop-filter:none!important}
body.past-hero .hdr .bar{border-bottom:1px solid var(--line)}
body.menu-open .hdr .bar{border-bottom:1px solid transparent!important}
.hdr .nav{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:4px;transition:opacity .3s;font-weight:700}
.hdr .nav .item{position:relative}
.hdr .nav .item > a{display:block;padding:32px 24px;color:#fff;transition:color .3s;;;font-size:20px}
body.past-hero .hdr .nav .item > a{color:var(--black)}
body.menu-open .hdr .nav{opacity:0!important;pointer-events:none}
.hdr .nav .item:hover > a{color:rgba(255,255,255,.7)}
body.past-hero .hdr .nav .item:hover > a{color:var(--blue)}
.hdr .nav .drop{position:absolute;top:74px;left:50%;transform:translateX(-50%) translateY(8px);min-width:210px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 26px 54px -26px rgba(20,40,70,.32);opacity:0;visibility:hidden;transition:opacity .26s,transform .26s,visibility 0s .26s}
.hdr .nav .item:hover .drop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition:opacity .26s,transform .26s,visibility 0s}

.hdr .nav .drop a{display:flex;align-items:center;gap:9px;padding:7px 13px;border-radius:9px;color:var(--black);transition:.2s;font-size:16px;font-weight:300}
.hdr .nav .drop a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange);opacity:0;transition:.2s}
.hdr .nav .drop a:hover{background:var(--blue-pale);color:var(--blue)}
.hdr .nav .drop a:hover::before{opacity:1}
.hdr .right{display:flex;align-items:center;gap:28px;color:#fff}
body.past-hero .hdr .right{color:var(--black)}
body.menu-open .hdr .right{color:#fff!important}
.hdr .right .lang{position:relative;display:flex;align-items:center;gap:7px;font-weight:bold;}
.hdr .right .lang svg{width:28px;height:28px}
.hdr .right .lang .cv{width:10px;height:10px}
.hdr .right .lang .menu{position:absolute;top:30px;right:0;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;min-width:96px;box-shadow:0 20px 40px -20px rgba(20,40,70,.3);opacity:0;visibility:hidden;transition:.24s}
.hdr .right .lang:hover .menu{opacity:1;visibility:visible}
.hdr .right .lang .menu a{display:block;padding:9px 12px;border-radius:7px;color:var(--black)}
.hdr .right .lang .menu a:hover{background:var(--blue-pale);color:var(--blue)}
.hdr .right .burger{display:flex;flex-direction:column;gap:10px;padding:4px;cursor:pointer}
.hdr .right .burger i{display:block;height:2px;background:currentColor;transition:transform .35s,width .35s}
.hdr .right .burger i:nth-child(1){width:80px}
.hdr .right .burger i:nth-child(2){width:100px}
body.menu-open .hdr .right .burger i:nth-child(1){transform:translateY(6px) rotate(45deg);width:30px}
body.menu-open .hdr .right .burger i:nth-child(2){transform:translateY(-6px) rotate(-45deg);width:30px}







/* ===== FULL MENU z:180 ===== */
.fullmenu{position:fixed;inset:0;z-index:180;background:var(--blue);color:#fff;opacity:0;visibility:hidden;transform:translateY(-16px);transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1),visibility .5s;display:flex;align-items:center;overflow-y:auto}
body.menu-open .fullmenu{opacity:1;visibility:visible;transform:none}
body.menu-open{overflow:hidden}
.fullmenu .inner{width:100%;padding:0 5%}
.fullmenu .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:clamp(30px,4vw,70px)}
.fullmenu .col h4{font-size:clamp(16px,1.6vw,22px);margin-bottom:clamp(22px,3vh,36px);padding-bottom:clamp(16px,2vh,24px);border-bottom:1px solid rgba(255,255,255,.24)}
.fullmenu .col a{display:block;font-size:clamp(14px,1.3vw,18px);color:#CFE0F0;margin-bottom:clamp(12px,1.6vh,20px);transition:color .2s,padding .25s}
.fullmenu .col a:hover{color:#fff;padding-left:10px}



@media(max-width:768px){
.hdr .nav{display:none}
.hdr .right .burger i:nth-child(1){width:30px}
.hdr .right .burger i:nth-child(2){width:50px}


.brandlogo{height:60px}
.fullmenu .grid{display:flex;flex-direction:column;gap:0}
.fullmenu .col{border-bottom:1px solid rgba(255,255,255,.15)}
.fullmenu .col h4{margin:0;padding:18px 0;border-bottom:none;display:flex;justify-content:space-between;align-items:center;cursor:pointer}
.fullmenu .col h4::after{content:"+";font-size:20px;transition:transform .3s}
.fullmenu .col.active h4::after{transform:rotate(45deg)}
.fullmenu .col div.mobile-sub{max-height:0;overflow:hidden;transition:max-height .3s ease;padding-left:12px}
.fullmenu .col.active div.mobile-sub{max-height:500px}

.hdr .nav,.hdr .right{display:none}
.brandlogo .lw{transform:none!important}
.brandlogo .lw{height:40px}
.hero{height:auto}
.hero .sticky{position:static;height:100svh}
.hero .tag-en{display:none}
.hero .frame{inset:0!important;border-radius:0!important;top:auto;left:auto;right:auto;bottom:auto}
.hero .stmt{opacity:1!important;bottom:12vh;right:var(--pad);left:var(--pad)}
.hero .cue{display:none}
.hdr .right{display:flex;align-items:center;gap:16px}
.hdr .right .lang{display:flex}
.hdr .right .lang span{display:none}
}








/* ===== FOOTER ===== */
footer{background:var(--blue-d);color:var(--white);;padding:120px 5% 40px;font-size:16px}
.footer-top{border-bottom:1px solid #173F66;padding-bottom:80px;margin-bottom:40px;display:flex;justify-content:space-between;align-items:center}
.footer-top h2{color:var(--white)}
.contact-btn{width:120px;height:120px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;color:var(--white);transition:transform .3s}
.contact-btn i{font-size:60px}
.contact-btn:hover{transform:scale(1.1)}

.footer-addr{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-bottom:44px;border-bottom:1px solid #173F66;margin-bottom:40px}
.footer-addr-col{display:flex;flex-direction:column;gap:14px}
.footer-addr-label{font-weight:bold;font-size:1.2em}
.footer-addr-col p{}

.footer-bottom{display:flex;justify-content:space-between;align-items:flex-end}
.footer-contact{margin-bottom:10px}
.footer-copy{color:#7E9AB6}
.footer-info em{color:#4A6D8F;margin:0 10px;font-style:normal}
.footer-right{display:flex;flex-direction:column;align-items:flex-end;gap:20px}
.footer-privacy{color:var(--white)}
.sns-links{display:flex;gap:20px;color:var(--white);font-size:30px}
.sns-links a{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .3s;color:var(--white)}
.sns-links a:hover{color:var(--blue-d);background:var(--white)}


.contact-btn { font-size: 60px; width: 120px; height: 120px; border-radius: 50%; background: var(--blue); display: flex; align-items: center; justify-content: center; color: var(--white); transition: transform 0.3s; }
.contact-btn:hover { transform: scale(1.1); }

.totop{position:fixed;right:var(--pad);bottom:12%;width:80px;height:80px;border-radius:50%;background:var(--sky);color:#fff;display:flex;align-items:center;justify-content:center;z-index:150;opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .3s,transform .3s,visibility .3s;box-shadow:0 14px 30px -12px rgba(0,0,0,.35)}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{background:var(--blue)}


/* ===== RESPONSIVE ===== */
@media(max-width:768px){
footer{padding:60px 5% 30px;font-size:14px}
.footer-top{flex-direction:column;align-items:flex-start;gap:20px;padding-bottom:20px;margin-bottom:20px}
.footer-addr{grid-template-columns:1fr;gap:24px;padding-bottom:10px;margin-bottom:10px}
.footer-bottom{flex-direction:column;align-items:flex-start;gap:30px}
.footer-right{align-items:flex-start}
.contact-btn{display:none!important}

.foot .top{grid-template-columns:1fr 1fr}
.foot .brand{grid-column:1/-1}


}


.privacy-modal { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 9999; align-items: center; justify-content: center; }
.privacy-modal.show { display: flex; }
.privacy-modal-content { background: #fff; width: 90%; max-width: 600px; max-height: 80vh; border-radius: 12px; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.privacy-modal-header { padding: 20px 24px; border-bottom: 1px solid var(--line, #ddd); display: flex; justify-content: space-between; align-items: center; }
.privacy-modal-header h3 { margin: 0; font-size: 1.25rem; font-weight: 700; }
.privacy-close-btn { background: none; border: none; font-size: 28px; cursor: pointer; color: #666; line-height: 1; }
.privacy-modal-body { padding: 24px; overflow-y: auto; font-size: 14px; line-height: 1.6; color: var(--text-main, #333); }
.privacy-modal-body h4 { margin-top: 20px; margin-bottom: 8px; font-size: 1rem; color: var(--blue, #01315E); }
.privacy-modal-body ul { padding-left: 20px; margin: 8px 0; }
@media(prefers-reduced-motion:reduce){*{animation:none!important}.reveal,.reveal-l,.reveal-r{opacity:1;transform:none}}




/* ===== 서브 전용 ===== */
.sub-hero{position:relative;height:220vh}
.sub-hero-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:#fff}
.sub-hero-txt{position:absolute;left:0;right:0;z-index:3;text-align:center;will-change:top}
.sub-hero-txt h1{font-size:clamp(40px,6vw,88px);margin-bottom:20px;color:var(--black);transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,1,.3,1),color .35s ease}
.sub-hero .bread{display:flex;align-items:center;justify-content:center;gap:10px;transition:opacity 1s ease,transform 1.1s cubic-bezier(.16,1,.3,1),color .35s ease}
.sub-hero .bread svg{display:block}
.sub-hero .bread span{transition:color .35s ease}
.sub-hero .bread .cur{color:var(--black);transition:color .35s ease}

.sub-hero-frame{position:absolute;top:clamp(380px,54vh,520px);left:var(--pad);right:var(--pad);bottom:0;border-radius:26px;overflow:hidden;will-change:top,left,right,border-radius;z-index:2}
.sub-hero-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sub-hero-ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,20,45,0) 40%,rgba(0,20,45,.55));opacity:0;transition:opacity .35s ease}

body.sub-hero-dark .sub-hero-txt h1{color:#fff}
body.sub-hero-dark .sub-hero .bread{color:rgba(255,255,255,1)}
body.sub-hero-dark .sub-hero .bread .cur{color:#fff}
body.sub-hero-dark .sub-hero .bread span{color:rgba(255,255,255,1)}
body.sub-hero-dark .sub-hero-ov{opacity:1}


.sub-intro{padding:var(--sec-pd) 0 100px 0;text-align:center}


@media(max-width:768px){
.sub-hero{height:auto}
.sub-hero-sticky{position:static;height:auto;padding-bottom:40px}
.sub-hero-txt{position:static;padding-top:clamp(120px,18vh,160px)}
.sub-hero-frame{position:relative;top:0!important;left:0!important;right:0!important;height:30vh;margin-top:15px;border-radius:0}
.sub-intro{padding:40px 0 !important;}
}





/***사업분야 하이엔드*********/

.sub-item .perf-row{display:flex;flex-direction:column;gap:clamp(24px,3vw,40px)}
.sub-item .img-row{display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);margin-top:clamp(24px,3vw,40px)}
.sub-item .perf-tbl table{width:100%;border-collapse:collapse}
.sub-item .perf-tbl th,.sub-item .perf-tbl td{padding:16px 20px;border:1px solid var(--line);text-align:center}
.sub-item .perf-tbl thead th{background:var(--blue);color:var(--white)}
.sub-item .perf-tbl tbody th{background:var(--blue-pale);color:var(--blue)}
.sub-item .perf-imgs{display:flex;flex-direction:column;gap:16px}
.sub-item .perf-imgs img{border:1px solid var(--line);border-radius:12px;flex:1;object-fit:cover;padding:60px;background:#f4f5f9}
.sub-item .img-row img{border:1px solid var(--line);border-radius:12px;padding:60px}

.sub-item .tit4{margin-bottom:30px}
.sub-item .icon-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,32px);margin-bottom:150px;text-align:center;padding: 60px 0;border:1px solid var(--line);border-radius:12px}
.sub-item .icon-card .icon{width:64px;height:64px;margin:0 auto 16px}
.sub-item .icon-card .icon svg{width:80px;height:80px}
.sub-item .icon-card h5{margin-bottom:10px}





@media(max-width:768px){
.sub-item .perf-row,.sub-item .img-row{grid-template-columns:1fr}
.sub-item .icon-cards{grid-template-columns:1fr 1fr;margin-bottom:60px}
.sub-item .perf-imgs img{border:1px solid var(--line);border-radius:12px;flex:1;object-fit:cover;padding:0px}
.sub-item .img-row img{border:1px solid var(--line);border-radius:12px;padding:0px}
.sub-item .tit4{margin-bottom:20px}
}



.sub-item{padding:0 0 var(--sec-pd) 0;}
.sub-item .head span{display:block;margin-bottom:16px}
.sub-item .head h4{border-bottom:2px solid #000;padding-bottom:30px;margin-bottom:50px}

.sub-item .sub-block{margin-bottom:clamp(70px,8vw,110px);padding-bottom:clamp(40px,5vw,64px);x}
.sub-item .sub-block:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}

.sub-item .row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);align-items:center;margin-bottom:clamp(40px,5vw,80px)}
.sub-item .media{border-radius:16px;overflow:hidden;}
.sub-item .media figcaption{background:var(--sky);color:#fff;text-align:center;font-weight:bold;font-size:1.2em;padding:20px 0}
.sub-item .media img{width:100%;display:block}
.sub-item .pts{list-style:none;margin-bottom:50px;}
.sub-item .pts li{position:relative;padding-left:20px;margin-bottom:12px}
.sub-item .pts li::before{content:"";position:absolute;top:15px;left:0;background:var(--blue);width:3px;height:3px;}

.sub-item .flow{display:flex;justify-content:center;max-width:var(--maxw);margin:0 auto clamp(50px,6vw,80px);gap:4px}
.sub-item .flow-step{position:relative;flex:1;min-width:0;margin-left:clamp(-10px,-1.4vw,-4px)}
.sub-item .flow-step:first-child{margin-left:0}
.sub-item .arrow{position:absolute;left:100%;top:50%;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:0 4px 14px -4px rgba(20,40,70,.3);display:flex;align-items:center;justify-content:center;z-index:5;transform:translate(-50%,-50%)}
.sub-item .arrow i{display:block;width:7px;height:7px;border-top:2px solid var(--blue);border-right:2px solid var(--blue);transform:rotate(45deg);animation:arrowMove 1.4s ease-in-out infinite}
@keyframes arrowMove{0%,100%{transform:rotate(45deg) translate(0,0)}50%{transform:rotate(45deg) translate(2px,-2px)}}
.sub-item .circle{position:relative;width:100%;height:100%;aspect-ratio:1/1;border-radius:50%;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:0 6px 20px -8px rgba(20,40,70,.25)}
.sub-item .circle .bg{position:absolute;inset:0;background-size:cover;background-position:center;transform:scale(1);transition:transform .5s cubic-bezier(.16,1,.3,1)}
.sub-item .circle:hover .bg{transform:scale(1.15)}
.sub-item .circle .ov{position:absolute;inset:0;background:rgba(0,20,45,.45);transition:background .4s ease}
.sub-item .circle:hover .ov{background:rgba(0,20,45,.7)}
.sub-item .circle .num,.sub-item .circle em{position:relative;z-index:2;color:#fff;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.sub-item .circle:hover .num,.sub-item .circle:hover em{transform:scale(1.5)}
.sub-item .circle .num,.sub-item .circle em{position:relative;z-index:2;color:#fff}
.sub-item .circle .num{margin-bottom:6px}
.sub-item .circle em{font-style:normal}


.sub-item .box{border:1px solid var(--line);border-radius:12px;padding:50px 50px 0 50px}
.sub-item .method-imgs{display:flex;gap:12px}
.sub-item .method-imgs img{flex:1;border:1px solid var(--line);border-radius:8px;padding:30px}
.sub-item .tbl .highlight{margin-top:20px}

.sub-item .device-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px);margin-top:40px;align-items:stretch}
.sub-item .device-row .img-box{border:1px solid var(--line);border-radius:12px;display:flex;align-items:center;justify-content:center;padding:24px;background:var(--white)}
.sub-item .device-row img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}



@media(max-width:768px){
.sub-item .box{border:1px solid var(--line);border-radius:12px;padding:20px 20px 0 20px;margin-bottom:60px}
.sub-item .flow{flex-wrap:wrap}
.sub-item .flow-step{margin-left:0;flex:0 0 45%}
.sub-item .arrow{display:none}
.sub-item .row{display:flex;flex-direction:column;gap:20px}
.sub-item .sub-block{margin-bottom:40px;padding-bottom:30px}
.sub-item .method-imgs img{flex:1;border:1px solid var(--line);border-radius:8px;padding:0px}
.sub-item .device-row{grid-template-columns:1fr}
.sub-item .device-row .img-box{padding:0}
}


.sub-item .mkt{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(30px,4vw,56px);align-items:start}
.sub-item .mkt-charts{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px)}
.sub-item .mkt-charts figure{;border-radius:12px;overflow:hidden}
.sub-item .mkt-charts img{width:100%;display:block}
.sub-item .mkt-charts .src{padding:10px 14px;color:var(--muted-2)}
.sub-item .mkt-side{display:flex;flex-direction:column;height:100%}
.sub-item .mkt-side .pts{margin-bottom:clamp(24px,3vw,36px)}
.sub-item .mkt-side .media{border-radius:16px;overflow:hidden;;margin-top:auto}
.sub-item .mkt-side .media img{width:100%;display:block}

@media(max-width:768px){
.sub-item .mkt{grid-template-columns:1fr}
.sub-item .mkt-charts{grid-template-columns:1fr 1fr}
}


/***sec2*********/
.sub-item-alt{background:var(--blue-pale);;padding:var(--sec-pd) 0 var(--sec-pd)  0}
.sub-item .lead{margin-bottom:clamp(30px,4vw,48px)}
.sub-item .tbl{overflow-x:auto}
.sub-item .tbl table{width:100%;border-collapse:collapse;background:#fff;;overflow:hidden}
.sub-item .tbl th,.sub-item .tbl td{padding:16px 20px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.sub-item .tbl thead th{background:var(--blue);color:#fff}
.sub-item .tbl tbody tr:last-child td{}
.sub-item .tbl tbody td:first-child{color:var(--black);white-space:nowrap}
.sub-item .tbl td:nth-child(1){font-weight:bold}



/*********sec3****************/
.sub-epd{padding:var(--sec-pd) 0}
.sub-epd .head span{display:block;margin-bottom:16px}
.sub-epd .head h4{border-bottom:2px solid #000;padding-bottom:30px;margin-bottom:50px}
.sub-epd .sub-block{margin-bottom:clamp(70px,8vw,110px);padding-bottom:clamp(40px,5vw,64px);border-bottom:1px solid var(--line)}
.sub-epd .sub-block:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
.sub-epd .row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);align-items:start;margin-bottom:clamp(40px,5vw,64px)}
.sub-epd .media{position:relative;border-radius:16px;overflow:hidden;border:1px solid var(--line);width:100%}
.sub-epd .media img{width:100%;display:block}
.sub-epd .media figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 20px;color:var(--black);font-size:16px}
.sub-epd .txt .media{margin-top:clamp(20px,2.5vw,32px)}
.sub-epd .pts{list-style:none}
.sub-epd .pts li{position:relative;padding-left:20px;margin-bottom:12px}
.sub-epd .pts li::before{content:"·";position:absolute;left:0;color:var(--blue)}
.sub-epd .tbl{overflow-x:auto}
.sub-epd .tbl table{width:100%;border-collapse:collapse;background:#fff;overflow:hidden}
.sub-epd .tbl th,.sub-epd .tbl td{padding:16px 20px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.sub-epd .tbl thead th{background:var(--blue);color:#fff}
.sub-epd .tbl tbody tr:last-child td{}
.sub-epd.tbl td:nth-child(1){font-weight:bold}

.number{background:var(--sky);width:50px;height:50px;border-radius:100%;color:#fff;font-family:'Outfit',sans-serif;display:flex!important;align-items:center;justify-content:center;font-weight:bold}
@media(max-width:768px){
.sub-epd .row{grid-template-columns:1fr}
}

/******게시판 공통버튼*****/
.btn_skin{background:#fff;display:inline-flex;align-items:center;gap:10px;color:#000;text-decoration:none;font-size:16px;font-family:'Outfit',sans-serif;position:relative;padding:14px 30px;border:1.5px solid rgba(0,0,0,.5);overflow:hidden;border-radius:3em;z-index:0;transition:color .3s,border-color .3s}
.btn_skin::before{content:"";position:absolute;inset:0;background:var(--sky);transform:translateX(-101%);transition:transform .4s cubic-bezier(.22,.61,.36,1);z-index:-1}
.btn_skin:hover{border-color:var(--sky);color:#fff}
.btn_skin:hover::before{transform:translateX(0)}
.btn_skin svg{transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.btn_skin:hover svg{transform:translateX(4px)}
.btn_skin svg path,.btn_skin svg polyline,.btn_skin svg line{stroke:#000;transition:stroke .3s}
.btn_skin:hover svg path,.btn_skin:hover svg polyline,.btn_skin:hover svg line{stroke:#fff}

.board_commom{max-width:var(--maxw); margin: 0 auto; padding:var(--sec-pd) 0;}
@media(max-width:768px){
.board_commom{max-width:var(--maxw); margin: 0 auto; padding:20px;}
.btn_skin{;font-size:13px;osition:relative;padding:5px 10px;}
}

/* ===== CEO ===== */
.sub-ceo{padding:var(--sec-pd) 0}
.sub-ceo h2{margin-bottom:clamp(44px,6vw,80px)}
.sub-ceo .ceo-inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(50px,7vw,120px);align-items:start}
.sub-ceo .ceo-photo{position:relative}
.sub-ceo .ceo-photo img{width:100%;border-radius:16px;object-fit:cover;aspect-ratio:3/4}
.sub-ceo .ceo-name-card{position:absolute;bottom:0;left:0;right:0;background:var(--blue);color:#fff;padding:clamp(20px,2.5vw,32px);border-radius:0 0 16px 16px}
.sub-ceo .ceo-name-card span{color:#AEC9E2}
.sub-ceo .ceo-name-card h3{margin:6px 0 4px}
.sub-ceo .ceo-txt .eyebrow{margin-bottom:20px}
.sub-ceo .ceo-txt h3{margin-bottom:clamp(28px,3vw,44px)}
.sub-ceo .ceo-msg{display:flex;flex-direction:column;gap:20px;;border-left:3px solid var(--blue);padding-left:clamp(20px,2vw,32px);margin-bottom:32px}
.sub-ceo .ceo-sig{padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:36px}
.sub-ceo .ceo-sig strong{font-size:clamp(22px,2.4vw,32px);font-weight:700;display:block;margin-top:8px;font-family:'GMarketSans',sans-serif}
.sub-ceo .ceo-career h4{margin-bottom:18px;color:var(--blue)}
.sub-ceo .career-list{list-style:none;display:flex;flex-direction:column;gap:12px}
.sub-ceo .career-list li{display:grid;grid-template-columns:clamp(120px,14vw,200px) 1fr;gap:16px;;padding-bottom:12px;border-bottom:1px solid var(--line)}
.sub-ceo .career-list li:last-child{border-bottom:0}
.sub-ceo .career-list li span:first-child{color:var(--muted-2);white-space:nowrap}

@media(max-width:768px){
.sub-ceo .ceo-inner{grid-template-columns:1fr;gap:40px}
.sub-ceo .career-list li{grid-template-columns:140px 1fr}
.sub-ceo .ceo-photo img{border-radius:16px;object-fit:cover;aspect-ratio:3/4;margin:0 auto}
.sub-ceo .ceo-career{padding-bottom:40px}
}

/* ===== 임원진 ===== */
.sub-exec{padding:clamp(80px,10vw,140px) 0;background:var(--blue-pale);font-size:0.9em;}
.sub-exec h2{margin-bottom:clamp(44px,6vw,80px)}
.sub-exec .exec-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,36px)}
.sub-exec .exec-card{background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--line)}
.sub-exec .exec-photo{aspect-ratio:1/1;overflow:hidden}
.sub-exec .exec-photo img{width:100%;height:100%;object-fit:cover;object-position:top}
.sub-exec .exec-info{padding:clamp(24px,2.4vw,36px)}
.sub-exec .exec-info .career-list li{display:grid;grid-template-columns:clamp(80px,9vw,140px) 1fr;gap:30px}
.sub-exec .exec-info .career-list li span:first-child{white-space:nowrap;color:var(--muted)}
.sub-exec .exec-info span{margin-bottom:8px}
.sub-exec .exec-info h4{margin-bottom:20px}
.sub-exec .exec-info p{;margin-bottom:24px}
.sub-exec .exec-info .career-list li{grid-template-columns:clamp(80px,9vw,140px) 1fr}
.sub-exec .exec-grid .blue{font-weight:bold}

@media(max-width:768px){
.sub-exec .exec-grid{grid-template-columns:1fr}
.sub-ceo h2{margin-bottom:30px}
.sub-exec h2{margin-bottom:0px}
}

/* ===== 조직도 ===== */
.sub-org{padding:var(--sec-pd) 0;text-align:center}
.sub-org h2{margin-bottom:clamp(50px,7vw,90px)}

.org-chart{max-width:1100px;margin:0 auto}
.org-row{display:flex;justify-content:center;gap:24px}

.org-line-v{width:1px;height:40px;background:var(--line);margin:0 auto}

.sub-org-line-h{position:relative;height:40px;margin:0 auto}
.sub-org-line-h .org-line-v{position:absolute;top:0;left:50%;height:86px}

.org-box{border-radius:14px;padding:clamp(20px,2.4vw,28px) clamp(24px,2.8vw,36px);text-align:left}
.org-box span{display:block;margin-bottom:8px}
.org-box strong{font-family:'GMarketSans',sans-serif;font-size:clamp(18px,1.8vw,22px);display:block}

.org-box.top{background:var(--blue);color:#fff;width:200px;height:200px;text-align:center;border-radius:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 auto}
.org-box.top span{color:#AEC9E2}
.org-box.top strong{font-size:30px}

.org-box.exec{background:var(--blue-pale);min-width:248px;text-align:center}
.org-box.exec span{color:var(--sky)}
.org-box.exec strong{color:var(--black)}
.org-row.dept{display:grid;grid-template-columns:1fr 1.15fr 1.45fr;gap:24px;position:relative;z-index:1}
.org-box.dep{background:#fff;border:1px solid var(--line);min-width:0;text-align:center;display:flex;align-items:center;justify-content:center}
.org-box.dep strong{white-space:nowrap}


/* 하단 부서 */
.org-row.dept{position:relative;z-index:1}
.org-row.dept::before{content:"";position:absolute;top:50%;left:15.5%;right:15.5%;height:1px;background:var(--line);z-index:-1}

.org-box.dep{background:#fff;border:1px solid var(--line);flex:1;min-width:0;text-align:center;display:flex;align-items:center;justify-content:center}
.org-box.dep strong{white-space:nowrap}

@media(max-width:768px){
.sub-org{margin-top:60px}
.sub-org h2{margin-bottom:40px}
.org-chart{transform:scale(0.75);transform-origin:top center;margin-bottom:-50px}
.org-row.dept{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;position:relative;z-index:1}
.org-box.dep{background:#fff;border:1px solid var(--line);min-width:0;text-align:center;display:flex;align-items:center;justify-content:center}
.org-box.dep strong{white-space:normal;text-align:center}

/******연혁****/
.sub-history{padding:var(--sec-pd)  0;}
.sub-history .head{margin-bottom:80px;}
.sub-history .grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:80px;}
.sub-history .img{position:sticky;top:140px;align-self:start;height:70vh;border-radius:16px;overflow:hidden;}
.sub-history .content{height:100%}
.sub-history .timeline{height:100%}
.sub-history .img img{width:100%;height:100%;object-fit:cover}
.sub-history .timeline{position:relative}
.sub-history .track{position:absolute;top:0;left:0;width:2px;height:100%;background:var(--line)}
.sub-history .fill{position:absolute;top:0;left:0;width:2px;height:0;background:var(--blue)}
.sub-history .list{list-style:none}
.sub-history .item{position:relative;padding:0 0 40px 40px}
.sub-history .item:last-child{padding-bottom:0}
.sub-history .item::before{content:"";position:absolute;left:-5px;top:6px;width:12px;height:12px;border-radius:50%;background:var(--white);border:2px solid var(--blue)}
.sub-history .year{color:var(--blue);margin-bottom:6px}

@media(max-width:768px){
.sub-history .grid{grid-template-columns:1fr;gap:40px}
.sub-history .img{position:static;height:50vh}
.sub-history .head{margin-bottom:20px;}
.sub-history{padding:40px  0;}
}


/*========생산시설============*/
.sub-item .facility-sites{margin-bottom:24px}
.sub-item .facility-sites .site-main{position:relative}
.sub-item .facility-sites .site-main img{width:100%;aspect-ratio:21/9;object-fit:cover;border:1px solid var(--line);display:block}
.sub-item .facility-sites .site-main figcaption{position:absolute;left:24px;bottom:24px;background:var(--white);padding:16px 24px;margin:0;display:flex;align-items:center;gap:8px}
.sub-item .facility-sites .site-main figcaption b{font-weight:700}

.sub-item .facility-sites .site-sub{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
.sub-item .facility-sites .site-sub figure{position:relative}
.sub-item .facility-sites .site-sub img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line);display:block}
.sub-item .facility-sites .site-sub figcaption{position:absolute;left:16px;bottom:16px;background:var(--white);padding:12px 18px;margin:0;display:flex;align-items:center;gap:6px}
.sub-item .facility-sites .site-sub figcaption b{font-weight:700}

.sub-item .facility-row{max-width:950px;margin:0 auto;}

.sub-item .facility-slider{position:relative;overflow:hidden}
.sub-item .facility-track{display:flex;height:100%;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.sub-item .facility-track .slide{flex:0 0 100%;height:100%;display:flex;align-items:center;justify-content:center}
.sub-item .facility-track img{max-width:100%;max-height:100%;width:auto;height:auto;display:block}
.sub-item .facility-nav{position:absolute;top:50%;transform:translateY(-50%);width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,.4);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:5}
.sub-item .facility-nav.prev{left:20px}
.sub-item .facility-nav.next{right:20px}
.sub-item .facility-dots{display:flex;justify-content:center;gap:8px;margin-top:16px}
.sub-item .facility-nav:hover{background:var(--blue);border-color:var(--blue);color:var(--white);transform:translateY(-50%) scale(1.08)}
.sub-item .facility-dots span{width:8px;height:8px;border-radius:50%;background:var(--line);cursor:pointer}
.sub-item .facility-dots span.active{background:var(--blue)}

@media(max-width:768px){
.sub-item .facility-sites .site-sub{grid-template-columns:1fr}
.sub-item .facility-sites .site-main figcaption{position:relative;left:auto;bottom:auto;margin-top:8px;padding:12px 16px;border:1px solid var(--line);border-top:0}
.sub-item .facility-sites .site-sub figcaption{position:relative;left:auto;bottom:auto;margin-top:8px;padding:10px 14px;border:1px solid var(--line);border-top:0}
.sub-item .facility-row{grid-template-columns:1fr}
.sub-item .facility-nav{transform:translateY(-50%);width:30px;height:30px;}
.sub-item .facility-nav.prev{left:-10px}
.sub-item .facility-nav.next{right:-10px}
}









/*******오시는길*******/
.sub-location{padding:var(--sec-pd) 0}
.sub-location .head{margin-bottom:70px}
.sub-location .list{display:flex;flex-direction:column;gap:70px}
.sub-location .top{display:flex;align-items:center;gap:20px;margin-bottom:24px}
.sub-location .icon{width:56px;height:56px;color:var(--blue);flex-shrink:0}
.sub-location .icon svg{width:100%;height:100%}
.sub-location .addr{margin-bottom:24px}
.sub-location .map-full{width:100%;height:60vh;border-radius:16px;overflow:hidden}
.sub-location .map-full iframe{width:100%;height:100%;border:0}
.sub-location .addr span{display:block;margin-top:20px}
.sub-location .addr span em{color:#ddd;margin:0 10px}

.sub-location .map-full{position:relative}
.sub-location .map-label{position:absolute;top:16px;left:16px;z-index:2;background:var(--white);color:var(--blue-d);padding:8px 16px;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15)}

@media(max-width:768px){
.sub-location .map-full{height:40vh;border-radius:0}
}


/*********성장전략*********/

.sub-vision{padding:0 0 var(--sec-pd) 0}
.sub-vision .stages{display:flex;justify-content:center;margin:0 auto}

.sub-vision .stage{text-align:center;flex:0 0 auto}
.sub-vision .stage.s2{margin-left:30px}
.sub-vision .stage.s3{margin-left:30px}

.circle{width:clamp(440px,32vw,560px);height:clamp(440px,32vw,560px);;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:clamp(35px,3vw,50px);position:relative;box-shadow:0 20px 50px -20px rgba(0,0,0,.25)}

.sub-vision .stage.s1 .circle{background:var(--sky);z-index:1}
.sub-vision .stage.s2 .circle{background:var(--orange);z-index:2}
.sub-vision .stage.s3 .circle{background:var(--blue);z-index:3}

.sub-vision .circle .icon{width:80px;height:80px;color:var(--white);margin-bottom:20px}
.sub-vision .circle .icon svg{width:100%;height:100%}
.sub-vision .circle h5{color:var(--white);margin-bottom:clamp(20px,2.4vw,32px)}

.sub-vision .circle ul{list-style:none;text-align:left}
.sub-vision .circle li{position:relative;padding-left:30px;color:var(--white);font-size:14px}
.sub-vision .circle li::before{content:"";position:absolute;left:15px;top:9px;width:6px;height:6px;border-radius:50%;background:var(--white)}
.sub-vision .tbl table{font-size:16px;border:1px solid red}


.sub-item .revenue-intro{text-align:center;max-width:800px;margin:0 auto clamp(60px,7vw,90px);border:10px solid red}
.sub-item .revenue-intro .chart-img{margin:32px auto 0;border:1px solid var(--line)}
.sub-item .revenue-intro .chart-img img{}

.sub-item .rev-block{display:flex;align-items:stretch;gap:clamp(30px,3.4vw,48px);margin-bottom:clamp(40px,5vw,56px)}
.sub-item .rev-block > .rev-chart{flex:0 0 40%;border:1px solid var(--line);display:flex;align-items:flex-end;background:var(--white)}
.sub-item .rev-block > .rev-chart img{width:100%;display:block}
.sub-item .rev-block > div{flex:1}

.sub-item .tbl-head{display:flex;justify-content:flex-end;margin-bottom:8px}
.sub-item .tbl-head .cap{font-size:13px;margin:0}
.sub-item .tbl-wrap table{font-size:16px}

.sub-item .rev-block-total{display:flex !important;align-items:stretch;gap:clamp(30px,3.4vw,48px)}
.sub-item .rev-block-total > .rev-chart{flex:0 0 35%;border:1px solid var(--line);display:flex;align-items:flex-end;background:var(--white)}
.sub-item .rev-block-total > .rev-chart img{width:100%;display:block}
.sub-item .rev-block-total > .tbl-wrap{flex:1;display:flex;flex-direction:column}
.sub-item .rev-block-total .tbl{overflow-x:auto;flex:1}
.sub-item .rev-block-total table{width:100%;min-width:600px;table-layout:auto;font-size:16px}
.sub-item .rev-block-total td,.sub-item .rev-block-total th{word-break:keep-all}

@media(max-width:1024px){
.sub-item .rev-block,.sub-item .rev-block-total{flex-direction:column}
.sub-item .rev-block > .rev-chart,.sub-item .rev-block-total > .rev-chart{flex:none}
}
@media(max-width:768px){
.sub-vision{margin-top:40px}
.sub-vision .stages{flex-direction:column;align-items:center}
.sub-vision .stage.s2,.sub-vision .stage.s3{margin-left:0;margin-top:clamp(-40px,-4vw,-60px)}
.sub-vision .circle .icon{width:40px;height:40px}
}


/*==========CNT란=========================*/

.sub-cnt{padding:0 0 var(--sec-pd) 0}
.sub-cnt .head span{display:block;margin-bottom:16px}
.sub-cnt .head h4{border-bottom:2px solid #000;padding-bottom:30px;margin-bottom:50px}

.sub-cnt .sub-block{margin-bottom:clamp(70px,8vw,110px);border-bottom:1px solid var(--line)}
.sub-cnt .sub-block:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}

.sub-cnt .def{margin-bottom:clamp(40px,5vw,64px)}

.sub-cnt .props{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,32px);margin-bottom:clamp(50px,6vw,80px)}
.sub-cnt .prop{border:1px solid var(--line);border-radius:16px;padding:clamp(28px,3vw,40px) clamp(20px,2vw,28px);transition:border-color .3s,box-shadow .3s}
.sub-cnt .prop:hover{border-color:var(--sky);box-shadow:0 14px 30px -14px rgba(19,146,206,.25)}
.sub-cnt .prop .icon{width:56px;height:56px;color:#000;margin-bottom:24px;transition:color .3s,transform .35s cubic-bezier(.16,1,.3,1)}
.sub-cnt .prop .icon svg{width:100px}
.sub-cnt .prop:hover .icon{color:var(--sky);transform:scale(1.15) rotate(-4deg)}
.sub-cnt .prop h5{color:var(--blue);margin-bottom:12px}

.sub-cnt .row{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(24px,3vw,40px);align-items:stretch;text-align:center;font-weight:500}
.sub-cnt .stack{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px)}
.sub-cnt .stack .media{flex:1;overflow:hidden;border-radius:16px;position:relative}
.sub-cnt .stack .media figcaption{position:absolute;left:16px;bottom:16px;/*background:rgba(0,0,0,.55)*/;color:var(--black);;border-radius:8px;font-weight:bold;font-size:1.2em}
.sub-cnt .stack .media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/2;border-radius:16px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.sub-cnt .prop .icon{width:56px;height:56px;color:#000;margin-bottom:24px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.sub-cnt .prop:hover .icon{transform:scale(1.15) rotate(-4deg)}
.sub-cnt .media.main{border:1px solid #ddd;border-radius:16px;text-align:center;padding:80px;overflow:hidden}
.sub-cnt .media.main img{object-fit:cover;display:block;margin:0 auto;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.sub-cnt .media.main:hover img{transform:scale(1.05)}
.sub-cnt .media.media:hover img{transform:scale(1.05)}


.number{background:var(--sky);width:50px;height:50px;border-radius:100%;color:#fff;font-family:'Outfit',sans-serif;display:flex!important;align-items:center;justify-content:center;font-weight:bold}


.sub-cnt .row-half{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,3vw,40px);}
.sub-cnt .method-title{margin-bottom:24px;}
.sub-cnt .method-pts{margin-top:24px}
.sub-cnt .method-pts .pro{color:var(--sky);margin-bottom:8px}
.sub-cnt .method-pts .con{color:var(--sky);margin-top:20px;margin-bottom:8px}
.sub-cnt .row-half .media{border:1px solid var(--line);border-radius:16px;overflow:hidden;height:500px;display:flex;align-items:center;justify-content:center;padding:40px 0}
.sub-cnt .row-half .media img{width:100%;height:100%;object-fit:contain;display:block}
.sub-cnt .row-half .media:hover img{transform:scale(1)}


@media(max-width:768px){
.sub-cnt .props{grid-template-columns:1fr}
.sub-cnt .row{grid-template-columns:1fr}
.sub-cnt .row-half{grid-template-columns:1fr}
.sub-cnt .media.main{padding:30px 20px}
.sub-cnt .row-half .media{height:300px}
}


/*===================SWCNT 양산기술=====================*/
.sub-syn{padding:0 0 var(--sec-pd) 0}
.sub-syn .head span{display:block;margin-bottom:16px}
.sub-syn .head h4{border-bottom:2px solid #000;padding-bottom:30px;margin-bottom:50px}

.sub-syn .sub-block{margin-bottom:clamp(70px,8vw,110px);border-bottom:1px solid var(--line)}
.sub-syn .sub-block:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}

.sub-syn .def{margin-bottom:clamp(40px,5vw,64px)}

.sub-syn .props{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.4vw,32px);margin-bottom:clamp(50px,6vw,80px)}
.sub-syn .prop{border:1px solid var(--line);border-radius:16px;padding:clamp(28px,3vw,40px) clamp(20px,2vw,28px);transition:border-color .3s,box-shadow .3s}
.sub-syn .prop:hover{border-color:var(--sky);box-shadow:0 14px 30px -14px rgba(19,146,206,.25)}
.sub-syn .prop .icon{width:56px;height:56px;color:#000;margin-bottom:24px;transition:color .3s,transform .35s cubic-bezier(.16,1,.3,1)}
.sub-syn .prop .icon svg{width:100px}
.sub-syn .prop:hover .icon{color:var(--sky);transform:scale(1.15) rotate(-4deg)}
.sub-syn .prop h5{color:var(--blue);margin-bottom:12px}

.sub-syn .row{display:grid;grid-template-columns:.7fr 1.3fr;gap:clamp(24px,3vw,40px);align-items:stretch;text-align:center;font-weight:500}
.sub-syn .stack{display:flex;flex-direction:column;gap:clamp(20px,2.4vw,32px)}
.sub-syn .stack .media{flex:1;overflow:hidden;border-radius:16px;position:relative}
.sub-syn .stack .media figcaption{position:absolute;left:16px;bottom:16px;/*background:rgba(0,0,0,.55)*/;color:var(--black);;border-radius:8px;font-weight:bold;font-size:1.2em}
.sub-syn .stack .media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/2;border-radius:16px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.sub-syn .prop .icon{width:56px;height:56px;color:#000;margin-bottom:24px;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.sub-syn .prop:hover .icon{transform:scale(1.15) rotate(-4deg)}
.sub-syn .media.main{border:1px solid #ddd;border-radius:16px;text-align:center;padding:80px;overflow:hidden}
.sub-syn .media.main img{object-fit:cover;display:block;margin:0 auto;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.sub-syn .media.main:hover img{transform:scale(1.05)}
.sub-syn .media.media:hover img{transform:scale(1.05)}


.number{background:var(--sky);width:50px;height:50px;border-radius:100%;color:#fff;font-family:'Outfit',sans-serif;display:flex!important;align-items:center;justify-content:center;font-weight:bold}


.sub-syn .row-half{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,3vw,40px);}
.sub-syn .method-title{margin:24px 0;}
.sub-syn .method-pts{margin-top:24px}
.sub-syn .method-pts .pro{color:var(--sky);margin-bottom:8px}
.sub-syn .method-pts .con{color:var(--sky);margin-top:20px;margin-bottom:8px}
.sub-syn .row-half .media{border:1px solid var(--line);border-radius:16px;overflow:hidden;height:500px;display:flex;align-items:center;justify-content:center;padding:40px 0}
.sub-syn .row-half .media img{width:100%;height:100%;object-fit:contain;display:block}
.sub-syn .row-half .media:hover img{transform:scale(1)}
@media(max-width:768px){
.sub-syn .props{grid-template-columns:1fr}
.sub-syn .row{grid-template-columns:1fr}
.sub-syn .row-half{grid-template-columns:1fr}
.sub-syn .media.main{padding:30px 20px}
.sub-syn .row-half .media{height:300px}
}


/*==============Dispersion Customization=================*/
.sub-disp{padding:0 0 var(--sec-pd) 0}
.sub-disp .def{text-align:center;max-width:900px;margin:0 auto clamp(50px,6vw,80px)}
.sub-disp .def-title{color:var(--sky);margin-bottom:16px}

.sub-disp .branch{max-width:1000px;margin:0 auto clamp(-10px,-1vw,-20px);position:relative;z-index:2;}

.sub-disp .row-half{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);padding-top:clamp(50px,6vw,70px)}
.sub-disp .card{border:1px solid var(--line);border-radius:20px;padding:clamp(32px,3.4vw,44px) clamp(28px,3vw,36px);position:relative;transition:border-color .3s,box-shadow .3s}
.sub-disp .card:hover{border-color:var(--sky);box-shadow:0 16px 34px -18px rgba(19,146,206,.3)}
.sub-disp .card-badge{width:64px;height:64px;border-radius:50%;background:var(--blue);color:var(--white);display:flex;align-items:center;justify-content:center;margin:0 auto 20px}
.sub-disp .card-badge svg{width:30px;height:30px}
.sub-disp .card-title{text-align:center;color:var(--blue);margin-bottom:28px}
.sub-disp .card .pts{list-style:none}
.sub-disp .card .pts li{position:relative;padding-left:20px;margin-bottom:12px;}
.sub-disp .card .pts li::before{content:"·";position:absolute;left:0;color:var(--sky)}
.sub-disp .note{color:var(--sky);margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.sub-disp .matrix-tbl{overflow-x:auto;margin-top:40px}

.sub-disp .pts{list-style:none;padding-left:0}
.sub-disp .pts li{position:relative;padding-left:20px;margin-bottom:12px}
.sub-disp .pts li::before{content:"·";position:absolute;left:0;top:0;color:var(--sky)}

.sub-disp .disp-detail{display:flex;flex-direction:column;gap:clamp(24px,3vw,40px);margin-top:clamp(40px,4.5vw,60px)}
.sub-disp .proc-col{display:grid;grid-template-columns:repeat(1,1fr);gap:16px;height:100%}
.sub-disp .proc-step{display:flex;flex-direction:column;height:100%;text-align:center}
.sub-disp .proc-title{color:var(--blue);margin-bottom:12px}
.sub-disp .proc-img{border:1px solid var(--line);border-radius:12px;overflow:hidden;flex:1;display:flex;align-items:center;justify-content:center}
.sub-disp .proc-img img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.sub-disp .perf-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,40px);align-items:stretch}
.sub-disp .perf-block{border:1px solid var(--line);border-radius:16px;padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column}
.sub-disp .perf-lead{color:var(--blue);margin-bottom:16px}
.sub-disp .perf-lead .tag{color:var(--orange)}
.sub-disp .perf-charts{display:grid;gap:12px;margin-bottom:16px}
.sub-disp .perf-charts img{width:100%;border-radius:8px;display:block}
.sub-disp .vial-block{display:flex;align-items:flex-start;gap:clamp(20px,2.4vw,32px);margin-bottom:20px}
.sub-disp .vial-group{display:flex;align-items:flex-start;gap:8px;flex:2}
.sub-disp .vial-group.triple{flex:3}
.sub-disp .vial-item{flex:1;display:flex;flex-direction:column;text-align:center}
.sub-disp .vial-label{display:block;background:var(--blue-d);color:var(--white);border-radius:6px;padding:6px 0;margin-bottom:8px}
.sub-disp .vial-img{border:1px solid var(--line);border-radius:8px;overflow:hidden}
.sub-disp .vial-img img{width:100%;display:block}
.sub-disp .vial-caption{display:flex;gap:clamp(20px,2.4vw,32px)}
.sub-disp .cap-left{flex:2;text-align:center;color:var(--blue)}
.sub-disp .cap-right{flex:3;text-align:center;color:var(--blue)}
@media(max-width:1024px){
.sub-disp .row-half{grid-template-columns:1fr}
.sub-disp .branch{display:none}

.sub-disp .perf-col{grid-template-columns:1fr}
}
@media(max-width:768px){
.sub-disp .vial-block{display:flex;align-items:flex-start;gap:clamp(20px,2.4vw,32px);margin-bottom:20px}
.sub-disp .vial-group{gap:8px;flex:2}
.sub-disp .vial-group.triple{flex:3}
.sub-disp .cap-left{flex:2;text-align:center;color:var(--blue)}
.sub-disp .cap-right{flex:3;text-align:center;color:var(--blue)}
.sub-disp .perf-block{border:0px solid var(--line);border-radius:0px;padding:0;display:flex;flex-direction:column}
.sub-disp .vial-caption{display:flex;gap:clamp(0px,0vw,0px)}
}

/*================코팅==========================*/
.sub-coat{padding:0 0 var(--sec-pd) 0}
.sub-coat .lead{;border-bottom:1px solid var(--line)}
.sub-coat .head h4{border-bottom:2px solid #000;padding-bottom:30px;margin-bottom:50px}
.sub-coat .def{ margin-bottom:50px;}
.sub-coat .matrix{;margin:0 auto;border:1px solid var(--line);border-radius:20px;padding:clamp(32px,3.4vw,44px) clamp(28px,3vw,36px);}
.sub-coat .matrix img{width:100%;display:block;border-radius:16px}
.sub-coat .matrix p{;margin:0 auto;border-top:1px solid var(--line);padding-top:20px;font-weight:600}



/*==============경쟁력===================*/
.sub-comp{padding:0 0 var(--sec-pd) 0}
.sub-comp .hexes{display:flex;justify-content:center;margin-bottom:clamp(60px,7vw,90px)}
.sub-comp .hex{position:relative;width:clamp(240px,20vw,320px);aspect-ratio:1/1.05;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--white);transition:transform .3s cubic-bezier(.16,1,.3,1);cursor:pointer}
.sub-comp .hex:hover{transform:translateY(-10px)}
.sub-comp .hex .icon{width:56px;height:56px;margin-bottom:20px}
.sub-comp .hex .icon svg{width:100%;height:100%}
.sub-comp .hex h5{color:var(--white)}
.sub-comp .hex.h1{background:var(--blue);z-index:3;margin-right:clamp(-40px,-4vw,-70px)}
.sub-comp .hex.h2{background:var(--sky);z-index:2;margin-right:clamp(-40px,-4vw,-70px)}
.sub-comp .hex.h3{background:var(--orange);z-index:1}

.sub-comp .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
.sub-comp .card{border:1px solid var(--line);border-radius:16px;padding:clamp(28px,3vw,36px)}
.sub-comp .card h5{display:flex;align-items:flex-start;gap:12px;margin-bottom:clamp(20px,2.4vw,28px)}
.sub-comp .card .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:8px}
.sub-comp .card:nth-child(1) .dot{background:var(--blue)}
.sub-comp .card:nth-child(2) .dot{background:var(--sky)}
.sub-comp .card:nth-child(3) .dot{background:var(--orange)}
.sub-comp .pts{list-style:none}
.sub-comp .pts li{position:relative;padding-left:18px;margin-bottom:10px}
.sub-comp .pts li::before{content:"-";position:absolute;left:0;color:var(--sky)}

@media(max-width:1024px){
.sub-comp .hexes{flex-direction:row;flex-wrap:nowrap;justify-content:center}
.sub-comp .hex{width:150px!important;height:150px!important;padding:20px}
.sub-comp .hex .icon{width:40px!important;height:40px!important;margin-bottom:4px}


.sub-comp .cards{grid-template-columns:1fr}
}