@charset "UTF-8";

/* ============================================================
   CCS 유지보수 (pageCode=24)
   Canvas: 1100×950px | AWC: awc/24/P/0/
   Prefix: cm-
   Single section, all elements at canvas coordinates (left - 30)
============================================================ */

/* ── Container ── */
.cm-container {
	margin: 0 auto;
	box-sizing: border-box;
	position: relative;
}

/* ============================================================
   Section 1 — Full Page  (canvas 0~950px)
============================================================ */
.cm-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 0;
	background-image: url('../../images/maintenance/ccs-maintenance/boxBG_33719.png');
	background-repeat: no-repeat;
	background-size: 1040px auto;
	background-position: center bottom;
}

.cm-hero-content {
	position: relative;
	display: flex;
	align-items: center;
	gap: 40px;
	width: 1038px;
	max-width: 100%;
}

.cm-logo-wrap {
	position: relative;
	flex-shrink: 0;
}

.cm-logo-img {
	position: relative;
	width: 316px;
	height: auto;
	display: block;
}

/* Script "CCS": top:122, left:31→1, 90×69 */
.cm-ccs-script {
	position: absolute;
	top: 122px;
	left: 1px;
	width: 90px;
	height: 69px;
	font-family: 'Nanum Brush Script', cursive;
	font-size: 40px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1;
	color: #FFFFFF;
	text-align: center;
	text-shadow: 0 0 5px #E1692A;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

/* Hero text group: top:46, left:367, 685px, flex-column */
.cm-hero-text-group {
	position: relative;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}

/* Big title: 28px/600/-1px/#005728 */
.cm-big-title {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: clamp(20px, 3.5vw, 28px);
	font-weight: 600;
	letter-spacing: -1px;
	line-height: 1.6;
	color: #005728;
	margin: 0;
	padding: 0;
}

.cm-big-title .cm-ccs {
	font-size: clamp(32px, 5vw, 50px);
}

/* "CCS는" label: 18px/500/-1px/#333 */
.cm-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;
}

/* Sub text: 16px/400/-1px/#333 */
.cm-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;
	line-height: 1.4;
	color: #333333;
	margin: 0;
	padding: 0;
}

.cm-section2 {
	position: relative;
	width: 100%;
	height: auto;
	margin: 0 auto;
	margin-top: 20px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.cm-title {
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	width: 100%;
	justify-content: flex-start;
}

/* Dot circle */
.cm-dot {
	position: relative;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: #555662;
	flex-shrink: 0;
	margin-right: 11px;
}

/* "CCS는?" heading */
.cm-heading {
	position: relative;
	font-size: clamp(20px, 3vw, 24px);
	font-weight: 500;
	letter-spacing: -1px;
	line-height: 1.4;
	color: #333333;
	margin: 0;
}

/* Gray box: top:319, left:1, 1038×88 — padding to contain list */
.cm-gray-box {
	position: relative;
	width: 100%;
	height: auto;
	background-color: #F6F6F6;
	border: 1px solid #D9D9D9;
	padding: 19px 25px;
	box-sizing: border-box;
}

/* List: inside gray-box, relative */
.cm-list {
	position: relative;
	top: auto;
	left: auto;
	width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: 'Noto Sans KR', sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 1.4;
	color: #333333;
}

.cm-list li {
	display: flex;
	align-items: flex-start;
}

.cm-list li::before {
	content: "✓";
	color: #1e986f;
	font-weight: 600;
	flex-shrink: 0;
	margin-right: 8px;
}

/* ============================================================
   Section 3 — Screenshots
   ============================================================ */
.cm-section3 {
	position: relative;
	width: 100%;
	height: 600px;
	margin-top: 60px;
	display: flex;
	justify-content: center;
}

.cm-screen-wrap {
	position: relative;
	width: 760px;
	height: 100%;
}

.cm-screen1 {
	position: absolute;
	top: 0;
	left: 120px;
	width: 385px;
	height: auto;
	z-index: 2;
}

.cm-screen2 {
	position: absolute;
	top: 101px;
	left: 375px;
	width: 385px;
	height: auto;
	z-index: 3;
}

.cm-screen3 {
	position: absolute;
	top: 160px;
	left: 0;
	width: 247px;
	height: auto;
	z-index: 4;
}

/* ==============================================
   Responsive — 1100px
   ============================================== */
@media screen and (max-width: 1100px) {
	.cm-big-title {
		font-size: 24px;
	}

	.cm-big-title .cm-ccs {
		font-size: 40px;
	}

	.cm-sub-label {
		font-size: 17px;
	}

	.cm-heading {
		font-size: 22px;
	}

	.cm-hero-content {
		gap: 30px;
	}

	.cm-logo-img {
		width: 280px;
	}

	.cm-section3 {
		height: 480px;
		margin-top: 30px;
	}

	.cm-screen-wrap {
		transform: scale(0.8);
		transform-origin: center top;
	}
}

/* ==============================================
   Responsive — 800px
   ============================================== */
@media (max-width: 800px) {
	.cm-section1 {
		flex-direction: column;
		height: auto;
		padding: 40px 0;
		text-align: left;
		background-image: none !important;
	}

	.cm-hero-content {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}

	.cm-logo-wrap {
		display: none;
	}

	.cm-hero-text-group {
		width: 100%;
		align-items: flex-start;
	}

	.cm-big-title {
		font-size: 20px;
		white-space: normal;
	}

	.cm-big-title .cm-ccs {
		font-size: 32px;
	}

	.cm-sub-label {
		font-size: 16px;
	}

	.cm-desc {
		font-size: 14px;
	}

	.cm-title {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}

	.cm-heading {
		font-size: 20px;
	}

	.cm-section3 {
		display: none;
	}

	.cm-screen-wrap {
		transform: scale(0.6);
		transform-origin: center top;
	}

	.cm-list {
		font-size: 14px;
	}

}