@charset "utf-8";

/*
* File       : sub.css
* Author     : B-WORKER
*
 * SUMMARY:
 * 0) SUB VISUAL
 * 1) SUB CONTENT COMMON
 * 2) PAGE ASIDE (좌측 고정 라벨)
 * 3) sub02 — OVERVIEW (01-01)
 * 4) sub03 — CLIENT (01-03)
 * 5) sub04 — CHILLED (02-01)
 * 6) sub05 — DATA CENTER (02-02)
*/

/* **************************************** *
 * 0) SUB VISUAL
 * **************************************** */
/* SUB VISUAL */
#sub-visual{position:relative; height:672rem}
#sub-visual > .wrap{height:100%;}
.sub-visual__inner{position:relative; z-index:2; display:flex; align-items:center; justify-content:center; height:100%;}
.sub-visual__title{position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; padding-top:70rem; z-index:2;}

#container:has(.overview-page) #sub-visual {display: none !important;}

/* 서브비주얼 타이틀 텍스트 */
#sub-visual h2{font-family: var(--lang-en), var(--lang-ko); color:var(--w); margin-top:35rem;}
.sub-visual__desc{color:var(--w); text-align:center; margin-top:15rem;}

/* sub-visual 오버레이 */
#sub-visual::before{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,7,16,.6) 0%,rgba(3,7,16,.3) 100%); z-index:1;}

/* 서브비주얼 ellipse 오버레이 */
.sub-visual__ellipse{position:absolute; left:50%; transform:translateX(-50%); top:207rem; width:550rem; height:330rem; mix-blend-mode:multiply; pointer-events:none; z-index:1;}
.sub-visual__ellipse img{width:100%; height:100%; object-fit:contain;}

/* 서브비주얼 bg */
.sub-visual__bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#030710; overflow:hidden;}
.sub-visual__bg > video {opacity: .2 !important; position:absolute; top:50%; left:0; width:100%; height:200%; background-size:cover; background-position:50% 50%; transform: translateY(-50%); background-repeat:no-repeat;}
.sub-visual__bg > video::-webkit-media-controls { display:none !important; }

/* 서브비주얼 ellipse 오버레이 */
.sub-visual__ellipse{position:absolute; left:50%; transform:translateX(-50%); top:207rem; width:550rem; height:330rem; mix-blend-mode:multiply; pointer-events:none; z-index:1;}
.sub-visual__ellipse img{width:100%; height:100%; object-fit:contain;}

/* lnb */
#lnb{position:absolute; width:100%; top:510rem; z-index:10}
#lnb .select-link{width:auto}
#lnb .select-link > ul{margin-top:20rem}
#lnb .depth1 .sub-menu, #lnb .select-link__btn{display:none}

#lnb.lnb-select .select-link__btn{display:flex; align-items:center; font-size:20rem; color:#fff; padding-right:70rem}
#lnb.lnb-select  .select-link__btn::after{content:""; position:absolute; right:0; width:40rem; height:40rem; background-color:rgba(255,255,255,0.2); background-size:8rem; background-position:50% 50%; background-image:url(../img/common/arrow-basic_w.svg); background-repeat:no-repeat; border-radius:100%; transform:rotate(90deg)}
#lnb.lnb-select .select-link__btn.on::after{transform:rotate(270deg)}

#lnb.none-select .select-link__btn{pointer-events:none; cursor:text}
#lnb.none-select .select-link__btn::after{opacity:0}

#lnb:not(.lnb-select) .select-link:has(.depth1){display:none; height:100rem; background:#000}
#lnb:not(.lnb-select) .select-link > ul{opacity:1; visibility:visible; padding:0 0; background:none; flex-direction:row; flex-wrap:nowrap; flex-wrap:wrap; position:relative}
#lnb:not(.lnb-select) .select-link > ul a{padding:0; font-size:18rem; margin-right:30rem; opacity:0.5}
#lnb:not(.lnb-select) .select-link > ul > li.on > a{opacity:1}
#lnb:not(.lnb-select) .select-link > ul a:hover{opacity:1}

/*#lnb:not(.lnb-select) .select-link > ul a.on{opacity: 1;} 위의 소스 3차까지 먹이기 체크필요 */
#lnb:not(.lnb-select) .select-link > ul > li{width:auto}
#lnb:not(.lnb-select):not(:has(li:nth-child(2))){display:none}

