/*
=========================================================================
공통
=========================================================================
*/
#wrap{min-width: var(--min-cont);}
.inner{max-width: var(--max-cont); margin: 0 auto; padding: 0 var(--pad-lr); width: 100%;}
.subTitArea{margin-bottom: 40px;}
.tit{font-size: clamp(33px, 3.5vw, 47px); font-weight: 900; line-height: 1.4; letter-spacing: -.02em; color: var(--navy); font-family: var(--f-disp-kr);}
.subTitArea:has(.subDesc) .tit{margin-bottom: 20px;}
.tit em{color: var(--blue);}
.subTit{font-family: var(--f-disp-en); font-size: .85em; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); margin-bottom: 20px;}

@media (max-width: 900px) {
  .subTitArea{margin-bottom: 30px;}  
  .subTitArea:has(.subDesc) .tit{margin-bottom: 12px;}
  .subTit{font-size: .75em;}
}

/*
=========================================================================
HERO
=========================================================================
*/
.hero{min-height: 100vh; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding-top: 64px;}
.heroBg{position: absolute; inset: 0; z-index: -1; background: var(--navy);}
.heroBg img{opacity: .2;}
.heroBg::before{content:''; position: absolute; top:0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, #0b1120, #0b112000); z-index: 1;}
.hero>.inner{padding-top: 90px; padding-bottom: 0; width: 100%;}
.heroTxtArea{height: calc(100dvh - 154px);}
.hero .subTit{opacity: .7;  margin-bottom: 28px;}
.heroTitle{font-size: clamp(53px, 6vw, 78px); font-weight: 900; line-height: 1.12; color: var(--white); letter-spacing: -.02em; margin-bottom: 22px; font-family: var(--f-disp-kr);}
.heroTitle em{font-style: normal; background: var(--blue); -webkit-background-clip: text; -webkit-text-fill-color: transparent;}
.heroList{display: flex; align-items: center; gap: 5px 20px; color: var(--white); font-size: .9em; margin-bottom: 22px; flex-wrap: wrap;}
.heroList>li{display: grid; grid-template-columns:  5px 1fr; gap: 5px; align-items: center;}
.heroList>li::before{content:''; width: 5px; height: 5px; background: var(--blue); display: inline-block;}
.heroDesc{color: rgba(255,255,255,.7); line-height: 1.8; max-width: 560px; font-weight: 300; margin-bottom: 35px; word-break: keep-all;}
.heroBtnArea{display: flex; align-self: center; gap: 15px; margin-bottom: 40px;}
.heroBtn{padding: .8em 2.4em; text-align: center; font-weight: 500; transition: background .2s;}
.heroBtn.primary{background: var(--blue); color: var(--white);}
.heroBtn.primary:hover{background: var(--blue-hover);}
.heroBtn.sub{border: 1px solid rgba(255,255,255,.2);  color: var(--white);}
.heroBtn.sub:hover{background: rgba(96,165,250,.1);}

@media (max-width: 900px) {
  .heroList{gap: 5px 15px;}
  .heroInner{padding: 60px 20px 0;}
}
@media (max-width: 600px) {
  .heroBtn{flex: 1;}
}
/* heroScroll */
.heroScroll{position: absolute; top:calc(100dvh - 70px); left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; z-index: 10; animation: scrollBounce 2s ease-in-out infinite;}
.heroScrollTxt{font-family: var(--f-disp-en); font-size: .7em; letter-spacing: .25em; color: rgba(255,255,255,.55);}
.heroScrollArrow{display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.5);}
.heroScrollArrow svg{width: 22px; height: 22px;}
.heroScroll:hover .heroScrollTxt{color: rgba(255,255,255,.7);}
.heroScroll:hover .heroScrollArrow{color: rgba(255,255,255,.65);}

