@charset "UTF-8";
/*-------------------------------------------------
title       :레이아웃
Create date :2023-08-10
-------------------------------------------------*/

#quick {display:none}

#wrap {outline:0; overflow:hidden}
#wrap:before {content:''; background-color:rgba(0,0,0,0.6); backdrop-filter:blur(10px); position:fixed; right:0; top:0; width:100%; height:100%; opacity:0; visibility:hidden; transition:all .3s; z-index:10}
#header {position:fixed; top:0; z-index:10; width:100%; transition:all .3s}
#header:before {content:''; background-color:#0077D4; width:100%; height:14rem; position:absolute; right:0; top:0; opacity:0; transition:all .3s}
#header:after {content:''; background-color:#fff; width:100%; height:1px; position:absolute; left:0; top:14rem; opacity:0; transition:all .3s}
#header .header_wrap {height:14rem; width:calc(100% - 10rem); max-width:120rem; margin:0 auto; position:relative}

#header.fixed:before {height:14rem; opacity:1}

#logo {width:23.5rem; height:9rem; position:absolute; left:0; top:2.5rem; z-index:2}
#logo a {background:url('../img/layout/logo.svg') no-repeat 0 0; background-size:contain; display:block; width:100%; height:100%}

#hnb {position:absolute; top:1rem; right:0; width:100%; z-index:1}
#hnb ul {margin:0 auto; display:flex; justify-content:flex-end}
#hnb li {margin:0 0.5rem}
#hnb li > a {color:#fff; display:block; font-size:1.5rem; font-weight:500; height:3rem; line-height:3rem; padding:0 0.5rem}

.mbl-sns {display:none}

/*모달팝업*/
#wrap.search #issue,
#wrap.sitemap #issue {z-index:1}
#wrap.active #issue .control.open .count,
#wrap.search #issue .control.open .count,
#wrap.sitemap #issue .control.open .count {background-color:#fff; color:#0077D4; transition:all .3s}

/*언어*/
#header .language {position:absolute; right:11rem; top:5.5rem}
#header .language ul {display:flex}
#header .language li {margin:0 1rem}
#header .language a {color:#fff; display:block; font-size:1.6rem; font-weight:500; opacity:0.8; position:relative; transition:all .3s}
#header .language a:after {content:''; width:0; height:1px; background-color:#fff; opacity:0; position:absolute; left:50%; bottom:0; transition:all .3s}
#header .language .active a {opacity:1}
#header .language .active a:after {left:0; width:100%; opacity:1}

@media (hover: hover) {
	#header .language a:hover {opacity:1}
}

/*검색*/
#header .searchWrap .btn {color:#fff; font-size:2.6rem; display:block; width:3rem; height:3rem; line-height:3rem; text-align:center; overflow:hidden; position:absolute; right:5rem; top:5.2rem}
#header .searchWrap .btn i {display:block; width:100%; height:100%; line-height:inherit}
#header .searchWrap .form {opacity:0; visibility:hidden; border-bottom:4px solid #fff; width:calc(100% - 4rem); max-width:54.5rem; height:4rem; line-height:2.1; padding-right:4rem; position:absolute; left:50%; top:14rem; transform:translateX(-50%); transition:all .3s}
#header .searchWrap .form label {position:absolute; left:0; top:0; font-weight:500}
#header .searchWrap .form input {color:#fff; width:100%; padding-left:1rem; border:0 none; background-color:transparent; font-size:1.8rem}
#header .searchWrap .form input::placeholder {color:#fff !important}
#header .searchWrap .form button {color:#fff; font-size:2.4rem; overflow:hidden; position:absolute; right:0; top:-4px; width:4rem; height:4rem; line-height:4rem; text-align:center}
#header .searchWrap .form button::before {display:inline-block; width:100%; height:100%; font-family:"xeicon"; text-align:center; content:''}

#wrap.search .searchWrap .btn {right:0}
#wrap.search .searchWrap .btn:before {content:''; font-family:'xeicon'; font-size:3rem; display:block; width:100%; height:100%; line-height:inherit}
#wrap.search .searchWrap .btn i {display:none}
#wrap.search .searchWrap .form {opacity:1; visibility:visible}
#wrap.search #header:before {width:100%; height:25rem; opacity:1}
#wrap.search #header:after {opacity:0 !important}
#wrap.search #hnb,
#wrap.search #gnb1,
#wrap.search #gnb2,
#wrap.search .language {opacity:0; visibility:hidden}

