@charset "utf-8";

header h1 { float:none; position: absolute; left: 50%; top:2px; transform: translateX(-50%); padding:0;
            max-height: 70px;
            height: 100%;
}
header img{    height: 100%;}
header .left {display: block; padding: 22px 0 20px 38px; width: 100%;border-bottom: 1px solid #d3d3d3;}
header .all { display: block; position: relative; width:32px; height: 24px; border-top: 3px solid #313131; border-bottom: 3px solid #313131; color:transparent;}
header .all:before { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background: #313131; margin-top: -1px;}
header .left > div { float:none; }
header > ul { padding: 40px 40px 0 0;}
header > ul li a {width: 70px;}
.MoLogin{  position: absolute; right: 40px; font-size: 2em; color: #8a8a8a;}

/* 모바일메뉴 */
header .close,
header .all,
header .left > div > div,
header h2 { display: block;}
header .nav { 
        display: block;
    position: fixed;
    left: -120%;
    top: 0;
    bottom: 0;
    height: 100%;
    z-index: 101;
    transition: left 0.3s;
    padding: 15px 0;
    width: 100%;
    background: #fff;
    box-sizing: border-box;
    overflow-y: scroll;
}
header .nav.on { left: 0;}
header .nav.on nav {display: block; padding: 20px 40px; border-top: 1px solid #ddd;}
header .nav.on nav a { height: 40px; line-height: 40px; color:#111;}
header .nav.on nav a:before { display: none;}
header .nav.on nav li { float: none; margin-bottom: 15px;}
header .nav.on div { display: flex; margin: 0 30px 15px;}
header .nav.on div a:first-child { margin-left: 10px;
    text-align: center;
    color: #666;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 15px;
    background: #c3c3c3;
    color: white;   }
header .nav.on div a:last-child { margin-left: 3px;
    text-align: center;
    color: #666;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 15px;
    background: #85c585;
    color: white;   }
     header .nav.on div a:first-child{ margin-right: 10px;}   
     header .nav.on nav li ul li{ height:30px; line-height: 30px; padding-left: 10px; margin-bottom: 0; border-bottom: 1px solid #eee; }
header .nav.on .close { position: absolute; right: 35px; top: 22px; width: 30px; height: 30px; color:transparent;}
header .nav.on .close:before { content: ""; position: absolute; left:46%; top: 0; width: 3px; height: 100%; background: #5a5a5a; transform: rotate(45deg);}
header .nav.on .close:after { content: ""; position: absolute; right:45%; top: 0; width: 3px; height: 100%; background: #5a5a5a; transform: rotate(-45deg);}
header h2 { margin: 0 0 75px 0; width: 132px; height: 50px; background: url("../images/layout.png") no-repeat 0 -70px; color:transparent;}
.dim { display: none;position: fixed; left: 0; top: 0; z-index: 100; width: 100%; height: 100%; background: rgba(0,0,0,0.5);}

.navbar, .webheader{
    display: none;
}
.toplist{ display: inline-block; width: 100%;  padding: 0 35px;}
.toplist li{ float: left; text-align: center; padding: 14px 16px; font-size: 15px; width: 20%;}

/* 모바일 사이드메뉴 부분 3단 */

.step_m{
    height: auto !important; line-height: 30px !important;
}
.subTitle_m {
    display: block;margin: 0 !important;
}
 .dep3Ul li ul.sub_m { display: none; padding:7px 10px;}
 .dep3Ul li ul.sub_m li{
     border-left: 2px solid #d3d3d3;
 }
    .dep3Ul li ul.sub_m li:last-child {
        border-bottom: none!important;
    }