/* 2차가 하나일때 lnb 숨기기 */
#lnb.lnb-select:has(.select-link:nth-child(2)){display:flex; align-items:center}
#lnb.lnb-select .select-link + .select-link:has(.depth2){margin-left:20rem}
#lnb .lnb-inner{display:flex}
a.lnb-home{display:block; width:15rem; margin-right:20rem; background:url(../img/common/ic-nav-home_w.svg) no-repeat 50% 50%; font-size:0; min-height:100%}

/* sub nav */
#sub-nav{display:flex; align-items:center;}
#sub-nav > *{position:relative}
#sub-nav > *:last-child::after{display:none}
#sub-nav .sub-home{opacity: 1; width:8rem; height:8rem; margin-right: 14rem; border-radius:50%; background:var(--c-primary); flex-shrink:0; box-shadow:0 0 15px var(--c-primary);}
#sub-nav span {color:var(--op-w40); font-family: var(--lang-ko); font-size:14rem; display:block}
#sub-nav .depth02{color:var(--c-primary); font-weight:600;}
#sub-nav > i {position: relative; width: 10rem; height: 10rem; margin: 0 12rem; border-radius: 0; background: transparent;}
#sub-nav > i:nth-child(2) {display: none;}
#sub-nav > i::after {position: absolute; left: 0; top: 50%; content:''; display:block; width:6rem; height:6rem; margin:0rem 10rem;  border:solid var(--op-w20); border-width: 1px 1px 0 0; transform:translate(-100%, -50%) rotate(45deg);}
#sub-nav:has(.depth02:empty) .depth01::after{display:none}
body:has(#sub-nav span:empty) #sub-nav .depth01 ~ i{display:none}

/* snb */
#snb {display:flex; align-items:center; justify-content: center;}
#snb li {margin: 0 2rem;}
#snb li a {display:flex; justify-content:center; align-items:center; min-width: 80rem; padding: 12rem 20rem; box-sizing:border-box; border:1px solid var(--br-default); font-size:15rem; font-weight: 600; border-radius: 5rem; background: var(--bg-default); transition:var(--trans-01);}
#snb li.on a{background:var(--b-title); color:var(--w);}
#snb li:not(.on) a:hover{color: var(--b-title); background: var(--w); border-color: var(--op-b30);}

#snb-title{font-weight:400}

@media all and (max-width:1023px){
	#sub-visual{height:500rem;}
}

@media (max-width: 860px){
	#sub-visual{height:460rem;}
	.sub-visual__title {padding-top: 80rem;}
}

@media (max-width: 540px){
	#sub-visual{height:320rem;}
	.sub-visual__bg > video {width: 200%; height: 100%; left: 50%; transform: translate(-50%, -50%);}
	#sub-visual h2 {margin-top: 25rem;}
	.sub-visual__title {padding-top: 75rem;}
	.sub-visual__title:has(.title-ko.none) .title-ko{display:block !important; margin-top:5rem; font-weight:700 !important; font-size:18rem !important}
	.sub-visual__desc {margin-top: 12rem;}

	#sub-nav span{font-size:12rem}
	#sub-nav > i{margin:0rem 6rem}
	#sub-nav > i::after {margin: 0 6rem;}
	#sub-nav .sub-home {width: 6rem; height: 6rem; margin-right: 10rem;}

	#snb li a {min-width: 70rem; padding: 10rem; font-size: 13rem;}

	#lnb{top:auto; bottom:0rem; z-index:10; padding:17rem 0rem; background:var(--b-01); border-top-left-radius:5rem; border-top-right-radius:5rem}
	#lnb .select-link:has(.depth1){display:none}
	#lnb .select-link:has(.depth2){margin-left:0}
	#lnb .lnb-inner{display:block; margin:0; width:100%; box-sizing:border-box}
	#lnb .select-link > ul{margin-top:15rem; padding:0rem 0rem 13rem; border-radius:0; border-bottom-left-radius:5rem; border-bottom-right-radius:5rem}
	#lnb .select-link > ul a{padding:8rem 20rem; font-weight:200; font-size:14rem}

	#lnb.lnb-select .select-link__btn{font-size:17rem}
	#lnb.lnb-select .select-link:nth-child(2){margin-left:0}
	#lnb.lnb-select{opacity:1 !important; width:calc(100% - 40px); box-sizing:border-box; margin:0 20rem; transform:none !important}
	#lnb.lnb-select .select-link + .select-link:has(.depth2){margin-left:0}
	#lnb.lnb-select .select-link{width:100%; box-sizing:border-box; margin-left:0}
	#lnb.lnb-select .select-link__btn{padding:0rem 20rem; font-size:14rem}
	#lnb.lnb-select  .select-link__btn::after{right:6rem; background-color:inherit}

	#lnb.lnb-select:not(:has(li:nth-child(2))){display:none}

	#lnb:not(.lnb-select) .select-destroy li a{white-space:nowrap}
	#lnb:not(.lnb-select){width:100% !important; margin:0 !important; background:none}
	#lnb:not(.lnb-select) .select-destroy{padding-left:20rem; overflow-x:scroll}
	#lnb:not(.lnb-select) .select-destroy li:last-child{padding-right:40rem}
	#lnb:not(.lnb-select) .select-destroy li a{opacity:0.5; color:#fff}
	#lnb:not(.lnb-select) .select-destroy li.on a{opacity:1}
	#lnb:not(.lnb-select) .select-destroy li + li{margin-left:10rem}

	#lnb:has(.select-destroy):not(.lnb-select) .select-link__btn::after{display:none}
}

/* **************************************** *
 * 1) SUB CONTENT COMMON
 * **************************************** */
#container:has(.overview-page, .client-page, .data-page, .rnd-page, .board-page, .cs-form) + #footer {margin-top: 0 !important;}
#footer {margin-top: var(--space180);}
#header{}

.sub-content{position:relative; padding-top:max(8.3333vw, 130rem);}
.sub-content:has(.rnd-page, .board-page) {padding-bottom: max(8.3333vw, 130rem);} 
.sub-content:has(.overview-page) {padding-top: 0 !important;}
.sub-content:has(.overview-page) .section-aside {display: none;}

/* 섹션 공통 */
.sub-section {padding:120rem 0;}
.sub-section__title{font-family:var(--lang-en); font-size:var(--font-45); font-weight:700; line-height:1.155; letter-spacing:-0.04em; color:var(--b-title); text-align:center;}
.sub-section__lead{font-size:var(--font-17); line-height:1.588; color:var(--b-default); text-align:center;}

/* 서브 공통 텍스트 블록 */
.sub-txt-block{display:flex; flex-direction:column; gap:20rem;}
.sub-txt-block p{font-size:var(--font-17); line-height:1.588; color:var(--b-default);}

/* 서브 섹션 타이틀 래퍼 */
.sub-title{margin-bottom:40rem;}

/* merit card list */
.merit-list{display:flex;flex-wrap:wrap;gap:20rem;justify-content:center;max-width: 1120rem;margin: 0 auto;}
.merit-card{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20rem; width:316rem; padding:60rem 20rem; background:var(--w); border:1px solid var(--c-primary); border-radius:10rem; filter:drop-shadow(0 0 10px var(--glow));}
.merit-card__icon{width:70rem; height:70rem; overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.merit-card__icon img{width:100%; height:100%; object-fit:contain;}
.merit-card__txt{text-align:center;}

.sub-section {padding:var(--space120) 0;}
.sub-section:first-child{padding-top:0;}

@media (max-width:1023px){
	.merit-card{width:calc((100% - 40rem)/3);}
	.merit-card__icon {width: 60rem; height: 60rem;}
}

@media (max-width:860px){
	.sub-content {padding-top: var(--space120 );}
	.sub-content:has(.rnd-page, .board-page) {padding-bottom: var(--space120);}
	.sub-title{margin-bottom:30rem;}

	.merit-card{width:calc((100% - 20rem)/2);}
	.merit-card__icon {width: 55rem; height: 55rem;}
}

@media (max-width:540px){
	.sub-content{padding-top:60rem;}
	.sub-content:has(.rnd-page, .board-page) {padding-bottom:60rem;}
	.sub-section{padding:60rem 0;}
	.sub-title{margin-bottom:20rem;}
	.merit-list {gap: 10rem;}
	.merit-card{width:100%; gap: 15rem; padding: 40rem 20rem;}
	.merit-card__icon{width: 50rem; height: 50rem;}
}

/* **************************************** *
 * 2) OVERVIEW (01-01)
 * **************************************** */
/* overview는 첫 섹션이 full-bleed dark이므로 sub-content padding-top 제거, overview-intro 섹션 패딩도 제거 */
.overview-page .sub-content{padding-top:0;}
.sub-content .overview-intro{padding:0;}

/* intro dark 섹션 — GSAP pin 전환 구조 */
.overview-intro{background:var(--bg-dark); position:relative; height:100vh; overflow:hidden;}
.overview-intro__sec{position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; z-index:1;}
.overview-intro__sec--light{background:var(--w);}
.overview-intro__glow{position:absolute; left:calc(50% - 300rem); top:calc(50% - 300rem); width:600rem; aspect-ratio: 1/1; pointer-events:none; z-index:0; transform-origin:center;}
.overview-intro__glow img{position:absolute; top:-250rem; left:-250rem; width:1100rem; aspect-ratio: 1/1; display:block; max-width:none;}
.overview-intro__en-title{color:var(--w); text-align:center; position:relative; z-index:1; line-height:1.31;}
.overview-intro__en-title [data-heading-en="5xl"]{font-weight:700; line-height:1.31;}
.overview-intro__ko-title{color:var(--w); text-align:center; position:relative; z-index:1;}

/* dark 배경 섹션 heading color 보정 */
.overview-intro__sec:not(.overview-intro__sec--light) [data-heading]{color:var(--w);}
.overview-intro__sec:not(.overview-intro__sec--light) [data-heading-en]{color:var(--w);}

/* intro03 — 흰 섹션 */
.overview-intro__heading{text-align:center; margin-bottom:18rem;}
.overview-intro__heading .em{background:linear-gradient(90deg, #35C7C1, #9CF9F5); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;}
.overview-intro__desc{text-align:center; margin-bottom:10rem;}
.overview-intro__sub-desc{font-weight:600; color:var(--b-title);}

/* 원형 링크 리스트 */
.overview-circle-list{display:flex; align-items:center; justify-content:center; gap:60rem; margin-top:70rem; position:relative;}
.overview-circle-list::before{content:""; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--op-b10); transform:translateY(-50%); z-index:0;}
.overview-circle{display:flex; align-items:center; justify-content:center; width:280rem; aspect-ratio: 1/1; border-radius:50%; border:1px solid var(--c-primary); background:var(--w); filter:drop-shadow(0 0 10rem var(--glow)); transition:border-color 0.5s ease, filter 0.5s ease; position:relative; z-index:1;}
.overview-circle--dim{border-color:var(--op-b10); filter:none;}
.overview-circle__txt{font-family:var(--lang-en); font-size:20rem; font-weight:300; line-height:1.35; letter-spacing:-0.04em; color:var(--c-primary); text-align:center; transition:color 0.5s ease;}
.overview-circle--dim .overview-circle__txt{color:var(--op-b30);}

/* overview 2단 섹션 */
.overview-detail {padding: 0 !important; overflow: hidden;}
.overview-detail .sub-title{margin-bottom:30rem;}
.overview-detail{display:grid; grid-template-columns:1fr 1fr; height: 100vh;}
.overview-detail__img {position:relative; overflow:hidden; height: 100%;}
.overview-detail__img img{width:100%; height:100%; object-fit:cover; object-position:bottom;}
.overview-detail__body {display: flex;flex-direction: column;justify-content: center;padding-left: var(--space120);border-top: 1px solid var(--border-01);/* background: var(--bg-default); */}
.overview-detail__desc{margin-bottom:var(--space120);}

/* feature list (아이콘 + 제목 + 설명) */
.overview-feature-list{display:flex; flex-direction:column; gap:30rem;}
.overview-feature{display:flex; gap:25rem; align-items:flex-start;}
.overview-feature__icon{width:70rem; height:70rem; border:1px solid var(--c-primary); border-radius:10rem; background:var(--w); filter:drop-shadow(0 0 10rem var(--glow)); flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.overview-feature__icon img {max-width: 100%;}
.overview-feature__body{display:flex; flex-direction:column; gap:3rem; padding:5rem 0;}
.overview-feature__head{display:flex; align-items:center; gap:7rem;}
.overview-feature__title{font-size:var(--font-18); font-weight:700; line-height:1.611; color:var(--c-secondary);}

@media (max-width:1480px){
	.overview-detail__body {padding-right: var(--space80);}
	.sub-txt-block p br {display: none;}
	.overview-detail .sub-title {margin-bottom: 20rem;}
	.overview-detail__desc {margin-bottom: var(--space80);}
	.overview-feature__head {flex-direction: column; align-items: flex-start;}
}

@media (max-width:1200px){
	.sub-txt-block {gap: 15rem;}

	.overview-intro__sec .wrap {width: 100%;}
	.overview-circle-list {display: grid; grid-template-columns: repeat(4, 1fr);}
	.overview-circle {width: auto; padding: 20rem;}
	
	.overview-detail__desc {margin-bottom: 60rem;}
	.overview-detail__body {padding-left: var(--space80); padding-right: 40rem;}
	.overview-feature__desc br {display: none;}
}

@media all and (max-width:1023px){
	.overview-circle-list {gap: 42rem;}
	.overview-detail {display: flex; flex-direction: column; height: auto;}
	.overview-detail__img {margin: 0 40rem; border-radius: 10rem; height: 500rem; object-position: 50% 34%;}
	.overview-detail__body {padding: 40rem; padding-bottom: var(--space180) !important;}
}

@media (max-width: 540px){
	.overview-intro__heading {margin-bottom: 10rem;}
	.overview-intro__glow{left:calc(50% - 150rem); top:calc(50% - 150rem); width:300rem;}
	.overview-intro__glow img{top:-50rem; left:-50rem; width:400rem;}
	.overview-circle-list {grid-template-columns: repeat(2, 1fr); gap: 20rem; margin-top: 40rem;}
	.overview-circle-list::before {display: none;}
	.overview-circle__txt {font-size: 16rem;}
	

	.overview-detail__img {margin: 0 20rem; height: 250rem;}
	.overview-detail__img img {object-position: center center;}
	.overview-detail__body {padding: 40rem 20rem; text-align: center;}
	.overview-detail__desc {margin-bottom: 30rem;}
	.sub-txt-block{gap: 12rem;}
	.overview-feature {gap: 18rem; padding-top: 30rem; border-top: 1px solid var(--br-default);}
	.overview-feature-list {text-align: left;}
	.overview-feature__icon {width: 50rem; height: 50rem; border-radius: 5rem;}
	.overview-feature__body {gap: 8rem; padding: 0;}
}

/* **************************************** *
 * 4) sub03 — CLIENT (01-03)
 * **************************************** */

.client-wrap{display:grid; grid-template-columns:auto 1fr; gap:0; position:relative;}
.client-aside-col{width:228rem; position:relative; flex-shrink:0;}

/* 본문 2단 레이아웃 */
.sub-content .client-intro{padding-bottom:var(--space150);}
.client-intro__inner{display:grid; grid-template-columns:734rem 1fr; gap:0; align-items:start;}
.client-intro .sub-title{margin-bottom:30rem;}
.client-intro__left{position:sticky; top:var(--space120);}
.client-intro__txt p{margin-bottom:20rem;}
.client-intro__txt p:last-child{margin-bottom:0;}

/* 클라이언트 단계 리스트 */
.client-step-list{display:flex; flex-direction:column;}
.client-step{display:flex; gap:40rem; align-items:center; padding:40rem 0; border-top:1px solid var(--op-b10);}
.client-step__img{width:170rem; height:170rem; border-radius:10rem; overflow:hidden; flex-shrink:0;}
.client-step__img img{width:100%; height:100%; object-fit:cover; object-position:bottom;}
.client-step__body{display:flex; flex-direction:column; align-items:flex-start; gap:40rem;}
.caption-box--sm{padding:1rem 8rem 2rem;}
.client-step__info{display:flex; flex-direction:column; gap:8rem;}

/* 클라이언트 상단 소개 텍스트 */
.client-step-head{display:flex; align-items:center; gap:12rem; margin-bottom:30rem;}
.client-step-head__arrow{position: relative; display:block; width:12rem; height:13rem; flex-shrink:0;}
.client-step-head__arrow svg {position: absolute; left: 0; top: 0; width: 100%; animation:scroll_down_fade 1.2s ease infinite;}
.client-step-head__arrow svg path {fill: var(--c-secondary);}
.client-step-head__arrow svg:last-child {top: auto; bottom: 0;}
.client-step-head__arrow svg:nth-child(1) {animation-delay:0s;}
.client-step-head__arrow svg:nth-child(2) {animation-delay:.3s;}
.client-step-head__txt{color:var(--b-title);}

@keyframes scroll_down_fade {
    0%,100% {opacity:0.5;}
    50% {opacity:1;}
}

/* 파트너 로고 그리드 */
.client-partners {overflow: hidden;}
.client-partners .partner-list::before,
.client-partners .partner-grid::before,
.client-partners .partner-grid::after {background: var(--op-b10);}
.client-partners,
.client-partners .wrap{position:relative;}
.client-partners .partner-cell{border-color:var(--op-b10);}
.client-partners .partner-cell:nth-child(5n-2)::after{background:var(--op-b10);}
.client-partners .partner-cell--text span{color:var(--op-b70);}
.client-partners .partner-cell--text:hover span{color:var(--b-title);}

@media all and (max-width:1919px){
	.client-partners .wrap {margin: 0 40rem;}
}

@media (max-width:1480px){
	.client-intro__inner{grid-template-columns:500rem 1fr; gap: var(--space80);}
}

@media (max-width:1200px){
	.client-intro__left{position:static;}
	.client-step {gap: 30rem;}
	.client-step__desc br {display: none;}
	.client-step__body {gap: 25rem;}
	.client-step__info {gap: 5rem;}
	.client-intro__txt p {margin-bottom: 15rem;}
}

@media (max-width:1023px){
	.client-intro__left {text-align: center;}
	.client-intro__inner {grid-template-columns: 1fr;}
	.client-aside-col{display:none;}
	.client-step-head {justify-content: center; margin-bottom: 20rem;}
	.sub-content .client-intro {padding-bottom: var(--space120);}
}

@media (max-width:860px){
	.client-step {padding: 30rem 0;}
	.client-intro .sub-title{margin-bottom:20rem;}
	.client-step__img {width: 150rem; height: 150rem;}
}

@media (max-width:540px){
	.client-step-head {align-items: flex-start; gap: 8rem; margin-bottom: 15rem;}
	.client-step-head__arrow {margin-top: 7rem;}
	.client-intro__txt p {margin-bottom: 12rem;}
	.client-intro__txt br {display: none;}
	.client-step {flex-direction: column; align-items: flex-start; gap: 22rem;}
	.client-step__img {width: 100%; height: 220rem;}
	.client-step__img img {object-position: center center;}
	.client-step__body .caption-box {position: absolute; left: 15rem; top: 47rem;}
	.sub-content .client-intro {padding-bottom: var(--space80);}
}


/* **************************************** *
 * 5) sub04 — CHILLED (02-01)
 * **************************************** */
.chilled-title-sec{text-align:center;}
.chilled-txt-block{display:flex; flex-direction:column; gap:20rem;}
.chilled-txt-block p{font-size:var(--font-17); line-height:1.588; color:var(--b-default); text-align:center;}

/* figure 배경 영역 */
.chilled-figure{position:relative; overflow:hidden; padding:110rem 0 154rem;}
.chilled-figure__img-wrap{position:relative; width:fit-content; margin:0 auto;}
.chilled-figure__img{width:650rem;/* mix-blend-mode: multiply; */margin-right: 260rem;}
.chilled-figure__disk {position:absolute; right:0; top:20rem;}
.chilled-figure__disk figure {position: relative; width:260rem; height:260rem; border-radius:100%; box-sizing: content-box; border: 10rem solid var(--c-secondary); overflow:hidden;}
.chilled-figure__disk::before {position: absolute; left: 0; top: 50%; content:''; display: block; width: 0; height: 0; margin-left: 10rem; border-style: solid; border-width: 15rem 250rem 15rem 0rem; border-color: transparent var(--c-secondary) transparent transparent; transform: translateX(-100%) rotate(-10deg); transform-origin: right center;}

/* process 카드 */
.chilled-process{display:flex; align-items:center; justify-content:center; gap:30rem; padding:30rem 0 0;}
.chilled-process-card{display:flex; flex-direction:column; align-items:center; gap:20rem; width:400rem; padding:30rem 20rem; background:var(--w); border:1px solid var(--op-b10); border-radius:10rem;}
.chilled-process-card__txt{color:var(--b-title); text-align:center;}
.chilled-process-arrow{flex-shrink:0; display:block; width:47rem; height:14rem; background:url(../img/sub/process-arrow.svg) no-repeat 50% 50%; background-size:contain;}

/* 장점 섹션 */
.chilled-merit{text-align:center;}
.chilled-merit .sub-title{margin-bottom:30rem;}
.chilled-page section:last-child {padding-bottom: 0 !important;}

@media (max-width:1200px){
	.chilled-figure{padding:var(--space80) 0 var(--space100);}
}

@media (max-width:860px){
	.chilled-figure__img-wrap {width: 100%;}
	.chilled-figure__img{width:80%; margin-right: 0;}
	.chilled-figure__disk {top: 15%;}
	.chilled-figure__disk::before {border-width: 10rem 200rem 10rem 0;}
	.chilled-figure__disk figure {width: 200rem; height: 200rem; border-width: 7rem;}
	.chilled-process-card{width:100%; max-width:400rem;}
}

@media (max-width:540px){
	.chilled-figure__disk {width: 30%;}
	.chilled-figure__disk::before {margin-top: -5rem; border-width: 7rem 100rem 7rem 0; transform: translateX(-100%) rotate(-8deg);}
	.chilled-figure__disk figure {width: 100%; height: auto; aspect-ratio: 1/1; border-width: 5rem;}
	.chilled-process{flex-direction: column; gap: 25rem;}
	.chilled-process-card{gap:12rem; padding:30rem 20rem;}
	.chilled-process-arrow {width: 45rem; height: 10rem; transform: rotate(90deg);}
	.chilled-merit .sub-title{margin-bottom:20rem;}
	.chilled-txt-block p br {display: none;}
}

/* **************************************** *
 * 6) sub05 — DATA CENTER (02-02)
 * **************************************** */
.data-title-sec{text-align:center;}
.data-txt-block{display:flex; flex-direction:column; gap:20rem;}
.data-txt-block p{font-size:var(--font-17); line-height:1.588; color:var(--b-default); text-align:center;}

/* 이미지 2컬럼 */
.data-img-list{display:flex; gap:42rem; justify-content:center; margin-top:var(--space80);}
.data-img-list__item{flex-shrink: initial; width:450rem; border-radius:10rem; overflow:hidden;}
.data-img-list__item img{width:100%;}

/* 장점 섹션 */
.data-page .data-merit {text-align:center; padding-bottom:var(--space160);}
.data-merit .sub-title{margin-bottom:30rem;}

@media (max-width:1023px){
	.data-img-list {gap: 20rem;}
	.data-img-list__item {width: auto;}
	.data-merit{padding-bottom:120rem;}
}

@media (max-width:860px){
}

@media (max-width:540px){
	.data-page .data-merit {padding-bottom: var(--space180);}
	.data-txt-block {gap: 12rem;}
	.data-txt-block br {display: none;}
	.data-img-list{flex-direction: column; gap:10rem; margin-top:30rem;}
	.data-merit{padding-bottom:60rem;}
	.data-merit .sub-title {margin-bottom: 20rem;}
}

/* 특허 및 인증 */
.rnd-page .certify-list,
.rnd-page .table {margin-top: 52rem;}
.rnd-page .caption-box {z-index: 1; position: absolute; left: 20rem; top: 20rem; padding: 7rem 10rem;}

@media (max-width:540px){
	.rnd-page .certify-list,
	.rnd-page .table {margin-top: 30rem;}
	.rnd-page .caption-box {left: 12rem; top: 12rem;}
}

/* 게시판 */
#bo_gall .gall_img.notice-item__thumb:not(:has(img))::after {height: auto;}
.youtube-layer__wrap .btn-wrap {margin-top: 30rem;}

@media (max-width: 540px){
	.youtube-layer__wrap .btn-wrap {margin-top: 20rem;}
}

/* 온라인문의 */
.cs-form-container{display: flex; gap: 120rem;}
.cs-title-wrap{width: 100%;}
.cs-title{position: sticky; top: var(--space120); padding-bottom: var(--space180);}
.cs-title h3{text-transform:uppercase;font-weight: 800;}
.cs-title > p {margin-top:10rem;}
.cs-contact {margin-top:var(--space80);}
.cs-contact__item {display:flex;align-items:center;gap:20rem;}
.cs-contact__item:nth-child(2) {align-items: flex-start; margin-top: 25rem; padding-top: 25rem; border-top: 1px solid var(--br-default);}
.cs-contact__item:nth-child(2) i {margin-top: 6rem;}
.cs-contact__item i img {width:23rem;}
.cs-contact__item a {font-size: 23rem; color: var(--b-title); transition: var(--trans-01);}
.cs-contact__item .cs-contact__list {width:100%;display:grid;row-gap:7rem;}
.cs-contact__list dl {display: flex; align-items: center; gap: 15rem;}
.cs-contact__list dt {min-width: 56rem; align-items: center; justify-content: center; padding: 3rem 6rem; font-size: var(--font-13); color: var(--op-b40); border-radius: 5rem; border: 1px solid var(--op-b10);}
.cs-contact__list dd {display: flex; align-items: center; gap: 12rem;}
.cs-contact__list dd i {display: block; width: 1px; height: 22rem; background:var(--br-default);}
.cs-office{display:flex; flex-wrap: wrap; gap: 10rem; margin-top: 40rem;}
.cs-office li{display: flex; align-items: center; padding: 30rem; border-radius: 10rem; background: var(--bg-default);}
.cs-office li:first-child {width: 100%; align-items: flex-start;}
.cs-office li:not(:first-child) {padding: 18rem 30rem;}
.cs-office em {position: relative; font-weight: 600;}
.cs-office li:first-child em {flex-shrink: 0; margin-right: 14rem; padding-right: 16rem;}
.cs-office li:first-child em::after {position: absolute; right: 0; top: 5rem; content:''; width: 1px; height: 16rem; background: var(--br-default);}
.cs-office span {display: inline-flex; align-items: center; margin-top: 12rem; padding: 6rem 12rem 5rem; font-size: var(--font-15); border-radius:3rem; background: var(--op-w70); border: 1px solid var(--br-default);}
.cs-office span b {position: relative; margin-right: 10rem; padding-right: 12rem; font-weight: 600;}
.cs-office span b::after {position: absolute; right: 0; top: 50%; content:''; width: 1px; height: 14rem; background: var(--br-default); transform: translateY(-50%);}
.cs-form-wrap {flex-shrink: 0; position: relative; width: 700rem; padding-bottom: var(--space180); border-left: 1px solid var(--br-default);}
.cs-form__img {position: relative;}
.cs-form__img::before {position: absolute; left:-1px; top:0; content:''; width: 1px; height: 100%; background: var(--w);}
.form-area[data-form="agree"] {height: 60rem; padding-left: 15rem;}
.form-area[data-form="agree"]::before {position: absolute; left: 0; top: 50%; content:''; width: 2rem; height: 22rem; background: var(--b-title); transform: translateY(-50%);}
.form-area[data-form="agree"] .check-box label {padding-left: 32rem;}
.form-area[data-form="agree"] .check-box [type="checkbox"]:not(:checked) + .checkmark,
.form-area[data-form="agree"] .check-box [type="checkbox"]:checked + .checkmark {top: 2rem; width: 22rem; height: 22rem; border-radius: 3rem;}
.form-area[data-form="agree"] .check-box em {font-weight: 600; color: var(--b-title);}
.cs-form-wrap .btn-wrap {text-align: right;}

@media (hover: hover) and (pointer: fine){
	.cs-contact__item a:hover {text-decoration: underline;}
}

@media (max-width:1480px){
	.cs-title-wrap {width: auto;}
	.cs-contact__item a {font-size: 20rem;}
	.cs-office span {margin-top: 10rem;}
	.cs-office li {padding: 22rem;}
}

@media (max-width:1200px){
	.cs-form-wrap {margin-left: auto; width: 45%;}
}

@media all and (max-width:1023px){
	.cs-title {padding-bottom: 0;}
	.cs-form-container {flex-direction: column; gap: 0 ;}
	.cs-contact__item:nth-child(2) {margin-top: 20rem; padding-top: 20rem;}
	.cs-form__img {margin-top: 40rem;}
	.cs-form__img figure {height: 500rem;}
	.cs-form__img figure img {height: 100%;}
	.cs-contact__item i img {width: 18rem;}
	.cs-office {gap: 10rem; margin-top: 10rem;}
	.cs-office li {flex-direction: column; align-items: flex-start; gap: 8rem;}
	.cs-office em {margin-right: 0; padding-right: 0;}
	.cs-office em::after {display: none;}
	.cs-office span {padding: 5rem 10rem; font-size: 14rem;}

	.cs-form {margin-top: var(--space100); padding: 0 0 40rem !important; border-left: 1px solid var(--br-default);}
	.cs-form-wrap {width: 100%; margin-left: 0; border-left: 0;}
}

@media (max-width: 540px){
	.cs-contact {margin-top: 30rem;}
	.cs-contact__item {gap: 12rem;}
	.cs-contact__item:nth-child(2) {margin-top: 13rem; padding-top: 15rem;}
	.cs-contact__item i img {width: 14rem;}
	.cs-contact__item a {font-size: var(--default);}
	.cs-contact__item .cs-contact__list {padding-top: 3rem;}
	.cs-contact__list dl {gap: 10rem;}
	.cs-contact__list dl:first-child {align-items: flex-start;}
	.cs-contact__list dt.en.xsm {min-width: 48rem; padding: 2rem 4rem; font-size: 11rem; border-radius: 2rem; text-align: center;}
	.cs-contact__list dd {flex-direction: column; align-items: flex-start; gap: 5rem;}
	.cs-contact__list dd i {display: none;}
	
	.cs-page .cs-form {margin-top: 30rem; padding-bottom: 0 !important;}
	.cs-form__img {margin-top: 27rem;}
	.cs-form__img figure {height: 200rem;}
	.cs-office {margin-top: 5rem; gap: 5rem;}
	.cs-office span {padding: 4rem 8rem; font-size: 12rem;}
	.cs-office span b {margin-right: 8rem; padding-right: 10rem;}
	.cs-office span b::after {height: 12rem;}
	.cs-office li {gap: 5rem; padding: 15rem; border-radius: 5rem;}
	.cs-office li:not(:first-child) {width: 100%; padding:15rem;}

	.cs-form .form-area[data-form="agree"] {height: auto; padding-left: 0;}
	.cs-form .form-area[data-form="agree"]::before {display: none;}
	.cs-form .form-area[data-form="agree"] .check-box em {display: block; margin-bottom: 3rem;}
	.cs-form .form-area[data-form="agree"] .show-btn {margin-left: 0; font-size: 12rem;}
}