@charset "utf-8";

/* 홈리모델링 PKG 현장관리 시스템 */

/* 공통 */
.btTxtGray { display: inline-block; overflow: hidden; height: 40px; color: #fff; font: 400 14px/40px 'Nanum Square'; text-shadow: 0 0 3px rgba(0,0,0,0.5); text-align: center; border: 1px solid rgba(204, 204, 204, 0.3); border-radius: 3px; background-color: #D9D9D9; padding: 0 15px; vertical-align: middle; }

.loginForm input:-webkit-autofill,
.loginForm input:-webkit-autofill:hover,
.loginForm input:-webkit-autofill:focus,
.loginForm input:-webkit-autofill:active { -webkit-text-fill-color: #000; -webkit-box-shadow: 0 0 0px 1000px #fff inset; box-shadow: 0 0 0px 1000px #fff inset; transition: background-color 5000s ease-in-out 0s; }
.loginForm input:autofill,
.loginForm input:autofill:hover,
.loginForm input:autofill:focus,
.loginForm input:autofill:active { -webkit-text-fill-color: #000; -webkit-box-shadow: 0 0 0px 1000px #fff inset; box-shadow: 0 0 0px 1000px #fff inset; transition: background-color 5000s ease-in-out 0s; }

section.mainPkg { display: block; overflow-y: auto; }
section.mainPkg > .wrap { display: block; }
section.mainPkg h3 { margin-top: 0; padding-top: 80px;}

.btHomeWrap { display: none; position: absolute; right:20px; top: 20px; }
.btHomeWrap .btHome { display: inline-block; width: 40px; height: 40px; background: url("/resources/img/ico_close.png") no-repeat 8px 8px; background-size: 20px 20px; box-shadow: none; }
.btHomeWrap .btHome span { overflow: hidden; position: absolute; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); }
.btHomeWrap.btHomeShow { display: block; }

section.login .loginBox .loginForm .loginInputBox span { display: none;}
.pkgSiteListMobile {display: none;}

.modalNoScroll { overflow: hidden; }
.popup .popBtnRightWrap { margin-top: 20px; padding-top: 10px; border-top: 1px solid #F5F5F5; text-align: right;}

/* 로그인 */
section.login .loginBox .loginForm .loginInputBox .pwShow,
section.login .loginBox .loginForm .loginInputBox .pwHide { display: none; }

/* 오류페이지 */
.session {background: url("/resources/img/bg_visual.jpg") no-repeat center 50%; background-size: cover; }
.session h1 { position: absolute; left: 50px; top: 50px; }
.session h2 { display: none;}
.session .warningText { padding-top: 100px; margin-bottom: 50px; background: url("/resources/img/ico_warning.png") no-repeat center 0; background-size: 80px 70px; color:#fff; font-size: 20px; line-height: 1.4;}
.session .warningText b { display: block; font-size: 28px; }

/* PKG 현장관리 */
.pkgManageWrap { display: block; padding-bottom: 50px; color:#fff; text-align: left; max-width: 768px; margin: 0 auto; }
.pkgManageWrap h4 { display: block; margin: 40px 0 20px; font-size:20px; font-weight: 100;}
.pkgManageWrap .infoBox { padding: 15px 15px; background: rgba(255, 255, 255, 0.3);}
.pkgManageWrap .infoBox .code { margin-bottom: 5px; font-size:18px; font-weight: 600;}

/* PKG 현장관리 - 현장공통 */
.pkgManageWrap .siteCommonBox { position: relative; }
.pkgManageWrap .siteCommon { width: 100%; height: 168px; } 
.swiper.swiperSiteCommon {padding:0 0; height:168px; }
.swiperSiteCommon .swiper-slide {width:120px; height:100%; }
.swiperSiteCommon .swiper-slide a{display:block; width: 120px; height: 120px; color:transparent; background: rgba(129, 129, 129, 0.4) url('/resources/img/ico_pic.png') no-repeat 50% 50%; background-size: 70%; box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.5); }
.swiperSiteCommon .swiper-slide img { width:100%; height: 100%; }
.swiperSiteCommon .swiper-button-prev,
.swiperSiteCommon .swiper-button-next {display: none;}
.swiper.swiperSiteCommon .sitePicTxt { margin-top: 10px; padding: 0 10px; text-align: center; height: 38px; overflow: hidden;  line-height: 19px; }

/* PKG 현장관리 - 공사 모니터링 */
.pkgManageWrap .siteMonitorBox { position: relative; }
.pkgManageWrap .siteMonitor { width: 100%; height: 46px; } 
.swiper.swiperSiteMonitor {padding:0 0; height:45px; border-bottom: 1px solid #4b555c; }
.swiperSiteMonitor .swiper-slide {width:auto; height:100%; }
.swiperSiteMonitor .swiper-slide .siteItem { position: relative; height: 100%; color:#fff;}
.swiperSiteMonitor .swiper-slide .siteItem a { position: relative; display: block; padding: 10px 0 0 0; height: 100%; font-size: 14px; line-height: 20px; }
.swiperSiteMonitor .swiper-slide .siteItem.active a::after {content: ""; position: absolute; left: 0; bottom: 0; z-index: 2; width: 100%; height: 2px; background: #6CB8FF; } 
.swiperSiteMonitor .swiper-slide .siteItem.empty { color:#8b8b8b; }
.swiperSiteMonitor .swiper-slide .siteItem.active { color:#6CB8FF; }
.swiperSiteMonitor .swiper-button-prev,
.swiperSiteMonitor .swiper-button-next {display: none;}

.manageContWrap .manageCont { display: none; }
.manageContWrap .manageCont.active { display: block; }
.siteManageBox { padding: 30px 0 0 0; }
.processDateBox .dateBox { position: relative; display: inline-block; margin-top: 10px; padding: 10px 40px 10px 15px; background: #D9D9D9; border-radius: 5px; }
.processDateBox .dateBox::after { position: absolute; content:''; right: 13px; top: 8px; width: 17px; height: 17px; background: url('/resources/img/ico_date_02.png') no-repeat 0 0; background-size: 100% 100%; }
.processDateBox .dateBox span { display: inline-block; color:#000; }
.processDateBox .dateBox .dateDash {padding: 0 15px;  }
.processDateBox .dateBox .dateDash img { width: 15px; height: auto; vertical-align: middle; }
.processPicBox { margin-top: 30px; }
.processPicBox ul { width: 100%; font-size: 0; }
.processPicBox ul li { display: inline-block; width: 25%; vertical-align: top;}
.processPicBox ul li .picBox { padding: 3% 5%; }
.processPicBox ul li .picBox a { position:relative; width: 100%; height: 0; padding-bottom: 100%; overflow: hidden; display: block;color: transparent; background: #fff url('/resources/img/ico_plus_02.png') no-repeat 50% 50%; background-size: 30%; box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.5);  }
.processPicBox ul li .picBox a img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* PKG 현장관리 - 피드 */
.pkgManageWrap .feedWrap { position: relative;}
.pkgManageWrap .feedWrap ul { margin-top: 30px; }
.pkgManageWrap .feedWrap ul li { margin-bottom: 30px; }
.pkgManageWrap .feedWrap ul li .info { position: relative; }
.pkgManageWrap .feedWrap ul li .time { position: absolute; right: 0; top: 0; }
.pkgManageWrap .feedWrap ul li .comment { position: relative; margin-top: 20px; padding: 16px 16px; background: #fff; color:#000; border-radius: 5px; white-space: pre-wrap; }
.pkgManageWrap .feedWrap ul li .comment::after { position: absolute; content: ''; left: 20px; top: -10px; width:0; height:0; border: 10px solid transparent; border-top-width: 0; border-bottom-color:#fff; }
.pkgManageWrap .feedWrap ul li .comment a { display: block; }
.pkgManageWrap .feedWrap ul li.feedNone { padding: 70px 0 100px; }
.pkgManageWrap .feedWrap .btnFeedWrite {position: absolute; right: 0; top: -50px; width: 26px; height: 26px; background:#1890FF url("/resources/img/ico_feed_write.png") no-repeat center center; background-size: 16px 16px; border-radius: 15px; }
.pkgManageWrap .feedWrap .btnFeedWrite span { overflow: hidden; position: absolute; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); }
.popupFeedWrite .popFeedBox { border-top: 1px solid #F5F5F5;}
.popupFeedWrite .popFeedBox .feedInfo { padding: 24px 0 10px; color: #FF1E1E;}
.popupFeedWrite .popFeedBox .feedTextarea { border: 1px solid #D9D9D9; } 
.popupFeedWrite .popFeedBox .feedTextarea textarea { width: 100%; height:100%; padding: 10px 15px; resize: auto; color:#999;}

.pkgWarningWrap { padding-top: 100px; background: url("/resources/img/ico_warning.png") no-repeat center 0; background-size: 80px 70px; text-align: center; }
.pkgWarningWrap .warningTxt02 { font-size: 20px; line-height: 1.3;}

/* PKG 현장선택 */
.siteContentMo { display: none;}
section > .wrap.pkgSiteWrap { vertical-align: top; display: block; }
.pkgSiteWrap .inner { padding-bottom: 20px;}
.siteContentMo .search { padding: 10px 10px; }
.siteContentMo .search .formBox { position: relative ; display: flex; flex-direction: row; }
.siteContentMo .search .formBox .selectArea,
.siteContentMo .search .formBox .inputArea {  height: 35px; border: 1px solid #D9D9D9; background: #fff; padding-right: 10px; border-radius: 3px; }
.siteContentMo .search .formBox .inputDateArea { padding-right: 10px; background: #fff url('/resources/img/ico_day.png') no-repeat right center / 15px 15px;}

.inputDateBox { position: relative; }
.inputDateBox label { position: absolute; left: 0; top: 0; width: 100%; height: 100%;}
.siteContentMo .search .formBox .selectArea { flex: 0 auto; margin-right: 10px; padding-right: 5px; }
.siteContentMo .search .formBox .selectArea select {  height: 33px; padding: 5px 22px 5px 5px; text-align: center; background: url('/resources/img/ico_down_02.png') no-repeat right 13px; background-size: 12px 7px; }
.siteContentMo .search .formBox .inputArea { flex: 1; }
.siteContentMo .search .formBox .inputArea span { display: inline-block;}
.siteContentMo .search .formBox .inputArea input[type="date"] { width: auto; height: 33px; border : none; box-sizing : border-box; ㅡoutline : 0; justify-content : center; position : relative; margin : 0; background: #fff; -moz-appearance : textfield; -webkit-appearance: none; }
.siteContentMo .search .formBox .inputArea input[type="date"]::before { display:none;}
.siteContentMo .search .formBox .inputArea input[type="date"]::placeholder { font-size: 12px; color:#666; }
.siteContentMo .search .formBox .inputArea input[type="date"]::-webkit-calendar-picker-indicator { background: none; bottom : 0; color : transparent; cursor : pointer; height : auto; left : 0; position  : absolute; right : 0; top : 0; width : auto;}
input[type=date]::-webkit-datetime-edit { text-align: center; width     : 100%;}

.siteContentMo .search .formBox .dateDash { display: inline-block; width: 20px; height: 33px; font-size: 0; color: transparent; padding: 0 10px; background: url('/resources/img/ico_date_arrow.png') no-repeat center center; vertical-align: top; background-size: 12px 6px; }
.siteContentMo .search .formBox02 { margin-top: 8px; }
.siteContentMo .search .formBox02 .inputArea { padding-right: 10px; }
.siteContentMo .search .formBox02 .inputArea span { display: block; height: 33px; text-align: left; padding: 3px 25px 3px 8px; background: url('/resources/img/ico_search.png') no-repeat right center; background-size: 20px 20px;}  
.siteContentMo .search .formBox02 .inputArea span input[type="text"] { width: 100%; height: 100%; background: transparent;}
.siteContentMo .search .btnBox { margin-top: 10px; text-align: right;}
.siteContentMo .search .btnBox .btFind { position: relative; right:auto; bottom: auto; width: 60px; color:#fff; background-color: #1890FF;}

.pkgSiteListMobile { position: relative; display: block; height: 100%;}
.pkgSiteListMobile ul li { padding: 0 0; background: #fff; position: relative; }
.pkgSiteListMobile ul li a { display:flex; flex-wrap: wrap; width: 100%; padding: 5px 0; border-top: 1px solid #F5F5F5;}
.pkgSiteListMobile ul li a span { display: inline-block; padding: 10px 10px; vertical-align: middle;  }
.pkgSiteListMobile ul li a span.date { width: calc(36.33% - 10px); }
.pkgSiteListMobile ul li a span.code { width: calc(42.33% - 10px); }
.pkgSiteListMobile ul li a span.customerName { width: calc(21.33% - 10px); }
.pkgSiteListMobile ul li a span.address { width: calc(75% - 10px); }
.pkgSiteListMobile ul li a span.staffName {width: calc(25% - 10px); }
.pkgSiteListMobile ul li:first-child { border-top: 0; }
.pkgSiteListMobile ul li.listNone {padding: 70px 0 30px; background: transparent; border-top: none;}
.pkgSiteListMobile ul li.listNone .warningText { padding-top: 100px; background: url("/resources/img/ico_warning.png") no-repeat center 0; background-size: 80px 70px; color:#fff; font-size: 20px; line-height: 1.4;}

/* 스켈레톤 */
.skeletonLoading { position: absolute; width: 100%; height: 100%; background: var(--bg-color);}
.skeletonImg { width: 100%; height: 100%; }
.skeletonLoading * { background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 40%, #e5e5e5 48%); background-size: 200% 100%; background-position: 100% 0;animation: load 1s infinite;}
@keyframes load {
  100% {
      background-position: -100% 0;
  }
}

/* 팝업 - 사진등록 */
article.popup .popBox { width: 100%; }
article.popupSitePic { display: block; overflow-y: auto; }
article.popupSitePic .wrap { display: block; margin: 0 auto; }
article.popupSitePic .popBox { max-width: 600px; }

.popBox .txtInfo { display: inline-block; font-size: 12px; line-height:15px; color:#FF1E1E; }
.popBox .popPicBox  { padding: 20px 0; border-top: 1px solid #F5F5F5; overflow-x: hidden; overflow-y: auto; }
.popBox .popPicBox .picEnterBox { position: relative; width: 100%; border: 1px solid #F5F5F5; background: rgba(0, 0, 0, 0.3) url('/resources/img/ico_pic.png') no-repeat 50% 50%; }
.popBox .popPicBox .picEnterBox::after {display: block;content: "";padding-bottom: 80%;}
.popBox .popPicBox .picEnterBox .btnPicEnter { position: absolute; left: 0; top: 0; right: 0; width: 100%; height: 100%; background: transparent; }
.popBox .popPicBox .picEnterBox .picSite {  position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.popBox .popPicBox .picInfoTxt { color:#000; padding: 5px 0;}

/* responsive */
@media all and (max-width: 768px) {

  html,
  body {max-width: 100%; overflow-x: hidden; }
	body { background: url('/resources/img/bg_visual.jpg') no-repeat center 50%; background-size: cover; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  section { display: block; overflow-y: auto;} 

	/* 공통 */
	section.login { background: transparent; }
	section.login h1 { top: 25px; left: 25px; }
  section.main h3 { margin-top: 0; padding-top: 80px;}

	/* 로그인 */
	section.login .loginBox { position: absolute; left: 10%; top: auto; bottom: 10%; width: 80%; }
	section.login .loginBox h2 { position:relative; width: 100%; height: auto; margin: 0 auto 5%; padding-bottom: 0; text-indent: 0; text-align: center;  background: url("/resources/img/bi_w_02.png") no-repeat center top; background-size: 20vw;}
	section.login .loginBox .loginLogo { padding-top: 26%; font-size: 7vw; line-height: 1.3; color: #fff; font-weight: normal;}
	section.login .loginBox .loginLogo strong { display:block; }
	section.login .loginBox .btLogin { padding-right: 0; }

	section.login .visual { display: none; }
	section.login .visual li { display: none;}
	
	section.login .loginBox .loginForm .loginInputBox { display: block; position: relative; margin-top: 10px; }
	section.login .loginBox .loginForm .loginInputBox .inputIconPw { background: #fff url("/resources/img/ico_lock_bk.png") no-repeat 15px 50%; background-size: 20px; }
	section.login .loginBox .loginForm input[type="text"] { border-radius: 2px; }
	section.login .loginBox .loginForm input[type="password"] { border-radius: 2px; }
	section.login .loginBox .loginForm .loginInputBox .pwShow,
	section.login .loginBox .loginForm .loginInputBox .pwHide { display: block; width: 50px; height: 100%;  position: absolute; right: 0; top: 0; background: url('/resources/img/ico_eye.png') no-repeat center center;}
	section.login .loginBox .loginForm .loginInputBox .pwShow em,
	section.login .loginBox .loginForm .loginInputBox .pwHide em { overflow: hidden; position: absolute; border: 0; width: 1px; height: 1px; clip: rect(1px, 1px, 1px, 1px); }
	section.login .loginBox .loginForm .loginInputBox .pwHide {background: url('/resources/img/ico_eye_on.png') no-repeat center center;}
	section.login .loginBox .btLogin::before {display: none; }
	
	section.login .pwBox { position: absolute; left: 10%; top: 15%; width: 80%; padding-bottom: 50px; }
	section.login .pwBox .btGo { display: inline-block; width: 100%; overflow: hidden; height: 40px; margin-top: 20%; color: #fff; font: 400 14px/40px 'Nanum Square'; text-shadow: 0 0 3px rgba(0,0,0,0.5); text-align: center; border: 1px solid rgba(0,0,0,0.3); border-radius: 3px; background-color: #0484ff; padding: 0 15px; vertical-align: middle; }
	section.login .pwBox .btGo::before,
	section.login .pwBox .btGo::after { display: none; }

	/* pkg 현장메인 */
	section.main .user { display: none;}
	.btHomeWrap, 
	.btHomeWrap.btHomeShow { display: block; }

	/* PKG 현장선택 */
	.siteContent { display: none;}
	.siteContentMo { display: block;}

  /*오류페이지 */
	section.session > .wrap { display: block; }
  .session .msgBox { padding: 45% 10% 0 10%; }
}

@media all and (max-width: 500px) {
	.popBox .txtInfo { display: block; margin-top: 10px; }
	.siteContentMo .search .formBox .inputArea input[type="date"] { font-size: 12px; }
}

@media all and (max-width: 420px) {
  .siteContentMo .search .formBox .selectArea { font-size: 12px; }
  .siteContentMo .search .formBox .selectArea select { padding-right: 17px; background-size: 10px 5px; }
	.siteContentMo .search .formBox .inputArea input[type="date"] { font-size: 12px; }
	.siteContentMo .search .formBox .dateDash { width: 10px; padding: 0 0; background-size: 8px 4px;}
}

@media all and (max-width: 400px) {
	.inner { padding: 0 15px; }
	.pkgManageWrap .feedWrap ul li .time { position: relative; }
	.processDateBox .dateBox { padding-right: 15px;}
	.processDateBox .dateBox::after { display: none; }
	.siteContentMo .search { padding: 3px 3px; }
	.siteContentMo .search .formBox .selectArea { margin-right: 5px;}
	.siteContentMo .search .formBox .inputArea { padding: 0 5px 0 5px;}
	.siteContentMo .search .formBox .inputArea { padding-left: 10px; text-align: left;}
	.siteContentMo .search .formBox02 { height: 35px;}
	.siteContentMo .search .formBox02 .selectArea select { width: 100px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
	.siteContentMo .search .formBox02 .inputArea { height: 35px;}
}

@media all and (max-width: 380px) {
	.siteContentMo .search .formBox .inputArea { padding: 0 3px 0 3px; } /* edit : 2023-07-31 */
	.siteContentMo .search .formBox .inputDateArea { padding-right: 0; background: none;}
}

@media all and (max-width: 350px) {
	.siteContentMo .search .formBox span.dateDash { display: none;}
	.siteContentMo .search .formBox02 .inputArea span { background: none; padding: 3px 3px;}
	.siteContentMo .search .formBox .inputArea { padding: 0 3px ;}
	.siteContentMo .search .formBox .inputDateArea { padding-right: 0; background: none;}
	.pkgSiteListMobile ul li a span { word-break: break-all;}
}

@media all and (max-width: 330px) {
	.siteContentMo .search .formBox .inputArea { height: 70px; text-align: center;}
	.siteContentMo .search .formBox .inputArea input[type="date"] { display: block; margin: 0 auto;}
	.siteContentMo .search .formBox02 .inputArea { height: 35px;}

}


/* 작업지시서 */
.textHidden { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: polygon(0 0, 0 0, 0 0); }
.btnSmall { display: inline-block; padding: 1px 15px 5px; border-radius: 1px; font-size: 12px; line-height: 22px; height: 22px; text-align: center; }
.btnMedium { display: inline-block; padding: 4px 15px; border-radius: 1px; font-size: 14px; line-height: 1.8; height: 32px; text-align: center; }
.btnBlue { background-color: #1890ff; color: #fff; }
.btnBlueLine { background-color: #fff; color: #1890ff; border: 1px solid #1890ff;  }
.btnRed { background-color: #ff4d4f; color: #fff; }
.btnGray { background-color: #c6c6c6; color: #fff; }
.btnGrayLine { background-color: #fff; color: #4a4a4a; border: 1px solid #4a4a4a; }
.btnGreen { background-color: #00BEB3; color: #fff; }
.btnGreenLine { background-color: #fff; color: #00BEB3; border: 1px solid #00BEB3; }
.btnGuide { position: relative; padding-left: 38px; }
.btnGuide::after { content: ""; position: absolute; left: 16px; top: 9px; width: 13px; height: 13px; background: url("/resources/images/ico_guide.png") center no-repeat; background-size: 13px 13px; }
.btnOk { position: relative; padding-left: 38px; }
.btnOk::after { content: ""; position: absolute; left: 16px; top: 10px; width: 13px; height: 13px; background: url("/resources/images/ico_check_green.png") center no-repeat; background-size: 14px 14px; }

/* 현장선택 - 메뉴선택 */
.siteMenuWrap { max-width: 768px; margin: 0 auto; }
.siteMenuWrap .menuItem { margin-top: 40px; 
	background-color: #fff; border-radius: 10px; }
.siteMenuWrap .menuItem a { max-width: 360px; margin: 0 auto; width: 100%; padding: 45px 30px; display: flex; box-sizing: border-box; -webkit-box-align: center; align-items: center; flex-direction: row; }
.siteMenuWrap .menuItem a .menuIcon { width: 50px; text-align: center; }
.siteMenuWrap .menuItem a .menuIcon img { width: 75%; height: auto;}
.siteMenuWrap .menuItem a .menuTitle { flex: 1; } 
.siteMenuWrap .menuItem a .menuTitle span { position: relative; display: inline-block;  font-size: 30px; line-height: 1.4; font-weight: 600; z-index: 1;}
.siteMenuWrap .menuItem a .menuTitle span::after { content: ""; position: absolute; height: 6px; width: 130px; background: #F9B000; z-index: -1; }
.siteMenuWrap .menuItem a .menuTitle.menuTitle01 span::after { left: 10px; bottom: 7px; width: 135px; }
.siteMenuWrap .menuItem a .menuTitle.menuTitle02 span::after { left: 10px; bottom: 7px; width: 170px; }

.pkgSiteWrap .btnPkgBack { position: absolute; right: 15px; top: 15px; display: inline-block; width: 32px; height: 32px; background: url("/resources/images/ico_arrowLeft.png") no-repeat center center; background-size: 13px 21px; }
.workOrderWrap { position: relative; width: 100%; height: auto; background: #fff; }
.workOrderWrap .btnClose { position: absolute; right: 5px; top: 14px; display: inline-block; width: 32px; height: 32px; background: url("/resources/img/ico_close_gray.png") no-repeat center center; background-size: 14px 14px;  }
.workOrderHeader { padding: 20px 20px; }
.workOrderHeader .logo { display: inline-block; width: 200px; height: 40px; background: url("/resources/img/ci03.png") no-repeat left 50%; background-size: contain;  }
.workOrderFooter { position: fixed; left: 0; right: 0; bottom: 0; height: 46px; border-top: 1px solid #f0f0f0; background-color: #fff; z-index: 5; }
.workOrderFooter .btnFooterArea {position: relative; height: 32px; padding: 7px 15px; box-sizing: content-box; }
.workOrderFooter .btnFooterArea:after { content:''; display:block; clear:both; }
.workOrderFooter .btnFooterArea .btnLeft { float: left; }
.workOrderFooter .btnFooterArea .btnRight { float: right; }
.workOrderFooter .btnFooterArea a {display: inline-block; vertical-align: top; }
.workOrderSection { width: 100%; height: 100%;}
.workOrderSection .taskWrap { width: 100%; height: calc(100% - 40px); padding-bottom: 40px; }
.workOrderSection .taskWrap .title { padding: 10px 20px; }
.workOrderSection .taskWrap .titleText { position: relative; font-size: 30px; line-height: 1.3; font-weight: 600; color: #000;  z-index: 1;}
.workOrderSection .taskWrap .titleText::after { content: ""; position: absolute; height: 7px; width: 190px; left: 0; bottom: 0; background: #1890ff; z-index: -1; }
.listLayout { padding: 20px 30px; }
.clientInfo {  padding: 10px 20px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.08); }
.clientInfo .info {text-align: left; }
.clientInfo .info .name { font-size: 20px; line-height: 1.4; color: #000; }
.clientInfo .info .code { margin-top: 5px; font-size: 15px; line-height: 1.4; color: #000; }
.clientInfo .address { margin-top: 5px; font-size: 15px; line-height: 1.4; color: #000; }
.taskList { margin-top: 30px;}
.tableTaskList { border: 1px solid #b9b9b9; border-collapse: collapse;}
.tableTaskList th { font-size: 12px; font-weight: 600; color: #000; border: 1px solid #b9b9b9; background: #f0f0f0; }
.tableTaskList td { font-size: 12px; color: #000; border: 1px solid #b9b9b9; padding: 3px 10px; height: auto; }
.tableTaskList td.taskListNone { padding: 15px 10px; }
.tableTaskList td .noComment { color: #666; }
.tableTaskList td.taskListNone .info { color: #000; font-weight: 600; }
/* 페이징 */
.pagesTask a {border: 1px solid #d9d9d9; border-radius: 2px;}
.pagesTask.pages { margin-top: 20px;}
.pagesTask.pages .pgNum,
.pagesTask.pages .btPrev,
.pagesTask.pages .btNext { width: 26px; height: 26px; line-height: 26px; border-radius: 2px; border: 1px solid #D9D9D9; }
.pagesTask.pages .btPrev i,
.pagesTask.pages .btNext i { width: 26px; height: 26px; }
.pagesTask.pages .btPrev i:before,
.pagesTask.pages .btNext i:before { width: 8px; height: 8px; border-top: 1px solid #000; border-right: 1px solid #000; margin-top: -5px; }
.pagesTask.pages .pgNum.on { border: 1px solid #1890ff; background-color: #fff; color: #1890ff; }
.pagesTask.pages .pgNum { line-height: 24px; border: 1px solid #D9D9D9; color: #808080; margin: 0 5px; font-size: 14px; font-weight: 400; }
.taskWrap .titleInquiry { padding: 15px 5px 15px 15px; box-sizing: content-box; vertical-align: 0; }
.taskWrap .titleInquiry span { position: relative; font-size: 14px; line-height: 32px; font-weight: 600; color: #000;  z-index: 1; display: inline-block; margin-right: 3px; vertical-align: top; letter-spacing: -1px; }
.taskWrap .titleInquiry span.comments a { display: inline-block; vertical-align: top; font-size: 14px; line-height: 26px; padding: 2px 0; }
.taskWrap .titleInquiry span.comments a.active { color: #1890ff; border-bottom: 1px solid #1890ff;  }
.taskWrap .titleInquiry span.comments a.textOver { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width:130px; } 
/* swiper */
.gnbWrap { border-bottom: 1px solid #f0f0f0; }
.gnbWrap .swiper { padding: 0 15px; }
.gnbWrap .swiper-slide:first-child { padding-left: 15px; }
.gnbWrap .swiper-slide { width: auto; height: 34px; padding: 4px 0 0 20px; }
.gnbWrap .swiper-slide a { display: block; height: 28px; font-size: 14px; line-height: 28px; padding-bottom: 2px; }
.gnbWrap .swiper-slide a.on { border-bottom: 2px solid #1890ff ; color: #1890ff;  }
.gnbWrap .swiper .swiper-button-next:after,
.gnbWrap .swiper .swiper-button-prev:after { font-size: 20px; }
.gnbWrap .swiper .swiper-button-prev,
.gnbWrap .swiper .swiper-rtl .swiper-button-next { left: 0; background:  rgba(255, 255, 255, 0.5); }
.gnbWrap .swiper .swiper-button-next,
.gnbWrap .swiper .swiper-rtl .swiper-button-prev { right: 5px; background:  rgba(255, 255, 255, 0.9); }
.contentsWrap { padding: 10px 10px; }
.guideWrap a { display: block; }
.guideWrap a img { width: 100%; height: auto;}
.noteListWrap { position: relative; padding: 50px 0 10px 0; height: calc(100% - 187px); }
.noteWrap { height: 100%; overflow-y: auto; padding: 0 10px 10px 10px; }
.noteList { list-style-type: none; margin: 0; padding: 0; width: 100%; }
.noteList li { padding-top: 20px; }
.noteList li:first-child { padding-top: 0; }
.noteList li .info { display: flex; justify-content: flex-start; flex-direction: row; height: 22px; margin-bottom: 16px; }
.noteList li .info .infoLeft { flex: 0 0 auto; }
.noteList li .info .infoRight { flex: 1;  text-align: right; }
.noteList li .info .infoLeft span,
.noteList li .info .infoRight span { display: inline-block; line-height: 22px; vertical-align: top; }
.noteList li .info .infoRight .name,
.noteList li .info .infoRight .dept { font-size: 14px; color: #000; }
.noteList li .info .infoRight .date { font-size: 13px; color: #707070; }
.noteList li .info .infoRight .btnNoteDel { display: inline-block; width: 22px; height: 22px; background: url("/resources/images/ico_del_gray.png") no-repeat center center; background-size: 10px 10px; }
.noteList li .commentBox { position: relative; padding: 20px 15px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.08); }
.noteList li .commentBox::after { position: absolute; top: -7px; left: 30px; content: " "; height: 0; z-index: 1; border-bottom: 7px solid; border-left: 7px solid rgba(0, 0, 0, 0); border-right: 7px solid rgba(0, 0, 0, 0); color: #1890ff; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); -ms-transform: rotate(0deg);}
.noteList li .commentBox .comment { font-size: 13px; line-height: 1.8; }
.noteList li .commentBox .file { margin-top: 10px; text-align: right; }
.noteList li .commentBox .file .fileDownload { margin-top: 5px; height: 16px; display: inline-block; font-size: 11px; line-height: 16px; padding-left: 16px; background: url("/resources/images/ico_file.png") no-repeat 0 2px; background-size: 11px 11px; text-decoration: underline; }
.noteListWrap .btnBoardEnter { position: absolute; right: 10px; top: 15px; display: block; width: 28px; height: 28px; background: #1890ff url("/resources/images/ico_write.png") no-repeat center center; background-size: 50% 50%; border-radius: 15px; }
/* 모달 */
.layerModal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1000; display: none; }
.layerModal.active {display: block;}
.dimmed { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.7); opacity: 0; } 
.dimmed.dimmedShow { opacity: 1; }
.modalWrap { display: -webkit-flex; align-items: center; flex-direction: row; justify-content: center; overflow: hidden; position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
.modal { display: -webkit-flex; flex-direction: column; background-color: #fff; border-radius: 2px; box-shadow: 0 0 30px rgba(0, 0, 0, 0.08); max-width: 80%; max-height: 80%; }
.modalAlert { display: none; padding: 30px 30px 20px 30px; }
.modalAlert .mContents { padding-bottom: 20px; font-size: 14px; line-height: 1.4; }
.modalAlert .mBtns { padding-top: 20px; text-align: center; }
.modalAlert.active { display: block; }
.modalAlert.modalLayout { padding: 0; }
.modalLayout .mHeader { position: relative; height: 60px; padding: 13px 10px 13px 20px; border-bottom: 1px solid #d9d9d9; display: flex; justify-content: flex-start; flex-direction: row; }
.modalLayout .mHeader .titleArea { flex: 1 1 auto; height: 32px; font-size: 16px; line-height: 32px; padding-right: 50px; }
.modalLayout .mHeader .btnArea { flex: 1;  text-align: right; }
.modalLayout .mHeader .btnArea a { vertical-align: top;}
.modalLayout .mHeader .btnModalClose { display: inline-block; width: 32px; height: 32px; background: url("/resources/images/ico_del_gray.png") no-repeat center center; background-size: 14px 14px;  }
.modalLayout .mHeader .titleArea .titleText { display: inline-block; height: 32px; line-height: 32px; }
.modalLayout .mHeader .titleArea .btnRegisterFile { display: inline-block; width: 24px; height: 24px; background: #1890ff url("/resources/images/ico_file_white.png") no-repeat center center; background-size: 50% 50%; border-radius: 3px; box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3); vertical-align: -5px; margin-left: 5px; }
.modalLayout .mContents { padding: 20px 20px 20px; }
.modalLayout .mTextarea { position: relative; }
.modalLayout .mTextarea textarea { width: 100%; border: 1px solid #d9d9d9; padding: 10px 10px; font-size: 16px; line-height: 1.4; color: #000; resize: both; }
.modalLayout .mTextarea .textCount {position:absolute; right:2%; bottom:3px; font-size:11px;color:#909090;}
.modalLayout .mContents .mInfoText { margin-top: 10px; }
.modalLayout .mContents .mInfoText .fontRed { color: #ff0000; }
.modalLayout .mBtns { padding: 10px 15px; }
.modalLayout .mBtns.mBtnsRight { text-align: right; }
.modalLayout .mContents .file .fileDownload { margin-top: 5px; height: 16px; display: inline-block; font-size: 11px; line-height: 16px; padding-left: 16px; background: url("/resources/images/ico_file.png") no-repeat 0 2px; background-size: 11px 11px; text-decoration: underline; }
.layerSwiperModal .modal { width: 100%; max-width: none; height: 100%; max-height: none; justify-content: center; background: transparent; }
.layerSwiperModal .btnModalSwiperClose { position: fixed; right: 10px; top: 10px; display: inline-block; width: 32px; height: 32px; background: url("/resources/img/ico_close_gray.png") no-repeat center center; background-size: 14px 14px; border: 2px solid #cecece; border-radius: 15px; z-index: 10; }
.modalOpen { position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; }
.modalSwiperWrap { position: relative; width: 100%; height: 80%; padding-top: 10%; }
.modalSwiper { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; }
.modalSwiperLayout { overflow-y: auto; }
.modalSwiperLayout .swiper { width: 100%; padding-bottom: 20px; }
.modalSwiperScroll { height: 100%; }
.swiper-slide { text-align: center; font-size: 18px; background: #fff; display: flex; justify-content: center; align-items: center; }
.swiper-slide img { display: block; width: 100%; height: 100%; }
.swiper .swiper-pagination { bottom: 0; left: calc(50% - 50px); display: inline-block; background: #000; color: #fff; width: 100px; border-radius: 5px; }
.swiper .taskImg { width: 100%; height: 100%; background-position: 50% 50%; background-repeat: no-repeat; background-size: contain; }
/* 모달 - 작업지시서 가이드 */
.layerModalGuide { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; background: #fff; z-index: 100; }
.layerModalGuide.active { display: block; }
.mGuideTitle { padding: 15px 20px; height: 52px; border-bottom: 1px solid #f0f0f0; }
.mGuideTitle .titleText { height: 22px; font-size: 16px; line-height: 22px; color: #000; }
.mGuideTitle .btnModalClose { position: absolute; right: 10px; top: 10px; display: block; width: 32px; height: 32px; background: url("/resources/images/ico_del_gray.png") no-repeat center center; background-size: 14px 14px; }
.mGuideContents { padding: 20px 20px; height: calc(100% - 53px); overflow-y: scroll; }
.mGuideContents .mGuideImage img { width: 100%; height: auto; }