@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 기본컬러로 적용됨 */
	--point:#0063c0;
	--second:#00b0ec;
	--white:#fff;
	--black:#000;
	--font-base:16rem;
	--font-eng:'Red Hat Display', Sans-serif;
	--font-combine:'Pretendard', Sans-serif;
	--trans-ani:0.3s ease 0s;
	--inr:1500;
	--inr-wide:1780;
	--inr-width: .92;
	--font15:15rem;
	--font16:16rem;
	--font17:17rem;
	--font18:18rem;
	--font19:19rem;
	--font20:20rem;
	--font22:22rem;
	--font25:25rem;
	--font28:28rem;
	--font30:30rem;
	--font30:32rem;
	--font35:35rem;
	--font40:40rem;
	--font45:45rem;
	--font50:50rem;
	--font60:60rem;
}
@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);
		--font19:clamp(16rem, 1.855vw, 19rem);
		--font20:clamp(18rem, 1.953vw, 20rem);
		--font22:clamp(18rem, 2.148vw, 22rem);
		--font23:clamp(18rem, 2.246vw, 23rem);
		--font25:clamp(20rem, 2.441vw, 25rem);
		--font25:clamp(20rem, 2.734vw, 28rem);
		--font30:clamp(22rem, 2.93vw, 30rem);
		--font32:clamp(22rem, 3.125vw, 32rem);
		--font35:clamp(25rem, 3.418vw, 35rem);
		--font40:clamp(25rem, 3.906vw, 40rem);
		--font45:clamp(25rem, 4.395vw, 45rem);
		--font50:clamp(30rem, 4.88vw, 50rem);
		--font60:clamp(35rem, 5.859vw, 60rem);
	}
}
/* 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 */;}	
}

/* 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;}
}

/* 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) 레이아웃설정 */
:where(.inr, .wrapper){ position: relative; margin: 0 auto !important; max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%);}
.inr-wide{ max-width: calc(var(--inr-wide) * 1rem); }
#header {position: absolute; width:100%; height: 100rem; inset: 0 0 auto;  z-index: 999; transition:0.3s ease; transition-property:height, background;}
#header .inr { display:flex; justify-content:space-between; align-items:center; height: 100%; margin: 0 auto;}
#header .logo {display: flex; align-items: center; z-index: 999;}
#header .logo img {height: 25rem; max-height: 100%; object-fit: contain;}
#header .logo span{display:block; width:147rem; height:25rem; background:url(../images/common/logo.svg) no-repeat 50% 50%; background-size:auto 100%; object-fit:contain; font-size:0;}
#header .nav_box {display: flex;  gap: 50rem; align-items: center; height: 100%;}
#header .onlineBtn {display: flex; gap:7rem; align-items: center; font-size: 18rem; height:50rem; padding:0 25rem; border-radius:30rem; color: var(--white); background: var(--point);}
#header .onlineBtn i {font-size: 22rem;}
/* gnb */
#header nav {height: 100%;}
#header nav .gnb {height: 100%; display:flex; align-items:center;}
#header nav .gnb li a {word-break:keep-all; color: var(--white);}
#header nav .gnb > li {position:relative; height: 100%;}
#header nav .gnb > li > a {display: flex; align-items: center;  height: 100%; padding: 0 30rem; font-size:20rem; font-weight: 600;}
#header nav .gnb > li .box { width:100%; width:200rem; padding:5rem 0rem; background-color:rgba(0,0,0,0.4); box-shadow:0 20rem 30rem rgba(0,0,0,0.15); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);}
#header nav .gnb > li .box a {display:block; transition:opacity 0.3s ease; padding: 12rem 12rem; font-size: 15rem; line-height: 1.35; color: var(--white);}
#header nav .gnb > li .box a:hover {opacity: 0.5;}
#header nav .gnb .box > ul {display:flex; flex-direction:column;}
#header nav .gnb .box > ul li + li {border-top:1px dotted rgba(255,255,255,0.3);}
#header nav .gnb .depth03{display:none;}
/* util */
.util-area {display:flex; align-items:center; gap:40rem; z-index: 999;}
.util-area .lang {display: flex;}
.util-area .lang a {position: relative; font-size: 15rem; color: var(--white); opacity: 0.5; padding: 0 15rem;}
.util-area .lang a.active {opacity: 1;}
.util-area .lang li:nth-child(2) a::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 1rem; height: 11rem; background: rgba(255, 255, 255, 0.5); }

