@charset "UTF-8";
/*-------------------------------------------------
title       :레이아웃
Create date :2022-12-29
-------------------------------------------------*/

/*커서 커스텀*/
#cursor, #cursor-txt {display:none}

#wrap {outline:0; overflow:hidden}
#header {position:absolute;top:0;height:15rem;z-index:10;width:100%;/* background: #fff; */}
#header .header_wrap {display:flex;flex-wrap:wrap; justify-content:space-between; padding:0 12rem 0 5.5rem}
#header .header_wrap:before {content:''; width:100%; height:1px; display:block; background-color:rgb(255 255 255 / 30%); position:absolute; left:0; bottom:0}
/* #main {padding-top:11rem} */

#logo {width:25rem; height:4rem; position:relative; top:4rem; z-index:10}
#logo a {background:url('../img/layout/logo.png') no-repeat; background-size:contain; display:block; width:100%; height:100%; position:relative}

/*패밀리사이트*/
#hnb {display:block; width:100%; height:4rem}
#hnb:after {content:''; background-color:rgba(0,0,0,0.2); width:100%; height:4rem; position:absolute; left:0; top:0; z-index:-1}
#hnb .family .btn {display:none}
#hnb .family .list {display:flex}
#hnb .family .list li {margin-right:3.5rem}
#hnb .family .list a {color:#fff; display:block; font-size:1.6rem; height:4rem; line-height:4rem; transition:all .3s}
#hnb .family .list a:hover {color:#2aaeb8}

/*검색*/
#header .search {position:absolute; top:7.5rem; right:12rem; display:flex;}
#header .search .btn {color:#fff; display:block; font-size:3rem; width:3.5rem; height:3.5rem; line-height:3.5rem; text-align:center; overflow:hidden; transition:all .3s}
#header .search .btn i {display:block; width:100%; height:100%; line-height:inherit}
#header .search .form {display:none; border:1px solid #ddd; border-radius:100rem; width:24rem; height:4rem; line-height:2.1; overflow:hidden; position:relative; padding-right:4rem}
#header .search .form label {position:absolute; left:0; top:0; font-weight:500}
#header .search .form input {width:100%; padding-left:2rem; border:0 none; background-color:transparent; font-size:1.4rem}
#header .search .form input::placeholder {color:#666} 
#header .search .form button {color:#333; font-size:1.6rem; overflow:hidden; position:absolute; right:1rem; top:0; width:4rem; height:4rem; line-height:2.3; text-align:center}
#header .search .form button::before {display:inline-block; width:100%; height:100%; font-family:"xeicon"; text-align:center; content:''}
#header .search .btn:hover {color:#2149a6}
#header .search a.btn_kr {padding: 0rem 1rem; font-weight: bold; font-size: 2rem; color:#fff;}
#wrap.active #header .search a.btn_kr {color:#111}

/*상단메뉴 효과*/
#headmn {width:70%; margin:0 auto}
#gnb1:before {content:''; background-color:rgba(255,255,255,0.97); height:0; width:500%; z-index:-1; position:absolute; top:-4rem; left:50%; transform:translateX(-50%)}
#gnb1:after {content:''; height:1px; width:100%; position:absolute; top:16rem; left:50%; transform:translateX(-50%)}

