@charset "UTF-8";

html, body {width:100%; height:100%; background:#302f2c;}

/*Container*/
.container {background-color:#fff;}
.sub_container {padding:40px 20px 40px 20px;}
.sub_container_white {background:#fff; padding:30px 20px 40px 20px;}
.sub_container_gray {background:#f7f7f7; padding:30px 20px 40px 20px;}

/*Header*/
.header {
    z-index:100;
    position:fixed;
    top:0;
    display:flex; 
    flex-flow: row wrap;
    justify-content:space-between;
    width:100%;
    height:60px;
    background-color:#fff;
    text-align:center;
    padding:20px;
    border-bottom:1px solid #d9d9d9;
}
.header_space {height:60px; clear:both;}
.header_logo {position:fixed; top:20px; left:20px; z-index:300;}
.header_logo img {width:110px; height:auto;}
.menuAll_main {float:left; width:22px; height:22px; cursor:pointer;}

/* 슬라이드 메뉴 */
.left_menu {min-width:320px;}
.sidenav_header {width:100%; height:60px; top:30px; border-bottom: 1px solid #dcdcdc;}
.sidenav {
    height:100%;
    width:0;
    position:fixed;
    top:0;
    right:0;
    background-color:#fff;
    overflow-x:hidden;
    transition:0.3s;
    z-index:200;
}
.sidenav a {padding:8px 8px 8px 32px; text-decoration:none; font-size:25px; color:#4d4d4d; display:block; transition:0.0s;}
.sidenav .closebtn {
    position:absolute;
    top:20px;
    right:0;
    background:url(../images/common/btn_close.png) no-repeat;
    width:22px;
    height:22px;
    background-size:22px 22px;
}

#lnb {position:relative; width:100%;}

/* 1depth */
#lnb > ul > li {border-bottom:1px solid #dcdcdc;}
#lnb > ul > li img {width:26px; height:auto; margin-right:10px; margin-top:-3px;}
#lnb > ul > li > a {
    display: block;
    height:70px;
    padding: 27px 22px;
    font-size: 16px;
    font-family:LGSmHaTSB;
    background: url('../images/common/icon_expand.png') no-repeat 94% 28px;
}
#lnb > ul > li a:hover {color:#cd1f47;}
#lnb > ul > li.on > a {background:url('../images/common/icon_reduction.png') no-repeat 94% 28px;}
#lnb > ul > li > ul {display:none; background-color: #f7f7f7;}

/* 2depth */
#lnb > ul > li > ul > li > a {
    display: block;
    padding: 10px 10px 10px 25px;
    font-size: 14px;
    background: #f7f7f7 url('../images/common/icon_expand.png') no-repeat 94% 17px;
}
#lnb > ul > li > ul > li:first-child {border-top: 1px solid #dcdcdc;}
#lnb > ul > li > ul > li:first-child {padding-top:15px;} /* 상단여백 */
#lnb > ul > li > ul > li:last-child {padding-bottom:15px;} /* 하단여백 */
#lnb > ul > li > ul > li a:hover {color:#cd1f47;}
#lnb > ul li.noDepth a {background-image:none !important;}

/* Sub Top Visual */
.sub_top {width:100%; height:200px; text-align:center; padding-top:55px;}
.sub_top ul li:nth-child(1) {font-size:24px; font-weight:600; color:#fff;}
.sub_top ul li:nth-child(2) {font-size:14px; color:#fff; opacity:0.8;}
.bg_company {background:url(../images/common/sub_top_company.jpg) no-repeat; background-size:cover; background-position:bottom;}
.bg_system {background:url(../images/common/sub_top_system.jpg) no-repeat; background-size:cover; background-position:bottom;}
.bg_consulting {background:url(../images/common/sub_top_consulting.jpg) no-repeat; background-size:cover; background-position:bottom;}
.bg_project {background:url(../images/common/sub_top_project.jpg) no-repeat; background-size:cover; background-position:bottom;}
.bg_newsroom {background:url(../images/common/sub_top_newsroom.jpg) no-repeat; background-size:cover; background-position:bottom;}

/* Title */
.tit_2depth {font-weight:600; font-size:22px; margin-bottom:30px; text-align:center;}
.tit_3depth {font-weight:600; font-size:18px; margin-bottom:8px;}
.tit_3depth font {color:#cd1f47;}

/* Color */
.color_sa_red {color:#cd1f47;}

/* images */
.img_contents100 {width:100%; text-align:center;}
.img_contents100 img {width:100%; height:auto;}
.img_contents90 {width:100%; text-align:center;}
.img_contents90 img {width:90%; height:auto;}
@media (min-width:600px) {
  .img_contents100 img {width:60%; height:auto;}
  .img_contents90 img {width:60%; height:auto;}
}

/* Tab */
.tab_box div {width:100%; height:40px; border:1px solid #cd1f47; text-align:center; padding:8px 0; cursor:pointer; color:#cd1f47;}
.tab_box .on {background:#cd1f47; color:#fff; cursor:default;}
.tab_con {clear: both;}
.tab_con div {display: none;}
/* Form */
.m_search {width:100%; height:38px; background:#f2f2f2; border:none; padding:0 12px; margin-bottom:10px;}
.m_search input {width:100%; height:38px; background:#f2f2f2; border:none;}
.m_search_btn {padding:10px 0; cursor:pointer;}
.m_search_btn img {width:20px; height:auto;}
.m_sorting {width:100%; height:38px; border:1px solid #d9d9d9; padding:0 12px; color:#808080; background: url('../images/common/select_arrow.png') no-repeat right 50%;}

/* Footer */
.footer {width:100%; background:#302f2c;}
.footer div:first-child {font-size:12px; line-height:20px; padding:20px; text-align:center; border-bottom:1px solid #4f4e4b; color:#fff;}
.footer div:last-child {font-size:12px; line-height:20px; color:#666; text-align:center; padding:20px;}