/* common */
html, body { margin: 0; width: 100%; height: 100%; position:relative; padding: 0; font-size: 1em;}
* {margin:0; padding:0; list-style:none; text-decoration:none; font-family: 'Noto Sans KR', sans-serif; -webkit-text-size-adjust: none; box-sizing: border-box; word-break: keep-all;}

ul>li>a { text-decoration:none; }
a {color: #333; text-decoration: none;}
table { border-collapse: collapse; }
textarea {box-sizing: border-box; resize: none; font-size: 1rem;}
select {-webkit-border-radius: 0; -webkit-appearance: none; -moz-appearance: none; -webkit-appearance: none; appearance: none; box-sizing: border-box; cursor: pointer;}
input,select,textarea,strong,em,p,h1,h2,h3,h4,span,td,button,th,li,a,i,b {font-style:normal; margin: 0; letter-spacing: -1px; font-size: 1rem;}
ul { margin: 0;padding: 0;list-style: none;}
img {max-width:100%;}
button {cursor: pointer;}
.clear:after {content: ""; display: block; clear: both;}
html.hidden,
body.hidden {
    overflow: hidden !important;
}
.limit {max-width: 1300px; width: 100%; padding: 0 10px; margin: 0 auto;}
.limit1400 {max-width: 1420px; width: 100%; padding: 0 10px; margin: 0 auto;}
.root_daum_roughmap .wrap_controllers {display: none !important;}
/********************************************/
#hd {position: relative;}
.sound_only,
#hd_h1,
#skip_to_container,
#hd_login_msg {display: none;}
/* */

header {position: absolute; left: 0; top: 0; width: 100%; height: 90px; transition: .3s ease; z-index: 10;}
header::before {content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: rgba(255,255,255,0.3); transition: .3s ease;}

header > div {height: 100%;}
header > div.limit1400 {position: relative; z-index: 2;}

header .logo {float: left; margin: 0 150px 0 0;}
.logo {display: inline-block; position: relative; width: 241px; height: 100%;}
/*
.logo a {position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url('/images/common/logo.png')no-repeat; background-position: center !important; background-size: contain !important; text-indent: -9999px; transition: .3s ease;}
.logo a.on {background: url('/images/common/logo_on.png')no-repeat; opacity: 0;}
*/
.logo a:not(.new){opacity: 0 !important;}
.logo a.new{position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: url('/images/logo.svg') no-repeat left center / 196px 52px; text-indent: -9999px; transition: .3s ease; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1);}

