@charset "utf-8";
@import url('unable/board.css');
@import url('unable/board_renew.css');
@import url('custom_board.css');

/*
 * layout.css
 * 레이아웃 공통요소들 작업요소에 맞게 수정하시면됩니다.
 *
 * 1) root 설정
 * 2) 폰트설정
 * 3) open-control
 * 4) 언어선택
 * 5) 준비중
 * 6) 관련사이트-목록열기형
 * 7) 레이아웃설정
 *
 */

/* 1) root 설정  */
:root{
	--color-base:#222; /* 선언이 안되면 #333 기본컬러로 적용됨 */
	--color-point:#4b8a44;
	--color-white:#fff;
	--color-black:#000;
	--font-base:20rem;

	--font14:14rem;
	--font15:15rem;
	--font16:16rem;
	--font17:17rem;
	--font18:18rem;
	--font20:20rem;
	--font22:22rem;
	--font23:23rem;
	--font25:25rem;
	--font30:30rem;
	--font35:35rem;
	--font40:40rem;
	--font45:45rem;
	--font50:50rem;
	--font60:60rem;
	--font70:70rem;
	
	--font-eng:'Poppins', Sans-serif;
	--font-combine:'Poppins', 'Pretendard', Sans-serif;
	--font-eland:'ELAND_Choice_M';
	--font-xi:'xeicon';
	--trans-ani:0.3s ease 0s;
}
@media (max-width:1024px){
	:root{
		--font-base:clamp(14rem, 1.563vw, 16rem);
		--font14:clamp(13rem, 1.367vw, 14rem);
		--font15:clamp(14rem, 1.465vw, 15rem);
		--font16:clamp(14rem, 1.563vw, 15rem);
		--font17:clamp(15rem, 1.66vw, 17rem);
		--font18:clamp(16rem, 1.758vw, 18rem);
		--font20:clamp(18rem, 1.953vw, 20rem);
		--font22:clamp(18rem, 2.148vw, 22rem);
		--font23:clamp(18rem, 2.246vw, 23rem);
		--font25:clamp(20rem, 2.441vw, 25rem);
		--font30:clamp(22rem, 2.93vw, 30rem);
		--font35:clamp(22rem, 3.418vw, 35rem);
		--font40:clamp(25rem, 3.906vw, 40rem);
		--font45:clamp(28rem, 4.395vw, 45rem);
		--font50:clamp(30rem, 4.88vw, 50rem);
		--font60:clamp(35rem, 5.859vw, 60rem);
		--font70:clamp(45rem, 6.836vw, 70rem);
	}
}

/* 2) 폰트설정 */
body{font-size:var(--font-base, 16rem);}
@media (min-width:1921px){
	html{font-size:0.052vw /* 1px */;}
}
@media (max-width:1500px){
    html{font-size:0.07vw /* 1px */;}
}
@media (max-width:1024px){
    html{font-size:0.098vw /* 1px */;}
}
@media (max-width:768px){
    html{font-size:0.130vw /* 1px */;}
}
@media (max-width:480px){
    html{font-size:0.271vw /* 1.3px */;}	
}

/* 3) open-control */
/* div.open-control
 *     button.open-control__btn
 *     div.list or ul.list
 * */
