.wrap{overflow: hidden;}


/* header */
.header{ overflow: auto; min-width: 1600px; box-shadow: 2px 0px 5px rgba(37, 39, 43, 0.2); height: 55px;  display: flex; align-items: center;  justify-content: flex-start;  background: #1a1a1a;}
.header h1{display: flex; padding: 0 20px; font-size: 20px; letter-spacing: -1px; color: #fff;width: 240px;align-items: center;justify-content: space-between;}
.header h1 img{ height: 50px; vertical-align: middle; }
.header .navBtn{width: 40px; height: 70px; border: 1px solid #ddd; border-bottom: 0;}
.header .new_menu_btn{position: relative;width: 30px;height: 13px;border-radius: 13px;background: #fff;}
.header .new_menu_btn:after{content:'';position: absolute;left: 3px;top: 50%;transform: translateY(-50%);width: 9px;height:9px;border-radius: 50%;background: var(--mainColor);}
.header .new_menu_btn.on:after{left: 18px;}

.header .utill_wrap{margin-right: 20px;  cursor: pointer;display: flex; }
.header .utill_wrap .link_wrap{ }
.header .utill_wrap .link_wrap a{font-size: 16px; color: #fff;}
.header .utill_wrap .link_wrap a i {margin-top: 5px;}

.header .inner{display: flex; width: calc(100% - 240px);align-items: center;justify-content: space-between;}
.topNav{}
.topNav ul{display: flex;gap:20px;}
.topNav ul li{}
.topNav ul li a{display: block; font-size: 16px; font-weight: 700; color: #ababab; height: 55px; line-height: 55px; padding: 0 15px;}
.topNav ul li.on a{color: #fff}

.header .utill{color: #fff;}
.utill .name{font-size: 16px;}
.utill .name i{margin:5px 0 0 10px; font-style: normal;}
.utill > i{font-size: 32px;}
.utill.on .name i{transform: rotate(180deg);}
.utill.on + .memberMenu{display:block;}
.memberMenu{display:none; position: absolute; background:#fff; width: 350px; 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 10px; position: relative;}
.memberMenu > div .name{font-size: 18px;}
.memberMenu > div .mail{ }
.memberMenu > div a{position: absolute; right: 0; top: 8px;}
.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{position: fixed;left: 0;top: 55px; width: 240px;height: calc(100vh - 55px);z-index: 200; background: #383838; transition: none; box-shadow: 0 4px 5px rgba(37, 39, 43, 0.2); padding-top: 20px; overflow-y: auto}
.sideNav.on{left: -240px;}
.ready .sideNav{transition: .4s;}
.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; cursor: auto; }
.sideNav > ul > li.on > a .fontIcons{font-weight: normal}
.dep2Menu{display: ;}
.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{background: #727b97; color: #c9d8ff;}
.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; min-width: 1600px;}
.contentsWrap{width: calc(100% - 240px);  position: relative; transition: none; padding: 20px;margin-left: 240px;;}
.contentsWrap.on{width: 100%;margin-left: 0;}
.ready .contentsWrap{transition: .4s;}

/* 컨텐츠영역 */
.contentsWrap{overflow-y: auto; }
.contentArea{}
.subTitle{margin-bottom:10px;}
.subTitle2{margin-bottom:10px; font-size: 16px;}
.contentTop{margin-top: 10px;}
.contents{margin-top: 10px;}
.contentBottom{margin-top: 10px;}
.contentTop, .contentBottom{overflow: hidden;}
.seachArea .dayWrap{display: inline-block;}


/* 검색영역 */
.seachArea{background: #e7e7e7; padding: 10px; margin-bottom: 20px; position: relative;}
.seachArea input, .seachArea select, .seachArea button{vertical-align: bottom;}
.seachArea .basicSch_box{}
.seachArea .basicSch_box .dSchBtn{display: inline-block; line-height: 40px; margin-left: 15px; cursor: pointer;}
.seachArea .basicSch_box .dSchBtn button[type=button]{vertical-align: middle; width: 30px; height: 30px; border-radius: 50%; background: #f24c47; color: #fff;}
.seachArea .basicSch_box .dSchBtn button span{transition: all 0.4s;}
.seachArea .basicSch_box .dSchBtn.on button span{transform: rotate(45deg);}
.seachArea .detailSch_Box{display: none; border: 1px solid #d6d6d6; background: #fff; position: relative; margin:20px -10px -10px -10px; z-index: 10;}
.seachArea .detailSch_Box .writerow > .c{display: flex; align-items: center;}
.seachArea .detailSch_Box .writeFormSubmit{margin-top: 0; padding: 25px 0 15px;}
.seachArea .detailSch_Box .writeFormSubmit button[type=submit],
.seachArea .detailSch_Box .writeFormSubmit button[type=button]{width: 100px; height: 40px; line-height: 40px;  }



/* 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);}

/* 스크롤디자인 */
::-webkit-scrollbar{ width: 5px; height: 5px; }
::-webkit-scrollbar-thumb{ height: 17%; background-color: #131418; border-radius: 10px; }
::-webkit-scrollbar-track{ background-color: rgba(0,0,0,0); }