.main_nav {float: left; width: calc(100% - 500px); height: 100%;}
.main_nav > ul.total_nav { height: 100%;}
.main_nav > ul.total_nav > li {position: relative; display: table; float: left; text-align: left; height: 100%; text-align: center;}
.main_nav > ul.total_nav > li > a {display: table-cell; vertical-align: middle; transition: .3s ease; padding: 0 30px;}
.main_nav > ul.total_nav > li span {text-transform: uppercase; transition: .3s ease; font-weight: 500; color: #fff; font-size: 1.125rem; letter-spacing: 0;}


.main_nav > ul.total_nav > li.on > a ,
.main_nav > ul.total_nav > li:hover > a {background: #004ea2;}
.main_nav > ul.total_nav > li.on span,
.main_nav > ul.total_nav > li:hover > a > span {color: #fff;}


.main_nav > ul.total_nav > li ul.depth2 {position: absolute; top: 100%; left: 0; width: 100%; height: 360px;  display: none; transition: background .3s ease;}
.main_nav > ul.total_nav > li ul.depth2 li:nth-of-type(1) {margin: 30px 0 0;}
.main_nav > ul.total_nav > li ul.depth2 a {display: block; padding: 5px 0;}
.main_nav > ul.total_nav > li ul.depth2 a span {font-size: 1.063rem; font-weight: 400; color: #666666; transition:.3s ease;}

.main_nav > ul.total_nav > li.on ul.depth2,
.main_nav > ul.total_nav > li:hover ul.depth2 {background: #f7f7f7;}

.main_nav > ul.total_nav > li ul.depth2 li.on a span,
.main_nav > ul.total_nav > li ul.depth2 li:hover a span {color: #004ea2;}

.main_nav > ul.total_nav > li ul.personal_nav {position: absolute; top: 100%; left: 50%; transform: translate(-50%,0); font-size: 0; white-space: nowrap; display: none;}
.main_nav > ul.total_nav > li ul.personal_nav li {display: inline-block;}
.main_nav > ul.total_nav > li ul.personal_nav li a {display: block; padding: 15px;}
.main_nav > ul.total_nav > li ul.personal_nav li span {font-size: 1rem; font-weight: 400; color: #666666; transition: .3s ease;}
.main_nav > ul.total_nav > li ul.personal_nav li.on span,
.main_nav > ul.total_nav > li ul.personal_nav li:hover span {color: #004ea2;}

header .bg {position: absolute; top: 100%; left: 0; width: 100%; height: 0px; background: #fff; transition: .3s linear; overflow: hidden; box-shadow: inset 0 2px 5px 0 rgba(0,0,0,0.1);}
header .bg.personal {height: 54px;}
header .bg.total {height: 360px;}

.hamburger_wrap {position: absolute; cursor: pointer; transition: .15s ease; height: 50px; width: 50px; z-index: 5; right: 10px; top: 50%; transform: translate(0,-50%); border: 1px solid #fff; border-radius: 50%;}
#nav-icon3 {position: absolute; width: 20px; height: 15px; -webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-o-transition: .5s ease-in-out;transition: .5s ease-in-out;cursor: pointer; top: 50%; transform: translate(0,-50%); left: 50%; top: 50%; transform: translate(-50%,-50%);}
#nav-icon3 span {display: block;position: absolute;height: 2px;width: 100%;background: #fff; opacity: 1;left: 0;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-o-transition: .25s ease-in-out;transition: .25s ease-in-out;}
#nav-icon3 span:nth-child(1) {top: 0px;}
#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) {top: 7.5px;}
#nav-icon3 span:nth-child(4)  {top: 15px;}
#nav-icon3.open span:nth-child(1) {top: 12.5px;width: 0%;left: 50%;}
#nav-icon3.open span:nth-child(2) {-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);}
#nav-icon3.open span:nth-child(3) {-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);}
#nav-icon3.open span:nth-child(4) {top: 12.5px;width: 0%;left: 50%; }

header.mobile_on,
header.over,
header:hover {background: #fff;}
header.mobile_on .logo a,
header.over .logo a,
header:hover .logo a {opacity: 1; -webkit-filter: none; filter: none;}
header.mobile_on .logo a.on,
header.over .logo a.on,
header:hover .logo a.on {opacity: 1;}
header.mobile_on .main_nav > ul.total_nav > li span,
header.over .main_nav > ul.total_nav > li span,
header:hover .main_nav > ul.total_nav > li span {color: #333333;}
header.mobile_on .main_nav > ul.total_nav > li.on > a span,
header.over .main_nav > ul.total_nav > li.on > a span,
header.over .main_nav > ul.total_nav > li:hover > a span
header.mobile_on .main_nav > ul.total_nav > li.on > a span,
header:hover .main_nav > ul.total_nav > li.on > a span,
header:hover .main_nav > ul.total_nav > li:hover > a span {color: #fff;}
header.mobile_on .hamburger_wrap,
header.over .hamburger_wrap,
header:hover .hamburger_wrap {border-color: #333;}
header.mobile_on #nav-icon3 span ,
header.over #nav-icon3 span ,
header:hover #nav-icon3 span {background: #333;}

.mobile {display: none !important;}

footer {background: #333333; text-align: center; padding: 40px 0;}
footer ul {display: inline-block;}
footer li {position: relative; display: inline-block; float: left; color: #999999; font-size: 1.063rem; font-weight: 400; margin: 0 10px 0 0; padding: 0 10px 0 0;}
footer li::after {content: ""; position: absolute; right: 0; top: 50%; transform: translate(0,-50%); width: 1px; height: 12px; background: rgba(255,255,255,0.2);}
footer li:last-child {margin: 0; padding: 0;}
footer li:last-child::after {display: none;}
footer li span {font-size: 1.063rem; font-weight: 700;}
.copyright {color: #999999;}

.arrow_wrap {position: absolute; right: 10px; top: 50%; transform: translate(0,-50%); width: 28px;height: 14px;}
.arrow_wrap img {position: absolute; left: 0; top: 0; transition: .3s ease;}

@media screen and (max-width: 1300px) {
    header .logo {margin: 0 50px 0 0;}
    .main_nav {width: calc(100% - 300px);}
}
@media screen and (max-width: 1150px) {
    header .logo {margin: 0 10px 0 0;}
    .main_nav {width: calc(100% - 260px);}
    .main_nav > ul.total_nav > li > a {padding: 0 25px; position: relative;}
    .main_nav > ul.total_nav > li ul.depth2,
    header .bg.total {height: 380px;}
}
@media screen and (max-width: 1024px) {
    .pc {display: none !important;}
    .mobile {display: block !important;}
    img.mobile {display: inline-block !important;}

    header {position: fixed; top: 0; left: 0; z-index: 20;}
    .hamburger_wrap {border: none; height: 100%; width: 25px;}
    #nav-icon3 {width: 100%;}
    .logo {width: 200px;}

    .main_nav {position: absolute; left: 0; top: 100%; height: calc(100vh - 100%);  width: 100%; background: rgba(0,0,0,0.7); opacity: 0; visibility: hidden; transition: .3s ease;}
    header.mobile_on .main_nav {opacity: 1; visibility: visible;}
    .main_nav > ul.total_nav {height: auto; background: #fff; text-align: left;}
    .main_nav > ul.total_nav > li {display: block; float: none; height: auto; text-align: left; border-bottom: 1px solid #ddd;}
    .main_nav > ul.total_nav > li > a {display: block; padding: 10px;}
    .main_nav > ul.total_nav > li span {color: #333;}

    .main_nav > ul.total_nav > li ul.depth2 {position: relative; display: none; left: auto; top: auto; transform: translate(0); height: auto;}
    .main_nav > ul.total_nav > li ul.depth2 li {border-bottom: 1px solid #ddd;}
    .main_nav > ul.total_nav > li ul.depth2 li:nth-of-type(1) {margin: 0;}
    .main_nav > ul.total_nav > li ul.depth2 li:last-child {border-bottom: none;}
    .main_nav > ul.total_nav > li ul.depth2 a {padding: 6px 15px;}
    .main_nav > ul.total_nav > li.m_active > a {background: #004ea2;}
    .main_nav > ul.total_nav > li.m_active > a span {color: #fff;}
    header .bg {display: none;}

    header.scroll {background: #fff;}
    header.scroll .logo a {opacity: 0;}
    header.scroll .logo a.on {opacity: 1;}
    header.scroll .logo a.new {opacity: 1; -webkit-filter: none; filter: none;}
    header.scroll .main_nav > ul.total_nav > li span {color: #333333;}
    header.scroll .main_nav > ul.total_nav > li:hover > a span {color: #fff;}
    header.scroll .hamburger_wrap {border-color: #333;}
    header.scroll #nav-icon3 span {background: #333;}

    footer li {float: none; display: block; padding: 0; margin: 0;}
    footer li + li {margin: 5px 0 0;}
    footer li::after {display: none;}
    .copyright {margin: 10px 0 0;}
}

@media screen and (max-width: 768px) {
    html, body {font-size: 0.875em;}
    header {height: 70px;}
    .logo {width: 150px;}
	.logo a.new {background-size: contain !important;}

}
@media screen and (max-width: 480px) {
    header {height: 60px;}
    html, body {font-size: 0.8125em;}
    .arrow_wrap {width: 14px; height: 7px;}
    footer {padding: 20px 0 40px;}
}