@charset "utf-8";

/*
* File       : sub.css
* Author     : B-WORKER
*
* SUMMARY:
* 1) COMMON   — sub-visual, caption-badge (모든 서브페이지 공통)
* 2) SUB01    — 인사말ddd (sub-intro / sub-stats / sub-promise)
*/
      
/* ==========================================
   0) SUB VARIABLES 
   ============================================= */
:root{--footer-mt-sub:180rem; --sub-content-pt:150rem}

@media all and (max-width:1480px){
	:root{--footer-mt-sub:160rem; --sub-content-pt:130rem}
}

@media all and (max-width:1200px){
	:root{--footer-mt-sub:140rem; --sub-content-pt:110rem}
}

@media all and (max-width:1023px){
	:root{--footer-mt-sub:120rem; --sub-content-pt:90rem}
}

@media all and (max-width:860px){
	:root{--footer-mt-sub:90rem; --sub-content-pt:70rem}
}

@media all and (max-width:540px){
	:root{--footer-mt-sub:84rem; --sub-content-pt:64rem}

	p br{display:none}
}

/* ==========================================
   1) COMMON
   ========================================== */
.sub-content > div{padding-bottom:var(--footer-mt-sub)}
.sub-content > div{padding-top:var(--sub-content-pt); position:relative}

.line-bar-bg{width:1px; height:100%; position:absolute; top:0; border-right:1px solid var(--br-light); display:block}
.line-bar-bg.bar01{left:5.3125%}
.line-bar-bg.bar02{left:35.9375%}
.line-bar-bg.bar03{left:43.3333%}

