@charset "utf-8";

.custom-order-container {
	font-family: 'Noto Sans KR', sans-serif;
}

/* =============================================
   1. Intro Section (Hero)
   canvas ref: top 0~498, width 1100px
============================================= */
.co-intro {
	position: relative;
	width: 100%;
	height: 498px;
	margin: 0 auto;
	overflow: hidden;
}

.co-intro .intro-text-group {
	position: relative;
	top: 87px;
	left: 30px;
	display: flex;
	flex-direction: column;
	z-index: 2;
}

.co-intro .intro-sub1 {
	font-size: 36px;
	font-weight: 400;
	color: #000000;
	letter-spacing: -1px;
	line-height: 1.2;
	margin: 0;
}

.co-intro .intro-title {
	font-size: 46px;
	font-weight: 600;
	color: #000000;
	letter-spacing: -1px;
	line-height: 1.2;
	margin: 0;
}

.co-intro .intro-desc {
	margin-top: 30px;
}

.co-intro .intro-desc p {
	font-size: 18px;
	font-weight: 400;
	color: #333333;
	letter-spacing: -1px;
	line-height: 1.4;
	margin: 0;
}

/* Price Box */
.co-intro .price-box {
	margin-top: 37px;
	width: 280px;
	max-width: 100%;
	height: 45px;
	background-color: #3C3C3C;
	display: flex;
	align-items: center;
	justify-content: center;
}

.co-intro .price-box p {
	font-size: 24px;
	font-weight: 400;
	color: #FFFFFF;
	letter-spacing: -1px;
	line-height: 1.4;
	margin: 0;
}

.co-intro .price-box b {
	font-weight: 700;
}

.co-intro .devices-deco-layer {
	position: absolute;
	top: 0;
	right: 0;
	width: 1100px;
	height: 100%;
}

.co-intro .devices-deco-layer .device-item {
	position: absolute;
}

.co-intro .devices-deco-layer .device-item img {
	display: block;
	width: 100%;
	height: 100%;
}

/* Laptop */
.co-intro .laptop-label {
	top: 244px;
	left: 608px;
	width: 68px;
	height: 56px;
}

.co-intro .laptop-label p {
	position: absolute;
	top: 11px;
	left: 1px;
	width: 65px;
	font-size: 16px;
	font-weight: 500;
	color: #FFFFFF;
	text-align: center;
	letter-spacing: 0;
	line-height: 1.4;
	margin: 0;
}

.co-intro .laptop-base {
	top: 292px;
	left: 560px;
	width: 206px;
	height: 134px;
}

.co-intro .laptop-screen {
	top: 298px;
	left: 586px;
	width: 155px;
	height: 97px;
}

/* Desktop */
.co-intro .desktop-label {
	top: 171px;
	left: 829px;
	width: 116px;
	height: 56px;
}

.co-intro .desktop-label p {
	position: absolute;
	top: 9px;
	left: 0;
	width: 116px;
	font-size: 16px;
	font-weight: 500;
	color: #FFFFFF;
	text-align: center;
	letter-spacing: 0;
	line-height: 1.4;
	margin: 0;
}

.co-intro .desktop-base {
	top: 220px;
	left: 731px;
	width: 230px;
	height: 220px;
}

.co-intro .desktop-screen {
	top: 229px;
	left: 739px;
	width: 214px;
	height: 121px;
}

/* Mobile */
.co-intro .mobile-label {
	top: 315px;
	left: 911px;
	width: 68px;
	height: 56px;
}

.co-intro .mobile-label p {
	position: absolute;
	top: 10px;
	left: 0;
	width: 67px;
	font-size: 16px;
	font-weight: 500;
	color: #FFFFFF;
	text-align: center;
	letter-spacing: 0;
	line-height: 1.4;
	margin: 0;
}

.co-intro .mobile-base {
	top: 361px;
	left: 931px;
	width: 34px;
	height: 72px;
}

.co-intro .mobile-screen {
	top: 370px;
	left: 935px;
	width: 30px;
	height: 50px;
}

/* Tablet */
.co-intro .tablet-label {
	top: 274px;
	left: 1002px;
	width: 68px;
	height: 56px;
}

