@charset "utf-8";

/************************************** layout **************************************/

@import url("theme_color.css");


/* background */
body {background: #f5f5f5;}


/* common tit */
.admin-content-wrap .page-tit {font-size: 1.7rem; padding-top: 15px; color: #4e4e4e}
.admin-content-wrap .page-tit > h1 {padding-bottom: 15px;}
.admin-content-wrap .page-tit > div.tit-exp {border: 1px solid #e7e7e7; padding: 5px 10px; font-size: 1.3rem; color: #4e4e4e; background: #fff; line-height: 17px; position: relative; height:29px; overflow: hidden;}
.admin-content-wrap .page-tit > div.tit-exp.on {height: auto; overflow: visible;}
.admin-content-wrap .page-tit > div.tit-exp span.material-icons {font-size: 1.75rem; position: relative; top: -1px;}
.admin-content-wrap .page-tit > div.tit-exp span.point {font-weight: 500;}
.admin-content-wrap .page-tit > div.tit-exp .tit-expand-arrow {position: absolute; right: 10px; top: 6px; cursor: pointer}
.admin-content-wrap .page-tit > div.tit-exp.on .tit-expand-arrow {transform: rotate(180deg);}

/* common sec css */
.admin-content-wrap > section.page-sec {margin-top: 25px;}

/* common sub-tit */
.page-sec .sub-tit h2 {font-size: 1.4rem; padding-bottom: 5px; color: #4e4e4e;}


/************* left area - open close btn*************/
.admin-wrap .left-bar-wrap .open-close-btn {position: absolute; right: -19px; top: 20px; cursor: pointer; padding: 10px 3px 10px 1px; border-radius: 0 8px 8px 0; color:#fff; }
.admin-wrap .left-bar-wrap .open-close-btn span.material-icons {font-size: 1.45rem;}
/* 대시보드 페이지에만 다른 색상 적용 */
.admin-wrap.dashboard-page .left-bar-wrap .open-close-btn {background: #fff; color: #4d4d4d;}
.admin-wrap .left-bar-wrap .open-close-btn span.material-icons.close {display: none}
.admin-wrap .left-bar-wrap .open-close-btn.off span.material-icons.open {display: none}
.admin-wrap .left-bar-wrap .open-close-btn.off span.material-icons.close {display: inline-block}

/************* left area *************/
.admin-wrap .left-bar-wrap {height: 100%; width: 230px; background: #fff; border-right: 1px solid #fff; position: fixed; top: 0;left: 0; z-index: 1;transition: width .2s ease;}
.admin-wrap .left-bar-wrap .logo-area {text-align:center; padding-top: 20px;}
.admin-wrap .left-bar-wrap .logo-area > img {height: 30px;}
.admin-wrap .left-bar-wrap .logo-area > img.dark {display: none;}
.admin-wrap .left-bar-wrap .logo-area p {text-align: center; font-weight: 500; font-size: 1.3rem;padding: 10px; color: #949494}

.admin-wrap .left-bar-wrap .user-area ul {text-align: center; padding: 20px 0 15px; border-bottom: 1px solid #ededed}
.admin-wrap .left-bar-wrap .user-area ul > li {display: inline-block; margin-right: 20px;color: #949494; font-size: 1.2rem; transition: opacity .1s ease;}
.admin-wrap .left-bar-wrap .user-area ul > li.logout-btn {margin-right: 0; cursor: pointer;}
.admin-wrap .left-bar-wrap .user-area ul > li.logout-btn:hover {opacity: .7; }
.admin-wrap .left-bar-wrap .user-area ul > li span.material-icons {font-size: 1.52rem; margin-right: 3px}

/* menu - 1depth */
.admin-wrap .left-menu-area {padding: 15px 20px; height: calc(100% - 144px); overflow-y: auto;-ms-overflow-style: none; scrollbar-width: none;} 
.admin-wrap .left-menu-area::-webkit-scrollbar {display: none}
.admin-wrap .left-menu-area .menu-wrap {padding-bottom: 30px}
.admin-wrap .left-menu-area .menu-wrap:last-child {padding-bottom: 0;}
.admin-wrap .left-menu-area .menu-category-title {color: #b3b0b0; font-size: 1.2rem; font-weight: 300; padding-bottom: 5px;}
.admin-wrap .menu-category > li {padding: 9px 0; border-bottom: 1px solid #ededed; position: relative; cursor: pointer}
.admin-wrap .menu-category > li.on:after {content: ''; width: 5px; height: 31px; top: 3px; left:-20px;  position: absolute}
.admin-wrap .menu-category > li > .expand-arrow {position: absolute; right: 0; top: 8px; color: #b7b7b7; cursor: pointer;}
.admin-wrap .menu-category > li > .expand-arrow > span.material-icons {font-size: 2rem}
.admin-wrap .menu-category > li.on > .expand-arrow {transform: rotate(180deg);}
.admin-wrap .menu-category > li > a {font-size: 1.3rem; color: #5d5d5d; }
.admin-wrap .menu-category > li > a > span.material-icons {font-size: 1.3rem; border-radius: 20px; margin-right: 5px; padding: 4px; position: relative; top: -1px}
.admin-wrap .menu-category > li > a > span.material-icons.sub-icons {font-size: 1.7rem; padding: 0; border-radius: 0;}

.admin-wrap .menu-category > li.on > a {font-weight: 500}

/* menu - 2depth */
.admin-wrap .menu-category > li > ul.sub-menu {display: none;padding-top: 5px }
.admin-wrap .menu-category > li.on > ul.sub-menu {display: block;}
.admin-wrap .menu-category > li > ul.sub-menu > li {position: relative; padding: 2px 0 2px 38px}
.admin-wrap .menu-category > li > ul.sub-menu > li:before {content: ''; position: absolute; background: #828282; width:2px; height:2px; top:11px; left:30px; }
.admin-wrap .menu-category > li > ul.sub-menu > li > a {color: #828282; font-size: 1.2rem}
.admin-wrap .menu-category > li > ul.sub-menu > li:not(.on) > a:hover {opacity: .8;}


/* mode btn */
.admin-wrap .button-area {padding: 5px 15px;}
.admin-wrap .mode-btn { color: #d2d1d1; font-size: 1.3rem; font-weight: 300; display: inline-block; cursor: pointer; padding: 7px 15px; border-radius: 30px;}
.admin-wrap .mode-btn span.material-icons {font-size: 1.45rem; margin-right: 5px;}
.admin-wrap .dark-mode-btn { box-shadow: -1px 3px 6px 0px #cacaca;background: #2c2d30;}
.admin-wrap .light-mode-btn {display: none; background: #4e4e4e; border: 1px solid #d2d1d1}

/* 레프트 바 접혔을 때 mode-btn */
.admin-wrap .width-btn {display: none;}
.admin-wrap .width-btn .mode-btn {padding:7px; position: relative; bottom: 20px;}
.admin-wrap .width-btn span.material-icons {margin-right: 0; font-size: 1.2rem;}


/************* right area *************/
.admin-wrap {height: 100%}
.admin-wrap .body-container { position: relative; padding-left: 230px; transition: padding .2s ease; height: 100%;}
.admin-wrap .body-container .admin-content-wrap {padding:0 30px 30px;transition: width .2s ease; position: relative; }


/* left bar 접혔을 때 */
.admin-wrap.off .left-bar-wrap {width: 60px;}
.admin-wrap.off .left-bar-wrap .logo-area,
.admin-wrap.off .left-bar-wrap .user-area,
.admin-wrap.off .left-menu-area .menu-category-title,
.admin-wrap.off .left-bar-wrap .button-area .pc-btn,
.admin-wrap.off .left-bar-wrap .menu-txt,
.admin-wrap.off .left-bar-wrap .menu-category > li > .expand-arrow  {display: none;}
.admin-wrap.off .left-bar-wrap .menu-category > li {border-bottom: 0; transition: opacity .3s ease}
.admin-wrap.off .left-bar-wrap .menu-category > li:hover {opacity: 0.7;}
.admin-wrap.off .left-bar-wrap .left-menu-area {height: calc(100% - 30px)}
.admin-wrap.off .left-bar-wrap .left-menu-area .menu-wrap {padding-bottom: 15px;}
.admin-wrap.off .left-bar-wrap .left-menu-area .menu-wrap span.sub-icons {padding-left: 2px;}
.admin-wrap.off .left-bar-wrap .button-area .width-btn {display: inline-block}
.admin-wrap.off .body-container {padding-left: 60px;}