/* gnb active */
#header nav .gnb .box {opacity:0; visibility:hidden; position:absolute; left:50%; transform:translate(-50%, -35rem); transition:0.3s ease; transition-property:opacity, visibility, transform;}
#header nav .gnb .active .box {opacity:1; visibility:visible; transform:translate(-50%, -5rem);}

/* maga control */
[class*="mega-menu__"] {display:block; width:45rem; height:45rem; background-color:transparent;}
[class*="mega-menu__"] span{display:block; position:relative; width:100%; height:10rem; margin:0 auto; font-size:0;}
[class*="mega-menu__"] span i,
[class*="mega-menu__"] span:before,
[class*="mega-menu__"] span:after{display:block; position:absolute; height:2rem; background-color:var(--white); transform:rotate(0);}
[class*="mega-menu__"] span:before,
[class*="mega-menu__"] span:after{content:''; width:100%;}
[class*="mega-menu__"] span:before{right:0; top:0; transition:0.5s ease 0s;}
[class*="mega-menu__"] span:after{left:0; bottom:0; transition:0.5s ease 0s;}
[class*="mega-menu__"] span i{opacity:1; left:0; top:6rem; width:100%; transition:opacity 0.3s, transform 0.5s ease 1.1s;}
[class*="mega-menu__"].active i{opacity:0;}
[class*="mega-menu__"].active span:before{right:0; top:0; transform:rotate(45deg);}
[class*="mega-menu__"].active span:after{left:0; bottom:7rem; transform:rotate(-45deg);}

