@charset "utf-8";

/*
 * 상단 고정 공지 — 텍스트/이미지 작성 방식 (RQ-0003)
 *
 * HTML 직접 입력 방식으로 등록된 기존 공지는 콘텐츠가 자체 <style> 을 갖고 있으므로
 * 이 파일의 규칙이 닿지 않도록 전부 .notice-auto 하위로만 한정한다.
 *
 * fixednotice.js 가 #wrap 에 공지 높이만큼 padding-top 을 넣어주므로
 * 공지 자체는 화면 상단에 고정한다.
 */

.notice-auto {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 100;
	background: #f4f4f4;
	border-bottom: 1px solid #e0e0e0;
}

.notice-auto-inner {
	position: relative;
	max-width: 1200px;
	margin: 0 auto;
	padding: 22px 120px 22px 60px;
	min-height: 44px;
}

/* 화면에서만 숨기고 스크린리더에는 읽히도록 */
.notice-auto-blind {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- 텍스트 방식 --- */

.notice-auto-cont {
	text-align: center;
}

.notice-auto-h {
	margin: 0;
	color: #333;
	font-size: 20px;
	line-height: 1.45;
	word-break: keep-all;
	word-wrap: break-word;
}

.notice-auto-h em {
	color: #0db0ab;
	font-style: normal;
	font-weight: 700;
}

.notice-auto-desc {
	margin: 8px 0 0;
	color: #555;
	font-size: 15px;
	line-height: 1.6;
	/* 관리자가 입력한 줄바꿈을 그대로 살린다 (HTML 을 넣지 않아도 되도록) */
	white-space: pre-line;
	word-break: keep-all;
	word-wrap: break-word;
}

.notice-auto-more {
	margin: 10px 0 0;
}

.notice-auto-detail {
	display: inline-block;
	color: #b39a78;
	font-size: 14px;
	text-decoration: underline;
}

/* --- 이미지 방식 --- */

.notice-auto-image .notice-auto-inner {
	padding: 0 120px 0 0;
	max-width: none;
}

.notice-auto-link {
	display: block;
}

/*
 * 권장 규격(1440x160)을 벗어난 이미지를 올려도 공지가 화면을 덮지 않도록 높이를 제한한다.
 * 규격에 맞는 이미지는 상한에 걸리지 않으므로 원본 크기 그대로 노출된다.
 */
.notice-auto-img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 200px;
	height: auto;
	margin: 0 auto;
}

/* --- 닫기 / 오늘하루 열지않기 --- */

.notice-auto-check {
	position: absolute;
	right: 60px;
	bottom: 14px;
	margin: 0;
	font-size: 13px;
	color: #666;
	white-space: nowrap;
}

.notice-auto-check label {
	margin: 0 0 0 4px;
	font-weight: normal;
	cursor: pointer;
	vertical-align: middle;
}

.notice-auto-check input {
	vertical-align: middle;
	cursor: pointer;
}

.notice-auto-close {
	position: absolute;
	top: 10px;
	right: 16px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	line-height: 1;
}

.notice-auto-x {
	display: block;
	font-size: 30px;
	color: #555;
	line-height: 44px;
}

.notice-auto-close:hover .notice-auto-x,
.notice-auto-close:focus .notice-auto-x {
	color: #000;
}

@media (max-width: 767px) {
	.notice-auto-inner {
		padding: 16px 52px 44px 16px;
	}

	.notice-auto-image .notice-auto-inner {
		padding: 0 0 40px;
	}

	.notice-auto-img {
		max-height: 120px;
	}

	.notice-auto-h {
		font-size: 16px;
	}

	.notice-auto-desc {
		margin-top: 6px;
		font-size: 13px;
	}

	.notice-auto-detail {
		font-size: 13px;
	}

	.notice-auto-check {
		right: auto;
		left: 16px;
		bottom: 12px;
		font-size: 12px;
	}

	.notice-auto-close {
		top: 2px;
		right: 4px;
	}

	.notice-auto-x {
		font-size: 26px;
	}
}