.co-intro .tablet-label p {
	position: absolute;
	top: 9px;
	left: 0;
	width: 67px;
	font-size: 16px;
	font-weight: 500;
	color: #FFFFFF;
	text-align: center;
	letter-spacing: 0;
	line-height: 1.4;
	margin: 0;
}

.co-intro .tablet-base {
	top: 321px;
	left: 984px;
	width: 71px;
	height: 113px;
}

.co-intro .tablet-screen {
	top: 331px;
	left: 987px;
	width: 65px;
	height: 78px;
}

/* Bottom Banner */
.co-intro .intro-banner {
	position: absolute;
	top: 408px;
	left: 30px;
	width: 1040px;
	height: 90px;
}

.co-intro .intro-banner img {
	display: block;
	width: 100%;
	height: 100%;
}

/* =============================================
   2. Pricing Table Section
   canvas ref: top 473~1001, left 30, width 1040
============================================= */
.co-pricing {
	width: 100%;
	margin: 0 auto 0;
	box-sizing: border-box;
}

.co-pricing .section-header {
	height: 54px;
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 0;
}

.co-pricing .bullet-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: rgb(85, 86, 98);
	border-radius: 2px;
	flex-shrink: 0;
}

.co-pricing .section-title {
	font-size: 24px;
	font-weight: 500;
	color: #333333;
	letter-spacing: -1px;
	line-height: 1.4;
	margin: 0;
}

.pricing-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #BEBEBE;
	text-align: center;
}

.pricing-table th {
	background-color: #515151;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
	padding: 12px 10px 10px 12px;
	border: 1px solid #BEBEBE;
}

.pricing-table td {
	background-color: #FFFFFF;
	font-size: 15px;
	color: #333333;
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
	padding: 12px 10px 10px 12px;
	border: 1px solid #BEBEBE;
	width: 20%;
}

.pricing-table td.td-left {
	text-align: left;
	font-weight: 400;
}

/* =============================================
   3. Maintenance Section (유지보수 + 셀프관리 필수)
============================================= */
.co-maintenance {
	width: 100%;
	margin: 60px auto 0;
	box-sizing: border-box;
}

.co-maintenance .section-header {
	height: 54px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.co-maintenance .bullet-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: rgb(85, 86, 98);
	border-radius: 2px;
	flex-shrink: 0;
}

.co-maintenance .section-title {
	font-size: 24px;
	font-weight: 500;
	color: #333333;
	letter-spacing: -1px;
	line-height: 1.4;
	margin: 0;
}

.maint-bar {
	background-color: #FFD767;
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.maint-bar p {
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -1px;
	color: #333333;
	margin: 0;
}

.self-manage-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #BEBEBE;
}

.self-manage-table th {
	background-color: #535353;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	letter-spacing: -1px;
	line-height: 1.6;
	padding: 12px 10px;
	border: 1px solid #BEBEBE;
	width: 100px;
	vertical-align: middle;
}

.self-manage-table td {
	background-color: #FFFFFF;
	font-size: 15px;
	color: #333333;
	font-weight: 400;
	text-align: left;
	letter-spacing: -1px;
	line-height: 1.6;
	padding: 5px 10px 5px 20px;
	border: 1px solid #BEBEBE;
	vertical-align: middle;
}

.self-manage-table td.td-top {
	vertical-align: top;
	padding: 12px 10px 12px 20px;
	letter-spacing: 0;
}

/* =============================================
   4. 필요시 관리서비스 추가(선택)
============================================= */
.co-add-service {
	width: 100%;
	margin: 80px auto 0;
	padding: 0 30px;
	box-sizing: border-box;
}

.add-service-bar {
	background-color: #FFD767;
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.add-service-bar p {
	font-size: 26px;
	font-weight: 600;
	letter-spacing: -1px;
	color: #333333;
	margin: 0;
}

.manage-service-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 4px 0;
	table-layout: fixed;
}

.manage-service-table .row-label-head {
	background-color: #535353;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	letter-spacing: -1px;
	line-height: 1.6;
	padding: 12px 8px;
	width: 70px;
	vertical-align: middle;
}

