@charset "utf-8";
/* common css */

@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

/************ COMMON ************/

*, *::before, *::after {box-sizing: border-box; margin: 0; padding: 0;}
*, :after, :before {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}
body {
  margin: 0px; padding: 0px;
  background: #FAF4ED;
  color: #27273E;
  font: 300 16px 'Paperlogy', sans-serif;
  background-image: url(../img/bg-grid.png);
  background-repeat: repeat;
  background-size: 300px 300px;
}
header, section, article, nav, aside, footer {display: block;}
header:after, section:after, article:after, nav:after, aside:after, footer:after {content:""; display: block; clear:both;}
ul, ol, li, dl, dt, dd {margin: 0; padding: 0; list-style: none; font-size: 0;}
h1, h2, h3, h4, h5, h6, p {margin: 0;}
a {text-decoration: none; color: #333333;}
p {color: #27273E; font-size: 0.85rem;}
table {width: 100%; border-collapse: collapse;}
div[class*="form"] {font-size: 1rem;}
input {font-size: 1rem;}
fieldset {border: 0;}
input[type=text],input[type=password], textarea {
  -webkit-transition:all 0.30s ease-in-out;
  -moz-transition:all 0.30s ease-in-out;
  -ms-transition:all 0.30s ease-in-out;
  -o-transition:all 0.30s ease-in-out;
  outline:none;
}
.clear {clear: both;}
.frame {margin: 0 auto; font-size: 0;}

@media screen and (min-width: 768px) {
  .frame {width: calc(100% - 10rem);}
}

@media screen and (min-width: 1024px) {
}

@media screen and (min-width: 1440px) {
  .frame {max-width: 80rem;}
}

/* overflow 스크롤 영역 */
[class$="table"] {overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;}
[class$="table"]::-webkit-scrollbar {display: none;}


:root {
  --primary: #052488;
  --primary-dark: #051a35;
  --primary-light: #EEF3FB;
  --accent: #E8A020;
  --danger: #D94040;
  --bg: #F4F6FA;
  --surface: #FFFFFF;
  --border: #DDE3EE;
  --text: #1C2438;
  --text-sub: #5A6480;
  --text-light: #9BA3BA;
  --radius: 8px;
}

/*
0.75rem = 12px
1rem = 16px
1.25rem = 20px
1.5rem = 24px

2rem = 32px
2.5rem = 40px
3rem = 48px
*/


[class^="dnTo"] {display: none;}
[class^="dbTo"] {display: block;}

@media screen and (min-width: 425px) {
  .dbToDn_425 {display: none;}
}

@media screen and (min-width: 768px) {
  .dbToDn_768 {display: none;}
  .dnToDb_768 {display: block;}
  .dnToDib_768 {display: inline-block;}
}

@media screen and (min-width: 1024px) {
  .dbToDn_1024 {display: none;}
  .dnToDb_1024 {display: block;}
  .dnToDib_1024 {display: inline-block;}
}

@media screen and (min-width: 1440px) {
  .dbToNo_1440 {display: none;}  
  .dnToBl_1440 {display: block;}
  .dnToDib_1440 {display: inline-block}
}

/* ADMIN NAV */
.admin-nav {
  position: fixed;
  top: 0; left: 0;
  width: 100px; height: 100%;
  display: block;
  padding: 20px 0;
  background-color: var(--primary-dark);
  overflow: auto;
  z-index: 1000;
}

@media screen and (min-width: 768px) {
  .admin-nav {width: 140px;}
}

@media screen and (min-width: 1024px) {
  .admin-nav {width: 160px;}
}



.nav-logo {
  display: block;
  padding: 0 20px 20px;
  font-size: 18px; font-weight: 700;
  color: var(--surface);
}
.nav-menu {display: block; padding: 0;}
.nav-item {display: block;}
.nav-item>a,
.nav-item>span {
  display: block;
  padding: 12px 20px;
  font-size: 13.5px; font-weight: 500;
  color: var(--surface);
  cursor: pointer;
  transition: background 0.2s;
}

.nav-item>a:hover,
.nav-item>span:hover {background: var(--primary-dark);}
.nav-item.active>a {font-weight: 700; background: var(--primary-dark);}



.sub-menu {
  display: none;
  padding: 6px 0;
  background: rgba(0, 0, 0, 0.08);
}
.sub-menu li a {
  display: block;
  padding: 10px 30px;
  font-size: 13px;
  color: #E3E8F5;
}
  .sub-menu li a:hover {background: rgba(0, 0, 0, 0.15);}
.nav-item.has-sub.active .sub-menu {display: block;}








/* Page Top Header */
.page-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px; padding: 0 0 20px;
  border-bottom: 2px solid var(--border);
}
.page-top h1,
.form-top h1 {
  font-size: 20px; font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.4px;
}
.page-top .total-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px; font-weight: 700;
  color: var(--surface); background: var(--primary);
}