@keyframes scrollBounce{
  0%,100%{transform: translateX(-50%) translateY(0);}
  50%{transform: translateX(-50%) translateY(7px);}
}
@media (max-width: 900px) {
  .heroScroll{top:calc(100dvh - 60px);}
}
/* certBar 하단 띠 */
.certBar{position: relative; background: rgba(255,255,255,.04); border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.07);}
.certBar::before{content: ''; width: calc((100% - 1500px)/2 + 40px); height: 100%; position: absolute; top:0; left: 0; background: rgba(79,140,255,.1);}
.certBar .inner{display: grid; align-items: stretch; grid-template-columns: repeat(6, 1fr); padding: 0 var(--pad-lr);}
.certBarItem{padding: 14px 20px; border-right: 1px solid rgba(255,255,255,.07); display: flex; align-items: center; gap: 12px; transition: background .2s; position: relative;}
.certBarItem:first-child{background: rgba(79,140,255,.1); padding-left: 0;}
.certBarItem:first-child .certInfo{display: flex; gap: 5px;}
.certBarItem .certIcon{width: 15px; height: 15px; opacity:.5;}

.certBarItem:last-child{border-right: none; padding-right:var(--pad-lr);}
.certBarItem:not(:first-child):hover{background: rgba(79,140,255,.07); }
.certBarItem .certInfo .name{font-size: .9em; font-weight: 600; color: var(--white); letter-spacing: .04em }
.certBarItem .certInfo .sub{font-size: .85em; color: rgba(255,255,255,.35); margin-top: 1px;}
@media (max-width: 1500px) {
  .certBar::before{width: var(--pad-lr);}
}
@media (max-width: 900px) {
  .certBar .inner{grid-template-columns: repeat(3, 1fr); padding: 0;}
  .certBar::before{display: none;}
  .certBarItem{padding: 12px 15px;}
  .certBarItem:first-child{padding-left: var(--pad-lr);}
  .certBarItem:nth-of-type(1), .certBarItem:nth-of-type(2), .certBarItem:nth-of-type(3){border-bottom: 1px solid rgba(255,255,255,.07);}
  .certBarItem:nth-of-type(3){padding-right:var(--pad-lr); border-right: none;}
  .certBarItem:nth-of-type(4){padding-left: var(--pad-lr);}
}
@media (max-width: 600px) {
  .certBar{font-size: .9em;}
}

/*
=========================================================================
STATS (숫자 카운트)
=========================================================================
*/
.stats{background: var(--navy2); border-top: 1px solid rgba(255,255,255,.06); border-bottom: 1px solid rgba(255,255,255,.06); padding: 56px 0 }
.stats .inner{display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 }
.statItem{text-align: center; padding: 20px 24px; border-right: 1px solid rgba(255,255,255,.07); position: relative; opacity: 0; transform: translateY(20px); transition: opacity .5s var(--ease), transform .5s var(--ease);}
.statItem.visible{opacity: 1; transform: none;}
.statItem:last-child{border-right: none;}
.statNum{font-family: var(--f-disp-en); font-weight: 700; font-size: 3.2em; line-height: 1; color: var(--blue); display: flex; align-items: flex-end; justify-content: center; gap: 4px }
.statNum .suffix{font-size: .6em; margin-bottom: 4px;}
.statItemDual .statNum{gap: 2px;}
.statItemDual .counterA,.statItemDual .counterB{font-family: var(--f-disp-en); font-weight: 700; font-size: 1em; color: var(--blue);}
.statItemDual .suffix{font-size: .6em; margin-bottom: 4px; color: var(--blue);}
.statLabel{font-size: .95em; color: rgba(255,255,255,.55); margin-top: 8px; font-weight: 500;}
.statSub{font-size: .9em; color: rgba(255,255,255,.3); margin-top: 4px;}

@media (max-width: 900px) {  
  .stats .inner{grid-template-columns: repeat(2, 1fr);}
  .statItem{padding: 18px 15px;}
  .statItem:nth-of-type(2){border-right: none;}
  .statItem:nth-of-type(1), .statItem:nth-of-type(2){border-bottom: 1px solid rgba(255,255,255,.07);}
  .statNum{font-size: 3em;}
}

