html, body { margin: 0; width: 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; 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: 1360px; width: 100%; padding: 0 10px; margin: 0 auto;}
.limit1200 {max-width: 1220px; width: 100%; padding: 0 10px; margin: 0 auto;}
.limit1300 {max-width: 1320px; width: 100%; padding: 0 10px; margin: 0 auto;}
.limit1500 {max-width: 1520px; width: 100%; padding: 0 10px; margin: 0 auto;}
/********************************************/
#hd {position: relative;}
.sound_only,
#hd_h1,
#skip_to_container,
#hd_login_msg {display: none;}
/* */
.header {position: absolute; z-index: 10; left: 0; top: 0; width: 100%; height: 110px; transition: .3s ease;}
.header.scroll {visibility: hidden; opacity: 0;}
.header.subP {position: fixed;}
.header > div.limit {display: flex; justify-content: space-between; height: 100%; max-width: 100%; padding: 0 100px;}
.logo {position: relative; display: inline-block; width: 220px; height: 100%;}
.logo a {position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-indent: -9999px; background: url('/images/common/logo_kr.png')no-repeat; background-position: center !important; background-size: contain !important; transition: .3s ease;}
.logo a:nth-of-type(1) {background: url('/images/common/logo_on_kr.png')no-repeat; opacity: 0;}

.en .logo a {background: url('/images/common/logo.png')no-repeat;}
.en .logo a:nth-of-type(1) {background: url('/images/common/logo_on.png')no-repeat;}