/*상단메뉴*/
#gnb1 {position:relative}
#gnb1 > ul {display:flex; text-align:center; width:100%;}
#gnb1 > ul > li {flex:1 1; text-align:center}
#gnb1 > ul > li:last-child {margin-right:0}
#gnb1 > ul > li > a {color:#fff;display:inline-block;font-size: 2.3rem;font-weight:700;position:relative; line-height: 2.3rem; padding: 4.3rem 0; height: 11.5rem;}
#gnb1 > ul > li > a:before {content:''; background-color:transparent; border-radius:100%; width:1.3rem; height:1.3rem; position:absolute; right:50%; bottom:-0.1rem; opacity:0; transform:scale(0) translateX(50%); transition:all .3s; z-index:1}
#gnb1 > ul > li .submenu {display:none; table-layout:fixed; visibility:hidden; overflow:hidden; text-align:left; height:0; opacity:0; width:100% !important}
#gnb1 > ul > li .submenu .desc {background-color:#2149a6; display:table-cell; vertical-align:top; width:46.5rem; height:100%; padding:5rem 7.5rem; position:relative}
#gnb1 > ul > li .submenu .desc .title {color:#fff; display:block; font-size:4.8rem; font-weight:700}
#gnb1 > ul > li .submenu .desc .con {color:#fff; display:block; font-size:2.2rem; font-weight:300; line-height:1.4; opacity:0.5}
#gnb1 > ul > li .submenu .desc .img {display:none; position:absolute}
#gnb1 > ul > li .submenu > ul > li {text-align:center;margin-bottom:1rem;}
#gnb1 > ul > li .submenu > ul > li:nth-child(n+5) {margin-top:1.5rem}
#gnb1 > ul > li .submenu > ul > li > a {color:#000;display:inline-block;font-size: 1.7rem;font-weight:500;position:relative;transition:all .3s}
#gnb1 > ul > li .submenu > ul > li > a:before {content:''; width:0; height:1px; background-color:#000; position:absolute; left:0; bottom:0.5rem; transition:all .3s}

#gnb1 > ul > li .submenu > ul > li.on a {color:#12b1bd}
#gnb1 > ul > li.active > a,
#gnb1 > ul > li > a.active {color:#11dce1}
#gnb1 > ul > li > a:hover {color:#11dce1}

#gnb1 > ul > li > a.active:before,
#gnb1 > ul > li > a:hover:before,
#gnb1 > ul > li.active > a:before {background-color:#2aaeb8; opacity:1; transform:scale(1) translateX(50%)}
#gnb1 > ul > li .submenu > ul > li > a:hover:before {width:100%} 


/*wrap active 추가 시 열림*/
#wrap.active #gnb1 > ul {}
#wrap.active #gnb1:before {height:110%}
#wrap.active #gnb1 > ul > li .submenu {display:table; visibility:visible; height:auto; opacity:1; padding:2rem 0}
#wrap.active #header .header_wrap:before {background-color:#eaeaea;}
#wrap.active #logo a {background:url('../img/layout/logo_on.png') no-repeat; background-size: contain;}
#wrap.active #hnb .family .btn,
#wrap.active #header .etc .search .btn{color:#000}
#wrap.active #header #hnb {z-index:10}
#wrap.active #header #hnb:after {background:none; border-bottom:1px solid #eee}
#wrap.active #header #hnb a,
#wrap.active #gnb1 > ul > li > a {color:#000}

/*header active 추가 시 열림*/
#wrap.active #gnb2 .open:before {border-top:3px solid #000; border-bottom:3px solid #000;}
#wrap.active #gnb2 .open:after {background-color:#000}
#gnb1 .lnb-detail {display:none}

/*사이트맵*/
#gnb2:after {content:''; background-color:rgba(0,0,0,0.4); backdrop-filter:blur(10px); position:fixed; left:0; top:0; width:100%; height:100%; z-index:10; opacity:0; display:none; transition:all .3s}
#gnb2 .open {color:transparent; font-size:0; display:block; position:absolute; right:5.5rem; top:7.5rem; padding:1.5rem 1rem; height:3rem; width:3rem}
#gnb2 .open:before {content:'';width:3rem;height:2.3rem;border-top:3px solid #fff; border-bottom:3px solid #fff;position:absolute;top:50%;right:0;transform:translateY(calc(-50% + 0.5px));transition:all .3s}
#gnb2 .open:after {content:''; background-color:#fff; width:2rem; height:3px; position:absolute; top:50%; right:0; transform:translateY(calc(-50% + 0.5px)); transition:all .3s}
#gnb2 .open:hover:before {width:2rem}
#gnb2 .open:hover:after {width:3rem}
#gnb2 .open:focus {border:2px solid #000}