/* maga menu */
.mega-menu{opacity:0; visibility:hidden; display:flex; align-items:stretch; position:fixed; top:0; left:0; z-index:500; 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;}
.gnb-mob{ overflow-y:auto; display: flex; align-items: center; width:100%; height: 100%; background-color:rgba(0, 0, 0, 0.5); backdrop-filter: blur(10px);}
.gnb-mob .gnb { max-width: calc(var(--inr) * 1rem); width: calc(var(--inr-width) * 100%); margin: 0 auto; color: var(--white);}
.gnb-mob .gnb > li {position:relative;}
.gnb-mob .gnb > li + li {margin-top: 30rem;}
.gnb-mob .gnb > li > a {display:flex; align-items:center; font-size:35rem; font-weight:800;  position: relative;}
.gnb-mob .gnb > li > a::before {position: absolute; content: ''; top: 0; left: -12rem; width:8rem;height: 8rem; border-radius: 50%; background: var(--second); opacity: 0;}
.gnb-mob .gnb > li:nth-child(-n+4) > a {pointer-events: none;}
.gnb-mob .gnb > li .open{position:absolute; top:20rem; right:20rem; width:20rem; height:20rem; background-color:transparent; font-size:0; display: none;}
.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::before, .gnb-mob .gnb > li > a.active::before {opacity: 1;}
.gnb-mob .box {margin-top: 20rem;}
.gnb-mob .box ul {display:flex; flex-wrap: wrap; gap:10rem 30rem;}
.gnb-mob .box a {display:block; font-size:var(--font16); letter-spacing: -0.02em;  opacity: 0.7; padding:5rem 0;}
.gnb-mob .box a:hover {opacity: 1;}
.gnb-mob .box a span {line-height:1.5; background:linear-gradient(90deg, #fff, #fff); background-size:0 1rem; background-repeat:no-repeat; background-position:0 100%; transition:0.5s;}
.gnb-mob .box a.on span {background-size:100% 1rem; font-weight:700;}
.gnb-mob .box.depth03{display:none;}
/* mega menu - close btn */
.mega-menu__btn {display:block;}
.mega-menu__close {flex:auto; width:auto; height:auto; position: absolute; top: 20rem; right: 20rem; background: var(--point) !important; z-index: 20; display: none;}
.mega-menu__close em{display:flex; justify-content:center; align-items:center; width:40rem; height:40rem; }
.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;}

/* header fix */
#header.fix{
	&{position:fixed; top:0; left:0; height:80rem; background-color:var(--white); box-shadow:0 10rem 20rem rgba(0,0,0,0.1);}
	.logo span{background-image:url(../images/common/logo_color.svg);}
	nav .gnb > li > a{color:#222;}
	.util-area .lang a{color:#222;}
	.util-area .lang li:nth-child(2) a::before{background-color:rgba(0,0,0,0.2);}
	[class*="mega-menu__"]:not(.active) span i,
	[class*="mega-menu__"]:not(.active) span:before,
	[class*="mega-menu__"]:not(.active) span:after{background-color:#222;}
}

@media (hover: hover){
	.gnb-mob .box a:hover span{background-size:100% 1rem;}
}

@media (max-width:1400px){
	#header nav .gnb > li > a {padding: 0 25rem;}
}
@media (max-width:1024px){
	#header nav{display:none;}
	#header.fix{height:60rem;}
	.mega-menu .open{display:block;}  
	.gnb-mob{align-items:flex-start;}
	.gnb-mob .gnb{padding:150rem 0 60rem;}
	.gnb-mob .gnb > li:nth-child(-n+4) > a {pointer-events: inherit;}
	.gnb-mob .gnb > li  {padding-left: 20rem;}
	.gnb-mob .gnb > li > a {font-size: 30rem;}
	.gnb-mob .gnb > li > a::before {width: 7rem; height: 7rem; left: -12rem; top: -2rem;}
	.gnb-mob .box {display: none;}
	.gnb-mob .box ul {flex-direction: column;}
	.gnb-mob .box a{padding:2rem 0;}
	.gnb-mob .gnb > li a.on ~ .box{display:block;}
	.gnb-mob .box.depth03{margin-top:5rem; margin-bottom:10rem; padding:20rem; border:1px solid rgba(255,255,255,0.2); border-radius:3px;}
	.gnb-mob .box.depth03 ul{gap:10rem;}
	.gnb-mob .box.depth03 a{padding:0;}
}
@media (max-width:480px){
	#header {height: 70rem;}
	#header .logo img {height: 16rem;}
	#header .logo span{width:94rem; height:16rem;}
	.mega-menu__close{padding-right:10rem;}	
	.gnb-mob .gnb > li > a{font-size:18rem;}
	.gnb-mob .box ul {gap: 8rem 0;}
	.gnb-mob .box a{font-size:13rem; padding: 0}
}

/* footer */
.footer {padding: 70rem 0 50rem; box-sizing: border-box; font-size: 15rem; color: var(--white); background: #222;}
.footer .inr {display: flex; justify-content: space-between;}
.footer_left {width: 1000rem;}
.footer_left img {height: 25rem;}
.footer_info {margin-top: 50rem;}
.footer_info ul {display: flex; flex-wrap: wrap; gap: 22rem 60rem;}
.footer_info li span {opacity: 0.6; font-weight: 300;}
.footer_info li strong {font-weight: 500; display: inline-block; margin-right: 20rem;}
.footer_info p {margin-top: 30rem; opacity: 0.4; font-weight: 300;}
.footer_menu a:hover {text-decoration: underline; opacity: 1;}
.footer_menu a {display:block; font-size: 17rem; font-weight: 600; opacity: 0.3;}
.footer_menu a + a {margin-top: 15rem;}

/* top */
.topBtn {position: fixed; right: -10rem; bottom: 30rem; z-index: 50; display: flex; align-items: center; justify-content: center; width: 60rem; height: 60rem; border-radius: 50%; background: #000; color: var(--white); box-shadow: 0 8rem 10rem rgba(0,0,0,0.08); opacity: 0; visibility: hidden; transition: .5s;}
.topBtn.fix {opacity: 1; right: 30rem; visibility: visible;}
.topBtn:hover {background: var(--point); color: var(--white);}

@media (max-width:767px){
	.footer {padding: 50rem 0;}
	.footer_left {width: 100%;}
	.footer_left img {height: 20rem;}
	.footer_info {margin-top: 35rem;}
	.footer_info ul {gap: 15rem 35rem;}
	.footer_info p {margin-top: 25rem;}
	.footer_menu {display: none;}
}
@media (max-width:480px){
	.footer {font-size: 14rem; line-height: 1.5;}
	.footer_left img {height: 18rem;}
	.footer_info {margin-top: 30rem;}
	.footer_info li strong {margin-right: 10rem;}
	.topBtn { width: 50rem; height: 50rem; bottom: 20rem;}
	.topBtn.fix {right: 20rem;}
}