@charset "UTF-8";

/* ============================================================
   개인정보 보호 (pageCode=28)
   Canvas: 1100×1800px | AWC: awc/28/P/0/
   Prefix: pp-
   Sections: 1(375) + 2(582) + 3(281) + 4(348) + 5(214) = 1800px
============================================================ */

/* ── Container ── */
.pp-container {
	margin: 0 auto;
	box-sizing: border-box;
	position: relative;
}

/* ============================================================
   Section 1 — Hero  (canvas 0~375px)
============================================================ */
.pp-section1 {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40px 20px 30px;
	background-image: url('../../images/maintenance/privacy/boxBG_25190.png');
	background-repeat: no-repeat;
	background-size: 1040px auto;
	background-position: center bottom;
}

.pp-hero-content {
	position: relative;
	display: flex;
	align-items: center;
	gap: 40px;
	width: 100%;
	max-width: 100%;
}

.pp-logo-wrap {
	position: relative;
	flex-shrink: 0;
}

.pp-logo-img {
	position: relative;
	width: 232px;
	height: auto;
	display: block;
}

/* Hero text group: top:64, left:300, 742px, flex-column */
.pp-hero-text-group {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

/* Big title: 40px/600/#005728 */
.pp-big-title {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: clamp(28px, 4.5vw, 40px);
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #005728;
	margin: 0;
	padding: 0;
}

/* Sub label: 18px/500/#333, margin-top to reproduce gap (128-64=64, title line ~64px → ~0) */
.pp-sub-label {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #333333;
	margin: 0;
	padding: 0;
}

/* Desc: 16px/400/#333 */
.pp-desc {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -1px;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.4;
	color: #333333;
	margin: 0;
	padding: 0;
}

.pp-section2,
.pp-section3,
.pp-section4,
.pp-section5 {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	margin-top: 20px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.pp-title {
	position: relative;
	display: flex;
	align-items: center;
	margin-top: 40px;
	margin-bottom: 20px;
	width: 100%;
	justify-content: flex-start;
}

.pp-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #555662;
	flex-shrink: 0;
	margin-right: 11px;
}

.pp-heading {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: clamp(20px, 3vw, 24px);
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.4;
	color: #333333;
	margin: 0;
}

.pp-gray-box {
	width: 100%;
	height: auto;
	background-color: #F6F6F6;
	border: 1px solid #D9D9D9;
	padding: 25px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.pp-panel-group {
	display: flex;
	gap: 20px;
	margin-top: 10px;
	width: 100%;
}

.pp-panel {
	flex: 1;
	height: 370px;
	background-color: #FFFFFF;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	border: 1px solid #D9D9D9;
}

.pp-left-panel {
	background-image: url('../../images/maintenance/privacy/boxBG_25199.png');
}

.pp-right-panel {
	background-image: url('../../images/maintenance/privacy/boxBG_25201.png');
}

/* Body3: inside gray-box3 */
.pp-body3 {
	width: 100%;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.5;
	color: #333333;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pp-body3 li {
	display: flex;
	align-items: flex-start;
}

.pp-body3 li::before {
	content: "-";
	flex-shrink: 0;
	margin-right: 8px;
}

/* Note3 (red) */
.pp-note3 {
	width: 100%;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.5;
	color: #C32323;
	margin: 8px 0 0 0;
	padding: 0;
}

/* Section 4 */
.pp-table-wrap {
	width: 100%;
	overflow-x: auto;
}

.pp-table {
	border-collapse: collapse;
	width: 100%;
	border: 1px solid #BEBEBE;
	text-align: center;
}

.pp-table td {
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 15px;
	line-height: 1.5;
	padding: 12px 10px 10px 12px;
	border: 1px solid #BEBEBE;
}

.pp-table .pp-th {
	background-color: #515151;
	color: #ffffff;
	font-weight: bold;
	text-align: center;
}

.pp-table .pp-td-label {
	color: #333333;
	font-weight: bold;
	text-align: center;
	width: 20%;
}

.pp-table .pp-td-red {
	color: #c62223;
	font-weight: bold;
	text-align: center;
	width: 40%;
}

.pp-table .pp-td-note {
	color: #333333;
	text-align: left;
}

/* Note list inside pp-td-note */
.pp-note-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pp-note-list li {
	display: flex;
	align-items: flex-start;
}

.pp-note-list li::before {
	content: "·";
	flex-shrink: 0;
	margin-right: 8px;
}



/* Body5: inside gray-box5, relative */
.pp-body5 {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: -1px;
	line-height: 1.5;
	color: #333333;
	margin: 0;
	padding: 0;
}

.pp-body5 p {
	margin: 0 0 4px 0;
}

.pp-body5 ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.pp-body5 ul li {
	display: flex;
	align-items: flex-start;
}

.pp-body5 ul li::before {
	content: "-";
	flex-shrink: 0;
	margin-right: 8px;
}

/* ==============================================
   Responsive — 1100px
   ============================================== */
@media screen and (max-width: 1100px) {
	.pp-big-title {
		font-size: 34px;
	}

	.pp-heading {
		font-size: 22px;
	}

	.pp-hero-content {
		gap: 30px;
	}

	.pp-logo-img {
		width: 200px;
	}

	.pp-panel-group {
		display: none;
	}
}

/* ==============================================
   Responsive — 800px
   ============================================== */
@media (max-width: 800px) {
	.pp-section1 {
		flex-direction: column;
		height: auto;
		padding: 40px 0;
		text-align: left;
		background-image: none !important;
	}

	.pp-hero-content {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.pp-logo-wrap {
		display: none;
	}

	.pp-hero-text-group {
		width: 100%;
		align-items: flex-start;
		padding: 0 20px;
		box-sizing: border-box;
	}

	.pp-big-title {
		font-size: 28px;
	}

	.pp-sub-label {
		font-size: 16px;
	}

	.pp-desc {
		font-size: 14px;
	}

	.pp-title {
		width: 100%;
		max-width: 100%;
		padding: 0 20px;
		margin-top: 0;
		box-sizing: border-box;
	}

	.pp-heading {
		font-size: 20px;
	}

	.pp-gray-box {
		padding: 20px;
	}

	.pp-body3,
	.pp-note3,
	.pp-body5 {
		font-size: 14px;
	}

	.pp-table-wrap {
		overflow-x: auto;
	}

	.pp-table th,
	.pp-table td {
		font-size: 13px;
		padding: 8px 5px;
	}
}