@charset "utf-8"; /* ============================================================ maint.css — Maintenance 소개 4화면 월별 유지관리 734:5641 · 건별 유지관리 807:2934 웹호스팅·서버 807:3774 · 보안관리 807:6572 ============================================================ 이 파일은 **새로 만든 것**이다. style.css · renewal-fix.css · header-fix.css 는 다른 분이 작업 중이라 건드리지 않았다. 여기서만 고친다. 크기는 모두 clamp(최소, N vw, 시안값) 꼴이다. 1920 에서는 시안 숫자 그대로이고, 좁아지면 같은 비율로 줄어든다. N vw = 시안값 ÷ 1920 × 100 ============================================================ */ /* ── 이 화면들만 대메뉴 글자를 흰색으로 ─────────────────── 시안(734:5650)은 로고는 그대로 두고 Work·Maintenance… 만 흰 글씨다. 에 클래스를 붙이려면 공용 head.php 를 고쳐야 해서, 대신 「이 화면에 .mt-hero 가 있으면」으로 찾아 들어간다. */ body:has(.mt-hero) .site-header:not(.is-scrolled) .gnb__list > li > a { color: #fff; } body:has(.mt-hero) .site-header:not(.is-scrolled) .gnb__list > li > a::after { background: #fff; } /* ============================================================ 1. 공통 상단 — 그러데이션 배너 + 하위 메뉴 알약 ============================================================ */ .mt-hero { position: relative; /* 알약 메뉴 윗선 94 (시안 734:5741) */ padding: clamp(74px, 4.896vw, 94px) var(--gutter) clamp(60px, 6.719vw, 129px); text-align: center; } /* 배경 — 시안 734:5646(gradient-mesh-02)을 2배로 내보낸 그림. 그러데이션 메쉬라 CSS 로는 흉내만 나서, 시안 그림을 그대로 쓴다. */ .mt-hero__bg { position: absolute; left: 0; top: 0; z-index: 0; display: block; width: 100%; height: 100%; border-radius: 0 0 clamp(40px, 6.25vw, 120px) clamp(40px, 6.25vw, 120px); background: #cdd6fa center / cover no-repeat; pointer-events: none; } .mt-hero--monthly .mt-hero__bg { background-image: url("../img/maint/hero-monthly.png"); } .mt-hero--caseby .mt-hero__bg { background-image: url("../img/maint/hero-caseby.png"); } .mt-hero--webhosting .mt-hero__bg { background-image: url("../img/maint/hero-webhosting.png"); } .mt-hero--ssl .mt-hero__bg { background-image: url("../img/maint/hero-ssl.png"); } /* 하위 메뉴 알약 — 시안 734:5741 (검정 .8 · 흰 테두리 .2 · 높이 60) */ .mt-nav { position: relative; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: clamp(14px, 1.563vw, 30px); height: clamp(44px, 3.125vw, 60px); max-width: 100%; padding: 0 clamp(20px, 2.604vw, 50px); border: 1px solid rgba(255, 255, 255, .2); border-radius: 300px; background: rgba(0, 0, 0, .8); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-size: clamp(13px, .833vw, 16px); font-weight: 600; line-height: 1.6; white-space: nowrap; } .mt-nav a { color: #fff; transition: color .25s ease; } .mt-nav a:hover { color: #ffd8c8; } .mt-nav a.is-current { color: #ffd8c8; } /* 제목 — 알약 아랫선 154 에서 240 까지 86 (시안 807:7142) */ .mt-hero__title { position: relative; z-index: 1; margin: clamp(34px, 4.479vw, 86px) 0 0; font-size: clamp(26px, 2.188vw, 42px); font-weight: 800; line-height: 1.6; color: #fff; } .mt-hero__lead { position: relative; z-index: 1; margin: 4px 0 0; font-size: clamp(15px, 1.25vw, 24px); font-weight: 400; line-height: 1.4; color: #fff; } /* ============================================================ 2. 본문 공통 ============================================================ */ .mt-body { padding: 0 var(--gutter); } .mt-body > .inner { max-width: 1480px; /* 시안 x220~1700 */ margin: 0 auto; } /* 큰 제목 — 시안 746:6496 (ExtraBold 42 · 배너 아래 60) */ .mt-h2 { margin: clamp(34px, 3.125vw, 60px) 0 0; font-size: clamp(24px, 2.188vw, 42px); font-weight: 800; line-height: 1.6; color: #000; } /* 가운데 단추 — style.css 의 .btn-gradient 를 그대로 쓰되 폭만 글자에 맞춘다 (시안 750:6880 은 240.76 이라 250 고정폭보다 글자에 맞추는 편이 가깝다) */ .mt-btnwrap { display: flex; justify-content: center; margin-top: clamp(20px, 1.927vw, 37px); margin-bottom: 0; } /* 시안 750:6882 — Bold 18, 상자 240.76×63 */ .mt-btnwrap .btn-gradient { width: auto; min-width: clamp(180px, 12.54vw, 241px); font-weight: 700; } /* ============================================================ 3. 월별 유지관리 — 유지보수 서비스 상품 표 (시안 790:2083) ============================================================ 시안은 첫 칸 288 + 나머지 넉 칸 298 로 나뉜다 (288 + 298×4 = 1480). */ .mt-tbl { --mt-col: 20.135%; /* 298 / 1480 */ margin-top: clamp(12px, 1.042vw, 20px); /* 제목 아랫선 601 → 표 621 */ font-size: clamp(12px, .833vw, 16px); } .mt-tbl table { width: 100%; /* 줄 사이 틈은 border-spacing 대신 **투명 아래테두리**로 만든다. border-spacing 은 표 위·아래와 thead/tbody 경계에도 같은 틈을 넣어 시안(머리줄 아래 6, 줄 사이 5)과 어긋난다. */ border-collapse: separate; border-spacing: 0; table-layout: fixed; } .mt-tbl th, .mt-tbl td { padding: 0; text-align: center; vertical-align: middle; font-weight: 500; line-height: 1.6; color: #000; } .mt-tbl col.mt-tbl__c1 { width: 19.459%; } /* 288 / 1480 */ .mt-tbl col.mt-tbl__cv { width: var(--mt-col); } /* 머리 줄 — 연보라 띠, 위 모서리만 둥글다 */ .mt-tbl thead th { /* box-sizing:border-box 라 투명 테두리도 이 높이 안에 들어간다 — 60+6 */ height: clamp(50px, 3.438vw, 66px); background: #e0e4fc; font-size: clamp(13px, .938vw, 18px); font-weight: 700; } .mt-tbl thead th:first-child { border-radius: clamp(12px, 1.25vw, 24px) 0 0 0; } .mt-tbl thead th:last-child { border-radius: 0 clamp(12px, 1.25vw, 24px) 0 0; } /* 몸통 줄 — 아주 옅은 보라 칸 */ .mt-tbl thead th { border-bottom: clamp(4px, .313vw, 6px) solid transparent; background-clip: padding-box; } .mt-tbl tbody tr > * { height: clamp(49px, 3.385vw, 65px); /* 60 + 아래 틈 5 */ border-bottom: clamp(3px, .26vw, 5px) solid transparent; background: rgba(246, 247, 255, .8); background-clip: padding-box; } /* 한 칸짜리 줄(colspan)은 양쪽 모두 둥글게 */ .mt-tbl tbody tr > *:first-child:last-child { border-radius: clamp(5px, .417vw, 8px); } .mt-tbl tbody tr:last-child > * { height: clamp(46px, 3.125vw, 60px); border-bottom: 0; } .mt-tbl tbody tr > *:first-child { border-radius: clamp(5px, .417vw, 8px) 0 0 clamp(5px, .417vw, 8px); } .mt-tbl tbody tr > *:last-child { border-radius: 0 clamp(5px, .417vw, 8px) clamp(5px, .417vw, 8px) 0; } /* 서비스명 칸 — 흰 네모 아이콘 + 이름 */ .mt-tbl__name { display: flex; align-items: center; gap: clamp(6px, .677vw, 13px); /* 아이콘 네모 오른끝 81 → 글자 94 */ padding-left: clamp(14px, 2.135vw, 41px); /* 시안 left 41 */ text-align: left; } .mt-tbl__ico { display: flex; align-items: center; justify-content: center; flex: none; width: clamp(28px, 2.083vw, 40px); height: clamp(28px, 2.083vw, 40px); border: 1px solid #938eff; border-radius: 4px; background: #fff; } .mt-tbl__ico img { display: block; width: clamp(18px, 1.354vw, 26px); height: clamp(18px, 1.354vw, 26px); } .mt-tbl td.mt-tbl__cell--name { text-align: left; } /* 없는 항목 — 회색 X */ .mt-tbl__no { display: inline-block; width: clamp(17px, 1.25vw, 24px); height: clamp(17px, 1.25vw, 24px); vertical-align: middle; } /* 맨 아랫줄 — 검정 띠 + 월 사용료 */ .mt-tbl tbody tr.mt-tbl__sum > * { background: rgba(0, 0, 0, .8); } .mt-tbl__sum .mt-tbl__price { color: #b3a0ff; font-size: clamp(13px, .938vw, 18px); font-weight: 800; } .mt-tbl__pill { display: inline-flex; align-items: center; gap: clamp(5px, .469vw, 9px); width: clamp(120px, 10vw, 192px); height: clamp(28px, 2.083vw, 40px); padding-left: clamp(16px, 2.396vw, 46px); /* 알약 41 → 아이콘 87 */ border-radius: clamp(5px, .417vw, 8px); background: #f6f7ff; color: #6136d9; font-size: clamp(12px, .833vw, 16px); font-weight: 800; } /* ── 마우스가 얹힌 칸 (자리는 maint.js 가 옮긴다) ────────── 웹호스팅 표는 같은 .mt-tbl 을 쓰지만 보라 알약으로 따로 표시하므로 뺀다. 좁은 화면에서는 줄이 세로로 쌓여 「칸」이 없으므로 그리지 않는다. */ @media (min-width: 768px) { .mt-tbl:not(.wh-tbl) thead th, .mt-tbl:not(.wh-tbl) tbody tr > * { transition: background-color .18s ease, color .18s ease; } .mt-tbl:not(.wh-tbl) thead th.is-pick { background: #b3a0ff; background-clip: padding-box; /* 줄 사이 틈을 만드는 투명 테두리를 지키려고 */ color: #fff; } .mt-tbl:not(.wh-tbl) tbody tr > .is-pick { background: rgba(179, 160, 255, .42); background-clip: padding-box; } /* 맨 아랫줄(검정 띠)에서도 그 칸만 보라로 이어진다 */ .mt-tbl:not(.wh-tbl) tbody tr.mt-tbl__sum > .is-pick { background: rgba(97, 54, 217, .9); background-clip: padding-box; } .mt-tbl:not(.wh-tbl) .mt-tbl__sum .mt-tbl__price.is-pick { color: #fff; } } .mt-tbl__pill img { flex: none; width: clamp(20px, 1.667vw, 32px); height: clamp(20px, 1.667vw, 32px); } /* 표 아래 유의사항 — 시안 750:6859 (14 Regular, 표보다 9 왼쪽) */ .mt-notes { margin: clamp(14px, 1.25vw, 24px) 0 0 clamp(-9px, -.469vw, 0px); margin-bottom: 0; padding-left: clamp(14px, 1.094vw, 21px); list-style: disc; font-size: clamp(12px, .729vw, 14px); font-weight: 400; line-height: 1.6; color: #000; } /* ── 아래 CTA 띠 — 시안 간격(단추 아래 53, 푸터 위 151) 에 맞춘다 ── */ body:has(.mt-hero) .wv-sec--cta { padding: clamp(28px, 2.76vw, 53px) 0 clamp(60px, 7.865vw, 151px); } /* ============================================================ 4. 좁은 화면 ============================================================ */ @media (max-width: 1024px) { /* 알약 메뉴는 한 줄에 다 안 들어간다 — 옆으로 밀어 본다 */ .mt-hero { padding-left: 0; padding-right: 0; } .mt-nav { display: flex; width: calc(100% - 32px); margin: 0 16px; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; } .mt-nav::-webkit-scrollbar { display: none; } .mt-nav a { flex: none; } .mt-hero__title, .mt-hero__lead { padding: 0 16px; } } @media (max-width: 767px) { /* 표는 다섯 칸이 한 화면에 안 들어간다 — 줄마다 카드로 바꾼다 */ .mt-tbl thead { display: none; } .mt-tbl table, .mt-tbl tbody, .mt-tbl tr { display: block; width: 100%; } .mt-tbl tbody tr { margin-bottom: 10px; padding: 12px 14px; border-radius: 10px; background: rgba(246, 247, 255, .8); } .mt-tbl tbody tr > * { display: flex; align-items: center; justify-content: space-between; height: auto; padding: 7px 0; background: none; border-radius: 0; text-align: right; } .mt-tbl tbody tr > *:first-child, .mt-tbl tbody tr > *:last-child { border-radius: 0; } /* 머리글을 각 칸 앞에 붙여 준다 (data-th 는 화면 마크업에서 넣는다) */ .mt-tbl tbody td[data-th]::before { content: attr(data-th); flex: none; margin-right: 12px; color: rgba(0, 0, 0, .55); font-weight: 600; } .mt-tbl td.mt-tbl__cell--name { padding-bottom: 10px; border-bottom: 1px solid rgba(0, 0, 0, .07); } .mt-tbl__name { padding-left: 0; } .mt-tbl tbody tr.mt-tbl__sum { background: rgba(0, 0, 0, .8); } .mt-tbl__sum .mt-tbl__cell--name { border-bottom-color: rgba(255, 255, 255, .15); } .mt-tbl__sum td[data-th]::before { color: rgba(255, 255, 255, .6); } .mt-tbl__pill { width: 100%; justify-content: center; padding-left: 0; } } /* 배너 그러데이션이 아주 느리게 숨쉬듯 움직인다 (보이는 동안만 — maint.js) */ .mt-hero__bg.is-live { animation: mtHeroDrift 18s ease-in-out infinite alternate; } @keyframes mtHeroDrift { from { background-position: 50% 50%; background-size: cover; } to { background-position: 46% 54%; background-size: 108% auto; } } @media (prefers-reduced-motion: reduce) { .mt-hero__bg.is-live { animation: none; } } /* ── 아래 CTA 띠 — 이 화면 시안(734:6408)은 공용 CTA 와 글자 크기가 조금 다르다. 공용 .wv-cta 는 Work 등 다른 화면도 쓰므로 건드리지 않고 여기서만 덮는다. 제목 32 / 설명 18 · 안쪽 여백 위 44 · 아래 41 (시안 202 높이) */ body:has(.mt-hero) .wv-cta { padding: clamp(24px, 2.292vw, 44px) clamp(24px, 3.906vw, 75px) clamp(24px, 2.135vw, 41px); } body:has(.mt-hero) .wv-cta__title { font-size: clamp(20px, 1.667vw, 32px); } body:has(.mt-hero) .wv-cta__desc { font-size: clamp(13px, .938vw, 18px); } /* ============================================================ 5. 건별 유지관리 (시안 807:2934) ============================================================ */ /* 머리말 — 시안 820:9074 (배너 아래 60) */ .cb-intro { margin-top: clamp(34px, 3.125vw, 60px); max-width: clamp(320px, 48.438vw, 930px); } .cb-intro__h { margin: 0; font-size: clamp(24px, 2.188vw, 42px); font-weight: 800; line-height: 1.6; color: #000; } .cb-intro__p { margin: clamp(8px, .677vw, 13px) 0 0; /* 글상자 134 → 147 */ font-size: clamp(14px, .938vw, 18px); font-weight: 500; line-height: 1.6; color: #000; } /* 「이런 업체에게 필요합니다.」 — 시안 807:3047 (머리말 아래 108) */ .cb-h3 { margin: clamp(28px, 3.438vw, 66px) 0 0; /* 머리말 상자(710) 아래 66 */ font-size: clamp(17px, 1.25vw, 24px); font-weight: 800; line-height: 1.6; color: #000; text-align: center; } /* 석 장 카드 — 480×495, 사이 20 (시안 807:3256·3263·3273) */ .cb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.042vw, 20px); margin: clamp(12px, 1.094vw, 21px) 0 0; /* 제목 아래 21 */ padding: 0; list-style: none; } .cb-card { position: relative; min-height: clamp(360px, 25.781vw, 495px); padding: 0 clamp(16px, 1.458vw, 28px) clamp(20px, 1.5vw, 28px); border: 1px solid #b3beff; border-radius: 8px; background: rgba(255, 255, 255, .8); box-shadow: 16px 17px 14px rgba(0, 0, 0, .02), 7px 8px 11px rgba(0, 0, 0, .03), 2px 2px 6px rgba(0, 0, 0, .03); overflow: hidden; transition: transform .35s cubic-bezier(.2, .8, .25, 1), box-shadow .35s ease; } .cb-card:hover { transform: translateY(-6px); box-shadow: 18px 22px 30px rgba(40, 40, 110, .10), 4px 6px 12px rgba(0, 0, 0, .05); } /* 그림 — 시안에서 뽑은 그대로. 자리도 시안 좌표 그대로다. 1: 198×204 (left 141 · top 31) / 2: 198×200 (141 · 35) / 3: 301.5×278.5 (141 · -29) */ .cb-card__vis { /* span 은 기본이 inline 이라 높이가 0 이 된다. 그러면 안에 있는 그림의 max-width:100%(style.css) 가 0 이 되어 그림이 통째로 사라진다. */ display: block; position: relative; height: clamp(170px, 11.979vw, 230px); } .cb-card__vis img { position: absolute; left: 50%; display: block; transform: translateX(-50%); } .cb-card:nth-child(1) .cb-card__vis img { top: clamp(12px, 1.615vw, 31px); width: clamp(120px, 10.313vw, 198px); } .cb-card:nth-child(2) .cb-card__vis img { top: clamp(14px, 1.823vw, 35px); width: clamp(120px, 10.313vw, 198px); } .cb-card:nth-child(3) .cb-card__vis img { top: clamp(-18px, -1.51vw, 0px); width: clamp(183px, 15.703vw, 301.5px); } /* 제목 — SemiBold 20 보라, 카드 위에서 256 */ .cb-card__t { margin: clamp(10px, 1.354vw, 26px) 0 0; /* 그림칸(230) 아래 26 → 256 */ font-size: clamp(15px, 1.042vw, 20px); font-weight: 600; line-height: 1.4; color: #6136d9; text-align: center; } /* 설명 — Regular 14, 카드 위에서 338 */ .cb-card__list { margin: clamp(16px, 1.51vw, 29px) 0 0; padding-left: clamp(14px, 1.094vw, 21px); list-style: disc; font-size: clamp(12px, .729vw, 14px); font-weight: 400; line-height: 1.6; color: #000; text-align: left; } /* 「유지보수 + 웹호스팅 서비스」 — 시안 807:3033 (카드 아래 43) */ .cb-h4 { margin: clamp(24px, 2.24vw, 43px) 0 0; font-size: clamp(17px, 1.25vw, 24px); font-weight: 800; line-height: 1.6; color: #000; } /* 가격표 제목 아래 한 줄 */ .cb-price__lead { margin: clamp(4px, .313vw, 6px) 0 0; font-size: clamp(12px, .833vw, 16px); font-weight: 500; line-height: 1.6; color: #6b6880; } /* 꼭지 제목 — 앞에 보라 막대 */ .cb-price__grp { display: flex; align-items: center; gap: clamp(7px, .573vw, 11px); margin: clamp(20px, 1.771vw, 34px) 0 0; font-size: clamp(15px, 1.042vw, 20px); font-weight: 800; line-height: 1.6; color: #0a090b; } .cb-price__grp::before { content: ""; flex: none; width: clamp(3px, .208vw, 4px); height: clamp(15px, 1.042vw, 20px); border-radius: 2px; background: #6136d9; } /* 요금 칸 — 735×80 두 줄씩 (시안 807:3289) */ .cb-price { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, .521vw, 10px) clamp(8px, .573vw, 11px); margin: clamp(12px, 1.042vw, 20px) 0 0; /* 제목 아래 20 */ padding: 0; list-style: none; } .cb-price li { display: flex; align-items: center; gap: clamp(8px, .781vw, 15px); min-height: clamp(52px, 3.49vw, 67px); padding: 0 clamp(14px, 1.458vw, 28px) 0 clamp(10px, .833vw, 16px); border: 1px solid transparent; border-radius: 10px; background: #f4f3fd; transition: border-color .25s ease, background .25s ease, transform .25s ease; } .cb-price li:hover { transform: translateY(-2px); border-color: #b3a0ff; background: #fff; } .cb-price__ico { display: flex; align-items: center; justify-content: center; flex: none; width: clamp(28px, 1.927vw, 37px); height: clamp(28px, 1.927vw, 37px); border: 1px solid #d5cdf8; border-radius: 8px; background: #fff; color: #6136d9; } .cb-price__ico img, .cb-price__ico svg { display: block; width: clamp(17px, 1.146vw, 22px); height: clamp(17px, 1.146vw, 22px); } .cb-price__n { flex: 1; min-width: 0; font-size: clamp(14px, .938vw, 18px); font-weight: 600; line-height: 1.4; color: #000; } /* 이름 아래 딸린 설명 — 있는 줄만 두 줄이 된다 */ .cb-price__d { display: block; margin-top: 2px; font-size: clamp(10px, .677vw, 13px); font-style: normal; font-weight: 400; line-height: 1.5; color: #8b88a0; } .cb-price__u { flex: none; font-size: clamp(10px, .677vw, 13px); font-weight: 400; line-height: 1.6; text-align: right; color: #8b88a0; } .cb-price__v { flex: none; margin-left: clamp(5px, .417vw, 8px); font-size: clamp(14px, 1.042vw, 20px); font-weight: 800; line-height: 1.6; color: #5246c4; white-space: nowrap; } .cb-price__v em { font-style: normal; font-weight: 400; } /* 유지보수 업체 — 옅은 회색 띠 (시안 807:6571 · #ededed 30%) */ .cb-band { margin-top: clamp(30px, 3.177vw, 61px); /* 단추 아래 61 */ padding: clamp(28px, 2.813vw, 54px) var(--gutter) clamp(30px, 3.125vw, 60px); background: rgba(237, 237, 237, .3); } .cb-band__in { max-width: 1480px; margin: 0 auto; } .cb-band__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .cb-band__head h2 { margin: 0; font-size: clamp(17px, 1.25vw, 24px); font-weight: 800; line-height: 1.6; color: #000; } .cb-arrows { display: flex; gap: clamp(6px, .391vw, 7.5px); } .cb-arrows button { display: flex; align-items: center; justify-content: center; width: clamp(20px, 1.328vw, 25.5px); height: clamp(20px, 1.328vw, 25.5px); padding: 0; border: 0; border-radius: 50%; background: none; color: #111; cursor: pointer; transition: color .2s ease, transform .2s ease; } .cb-arrows button:hover { color: #6136d9; transform: scale(1.12); } .cb-arrows button[disabled] { opacity: .3; cursor: default; transform: none; } .cb-arrows svg { display: block; width: 100%; height: 100%; } /* 로고 줄 — 200×80 타일, 사이 13 (시안 807:3367) */ .cb-logos { display: flex; gap: clamp(8px, .677vw, 13px); margin: clamp(12px, 1.25vw, 24px) 0 0; /* 제목 상자 아래 24 */ padding: 0; list-style: none; overflow-x: auto; /* 저절로 흐르게 하려고 scroll-snap 은 걸지 않는다 — 한 칸씩 붙잡아서 끊긴다. scroll-behavior 도 auto 여야 매 프레임 미는 값이 먹는다(화살표는 scrollBy 로 따로 부드럽게). */ scroll-behavior: auto; scrollbar-width: none; overscroll-behavior-x: contain; } .cb-logos::-webkit-scrollbar { display: none; } .cb-logos li { display: flex; align-items: center; justify-content: center; flex: none; width: clamp(130px, 10.417vw, 200px); height: clamp(56px, 4.167vw, 80px); /* 시안 로고 자리는 125×48 (왼쪽 40) — 좌우 37.5 를 빼면 딱 125 가 된다. 실제 로고는 가로세로 비가 제각각이라 그 안에서 가운데 맞춤으로 둔다. */ padding: 0 clamp(12px, 1.953vw, 37.5px); border: 1px solid #ddd; border-radius: 4px; background: #fff; } .cb-logos li > a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; } .cb-logos img { display: block; max-width: 100%; max-height: clamp(32px, 2.5vw, 48px); width: auto; height: auto; object-fit: contain; /* 메인 Clients 는 회색으로 깔지만 여기서는 원래 색 그대로 */ filter: none; opacity: 1; } .cb-note { margin: clamp(10px, .833vw, 16px) 0 0 clamp(-7px, -.365vw, 0px); padding-left: clamp(14px, 1.094vw, 21px); list-style: disc; font-size: clamp(12px, .729vw, 14px); font-weight: 400; line-height: 1.6; color: #000; } @media (max-width: 1024px) { .cb-cards { grid-template-columns: 1fr; } .cb-card { min-height: 0; padding-bottom: 24px; } .cb-card__vis { height: 200px; } .cb-price { grid-template-columns: 1fr; } } @media (max-width: 560px) { .cb-price li { flex-wrap: wrap; padding: 12px 14px; } .cb-price__n { flex: 1 0 calc(100% - 52px); } .cb-price__u, .cb-price__v { margin-left: auto; } } /* 건별 화면은 회색 띠 다음이라 CTA 위 여백이 49 다 (시안 807:3017) */ .cb-band + .wv-sec--cta { padding-top: clamp(26px, 2.552vw, 49px); } /* ============================================================ 6. 웹호스팅 · 서버 (시안 807:3774) ============================================================ */ .wh-h2 { margin: clamp(30px, 2.396vw, 46px) 0 0; /* 배너 아래 46 */ font-size: clamp(24px, 2.188vw, 42px); font-weight: 800; line-height: 1.6; color: #000; } /* 한 화면 안의 두 번째 꼭지(「서버」) — 앞 꼭지와 갈라 보이게 크게 띄운다 */ .wh-h2--sec { margin-top: clamp(48px, 4.896vw, 94px); } .wh-lead { margin: 0; font-size: clamp(14px, 1.042vw, 20px); font-weight: 500; line-height: 1.6; color: #000; } /* 특징 넉 장 — 360×90, 사이 13~14 (시안 807:4239) */ .wh-feats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, .729vw, 14px); margin: clamp(16px, 1.771vw, 34px) 0 0; padding: 0; list-style: none; } .wh-feats li { display: flex; align-items: flex-start; gap: clamp(8px, .625vw, 12px); min-height: clamp(66px, 4.688vw, 90px); padding: clamp(12px, .99vw, 19px) clamp(10px, 1.042vw, 20px) clamp(12px, .99vw, 19px) clamp(14px, 1.823vw, 35px); border-radius: 8px; /* 시안은 같은 그러데이션을 20% 로 깔았다 */ background: linear-gradient(107.31deg, rgba(220, 222, 253, .2) 1.59%, rgba(158, 111, 208, .2) 98.65%); font-size: clamp(12px, .833vw, 16px); font-weight: 500; line-height: 1.6; color: #000; } .wh-feats img { flex: none; width: clamp(24px, 1.667vw, 32px); height: clamp(24px, 1.667vw, 32px); } /* VAT 별도 — 표 위 오른쪽 */ .wh-vat { margin: clamp(8px, .781vw, 15px) 0 0; font-size: clamp(12px, .729vw, 14px); font-weight: 400; line-height: 1.6; color: #000; text-align: right; } /* 사양 표 — 여섯 칸 (시안 807:4258) 이름칸 224.3 + 나머지 다섯 칸 251.14 (합 1480) */ .wh-tbl col.wh-tbl__c1 { width: 15.155%; } .wh-tbl col.wh-tbl__cv { width: 16.969%; } /* 「일반형」 칸은 보라 알약으로 강조된다 (시안 807:4261 — 180×40) ::before 는 좁은 화면에서 칸 이름표로 쓰이므로 알약은 768 이상에서만 그린다. */ .wh-tbl .is-pick { position: relative; } @media (min-width: 768px) { .wh-tbl .is-pick::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: 0; width: clamp(96px, 9.375vw, 180px); height: clamp(28px, 2.083vw, 40px); border-radius: 4px; background: #b3a0ff; transform: translate(-50%, -50%); } .wh-tbl thead .is-pick::before { top: calc(50% - clamp(2px, .156vw, 3px)); } .wh-tbl thead .is-pick { color: #fff; font-weight: 800; } /* 마우스가 얹힌 칸으로 알약이 옮겨 갈 때 스르르 펴지게 (자리는 maint.js 가 옮긴다) */ .wh-tbl .is-pick::before { animation: wh-pick .18s ease both; } @keyframes wh-pick { from { opacity: 0; transform: translate(-50%, -50%) scaleX(.85); } } /* 머리글 글자색(보라 → 흰색)도 같이 넘어가게 */ .wh-tbl thead th + th, .wh-tbl tbody td { transition: color .18s ease; } } @media (prefers-reduced-motion: reduce) { .wh-tbl .is-pick::before { animation: none; } } .wh-tbl .is-pick > span { position: relative; z-index: 1; } /* 맨 아랫줄 — 검정 띠 한 줄 */ .wh-tbl tbody tr.wh-tbl__foot > * { background: rgba(0, 0, 0, .8); color: #b3a0ff; font-size: clamp(13px, .938vw, 18px); text-align: center; } .wh-tbl__foot b { font-weight: 800; } .wh-tbl__foot span { font-weight: 600; } /* 추가옵션 — 480×238 석 장 (시안 807:3949) */ .wh-h3 { margin: clamp(18px, 1.563vw, 30px) 0 0; font-size: clamp(17px, 1.25vw, 24px); font-weight: 800; line-height: 1.6; color: #000; } .wh-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.094vw, 21px); margin: clamp(8px, .781vw, 15px) 0 0; padding: 0; list-style: none; } .wh-opt { padding: clamp(18px, 1.615vw, 31px) clamp(14px, 1.146vw, 22px) clamp(16px, 1.458vw, 28px) clamp(14px, 1.302vw, 25px); border: 1px solid #b3beff; border-radius: 8px; background: rgba(255, 255, 255, .8); box-shadow: 16px 17px 14px rgba(0, 0, 0, .02), 7px 8px 11px rgba(0, 0, 0, .03), 2px 2px 6px rgba(0, 0, 0, .03); } .wh-opt__h { display: flex; align-items: center; justify-content: center; gap: clamp(6px, .521vw, 10px); margin: 0 0 clamp(12px, 1.198vw, 23px); font-size: clamp(15px, 1.042vw, 20px); font-weight: 600; line-height: 1.4; color: #000; } .wh-opt__h img { width: clamp(20px, 1.354vw, 26px); height: clamp(20px, 1.354vw, 26px); } .wh-opt table { width: 100%; border-collapse: separate; border-spacing: 0 clamp(1px, .104vw, 2px); table-layout: fixed; } .wh-opt td { height: clamp(30px, 2.083vw, 40px); border-radius: 4px; font-size: clamp(12px, .833vw, 16px); line-height: 1.6; text-align: center; color: #000; } .wh-opt td:first-child { background: #ececec; font-weight: 700; } .wh-opt td:last-child { border: 1px solid #ddd; font-weight: 500; } /* 남보라 띠 — 시안 807:4322 (#252146 · 798×70) */ .wh-band { margin: clamp(14px, 1.354vw, 26px) auto 0; max-width: clamp(320px, 41.563vw, 798px); /* 시안 글줄은 754 인데 칸(798)에서 좌우 25 를 빼면 748 이라 한 글자가 넘친다. 시안은 글상자가 칸 밖으로 나가 있어 한 줄이다 — 좌우 여백을 줄여 맞춘다. */ padding: clamp(11px, .833vw, 16px) clamp(8px, .625vw, 12px); background: #252146; color: #fff; font-size: clamp(15px, 1.25vw, 24px); font-weight: 800; line-height: 1.6; text-align: center; } .wh-band__sub { margin: clamp(12px, 1.094vw, 21px) auto 0; max-width: clamp(320px, 43.177vw, 829px); font-size: clamp(13px, .938vw, 18px); font-weight: 500; line-height: 1.6; color: #000; text-align: center; } /* 3가지 서버 도입 방식 — 480×520 석 장 (시안 807:4327) */ .wh-h4 { margin: clamp(18px, 1.615vw, 31px) 0 0; /* 안내 글 아래 31 */ font-size: clamp(17px, 1.25vw, 24px); font-weight: 800; line-height: 1.6; color: #000; } .wh-types { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.042vw, 20px); margin: clamp(8px, .729vw, 14px) 0 0; padding: 0; list-style: none; } .wh-type { position: relative; min-height: clamp(380px, 27.083vw, 520px); padding: clamp(14px, 1.25vw, 24px) clamp(14px, 1.979vw, 38px) clamp(18px, 1.927vw, 37px); border-radius: 16px; background: #ceddfe center / cover no-repeat; transition: transform .35s cubic-bezier(.2, .8, .25, 1); } .wh-type:hover { transform: translateY(-6px); } .wh-types li:nth-child(1) .wh-type { background-image: url("../img/maint/wh-card1.png"); } .wh-types li:nth-child(2) .wh-type { background-image: url("../img/maint/wh-card2.png"); } .wh-types li:nth-child(3) .wh-type { background-image: url("../img/maint/wh-card3.png"); } .wh-type__no { margin: 0; font-family: var(--font-num); font-size: clamp(10px, .625vw, 12px); font-weight: 600; line-height: 1.6; color: #6136d9; } .wh-type__t { margin: 0; font-size: clamp(17px, 1.25vw, 24px); font-weight: 700; line-height: 1.6; color: #000; } /* 반투명 흰 판 — 시안 807:4334 (400×390 · 흐림 4) */ .wh-type__box { /* 시안 807:4334 — 400×390 고정 판. 글 양이 달라도 카드 높이가 흔들리지 않게. */ min-height: clamp(280px, 20.313vw, 390px); margin: clamp(6px, .573vw, 11px) clamp(0px, .104vw, 2px) 0; /* 오른쪽만 10 줄였다 — 시안 글줄(352)이 글칸(340)보다 길어 원래도 넘쳐 있다. 왼쪽 30 은 그대로라 글 시작 자리는 시안과 같다. */ padding: clamp(16px, 1.51vw, 29px) clamp(10px, 1.042vw, 20px) clamp(12px, 1.094vw, 21px) clamp(14px, 1.563vw, 30px); border-radius: 24px; background: rgba(255, 255, 255, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .wh-type__lead { margin: 0; font-size: clamp(12px, .833vw, 16px); font-weight: 400; line-height: 1.6; color: #000; } /* inline-flex 로 두면 글줄 상자(line-height)가 더해져 아래 간격이 벌어진다. 블록 flex 로 두면 위아래 여백이 시안 그대로 맞는다. */ .wh-tag { display: flex; align-items: center; justify-content: center; width: clamp(44px, 3.125vw, 60px); height: clamp(20px, 1.354vw, 26px); margin: clamp(6px, .573vw, 11px) 0 clamp(6px, .573vw, 11px); border-radius: 4px; background: #b3a0ff; color: #fff; font-size: clamp(12px, .833vw, 16px); font-weight: 800; line-height: 1.6; } .wh-tag--con { margin-top: clamp(12px, 1.146vw, 22px); border: 1px solid #5246c4; background: none; color: #5246c4; } .wh-type__pros { margin: 0; padding: 0; list-style: none; } .wh-type__pros li { display: flex; align-items: flex-start; gap: clamp(6px, .573vw, 11px); margin-top: clamp(2px, .125vw, 2.4px); font-size: clamp(12px, .833vw, 16px); font-weight: 500; line-height: 1.6; color: #000; } .wh-type__pros img { flex: none; width: clamp(18px, 1.25vw, 24px); height: clamp(18px, 1.25vw, 24px); } .wh-type__cons { margin: clamp(6px, .625vw, 12px) 0 0; padding-left: clamp(12px, .938vw, 18px); list-style: disc; font-size: clamp(12px, .833vw, 16px); font-weight: 400; line-height: 1.6; color: #000; } /* 장점과 단점 사이 점선 (시안 807:4352) */ .wh-type__hr { height: 0; margin: clamp(12px, 1.146vw, 22px) 0 0; border: 0; border-top: 1px dashed rgba(97, 54, 217, .35); } /* 안내 두 줄 — 시안 807:3877 (카드 아래 34) */ .wh-note { margin: clamp(18px, 1.771vw, 34px) auto 0; max-width: clamp(320px, 50vw, 960px); font-size: clamp(14px, .938vw, 18px); font-weight: 500; line-height: 1.6; color: #000; text-align: center; } .wh-note b { color: #4a43ee; font-weight: 800; } /* 원스톱 진행 프로세스 — 시안 807:3891 */ .wh-h5 { margin: clamp(30px, 3.802vw, 73px) 0 0; font-size: clamp(17px, 1.25vw, 24px); font-weight: 800; line-height: 1.6; color: #000; } .wh-proc { position: relative; margin: clamp(30px, 3.229vw, 62px) 0 0; padding: clamp(12px, .99vw, 19px) clamp(12px, 1.51vw, 29px) clamp(12px, .938vw, 18px) clamp(12px, 1.094vw, 21px); border-radius: 8px; background: rgba(246, 247, 255, .8); } .wh-steps { display: flex; align-items: center; justify-content: space-between; gap: clamp(4px, .781vw, 15px); margin: 0; padding: 0; list-style: none; } .wh-step { position: relative; display: flex; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; height: clamp(56px, 4.167vw, 80px); padding: 0 6px; border: 1px solid #938eff; border-radius: 4px; background: #fff; box-shadow: 9px 8px 7px rgba(0, 0, 0, .02), 4px 3px 5px rgba(0, 0, 0, .03), 1px 1px 3px rgba(0, 0, 0, .03); font-size: clamp(11px, .833vw, 16px); font-weight: 500; line-height: 1.4; color: #000; text-align: center; transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; } /* Step N 알약 — 칸 위로 튀어나온다 (시안 807:3895 — 80×40) */ .wh-step__no { position: absolute; left: 50%; bottom: calc(100% + clamp(9px, .885vw, 17px)); display: flex; align-items: center; justify-content: center; width: clamp(56px, 4.167vw, 80px); height: clamp(28px, 2.083vw, 40px); border: 1px solid #6136d9; border-radius: 300px; background: #fff; color: #6136d9; font-size: clamp(11px, .729vw, 14px); font-weight: 800; transform: translateX(-50%); transition: background .25s ease, color .25s ease, transform .25s ease; } /* 알약 아래 작은 꼬리 */ .wh-step__no::after { content: ""; position: absolute; left: 50%; top: 100%; width: 0; height: 0; border: 7px solid transparent; border-top-color: #6136d9; transform: translate(-50%, -1px); transition: border-top-color .25s ease; } .wh-arrow { display: flex; align-items: center; justify-content: center; flex: none; width: clamp(28px, 2.083vw, 40px); height: clamp(28px, 2.083vw, 40px); border: 1px solid #938eff; border-radius: 300px; background: #fff; } .wh-arrow img { width: clamp(11px, .833vw, 16px); height: clamp(11px, .833vw, 16px); } /* ---------- 원스톱 진행 프로세스 — 움직임 ---------- 서비스 > 홈페이지 제작의 「제작 프로세스」(.sv-proc)와 같은 연출을 옮겨 왔다. ① 칸과 화살표가 왼쪽부터 차례로 떠오른다 ② 화살표가 차례로 한 번씩 오른쪽으로 밀린다 (쉬었다 반복) ③ 칸에 마우스를 올리면 알약이 보라로 차고 칸이 살짝 뜬다 알약(.wh-step__no)은 가운데 맞추려고 이미 translateX(-50%) 를 쓰고 있어, 뜨는 움직임을 줄 때 그 값을 반드시 같이 적어야 한다 — 빼면 옆으로 튄다. */ .wh-step:hover { transform: translateY(-3px); border-color: #6136d9; box-shadow: 0 12px 20px -10px rgba(97, 54, 217, .4); } .wh-step:hover .wh-step__no { background: #6136d9; color: #fff; transform: translate(-50%, -3px); } .wh-step:hover .wh-step__no::after { border-top-color: #6136d9; } /* 화살표가 차례로 한 번씩 밀린다 */ .wh-proc.is-in .wh-arrow img { animation: wh-nudge 2.4s ease-in-out infinite; animation-delay: var(--delay, 0ms); } @keyframes wh-nudge { 0%, 62%, 100% { transform: translateX(0); } 70% { transform: translateX(3px); } 78% { transform: translateX(0); } } /* 칸·화살표는 왼쪽부터 차례로 올라온다 */ .has-reveal .wh-proc.js-reveal .wh-step, .has-reveal .wh-proc.js-reveal .wh-arrow { opacity: 0; transform: translateY(20px); } .has-reveal .wh-proc.js-reveal.is-in .wh-step, .has-reveal .wh-proc.js-reveal.is-in .wh-arrow { opacity: 1; transform: none; transition: opacity .5s ease var(--delay, 0ms), transform .55s cubic-bezier(.22, 1, .36, 1) var(--delay, 0ms); } /* 다 올라온 뒤의 hover 는 위 규칙(transform:none)보다 세야 한다 */ .has-reveal .wh-proc.js-reveal.is-in .wh-step:hover { transform: translateY(-3px); } @media (prefers-reduced-motion: reduce) { .wh-proc.is-in .wh-arrow img { animation: none; } } /* 웹비스타와 함께라면 — 시안 807:4406 (#252146 · 1480×166) */ .wh-final { display: flex; align-items: center; gap: clamp(14px, 1.042vw, 20px); min-height: clamp(120px, 8.646vw, 166px); margin: clamp(18px, 1.771vw, 34px) 0 0; /* 프로세스 띠 아래 34 */ padding: clamp(18px, 1.719vw, 33px) clamp(20px, 2.708vw, 52px); border-radius: 16px; background: #252146; } .wh-final img { flex: none; width: clamp(56px, 4.427vw, 85px); height: clamp(56px, 4.427vw, 85px); } .wh-final__t { margin: 0; font-size: clamp(20px, 1.667vw, 32px); font-weight: 800; line-height: 1.6; color: #c9bfff; } .wh-final__p { margin: clamp(6px, .469vw, 9px) 0 0; font-size: clamp(13px, .938vw, 18px); font-weight: 600; line-height: 1.2; color: #fff; } @media (max-width: 1280px) { .wh-feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wh-steps { flex-wrap: wrap; justify-content: center; row-gap: 46px; } .wh-step { flex: 0 0 calc(33.333% - 30px); } .wh-arrow { display: none; } } @media (max-width: 1024px) { .wh-opts, .wh-types { grid-template-columns: 1fr; } .wh-type { min-height: 0; } .wh-step { flex: 0 0 calc(50% - 10px); } .wh-final { flex-direction: column; text-align: center; } } @media (max-width: 767px) { .wh-feats { grid-template-columns: 1fr; } .wh-step { flex: 0 0 100%; } /* 한 칸짜리 맨 아랫줄은 이름표·양끝정렬을 쓰지 않는다 */ .wh-tbl tbody tr.wh-tbl__foot { padding: 0; background: none; } .wh-tbl__foot td { display: block; padding: 14px 16px; border-radius: 10px; text-align: center; } .wh-tbl__foot td::before { content: none; } .wh-tbl__foot span { display: block; margin-top: 3px; } } /* ============================================================ 7. 보안관리 (시안 807:6572) · 문자서비스 ============================================================ 이 시안 프레임은 1920×11,387 이라 Figma MCP 가 노드값을 못 내려준다 (매번 28,706자에서 끊긴다). 그래서 이 두 화면만은 **렌더 이미지에서 상자 좌표를 재고**, 앞 3화면에서 시안과 대조해 확정한 타입 스케일 (42/24/20/18/16/14 · 800/700/600/500/400 · 1.6/1.4/1.2)을 그대로 썼다. 섹션별 node-id 를 받으면 앞 3화면처럼 0px 로 다시 맞출 수 있다. */ /* 큰 제목 — 각 섹션 머리 (시안 42 ExtraBold) */ .sv-h1 { margin: clamp(30px, 2.396vw, 46px) 0 0; font-size: clamp(24px, 2.188vw, 42px); font-weight: 800; line-height: 1.6; color: #000; } .sv-lead { margin: clamp(6px, .417vw, 8px) 0 0; font-size: clamp(14px, .938vw, 18px); font-weight: 500; line-height: 1.6; color: #000; } .sv-h3 { margin: clamp(20px, 1.875vw, 36px) 0 0; font-size: clamp(17px, 1.25vw, 24px); font-weight: 800; line-height: 1.6; color: #000; } .sv-p { margin: clamp(5px, .365vw, 7px) 0 0; font-size: clamp(13px, .938vw, 18px); font-weight: 400; line-height: 1.6; color: #000; } /* 섹션 사이 구분선 */ .sv-div { height: 0; margin: clamp(40px, 5.313vw, 102px) 0 0; border: 0; border-top: 1px solid #ececec; } /* 설명 그림 — 시안에서 그대로 뽑았다 (진단도·구성도) */ .sv-diag { margin: clamp(12px, .938vw, 18px) 0 0; border-radius: 16px; overflow: hidden; line-height: 0; } .sv-diag img { display: block; width: 100%; height: auto; } /* 석 장 카드 — 480×220 (SSL) / 480×450 (웹취약점) */ .sv-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.042vw, 20px); margin: clamp(16px, 1.458vw, 28px) 0 0; padding: 0; list-style: none; } .sv-card { display: flex; flex-direction: column; padding: clamp(16px, 1.302vw, 25px) clamp(14px, 1.51vw, 29px) clamp(16px, 1.51vw, 29px); border-radius: 16px; background: #e3e6ee center / cover no-repeat; transition: transform .35s cubic-bezier(.2, .8, .25, 1); } .sv-card:hover { transform: translateY(-5px); } .sv-cards--a li:nth-child(1) .sv-card { background: linear-gradient(140deg, #e7eaf1, #eef0f6); } .sv-cards--a li:nth-child(2) .sv-card { background: linear-gradient(140deg, #dce8fa, #edf3fd); } .sv-cards--a li:nth-child(3) .sv-card { background: linear-gradient(140deg, #e7e6f2, #f0eff8); } .sv-cards--b li:nth-child(1) .sv-card { background: linear-gradient(150deg, #cfddfe, #eaf0fe); } .sv-cards--b li:nth-child(2) .sv-card { background: linear-gradient(150deg, #dce8fe, #eef3ff); } .sv-cards--b li:nth-child(3) .sv-card { background: linear-gradient(150deg, #e5deff, #f2effe); } .sv-card__no { margin: 0; font-family: var(--font-num); font-size: clamp(10px, .625vw, 12px); font-weight: 600; line-height: 1.6; color: #6136d9; } .sv-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin: 0; font-size: clamp(15px, 1.042vw, 20px); font-weight: 700; line-height: 1.4; color: #000; } /* 아이콘은 인라인 SVG 다 — style.css 의 svg{max-width:100%} 만 걸리면 칸을 다 덮는다 */ .sv-card__head img, .sv-card__head svg { flex: none; width: clamp(20px, 1.25vw, 24px); height: clamp(20px, 1.25vw, 24px); color: rgba(0, 0, 0, .55); opacity: .9; } /* 카드 안 반투명 흰 판 */ .sv-card__box { flex: 1; margin: clamp(10px, 1.042vw, 20px) 0 0; padding: clamp(12px, 1.146vw, 22px) clamp(12px, 1.25vw, 24px); border-radius: 12px; background: rgba(255, 255, 255, .6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); font-size: clamp(12px, .729vw, 14px); font-weight: 400; line-height: 1.6; color: #000; } .sv-card__t { margin: 0; font-size: clamp(14px, .938vw, 18px); font-weight: 700; line-height: 1.4; color: #5246c4; } .sv-card__hr { height: 0; margin: clamp(10px, .833vw, 16px) 0; border: 0; border-top: 1px dashed rgba(97, 54, 217, .28); } .sv-card__list { margin: 0; padding: 0; list-style: none; } .sv-card__list li { display: flex; align-items: flex-start; gap: clamp(6px, .573vw, 11px); margin-top: clamp(6px, .573vw, 11px); font-size: clamp(12px, .833vw, 16px); line-height: 1.6; } .sv-card__list li:first-child { margin-top: 0; } .sv-card__list img { flex: none; width: clamp(16px, 1.042vw, 20px); height: clamp(16px, 1.042vw, 20px); margin-top: 3px; } /* 흰 카드 여섯 장 — 번호 + 제목 + 아이콘 + 연보라 설명상자 */ .sv-feats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.302vw, 25px) clamp(10px, 1.042vw, 20px); margin: clamp(16px, 1.458vw, 28px) 0 0; padding: 0; list-style: none; } .sv-feat { height: 100%; padding: clamp(16px, 1.302vw, 25px) clamp(14px, 1.51vw, 29px) clamp(16px, 1.51vw, 29px); border: 1px solid #e6e6f5; border-radius: 16px; background: #fff; transition: border-color .25s ease, transform .3s cubic-bezier(.2, .8, .25, 1), box-shadow .3s ease; } .sv-feat:hover { transform: translateY(-4px); border-color: #b3a0ff; box-shadow: 0 14px 30px rgba(40, 40, 110, .08); } .sv-feat__no { margin: 0; font-family: var(--font-num); font-size: clamp(10px, .625vw, 12px); font-weight: 600; line-height: 1.6; color: #6136d9; } .sv-feat__box { margin: clamp(12px, 1.146vw, 22px) 0 0; padding: clamp(12px, 1.042vw, 20px) clamp(12px, 1.146vw, 22px); border-radius: 12px; background: #f4f4fd; font-size: clamp(12px, .729vw, 14px); font-weight: 400; line-height: 1.6; color: #000; } /* 남보라 안내 띠 — 시안 #252146 (법적 근거 / 도입효과 / 망분리가 중요한 이유) */ .sv-note { display: flex; align-items: flex-start; gap: clamp(14px, 1.354vw, 26px); margin: clamp(24px, 2.396vw, 46px) 0 0; padding: clamp(20px, 2.24vw, 43px) clamp(20px, 2.708vw, 52px); border-radius: 16px; background: #252146; } .sv-note img { flex: none; width: clamp(56px, 4.427vw, 85px); height: clamp(56px, 4.427vw, 85px); } .sv-note__t { margin: 0; font-size: clamp(18px, 1.25vw, 24px); font-weight: 800; line-height: 1.6; color: #c9bfff; } .sv-note__p { margin: clamp(6px, .469vw, 9px) 0 0; font-size: clamp(13px, .833vw, 16px); font-weight: 500; line-height: 1.7; color: #fff; } /* 이용 요금 — 720×230 두 장 */ .sv-price { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2.083vw, 40px); margin: clamp(16px, 1.823vw, 35px) 0 0; padding: 0; list-style: none; } .sv-price__card { height: 100%; padding: clamp(16px, 1.302vw, 25px) clamp(16px, 1.875vw, 36px) clamp(16px, 1.51vw, 29px) clamp(16px, 2.344vw, 45px); border: 1px solid #9f87ff; border-radius: 16px; background: #fff; } .sv-price__tag { display: flex; align-items: center; justify-content: center; width: fit-content; height: clamp(26px, 1.823vw, 35px); padding: 0 clamp(10px, .885vw, 17px); border-radius: 300px; background: #b3a0ff; color: #fff; font-size: clamp(11px, .729vw, 14px); font-weight: 800; } .sv-price__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: clamp(10px, .833vw, 16px) 0 0; } .sv-price__n { margin: 0; font-size: clamp(15px, 1.146vw, 22px); font-weight: 700; line-height: 1.4; color: #000; } .sv-price__v { margin: 0; font-family: var(--font-num); font-size: clamp(22px, 2.083vw, 40px); font-weight: 800; line-height: 1.1; color: #6136d9; white-space: nowrap; text-align: right; } .sv-price__v em { font-family: var(--font-body); font-size: clamp(11px, .833vw, 16px); font-style: normal; font-weight: 500; color: #000; } .sv-price__v span { display: block; font-family: var(--font-body); font-size: clamp(11px, .729vw, 14px); font-weight: 400; color: rgba(0, 0, 0, .6); } .sv-price__d { margin: clamp(12px, 1.094vw, 21px) 0 0; padding: clamp(12px, 1.146vw, 22px) clamp(14px, 1.302vw, 25px); border-radius: 12px; background: #f6f7ff; font-size: clamp(12px, .833vw, 16px); font-weight: 400; line-height: 1.6; color: #000; } /* 이름표 + 설명 두 칸 (특징 / 서비스 상세 스펙) */ .sv-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, .521vw, 10px) clamp(16px, 2.917vw, 56px); margin: clamp(12px, 1.146vw, 22px) 0 0; padding: 0; list-style: none; } .sv-specs li { display: flex; align-items: center; gap: clamp(10px, 1.042vw, 20px); } .sv-specs b { display: flex; align-items: center; justify-content: center; flex: none; width: clamp(110px, 10.156vw, 195px); height: clamp(30px, 2.083vw, 40px); border-radius: 4px; background: #b3a0ff; color: #fff; font-size: clamp(11px, .729vw, 14px); font-weight: 700; } .sv-specs span { font-size: clamp(12px, .833vw, 16px); font-weight: 400; line-height: 1.6; color: #000; } /* 단추 두 개 나란히 */ .mt-btnwrap--two { gap: clamp(10px, 1.302vw, 25px); } .mt-btnwrap--two .btn-gradient { min-width: clamp(160px, 11.458vw, 220px); } /* ============================================================ 8. 문자서비스 (같은 시안 프레임 아래쪽) ============================================================ */ .sms-note { margin: clamp(8px, .781vw, 15px) 0 0; font-size: clamp(12px, .729vw, 14px); line-height: 1.6; color: #000; text-align: right; } /* 요금표 — 네 칸 */ .sms-rate col.sms-rate__c1 { width: 25%; } .sms-rate col.sms-rate__cv { width: 25%; } .sms-rate tbody td { white-space: pre-line; } /* 충전표 */ .sms-charge { margin: clamp(16px, 1.458vw, 28px) 0 0; padding: clamp(16px, 1.771vw, 34px) clamp(14px, 1.354vw, 26px) clamp(14px, 1.302vw, 25px); border: 1px solid #e6e6f5; border-radius: 16px; background: #fff; } .sms-charge table { width: 100%; border-collapse: collapse; table-layout: fixed; } .sms-charge th, .sms-charge td { height: clamp(44px, 3.125vw, 60px); font-size: clamp(12px, .833vw, 16px); font-weight: 500; line-height: 1.6; text-align: center; color: #000; } .sms-charge thead th { background: #e0e4fc; font-weight: 700; } .sms-charge thead th:first-child { border-radius: 8px 0 0 8px; } .sms-charge thead th:last-child { border-radius: 0 8px 8px 0; } .sms-charge tbody tr + tr td { border-top: 1px solid #f0f0f7; } .sms-charge tbody tr:hover td { background: #fafaff; } /* 고르는 동그라미만 감춘다 — 폼 안의 글자 칸까지 잡으면 안 된다 */ .sms-charge input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .sms-charge tbody label { display: inline-flex; align-items: center; justify-content: center; width: clamp(22px, 1.458vw, 28px); height: clamp(22px, 1.458vw, 28px); border: 1px solid #d6d6e6; border-radius: 50%; color: #d6d6e6; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease; } .sms-charge tbody label svg { width: 60%; height: 60%; } .sms-charge input[type="radio"]:checked + label { border-color: #6136d9; background: #6136d9; color: #fff; } .sms-charge input[type="radio"]:focus-visible + label { outline: 2px solid #6136d9; outline-offset: 2px; } /* 합계 띠 */ .sms-sum { display: flex; align-items: center; justify-content: flex-end; gap: clamp(14px, 1.51vw, 29px); height: clamp(48px, 3.542vw, 68px); margin: clamp(10px, .833vw, 16px) 0 0; padding: 0 clamp(14px, 1.51vw, 29px); border-radius: 8px; background: #333; color: #fff; font-size: clamp(12px, .833vw, 16px); font-weight: 700; } .sms-sum b { color: #b3a0ff; font-weight: 800; } .sms-sum i { font-style: normal; opacity: .35; } /* 입금정보 */ .sms-form { margin: clamp(12px, 1.042vw, 20px) 0 0; padding: clamp(18px, 1.771vw, 34px) clamp(16px, 1.771vw, 34px) clamp(18px, 1.771vw, 34px); border: 1px solid #e6e6f5; border-radius: 16px; background: #fff; } .sms-form__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.302vw, 25px); } .sms-form label.sms-lb { display: block; margin-bottom: clamp(6px, .521vw, 10px); font-size: clamp(12px, .833vw, 16px); font-weight: 700; color: #000; } .sms-form input[type="text"], .sms-form input[type="tel"] { width: 100%; height: clamp(42px, 2.917vw, 56px); padding: 0 clamp(12px, 1.042vw, 20px); border: 1px solid #e0e0ec; border-radius: 8px; background: #fff; font: inherit; font-size: clamp(12px, .833vw, 16px); color: #000; } .sms-form input::placeholder { color: #b6b6c6; } .sms-form input:focus { outline: none; border-color: #6136d9; box-shadow: 0 0 0 3px rgba(97, 54, 217, .1); } .sms-form__warn { margin: clamp(8px, .677vw, 13px) 0 0; font-size: clamp(11px, .729vw, 14px); color: rgba(0, 0, 0, .6); } .sms-bank { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(10px, 1.042vw, 20px) clamp(14px, 2.083vw, 40px); margin: clamp(14px, 1.302vw, 25px) 0 0; padding: clamp(14px, 1.302vw, 25px) clamp(16px, 1.771vw, 34px); border-radius: 12px; background: #f4f4fd; font-size: clamp(12px, .833vw, 16px); font-weight: 700; color: #000; } .sms-bank em { font-style: normal; color: #6136d9; } .sms-bank__code { display: inline-flex; align-items: center; justify-content: center; min-width: clamp(90px, 6.927vw, 133px); height: clamp(38px, 2.708vw, 52px); border-radius: 8px; background: #111; color: #fff; font-family: var(--font-num); font-size: clamp(13px, .938vw, 18px); font-weight: 700; letter-spacing: .06em; } .sms-bank input { flex: 1; min-width: 200px; height: clamp(38px, 2.708vw, 52px); padding: 0 clamp(12px, 1.042vw, 20px); border: 1px solid #e0e0ec; border-radius: 8px; background: #fff; font: inherit; font-size: clamp(12px, .833vw, 16px); font-weight: 400; } @media (max-width: 1024px) { .sv-cards, .sv-feats, .sv-price, .sv-specs, .sms-form__grid { grid-template-columns: 1fr; } .sv-note { flex-direction: column; } } @media (max-width: 767px) { .sv-price__row { flex-direction: column; align-items: flex-start; } .sv-price__v { text-align: left; } .sms-charge { padding: 12px 8px; overflow-x: auto; } .sms-charge table { min-width: 560px; } .sms-sum { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; height: auto; padding: 12px 16px; } .sms-sum i { display: none; } } /* ---------- 특징 카드 글줄 — 칸이 좁아지면 시안의 줄바꿈을 접는다 ---------- 문구에 | 로 넣어 둔 줄바꿈은 시안 폭(카드 420)에서만 예쁘다. 창을 줄이면 그 줄바꿈이 남은 채 다시 감겨 세 줄로 어긋난다(문자 서비스 03번). 좁아지면
을 접고 낱말 단위로 저절로 감기게 둔다. */ .sv-feats .sv-card__head span { word-break: keep-all; } @media (max-width: 1450px) { .sv-feats .sv-card__head br { display: none; } } /* ---------- 자동등록 방지코드 — 이름·코드·입력칸을 한 줄로 ---------- .sms-bank__captcha 에 아무 규칙이 없어 입력칸이 코드 밑으로 떨어졌다. (부모가 flex 가 아니어서 입력칸의 flex:1 이 먹지 않았다) */ .sms-bank__captcha { display: flex; flex: 1 1 clamp(280px, 30vw, 560px); align-items: center; gap: clamp(8px, 0.833vw, 16px); min-width: 0; } .sms-bank__label { flex: none; white-space: nowrap; } @media (max-width: 560px) { /* 더 좁아지면 이름줄만 위로 올리고 코드·입력칸은 한 줄에 둔다 */ .sms-bank__captcha { flex-wrap: wrap; } .sms-bank__label { width: 100%; } /* 남는 자리만큼만 차지하게 — 200px 을 고집하면 코드 밑으로 떨어진다 */ .sms-bank__captcha input { min-width: 0; } } /* ============================================================ 상단 — 띠 없이 제목만 가운데로 (수정요청 목록과 같은 모양) ------------------------------------------------------------ 예전 .mt-hero 띠는 첫 화면을 다 차지해 내용이 아래로 밀렸다. 옅은 빛만 깔고 제목·설명을 가운데 두고 바로 내용으로 잇는다. (.mt-hero 규칙은 되돌릴 때를 위해 위쪽에 그대로 남겨 뒀다) ============================================================ */ .mt-top { position: relative; /* 이 칸은 제목 한 줄 높이밖에 안 된다. overflow:hidden 이면 오른쪽 위 빛이 칸 밑동에서 싹둑 잘려 가로줄이 생긴다(수정요청 목록은 칸이 화면 전체라 같은 일이 안 벌어졌다). clip 은 스크롤막대를 만들지 않으므로, 가로로 새는 걱정 없이 잘리는 자리만 밖으로 밀어낼 수 있다. 옛 브라우저는 clip 줄을 못 읽고 hidden 으로 남는다 — 지금과 같은 모습. */ overflow: hidden; overflow: clip visible; /* 가로만 상자 끝에서 자르고, 세로는 흘러넘치게 */ padding: calc(var(--header-h) + clamp(24px, 2.604vw, 50px)) var(--gutter) clamp(16px, 1.667vw, 32px); text-align: center; } .mt-top > .inner { position: relative; z-index: 1; max-width: 1480px; margin: 0 auto; } /* 오른쪽 위 파란 둥근 빛 — 목록 화면(.mq-glow)과 같은 그림·같은 자리 */ .mt-top__glow { position: absolute; right: -4vw; top: -6vw; /* 칸 밖으로 흘러넘치므로 아래 내용 위에 얹히면 안 된다. -1 이면 바탕보다는 앞, 글·표보다는 뒤에 깔린다. */ z-index: -1; width: min(68vw, 1040px); pointer-events: none; animation: mtTopGlow 10s ease-in-out infinite alternate; will-change: transform; } .mt-top__glow img { display: block; width: 100%; height: auto; } /* 칸 밖으로 흘러넘친 아랫도리는 서서히 사라지게 한다. 싹둑 자르면 가로줄이 생기고, 그냥 두면 밑에 오는 표 위로 번져 보인다. 빛 그림 제 키를 기준으로 재는 값이다(위 3할은 그대로, 8할쯤에서 사라짐). */ .mt-top__glow { -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0,0,0,0) 78%); mask-image: linear-gradient(to bottom, #000 0%, #000 30%, rgba(0,0,0,0) 78%); } @keyframes mtTopGlow { from { transform: translate3d(0, 0, 0) rotate(0deg); } to { transform: translate3d(-28px, 32px, 0) rotate(2deg); } } .mt-top__title { margin: 0; font-size: clamp(30px, 2.917vw, 42px); font-weight: 800; line-height: 1.6; color: #000; word-break: keep-all; } .mt-top__lead { margin: clamp(6px, 0.625vw, 12px) 0 0; font-size: clamp(16px, 1.667vw, 24px); font-weight: 400; line-height: 1.4; color: #000; word-break: keep-all; } /* 제목 바로 아래에서 시작하므로 첫 제목의 윗 여백을 줄인다 */ .mt-top + .mt-body .mt-h2:first-child, .mt-top + .mt-body > .inner > .sv-h1:first-child { margin-top: clamp(20px, 1.823vw, 35px); } @media (prefers-reduced-motion: reduce) { .mt-top__glow { animation: none; } } @media (max-width: 900px) { .mt-top__glow { right: -18vw; top: -4vw; width: 90vw; opacity: .85; } } /* 문자서비스 — 「SMS충전 신청하기」 아래 여백 이 화면은 단추가 본문 맨 끝이라 바로 밑에 검은 푸터가 붙어 답답해 보였다. .mt-btnwrap 은 유지보수 화면들이 다 같이 쓰므로 **이 폼 안에서만** 벌린다. */ #smsForm .mt-btnwrap { margin-bottom: 100px; } /* 문자서비스 — 충전신청 접수 알림 */ .sms-done { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; margin: 0 0 clamp(20px, 2vw, 34px); padding: clamp(14px, 1.3vw, 22px) clamp(16px, 1.6vw, 28px); border: 1px solid #b9a7f0; border-radius: 10px; background: #f6f3ff; color: #3b2a72; font-size: clamp(13px, 1.04vw, 16px); line-height: 1.6; } .sms-done b { color: #6136d9; font-weight: 800; }