/*상단메뉴*/
#gnb1 > ul {display:flex; justify-content:center; position:relative}
#gnb1 > ul > li {margin:0 3rem; transition:all .3s}
#gnb1 > ul > li > a {color:#fff; display:inline-block; font-size:1.8rem; font-weight:500; position:relative; line-height:14rem}
#gnb1 > ul > li > a:after {content:''; width:0; height:3px; background-color:#fff; position:absolute; bottom:4.5rem; left:50%; transform:translateX(-50%); transition:all .3s}
#gnb1 > ul > li > a:hover:after {width:100%}
#gnb1 > ul > li.active > a:after {width:100%}
#gnb1 > ul > li > a.active:after {width:100%}
#gnb1 > ul > li .submenu {visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; width: 100% !important}
#gnb1 > ul > li > .submenu .linkWindow:after {content:''; font-family:'xeicon'; display:inline; margin-left:0.3rem; vertical-align:-0.1rem}

#gnb1 .submenu {visibility:hidden; overflow:hidden; width:100%; height:0; opacity:0; display:table; position:absolute; left:50%; transform:translateX(-50%); top:14rem; z-index:1; transition:all .3s}
#gnb1 .submenu > ul {display:flex; justify-content:center; padding-top:2.3rem; height:8rem}
#gnb1 .submenu > ul > li {margin:0 1.5rem}
#gnb1 .submenu > ul > li > a {color:#CAD7F1; font-size:1.6rem; padding-bottom:1rem; position:relative}
#gnb1 .submenu > ul > li > a:after {content:''; width:0; height:1px; background-color:#fff; position:absolute; bottom:0; left:50%; transform:translateX(-50%); transition:all .3s}
#gnb1 .submenu > ul > li > a:hover:after {width:100%}
#gnb1 .submenu > ul > li.active > a {color:#fff}
#gnb1 .submenu > ul > li.active > a:after {width:100%}
#gnb1 .submenu > ul > li.on > a {color:#fff}
#gnb1 .submenu > ul > li.on > a:after {width:100%}
#gnb1 .submenu div {display:none}

#wrap.active #header:before {height:22rem; opacity:1}
#wrap.active #header:after {opacity:0.2}
#gnb1 > ul > li.active .submenu {visibility:visible; opacity:1}

/*전체메뉴*/
#gnb2 .control {position:absolute; right:0; top:5.2rem; color:transparent; font-size:0; display:block; width:3rem; height:3rem; line-height:3rem; text-align:center; overflow:hidden; transition:all .3s}
#gnb2 .control:before {display:block; color:#fff; font-size:3rem; font-family:'xeicon'; width:100%; height:100%; line-height:inherit; transition:all .3s}
#gnb2 .open:before {content:''}
#gnb2 .close {display:none}
#gnb2 .close:before {content:''}
#gnb2 > ul {display:none; opacity:0; visibility:hidden; width:100%; height:0; margin-top:7rem; word-break:keep-all}
#gnb2 > ul > li {padding:0 5rem 7rem; position:relative; flex:1 1 20%}
#gnb2 > ul > li:after {content:''; background-color:rgba(255,255,255,0.2); position:absolute; right:0; top:0; width:1px; height:100%}
#gnb2 > ul > li:first-child {padding-left:0}
#gnb2 > ul > li:last-child {padding-right:0}
#gnb2 > ul > li:last-child:after {display:none}
#gnb2 > ul > li > a {color:#fff; display:inline-block; font-size:3.2rem; font-weight:700; line-height:1.4}
#gnb2 .submenu {margin-top:3rem}
#gnb2 .submenu li + li {margin-top:1rem}
#gnb2 .submenu a {color:#dfdfdf; display:inline-block; font-size:1.6rem; position:relative; word-break:keep-all}
#gnb2 .submenu a:before {content:''; width:0; height:1px; background-color:#fff; position:absolute; left:0; bottom:0; transition:all .3s}
#gnb2 .submenu div li + li {margin-top:0}
#gnb2 .submenu div li {position:relative; padding-left:1rem}
#gnb2 .submenu div li a {line-height:1.4}
#gnb2 .submenu div li:before {content:''; background-color:#ccc; border-radius:100%; width:0.3rem; height:0.3rem; position:absolute; left:0; top:1.1rem}
#gnb2 .bg {display:none; position:absolute; right:0; top:calc(100% + 4rem); width:77.5rem; height:16.3rem}
#gnb2 .bg .ichcap {stroke-dasharray:1000; stroke-dashoffset:0}

