@charset "utf-8";
/* layout.css는 전체적인 스타일 정의 */

#wrapper {position:relative;}

.contain {position:relative; padding-left:15px; padding-right:15px; margin:0 auto; height:inherit; letter-spacing:-.03em;}
#header .contain {max-width:1750px !important;}
#footer .contain {max-width:1750px !important;}
#main .contain {max-width:1470px;}
#sub .contain {max-width:1470px;}
 
/* header */
#header {position:fixed; top:0; left:0; width:100%; height:136px; z-index:90; letter-spacing:-.03em; transition:all 0.6s;}

#header.active {transform:translateY(0); background:rgba(0,0,0,0.3);}
#header.hide {transform:translateY(-100%);}

#header .wrap {display:flex; justify-content:space-between; align-items:center; height:100%;}
#header .sitelogo a {display:block;}

#header .sitemap {width:70px; height:100%; position:relative; display:flex; align-items:center;}
#header .sitemap .btn {width:100%; height:40px; z-index:90; position:relative; display:flex; align-items:center; justify-content:flex-end;}
#header .sitemap-btn {width:30px; height:36px; position:relative;}
#header .sitemap-btn span {background:#fff; position:absolute; width:4px; transition:all 0.4s;}
#header .sitemap-btn span.center {height:100%; position:absolute; top:0; left:50%; margin-left:-2px;}
#header .sitemap.sitemap-open .sitemap-btn span.center {opacity:0;}
#header .sitemap-btn span.side {height:22px; top:50%; margin-top:-11px;}
#header .sitemap-btn span.left {left:0;}
#header .sitemap-btn span.right {right:0;}
#header .sitemap.sitemap-open .sitemap-btn span.left {height:30px; margin-top:-15px; left:50%; margin-left:-2px; transform:rotate(45deg);}
#header .sitemap.sitemap-open .sitemap-btn span.right {height:30px; margin-top:-15px; right:50%; margin-right:-2px; transform:rotate(-45deg);}

#header .sitemap-menu {position:absolute; top:50px; right:70px; height:40px; z-index:80;}
#header .sitemap-menu >  ul {display:flex; position:relative; transform:translateX(300%); transition:all 0.8s; opacity:1;}
#header .sitemap.sitemap-open .sitemap-menu >  ul {transform:translateX(0); opacity:1;}
#header .sitemap-menu > ul > li {padding:0 40px; position:relative;}
#header .sitemap-menu > ul > li > a {font-size:18px; line-height:40px; color:#fff; display:block; font-weight:600; white-space:nowrap; position:relative;}
#header .sitemap-menu > ul > li > a:after {content:''; width:6px; height:6px; border-radius:50%; background:#fff; position:absolute; top:-16px; left:50%; margin-left:-3px; opacity:0; transition:all 0.4s;}
#header .sitemap-menu > ul > li:hover > a:after {top:-6px; opacity:1;}

#header .sitemap-menu .submenu {display:none; position:absolute; width:170px; top:40px; left:50%; margin-left:-85px; background:rgba(0,56,118,0.95); z-index:111; border-radius:4px;}
#header .sitemap-menu .submenu ul {padding:30px 0; text-align:center;}
#header .sitemap-menu .submenu li a {font-size:18px; line-height:38px; color:rgba(255,255,255,0.5); transition:all 0.4s; display:inline-block; position:relative;}
#header .sitemap-menu .submenu li a:hover {color:#fff;}
#header .sitemap-menu .submenu li a:after {content:''; width:0; height:1px; background:#fff; position:absolute; bottom:8px; left:50%; transition:all 0.4s;}
#header .sitemap-menu .submenu li a:hover:after {width:100%; left:0;}


#header .login {position:absolute; top:10px; right:0; color:#fff; display:flex;}
#header .login p {font-size:16px; line-height:30px; margin-right:20px;}
#header .login a {font-size:16px; line-height:30px; font-weight:500;}


