.sidebar {width: 280px; min-width: 280px; height: 100vh; background-color: #fafafa; position: fixed; z-index: 2; transition: all 0.45s cubic-bezier(0.77, 0, 0.175, 1); left: -220px; color: #e0e0e0;}
.openNav .sidebar {transform: translate3d(280px, 0, 0); transition: all .45s cubic-bezier(0.77, 0, 0.175, 1); left: -280px;}
.sidebar-header {padding: 30px 0; box-sizing: border-box;}
.sidebar-header .logo {text-align: center;}
.sidebar-header .logo img {width: 117px; height: 72px; flex-shrink: 0;}

/* fold 처리 */
.sidebar-wrap.fold .gnb > li .gnb-name > div, .sidebar-wrap.fold .gnb > li .gnb-name, .sidebar-wrap.fold .gnb > li .gnb-name a {flex-direction: row-reverse; transition: all 0.45s cubic-bezier(0.77, 0, 0.175, 1);}
.sidebar-wrap.fold .gnb > li {padding: 11px 0px;}
.sidebar-wrap.fold .gnb > li .gnb-name .gnb-ico {margin-left: 12px;}

.gnb > li {padding: 11px 38px; border-bottom: 1px solid #f7f7f7;}
.gnb > li .gnb-name {font-size: 18px; color: #303030; display: flex; align-items: center; justify-content: space-between; cursor: pointer;}
.gnb > li .gnb-name > div {display: flex; align-items: center;}
.gnb > li .gnb-name a {display: flex; align-items: center; width: 100%;}
.gnb > li .gnb-name .gnb-ico {width: 32px; height: 32px; display:  flex; justify-content: center; align-items: center; background-color: #ddf1e3; border-radius: 8px; margin-right: 16px;}
.gnb > li .gnb-name .gnb-ico svg {height: 20px;}
.gnb > li:hover .gnb-name {color: #4cb66a; font-weight: 600;}
.gnb > li:hover .gnb-name .gnb-ico svg g, .gnb > li:hover .gnb-name .gnb-ico svg path, .gnb > li:hover .gnb-name .gnb-ico svg rect {stroke: #fff;}
.gnb > li:hover .gnb-name .gnb-ico {background-color: #4cb66a;}
.gnb > li:nth-child(5) .gnb-name .gnb-ico svg {height: 15px;}
.gnb > li .gnb-name .gnb-more {width: 18px; height: 18px;}
.gnb li .lnb {display: none; margin-top: 20px;}
.gnb li .lnb li {padding: 12px 0px 12px 16px; box-sizing: border-box; color: #303030; font-size: 16px;}
.gnb li .lnb li:hover {color: #4cb66a;}
.gnb li .lnb li.active svg {transform: rotate(180deg);}
.gnb li .lnb > li:first-child {padding: 0 0 12px 16px;}
.gnb li .lnb > li:last-child {padding: 12px 0 17px 16px;}
.gnb li .lnb > li span {cursor: pointer;}
.gnb li .lnb span svg {width: 14px; height: 14px; fill: #4cb66a; float: right;} 
.gnb li .lnb li ul {display: none; margin-top: 10px;}
.sidebar-content .gnb li.active .lnb li ul li:hover {color: #4cb66a;}

.header-top {background-color: #fff; border-bottom: 1px solid #f7f7f7;}
.header-area {display: flex; justify-content: space-between; align-items: center; height: 68px; padding: 0 32px; box-sizing: border-box;}
.header-area .header-left .menu {cursor: pointer;}
.header-area .header-right {display: flex; align-items: center;}
.header-area .header-right .user {display: flex; align-items: center; position: relative;}
.header-area .header-right .user::before {position: absolute; display: block; content: ''; width: 1px; height: 10px; background-color: #f7f7f7; left: -16px; top: 50%; transform: translateY(-50%);}
.header-area .header-right .user img {width: 24px; height: 24px; margin-right: 8px;}
.header-area .header-right .user span {font-size: 14px; color: #6d6e71; font-weight: 300;}
.header-area .header-right .logout {margin-left: 20px; width: 60px; height: 24px; line-height: 22px; box-sizing: border-box; text-align: center; border-radius: 12px; border: 1px solid #e8e8e8; cursor: pointer;}
.header-area .header-right .logout span {font-size: 12px; color: #6d6e71; font-weight: 500;}

.layout {margin-left: 50px; transition: all 0.45s cubic-bezier(0.77, 0, 0.175, 1); left: -220px;}
.openNav .layout {margin-left: 280px; transform: translate3d(280px, 0 0); left: -280px; }
.content {padding: 32px; box-sizing: border-box; min-height: calc(100vh - 175px);}

.footer-wrap {height: 104px; box-sizing: border-box; border-top: 1px solid #f7f7f7; background-color: #fff; padding: 20px 32px; color: #303030; line-height: 150%; font-size: 14px; font-weight: 300;}
.footer-area {margin: 0 auto;}