#wrap.sitemap:before {opacity:1; visibility:visible}
#wrap.sitemap #header {height:auto; min-height:87rem; overflow:hidden}
#wrap.sitemap #header:after {opacity:0}
#wrap.sitemap #header:before {height:100%; opacity:1}
#wrap.sitemap #hnb,
#wrap.sitemap #gnb1,
#wrap.sitemap .searchWrap,
#wrap.sitemap .language {opacity:0; visibility:hidden}
#wrap.sitemap #gnb2 {position:relative}
#wrap.sitemap #gnb2 > ul {display:flex; opacity:1; visibility:visible; height:auto; transition:all .2s}
#wrap.sitemap #gnb2 > ul.scroll-mn {height:50rem; overflow-y:scroll}
#wrap.sitemap *::-webkit-scrollbar {position:relative; width:0.8rem}
#wrap.sitemap *::-webkit-scrollbar-thumb {background-color:#65D497; border:3px solid #65D497; border-radius:2px}
#wrap.sitemap *::-webkit-scrollbar-track {background-color:#2A6CCC; border-radius:2px}
#wrap.sitemap #gnb2 .open {display:none}
#wrap.sitemap #gnb2 .close {display:block; top:-16rem}
#wrap.sitemap #gnb2 .bg {display:block}
#wrap.sitemap #gnb2 .bg .ichcap {animation:bg 1.5s linear}

@media (hover: hover) {
	#gnb2 .submenu li:hover > a {color:#fff}
	#gnb2 .submenu > ul > li > a:hover:before {width:100%}
	#gnb2 .submenu div li:hover a:before {width:100%}
}

@keyframes bg {
  0% {opacity:0; stroke-dashoffset:800}
  100% {opacity:1; stroke-dashoffset:0}
}

/*FOOT*/
#footer {background-color:#57585D}
.fnb {width:calc(100% - 10rem); max-width:120rem; margin:0 auto; display:flex; padding:9rem 0; justify-content:space-around}
.fnb .label {color:#fff; display:block; font-size:1.6rem; font-weight:700; margin-bottom:3rem; padding-bottom:2.5rem; position:relative}
.fnb .label:before {content:''; width:2rem; height:2px; background-color:#fff; position:absolute; left:0; bottom:0}
.fnb .list li {margin:1rem 0}
.fnb .list a {color:#ccc; display:block; font-size:1.6rem; font-weight:400; line-height:1.4}
.fnb3 .list li:first-child a {font-weight:900; text-decoration:underline}
/* .copyright {background-color:rgba(0,0,0,0.2); color:#fff; font-size:1.4rem; font-weight:400; height:5rem; display:flex; align-items:center; justify-content:center} */
.siteinfo {position:relative; color:#fff; font-size:1.4rem; font-weight:400; height:8rem; display:flex; align-items:center;  max-width:120rem; margin:0 auto; justify-content: space-between;}
.siteinfo:before{content:'';width:100vw;height:8rem;background-color:rgba(0,0,0,0.2);position:absolute;left: 50%;top:0;transform: translateX(-50%);}
.siteinfo .mark{padding: 1.6rem 0;height: 8rem;position: relative;}

.f-btn {position:fixed; right:3.4rem; bottom:3.4rem; z-index:1}
.f-btn > a {border-radius:100%; display:block; width:4.8rem; height:4.8rem; overflow:clip; position:relative; text-align:center}
.f-btn .trans {background-color:#21272C; color:#fff; font-size:1.2rem; padding-top:0.7rem}
.f-btn .trans i {display:block; font-size:1.7rem; margin-bottom:-3px}
.f-btn .up {background-color:#fff; border:1px solid #ddd; color:#151515; font-size:2.4rem; line-height:4.8rem; margin-top:1rem; height:0; transform:scale(0); transition:all .3s}
.f-btn .up i {display:block; width:100%; height:100%; line-height:inherit}
.f-btn .up.show {height:4.8rem; transform:scale(1)}