@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:#00479d;
	--color-white:#fff;
	--color-black:#000;
	--font-base:16rem;
	--font-eng:"Play", 'Pretendard', Sans-serif;
	--font-combine:'Pretendard', Sans-serif;
	
	--trans-ani:0.3s ease 0s;
	--inr:1500;
	--inr-wide:1760;
	--inr-width: .92;
	--inr-1200:1200;
	--aniEase:ease;
	--aniEase2:cubic-bezier(0.19, 1, 0.22, 1);
	--transition1: all 0.5s ease-in-out;
	--transition2: all 0.8s ease-in-out;
}

/* 2) 폰트설정 */
body {font-size:var(--font-base, 16rem); font-family: var(--font-combine);}
.eng {font-family: var(--font-eng);}
@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 */
/* div.open-control
 *     button.open-control__btn
 *     div.list or ul.list
 * */

/* inner */
: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);}
.inr-1200 {max-width: calc(var(--inr-1200) * 1rem); margin:0 auto;}
@media (max-width:1024px){
	.inr-1200{width: calc(var(--inr-width) * 100%); max-width:inherit;}
}

.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) 레이아웃설정 */
header {display: flex; align-items: center; position: fixed; top: 0; left: 0; width:100%; height: 100rem; padding:0 120rem 0 50rem; z-index: 110; transition:0.3s ease;}
header .gnb_bg {position:absolute; top: 0; left: 0; width: 100%;  background: #fff;; z-index: -10;}
header h1 {display: inline-block; flex-grow: 1;}
header h1 .logo img {max-height: 100%; height: 50rem;}
header .header-wrap {width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between;}
/* gnb */
header nav {flex-grow: 1; 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%; min-width: 135rem; padding: 0 10rem;}
header nav .gnb > li > a {position: relative; display: flex; justify-content: center; align-items: center; font-size:20rem; font-weight: 500; color: var(--color-white); height: 100%;}
header nav .gnb .box {opacity: 0; visibility: hidden; width: 100%; height: 0; position:absolute; top: 100rem; left:50%; text-align: center; transform: translateX(-50%);  padding: 20rem 0; box-sizing:border-box;}
header nav .gnb .box a {display: block; width: 100%; padding: 8rem; box-sizing:border-box; line-height: 1.6; color: #aaa;}
header nav .gnb .box a:hover {color: var(--color-black);}
header nav .gnb > li > a:hover {color: #00479d !important;}
header nav .gnb > li > a:hover::before {content: ''; position: absolute; bottom:0; left: 0; width: 100%; height: 3rem; background: #00479d !important;}
/* active */
header .header-wrap.on::before {position: absolute; content: ''; bottom: 0;left: 0; width: 100%; height:1rem; background: #e5e5e5;}
header .header-wrap.on nav .gnb > li > a {color: var(--color-black);}
header .header-wrap.on nav .gnb .box {height: 100%;  visibility: visible; opacity: 1; transition: all 0.3s ease-in-out; transition-delay: 0.1s;}
header .header-wrap.on .logo .bk {display: block;}
header .header-wrap.on .logo .wh {display: none;}
.fp-viewing-firstPage .header-wrap.on .logo .bk {display: block !important; opacity:1;}
/* fixed */
header.fix {position: fixed; background: var(--color-white);}
header.fix::before {position: absolute; content: ''; bottom: 0;left: 0; width: 100%; height:1rem; background: #e5e5e5;}
header.fix nav .gnb > li > a {color: var(--color-black);}
header.fix .logo .wh {display: none;}
header.fix .logo .bk {display: block !important; opacity:1;}
/* fullpage */
.fp-viewing-firstPage header {background: transparent;}
.fp-viewing-firstPage .logo .bk {display: none !important; opacity: 0;}
.fp-viewing-secondPage header, .fp-viewing-thirdPage header, .fp-viewing-fourthPage header, .fp-viewing-fifthPage header, .fp-viewing-lastPage header {background: var(--color-white);}
.fp-viewing-secondPage .logo .bk, .fp-viewing-thirdPage .logo .bk, .fp-viewing-fourthPage .logo .bk, .fp-viewing-fifthPage .logo .bk, .fp-viewing-sixthPage .logo .bk, .fp-viewing-lastPage .logo .bk {display: block;}
.fp-viewing-secondPage .logo .wh, .fp-viewing-thirdPage .logo .wh, .fp-viewing-fourthPage .logo .wh, .fp-viewing-fifthPage .logo .wh, .fp-viewing-sixthPage #header .logo .wh, .fp-viewing-lastPage .logo .wh {display: none;}
.fp-viewing-secondPage header nav .gnb > li > a, .fp-viewing-thirdPage header nav .gnb > li > a, .fp-viewing-fourthPage header nav .gnb > li > a, .fp-viewing-fifthPage header nav .gnb > li > a, .fp-viewing-sixthPage header nav .gnb > li > a, .fp-viewing-lastPage header nav .gnb > li > a {color: var(--color-base);}

/* maga 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.6); transition:0.3s ease; transition-property:opacity, visibility;}
.mega-menu.active{opacity:1; visibility:visible;}
.gnb-mob {overflow-y:auto; width:30%; background-color:#fff;}
.gnb-mob .gnb{padding:50rem 30rem;}
.gnb-mob .gnb > li{position:relative; border-bottom:1rem dotted rgba(0,0,0,0.1);}
.gnb-mob .gnb > li > a {display:flex; align-items:center; padding:25rem 15rem; font-size:25rem; font-weight:500;}
.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 15rem; background-color:#f5f5f5;}
.gnb-mob .box ul{display:flex; flex-direction:column; gap:15rem;}
.gnb-mob .box a{display:block; font-size:18rem;}
.gnb-mob .box 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;}
.gnb-mob .box a.on span{background-size:100% 2rem; font-weight:700;}

/* maga control */
[class*="mega-menu__"]{display:block; width:60rem; height:60rem; background-color:transparent;}
[class*="mega-menu__"] span{display:block; position:relative; width:46rem; height:14rem; 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:1rem; background-color:var(--color-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:5rem; transform:rotate(45deg);}
[class*="mega-menu__"].active span:after{left:0; bottom:7rem; transform:rotate(-45deg);}

/* util */
.util-area {position: absolute; top: 0; right: 0; display: flex; flex-direction: column; width: 120rem; height:auto; background: var(--color-point); }
.mega-menu__btn {display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100rem; color: var(--color-white); z-index: 50;}
.lang-list {width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14rem; padding: 9rem 0 30rem; box-sizing: border-box;}
.lang-list a {font-size: 14rem; font-weight: 600; opacity: 0.3; color: var(--color-white)}
.lang-list a.on {opacity: 1;}
/* 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:26rem;}
.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:13rem;}
.mega-menu__close.active span:after{bottom:13rem;}
.mega-menu__close:focus{outline:none;}
.tob-btn {opacity: 0; position: fixed; right: 30rem; bottom: 30rem; display: flex; align-items: center; justify-content: center; width:66rem; height:66rem; font-size: 22rem; background:#00aa50; color: var(--color-white); border-radius: 50%; transition: opacity 0.5s ease 0s; z-index: 50;}
.tob-btn.fix {opacity: 1;}
@media (hover: hover){
	.gnb-mob .box a:hover span{background-size:100% 2rem;}
}
@media (max-width:1500px){
	header nav .gnb > li {min-width: 120rem;}
}
@media (max-width:1080px){
	header {padding: 0 50rem;}
	header nav {display: none;}
	header .gnb_bg {display: none;}
	header .header-wrap.on::before {display: none; opacity: 0;}
	.fp-viewing-firstPage .header-wrap.on .logo .bk {display: none !important;}
	.fp-viewing-firstPage .header-wrap.on .logo .wh {display: block;}
	.fp-viewing-sixthPage header {background: var(--color-white);}
	.util-area {width: 90rem;}
	.lang-list {padding: 10rem 0 23rem; gap: 10rem;}
	[class*="mega-menu__"] span {width: 25rem; height: 10rem;}
	[class*="mega-menu__"].active span:before {top: 5rem;}
	[class*="mega-menu__"].active span:after {bottom: 5rem;}
	.gnb-mob {width: 50%;} 
}
@media (max-width:1024px){

	.mega-menu__close{display:flex; justify-content:flex-end; padding-right:30rem; padding-top:20rem;}
	.mega-menu .open{display:block;}
}
@media (max-width:767px){
	header {padding: 0 20rem; height: 80rem;}
	.util-area {width: 80rem;}
	.gnb-mob {width: 80%;}
	.gnb-mob .gnb > li > a {font-size: 18rem;}
	.mega-menu__btn {height:80rem; align-items: center;}
	.lang-list {padding: 0 0 20rem;}
	.lang-list a {font-size: 13rem; font-weight: 500;}
}
@media (max-width:480px){
	header h1 .logo img {height: 35rem;}
	.mega-menu__close{position: absolute; top:15rem; right:15rem; padding: 0;}
	.mega-menu__close em {width: 35rem; height: 35rem; background: var(--color-point); }
	.gnb-mob {width: 100%;}
	.gnb-mob .gnb {padding: 70rem 15rem;}
	.gnb-mob .gnb > li > a {padding: 20rem 0; font-size: 16rem;}
	.gnb-mob .gnb > li .open {width: 16rem; height: 16rem;}
	.gnb-mob .box {padding: 20rem 15rem;}
	.gnb-mob .box a{font-size:15rem;}
	header.fix .lang-list {display: none;}
	.tob-btn { right: 20rem; bottom: 20rem; width: 50rem; height: 50rem; font-size: 16rem; z-index: 35;}
}

/* footer */
footer {position: relative; width: 100%; padding: 65rem 0 68rem; box-sizing: border-box; background: var(--color-base); color: var(--color-white); z-index: 30;}
footer .inr {display: flex; flex-wrap: wrap; justify-content: space-between;}
footer .footer_logo {width: 150rem;}
footer .footer_info {display: flex; gap: 100rem;}
footer .footer_address {max-width: 700rem;}
footer .footer_address address {display: flex; gap: 15rem 60rem; flex-wrap: wrap;}
footer .footer_address address p {display: inline-block; font-weight: 300;}
footer .footer_address address span {margin-right: 15rem; font-weight: 500;}
footer .footer_address .copy {display: block; font-size: 15rem; font-weight: 300; margin-top: 30rem; opacity: 0.5;}
footer .scroll-top {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3rem; width: 72rem; height: 72rem; background: var(--color-point); font-size: 15rem;}

@media (max-width:1280px){
	footer .footer_info {gap: 50rem;}
}
@media (max-width:1080px){
	footer .footer_address address {gap: 12rem 40rem;}
	footer .footer_address {max-width: 600rem;}
	footer .footer_address address p {font-size: 15rem;}
	footer .scroll-top {width: 60rem; height: 60rem; gap: 0;}
	footer .footer_address .copy {margin-top: 20rem;}
}
@media (max-width:767px){
	footer {padding: 55rem 0 58rem;}
	footer .footer_info {flex-direction: column; gap: 40rem;}
}
@media (max-width:480px){
	footer .footer_logo {width: 130rem;}
	footer .scroll-top {display: none;}
}