@charset "utf-8";


/* **************************************** *
 * SUB layout
* @description 서브단에서만 달라지는 header, footer 정의
 * **************************************** */
#container:has(.board-page) + #footer{margin-top: 0;}
#header{}
#footer{margin-top: var(--gap150);}
#bo_w {padding-top: 70rem;}
@media (max-width:1200px){

}
@media all and (max-width:1023px){

}

@media (max-width: 540px){

}

/* **************************************** *
 * SUB common
 * **************************************** */
.sub-content{position:relative;}
.noraml-sub{padding-top: var(--gap150);}

body[class^="sub01_"] #lnb:not(.lnb-select) .select-link > ul > li.on > a::before,
body[class^="sub01_"] #lnb:not(.lnb-select) .select-link > ul a:hover::before{background: radial-gradient(40% 69.5% at 49.57% 55.7%, rgba(13, 21, 33, 0.05) 0%, #0F1012 91%);}
body[class^="sub02_"] #lnb:not(.lnb-select) .select-link > ul > li.on > a::before,
body:is(.certify) #lnb:not(.lnb-select) .select-link > ul > li.on > a::before,
body[class^="sub02_"] #lnb:not(.lnb-select) .select-link > ul a:hover::before,
body:is(.certify) #lnb:not(.lnb-select) .select-link > ul a:hover::before{background: radial-gradient(40% 69.5% at 49.57% 55.7%, rgba(13, 21, 33, 0.05) 0%, #001C2A 91%)}
body[class^="sub04_"] #lnb:not(.lnb-select) .select-link > ul > li.on > a::before,
body[class^="sub04_"] #lnb:not(.lnb-select) .select-link > ul a:hover::before{background: radial-gradient(40% 69.5% at 49.57% 55.7%, rgb(13 21 33 / 29%) 0%, #28303de6 91%)}


/* 서브 공통 테스트 */
.sub-slogan h3 span {font-size:var(--font-52);font-weight: 700;line-height: 1.3;}
.sub-slogan > div > span {font-family: var(--lang-en1); font-weight: 700;text-transform: uppercase;display: block; margin-bottom: 17rem;}
.sub-slogan:not(.white) { background: var(--bg-04); height: 100vh;display: flex;align-items: center;flex-direction: row;justify-content: flex-start;}
.sub-slogan .wrap { width: 100%;}

h4{font-size: var(--font-40); font-weight: 700; font-family: var(--lang-en1);}
h5,.font-h5{font-size: 28rem; line-height: 1.42; font-weight: 700;}
p b{font-weight: 500;  color: var(--b-01);}
li{font-size: 17rem;}

/* .sub-content {position: relative; z-index: 1;}
.sub-intro {position: relative; z-index: 2;}
.sub-footer {position: relative; z-index: 1;}
.sub-content.fixed{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
} */

@media (max-width:1200px){

}

@media all and (max-width:1023px){
	.sub-content:has(.board-page){padding-top:0;}
    h5,.font-h5{font-size: 24rem;}
}

@media (max-width: 860px){

    .sub-slogan h3{display: inline;}
    .sub-slogan > div > span{font-size: 15rem;}
}

@media (max-width: 540px){	
    h5, .font-h5{font-size: 20rem;}
    li{font-size: 15rem;}

	.sub-slogan h3 span{font-size: 25rem;}
	.sub-slogan:not(.white){ height: 290rem;}
}

/* **************************************** *
 * SITE CUSTOM
 * **************************************** */

/* 회사소개 */