.open-control{position:relative;}
.open-control .list{display:none; position:absolute; top:100%; width:100%; padding:15rem; background-color:#fff; border:1rem solid #eee;}
.open-control .list a{display:inline-block;}

/* 4) 언어선택 */
.lang-area{position:relative; min-width:120rem;}
.lang-area .open-control__btn{display:flex; align-items:center; gap:10rem; background-color:transparent; font-size:17rem; font-weight:500;}
.lang-area .list ul{display:flex; flex-direction:column; gap:5rem; font-size:15rem;}
.lang-area .list a{opacity:0.5; font-weight:600; transition:0.3s ease;}
.lang-area .list a:hover{opacity:1;}

/* 5) 준비중 */
.ready-page{padding:var(--page-top) 0; text-align:center;}
.ready-page strong{display:block; font-size:35rem;}
.ready-page strong i{opacity:0.2; display:block; margin-bottom:10rem; font-size:45rem;}
.ready-page p{margin-top:20rem; font-size:18rem; line-height:1.4;}
@media (max-width:480px){
	.ready-page	strong{font-size:30rem;}
	.ready-page	p{font-size:16rem; word-break:keep-all;}
	.ready-page	p br{display:none;}
}

/* 6) 관련사이트-목록열기형 */
.relate-site{position:relative; max-width:260rem;}
.relate-site .open-control__btn{position:relative; width:100%; height:55rem; box-sizing:border-box; padding:0 30rem 0 20rem; background-color:transparent; border:1rem solid rgba(14,14,14,0.15); font-size:15rem; font-weight:600; text-align:left; color:#333; transition:0.3s ease;}
.relate-site .open-control__btn .xi-plus-min{position:absolute; right:20rem; top:50%; margin-top:-10rem; font-size:20rem; transition:transform 0.3s;}
.relate-site .open-control__btn.active{border-color:#111;}
.relate-site .open-control__btn.active .xi-plus-min{transform:rotate(45deg);}
.relate-site .list{display:none; position:absolute; bottom:100%; top:auto; width:100%; box-sizing:border-box; padding:35rem 20rem; background:#fff; border:1rem solid #111; border-bottom:0;}
.relate-site .list ul > li{margin-top:10rem;}
.relate-site .list ul > li:first-child{margin-top:0;}
.relate-site .list a{opacity:0.5; display:inline-block; font-size:14rem; font-weight:500; transition:opacity 0.3s;}
.relate-site .list a:hover{opacity:1;}
@media (max-width:480px){
	.relate-site{max-width:100%;}
}

/* 7) 레이아웃설정 */
#header{
	&{position:relative; z-index:90; width:100%;}
	.inr{display:flex; justify-content:center; align-items:center; position:relative; padding:40rem var(--page-pad) 30rem; border-bottom:1rem solid rgba(0,0,0,0.1);}
	h1{position:absolute; left:var(--page-pad); width:180rem; height:49rem;}
	h1 a{display:block; width:100%; height:100%; background:url(../images/common/logo_ori.svg) no-repeat 50% 50%; background-size:100% auto; font-size:0;}
	
	@media (max-width:1024px){
		.inr{justify-content:flex-start; padding:30rem calc(var(--page-pad) + 10rem) 20rem;}
		h1{position:static;}
	}
	@media (max-width:480px){
		h1{width:144rem; height:39rem;}
		.inr{padding:10rem var(--page-pad);}
	}
}

/* gnb */
#header nav{padding-top:14px;}
@media (max-width:1024px){
	#header nav{display:none;}
}
#header nav .gnb{
	&{display:flex; align-items:center;}
	li a{display:inline-block; word-break:keep-all;}
	.none{display:none;}
	> li{
		&{position:relative;}
		> a{padding:0 50rem 15rem; font-size:var(--font25); color:#222; font-weight:600;}
		.box:not(.depth03){
			&{width:100%; min-width:180rem; padding:20rem; background-color:#fff; border:1rem solid #eee; box-shadow:0 20rem 30rem rgba(0,0,0,0.15);}
			a{display:block; font-weight:500; transition:opacity 0.3s ease;}
			&:is(:hover) a{opacity:0.5;}
			&:is(:hover) a:hover{opacity:1;}
		}
		.box > ul{display:flex; flex-direction:column; gap:10rem;}
		.box.depth03{margin-left:10rem;}
	}
	/* gnb active */
	.box:not(.depth03){opacity:0; visibility:hidden; position:absolute; left:50%; transform:translate(-50%, -30rem); transition:0.3s ease; transition-property:opacity, visibility, transform;}
	.active .box:not(.depth03){opacity:1; visibility:visible; transform:translate(-50%, 0);}
	
	@media (max-width:1800px){
		> li > a{padding-left:30rem; padding-right:30rem;}
	}
	@media (max-width:1500px){
		> li > a{font-size:var(--font20);}
	}
}


/* maga menu */
.mega-menu{--sizeHig:60rem; opacity:0; visibility:hidden; display:flex; align-items:stretch; position:fixed; top:0; left:0; z-index:9999; width:100%; height:100%; background-color:rgba(0,0,0,0.6); transition:0.3s ease; transition-property:opacity, visibility;}
.mega-menu.active{opacity:1; visibility:visible;}
/*.mega-menu .open{display:none;}  pc에서 사용안할거면 활성화 */
.gnb-mob{
	&{overflow-y:auto; width:80%; height:calc(100% - var(--sizeHig)); background-color:#fff;}
	.gnb{
		&{padding:30rem;}
		> li{
			&{position:relative; border-bottom:1rem solid rgba(0,0,0,0.1);}
			> a{display:flex; align-items:center; padding:20rem 20rem; font-size:23rem; font-weight:500;}
			& .open{position:absolute; top:20rem; right:20rem; width:20rem; height:20rem; background-color:transparent; font-size:0;}
			& .open:before{content:'\e913'; display:block; font-family:xeicon !important; font-size:20rem;}
			> a.active ~ .open:before{content:'\e91a';}
			> a.on{color:var(--color-point);}	
		}
	}
	.box{
		&{display:none; padding:30rem; background-color:#f3f3f3;}
		ul{display:flex; flex-direction:column; gap:10rem;}
		a{display:block; font-size:18rem;}
		a span{line-height:1.4; background:linear-gradient(90deg, #222, #222); background-size:0 2rem; background-repeat:no-repeat; background-position:0 100%; transition:0.5s;}
		a.on span{background-size:100% 2rem; font-weight:700;}
	}
}
	/* maga control */
[class*="mega-menu__"]{
	&{display:block; width:60rem; height:60rem; background-color:transparent;}
	span{
		&{display:block; position:relative; width:16rem; height:14rem; margin:0 auto; font-size:0;}
		i,
		&:before,
		&:after{display:block; position:absolute; height:2rem; background-color:#222; transform:rotate(0);}
		&:before,
		&:after{content:''; width:100%;}
		&:before{right:0; top:0; transition:0.5s ease 0s;}
		&:after{left:0; bottom:0; transition:0.5s ease 0s;}
		i{opacity:1; left:0; top:6rem; width:100%; transition:opacity 0.3s, transform 0.5s ease 1.1s;}
	}

	&.active i{opacity:0;}
	&.active span:before{right:0; top:5rem; transform:rotate(45deg);}
	&.active span:after{left:0; bottom:7rem; transform:rotate(-45deg);}
	
	@media (max-width:480px){
		&{width:50rem; height:50rem;}
	}
}
	 /* mega menu - open btn */
	/* pc에서만 사용한다면 display none처리 */
.mega-menu__btn{display:none;}
	/* mega menu - close btn */
.mega-menu__close{flex:auto; width:auto; height:auto; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);}
.mega-menu__close em{display:flex; justify-content:center; align-items:center; width:60rem; height:60rem;}
.mega-menu__close span{width:26rem; height:24rem;}
.mega-menu__close span i,
.mega-menu__close span:before,
.mega-menu__close span:after{background-color:#fff;}
.mega-menu__close.active span:before{top:11rem;}
.mega-menu__close.active span:after{bottom:11rem;}
.mega-menu__close:focus{outline:none;}
@media (hover: hover){
	.gnb-mob .box a:hover span{background-size:100% 2rem;}
}
@media (max-width:1024px){
	[class*="mega-menu__"]{display:block;}
	.mega-menu__close{display:flex; justify-content:flex-end; padding-right:30rem; padding-top:20rem;}
	.mega-menu .open{display:block;}
}
@media (max-width:480px){
	.mega-menu__close{padding-right:10rem;}
	.mega-menu{--sizeHig:50rem;}
	.gnb-mob .gnb{padding:20rem 0;}
	.gnb-mob .gnb > li > a{font-size:18rem;}
	.gnb-mob .box{padding:25rem 20rem;}
	.gnb-mob .box a{font-size:16rem;}
}

/* util */
.util-area{position:absolute; right:var(--page-pad); display:flex; align-items:center;}
.util-list{
	&{--sizeGap:35rem; display:flex; align-items:center; gap:var(--sizeGap); margin-right:30rem;}
	li{position:relative;}
	li:before{content:''; opacity:0.3; display:block; position:absolute; top:50%; left:calc(var(--sizeGap) / 2 * -1); width:3px; height:3px; background-color:#222; transform:translateY(-50%);}
	li:first-child:before{display:none;}
	li a{font-size:var(--font18); color:rgba(34,34,34,0.6); transition:color 0.3s ease;}
	li a:hover{color:rgba(34,34,34,1);}
}
@media (max-width:480px){
	.util-area{right:10rem;}
	.util-area .util-list{display:none;}
	.util-area .round-btn.classroom{display:none;}
}

/* mega util */
.mega-util{
	&{display:flex; align-items:center; position:absolute; bottom:0; left:0; width:80%; background-color:var(--color-point);}
	.util-list{--sizeGap:0; flex:1 1 calc(100% / 3 * 2); margin-right:0;}
	.util-list li{flex:1 1 auto; height:var(--sizeHig); border-right:1rem solid #346a2e;}
	.util-list li:before{display:none;}
	.util-list li a{display:flex; justify-content:center; align-items:center; height:100%; padding:0 5rem; text-align:center; color:rgba(255,255,255,0.8);}
	.round-btn.classroom{flex:1 1 calc(100% / 3); justify-content:center; min-width:inherit; height:var(--sizeHig); padding:0 5rem; border-width:0; border-radius:0; background-color:transparent; color:rgba(255,255,255,0.8); font-size:var(--font18); font-weight:normal;}
	.round-btn.classroom i{display:none;}
	.round-btn.classroom span{padding-left:0;}
	
	@media (max-width:480px){
		.util-list li a,
		.round-btn.classroom{font-size:var(--font16); font-weight:500;}
	}
}

/* footer */
#footer{
	&{position:relative; padding-top:70rem; padding-bottom:50rem; border-top:1rem solid #dadada;}
	.inr-1400{display:grid; grid-template-columns:270rem auto; gap:70rem;}
	.footer-logo{width:270rem; height:43rem; background:url(../images/common/logo.svg) no-repeat 50% 50%; background-size:100% auto; font-size:0;}
	.footer-info{
		&{display:flex; flex-direction:column; gap:30rem; font-size:var(--font18);}
		ul{display:flex; flex-wrap:wrap; align-items:center; gap:10rem 45rem;}
		ul li{display:flex; align-items:center; gap:10rem;}
		ul li em{color:#999;}
		.copyright{font-size:var(--font16); color:#999; line-height:1.4;}
	}
	
	@media (max-width:1024px){
		.inr-1400{grid-template-columns:1fr; gap:30rem;}
		.footer-logo{margin:0 auto;}
		.footer-info{align-items:center;}
		.footer-info ul{justify-content:center;}
	}
	@media (max-width:768px){
		.footer-logo{width:216rem; height:34rem;}
		.footer-info ul{gap:10rem 15rem;}
	}
	@media (max-width:480px){
		.footer-info ul{flex-direction:column;}
		.footer-info .copyright{text-align:center;}
	}
}
.top-btn{
	&{--sizeWid:100rem; display:flex; justify-content:center; align-items:center; position:absolute; left:50%; top:calc(var(--sizeWid) / 2 * -1); width:var(--sizeWid); height:var(--sizeWid); background-color:#fff; transform:translateX(-50%);}
	&:after{content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; border:1rem solid #dadada; border-radius:100%; mask:linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 50%, rgba(0, 0, 0, 0) 50%);}
	span{opacity:0.7; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3rem; position:relative; z-index:2; font-size:var(--font16); font-weight:600; transition:0.3s ease;}
	i{font-size:var(--font25);}
	&:hover span{opacity:1; color:var(--color-point);}
}

/* scroll down */
.scroll-wrap{
	&{display:flex; align-items:center; gap:30rem; position:absolute; bottom:0; right:var(--page-pad); z-index:40; color:#fff; writing-mode:vertical-rl;}
	span{font-family:var(--font-eng); font-size:13rem; font-weight:600; color:rgba(255,255,255,0.8); letter-spacing:1rem;}
	div{overflow:hidden; position:relative; width:2rem; height:140rem; background-color:rgba(255,255,255,0.5);}
	div i{display:block; position:absolute; left:0; width:100%; height:100%; background-color:#fff; transform:translateY(-100%); transform-origin:0 0; animation:scrollAni 10s ease infinite;}
	
	@media (max-width:1024px){
		&{right:calc(var(--page-pad) + 10rem); gap:20rem;}
	}
	@media (max-width:768px){
		span{font-size:12rem;}
		div{height:100rem;}
	}
	@media (max-width:480px){
		span{font-size:10rem;}
		div{height:80rem;}
	}
}
@keyframes scrollAni{
	0%{transform:translateY(-100%);}
	30%, 40%{transform:translateY(0);}
	80%, 100%{transform:translateY(100%);}
	
}

/* btn */
.round-btn{
	&{display:flex; justify-content:center; align-items:center; min-width:185rem; height:55rem; background-color:#fff; border:3rem solid var(--color-point); border-radius:50em; font-weight:700; letter-spacing:-0.5rem; transition:0.3s ease;}
	&.classroom{
		&{justify-content:space-between; padding:0 5rem; color:var(--color-point);}
		span{padding-left:15rem;}
		i{--sizeWid:40rem; display:flex; justify-content:center; align-items:center; width:var(--sizeWid); border-radius:100%; background-color:var(--color-point); aspect-ratio:1/1; color:#fff;}
	}
	@media (hover: hover){
		&:hover{background-color:var(--color-point); color:#fff;}	
	}
	@media (max-width:1500px){
		&{min-width:165rem;}
	}
}

/* 공통 타이틀 */
:is([data-main], [data-subarea]) .title{
	&{display:flex; align-items:center; gap:25rem; position:relative;}
	h2{position:relative; padding-left:60rem; font-size:var(--font40); font-weight:700; letter-spacing:-0.5rem;}
	h2 i{display:block; position:absolute; left:0; top:0; width:41rem; height:48rem; background:url(/images/content/icon_title.svg) no-repeat 50% 50%; background-size:100% auto;}
	
	@media (max-width:768px){
		h2{padding-left:45rem;}
		h2 i{width:33rem; height:38rem;}
	}
}

/* 서브레이아웃 */
.area-subVisual{
	&{padding:80rem var(--page-pad) 0; border-bottom:1rem solid rgba(0,0,0,0.1);}
	h2{margin-bottom:90rem; font-size:var(--font70); font-weight:600; text-align:center;}
	
	@media (max-width:480px){
		&{padding: 40rem var(--page-pad) 0;}
		h2{margin-bottom: 30rem;}
	}
}

/* lnb */
.area_lnb .lnb{width:100%;}
.area_lnb .lnb ul{display:flex; justify-content:flex-start; flex-wrap:nowrap; white-space:nowrap;}
.area_lnb .lnb ul li{padding:0 50rem;}
.area_lnb .lnb ul a{display:block; padding-bottom:20rem; font-size:var(--font20); color:#aaa; font-weight:500;}
.area_lnb .lnb ul a.on{color:var(--color-point); border-bottom:3rem solid var(--color-point);}
@media (min-width:481px){
    .area_lnb .lnb ul{justify-content:center;}
}
@media (max-width:768px){
    .area_lnb .lnb ul li{padding:0 30rem;}
    .area_lnb .lnb ul a{padding-bottom:15rem;}
}
@media (max-width:480px){
    .area_lnb{margin:auto; width:92%;}
    .area_lnb .lnb ul li{padding:0 15rem;}
    .area_lnb .lnb ul a{padding-bottom:10rem; font-size:16rem;}
}

/* location */
.location-wrap{
	&{margin-bottom:40rem;}
	ul{--sizeGap:50rem; display:flex; justify-content:center; align-items:center; gap:var(--sizeGap);}
	ul li{position:relative;}
	ul li:before{content:''; display:block; position:absolute; top:50%; left:calc((var(--sizeGap) / 2 + 4rem) * -1); width:8rem; height:8rem; margin-top:-4rem; border:1px solid rgba(0,0,0,0.3); border-width:0 1px 1px 0; transform:rotate(-45deg);}
	ul li:first-child:before{display:none;}
	[data-loaction="home"]{display:block; width:18rem; height:18rem; background:url(../images/common/location_home.svg) no-repeat 50% 50%; background-size:100% auto; font-size:0;}
	
	@media (max-width:480px){
		&{margin-bottom:30rem;}
	}
}