/*
=========================================================================
ABOUT
=========================================================================
*/
.about{padding: 100px 0; background: var(--white);}
.about .inner{display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center;}
.about .tit{margin-bottom: 20px;}
.aboutBody{color: var(--gray3); line-height: 1.8; margin-bottom: 32px; max-width: 520px; word-break: keep-all;}
.aboutImg{position: relative; border-radius: 2px; overflow: hidden; box-shadow: 0 24px 60px rgba(30,72,212,.15);} 
.aboutImg::after{content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 30%; background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0));}
.aboutImgLabel{position: absolute; left: 20px; bottom:15px; font-size: .9em; color: var(--white); z-index: 2;}

@media (max-width: 900px) {  
  .about .inner{grid-template-columns: 1fr; gap: 40px;}
  .aboutBody{margin-bottom: 10px}
}

/* 핵심 경쟁력 */
.strengths{padding: 80px 0; background: var(--gray1); border-top: 1px solid var(--gray2); border-bottom: 1px solid var(--gray2);}
.sectionH2{font-size: clamp(27px, 3vw, 37px); font-weight: 900; color: var(--navy); margin-bottom: 48px; letter-spacing: -.01em;}
.strengthGrid{display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;}
.strengthCard{background: var(--white); border: 1px solid var(--gray2); border-radius: 2px; padding: 32px; transition: box-shadow .25s, border-color .25s }
.strengthCard:hover{box-shadow: 0 12px 40px rgba(30,72,212,.1); border-color: rgba(37,99,235,.3);}
.strengthIcon{width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; margin-bottom: 20px; border-radius: 5px; background: rgba(79,140,255,.1);}
.strengthIcon svg {width: 55%; height: auto; color: var(--blue);}
.strengthTitle{font-size: 1.1em; font-weight: 600; color: var(--navy); margin-bottom: 8px; line-height: 1.4;}
.strengthBody{font-size: .9em; color: var(--gray3); line-height: 1.7; }
.noteBox{padding: 18px 28px; background: rgba(37,99,235,.06); border: 1px solid rgba(37,99,235,.15); border-radius: 2px; font-size: .85em; color: var(--gray3); text-align: center;}
.strengths .noteBox{margin-top: 40px;}

@media (max-width: 900px) {  
  .strengthGrid{grid-template-columns: 1fr;}
  .strengthCard{padding: 25px 20px;}
  .strengthIcon{width: 50px; height: 50px;}
  .noteBox{padding: 15px 20px;}
  .strengths .noteBox{margin-top: 20px;}
}

/*
=========================================================================
PRODUCT LINE
=========================================================================
*/
.products{padding: 100px 0; background: var(--navy2);}
.products .tit{color: var(--white);}
.productList { display: flex; flex-direction: column; gap: 2px;}
.productCard { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 2px; display: grid; grid-template-columns: 400px 1fr; align-items: center; overflow: hidden; margin-bottom: 16px; transition: border-color .25s, background .25s }
.productCard:hover { border-color: rgba(79,140,255,.35); background: rgba(255,255,255,.06) }
.productImg {background: var(--navy2); height: 100%; width: 100%; aspect-ratio: unset;  display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative;}

