@charset "utf-8";
.root_daum_roughmap .wrap_map, .root_daum_roughmap, .direction-map iframe {width: 100% !important; height: 100% !important;}

.font-hakgyo {font-family:'Hakgyoansim Allimjang',sans-serif;}

/* page-sewer */
.page-sewer {overflow:hidden;}
.page-sewer .icon20 {width:20px; height:20px;}
.sewer-visual {display: flex; align-items: center; position:relative; min-height:100vh; padding:var(--space-100) 0 0; color:var(--color-text); text-align:center;}
.sewer-visual__bg {position:absolute; inset:0; overflow:hidden; z-index:0;}
.sewer-visual__bg img {width:100%; height:100%; object-fit:cover;}
.sewer-visual .contain {position:relative; z-index:1;}
.sewer-visual__head {display:flex; flex-direction:column; align-items:center; gap:var(--space-20); margin-bottom:var(--space-40);}
.sewer-visual__head .main-sec__gradient-title {font-size:var(--font-size-64); line-height:1.125em;}
.sewer-visual__head h2 {font-size:var(--font-size-48); font-weight:700; line-height:1.17em; color:var(--color-primary);}
.sewer-visual__head > p {font-size:var(--font-size-24); line-height:1.33em; color:var(--color-text);}
.sewer-visual__body {display:flex; align-items:flex-start; justify-content:center; gap:var(--space-64);}
.sewer-visual__man {flex:0 0 500px; width:500px;}
.sewer-visual__man img {width:100%; height:auto; -webkit-mask-image:linear-gradient(180deg, #000 90%, transparent 100%); mask-image:linear-gradient(180deg, #000 90%, transparent 100%);}
.sewer-svc-list {display:grid; grid-template-columns:repeat(3, 220px); gap:var(--space-16); padding-bottom:40px;}
.sewer-svc-list li {overflow:hidden; border-radius:24px; background:var(--color-primary); text-align:center;}
.sewer-svc-list .thumb {height:168px; overflow:hidden; border-radius:24px 24px 0 0;}
.sewer-svc-list .thumb img {width:100%; height:100%; object-fit:cover;}
.sewer-svc-list strong {display:block; padding:var(--space-16) var(--space-8) 0; font-size:var(--font-size-28); line-height:1.29em; color:#fff;}
.sewer-svc-list p {padding:0 var(--space-8) var(--space-16); font-size:var(--font-size-20); line-height:1.4em; color:#fff;}

.sewer-sec {position:relative; padding:var(--space-100) 0;}
.sewer-sec__bg {position:absolute; inset:0; overflow:hidden; z-index:0;}
.sewer-sec__bg img {width:100%; height:100%; object-fit:cover;}
.sewer-sec .contain {position:relative; z-index:1;}

.sewer-sec1 {display:flex; padding-bottom: calc(var(--space-100) * 3); color:#fff;}
.sewer-sec1__txt {display:flex; flex-direction:column; gap:var(--space-28);}
.sewer-sec1__badge {background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.2);}
.sewer-sec1__badge p {font-size:var(--font-size-24); line-height:1.33em;}
.sewer-sec1 h2 {font-size:var(--font-size-64); font-weight:700; line-height:1.125em;}
.sewer-sec1 h2 em {font-style:normal;}
.sewer-sec1 p:last-child {font-size:var(--font-size-28); line-height:1.29em;}

.sewer-sec2 {background:#eef6ff; overflow:hidden;}
.sewer-sec2 .main-sec5__badge p {color:var(--color-navy);}
.sewer-sec2 .main-sec5__badge em {font-size:var(--font-size-32); line-height:1.125em;}
.sewer-review__track {display:flex; gap:var(--space-24); width:max-content; animation:reviewMarquee 28s linear infinite;}
@keyframes reviewMarquee {0% {transform:translateX(0);} 100% {transform:translateX(-50%);}}
.sewer-review__item {flex-shrink:0; display:flex; flex-direction:column; gap:var(--space-20); width:clamp(280px, calc(422 / var(--inner) * 100vw), 422px); padding:var(--space-28); border-radius:24px; background:#fff; box-shadow:0 0 8px rgba(0,0,0,.24);}
.sewer-review__item .thumb {aspect-ratio: 366/240; overflow:hidden; border-radius:18px;}
.sewer-review__item .thumb img {width:100%; height:100%; object-fit:cover;}
.sewer-review__item strong {font-size:var(--font-size-28); line-height:1.29em; color:var(--color-navy); text-align:center;}
.sewer-review__item .name {font-size:var(--font-size-20); line-height:1.4em; color:var(--color-navy); text-align:center;}
.sewer-review__item .desc {font-size:var(--font-size-16); line-height:1.625em; color:var(--color-text-sub); text-align:center;}

.sewer-sec3 .main-sec__sub {font-size:var(--font-size-24); line-height:1.33em; color:var(--color-primary);}
.sewer-feat {display:flex; flex-direction:column; gap:var(--space-24); max-width:922px; margin:0 auto;}
.sewer-feat__item {display:flex; align-items:center; gap:var(--space-40); padding:var(--space-40); border-radius:24px; background:rgba(255,255,255,.6); box-shadow:0 0 16px rgba(0,0,0,.24);}
.sewer-feat__item .thumb {flex:0 0 300px; aspect-ratio: 300/202; overflow:hidden; border-radius:18px;}
.sewer-feat__item .thumb img {width:100%; height:100%; object-fit:cover;}
.sewer-feat__item .txt {flex:1;}
.sewer-feat__item .label {margin-bottom:var(--space-8); font-size:var(--font-size-18); line-height:1.44em; color:var(--color-navy);}
.sewer-feat__item strong {display:block; margin-bottom:var(--space-24); font-size:var(--font-size-28); line-height:1.29em; color:var(--color-text);}
.sewer-feat__item strong em {font-style:normal;}
.sewer-feat__item p:last-child {font-size:var(--font-size-16); line-height:1.625em; color:var(--color-text-sub);}

.sewer-sec4 {background: #EEF6FF;}
.sewer-sec4 .main-sec__head > p {font-size:var(--font-size-24); line-height:1.33em; color:var(--color-primary);}
.sewer-sec4 .main-sec__head h2.main-sec__gradient-title {font-size:var(--font-size-56); line-height:1.14em;}
.sewer-equip {max-width:928px; margin:0 auto; padding:var(--space-40); border-radius:40px; background:#fff; box-shadow:0 0 8px rgba(0,0,0,.16); text-align:center;}
.sewer-equip .thumb {aspect-ratio: 848/440; margin-bottom:var(--space-40); overflow:hidden; border-radius:24px;}
.sewer-equip .thumb img {width:100%; height:100%; object-fit:cover;}
.sewer-equip .txt strong.main-sec__gradient-title {display:block; margin-bottom:var(--space-24); font-size:var(--font-size-36); line-height:1.22em;}
.sewer-equip__tags {display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-12); margin-bottom:var(--space-28);}
.sewer-equip__tags li {display:inline-flex; align-items:center; gap:var(--space-8); padding:var(--space-8) var(--space-16); border-radius:800px; background:var(--color-secondary); font-size:var(--font-size-18); line-height:1.44em; color:#fff; box-shadow:0 4px 2px rgba(0,0,0,.04);}
.sewer-equip .txt p {font-size:var(--font-size-16); line-height:1.875em; color:var(--color-text-sub);}
.sewer-equip .txt p + p {margin-top:var(--space-8);}

.sewer-form-wrap {display:flex;  gap:var(--space-80); justify-content:center;}
.sewer-form-wrap__img {flex:0 0 425px; width:425px; display: flex; align-items: flex-end;}
.sewer-form-wrap__form {flex:0 0 630px; width:630px; padding:var(--space-40); margin-bottom: 40px; border-radius:24px; background:#fff; box-shadow:0 20px 40px rgba(0,0,0,.08);}
.sewer-sec5 {padding-bottom: 0;}
.sewer-sec5 .main-sec__head {gap:var(--space-24); margin-bottom:var(--space-64);}
.sewer-sec5 .main-visual__badge {width:min(100%, 470px); justify-content:center;}
.sewer-sec5 .main-visual__badge p {color:#fff;}
.sewer-sec5 .main-sec__head h2 {font-size:var(--font-size-56); line-height:1.14em; color:#fff;}
.sewer-sec5 .main-sec__head h2 em {font-style:normal;}
.sewer-form {display:flex; flex-direction:column; gap:var(--space-40);}
.sewer-form__fields {display:flex; flex-direction:column; gap:var(--space-24);}
.sewer-form .field {margin:0;}
.sewer-form label {display:block; margin-bottom:var(--space-8); font-size:var(--font-size-16); font-weight:600; line-height:1.25em; color:var(--color-text);}
.sewer-form label .req {margin-left:2px; color:var(--color-fourth); font-style:normal;}
.sewer-form .input {width:100%; height:clamp(40px, calc(56 / var(--inner) * 100vw), 56px); padding:0 var(--space-16); border-radius:8px; border:1px solid #e5e5ea; font-size:var(--font-size-16); color:var(--color-text); background:#fff;}
.sewer-form .input::placeholder {color:#bebebe;}
.sewer-form .field--time {position:relative;}
.time-picker {position:relative;}
.time-picker__control {position:relative;}
.time-picker__input {padding-right:48px; cursor:pointer;}
.time-picker__icon-btn {position:absolute; top:50%; right:12px; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; margin:0; padding:0; border:0; background:transparent; transform:translateY(-50%); cursor:pointer;}
.time-picker__icon-btn img {width:24px; height:24px;}
.time-picker.is-open .time-picker__input {border-color:rgba(0,55,118,.4);}
.time-picker__panel {position:absolute; top:calc(100% + 8px); left:0; z-index:5; display:none; gap:4px; padding:4px; border:1px solid rgba(0,55,118,.4); border-radius:4px; background:#fff;}
.time-picker.is-open .time-picker__panel {display:flex;}
.time-picker__col {display:flex; flex-direction:column; width:48px; max-height:224px; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#d4d4d4 transparent;}
.time-picker__col::-webkit-scrollbar {width:3px;}
.time-picker__col::-webkit-scrollbar-track {background:transparent;}
.time-picker__col::-webkit-scrollbar-thumb {border-radius:8px; background:#d4d4d4;}
.time-picker__col::-webkit-scrollbar-thumb:hover {background:#bebebe;}
.time-picker__opt {display:flex; align-items:center; justify-content:center; width:100%; padding:4px 10px; border:0; border-radius:4px; background:transparent; font-size:var(--font-size-16); line-height:1.5em; color:#868686; cursor:pointer;}
.time-picker__opt.is-active {background:var(--color-navy); color:#fff; font-weight:600;}
.sewer-form .form-agree {display:flex; align-items:center; gap:var(--space-12); margin:0; justify-content:flex-start;}
.sewer-form .form-agree .checkbox label {margin:0; font-size:var(--font-size-16); font-weight:400; line-height:1.25em; color:var(--color-text-sub);}
.sewer-form .form-agree .checkbox label:before {width:22px; height:22px; margin:-.1em 8px 0 0; border-radius:5px; background:#fff; border:1px solid #ddd;}
/* ?v= 는 지우지 말 것 — 이 SVG 가 한동안 깨진 파일(xmlns 가 https 로 잘못 적혀 렌더 안 됨)로 배포돼
   방문자 브라우저에 캐시돼 있다. 파일만 고치면 캐시된 깨진 사본이 계속 쓰여 체크표시가 안 보인다.
   (CSS 자체는 header 에서 ?ver=날짜시각 으로 매번 새로 받지만, 그 안의 이미지 URL 은 별도로 캐시된다) */
.sewer-form .form-agree .checkbox input:checked + label:before {background:url("/images/sub/icon-check-box.svg?v=20260812") 50% 50% / 22px 22px no-repeat; border-color:transparent;}
.sewer-form .form-agree .pop_terms {display:inline-flex; align-items:center; justify-content:center; height:24px; padding:0 10px; border:1px solid #ddd; background:#fff; font-size:var(--font-size-12); line-height:1.25em; color:#686868; text-decoration:none; white-space:nowrap;}
.sewer-form .buttons {margin:0;}
.sewer-form .buttons .btn-pack {width:100%; height:auto; min-height:60px; padding:var(--space-16); border:0; border-radius:12px; background:var(--color-secondary); box-shadow:0 6px 9px rgba(44,137,249,.34); font-size:var(--font-size-20); font-weight:700; line-height:1.4em; color:#fff;}
.sewer-form .buttons .btn-pack.focus {background:var(--color-secondary); border:0; color:#fff;}

.sewer-svc-list--2x2 {grid-template-columns:repeat(2, 280px); gap:var(--space-16);}
.sewer-svc-list--2x2 li {width:280px;}

.odor-method .main-sec__head h2 {color:#fff;}
.odor-method .main-sec__head > p {color:rgba(255,255,255,.9);}
.odor-method__list {display:flex; flex-direction:column; gap:var(--space-40);}
.odor-method__item {display:flex; align-items:center; gap:var(--space-60); padding:var(--space-40); border-radius:40px; background:#fff; box-shadow:0 0 16px rgba(0,0,0,.08);}
.odor-method__item .thumb {position:relative; flex:0 0 670px; width:670px; aspect-ratio: 670/420; overflow:hidden; border-radius:24px; box-shadow:0 8px 30px rgba(0,55,118,.1);}
.odor-method__item .thumb img {width:100%; height:100%; object-fit:cover;}
.odor-method__item .step {position:absolute; top:var(--space-24); left:var(--space-24); z-index:1; padding:4px var(--space-8); border-radius:8px; background:var(--color-third); color:#fff; font-size:var(--font-size-14); font-weight:700; line-height:1.43em;}
.odor-method__item .txt {flex:1; display:flex; flex-direction:column; gap:var(--space-40);}
.odor-method__item .no {display:inline-flex; align-items:center; justify-content:center; width:clamp(38px, calc(48 / var(--inner) * 100vw), 48px); height:clamp(38px, calc(48 / var(--inner) * 100vw), 48px); margin:0; border-radius:12px; background:linear-gradient(180deg, var(--color-third), var(--color-secondary)); color:#fff; font-size:var(--font-size-24); font-weight:800; line-height:1em;}
.odor-method__item .txt-body {display:flex; flex-direction:column; gap:var(--space-16);}
.odor-method__item strong {display:block; margin:0; font-size:var(--font-size-40); line-height:1.2em; color:#242424;}
.odor-method__item strong em {font-style:normal; color:var(--color-third);}
.odor-method__item .txt-body > p {margin:0; font-size:var(--font-size-18); line-height:1.78em; color:#454545;}
.odor-method__item .sewer-equip__tags {justify-content:flex-start; margin:0;}
.odor-method__item .sewer-equip__tags li {background:var(--color-secondary); color:#fff; box-shadow:0 4px 2px rgba(0,0,0,.04);}
.odor-method .main-visual__badge {color: #fff;}

.case-intro {position:relative; min-height:720px; display:flex; align-items:center; color:#fff; padding:var(--space-100) 0;}
.case-intro__bg {position:absolute; inset:0; overflow:hidden; z-index:0;}
.case-intro__bg img {width:100%; height:100%; object-fit:cover;}
.case-intro__bg:after {content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.2));}
.case-intro .contain {position:relative; z-index:1;}
.case-intro h2 {font-size:var(--font-size-64); font-weight:700; line-height:1.125em;}
.case-intro h2 em {font-style:normal;}
.case-intro .sewer-sec1__txt > p:last-child {font-size:var(--font-size-28); line-height:1.29em;}
.case-board {padding:var(--space-100) 0 0;}
.case-board__title {margin-bottom:var(--space-60); font-size:var(--font-size-48); font-weight:700; line-height:1.17em; color:#242424; text-align:center;}
.case-search {display:flex; align-items:center; justify-content:space-between; gap:var(--space-24); margin-bottom:0; padding-bottom:var(--space-32); border-bottom:1px solid #242424;}
.case-search__left {display:flex; align-items:center; gap:var(--space-16);}
.case-search__cate .input {width:112px; height:48px; border:1px solid #ddd; border-radius:800px; background:#fff url('/images/bbs/icon-select-arrow.svg') right 16px center no-repeat; padding:0 36px 0 var(--space-16); font-size:var(--font-size-15); color:#242424;}
.case-search__total {font-size:var(--font-size-16); font-weight:600; line-height:1.75em; color:#242424;}
.case-search__total em {font-style:normal; color:#0054a6;}
.case-search__right {display:flex; align-items:center; gap:var(--space-12);}
.case-search__right .input {width:260px; height:48px; border:1px solid #ddd; border-radius:800px; padding:0 var(--space-24); font-size:var(--font-size-14); color:#242424;}
.case-search__right .input::placeholder {color:#bebebe;}
.case-search__btn {display:flex; align-items:center; justify-content:center; width:48px; height:48px; border:1px solid #ddd; border-radius:800px; background:#fff; cursor:pointer;}
.case-search__btn img {width:18px; height:18px;}
.case-list {padding:var(--space-32) 0 var(--space-80);}
.case-list ul {display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--space-64) var(--space-24);}
.case-list li a {display:block;}
.case-list .thumb {aspect-ratio: 464/300; margin-bottom:var(--space-32); overflow:hidden; border-radius:16px; background:#f3f5f8;}
.case-list .thumb img {width:100%; height:100%; object-fit:cover;}
.case-list .thumb--empty {display:flex; align-items:center; justify-content:center;}
.case-list .thumb--empty img {width:80px; height:80px; object-fit:contain;}
.case-list .tit {display:block; margin-bottom:var(--space-12); font-size:var(--font-size-22); font-weight:700; line-height:1.55em; color:#242424;}
.case-list .date {font-size:var(--font-size-16); line-height:1.625em; color:#878787;}
.case-paginate {display:flex; align-items:center; justify-content:center; gap:var(--space-12); margin-top:0;}
.case-paginate a,
.case-paginate strong {display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; margin:0; padding:0; border:1px solid #ddd; border-radius:8px; background:#fff; color:#242424; font-size:var(--font-size-15); font-weight:500; line-height:1em; vertical-align:middle;}
.case-paginate strong {border-color:var(--color-primary); background:var(--color-primary); color:#fff; font-weight:700;}
.case-paginate a:focus,
.case-paginate a:hover {background:#f4f4f4;}
.case-paginate a.direction {margin:0; background-color:#fff; background-position:50% 50%; background-repeat:no-repeat;}