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

@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
 * **************************************** */
 /* main common */
 .main-title {font-size: var(--font-size-35);font-weight: 700;}
 .main-title__desc {display: block; margin-bottom: 50rem; font-size: var(--font-size-18); font-weight: 600; color: var(--c-01); text-transform: uppercase;}

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

/* main visual */
.main-visual {position: relative; height: var(--height-full); justify-content: flex-end; align-items: flex-end;}
.main-visual__inr {width: 713rem; height: 420rem;}
.main-visual [data-txt-motion="hidden"].is_moved > span {animation:text_left_motion 1.6s ease 0.1s forwards;}
.main-visual-container,
.main-visual-wrapper,
.main-visual .swiper-slide{height:100% !important;}
.main-visual .swiper-slide .wrap{width:100%;}
.main-visual__item-bg {opacity: 0; visibility: hidden; position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: #000;}
.main-visual__video{position: absolute; top:0; left:0; width:100%; height:100%; object-fit: cover; }
.main-visual__btn{z-index: 1; opacity: 0; visibility: hidden; position:absolute;top: 50%;cursor:pointer;display: inline-flex; align-items: center;font-family: var(--lang-en--02); font-size: var(--font-size-14);color: var(--f-01);font-weight: 600; transform: translateY(-50%);}
.main-visual__btn::before {display: inline-block; margin-right: 15rem; transition: var(--trans-01);}
.main-visual__btn i {width: 80rem; height: 60rem; font-size: 0; border-radius: 30rem; border: 1px solid var(--f-01); background-color: rgba(255, 255, 255, .1); background-repeat: no-repeat; background-position: 50% 50%; background-size: 20rem; background-image: url(../img/layout/arrow-basic_w.svg);transition: var(--trans-01);}
.main-visual__btn.button-prev{display: none !important;}
.main-visual__btn.button-next {right: 102rem; top: 50%;}
.main-visual__btn.button-next::before {content:"Next";}

.main-visual .swiper-pagination{ opacity: 0; visibility: hidden; left: 50%; bottom: 70rem; display:inline-flex; gap:18rem; transform: translateX(-50%);}
.main-visual .swiper-pagination-bullet{opacity:0.4; width:10rem; height:10rem; border-radius: 0; background:var(--f-01);}
.main-visual .swiper-pagination-bullet-active{opacity:1; transform: rotate(45deg);}

.main-visual__text{z-index: 1; position:absolute; left:102rem; top:30vh;}
.main-visual__text h2{overflow: visible;line-height: 1.2;font-weight:700;font-size:var(--font-size-72);letter-spacing:-0.5rem;}
.main-visual__text h2 > span {font-weight: 700;display: inline-block;}
.main-visual__text p{margin-top:25rem;}
.main-visual__text .btn-wrap {margin-top: 100rem;}

.main-scroll {z-index: 1; position: absolute; left: 50%; bottom: 30rem; text-align: center; transform: translateX(-50%);}
.main-scroll i {position: relative; display: block; width: 32rem; height: 47rem; margin: 0 auto 7rem; border-radius: 30rem; border: 3rem solid var(--br-02);}
.main-scroll i span {position: absolute; left:16rem; top: 8rem; width: 4rem; height: 4rem; margin-left: -5rem; border-radius: 100%; background: var(--c-01); animation: slideDown 1s ease infinite;}
.main-scroll p {font-size: var(--font-size-14); font-weight: 600; color: #aaa;}

@keyframes slideDown {
	0% {top: 10rem;}
	100% {top:30rem;}
}

@media (hover: hover) and (pointer: fine){
	.main-visual__btn:hover i {background-color: var(--c-01); border-color: var(--c-01);}
	.main-visual__btn:hover::before {color: var(--c-01);}
}

@media (max-width:1480px){
	.main-visual__text{left: 60rem;}
	.main-visual__btn.button-next {right: 60rem;}
	.main-scroll {left: 60rem; transform: translateX(0);}
	.main-scroll i {margin: 0 0 7rem;}
}

@media (max-width:1023px){
	.main-visual{min-height: 600rem;}
	.main-visual__inr {width: 100%; height: 100%;}
	.main-visual__text {left: 40rem; max-width: 75%; color: var(--f-01);}
	.main-visual__text p {margin-top: 18rem;}
	.main-visual__text .btn-wrap {margin-top: 80rem;}
	.main-visual__item-bg {opacity: .44; visibility: visible;}
	.main-scroll {opacity: 0; visibility: hidden;}
	.main-visual__btn::before {margin-right: 10rem;}
	.main-visual__btn.button-next,
	.main-visual .swiper-pagination {opacity: 1; visibility: visible;}
	.main-visual__btn.button-next {right: 40rem;}
	.main-visual .swiper-pagination {bottom: 50rem;}
}

@media (max-width:860px){
	.main-visual__text .btn-wrap {margin-top: 65rem;}
}

@media (max-width:540px){
	.main-visual {height: 650rem;}
	.main-visual__text {left: 0; top: 50%; max-width: none; padding: 0 20rem; text-align: center; transform: translateY(-50%);}
	.main-visual__text p {margin-top: 15rem;}
	.main-visual__text p span {font-size: 16rem;}
	.main-visual__text .btn-wrap {margin-top: 43rem;}
	.main-visual__btn.button-next {display: none;}
}

/* main business */
.main-business {margin-top: 150rem;}
.main-business .btn-wrap {position: absolute;right: 0;top: -11rem;}
.main-business__list {gap: 42rem;margin-top: 40rem;}
.main-business__list span {display: block; margin-top: 8rem; line-height: 1.6; color: #666;}
.main-business__img {overflow: hidden; position: relative; aspect-ratio: 1/1; margin-bottom: 32rem;}
.main-business__img i {position: absolute;left:0;top:0;width: 100%;height: 100%;transition: var(--trans-01);}
.main-business__img i img {width: 100%; height: 100%; object-fit: cover;}

@media (hover: hover) and (pointer: fine){
	.main-business__list a:hover .main-business__img i {transform: scale(1.1);}
}

@media (max-width:1480px){
	.main-business__list p {font-size: 25rem;}
}

@media (max-width:1023px){
	.main-business {margin-top: 130rem !important;}
	.main-business__list {grid-template-columns: 1fr 1fr; gap:62rem 32rem; margin-top: 45rem;}
	.main-business__list p {font-size: var(--font-size-27)}
	.main-business__list span {margin-top: 5rem; line-height: 1.5;}
	.main-business__img {margin-bottom: 22rem;}
}

@media (max-width:540px){
	.main-business {margin-top: 70rem !important; text-align: center;}
	.main-business .btn-basic.mob-block {position: relative; right: auto; top:auto; display: inline-flex !important; margin: 40rem auto 0;}
	.main-business__list {grid-template-columns: 1fr; gap: 50rem; margin-top: 30rem;}
	.main-business__img {margin-bottom: 20rem;aspect-ratio: 3 / 2;}
}

/* main pr */
.main-pr__list {overscroll-behavior: none;flex-wrap: nowrap;padding: 150rem 0;}
.main-pr__item {flex-shrink: 0; position: relative; width: 100%; height: 610rem;}
.main-pr__item:nth-child(1) {background-image: url(../img/main/pr01.jpg);}
.main-pr__item:nth-child(2) {background-image: url(../img/main/pr02.jpg);}
.main-pr__item:nth-child(3) {background-image: url(../img/main/pr03.jpg);}
.main-pr__text {justify-content: flex-end; align-items: flex-start; height: 100%; padding-bottom: 150rem;}
.main-pr .main-title {margin-bottom: 20rem;}
.main-pr .btn-arrow {position: absolute; right: 0; bottom: 145rem;}
.main-pr .btn-arrow i {width: 25rem; height: 17rem;}

@media (max-width:1023px){
	.main-pr__list {flex-direction: column; padding: 130rem 0;}
	.main-pr__item {height: 470rem;}
	.main-pr__item:not(:last-child) {margin-bottom: 0;}
	.main-pr__item::before {opacity: .3; position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background: #000;}
	.main-pr__text {justify-content: center; padding-bottom: 0;}
	.main-pr .main-title {margin-bottom: 15rem;}
	.main-pr .btn-arrow {top: 50%; bottom: auto; transform: translateY(-50%);}
}

@media (max-width:540px){
	.main-pr .main-title {margin-bottom: 12rem;}
	.main-pr__item {height: 390rem;} 
	.main-pr__list {flex-direction: column; padding: 70rem 0;}
	.main-pr__text {text-align: center; align-items: center;}
	.main-pr .btn-arrow {position: relative; top: auto; margin-top: 42rem; transform: translateY(0);}
	.main-pr .btn-arrow i {width: 17rem; height: 14rem;}
}

/* main news */
.main-news {padding-bottom: 150rem;}
.main-news .main-title {
    margin-bottom: 39rem;
}
.main-news .swiper-container {overflow: inherit;}
.main-news .swiper-controls {margin-bottom: 60rem; justify-content: flex-end;}
.main-news:has(.empty_li) .swiper-controls {margin-bottom: 30rem;}
.main-news *.btn-arrow {margin: 0 4rem;}

@media (max-width:1023px){
	.main-news {padding-bottom: 130rem;}
}

@media (max-width:540px){
	.main-news {padding-bottom: 70rem;}
	.main-news .main-title {top: 5rem;}
	.main-news .swiper-controls  {margin-bottom: 25rem;}
	.main-news *.btn-arrow {margin: 0 2rem;}
	.main-news .swiper-container {overflow: hidden;}
}

/* main quick */
.main-quick {overflow: hidden; position: relative; padding: 140rem 0;}
.main-quick::before {filter: grayscale(1); -webkit-filter: grayscale(1); opacity: .06; position: absolute; right: 0; top: -32rem; content:''; width: 1070rem; height: 1082rem; background: url(../img/layout/symbol.svg) no-repeat center / 100%; transform: translateX(35%);}
.main-quick .wrap {perspective: 800rem;}
.main-quick__item a {padding: 60rem 95rem; border-radius: 20rem; border:1px solid rgba(255, 255, 255, .07); background: #3f3f3f; box-shadow: 0 5rem 20rem rgba(0, 0, 0, .2); transition: var(--trans-01);}
.main-quick__item + .main-quick__item {margin-top: 30rem;}

.main-quick__item i {display: flex; align-items: center; justify-content: center; width: 50rem; height: 57rem; margin-right: 35rem;}
.main-quick__item i img {max-width: 100%; max-height: 100%;}
.main-quick__item h3 {font-family: var(--lang-ko); text-transform: uppercase;}
.main-quick__text {width: 50%; margin-left: auto; padding-left: 80rem; border-left: 1px solid rgba(255, 255, 255, .1);}
.main-quick__text p {margin-bottom: 8rem; font-size: var(--font-size-24); font-weight: 700;}

@media (hover: hover) and (pointer: fine){
	.main-quick__item a:hover {background: var(--gr-01);}
	.main-quick__item a:hover i {mix-blend-mode: screen;}
}

@media (max-width:1023px){
	.main-quick {padding: 100rem 0;}
	.main-quick__item a {padding: 50rem 50rem 52rem;}
	.main-quick__item i {width: 45rem; height: 50rem;}
	.main-quick__text {padding-left: 50rem;}
}

@media (max-width:540px){
	.main-quick {padding: 50rem 0;}
	.main-quick__item + .main-quick__item {margin-top: 20rem;}
	.main-quick__item a {flex-wrap: wrap; justify-content: center; padding: 35rem 20rem 40rem; text-align: center; border-radius: 12rem;}
	.main-quick__item i {width: 23rem; height: 23rem; margin-right: 17rem;}
	.main-quick__text {width: 100%; margin-left: 0; margin-top: 12rem; padding: 20rem 0 0; border-top: 1px solid rgba(255, 255, 255, .1); border-left: none;}
	.main-quick__text p {margin-bottom: 5rem;}
}