@charset "utf-8";


.container {height: calc(100dvh - (var(--gap-common) * 3) - 80px);} /* 78px은 header의 높이 */

/* header */
.header {display: block; width: 100%; background-color: #fff; padding: 1.25em 0; border-radius: 1.5em; box-shadow: var(--st-sd);}
.header .cnt {display: flex; justify-content: space-between; flex-wrap: wrap; align-self: center;}

/* 추가 영역 */
.header .cnt > div {display: flex; gap: 1em; align-items:flex-end;}
/* 추가 영역 */

.header .cnt .logo_area {display: flex; gap: 1em; align-items: flex-end;}

.header .cnt .logo_area  h1 {font-weight: normal;}
.header .cnt .logo_area  h1 > img {height: 2.5em;}
.header .cnt .logo_area > p {display: inline-block; vertical-align: bottom; font-weight: 300;}
.header .cnt .logo_area > p b {display: inline-block; vertical-align: bottom; font-weight: 600;}

.header .cnt .hd_right {display: flex; gap: 1em; align-items: flex-end;}
.header .cnt .hd_right p {padding-bottom: 0.5em; font-weight: 600;}
.header .cnt .hd_icon {display: flex; gap: 0.5em; justify-content: center;align-self: center;}
.header .cnt .hd_icon > li > a {width: 2.375em; height: 2.375em; display: block; border-radius: 50%; display: flex; justify-content: center; align-self: center; text-align: center; color: #fff; position: relative;}
.header .cnt .hd_icon > li > a > img {width: 50%; height: auto;}

.header .cnt .hd_icon > li.hd_alarm > a {background-color: var(--sub02-color);}
.header .cnt .hd_icon > li.hd_shop > a {background-color: var(--main-color);}
.header .cnt .hd_icon > li.hd_message > a {background-color: var(--sub02-color);}
.header .cnt .hd_icon > li.hd_logout > a {background-color: #bcd3e4;}

.header .cnt .hd_icon > li > a > span.count_num {font-size: 0.6em; background-color: var(--sub01-color); line-height: 1rem; font-weight: 500; display: block; border-radius: 50%; position: absolute; width: 1rem; height: 1rem; top: -0.25rem; right: -0.25rem;}

aside {display: block; background-color: var(--main-color); border-radius: 1.5em; width: 30%; max-width: 280px;height: 100%; padding: var(--pd-common) 0; position: relative;  box-shadow: var(--st-sd);}
aside.hide {width: calc((var(--pd-common) * 2) + 2.8rem)}

aside > .cnt {display: flex; flex-direction: column; gap: 0.5em;}
aside > .cnt > li > a {color: #fff; padding: 0.5rem 0.7rem; display: flex; border-radius: 0.8rem; align-items: center;  font-size: 0.875em;}
aside > .cnt > li > a > span.aside_icon {width: 1.4rem; height: 1.4rem; display: block; margin-right: 1rem;}
aside > .cnt > li:nth-child(1) > a > span.aside_icon {background: url(../../img/aside_01.svg) no-repeat 50% 50%;} /* 홈 */
aside > .cnt > li:nth-child(2) > a > span.aside_icon {background: url(../../img/aside_13.svg) no-repeat 50% 50%;} /* 기준정보관리 */
aside > .cnt > li:nth-child(3) > a > span.aside_icon {background: url(../../img/aside_03.svg) no-repeat 50% 50%;} /* 회원관리 */
aside > .cnt > li:nth-child(4) > a > span.aside_icon {background: url(../../img/aside_02.svg) no-repeat 50% 50%;} /* 주문관리 */
aside > .cnt > li:nth-child(5) > a > span.aside_icon {background: url(../../img/aside_08.svg) no-repeat 50% 50%;} /* 판매관리 */
aside > .cnt > li:nth-child(6) > a > span.aside_icon {background: url(../../img/aside_09.svg) no-repeat 50% 50%;} /* 발주관리 */
aside > .cnt > li:nth-child(7) > a > span.aside_icon {background: url(../../img/aside_10.svg) no-repeat 50% 50%;} /* 납품관리 */
aside > .cnt > li:nth-child(8) > a > span.aside_icon {background: url(../../img/aside_07.svg) no-repeat 50% 50%;} /* 재고관리 */
aside > .cnt > li:nth-child(9) > a > span.aside_icon {background: url(../../img/aside_12.svg) no-repeat 50% 50%;} /* 시스템설정 */

aside > .cnt > li:hover > a,
aside > .cnt > li.active > a {background-color: #fff; color: var(--basic-black);}

aside.open > .cnt li.active .sub_nav_wrap {display: flex;}
aside.open > .cnt > li > a,
aside.hide > .cnt > li > a {font-size: 0; width: calc(1.4rem + 1.4rem);  -webkit-transition: unset; -moz-transition: unset; -o-transition: unset; transition: unset;}
aside.open > .cnt > li > a span,
aside.hide > .cnt > li > a span {margin-right: 0;  -webkit-transition: unset; -moz-transition: unset; -o-transition: unset; transition: unset;}

aside > .cnt .sub_nav_wrap {width: calc(100% - (var(--pd-common) * 2) - 2.8rem); height: 100%; background-color: var(--sub02-color); display: none; position: absolute; top: 0; right: 0%; border-radius: 1.5em; padding: var(--pd-common); flex-direction: column; flex-wrap: wrap; gap: 0.5em;}

aside > .cnt .sub_nav_wrap > li > a {color: #fff; padding: 0.5rem 0.7rem; display: flex; border-radius: 0.8rem; align-items: center; line-height: 1.4rem; font-size: 0.875em;}
aside > .cnt .sub_nav_wrap > li:hover > a,
aside > .cnt .sub_nav_wrap > li.active > a {background-color: var(--main-color);}

aside > .cnt > li:nth-child(1):hover > a > span.aside_icon,
aside > .cnt > li.active:nth-child(1) > a > span.aside_icon {background: url(../../img/aside_01_active.svg) no-repeat 50% 50%;} /* 홈 */
aside > .cnt > li:nth-child(2):hover > a > span.aside_icon,
aside > .cnt > li.active:nth-child(2) > a > span.aside_icon {background: url(../../img/aside_13_active.svg) no-repeat 50% 50%;} /* 기준정보관리 */
aside > .cnt > li:nth-child(3):hover > a > span.aside_icon,
aside > .cnt > li.active:nth-child(3) > a > span.aside_icon {background: url(../../img/aside_03_active.svg) no-repeat 50% 50%;} /* 회원관리 */
aside > .cnt > li:nth-child(4):hover > a > span.aside_icon,
aside > .cnt > li.active:nth-child(4) > a > span.aside_icon {background: url(../../img/aside_02_active.svg) no-repeat 50% 50%;} /* 주문관리 */
aside > .cnt > li:nth-child(5):hover > a > span.aside_icon,
aside > .cnt > li.active:nth-child(5) > a > span.aside_icon {background: url(../../img/aside_08_active.svg) no-repeat 50% 50%;} /* 판매관리 */
aside > .cnt > li:nth-child(6):hover > a > span.aside_icon,
aside > .cnt > li.active:nth-child(6) > a > span.aside_icon {background: url(../../img/aside_09_active.svg) no-repeat 50% 50%;} /* 발주관리 */
aside > .cnt > li:nth-child(7):hover > a > span.aside_icon,
aside > .cnt > li.active:nth-child(7) > a > span.aside_icon {background: url(../../img/aside_10_active.svg) no-repeat 50% 50%;} /* 납품관리 */
aside > .cnt > li:nth-child(8):hover > a > span.aside_icon,
aside > .cnt > li.active:nth-child(8) > a > span.aside_icon {background: url(../../img/aside_07_active.svg) no-repeat 50% 50%;} /* 재고관리 */
aside > .cnt > li:nth-child(9):hover > a > span.aside_icon,
aside > .cnt > li.active:nth-child(9) > a > span.aside_icon {background: url(../../img/aside_12_active.svg) no-repeat 50% 50%;} /* 시스템설정 */

aside > .nav_close {display: flex; width: 2em; height: 2em; align-items: center; justify-content: center; position: absolute; top: -0.5em; right: -0.5em; border: 3px solid #fff; background-color: var(--main-color); border-radius: 50%; z-index : 10;}
aside > .nav_close img {width: 35%; margin-left: -0.1em;}

aside.hide > .nav_close img {transform: rotate(180deg); margin-left: 0.125em;}

.contents {flex-grow: 1; display: flex; height: 100%; flex-direction: column;}

.contents section {border-radius: 1.5em; background-color: #fff; padding: var(--pd-common); display: flex; box-shadow: var(--st-sd);}

.tab_history > ul {display: flex; gap: 0.25em;}
.tab_history > ul > li {padding: 0.5em 1em; border-radius: 0.75em; background-color: #fff;}
.tab_history > ul > li a {font-size: 0.875em; display: flex; gap: 0.5em; color: var(--mid-black);}

.tab_history > ul > li a span.btn_close {display: flex; background: url(../../img/close_gr.svg) no-repeat 50% 50%; width: 0.5em; height: 0.5em; justify-content: center; align-self: center;}

.tab_history > ul > li.active,
.tab_history > ul > li:hover {background-color: var(--sub01-color);}
.tab_history > ul > li.active a,
.tab_history > ul > li:hover a {color: #fff;}

.tab_history > ul > li.active a::after,
.tab_history > ul > li:hover a::after {background: url(../../img/close_wh.svg) no-repeat 50% 50%;}