.manage-service-table .col-head {
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	letter-spacing: -1px;
	line-height: 1.4;
	padding: 14px 8px 12px;
	vertical-align: middle;
}

.manage-service-table .col-head .card-title {
	font-size: 15px;
	font-weight: 600;
	color: #FFFFFF;
	margin: 0 0 4px;
	line-height: 1.4;
}

.manage-service-table .col-head .card-sub {
	font-size: 13px;
	font-weight: 400;
	color: #FFFFFF;
	margin: 0;
	line-height: 1.4;
}

.manage-service-table .col-head.col-1 {
	background-color: #9DDAE8;
}

.manage-service-table .col-head.col-2 {
	background-color: #B2E595;
}

.manage-service-table .col-head.col-3 {
	background-color: #79D99A;
}

.manage-service-table .col-head.col-4 {
	background-color: #5DD6CA;
}

.manage-service-table .col-head.col-5 {
	background-color: #579EC9;
}

.manage-service-table tbody .row-label {
	background-color: #535353;
	color: #FFFFFF;
	font-size: 15px;
	font-weight: 500;
	text-align: center;
	letter-spacing: -1px;
	line-height: 1.6;
	padding: 10px 8px;
	vertical-align: middle;
}

.manage-service-table tbody td {
	background-color: #FFFFFF;
	font-size: 14px;
	color: #333333;
	font-weight: 400;
	text-align: center;
	letter-spacing: -1px;
	line-height: 1.6;
	padding: 10px 8px;
	vertical-align: middle;
}

.manage-service-table tbody .col-1 {
	border-left: 3px solid #9DDAE8;
	border-right: 3px solid #9DDAE8;
}

.manage-service-table tbody .col-2 {
	border-left: 3px solid #B2E595;
	border-right: 3px solid #B2E595;
}

.manage-service-table tbody .col-3 {
	border-left: 3px solid #79D99A;
	border-right: 3px solid #79D99A;
}

.manage-service-table tbody .col-4 {
	border-left: 3px solid #5DD6CA;
	border-right: 3px solid #5DD6CA;
}

.manage-service-table tbody .col-5 {
	border-left: 3px solid #579EC9;
	border-right: 3px solid #579EC9;
}

.manage-service-table tbody tr:first-child .col-1 {
	border-top: 3px solid #9DDAE8;
}

.manage-service-table tbody tr:first-child .col-2 {
	border-top: 3px solid #B2E595;
}

.manage-service-table tbody tr:first-child .col-3 {
	border-top: 3px solid #79D99A;
}

.manage-service-table tbody tr:first-child .col-4 {
	border-top: 3px solid #5DD6CA;
}

.manage-service-table tbody tr:first-child .col-5 {
	border-top: 3px solid #579EC9;
}

.manage-service-table tbody tr:last-child .col-1 {
	border-bottom: 3px solid #9DDAE8;
}

.manage-service-table tbody tr:last-child .col-2 {
	border-bottom: 3px solid #B2E595;
}

.manage-service-table tbody tr:last-child .col-3 {
	border-bottom: 3px solid #79D99A;
}

.manage-service-table tbody tr:last-child .col-4 {
	border-bottom: 3px solid #5DD6CA;
}

.manage-service-table tbody tr:last-child .col-5 {
	border-bottom: 3px solid #579EC9;
}

.manage-service-table tbody .td-top {
	vertical-align: top;
	padding: 14px 10px;
	text-align: center;
}

.manage-service-table .service-base {
	font-size: 14px;
	font-weight: 600;
	color: #333333;
	letter-spacing: -1px;
	line-height: 1.5;
	margin: 0 0 6px;
	text-align: center;
}

.manage-service-table .service-plus {
	font-size: 24px;
	font-weight: 900;
	color: #333333;
	line-height: 1.2;
	margin: 6px 0;
	text-align: center;
}

.manage-service-table .service-list {
	font-size: 13px;
	font-weight: 400;
	color: #333333;
	letter-spacing: -1px;
	line-height: 1.6;
	margin: 0;
	text-align: center;
}
/* =============================================
	신규유지보수
============================================= */

