@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:#009248; /* 포인트컬러 예시 */
	--color-white:#fff;
	--color-black:#000;
	--font-base:16rem;
	--font-eng:'Oswald', Sans-serif;
	--trans-ani:0.3s ease 0s;
	--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;
	--font55:55rem;
	--font60:60rem;
	--font70:70rem;
	--font80:80rem;
	--inr:1540;
	--sub-inr:1400;
	--sub-wide:1760;
	--inr-width: .92;
	--r:20rem;
}
@media (max-width:1024px){
	:root{
		--font-base:clamp(14rem, 1.563vw, 16rem);
		--font15:clamp(14rem, 1.465vw, 15rem);
		--font16:clamp(14rem, 1.563vw, 15rem);
		--font17:clamp(15rem, 1.66vw, 17rem);
		--font18:clamp(15rem, 1.758vw, 18rem);
		--font20:clamp(16rem, 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, 5.371vw, 50rem);
		--font55:clamp(30rem, 4.88vw, 55rem);
		--font60:clamp(35rem, 5.859vw, 60rem);
		--font70:clamp(45rem, 6.836vw, 70rem);
		--font80:clamp(50rem, 7.81vw, 80rem);
	}
}
@media (max-width:480px){
	:root{
		--r:10rem;
	}
}
/* 2) 폰트설정 */
body{font-size:var(--font-base, 16rem);}
@media (min-width:1921px){
	html{font-size:0.052vw /* 1px */;}
}
@media (max-width:1300px){
    html{font-size:0.077vw /* 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 */;}	
}

.eng {font-family: var(--font-eng);}

/* 3) open-control */
.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:120rem 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{padding:80rem 0;}
	.ready-page	strong{font-size:30rem;}
	.ready-page	p{font-size:16rem; word-break:keep-all;}
	.ready-page	p br{display:none;}
}


/* 7) 레이아웃설정 */
:where(.inr, .sub-inr, .sub-wide){ position: relative; margin: 0 auto !important; max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%);}
.sub-inr {max-width: calc(var(--sub-inr) * 1rem);}
.sub-wide {max-width: calc(var(--sub-wide) * 1rem);}

/* header */
#header{position:absolute; width: 100%; height: 90rem; z-index:50; background: var(--color-white); border-bottom: 1rem solid #eee;}
#header .inr {display:flex; justify-content: space-between; align-items: center; height: 100%;}
#header h1 a {display: block;}
#header h1 img {height: 65rem; object-fit: contain;}
/* gnb */
#header nav {height: 100%;}
#header nav .gnb {height: 100%; display:flex; align-items:center;}
#header nav .gnb li a {display:inline-block; word-break:keep-all;}
#header nav .gnb > li {position:relative; height: 100%;}
#header nav .gnb > li > a {display: flex; align-items: center; height: 100%; padding:0 45rem; font-size:var(--font20); font-weight: 500;}
#header nav .gnb > li .box {text-align: center; font-weight: 300; background-color:var(--color-point); color: var(--color-white); padding: 0 20rem;}
#header nav .gnb > li .box a {display:inline-block; font-size: var(--font17); font-weight:500; transition:opacity 0.3s ease; padding: 20rem; box-sizing: border-box; white-space: nowrap;}
#header nav .gnb > li .box a:hover {opacity: 0.5;}
#header nav .gnb .box > ul {display:flex; align-items: center;}
/* active */
#header nav .gnb .box {opacity:0; visibility:hidden; position:absolute; left:0; transform:translateX(0, 10rem); transition:0.3s ease; transition-property:opacity, visibility, transform;}
#header nav .gnb .active .box {opacity:1; visibility:visible; transform:translate(0, 0rem);}
/* util */
.util-area {display:flex; align-items:center; gap:60rem;}
.area_lang {display: flex; align-items: center; gap: 20rem; transition: all 0.3s ease;}
.area_lang a {opacity: 0.25; font-weight: 600}
.area_lang a.on {opacity: 1; display: flex; align-items: center; gap: 8rem;}
.area_lang a.on i {display: inline-block; font-size:20rem; margin-top: 2rem;}
.area_lang a i {display: none;}
/* mgnb */
.mgnb-btn {display: grid; grid-template-columns: repeat(3, 1fr); gap: 5rem; position: relative; width: 28rem; height: 28rem; background-color: transparent;}
.mgnb-btn span {position: absolute; font-size: 0;}
.mgnb-btn i {display: inline-block; width: 6rem; border-radius: 100rem; background: var(--color-black); aspect-ratio: 1; transition: .3s;}
.mgnb-btn:hover i:nth-of-type(1), .mgnb-btn:hover i:nth-of-type(3), .mgnb-btn:hover i:nth-of-type(7), .mgnb-btn:hover i:nth-of-type(9) { opacity: 0.2;}
.mgnb-btn.active i:nth-of-type(2), .mgnb-btn.active i:nth-of-type(4), .mgnb-btn.active i:nth-of-type(6), .mgnb-btn.active i:nth-of-type(8) {opacity: 0.2;}
/* mgnb close */
.mgnb-close {display: block; position: absolute; top: 25rem; right:25rem; z-index: 30; }
.mgnb-close .close {width: 40rem; height: 40rem; display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; justify-items:center}
.mgnb-close i {background: var(--color-white); display: inline-block; width: 7rem; border-radius: 100rem;aspect-ratio: 1; transition: .3s;}
.mgnb-close span {position: absolute; font-size: 0;}
.mgnb-close.active i:nth-of-type(2), .mgnb-close.active i:nth-of-type(4), .mgnb-close.active i:nth-of-type(6), .mgnb-close.active i:nth-of-type(8) {opacity: 0.2;}
.mgnb-close:hover i:nth-of-type(1), .mgnb-close:hover i:nth-of-type(3), .mgnb-close:hover i:nth-of-type(5), .mgnb-close:hover i:nth-of-type(7), .mgnb-close:hover i:nth-of-type(9) {opacity: 0.2;}
.mgnb-close:hover i:nth-of-type(2), .mgnb-close:hover i:nth-of-type(4), .mgnb-close:hover i:nth-of-type(6), .mgnb-close:hover i:nth-of-type(8) {opacity: 1;}

