@charset "utf-8";

header h1 { float:none; position: absolute; left: 50%; top:-5px; transform: translateX(-50%) scale(0.7); 
            -moz-transform:translateX(-50%) scale(0.7); /*사파리, 크롬, 안드로이드, iOs, webkit 엔진 등*/
    -webkit-transform:translateX(-50%) scale(0.7); /*파이어폭스, 모질라 브라우저 엔진*/ 
    -ms-transform:translateX(-50%) scale(0.7); /*IE*/ 
    -o-transform:translateX(-50%) scale(0.7);
            padding:0;}
header .left {display: block; width: 100%; padding: 19px 0 15px 14px; border-bottom: 1px solid #d3d3d3;}
header .all { display: block; position: relative; width:32px; height: 20px; border-top: 2px solid #313131; border-bottom: 2px solid #313131; color:transparent; transform: scale(0.8);}
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: 33px 17px 0 0;}
header > ul li {display: none;}
header > ul li.join { display: block;}
header > ul li.join a { overflow: hidden; width:17px; height: 16px;  background: url("../images/layout_m.png") no-repeat -63px -35px / 300px auto; border: none; color:transparent;}
header > ul li a {width: 70px;}
.MoLogin{  position: absolute; right: 15px; font-size: 1.5em; 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: 0 20px 24px; margin-top: 15px; border-top: 1px solid #bbb;}
header .nav.on nav a { height: 35px; line-height: 30px; color:#111; padding-top:10px;}
header .nav.on nav a:before { display: none;}
header .nav.on nav li { float: none; padding-top: 10px;}
header .nav.on nav li ul li{height:35px; line-height:40px; padding-top:0; padding-left: 10px; border-bottom: 1px solid #eee; }
header .nav.on div { display: flex; }
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 .close { position: absolute; right: 24px; top: 12px; width: 20px; height: 20px; color:transparent;}
header .nav.on .close:before { content: ""; position: absolute; left:46%; top: 0; width: 2px; height: 100%; background: #5a5a5a; transform: rotate(45deg);}
header .nav.on .close:after { content: ""; position: absolute; right:45%; top: 0; width: 2px; 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{ width: 100%;height: 44px;display: flex;align-items: center; justify-content: space-between;}
.toplist li{ float: left; text-align: center; padding: 10px 3px; width: 20%; }
.toplist li:first-child{width: 25%;}
.toplist li:nth-child(2){width: 15%;}

.step_m{
    height: auto !important; line-height: 35px !important;
}
.subTitle_m {
    display: block;
}
 .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;
    }