@charset "utf-8";
html[lang='zh-cn'] body,html *[lang='zh-cn'],
h1, h2, h3, h4, h5, h6{font-family:'Noto Sans KR',Helvetica,'华文细黑',STXihei,'微软雅黑','Microsoft YaHei',Arial,sans-serif; font-weight:400;}
h1, h2, h3, h4, h5, h6{font-weight:800;}

body.on .mask{height:calc(100% - 300px);}

/* header */
#header{height:100px;}
#header .logo{font-weight:800;}

#topmenu{display:flex; justify-content:flex-end; padding:0 0 0 37.5%; margin:0 -90px 0 0;}
#topmenu > li{width:33.3333%;}
#topmenu > li > a{line-height:100px;}
#topmenu > li + li > a:before{display:none;}
#topmenu li .menu{top:0; height:400px;}

#menuArea{top:50px; left:0;}
#menuArea:after{top:100px;}
#menuArea .bar{top:95px;}

.btn_menu{display:none;}


/* logo 공통 */
.logo{top:26px; left:0;}
.logo a{display:flex; align-items:center; font-family:'Noto Sans KR';}
.logo a > span{padding:0; margin:0 0 0 9px;}
.logo strong, .m_menu .logo strong{display:block;}
.logo span > span, .m_menu .logo span > span{display:block; margin:-4px 0 0 2px; letter-spacing:0.3px; font-family:'Noto Sans KR'; font-size:12px; text-transform:uppercase;}


/* m_menu(en) */
.m_menu .logo br{display:none;}


/* footer */
#footer{padding:30px 0 50px; font-weight:200;}
#footer .logo{position:static; width:100%; transform:translateX(0);}
#footer .logo a{justify-content:center;}
#footer .logo span{font-size:28px; font-weight:400; color:#fff;}
#footer .copyright{color:rgba(255,255,255,0.4);}

#btn_top{top:0;}


#subVisual{background:url(/images/kr/common/subvisual.jpg);}
#subVisual .img{position:relative; height:200px;}
#subVisual .img img{position:absolute; bottom:0; left:50%; margin:0 0 0 -290px;}
#subContent{padding-bottom:11.3em;}

#submenu .sm_tit h2{font-family:'Noto Sans KR'; font-weight:400;}
#submenu .sm_tit{display:flex; flex-direction:column-reverse; justify-content:center; padding:0;}
#submenu .sm_tit:before{position:static; margin:15px 0 0 0;}

#submenu .depth2 > li > a{font-family:'Noto Sans KR'; font-weight:400;}
#submenu .depth2 > li:hover > a, #submenu .depth2 > li > a:hover, #submenu .depth2 > li > a:focus, #submenu .depth2 > li > a:active, #submenu .depth2 > li.current_on > a{font-weight:400;}

#pageInfo{height:auto; padding:0; color:#222; background:url(/images/kr/common/bg_pageInfo.gif) repeat-x bottom left; text-align:left;}
#pageInfo h3{padding:0 0 25px; font-family:'Noto Sans KR'; font-weight:400;}
.location{display:flex; align-items:center; position:absolute; top:6px; right:0; color:#333;}
.location a{color:#0e2766;}
.location span:before{border-color:#d6d6d6; transform:rotate(45deg) translate(2px,2px);}

#sub_default{padding:30px 0 0;}


@media all and (max-width:1230px) {
	#topmenu {margin:0 -15px 0 0;}

	#header .logo {left:15px;}
	.logo strong{font-size:26px;}
}

@media all and (max-width:1024px) {
    .btn_menu{left:auto; right:15px; display:block;}
	.logo strong{font-size:22px;}


	#header .logo{top:13px;}
    #header .logo span > span, .m_menu .logo span > span{letter-spacing:-0.5px;}

    .m_menu > ul > li > div{height:calc(100% - 100px);}

    #footer .logo span > span{letter-spacing:0.5px;}

    #subVisual .img{height:auto;}
    #subVisual .img img{position:static; width:140%; max-width:120%; margin:0 0 0 -20%;}

    #pageInfo{margin:0;}
    #pageInfo h3{padding:20px 0;}
    .location{top:50%; transform:translateY(-50%);}

	#btn_top{top:-30px; transform:translate(0,-50%);}
}

@media all and (max-width:768px) {
	#header .logo {top:10px; left:10px;}
	.logo strong{font-size:20px;}

    .m_menu > ul > li > div{height:calc(100% - 85px);}

    #footer{padding:20px 0;}
    #footer .logo{padding:0 0 20px 0;}
	#footer .logo span{font-size:20px;}
    #footer .link{position:relative; left:50%; transform:translateX(-50%); display:inline-block; padding:80px 0 10px;}
    #footer .link li{padding:0 10px;}
    #container_sub{background-size:contain;}

	#btn_top{top:0; transform:translate(0,0);}
}

@media all and (max-width:568px) {
    #header .logo strong, .m_menu .logo strong{padding:1px 0 0;}
    #header .logo span > span, .m_menu .logo span > span{margin-top:0;}

	#top {height:31px;}
	#top .global > li{width:25%;}

    #pageInfo h3{padding:15px 0;}
    .location{position:static;}

	#btn_top{top:-20px; transform:translate(0,-50%);}

}