@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;}
.main-visual__bg i{transform: scale(1.2); transition:transform 15s ease;}
.swiper-slide-active .main-visual__bg i{transform: scale(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);}
}

/* **************************************** *
 * fullpage animation set
 * **************************************** */
 [fullpage-ani]{opacity:0;transition:all .9s ease;transition-delay: 0.2s;}
 [fullpage-ani="left"]{transform:translateX(-50rem);}
 [fullpage-ani="right"]{transform:translateX(50rem);}
 [fullpage-ani="top"]{transform:translateY(-50rem);}
 [fullpage-ani="bottom"]{transform:translateY(50rem);}
 [fullpage-ani="scale"]{transform:scale(1.05);}
 #fullpage .section.active [fullpage-ani]{opacity:1; transform:none; transition-delay:0.4s;}

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

/* **************************************** *
 * Site custom
 * **************************************** */
 /* fp-nav */
 #fp-nav {z-index: 51; position: fixed; left: 30rem; top: 0; height: 100vh; border-left: 1px solid var(--op-w10); transition: var(--trans-01);}
 #fp-nav ul {position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
 #fp-nav a {display: inline-flex; align-items: center; gap: 10rem; margin-left: -3rem; padding: 5rem 0;}
 #fp-nav a::before {content:''; width: 5rem; height: 5rem; border-radius: 100%; background: var(--op-w20);}
 #fp-nav .nav-name {opacity: 0; color: var(--w); font-family: var(--lang-en); font-size: var(--font-14); font-weight: 700; transition: 0;}
 #fp-nav a.active::before {background: var(--w);}
 #fp-nav a.active .nav-name {opacity: 1;}

 .fp-sr-only {display: none !important;}

 .fp-section:is(:not(.fp-auto-height)) {overflow: hidden; height: 100vh;}
 .fp-section > [class^="main-"] {position: relative; height: 100%;}

 .color-ver #fp-nav {border-color: var(--op-b05);}
 .color-ver #fp-nav a::before {background: var(--op-b20);}
 .color-ver #fp-nav a.active::before {background: var(--c-primary);}
 .color-ver #fp-nav .nav-name {color: var(--c-primary);}
 .color-ver .scroll-dot {background: var(--c-primary);}
 .color-ver .scroll-indicator p {color: var(--op-b40);}

 body:is(.fp-viewing-FOOTER) #fp-nav {left: -100rem;}
 body:is(.fp-viewing-FOOTER) #header {transform: translateY(-100%);}

 body:is(.fp-viewing-STORY) #gnb .gnb-item:nth-child(4) > a,
 body:is(.fp-viewing-STORY) #gnb .gnb-item:nth-child(5) > a,
 body:is(.fp-viewing-STORY) #gnb .gnb-item:nth-child(6) > a {color: var(--c-primary);}
 body:is(.fp-viewing-STORY) .btn-store {background: var(--c-secondary);}
 body:is(.fp-viewing-STORY) .lang-menu a {color: var(--op-b30);}
 body:is(.fp-viewing-STORY) .lang-menu li.on a {color: var(--c-primary);}
 body:is(.fp-viewing-STORY) .lang-menu a::after {background: var(--c-primary);}
  
 body:is(.fp-viewing-PROMOTION) .gnb-full-btn {background: var(--c-secondary);}
 body:is(.fp-viewing-PROMOTION) .gnb-full-icon > span {background: var(--b-title);}
 body:is(.fp-viewing-PROMOTION) .gnb-full-btn .text {color: var(--b-title);}

 .fp-watermark {display: none !important;}

 @media (hover: hover) and (pointer: fine){
	#fp-nav a:hover .nav-name {opacity: 1; color: var(--op-w50); transition: var(--trans-01);}
	.color-ver #fp-nav a:hover .nav-name {color: var(--op-b20);}
	body:is(.fp-viewing-STORY) .btn-store:hover {color: var(--w); background: var(--c-primary);}
	body:is(.fp-viewing-STORY) .btn-store:hover::before {background: url(../img/layout/ic-store_w.svg) no-repeat center / contain;}
 }

  @media all and (max-width:1480px){
	 .wrap{margin:0 150rem;}
 }

 @media all and (max-width:1280px){
	.wrap{margin:0 60rem;}

	.fp-section:is(:not(.fp-auto-height)) {height: auto !important;}
 	.fp-section > [class^="main-"] {position: relative; height: auto;}
 }

 @media (max-width:860px){
	.wrap{margin:0 40rem;}
}

 @media (max-width:540px){
	.wrap{margin:0 20rem;}
}

