@charset "utf-8";
/*----------------------------------------------------------------------------
  작성일 : 2019.12.09
  작성자 : 박서진
* -------------------------------------------------------------------------*/
#wrap:after {display:block;clear:both;content:''}
#contentsWrap {width:calc(100% - 220px);float:right}
.container {max-width:calc(100% - 8rem)}
#header {position:fixed;left:0;top:0;height:100vh;width:220px;background:#fff;padding:1.25rem 1.6rem 1.5rem;box-shadow:0 0 8px rgba(0,0,0,.05);z-index:100}
#header .allmn,#header .close {display:none}

/* header, footer */
#header .logo {margin:0 0 1.4rem;text-align:center}
#header .month {border-top:1px solid #ccc;border-bottom:1px solid #ccc;padding:1.35rem 0 .9rem;text-align:center;color:#000;margin-bottom:2.5rem;font-family:'AritaBuri',serif;}
#header .month strong {display:block;font-size:3.8rem;line-height:.7;font-weight:600}
#header .month span {display:block;font-size:1rem;margin-top:.5rem;font-weight:400}
#header .gnb li + li {margin-top:1.2rem}
#header .gnb li a {display:block;padding:0 .4rem;color:#424242;}
#header .gnb li a span {position:relative;}
#header .gnb li a span:after {position:absolute;left:0;bottom:0;height:1px;width:0;background:#f46c4e;content:'';transition:width .4s}
#header .gnb li.active a,#header .gnb li a:hover,#header .gnb li a:focus {font-weight:400;color:#f46c4e}
#header .gnb li.active a span:after,#header .gnb li a:hover span:after,#header .gnb li a:focus span:after {width:100%}
#header .util {position:absolute;left:50%;transform:translateX(-50%);bottom:1.5rem;width:calc(100% - 3rem)}
#header .link:after {display:block;clear:both;content:'';}
#header .link a {float:left;width:50%;border:1px solid #c1c1c1;font-size:.7rem;color:#767676;display:block;text-align:center;padding:.675rem 0;background:#fff}
#header .link a + a {border-left:0}
#header .link a:hover,#header .link a:focus {text-decoration:underline}
#header .related-link {text-align:center;margin-top:.85rem}
#header .related-link a {display:inline-block;vertical-align:middle}
#header .related-link a + a {margin-left:.5rem}
#footer {text-align:center;background:#f8f8f8;padding:2rem 0}
#footer .f-logo {float:left;margin-right:4.5rem}
#footer .f-logo a {display:block;}
#footer .info {float:left;font-size:.85rem;color:#929292;text-align:left;margin-top:.5rem}
#footer .info ul {margin-bottom:.3rem}
#footer .info ul:after {display:block;clear:both;content:'';}
#footer .info ul li {float:left;position:relative}
#footer .info ul li + li {padding-left:.85rem;margin-left:.75rem}
#footer .info ul li + li:before {position:absolute;left:0;top:.25rem;content:'';width:1px;height:.6rem;background:#ccc}
#footer .copy {font-size:.8rem;margin-top:.8rem}
#footer .top {position:fixed;right:3.5rem;bottom:6.5rem;background:#424242;color:#fff;padding:.725rem .925rem;border:1px solid #424242;transition:all .4s;opacity:0}
#footer .top i {font-size:1rem}
#footer .top span {display:block;text-transform:uppercase;font-size:.75rem;font-weight:600}
#footer .top:hover,#footer .top:focus {background:#fff;color:#424242}
#footer .top.on {opacity:1}
@media(max-height:850px){
	#header .month {margin-bottom:1rem}
	#header .gnb {margin-bottom:5rem;height:40vh;overflow-y:scroll;}
	#header .gnb li + li {margin-top:1rem}
	#header .gnb ul {height:400px;}
}

@media(max-height:640px){
	#header .gnb {height:35vh;}
}
@media(max-height:600px){
	#header .gnb {height:28vh;}
}
@media(max-width:1300px){
	#footer .top {right:1rem;bottom:1rem}
}
@media(max-width:1080px){
	#header {height:auto;width:100vw;padding:.8rem .65rem}
	#header:before {position:absolute;left:0;top:0;width:0;height:0;content:'';background:rgba(0,0,0,.8);overflow:hidden;opacity:0;transition:opacity .4s}
	#header #gnbWrap {position:absolute;right:-100%;top:0;width:70vw;height:100vh;background:#fff;transition:right .6s;padding:9rem 0}
	#contentsWrap {width:100%;float:none}
	#header .logo {margin:0;text-align:left}
	#header .allmn {display:block;position:absolute;top:50%;transform:translateY(-50%);right:.65rem;font-size:2.1rem}
	#header .month {border:0}
	#header .close {position:absolute;left:1.5rem;top:1rem;font-size:2.1rem;color:#fff}
	#header .gnb li a {text-align:center;font-size:1rem}
	#header.all #gnbWrap {right:0;}
	#header.all .close {display:block}
	#header.all:before {opacity:1;width:100vw;height:100vh}
	#header .link {width:50%;margin:auto}
	#header .month {padding-top:2.45rem}
	#header .util {bottom:4rem}
}
@media(max-width:769px){
	#header #gnbWrap {padding:1rem 0}
	#header .gnb {height:auto !important;overflow:inherit !important}
	#footer .info ul li + li {margin-left:0;}
	#footer .info ul li + li:before {display:none}
}
@media(max-width:430px){
	#header .logo {width:120px}
	#header #gnbWrap {width:75vw}
	#header .link {width:80%}
	#footer .f-logo {width:120px}
	#footer .f-logo img {max-width:100%}
	#footer .info ul li:nth-of-type(2) {padding-left:0}
	#footer .info ul li:nth-of-type(1) {margin-bottom:.3rem}
	#footer .copy {margin-top:.3rem}
}
@media(max-width:325px){
	#header .month {padding-top:1.25rem;margin-bottom:0}
	#header .util {bottom:1.5rem}
}