@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;}

/* layout */
body:is(.fp-viewing-EQUIPMENT) .gnb-full-btn-wrap {background: var(--op-b05); border-color: var(--op-b05);}
body:is(.fp-viewing-EQUIPMENT) .gnb-full-icon > span {background: #000;}
body:is(.fp-viewing-EQUIPMENT) #site-map:has(.non-full) .site-map-inner {border: 1px solid var(--op-b05);}
body:is(.fp-viewing-EQUIPMENT) .gnb-full-btn-wrap:has(.gnb-full-btn.active) {border-color: transparent; background: transparent;}
body:is(.fp-viewing-EQUIPMENT) .lnag-menu__icon {background-image: url(../img/common/ic-lang.svg);}

@media all and (max-width:1260px){
	.fp-scrollable.fp-responsive .fp-is-overflow.fp-section,
    .fp-scrollable .fp-section, .fp-scrollable .fp-slide {min-height: auto !important; height: auto !important;}
}

@media (max-width:540px){
	[fullpage-ani]{opacity: 1 !important; transform:none !important;}
}



/* **************************************** *
 * Site custom
 * **************************************** */
 /* common */
 h2 {font-size: var(--kr-6xl); line-height: 1.3;}
 h3 {font-size: var(--kr-4xl); line-height: 1.3;}
 body:is(.fp-viewing-MAIN, .fp-viewing-5) #fp-nav {opacity: 0; visibility: hidden;}

 /* fp-nav */
 #fp-nav {z-index: 31 !important; left: 50% !important; top: auto !important; bottom: 30rem; transform: translateX(-50%) !important;}
 #fp-nav ul {backdrop-filter: blur(20rem); -webkit-backdrop-filter: blur(20rem); display: flex; align-items: center; padding: 8rem !important; border-radius: 100rem; border:1px solid var(--op-w10); background: var(--op-w10);}
 #fp-nav a {padding: 10rem 20rem; border-radius: 100rem;}
 #fp-nav ul li,
 .fp-slidesNav ul li {margin: 0 !important;}
 #fp-nav .nav-name {font-size: var(--en-xsm); font-family: var(--lang-en); font-weight: 600; color: var(--op-w30) !important; }
 #fp-nav a > span:nth-child(2) {display: none !important;}
 #fp-nav a.active {background: var(--c-primary); border: 1px solid var(--op-b10);}
 #fp-nav a.active .nav-name {color: var(--w) !important;}

 body:is(.fp-viewing-EQUIPMENT) #fp-nav ul {border-color: var(--op-b05); background: var(--op-b05);}
 body:is(.fp-viewing-EQUIPMENT) #fp-nav .nav-name {color: var(--op-b30) !important;}
 body:is(.fp-viewing-EQUIPMENT) #fp-nav a.active .nav-name {color: var(--w) !important;}

/* main visual */
.main-visual{height:var(--height-full);}
.main-visual__bg {overflow: hidden; position: absolute; left:0; top:0; width: 100%; height: 100%;}
.main-visual__bg video {object-fit: cover;position: absolute;top: 50%;left: 50%;width: 100vw;height: 100vh;transform: translate(-50%, -50%);}

.main-visual__txt {z-index: 1; position: absolute; left: 50rem; bottom: var(--space150);}
.main-visual__txt em {display: block; margin-bottom: 20rem;}
.main-visual__txt em span {display: inline-block; padding: 10rem 16rem; font-size: 12rem; border-radius: 24rem; border: 1px solid var(--op-w10); background: rgba(255, 255, 255, .03);}
.main-visual__txt h2 span {display: inline-block; font-weight: 700;}

.btn-scrolldown {position: absolute; left: 50rem; bottom: 34rem; font-size: 13rem;}
.btn-scrolldown i {position: relative; display: block; width: 14rem; height: 14rem;}
.btn-scrolldown i::before {position: absolute; left:auto; top: 50%; content:''; width: 2rem; height: 2rem; border-radius: 100%; background: var(--w);}

@media (max-width:860px){
    .main-visual {height: 860rem;}
    .main-visual__txt {left: 40rem;}
    .main-visual__txt em span {padding: 8rem 12rem;}
    .btn-scrolldown {left: 40rem;}
}

@media (max-width: 540px){
    .main-visual {height: 600rem;}
    .main-visual__txt {bottom: 100rem;}
    .main-visual__txt,
    .btn-scrolldown {left: 20rem;}
    .main-visual__txt br {display: none;}
    .main-visual__txt em {margin-bottom: 17rem;}
    .main-visual__txt em span {padding: 6rem 10rem; font-size: 10rem;}
    .btn-scrolldown {font-size: 11rem;}
}

/* about */
.main-about {overflow: hidden; display: flex; justify-content: center; align-items: center; height: 100%; background: url(../img/main/about-bg.jpg) no-repeat center / cover;}
.main-about::after {position: absolute; left:0; bottom:0; content:''; width: 100%; height: 30%; background: linear-gradient(180deg,rgba(39, 64, 5, 0) 0%, rgba(3, 3, 1, 1) 100%);;}
.main-about__txt {z-index: 1; position: relative; margin-top: 120rem;}
.main-about .btn-wrap {margin-top: 40rem; gap: 20rem;}
.main-about *.btn-basic.white {background: rgba(255, 255, 255, .27);}

.main-about__rotate {position: absolute; left: 50%; top: 50%; width: 88%; aspect-ratio: 1/1; transform: translate(-50%, -23%);}
.main-about__rotate ul {position: relative; width: 100%; height: 100%; animation: rotate360 120s linear infinite;}
.main-about__rotate li {position: absolute; left: 50%; top: 50%; display: inline-flex; justify-content: space-between; height: 100%; transform-origin: center center; transform: translate(-50%, -50%) rotate(0deg);}
.main-about__rotate li figure {width: 100rem; aspect-ratio: 1/1;}
.main-about__rotate li figure:last-child {transform: scaleY(-1);}

@keyframes rotate360 {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@media (max-width:1480px){
    .main-about__rotate {transform: translate(-50%, -25%);}
}

@media all and (max-width:1260px){
	.main-about {height: var(--height-full);}
    .main-about__txt {margin-top: 18%;}
    .main-about__rotate {width: 90%;}
    .main-about__rotate li figure {width: 85rem;}
    .main-about::after {height: 40%;}
}

@media all and (max-width:1023px){
	.main-about {height: var(--height-full);}
    .main-about__txt {margin-top: 18%;}
    .main-about__rotate {width: 125%;}
}

@media (max-width:860px){
   .main-about {height:900rem;}
   .main-about__txt {margin-top: 23%;}
   .main-about .btn-wrap {margin-top: 32rem;}
   .main-about__rotate {overflow-y: hidden; height: 50%; transform: translate(-50%, -65%);}
   .main-about__rotate li figure {width: 70rem;}
   .main-about__rotate ul {aspect-ratio: 1/1; height: auto;}
}

@media (max-width: 540px){
    .main-about {height: 550rem;}
    .main-about__txt {margin-top: 38%;}
    .main-about .btn-wrap {margin-top: 27rem; gap: 10rem;}
    .main-about__rotate {width: 150%;}
    .main-about__rotate li figure {width:50rem;}

}

/* equipment */
.main-product h3 {margin-bottom: 40rem;}
.main-product__slider {overflow: initial; padding-right: 300rem;}
.main-product .swiper-slide {overflow: initial; flex-direction: column; justify-content: center; background: transparent;}
.main-product .swiper-slide:first-child {margin-left: 192rem;}
.main-product__item figure {overflow: hidden; position: relative; aspect-ratio: 497 / 440; border: 1px solid var(--op-b10); border-radius:max(1.2500vw, 10rem);}
.main-product__item figure img {transition: var(--trans-01);}
.main-product__item strong {font-family: var(--lang-en); font-size: var(--en-lg); font-weight: 600; margin-top: 20rem; color: var(--b-title);}
.main-product__item figure::before {opacity: 0; backdrop-filter: blur(10rem); -webkit-backdrop-filter: blur(10rem); position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; border-radius:max(1.2500vw, 10rem); background: rgba(13, 52, 94, 0.70); transition: var(--trans-01);}
.main-product__item *.btn-basic {opacity: 0; position: absolute; left: 50%; top: 50%; display: inline-flex; width: auto; transform: translate(-50%, -50%);}
.main-product__item *.btn-basic.white::before {backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--op-w20);}
.main-product .swiper-pagination {display: none;}

@media (hover: hover) and (pointer: fine){
    .main-product__item:hover figure {box-shadow: 20px 15px 40px 0 var(--op-b20);}
    .main-product__item:hover figure img {filter: grayscale(1); -webkit-filter: grayscale(1);}
    .main-product__item:hover figure::before,
    .main-product__item:hover *.btn-basic {z-index: 1; opacity: 1;}
}

 @media all and (max-width:1919px){
    .main-product .swiper-slide:first-child {margin-left: 50rem;}
    .main-product__slider {padding-right: 100rem;}
 }

 @media all and (max-width:1260px){
	.main-product {margin: var(--space200) 0;}
 }

 @media (max-width: 540px){
    .main-product {padding: 0 20rem;}
   .main-product h3 {margin-bottom: 22rem;}
   .main-product__slider {padding-right: 0;}
   .main-product .swiper-slide:first-child {margin-left: 0;}
   .main-product__item strong {margin-top: 15rem;}
   .main-product .swiper-pagination {position: relative; display: flex; justify-content: center; margin-top: 30rem; gap: 10rem;}
   .main-product .swiper-pagination-bullet {width: 7rem; height: 7rem; background: var(--op-b10);}
   .main-product .swiper-pagination-bullet-active {background: var(--c-primary);}
}

/* global */
.main-company .main-title {z-index: 1; position: relative; margin-top: 207rem;}
.main-company .btn-wrap {margin-top: 38rem;}
.main-company .video-wrap {position: absolute; left: 0; top: 50%; width: 100%; mix-blend-mode: lighten;}
.main-company .video-inr { position: absolute; left: 50%; top: 50%; aspect-ratio: 16/9; width: 1085rem; margin-left: -1%; transform: translate(-50%, -50%); transition: var(--trans-01);}
.main-company .video-inr video { width: 100%;}
.main-company__list {position: relative; display: flex; height: var(--height-full); margin-right: 23rem;}
.main-company__list::before {z-index: 1; position: absolute; left:0; top:0; content:''; width: 100%; height: 200rem; background: linear-gradient(180deg, var(--bg-dark) 0%, rgba(3, 11, 16, 0.00) 100%);}
.main-company__list::after {position: absolute; left:0; bottom:0; content:''; width: 100%; height: 200rem; background: linear-gradient(0, var(--bg-dark) 0%, rgba(3, 11, 16, 0.00) 100%);}
.main-company__list .rolling-img.vertical .rolling-img__box {display: flex; flex-direction: column;}
.main-company__list .rolling-img.vertical:last-child .rolling-img__box {flex-direction: column-reverse; margin-left: 10rem;}
.main-company__list .rolling-img.vertical:last-child .rolling-img__box:first-child {margin-top: -286rem;}
.main-company__list figure {width: 240rem; height: 180rem; margin: 6rem 0; border: 1px solid var(--op-w10); transition: var(--trans-01);}
.main-company__list .rolling-img img {margin: 0;  filter: grayscale(1); -webkit-filter: grayscale(1);}

@media (hover: hover) and (pointer: fine){
    .main-company__list .rolling-img:hover .rolling-img__box{animation-play-state: paused;}
    .main-company__list figure:hover {border-color: var(--w);}
}

@media (max-width:1600px){
    .main-company .video-inr {width: 65%; margin-left: 2%; margin-top: 3%;}
    .main-company__list {margin-right: 0;}
    .main-company__list figure {width: 200rem; height: 150rem;}
    .main-company__list .rolling-img.vertical:last-child .rolling-img__box:first-child {margin-top: -82rem;}
}

@media all and (max-width:1260px){
	.main-company .main-title {margin-top: var(--space150);}
    .main-company .video-inr {width: 75%; left: 2%; top: 36%; transform: none; margin-left: 0; margin-top: 0;}
    .main-company .video-wrap {top: 39%;}
 }

@media all and (max-width:1023px){
    .main-company {padding: var(--space150) 0 var(--space80);}
	.main-company .wrap-wide {flex-direction: column;}
    .main-company .video-wrap {top: 0;}
    .main-company .video-inr {left: auto; right: -16%; top:-30rem; }
    .main-company .main-title {margin-top: 0;}
    .main-company__list::before {width: 80rem; height: 100%; left: 0; background: linear-gradient(90deg, var(--bg-dark) 0%, rgba(3, 11, 16, 0.00) 100%);}
    .main-company__list::after {width: 80rem; height: 100%; left: auto; right: 0; background: linear-gradient(270deg, var(--bg-dark) 0%, rgba(3, 11, 16, 0.00) 100%);}
    .main-company__list {flex-direction: column; height: auto; margin-top: var(--space180);}
    .main-company__list figure {margin: 0 6rem; width: 160rem; height: 120rem;}
    .main-company__list .rolling-img.vertical .rolling-img__box {flex-direction: row;}
    .main-company__list .rolling-img.vertical:last-child {margin-top: 10rem;}
    .main-company__list .rolling-img.vertical:last-child .rolling-img__box {flex-direction: row-reverse;}
    .main-company__list .rolling-img.vertical:last-child .rolling-img__box:first-child {margin-top: 0; margin-left: -86rem;}
}

@media (max-width:860px){
    .main-company {text-align: center;}
    .main-company .video-wrap {position: relative; left: auto; right: auto; top: 0; width: 100%; margin-top: 60rem;}
    .main-company .video-inr {position: relative; right: auto; top: 0; width: 100%;}
    .main-company__list {margin-top: 70rem;}
    .main-company__list figure {height: 100rem;}
}

 @media (max-width: 540px){
   .main-company .btn-wrap {margin-top: 27rem;}
   .main-company .video-wrap {margin-top: 40rem;}
   .main-company .video-inr {left: 50%; width: 130%; transform: translateX(-50%);}
   .main-company__list::before,
   .main-company__list::after {width: 30rem;}
   .main-company__list {margin-top: 40rem;}
   .main-company__list figure {width: 100rem; height: 55rem; margin: 0 3rem;}
   .main-company__list .rolling-img.vertical:last-child {margin-top: 6rem;}
   .main-company__list .rolling-img.vertical:last-child .rolling-img__box:first-child {margin-left: -66rem;}
}

/* customer */
#section05 {background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(../img/main/customer01.jpg); transition: var(--trans-01);}
#section05::after {position: absolute; left: 50%; top: 0; content:''; width: 1px; height: 100%; background: var(--op-w10);}
.main-customer {height: 100%;}
.main-customer__bg {position: absolute; left:0; top:0; width: 100%; height: 100%;}
.main-customer__bg figure {opacity: 0; position: absolute; left:0; top:0; width: 100%; height: 100%; transition: var(--trans-01);}
.main-customer__item {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50%; height: 100%; text-align: center;}
.main-customer__item em {display: block; margin-bottom: 25rem; color: var(--op-w40);}
.main-customer__txt-inr {overflow: hidden; height: 0; margin-top: 0; transition: var(--trans-01);}
.main-customer__txt-inr > p {opacity: 0; transform: translateY(20rem);}
.main-customer__txt-inr .btn-wrap {opacity: 0; margin-top: 70rem; transform: translateY(20rem);}

@media (hover: hover) and (pointer: fine){
    #section05:has(.main-customer__item:nth-child(1):hover) .main-customer__bg figure:first-child {opacity: 1;}
    #section05:has(.main-customer__item:nth-child(2):hover) .main-customer__bg figure:last-child {opacity: 1;}
    .main-customer__item:hover .main-customer__txt-inr {height: 200rem; margin-top: 24rem;}
    .main-customer__txt-inr > p {opacity: 1; transform: translateY(0); transition: .3s ease .3s;}
    .main-customer__txt-inr .btn-wrap {opacity: 1; transform: translateY(0); transition: .3s ease .3s;}
}

@media all and (max-width:1260px){
	.main-customer__item {height: var(--height-full);}
    .main-customer__txt-inr .btn-wrap {margin-top: 50rem;}
}

@media (max-width:860px){
	.main-customer__item em {margin-bottom: 20rem;}
    .main-customer__txt-inr .btn-wrap {margin-top: 40rem;}

    @media (hover: hover) and (pointer: fine){
        .main-customer__item:hover .main-customer__txt-inr {margin-top: 20rem;}
    }
}

@media (max-width:540px){
    #section05::after {left: 0; top: 0; width: 100%; height: 1px;}
    .main-customer {height: auto; flex-direction: column;}
    .main-customer__item {width: 100%; height: auto; padding: var(--space120) 20rem;}
    .main-customer__item:nth-child(1) {background: url(../img/main/customer02.jpg) no-repeat center / cover;}
    .main-customer__item:nth-child(2) {background: url(../img/main/customer03.jpg) no-repeat center / cover;}
    .main-customer__item em {font-size: 13rem;}
    .main-customer__txt {opacity: 1; margin-top: 20rem;}
    .main-customer__txt-inr {opacity: 1; height:auto;}
    .main-customer__txt-inr > p, 
    .main-customer__txt-inr .btn-wrap {opacity: 1; transform: none;}
    .main-customer__txt-inr > p {font-weight: 400;}
    .main-customer__txt-inr .btn-wrap {margin-top: 30rem;}
}