/* ===== 유지보수 3플랜 표 (추가 전용) ===== */
.mnt-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	grid-template-rows:repeat(5,auto);
	grid-auto-flow:column;              /* DOM(플랜 단위)을 열로 배치 → 밴드 가로정렬 */
	border-top:1px solid #e2e2e2;
	border-left:1px solid #e2e2e2;
	color:#000;
	box-sizing:border-box;
}
.mnt-grid *{box-sizing:border-box;}
.mnt-cell{
	border-right:1px solid #e2e2e2;
	border-bottom:1px solid #e2e2e2;
}

/* 헤더 */
.mnt-head{padding:24px 10px;text-align:center;font-size:20px;font-weight:bold;color:#000;}
.mnt-head.green{background:#a7d05b;}
.mnt-head.mint{background:#95dcce;}
.mnt-head.blue{background:#a6c8ec;}

/* 가격 */
.mnt-price{background:#f7f7f7;text-align:center;padding:20px 10px;font-size:20px;font-weight:bold;color:#000;}
.mnt-price span{font-size:15px;font-weight:normal;color:#000;}

/* 서비스 / 하단상세 */
.mnt-svc,.mnt-detail{padding:22px 20px;background:#fff;font-size:15px;line-height:1.6;}

/* 서버용량 */
.mnt-server{text-align:center;padding:16px 10px;font-size:15px;color:#000;}

/* 리스트 */
.mnt-list{list-style:none;margin:0;padding:0;}
.mnt-list li{position:relative;padding-left:12px;margin-bottom:3px;}
.mnt-list.dot li::before{content:'·';position:absolute;left:0;top:0;}
.mnt-list.dash li::before{content:'-';position:absolute;left:0;top:0;}

/* 강조 텍스트 */
.mnt-basic{color:#2e74b5;font-weight:bold;margin:0 0 12px;}
.mnt-add{font-weight:bold;color:#000;margin:0 0 6px;}
.mnt-change{color:#000;margin:8px 0 14px;font-size:12px;}
.mnt-star,.mnt-dtitle{font-weight:bold;color:#000;margin:0;}
.mnt-dtitle{margin:0 0 10px;}

/* ===== 모바일 : 유지보수별로 순서대로(플랜 전체 → 다음 플랜) ===== */
@media (max-width:768px){
	.mnt-grid{
		grid-template-columns:1fr;
		grid-template-rows:none;
		grid-auto-flow:row;             /* 단일 열 → DOM순서(플랜 단위)로 세로 정렬 */
	}
	.mnt-head{border-top:3px solid #d0d0d0;}   /* 플랜 구분선 */
	.mnt-cell.mnt-head:first-child{border-top:none;}
}

/* =============================================
   5. 필요시 추가비용 안내
============================================= */
.co-extra-cost {
	width: 100%;
	margin: 80px auto 0;
	padding: 0 30px;
	box-sizing: border-box;
}

.extra-block {
	margin-bottom: 30px;
}

.extra-block .extra-title {
	font-size: 18px;
	font-weight: 600;
	color: #333333;
	letter-spacing: -1px;
	line-height: 1.4;
	margin: 0 0 4px;
}

.extra-block .extra-sub {
	font-size: 18px;
	font-weight: 400;
	color: #333333;
	letter-spacing: -1px;
	line-height: 1.4;
	margin: 0 0 10px;
}

.extra-list-wrap {
	display: flex;
	align-items: stretch;
}

.extra-list-wrap .list-bar {
	flex-shrink: 0;
	width: 13px;
	background-color: rgb(199, 0, 0);
}

.extra-list {
	list-style: none;
	margin: 0;
	padding: 0 0 0 14px;
}

.extra-list li {
	font-size: 16px;
	font-weight: 400;
	color: #333333;
	letter-spacing: -1px;
	line-height: 1.6;
}

.sb-table {
	width: 100%;
	border-collapse: collapse;
	border: 1px solid #BEBEBE;
	table-layout: fixed;
}

.sb-table th,
.sb-table td {
	border: 1px solid #BEBEBE;
	padding: 12px 10px 10px 12px;
	font-size: 15px;
	line-height: 1.5;
	letter-spacing: -1px;
}

.sb-table thead th {
	background-color: #515151;
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
}

.sb-table thead th:first-child {
	width: 110px;
}

.sb-table .lbl {
	background-color: #FFFFFF;
	width: 110px;
	color: #333333;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}

.sb-table .val-bold {
	color: #333333;
	font-weight: 400;
	text-align: center;
}

.sb-table .val-list {
	text-align: left;
	color: #333333;
	padding: 12px 10px 10px 12px;
	line-height: 1.5;
	letter-spacing: -1.2px;
	word-break: keep-all;
}

/* 3. Maintenance Section */
.sb-maint {
	position: relative;
	width: 100%;
	margin: 50px auto 0 auto;
}

.sb-maint .maint-title {
	position: relative;
	height: 54px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.sb-maint .maint-title .ico {
	width: 10px;
	height: 10px;
	background-color: rgb(85, 86, 98);
	border-radius: 2px;
}

.sb-maint .maint-title h2 {
	font-size: 24px;
	font-weight: 500;
	color: #333333;
	letter-spacing: -1px;
	margin: -5px 0 0 0;
}

.sb-maint .maint-highlight {
	width: 100%;
	height: 60px;
	background-color: #FFD767;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: -6px;
}

.sb-maint .maint-highlight p {
	font-size: 26px;
	font-weight: 600;
	color: #333333;
	letter-spacing: -1px;
	margin: 0;
}

.maint-table-wrap {
	margin-top: 10px;
}

.sb-table .lbl-dark {
	background-color: #535353;
	width: 110px;
	color: #FFFFFF;
	font-weight: bold;
	text-align: center;
	vertical-align: middle;
}

.sb-table .val-text {
	color: #333333;
	font-weight: 400;
	text-align: left;
	padding-left: 20px;
}

.sb-table .val-list {
	color: #333333;
	font-weight: 400;
	text-align: left;
	padding: 12px 20px;
	line-height: 1.5;
	letter-spacing: -0.5px;
}

/* 4. Comparison Grid Section */

.sb-compare {
	position: relative;
	width: 100%;
	margin: 60px auto 0 auto;
}

.sb-compare .maint-highlight {
	width: 100%;
	height: 60px;
	background-color: #FFD767;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 10px;
}

.sb-compare .maint-highlight p {
	font-size: 26px;
	font-weight: 600;
	color: #333333;
	letter-spacing: -1px;
	margin: 0;
}

.compare-grid-wrap {
	display: grid;
	grid-template-columns: 101px repeat(5, 1fr);
	width: 100%;
	border-right: 1px solid #BEBEBE;
	border-bottom: 1px solid #BEBEBE;
}

.compare-card {
	display: flex;
	flex-direction: column;
	border-left: 1px solid #BEBEBE;
	border-top: 1px solid #BEBEBE;
}

.compare-card .card-head {
	height: 130px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 0 10px;
	font-size: 15px;
	font-weight: 500;
}

.compare-card .card-head h3 {
	font-size: 20px;
	font-weight: 600;
	margin-bottom: 5px;
	line-height: 1.2;
}

.compare-card .card-head p {
	font-size: 13px;
	line-height: 1.2;
}

/* Column Colors */
.compare-card.col-lbl .card-head {
	background-color: #535353;
	color: #FFFFFF;
}

.compare-card.col-cyan .card-head {
	background-color: #9DDAE8;
	color: #333333;
}

.compare-card.col-lightgreen .card-head {
	background-color: #B2E595;
	color: #333333;
}

.compare-card.col-green .card-head {
	background-color: #79D99A;
	color: #333333;
}

.compare-card.col-teal .card-head {
	background-color: #5DD6CA;
	color: #333333;
}

.compare-card.col-blue .card-head {
	background-color: #579EC9;
	color: #333333;
}

.compare-card .card-body .row {
	border-top: 1px solid #BEBEBE;
	margin-top: -1px;
	padding: 12px 10px;
	font-size: 15px;
	color: #333333;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	word-break: keep-all;
}

.compare-card.col-lbl .row {
	background-color: #F8F8F8;
	font-weight: 500;
}

.compare-card .card-body .row-svc {
	min-height: 524px;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	padding: 20px 10px;
}

.compare-card.col-lbl .row-svc {
	align-items: center;
	justify-content: center;
}

.compare-card .card-body .row-svc .svc-title {
	font-weight: bold;
	display: block;
	margin-bottom: 10px;
}

.compare-card .card-body .row-svc .svc-plus {
	color: #99B220;
	font-weight: bold;
	font-size: 24px;
	display: block;
	width: 100%;
	text-align: center;
	margin: 10px 0;
}

.compare-card .card-body .row-svc .list-svc {
	list-style: none;
	padding: 0;
	margin: 0;
}

.compare-card .card-body .row-svc .list-svc li {
	display: flex;
	align-items: flex-start;
	margin-bottom: 5px;
	font-size: 14px;
	line-height: 1.4;
}

.compare-card .card-body .row-svc .list-svc li::before {
	content: '·';
	flex-shrink: 0;
	margin-right: 4px;
}

.compare-card .card-body .row-svc .list-svc .svc-note {
	font-size: 12px;
	color: #666666;
	margin-top: 15px;
	padding-left: 0;
}

.compare-card .card-body .row-svc .list-svc .svc-note::before {
	content: '';
}

.compare-card .card-body .row-svc .list-svc .svc-special {
	color: #D44242;
	font-weight: bold;
	margin-top: 15px;
}

/* 5. Additional Costs & Server Section */
.sb-extra {
	position: relative;
	width: 100%;
	margin: 60px auto 0;
}

.sb-extra .extra-item {
	position: relative;
	width: 100%;
}

.sb-extra .mt-60 {
	margin-top: 60px;
}

.sb-extra .mt-40 {
	margin-top: 40px;
}

.sb-extra .extra-title {
	height: 54px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

.sb-extra .extra-title .ico {
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	display: block;
	background-color: rgb(85, 86, 98);
	border-radius: 2px;
}

.sb-extra .extra-title h2 {
	font-size: 18px;
	font-weight: 600;
	color: #333333;
	letter-spacing: -1px;
	margin: 0;
}

.sb-extra .extra-desc {
	font-size: 15px;
	color: #666666;
	margin: -5px 0 10px 0;
	letter-spacing: -1px;
	padding-left: 20px;
}

.sb-extra .table-sm .lbl {
	width: 320px;
	text-align: left;
	padding-left: 20px;
	background-color: #F8F8F8;
	font-weight: bold;
}

.sb-extra .table-sm .val {
	text-align: left;
	padding-left: 20px;
	color: #333333;
}

.sb-extra .table-sm .val .note {
	font-size: 14px;
	color: #D64242;
	display: block;
	margin-top: 5px;
}

/* 6. Action Buttons Section */

.compare-card .card-body .row-svc .list-svc .svc-special::before {
	content: '';
}

.compare-card .card-body .row-img {
	min-height: 60px;
}

/* Responsive Grid */
@media screen and (max-width: 1100px) {
	.compare-grid-wrap {
		overflow-x: auto;
		grid-template-columns: 101px repeat(5, 200px);
	}
}

/* Bullet line (· text flex layout) */
.b-line {
	display: flex;
	align-items: flex-start;
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	margin: 0;
}

.b-dot {
	flex-shrink: 0;
	margin-right: 4px;
}

.b-note {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	margin: 4px 0 0;
}

/* =============================================
   6. Action Buttons
============================================= */
.co-action-buttons {
	position: relative;
	width: 100%;
	margin: 80px auto 100px auto;
	display: flex;
	justify-content: center;
	gap: 15px;
}

.co-action-buttons .action-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 200px;
	height: 55px;
	border-radius: 4px;
	font-size: 18px;
	font-weight: 600;
	color: #FFFFFF;
	text-decoration: none;
	transition: opacity 0.2s;
}

.co-action-buttons .btn-apply {
	background-color: #2E90A8;
}

.co-action-buttons .btn-inquiry {
	background-color: #00B093;
}

.co-action-buttons .btn-portfolio {
	background-color: #3E3E3E;
}

.co-action-buttons .action-btn:hover {
	opacity: 0.8;
}

/* Mobile Responsive Text Scaling & Layout */
@media screen and (max-width: 800px) {

	/* Font size scaling */
	.co-intro .intro-sub1 {
		font-size: 24px;
	}

	.co-intro .intro-title {
		font-size: 32px;
	}

	.co-intro .intro-desc p {
		font-size: 15px;
		word-break: keep-all;
	}

	.co-intro .intro-desc p br {
		display: none;
	}

	.co-intro .price-box {
		margin-top: 20px;
		height: 40px;
	}

	.co-intro .price-box p {
		font-size: 18px;
	}

	.co-pricing .section-title,
	.co-maintenance .section-title,
	.sb-maint .maint-title h2 {
		font-size: 20px;
	}

	.maint-bar p,
	.add-service-bar p,
	.sb-maint .maint-highlight p,
	.sb-compare .maint-highlight p {
		font-size: 18px;
	}

	.maint-bar,
	.add-service-bar,
	.sb-maint .maint-highlight,
	.sb-compare .maint-highlight {
		height: 48px;
	}

	.pricing-table th,
	.pricing-table td,
	.self-manage-table th,
	.self-manage-table td,
	.manage-service-table .row-label-head,
	.manage-service-table .col-head,
	.manage-service-table tbody .row-label,
	.sb-table th,
	.sb-table td,
	.sb-extra .table-sm .val {
		font-size: 13px;
	}

	.manage-service-table tbody td {
		font-size: 12px;
	}

	.manage-service-table .col-head .card-title {
		font-size: 14px;
	}

	.manage-service-table .service-plus {
		font-size: 18px;
	}

	.manage-service-table .service-base {
		font-size: 13px;
	}

	.manage-service-table .service-list {
		font-size: 12px;
	}

	.extra-block .extra-title,
	.extra-block .extra-sub,
	.sb-extra .extra-title h2 {
		font-size: 16px;
	}

	.extra-list li {
		font-size: 14px;
	}

	.sb-extra .extra-desc {
		font-size: 14px;
	}

	.compare-card .card-head h3 {
		font-size: 16px;
	}

	.compare-card .card-head p {
		font-size: 12px;
	}

	.compare-card .card-body .row {
		font-size: 13px;
	}

	.compare-card .card-body .row-svc .svc-plus {
		font-size: 18px;
	}

	.compare-card .card-body .row-svc .list-svc li {
		font-size: 12px;
	}

	.co-action-buttons .action-btn {
		font-size: 16px;
		height: 50px;
	}

	/* Cell Padding & Widths for Tables */
	.sb-extra .table-sm .lbl {
		width: 130px;
		padding-left: 10px;
	}

	.sb-extra .table-sm .val {
		padding-left: 10px;
	}

	.self-manage-table td,
	.self-manage-table td.td-top {
		padding-left: 10px;
	}

	/* Layout adjustments */
	.co-intro {
		height: auto;
		overflow: visible;
		box-sizing: border-box;
	}

	.co-intro .intro-text-group {
		position: static;
		padding: 20px 20px 0;
	}

	.co-intro .intro-sub1,
	.co-intro .intro-title,
	.co-intro .intro-desc,
	.co-intro .price-box {
		position: static;
		top: auto;
		left: auto;
	}

	.co-intro .devices-deco-layer {
		display: none;
	}

	.co-intro .intro-banner {
		position: relative;
		width: 100%;
		top: auto;
		left: auto;
	}

	.co-pricing,
	.co-maintenance,
	.co-add-service,
	.co-extra-cost {
		box-sizing: border-box;
	}

	.co-pricing,
	.co-maintenance {
		overflow-x: auto;
	}

	.co-pricing .pricing-table,
	.co-maintenance .self-manage-table {
		display: block;
		overflow-x: auto;
	}

	.sb-extra .extra-table-wrap {
		overflow-x: auto;
	}

	.co-action-buttons .action-btn {
		font-size: 16px;
		height: 50px;
	}

	.co-action-buttons {
		gap: 5px;
	}
}