@charset "utf-8";

/*
 * main.css
 * 메인영역 삽입 추가하시면됩니다. 아래 커스텀진행하세요.
 *
 * 1) main visual
 *
 */
 
/* 1) main visual */
[data-mainVisual]{position:relative; z-index:10; height:100vh; min-height:800rem;}
[data-mainVisual] .visual-list{display:flex; justify-content:center; align-items:center; height:100%;}
[data-mainVisual] img{max-width:100%;}
[data-mainVisual] .text{opacity:0; position:relative; z-index:5; margin-top:-50rem; transform:translateY(50rem); filter:blur(20rem); transition:0.8s cubic-bezier(0.15, 0.54, 0.22, 0.96) 0s; transition-property:opacity, transform, filter;}
	/* 사전신청 */
[data-mainVisual] .accept{position:absolute; bottom:-115rem; z-index:1; left:50%; display:flex; justify-content:center; align-items:center; width:602rem; height:580rem; background:url(../images/main/visual_moon.svg) no-repeat 50% 50%; background-size:auto 100%; transform:translateX(-50%);}
[data-mainVisual] .accept a{opacity:0; display:flex; justify-content:center; align-items:center; position:relative; width:350rem; height:75rem; background-color:var(--color-dnavy); border-radius:50em; color:#fff; font-family:var(--font-jua); font-size:var(--font40); transform:translateY(20rem); filter:blur(20rem); transition:0.8s cubic-bezier(0.15, 0.54, 0.22, 0.96) 0s;}
[data-mainVisual] .accept a:after{content:''; display:block; position:absolute; right:0; top:-55rem; width:45rem; height:44rem; background:url(../images/main/visual_star.svg) no-repeat 50% 50%; background-size:auto 100%;}
[data-mainVisual] .accept a:hover{box-shadow:0 10rem 30rem rgba(0,0,0,0.2); transition:0.3s ease 0s;}
	/* text */
[data-visual="text"]{display:flex; flex-direction:column; gap:25rem; position:absolute; top:50%; left:50%; z-index:5; max-width:1400rem; width:100%; box-sizing:content-box; padding:0 20rem; color:#fff; transform:translate(-50%, -50%);}
[data-visual="text"] strong{font-size:18rem; color:#99bbff; font-weight:500;}
[data-visual="text"] em{font-size:70rem; font-weight:600;}
[data-visual="text"] span{margin-top:25rem; font-size:24rem; line-height:1.6; font-weight:300;}
[data-visual="text"] :is(strong, em, span){opacity:0; transform:translateY(30rem); transition:1s ease 0s; transition-property:opacity, transform; word-break:keep-all;}
	/* 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;}
.motion__in .text{opacity:1; transform:translateY(0rem); filter:blur(0)}
.motion__in .accept a{opacity:1; transform:translateY(0rem); filter:blur(0); transition-delay:0.2s;}
	/* 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){
	/* text */
	[data-visual="text"] em{font-size:clamp(50rem, 6.836vw, 70rem);}
	[data-mainVisual]{height:100vmin; min-height:700rem;}
	[data-mainVisual] .text{text-align:center;}
	[data-mainVisual] .text img{max-width:90%;}
	[data-mainVisual] .accept{width:48.83vw/* 500rem */; height:46.88vw/* 480rem */;}
	[data-mainVisual] .accept a{width:80%;}
}
@media (max-width:768px){
	[data-mainVisual] .text img{max-width:80%;}
	/* control */
	[data-mainVisual] .swiper-control{right:10rem;}
}
@media (max-width:480px){
	[data-mainVisual]{height:90vmin; min-height:500rem;}
	[data-mainVisual] .accept{width:83.33vw/* 400rem */; height:79.17vw/* 380rem */;}
	[data-mainVisual] .accept a{height:60rem;}
	[data-mainVisual] .accept a:after{top:-40rem; right:20rem; width:40rem; height:39rem;}
	/* text */
	[data-visual="text"] strong{font-size:16rem;}
	[data-visual="text"] em{font-size:40rem;}
	[data-visual="text"] span{font-size:18rem;}
	/* 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;}
}

/* 공통 */
#wrap{overflow-x:hidden;}
[data-main]{position:relative; padding:var(--page-top) 0; word-break:keep-all;}
[data-main] .title{display:flex; flex-direction:column; align-items:center; gap:20rem;}
[data-main] .title h2{font-family:var(--font-jua); font-size:var(--font50); font-weight:normal; text-align:center;}
[data-main] .title p{opacity:0.5; font-size:var(--font20); font-weight:300; text-align:center;}
ko-blank{flex-basis:100%; height:0;}
.inr-box{padding:50rem 60rem; background-color:#fff; border-radius:var(--r);}
.more-btn{display:flex; justify-content:center; align-items:center; width:260rem; height:50rem; margin:50rem auto 0; border:2rem solid #fff; border-radius:50em; font-size:13rem; font-weight:600; color:#fff; transition:0.3s ease;}
@media (hover:hover){
	.more-btn:hover{background-color:var(--color-point); border-color:var(--color-point); color:var(--color-bg); box-shadow:0 10rem 20rem rgba(252,222,0,0.3);}
}
@media (max-width:480px){
	[data-main] .title{gap:10rem;}
	[data-main] .title p{font-size:var(--font18);}
	.inr-box{padding:40rem 20rem;}
	.more-btn{width:100%;}
}

/* 배경 */
.obj-bg{position:absolute; z-index:1; top:0; width:100%; height:1010rem; background:url(../images/main/main_bg01.jpg) no-repeat 50% 50%; background-size:cover;}
@media (max-width:1024px){
	.obj-bg{height:1250rem; background-image:url(../images/main/main_bg01_mob.jpg);}	
}
@media (max-width:480px){
	.obj-bg{height:150vmin;}
}

/* text list */
.title-list{
	&{display:flex; flex-direction:column; gap:5rem;}
	li{display:flex; align-items:flex-start; gap:5rem 20rem;}
	li em{flex:none; display:flex; justify-content:center; align-items:center; width:100rem; height:40rem; background-color:#fff; border:2rem solid #be8738; border-radius:50em; font-size:var(--font16); font-weight:700; color:#be8738;}
	li span{flex:auto; display:flex; flex-wrap:wrap; align-items:center; gap:5rem; min-height:40rem; font-size:var(--font20); font-weight:600; letter-spacing:-0.5rem;}
	li i{display:inline-flex; align-items:center; padding:5rem 20rem; background-color:#be8738; border-radius:50em; color:#fff; font-size:var(--font18);}
	
	@media (max-width:480px){
		&{gap:15rem;}
		li{flex-direction:column;}
		li em{width:100%; height:30rem; border-color:#ccc; color:#555;}
		li i{display:flex; width:100%; font-size:var(--font16);}
		li span{justify-content:center; width:100%; min-height:inherit; text-align:center;}
	}
}

/* 소개 */
[data-main="intro"]{
	&{padding-top:60rem;}
	.title{margin-bottom:30rem;}
	.title:after{content:''; display:block; width:100%; height:4rem; margin-top:15rem; background-color:#f1ead5; border-radius:50em;}
	.title p{opacity:1;}
	.inr-box{position:relative; z-index:10;}
	.title-list{max-width:820rem; margin:0 auto;}

	.obj-intro{
		&{position:absolute; top:-10rem; z-index:9; width:100%; height:100%; min-height:883rem; background:url(../images/main/bg_sand.png) no-repeat 50% 0; background-size:cover;}
		.group01{position:absolute; top:-80rem; left:var(--page-pad);}
		.group02{position:absolute; top:-60rem; right:0;}
		
		&.grass{background-image:url(../images/main/bg_grass.png);}
		&.sand{background-image:url(../images/main/bg_sand.png);}
	}
	
	@media (max-width:1700px){
		.obj-intro .group01{left:-30rem;}
		.obj-intro .group02{right:-100rem;}
	}
	@media (max-width:1024px){
		.inr-1100{margin:0 var(--page-pad);}
		.obj-intro .group01{left:-100rem;}
		.obj-intro .group02{right:-150rem; top:-100rem;}
	}
	@media (max-width:768px){
		.obj-intro .group01 img{width:326rem !important;}
		.obj-intro .group02 img{width:394rem !important;}
	}
	@media (max-width:480px){
		.obj-intro .group01,
		.obj-intro .group02{display:none;}
	}
}

/* 프로그램 */
[data-main="program"]{
	&{padding-top:calc(var(--page-top) / 2 + 20rem);}
	.title{color:#fff;}
	.inr-1100{position:relative; z-index:10;}
	.program-list{
		&{display:grid; grid-template-columns:repeat(4, 1fr); gap:20rem; margin-top:50rem;}
		a{display:flex; flex-direction:column; align-items:center; gap:15rem; padding:35rem 30rem; background-color:#fff; border-radius:var(--r); text-align:center;}
		i{width:106rem; height:95rem; margin-top:50rem;}
		em{margin-top:30rem; font-size:var(--font25); font-weight:700;}
		span{font-size:var(--font18);}
		a:after{content:'VIEW MORE'; display:flex; justify-content:center; align-items:center; width:100%; height:50rem; margin-top:10rem; background-color:#2ed1a2; border-radius:50em; font-size:13rem; font-weight:700; letter-spacing:1rem; color:#fff; transition:0.3s ease;}
		li:nth-of-type(2) a:after{background-color:#f167de;}
		li:nth-of-type(3) a:after{background-color:#88d8f5;}
		li:nth-of-type(4) a:after{background-color:#eca667;}
	}
	.obj-program{
		.group03{position:absolute; top:calc(var(--page-top) - 30rem); left:30rem; z-index:1;}
		.group04{position:absolute; top:calc(var(--page-top) / 2); right:10rem; z-index:1;}
	}
	
	@media (hover:hover){
		.program-list a:hover:after{background-color:var(--color-bg) !important;}	
	}
	@media (min-width:1025px){
		.program-list{
			li:nth-of-type(2){transition-delay:0.2s;}
			li:nth-of-type(3){transition-delay:0.4s;}
			li:nth-of-type(4){transition-delay:0.6s;}
		}
	}
	@media (max-width:1700px){
		.obj-program .group03{left:-100rem;}
		.obj-program .group04{right:-70rem;}
	}
	@media (max-width:1024px){
		&{padding-top:var(--page-top);}
		.program-list{grid-template-columns:repeat(2, 1fr);}
		.obj-program .group03{top:var(--page-top);}
		.obj-program .group04{top:auto; bottom:calc(var(--page-top) * -1);}
	}
	@media (max-width:768px){
		.obj-program .group03 img{width:233rem !important;}
		.obj-program .group04{right:-30rem; bottom:calc(var(--page-top) / 2 * -1);}
		.obj-program .group04 img{width:299rem !important;}
	}
	@media (max-width:480px){
		&{padding-top:calc(var(--page-top) / 2);}
		.program-list{
			&{grid-template-columns:repeat(2, 1fr); gap:10rem; margin-top:30rem;}
			a{height:100%; padding:30rem 15rem;}
			a:after{height:40rem; margin-top:auto;}
			i{width:85rem; height:76rem; margin-top:20rem;}
			em{margin-top:0;}
			span br{display:none;}
		}
		.obj-program .group03,
		.obj-program .group04{display:none;}
	}
}

/* 공지사항 */
[data-main="notice"]{
	&{padding-top:0 !important; color:#fff;}
	.inr-1100{position:relative; z-index:10;}
	.list{
		&{margin-top:50rem;}
		li{height:110rem; padding:10rem 50rem; border-bottom:1px solid rgba(255,255,255,0.1);}
		li:first-child{border-top:1px solid rgba(255,255,255,0.1);}
		a{display:flex; justify-content:space-between; align-items:center; gap:60rem; height:100%;}
		strong{flex:auto; display:flex; align-items:center; font-weight:normal; font-size:var(--font20); transition:0.3s ease;}
		strong em{display:-webkit-box; overflow:hidden; -webkit-line-clamp:1; -webkit-box-orient:vertical; text-overflow:ellipsis;}
		.date{flex:none; opacity:0.3; font-size:var(--font16);}
		.new{flex:none; display:inline-block; position:relative; width:20rem; height:20rem; margin-right:10rem; border:1px solid var(--color-point); border-radius:3rem; font-size:0; vertical-align:middle;}
		.new:after{content:'N'; display:block; position:absolute; top:50%; left:50%; font-size:12rem; font-weight:900; color:var(--color-point); transform:translate(-50%, -50%);}
	}
	.ko_board_noData{margin-top:50rem; border-color:rgba(255,255,255,0.1); color:#555;}
	.obj-notice{
		.group05{position:absolute; top:calc(var(--page-top) - 40rem); left:0; z-index:1;}
		.group06{position:absolute; top:calc(var(--page-top) + 60rem); right:0; z-index:1;}
	}
	
	@media (hover:hover){
		.list a:hover strong{color:var(--color-point);}	
	}
	@media (max-width:1700px){
		.obj-notice .group05{left:-100rem;}
		.obj-notice .group06{right:-100rem;}
	}
	@media (max-width:1300px){
		.list .date{opacity:0.8;}
	}
	@media (max-width:1024px){
		.obj-notice .group05,
		.obj-notice .group06{display:none;}
	}
	@media (max-width:768px){
		.list li{padding:10rem 30rem;}
	}
	@media (max-width:480px){
		.list li{height:80rem; padding:10rem;}
		.list a{flex-direction:column; justify-content:center; align-items:flex-start; gap:5rem;}
		.list strong{flex:0 1 100%;}
		.list .date{opacity:0.4;}
	}
}

/* 안내 sns바로가기 */
[data-main="info"]{
	&{padding-top:0 !important;}
	.inr-1100{display:grid; grid-template-columns:minmax(260rem, 540rem) repeat(2, 1fr); gap:20rem; position:relative; z-index:10;}
	div[class^="info-"] > *{display:flex; flex-direction:column; justify-content:center; gap:10rem; height:100%; min-height:297rem; background-color:var(--color-point); border-radius:var(--r);}
	div[class^="info-"]:not(.info-contact){
		a{align-items:center; padding:50rem 0; color:#fff;}
		i{width:44rem;}
		em{width:128rem; margin-top:10rem;}
		p{font-weight:500;}
		span{display:flex; justify-content:center; align-items:center; width:170rem; height:40rem; margin-top:10rem; background-color:#fff; border-radius:50em; font-weight:700; color:#7f29b4;}
		&.info-youtube i{width:54rem; margin:5rem 0;}
		&.info-youtube em{width:104rem;}
		&.info-youtube span{color:#ea1e1a;}
	}
	.info-contact{
		div{position:relative; padding:0 50rem; background-image:linear-gradient(0deg, #fc9400, var(--color-point), var(--color-point) 80%); border:1px solid #ffe94e; color:var(--color-bg);}
		div:before,
		div:after{content:''; display:block; position:absolute;}
		div:before{left:0; top:0; width:106rem; height:101rem; background:url(../images/main/icon_moon.svg) no-repeat 50% 50%; background-size:auto 100%; transform:translateY(-50%);}
		div:after{right:0; bottom:35rem; width:158rem; height:82rem; background:url(../images/main/info_contact01.svg) no-repeat 0 0; background-size:100% auto;}
		h3{font-family:var(--font-jua); font-size:var(--font25); font-weight:normal;}
		a{font-size:var(--font40); font-weight:700;}
		p strong{display:block; margin-top:5rem; font-weight:700;}
	}
	.info-instar{
		a{background-image:linear-gradient(0deg, #7923bb, #c42b67, #db8c40);}
	}
	.info-youtube{
		a{background-image:linear-gradient(0deg, #e70000, #ff6e6e);}
	}
	.obj-info{
		.group07{position:absolute; bottom:0; left:0; z-index:1;}
		.group08{position:absolute; bottom:5rem; right:0; z-index:1;}
	}
	
	@media (hover:hover){
		div[class^="info-"]:not(.info-contact) a{transition:0.3s ease;}
		.info-instar a:hover{box-shadow:0 10rem 20rem rgba(182,88,255,0.4);}
		.info-youtube a:hover{box-shadow:0 10rem 20rem rgba(255,46,46,0.6);}
	}
	@media (min-width:1025px){
		.info-instar{transition-delay:0.2s;}
		.info-youtube{transition-delay:0.4s;}
	}
	@media (max-width:1700px){
		.obj-info .group07{left:-50rem;}
		.obj-info .group08{right:-50rem;}
	}
	@media (max-width:1024px){
		div[class^="info-"]:not(.info-contact) a{padding:50rem 10rem;}
		.obj-info .group08{right:-100rem; bottom:auto; top:calc((var(--page-top) *2 + 50rem) * -1);}
	}
	@media (max-width:768px){
		.info-contact div{padding:0 20rem;}
		.obj-info .group07 img{width:157rem !important;}
		.obj-info .group08{right:-50rem; top:calc(var(--page-top) *2 * -1);}
		.obj-info .group08 img{width:213rem !important;}
	}
	@media (max-width:480px){
		&{padding-top:calc(var(--page-top) / 2) !important;}
		.inr-1100{grid-template-columns:1fr;}
		div[class^="info-"] > *{min-height:inherit;}
		div[class^="info-"]:not(.info-contact){
			 a{padding:30rem 10rem;}
			 i{width:34rem;}
			 em{width:100rem; margin-top:0;}
			 &.info-youtube i{width:44rem;}
			 &.info-youtube em{width:84rem;}
		}
		.info-contact div{padding:50rem 20rem 30rem;}
		.info-contact div:before{width:85rem; height:81rem;}
		.info-contact div:after{bottom:auto; top:0; width:126rem; height:66rem;}
	}
}