.form-top {
  overflow: auto; -ms-overflow-style: none;
  scrollbar-width: none;

  display: flex; flex-direction: column;
  justify-content: space-between; align-items: flex-start;
}
.form-top h1 {padding-left: 16px; padding-bottom: 16px;}


@media screen and (min-width: 768px) {
  .form-top {flex-direction: row;}
}




/* Section Block */
.section-block {margin: 0 0 40px;}
.section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.section-header h2 {
  font-size: 15px; font-weight: 700;
  color: var(--primary);
  letter-spacing: -0.2px;
  white-space: nowrap;
}
.section-header .line {
  flex: 1;
  height: 1px;
  background: var(--border);
}



/* Toolbar */
.toolbar {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: space-between;
  gap: 8px;
  padding: 12px 14px; margin: 0 0 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface);
}

.btn-register {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 16px;
  border: none; border-radius: var(--radius);
  font-size: 13.5px; font-weight: 700;
  font-family: inherit;
  color: var(--surface); background: var(--primary);
  cursor: pointer;
  transition: background 0.18s;
  white-space: nowrap;
}
  .btn-register:hover {background: var(--primary-dark);}



.divider-v {
  width: 1px; height: 26px;
  margin: 0 2px;
  background: var(--border);
}
.search-area {
  display: flex;
  flex: 1; flex-wrap: wrap;
  align-items: center; justify-content: flex-start;
  gap: 8px;
}
.search-group {
  display: flex;
  align-items: center;
  gap: 6px;
}
.search-group label {
  font-size: 12.5px; font-weight: 500;
  color: var(--text-sub);
  white-space: nowrap;
}
.search-group input,
.search-group select {
  width: 124px; height: 36px;
  padding: 0 10px;
  border: 1px solid var(--border); border-radius: 6px;
  font-size: 13px; font-family: inherit;
  color: var(--text); background: var(--bg);
  transition: border-color 0.15s;
  outline: none;
}
  .search-group input:focus {border-color: var(--primary); background: var(--surface);}
  .search-group input::placeholder {color: var(--text-light);}

  .search-group input#searchManager {width: 88px;}


@media screen and (min-width: 1024px) {
  .search-area {justify-content: flex-end;}
  
  .search-group input,
  .search-group select {width: 100px;}
}

@media screen and (min-width: 1440px) {
  .search-area {justify-content: flex-end;}
  .search-group input {width: -webkit-fill-available;}
}



.btn-search {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 0 14px;
  border: none; border-radius: 6px;
  font-size: 13px; font-weight: 700;
  font-family: inherit;
  color: var(--surface); background: var(--accent);
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
}
  .btn-search:hover {opacity: 0.88;}



/* Result Info */
.result-info {
  display: flex;
  justify-content: flex-end; align-items: center;
  margin: 0 12px 8px 0;
  font-size: 12.5px;
  color: var(--text-sub);
}
.result-info strong {color: var(--primary); font-weight: 700;}
.hightLight {
  display: inline;
  box-shadow: inset 0 -25px 0 #f8c5c5;
  font-weight: 600;
}

/************ Logo Hover Property ************/

a:hover,
a:focus {
  text-decoration: none;
  border-left: 0px solid #F7F7F7;
}