#header .sitemap-menu .mob-login {display:none;}
.mob-login {position:absolute; top:36px; left:20px; color:#222; display:flex;}
.mob-login a {font-size:16px; line-height:30px; font-weight:500;}
.mob-login p {font-size:16px; line-height:30px; margin-right:14px; font-weight:500; color: #222;}


.scrolltop {position:fixed; transform:translateX(200px); transition:all 0.8s; bottom:130px; right:80px; z-index:90; width:60px; height:60px; border-radius:50%; background:#fff; box-shadow:0 0 10px 5px rgba(156,156,156,0.2);}
html.scroll-fade .scrolltop {transform:translateX(0);}

.sitemap-mob {display:none;}
/* footer */
#footer {padding:80px 0 0; #fff}
#footer .col {display:flex; margin-bottom:80px;}
#footer .logo {width:100%; max-width:280px;}
#footer .info {width:1%; flex:1 1 auto; display:flex; justify-content:space-between;}
#footer .info .txt {width:100%; max-width:640px;}
#footer .info p {font-size:18px; line-height:1.6em; color:#003876; font-weight:600; margin-bottom:12px;}
#footer .info dl {display:flex; font-size:18px; line-height:1.6em; margin-bottom:10px;}
#footer .info dt {width:100%; max-width:45px; font-weight:600; color:#333;}
#footer .info dd {width:1%; flex:1 1 auto; color:#888;}
#footer .link {}
#footer .link ul {display:flex; margin:0 -14px;}
#footer .link ul li {padding:0 14px;}
#footer .link ul li a {font-size:16px; line-height:1.8em; color:#888; font-weight:600; transition:all 0.4s;}
#footer .link ul li a:hover {color:#333;}
#footer .copy {background:#003876; border-radius:20px 20px 0 0; width:100%; max-width:1820px; margin:0 auto; padding:35px 0; z-index:1; position:relative;}
#footer .copy .img {position:absolute; right:30px; bottom:100px; opacity:0.05;}
#footer .copy p {font-size:15px; line-height:2em; color:#fff; opacity:0.2;}

.overlay {position:fixed; width:100vw; height:100vh; background:rgba(0,0,0,0.6); top:0; left:0; z-index:50; display:none;}

@media (max-width: 1024px) {
	html.overlay-on .overlay {display:block;}
	
	.sitemap {display:none;}
	.sitemap-mob {display:block;}
	.sitemap-logo {display:none;}
	#header .sitemap-mob .btn {position:relative; z-index:90;}
	#header .sitemap-mob.sitemap-open .sitemap-btn span {background:#000;}
	#header .sitemap-mob.sitemap-open .sitemap-btn span.center {opacity:0;}
	#header .sitemap-mob.sitemap-open .sitemap-btn span.left {height:30px; margin-top:-15px; left:50%; margin-left:-2px; transform:rotate(45deg);}
	#header .sitemap-mob.sitemap-open .sitemap-btn span.right {height:30px; margin-top:-15px; right:50%; margin-right:-2px; transform:rotate(-45deg);}
		
	.sitemap-mob .menu-mob {z-index:60; position:fixed; max-width:400px; width:100%; height:100vh; top:0; right:0; background:#fff; padding:120px 20px 20px; transform:translateX(100%); transition:all 0.4s;}
	.sitemap-mob.sitemap-open .menu-mob {transform:translateX(0);}
	.sitemap-mob .menu-mob > ul > li {padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #ddd; font-weight:600; position:relative;}
	.sitemap-mob .menu-mob > ul > li:after {content:''; width:30px; height:30px; background:url('../img/layout/sitemap-mob.png') no-repeat; background-size:cover; position:absolute; top:15px; margin-top:-15px; right:0; transition:all 0.4s;}
	.sitemap-mob .menu-mob > ul > li.open:after{transform:rotate(180deg);}
	/* 	.sitemap-mob .menu-mob > ul > li.m3:after,
	.sitemap-mob .menu-mob > ul > li.m4:after {transform:rotate(-90deg);} */
	.sitemap-mob .menu-mob > ul > li > a {font-size:18px; line-height:30px; color:#000; transition:all 0.4s; transition:all 0.4s;}
	.sitemap-mob .menu-mob > ul > li.open > a {color:#003876;}
	.sitemap-mob .menu-mob .submenu {display:none; margin-top:10px; padding-top:10px; border-top:1px solid #ddd;}
	.sitemap-mob .menu-mob .submenu ul {padding:0 10px;}
	.sitemap-mob .menu-mob .submenu ul li {margin-bottom:10px;}
	.sitemap-mob .menu-mob .submenu ul li:last-child {margin-bottom:0;}
	.sitemap-mob .menu-mob .submenu ul li a {font-size:16px; line-height:24px; color:#666; font-weight:400;}
	
	.sitema-logo {display:none;}
}

@media (max-width: 640px) {
	.sitemap-logo {position:absolute; top:15px; left:15px; z-index:80; width:171px; height:48px; opacity:0; transform:translateX(100%); transition:all 0.4s; display:block;}
	
	.sitemap-mob.sitemap-open .sitemap-logo {opacity:1; transform:translateX(0);}
	
	.sitemap-mob .menu-mob {max-width:100vw; padding:150px 20px 20px;}
	.mob-login {top:90px;}
}