/* main visual */
.main-visual {height:var(--height-full);}
.main-visual-container,
.main-visual-wrapper,
.main-visual .swiper-slide{height:100% !important;}
.main-visual .swiper-slide::before{content:'';position:absolute;background-position:50% 50%;transition:all 1s ease;transform:scale(1);inset:0;background-repeat:no-repeat;background-size: cover;}
.main-visual .swiper-slide .wrap{width:100%;}
.main-visual__bg {position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual__bg::after {position: absolute; left:0; top:0; content:''; width: 100%; height: 100%;}
.main-visual__bg i{display:block; height:100%; background-position:50% 50%; background-size: cover;}

.main-visual .slide01 .main-visual__bg::after {opacity: 0.44; background: #10140B;}
.main-visual .slide02 .main-visual__bg::after {opacity: 0.2; background: #10140B;}
.main-visual .slide03 .main-visual__bg::after {opacity: 0.3; background: #020300;}

.main-visual__video{ position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; }

.main-visual__count{z-index: 31; position: absolute; left: 50%; top: 33vh; display:inline-flex; align-items:center; justify-content: center; font-family: var(--lang-en); font-size: var(--default); font-weight: 700; transform: translateX(-50%);}
.main-visual__count i{display:flex; align-items:center; position:relative; color: var(--w);}
.main-visual__count em{color: var(--op-w30);}

.main-visual__text{position:absolute; top:50%; left: 0; width: 100%; text-align:center; color:#fff; transform: translateY(-50%);}
.main-visual__text::before {z-index: 1; mix-blend-mode: multiply; position: absolute; left: 50%; top: 50%; content:''; width: 80%; height: 150%; filter: blur(100rem); border-radius: 100%; transform: translate(-50%, -50%);}
.main-visual__text h2 {z-index: 12; overflow:hidden; opacity: 0;}
.main-visual__text h2 span {line-height: 1.35;}

.main-visual .btn-wrap {z-index: 31; position: absolute; left: 50%; top: 65vh; transform: translateX(-50%);}

.main-visual .slide01 .main-visual__text::before {opacity: 0.08; background: #000;}
.main-visual .slide02 .main-visual__text::before {opacity: 0.05; background: #724B26;}
.main-visual .slide03 .main-visual__text::before {opacity: 0.07; background: #000;}

.main-visual__controls {z-index: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: flex; justify-content: space-between;}
.main-visual__btn {width: 35%; height: 100%;}
.main-visual__btn i {display: none !important;}


/* 호버 */
@media (hover: hover) and (pointer: fine){}

@media (max-width:1280px){
	.main-visual {height:var(--height-full) !important;}
}

@media (max-width:1023px){
	.main-visual{min-height: 600rem;}
}

@media (max-width:860px){
	.main-visual__count {top: 35vh;}
	.main-visual .btn-wrap {top: 62.5vh;}
}

@media (max-width:540px){
	.main-visual__count {top: 230rem;}
	.main-visual {height: 700rem !important;}
	.main-visual__text{padding: 0 20rem;}
	.main-visual__text h3 {display: inline;}
	.main-visual__text br {display: none;}

	.main-visual .btn-wrap {left: 0; top: 443rem; width: 100%; padding: 0 20rem; text-align: center; transform: none;}
	.main-visual__controls {display: none;}

}

/* story */
.main-story > div {width: 50%;}
.main-story__con {padding-top: 60rem; padding-left: 170rem; padding-right: 134rem; background: url(../img/main/story-bg.jpg) no-repeat center / cover;}
.main-story__con h6 {font-size: 31rem; line-height: 1.5;}
.main-story__con h6 span {color:#FFDE72;}
.main-story__txt {margin-top: 230rem;}
.main-story__txt img {display: inline-block; width: 100%; margin-bottom: 35rem;}
.main-story__txt .btn-basic {margin-top: 52rem;}
.main-story__slogan img {width: 462rem;}

@media all and (max-width:1480px){
	.main-story__con {padding-left: 140rem; padding-right: 100rem;}
}

@media all and (max-width:1280px){
	.main-story {height:var(--height-full) !important;}
	.main-story__con {padding-left: 60rem; padding-right: 60rem;}
}

@media all and (max-width:1200px){
	.main-story__con {padding-top: 0;}
	.main-story__slogan img {width: 58%;}
}

@media all and (max-width:1023px){
	.main-story {height: auto !important;}
	.main-story > div {width: 100%;}
	.main-story__con {padding: var(--space150) 40rem;}
	.main-story__slogan {display: none;}
	.main-story__con h6 {text-align: center;}
	.main-story__txt {margin-top: var(--space180); text-align: center;}
	.main-story__txt img {width: 70%;}
}

@media (max-width: 540px){
	.main-story__con h6 {font-size: 20rem;}
	.main-story__txt img {width: 90%; margin-bottom: 25rem;}
	.main-story__txt .btn-basic {margin-top: 30rem;}
}


/* brand */
.main-brand {background:url(../img/main/brand-bg.jpg) no-repeat center / cover;}
.main-brand__logo {position: absolute; left: 50%; top: 50%; max-width: 1400rem; transform: translate(-50%, -50%);}
.main-brand__logo img {max-width: 100%;}
.main-brand h3 {position: absolute; width: 100%; top: 18vh; text-align: center;}
.main-brand h3, .main-brand__slider .brand-slider__txt {opacity: 0;}
.main-brand__slider {overflow: visible; top: 25vh; padding-left: 0;}
.main-brand__slider .swiper-slide {will-change: transform, opacity;}
.main-brand .swiper-controls {display: none;}
.main-brand .swiper-slide {background: transparent;}
.main-brand__slider .swiper-wrapper {padding-left: 0; box-sizing: border-box;}
.main-brand__slider figure {position: relative; max-width: 100%; margin-bottom: 24rem; box-shadow: 0 10rem 20rem 0 rgba(0, 0, 0, 0.05);}
.brand-slider__txt {text-align: center;}
.brand-slider__txt strong {font-weight: 400;}
.brand-slider__txt span {display: block; margin-top: 3rem; text-transform: uppercase; color: var(--op-b30);}

.main-brand__slider:has(.swiper-slide.active) .swiper-slide:not(.active) {opacity:.4;}

/* @media (hover:hover) and (pointer:fine){
	.main-brand__slider .swiper-slide a:hover .btn-more > * {opacity: 1; transition-delay: 0.1s;}
	.main-brand__slider .swiper-slide a:hover .btn-more::before {transform:scale(1);}
	.main-brand__slider .swiper-slide a:hover .btn-more i,
	.main-brand__slider .swiper-slide a:hover .btn-more p {opacity:1;}
} */

@media all and (max-width:1480px){
	.main-brand__logo {width: 80%; max-width: none;}
	.main-brand__slider {top: 30vh;}
	.main-brand h3 {top: 20vh;}
}

@media all and (max-width:1280px){
	.main-brand {padding: var(--space150) 60rem; background: var(--bg-light);}
	.main-brand__logo {display: none;}
	.main-brand h3 {opacity: 1; position: relative; top: auto; }
	.main-brand__slider {top: auto; margin-top: 45rem;}
	.main-brand__slider .brand-slider__txt {opacity: 1;}
}

@media all and (max-width:1023px){
	.main-brand {padding: var(--space150) 40rem;}
	.main-brand__slider {margin-top: 35rem;}
}

@media (max-width: 540px){
	.main-brand {padding: var(--space150) 20rem;}
	.main-brand__slider {margin-top: 20rem;}
	.main-brand__slider figure {height: 320rem; margin-bottom: 22rem;}
	.brand-slider__txt span {margin-top: 0; font-size: 12rem;}
}

/* global */
.main-global__con,
.main-global__con .wrap {height: 100%;}
.main-global__con-inr {width: 50%; padding-right: 21rem; padding-top: 50rem;}
.main-global__con h3 {margin-bottom: 11rem;}
.main-global__con .btn-basic {margin-top: 40rem;}

.global-list {margin-top: var(--space150); gap: 10rem;}
.global-list__item {display: flex; flex-direction: column; justify-content: space-between; height: 180rem; padding: 25rem 20rem; padding-right: 22rem; background: var(--w); box-shadow: 10rem 10rem 20rem 0 rgba(0, 0, 0, 0.03);}
.global-list__item p {color: var(--b-title);}
.global-list__item i {width: 32rem; height: 32rem; margin-right: 9rem; border-radius: 100%; background: var(--c-third);}
.global-list__item i img {width: 15rem;}
.global-list__item div {display: flex; justify-content: flex-end; gap: 3rem;}

.main-global__map {overflow: initial; position: absolute; right: -100rem; top: 20vh; width: 50%; aspect-ratio: 1/1; border-radius: 100%; background: var(--w);}
.main-global__map::before {opacity: .15; position: absolute; left: 0; top: 0; content:''; width: 100%; height: 100%; border-radius: 100%; background:#C4BEAE; transform: scale(1.15); filter: blur(100rem);}
.main-global__map > img {position: relative; border-radius: 100%; background-color: var(--w);}
.global-map__logo {position: absolute;left: 56%; top: 15%; display: flex; align-items: center; justify-content: center; padding:10rem 12rem; border-radius: 5rem; background: var(--c-primary);}
.global-map__logo::before {position: absolute; left: 50%; bottom: -5rem; content:''; width: 8rem; height: 8rem; background: var(--c-primary); transform: rotate(45deg) translateX(-50%);}
.global-map__logo img {width: 100rem;} 

@media all and (max-width:1480px){
	.main-global__map {width: 54%;}
	.global-map__logo {left: 55%; top: 14%;}
	.main-global__con h3 br {display: none;}
}

@media all and (max-width:1280px){
	.main-global {padding-bottom: var(--space150);}
	.main-global__con-inr {padding-top: 0;}
	.global-list {margin-top: var(--space100);}
	.main-global__map {top: 6vh;}
}

@media all and (max-width:1200px){
	.main-global__con-inr {position: relative; z-index: 1; width: 55%; padding-right: 0;}
	.global-list__item {height: 170rem;}
	.main-global__map {top: 0; width: 65%; right: -13%;}
}

@media all and (max-width:1023px){
	.main-global__con-inr {width: 80%;}
	.main-global__con h3 br {display: block;}
	.main-global__map {top: 10vh;}
}

@media (max-width:860px){
	.main-global__map {top: 12vh; width: 70%;}
	.global-map__logo {left: 52%; top: 12%;}
}

@media (max-width:540px){
	.main-global {padding-bottom: 0;}
	.main-global__con-inr {width: 100%; text-align: center;}
	.main-global__con .btn-basic {margin-top: 25rem;}
	.global-list__item {display: flex; flex-direction: row; justify-content: space-between; align-items: center; height: auto;}
	.global-list__item i {width: 27rem; height: 27rem;}
	.global-list__item i img {width: 12rem;}
	.global-list__item div {align-items: center;}
	.count-num {font-size: 30rem;}

	.main-global__map { margin-top: var(--space120); position: relative; width: 100%; right: auto; top: auto;}
	.global-map__logo {left: 45%; top: 7%;}
}

/* promotion */
.main-promotion__inr {width: 100%; padding-top: 80rem;}
.main-promotion__inr .main-title {position: relative; z-index: 21; margin-bottom: 48rem;}
.main-promotion {position: relative;}
.main-promotion::before,
.main-promotion::after {z-index: 1; position: absolute; top:0; content:''; width: 200rem; height: 100%; background: linear-gradient(270deg, rgba(27, 54, 30, 0.00) 0%, #1B361E 100%);}
.main-promotion::before {left: 0;}
.main-promotion::after {right: 0; transform: scaleX(-1);}

@media all and (max-width:1280px){
	.main-promotion {padding: var(--space150) 0;}
	.main-promotion__inr {padding-top: 0;}
}

@media (max-width:860px){
	.main-promotion__inr .main-title {margin-bottom: 35rem;}
}

@media (max-width:540px){
	.fp-section:has(.main-promotion) {margin-top: -17vh;}
	.main-promotion::before,
	.main-promotion::after {display: none;}
	.main-promotion__inr .main-title {margin-bottom: 25rem;}
	.main-promotion__inr .main-title .wrap {justify-content: center;}
	.ic-video {width: 50rem; height: 50rem; background-size: 10rem;}
	.main-promotion .btn-wrap {margin-top: 40rem; text-align: center;}
}

/* notice */
.main-notice::before {position: absolute; content:''; left:-40rem; bottom: 0; width: 32%; aspect-ratio: 1/1; background: url(../img/main/notice-bg.png) no-repeat center / cover; transform: translateY(30%);}
.notice-wrap {height: 100%;}
.main-notice .wrap {height: 100%;}
.main-notice .main-title .btn-basic {margin-top: 40rem;}
.main-notice__inr {width: 100%; gap: 78rem;}
.main-notice__inr .main-title {flex-shrink: 0;}

@media all and (max-width:1480px){
	.main-notice__inr {flex-direction: column; gap: 0;}
	.main-notice__inr .main-title {display: flex; align-items: center; justify-content: space-between; margin-bottom: 40rem; }
	.main-notice .main-title br {display: none;}
	.main-notice .main-title .btn-basic {margin-top: 0;}
}

@media all and (max-width:1280px){
	.main-notice::before {display: none;}
	.main-notice {padding: var(--space150) 0;}
	.main-notice  .main-title {width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 50rem;}
    .main-notice .main-title .btn-basic {margin-top: 0;}
}

@media (max-width:860px){
	.main-notice .main-title{margin-bottom: 35rem;}
}

@media (max-width:540px){
	.main-notice .main-title {justify-content: center; margin-bottom: 22rem;}
	.main-notice .btn-wrap {margin-top: 30rem;}
}