nav {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

nav ul, nav li {
  outline: 0;
  margin: 0; padding: 0;
  text-transform: uppercase;
}

/************ ScrolBar ************/
.scrollbar {
  width: 100%;
  overflow-y: hidden; overflow-x: hidden;
}

.scrollbar:hover {overflow-y: scroll;}

/************ Scrollbar Style ************/

#style-1::-webkit-scrollbar-track {border-radius: 2px;}
#style-1::-webkit-scrollbar {
  width: 4px;
  background-color: #F7F7F7;
}

#style-1::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
  background-color: #BFBFBF;
}

.no-touch .scrollable.hover {overflow-y: hidden;}
.no-touch .scrollable.hover:hover {overflow-y: auto; overflow: visible;}

/************ Scrollbar End ************/

.main-menu {
  display: flex; flex-direction: column;
  position: fixed; top: 1vh; bottom: 0; left: 0;
  width: 56px; height: 96vh;
  padding-top: 4vh;
  border-radius: 0 24px 24px 0;
  /* background: #ffffff; */
  background: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.75));
  box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07);
  transition: width .2s linear;
  -webkit-transition: width .2s linear;
  -webkit-transform: translateZ(0) scale(1, 1);
  opacity: 1; overflow: hidden;
  z-index: 9999;
}
.main-menu:hover,
.main-menu.expanded {
  width: 164px;
  opacity: 1;
  background: linear-gradient(rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 1));
}

.main-menu ul {padding: 4px;}
.main-menu ul li {
  display: flex;
  width: 140px;
  margin: 8px;
  border-radius: 50px;
  align-items: center;
}
.main-menu ul li.expanded {background-color: rgba(255,255,255,0.95);}
.main-menu ul li.expanded > a {
  padding: 0 6px;
  font-weight: 600;
  color: #000;
}


.main-menu ul li > a {
  display: flex; align-items: center;
  width: 100%;
  border-radius: 50px;
  font: 400 14px 'SUIT Variable', sans-serif;
  color: rgba(111, 103, 103, 0.85); letter-spacing: 0.3px;
  transition: all .14s linear;
  -webkit-transition: all .14s linear;
  -webkit-transform: translateZ(0) scale(1, 1);
  text-decoration: none;
}
.main-menu ul li:hover > a {padding: 0 6px;}
.nav-text {padding-left: 12px;}
.main-menu ul li.expanded > a > .nav-text {padding-left: 2px;}
.main-menu ul li:hover > a > .nav-text {padding-left: 2px;}


.fa-lg {font-size: 1rem;}

.squareBtn {
  width: 32px;
  padding: 8px;
  border-radius: 8px;
  line-height: 1 !important;
  text-align: center;
  font-size: 14px !important; color: #6F6767;
  background: linear-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.85));
  box-shadow: 2px 2px 5px #d9d9d9, -2px -2px 5px var(--surface);
}
li:hover .squareBtn {box-shadow: none; background: none;}

.logo {display: block; padding: 8px 0;}
.logo > img {display: block; width: 40px; margin: 4px auto;}

.topBtn{
  margin: 8px;
  font-weight: 300;
  text-align: center;
  color: #6F6767;
}
.topBtn:hover {font-weight: 500; color: #000;}


/************ Darker & lighter element side menu Start ************/


li.lighterli:hover,
li.lighterli:hover .squareBtn {background-color: rgba(245, 245, 247);}
li.darkerli:hover,
li.darkerli:hover .squareBtn {background: rgba(255, 255, 255, 0.85);}

ul[class^="darkerli"],
li[class^="darkerli"] {background-color: rgba(245, 245, 247, 247);}


.darkerlishadow {border-bottom: solid 1px var(--surface);}
.darkerlishadowdown {}



.salebox {display: inline-block; padding-left: 12px;}
.saleLink{display: inline-block;}
.menuImg {
  display: inline-block;
  width: 28px; height: 28px;
  margin-right: 8px;
  border-radius: 8px;
  box-shadow: 2px 4px 6px -3px rgba(50, 50, 50, 0.55);
  -webkit-box-shadow: 2px 4px 6px -3px rgba(50, 50, 50, 0.55);
  -moz-box-shadow: 2px 4px 6px -3px rgba(50, 50, 50, 0.55);
}

.menuImg:hover {
  box-shadow: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
}