.wrap{overflow: hidden;}


/* header */
.header{ position: relative; box-shadow: 2px 0px 5px rgba(37, 39, 43, 0.2); height: 55px;  display: flex; align-items: center;  justify-content: flex-start; }
.header h1{ padding: 0 20px; font-size: 24px; letter-spacing: -1px;}
.header h1 img{ height: 50px; vertical-align: middle; }

.header .utill_wrap{margin-right: 20px;  cursor: pointer; margin-left: auto; display: flex; }
.header .utill_wrap .link_wrap{ }
.header .utill_wrap .link_wrap a{font-size: 16px;}
.header .utill_wrap .link_wrap a i {margin-top: 5px;}

.utill .name{font-size: 16px;}
.utill .name i{margin:5px 0 0 10px; font-style: normal; transition:all 1s;}
.utill.on .name i{transform: rotate(180deg);}
.utill.on + .memberMenu{display:block;}

.memberMenu{display:none; position: absolute; background:#fff; width: 300px; padding: 0 25px; box-shadow: 0px 3px 5px rgba(0,0,0,0.15); top:65px; right:5px; z-index: 50; border: 1px solid #ddd;}
.memberMenu > div{margin:20px 0; position: relative;}
.memberMenu > div .name{font-size: 18px;}
.memberMenu > div a{position: absolute; right: 0; top: 50%; transform:translateY(-50%);}
.memberMenu > p{font-size: 12px; color: #a4adb4; position: relative; padding:15px 0 5px;}
.memberMenu > p:after{content: "";  height: 1px; position: absolute; right:0; top: 23px; width: 75%; background: #d5dbe0;}
.memberMenu ul {padding-bottom: 15px;}
.memberMenu ul li {line-height: 30px;display: block; text-align: left;position: relative; }
.memberMenu ul li a{ display: block;padding:0 13px;  }
.memberMenu ul li a:hover { color: var(--subColor); }

/* nav */
.sideNav{width: 240px; background: #2A3652; transition: all 0.4s; box-shadow: 0 4px 5px rgba(37, 39, 43, 0.2); padding-top: 20px; overflow-y:auto;}
.sideNav > ul > li{position: relative;}
.sideNav > ul > li > a{line-height: 50px; color: #cbcbcb; padding:0 12px 0 20px; display: block; font-size: 15px;}
.sideNav > ul > li > a .fontIcons{vertical-align: middle; margin-right: 10px; width: 20px; height: 20px; font-size: 18px;}
.sideNav > ul > li > a .arrow{background: var(--spriteImg) no-repeat 1px 2px; text-indent: -99999px; position: absolute; width: 20px; height: 20px; right: 10px; top: 15px; filter: brightness(30); opacity: 0.5; transform: rotate(180deg); }
.sideNav > ul > li.on > a .arrow{filter: brightness(1); opacity: 1;  transform: rotate(360deg); }
.sideNav > ul > li.on > a{color: #fff; font-weight: bold }
.sideNav > ul > li.on > a .fontIcons{font-weight: normal}
.dep2Menu{display: none;}
.dep2Menu > ul{position: relative;}
.dep2Menu > ul::after{content: ""; position: absolute; width: 1px; top: 0; bottom: 0; left: 30px; background: #535a70; }
.dep2Menu > ul > li > a{line-height: 40px; padding-left: 12px; color: #989ca9; display: block; width: 60%; margin-left: 50px; border-radius: 8px;}
.dep2Menu > ul > li.on > a,
.dep2Menu > ul > li:hover > a{background: #727b97; color: #c9d8ff;}
body.navOff .sideNav{width: 80px;}
body.navOff .sideNav > ul > li > a{font-size: 0; padding:0 0 0 25px; line-height: 60px;}
body.navOff .sideNav > ul > li.on > a{background: var(--subColor);}
body.navOff .sideNav > ul > li.on > a i {color:  #fff;}
body.navOff .sideNav > ul > li > a i{font-size: 26px;}
body.navOff .sideNav > ul > li > a .arrow{display: none;}
body.navOff .dep2Menu{ width: 200px; position: absolute; left: 100%; top: 0; z-index: 10; background: #2d3650; padding: 20px 0;}
body.navOff .contentsWrap{width: calc(100% - 80px);}
body.navOff h1{width: 80px;}
body.navOff footer{left: 80px;}


.container{position: relative; display: flex;}
.contentsWrap{width: calc(100% - 240px);  position: relative; transition: all 0.4s; padding: 20px;}

/* 컨텐츠영역 */
.seachArea{background: #e7e7e7; padding: 10px; margin-bottom: 20px;}
.seachArea input, .seachArea select, .seachArea button{vertical-align: bottom;}
.contentsWrap{overflow-y: auto;}
.contentArea{display:inline-block; width:100%;}
.subTitle{margin-bottom:10px;}
.subTitle2{margin-bottom:10px; font-size: 16px; display:flex; align-items:center; justify-content:space-between;}
.contentTop{margin-top: 10px; line-height:40px;}
.contents{margin-top: 10px; overflow-y: auto;}
.contentBottom{margin-top: 10px;}
.contentTop, .contentBottom{overflow: hidden;}
.seachArea .dayWrap{display: inline-block;}
.imgWrap{width:80px; height:80px;  overflow: hidden; display:inline-block;}
.imgWrap img{width:100%; height:100%; object-fit: contain;}

.contents::-webkit-scrollbar{width: 0px; height: 6px; display:inline-block;}
.contents::-webkit-scrollbar-thumb{ width: 17%; background-color: var(--mainColor); border-radius: 10px; }
.contents::-webkit-scrollbar-track{ background-color: rgba(0,0,0,0.2);}

.multiInputBox div:not(:first-child){margin-top:10px;}

/* footer */
.footer{position: absolute; bottom: 0; left: 240px; right: 0;  text-align: left; padding: 0 30px; background: #e9e9e9; height: 50px; line-height: 50px;  transition: all 0.4s; }
.footer .topBtn{width: 50px; height: 50px; background: var(--mainColor); color: #fff; position: absolute; right: 0;  text-align: center;}
.footer .topBtn:hover{background: var(--subColor);}


/* 모달팝업 */
.modalWrap{display:none; align-items:center; justify-content:center; position:fixed; left:0; top:0; width:100%; height:100vh; background:rgba(0,0,0,0.8); z-index:999;}
.modalWrap.view{display:flex;}
.modalWrap > .imgModal{max-width:1200px; min-width:300px;position:relative;}
.modalWrap > .imgModal > .closeBtn{color:#fff; font-size:2rem; position:absolute; right:0; top: -2.5rem; cursor:pointer;}
.modalWrap > .imgModal > .imgArea{width:100%;}
.modalWrap > .imgModal > .imgArea > img{width:100%; object-fit:contain;}

.modalWrap > .modal{background:#fff; max-width:90%; max-height:90%; height:inherit;}
.modalWrap > .modal > .topArea{display:flex; align-items:center; justify-content:space-between; height:60px; padding:0 20px; border-bottom:1px solid #ddd; background:#eee;}
.modalWrap > .modal > .topArea > .tit{font-size:20px; font-weight:600;}
.modalWrap > .modal > .topArea > .popClose{color:#111; font-size:2rem; cursor:pointer;}
.modalWrap > .modal > .content{overflow-Y:auto; height:calc(100% - 240px); padding:20px;}
.modalWrap > .modal > .footArea{display:flex; align-items:center; justify-content:center; height:60px; padding:0 20px; gap:5px; border-top:1px solid #ddd; background:#eee;}
.modalWrap > .modal > .footArea > button{width:150px;}