@charset "utf-8";

/* 왼쪽 메뉴 구조 변경 */
.main-header { margin-left:260px; display:flex; z-index:1; transition: all ease-in-out 0.5s; }
.main-sidebar { left:0; top:0; position:fixed; width:260px; height:100vh; z-index:10; transition: all ease-in-out 0.5s; overflow-y: auto; }
.content-wrapper { margin-left:260px; display:flex; min-height:1000px; min-width: 1400px; z-index:1; transition: all ease-in-out 0.5s; overflow-y: auto; }
.main-footer { margin-left:260px; z-index:1; transition: all ease-in-out 0.5s; }

.main-sidebar::-webkit-scrollbar { width: 1px; }
.main-sidebar::-webkit-scrollbar-thumb { background-color: #aaaaaa; }
.main-sidebar::-webkit-scrollbar-track { }
.main-sidebar {
    scrollbar-color: #cfcfcf white; /* thumb and track color */
    scrollbar-width: thin;
}

.slide .main-header { margin-left:56px }
.slide .main-sidebar { width:56px; }
.slide .main-sidebar:hover { width:260px;}
.slide .content-wrapper { margin-left:56px; }
.slide .main-footer { margin-left:56px }
.slide-fadein { display:none; }

/* layout (header, footer + @) */
header {
  z-index: 1;
  position: relative;
  height: 57px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eeeeee;
  padding: 0 30px;
  background: #fff;
}

header .left {
  display: flex;
  justify-content: center;
  align-items: center;
}

header .left h1 {
  margin-right: 30px;
}

header .left h1 a {
  display: flex;
  justify-content: center;
  align-items: center;
}
header .left h1 a img {
  /* height: 20px; */
}

header .left .area {
  display: flex;
  justify-content: center;
  align-items: center;
}
header .left .area a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 35px;
  color: #434e5c;
  font-weight: 500;
}

header .left .area a b {
  display: inline-block;
  margin-left: 5px;
  margin-right: 5px;
  font-weight: 500;
  font-size: 16px;
}

header .right {
  display: flex;
  justify-content: center;
  align-items: center;
}

header .right .icon {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f8f8f8;
  height: 32px;
  padding: 0 20px;
  border-radius: 50px;
}

header .right .icon a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 30px;
}
header .right .icon a:last-child {
  margin-right: 0;
}

header .right .icon a img {
  margin-right: 5px;
}

header .right .icon a span {
  color: #797979;
}

footer {
  background: #fff;
  position: relative;
}
footer address {
  color: #797979;
  font-size: 13px;
}
footer * {
  line-height: 1.6;
  font-size: 12px;
  color: #999999;
}
footer .top {
  background: #fafafa;
  padding: 13px 5px;
  padding-left: 20px;
  height: 48px;
}
footer .top a {
  display: inline-block;
  margin-right: 50px;
  color: #797979;
  font-size: 14px;
}
footer .btm {
  padding: 25px 10px 30px;
  padding-left: 20px;
}
footer .btm h1 {
  margin-bottom: 10px;
}
footer .btm h1 a {
  font-size: 14px;
  color: #333;
}

.footer_company {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.footer_company a {
  margin: 0 5px;
}

.goUpDown {
  position: fixed;
  right: 45px;
  bottom: 3%;
  z-index: 2;
}
.goUpDown button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  margin: 10px 0;
  background: #fff;
  border: 1px solid #e2e2e2;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}

.btnCenter {
  display: inline-block;
  margin: 0 20px;
}

.divBar {
  color: #797979;
}

b {
  font-weight: bold !important;
}

.btnLogout {
  background: #fafafa !important;
  border: 1px solid #ccc !important;
}

/* 레프트메뉴 열고접기 */
/* .leftBar *,
.leftBar {
  transition-duration: 0.2s !important;
} */
.appNumberbox {
  display: flex;
  justify-content: space-between;
  padding: 0 4px;
}

.leftBar a {
  transition-duration: 0s !important;
}

.btnLeftMenu {
  margin-right: 30px;
}

.leftBar.off {
  min-width: 74px;
  max-width: 74px !important;
  overflow: hidden;
}

.leftBar.off .paddingWrap {
  padding: 0;
}
.leftBar.off .paddingWrap > * {
  max-width: 100%;
}

.leftBar.off .appNumberbox,
.leftBar.off .userLink span {
  width: 0;
  height: 0;
  display: none;
}

.leftBar.off .menulink > li.on .depth2,
.leftBar.off .userInfoList,
.leftBar.off .userLink span,
.leftBar.off .text_intro,
.leftBar.off .text_intro > * {
  width: 0 !important;
  height: 0;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  opacity: 0 !important;
  overflow: hidden;
}
/* .leftBar .appNumberbox * {
  transition-duration: 0.2s !important;
} */

.leftBar.off .menulink > li > a {
  background: none !important;
}
.leftBar.off .menulink li a {
  justify-content: center !important;
}
.leftBar.off .menulink li a::after {
  width: 0;
  height: 0;
}
.leftBar.off .btn img,
.leftBar.off .menulink > li > a .icon i {
  margin-right: 0 !important;
}
.leftBar.off .userLink {
  margin: 10px 0 !important;
}
.leftBar.off .userLink a {
  flex: 1 0 100%;
  text-align: center;
}
.leftBar.off .userLink a ~ a {
  margin-top: 5px;
}

.leftBar.off .menulink li a {
  padding: 0;
}

.leftBar.off .menulink li::after {
  display: none;
}
/* .leftBar.off .menulink * {
  font-size: 0;
} */

.leftBar.off .menulink span {
  display: none;
}

.leftBar.off .login span {
  display: none;
}

.leftBar .login {
  overflow: hidden;
}

.leftBar .login span {
  white-space: nowrap;
}