@charset "utf-8";

/*
 * main.css
 * 메인영역 삽입 추가하시면됩니다. 아래 커스텀진행하세요.
 *
 * 1) main visual
 *
 */
 
/* layout */
#header{position:absolute;}
#header .inr{border-bottom-width:0;}
#header h1 a{background:url(../images/common/logo_white.svg);}
#header nav .gnb > li > a{color:#fff;}
.util-list li:before{background-color:#fff;}
.util-list li a{color:rgba(255,255,255,0.8);}
.util-list li a:hover{color:rgba(255,255,255,1);}
.mega-menu__btn span i,
.mega-menu__btn span:before,
.mega-menu__btn span:after{background-color:#fff;}
@media (max-width:480px){
	#header .inr{padding:20rem calc(var(--page-pad) + 5rem);}
	.util-area{right:var(--page-pad);}
}
 
/* 1) main visual */
[data-mainVisual]{position:relative; height:100vh; padding:var(--page-visual);}
[data-mainVisual] .visual-list{overflow:hidden; height:100%; border-radius:20rem;}
	/* text */
[data-visual="text"]{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:70rem; position:absolute; top:50%; left:50%; z-index:5; box-sizing:content-box; margin-top:-50rem; color:#fff; text-align:center; transform:translate(-50%, -50%);}
[data-visual="text"] strong{box-sizing:content-box; border:6rem solid rgba(255,255,255,0.2); border-radius:50em; font-size:var(--font70); color:#fff; font-weight:600;}
[data-visual="text"] strong i{display:flex; justify-content:center; align-items:center; height:104rem; padding:0 40rem; background-image:linear-gradient(90deg, #15795e, #093e34); border-radius:50em;}
[data-visual="text"] em{display:block; position:relative; font-family:var(--font-eland); font-size:120rem; font-weight:700; color:#0a3f35; letter-spacing:-2rem;}
[data-visual="text"] em:after{content:attr(data-text); display:block; position:absolute; top:0; z-index:-1; -webkit-text-stroke:6rem #fff; text-shadow:0 10rem 30rem rgba(0,0,0,0.25);}
[data-visual="text"] :is(strong, em){opacity:0; transform:translateY(30rem); transition:1s ease 0s; transition-property:opacity, transform; word-break:keep-all; white-space:nowrap;}
	/* img */
[data-visual="img"]{overflow:hidden; display:block; height:100%;}
[data-visual="img"] img{object-fit:cover; width:100%; height:100%; transform:scale(1.1); transition:transform 7000ms linear;}
	/* active motion */
[data-visual="img"].motion__in img{transform:scale(1);}
[data-visual="text"].motion__in :is(strong, em, span){opacity:1; transform:translateY(0rem);}
[data-visual="text"].motion__in strong{transition-delay:0.15s;}
[data-visual="text"].motion__in em{transition-delay:0.3s;}
[data-visual="text"].motion__in span{transition-delay:0.45s;}
	/* control */
[data-mainVisual] .swiper-page{--swiper-theme-color:#fff; --swiper-pagination-bullet-inactive-color:#eee; position:absolute; bottom:50rem; left:50%; z-index:10; transform:translateX(-50%); width:auto;}
[data-mainVisual] .swiper-control{display:flex; align-items:stretch; position:absolute; bottom:30rem; right:50rem; z-index:10;}
[data-mainVisual] button{--sizeWid:60rem; opacity:0.6; display:flex; justify-content:center; align-items:center; width:var(--sizeWid); height:var(--sizeWid); background-color:transparent; transition:opacity 0.3s ease;}
[data-mainVisual] button[class*="swiper_"]{color:#fff;}
[data-mainVisual] button[class*="swiper_"] span{font-size:0;}
[data-mainVisual] button[class*="swiper_"] i{font-size:25rem;}
[data-mainVisual] button:hover{opacity:1;}
@media (max-width:1440px){
	/* text */
	[data-visual="text"]{box-sizing:border-box;}
}
@media (max-width:1024px){
	[data-mainVisual]{height:var(--higMob100); min-height:700rem;}
	/* text */
	[data-visual="text"] em{font-size:clamp(70rem, 9.77vw, 100rem);}
}
@media (max-width:768px){
	/* control */
	[data-mainVisual] .swiper-control{right:10rem;}
}
@media (max-width:480px){
	/* text */
	[data-visual="text"]{gap:30rem;}
	[data-visual="text"] strong{font-size:var(--font45);}
	[data-visual="text"] strong i{height:auto; padding:10rem 20rem;}
	[data-visual="text"] em{font-size:clamp(50rem, 12.5vw, 70rem);}
	[data-visual="text"] em:after{-webkit-text-stroke-width:4rem; text-shadow:0 10px 20px rgba(0,0,0,0.04);}
	/* control */
	[data-mainVisual] .swiper-page{bottom:30rem; left:10rem; transform:translateX(0);}
	[data-mainVisual] .swiper-control{bottom:15rem;}
	[data-mainVisual] button{--sizeWid:50rem;}
	[data-mainVisual] button[class*="swiper_"] i{font-size:20rem;}
}

/* 공통 */
[data-main]{padding:var(--page-top) 0;}
[data-main] .title em{font-family:var(--font-eng); font-size:var(--font20); color:var(--color-point); font-weight:700;}
[data-main] .title p{font-size:var(--font22); font-weight:300; line-height:1.4;}

.btn-more{opacity:0.6; display:flex; align-items:center; gap:10rem; margin-left:auto; font-size:var(--font18); transition:opacity 0.3s ease;}
.btn-more i{font-size:var(--font20);}
.btn-more:hover{opacity:1;}

/* 강의 */
[data-main="lecture"]{padding-bottom:calc(var(--page-top) * 2);}