@charset "utf-8";
/* CSS Document */
body {display: flex; flex-direction: column; min-height: 100vh;}
#wrap {display: flex; flex-direction: column; min-height: 100vh;}
.mobile_only {display: none;}

/* sub aside area 서브 페이지 좌측메뉴 */
aside {display: none;}
.lnb {width: 240px; min-width: 240px; margin-right: 2.5em;}
.lng_head {text-align: center; padding:40px 0; border:1px solid rgba(0, 0, 0, .1);}
.lng_head h3 { font-weight:600; font-size:1.5em;}
ul.navList {border-right:1px solid rgba(0, 0, 0, .1); border-left:1px solid rgba(0, 0, 0, .1);}
ul.navList > li {position:relative; text-align:left; border-bottom:1px solid rgba(0, 0, 0, .1);}
ul.navList > li.active > a {background: rgba(0, 0, 0, .1); color: #ff6c00 !important;}
ul.navList > li > a {display:block; font-size:1em; font-weight: 500; text-indent:10px; line-height:52px; color:rgba(0, 0, 0, .8);}
ul.navList > li:after {content: '\f3d1'; position: absolute; right: 15px; top: .875em; font-family: "Ionicons"; font-size:1.25em; transition: transform .35s, -webkit-transform .35s; transform: rotate(0deg); transform-origin: 50% 50%;}
ul.navList > li a span {position:inherit; padding:0;}
ul.navList > li.on > a {color:#000;}
ul.navList > li.on:after  {transform: rotate(90deg);}
ul.navList > li.on .twoDep {display:block;}
ul.navList li.subNone:after {display: none;}
ul.navList .twoDep {display:none;}
ul.navList .twoDep ul {}
ul.navList .twoDep ul li {position: relative; border-top: 1px solid rgba(0, 0, 0, .1);}
ul.navList .twoDep ul li a {position: relative; display:block; padding: .75em 20px; font-weight: 500; color:rgba(0, 0, 0, .8);}
.g_view {display:block; position:absolute !important; top:50%; right: 10px; width:17px; height:17px; margin-top:-8px; transition:all 0.3s; -webkit-transition:all 0.3s;}
.g_view:before, .g_view:after {content:''; display:block; position:absolute; font-size:1.5em; background:#666; transition:all 0.3s; -webkit-transition:all 0.3s;}
.g_view:before {width:17px; height:1px; top:8px; left:0;}
.g_view:after {width:1px; height:17px; left:8px; top:0;}
a:hover .g_view, .current > a > .g_view, .current > a > .g_view:before {transform:rotate(90deg); -webkit-transform:rotate(90deg);}
.current > a > .g_view:before, a:hover .g_view:before, .current > a > .g_view:after, a:hover .g_view:after {background:#000;}

ul.navList .twoDep ul li.active a {background: #f0f0f0;}
ul.navList .twoDep ul li.active .threeDep ul {background: #ddd;}
ul.navList .twoDep ul li.active .threeDep ul li a {background: #f7f7f7;}
ul.navList .twoDep ul li.active .threeDep ul li.active a {color:#ff6c00 !important;}

ul.navList .twoDep ul li span:before {margin-right:5px;}
ul.navList .twoDep ul li a:hover {color:#000;}
ul.navList .twoDep ul li.subNone a:after {display: none;}
ul.navList .twoDep ul li .threeDep {display:none;}
ul.navList .twoDep ul li.current .threeDep {display:block;}
ul.navList .twoDep ul li .threeDep ul li {position: relative; background: #fff;}
ul.navList .twoDep ul li .threeDep ul li a {padding: .75em 0 .75em 30px; font-weight: 400;}
ul.navList .twoDep ul li .threeDep ul li a:before {content: '\f462'; position: absolute; left: 20px; top: 18px; font-family: "Ionicons"; font-size: 0.667em;}
ul.navList .twoDep ul li .threeDep ul li a:after {display: none;}

/*  aside 모바일 좌측메뉴 */
aside .header {display: inline-flex; align-items: center; position: relative; width: 100%; padding: 0 1em; box-shadow: -3px 1px 5px 0px rgba(0, 0, 0, .3); background: #fff; z-index: 3;}
aside .header h1 a {display: block; width: 120px; margin-right: 10px;}
aside .header h1 img {width: 100%;}
aside .header .login {margin-left: auto;}
aside .header .login .name {font-size: 1.25em; font-weight: 500; color: #999;}
aside .header .login .name:before {content: '\f3c6'; margin-right: 5px; font-family: "Ionicons";}
aside .header .login .login-btn {font-size: 1.25em; font-weight: 500; color: #404ea1;}
aside .header .login .login-btn:before {content: '\f2a9'; margin-right: 5px; font-family: "Ionicons";}
aside .header .close {margin-left: 20px; font-size: 4em; color: #333; line-height: 0;}
aside:after {content: ''; position: absolute; top: 0; left: 0; width: 180px; height: 100%; border-right: 1px solid rgba(0, 0, 0, .1); background: #f1f1f1;}
aside ul.nav {position: relative; height: calc(100% - 104px); overflow-y: auto; z-index: 2;}
aside ul.nav > li {width: 180px;}
aside ul.nav > li > a {display: block; font-weight: 700; padding: 2em 0; text-indent: 20px; border-bottom: 1px solid rgba(0, 0, 0, .1); font-size: 1.125em;}
aside ul.nav > li.show > a {border-right: 1px solid rgba(0, 0, 0, .1); background: #fff;}
aside ul.nav > li.show > ul.navList {display: block;}
aside ul.nav > li > ul.navList {position: absolute; top: 0; right: 0; width: 300px; display: none; border: none;}
aside ul.nav > li > ul.navList .twoDep > ul > li .threeDep {display:none;}
aside ul.nav > li > ul.navList .twoDep > ul > li.current .threeDep {display:block;}
aside ul.nav > li > ul.navList .twoDep > ul > li .threeDep ul li {position: relative; background: #fff;}
aside ul.nav > li > ul.navList .twoDep > ul > li .threeDep ul li a {text-indent: 60px;}
aside ul.nav > li > ul.navList .twoDep > ul > li .threeDep ul li a:before {content: '\f462'; position: absolute; left: -20px; top: 10px; font-family: "Ionicons"; font-size: 1.5em;}

/*  테이블 reset & normalize */
* { box-sizing:border-box;}
caption {position:absolute; left:-99999px; font-size:0;}
tr:last-child {border-bottom:0;}
th, td {font:500 1em 'Malgun Gothic', sans-serif; word-break: keep-all;} /* background: #fff; */


@media all and (max-width:1024px){   
    aside {display: block; position: fixed; top: 0; left: -480px; width: 480px; height: 100%; background: #fff; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; transition:all 0.3s ease; z-index: 100;}
    aside.active {left: 0;}
    aside.active + .overay {position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: #000; opacity: .3; overflow-y: auto; z-index: 99;}
    .lnb {display: none;}
}

@media all and (max-width:767px){ 
    .mobile_only {display: block;}
    /*******************************
        main page popup
    *******************************/    
    .main .layer_popup {width:85%; margin:0 auto;}
    .main .layer_popup_fixed .pop_container {position: relative; width:100%;}
    .main .layer_popup .pop_cont {overflow-x:hidden; width:initial; max-height:500px;}

    /* popup size */
    .size-large {width:100%; height:auto;}
    .size-medium {width:100%; height:auto;}
    .size-small {width:100%; height:auto;}
    
    /* popup position */
    .left_top {position:absolute; left:0; right: 0;}
    .size-large.center_top {position:absolute; left:0; right: 0;}
    .size-medium.center_top {position:absolute; left:0; right: 0;}
    .size-small.center_top {position:absolute; left:0; right: 0;}
    .right_top {position:absolute; left:0; right:0;}
    .ui[class*="two column"].grid > .row > .column,
    .ui[class*="two column"].grid > .column:not(.row) {width: 100%;}
}
    
@media all and (max-width:480px){
    aside {width: 100%;}
    aside ul.nav > li,
    aside:after {width: 35%;}
    aside ul.nav > li > ul.navList {width: 65%;}

}