@charset "utf-8";

/*
* File       : main.css
* Author     : B-WORKER
* Dependency : css/reset.css
*
 * SUMMARY:
 * 1) 사이트 시작 커버
 * 2) main-visual
 * 3) main-people
 * 4) main-banner
 * 5) main-showcase
 * 6) main-culture
 * 7) main-academy
*/

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

.motion-on .main-cover{opacity:0; visibility:hidden}

/* **************************************** *
 * main-visual (히어로)
 * **************************************** */
.main-visual{position:relative; height:var(--height-full); overflow:hidden;}
.main-visual__bg{position:absolute; inset:0;}
.main-visual__bg i{position:absolute; inset:0; display:block;}
.main-visual__photo{background:url(../img/main/main-visual-bg.jpg) no-repeat 50% 50%/cover;}
.main-visual__bg .grain{opacity:.07;}
.main-visual__bg::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.36) 17%, rgba(93,64,43,0) 93%), linear-gradient(180deg, rgba(0,0,0,.1) 0%, rgba(0,0,0,0) 60%);}

.main-visual__inner{height:100%;}
.main-visual__title{position:absolute; left:0; bottom:85rem; color:var(--w);}
.main-visual__title em{font-style:italic;}
.main-visual__line{display:block;}

.scroll-down{position:absolute; right:0; bottom:0; display:flex; flex-direction:column; align-items:center; gap:6rem;}
.scroll-down__label{font-family:var(--caption); font-weight:800; font-size:10rem; letter-spacing:0.15em; color:var(--w);}
.scroll-down__bar{position:relative; width:1rem; height:70rem; background:var(--op-w20); overflow:hidden;}
.scroll-down__bar::before{content:""; position:absolute; top:0; left:0; width:100%; height:28rem; background:var(--w); animation:scroll-down-fill 1.8s cubic-bezier(.4, 0, .2, 1) infinite;}

@keyframes scroll-down-fill{
	0%{top:0; opacity:1;}
	70%{opacity:1;}
	100%{top:60%; opacity:0;}
}

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

@media (max-width:540px){
	.main-visual__title{bottom:40rem;}
	.scroll-down{gap:4rem;}
	.scroll-down__bar{height:40rem;}
	.scroll-down__bar::before{height:16rem;}
}

/* **************************************** *
 * main-people
 * **************************************** */
.main-people{padding:80rem 0;}
.main-people__inner{display:flex; align-items:flex-start; gap:20rem;}

.main-people__col-left{flex:0 0 800rem; max-width:800rem; margin-top:150rem; position:sticky; top:140rem; align-self:flex-start;}
.main-people__cta{margin-top:53rem;margin-left: 73rem;}
.main-people__photo{position:relative; margin-top:33rem; aspect-ratio:800/446;}
.main-people__photo img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.main-people__photo::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.3);}
.main-people__photo .grain{opacity:.12;}

.main-people__grid{flex:1; display:grid; grid-template-columns:repeat(2, 1fr); gap:10rem;}

.people-card{position:relative; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; aspect-ratio:507/490; padding:0 42rem 41rem 40rem; background:var(--bg-surface);}
.people-card__num{font-family:var(--lang-en); font-weight:300; font-size:120rem; line-height:1; color:var(--op-b05);}
.people-card__info{display:flex; flex-direction:column; align-items:flex-end; gap:11rem; width:100%; text-align:right;}

@media (max-width:1480px){
	.main-people__col-left{flex-basis:680rem; max-width:680rem;}
	.people-card__num{font-size:100rem;}
}

@media (max-width:1200px){
	.main-people{padding:70rem 0;}
	.main-people__col-left{flex-basis:560rem; max-width:560rem; margin-top:110rem;}
	.people-card{padding:0 30rem 30rem 30rem;}
	.people-card__num{font-size:84rem;}
}

@media (max-width:1023px){
	.main-people{padding:100rem 0;}
	.main-people__inner{flex-direction:column; gap:60rem;}
	.main-people__col-left{position:static; flex-basis:auto; max-width:none; width:100%; margin-top:0; top:auto;}
	.main-people__grid{width:100%;}
}

@media (max-width:860px){
	.main-people{padding:80rem 0;}
	.main-people__inner{gap:40rem;}
	.main-people__cta{margin-top:34rem;}
	.main-people__photo{margin-top:24rem;}
}

@media (max-width:540px){
	.main-people{padding:60rem 0;}
	.main-people__grid{ gap:6rem;}
	.people-card__info h3{font-size: 23rem;}
	.people-card{aspect-ratio:auto;min-height:174rem;padding: 8rem 14rem 15rem;}
	.people-card__num{font-size:52rem;}
	.people-card__info{gap:2rem;}
	.people-card__info p{font-size: 12rem;}
	.main-people__cta{margin-left:31rem}
}

