@charset "UTF-8";

@import url(user.css);

:root{
	--popup-border-color:#ccc;
	--popup-border-radius:0;
	--popup-content-padding:40px;
	--popup-header-padding:15px 20px;
	--popup-pw:418px;
	--popup-sm:500px;
	--popup-md:600px;
	--popup-lg:800px;
	--popup-xlg:1360px;
	--popup-xl:1140px;
	--m-popup-width:calc(100% - 20px);
	--bg-outer:rgba(75 ,85, 99, 0.6);
}

/* 스크롤 고정 */
body.fixed{position:relative;}
/*body.fixed{position:relative;overflow-y:hidden;padding-right:15px;}
body.fixed #header{padding-right:15px;}
body.fixed #subBg{padding-right:15px;}
body.fixed #breadcrumb{padding-right:15px;}*/

/* 일반 팝업 - 기본 레이아웃 (딤 배경이 있는 기본 유형) */
.popup-outer-wrap{position:relative;}
.popup-wrap{display:none;position:fixed;top:0;left:0;z-index:1000;width:100%;height:100%;background:var(--bg-outer);overflow:auto;text-align:center;}
.popup-wrap:before{content:'';display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em;}
.popup-wrap .popup-box{display:inline-block;position:relative;width:calc(100% - 20px);max-width:var(--popup-lg);background:#fff;text-align:left;border-radius:var(--popup-border-radius);box-shadow:0px 5px 21px 6px rgba(0,0,0,0.1);vertical-align:middle;}
.popup-box .popup-header{display:flex;justify-content:space-between;align-items:center;padding:var(--popup-header-padding);background:var(--color01);}
.popup-box .popup-header h4{color:var(--white100);font-weight:500;font-size:2.8rem;}
.popup-box .popup-body{padding:var(--popup-content-padding);max-height:70vh;overflow:auto;box-sizing:border-box;}
.popup-box .popup-footer{display:flex;justify-content:center;padding:20px 40px;}

/* 일반 팝업 - 툴팁 레이아웃 (딤 배경이 없는 유형) */
.popup-wrap.tooltip{position:static;top:auto;left:auto;background:none;}
.popup-wrap.tooltip:before{display:none;}
.popup-wrap.tooltip .popup-box{position:absolute;top:100%;left:0;width:100%;max-width:var(--popup-md);z-index:500;border:1px solid #eee;border-radius:var(--popup-border-radius);box-shadow:rgba(50, 50, 105, 0.15) 0px 2px 5px 0px, rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;}
.popup-wrap.tooltip .popup-body{min-height:auto;height:auto;}

/* 일반 팝업 - 아이프레임, 레이아웃 크기별 팝업 사용자 지정 */
.popup-wrap.layer-iframe .popup-body{padding:0;overflow:unset;}

/* 일반 팝업 - 팝업 닫기 버튼(헤더) */
.btn-popup-close{display:inline-block;position:relative;width:20px;height:20px;}
.btn-popup-close:after,
.btn-popup-close:before{content:'';position:absolute;top:50%;left:50%;width:calc(100% * 1.4142);height:2px;background-color:var(--white100);transform-origin:center center;}
.btn-popup-close:after{transform:translate(-50%, -50%) rotate(-45deg);}
.btn-popup-close:before{transform:translate(-50%, -50%) rotate(45deg);}

/* 일반 팝업 - 팝업 닫기 버튼(팝업 외부) */
.popup-box > .btn-popup-close{position:absolute;top:-40px;right:0;z-index:10;}

/* 일반 팝업 - 팝업 닫기 버튼(푸터) */
.popup-footer > .btn-popup-close{padding:8px 20px;width:auto;height:auto;background:none;border:1px solid #e8ebed;background:#fff;font-size:1.6rem;line-height:2.2rem;color:#666;transition:all .2s;}
.popup-footer > .btn-popup-close:before,
.popup-footer > .btn-popup-close:after{display:none;}

/* 일반 팝업 - 팝업 닫기 버튼(흰색) */
.btn-popup-close.white:before,
.btn-popup-close.white:after{background-color:#fff;}

/* 일반 팝업 - 옵션(외부스크롤) */
.outer-scroll .popup-wrap{padding:20px;box-sizing:border-box;}
.outer-scroll .popup-wrap .popup-body{max-height:100%;height:auto;}

/* 팝업 공통 */
.popup-wrap .popup-p{font-size:1.6rem;line-height:150%;letter-spacing:-0.08rem;color:var(--color03);}
.popup-wrap .b-pw-txt{font-size:1.4rem;line-height:150%;color:var(--color13);}

/* 채용공고 > 합격자조회 */
.b-result-title{padding:0 0 2rem;font-size:2rem;line-height:2.6rem;font-weight:var(--font-weight-medium);color:var(--black01);}
.b-result-text{font-size:1.6rem;line-height:2.2rem;color:var(--black03);word-break:keep-all;}

/* 인재풀 - 대상채용공고 */
.popup-talent-notice .popup-box .popup-body{max-height:56vh;}
.popup-talent-notice .popup-footer .btn-blue{display:block;margin:2rem 0;padding:1.2rem 2rem;min-width:12rem;border-radius:0;background:var(--color01);font-size:1.6rem;font-weight:var(--font-weight-medium);line-height:150%;color:var(--white100);text-align:center;box-sizing:border-box;}

/* 채용Q&A - 비밀번호 팝업 */
.pw-popup .popup-box .popup-header{padding:9px 2rem;}
.pw-popup .popup-box .popup-header h4{font-size:2rem;}
.pw-popup .popup-box .popup-body{padding:4rem 2rem;}
.pw-popup .b-pw-box{display:flex;align-items:center;gap:8px;padding:0 0 8px;}
.pw-popup .b-popup-input{max-width:31rem;}
.pw-popup .b-popup-btn{display:block;padding:1.2rem 1.5rem;border-color:var(--color01);border-radius:0;background:var(--color01);font-weight:var(--font-weight-medium);font-size:1.6rem;text-align:center;line-height:150%;color:var(--white100);box-sizing:border-box;}

/* 이메일 인증 */
.popup-email-wrap{display:grid;gap:4rem;width:100%;}
.popup-email-wrap .popup-email-box{display:grid;gap:8px;width:100%;}
.popup-email-wrap .popup-email-tit{padding:0 0 8px;font-size:1.6rem;line-height:150%;letter-spacing:-0.08rem;color:var(--black100);}
.popup-email-wrap .popup-email-tit.center{text-align:center;}
.popup-email-wrap .popup-email-btn-box{margin-bottom:-2rem;}
.popup-email-wrap .popup-email-btn-box .b-popup-btn{width:100%;}
/* 이메일 인증 NEW */
.popup-email-wrap .p-spam-box{display:flex;justify-content:center;align-items:center;gap:2rem;}
.popup-email-wrap .p-spam-inner-box{display:grid;gap:5px;}
.popup-email-wrap .p-spam-inner-box a{display:flex;align-items:center;gap:5px;font-size:1.5rem;}
.popup-email-wrap .p-spam-inner-box a.reload:before{content:'';width:2rem;height:2rem;background:url(/_res/board/img/board/img-captcha-refresh@2x.png) no-repeat center/100%;}
.popup-email-wrap .p-spam-inner-box a.sound:before{content:'';width:2rem;height:2rem;background:url(/_res/board/img/board/img-captcha-volume@2x.png) no-repeat center/100%;}
.popup-email-wrap .popup-email-address-box p{margin-top:-2rem;padding:1.5rem 1rem;background:var(--color11);text-align:center;color:var(--color01);}

@media screen and (min-width:1201px) {
	/* 일반 팝업 - 레이어팝업 크기별 팝업 사용자 지정 */
	.popup-wrap.layer-xlarge > .popup-box{max-width:var(--popup-xlg);}
	.popup-wrap.layer-large > .popup-box{max-width:var(--popup-lg);}
	.popup-wrap.layer-middle > .popup-box{max-width:var(--popup-md);}
	.popup-wrap.layer-small > .popup-box{max-width:var(--popup-sm);}
	.popup-wrap.pw-popup > .popup-box{max-width:var(--popup-pw);}
}
@media screen and (max-width:1200px) {
	
	/* 일반 팝업 - 기본 레이아웃 (딤 배경이 있는 기본 유형) */
	.popup-wrap .popup-box{width:var(--m-popup-width);}	

	/* 일반 팝업 - 아이프레임, 레이아웃 크기별 팝업 사용자 지정 */
	.popup-wrap > .popup-box{width:var(--m-popup-width);}
	
	/* 비밀번호 팝업 - 기본 세팅 해제 */
	.popup-wrap.pw-popup > .popup-box{width:var(--popup-pw);}
  
	/* 인재풀 - 대상 채용 공고 */	
  
}
@media screen and (max-width:1024.98px) {
	:root{
		--popup-content-padding:20px;
		--popup-header-padding:15px;
	}
    /* 스크롤 고정 */
    /*body.fixed{padding:0;}
    body.fixed #subBg{padding:0;}
    body.fixed #header{padding:0;}
    body.fixed #breadcrumb{padding:0;}*/

	/* 일반 팝업 - 기본 레이아웃 (딤 배경이 있는 기본 유형) */
	.popup-box .popup-header{align-items:center;}
	.popup-box .popup-footer{padding:20px;}
	.popup-box .popup-header h4{font-size:1.8rem;}

	/* 일반 팝업 - 팝업 닫기 버튼(헤더) */
	.btn-popup-close{width:15px;height:15px;}

	/* 일반 팝업 - 팝업 닫기 버튼(푸터) */
	.popup-footer > .btn-popup-close{padding:5px 10px;font-size:1.4rem;line-height:2rem;}

	/* 일반 팝업 - 옵션(외부스크롤) */
	.outer-scroll .popup-wrap .popup-body{max-height:100%;min-height:100%;height:auto;}
	
	/* 팝업 공통 */
	.popup-wrap .popup-p{font-size:1.4rem;}
  
    /* 채용공고 > 합격자조회 */
    .b-result-title{padding:0 0 1.5rem;font-size:1.8rem;line-height:2.4rem;}
    .b-result-text{font-size:1.4rem;line-height:2rem;}
	
	/* 인재풀 - 대상 채용 공고 */	
	.popup-talent-notice .popup-footer .btn-blue{margin:0;}	
	
	/* 채용Q&A - 비밀번호 팝업 */
	.pw-popup .popup-box .popup-body{padding:2.5rem 2rem;}
	.pw-popup .popup-box .popup-header h4{font-size:1.8rem;}
	.pw-popup .b-popup-btn{padding:5px 1.5rem 6px;}
	
	/* 이메일 인증 */
	.popup-email-wrap{gap:2rem;}
	.popup-email-wrap .popup-email-btn-box{margin:0;}
    /* 이메일 인증 NEW */
    .popup-email-wrap .popup-email-address-box p{margin-top:-1rem;}
}

@media screen and (max-width:480px) {	
	/* 비밀번호 팝업 - 기본 세팅 다시 부여 */
	.popup-wrap.pw-popup > .popup-box{width:var(--m-popup-width);}
}