#gnb2 .close {display:none; position:fixed; right:14rem; top:13rem; color:#000; font-family:'xeicon'; font-size:3.4rem; width:3rem; height:3rem; line-height:3rem; text-align:center; overflow:hidden; z-index:12}
#gnb2 .close::before {content:''}
#gnb2 .close:hover,
#gnb2 .close:focus {transform:rotate(360deg); transition: all 0.2s;}
#gnb2 > ul {opacity:0; visibility:hidden; background-color:#fff; display:none; flex-wrap:wrap; justify-content:space-between; position:fixed; left:50%; top:50%; transform:translate(-50%, -50%); width:calc(100% - 20rem); height:calc(100% - 20rem); overflow-y:auto; padding:10.5rem 4.5rem}
#gnb2 > ul:before {content:'WIKIM'; color:#f4f4f4; font-weight:900; font-size:16rem; position:absolute; top:-11.5rem; left:50%; transform:translateX(-50%)}
#gnb2 > ul  > li {width:16.66%}
#gnb2 > ul  > li > a {border-bottom:1px solid #ccc; color:#000; display:block; font-size:2.3rem; font-weight:600; line-height:9.5rem; position:relative; text-align:center}
#gnb2 > ul  > li > a:before {content:''; background-color:#2149a6; width:0; height:2px; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%); transition:all .5s}
#gnb2 > ul  .submenu {padding-top:3.5rem}
#gnb2 > ul  .submenu > ul > li > a {color:#000; display:block; font-size:1.9rem; font-weight:600; position:relative; padding:0.8rem 5rem 0.8rem 0; line-height:1.4; transition:all .3s}
#gnb2 > ul  .submenu > ul > li.type1 > a:before {display:none; content:''; color:#999; font-family:'xeicon'; font-size:1.3rem; position:absolute; right:0; top:0.9rem; transition:all .3s}
#gnb2 > ul  .submenu > ul > li > a.linkWindow:after {position:absolute; right:-0.2rem; color:#aaa; font-weight:normal}
#gnb2 > ul  .submenu > ul > li > a:hover {color:#2149a6}
#gnb2 > ul  .submenu > ul > li > a:hover:before,
#gnb2 > ul  .submenu > ul > li > a.linkWindow:hover:after {color:#2149a6}
#gnb2 > ul  .submenu > ul > li + li {margin-top:1rem}
#gnb2 > ul  .submenu div {overflow:hidden; visibility:visible; opacity:1; height:auto}
#gnb2 > ul  .submenu div li {line-height:1.4; position:relative; padding-left:1.3rem}
#gnb2 > ul  .submenu div li:before {content:''; width:0.4rem; height:0.4rem; background-color:#999; border-radius:100%; position:absolute; left:0; top:1.2rem; transition:all .3s}
#gnb2 > ul  .submenu div a {color:#999; display:inline-block; font-size:1.8rem; font-weight:600; padding:.4rem 0; position:relative}
#gnb2 > ul  .submenu div a:before {content:''; background-color:#999; width:0; height:1px; position:absolute; left:0; bottom:0.5rem; transition:all .3s}
#gnb2 > ul  .submenu div a:hover:before {width:100%}
/*active*/
#gnb2.active {position:relative}
#gnb2.active:after {opacity:1; display:block}
#gnb2.active .close {display:block}
#gnb2.active > ul  {display:flex; visibility:visible; z-index:12; opacity:1; transition:opacity 0.2s}
#gnb2.active > ul  > li > a:before {width:3rem}
#gnb2 > ul  .submenu > ul > li.active > a {color:#2149a6}
#gnb2 > ul  .submenu > ul > li.type1.active > a:before {content:''; transform:rotate(180deg)}
#gnb2 > ul  .submenu li.active div {padding:0.5rem 0; visibility:visible; opacity:1; height:auto}


/*FOOT*/
#footer {background-color:#444}
#footer .footer_wrap {display:flex; flex-wrap:wrap; position:relative; width:calc(100% - 2rem); max-width:140rem; margin:0 auto; position:relative; word-break:keep-all}

