@charset "utf-8";
@import url(//cdn.jsdelivr.net/gh/moonspam/NanumSquare@1.0/nanumsquare.css);
/* basic */
#wrap{width:640px; margin:0 auto; position:relative }
#wrap.main{ margin:0 auto;}
body{font-family: 'NanumSquare', sans-serif;}
body{-webkit-text-size-adjust:none; }
.stock{font-family: 'Stockholm Slab';}
.inner{width:580px; margin:0 auto; position:relative;}

#wrap #header .white{display:none}
#wrap #header .black{display:block}
#wrap.theme_white #header .white{display:block}
#wrap.theme_white #header .black{display:none}

/* header */
#header{position:absolute; left:50%; top:0; width:100%; height:87px; border-bottom:2px solid #eae8e7; z-index:10; transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); -moz-transform:translateX(-50%);}
#header .inner{height:100%}
#header a.logo{z-index:2; position:absolute; left:50%; top:50%; display:inline-block; vertical-align:top; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%);}
#header .ham_btn{cursor:pointer; position:absolute; left:0; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%);}
#header .right_btn{position:absolute; right:0; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%);}
#header .right_btn a.visit{text-align:center; display:inline-block; vertical-align:middle; background:#013852; font-size:20px; color:#fff; font-weight:bold; width:98px; line-height:36px; height:36px; border-radius:30px;}
#header .right_btn a.call{display:inline-block; vertical-align:middle; position:relative; top:-2px; margin-left:15px;}

/*햄버거 메뉴*/
.ham_inner{width:100%; padding:0 30px; box-sizing:border-box; position:relative;}
.ham_gnb{display:block; position:fixed; width:470px; height:100%; background:#fff;  overflow-y:auto; z-index:9999; top:0; left:-9999px;}
.ham_gnb .ham_top{width:100%; height:87px; position:relative; background:#fff; border-bottom:2px solid #eee;}
.ham_gnb .ham_top .ham_inner{height:100%;}
.ham_gnb .ham_top .menu_logo{position:absolute; top:50%; left:30px; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%); margin:0;}
.ham_gnb .ham_top .menu_logo a{display:block; width:100%; height:100%;}
.ham_gnb .ham_top .menu_logo a img{width:100%;}
.ham_gnb .ham_top .ham_close{width:29px; height:29px; cursor:pointer; position:absolute; top:50%; right:30px; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%);}
.ham_gnb .ham_top .ham_close img{width:100%; height:100%;}
.ham_gnb > ul{width:100%;}
.ham_gnb > ul > li:first-child{border-top:0;}
.ham_gnb > ul > li{background:#fff; width:100%; border-top:2px solid #eee;}
.ham_gnb > ul > li > a{position:relative; display:block; width:100%; height:80px; font-size:27px; letter-spacing:-0.05em; font-weight:bold; line-height:80px; color:#1d1d1b; cursor:pointer; padding-left:30px; box-sizing:border-box;}
.ham_gnb > ul > li > a:before{content:""; width:0; height:8px; background:#013852; position:absolute; left:0; top:-4px; display:block; transition:all 0.3s; -ms-transition:all 0.3s; -webkit-transition:all 0.3s; -o-transition:all 0.3s; -moz-transition:all 0.3s;}
.ham_gnb > ul li a span{width:20px; height:20px; position:absolute; right:30px; top:50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%);}
.ham_gnb > ul li a span img{margin-left:5px;}
.ham_gnb > ul li a span i.hori{position:absolute; left:50%; top:0; width:2px; height:100%; background:#575756; transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); -moz-transform:translateX(-50%)}
.ham_gnb > ul li a span i.veri{position:absolute; left:0; top:50%; width:100%; height:2px; background:#575756; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); -o-transform:translateY(-50%); -moz-transform:translateY(-50%)}
.ham_gnb > ul > li > ul{width:100%; display:none; background:#e9eef1;}
.ham_gnb > ul > li > ul li{width:100%; padding-left:30px; box-sizing:border-box; border-top:2px solid #fff;}
.ham_gnb > ul > li > ul li a{position:relative; display:block; width:100%; height:66px; font-size:22px; font-weight:bold; letter-spacing:-0.025em; line-height:66px; color:#6b6b6b;}
.ham_gnb > ul > li > ul li a i{display:inline-block; margin-right:5px;}
.ham_gnb > ul > li > ul li a font{font-size:22px}
.ham_gnb > ul > li > ul li a br{display:none;}
.ham_gnb .bot_btn{width:100%;}
.ham_gnb .bot_btn a{display:block; height:64px; line-height:64px; text-align:center; font-size:22px; background:#f2f2f2; color:#575756; font-weight:bold;}
.ham_gnb .bot_btn a i{display:inline-block; vertical-align:middle; margin-right:10px; position:relative; top:-2px;}
.ham_gnb .bot_btn a:first-child{background:#013852; color:#fff;}

.ham_gnb > ul > li.on > a{color:#013852}
.ham_gnb > ul > li.on > a:before{width:198px;}
.ham_gnb > ul > li.on > a span i.hori{display:none;}
.ham_gnb > ul > li.on > a span i.veri{background:#013852}
.ham_gnb ul li.dethp03_on > a{color:#013852}
.ham_gnb ul li.dethp03_on a span i.hori{display:none;}
.ham_gnb ul li.dethp03_on a span i.veri{background:#013852}

.bg_black{position:fixed; z-index:999; width:100%; height:100%; background:rgba(0,0,0,0.46); display:none; left:0; top:0;}

/* footer */
#footer{background:#ececec; padding:90px 0; text-align:center;}
#footer span{display:block; text-align:center; font-size:16px; color:#333; font-weight:400; line-height:24px; padding-bottom:15px;}
#footer p{text-align:center; font-size:18px; color:#333; font-weight:400; line-height:28px; padding-bottom:15px;}
#footer p b{font-weight:700;}
#footer ul{text-align:center; margin-top:20px; font-size:0; letter-spacing:-4px;}
#footer ul li{display:inline-block; vertical-align:top; font-weight:500;}
#footer ul li a{display:block;}

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

/* top_btn */
.top_btn{width:60px; position:fixed; text-align:center; right:20px; bottom:-100px; }
.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 img{width:100%;}
.top_btn.on{bottom:20px}
.top_btn a{display:block;}

/*sub_common css*/

.sub_common{width:100%; height:556px; max-width:640px; box-sizing:border-box; position:relative;}
.sub_common .img_box{width:100%; height:488px; 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:50px 32px 25px 32px; z-index:2; width:255px; height:255px; border:5px solid #013852; box-sizing:border-box; position:absolute; left:50%; top:160px; transform:translateX(-50%); -ms-transform:translateX(-50%); -webkit-transform:translateX(-50%); -o-transform:translateX(-50%); -moz-transform:translateX(-50%);}
.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:24px; color:#fff; letter-spacing:0; font-weight:200;}
.sub_common .img_box .box h2{text-align:center; line-height:1.5; font-size:32px; color:#fff; letter-spacing:0; font-weight:800; padding-top:20px;}

.sub_common .inner{border-bottom:1px solid #b0aca8; box-sizing:border-box; background:#fff; width:100%; height:68px; max-width:640px;}
.sub_common .inner.fixed_on{position:fixed; top:0; z-index:10;}
.sub_common .inner.fixed_on:before{background:#fff; content:""; width:1000%; height:67px; 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:after{clear:both; content:""; display:block; height:0; visibility:hidden}
.sub_common .inner > div > div{box-sizing:border-box;}
.sub_common .inner > div > div.m_depth01{position:relative; background:#fff; width:50%; 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:22px; padding-left:30px; box-sizing:border-box; color:#000; line-height:67px; 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{position:absolute; left:0; top:67px; width:100%;background:#414141; padding:10px 0; display:none; 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:22px; 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:50%; 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:22px; padding-left:30px; box-sizing:border-box; color:#fff; line-height:67px; 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{position:absolute; left:0; top:67px; width:100%; background:#414141; padding:10px 0; display:none; 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:22px; 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:22px; padding-left:30px; box-sizing:border-box; color:#fff; line-height:67px; 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{position:absolute; left:0; top:67px; width:100%;background:#414141; padding:10px 0; display:none; 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:22px; 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}