@charset "utf-8";
/* ============================================================
   메인 레이어 팝업 (PC)
   - 기존 window.open 팝업(/pop_kr, /pop2_kr)을 레이어로 대체
   - 주소창 노출 없음 / 브라우저 팝업차단 영향 없음
   ============================================================ */

#layerPopWrap {
	display: none;					/* JS가 flex로 전환 */
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 100000;
	background: none;				/* 배경 어둡게 깔지 않음 */
	pointer-events: none;			/* 팝업 바깥은 그대로 클릭 가능 */
	font-family: "Noto Sans KR", sans-serif;
	box-sizing: border-box;
	padding: 8px 20px 8px 85px;		/* 기존 팝업창 위치(왼쪽)와 맞춤 */
	/* 화면보다 팝업이 길 때 위쪽이 잘려 손댈 수 없게 되는 것을 막는다.
	   safe 를 모르는 구형 브라우저는 위 정렬로 남는다. */
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	align-items: safe center;
	-webkit-box-pack: start;
	-ms-flex-pack: start;
	justify-content: flex-start;
}

#layerPopWrap .layerPop {
	position: relative;
	z-index: 1;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	margin: 0 15px;
	background: #fff;
	/* 별도 창처럼 떠 보이도록 그림자 */
	box-shadow: 0 6px 28px rgba(0, 0, 0, .40), 0 0 0 1px rgba(0, 0, 0, .10);
	pointer-events: auto;
	color: #444040;
	text-align: left;
}

/* 제목 표시줄 --------------------------------------------- */
#layerPopWrap .pop_head {
	position: relative;
	cursor: move;					/* 잡고 끌어서 이동 */
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	height: 32px;
	line-height: 32px;
	padding: 0 44px 0 14px;
	background: #000;		/* 하단 바와 동일 색 - 창처럼 위아래로 감싸는 느낌 */
	color: #fff;
	font-size: 12px;
	font-weight: bold;
	letter-spacing: .01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#layerPopWrap .pop_x {
	position: absolute;
	top: 0;
	right: 0;
	width: 44px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 17px;
	font-weight: normal;
	color: #fff;
	text-decoration: none;
	cursor: pointer;
}

#layerPopWrap .pop_x:hover {
	background: rgba(0, 0, 0, .28);
}

/* 본문 (제목 표시줄 아래) */
#layerPopWrap .pop_body {
	position: relative;
}

/* 하단 바 ------------------------------------------------- */
#layerPopWrap .modal {
	position: absolute;
	box-sizing: border-box;
	width: 100%;
	height: 26px;
	bottom: 0;
	left: 0;
	padding: 7px 14px;
	background: #000;		/* 제목 표시줄과 동일 색 */
}

#layerPopWrap .modal .langBtn {
	height: 12px;
	font-size: 12px;
	line-height: 12px;
	color: #fefefe;
	float: left;
}

#layerPopWrap .modal .langBtn a {
	color: #fefefe;
	text-decoration: none;
	padding-right: 15px;
}

#layerPopWrap .modal .langBtn a:hover,
#layerPopWrap .modal .langBtn a.on {
	font-weight: bold;
}

#layerPopWrap .modal .close_btn {
	font-size: 11px;
	line-height: 12px;
	color: #fefefe;
	text-decoration: none;
	float: right;
}

#layerPopWrap .modal .close_btn:hover {
	font-weight: bold;
}

/* 공통 "자세히 보기" 버튼 ---------------------------------- */
#layerPopWrap .pop_btn {
	position: absolute;
	width: auto;
	min-width: 57px;
	white-space: nowrap;	/* 사이트 공통 CSS 영향으로 줄바꿈되는 것 방지 */
	bottom: 45px;
	font-size: 13px;
	font-weight: bold;
	padding: 4px 14px;
	background: #950B31;
	color: #fefefe;
	text-align: center;
	text-decoration: none;
}

/* ---------- 1번 팝업 : COLDWAYS ---------- */
#layerPopWrap #layerPop1 {
	width: 380px;
}

#layerPopWrap #layerPop1 .pop_body {
	height: 420px;			/* 운영 중인 별창 안쪽 크기와 동일 */
	overflow: hidden;
	background-image: url(/static/visuals/img/pop/coldways_popbg.jpg);
	background-size: cover;
	background-position: center top;
}

#layerPopWrap #layerPop1 .pop_inner {
	position: absolute;
	top: 20px;
	left: 25px;
	/* 폭을 제한하지 않는다. 줄바꿈은 <br> 로만 제어 (운영과 동일) */
}

#layerPopWrap #layerPop1 .pop_title {
	margin-top: 8px;
	font-size: 20px;
	font-weight: bold;
	line-height: 25px;
	color: #fff;
}

#layerPopWrap #layerPop1 .pop_cold img {
	margin-top: 10px;
	height: 50px;
}

#layerPopWrap #layerPop1 .pop_desc {
	font-size: 13px;
	line-height: 24px;
	margin-top: 35px;
	padding-top: 25px;
}

/* 언어 전환 (기본 : 한국어) */
#layerPopWrap #layerPop1 .pop_lang_en {
	display: none;
}

#layerPopWrap #layerPop1.lang-en .pop_lang_ko {
	display: none;
}

#layerPopWrap #layerPop1.lang-en div.pop_lang_en {
	display: block;
}

#layerPopWrap #layerPop1.lang-en span.pop_lang_en {
	display: inline;
}

#layerPopWrap #layerPop1 .pop_btn {
	left: 25px;
}

/* 영문일 때 - 운영 pop.css 와 동일한 수치 */
#layerPopWrap #layerPop1.lang-en .pop_inner {
	top: 13px;
}

#layerPopWrap #layerPop1.lang-en .pop_title {
	margin-top: 0;
}

#layerPopWrap #layerPop1.lang-en .pop_desc {
	font-size: 12px;
	line-height: 21px;
	margin-top: 43px;
	padding-top: 0;
}

/* ---------- 2번 팝업 : 채용 공지 ---------- */
#layerPopWrap #layerPop2 {
	width: 410px;
}

#layerPopWrap #layerPop2 .pop_body {
	height: 563px;			/* 운영 중인 별창 안쪽 크기와 동일 */
	box-sizing: border-box;
	padding-bottom: 26px;	/* 하단 바 높이 */
	background: #000;
	overflow: hidden;
	font-size: 0;
}

#layerPopWrap #layerPop2 .pop_img {
	display: block;
	width: 100%;
	height: auto;
	/* 원본 그대로. 운영 중인 별창과 똑같이 아래 빈 여백만 가려짐 */
}

#layerPopWrap #layerPop2 .pop_btn {
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	/* bottom 은 공통값 45px - 운영 별창과 동일 */
}

/* 화면이 낮은 모니터 대응 ---------------------------------
   축소하면 이미지/글씨가 뿌예지므로 최대한 100%를 유지한다.
   팝업 전체 높이 595px + 위아래 여백 16px = 611px 까지는 100%.
   (1366x768 노트북의 브라우저 안쪽 높이는 약 638px -> 100% 유지) */
@media screen and (max-height: 610px) {
	#layerPopWrap .layerPop {
		zoom: .90;
	}
}

@media screen and (max-height: 545px) {
	#layerPopWrap .layerPop {
		zoom: .78;
	}
}

/* 창 폭이 좁으면 왼쪽 팝업 하나만 보이고 나머지는 잘리므로 여백을 줄임 */
@media screen and (max-width: 1100px) {
	#layerPopWrap {
		padding-left: 20px;
	}
}