@charset "utf-8";
@import url(//cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
/* basic */
#wrap{max-width:2560px; min-width:980px; margin:0 auto; position:relative }
#wrap.main{max-width:2560px;  margin:0 auto;}
body{font-family: 'NanumSquare', sans-serif;}

body{-webkit-text-size-adjust:none; }
.stock{font-family: 'Stockholm Slab';}
.inner{width:100%; max-width:980px; margin:0 auto; position:relative;}

#wrap.theme_white #header .gnb .overflow_div > ul > li > a{color:#fff;}
#wrap.theme_white #header.on .gnb .overflow_div > ul > li > a{color:#1f1f1f;}
#wrap.theme_white #header.on a.logo .white{display:none;}
#wrap.theme_white #header.on a.logo .black{display:block;}
#wrap.theme_white #header a.logo .white{display:block}
#wrap.theme_white #header a.logo .black{display:none}

/* header */
#header{position:absolute; left:50%; top:0; width:100%; min-width:980px; max-width:2560px;  height:72px; border-bottom:1px solid #708d9b; z-index:10; transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); -moz-transform:translateX(-50%);}
#header a.logo{z-index:2; position:absolute; left:70px; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%); display:inline-block; vertical-align:top;}
#header a.logo .white{display:none}
#header a.logo .black{display:block}
#header .gnb{position:relative; width:100%; margin:0 auto;}
#header .gnb .overflow_div{overflow:hidden; height:72px; max-width:1200px; margin:0 auto;}
#header .gnb .overflow_div > ul{margin:0 auto; overflow:hidden; font-size:0; text-align:center; letter-spacing:-4px;}
#header .gnb .overflow_div > ul > li{width:180px; display:inline-block; vertical-align:top;}
#header .gnb .overflow_div > ul > li > a{display:block; position:relative; height:72px; line-height:72px; text-align:center; font-size:20px; color:#1f1f1f; font-weight:bold; letter-spacing:0;}
#header .gnb .overflow_div > ul > li > a:before{content:""; width:0; height:5px; background:#1f1f1f; position:absolute; left:50%; bottom:-3px; transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); -moz-transform:translateX(-50%); transition:all 0.3s; -ms-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; -moz-transition:all 0.3s;}
/*#header .gnb .overflow_div > ul > li > a:after{content:""; width:16px; height:28px; background:url('/img/cursor_img.png') no-repeat center center / contain; position:absolute; display:none; right:20px; bottom:-20px; transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); -moz-transform:translateX(-50%);}*/
#header .gnb .overflow_div > ul > li > ul.depth02{padding:30px 0;}
#header .gnb .overflow_div > ul > li > ul.depth02 li{margin:5px 0;}
#header .gnb .overflow_div > ul > li > ul.depth02 li a{padding:10px 0; letter-spacing:-0.035em; display:block; font-size:15px; color:#575756;}
#header .gnb .overflow_div > ul > li > ul.depth02 li a br{display:none}
#header .right_btn{position:absolute; right:200px; top:0; width:74px; height:72px;}
#header .right_btn a{text-align:center; display:block; width:100%; height:100%; background:#013852}
#header .right_btn a i{display:inline-block; vertical-align:top; padding-top:16px; padding-bottom:5px;}
#header .right_btn a p{text-align:center; font-size:14px; color:#fff; letter-spacing:-0.05em; font-weight:bold;}

@media all and (max-width:1400px){
	#header a.logo{left:40px;}
	#header .right_btn{right:40px}
	#header .gnb .overflow_div > ul{padding-left:200px;}
}
@media all and (max-width:1200px){
	#header .gnb .overflow_div > ul > li{width:150px;}
}

/* header_menu on */
#header.on .gnb{background:#fff; position:relative;}
#header.on .gnb:before{content:''; display:block; width:100%; height:1px; background-color:#708d9b; top:72px; left:0; position:relative;}
#header.on .gnb .overflow_div > ul > li.on > a:hover{color:#1f1f1f; font-weight:800;}
#header.on .gnb .overflow_div > ul > li.on > a:before{width:100%}
#header.on .gnb .overflow_div > ul > li.on > a:after{display:block;}

/* footer */
#footer{background:#ececec; padding:60px 0 160px;}
#footer .inner{max-width:980px; margin:0 auto; position:relative;}
#footer p{font-size:15px; color:#333; font-weight:200; line-height:33px;}
#footer ul{margin-top:20px; text-align:left; font-size:0; letter-spacing:-4px;}
#footer ul li{display:inline-block; vertical-align:top;}
#footer ul li a{display:block;}

.main #footer{background:#fff;}
.main #footer .inner{max-width:1600px}

/* top_btn */
.top_btn{width:55px; height:55px;position:fixed; text-align:center; right:100px; bottom:-100px; z-index:3;}
.top_btn{transition:all 0.3s; -ms-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; -moz-transition:all 0.3s}
.top_btn.on{bottom:100px}
.top_btn a{display:block;}
.top_btn img{width:100%}
/*sub_common css*/
.sub_common{width:100%; height:440px; max-width:2560px; box-sizing:border-box; position:relative;}
.sub_common:before{display:block; content:""; width:50%; height:61px; position:absolute; right:0; bottom:0; background:#fff; border-bottom:1px solid #b0aca8; box-sizing:border-box;  z-index:3;}
.sub_common .img_box{width:100%; overflow:hidden; position:relative;}
.sub_common .img_box > img{position:relative; left:50%; transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); -moz-transform:translateX(-50%); z-index:2;}

.sub_common .img_box .box{padding:25px 15px; z-index:2; width:207px; height:207px; border:3px solid #073c55; box-sizing:border-box; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);}
.sub_common .img_box .box:before{content:""; width:2px; height:85px; background:#fff; position:absolute; left:50%; bottom:-60px; display:block;}
.sub_common .img_box .box ul{font-size:0; text-align:center; letter-spacing:-4px;}
.sub_common .img_box .box ul li{margin:0 2px; display:inline-block; vertical-align:top; font-size:18px; color:#fff; letter-spacing:0; font-weight:200;}
.sub_common .img_box .box h2{text-align:center; line-height:1.5; font-size:30px; color:#fff; letter-spacing:0; font-weight:800; padding-top:30px;}

.sub_common .inner{padding-left:61px; border-bottom:1px solid #b0aca8; box-sizing:border-box; z-index:4; background:#fff; width:100%; height:61px; max-width:980px; position:absolute; bottom:0; left:50%; transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); -moz-transform:translateX(-50%);}
.sub_common .inner.fixed_on{position:fixed; top:0; z-index:10;}
.sub_common .inner.fixed_on:before{background:#fff; content:""; width:1000%; height:60px; border-bottom:1px solid #b0aca8; position:fixed; left:-100%; top:0;}
.sub_common .inner:after{clear:both; content:""; display:block; height:0; visibility:hidden}
.sub_common .inner > div{float:left; height:100%;}
.sub_common .inner .home{background:#000; width:61px; height:61px; position:relative; position:absolute; left:0; top:0;}
.sub_common .inner .home a{display:block}
.sub_common .inner .home a img{display:block; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);}
.sub_common .inner > div > div.m_depth01{position:relative; background:#fff; width:304px; height:100%; float:left; border-right:1px solid #d7d7d7;}
.sub_common .inner > div > div.m_depth01.on{background:#414141}
.sub_common .inner > div > div.m_depth01.on > div p span{color:#fff;}
.sub_common .inner > div > div.m_depth01.on > div p > i{background:url('/img/m_depth_on.png')}

.sub_common .inner > div > div.m_depth01 > div{position:relative; height:100%;}
.sub_common .inner > div > div.m_depth01 > div p{height:100%;}
.sub_common .inner > div > div.m_depth01 > div p span{display:block; width:84%; height:100%; font-size:16px; padding-left:30px; box-sizing:border-box; color:#000; line-height:61px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sub_common .inner > div > div.m_depth01 > div p > i{background:url('/img/m_depth_off.png'); width:14px; height:14px; position:absolute; right:25px; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%);}
.sub_common .inner > div > div.m_depth01 ul{background:#414141; padding:10px 0; display:none; position:relative; z-index:3;}
.sub_common .inner > div > div.m_depth01 ul li{width:100%; background-color:#414141;}
.sub_common .inner > div > div.m_depth01 ul li a{display:block; width:100%; height:100%; font-size:15px; font-weight:300; color:#fff; padding:10px 0 10px 30px; box-sizing:border-box;}

.sub_common .inner > div > div.m_depth02{position:relative; background:#414141; width:304px; height:100%; float:left; border-right:1px solid #d7d7d7;}
.sub_common .inner > div > div.m_depth02 > div{position:relative; height:100%;}
.sub_common .inner > div > div.m_depth02 > div p{height:100%}
.sub_common .inner > div > div.m_depth02 > div p span{display:block; width:100%; height:100%; font-size:15px; padding-left:30px; box-sizing:border-box; color:#fff; line-height:61px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sub_common .inner > div > div.m_depth02 > div p span br{display:none}
.sub_common .inner > div > div.m_depth02 > div p > i{background:url('/img/m_depth_on.png'); width:14px; height:14px; position:absolute; right:25px; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%);}
.sub_common .inner > div > div.m_depth02 ul{background:#414141; padding:10px 0; display:none; position:relative; z-index:3;}
.sub_common .inner > div > div.m_depth02 ul li{width:100%; background-color:#414141;}
.sub_common .inner > div > div.m_depth02 ul li a{display:block; width:100%; height:100%; font-size:15px; font-weight:300; color:#fff; padding:10px 0 10px 30px; box-sizing:border-box;}
.sub_common .inner > div > div.m_depth02 ul li a br{display:none}

.sub_common .inner > div > div.m_depth03{position:relative; display:none; background:#414141; width:304px; height:100%; float:left; border-right:1px solid #d7d7d7;}
.sub_common .inner > div > div.m_depth03 > div{position:relative; height:100%;}
.sub_common .inner > div > div.m_depth03 > div p{height:100%}
.sub_common .inner > div > div.m_depth03 > div p span{display:block; width:100%; height:100%; font-size:15px; padding-left:30px; box-sizing:border-box; color:#fff; line-height:61px; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.sub_common .inner > div > div.m_depth03 > div p span br{display:none}
.sub_common .inner > div > div.m_depth03 > div p > i{background:url('/img/m_depth_on.png'); width:14px; height:14px; position:absolute; right:25px; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%);}
.sub_common .inner > div > div.m_depth03 ul{background:#414141; padding:10px 0; display:none; position:relative; z-index:3;}
.sub_common .inner > div > div.m_depth03 ul li{width:100%; background-color:#414141;}
.sub_common .inner > div > div.m_depth03 ul li a{display:block; width:100%; height:100%; font-size:15px; font-weight:300; color:#fff; padding:10px 0 10px 30px; box-sizing:border-box;}
.sub_common .inner > div > div.m_depth03 ul li a br{display:none}

.sub_common .inner > div.depth03_on > div.m_depth02{background:#ececec;}
.sub_common .inner > div.depth03_on > div.m_depth02 > div p span{color:#414141;}
.sub_common .inner > div.depth03_on > div.m_depth02 > div p > i{background:url('/img/m_depth_off.png')}
.sub_common .inner > div.depth03_on > div.m_depth02 ul{background:#ececec;}
.sub_common .inner > div.depth03_on > div.m_depth02 ul li{background:#ececec;}
.sub_common .inner > div.depth03_on > div.m_depth02 ul li a{color:#414141;}
.sub_common .inner > div.depth03_on > div.m_depth03{display:block}

/* 서브비주얼 변경 */
.sub_common .img_box > img.w1920{display:none;}
.sub_common .img_box > img.w2560{display:block;}

@media all and (max-width:1920px){
	.sub_common .img_box > img.w1920{display:block;}
	.sub_common .img_box > img.w2560{display:none;}
}