.sub01_01 #footer{margin-top: 0; background-color: #08090F;}
.sub01_01 .footer-top__point::after{background: linear-gradient(90deg, #08090f -0.33% -0.33%, rgba(13, 21, 33, 0.05) 99.47%);}
.sub01_01 a.btn-top{background-color: #08090F;}

.rolling-text{white-space: nowrap; will-change: transform;}
.rolling-text__text{font-size: 90rem; font-family: var(--lang-en1); color: rgba(31,76,156,0.3); font-weight: 700; will-change: transform; display: inline-block;}
.about-intro{ padding-top: 210rem; background-color: #08090F; overflow: hidden;}
.about-intro__text{text-align: center; margin-top: 127rem;}
.about-intro__text strong{font-size: 62rem; color: var(--w); display: block;}
.about-intro__bg{ position: relative; width: 100%; height: 1002rem; background:url(../img/sub/company-intro__bg.jpg) no-repeat; background-position: bottom; background-size: cover; }

.pulse-circle {transform-origin: center;animation: pulse 2.5s ease-out infinite; opacity: 0;}
.pulse-circle circle {transform-origin: center;}
.pulse-circle2 {transform-origin: center;animation: pulse1 2.5s ease-out infinite; opacity: 0;}
.pulse-circle2 circle {transform-origin: center;}
.delay0 { animation-delay: 0s; }
.delay1 { animation-delay: 1.25s; }

.about-intro__item{position: absolute; animation: floatSoft 5.5s ease-in-out infinite; will-change: transform;}
.about-intro__item img{position: relative; z-index: 1;}
.about-intro__item svg{position: absolute; overflow: visible;}
.about-intro__item.big{left: 228rem; top: 233rem; animation-duration: 6.6s;  }
.about-intro__item.big svg{left: 46%;top: 13%;}
.about-intro__item.small{right: 404rem; bottom: 264rem; animation-duration: 4.9s; animation-delay: .4s;}
.about-intro__item.small svg{left: -4%;top: -20%;transform: rotate(215deg);}

.about-us{background-color: #090A0F; padding-bottom: var(--gap150); }
.about-us .sub-slogan > span{color: var(--c-01); font-family: var(--lang-en1); font-weight: 700;text-transform: uppercase; display: block; margin-bottom: 25rem;}
.about-us .sub-slogan h3{color: #fff;}
.about-us__conts{ gap: 186rem; margin-top: 140rem;}
.about-us__box + .about-us__box{margin-top: 154rem;}
.about-us__box strong{ color: var(--w); display: block; margin-bottom: 22rem;}
.about-us__box p{color: rgba(255, 255, 255, 0.6);}
.about-us__image{max-width: 540rem; width: 100%; }
.about-us__image img{width: 100%; position: sticky; top: 80rem;}
.about-us__text{flex: 1;}

/* .orbit {animation:orbit 8s linear infinite; background:var(--w); border-radius:50%; height:10rem; left:50%; margin-left:-5rem; margin-top:-5rem; position:absolute; top:50%; transform:rotate(0deg) translateY(-275rem) rotate(0deg); width:10rem;} */

.circle-visual{background-color: #090A0F; padding-top: 80rem; padding-bottom: 325rem; align-items:center;display:flex;/* height:100vh; */justify-content:center;}
.circle-side {border-radius:50%; height:calc(var(--D) * 0.37636); overflow:hidden; position:absolute; width:calc(var(--D) * 0.37636);}
.circle-side.bottom {bottom:-18%; left:50%; transform:translateX(-50%);}
.circle-side img {border-radius:50%; height:100%; object-fit:cover; width:100%;}
.circle-side.left {left:-2%; top:18%;}
.circle-side.right {right:-2%; top:18%;}
.circle-text {align-items:center; aspect-ratio:1/1; background:transparent; border:var(--bw) dashed #4C526B; border-radius:50%; color:#4C526B; display:flex; font-size:var(--fs); font-weight:800; height:auto; justify-content:center; position:absolute; width:var(--D);}
.circle-text.center {left:50%; top:0; transform:translateX(-50%);}
.circle-text:not(.center){position: absolute;}
.circle-text.energy {left: 0; bottom:0 ;}
.circle-text.energy .orbit{animation-duration: 15s;}
.circle-text.infra {right: 0; bottom: 0;}
.circle-text.infra .orbit{animation-duration: 11s;}
.circle-wrap {--D:clamp(360rem, 53vw, 550rem); --bw:1px; --fs:calc(var(--D) * 0.07273); height:auto; position:relative; width:min(100%, 1030rem); aspect-ratio:1030/958;}
.orbit {animation:orbitRotate 12s linear infinite; background:var(--w); border-radius:50%; height:calc(var(--D) * 0.01818); left:50%; margin-left:calc(-0.5 * (var(--D) * 0.01818)); margin-top:calc(-0.5 * (var(--D) * 0.01818)); position:absolute; top:50%; transform:rotate(0deg) translateY(calc(-0.5 * var(--D) + var(--bw))) rotate(0deg); width:calc(var(--D) * 0.01818);}

@keyframes orbitRotate {0%{transform:rotate(0deg) translateY(calc(-0.5 * var(--D) + var(--bw))) rotate(0deg);} 100%{transform:rotate(360deg) translateY(calc(-0.5 * var(--D) + var(--bw))) rotate(-360deg);}}
@media (hover: hover) and (pointer: fine){
    .circle-text:hover{border-color: var(--c-01); color: var(--c-01); background-color: rgba(31,76,156,.1);}  
    .circle-text:hover .orbit{background-color: var(--c-01);}
}


@keyframes pulse {
  0%   { transform: rotate(-45deg) scale(0.8); opacity: 0.8; }
  70%  { transform: rotate(-45deg) scale(1.5); opacity: 0.2; }
  100% { transform: rotate(-45deg) scale(2);   opacity: 0; }
}

@keyframes pulse1 {
  0%   { transform: scale(0.8); opacity: 0.8; }
  70%  { transform: scale(1.5); opacity: 0.2; }
  100% { transform: scale(2);   opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .about-intro__item { animation: none !important; }
}

/* 둥둥 떠다니는 기본 키프레임 (아주 미세하게 위아래+살짝 회전) */
@keyframes floatSoft {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  50%  { transform: translate3d(0, -6px, 0) rotate(-0.6deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}


@media (max-width:1600px){
    .about-us__box p br{display: none;}
    .about-us__box + .about-us__box{margin-top: var(--gap120);}

    .about-intro__item.big{left: 12%;}
    .about-intro__item.big img{width: 260rem;}
    .about-intro__item.small{right: 15%;}
}
@media (max-width:1480px){
    .about-us__box + .about-us__box{margin-top: 100rem;}
    .about-us__box p br{display: none;}
}
@media (max-width:1200px){
	.about-us__image{max-width: 390rem;}
    .about-us__conts{gap: 106rem;}
    .circle-wrap {
        max-width: 66%; /* 80% */
         --D: clamp(168rem, 34.4vw, 440rem);
    }

}
@media all and (max-width:1023px){
    
    .rolling-text__text{font-size: 80rem;}

	.about-us__conts{margin-top: 100rem;}
    .about-intro__text strong{font-size: 46rem;}
    .about-intro{padding-top: 160rem;}
    .about-intro__item.big img{width: 200rem;}
    .about-intro__item.small img{width: 140rem;}
}
@media (max-width:860px){

    .about-us__conts{flex-direction: column; margin-top: 80rem;}
    .about-us__box + .about-us__box{margin-top: 80rem;}

    .circle-visual{padding-bottom: 235rem;}

}
@media (max-width: 540px){
	 .about-us__box + .about-us__box{margin-top: 44rem;}
     .about-us__box strong{margin-bottom: 12rem;}
     .about-us__conts{gap: 54rem;}
     .about-us__box p{word-break: keep-all;}

     .about-intro{padding-top: 120rem;}
     .about-intro__text{margin-top: 100rem;}
     .about-intro__text strong{font-size: 28rem;}
     .rolling-text__text{font-size: 52rem;}
     
     .about-intro__item.big img{width: 130rem;}
     .about-intro__item svg{width: 120rem; height: 120rem;}
     .about-intro__item.big{top: 90rem; left: 7%;}
     .about-intro__item.small{bottom: 10rem;}
     .about-intro__item.small img{width: 90rem;}
     .about-intro__bg{height: 640rem;}

    .circle-wrap {max-width: 80%; }
    .circle-visual{padding-bottom: 125rem;}
    .circle-text{font-size: 17rem}
}



/* 파트너사 */
.partners__list{display:grid;overflow:hidden;grid-template-columns:repeat(4, 1fr);border-top: 1rem solid #e8edf3;border-left: 1rem solid #e8edf3;}
.partners__item{/* border-top:1rem solid #e8edf3; */border-right: 1rem solid #e8edf3;border-bottom: 1rem solid #e8edf3;}
.partners__item:nth-child(-n+4){border-top:0;}
.partners__item:nth-child(4n+1){border-left:0;}
.partners__card{display:flex;justify-content:center;align-items:center;height:148rem;background:#fff;transition:box-shadow 0.2s ease, transform 0.08s ease;cursor: default;}
.partners__card:focus-visible{outline:2rem solid #7F48DF; outline-offset:-2rem;}
.partners__logo{display:block; width:auto; height:auto; max-width:220rem; max-height:64rem; object-fit:contain;}
/*.partners__card:hover { box-shadow: 0 8rem 20rem rgba(0, 0, 0, 0.08); transform: translateY(-1rem);}*/

@media (max-width: 1200px){
	.partners__list{grid-template-columns:repeat(3, 1fr);}
	.partners__item:nth-child(4n+1){border-left:1rem solid #e8edf3;}
	.partners__item:nth-child(3n+1){border-left:0;}
}

@media all and (max-width: 1023px){
	.partners__list{grid-template-columns:repeat(2, 1fr);}
	.partners__item:nth-child(3n+1){border-left: 0;}
	.partners__item:nth-child(2n+1){border-left:0;}
	.partners__card{height:120rem;}
	.partners__logo{max-width:180rem; max-height:56rem;}
}

@media (max-width: 540px){
	.partners__card{height: 83rem;}
	.partners__logo{max-width:100rem;max-height:48rem;height: 26rem;}
}

/* 오시는길 */
.address__head{margin-bottom:32rem;margin-top: 100rem;}
.address__label{display:block; margin-bottom:11rem; font-family:var(--lang-en1); font-weight:700; font-size:14rem; color:var(--c-01);}
.address__title{margin:0;font-weight: 800;font-size:var(--font-28);color:#0B1625;}
.address__list{display:grid; overflow:hidden; border-top:1rem solid #e8edf3; border-left:1rem solid #e8edf3; grid-template-columns:repeat(3, 1fr);}
.address__item{padding:32rem; border-right:1rem solid #e8edf3; border-bottom:1rem solid #e8edf3;}
.address__item-label{display:block; margin-bottom:28rem; font-weight:800; font-size:17rem;}
.address__item-value{font-weight:400; font-size:18rem; color:#666;}
.address-page iframe{height: 674rem;}

.intro-wrap{position:-webkit-sticky; position:sticky; top:0; top:30vh; padding-top:100px;}
.sub-slogan{position:relative; z-index:500;}

@media (max-width: 1200px) {
    .address-page iframe{height: 500rem;}
    .address__list {grid-template-columns: repeat(3, 1fr);}
}

@media all and (max-width: 1023px) {
    .address__list {grid-template-columns: repeat(1, 1fr);}
}

@media (max-width: 540px) {
    .address__item-value{font-size: 15rem;}
    .address__item {padding: 16rem;}
    .address__item-label{margin-bottom: 14rem; font-size: 16rem;}
    .address__head{margin-top: 40rem; margin-bottom: 24rem;}

	.intro-wrap{padding-top: 0;}
}

.solution-intro{padding-bottom: var(--gap150);}
.solution-intro__box + .solution-intro__box{margin-top: var(--gap120);}
.solution-intro__title{position: relative;}

.solution-intro__title .btn-basic{position: absolute; bottom: 0; right: 0;}
.solution-intro__title[data-flex]{justify-content: space-between;}
.solution-intro__component > span{display: block; margin-bottom: 24rem;}
.solution-intro__component + p{margin-top: 60rem;}
.solution-intro__img{border: 1px solid #E1E6EF; margin-top: var(--gap80); }
.solution-intro__img img{max-width: 100%;}

.solution-intro__component{margin-top: 63rem;} 

.upgs-click {align-items:center; background-color:#004dff; border-radius:100%; color:var(--w); display:flex; font-size:10rem; height:42rem; justify-content:center; position:absolute; width:42rem;}
.upgs-click::before {animation:zomm_out 2s ease 0s infinite; background-color:rgba(0,77,255,.5); border-radius:100%; content:""; height:100%; position:absolute; width:100%;}
.upgs-click.ver01 {right:230rem; top:53rem;}
.upgs-click.ver02 {left:246rem; top:273rem;}

.upgs-pop--wrap {display:none; position:absolute;}
.upgs-pop--wrap#upgs-v01 {right:-225rem; top:-13rem;}
.upgs-pop--wrap#upgs-v02 {left:-196rem; top:235rem;}
.upgs-pop--wrap i.line {background-color:#004dff; display:block; height:1px; position:absolute; z-index:1;}
.upgs-pop--wrap i.line::before {background-color:#004dff; border-radius:20rem; content:""; height:10rem; position:absolute; width:10rem;}
#upgs-v01.upgs-pop--wrap i.line {left:-150rem; top:87rem; width:150rem;}
#upgs-v01.upgs-pop--wrap i.line::before {right:-5rem; top:-5rem;}
#upgs-v02.upgs-pop--wrap i.line {right:-128rem; top:59rem; width:128rem;}
#upgs-v02.upgs-pop--wrap i.line::before {left:-5rem; top:-5rem;}

.upgs-pop__box {background-color:#fff; box-shadow:18rem 14rem 41rem 0 rgba(5,11,21,0.25); max-height:311rem; padding:62rem 20rem 28rem; width:312rem;}
.upgs-pop__box img {margin:0 auto; max-width:100%;}
.upgs-pop__box span {color:var(--b-01);display:block;font-family:var(--lang-en1);font-size:18rem;font-weight:700;margin-top: 19rem;text-align:center;}

.upgs-solution {background-color:var(--bg-04); padding:109rem; padding-bottom:83rem; position:relative;}
.upgs-solution__blueBox {align-items:center; text-align: center; aspect-ratio:1/1; background-color:var(--c-01); box-shadow:18rem 14rem 41rem 0 rgba(5,11,21,0.25); color:var(--w); display:flex; font-family:var(--lang-en1); font-size:22rem; font-weight:700; justify-content:center; left:60rem; position:absolute; top:60rem; width:192rem;}
.upgs-solution__item {aspect-ratio:735/580; height:auto; margin:0 auto; max-width:735rem; position:relative; width:100%;}
.upgs-solution__item img{width: 100%;}

@keyframes zomm_out {
  0% {transform:scale(1); opacity:1;}
  90%, 100% {transform:scale(2); opacity:0;}
}

@media (max-width:1480px) {
   .upgs-pop__box{width: 232rem;}
   .upgs-pop__box img{max-width: 77%;}
   .upgs-pop--wrap#upgs-v01{right: -146rem;}
   .upgs-pop--wrap#upgs-v02{left: -115rem;}
   .upgs-solution__blueBox{top: 40rem; left: 40rem; width: 142rem;}
}

@media (max-width:1200px) {
    .upgs-solution__blueBox{font-size: 20rem;}
    .upgs-pop--wrap#upgs-v01{right: -80rem; ;}    
    .upgs-pop--wrap#upgs-v02{left: -62rem;}
    .upgs-pop__box span{font-size: 16rem;}
    #upgs-v02.upgs-pop--wrap i.line {right: -78rem; width: 80rem;}
    #upgs-v01.upgs-pop--wrap i.line{width: 80rem; left: -80rem;}
    #upgs-v02.upgs-pop--wrap i.line{width: 80rem;}
}

@media all and (max-width:1023px){
    .upgs-pop__box{width: 172rem; padding: 28rem 20rem;}
    .upgs-pop__box span{margin-top: 30rem;}
    .upgs-pop--wrap#upgs-v01{right: -20rem;}
    .upgs-pop--wrap#upgs-v02{left: -2rem;}
    .upgs-pop__box span{font-size: 15rem;}
}

@media (max-width:860px){
    .upgs-solution{padding: 60rem 40rem;}
    .solution-intro__component{margin-top: 42rem;} 
}
@media (max-width: 540px){
    .upgs-solution{padding: 60rem 20rem 32rem}
    .upgs-solution__blueBox{top: 10rem; left: 10rem; width: 100rem; height: 60rem; font-size: 14rem;}
    .upgs-pop--wrap i.line{display: none;}
    .upgs-click{font-size: 7rem; width: 22rem; height: 22rem;}
    .upgs-click.ver01{right: 106rem; top: 31rem;}
    .upgs-click.ver02{left: 76rem; top: 132rem;}
    .upgs-pop--wrap#upgs-v02,
    .upgs-pop--wrap#upgs-v01{left: inherit; right: -10rem; top: inherit; bottom: -10rem;}
    .upgs-pop__box{width: 132rem; padding: 24rem;}
    .upgs-pop__box span{font-size: 13rem; margin-top: 20rem;}
} 

.solution-mainSystem{background-color: var(--c-01); padding: var(--gap120) 0;}
.solution-mainSystem h4{color: var(--w);}
.solution-mainSystem__conts{margin-top: 30rem; background-color: var(--w);}
.solution-mainSystem__box{width: 50%; padding: 50rem 50rem 58rem 50rem;}
.solution-mainSystem__box + .solution-mainSystem__box{border-left:1px solid var(--br-01)}
.solution-mainSystem__box img{width: 100%;}
.solution-mainSystem__tit{margin-top: 62rem;}
.solution-mainSystem__tit *{color:var(--c-01); display: inline-block; vertical-align: middle; }
.solution-mainSystem__tit strong{font-size: 32rem; position: relative; font-family: var(--lang-en1);}
.solution-mainSystem__tit strong::before{content: ""; display: block; position: absolute; bottom: -6rem; left: 0; width: 100%; height: 3rem; background-color: var(--c-01) }
.solution-mainSystem__tit span{font-size:15rem; font-weight: 500; margin-left: 7rem;}
.solution-mainSystem__tit + p{margin-top: 33rem;}

.solution-grid__box{display: flex;}
.solution-grid__box > div{padding: 100rem;}
.solution-grid__video{width: 1006rem;}
.solution-grid__cont{display: flex; flex-direction: column;  justify-content: flex-end;}
.solution-grid__cont h5{margin-bottom: 36rem;}
.solution-grid__cont ul li{color: var(--b-03);}
.solution-grid__box.first > div{padding-top: 150rem;}
.solution-grid__box.first .solution-grid__cont{margin-top: 37rem;}
.solution-grid__box.second{flex-direction: row-reverse;}
.solution-grid__box:nth-child(odd){}
.solution-grid__box:nth-child(odd) .solution-grid__video{padding-left: 0; border-right: 1px solid var(--br-01);}
.solution-grid__box:nth-child(odd) .solution-grid__cont{padding-right: 0;}
.solution-grid__box:nth-child(2){justify-content: space-between;}
.solution-grid__box:nth-child(2) .solution-grid__video{border-left: 1px solid var(--br-01);}
.solution-grid__box:nth-child(2) .solution-grid__cont{padding-left: 0;}
.solution-grid__box + .solution-grid__box{border-top: 1px solid var(--br-01);}

.solution-grid__video--wrap{width: 100%; position: relative; padding-bottom: 52.25%;}
.solution-grid__video--wrap > *,
.solution-grid__video--wrap img{width: 100%; position: absolute; height: 100%; border:none}

.solution-field{background-color: var(--bg-04); padding-top: var(--gap120); padding-bottom: var(--gap150);}
.solution-field ul{gap: 22rem; margin-top: 27rem;}
.solution-field ul > li{position: relative; }
.solution-field ul > li strong{position: absolute;font-size: 30rem;color: var(--w);font-weight: 700;left: 50%;top: 50%;transform: translate(-50%,-50%);text-align: center;}
.solution-field ul > li img{width: 100%;}
.small-point{font-weight:700; font-family: var(--lang-en1);}

.solution-advantage{background-color: #060E16; padding:160rem  0 160rem; position: relative; }
.solution-advantage .bg{position: absolute; top:80rem; left: 50%; transform: translateX(-50%);}
.solution-advantage h4{color:var(--w); margin-bottom: 34rem;}
.solution-advantage ul{gap: 0;}
.solution-advantage ul > li img{height: 80rem;  margin: 0 auto 64rem; }
.solution-advantage ul > li em{font-size: 17rem; color: var(--c-01); font-weight: 700; font-family: var(--lang-en1);}
.solution-advantage ul > li strong{color: var(--w); margin-top: 16rem; font-weight: 700;}
.solution-advantage ul > li{cursor: pointer; text-align: center;   aspect-ratio: 1 / 1;perspective: 1000rem; overflow: hidden;  position: relative; backdrop-filter: blur(2px); border: 1px solid rgba(225, 230, 239, 0.20); }
.solution-advantage ul > li > div{position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; transition: transform 0.6s linear;}
.solution-advantage ul > li .fornt,
.solution-advantage ul > li .hover{display: flex; align-items: center;  justify-content: center;  }
.solution-advantage ul > li .fornt{flex-direction: column; background: rgba(8, 25, 45, 0.30);  transform: rotateY(0deg);  z-index: 2;}    
.solution-advantage ul > li .hover{ background-color: var(--c-01);   transform: rotateY(180deg); backface-visibility:hidden; -webkit-backface-visibility:hidden; transform-style:preserve-3d;}

.solution-advantage ul > li .hover p{color: #fff; word-break: keep-all; font-size: var(--font-22); font-weight: 700; text-align: center; padding: 0 40rem; }
.solution-advantage ul > li .fornt p{display: none;}

@media (min-width: 1024px) and (hover: hover) and (pointer: fine){
    .solution-advantage ul > li:hover .fornt{transform:  rotateY(-180deg);  }
    .solution-advantage ul > li:hover .hover{transform: rotateY(0deg); z-index: 3;  }
}
@media (prefers-reduced-motion: reduce){
  .solution-advantage ul > li .fornt,
  .solution-advantage ul > li .hover{ transition: none;  }
}

.catalog-download{background-color: #060E16; padding-top: 100rem; }
.catalog-download--wrap{display: flex;}
.catalog-download__image{width: 947rem; height: 100%;}
.catalog-download__form{background-color: #060E16; padding: 90rem  100rem 0 130rem; flex: 1;} 
.catalog-download__form strong{color: var(--w); font-size: var(--font-52); display: block; margin-bottom: 52rem;}
.catalog-download__form form{}
.catalog-download__input{position: relative;}
.catalog-download__input + .catalog-download__input{margin-top: 15rem;}
.catalog-download__input input{width: 100%; height: 72rem; background: rgba(18, 20, 28, 0.24); border:1px solid #262A3A;  color: #fff; position: relative; z-index: 1; padding:0 20rem;}
.catalog-download__form .placeholder{position: absolute ; width: 100%; left:0; top: 0; height: 100%; padding: 25rem 20rem;}
.catalog-download__form .placeholder p{color: #646464; }
.catalog-download__form .placeholder p .import{color: var(--c-01);}
.catalog-download__form textarea{width: 100%; color: #fff; resize: none; height: 142rem; padding: 25rem 20rem; border:1px solid #262A3A; backdrop-filter: blur(3px); background: rgba(18, 20, 28, 0.24);}
.catalog-download__form textarea::placeholder{font-size: 15rem; color: #646464; }
.catalog-download .btn-wrap{margin-top: 80rem; text-align: right;}

.catalog-agree{margin-top: 20rem;}
.catalog-agree label{display: flex;}
.catalog-agree input[type="checkbox"]{width: 24rem; height: 24rem; background-color: var(--w); margin-right: 12rem;}
.catalog-agree p{color: var(--w); font-size: 16rem;}
.catalog-agree p *{font-size: 16rem;}
.catalog-agree p span{color: var(--c-01);}

@media (max-width:1919px){
    .catalog-download__image{width: 50%; height: 100vh; position: relative;}
    .catalog-download__image img{width: 100%; object-fit: cover; object-position: 50% 50%; position: absolute; height: 100%; left: 0; top: 0;} 
}
@media (max-width:1480px){
    .solution-grid__video{width: 70%;}
    .solution-grid__box > div{padding: 80rem;}
    .solution-advantage ul > li strong{font-size: 22rem;}
    .catalog-download__form{padding: 80rem 60rem;}

}
@media all and (max-width:1200px){
	.solution-intro__title[data-flex]{flex-direction: column;}
    .solution-intro__title h4{margin-bottom: 28rem;}
    .solution-intro__title h4 br{display: none;}
    .solution-grid__video{width: 62%;}
    .solution-grid__box.first > div{padding-top: 120rem;}
    .solution-grid__box > div{padding: 64rem;}
    .solution-grid__box:not(.second) .solution-grid__cont{padding-left: 44rem;}
    /* .solution-advantage ul > li{height: 366rem;} */
    .solution-advantage ul > li img {height: 60rem; margin: 0  auto 45rem;}
}
@media all and (max-width:1023px){
    .solution-intro__title{margin-bottom: 54rem;}
    .solution-intro__title h4{margin-bottom: 12rem;}
	.solution-intro__title .btn-basic{position: relative; margin-top: 20rem;}
    body.sub02_01 p br{display: none;}
    .solution-mainSystem__box{padding: 34rem;}
    .solution-mainSystem__tit{margin-top: 42rem;}
    .solution-mainSystem__tit + p{word-break: keep-all;}
    .solution-mainSystem__tit strong{font-size: 27rem;}
    .solution-field ul{grid-template-columns: 1fr 1fr;}
    .solution-field ul > li strong{font-size: 26rem;}
    .solution-grid__box > div{padding: 54rem;}
    .solution-grid__cont ul li{word-break: keep-all;}
    .solution-advantage ul > li strong{font-size: 20rem;}
    .solution-advantage ul > li img {height: 50rem;}
    /* .solution-advantage ul > li{height: 310rem;} */
    .solution-advantage ul > li .fornt p{display: block; color: rgba(255, 255, 255, 0.6); padding: 0 30rem; margin-top: 10rem;}

    .catalog-download--wrap{flex-direction: column;}
    .catalog-download__image img{object-position: 50% 70%;}
    .catalog-download__image{width: 100%; height: 450rem;}
    .catalog-download__input input{height: 52rem;}
    
}
@media (max-width:860px){

    .solution-grid__box,.solution-grid__box.second{flex-direction: column;}
    .solution-grid__box.first > div{width: 100% !important;}
    .solution-grid__box.first > div,
    .solution-grid__box > div{padding: 0;}
    .solution-grid__box:nth-child(odd) .solution-grid__video{border-right: 0;}
    .solution-grid__video{width: 100%;}
    .solution-grid__box .solution-grid__cont{padding-left: 24rem !important;}
    
    .solution-grid{padding: var(--gap120) 0;}
    .solution-grid__box + .solution-grid__box{margin-top: 40rem; padding-top: 50rem;}
    .solution-grid__cont{margin-top: 24rem;}
    .solution-advantage ul{grid-template-columns: 1fr 1fr;}
    .solution-advantage ul > li:nth-child(even){margin-left: -1px;}
    .solution-advantage ul > li:nth-child(n + 3){margin-top: -1px;}
    .solution-advantage{padding: 100rem 0;}
    .solution-advantage h4{margin-bottom: 26rem;}
    .catalog-download__form{padding: 60rem 40rem;}
    
}
@media (max-width: 540px){
    .solution-intro__title{margin-bottom: 24rem;}
    .solution-mainSystem__conts{flex-direction: column;}
    .solution-mainSystem__box{width: 100%; padding: 24rem;}
    .solution-mainSystem__tit{margin-top: 20rem;}
    .solution-mainSystem__tit span{font-size: 13rem;}
    .solution-mainSystem__tit strong{font-size: 24rem;}
    .solution-mainSystem__tit strong::before{bottom: 1rem; height: 2rem;}
    .solution-mainSystem__tit + p{margin-top: 20rem;}
    .solution-field ul{gap: 10rem; margin-top: 14rem;}
    .solution-field ul > li strong{font-size: 16rem;}
    .solution-grid__box .solution-grid__cont{padding-left: 0 !important;}
    .solution-grid__cont ul li{margin-bottom: 8rem;}
    .solution-grid__cont h5{margin-bottom: 26rem;}
    .solution-grid__box + .solution-grid__box{margin-top: 35rem; padding-top: 40rem;}
    .solution-advantage ul{grid-template-columns: 1fr;}
    .solution-advantage h4{margin-bottom: 20rem;}
    .solution-advantage ul > li{margin-top: -1px;}
    .solution-advantage ul > li strong{font-size: 17rem;}

    .catalog-download__form strong{font-size: 22rem;}
    .catalog-download__form{padding: 40rem 20rem;}
    .catalog-download__form .placeholder{padding: 14rem 20rem;}
    .catalog-download__form textarea{padding: 14rem 20rem;}
}

body.sub02_01 #footer,
body.sub02_02 #footer{margin-top: 0;}

.sinkcare-process{background-color: var(--bg-04); position: relative; /* padding: 227rem 0 239rem; */ padding-bottom: 100vh;}
.sinkcare-process--point{ margin-top: -40vh;}
.sinkcare-process__item h2{color: var(--f-01);}
.sinkcare-porcess__tab{display: flex;flex-wrap: wrap;width: 60%;gap: 11rem;margin-bottom: 20rem;}
.sinkcare-porcess__tab li{color: var(--c-01); font-weight: 500; border-radius: 90rem; border:1px solid var(--c-01); padding: 8rem 13rem;}
.sinkcare-process__wrapper{gap: 0; will-change: transform;width: max-content;align-items: center;}
.sinkcare-process__center{display: flex; align-items: center;}
.sinkcare-process__sticky{overflow: hidden; position: absolute; top: 0; left: 0; height: 100vh; width: 100%;}
.sinkcare-process_center{display: flex; align-items: center; position: absolute; top: 0; left: 0; width: 100%; height: 100% ;}
.sinkcare-process__item{width: 692rem; padding: 55rem; border:1px solid var(--br-01)}
.sinkcare-process__item:nth-child(1){width:40vw;text-align: right;padding-right: 160rem; border:none}
/* .sinkcare-process__item:last-child{width: 770rem;} */
.sinkcare-process__item:not(:nth-child(1)){margin-left: -1px;}
.sinkcare-process__item .heading{font-weight: 800;display: inline-block;margin: 0 auto;text-align: left;}
.sinkcare-process__title{}
.sinkcare-process__title em{font-family: var(--lang-en1); font-weight: 700; font-size: 15rem; display: block;margin-bottom: 17rem; }
.sinkcare-process__title strong{font-size: 40rem; font-weight: 700;}
.sinkcare-process__title span{font-weight: 500; font-size: 18rem; margin-left: 8rem;}
.sinkcare-card{position: relative; /* aspect-ratio: 0.875;  */perspective: 1000px;}
.sinkcare-card > div{ border-radius: var(--bdr-20); backface-visibility: hidden;  transition: var(--trans-03); }
.sinkcare-card > .sinkcare-process__back{position: absolute; width: 100%; height: 100%; overflow: hidden; background-color: var(--w); left: 0; top: 0; }
.sinkcare-card > .sinkcare-process__back img{object-fit: cover; /* max-width: 100%; max-height: 100%; */ position: absolute;}
.sinkcare-card > .sinkcare-process__front{position: relative;padding: 66rem 50rem;background-color: var(--c-01);transform: rotateY(180deg);min-height: 570rem;display: flex;flex-direction: column;justify-content: space-between;}
.sinkcare-process__front *{color: var(--w);}
.sinkcare-process__front [data-list] > *::before{background-color: var(--w);}


.application-prove{padding: var(--gap150)0;}
.application-prove h4 + p{margin-top: 20rem; color: var(--b-01);}
.application-prove__list{margin-top: 60rem;}
.application-prove__area{border:1px solid var(--br-01); overflow: hidden; display: flex;}
.application-prove__area:not(:nth-child(1)){margin-top: -1px;}
.application-prove__info{display: flex;  flex: 1; flex-direction: column; justify-content: space-between; padding: 50rem 80rem; position: relative;}
.application-prove__info::before{content: ""; width: 100%; height: 100%; position: absolute; right: 0; bottom: 0; background-image: url(../img/sub/color-pattern.svg); background-repeat: repeat; background-size: 8rem; opacity: 0.2; }
.application-prove__info::after{content: ""; width: 100%; height: 100%; position: absolute; z-index: 1; right: 0; bottom: 0; background: radial-gradient(43.32% 34.53% at 94.47% 77.51%, rgba(255, 255, 255, 0.05) 0%, #FFF 100%)}
.application-prove__info > *{position: relative; z-index: 2;}
.application-prove__info strong{}
.application-prove__info dt{font-size:16rem; color: #bababa; font-weight: 500; margin-bottom: 4rem;}
.application-prove__info dd.product-name{font-size: 19rem; line-height: 1.6; font-weight: 600;}
.application-prove__info dl > div + div{margin-top: 33rem;}
.application-prove__image {max-width: 766rem; width: 100%;position: relative; }
.application-prove__image .slide-sec{width: 100%; height: 546rem; position: relative;}
.application-prove__image .swiper-container{height: 100%;}
.application-prove__image video,
.application-prove__image iframe,
.application-prove__image img{position: absolute; width: 100%; height: 100%; left: 0; top: 0; object-fit: cover; object-position: 50% 50%;}
.application-prove__image .swiper-controls{bottom: 30rem; right: 30rem; z-index: 20;position: absolute;background: rgba(17, 18, 20, 0.26);padding: 8rem 14rem;backdrop-filter: blur(3.5px);border-radius: 90rem;display: flex;/* gap: 41rem; */}
.application-prove__image .swiper-controls *{color: var(--w); font-size: 12rem;}
.application-prove__image .swiper-controls em{position: relative; margin-left: 24rem;}
.application-prove__image .swiper-controls em::before{content: "";width: 1px;height:13rem;border-right: 1px solid rgba(255, 255, 255, 0.57);transform: rotate(24deg);position: absolute;left: -13rem;top: 3rem;}
.application-downlink{display:flex;justify-content:center;align-items:center;height:556rem;background:url(../img/sub/application-bg.jpg) no-repeat 50% 50%;text-align:center;flex-direction:column;background-size: cover;}
.application-downlink h5{line-height:1.3; font-size:var(--font-52);}
.application-downlink a{margin-top:50rem;}
.application-downlink a > div:first-child{min-width:156rem;}

@media (max-width:1480px){
    .application-prove__image{max-width: 50%;}
}
@media all and (max-width:1200px){
	.application-prove__image{max-width: 56%; height: 500rem;}
    .application-prove__info{padding: 50rem;}
    .application-prove__info dd [data-list="dot"] > *{margin-bottom: 6rem;}
    .application-prove__info dd [data-list="dot"] > *::before{max-width: 3rem;}
    .application-prove__info dl > div + div{margin-top: 24rem;}
    .application-prove__image .slide-sec{height: 500rem;}
}
@media all and (max-width:1023px){    
	.application-prove__area{flex-direction: column;}
    .application-prove__image{max-width: 100%; height: 470rem;}
    .application-prove__image .slide-sec{height: 100%;}
    .application-prove__info h5{margin-bottom: 80rem;}
    .application-prove__info h5 br{display: none;}
    .application-prove__info{padding: 34rem;}
    .application-prove{padding-top: var(--gap120);}

    .sinkcare-card > div{backface-visibility: visible;}
    .sinkcare-card > .sinkcare-process__back{position:absolute;  right: 0; left: inherit; bottom: 0; border-radius: 0; }
    .sinkcare-card > .sinkcare-process__back img{position: absolute; right: 0; bottom: 0;}
    .sinkcare-card > .sinkcare-process__front{transform: rotateY(0); width: 55%; min-height: auto; padding: 36rem;}
    .sinkcare-card{perspective: none; height:430rem; display: flex; flex-direction: row; background-color: var(--c-01); border-radius: var(--bdr-20); overflow: hidden;}

    .sinkcare-process{padding: var(--padding120) 0; position: relative;}
    .sinkcare-process__sticky,.sinkcare-process_center{position: relative; height: auto;}
    .sinkcare-process__wrapper{flex-direction: column;}
    .sinkcare-process__item{width: 100%; padding: 36rem;}
    .sinkcare-process__item:nth-child(1),
    .sinkcare-process__item .heading{text-align: center;}
    .sinkcare-process__item:nth-child(1){width: 100%; padding-right: 0;}
    .sinkcare-process_center{display: block;}
    .sinkcare-process__wrapper{width: 100%; padding: 0 40rem 120rem; gap:0;}
    .sinkcare-process__item h2{font-size:var(--font-52); }
    .sinkcare-process__item .heading{margin-bottom: 42rem;}
    .sinkcare-process__item:not(:nth-child(1)){margin-left: 0; margin-top: -1px;}
    .sinkcare-porcess__tab{gap: 8rem; margin-top: 42rem;}
    .sinkcare-process__title strong{font-size: 30rem;}
    .sinkcare-process__title em{margin-bottom: 12rem;}
    .sinkcare-process__title span{font-size: 16rem;}
	.sinkcare-process--point{margin-top: 0;}
	.sub02_02 .sub-slogan:not(.white){padding: 200rem 0 20rem;}
}
@media (max-width:860px){

    .sinkcare-card{flex-direction: column; height: auto;}
    .sinkcare-card > .sinkcare-process__back{position: relative; }
    .sinkcare-card > .sinkcare-process__back img{width: 100%; position: relative; object-position: 50% 50%;}
    .sinkcare-card > .sinkcare-process__front{width: 100%; gap: 100rem;}
}
@media (max-width: 540px){
    .application-prove__info h5{margin-bottom: 40rem;}
    .application-prove__info dd.product-name{font-size: 18rem;}
    .application-prove__image{height: 240rem;}
    .application-prove__info{padding: 24rem;}
    .sinkcare-process__wrapper{padding: 0 20rem 80rem;}
    .sinkcare-process__item{padding: 20rem ;}
    .sinkcare-card > .sinkcare-process__front{padding: 20rem;gap: 40rem;}
    .sinkcare-process__title strong{font-size: 21rem;}
    .sinkcare-process__title span{font-size: 14rem;margin-left: 1rem;opacity: 0.5;}
    .sinkcare-process__title em{font-size: 13rem;margin-bottom: 5rem;}
    .sinkcare-process__front li{margin-bottom: 4rem;padding-left: 10rem;}
    [data-list="dot"] > *::before{}
	.sub02_02 .sub-slogan:not(.white) {
    height: 290rem;
    padding: unset;
}
}

.cs-info{width: 610rem; }
.cs-info iframe{width: 100%; height: 385rem ;}
.cs-info strong{display: block; font-size: 23rem; font-family: var(--lang-ko); font-weight: 700; color: var(--b-01) ;}
.cs-info__txt{margin-top: 40rem;}
.cs-info ul{margin-top: 24rem;}
.cs-info ul *{font-family: var(--lang-en1); font-size: 15rem;}
.cs-info ul b{width: 68rem; display: inline-block;}
.cs-info ul li + li {margin-top: 10rem;}

/* 게시판 공통 */
#content:has(.board-page){background: #0D1521; }
#content:has(.board-page)  .chk_box input[type="checkbox"] + label {color: #fff !important;}

#content:has(.board-page){padding-bottom:var(--gap150);}
body:has(.board-page) .sub-slogan:not(.white){height:auto; margin:170rem 0 30rem; background:#0d1521;}
body:has(.board-page) .sub-slogan h3 span{color:#fff;}
.sub02_02 .sub-slogan:not(.white){height:auto; padding:250rem 0 0rem; }

.cs-wrap{justify-content: space-between;}
.cs-wrap .btn-wrap{margin-top: 80rem; text-align: right;}
.cs-form-wrap{max-width: 684rem;}

@media (max-width:1480px){
    .cs-form-wrap{max-width: 520rem;}
    
   
}
@media all and (max-width:1200px){

    .cs-info{width: 450rem;}
    .cs-info iframe{height: 325rem;}

    .form-area{padding: 26rem 0;}
    .form-area > em{font-size: 16rem;}
    .form-area input:is([type="text"], [type="password"]), .form-select select{height: 55rem;}
}
@media all and (max-width:1023px){
	.cs-wrap{flex-direction: column;}
    .cs-info{width: 100%;}
    .cs-info__txt{margin-top: 30rem; border:1px solid var(--br-01); padding: 30rem;}
    .cs-info strong br{display: none;}

    .cs-form-wrap{width: 100%;margin-top: 80rem; max-width: 100%;}    
}
@media (max-width:860px){

}
@media (max-width: 540px){
    #container:has(.board-page) + #footer{margin-top: 0 !important;}
    .cs-form-wrap{margin-top: 80rem;}
    .cs-info strong{font-size: 18rem; word-break: keep-all;}
    .cs-info ul *{font-size: 14rem;}
    .cs-info__txt{padding: 22rem;}

	body:has(.board-page) .sub-slogan:not(.white){margin: 70rem 0 0;}
	.sub02_02 .sub-slogan:not(.white){ padding: 80rem 0 30rem;}
}