@charset "utf-8";

/*
* File       : layout.css
* Author     : B-WORKER
* Dependency : css/reset.css
*      
 * SUMMARY:
 * 1) MAIN animation
 * 2) MAIN CONTENTS
*/

/* **************************************** *
 * 사이트 시작시 커버
 * **************************************** */
.main-cover{position:fixed; opacity:1; visibility:visible; top:0; left:0; z-index:999; width:100%; height:100%; background:#121212; transition:all 1.2s ease 0s;}
.motion-on .main-cover{opacity:0; visibility:hidden;}

/* **************************************** *
 * Main animation set
 * **************************************** */
[data-txt-motion]{}
[data-txt-motion="hidden"]{overflow:hidden;}
[data-txt-motion="hidden"] > span{display:block; opacity:0;}

.swiper-slide-active [data-txt-motion="hidden"] > span{animation:text_hidden_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="left"]{animation:text_left_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="right"]{animation:text_right_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="up"]{animation:text_up_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="down"]{animation:text_down_motion 1.6s ease 0.1s forwards;}

.main-visual__text [data-txt-motion="hidden"]{opacity: 1;}

@keyframes text_hidden_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateY(0);}
}
@keyframes text_left_motion {
 from{opacity:0; transform:translateX(70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_right_motion {
 from{opacity:0; transform:translateX(-70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_up_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateX(0);}    
}
@keyframes text_down_motion {
 from{opacity:0; transform:translateY(-70rem);}
 to{opacity:1; transform:translateX(0);}
}

/* **************************************** *
 * Site custom
 * **************************************** */
 /* common */
 #main > section[class^="main-"] {position: relative;}
 
/* *** main-title (공통 섹션 타이틀 래퍼) *** */
.main-title{display:flex; flex-direction:column; margin-bottom: 47rem;}
.main-title [data-caption]{margin-bottom:16rem;}

 @media all and (max-width:1780px){
	#main *[class^="wrap"] {margin: 0 160rem;}
}

@media (max-width:540px){
	.main-title {margin-bottom: 20rem;}
}

/* *** main visual *** */
.main-visual{position:relative; overflow:hidden; background:var(--bg-dark);}
.main-visual__head{padding-top: 240rem; padding-bottom: 156rem; text-align:center;}
.main-visual__title-em {font-weight:700; background:linear-gradient(102deg, #35C7C1 22%, #9CF9F5 84%); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; filter:drop-shadow(0 0 20rem rgba(52,199,193,.5));}
.main-visual__sub{margin-top:33rem; color:var(--w);}

/* CTA 바 */
.main-visual__inquiry {display: inline-flex; gap:5rem; margin-top:55rem;}
.main-visual__inquiry > div {display:inline-flex; justify-content:center; align-items:center; position:relative; box-sizing:border-box; text-align: left; max-width: 500rem; height: 60rem; padding:0 20rem; border-radius:7rem; border: 1px solid var(--op-w10); background:var(--op-w10); backdrop-filter:blur(10rem); -webkit-backdrop-filter:blur(10rem); transition:var(--trans-01);}
.main-visual__inquiry > div:is(:not(.btn-basic)) {width: 500rem;}
.main-visual__inquiry > div * {transition:var(--trans-01);}
.main-visual__inquiry p {color: var(--op-w70); font-weight: 300;}
.main-visual__inquiry em {position: relative; gap: 10rem; padding-right: 14rem; margin-right: 13rem; color: var(--w); white-space: nowrap;}
.main-visual__inquiry em::before {content:''; width: 22rem; height: 17rem; background:url(../img/main/ic-talk.svg) no-repeat center / contain;}
.main-visual__inquiry em::after {position: absolute; right: 0; top: 50%; content:''; width: 1px; height: 18rem; background: var(--op-w20); transform: translateY(-50%);}
.inquiry-list {position: relative; overflow: hidden; width: 100%; height: 27rem; margin: 0; padding: 0;}
.inquiry-list li {position: absolute; left: 0; top: 0; opacity: 0; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; width: 100%; text-overflow: ellipsis; line-height: 27rem; transform: translateY(-100%); transition: opacity .6s ease, transform .6s ease; color: var(--op-w70);}
.inquiry-list li.is-active {opacity: 1; transform: translateY(0);}
.main-visual__inquiry .btn-basic {border-radius: 7rem;}

@media (hover:hover) and (pointer:fine){
	.main-visual__inquiry:hover > div {border-color: rgba(48, 223, 216, 0.30); background:var(--w); color:var(--b-title);box-shadow: 0 0 30px 0 rgba(48, 223, 216, 0.20);}
	.main-visual__inquiry:hover em {color: var(--b-title);}
	.main-visual__inquiry:hover em::after {background: var(--br-default);}
	.main-visual__inquiry:hover .inquiry-list li {color: var(--b-default);}
	.main-visual__inquiry:hover .arrow-basic {background: var(--b-title);}
}

.main-visual-bottom {position: relative;}
.main-visual-bottom .main-keywords {z-index: 1; position: absolute; left:0; top:12rem; width: 100%; background: var(--op-w10);}
.main-visual-bottom .main-keywords__list li {color: var(--op-w40); background: var(--bg-dark); border-color: var(--op-w10);}

/* 에너지 웨이브 */
.main-visual__wave{position:relative;width: 880rem;height: 366rem; margin: 0 auto;}
.wave-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible;}
.wave-line{fill:none; stroke:var(--c-primary); stroke-width:0.5; opacity:0.1;}
.wave-line--v{opacity:0.15;}
.wave-path{fill:none; stroke:var(--c-primary); stroke-width:1.5; opacity:0.55; filter:url(#wg-curve);}
.wave-path--far{opacity:0.35;}
.wave-dot{fill:var(--c-primary); filter:url(#wg-dot);}
.wave-dot--center{opacity:0; animation:none; display:none;}

@keyframes wave-center{
	0%,100%{opacity:0.3;}
	50%{opacity:0.9;}
}

.main-vline-ext{position:relative; height:300rem; background:var(--bg-dark); margin-top:-8rem;}
.main-vline-ext::before{content:""; position:absolute; left:50%; transform:translateX(-50%); top:0; bottom:0; width:1px; background:linear-gradient(to bottom, rgba(48,223,216,0.6) 0%, rgba(48,223,216,0.15) 40%, rgba(48,223,216,0.04) 100%);}
.wave-line-circle{position:absolute; left:50%; top:0%; transform:translate(-50%,-50%); width:8rem; height:8rem; border-radius:50%; background:var(--c-primary); box-shadow:0 0 12rem var(--c-primary); z-index:2; pointer-events:none;}
.main-visual__label{position:absolute;top: -4rem;font-size:12rem;line-height:1.916;color:var(--op-w40);background:var(--bg-dark);border:1px solid var(--op-w10);padding:3rem 15rem;border-radius:100rem;}
.main-visual__label:nth-child(2){left: -183rem;}
.main-visual__label:nth-child(3){left: 82rem;}
.main-visual__label:nth-child(4){right: 112rem;}
.main-visual__label:nth-child(5){right: -183rem;}

@media all and (max-width:1023px){
	.main-visual__head {padding-bottom: 100rem;}
	.main-visual__sub {margin-top: 27rem;}
	.main-visual__wave{top:auto; position:relative; margin-top:40rem;}
	.main-visual__inquiry {margin-top: 50rem;}
	.main-vline-ext {height: 250rem;}
}

@media (max-width:860px){
	.main-visual__wave {width: 100%;}
	.main-vline-ext {height: 180rem;}
}

@media (max-width:540px){
	/* main-visual */
	.main-visual__head{padding:180rem 0 50rem;}
	.main-visual__sub {margin-top: 18rem; font-size: 14rem;}
	.main-visual__inquiry {width: 100%; align-items: stretch; margin-top: 40rem;}
	.main-visual__inquiry > div {flex-direction: column; align-items: flex-start; max-width: none; width: 100%; height: auto; padding: 15rem 20rem; gap: 3rem;}
	.main-visual__inquiry .btn-basic {width: auto; padding: 12rem; align-items: center;}
	.main-visual__inquiry .arrow-basic {width: 18rem; height: 18rem;}
	.main-visual__inquiry em {gap: 8rem; margin-right: 0; padding-right: 0;}
	.main-visual__inquiry em::after {display: none;}
	.main-visual__inquiry em::before {width: 18rem;}
	.inquiry-list {width: 100%;}
	.main-visual__search{max-width:100%;}
	.main-visual__text{top:260rem;}
	.main-visual__text h2{line-height:1.2; font-size:31rem;}
	.main-visual__text p{margin-top:10rem; font-size:15rem;}
	.main-visual__count{margin:0 10rem; font-size:15rem;}
	.main-visual__btn{font-size:14rem;}
	.main-visual__wave {height: 270rem;}
	.wave-dot{transform: scale(0.8);}
	.main-vline-ext {height: 150rem;}
	.main-visual-bottom .main-keywords {top: 10rem;}
	
	[fullpage-ani]{opacity: 1 !important; transform:none !important;}
}

/* *** main-tech *** */
.main-tech{position:relative;}
.main-tech__inr {overflow: hidden; position: relative; height: var(--height-full); display: flex; align-items: center; justify-content: center;}
.main-tech__video {position: relative; width: 60%; height: 100%; border-radius: 10rem;}
.main-tech__video::after {position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: var(--op-b10);}
.main-tech__video video {position: absolute; left:0; top:0; width: 100%; height: 100%; object-fit: cover; object-position: center;}
.main-tech__video video::-webkit-media-controls { display:none !important; }
.main-tech__video iframe{object-fit: cover;position: absolute;top: 50%;left: 50%;width: 100vw;height: 100vh;transform: translate(-50%, -50%);pointer-events: none;}
.main-tech__txt {position: absolute; left: 0; top: 0; width: 100%; height: 100%; justify-content: center; align-items: center;}
.main-tech__txt .main-title {position: relative; width: 100%; height:180rem; margin-bottom: 0;}
.main-tech__txt [data-heading] {opacity: 0; position: absolute; left:0; top: 60rem; width: 100%; color: var(--w);}
.main-tech__txt [data-heading]:first-child {opacity: 1;}
.main-tech__txt .main-title h3 { will-change: transform, opacity; }

@media (min-aspect-ratio: 16/9) {
  .main-tech__video iframe{height: 56.25vw;}
}
@media (max-aspect-ratio: 16/9) {
	.main-tech__video iframe{width: 177.78vh;}
}

@media all and (max-width:1200px){
	.main-tech__video {width: 70%;}
}

@media all and (max-width:1023px){
	.main-tech__video {width: 80%;}
	.main-tech__txt .main-title {height: 165rem;}
}

@media (max-width:540px){
	.main-tech__video {width: 100%; border-radius: 0;}
	.main-tech__video video {pointer-events: none;}
	.main-tech__txt .main-title h3 {padding: 0 20rem;}
	.main-tech__txt [data-heading] {top: 50rem;}
}

/* *** main-business *** */
.main-business{position:relative; padding:var(--space180) 0;}
.main-business__cards{display:grid; grid-template-columns:repeat(2, 460rem); gap:42rem; justify-content: center;}

.main-biz-card{position:relative; display:flex; flex-direction:column; height:505rem; text-decoration:none;}
.main-biz-card__img {position:absolute; inset:0; margin:0;}
.main-biz-card__img img{width:100%; height:100%; object-fit:cover; display:block; transition: var(--trans-01);}
.main-biz-card__img::after{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(24,29,42,0) 54%, rgba(24,29,42,.6) 100%);}
.main-biz-card__foot{position:relative; z-index:1; display:flex; align-items:flex-end; justify-content:space-between; padding:35rem; margin-top:auto;}
.main-biz-card [data-heading]{color:var(--w);}

@media (hover: hover) and (pointer: fine){
	.main-biz-card:hover .main-biz-card__img img {transform: scale(1.1);}
	.main-biz-card:hover .btn-basic.white{border-color: rgba(48, 223, 216, 0.30); background:var(--w); color:var(--b-title);box-shadow: 0 0 30px 0 rgba(48, 223, 216, 0.20);}
	.main-biz-card:hover .btn-basic.white .arrow-basic {background: var(--b-title);}
}

@media all and (max-width:1023px){
	.main-business__cards{gap:20rem; grid-template-columns: repeat(2, 1fr);}
	.main-biz-card{height:420rem;}
	.main-biz-card__foot {padding: 30rem;}
}

@media (max-width:860px){
	.main-biz-card__foot {align-items: center; padding: 20rem; padding-left: 25rem;}
	.main-biz-card{height:380rem;}
}

@media (max-width:540px){
	.main-business__cards {grid-template-columns: 1fr; gap: 12rem;}
	.main-biz-card {height: 220rem;}
	.main-biz-card__foot {padding: 15rem; padding-left: 20rem;}
}

/* *** main-partner *** */
.main-partner{position:relative; padding:var(--space170) 0 var(--space180); background:var(--bg-dark);}
.main-partner__inner{overflow: hidden;display:flex; flex-direction:column;}
.main-partner .main-title{text-align:center;}
.main-partner .btn-wrap {margin-top:60rem;}

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

@media (max-width: 1780px){
	.main-partner__inner *[class^="wrap"] {margin: 0 40rem !important;}
}

@media (max-width:860px){
	.main-partner__row{flex-wrap:wrap;}
}

@media (max-width:540px){
	.main-partner__inner *[class^="wrap"] {margin: 0 20rem !important;}
	.main-partner .btn-wrap {margin-top: 30rem;}
}

/* *** main-case-notice *** */
.main-case-notice{background:#fff;}

/* CASE */
.main-case{position:relative; padding: var(--space150) 0 var(--space170);}
.main-case .main-title {margin-bottom: 40rem;}
.main-case__inner{display:flex; gap:180rem;}
.main-case__left{width:505rem; flex-shrink:0; display:flex; flex-direction:column; align-items:flex-start; padding-top: 30rem;}
.main-case__thumb{height:340rem; overflow:hidden; margin-bottom:56rem; flex:none;}
.main-case__thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.main-case__right{flex:1; min-width:0;}
.main-case__num{color:var(--op-b30); flex-shrink:0;}

/* case list */
.main-case__list{counter-reset:list-number;}
.main-case__item{counter-increment:list-number;  padding: 30rem 0; cursor: pointer;}
.main-case__item:not(:last-child) {border-bottom: 1px solid var(--br-default);}
.main-case__item [data-caption] {flex-shrink: 0; display: inline-block; margin-top: -7rem;}
.main-case__item [data-caption]::before {content:"[ 0"counter(list-number)" ]";}
.main-case__list-head{position: relative; display:flex; align-items:center; gap: 24rem;transition: var(--trans-01);}
.main-case__list-txt{display:flex; align-items:center; gap:56rem;}
.main-case__list-title{width: 100%; line-height: 54rem !important; padding-right: 300rem; transition:font-size 0.4s ease, line-height 0.4s ease;}
.main-case__list-btn {position: absolute; right: 0; top: 0; display:block; width:54rem; height:54rem; border-radius: 100%; background: var(--bg-default);}
.main-case__list-btn::after {position: absolute; left: 50%; top: 50%; content:''; width: 7rem; height: 7rem; border: solid var(--op-b30); border-width: 0 2rem 2rem 0; transform:translate(-50%, -50%) rotate(-135deg);}

/* expand 패널 */
.main-case__expand{overflow:hidden; max-height:0; padding-left: 55rem; padding-right: 300rem; transition:max-height 0.5s ease;}
.main-case__expand .btn-basic {margin-top: 30rem;}
.main-case__expand-inner{min-height: 200rem; padding-bottom:30rem; overflow:hidden;}
.main-case__expand-desc{flex:1; min-width:0;}
.main-case__expand-thumb{opacity: 0; visibility: hidden; position: absolute; right: 0; top: 30rem; width:209rem; aspect-ratio: 1/1; overflow:hidden; flex-shrink:0; border-radius: 10rem; background: var(--bg-default);}
.main-case__expand-thumb:not(:has(img))::after {opacity: .2; filter: grayscale(1); -webkit-filter: grayscale(1); position: absolute; left: 50%; top: 50%; content:''; width: 30%; aspect-ratio: 73 / 60; background: url(../img/layout/logo.svg) no-repeat center / contain; transform: translate(-50%, -50%);}
.main-case__expand-thumb img{width:100%; height:100%; object-fit:cover; display:block;}

/* active 상태 */
.main-case__item.is-active .main-case__list-head {padding-bottom:10rem;}
.main-case__item.is-active .main-case__list-btn {opacity: 0;}
.main-case__item.is-active .main-case__list-title{font-size:var(--font-26); line-height:1.538; font-weight:700;}
.main-case__item.is-active .main-case__list-btn{transform:rotate(180deg);}
.main-case__item.is-active .main-case__expand{max-height:400rem;}
.main-case__item.is-active .main-case__expand-thumb {opacity: 1; visibility: visible; transition: var(--trans-02); transition-delay: .2s;}

@media all and (max-width:1780px){
	.main-case__expand-thumb {width: 160rem;}
	.main-case__list-title,
	.main-case__expand {padding-right: 200rem;}
}

@media all and (max-width:1480px){
	.main-case__left {width: 400rem;}
	.main-case__left br {display: none;}
	.main-case__thumb {height: 270rem;}
	.main-case__inner {gap: 100rem;}
	.main-case__expand-thumb {width: 140rem;}
	.main-case__list-title,
	.main-case__expand {padding-right: 180rem;}
}

@media all and (max-width:1200px){
	.main-case__inner{flex-direction:column; gap:40rem;}
	.main-case .main-title {margin-bottom: 0;}
	.main-case__left{width:100%; flex-direction: row; justify-content: space-between; align-items: flex-end; padding-top: 0;}
	.main-case__left br {display: block;}
	.main-case__left .btn-wrap {flex-shrink: 0;}
	.main-case__thumb{display: none;}
	.main-case__right {border-top: 1px solid var(--br-default);}
	.main-case__item {padding: 20rem 0;}
	.main-case__list-item.is-active .main-case__expand{max-height:500rem;}
	.main-case__list-btn {top: 50%; width: 45rem; height: 45rem; transform: translateY(-50%);}
	.main-case__item.is-active .main-case__list-head {padding-bottom: 0;}
	.main-case__expand-thumb {width: 158rem;}
	.main-case__list-title, .main-case__expand {padding-right: 200rem;}
}

@media (max-width:860px){
	.main-case {padding-bottom: var(--space140);}
	.main-case__expand-inner{flex-direction:column; min-height: 165rem; padding-bottom: 10rem;}
	.main-case__item [data-caption] {margin-top: -2rem;}
	.main-case__item.is-active .main-case__list-head {padding-bottom: 8rem;}
	.main-case__list-item.is-active .main-case__expand{max-height:170rem;}
}

@media (max-width:540px){
	.main-case__thumb{height:220rem;}
	.main-case__inner {gap: 24rem;}
	.main-case__list-title {padding-right: 60rem;}
	.main-case__expand {padding-left: 35rem; padding-right: 0;}
	.main-case__expand-inner {min-height: auto; margin-bottom: 0; padding-bottom: 15rem;}
	.main-case__expand .btn-basic {margin-top: 20rem;}
	.main-case__item {padding: 15rem 0; border-bottom: 1px solid var(--br-default);}
	.main-case__item [data-caption] {margin-top: -5rem;}
	.main-case__item [data-caption]::before {font-size: 10rem;}
	.main-case__item.is-active .main-case__list-head {padding-bottom: 10rem;}
	.main-case__list-title {font-size: 15rem; line-height: 32rem !important;}
	.main-case__list-btn {top: 0; width: 32rem; height: 32rem; transform: scaleY(1);}
	.main-case__list-btn::after {width: 6rem; height: 6rem; margin-top: 1px;}
	.main-case__list-head {gap: 12rem;}
	.main-case__list-txt{gap:15rem;}
	.main-case__list-item.is-active .main-case__expand{max-height:800rem;}
	.main-case__item.is-active .main-case__list-btn {opacity: 1; transform: scaleY(-1);}
	.main-case__item.is-active .main-case__expand-thumb {display: none;}
}

/* 키워드 구분선 */
.main-keywords{position: relative; height: 1px; background: var(--op-b10);}
.main-keywords__list{position: absolute; left: 50%; top: 50%; display:flex; justify-content:space-between; align-items:center; width: 1600rem; transform: translate(-50%, -50%);}
.main-keywords__list li {font-family: var(--lang-en); font-size:12rem; line-height:1.916; padding:3rem 15rem; border-radius:100rem; border:1px solid var(--op-b10); color:var(--op-b30); white-space:nowrap; background: var(--w); transition: var(--trans-01);}
.main-keywords__list li.active {border-color:var(--c-primary); color:var(--c-primary); box-shadow:0 0 10rem var(--glow);}
.keywords-motion {--keywords-progress: 0%;}
.keywords-motion::before {position: absolute;left: 0;top: 50%;content: '';width: var(--keywords-progress);height: 1px;background: var(--c-primary);transform: translateY(-50%);transition: width 0.8s linear;}
.keywords-motion .main-keywords__list {z-index: 1;}

@media all and (max-width:1919px){
	.main-keywords__list {width: 100%; padding-right: 60rem;}
	.main-keywords__list li:first-child {margin-left: 60rem;}
}

@media all and (max-width:1023px){
	.main-keywords__inner{gap:10rem; justify-content:flex-start;}
}

@media (max-width: 540px){
	.main-keywords__list {padding: 0 20rem;}
	.main-keywords__list li {padding: 2rem 6rem; font-size: 10rem;}
	.main-keywords__list li:first-child {margin-left: 0;}
}

/* NOTICE */
.main-notice {padding: var(--space180) 0 var(--space200);}
.main-notice .main-title {margin-bottom: 0;}
.main-notice__inner > .wrap-wide > [data-flex] {align-items: flex-end;}
.main-notice__inner {overflow: hidden; width: 100%;}
.main-notice__slider,
.main-notice__slider .swiper-wrapper {touch-action: pan-y; -ms-touch-action: pan-y;}
.main-notice__slider {position:relative; overflow:visible !important; cursor:grab; margin-top: 50rem; padding-left: calc(((100% - 1600rem)/2)*2);}
.main-notice__slider .swiper-wrapper{align-items:stretch;}
.main-notice__slider .notice-item {width:459rem;}

@media all and (max-width:1919px){
	.main-notice__slider {padding-left: 0; padding-right: 0;}
}

@media all and (max-width:1200px){
	.main-notice__head{padding-right:0;}
	.main-notice__slider .notice-item {width:420rem;}
}

@media all and (max-width:1023px){
	.main-notice__slider .notice-item{width:380rem;}
}

@media (max-width:860px){
	.main-notice__slider .notice-item{width:320rem;}
}

@media (max-width:540px){
	.main-notice {padding: var(--space150) 0 var(--space200);}
	.main-notice .main-title {margin-bottom: 20rem;}
	.main-notice__slider {padding: 0; margin-top: 0;}
	.main-notice__slider .notice-item{width:300rem;}
	.main-notice .btn-wrap {margin-top: 30rem;}
}