@charset "utf-8";
/* Generated by scripts/build_sub_modules.py from sub.css. Do not edit. */

/* DDoS/WAF 서비스 플랜 (cloudflare_security.php) - waf_service.php UI 동일 적용 */
.ddos-waf-plan.product-list { padding:120px 0 140px; }
.ddos-waf-plan .subTitle .txtbox { margin-top:12px; font-size:17px; color:#666; }
.ddos-waf-plan .listbox .subtxt strong { color:var(--mainColor) !important; }
.ddos-waf-plan .listbox > ul > li .list li .plan-x,
.routing-plan .listbox > ul > li .list li .plan-x {
	display:inline-block;
	min-width:1em;
	margin-right:6px;
	font-weight:700;
	font-size:1.05em;
	line-height:1;
	color:#b8c0cc;
	vertical-align:0.05em;
}

/* 스마트 라우팅 서비스 플랜 (cloudflare_smartrouting.php) */
.routing-plan.product-list { padding:120px 0 140px; }
.routing-plan .subTitle .txtbox { margin-top:12px; font-size:17px; color:#666; }
.routing-plan .listbox .subtxt strong { color:var(--mainColor) !important; }
.routing-plan .listbox > ul > li {
    display:flex;
    flex-direction:column;
    min-height:480px;
    border:1px solid #e2e8f0;
    border-radius:20px;
    background:#fff;
    padding:40px 30px 40px 30px;
}
.routing-plan .listbox > ul > li .list { flex:1; }
.routing-plan .listbox > ul > li .hint { margin-top:12px; margin-bottom:0; }
.routing-plan .listbox > ul > li .btn-gr { margin-top:12px; }
/* CDN 서비스 플랜 (3열 — inner 가로 풀) */
.cdn-plan.product-list { padding:120px 0 140px; }
.cdn-plan .subTitle .txtbox { margin-top:12px; font-size:17px; color:#666; }
.cdn-plan .listbox .subtxt strong { color:var(--mainColor) !important; }
.cdn-plan .listbox > ul {
	display:grid;
	grid-template-columns:repeat(3, 1fr);
	gap:20px;
	width:100%;
}
.cdn-plan .listbox > ul > li { width:auto; min-width:0; display:flex; flex-direction:column; min-height:480px; }
.cdn-plan .listbox > ul > li .list { flex:1; }
.cdn-plan .listbox > ul > li .hint { margin-top:12px; margin-bottom:0; }
.cdn-plan .listbox > ul > li .btn-gr { margin-top:12px; }
/* 카드 높이 맞춤: hint+버튼을 하단 정렬 */
.ddos-waf-plan .listbox > ul > li {
    display:flex;
    flex-direction:column;
    min-height:520px;
}
.ddos-waf-plan .listbox > ul > li .list { flex:1; }
.ddos-waf-plan .listbox > ul > li .hint { margin-top:12px; margin-bottom:0; }
.ddos-waf-plan .listbox > ul > li .btn-gr { margin-top:12px; }
/* DDoS/WAF: 2열 그리드로 inner 가로 풀 */
.ddos-waf-plan .listbox > ul {
	display:grid;
	grid-template-columns:repeat(2, 1fr);
	gap:30px;
	width:100%;
}
.ddos-waf-plan .listbox > ul > li { width:auto; min-width:0; }
/* CDN·DDoS/WAF 플랜만 혜택 .list 가로 전폭 (type-A 기본 max-width:350px 덮어씀) */
.product-list.type-A.cdn-plan .listbox > ul > li .list,
.product-list.type-A.ddos-waf-plan .listbox > ul > li .list {
	max-width: 100%;
}
@media screen and (max-width:1024px){
    .ddos-waf-plan .listbox > ul > li { min-height:480px; }
    .routing-plan .listbox > ul > li { min-height:450px; }
    .cdn-plan .listbox > ul { grid-template-columns:repeat(2, 1fr); }
    .cdn-plan .listbox > ul > li { min-height:450px; }
    .product-list.type-A.cdn-plan .listbox > ul > li .list,
    .product-list.type-A.ddos-waf-plan .listbox > ul > li .list { max-width: 100%; }
}
@media screen and (max-width:768px){
    .ddos-waf-plan .listbox > ul { grid-template-columns:1fr; }
    .ddos-waf-plan .listbox > ul > li { min-height:auto; }
    .routing-plan .listbox > ul > li { min-height:auto; }
    .cdn-plan .listbox > ul { grid-template-columns:1fr; }
    .cdn-plan .listbox > ul > li { min-height:auto; }
}

.proxmox-compare .data-table tbody td .compare-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.proxmox-compare .data-table tbody td .compare-badge:before {
    content:'';
    width:10px;
    height:10px;
    border-radius:50%;
    flex:0 0 10px;
}
.proxmox-compare .data-table tbody td .compare-badge.badge-green:before { background:#22c55e; }
.proxmox-compare .data-table tbody td .compare-badge.badge-blue:before { background:#3b82f6; }
.proxmox-compare .data-table tbody td .compare-badge.badge-red:before { background:#ef4444; }
.proxmox-compare .data-table tbody td.cell-green-bg { background:#f5fff5; }
.proxmox-compare .data-table thead th .platform-label {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
}
.proxmox-compare .data-table thead th .platform-label img {
    width:18px;
    height:18px;
    object-fit:contain;
}
.proxmox-compare .data-table tbody td svg {
    vertical-align:middle;
    margin-right:4px;
}

/* cloud_migration page animation */
.source-top.product-table .data-table,
.source-top.product-table .vm-proxmox-banner { opacity:0; }
.source-top.subOn .data-table { animation:ani_4 0.8s 0.2s; animation-fill-mode:both; }
.source-top.subOn .vm-proxmox-banner { animation:ani_4 0.8s 0.4s; animation-fill-mode:both; }

/* product table */
.product-table .data-table{ background:#fff; }
.product-table .data-table table { border:1px solid #ddd; }
.product-table .data-table table .th-borer{ border-left:1px solid #ddd; }
.product-table .data-table thead th { height:60px; background:var(--mainColor); font-size:18px; font-weight:600; color:#fff; border:1px solid #ddd; border-width:0 0 1px 1px;  }
.product-table .data-table thead th:first-child { border-left:none; }
.product-table .data-table tbody th { text-align:center; height:60px; font-size:17px; font-weight:600; color:#222; border:1px solid #ddd; border-width:0 0 1px 0; }
.product-table .data-table tbody th.th-center { text-align:center; padding-left:10px; padding-right:10px; }
.product-table.network-switch2 .data-table tbody th.th-center { font-weight:400; }
.product-table .data-table tbody td { word-break:keep-all; padding:6px 10px; text-align:center; font-size:15px; font-weight:400; color:#444; line-height:1.5; border:1px solid #ddd; border-width:0 0 1px 1px; }
.product-table .data-table tbody td .stxt { font-size:15px; display:block; }
.product-table .data-table tbody .txt2 { color:#0569ff; font-weight: 600; }
@media screen and (max-width:1024px){
    .product-table .data-table thead th { height:40px; font-size:16px; }
    .product-table .data-table tbody th { height:40px; padding:12px 15px; font-size:15px;}
    .product-table .data-table tbody td { padding:4px 10px; font-size:15px; }
    .product-table .data-table tbody td .stxt { font-size:14px; }
}
@media screen and (max-width:960px){
    .product-table .data-table { overflow:auto; }
    .product-table .data-table table { width:100%; }
}
@media screen and (max-width:640px){
    .product-table .data-table thead th { height:40px; font-size:13px; }
    .product-table .data-table tbody th,tr { height:40px; font-size:13px;line-height: 20px;}
    .product-table .data-table tbody tr td { font-size: 13px;}
}

/* DDoS 자동 완화 서비스 (cloudflare_security.php) */
.ddos-mitigation-showcase { padding:120px 0 140px; background:#f5f5f5; }
.ddos-mitigation-showcase .subTitle .txtbox { margin-top:12px; font-size:17px; color:#666; line-height:1.5; }
.ddos-mitigation-wrap {
    margin-top:60px;
    display:flex;
    align-items:stretch;
    gap:40px;
}
/* 좌측: DDoS Protection Layers 다크 그래픽 */
.ddos-layer-graphic {
    flex:0 0 450px;
    display:flex;
    flex-direction:column;
    padding:28px 24px 24px;
    border-radius:16px;
    background:#1e293b;
    border:1px solid #334155;
}
.ddos-graphic-tit {
    font-size:15px; font-weight:700; color:rgba(255,255,255,0.95);
    letter-spacing:0.02em; margin-bottom:22px;
    padding-bottom:14px; border-bottom:1px solid #334155;
}
.ddos-layer-list { display:flex; flex-direction:column; gap:12px; flex:1; }
.ddos-layer-item {
    display:flex;
    align-items:center;
    gap:14px;
    padding:19px 18px;
    border-radius:10px;
    background:#0f172a;
    border:1px solid #334155;
}
.ddos-layer-item .layer-badge {
    flex-shrink:0;
    width:46px; height:46px;
    display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:700; color:#fff;
    background:rgb(100 100 100 / 35%);
    border-radius:8px;
}
.ddos-layer-item .layer-info {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:4px;
}
.ddos-layer-item .layer-name { font-size:14px; font-weight:600; color:rgba(255,255,255,0.9); }
.ddos-layer-item .layer-desc { font-size:14px; margin-top: 4px ;color:#94a3b8; line-height:1.4; }
.ddos-layer-item .layer-status-badge {
    flex-shrink:0;
    padding:5px 10px;
    font-size:12px; font-weight:600; color:#fff;
    background:var(--mainColor);
    border-radius:6px;
}
.ddos-mitigation-time {
    margin-top:auto;
    padding:16px 20px;
    border-radius:10px;
    background:#0f172a;
    border:1px solid #334155;
    text-align:center;
}
.ddos-mitigation-time .time-num {
    display:block;
    font-size:28px; font-weight:700; color:#fff;
    letter-spacing:-0.02em; line-height:1.2;
}
.ddos-mitigation-time .time-label {
    display:block;
    margin-top:4px;
    font-size:13px; font-weight:500; color:#94a3b8;
}
/* 우측: 특징 4가지 (호버 없음) */
.ddos-feature-list {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:24px;
}
.ddos-feature-item {
    display:flex;
    align-items:flex-start;
    gap:20px;
    padding:22px 24px;
    border-radius:16px;
    border:1px solid #e2e8f0;
    background:#fff;
}
.ddos-feature-icon {
    flex-shrink:0;
    width:56px; height:56px;
    border-radius:14px;
    background:#f1f5f9;
    display:flex; align-items:center; justify-content:center;
}
.ddos-feature-icon img { width:32px; height:32px; }
.ddos-feature-item dl { flex:1; }
.ddos-feature-item dt {
    font-size:18px; font-weight:700; color:#1e293b;
    margin-bottom:8px; line-height:1.35; letter-spacing:-0.02em;
}
.ddos-feature-item dd {
    font-size:15px; font-weight:400; color:#64748b;
    line-height:1.65; letter-spacing:-0.01em;
}
/* 애니메이션 */
.ddos-mitigation-showcase .ddos-mitigation-wrap { opacity:0; transform:translateY(30px); }
.ddos-mitigation-showcase.subOn .ddos-mitigation-wrap {
    animation:ani_2 0.8s 0.2s;
    animation-fill-mode:both;
}
@media screen and (max-width:1280px){
    .ddos-mitigation-wrap { gap:50px; }
    .ddos-layer-graphic { flex:0 0 360px; }
}
@media screen and (max-width:1024px){
    .ddos-mitigation-showcase { padding:100px 0 120px; }
    .ddos-mitigation-wrap {
        flex-direction:column;
        margin-top:50px;
        gap:50px;
    }
    .ddos-layer-graphic { flex:none; max-width:480px; width:100%; margin:0 auto; }
    .ddos-layer-list { flex:0 0 auto; }
    .ddos-mitigation-time { margin-top:20px; }
    .ddos-feature-list { width:100%; }
}
@media screen and (max-width:768px){
    .ddos-mitigation-showcase { padding:80px 0 100px; }
    .ddos-mitigation-wrap { margin-top:40px; gap:36px; }
    .ddos-layer-graphic { padding:24px 20px 20px; }
    .ddos-graphic-tit { font-size:16px; margin-bottom:20px; }
    .ddos-layer-item { padding:12px 14px; gap:12px; }
    .ddos-layer-item .layer-badge { width:40px; height:40px; font-size:14px; }
    .ddos-layer-item .layer-name { font-size:14px; }
    .ddos-layer-item .layer-desc { font-size:11px; }
    .ddos-mitigation-time { margin-top:18px; padding:14px 16px; }
    .ddos-mitigation-time .time-num { font-size:26px; }
    .ddos-mitigation-time .time-label { font-size:13px; }
    .ddos-feature-item { padding:18px 20px; gap:16px; }
    .ddos-feature-icon { width:48px; height:48px; }
    .ddos-feature-icon img { width:28px; height:28px; }
    .ddos-feature-item dt { font-size:17px; }
    .ddos-feature-item dd { font-size:14px; }
}
@media screen and (max-width:640px){
    .ddos-mitigation-showcase { padding:60px 0 80px; }
    .ddos-mitigation-showcase .subTitle .txtbox { font-size:15px; }
    .ddos-mitigation-wrap { margin-top:32px; gap:28px; }
    .ddos-layer-item { flex-wrap:wrap; }
    .ddos-layer-item .layer-status-badge { align-self:flex-end; }
}

/* Argo Smart Routing showcase (cloudflare_smartrouting.php) */
.argo-showcase { padding:120px 0 140px; background:#f5f5f5; }
.argo-showcase .subTitle .txtbox { margin-top:12px; font-size:17px; color:#666; line-height:1.5; }
.argo-showcase-wrap {
    margin-top:60px;
    display:flex;
    align-items:flex-start;
    gap:40px;
}
.argo-layer-graphic {
    flex:0 0 600px;
    display:flex;
    flex-direction:column;
    padding:28px 28px 28px;
    border-radius:16px;
    background:#1e293b;
    border:1px solid #334155;
}
.argo-graphic-tit {
    font-size:15px; font-weight:700; color:rgba(255,255,255,0.95);
    letter-spacing:0.02em; margin-bottom:22px;
    padding-bottom:14px; border-bottom:1px solid #334155;
}
.argo-layer-list { display:flex; flex-direction:column; gap:12px; }
.argo-layer-item {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:20px 20px;
    border-radius:10px;
    background:#0f172a;
    border:1px solid #334155;
}
.argo-step-left { display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; }
.argo-layer-item .argo-step-name {
    font-size:16px; font-weight:600; color:rgba(255,255,255,0.9);
}
.argo-layer-item .argo-step-desc { font-size:14px; color:#94a3b8; line-height:1.45; }
.argo-chip-wrap { display:flex; flex-wrap:nowrap; flex-shrink:0; gap:6px; }
.argo-chip {
    display:inline-block;
    padding:5px 12px;
    font-size:12px; font-weight:600; color:rgba(255,255,255,0.9);
    background:rgba(100,116,139,0.4);
    border:1px solid #475569;
    border-radius:6px;
}
.argo-arrow {
    font-size:14px; font-weight:500; color:var(--mainColor);
    text-align:center; padding:6px 0;
}
.argo-feature-list {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:24px;
}
.argo-feature-item {
    display:flex;
    align-items:flex-start;
    gap:20px;
    padding:22px 24px;
    border-radius:16px;
    border:1px solid #e2e8f0;
    background:#fff;
}
.argo-feature-icon {
    flex-shrink:0;
    width:56px; height:56px;
    border-radius:14px;
    background:#f1f5f9;
    display:flex; align-items:center; justify-content:center;
}
.argo-feature-icon img { width:32px; height:32px; }
.argo-feature-item dl { flex:1; }
.argo-feature-item dt {
    font-size:18px; font-weight:700; color:#1e293b;
    margin-bottom:8px; line-height:1.35; letter-spacing:-0.02em;
}
.argo-feature-item dd {
    font-size:15px; font-weight:400; color:#64748b;
    line-height:1.65; letter-spacing:-0.01em;
}
.argo-showcase .argo-showcase-wrap { opacity:0; transform:translateY(30px); }
.argo-showcase.subOn .argo-showcase-wrap {
    animation:ani_2 0.8s 0.2s;
    animation-fill-mode:both;
}
@media screen and (max-width:1280px){
    .argo-showcase-wrap { gap:50px; }
    .argo-layer-graphic { flex:0 0 480px; }
}
@media screen and (max-width:1024px){
    .argo-showcase { padding:100px 0 120px; }
    .argo-showcase-wrap { flex-direction:column; gap:50px; }
    .argo-layer-graphic { flex:none; max-width:600px; width:100%; margin:0 auto; }
    .argo-layer-list { flex:0 0 auto; }
    .argo-feature-list { width:100%; }
}
@media screen and (max-width:768px){
    .argo-showcase { padding:80px 0 100px; }
    .argo-showcase-wrap { margin-top:40px; gap:36px; }
    .argo-layer-graphic { padding:24px 20px 20px; }
    .argo-graphic-tit { font-size:16px; margin-bottom:20px; }
    .argo-layer-item { padding:12px 14px; gap:12px; }
    .argo-layer-item .argo-step-name { font-size:14px; }
    .argo-layer-item .argo-step-desc { font-size:12px; }
    .argo-arrow { font-size:11px; padding:4px 0; }
    .argo-feature-item { padding:18px 20px; gap:16px; }
    .argo-feature-icon { width:48px; height:48px; }
    .argo-feature-icon img { width:28px; height:28px; }
    .argo-feature-item dt { font-size:17px; }
    .argo-feature-item dd { font-size:14px; }
}
@media screen and (max-width:640px){
    .argo-showcase { padding:60px 0 80px; }
    .argo-showcase .subTitle .txtbox { font-size:15px; }
    .argo-showcase-wrap { margin-top:32px; gap:28px; }
}

/* Load Balancer showcase (cloudflare_smartrouting.php) - 좌: 특징, 우: 그래픽 */
.lb-showcase { padding:120px 0 140px; }
.lb-showcase .subTitle .txtbox { margin-top:12px; font-size:17px; color:#666; line-height:1.5; }
.lb-showcase-wrap {
    margin-top:60px;
    display:flex;
    align-items:flex-start;
    gap:40px;
}
.lb-feature-list {
    flex:1;
    display:flex;
    flex-direction:column;
    gap:24px;
}
.lb-feature-item {
    display:flex;
    align-items:flex-start;
    gap:20px;
    padding:22px 24px;
    border-radius:16px;
    border:1px solid #e2e8f0;
    background:#fff;
}
.lb-feature-icon {
    flex-shrink:0;
    width:52px; height:52px;
    border-radius:12px;
    background:linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
.lb-feature-icon img { width:32px; height:32px; }
.lb-feature-item dl { flex:1; }
.lb-feature-item dt {
    font-size:18px; font-weight:700; color:#1e293b;
    margin-bottom:8px; line-height:1.35; letter-spacing:-0.02em;
}
.lb-feature-item dd {
    font-size:15px; font-weight:400; color:#64748b;
    line-height:1.65; letter-spacing:-0.01em;
}
.lb-layer-graphic {
    flex:0 0 600px;
    display:flex;
    flex-direction:column;
    padding:28px 28px 28px;
    border-radius:16px;
    background:#1e293b;
    border:1px solid #334155;
}
.lb-graphic-tit {
    font-size:15px; font-weight:700; color:rgba(255,255,255,0.95);
    letter-spacing:0.02em; margin-bottom:22px;
    padding-bottom:14px; border-bottom:1px solid #334155;
}
.lb-pool-list { display:flex; flex-direction:column; gap:20px; }
.lb-pool-item {
    display:flex;
    flex-direction:row;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    padding:22px 20px;
    border-radius:12px;
    border:none;
}
.lb-pool-left { display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; }
.lb-pool-item.active {
    background:color-mix(in srgb, var(--mainColor) 12%, transparent);
    box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--mainColor) 35%, transparent);
}
.lb-pool-item.standby {
    background:rgba(30,41,59,0.5);
    box-shadow:inset 0 0 0 1px rgba(148,163,184,0.2);
}
.lb-pool-status {
    font-size:14px; font-weight:700; color:var(--mainColor);
    letter-spacing:0.02em; margin-bottom: 8px;
}
.lb-pool-item.standby .lb-pool-status { color:#94a3b8; }
.lb-pool-name { font-size:16px;margin-bottom: 8px;font-weight:600; color:rgba(255,255,255,0.95); }
.lb-pool-metric { font-size:13px; color:#94a3b8; line-height:1.4; }
.lb-pool-chip {
    flex-shrink:0;
    display:inline-block;
    padding:6px 14px;
    font-size:12px; font-weight:600; color:rgba(255,255,255,0.95);
    background:color-mix(in srgb, var(--mainColor) 30%, transparent);
    border:1px solid color-mix(in srgb, var(--mainColor) 50%, transparent);
    border-radius:8px;
}
.lb-pool-item.standby .lb-pool-chip {
    background:rgba(148,163,184,0.25);
    border-color:rgba(148,163,184,0.5);
}
.lb-status-footer {
    margin-top:20px;
    padding:16px 18px;
    border-radius:10px;
    background:#0f172a;
    border:1px solid #334155;
    text-align:center;
}
.lb-footer-txt { font-size:13px; font-weight:500; color:#94a3b8; }
.lb-showcase .lb-showcase-wrap { opacity:0; transform:translateY(30px); }
.lb-showcase.subOn .lb-showcase-wrap {
    animation:ani_2 0.8s 0.2s;
    animation-fill-mode:both;
}
@media screen and (max-width:1280px){
    .lb-showcase-wrap { gap:50px; }
    .lb-layer-graphic { flex:0 0 480px; }
}
@media screen and (max-width:1024px){
    .lb-showcase { padding:100px 0 120px; }
    .lb-showcase-wrap { flex-direction:column-reverse; gap:50px; }
    .lb-layer-graphic { flex:none; max-width:600px; width:100%; margin:0 auto; }
    .lb-feature-list { width:100%; }
}
@media screen and (max-width:768px){
    .lb-showcase { padding:80px 0 100px; }
    .lb-showcase-wrap { margin-top:40px; gap:36px; }
    .lb-layer-graphic { padding:24px 20px 20px; }
    .lb-graphic-tit { font-size:16px; margin-bottom:20px; }
    .lb-pool-item { padding:14px 16px; }
    .lb-feature-item { padding:18px 20px; gap:16px; }
    .lb-feature-icon { width:48px; height:48px; }
    .lb-feature-icon img { width:28px; height:28px; }
    .lb-feature-item dt { font-size:17px; }
    .lb-feature-item dd { font-size:14px; }
}
@media screen and (max-width:640px){
    .lb-showcase { padding:60px 0 80px; }
    .lb-showcase .subTitle .txtbox { font-size:15px; }
    .lb-showcase-wrap { margin-top:32px; gap:28px; }
}