/* **************************************** *
 * main-banner
 * **************************************** */
.main-banner{position:relative; height:var(--height-full); overflow:hidden; display:flex; align-items:center;}
.main-banner__bg{position:absolute; inset:0;}
.main-banner__bg i{position:absolute; inset:0; display:block;}
.main-banner__photo{background:url(../img/main/banner-bg.jpg) no-repeat 50% 100%/cover; background-attachment:fixed;}
.main-banner__bg .grain{opacity:.04;}

.main-banner__content{position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:38rem; padding-left:74rem;}
.main-banner__title span{display:block; color:var(--w);}
.main-banner__title span:last-child{margin-top:7rem;}
.main-banner__title em{font-style:italic;}
.main-banner__content p{color:var(--op-w70);}

@media (max-width:1200px){
	.main-banner__content{padding-left:60rem;}
}

@media (max-width:1023px){
	.main-banner__bg .main-banner__photo{background-attachment:scroll;}
	.main-banner__content{padding-left:40rem; gap:28rem;}
	.main-banner__title span:last-child{margin-top:4rem;}
}

@media (max-width:540px){
	.main-banner__content{padding-left:20rem; gap:20rem;}
}

/* **************************************** *
 * main-showcase
 * **************************************** */
.main-showcase{padding:80rem 0;}

@media (max-width:1023px){
	.main-showcase{padding:100rem 0;}
}

@media (max-width:860px){
	.main-showcase{padding:54rem 0;}
}

/* **************************************** *
 * main-culture
 * **************************************** */
.main-culture{padding:53rem 0 79rem;}

.main-culture__grid{display:grid; grid-template-columns:repeat(4, 1fr); gap:12rem; margin-top:45rem;}
.main-culture__grid li{position:relative; aspect-ratio:452/442;}
.main-culture__grid li a{position:absolute; inset:0; display:block; cursor:pointer;}
.main-culture__grid img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:grayscale(1); transition:all .4s ease-in;}
.main-culture__grid li::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.37); pointer-events:none;}
.main-culture__grid li .grain{opacity:.1; pointer-events:none;}

@media (hover:hover) and (pointer:fine){
	.main-culture__grid li:hover img{filter:grayscale(0); transform:scale(1.05); }
	.main-culture__grid li:hover .grain{opacity:0}
}

.main-culture__cta{display:flex; align-items:center; justify-content:center; margin-top:51rem;}

@media (max-width:1200px){
	.main-culture__grid{grid-template-columns:repeat(2, 1fr); gap:16rem;}
}

@media (max-width:1023px){
	.main-culture{padding:100rem 0;}
	.main-culture__grid{margin-top:60rem;}
	.main-culture__cta{margin-top:60rem;}
}

@media (max-width:860px){
	.main-culture{padding:80rem 0;}
}

@media (max-width:540px){
	.main-culture{padding:60rem 0;}
	.main-culture{padding-top:0}
	.main-culture__grid{grid-template-columns:1fr 1fr; gap:10rem; margin-top:40rem;}
	.main-culture__cta{margin-top:40rem;}
	.main-culture .main-title-row{flex-direction: column; align-items: flex-start;}
	.main-culture .main-title-row > p{padding-left: 34rem;}
}

/* **************************************** *
 * main-academy
 * **************************************** */
.main-academy{position:relative; height:701rem; overflow:hidden;}
.main-academy__bg{position:absolute; inset:0;}
.main-academy__bg i{position:absolute; inset:0; display:block;}
.main-academy__photo{background:linear-gradient(90deg, rgba(0,0,0,.06) 17%, rgba(93,64,43,0) 93%), url(../img/main/academy-bg.jpg) no-repeat 50% 50%/cover;}
.main-academy__bg::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.37);}
.main-academy__bg .grain{opacity:.1;}

.main-academy__inner{padding-top:241rem; color:var(--w);}
.main-academy__inner .main-title h2{color:var(--w);}
.main-academy__inner .main-title-group__desc{margin-top:12rem; color:var(--op-w80);}
.main-academy .btn-wrap{margin-top:97rem; padding-left:74rem; color:var(--w);}
.main-academy__cta{color:var(--w);}

@media (max-width:1200px){
	.main-academy{height:560rem;}
	.main-academy__inner{padding-top:190rem;}
	.main-academy .btn-wrap{margin-top:70rem;}
}

@media (max-width:1023px){
	.main-academy{height:480rem;}
	.main-academy__inner{padding-top:150rem;}
	.main-academy .btn-wrap{margin-top:50rem;}
}

@media (max-width:540px){
	.main-academy{height:420rem;}
	.main-academy__inner{padding-top:40rem;}
	.main-academy__inner .main-title-group__desc{padding-left:40rem; margin-top:10rem;}
	.main-academy .btn-wrap{margin-top:50rem; padding-left:40rem}
}