/* mobile-menu */
.mega-menu {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.8); backdrop-filter: blur(10px); transition:0.3s ease; transition-property:opacity, visibility;}
.mega-menu.active {opacity:1; visibility:visible;}
.gnb-mob {overflow-y:auto; width:100%; max-width:85%; background-color:#fff;}
.gnb-mob .gnb{padding:30rem;}
.gnb-mob .gnb > li{position:relative; border-bottom:1rem solid rgba(0,0,0,0.1);}
.gnb-mob .gnb > li > a{display:flex; align-items:center; padding:20rem 20rem; font-size:25rem; font-weight:600;}
.gnb-mob .gnb > li .open{position:absolute; top:20rem; right:20rem; width:20rem; height:20rem; background-color:transparent; font-size:0;}
.gnb-mob .gnb > li .open:before{content:'\e913'; display:block; font-family:xeicon !important; font-size:20rem;}
.gnb-mob .gnb > li > a.active ~ .open:before{content:'\e91a';}
.gnb-mob .gnb > li > a.on{color:var(--color-point);}
.gnb-mob .box{display:none; padding:30rem; background-color:#f3f3f3;}
.gnb-mob .box ul{display:flex; flex-direction:column; gap:10rem;}
.gnb-mob .box a{display:block; font-size:20rem;}
.gnb-mob .box a span {line-height:1.4; background-image: linear-gradient(90deg, #0ba557, #0ba557); background-size:0 2rem; background-repeat:no-repeat; background-position:0 100%; transition:0.5s;}
.gnb-mob .box a.on span {background-size:100% 2rem; color: #0ba557;}

/* mgnb open */
.gnb-mob {display:block;}
@media (hover: hover){.gnb-mob .box a:hover span{background-size:100% 2rem;}}
@media (min-width:1024px){
	.mgnb-close { top: 50rem; right:50rem; }
	.mega-menu {background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(10rem); align-items: center; }
	.gnb-mob {max-width: 90%; margin: 0 auto; width: 100%; background-color: transparent;}
	.gnb-mob .gnb {display: flex; color: var(--color-white); padding: 0;}
	.gnb-mob .gnb > li {flex: 1; border-bottom-width:0; border-left: 1px solid rgba(255,255,255,0.2); padding: 10rem 0;}
	.gnb-mob .gnb > li:first-child {border-left-width:0}
	.gnb-mob .gnb > li > a {font-size: 35rem; font-weight: 600; padding: 20rem 40rem; transition: .2s;}
	.gnb-mob .gnb > li > a span {background-image: linear-gradient(90deg, #fff, #fff); background-size: 0 2rem; background-repeat: no-repeat; background-position: 0 100%; transition: .4s;}
	.gnb-mob .gnb > li > a:hover span {background-size:100% 2rem; color: #fff;}
	.gnb-mob .gnb > li > a.on span {background-size:100% 2rem; color: #fff; padding-bottom: 1rem;}
	.gnb-mob .gnb > li:nth-child(1) > a, .gnb-mob .gnb > li:nth-child(2) > a {pointer-events: none;}
	.gnb-mob .gnb > li .open {display: none;}
	.gnb-mob .box {display: block; background-color: transparent; padding: 20rem 40rem;}
	.gnb-mob .box ul {gap: 20rem;}
	.gnb-mob .box a {font-size: 22rem; font-weight: 400;}
	.gnb-mob .box a span {background-image: linear-gradient(90deg, #0ba557, #0ba557); background-size: 0 2rem; background-repeat: no-repeat; background-position: 0 100%; transition: .4s; padding-bottom: 1rem;}
	.gnb-mob .box a:hover span {background-size:100% 2rem; color: #0ba557;}
}
@media (max-width:1280px){
	.gnb-mob .gnb > li > a {font-size: 28rem;}
}
@media (max-width:1024px){
	#header h1 img {height: 50rem;}
	#header nav {display: none;}
	.util-area {gap: 30rem;}
	.mega-menu .open{display:block;}
}
@media (max-width:480px){
	#header {height: 70rem;}
	#header h1 img {height: 40rem;}
	.area_lang {gap: 10rem;}
	.area_lang a.on i {font-size: 15rem;}
	.mgnb-btn {gap: 2rem; width: 25rem;height: 25rem;justify-content: center; align-items: center;}
	.mgnb-btn i {width: 4rem;}
	.util-area {gap: 20rem;}
	.gnb-mob {max-width: 85%;}
	.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;}
	.mgnb-close {top: 15rem; right: 15rem}
	.mgnb-close .close {width: 28rem;height: 28rem;}
	.mgnb-close i {width: 5rem;}
}


/* footer */
footer {padding: 80rem 0; background: #f5f5f5; font-size: var(--font15);}
footer .inr {display: flex; justify-content: space-between; gap:20rem;}
footer .footer_info {width:80%;}
footer .address {display: flex; flex-wrap: wrap; gap: 15rem 50rem;}
footer .address li {display: flex; align-items: center;}
footer .address svg {width: 16rem; margin-right: 5rem;}
footer .address b {display: inline-block; margin-right: 12rem; font-family: var(--font-eng);}
footer .address i[class*="xi-"]{margin-right: 5rem; font-size:20rem;}
footer .copy {font-weight: 600; margin-top: 20rem; /*text-transform: uppercase;*/}
footer .menu {display: flex; align-items: center; margin-top: 50rem;}
footer .menu a {opacity: 0.8;}
footer .menu a:hover {opacity: 1;}
footer .menu a:not(:first-child) {padding-left: 15rem; margin-left: 12rem; position: relative;}
footer .menu a:not(:first-child)::before {content: ''; position: absolute; top: 8rem; left: 0; width: 3rem; height: 3rem; background: #b5b5b5; border-radius: 50%;}
footer .top-btn {width: 70rem; height: 70rem; display: flex; gap: 1rem; flex-direction: column; align-items: center; justify-content: center; border-radius: 10rem; color: var(--color-white); background: var(--color-point); font-family: var(--font-eng);}

@media (max-width:767px){
	footer {padding: 50rem 0;}
	footer .inr {flex-wrap: wrap;}
	footer .footer_info {width: 85%;}
	footer .address {flex-wrap: wrap; gap: 15rem 30rem;}
	footer .menu {margin-top: 30rem;}
}
@media (max-width:480px){
	footer .footer_info {width: 100%;}
	footer .address li {flex-wrap: wrap; gap: 10rem;}
	footer .address b {margin-right: 0;}
	footer .top-btn {width: 55rem; height: 55rem; border-radius: 5rem;}
	footer .menu {flex-wrap: wrap; gap: 15rem;}
	footer .menu a:not(:first-child) {padding-left: 0; margin-left: 0;}
	footer .menu a:not(:first-child)::before {display: none;}

}