.wrap{overflow: hidden;}


/* header */
.header{ position: relative; box-shadow: 2px 0px 5px rgba(37, 39, 43, 0.2); height: 80px;  display: flex; align-items: center;  justify-content: flex-start; min-width: 1280px; }
.header h1{ padding: 0 0 0 20px; font-size: 24px; letter-spacing: -1px; }
.header h1 img{ height: 50px; vertical-align: middle; }
.header .navBtn{width: 40px; height: 70px; border: 1px solid #ddd; border-bottom: 0;}

.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; color: #fff;}
.header .utill_wrap .link_wrap a i {margin-top: 5px;}

.topNav{margin-left: 50px;}
.topNav ul{display: flex; gap: 30px;}
.topNav ul li{}
.topNav ul li a{display: block; font-size: 16px; font-weight: 700; color: #1a1a1a; height: 55px; line-height: 55px; padding: 0 15px;}
.topNav ul li.on a{}

.header .utill{color: #1a1a1a;}
.utill .name{font-size: 16px;}
.utill .name i{font-size: 30px;}
.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: 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 20px; position: relative;}
.memberMenu > div .name{font-size: 18px;}
.memberMenu > div .mail{ }
.memberMenu > div{position: relative;}
.memberMenu > div > div{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{width: 240px; background: #222222; 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: block;}
.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; color: #989ca9; display: block; width: 70%; margin-left: 35px; padding: 0 15px; border-radius: 8px;}
.dep2Menu > ul > li.on > a{background: #727b97; color: #fff;}
.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; min-width: 1280px; }
.contentsWrap{width: calc(100% - 240px);  position: relative; transition: all 0.4s; padding: 20px;}


/* 컨텐츠영역 */
.contentsWrap{}
.contentArea{margin-top:30px;}
.contentArea h3{color:#4e4eaa}
.subTitle{margin-bottom:10px; font-size: 18px; color: #111;}
.subTitle2{margin-bottom:10px; font-size: 16px; color: #333;}
.contentTop{margin-top: 10px; display: flex; justify-content: space-between; align-items: center; }
.contents{margin-top: 10px;}
.contentBottom{margin-top: 10px;}
.contentTop, .contentBottom{overflow: hidden;}

#pageSelect{margin-left: 5px;}

.contentTop .flRight button{vertical-align: top;}
.contentArea.stopWord{padding-bottom: 0; height: calc( 100% - 40px );}

/* 검색영역 */
.seachArea{background: #f1f1f1; padding: 5px; margin-bottom: 10px; position: relative;}
.seachArea input, .seachArea select, .seachArea button{vertical-align: bottom;}
.seachArea .basicSch_box{}
.seachArea .basicSch_box .dayWrap{display: inline-block;}
.seachArea .basicSch_box + .basicSch_box{margin-top: 5px;}
.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; padding: 0;}
.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; border-top: 0; background: #fff; position: absolute; margin:10px -10px -10px -10px; z-index: 10; width: 700px;}
.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=reset],
.seachArea .detailSch_Box .writeFormSubmit button[type=button]{width: 100px; height: 40px; line-height: 40px;  }
.seachArea


/* 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);}


/* 현재페이지 경로 */
.breadCrumb{display: inline-flex; margin: 10px 0 0 10px;}
.breadCrumb > div{ display: inline-block; font-size: 12px; font-weight: 400; color: #999;}
.breadCrumb i{ font-size: 16px; margin-top: 2px; color: #999;}



.schResultBox{ border: 1px solid #3a3843; display: flex; justify-content: space-between; padding: 20px; box-sizing: border-box;}
.schResultBox > div{width: 33.33%; text-align: center; height: 100%;}
.schResultBox > div .txt{font-size: 16px; color: #fff;}
.schResultBox > div .num{font-size: 30px; color: #fff; font-weight: 900;}
.schResultBox > div:nth-child(2){border-left: 1px solid #3a3843; border-right: 1px solid #3a3843;}




/* */
.companyInfo_wrap{ display: flex; justify-content: space-between; background: #f1f1f1; padding: 20px; align-items: center;}
.companyInfo_wrap .companyInfo{display: flex; flex-wrap: wrap; flex-direction: column; gap: 8px;}
.companyInfo_wrap .companyInfo > div{display: flex; gap: 5px; align-items: flex-end;}
.companyInfo_wrap .companyInfo > .company{font-size: 16px; font-weight: 700;}
.companyInfo_wrap .companyInfo > .company > span{font-size: 14px; font-weight: 400; color: #666;}
.companyInfo_wrap .companyInfo > .name{color: #666;}
.companyInfo_wrap .contractInfo{display: flex; gap: 8px; flex-direction: column; padding-left: 20px; border-left: 1px solid #ddd; width: 250px; font-size: 12px;}
.companyInfo_wrap .contractInfo > div{display: flex; justify-content: space-between;}
.companyInfo_wrap .contractInfo > div .t{font-weight: 700;}
.companyInfo_wrap .contractInfo > div .c{color: #666;}
.companyInfo_wrap .contractInfo > div .c strong{color: #111;}
.companyInfo_wrap .contractInfo > div .c > button{ width: 20px; height: 20px;}
.companyInfo_wrap .contractInfo > div .c > button span{font-size: 18px; color: #666; }


.deliveryInfo_wrap{display: flex; background: #f1f1f1; padding: 20px; flex-wrap: wrap; border-top: 2px solid var(--subColor); gap:40px 20px;}
.deliveryInfo_wrap .deliveryInfoBox{width: calc( (100% - 20px) / 2 );}
.deliveryInfo_wrap .deliveryInfoBox .t{font-size: 14px; color: #666;}
.deliveryInfo_wrap .deliveryInfoBox .c{color: #111; margin-top: 5px; font-size: 14px; font-weight: 600;}


.deliveryState_wrap{display: flex; background: #f1f1f1; padding: 20px 50px; border-top: 2px solid var(--subColor); justify-content: space-between;}
.deliveryState_wrap > .box{text-align: center;}
.deliveryState_wrap > .box .i{}
.deliveryState_wrap > .box .i img{width: 40px;}
.deliveryState_wrap > .box .t{ margin-top: 10px; font-size: 12px;}
.deliveryState_wrap > .box.on .t{font-weight: 700;}
.delivery_list{margin-top: 20px;}
.delivery_list li{display: flex; flex-direction: column; gap: 5px;}
.delivery_list li + li{margin-top: 10px; border-top: 1px solid #ddd; padding-top: 10px;}
.delivery_list li .stateWrap{display: flex; justify-content: space-between; align-items: center;}
.delivery_list li .stateWrap .state{font-weight: 700;}
.delivery_list li .stateWrap .date{color: #666; font-size: 14px;}
.delivery_list li .area{color: #666; font-size: 14px;}