@charset "utf-8";

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

/* **************************************** *
 * Main animation set
 * **************************************** */
[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 visual */
.main-visual{position: relative; 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 i{display:block; height:100%; background-position:50% 50%; background-size: cover;}
.main-visual__btn.button-prev{flex-direction: row-reverse;}
.main-visual__controls{position:absolute;left: 80rem;z-index:999;top: 44vh;}
.main-visual__controls > div{display:flex;align-items:center;justify-content: center;}
.main-visual__count{display:flex; align-items:center; margin:0 50rem; font-size:17rem; color:#fff;}
.main-visual__count i{display:flex; align-items:center; position:relative;}
.main-visual__count i::after{content:""; display:block; width:3rem; height:3rem; margin:0 10rem; background:#fff;}
.main-visual__btn.button-next::after{transform:rotate(-90deg);}
.main-visual__btn.button-prev::after{transform: rotate(90deg);}

.main-visual .swiper-pagination{display:flex;gap: 38rem;flex-direction: column;align-items: flex-start;}
.main-visual .swiper-pagination-bullet{background: var(--f-01);}
.main-visual .swiper-pagination-bullet{opacity:0.4;width: 9rem;height: 9rem;background:#fff;border-radius: 20rem;}
.main-visual .swiper-pagination-bullet-active{opacity:1;}

.main-visual__text{position:absolute;top: 39vh;width:100%;text-align:center;color:#fff;}
.main-visual__text h2{overflow:hidden;line-height: 1.24;font-weight:600;font-size: 65rem;letter-spacing:-0.5rem;text-transform: uppercase;font-weight: 200;}
.main-visual__text p{margin-top:17rem; font-weight:700; font-size:23rem;}
.main-visual__text a{color: #fff;}

.main-visual__bar{position:absolute; bottom:0; z-index:50; width:100%; height:10rem; background:rgba(255,255,255,0.3);}
.main-visual__bar > i{position:absolute; width:0%; height:100%; background:var(--c-01);}
.main-visual .swiper-slide-active .main-visual__bar > i{width:100%; transition:all 5s ease;}

.main-visual__play{position:absolute; top:50%; left:0; z-index:99999; background:#fff; font-size:30rem; cursor:pointer;}
.main-visual__play:not(.on){opacity:0; visibility:hidden;}
.main-visual__play.on{opacity:1; visibility:visible;}

.main-visual__info{display:flex; justify-content:space-between; position:absolute; bottom:0; left:0; z-index:5; width:100%; padding:0rem 80rem; border-top:1px solid rgba(255,255,255,0.3);}
.main-visual__info *{color:#fff;font-size: 15rem;}
.main-visual__location{height:100rem; padding-left:53rem; border-left:1px solid rgba(255,255,255,0.3); font-family:var(--lang-ko); font-size:var(--font-14);}
.main-visual__location li:not(:last-child) {margin-bottom: 3rem;}
.main-visual__location img{height:18rem; margin-right:10rem;}
a.main-visual__contact{font-size:var(--font-14); color:rgba(255,255,255,0.7);}
a.main-visual__contact i{border-bottom:1px solid;}

@media all and (max-width:1023px){
	.main-visual{min-height:600rem;}
	.main-visual__text h2{font-size:48rem;}
	.main-visual__btn{display:inline-block !important; margin-top:30rem; padding:18rem 40rem; background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.8); font-weight:600; font-size:15rem; border-radius:50rem;}
	.main-visual__controls{display:flex; justify-content:center; top:auto; bottom:150rem; left:40rem; left:0; width:100%; align-content:center;}
	.main-visual .swiper-pagination{display:flex; flex-direction:row;}
	.main-visual__info{padding:0rem 40rem;}
	.main-visual__location{height:100rem; padding-left:35rem;}
}

@media all and (max-width:540px){
	.main-visual__text{top:255rem;}
	.main-visual__text h2{padding: 0 10rem; line-height:1.2; font-size:28rem;}
	.main-visual__text p{margin-top:10rem; font-size:15rem;}
	.main-visual__count{margin:0 10rem; font-size:15rem;}
	.main-visual__btn{padding: 14rem 26rem;font-size: 12rem;margin-top: 25rem;}
	.main-visual__location{display:none;}
	.main-visual__info{display:none;}
	.main-visual .swiper-pagination-bullet{width:7rem; height:7rem;}
	.main-visual .swiper-pagination{gap:23rem;}
	.main-visual__controls{bottom:40rem;}
}

/* line */
.main-line{position:absolute; width:100%; height:100%;}
.main-section-container{position:relative;}
.main-line i{border-color:rgba(0,0,0,0.06) !important;}
.main-line-height i{display:block; height:100%; border-right:1px solid;}
.main-line .wrap-wide > div,
.main-line .wrap-wide{height:100%;}
.main-line-height{display:flex; justify-content:space-between; position:absolute; top:0; left:0; width:100%;}
.main-line-width i{display:block; width:100%; height:1px; border-bottom:1px solid;}
.main-line-width i:first-child{margin-top:-146rem;}
.main-line-width{display:flex; justify-content:space-between; flex-direction:column;}

/* about */
.main-about,
.main-portfolio{padding:125rem 0;}
.main-about__txt p{margin-right:39rem; letter-spacing:-0.4rem; font-family: var(--lang-ko);}
.main-tit > i{font-family:var(--lang-ko); font-weight:400; font-size:13rem; color:#999;}
.main-tit > h3{margin-top:31rem; font-weight:100; font-size:65rem; color:var(--b-01); text-transform:uppercase;}
.main-tit > h3 em{display:block; margin-left:239rem;}
.main-tit,
.main-about__txt{position:relative; padding-left:25rem;}
.main-about__txt{display:flex; justify-content:space-between; margin-top:180rem;}
.main-about__txt h6{color:var(--b-02);}
.main-about__img{margin-top:119rem;}
.main-about__txt i{border-bottom:1px solid; font-weight:500; color:#222;}

@media all and (max-width:1023px){
	.main-tit > h3{margin-top:20rem; font-size:47rem;}
	.main-tit > h3 em{margin-left:0;}
	.main-about,
	.main-portfolio{padding:95rem 0;}
	.main-about__txt{justify-content:space-between; align-items:flex-start; margin-top:180rem; flex-direction:column;}
	.main-about__txt p br{display:none;}
	.main-about__txt{margin-top:14rem;}
	.main-about__txt p{width:90%; margin-top:60rem; margin-right:0;}
	.rolling-img__box img{height:120rem;}
	.rolling-img img{margin:0 7rem;}
	.main-about__img{margin-top:79rem;}
}

@media (max-width: 860px){
	:root{--font-40:35rem;}
	.main-tit,
	.main-about__txt{padding-left:0;}
}

@media (max-width: 540px){
	.main-tit,
	.main-about__txt{padding-left:0;}
	.main-tit > h3{margin-top:15rem; font-size:31rem;}
	.main-about__txt h6{font-size:16rem;}
	.main-about__txt p{width:100%; margin-top:30rem;}
	.main-about,
	.main-portfolio{padding:75rem 0;}
	.rolling-img__box img{height:100rem;}
	.main-about__img{margin-top:55rem;}
}

/* process */
.full-section__bg{position:absolute;top:0;left:0;width:100%;height:100%;background-position:50% 50%;background-repeat:no-repeat;background-size: cover;}
.main-process__bg{background-image:url(../img/main/main-process.jpg);}
.main-contact__bg{background-image:url(../img/main/main-contact-bg.jpg);}
.full-section.main-contact{padding:147rem 0rem;}
.full-section{position:relative;padding:190rem 0rem;text-align:center;overflow: hidden;}
.full-section *{color:var(--f-01);}
.full-section__txt h4{font-weight:100; text-transform:uppercase;}
.full-section__txt p{margin-top:10rem; font-weight:300; font-size:16rem;}

@media all and (max-width:1023px){
	.full-section{padding:160rem 0rem;}
	.main-contact__bg{background-position:90% 50%;}
}

@media all and (max-width:540px){
	.full-section__txt h4{font-weight:200;font-size: 23rem;letter-spacing:-1rem;}
	.full-section{padding:100rem 0rem;}
	.full-section__txt p{margin-top:5rem; font-size:14rem;}
	.full-section.main-contact{padding: 70rem 0rem;background:#000;}
	.main-line-height i:nth-child(3) ~ i{display:none;}
	.main-contact__bg{opacity:0.8; background-position:85% 50%;}
	.main-contact__txt{text-align:center;}
	.main-contact__txt p{line-height:1.5;margin-top: 10rem;padding:0rem 40rem;}
}

/* portfolio */
.main-portfolio__cont{margin-top:69rem;}
.main-portfolio__menu{position:absolute; bottom:0rem; left:730rem;}
.main-portfolio__menu li.active{background:var(--c-01); font-weight:500; color:#fff;}
.main-portfolio__menu li{display:flex; justify-content:center; align-items:center; width:88rem; height:88rem; background:none; font-weight:700; font-size:17rem; color:var(--b-02); transition:var(--trans-01); border-radius:100%;}
.main-portfolio__img img{width:100%;height: 385rem;object-fit:cover;}
.main-portfolio__img{display:block;overflow:hidden;transition:var(--trans-01);border-radius:0;width: 100%;}
.main-portfolio__link strong{display:block;margin-top:25rem;font-weight:700;font-size: var(--font-18);color:var(--b-02);}
.main-portfolio__tag{margin-top:10rem; margin-left:-1rem; font-family:var(--lang-ko); font-size:var(--font-14); color:#666; gap:5rem;}
.main-portfolio__tag li{padding:5rem 10rem; border:1px solid #D0D0D0; border-radius:40rem;}
.main-portfolio__list li:hover  .main-portfolio__img{box-shadow:9rem 10rem 0px rgba(0,0,0,0.1); transition:var(--trans-02); border-radius:360rem; border-bottom-left-radius:0; border-bottom-right-radius:0;}
.main-portfolio__list li:hover strong{color:var(--c-01);}
.main-portfolio__list li strong{transition:var(--trans-01);}

@media (max-width:1680px){
	.main-portfolio__img img{height: 235rem;}
}

@media all and (max-width:1023px){
	.main-portfolio__link strong{margin-top:17rem;}
	.main-portfolio [data-grid="5"]{gap:18rem; grid-template-columns:1fr;}
	.main-portfolio__cont{margin-top:45rem;}
}

@media (max-width:860px){
	.main-portfolio__menu{right:0rem; left:auto;}
}

@media (max-width: 540px){
	.main-portfolio__cont{margin-top:18rem;}
	.main-portfolio__link strong{margin-top:13rem;font-size:17rem;}
	.main-portfolio__tag li{padding:5rem 10rem;font-size:12rem;background: #fff;}
	.main-portfolio__tag{margin-top:6rem;}
	.main-portfolio [data-grid="5"]{gap:30rem 18rem;}
	.main-portfolio__menu{display:flex; justify-content:flex-start; position:relative; margin-top:28rem;}
	.main-portfolio__menu li{width:74rem; height:38rem; font-size:14rem; border-radius:5rem;}
	.main-portfolio__list li:hover  .main-portfolio__img{box-shadow:none; border-radius:0;}
	.main-portfolio__img img{width:100%;height:auto;object-fit:cover;}
	.main-portfolio__list{grid-template-columns: 1fr;}
	
	#footer{margin:0;}
}