#footer .fnb {display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; width:100%; height:17.5rem; border-bottom:1px solid #5f5f5f}
#footer .fnb .fnb1 li {color:#ccc; display:inline; font-size:1.6rem; font-weight:normal; position:relative}
#footer .fnb .fnb1 li + li:before {content:''; display:inline-block; width:4px; height:4px; border-radius:100%; background-color:#999; margin:0 2rem; vertical-align:0.4rem}
#footer .fnb .fnb1 li strong {color:#74dae7; font-weight:700}

#footer .fnb .related {width:28.5rem}
#footer .fnb .related .group {position:relative; height:5rem; z-index:1}
#footer .fnb .related button {border:1px solid #999; color:#ccc; font-weight:500; font-size:1.5rem; padding:0 3rem; position:relative; width:100%; height:100%; text-align:left; transition:all 0.2s}
#footer .fnb .related button::after {content:''; font-family:'xeicon'; position:absolute; right:2rem; top:1.5rem; transition:all 0.2s}
#footer .fnb .related button:hover,
#footer .fnb .related button:focus {border-color:transparent; background-color:rgba(255, 255, 255, 0.4); color:#fff}
#footer .fnb .related .list {visibility: hidden; overflow: hidden; position: absolute; left: 0; bottom: 100%; width: 100%; height: 0; margin-bottom: -1px; padding: 0 3rem; border: 1px solid #ddd; background-color: #fff; opacity: 0; text-align: left;}
#footer .fnb .related .list a {display: inline-block; color:#000; font-size:1.5rem; position: relative; vertical-align: middle;}
#footer .fnb .related .list a::after {position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background-color: rgba(255, 255, 255, 0.8); content: '';}
#footer .fnb .related .list a:hover::after,
#footer .fnb .related .list a:focus::after {width: 100%; transition: all 0.2s;}
#footer .fnb .related .active button::after {transform:rotate(180deg)}
#footer .fnb .related .active .list {visibility: visible; height: auto; padding:1.5rem 3rem; opacity: 1; transition: all 0.2s;}

#footer .siteinfo {display:flex; align-items:center; flex-wrap:wrap; color:#ccc; font-size:1.6rem; font-weight:normal; line-height:1.6; padding:4.5rem 25rem 5.5rem 0; width:100%; position:relative}
#footer .siteinfo .copyright {font-size:1.4rem}

#footer .siteinfo .mark {display:none; margin-left:3.5rem}
#footer .siteinfo .mark span + span {margin-left:1.5rem}

#footer .siteinfo .f-logo {position:absolute; right:0; top:5.5rem}

.btn-top {visibility:hidden; opacity:0; width:5rem; height:5rem; position:fixed; right:3rem; bottom:3.5rem; transition:all .2s; z-index:1}
.btn-top .down {display:none}
.btn-top a {border-radius:100%; background-color:rgba(0,0,0,0.8); color:#fff; display:block; font-size:1.3rem; width:100%; height:100%; text-align:center; overflow:hidden; padding-top:2rem; margin:.5rem 0; transition:all 0.3s}
.btn-top a:before {content:''; font-family:'xeicon'; width:100%; height:2rem; line-height:2rem; position:absolute; right:0; top:1rem; transition:all 0.3s}
.btn-top a:after {content:''; opacity:0; font-family:'xeicon'; width:100%; height:2rem; line-height:2rem; position:absolute; right:0; top:1rem; transform:translateY(2rem); transition:all 0.3s}
.btn-top a:hover:before {opacity:0; transform:translateY(-0.5rem)}
.btn-top a:hover:after {opacity:1; transform:translateY(0)}
.btn-top.show {visibility:visible; opacity:1}

@-webkit-keyframes updown {0% {margin-bottom:0}
  100% {margin-bottom:0.5rem} }

@keyframes updown {0% {margin-bottom:0}
  100% {margin-bottom:0.5rem} }