html {overflow:auto;height:100%; min-width:1280px;  }
body {margin:0;padding:0;font-size:0.75em; height:100%;font-family: "Pretendard", serif;   -webkit-font-smoothing: antialiased;overflow:auto; -moz-osx-font-smoothing: grayscale;  position: relative; width: 100%; min-width:1280px;margin:0 auto; background:#F3F2F0; } 
html, h1, h2, h3, h4, h5, h6, form, fieldset, img { margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family: "Pretendard", serif;  }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
legend {position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle; font-family: "Pretendard", serif;  }
input, button {margin:0;padding:0;font-size:1em;font-family: "Pretendard", serif;  ;}
button {cursor:pointer}
input[type=text], input[type=password], input[type=submit], input[type=image], button {font-size:1em; -webkit-appearance:none}
textarea, select {font-size:1em;font-family: "Pretendard", serif;  }
textarea {border-radius:0;-webkit-appearance:none;font-family: "Pretendard", serif;  ;}
select {margin:0;background:none;font-family: "Pretendard", serif;  }
p {margin:0;padding:0;word-break:break-all; font-family: "Pretendard", serif;  }
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none; font-weight:400; font-family: "Pretendard", serif;   !important;}
ul,li,dl,dt,dd {padding:0;margin:0; font-family: "Pretendard", serif;  }
ul {list-style:none}
*,:after,:before {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}
input[type="text"]:focus {outline: none;}
input[type="password"]:focus {outline: none;}
textarea:focus {outline: none;}
input[type="text"]::placeholder {color:#C8C8C8;  letter-spacing: 0px;}
input[type="password"]::placeholder {color:#C8C8C8;  letter-spacing: 0px;}
textarea::placeholder {color:#C8C8C8;  letter-spacing: 0px;}


.ft_txt {position: fixed; left:0; bottom:0; width:100%; padding:4px 8px; font-size:10.5px; background:#7E7262; color:#fff; z-index: 11 ;letter-spacing: 0.3px; font-weight:300;}

.logo {display: inline-block; float:left;width:210px; margin-left:20px; height:65px; padding:16px 0px; border-bottom:1px dashed #D4D4D4;}
.logo img {}


nav {position: fixed; left:0px; top:65px; height:calc(100vh - 86px);  width:250px; z-index: 10; transition: .5s;}
nav .txt {font-size:12px; color:#b5b5b5; padding:18px 20px 0 20px;}
nav .scroll {height:calc(100% - 97px); width:100%; overflow-x: hidden;  overflow-y: scroll; padding:0 20px; margin-top:8px;}
nav .scroll::-webkit-scrollbar {display: none;}
/*nav::-webkit-scrollbar {
    width: 6px;
 }
nav::-webkit-scrollbar-thumb {
    background-color: #eee;
    border-radius: 10px;
 }
nav::-webkit-scrollbar-track {
    background-color: #fafafa;
    border-radius: 10px;
 }*/
nav ul.menu {margin-top:0px;}
nav ul.menu li {display: inline-block; width:100%; margin-bottom:6px; position: relative;}
nav ul.menu li:first-child {margin-top:5px;}
nav ul.menu li:before {content:''; position: absolute; left:34px; top:57px; height:calc(100% - 86px); width:1px; transition: .3s;}
nav ul.menu li>a {color:#555; font-weight:500; display: inline-block; width:100%; font-size:14.5px; position: relative; padding:6px 10px 7px 10px;}
nav ul.menu li>a:after {content:url('../img/down_arrow.svg'); position: absolute; right:12px; top:8px; transform:scale(0.9); transition: .3s;}
nav ul.menu li>a img {margin:-2px 10px 0 0;width:20px;}
nav ul.menu li .s_link {padding-left:41px; max-height:0; overflow: hidden; position: relative; opacity: 0;
  transition:  max-height .8s ease, opacity .8s ease;}
nav ul.menu li.on .s_link {max-height: 300px; opacity: 1;margin-top:8px; }
nav ul.menu li.on .s_link:after {content:''; position: absolute;  top:0; width:3px; height:100%; background:#ffffff24}
nav ul.menu li .s_link a {display: inline-block; width:100%; padding:5px 0; color:#555555; font-size:14px; border-radius:6px; transition: .5s; font-size:13px; position: relative;}
nav ul.menu li .s_link a span {display: inline-block; font-size:13px; color:#ff3535; background:#ff232340; border-radius:4px; padding:3px 5px; position: relative; margin-left:2px;}
nav ul.menu li .s_link a:hover {color:#333;}

nav ul.menu li.on {margin-bottom:0px; margin-top:-15px; background:rgba(255,255,255,.05); padding:13px 15px 12px 15px; border-radius:10px; width:calc(100% + 30px); margin-left:-15px;}
nav ul.menu li.on:first-child {margin-top:-10px;}
nav ul.menu li.on:before {background:#BFBFBF;}
nav ul.menu li.on>a {color:#333; font-weight:500; background:#FCFCFC; border:1px solid #e7e7e7; border-radius:6px; padding:9px 10px 8px 10px;}
nav ul.menu li.on>a:after {transform: scale(0.9) rotate(180deg); top:10px}
nav ul.menu li .s_link a.on {color:#222; font-weight:700; }
nav ul.menu li.on .s_link a:before {content:url('../img/menu_sub.svg'); position: absolute; left:-22px; top:3px;}
nav ul.menu li .s_link a.on:after {content:url('../img/-.svg'); position: absolute; right:12px; top:0px; font-size:14px; color:#333; font-weight:600;}

nav .profile {position: absolute; left:20px; bottom:20px; width:calc(100% - 40px); background:#FCFCFC; border:1px solid #e7e7e7; border-radius:11px; padding:10px;}
nav .profile:after {content:''; clear:both; display: table;}
nav .profile .img {float:left; width:34px; height:34px; border-radius:8px; background:#525252; text-align: center; line-height:34px; font-size:14px; color:#fff; letter-spacing: -.3px;}
nav .profile .txt {float:right; width:calc(100% - 43px); position: relative; padding:0;}
nav .profile .txt p {font-size:13px; color:#555; font-weight:500; margin-top:3px;}
nav .profile .txt span {font-size:11px; color:#999; letter-spacing: -.3px; display: inline-block; width:100%; margin-top:2px; font-weight:300;}
nav .profile .txt button {position: absolute; right:-5px; top:0px; border:none; background:none; width:30px; height:30px; opacity: 1;}

nav .profile .dash_bt {width:100%; height:34px; font-size:14px; color:#3E62D5; background:#0A203C; border:none; border-radius:8px; position: relative; margin-top:13px; font-weight:500; padding-bottom:1px;}
nav .profile .dash_bt img {position: absolute; left:11px; top:9px; width:15px;}

nav .btn_box {position: absolute; left:20px; bottom:20px;  width:calc(100% - 40px); margin-top:0px;}
nav .btn_box:after {content:''; clear:both; display: table;}
nav .btn_box button {float:left; width:calc((100% - 10px) / 2); height:30px;  font-size:12px; color:#999; border:none; border-radius:6px; background:#222;}
nav .btn_box button:last-child {float:right;}
nav .btn_box button img {margin:0 3px 0 -2px;}

nav .banner {padding:12px; border-radius:14px; }
nav .banner .box {width:100%;background:url('../img/banner_img.jpg')no-repeat center; background-size:cover; height:100px; border-radius:12px; padding:0 20px; filter:grayscale(100) opacity(.9);}
nav .banner span {display: inline-block; width:100%; font-size:11px; color:#fff; margin-top:29px; font-weight:300; pacing: .3px; padding-left:1px;}
nav .banner p {font-size:17px; color:#fff; font-weight:400; margin-top:4px; letter-spacing: .5px; line-height:1.1em;}


.hd {position: absolute; right:0px; width:calc(100% - 250px); top:0; height:65px; border-bottom:1px solid #eee;background:#fff;}
.hd:after {content:''; clear:bothl; display: table;}

.hd .menu_name {display: inline-block; padding:23px 30px; font-size:13px; color:#555; font-weight:500;}
.hd .menu_name span {display: inline-block; margin-right:23px; position: relative;}
.hd .menu_name span:before {content:'/'; position: absolute; left:-14px; top:0;}
.hd .menu_name span img {width:16px; margin:-2px 3px 0 0;}
.hd .menu_name span:first-child {color:#b5b5b5; font-weight:400;}
.hd .menu_name span:first-child:before {content:none;}

.hd .right {float:right; margin-top:15px; margin-right:20px;}
.hd .right button {border:none; border-radius:10px; height:44px; padding:0 23px; background: linear-gradient(to right, #B48765, #e7ddb6); font-size:15px; color:#fff; font-weight:400; letter-spacing: .4px;}
.hd .right button img {margin:-2px 7px 0 0;}



.content {width:calc(100% - 250px); left:250px;  height:calc(100vh - 86px);  float:left; position: absolute; top:65px; transition: .3s; background:#fff; }
.content:after {content:''; clear:both; display: table; }

.bg_col { width:100vw; height:100vh; position: relative; transition: .5s;}

.bg_col.on {margin-left:-290px; width:calc(100vw + 290px);}

/* select box(.label) 옵션 리스트 공통 처리: 아래쪽에 펼칠 공간이 없을 때
   labelController.js(initSelectDropDirection)가 .select에 부여하는 dropUp 클래스를
   각 화면 CSS의 top/bottom 값보다 우선 적용해 위로 열리게 한다. */
.select.dropUp .optionList{top:auto !important; bottom:100% !important;}
.bg_col.on nav {left:-280px;}
.bg_col.on .hd .nav_close {transform: rotate(180deg); margin-left:10px;}

/* ajax로 목록을 갈아끼우는 wrapper가 끼면 .tb_scroll의 height:calc(100% - Npx)가 box1이 아닌 wrapper(auto height) 기준이 되어 스크롤이 안 걸린다.
   wrapper를 레이아웃에서 없는 것처럼 처리해 box1 기준 높이가 유지되게 한다. */
.list_wrapper {display: contents;}

/* border-collapse:collapse 상태에서는 sticky th의 아래 border가 스크롤 시 함께 따라오지 않아 inset 그림자로 대신 그린다. */
.tb_scroll table th {box-shadow: inset 0 -1px 0 #E7E7E7; border-bottom:none !important;}
.tb_scroll table tr:nth-child(2) > td {border-top:none !important;}

.select.active .optionList {box-shadow:1px 1px 6px rgba(0, 0, 0, .1);}
.select .optionItem {cursor:pointer;}
.select .optionItem:hover {background:#f6f5f3; color:#363636;}

.select .optionList, .user_result_list {scrollbar-width:none; -ms-overflow-style:none;}
.select .optionList::-webkit-scrollbar, .user_result_list::-webkit-scrollbar {display:none;}

.v_list {position:relative;}
.tb_scroll table tbody > tr:first-child > td {border-top:none !important;}