body{
    -ms-overflow-style: inherit;
    overflow: overlay;
    font-family: 'Pretendard';
    }
  *{margin: 0;padding: 0;box-sizing: border-box}
  *::before, 
  *::after{margin: 0; padding: 0;box-sizing: border-box;}
  ul, ol, li{list-style: none;}
  ul{margin: 0;padding: 0}
  a{text-decoration: none;color: #000;font-family: 'Pretendard';}
  .inner{margin: 0 auto;}
  p{margin: 0;}
input,select,textarea,button{font-family: 'Pretendard';}
button{border: 0;background-color: transparent;color: #000;font-family: 'Pretendard';}
input:focus,
select:focus,
textarea:focus{outline: none;border: 1px solid #51b9cb;}
html{height: 100%;}
body{height: 100%;}
section{display: flex;flex-wrap: wrap;width: 100%;height: 100%;}
nav{border-bottom: 1px solid #e6e6e6;width: 100%;display: flex;align-items: center;justify-content: space-between;padding: 0 20px;height: 80px;}
.logo>img{display: block;height: 50px;}
.logo>span{font-weight: 800;font-size: 20px;color: #333;}
.adm-info{display: flex;align-items: center;}
.adm-info>p{margin-right: 15px;}
.adm-info>p>span{font-weight: bold;}
.adm-info>a{font-size: 14px;display: flex;align-items: center;justify-content: center;width: 80px;border-radius: 100px;border: 1px solid #f7f7f7;height: 32px;font-weight: bold;background-color: #f7f7f7;color: #333;transition: 0.3s;}
.adm-info>a:hover{border-color: #51b9cb;background-color: #51b9cb;color: #fff;}

.left-menu{width: 280px;height: calc(100% - 80px);background-color: #fff;border-right: 1px solid #e6e6e6;}
.main-area{height: calc(100% - 80px);width: calc(100% - 280px);overflow-y: auto;background-color: #f7f7f7;padding: 20px;}
.left-menu>button{height: 50px;display: flex;align-items: center;font-size: 16px;font-weight: bold;border-bottom: 1px solid #e6e6e6;width: 100%;cursor: pointer;;transition: 0.3s;}
.left-menu>button>i{height: 50px;width: 50px;display: flex;align-items: center;justify-content: center;;font-size: 20px;color: #51b9cb;transition: 0.3s;min-width: 50px;}
.left-menu>button:hover{background-color: #51b9cb;color: #fff;border-bottom: 1px solid #b9e3ea;}
.left-menu>button:hover>i{color: #fff;}
.left-menu>button.on{background-color: #51b9cb;color: #fff;border-bottom: 1px solid #b9e3ea;}
.left-menu>button.on>i{color: #fff;}
.sub-menu{background-color: #51b9cb;transition: 0.3s;}

.sub-wrap{overflow: hidden;}
.sub-wrap>a{display: flex;align-items: center;height: 50px;padding-left: 40px;color: #fff;font-weight: bold;font-size: 14px;overflow: hidden;height: 0px;transition: 0.3s;position: relative;}

.sub-menu.on .sub-wrap>a{height: 50px;}
.sub-wrap>a::after{width: 15px;height: 1px;display: block;content: '';background-color: rgba(255, 255, 255, 0.6);position: absolute;left: 20px;top: 50%;transform: translateY(-50%);}
.sub-wrap>a::before{width: 1px;height: 100%;left: 20px;top: 0;background-color: rgba(255, 255, 255, 0.6);display: block;content: '';position: absolute;}
.sub-wrap>a:last-of-type::before{height: 50%;}
.sub-wrap>a:hover{background-color: rgba(255, 255, 255, 0.2);padding-left: 45px;}

.board{padding: 20px;background-color: #fff;box-shadow: 1px 1px 5px rgba(153, 153, 153, 0.3);border-radius: 20px;}
.table-board{overflow-y: auto;}
.board-title{font-size: 18px;font-weight: bold;margin-bottom: 5px;}
.board-title-sub{font-size: 14px;margin-bottom: 20px;display: block;color: #999;}
.table{min-width: 1200px;}
.t-title>ul{display: flex;border-top: 1px solid #e6e6e6;background-color: #f4fcfd;border-bottom: 1px solid #e6e6e6;}
.t-title>ul>li{width: 100%;display: flex;align-items: center;justify-content: center;min-height: 50px;font-size: 16px;font-weight: bold;position: relative;}
.t-title>ul>li::after{display: block;content: '';top: 50%;transform: translateY(-50%);right: 0;height: 16px;width: 1px;background-color: #e6e6e6;position: absolute;}
.t-title>ul>li:last-of-type::after{display: none;}
.t-index>ul{display: flex;border: 1px solid transparent;border-bottom: 1px solid #e6e6e6;cursor: pointer;transition: 0.3s;}
.t-index>ul:hover{border-color: #51b9cb;background-color: #f7f7f7;transform: scale(0.99);}
.t-index>ul>li{min-height: 50px;width: 100%;display: flex;align-items: center;justify-content: center;padding: 0 5px;}

.breadcrumb{display: flex;align-items: center;font-size: 16px;width: 100%;margin-bottom: 20px;}
.breadcrumb>i{font-size: 14px;margin: 0 10px;color: #999;}
.breadcrumb>p{color: #666;display: flex;align-items: center;}
.breadcrumb>p>i{font-size: 14px;margin-right: 5px;}
.breadcrumb>strong{color: #333;}
.float-btn{position: fixed;width: calc(100% - 280px);padding: 20px;right: 0;bottom: 0;background-color: #fff;border-top: 1px solid #e6e6e6;display: flex;align-items: center;justify-content: center;}
.float-btn>button{display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 10px;border: 1px solid #e6e6e6;font-size: 16px;cursor: pointer;transition: 0.3s;margin-right: 10px;}
.float-btn>button:last-of-type{margin-right: 0;}
.float-btn>button.on{font-weight: bold;;}
.float-btn>button:hover{background-color: #f4fcfd;color: #51b9cb;border-color: #51b9cb;}
.float-btn>button.on{font-weight: 800;background-color: #f4fcfd;border-color: #51b9cb;color: #51b9cb;}
.float-btn>button:focus{transform: scale(0.9);}
.float-padding{padding-bottom: 100px !important;}
.user-img{width: 50px;height: 50px;border-radius: 100%;overflow: hidden;margin: 10px 0;}
.user-img>img{display: block;width: 100%;height: 100%;object-fit: cover;}
.search-item{margin-bottom: 20px;position: relative;display: flex;justify-content: right;}
.search-item>button{position: absolute;right: 2px;top: 50%;transform: translateY(-50%);font-size: 18px;cursor: pointer;width: 37px;height: 37px;transition: 0.3s;border-radius: 100%;border: 1px solid transparent;}
.search-item>button:hover{color: #51b9cb;background-color: #f4fcfd;}
.search-item>input{width: 0;height: 40px;border-radius: 100px;border: 1px solid transparent;transition: 0.3s;padding-left: 15px;font-size: 16px;}
.search-item>input:focus{width: 320px;border-color: #51b9cb;}
.user-info-warp{display: flex;flex-wrap: wrap;}
.ui-item{width: 25%;padding: 20px;padding-left: 0;}
.ui-item>p{font-size: 14px;color: #999;margin-bottom: 2.5px;}
.ui-item>span{font-weight: bold;color: #000;}
.ui-gutter{width: 100%;margin: 30px 0;font-size: 16px;font-weight: bold;display: block;position: relative;height: 1px;background-color: #e6e6e6;}
.ui-gutter>span{position: absolute;left: 0;top: 50%;transform: translateY(-50%);background-color: #fff;padding-right: 10px;color: #666;}
.adress>p{font-size: 14px;font-weight: bold;margin-bottom: 2.5px;color: #666;}
.adress>span{font-size: 16px;display: block;margin-bottom: 5px;font-weight: bold;}







/* 컬러표 */
/* #51b9cb 포인트 컬러 */
#381e1f
ffda00
카카오
#2db400
네이버
/* #f4fcfd 박스 컬러 */
/* #fff 백그라운드 컬러 */