.mainNav {flex: 1;}
.mainNav__inner {height: 100%;}
.mainNav__list {display: flex; align-items: center; height: 100%; justify-content: center;}
.mainNav__list > li {position: relative; height: 100%;}
.mainNav__list > li > a {display: flex; justify-content: center; align-items: center; height: 100%; padding: 0 40px; transition: .3s ease;}
.mainNav__list > li > a span { color: #fff; font-size: 1.188rem; font-weight: 700; transition: .3s ease; letter-spacing: 0;}

.mainNav__list > li .depth2 {position: absolute; top: 100%; left: 00px; z-index: 3; display: none; width: 100%; text-align: center; width: 100%;}
.mainNav__list > li .depth2 li:first-child {margin: 30px 0 0;}
.mainNav__list > li .depth2 li a {display: block; padding: 8px 0; }
.mainNav__list > li .depth2 li a span {position: relative; display: inline-block; font-size: 1.063rem; font-weight: 300; color: #5b84d1; transition: color .3s ease;}
.mainNav__list > li .depth2 li a span::after {content: ""; position: absolute; left: 0; bottom: -1px; width: 100%; height: 1px; background: #fff; opacity: 0; transition: .3s ease;}

.mainNav__list > li.on > a span {color: #1246a1 !important;}



.menuBg {position: absolute; top: 100%; background: rgba(18,70,161,0.95); width: 100%; z-index: 2; display: none;}

.header__langWrap {height: 100%; display: flex; align-items: center; margin: 0 80px 0 0;}
.header__lang--link {position: relative; display: inline-block; font-size: 1.188rem; font-weight: 600; color: #fff; transition: .3s ease;}
.header__lang--link::after {content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px; background: #fff; opacity: 0; transition: .3s ease;}
.header__lang--link.on::after {opacity: 1;}
.header__lang--link:nth-of-type(1) {margin: 0 30px 0 0;}

.hamburger_wrap { position: absolute;  cursor: pointer; display: flex; transition: .15s ease; height: 100%; align-items: center; top: 0; right: 100px; z-index: 14;}
.hamburger__inner {width: 38px; height: 38px; border: 1px solid #fff; position: relative; transition: .3s ease;}
#nav-icon3 {position: absolute; width: 18px;height: 14px; -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; transform: translate(-50%,-50%); left: 50%; top: 50%;}
#nav-icon3 span {display: block;position: absolute; height: 1px;width: 100%;background: #fff; border-radius: 9px;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) {width: calc(100% - 2px); left: 2px; top: 7px;}
#nav-icon3 span:nth-child(4) {top: 14px;}
#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.sub ,
.header:hover {background: #ffffff; box-shadow: 1px 3px 30px 0 rgba(0,0,0,0.3);}
.header.sub .mainNav__list > li > a span ,
.header:hover .mainNav__list > li > a span {color: #333333;}
.header.sub .logo a:nth-of-type(1) ,
.header:hover .logo a:nth-of-type(1) {opacity: 1;}
.header.sub .logo a:nth-of-type(2) ,
.header:hover .logo a:nth-of-type(2) {opacity: 0;}
.header.sub .hamburger__inner ,
.header:hover .hamburger__inner {border-color: #333;}
.header.sub #nav-icon3 span ,
.header:hover #nav-icon3 span {background: #333333;}
.header.sub .header__lang--link ,
.header:hover .header__lang--link {color: #666666;}
.header.sub .header__lang--link.on ,
.header:hover .header__lang--link.on {color: #1246a1;}
.header.sub .header__lang--link.on::after ,
.header:hover .header__lang--link.on::after {background: #1246a1;}

.mainNav__list > li:hover > a span {color: #1246a1 !important;}

.mainNav__list > li .depth2 li.on a span,
.mainNav__list > li .depth2 li:hover a span {color: #fff;}
.mainNav__list > li .depth2 li.on a span::after,
.mainNav__list > li .depth2 li:hover a span::after {opacity: 1;}

.sideNavWrap {position: absolute; right: 0; top: 0; z-index: 11; background: rgba(0,0,0,0.6); width: 100%; height: 100vh; transition: .3s ease; visibility: hidden; opacity: 0;}
.sideNavWrap.on {opacity: 1; visibility: visible;}
.sideNav {position: absolute; right: 0; top: 0; max-width: 960px; width: 100%; height: 100vh; background: #fff; padding: 30px 90px;}
.sideNav .logoWrap {padding: 0 0 50px;}
.sideNav__list {display: flex; flex-flow: column nowrap; justify-content: center;}
.sideNav__list > li {display: flex; padding: 25px 0; border-bottom: 1px solid #ddd;}
.sideNav__list > li:last-child {border-bottom: none;}
.sideNav__list > li > a {display: inline-block; width: 180px; }
.sideNav__list > li > a span {font-size: 1.375rem; font-weight: 700; color: #333333;}
.sideNav__list > li .depth2 {display: flex; flex-wrap: wrap; align-items: center;}
.sideNav__list > li .depth2 li {margin: 0 30px 0 0;}
.sideNav__list > li .depth2 li span {font-size: 1.063rem; font-weight: 500; color: #999999;}


.header.side_on .hamburger__inner {border-color: #fff;}
.header.side_on #nav-icon3 span {background: #666;}

.footer {background: #484848; padding: 30px 0;}
.footer .limit {display: flex;}
.footer .middle {flex: 1; padding: 0 0 0 90px;}
.footer__middle--tit {font-size: 1.125rem; font-weight: 500; color: #6eb938;}
.footer .middle ul {display: flex;}
.footer .middle li {font-size: 1rem; font-weight: 400; color: #cccccc; margin: 0 10px 10px 0;}
.footer .middle li:last-child {margin: 0 0 10px;}

.familySelect {position: relative; display: flex; align-items: center; border: 1px solid #666666; height: 40px; width:260px; justify-content: space-between;  cursor: pointer;}
.familySelect__txt {font-size: 0.9375rem; font-weight: 400; color: #cccccc; text-align: center; flex: 1; text-transform: uppercase;}
.familySelect__arrowWrap {position: relative; width: 40px; height: 100%; border-left: 1px solid #666;}
.familySelect__arrowWrap img {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(180deg); }

.family__linkList {position: absolute; bottom: calc(100% + 1px); left: 0; width: 100%; text-align: center; display: none;}
.family__linkList li a {display: block; background: #484848; border: 1px solid #666; border-bottom: none; font-size: 1rem; padding: 4px 0; color: #ccc;}

.copyright {font-size: 1rem; font-weight: 400; color: #cccccc;}

.mobile {display: none;}
@media screen and (max-width: 1440px) {
    .header > div.limit {padding: 0 10px;}
    .hamburger_wrap {right: 10px;}
}
@media screen and (max-width: 1220px) {
    .mainNav__list > li > a {padding: 0 25px;}
}
@media screen and (max-width: 1024px) {
    .pc {display: none !important;}
    .mobile {display: block !important;}

    

    .header {position: fixed; z-index: 10;}
    .header.m_scrolled {background: #fff;}
    .header.side_on {background: #fff;}
    .header.m_scrolled {background: #ffffff; box-shadow: 1px 3px 30px 0 rgba(0,0,0,0.3);}
    .header.side_on {background: #ffffff; box-shadow: 1px 3px 30px 0 rgba(0,0,0,0.3);}
    .header.m_scrolled .mainNav__list > li > a span {color: #333333;}
    .header.side_on .mainNav__list > li > a span {color: #333333;}
    .header.m_scrolled .logo a:nth-of-type(1) {opacity: 1;}
    .header.side_on .logo a:nth-of-type(1) {opacity: 1;}
    .header.m_scrolled .logo a:nth-of-type(2) {opacity: 0;}
    .header.side_on .logo a:nth-of-type(2) {opacity: 0;}
    .header.m_scrolled .hamburger__inner {border-color: #333;}
    .header.side_on .hamburger__inner {border-color: #333;}
    .header.m_scrolled #nav-icon3 span {background: #333333;}
    .header.side_on #nav-icon3 span {background: #333333;}
    .header.m_scrolled .header__lang--link {color: #666666;}
    .header.side_on .header__lang--link {color: #666666;}
    .header.m_scrolled .header__lang--link.on {color: #1246a1;}
    .header.side_on .header__lang--link.on {color: #1246a1;}
    .header.m_scrolled .header__lang--link.on::after {background: #1246a1;}
    .header.side_on .header__lang--link.on::after {background: #1246a1;}

    .header > div.limit {justify-content: center;}

    .sideNavWrap { height: calc(100vh - 110px); top: 110px;}
    .sideNav {max-width: none;  padding: 0; overflow: auto; height: auto;}

    .header__langWrap {height: auto; margin: 0; padding: 30px 10px 20px;}
    .header__lang--link {font-size: 1.25rem;}

    .sideNav__list > li {flex-wrap: wrap; padding: 0; transition: .3s ease; border-bottom: none;}
    .sideNav__list > li > a {width: 100%; position: relative; padding: 10px;}
    .sideNav__list > li > a span {transition: .3s ease;}
    .sideNav__list > li .depth2 {display: none; width: 100%; margin: 10px 0 ;}
    .sideNav__list > li .depth2 li {margin: 0;}
    .sideNav__list > li .depth2 li a {display: block; padding: 5px 10px;}
    
    
    .sideNav__list > li.active {background: #f9f9f9;}
    .sideNav__list > li.active > a span {color: #1246a1;}

    .sideNav__list .arrow_wrap {position: absolute; right: 10px; top: 50%; transform: translate(0,-50%); width: 24px; height: 14px;}
    .sideNav__list .arrow_wrap img {position: absolute; left: 0; top: 0; transition: .3s ease;}
    .sideNav__list .arrow_wrap img:nth-of-type(2) {opacity: 0;}
    .sideNav__list .active .arrow_wrap img {transform: rotate(180deg);}
    .sideNav__list .active .arrow_wrap img:nth-of-type(1) {opacity: 0;}
    .sideNav__list .active .arrow_wrap img:nth-of-type(2) {opacity: 1;}

    .footer .limit {flex-wrap: wrap;}
    .footer .middle {width: 100%; flex: auto; padding: 20px 0;}

    .hd_pops {left: 10px !important; max-width: calc(100% - 20px);}
    .hd_pops img {max-width: 100% !important;}
    .hd_pops_con {max-width: 100%;}
}

@media screen and (max-width: 768px) {
    html, body {font-size: 0.875em;}

    .header {height: 80px;}
    .sideNavWrap {height: calc(100vh - 80px); top: 80px;}
    .logo {width: 150px;}

    .hamburger__inner {width: 30px; height: 30px;}

    .sideNav__list .arrow_wrap {width: 20px; height: 12px;}

    .footer .left img {width: 150px;}
}
@media screen and (max-width: 480px) {
    html, body {font-size: 0.8125em;}

    .header {height: 60px;}
    .sideNavWrap {height: calc(100vh - 60px); top: 60px;}
    .logo {width: 120px;}
    
    .hamburger__inner {width: 26px; height: 26px; border: none;}

    .footer .left img {width: 100px;}
    .footer .middle ul {flex-wrap: wrap;}
    .footer .middle ul li {width: 100%; margin: 0 0 10px;}

    .sideNav__list .arrow_wrap {width: 16px; height: 10px;}
}