@charset "utf-8";

/*
    ※ HTML 구조
    <div id="smesCommonMenuDimmer" class="smes-common-menu-dimmer"></div>
    <div>
        <button type="button" id="smesCommonMenuButton" class="smes-common-menu-button" />
        <div id="smesCommonMenuHolder" class="smes-common-button-holder"></div>
        ...
    </div>
 */

     .smes-comn-login-none { display: none !important; }
     .smes-common-menu-holder { top: 90px; }
     .smes-common-header { background: #fff;  border-bottom: 1px solid #d8d8d8; height: auto; z-index: 999; width: 100%; margin: 0; padding-top: 0; box-sizing: revert; position: relative; }
     .smes-common-header * { box-sizing: revert !important; }
     .smes-common-header .rela { height: 60px; margin-top: 0; padding: 15px 0; justify-content: flex-start; align-items: center; display: flex;  max-width: 1280px; margin: 0px auto 0 auto; }
     .smes-common-header h1 { width: auto; height: auto; margin: 0 0 0 0px; display: flex; position: relative; z-index: 90; }
     .smes-common-header h1 a{color:#0e457a;font-size:0px;text-indent:-2000px;font-weight:500;margin:0;width:183px;height:49px;overflow:hidden;display:flex;justify-content:flex-start;align-items:center;background:url(../images/ico/img-logo@2x.png) no-repeat;background-size:183px 49px}
     .smes-common-header.active h1 a{background:url(../images/ico/img-logo-black@2x.png) no-repeat;background-size:183px 49px;}
     .smes-common-header h1 a{background:url(../images/ico/img-logo-black@2x.png) no-repeat;background-size:183px 49px}
     .smes-common-header h1 a:hover{text-decoration:none;}
     .smes-common-header .side-cont{display:flex;justify-content:space-between;align-items:center;width:calc( 100% - 250px );flex:1;}
     .smes-common-header .gnb-box { margin-left: 16px; position: static; display: flex; justify-content: center; align-items: center; height: auto; z-index: 90; }

     .comn_search_area { margin-left:36px; width: 320px; background-color: #e5ecf4; border-radius: 50px; height: 30px; position: relative; padding: 5px 55px 5px 18px; }
     .comn_search_area > input[type=text] { border:none; background: none; padding:0 10px; height: 30px; width: 95%; box-sizing: border-box; }
     .comn_search_area > input[type=text]:focus { background: white; }
     .comn_search_area > .btn_headsc { position: absolute; right: 15px; width: 30px; height:30px; background: url(../images/ico/ico_head_sc.png) center no-repeat; top:5px; }
     .comn_search_area > .btn_headsc > span { font-size:0; line-height: 0; }

     .smes-common-header .tnb_new li.etc a.search-menu { display: none; box-sizing: border-box; border: 1px solid #0f447a; width: 41px; height: 41px; background: url(../images/ico/ico_head_sc.png) center no-repeat; margin-right: 5px; font-size: 0; }
     .smes-common-header .tnb_new {display:flex;justify-content:flex-start;align-items:center; padding: 0 !important;}
     .smes-common-header .tnb_new li.etc{display:flex;justify-content:flex-start;align-items:center;}
     .smes-common-header .tnb_new li.etc a{position:relative;z-index:90;font-size:16px;color:#fff;display:flex;justify-content:center;align-items:center;width:53px;height:53px;overflow:hidden;border:1px solid #d3d3d3;}
     .smes-common-header .tnb_new li.etc a { border: 0; }
     .smes-common-header .tnb_new li.etc a.header-site{font-size:16px;text-indent: 25px;color:#fff;width: 124px;height:41px;overflow:hidden;background: #4073ff url(../images/ico/ico-lock.png) no-repeat 13px center;background-size:16px 16px;}
     .smes-common-header .tnb_new li.etc a.header-site:hover{text-decoration:none;}
     .smes-common-header .tnb_new li.etc a.total-menu{display:none;font-size:0;text-indent:-2000px;background:url(../images/ico/ico_total01.png)}

     .smes-common-login-holder { padding-top: 0 !important; }
     .__showsearch .smes-common-header .tnb_new li.etc a.search-menu { background: url(../images/ico/ico_del.png) center no-repeat; background-size: 24px; }


.smes-common-menu-button {
    width: 32px;
    height: 32px;
    border: 1px solid #cacaca;
    background: white url(../images/ico/ico_menuh.png) center no-repeat;
}
.smes-common-menu-button > span {
    font-size: 0;
    line-height: 0;
    display: none;
}
.smes-common-menu-button.__showmenu {
    background: url(../images/ico/ico_del.png) center no-repeat;
    background-size: 20px;
}
.smes-common-menu-holder {
    display: none;
    position: absolute;
    background: white;
    z-index: 22;
    width: 1280px;
    right: 50%;
    top: 90px;
    transform: translateX(50%);
    border-right: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
    line-height: 1.429;
    font-size: 14px ;
    box-shadow: 0px 10px 10px rgb(0 0 0 / 20%);
}
.smes-common-menu-holder * {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 300;
    color: #666;
    -webkit-overflow-scrolling: touch;
}
.smes-common-menu-holder ul,
.smes-common-menu-holder ol {
    list-style: none;
    margin: 0;
    padding: 0;
}
.smes-common-menu-holder .scm-all-list {
    overflow: hidden;
    margin: 0;
    list-style: none;
    display: flex; /*251128 추가*/
}
.smes-common-menu-holder .scm-all-list > li {
    /*float: left;*/
    width: 20%;
    padding: 90px 25px 0;
    height: 345px; /*251128 높이 수정*/
    box-sizing: border-box;
    margin: 0;
    border-left: 1px solid #ddd;
}
/*251128 아이콘 변경*/
.smes-common-menu-holder .scm-all-list > li:first-child { background: url(../images/ico/ico_menu03.jpg) top 40px center no-repeat; }
.smes-common-menu-holder .scm-all-list > li:nth-child(2) { background: url(../images/ico/ico_menu04.jpg) top 40px center no-repeat; }
.smes-common-menu-holder .scm-all-list > li:nth-child(3) { background: url(../images/ico/ico_menu02.jpg) top 40px center no-repeat; }
.smes-common-menu-holder .scm-all-list > li:nth-child(4) { background: url(../images/ico/ico_menu07.png) top 40px center no-repeat; }
.smes-common-menu-holder .scm-all-list > li:nth-child(5) { background: url(../images/ico/ico_menu01.jpg) top 40px center no-repeat; }
.smes-common-menu-holder .scm-all-list > li:nth-child(6) { background: url(../images/ico/ico_menu06.jpg) top 40px center no-repeat; }
.smes-common-menu-holder .scm-all-list:after {
    display: table;
    content: '';
    clear: both;
}
.smes-common-menu-holder .scm-all-list h2 {
    position: relative;
    font-size: 18px;
    color: #333;
    font-weight: bold;
    padding: 0;
    padding-bottom: 16px;
    margin: 0;
    margin-top: 2px;
    overflow: visible;
    line-height: 24px;
    width: 100%;
    height: auto;
    text-align: center;
    font-size: 21px;
    color: #08447c;
}
.smes-common-menu-holder .scm-all-list h2:after {
    content: '';
    height: 2px;
    width: 32px;
    background-color: #b6c7d7;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}
.smes-common-menu-holder .scm-all-list .scm-inner-menu > ul {
    list-style: none;
    margin: 0;
    margin-top: 16px;
}
.smes-common-menu-holder .scm-all-list .scm-inner-menu > ul > li {
    padding-left: 12px;
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
}
.smes-common-menu-holder .scm-all-list .scm-inner-menu > ul > li:before {
    content: '';
    position: absolute;
    left: 0;
    top: 8px;
    width: 4px;
    height: 4px;
    background-color: #0e457a;
    border-radius: 10px;
}
.smes-common-menu-holder .scm-all-list .scm-inner-menu > ul > li + li { margin-top: 6px; }
.smes-common-menu-holder .scm-all-list .scm-inner-menu > ul > li a {
    font-size: 15px;
    color: #666;
    font-weight: 400;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
}
.smes-common-menu-holder .scm-all-list .scm-inner-menu > ul > li a:hover { color: #0e457a; font-weight: 500; }
.smes-common-menu-dimmer {
    display: none;
    width: 100%;
    height: calc(100% - 126px);
    background-color: rgba(0,0,0,0.5);
    position: absolute;
    z-index: 21;
    top: 90px;
    left: 0;
    right: 0;
    bottom: 0;
}
@media (max-width:1280px) {
    .smes-common-menu-holder {
        width: 100%;
        right: auto;
        top: 70px;
        left: 0;
        transform: none;
    }

    .smes-common-menu-holder .scm-all-list > li { width: 33.333%; border-bottom: 1px solid #ddd; }
    .smes-common-header h1 a { background-size: contain; width: 150px; height: 40px; }
    .smes-common-header .rela { padding: 5px 0; align-content: center; }
}

 @media only all and (min-width: 801px){
    .smes-common-header .tnb_new { width: auto !important; padding: 0; margin-top: 0; margin-right: 10px; }
 }

@media (max-width:768px) {

    .smes-common-menu-dimmer { top: 70px; }
    .smes-common-menu-holder { top: 70px; }
    .smes-common-header { padding: 0; }
    .smes-common-header h1 { margin-left: 10px; }
    .smes-common-header h1 a { background-size: contain; width: 150px; height: 40px; }
    .smes-common-header .tnb_new { margin-top: 0; margin-right: 10px; }
    .smes-common-header .rela { width: 100%; padding: 5px 0; }
    .smes-common-header .tnb_new li.etc a.search-menu { display: block; }
    .comn_search_area { display: none; position: absolute;  z-index: 91; top: 15px; width: 130px; height: 30px; right: 110px; width: calc(100% - 195px); }
    .smes-common-header .tnb_new li.etc a.header-site {  width: 41px;  font-size: 0; text-indent: -2000px; background-position: center center; }
    .__showsearch .comn_search_area { display: block; }

    .smes-common-menu-holder .scm-all-list { padding: 10px 0; flex-direction: column; }
    .smes-common-menu-holder .scm-all-list > li { width: 100%; height: auto; padding: 10px 25px; }
    .smes-common-menu-holder .scm-all-list > li:first-child,
    .smes-common-menu-holder .scm-all-list > li:nth-child(2),
    .smes-common-menu-holder .scm-all-list > li:nth-child(3),
    .smes-common-menu-holder .scm-all-list > li:nth-child(4),
    .smes-common-menu-holder .scm-all-list > li:nth-child(5),
    .smes-common-menu-holder .scm-all-list > li:nth-child(6) {
        background-size: 30px;
        background-position: top 10px left 25px;

    }
    .smes-common-menu-holder .scm-all-list h2 {
        text-align: left;
        padding-left: 44px;
        font-size: 18px;
    }
    .smes-common-menu-holder .scm-all-list h2:after {
        left: 0;
        transform: none;
    }
    .smes-common-menu-holder .scm-all-list .scm-inner-menu > ul {
        overflow: hidden;
        margin-top: 5px;
        display:flex;
        flex-direction: column;
    }
    .smes-common-menu-holder .scm-all-list .scm-inner-menu > ul > li {
        float: left;
        margin-right: 20px;
        padding: 5px 5px 5px 12px;
    }
    .smes-common-menu-holder .scm-all-list .scm-inner-menu > ul > li:before {
        top: 13px;
    }
    .smes-common-menu-holder .scm-all-list .scm-inner-menu > ul > li + li {
        margin-top: 0px;
    }
}