@charset "utf-8";

/* modal */
.ws-modal-open,
.ws-modal-open body {_overflow:hidden; /*사이트에 position:sticky 사용으로 인해서 overflow:hidden 사용 불가 */ }

.ws-modal-wrap {display:flex; flex-direction:column; align-items:center; justify-content:center; position:fixed; top:0; left:0; z-index:1000; width:100%; height:100%; overflow:hidden; background:rgba(0,0,0,.4); transition:.2s;}

.ws-modal-outer {position:relative; flex:0 0 auto; width:100%; max-height:100%; padding:20px; overflow:auto; -ms-overflow-style:none;/* IE and Edge */ scrollbar-width:none;/* Firefox */}
.ws-modal-outer::webkit-scrollbar {display:none;}

.ws-modal-inner {position:relative; width:100%; max-width:700px; margin:0 auto; padding:40px 20px; background:#fff; }

.modal-sm .ws-modal-inner {max-width:400px; padding:30px;}

.ws-modal-header {position:relative; border-bottom: 1px solid #121212;}
.ws-modal-header h2 {display: inline-block; padding-bottom: 20px; position: relative; font-weight: bold; font-size:20px; line-height:1.3em;}
.ws-modal-header h2::after {position: absolute; content: ''; left:0; bottom: 0; width: 100%; height: 2px; background:var(--color-1);} 
.ws-modal-header h2 .num {margin-left:4px; color:#a8a8a8; font-weight:600;}

.ws-modal-close {position:absolute; top:0; right:0; border:0; width:18px; height:18px; background:none;}
.ws-modal-close svg {display:block; width:100%; height:auto;}

.ws-modal-section {margin-bottom:30px;}
.ws-modal-section:last-child {margin-bottom:0;}

.ws-modal-section-title {position:relative; margin-bottom:12px;}
.ws-modal-section-title h3 {color:#2c2c2c; font-size:15px; line-height:1.3em;}
.ws-modal-section-title .required {color:#f84949;}

.ws-modal-textarea.input {display:block; width:100%; height:120px;}
.ws-modal-textarea.input.h200 {height:200px;}

.ws-modal-btns {display:flex; justify-content:center; gap:12px; margin-top:50px;}
.ws-modal-btns .block {width:100%;}

.ws-modal-prev-next button {display:flex; align-items:center; justify-content:center; position:absolute; top:50%; z-index:10; width:60px; height:60px; background:none; border:0; -webkit-transform:translateY(-50%); transform:translateY(-50%);}
.ws-modal-prev-next button span {display:none;}
.ws-modal-prev {left:-80px;}
.ws-modal-next {right:-80px;}

.ws-modal-input-group {display:grid; gap:8px;}
.ws-modal-input-group .btn-pack {display:block; width:100%; font-weight:700;}
.ws-modal-input-group .input {display:block; width:100%;}

.ws-modal-content {padding-top: 28px;}

/* 삭제 */
.ws-password .txt {margin-bottom:1.5rem; text-align:center; font-size:15px; font-weight:500; line-height:1.5em;}
.ws-password .input-wrap {display:flex;}
.ws-password .input-wrap .input {flex:1 1 auto; min-width:0; width:1%; border-top-right-radius:0; border-bottom-right-radius:0; border-right:0;}
.ws-password .input-wrap .btn-pack {border-top-left-radius:0; border-bottom-left-radius:0;}

/* 근로계약서 */
.modalsec h3 {font-size:clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); font-weight: 600;}
.modalsec {padding-top: clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px); color: #505050; letter-spacing: -0.5px; font-size:clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px);}
.modalsec:first-child {padding-top: 0;}
.modalsec .bold {font-weight: 600; color: #121212;}
.modalsec .tit {padding-bottom: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); font-weight: 600; }
.modalsec p {line-height: 1.6;}
.modalsec .checkitems {margin-top: 12px; text-align: right; font-weight: 600; color: #121212;}
.modalsec .date {font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); text-align: right;}
.contractbox {margin-top: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px) ; padding-top: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); border-top: 1px solid #121212;}
.contractbox .conflx {display: flex;}
.contractbox .conflx + .conflx {margin-top: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px);}
.contractbox .namebx {font-weight: 600; margin-right: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); line-height: 2em;}
.contractbox .declist {color: #505050; line-height: 2em;}
.contractbox .flx {display: flex; flex-wrap: wrap;}
.contractbox .box {flex: 1 0 50%;max-width: 50%;}
.contractbox .box.wid-100 {flex: 1 0 100%; max-width: 100%;}
.contractbox .contextbx {flex: 1 0 auto; width: 1%;}
.contractbox .font-semi {color: #121212;}
.contractbox .signname {display: inline-block; margin-right: 8px;}
.ws-modal-content .buttons {margin-top:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.contractbox .signimg {width: 200px; height: 85px;}
.contractbox .signimg img {height: 100%; object-fit: scale-down;}
.modalsec .font-16 {font-size:clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); }

/* 급여요청 */
.poopformwrap .formtt {margin-bottom: 6px; font-size: clamp(16px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600; }
.poopformwrap .formflx {display: flex; flex-wrap: wrap; justify-content: space-between;margin-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.poopformwrap .formflx:first-child {margin-top:0;}
.poopformwrap .formlist {flex: 1 0 47%; max-width: 47%;}
.poopformwrap .formlist.wid-100 {flex: 1 0 100%; max-width: 100%;}
.poopformwrap .bigarea .select {margin-right: 0; width: 100%;}
.poopformwrap .bigarea .flxWrap {align-items: center; justify-content: space-between; width: 100%;}
.poopformwrap .bigarea .flxWrap .select {width: 47%;}
.poopformwrap select,
.poopformwrap .input {border: 0; border-bottom: 1px solid #ddd; padding-left: 0 !important; width: 100%;}
.poopformwrap .sigNav {display: flex !important; justify-content: flex-end; padding-top: 15px; margin-top: 0 !important; position: initial !important; height:auto !important}
.poopformwrap .sigNav .clearButton {position: initial !important;}
.poopformwrap .sigNav .btn-again {width: clamp(140px, calc( 150 / var(--inner) * 100vw ), 150px); height: clamp(28px, calc( 32 / var(--inner) * 100vw ), 32px); font-size: clamp(11px, calc( 13 / var(--inner) * 100vw ), 13px); background-position: left clamp(12px, calc( 20 / var(--inner) * 100vw ), 20px) center;}
.poopformwrap .sigNav .btn-again span {padding-left: clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px);}
.poopformwrap .formlast {padding-top: 10px;}
.poopformwrap .formlast .bullelt {width: -webkit-fill-available;}
.poopformwrap .bigarea.account .select {display: flex; align-items: center; border-bottom: 1px solid #ddd;}
.poopformwrap .bigarea.account select ,
.poopformwrap .bigarea.account .input {border: 0 !important; color: #121212;}
.poopformwrap .bigarea.account .label {padding-right: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px); color: #878787;}
.poopformwrap .bigarea.account .account1 {width: 21%;}
.poopformwrap .bigarea.account .account2 {width: 39%;}
.poopformwrap .bigarea.account .account3 {width: 24%;}
.stemplist {display:inline-block; position:relative;z-index:1;}
.stemplist:after {position:absolute;content:'';top:50%; right:-80px;transform: translateY(-50%);background:url('/images/sub/stemp.png')no-repeat 50% 50%/contain;width:68px;height:68px;z-index:-1;}



/* 반응형 */
@media (min-width: 1024px) {
	.ws-modal-btns .btn-pack.large {height:56px; line-height:54px; font-size:17px; font-weight:700;}
	
}
@media (max-width: 1400px) {
	.ws-modal-prev {left:-60px;}
	.ws-modal-next {right:-60px;}
}

@media (max-width: 1024px) {
	#wsPhotoReview .ws-modal-inner {max-width:800px;}
	#wsPhotoReviewList .ws-modal-inner {max-width:800px;}
}

@media (max-width: 900px) {
	.ws-modal-prev-next {display:flex; justify-content:space-between; margin-top:40px;}
	.ws-modal-prev-next button {display:inline-flex; gap:8px; position:static; transform:none !important; width:auto; height:auto; padding:12px 20px; border:1px solid #ccc; border-radius:30px; color:#505050; font-size:14px; font-weight:500; line-height:1.3em;}
	.ws-modal-prev-next button svg {width:8px; height:auto; margin-top:-.1em;}
	.ws-modal-prev-next button path {fill:#505050;}
	.ws-modal-prev-next button span {display:block;}
}

@media (max-width: 640px) {	
	.ws-modal-open,
	.ws-modal-open body {overflow:hidden;}
	.ws-modal-inner {padding:20px;}
	.modal-lg .ws-modal-outer {height:100%; padding:0;}
	.modal-lg .ws-modal-inner {display:flex; flex-direction:column; border-radius:0; height:100%;}
	.modal-lg .ws-modal-content {position:relative; flex:1 1 auto; min-height:0; height:1%; overflow:auto;}
	.modal-sm .ws-modal-inner {max-width:320px; padding:20px;}
	.ws-modal-btns {margin-top:20px;}
	.ws-modal-prev-next {margin-top:20px;}
	.ws-photo-review {display:block;}
	.ws-photo-review-slider {width:100%; margin:0 0 20px;}
	.ws-photo-review-summary {display:block; width:100%;}
	.ws-photo-review-summary .review-item-cnt-info .info {margin-bottom:24px;}
	.ws-photo-review-summary .review-item-cnt-txt {max-height:none;}
	.ws-photo-review-list {max-height:none; margin-right:0; padding-right:0;}
	.ws-photo-review-list .items {grid-template-columns: repeat(4, 1fr); gap:8px;}
	.ws-modal-content {padding-top: 20px;}
	.contractbox .box {flex: 1 0 100%; max-width: 100%;}
	.conflx .flxWrap {margin-top: 10px;}
	.poopformwrap .formlist {flex: 1 0 100%; max-width: 100%;}
	.poopformwrap .formlist + .formlist {margin-top: 20px;}
	.poopformwrap .bigarea .flxWrap .select {width: 100%;}
	.formflx .dot {margin: 2px; font-size:11px;}
	.stemplist {padding:5px 0;}
	.stemplist:after {right:-50px;width:40px;height:40px;}
}