.productInfo{padding: 32px 40px; }
.pTag{font-size: .8em; font-weight: 700; text-transform: uppercase; color: var(--sky); background: rgba(96,165,250,.15); border-radius: 2px; padding: 3px 10px; display: inline-block; margin-bottom: 14px;}
.pTag.yellow{background: rgba(250, 196, 96, 0.1); color: #ffa61f;}
.pTag.gray{background: rgba(170, 170, 170, 0.15); color: #aaa;}
.pTxt{color: var(--blue); font-size: .95em; margin-bottom: 10px;}
.pName{font-size: 1.5em; font-weight: 800; color: var(--white); margin-bottom: 10px; letter-spacing: -.01em;}
.pDesc{font-size: .9em; color: rgba(255,255,255,.5); line-height: 1.7; margin-bottom: 20px; word-break: keep-all;}
.pSpecs{display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px;}
.specItem .specKey{font-size: .85em; color: rgba(255,255,255,.35); letter-spacing: .06em; margin-bottom: 3px }
.specItem .specVal{font-size: .85em; font-weight: 500; color: rgba(255,255,255,.8) }
.pBtn{display: inline-flex; align-items: center; gap: 8px; font-size: .9em; font-weight: 600; letter-spacing: .06em; background: var(--blue); color: #fff; border-radius: 2px; padding: 9px 20px; transition: background .2s, border-color .2s, color .2s;}
.pBtn:hover{background: var(--blue-hover);}
.pBtn.sub{border: 1px solid rgba(255,255,255,.3); color: var(--white); background: transparent;}
.pBtn.sub:hover{background: rgba(30,72,212,.1);}

@media (max-width: 1200px) {  
  .productCard{grid-template-columns: 300px 1fr;}
}
@media (max-width: 900px) {  
  .productCard, .productComing{grid-template-columns: 1fr;}
  .productImg{min-height: 200px;}
  .productInfo{padding: 30px 20px;}
  .pSpecs{grid-template-columns: repeat(2, 1fr);}
}


/* 테이블 */
.accTable{width: 100%; border-collapse: collapse; margin-top: 12px; table-layout: fixed; font-size: .85em; }
.accTable th, .accTable td{padding: 10px 12px;}
.accTable th{font-weight: 600; letter-spacing: .08em; color: rgba(255,255,255,.35); text-align: left; border-bottom: 1px solid rgba(255,255,255,.06);}
.accTable td{color: rgba(255,255,255,.7); border-bottom: 1px solid rgba(255,255,255,.04);}
.accCont[data-tab="chemical"] td.t1{color: var(--sky);}
.accCont[data-tab="mechanical"] td.t2{color: var(--sky);}
.accTable tr:last-child td{border-bottom: none;}
.accNote{font-size: .75em; color: rgba(255,255,255,.4); margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.05);}

@media (max-width: 900px) {  
  .accTable th, .accTable td{padding: 8px 10px;}
}

/*
=========================================================================
CERTIFICATIONS
=========================================================================
*/
.cert{background: var(--navy); padding: 100px 0;}
.cert .tit{color: var(--white);}
.cert .noteBox{margin-bottom: 30px;  color: rgba(255, 255, 255, .6);}
.certGrid{display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px;}
.certCard{background: rgba(79,140,255,.08); border-radius: 2px; padding: 28px 24px 24px; text-align: center; transition: background .5s; display: flex; flex-direction: column; align-items: center; cursor: pointer; position: relative; overflow: hidden;}
.certCard:hover{background: rgba(79,140,255,.15);}
.certCard .cName{font-family: var(--f-disp-en); font-size: 1.6em;  font-weight: 800; color: var(--blue); letter-spacing: .04em; margin-bottom: 6px;}
.certCard .cFull{font-size: .85em; font-weight: 600; color: var(--white); margin-bottom: 8px }
.certCard .cDesc{font-size: .8em; color: rgba(255,255,255,.4); line-height: 1.6; margin-bottom: 16px;}
.certCardClickHint{font-size: .85em; letter-spacing: .02em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.07); width: 100%; text-align: center; transition: color .2s }
.certCard:hover .certCardClickHint{color: var(--sky); border-top-color: rgba(96,165,250,.2);}

@media (max-width: 900px) {
  .certGrid{grid-template-columns: 1fr; }
  .certCard{padding: 24px 15px 20px;}
}

/*
=========================================================================
CONTACT
=========================================================================
*/
.contact{background: var(--navy2); padding: 100px 0 0;}
.contactGrid{display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; padding-bottom: 80px;}
.contact .subTitArea{margin-bottom: 30px;}
.contact .tit{color: var(--white);}
.contact .subDesc{color: rgba(255, 255, 255, .7); line-height: 1.8; font-size: .95em;}
.cLogo{margin-bottom: 20px;}
.cLogo>.logo{width: 130px; height: 40px; margin-bottom: 3px; opacity: .8;}
.cLogo>p{font-size: .9em; color: rgba(255,255,255,.5); font-weight: 500;}
.cdList{display: flex; flex-direction: column; gap: 14px;}
.cdItem{display: flex; align-items: center; gap: 14px;}
.cdIcon{flex-shrink: 0; width: 40px; height: 40px; border-radius: 5px; background: rgba(79,140,255,.1); display: flex; align-items: center; justify-content: center;}
.cdIcon svg{width: 17px; height: 17px; stroke:var(--blue) }
.contact .label{font-size: .85em; font-weight: 500; color: rgba(255,255,255,.35); letter-spacing: .08em; text-transform: uppercase;}
.cdText .value{font-size: .9em; color: rgba(255,255,255,.8); font-weight: 500; margin-top: 2px;}

@media (max-width: 900px) {
  .contactGrid{grid-template-columns: 1fr; gap: 35px;}
  .cLogo>.logo{width: 120px;}
  .cLogo>p{font-size: .85em;}
}

/* FORM */
.formGrid{display: grid; grid-template-columns: 1fr 1fr; gap: 16px;}
.formGroup{display: flex; flex-direction: column; gap: 6px;}
.formGroup.full{grid-column: 1 / -1;}
.formLabel{font-size: .85em; font-weight: 500; letter-spacing: .06em; color: rgba(255,255,255,.45); text-transform: uppercase; display: flex;}
.formLabel::after{content: ''; width: 4px; height: 4px; display: inline-block; margin-left: 5px; border-radius: 50%; background: var(--blue); transform: translateY(5px);}
.formInput, .formSelect, .formTextarea {background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 2px; padding: 12px 16px; font-size: .85em; color: var(--white); transition: border-color .2s, background .2s; outline: none;}
.formInput::placeholder, .formTextarea::placeholder{color: rgba(255,255,255,.2);}
.formInput:focus, .formSelect:focus, .formTextarea:focus{border-color: var(--blue); background: rgba(255,255,255,.07);}
.formSelect{appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.3)' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; color: rgba(255,255,255,.7);}
.formSelect option{background: #1a2540; color: var(--white);}
.formTextarea{resize: vertical; min-height: 100px; resize: none;}
.formAgreeRow{display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;}
.formAgree{display: flex; align-items: center; gap: 10px;}
.formAgree input[type="checkbox"]{width: 16px; height: 16px; flex-shrink: 0; accent-color: var(--blue); cursor: pointer; transform: translateY(1px);}
.formAgreeText{font-size: .8em; color: rgba(255,255,255,.4); line-height: 1.6;}
.formAgreeText a {color: var(--sky); text-decoration: underline; }
.formSubmit{width: 100%; margin-top: 20px; background: var(--blue); color: var(--white); font-weight: 600; font-size: .95em; letter-spacing: .06em; padding: 15px; border-radius: 2px; transition: background .2s, opacity .2s; display: flex; align-items: center; justify-content: center; gap: 8px;}
.formSubmit:hover:not(:disabled){background: var(--blue-hover);}
.formSubmit:disabled{opacity: .35; cursor: not-allowed; background: var(--blue);}

@media (max-width: 900px) {
  .formGrid { grid-template-columns: 1fr; }
  .formSubmit{padding: 12px 15px; font-size: .92em;}
}

/*
=========================================================================
REVEAL UTIL
=========================================================================
*/
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .6s var(--ease), transform .6s var(--ease);}
.reveal.visible { opacity: 1; transform: none;}
.revealDelay1{transition-delay: .1s;}
.revealDelay2{transition-delay: .2s;}
.revealDelay3{transition-delay: .3s;}