body:has(.comm-navigation) .sub-content{padding-top:0}
body:has(#header.hide)  .comm-navigation{top:0}

.comm-navigation{position:sticky; top:100rem; z-index:10; justify-content:center; gap:128rem; align-items:center; border-bottom:1px solid var(--br-light); padding:19rem 0; transition:var(--trans-01)}
.comm-navigation a{font-size:var(--font-19); font-weight:500; color:var(--w); font-family:var(--lang-en)}
.comm-navigation a.active{color:var(--c-primary)}
.comm-navigation + *{padding-top:var(--sub-content-pt)}

/* ------ sub-visual ------ */
#sub-visual{position:relative; height:628rem; overflow:hidden; border-bottom:1px solid var(--br-light)}
#sub-visual strong.title-eng{font-size:190rem; font-weight:800; font-family:var(--lang-en); position:absolute; left:50%; transform:translateX(-50%); line-height:1; bottom:-30rem; background:linear-gradient(180deg, rgba(31, 60, 84, 0.47) 6.47%, rgba(7, 17, 26, 0.00) 131.47%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; width:100%; text-align:center; z-index:-1}

.sub-visual__watermark{position:absolute; left:50%; bottom:0; transform:translateX(-50%); font-family:var(--lang-en); font-size:190rem; font-weight:800; white-space:nowrap; background:linear-gradient(to bottom, rgba(31,60,84,0.47) 0%, rgba(7,17,26,0) 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; pointer-events:none; user-select:none}
.sub-visual__content{position:absolute; left:50%; top:264rem; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:34rem; white-space:nowrap}
.sub-visual__bc{display:flex; align-items:center; gap:22rem}
.sub-visual__bc-home{display:flex; align-items:center}
.sub-visual__bc-sep{display:block; width:12rem; height:1rem; background:rgba(255,255,255,0.6); transform:rotate(-60deg)}
.sub-visual__title{padding-top:264rem; text-align:center}
.sub-visual__progress{position:absolute; left:0; bottom:50rem; width:100%; height:1rem; background:rgba(255,255,255,0.05)}
.sub-visual__progress::before{content:''; position:absolute; left:0; top:0; width:102rem; height:1rem; background:var(--c-primary)}
.sub-visual__progress::after{content:''; position:absolute; right:0; top:0; width:102rem; height:1rem; background:var(--c-primary)}
.sub-visual__bc-home img{width:17rem; height:15rem}
.sub-visual__bc span, .sub-visual__bc strong{font-size:14rem; font-weight:500; color:var(--w); line-height:1}
.sub-visual__title h2{font-size:72rem; font-weight:700; line-height:1.31; letter-spacing:0.03em; color:var(--w); text-align:center; font-family:"Pretendard",sans-serif; margin-top:34rem}

/* ------ caption-badge ------ */
.caption-badge{display:inline-flex; align-items:center; gap:12rem; padding:0 16rem; height:28rem}
.caption-badge__dot{width:6rem; height:6rem; background:var(--c-primary); border-radius:50%; flex-shrink:0}
.caption-badge__text{font-size:14rem; font-weight:700; color:var(--w); line-height:2}
.caption-badge--sm .caption-badge__text{font-size:13rem; font-weight:600}

.lnb-inner{justify-content:center; align-items:center; gap:22rem}
.lnb-inner .select-link__btn{color:var(--w); font-size:14rem; justify-content:space-between; gap:16rem}
.lnb-inner .select-link__btn::after{position:relative}
.lnb-inner .select-link{width:auto; min-width:90rem}
.lnb-inner i{width:1rem; height:12rem; background:var(--op-w20); display:block; transform:rotate(-150deg)}

.lnb-select{position:relative; z-index:10}
.lnb-select .select-link ul.depth1, .lnb-select .select-link ul.depth2{width:100%; background-color:var(--op-b90); backdrop-filter:blur(20rem); left:50%; min-width:160rem; transform:translateX(-50%)}
.lnb-select .select-link ul.depth1 ul.sub-menu{display:none}

/* ── 반응형 ── */

@media all and (max-width:1480px){
	#sub-visual{height:560rem}
	#sub-visual strong.title-eng{font-size:160rem}
	.sub-visual__watermark{font-size:160rem}
	.sub-visual__title h2{font-size:60rem}
	.sub-visual__content{top:220rem}
	.sub-visual__title{padding-top:220rem}
}

@media all and (max-width:1200px){
	#sub-visual{height:500rem}
	#sub-visual strong.title-eng{font-size:130rem}
	.sub-visual__watermark{font-size:130rem}
	.sub-visual__title h2{font-size:52rem}
	.sub-visual__content{top:190rem}
	.sub-visual__title{padding-top:190rem}

	.comm-navigation{gap:80rem}

	.line-bar-bg.bar03{left:36%}
}

@media all and (max-width:1023px){
	#sub-visual{height:420rem}
	#sub-visual strong.title-eng{font-size:180rem}
	.sub-visual__watermark{font-size:100rem}
	.sub-visual__title h2{font-size:44rem}
	.sub-visual__content{top:160rem}
	.sub-visual__title{padding-top:160rem}

	.comm-navigation{gap:48rem; top:80rem}

	.line-bar-bg.bar02, .line-bar-bg.bar03{display:none}
}

@media all and (max-width:860px){
	#sub-visual{height:360rem}
	#sub-visual strong.title-eng{font-size:120rem}
	.sub-visual__watermark{font-size:80rem}
	.sub-visual__title h2{font-size:36rem}
	.sub-visual__content{top:130rem}
	.sub-visual__title{padding-top:130rem}

	.comm-navigation{gap:32rem; top:70rem}
}

@media all and (max-width:540px){
	#sub-visual{height:320rem; overflow:visible; z-index:20}
	#sub-visual strong.title-eng{width:auto; font-size:75rem; bottom:0; overflow:hidden; height:59rem}
	.sub-visual__watermark{font-size:60rem}
	.sub-visual__title h2{font-size:34rem; margin-top:34rem}
	.sub-visual__content{top:110rem; gap:20rem}
	.sub-visual__title{padding-top:126rem}

	.line-bar-bg{display:none}

	.lnb-inner{gap:16rem}
	.lnb-inner .select-link__btn{font-size:13rem; line-height:1; justify-content:space-between; gap:10rem}
	.lnb-home svg{width:15rem}
	.lnb-select .select-link__btn::after{position:relative}
	.lnb-select .select-link__btn::after{width:12rem; height:12rem; background-size:contain}
	.lnb-select .select-link ul a{font-size:15rem; padding:3rem 0}
	.lnb-select .select-link ul.depth1, .lnb-select .select-link ul.depth2{width:120rem; left:-20rem}

	.comm-navigation a{font-size:15rem}
	.comm-navigation{gap:40rem; padding:12rem 0; top:68rem; overflow-x:auto; /* justify-content: space-between; */}
}

/* ========================================
 * PAGE : 회사소개 (about)
 * CLASS ORDER : A-Z / 1rem = 1px
 * ======================================== */

/* ── caption 공통 ── */
.ab-caption{align-items:center; display:flex; gap:12rem; padding-left:16rem; position:relative}
.ab-caption__dot{background:#14b8ea; display:block; height:6rem; left:0; position:absolute; top:50%; transform:translateY(-50%); width:6rem}
.ab-caption__text{color:var(--w); font-family:var(--lang-en); font-size:13rem; font-weight:600; line-height:1.538}

/* ── conts 섹션 ── */
.ab-conts{padding-top:150rem}
.ab-conts__desc{color:var(--op-w80); font-weight:300; line-height:1.6; margin:0}
.ab-conts__head{display:flex; flex-direction:column; gap:12rem}
.ab-conts__img{border-radius:10rem; display:block; height:100%; object-fit:cover; width:100%}
.ab-conts__img-wrap{border-radius:10rem; flex-shrink:0; height:600rem; overflow:hidden; position:relative; width:600rem}
.ab-conts__overlay{background:rgba(18,30,72,0.2); border-radius:10rem; inset:0; position:absolute}
.ab-conts__sec{align-items:center; display:flex; gap:140rem}
.ab-conts__text{display:flex; flex-direction:column; flex:1; gap:32rem; min-width:0}
.ab-conts__title{color:var(--w); font-size:53rem; font-weight:700; line-height:1.302; margin:0}
.ab-conts__sec + .ab-conts__sec{margin-top:80rem}
.ab-conts__sec--reverse{justify-content:flex-end}

/* ── count 섹션 ── */
.ab-count{overflow:hidden; padding:120rem 0; position:relative; background:#141a27}
.ab-count__bg{inset:0; opacity:0.32; overflow:hidden; position:absolute}
.ab-count__digit{color:#14b8ea; font-family:var(--lang-en); font-size:80rem; font-weight:700; line-height:1}
.ab-count__item{align-items:center; display:flex; flex:1; flex-direction:column; gap:12rem}
.ab-count__label{color:var(--w); font-size:15rem; font-weight:600; line-height:1.333; text-align:center}
.ab-count__num{align-items:flex-end; display:flex; gap:4rem}
.ab-count__sep{align-self:center; background:rgba(255,255,255,0.25); flex-shrink:0; height:77rem; width:1px}
.ab-count__stats{align-items:center; display:flex; gap:21rem; list-style:none; margin:0; padding:0; width:100%}
.ab-count__title{color:var(--w); margin:0 0 80rem; text-align:center}
.ab-count__unit{color:#14b8ea; font-size:23rem; font-weight:600; line-height:1; padding-bottom:10rem}
.ab-count__bg img{display:block; height:100%; object-fit:cover; width:100%}
.ab-count__digit--en{font-size:70rem}

/* ── intro 섹션 ── */
.ab-intro{padding-bottom:var(--space120)}
.ab-intro__desc{color:var(--op-w80); font-size:var(--font-19); font-weight:400; line-height:1.684; margin:0; text-align:center}
.ab-intro__img-item{flex:1; list-style:none}
.ab-intro__img-wrap{border-radius:10rem; overflow:hidden; position:relative}
.ab-intro__imgs{gap:42rem; list-style:none; margin:0 0 60rem; padding:0}
.ab-intro__overlay{background:rgba(20,18,60,0.2); inset:0; position:absolute}
.ab-intro__title{margin:0 0 90rem; text-align:center}
.ab-intro__img-wrap img{aspect-ratio:319/276; border-radius:10rem; display:block; object-fit:cover; width:100%}

/* ── page ── */
.ab-page{display:flex; flex-direction:column; position:relative; z-index:1}

/* ── 반응형 ── */

@media all and (max-width:1480px){
	.ab-conts__img-wrap{height:500rem; width:500rem}
	.ab-conts__sec{gap:80rem}
	.ab-conts__title{font-size:44rem}
	.ab-count__digit{font-size:64rem}
	.ab-count__title{font-size:44rem}
	.ab-intro__title{font-size:44rem}
}

@media all and (max-width:1200px){
	.ab-conts__img-wrap{height:420rem; width:420rem}
	.ab-conts__sec{gap:60rem}
	.ab-conts__title{font-size:38rem}
	.ab-count__digit{font-size:56rem}
	.ab-count__title{font-size:38rem}
	.ab-intro__imgs{gap:24rem}
	.ab-intro__title{font-size:38rem}
}

@media all and (max-width:1023px){
	.ab-conts{padding-top:100rem}
	.ab-conts__desc br{display:none}
	.ab-conts__title{font-size:32rem}
	.ab-count{padding:80rem 0}
	.ab-count__digit{font-size:48rem}
	.ab-count__digit--en{font-size:36rem}
	.ab-count__sep{height:50rem}
	.ab-count__title{font-size:28rem; margin-bottom:60rem}
	.ab-intro__imgs{gap:16rem}
	.ab-intro__title{font-size:32rem; margin-bottom:60rem}
	.ab-intro__imgs[data-grid="4"]{grid-template-columns:1fr 1fr 1fr 1fr}
}

@media all and (max-width:860px){
	.ab-conts{padding-top:80rem}
	.ab-conts__sec{gap:40rem}
	.ab-conts__img-wrap{height:300rem; width:100%}
	.ab-conts__sec{flex-direction:column; gap:34rem}
	.ab-conts__sec--reverse{flex-direction:column-reverse}
	.ab-conts__sec + .ab-conts__sec{margin-top:64rem}
	.ab-conts__title{font-size:28rem}
	.ab-count{padding:60rem 0}
	.ab-count__digit{font-size:44rem}
	.ab-count__digit--en{font-size:32rem}
	.ab-count__sep{height:40rem}
	.ab-count__title{font-size:26rem; margin-bottom:48rem}
	.ab-count__unit{font-size:18rem}
	.ab-intro__imgs{gap:12rem}
	.ab-intro__title{font-size:28rem; margin-bottom:48rem}
}

@media all and (max-width:540px){
	.ab-caption__text{font-size:12rem}
	.ab-conts{padding-top:60rem}
	.ab-conts__sec{gap:32rem}
	.ab-conts__title{font-size:26rem}
	.ab-count{padding:60rem 0}
	.ab-count__digit{font-size:40rem}
	.ab-count__digit--en{font-size:28rem}
	.ab-count__stats{flex-direction:column; gap:32rem}
	.ab-count__sep{height:1px; width:46rem}
	.ab-count__title{font-size:24rem; margin-bottom:40rem}
	.ab-count__unit{font-size:16rem}
	.ab-intro__title{font-size:26rem; margin-bottom:40rem}
	.ab-intro__imgs[data-grid="4"]{grid-template-columns:1fr 1fr}
	.ab-intro__desc br{display:none}
	.ab-intro__imgs{margin-bottom:32rem}
	.ab-conts__text{gap:22rem}
	.ab-conts__sec + .ab-conts__sec{margin-top:54rem}
	.ab-conts__img-wrap{height:230rem}
}

/* ==========================================
   3) SUB01-02 — 연혁
   ========================================== */
.history-wrap{justify-content:space-between}

.history-page{padding-top:0 !important}

.history-list{position:relative; justify-content:flex-end}
.history-list *{color:var(--w)}
.history-list [class^="year"]{font-size:50rem; font-family:var(--lang-en); font-weight:700}
.history-list__in li{display:flex}
.history-list__in li + li{margin-top:34rem}
.history-list__in *{font-family:17rem}
.history-list__in span{font-weight:700; width:60rem; font-family:var(--lang-en)}
.history-list__in em{flex:1; font-weight:300; font-family:var(--lang-ko); color:var(--op-w50)}
.history-list__in em *{font-weight:300; font-family:var(--lang-ko); color:var(--op-w50)}

.history-item:last-child .history-list-wrap{padding-bottom:0}
.history-item .year-back{width:200rem}
.history-item .year-back i{position:relative; color:var(--c-primary)}

.history-list-wrap{padding-bottom:140rem; position:relative; flex:1}

.history-line{width:1px; height:calc(100% + var(--sub-content-pt) + var(--footer-mt-sub)); border-right:1px solid var(--br-light); position:absolute; top:calc(-1 * var(--sub-content-pt)); left:220rem}

.history-title-inner{display:grid; position:sticky; top:200rem}

.history-title{grid-area:1 / 1; opacity:0; transform:translateY(28rem); transition:opacity 0.5s ease, transform 0.5s ease; visibility:hidden; pointer-events:none}
.history-title.active{opacity:1; transform:translateY(0); visibility:visible; pointer-events:auto}
.history-title.exit{opacity:0; transform:translateY(-28px); visibility:visible; transition:opacity 0.4s ease, transform 0.4s ease}
.history-title span{display:block; color:var(--c-primary); margin-bottom:7rem}
.history-title h3 em{display:block}

.history-sticky{position:sticky; top:40vh; height:64rem}

@media all and (max-width:1200px){
	.history-contents{width:65%}
}

@media all and (max-width:1023px){
	.history-line{left:160rem}
	.history-list [class^="year"]{font-size:42rem}
	.history-item .year-back{width:120rem}
	.history-list-wrap{padding-bottom:100rem; flex:1}
}

@media (max-width:860px){

}

@media (max-width: 540px){
	.histroy-title--wrap{display:none}

	.history-contents{width:100%}
	.history-list__in span{width:100%; font-size:14rem}
	.history-list__in li{flex-direction:column}
	.history-item .year-back{width:68rem}
	.history-list [class^="year"]{font-size:24rem}
	.history-list__in li + li{margin-top:16rem}
	.history-line{left:90rem}
	.history-list-wrap{padding-bottom:80rem}
	.history-list__in em{line-height:1.3}
}

/* ==========================================
   4) SUB01-03 — 조직도
   ========================================== */

/* ── card ── */
.sub01_03 #footer{margin-top:var(--footer-mt-sub)}

.dept-card{background:#0d223a; border:1px solid transparent; border-radius:10rem; box-sizing:border-box; display:flex; flex-direction:column; flex-shrink:0; height:210rem; justify-content:space-between; list-style:none; padding:32rem 30rem; transition:var(--trans-04); width:319rem}
.dept-card__icon{display:flex; flex-shrink:0; height:36rem}
.dept-card__info{display:flex; flex-direction:column; gap:12rem}
.dept-card__sub{color:rgba(255,255,255,0.6); font-size:var(--font-14); line-height:1.5}
.dept-card__title{color:var(--w); font-size:var(--font-22); font-weight:700; line-height:1.45}
.dept-card__icon img{display:block; height:100%; object-fit:contain; width:auto}
.dept-card__info *{font-family:var(--lang-ko)}

/* ── org chart ── */
.dept-org{align-items:center; display:flex; flex-direction:column}
.dept-org__body{border-left:1px dashed var(--c-02); border-right:1px dashed var(--c-02); border-radius:10rem 10rem 0 0; border-top:1px dashed var(--c-02); box-sizing:border-box; padding-top:33rem; width:100%}
.dept-org__center{align-items:center; display:flex; flex-direction:column; width:100%; padding:0 156rem}
.dept-org__circle{align-items:center; background:var(--bg-01); border:1px solid var(--c-primary); border-radius:100%; display:flex; height:220rem; justify-content:center; overflow:hidden; width:220rem}
.dept-org__lineBox{width:100%; height:40rem; border-radius:10rem 10rem 0 0; border:1px dashed var(--c-primary); border-bottom:0}
.dept-org__center i{border-left:1px dashed #14b8ea; display:block; height:109rem; margin:0 auto; width:0}
.dept-org__circle img{display:block; height:auto; max-width:80rem; object-fit:contain}

/* ── row ── */
.dept-org__row{align-items:stretch; box-sizing:border-box; display:flex; gap:41rem; list-style:none; margin:0; padding:0 0 60rem; width:100%}
.dept-org__row--first{justify-content:center}
.dept-org__row--second{justify-content:center}

/* ── section ── */
.dept-section{background:#131926; overflow:hidden; padding:150rem 0; width:100%}
.dept-section__title{color:var(--w); font-size:53rem; font-weight:700; line-height:1.3; margin:0 0 100rem; text-align:center}

/* ── 반응형 ── */

@media all and (max-width:1480px){
	.dept-section__title{font-size:44rem}
	.dept-org__center{padding:0 80rem}
}

@media all and (max-width:1200px){
	.dept-card{padding:28rem 24rem; width:280rem}
	.dept-org__center{padding:0 40rem}
	.dept-org__circle{height:180rem; width:180rem}
	.dept-section__title{font-size:38rem}
}

@media all and (max-width:1023px){
	.dept-card{flex:1; height:auto; min-height:180rem; width:auto}
	.dept-org__center{padding:0 20rem}
	.dept-org__circle{height:160rem; width:160rem}
	.dept-org__row{flex-wrap:wrap; gap:20rem; padding-bottom:22rem}
	.dept-section{padding:100rem 0}
	.dept-section__title{font-size:32rem; margin-bottom:60rem}
}

@media all and (max-width:860px){
	.dept-card{padding:24rem 20rem}
	.dept-org__center{padding:0}
	.dept-org__circle{height:140rem; width:140rem}
	.dept-org__row{gap:16rem}
	.dept-section{padding:80rem 0}
	.dept-section__title{font-size:26rem}
}

@media all and (max-width:540px){
	.dept-card{min-height:160rem}
	.dept-org__center i{height:60rem}
	.dept-org__circle{height:120rem; width:120rem}
	.dept-org__row{gap:12rem}
	.dept-section{padding:60rem 0}
	.dept-section__title{font-size:22rem; margin-bottom:40rem}
	.dept-org__circle img{max-width:40rem}
	.dept-card__icon{height:26rem}
	.dept-org__lineBox{height:26rem}
	.dept-org__center i{height:40rem}
	.dept-card__info{gap:6rem}
}

/* ==========================================
   5) SUB01-04 — 파트너사
   ========================================== */
body:has(.partner-list--wrap) .sub-content{position:relative}

.partner-list--wrap{margin-top:100rem; position:relative; z-index:1; border-top:1px solid var(--br-light)}

.partner-lineUp{border-bottom:1px solid var(--br-light)}
.partner-lineUp ul > li{width:25%; border-left:1px solid var(--br-light); height:210rem; display:flex; align-items:center; justify-content:center}
.partner-lineUp ul > li:last-child{border-right:1px solid var(--br-light)}
.partner-lineUp ul > li img{max-width:60%}

.partner-title{text-align:center}
.partner-title p{margin-top:31rem}

.global-map{position:absolute; right:0; bottom:calc(-1 *(var(--footer-mt-sub)))}

/* ── 반응형 ── */

@media all and (max-width:1200px){
	.partner-lineUp ul > li{height:180rem}
	.partner-lineUp ul > li img{max-height:58rem}

	.global-map{max-width:70%}
}

@media all and (max-width:1023px){
	.partner-list--wrap{margin-top:80rem}
	.partner-lineUp ul > li{height:auto; padding:40rem 0}

	.global-map{max-width:88%; opacity:0.6}
}

@media all and (max-width:860px){
	.partner-lineUp ul > li{width:50%; padding:20rem 0}
	.partner-list--wrap{margin-top:42rem}

	.global-map{bottom:-30rem}
}

@media all and (max-width:540px){
	.partner-list--wrap{margin-top:60rem}
	.partner-title p{margin-top:16rem}
}

/* ========================================
 * COMPONENT : 연락처 카드 (contact-info)
 * CLASS ORDER : A-Z / 1rem = 1px
 * ======================================== */
.location-page h3{text-align:center}
.location-page  .comm-title{margin-top:64rem}

.location-map{width:100%; border-radius:10rem; height:500rem; overflow:hidden; margin-top:100rem}
.location-map iframe{width:100%; height:100%}

.location-bar{width:100%; height:1px; border-top:1px solid var(--br-light); display:block; margin-top:24rem; margin-bottom:45rem}

.ci-badge{border:1px solid rgba(20,184,234,0.3); border-radius:90rem; color:#14b8ea; display:inline-flex; font-family:var(--lang-en); font-size:11rem; font-weight:700; line-height:1; padding:6rem 14rem; align-items:center}

.ci-card{background:#0d223a; border-radius:10rem; box-sizing:border-box; padding:30rem 30rem 25rem; width:100%}

.ci-list{display:flex; gap:20rem; list-style:none; margin:0; padding:0}

.ci-value{color:var(--w); display:block; font-family:var(--lang-en); margin-top:32rem; font-size:18rem; font-weight:600; line-height:1.556; text-align:right}

a.ci-value{transition:var(--trans-04)}
a.ci-value:hover{color:#14b8ea}

/* ── 반응형 ── */

@media all and (max-width:1480px){
	.location-map{height:460rem}
}

@media all and (max-width:1200px){
	.location-map{height:420rem; margin-top:80rem}
	.location-page .comm-title{margin-top:48rem}
}

@media all and (max-width:1023px){
	.ci-card{height:auto}
	.ci-value{font-size:16rem}

	.location-map{height:380rem}
	.location-page .comm-title{margin-top:40rem}
}

@media all and (max-width:860px){
	.ci-card{padding:20rem}
	.ci-value{font-size:15rem}

	.location-map{height:320rem; margin-top:60rem}
}

@media all and (max-width:540px){
	.ci-list{flex-direction:column; gap:12rem}
	.ci-card{height:auto}
	.ci-value{margin-top:6rem}
	.ci-badge{padding:5rem 12rem; min-width:60rem; text-align:center; align-items:center; justify-content:center}

	.location-map{height:260rem; margin-top:48rem}
	.location-page .comm-title{margin-top:32rem}
	.location-bar{margin-top:20rem; margin-bottom:36rem}
}

/* ==========================================
   4) SUB02-01 — 사업분야 상세페이지
   ========================================== */
body:has(.product-view) .sub-content{padding-top:0}
body:has(.product-view) #footer{margin-top:0}
body:has(.product-view) #sub-visual{border-bottom:0; height:453rem}
body:has(.product-view) #sub-visual strong{display:none}
body:has(.product-view) .sub-visual__title{padding-top:230rem}
body:has(.product-view) .sub-content > div{padding-bottom:0}

.dot-list{display:flex; flex-direction:column; gap:8rem; list-style:none; margin:0; padding:0}
.dot-list__date{color:var(--w); font-weight:500; line-height:1.65; white-space:nowrap}
.dot-list__dot{background:#14b8ea; border-radius:50%; display:inline-block; flex-shrink:0; height:4rem; width:4rem}
.dot-list__item{align-items:center; display:flex; gap:12rem}
.dot-list__text{color:var(--w); font-weight:200; line-height:1.65}
.dot-list__item *{font-family:var(--lang-ko)}

.prd-divider{background:rgba(255,255,255,0.15); border:none; height:1px; margin:80rem 0; width:100%}

.prd-label{color:rgba(255,255,255,0.4); display:block; font-weight:600; font-family:var(--lang-en); font-size:14rem; line-height:2; text-transform:uppercase}

.prd-meta{display:flex; flex-direction:column; gap:8rem}
.prd-meta__name{color:var(--w); font-weight:600; line-height:1.65; margin:0}

.prd-part{align-items:center; display:flex; gap:161rem}
.prd-part__conts{display:flex; flex-direction:column; gap:25rem}
.prd-part__desc{color:#14b8ea; font-weight:200; line-height:1.65; margin:0}
.prd-part__info{display:flex; flex:1 0 0; flex-direction:column; gap:62rem; min-width:0}
.prd-part__name{color:var(--w); display:block; font-size:32rem; font-weight:700; line-height:1.5}
.prd-part__thumb{flex-shrink:0; height:420rem; position:relative; width:677rem; background-color:var(--w); border-radius:10rem; overflow:hidden}
.prd-part__thumb-bg{background:var(--w); border-radius:10rem; height:100%; left:0; position:absolute; top:0; width:100%}
.prd-part__title-wrap{display:flex; flex-direction:column; gap:8rem}
.prd-part + .prd-part{margin-top:80rem; padding-top:80rem; border-top:1px solid var(--br-light)}
.prd-part__thumb img{width:100%; height:100%; object-fit:cover}
.prd-part [data-list] > *::before{background-color:var(--w); top:12rem}
.prd-part [data-list="dot"] > *{padding-left:16rem}

.prd-video-btn{-webkit-backdrop-filter:blur(7px); align-items:center; backdrop-filter:blur(7px); background:rgba(255,255,255,0.3); border:1px solid #14b8ea; border-radius:40rem; bottom:20rem; color:#14b8ea; cursor:pointer; display:flex; font-family:var(--lang-ko); font-size:15rem; font-weight:600; gap:16rem; left:50%; line-height:1.87; padding:9rem 20rem 9rem 11rem; position:absolute; transform:translateX(-50%); transition:var(--trans-04); white-space:nowrap}
.prd-video-btn:hover{background:rgba(20,184,234,0.2)}
.prd-video-btn i{width:26rem; height:26rem; background-color:var(--c-primary); border-radius:100%; display:flex; align-items:center; justify-content:center}
.prd-video-btn i svg{position:relative; left:2rem}

.product-contact--wrap{margin-top:140rem; padding-top:218rem; border-top:1px solid var(--br-light)}

.product-visual{padding:0 52rem}
.product-visual img{border-radius:10rem; height:502rem; width:100%; object-fit:cover; object-position:50% 50%}

.product-view{padding-top:var(--sub-content-pt)}

/* ── 반응형 ── */

@media all and (max-width:1480px){
	body:has(.product-view) #sub-visual{height:400rem}
	body:has(.product-view) .sub-visual__title{padding-top:200rem}

	.prd-part{gap:80rem}
	.prd-part__thumb{height:380rem; width:560rem}
	.prd-part__thumb-img{height:266rem; left:100rem; top:50rem; width:320rem}
	.prd-part__thumb img{object-position:50% 50%}

	.product-visual{padding:0 30rem}
	.product-visual img{height:460rem}
}

@media all and (max-width:1200px){
	body:has(.product-view) #sub-visual{height:360rem}
	body:has(.product-view) .sub-visual__title{padding-top:180rem}

	.prd-part{gap:60rem}
	.prd-part__thumb{height:340rem; width:460rem}
	.prd-part__thumb-img{height:230rem; left:70rem; top:45rem; width:280rem}
	.prd-part__name{font-size:28rem; line-height:1.43}

	.product-visual{padding:0 20rem}
	.product-visual img{height:400rem}
	.product-contact--wrap{margin-top:100rem; padding-top:160rem}
}

@media all and (max-width:1023px){
	body:has(.product-view) #sub-visual{height:320rem}
	body:has(.product-view) .sub-visual__title{padding-top:160rem}

	.dot-list__date, .dot-list__text, .prd-meta__name, .prd-part__desc{font-size:16rem}

	.prd-divider{margin:60rem 0}
	.prd-part__info{gap:40rem}
	.prd-part__name{font-size:23rem}
	.prd-part__thumb-bg{border-radius:10rem}
	.prd-label{line-height:1.4}
	.prd-view{gap:60rem}
	.prd-meta{gap:6rem}
	.prd-part [data-list="dot"] > *{margin-bottom:8rem}
	.prd-part + .prd-part{margin-top:54rem; padding-top:54rem}
	.prd-video-btn{padding:4rem 12rem 4rem 8rem; gap:8rem; font-size:14rem}
	.prd-video-btn i{width:22rem; height:22rem}

	.product-visual img{max-height:360rem}
	.product-contact--wrap{margin-top:80rem; padding-top:190rem}
}

@media all and (max-width:860px){
	body:has(.product-view) #sub-visual{height:280rem}
	body:has(.product-view) .sub-visual__title{padding-top:140rem}

	.prd-part{align-items:flex-start; flex-direction:column; gap:40rem}
	.prd-part__thumb{aspect-ratio:16 / 9; width:100%}
	.prd-part + .prd-part{margin-top:60rem; padding-top:60rem}
	.prd-divider{margin:50rem 0}
	.prd-part{gap:32rem}
	.prd-part + .prd-part{margin-top:50rem; padding-top:50rem}
	.prd-part__info{gap:32rem}
	.prd-part__name{font-size:24rem}

	.product-visual{padding:0; border-radius:0}
	.product-visual img{height:300rem; border-radius:0}
	.product-contact--wrap{margin-top:60rem; padding-top:160rem}
}

@media all and (max-width:540px){
	body:has(.product-view) #sub-visual{height:240rem}
	body:has(.product-view) .sub-visual__title{padding-top:120rem}

	.prd-divider{margin:40rem 0}
	.prd-part + .prd-part{margin-top:40rem; padding-top:40rem}
	.prd-part__name{font-size:22rem; line-height:1.45}
	.prd-part__thumb{height:260rem}
	.prd-part__thumb-img, .prd-part__thumb-img--contain{height:200rem}
	.prd-part__title-wrap{gap:2rem}
	.prd-video-btn{font-size:13rem; padding:2rem 7rem 2rem 5rem; gap:6rem}
	.prd-video-btn i{width:20rem; height:20rem}
	.prd-view{gap:40rem}
	.prd-part__conts{gap:18rem}
	.prd-part__info{gap:24rem}
	.prd-label{font-size:13rem}
	.prd-part [data-list] > *::before{width:3rem; height:3rem; top:10rem}
	.prd-part [data-list="dot"] > *{padding-left:12rem}

	.product-visual img{height:240rem}
	.product-contact--wrap{margin-top:48rem; padding-top:120rem}

	.dot-list__date, .dot-list__text, .prd-meta__name, .prd-part__desc{font-size:14rem}
}

/* ==========================================
   4) SUB02-02 — 사업분야 리스트
   ========================================== */
.product-page:has(.product-list) h3{text-align:center}

.product-list{padding:0 52rem; gap:20rem; margin-top:80rem}
.product-list > a{flex:1; position:relative}
.product-list > a figure::before{content:""; transition:var(--trans-01); position:absolute; width:100%; height:100%; z-index:1; opacity:0; left:0; top:0; background-color:rgba(10, 36, 76, 0.20)}
.product-list > a figure{border-radius:10rem; position:relative; background-color:#07111A; transition:var(--trans-01); overflow:hidden; width:100%; aspect-ratio:435 / 576}
.product-list > a figure img{width:100%; height:100%; object-fit:cover; object-position:50% 50%; transition:var(--trans-01)}
.product-list > a strong{margin-top:24rem; display:block; transition:var(--trans-01)}
.product-list > a.not-hover figure::before{opacity:1}
.product-list > a.not-hover figure{opacity:0.4}
.product-list > a.not-hover strong{opacity:0.4}
.product-list > a:hover figure img{transform:scale(1.2)}

/* ── 반응형 ── */

@media all and (max-width:1480px){
	.product-list{gap:16rem; padding:0 30rem}
}

@media all and (max-width:1200px){
	.product-list{gap:14rem; padding:0 20rem}
}

@media all and (max-width:1023px){
	.product-list{flex-wrap:wrap; gap:16rem; margin-top:60rem}
	.product-list > a{flex:0 0 calc(50% - 8rem)}
	.product-list > a strong{margin-top:16rem}
}

@media all and (max-width:860px){
	.product-list{gap:12rem}
}

@media all and (max-width:540px){
	.product-list{flex-direction:column; gap:20rem; margin-top:48rem}
	.product-list > a{flex:none; width:100%}
}

/* ========================================
 * SECTION : 제품 아이템 리스트
 * CLASS ORDER : A-Z / 1rem = 1px
 * ======================================== */
body:has(.product-main-page) .sub-content > div{padding-top:0}

.product-main-page section + section{border-top:1px solid var(--br-light); margin-top:var(--space140); padding-top:var(--space140)}

.pro-grid{display:grid; gap:44rem 35rem; grid-template-columns:repeat(3, 1fr); list-style:none; margin:0; padding:0}

.pro-item{display:block}
.pro-item__divider{background:rgba(255,255,255,0.3); display:inline-block; height:10rem; width:1px}
.pro-item__fig{display:flex; flex-direction:column; gap:22rem; margin:0}
.pro-item__info{display:flex; flex-direction:column; gap:6rem}
.pro-item__meta{align-items:center; display:flex; gap:11rem}
.pro-item__meta-label{color:rgba(255,255,255,0.3); font-size:15rem; font-weight:400; line-height:1.333}
.pro-item__meta-value{color:var(--w); font-size:15rem; font-weight:400; line-height:1.333}
.pro-item__name{color:var(--w); display:block; font-size:var(--font-19); font-weight:700; line-height:1.684}
.pro-item__fig img{aspect-ratio:443/263; border-radius:10rem; display:block; object-fit:cover; width:100%}
.pro-item__info *{font-family:var(--lang-ko)}

.pro-section__desc{color:rgba(255,255,255,0.7); font-weight:300; line-height:1.647; margin:0}
.pro-section__head{display:flex; flex-direction:column; gap:11rem; margin-bottom:48rem}
.pro-section__head h3{color:var(--w); margin:0}

/* ── 반응형 ── */

@media all and (max-width:1480px){
	.pro-grid{gap:40rem 30rem}
	.pro-section__head{margin-bottom:40rem}
}

@media all and (max-width:1200px){
	.pro-grid{gap:36rem 24rem; grid-template-columns:repeat(3, 1fr)}
}

@media all and (max-width:1023px){
	.pro-grid{gap:36rem 20rem; grid-template-columns:repeat(2, 1fr)}
	.pro-section__head{margin-bottom:36rem}
}

@media all and (max-width:860px){
	.pro-grid{gap:28rem 30rem}
	.pro-section__head{margin-bottom:28rem}
}

@media all and (max-width:540px){
	.pro-grid{gap:32rem; grid-template-columns:1fr}
	.pro-section__head{margin-bottom:24rem; gap:6rem}
	.pro-item__fig{gap:10rem}
	.pro-item__meta-value, .pro-item__meta-label{font-size:14rem}
}

/* ========================================
 * SECTION : ESG
 * CLASS ORDER : A-Z / 1rem = 1px
 * ======================================== */
.esg-caption{align-items:center; display:flex; gap:12rem; padding-left:16rem; position:relative}
.esg-caption__dot{background:#14b8ea; display:block; height:6rem; left:0; position:absolute; top:2rem; width:6rem}
.esg-caption__text{color:var(--w); font-family:var(--lang-en); font-size:13rem; font-weight:600; line-height:1.538}

.esg-conts{align-items:flex-start; justify-content:space-between; display:flex; gap:132rem}

.esg-divider{background:rgba(255,255,255,0.15); border:none; height:1px; margin:100rem 0; width:100%}

.esg-list{display:flex; flex:1; flex-direction:column; width:100%; max-width:800rem}
.esg-list__desc{color:var(--w); font-weight:200; margin:61rem 0 0}
.esg-list__en{color:#14b8ea; font-family:var(--lang-en); font-size:13rem; font-weight:700; line-height:1.538; text-transform:uppercase}
.esg-list__fig{margin:35rem 0 0; overflow:hidden; border-radius:10rem}
.esg-list__head{display:flex; flex-direction:column; gap:4rem}
.esg-list__part{display:flex; flex-direction:column}
.esg-list__fig img{aspect-ratio:901/345; border-radius:10rem; display:block; object-fit:cover; width:100%}
.esg-list__head > strong{color:var(--w)}

.esg-sticky{display:flex; flex-direction:column; gap:28rem; position:sticky; top:120rem; width:377rem; flex-shrink:0}

.esg-title{color:var(--w); font-size:53rem; font-weight:700; line-height:1.302; margin:0}

/* ── 반응형 ── */

@media all and (max-width:1480px){
	.esg-conts{gap:80rem}
	.esg-divider{margin:80rem 0}
	.esg-list__desc{margin-top:50rem}
	.esg-list__fig{margin-top:28rem}
	.esg-list__ko{font-size:40rem}
	.esg-sticky{gap:22rem; width:300rem}
	.esg-title{font-size:44rem}

	.line-bar-bg.bar01{left:30rem}
}

@media all and (max-width:1200px){
	.esg-conts{gap:60rem}
	.esg-divider{margin:70rem 0}
	.esg-list{max-width:640rem}
	.esg-list__desc{margin-top:44rem}
	.esg-list__fig{margin-top:24rem}
	.esg-list__ko{font-size:38rem}
	.esg-sticky{gap:18rem}

	.line-bar-bg.bar01{display:none}
}

@media all and (max-width:1023px){
	.esg-conts{flex-direction:column; gap:48rem}
	.esg-divider{margin:60rem 0}
	.esg-list__desc{margin-top:36rem}
	.esg-list__fig{margin-top:20rem}
	.esg-list__ko{font-size:36rem}
	.esg-sticky{gap:16rem; position:static; width:100%}
	.esg-sticky .comm-title{justify-content:center; align-items:center; text-align:center}
	.esg-list{max-width:100%}
}

@media all and (max-width:860px){
	.esg-conts{gap:40rem}
	.esg-divider{margin:48rem 0}
	.esg-list__desc{margin-top:28rem}
	.esg-list__fig{margin-top:16rem}
	.esg-list__ko{font-size:32rem}
	.esg-sticky{gap:14rem}
}

@media all and (max-width:540px){
	.esg-divider{margin:40rem 0}
	.esg-list__desc{margin-top:20rem}
	.esg-list__fig{margin-top:14rem}
	.esg-list__ko{font-size:28rem}
	.esg-sticky{gap:12rem}
	.esg-list__part:first-child{padding-top:40rem; border-top:1px solid var(--br-light)}
	.esg-divider{background-color:var(--br-light)}
}

/* ========================================
 * SECTION : UTi의 보유 기술
 * ======================================== */
body:has(.business-effect) .sub-content > div{padding-top:0}

.sub03-page .comm-ling-bg{max-width:1400rem; z-index:-1}

.business-effect{position:relative; width:100%}
.business-effect__inner{height:100dvh; overflow:hidden; position:relative; width:100%}
.business-effect__bg{background-position:center; background-repeat:no-repeat; background-size:cover; height:100%; inset:0; position:absolute; transform-origin:center; width:100%; will-change:filter,transform}
.business-effect__bg.bg-01{background-image:url(../img/sub/recycle-bg.jpg)}
.business-effect__bg.bg-02{background-image:url(../img/sub/auto-bg.jpg)}
.business-effect__conts{align-items:center; display:flex; flex-direction:column; inset:0; justify-content:center; position:absolute}
.business-effect__title{align-items:center; gap:27rem}
.business-effect__desc{margin-top:40rem}
.business-effect__overview{align-items:center; display:flex; flex-direction:column}
.business-effect__overview-label{color:var(--c-primary); margin-bottom:60rem; font-family:var(--lang-en); font-weight:700; text-transform:uppercase}
.business-effect__conts *{color:var(--w); text-align:center}
.business-effect__title h2{font-size:72rem; line-height:1.2; font-family:var(--lang-ko)}
.business-effect__overview p{margin-top:24rem}
.business-effect__conts--second{opacity:0}

.tech-body{border-top:1px solid var(--br-light); border-bottom:1px solid var(--br-light)}

.tech-card{background:rgba(7,17,26,0.4); border:1px solid rgba(255,255,255,0.2); box-sizing:border-box; display:flex; flex:1 0 0; flex-direction:column; gap:20rem; min-height:366rem; padding:60rem}
.tech-card__list{display:flex; flex-direction:column; gap:12rem; list-style:none; margin:0; padding:0}
.tech-card__title{color:#14b8ea; font-size:27rem; font-weight:700; line-height:1.407; margin:0}
.tech-card--left{border-right:none; margin-right:-1px}

.tech-item{position:relative; padding-left:16rem; align-items:center; color:var(--w); display:flex; font-weight:200; gap:10rem; /* line-height:1.647; */}
.tech-item::before{position:absolute; left:0; top:10rem; background:#14b8ea; border-radius:50%; content:''; display:block; flex-shrink:0; height:4rem; width:4rem}

.tech-panels{display:flex}

.tech-section{padding:150rem 0}
.tech-section__head{align-items:center; display:flex; flex-direction:column; gap:12rem; margin-bottom:89rem}
.tech-section__title{color:var(--w); font-size:53rem; font-weight:700; line-height:1.302; margin:0; text-align:center}

.comm-network{position:relative; padding-top:290rem; border-top:1px solid var(--br-light)}
.comm-network .comm-watermark--wrap{top:140rem}
.comm-network .comm-title{margin-bottom:100rem}

.logo-list{text-align:center}
.logo-list + .logo-list{margin-top:var(--space140)}
.logo-list ul{justify-content:center; gap:73rem; margin-top:53rem; align-items:center}
.logo-list span{border-radius:90rem; color:var(--w); background-color:var(--c-primary) !important; border:1px solid var(--c-primary); display:inline-flex; padding:8rem 28rem}
.logo-list img{position:relative; opacity:0.6}
.logo-list .logo-neuromeka img{top:-10rem}

/* ── 반응형 ── */

@media all and (max-width:1480px){
	.business-effect__title h2{font-size:60rem}

	.comm-network{padding-top:220rem}
	.comm-network .comm-title{margin-bottom:80rem}

	.logo-list ul{gap:50rem}
	.logo-list ul{flex-wrap:wrap; gap:32rem 73rem}

	.tech-section__head{margin-bottom:70rem}
	.tech-section__title{font-size:46rem}
}

@media all and (max-width:1200px){
	.business-effect__title h2{font-size:52rem}

	.comm-network{padding-top:160rem}
	.comm-network .comm-watermark--wrap{top:80rem}

	.logo-list ul{gap:40rem; margin-top:40rem}

	.tech-card{padding:40rem}
	.tech-section__head{margin-bottom:60rem}
	.tech-section__title{font-size:44rem}
}

@media all and (max-width:1023px){
	.business-effect__title h2{font-size:44rem}
	.business-effect__desc{margin-top:24rem}

	.comm-network{padding-top:140rem}
	.comm-network .comm-title{margin-bottom:60rem}

	.logo-list ul{flex-wrap:wrap; gap:32rem; margin-top:32rem}
	.logo-list ul img{max-width:124rem; max-height:55rem}
	.logo-list span{font-size:15rem; padding:5rem 20rem}
	.logo-list  .logo-smec img{width:96rem}

	.tech-card{min-height:auto}
	.tech-card--left{border-right:1px solid rgba(255,255,255,0.2); border-bottom:none; margin-right:0; margin-bottom:-1px}
	.tech-panels{flex-direction:column}
	.tech-section{padding:100rem 0}
	.tech-section__head{margin-bottom:60rem}
	.tech-section__title{font-size:38rem}
}

@media all and (max-width:860px){
	.business-effect__title h2{font-size:36rem}
	.business-effect__overview-label{margin-bottom:40rem}

	.comm-network{padding-top:100rem}
	.comm-network .comm-title{margin-bottom:50rem}

	.logo-list ul{gap:24rem; margin-top:28rem}

	.tech-card{padding:32rem 28rem}
	.tech-card__title{font-size:22rem}
	.tech-section{padding:80rem 0}
	.tech-section__head{margin-bottom:50rem}
	.tech-section__title{font-size:32rem}
}

@media all and (max-width:540px){
	.business-effect__title h2{font-size:28rem}
	.business-effect__desc{margin-top:20rem}
	.business-effect__overview-label{margin-bottom:28rem}
	.business-effect__conts > *{padding:0 24rem}

	.comm-network{padding-top:60rem}
	.comm-network .comm-title{margin-bottom:40rem}

	.logo-list ul{gap:20rem; margin-top:24rem}
	.logo-list span{font-size:14rem; padding:3rem 12rem}
	.logo-list ul img{max-width:86rem; max-height:20rem}

	.tech-card{padding:24rem 20rem; gap:12rem}
	.tech-card__title{font-size:18rem}
	.tech-item{font-size:15rem; padding-left:12rem; line-height:1.5}
	.tech-item::before{top:9rem}
	.tech-section{padding:60rem 0}
	.tech-section__head{margin-bottom:40rem}
	.tech-section__title{font-size:28rem}
	.tech-card__list{gap:6rem}
	.tech-body{border:0}
}

/* ========================================
 * SECTION : 게시판
 * ======================================== */
body:is(.certification, .certification_en) .sub-content > div{padding-bottom:0}
body:is(.notice, .notice_en) #bo_btn_top{margin-top:0}
body:has(.board-page) .sub-content{padding-top:0}
body:has(.board-page) .board-page{padding-top:var(--sub-content-pt)}

.board-ipr{padding-top:211rem; margin-top:170rem; border-top:1px solid var(--br-light); padding-bottom:var(--footer-mt-sub)}
.board-ipr__tt{position:relative; text-align:center}
.board-ipr__tt .gradient{font-size:190rem; z-index:-1; font-weight:800; font-family:var(--lang-en); position:absolute; left:50%; transform:translateX(-50%); line-height:1; bottom:-14rem; background:linear-gradient(180deg, rgb(31 60 84 / 33%) 6.47%, rgb(7 17 26 / 49%) 131.47%); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent}

.certify-list[data-grid="4"]{gap:54rem 72rem}

#bo_v{background-color:transparent}

#bo_v_title .bo_v_tit{font-size:var(--font-32); line-height:1.4}

.patent-table{border-collapse:collapse; table-layout:fixed; width:100%}
.patent-table__name{color:var(--w); font-weight:300; line-height:1.647; padding:34rem 30rem 34rem 0}
.patent-table__no{color:var(--w); font-family:var(--lang-en); font-size:18rem; font-weight:700; padding:34rem 30rem 34rem 50rem; text-transform:uppercase; width:341rem}
.patent-table__row{border-bottom:1px solid rgba(255,255,255,0.1)}
.patent-table__row:first-child{border-top:1px solid rgba(255,255,255,0.1)}
.patent-table__th{background:rgba(7,13,26,0.37); border-bottom:1rem solid var(--c-primary); color:var(--c-primary); font-family:var(--lang-en); font-size:16rem; font-weight:700; height:74rem; padding:0 30rem 0 0; text-align:left; text-transform:uppercase; vertical-align:middle}
.patent-table__th--no{padding-left:50rem; width:341rem}

.patent-wrap{margin-top:120rem}

.cont-box{position:relative}

.cs-page{padding-top:var(--sub-content-pt); padding-bottom:var(--footer-mt-sub)}

.cs-form-wrap{max-width:683rem; width:100%}

.cs-form-container{justify-content:space-between}

.cs-form--sticky .comm-title{position:sticky; top:140rem}

/* ── 반응형 ── */

@media all and (max-width:1023px){
	.patent-table__name{font-size:16rem; padding:24rem 20rem 24rem 0}
	.patent-table__no{font-size:16rem; padding:24rem 20rem 24rem 30rem; width:260rem}
	.patent-table__th{font-size:14rem; height:60rem}
	.patent-table__th--no{padding-left:30rem; width:260rem}

	.cs-form-wrap{max-width:480rem}
}

@media all and (max-width:860px){
	.cs-form-wrap{max-width:400rem}
	.cs-form-wrap .form-area > em{margin-bottom:0}
}

@media all and (max-width:540px){
	.patent-table{min-width:600rem}
	.patent-table__name{font-size:15rem; padding:20rem 16rem 20rem 0}
	.patent-table__no{font-size:14rem; padding:20rem 16rem 20rem 20rem; width:200rem}
	.patent-table__th--no{padding-left:20rem; width:200rem}

	.cs-form-container{flex-direction:column}
	.cs-form-wrap .form-area{margin-bottom:24rem}
	.cs-form-wrap .checkmark{border:1px solid var(--br-default)}
	.cs-page .button-style{margin-top:40rem}

	.form-area[data-form="agree"] em{position:relative; top:-4rem}
	.form-area[data-form="agree"] .show-btn{position:relative; top:-5rem}
}