@charset "utf-8";

* { box-sizing: border-box; }

body { margin: 0px; font-family: Arial, "Noto Sans KR", "Malgun Gothic", sans-serif; color: rgb(23, 32, 42); background: rgb(245, 247, 250); line-height: 1.65; }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

.hero { position: relative; min-height: 720px; background: url("images/hero-townnet-web.png") center center / cover no-repeat rgb(7, 24, 39); color: rgb(255, 255, 255); overflow: hidden; }

.hero::before { content: ""; position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(3, 16, 28, 0.94) 0%, rgba(3, 16, 28, 0.76) 38%, rgba(3, 16, 28, 0.12) 72%); }

.wrap { position: relative; width: min(1160px, 100% - 40px); margin: 0px auto; }

.hero-inner { display: flex; align-items: center; min-height: 720px; padding: 74px 0px 92px; }

.hero-copy { max-width: 610px; }

.eyebrow { margin: 0px 0px 16px; color: rgb(103, 212, 216); font-size: 15px; font-weight: 700; letter-spacing: 0px; }

h1 { margin: 0px; font-size: 52px; line-height: 1.18; letter-spacing: 0px; }

.lead { margin: 24px 0px 0px; font-size: 19px; color: rgb(217, 230, 238); }

.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }

.btn { display: inline-flex; align-items: center; min-height: 46px; padding: 0px 22px; border: 1px solid rgba(255, 255, 255, 0.24); background: rgb(8, 166, 173); color: rgb(255, 255, 255); font-size: 15px; font-weight: 700; }

.btn.secondary { background: rgba(255, 255, 255, 0.08); }

.quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: -56px; background: rgb(220, 227, 232); box-shadow: rgba(18, 34, 50, 0.14) 0px 16px 40px; }

.quick-item { min-height: 132px; padding: 26px 24px; background: rgb(255, 255, 255); }

.quick-item strong { display: block; margin-bottom: 8px; font-size: 18px; color: rgb(10, 48, 64); }

.quick-item span { color: rgb(86, 103, 118); font-size: 14px; }

/* NAVER MULTI-IMAGE START: 본문 상단의 서로 다른 이미지 6장을 하나의 주제별 카드 묶음으로 구성 */
.naver-image-section { padding: 82px 0; background: rgb(245, 247, 250); }

.section-kicker { margin: 0 0 8px; color: rgb(8, 148, 155); font-size: 13px; font-weight: 800; letter-spacing: 0.08em; }

.naver-image-head { align-items: flex-end; }

.naver-image-head h2 { margin: 0; font-size: 34px; line-height: 1.25; color: rgb(12, 37, 53); }

.naver-image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.naver-image-card { overflow: hidden; border: 1px solid rgb(218, 226, 233); background: #fff; box-shadow: rgba(20, 37, 50, 0.07) 0 10px 24px; }

.naver-image-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: rgb(223, 230, 236); }

.naver-image-copy { padding: 21px 22px 23px; }

.naver-image-copy h3 { margin: 0 0 7px; color: rgb(11, 49, 64); font-size: 19px; }

.naver-image-copy p { margin: 0; color: rgb(83, 103, 119); font-size: 14px; }
/* NAVER MULTI-IMAGE END */

.section { padding: 82px 0px; background: rgb(255, 255, 255); }

.section.alt { background: rgb(245, 247, 250); }

.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }

.section-head h2 { margin: 0px; font-size: 34px; line-height: 1.25; letter-spacing: 0px; color: rgb(12, 37, 53); }

.section-head p { max-width: 520px; margin: 0px; color: rgb(82, 103, 119); }

.services { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.service { min-height: 210px; padding: 28px; border: 1px solid rgb(223, 230, 236); background: rgb(255, 255, 255); }

.service h3 { margin: 0px 0px 12px; font-size: 21px; color: rgb(11, 49, 64); }

.service p { margin: 0px; color: rgb(83, 103, 119); }

.slider { position: relative; overflow: hidden; background: rgb(11, 31, 45); }

.slides { display: flex; transition: transform 0.45s; }

.slide { position: relative; flex: 0 0 100%; min-height: 430px; }

.slide img { width: 100%; height: 430px; object-fit: cover; }

.slide::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(4, 18, 29, 0.84), rgba(4, 18, 29, 0.16)); }

.slide-copy { position: absolute; z-index: 2; left: 44px; bottom: 42px; max-width: 520px; color: rgb(255, 255, 255); }

.slide-copy h3 { margin: 0px 0px 10px; font-size: 30px; line-height: 1.28; }

.slide-copy p { margin: 0px; color: rgb(220, 235, 242); }

.slider-nav { position: absolute; right: 32px; bottom: 32px; z-index: 3; display: flex; gap: 8px; }

.slider-nav button { width: 40px; height: 40px; border: 1px solid rgba(255, 255, 255, 0.44); background: rgba(255, 255, 255, 0.08); color: rgb(255, 255, 255); cursor: pointer; }

.process { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }

.step { padding: 24px 20px; border-top: 3px solid rgb(8, 166, 173); background: rgb(255, 255, 255); box-shadow: rgba(20, 37, 50, 0.08) 0px 10px 26px; }

.step em { display: block; margin-bottom: 12px; color: rgb(8, 166, 173); font-style: normal; font-weight: 700; }

.step strong { display: block; margin-bottom: 8px; color: rgb(12, 37, 53); font-size: 17px; }

.step span { color: rgb(95, 112, 128); font-size: 14px; }

.gallery-head { margin: 52px 0px 22px; }

.gallery-head h2 { margin: 0px 0px 10px; font-size: 30px; line-height: 1.28; letter-spacing: 0px; color: rgb(12, 37, 53); }

.gallery-head p { margin: 0px; color: rgb(82, 103, 119); }

.gallery-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }

.gallery-item { position: relative; overflow: hidden; margin: 0px; background: rgb(223, 230, 236); aspect-ratio: 4 / 3; }

.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s; }

.gallery-item:hover img { transform: scale(1.045); }

.cta { padding: 72px 0px; background: rgb(11, 37, 54); color: rgb(255, 255, 255); }

.cta-grid { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; }

.cta h2 { margin: 0px 0px 12px; font-size: 32px; letter-spacing: 0px; }

.cta p { margin: 0px; color: rgb(201, 216, 224); }

.footer { padding: 28px 0px; background: rgb(7, 24, 39); color: rgb(145, 167, 181); font-size: 13px; }

@media (max-width: 900px) {
  .hero, .hero-inner { min-height: 620px; }
  h1 { font-size: 38px; }
  .quick, .services, .process, .naver-image-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .section-head { display: block; }
  .section-head p { margin-top: 12px; }
  .cta-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .wrap { width: min(100% - 28px, 1160px); }
  .hero, .hero-inner { min-height: 590px; }
  .hero-inner { padding: 50px 0px 82px; }
  h1 { font-size: 31px; }
  .lead { font-size: 16px; }
  .quick, .services, .process, .naver-image-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 58px 0px; }
  .section-head h2 { font-size: 27px; }
  .naver-image-head h2 { font-size: 27px; }
  .slide, .slide img { min-height: 390px; height: 390px; }
  .slide-copy { left: 22px; right: 22px; bottom: 72px; }
  .slide-copy h3 { font-size: 24px; }
}