@charset "utf-8";
@import url('reset.css');

:root {
    --pd:15rem;
    --tit1:5.5rem;
    --tit2:5rem;
    --desc1:2.2rem;
    --color:#7c2399;
    --in:148rem; /* 미디어 레일(콘텐츠 폭). 1480px = 큰 타입·이미지 밴드에 맞춘 너비. 줄글은 .inner 안에서 80rem 캡으로 별도 좁힘. */
    --inPd:2rem;
}
/*********************************************************************************************************************************************************************
	Layout
*********************************************************************************************************************************************************************/
.inner { max-width:var(--in); margin:0 auto; padding:0 2rem;}
.top { padding:2rem 0; text-align: center;}
.header { background:#fef6f4; position:relative; }
.header nav > ul { display:flex; justify-content: center; }
.header nav > ul > li { position:relative; }
.header nav .btn-dep1 { display:flex; align-items: center; padding: 0 2.5rem; font-size:2.2rem; color:#444; height:7rem;  position: relative;}
.header nav .btn-dep1:before { content: ''; position: absolute; left: 1.5rem; right:1.5rem; bottom:0; height: 2px; background-color: #cca3cb; opacity:0; transition: all 0.4s ease;}
.header nav > ul > li:hover .btn-dep1:before { opacity:1; bottom:1rem}
.header nav .dep2 { position:absolute; left:0; top:100%; z-index:15; display:none; }
.header nav .dep2 ul { display:flex;  flex-wrap:nowrap;}
.header nav .dep2 ul .btn-dep2 { display:block; padding: 0 3rem; font-size:1.8rem; color:#fff; white-space:nowrap; line-height:5.5rem; transition: all 0.4s ease;}
.header nav .dep2 ul:hover .btn-dep2 { opacity:0.4; }
.header nav .dep2 ul .btn-dep2:hover { opacity:1; }
.header .bg-nav { position:absolute; top:100%; left:0; right:0; height:5.5rem;  background:#cca3cb; z-index:10; display:none; }

.main-visual { margin-bottom: var(--pd); }
.main-visual .swiper-slide { height:80vh; position: relative; }
.main-visual .swiper-slide img { width:100%; height:100%; object-fit:cover; }
.main-visual .inner { position: absolute; left: 50%; bottom:0; width:100%; height: 100%; transform: translateX(-50%);  z-index:5;}
.main-visual .img { height:100%;  overflow: hidden;}
.main-visual .img img { transition: all 1.5s ease; transform: scale(1.2); }
.main-visual .text {  display:flex; height:100%; flex-direction: column; justify-content: center; align-items: flex-start; word-break: keep-all; }
.main-visual .text .t1 { font-size:5.5rem; font-weight:600; color:#fff;  opacity:0; transform: translateY(7rem); }
.main-visual .text .t1 strong { font-size:6.5rem; font-weight:700; color:var(--color); }
.main-visual .text .t2 { font-size:5rem;  color:#fff;  margin:4rem 0;opacity:0; transform: translateY(7rem);}
.main-visual .text .t3 { font-size:3rem;  color:#fff; opacity:0; transform: translateY(7rem); }
/* 배너 표시 유형(banners.layout) — .inner.layout-{값} 으로 텍스트 정렬 분기. 기본 layout-text_left = 위 .text 기본(좌측).
   유형 추가 시 admin Banner::LAYOUTS + 폼 옵션 + 아래 규칙 1줄만 늘리면 스키마 변경 없이 확장된다.
   text_right = 세 줄을 가장 긴 줄 너비의 한 묶음(max-content)으로 만들어 우측으로 보냄(margin-left:auto).
   text_center = 같은 묶음을 좌우 auto 마진으로 가운데 두고 각 줄을 가운데 정렬(text-align:center).
   묶음 안에서는 base 의 align-items:flex-start 가 유지돼 각 줄 시작점이 일치한다. */
.main-visual .inner.layout-text_right .text { width: max-content; max-width: 100%; margin-left: auto; }
.main-visual .inner.layout-text_center .text { width: max-content; max-width: 100%; margin-left: auto; margin-right: auto; align-items: center; text-align: center; }

/* 히어로 텍스트 섀도 — 카피가 흰색 고정이라 밝은 이미지에서 안 읽히는 것을 글자 그림자로 보정.
   이미지 위 딤(스크림)은 배너 원본 색감을 바꿔 기각 — 섀도는 글자 주변만 어두워져 이미지 무손상.
   흰 글자에만 은은하게(근접 윤곽+광역 분리) — 플럼 강조(t1 strong)는 진한 색이라 섀도가 겹치면
   번져 보여 제외. */
.main-visual .text .t1,
.main-visual .text .t2,
.main-visual .text .t3 { text-shadow: 0 1px 2px rgba(0,0,0,0.15), 0 2px 12px rgba(0,0,0,0.15); }
.main-visual .text .t1 strong { text-shadow: none; }

.main-visual .swiper-slide.swiper-slide-active .img img { transform: unset; }
.main-visual .swiper-slide.swiper-slide-active .text .t1{ opacity:1; transform: unset; transition: all 1s ease}
.main-visual .swiper-slide.swiper-slide-active .text .t2{ opacity:1; transform: unset; transition: all 1.2s ease 0.3s;}
.main-visual .swiper-slide.swiper-slide-active .text .t3{ opacity:1; transform: unset; transition: all 1.5s ease 0.5s;}
.main-visual .swiper-pagination { position: static; display: flex; justify-content: center; margin:2rem auto; }
.main-visual .swiper-pagination .swiper-pagination-bullet { width: 8rem; height: 2px; ; background: #eee; opacity: 1;  transition: all 0.5s ease; }
.main-visual .swiper-pagination .swiper-pagination-bullet-active { background: #666;}
.title { margin-bottom: 7rem; text-align: center;}
.title .logo { margin-bottom:2rem; }
.h2 { font-size:var(--tit1);word-break: keep-all;}
.h2-desc { font-size:var(--desc1); color:#666; margin:1.5rem 0 0;word-break: keep-all;}
.h3 { font-size:var(--tit2);  font-weight:400;  word-break: keep-all;}
.h3 strong { color:var(--color); font-weight:700;}
.h3-desc { font-size:1.6rem; letter-spacing: 0.5rem; color:var(--color); margin-bottom: 2rem; text-transform: uppercase;word-break: keep-all;}

.clinic-slider { margin-bottom: var(--pd); position: relative; }
.clinic-slider .swiper-slide a,
.clinic-slider .swiper-slide .nolink { height:45rem; border-radius:1.5rem; background-color: #f4f5f7; display: flex; flex-direction: column; align-items: center; justify-content: center; padding:2rem; text-align: center; transition: all 0.4s ease;}
.clinic-slider .swiper-slide a dl,
.clinic-slider .swiper-slide .nolink dl  { margin-top:7rem;transition: all 0.4s ease}
.clinic-slider .swiper-slide a dl dt,
.clinic-slider .swiper-slide .nolink dl dt { font-size:2.6rem; margin-bottom: 1.5rem; }
.clinic-slider .swiper-slide a dl dd,
.clinic-slider .swiper-slide .nolink dl dd { font-size:5rem; font-weight:700;  }
.clinic-slider .swiper-slide a:hover { background-color:var(--color);}
.clinic-slider .swiper-slide a:hover dl { color:#fff; }
.clinic-slider .swiper-pagination { display: none;}
.swiper-pagination { position: static; max-width:200px; margin:0 auto; height:2px; background-color: #eee; margin-top:50px;  overflow: hidden; }
.swiper-pagination .swiper-pagination-progressbar-fill { background-color: #666; }
.clinic-slider .swiper-button-next, 
.clinic-slider .swiper-button-prev { position: absolute; top: 50%; transform: translateY(-50%);  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; cursor: pointer; z-index: 10; background:none; opacity:0.4; transition: all 0.4s ease;}
.clinic-slider .swiper-button-prev svg,
.clinic-slider .swiper-button-next svg { width:3rem; height:auto; }
.clinic-slider .swiper-button-prev { left:-5rem; }
.clinic-slider .swiper-button-next { right:-5rem; }
.clinic-slider .swiper-button-next:hover,
.clinic-slider .swiper-button-prev:hover { opacity:1; }

.bg-inner { padding:var(--pd) 0; background-color: #f4f5fa; }
.latest-list { display: flex; gap:4rem;}
.latest-list .item { width:100%; min-width: 0; display: flex; flex-direction: column;}
.latest-list .item .tit { font-size:2.6rem; font-weight:600; margin-bottom: 2rem;}
.latest-list .item .img-box { border-radius:1.5rem; background-color: #fff;  flex:1; overflow: hidden;}
.latest-list .item .img-box img { width:100%; aspect-ratio: 48/38; object-fit: cover; object-position: top; display: block;}
.latest-list .item .img-box dl { padding:3rem; }
.latest-list .item .img-box dl dt { font-size:1.8rem; color:#999;}
.latest-list .item .img-box dl dd { font-size:3.2rem; margin-top: 0.5rem; font-weight:600; }
/* 대표글(이미지) 카드 — 이미지가 없을 때 본문을 이미지 영역에 표시 */
.latest-list .item .img-box--text { display: flex; }
.latest-list .item .img-box--text a { display: flex; flex-direction: column; justify-content: center; width:100%; min-height: 28rem; padding:4rem; }
.latest-list .item .img-box--text dl { padding: 0; }
.latest-list .item .img-box__excerpt { margin-top: 2rem; font-size:1.8rem; color:#666; line-height:1.6; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient: vertical; overflow: hidden; }
.latest-list .item .list-box { border-radius:1.5rem; background-color: #fff; padding:4rem 2.5rem ;  flex:1;  }
.latest-list .item .list-box dl { padding-left: 1.5rem; position: relative;; display: flex; justify-content: space-between; align-items: center;color:#333; font-size:2rem; margin-bottom: 2rem; gap:2rem;}
.latest-list .item .list-box dl:before { content: '•'; position: absolute; left: 0; top:0; ;}
.latest-list .item .list-box dl dt { flex:1;  white-space: nowrap;  text-overflow: ellipsis; overflow: hidden; }
.latest-list .item .list-box dl dd{ display: block; text-align: center;}
.latest-list .item .list-box dl dd span:first-child { font-size:1.8rem; display:none;}
.latest-list .item .list-box dl:hover { color:var(--color); }
.latest-list .item .list-box a:first-child dl { margin-bottom: 2rem; padding-bottom: 2rem; border-bottom: 1px solid #ddd; font-size:2.4rem; padding-left: 0;}
.latest-list .item .list-box a:first-child dl:before { display: none; ;}
.latest-list .item .list-box a:first-child dl dd span:first-child { display:block; }

.slider1 { display:flex; gap:4rem; align-items: center; margin:14rem 0; padding-left: max(calc((100% - var(--in)) / 2 + var(--inPd)), var(--inPd));}
.slider1 .left-box { width:45%; }
.slider1 .left-box .t1 { font-size:3rem;  }
.slider1 .left-box .t1 strong { color:var(--color); font-weight:700; }
.slider1 .left-box .t2 { font-size:5rem;  font-weight:500; margin:1.5rem 0 4rem; }
.slider1 .left-box .t2 strong { color:var(--color);  font-weight:700; }
.slider1 .left-box .t3 { font-size:2rem; line-height: 1.6; }
/* 이전/다음 버튼 — 좌측 텍스트 하단. swiper 기본(절대배치·파란 배경화살표) 무력화 후 원형 버튼으로. */
.slider1 .left-box .fs-nav { display:flex; gap:1.2rem; margin-top:4rem; }
.slider1 .left-box .fs-nav .swiper-button-prev,
.slider1 .left-box .fs-nav .swiper-button-next { position:static; margin:0; padding:0; top:auto; left:auto; right:auto;
    width:5rem; height:5rem; border-radius:50%; border:1px solid #ddd; background:#fff none;
    display:flex; align-items:center; justify-content:center; cursor:pointer; transition: all 0.3s ease; }
.slider1 .left-box .fs-nav svg { width:1.2rem; height:auto; }
.slider1 .left-box .fs-nav .swiper-button-prev:hover,
.slider1 .left-box .fs-nav .swiper-button-next:hover { background:var(--color); border-color:var(--color); }
.slider1 .left-box .fs-nav .swiper-button-prev:hover svg path,
.slider1 .left-box .fs-nav .swiper-button-next:hover svg path { stroke:#fff; }
.slider1 .right-box { width:55%; }
.slider1 .right-box .img { position: relative; border-radius:1.5rem; overflow: hidden;}
.slider1 .right-box .img img { width:100%; transition: all 0.5s ease; }
.slider1 .right-box .img i { position:absolute; right:1rem; bottom:1rem; width:4rem; height:4rem; background-color: var(--color); border-radius: 50%; display:flex; align-items: center; justify-content: center;  z-index:2;}
.slider1 .right-box .img i svg { width:1.2rem; height:auto; transform: translateX(0.2rem); }
.slider1 .right-box .img i svg path { stroke: #fff;}
.slider1 .right-box .img:after { content: ''; position: absolute; right:0; bottom:0; width:6rem; height:6rem; border-radius:1.5rem 0 0 ; background-color: #fff; ;}
/* 카드 클릭 = 다음 슬라이드(front.js). 링크 이동이 아니므로 커서만 포인터. */
.slider1 .right-box .fs-go { display:block; cursor:pointer; }
.slider1 .right-box .fs-go:hover .img img { transform: scale(1.2);}
.slider1 .right-box dl { padding:2rem;  }
.slider1 .right-box dl dt { font-size:3rem; font-weight:500;margin-bottom: 1.5rem; }
.slider1 .right-box dl dt strong { color:var(--color); font-weight:700;  }
.slider1 .right-box dl dd { font-size:2rem; }
.slider1 .swiper-pagination{  display: none;}

.contact { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:3rem; }
.contact .item { flex:1; padding:5rem; border-radius:1.5rem; background-color: #f8f9fc; display: flex; flex-direction: column; overflow: hidden;}
.contact .item .tit { text-align: center; ;}
.contact .item .tit svg { width:7rem; height: auto;}
.contact .item .tit p { font-size:4rem; color:var(--color); font-weight:700; margin:0.2rem 0 3rem; }
.contact .item dl { display:flex; gap:2rem; align-items: flex-start; margin-bottom: 1.5rem; }
.contact .item dl dt { width:10rem; line-height: 3rem; border-radius:3rem; background-color: var(--color); font-size:2rem; color:#fff; text-align: center; }
.contact .item dl dd { font-size:2rem; font-weight:600;}
.contact .item dl dd small { display: block; margin-top:0.5rem;}
.contact .item .tel { padding-top:2rem; margin-top:2rem; text-align: center; font-size:2.6rem;  font-weight:700; border-top:1px solid var(--color);}
.contact .item .tel strong { font-size:3.5rem; color:var(--color); font-weight:700; }
.contact .item .addr1 { font-size:3.5rem; color:var(--color);text-align: center; line-height: 1.5;word-break: keep-all}
.contact .item .addr2 { font-size:2.5rem; text-align: center; color:#999; line-height: 1.5; word-break: keep-all; margin-bottom: 3rem;}
.contact .item .btns { text-align: center; ; }
.contact .item .btns a { display: inline-flex; align-items: center; height:5rem; border-radius:4rem; border:1px solid var(--color); background-color: var(--color); font-size:2.4rem; padding:0 2.5rem; color:#fff; gap:2rem; transition: all 0.4s ease;}
.contact .item .btns a:hover svg path { stroke: var(--color);}
.contact .item .btns a:hover { color:var(--color); background-color: #fff; ; }
.contact .item.map-type { padding:0; }
.contact .item iframe { width:100%; height: 100%; ;}

footer { padding:7rem 0; background-color: #565258; margin-top:13rem; }
footer .inner { display: flex; gap:4rem; ; align-items: flex-start;}
footer .info { flex:1; font-size:1.3rem; color:#c4c3c5;  }
footer .info .info1 { display: flex; flex-wrap: wrap;}
footer .info .info1 span{ padding-right:1rem; margin-right:1rem; position: relative;}
footer .info .info1 span:before { content: ''; position: absolute; right:0; top:50%; width:1px; height:10px; margin-top:-5px; background-color: #999 ;}
footer .info .info1 span:last-child:before{ display: none;}
footer .info .copy { margin-top:1rem;}
footer .info .foot-links { margin-top:1.2rem; font-size:1.2rem; }
footer .info .foot-links a { color:#e3e2e4; text-decoration:none; }
footer .info .foot-links a:hover { text-decoration:underline; }
footer .info .foot-links .sep { margin:0 .6rem; color:#888; }
#m-gnb{  display: none;}


/******************************************************************************************
    Sub
******************************************************************************************/
.sub-visual { margin:2rem; position: relative; }
.sub-visual .inner { padding: 13rem ; position: relative; border-radius:3rem; }
.sub-visual:before { content: ''; position: absolute; left: 2rem; top:2rem; right:2rem; bottom:2rem; background: url(../img/sub/img_head.jpg) no-repeat 50% 50%; background-size: cover; border-radius:3rem;}
.sub-visual .path { display:flex; gap:1rem; align-items: center;  position: relative; z-index:2;}
.sub-visual .path .home { flex-shrink: 0;}
.sub-visual .path .nice-select { border: 0; padding-left: 0; padding-right: 3rem; height: auto; line-height: 1; background: none; font-size:1.6rem;}
.sub-visual .path .nice-select:after { right: 0; width: 1rem;; height:1rem; margin-top: -0.3em; font-size: 1.5rem; border: 0; transform: rotate(0deg); transform-origin: center; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6" viewBox="0 0 10 6" fill="none"><path d="M5.70711 5.29289C5.31658 5.68342 4.68342 5.68342 4.29289 5.29289L0.707107 1.70711C0.0771422 1.07714 0.523308 -4.39064e-07 1.41421 -3.61179e-07L8.58579 2.6578e-07C9.47669 3.43665e-07 9.92286 1.07714 9.29289 1.70711L5.70711 5.29289Z" fill="black"/></svg>') center/contain no-repeat; transition: transform 0.3s; }
.sub-visual .path .nice-select.open:after { transform: rotate(180deg); }
.sub-visual .path.current .current { color:var(--black); } /* 현재 페이지*/
.sub-visual .path .nice-select .option{padding: 0.4em 1em; color:var(--blue)}
.sub-visual .path .nice-select .list{margin-top: 1em;}
.sub-visual .dot {   margin: 0 1em;    width: 4px;    height: 4px;    margin-top: 2px;    background-color: #000;    opacity: 0.3;    border-radius: 50%;}
.sub-visual h2 { font-size:6rem; font-weight:700; margin-top:2rem; }
.snb { border-bottom: 1px solid #eee; margin:-3rem 0 10rem;}
.snb nav { display: flex; justify-content: center; }
.snb nav a { line-height: 7rem; font-size:2rem; color:#777; padding:0 2rem; ;}
.snb nav a:hover { color:var(--color); }
.snb nav a.active { color:var(--color); font-weight:600; }

.tabs { display:flex; justify-content: center; gap:2rem; margin-bottom: 8rem;}
.tabs a{ display: flex; height:6rem; border-radius:6rem;  align-items: center; justify-content: center; align-items: center; padding:0 3.5rem; font-size:2rem; font-weight:600; border:1px solid #ddd;; transition: all 0.4s ease;}
.tabs a.active { background-color: var(--color); color:#fff; border-color:var(--color);}
.tabs a:hover { background-color: var(--color); color:#fff; border-color:var(--color);}

.title2 { display: flex; margin-bottom: 8rem; }
.title2 .tit { width:30%; border-right:1px solid #ddd; padding-left: 3%;}
.title2 .tit small {display: block; font-size:1.6rem; letter-spacing: 0.3rem; color:var(--color); margin-bottom: 1.5rem;}
.title2 .tit p { font-size:4.5rem; font-weight:700; }
.title2 .text { flex:1; font-size:2rem; line-height: 1.6; padding:0.5rem 0;  padding-left: 5rem; ;}
.img-box1 { margin-bottom: var(--pd);}

/* 한 줄에 4개씩 → 4개 단위로 자동 개행(아이콘 카드 그리드). 카드는 25% 고정폭(가로 gap 7rem 차감),
   마지막 줄(1~3개)은 justify-content:center 로 가운데 정렬. 아이콘 원은 칸을 넘지 않도록 min(…,100%)로 축소. */
.feature1 { display:flex; flex-wrap: wrap; justify-content: center; gap:3rem 7rem ; text-align: center; margin-bottom: var(--pd);}
.feature1 .item { flex:0 0 calc(25% - 5.3rem); min-width:0; }
.feature1 .item i {  width:min(30rem, 100%); margin:0 auto; padding:5rem;  aspect-ratio: 1/1; border-radius:100%; display: flex; justify-content: center; align-items: center; background-color: #f4f5f7; }
.feature1 .item .txt { font-size:2.2rem; line-height: 1.6; margin-top:3rem ;}

/* 텍스트 카드 그리드 — 한 줄에 3개씩, 3개 초과 시 자동 개행. 카드는 33.333% 고정폭(가로 gap 3rem 차감).
   설명(tc-desc)은 카드 폭에 맞춰 자동 줄바꿈, 입력한 개행은 nl2br 로 <br> 보존. */
.text-cards { display:flex; flex-wrap: wrap; gap:3rem; margin-bottom: var(--pd); }
/* 배경 = 브랜드색 옅은 틴트(--color-soft, 브랜드색 변경 시 자동 파생). 테두리는 틴트보다 살짝 진한 톤으로 옅게. */
.text-cards .item { flex:0 0 calc(33.333% - 2rem); min-width:0; padding:4rem 3.5rem; border-radius:2rem;
    display:flex; flex-direction:column; justify-content:center; text-align:center;
    background-color: var(--color-soft);
    border:1px solid var(--color-soft);
    border-color: color-mix(in srgb, var(--color) 16%, #fff);
    transition: box-shadow .1s ease, transform .1s ease; }
/* 호버 = 외곽선 강조 대신 살짝 떠오르는(부양) 형태 — 상승 + 넓고 부드러운 그림자. 테두리·배경은 기본 유지. */
.text-cards .item:hover {
    box-shadow: 0 1.6rem 3.6rem rgba(0,0,0,0.12);
    transform: translateY(-0.8rem); }
.text-cards .item .tc-title { display:block; font-size:2.4rem; font-weight:700; line-height:1.4; margin-bottom:1.5rem; }
.text-cards .item .tc-desc { font-size:2rem; line-height:1.7; color:#555; word-break: keep-all; overflow-wrap: anywhere; }

/* 기본 배경 = 회색만. 배경 이미지는 블록에서 업로드 시 인라인 background-image 로만 채워짐(위치 right 50% / 크기 auto 100% 는 여기 유지). */
.feature2 { padding:15rem 0; background:#eff0f2 no-repeat right 50%; background-size: auto 100%; }
.feature2 ul { max-width:100rem; margin:0 auto; }
.feature2 ul li { padding:3rem 6rem; border-radius:8rem; background-color: #fff; display: flex; align-items: flex-start; }
.feature2 ul li + li { margin-top:2rem;}
.feature2 ul li i { flex-shrink: 0; padding-right:3rem;  }
.feature2 ul li i svg { width:3rem; height: auto; ;}
.feature2 ul li i svg path { stroke: var(--color);}
.feature2 ul li div { font-size:2.67rem; padding-left: 3rem; border-left:1px solid #ddd; }

.feature3 { margin:var(--pd) 0; }
.feature3 ul { display: flex; gap:2rem; ;}
.feature3 ul li { flex:1; min-width:0; }
.feature3 ul li img { width:100%; height:auto; }
.feature3 ul dl { margin-top:3rem;}
.feature3 ul dl dt { display: flex; gap:2rem; font-size:2.3rem; font-weight:600; margin-bottom: 1rem; }
.feature3 ul dl dt span { font-weight:600; color:#b52b2b}
.feature3 ul dl dd { font-size:1.8rem; }

.feature4 ul li { display: flex; flex-direction: row}
.feature4 ul li + li { margin-top:8rem; }
.feature4 ul li:nth-child(even) { flex-direction: row-reverse;}
.feature4 ul li .img { flex:1; }
.feature4 ul li .img img { width:100%; border-radius:1.5rem; }
.feature4 ul li .text { flex:1;  display: flex; justify-content: center; align-items: center; text-align: center; flex-direction: column;}
.feature4 ul li .text .t1 { text-align: center; ;}
.feature4 ul li .text .t1 span { display: inline-flex; align-items: center; justify-content: center; padding:0 2rem; height: 4.5rem; border-radius:4.5rem; border:1px solid var(--color); font-size:2rem; color:var(--color); font-weight:600;}
.feature4 ul li .text .t2 { font-size:3.5rem; font-weight:700; margin:1.5rem 0; }
.feature4 ul li .text .t3 { font-size:1.8rem; line-height: 1.6;}

.feature5 { margin:var(--pd) 0; }
.feature5 ul { display: flex; ;}
.feature5 ul li { flex:1; padding:3rem 7rem; text-align: center; border-right:1px solid #ddd;}
.feature5 ul li:last-child { border-right:0;}
.feature5 ul li dl { margin-top:3rem;}
.feature5 ul li dl dt { font-size:2.5rem; font-weight:600; margin-bottom: 2rem; ;}
.feature5 ul li dl dd { font-size:1.8rem; line-height: 1.6;}

.process { margin-bottom: var(--pd); }
.process ul li { display: flex; gap:2rem 5rem; justify-content: space-between; align-items: center; padding-bottom: 5rem; margin-bottom: 5rem; border-bottom: 1px solid #ddd;}
.process ul li:last-child { padding-bottom: 0; border:0;;}
.process ul li .text { padding-left: 8rem;}
.process ul li .text .tit { font-size:3rem; margin-bottom: 2rem; position: relative; font-weight:600;}
.process ul li .text .tit span { position: absolute; left:-5rem; top:0; ;}
.process ul li .text .txt { font-size:1.8rem; line-height: 1.6; }

.feature6 { position: relative; margin-bottom: var(--pd);}
.feature6 .swiper-pagination { display: none;}
.feature6 .swiper-button-next, 
.feature6 .swiper-button-prev { position: absolute; top: 50%; transform: translateY(-50%);  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.5rem; cursor: pointer; z-index: 10; background:none; transition: all 0.4s ease; opacity:0.4;;}
.feature6 .swiper-button-prev svg,
.feature6 .swiper-button-next svg { width:3rem; height:auto; }
.feature6 .swiper-button-prev { left:-5rem; }
.feature6 .swiper-button-next { right:-5rem; }
.feature6 .swiper-button-next:hover,
.feature6 .swiper-button-prev:hover { opacity:1; }
.feature6 .swiper-slide img { width:100%; border:1px solid #333; }
.feature6 .swiper-slide dl { margin-top:3rem; }
.feature6 .swiper-slide dl dt { font-size:2.4rem; font-weight:600; margin-bottom: 1.5rem;}
.feature6 .swiper-slide dl dd { font-size:1.8rem; line-height: 1.6; word-break: keep-all;}

.feature7 { margin-bottom: calc(var(--pd) + 5rem);}
.feature7 ul { display: flex; justify-content: space-around; gap:2rem 5rem;  text-align: center;}
.feature7 ul i {  border-radius:2rem; width:14rem; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background-color: #514d4c;}
.feature7 ul dl dt { margin:1.2rem 0 1rem; font-size:2.5rem; font-weight:600; }
.feature7 ul dl dd { font-size:1.8rem; }

.faq { margin-bottom: var(--pd);}
.faq .list ul li { padding:0 0 3rem 8rem; border-radius:2rem; background-color: #f8f8f8;  margin-bottom: 2rem; transition: all 0.4s ease;}
.faq .list ul li .q { font-size:2.5rem; padding:5rem 9rem 2rem 0 ; font-weight:600; position: relative; cursor: pointer; transition: all 0.4s ease;}
.faq .list ul li .q:before { content: ''; position: absolute; right:5rem; top:5rem; width:2rem; height: 2rem; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23aaaaaa"><path d="M256 429.3l22.6-22.6 192-192L493.3 192 448 146.7l-22.6 22.6L256 338.7 86.6 169.4 64 146.7 18.7 192l22.6 22.6 192 192L256 429.3z"/></svg>') center/contain no-repeat; transition: transform 0.3s, background 0.3s;}
.faq .list ul li .q span { position: absolute; left: -3rem; ;}
.faq .list ul li .a { font-size:2rem; line-height: 1.6; padding-bottom:2rem; display:none; }
.faq .list ul li.active { background-color: var(--color); color:#fff; }
.faq .list ul li.active .q:before { transform: rotate(180deg); background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="%23ffffff"><path d="M256 429.3l22.6-22.6 192-192L493.3 192 448 146.7l-22.6 22.6L256 338.7 86.6 169.4 64 146.7 18.7 192l22.6 22.6 192 192L256 429.3z"/></svg>'); }


























.mobile { display: none;}

@media all and (max-width:1680px) {	
    .clinic-slider .swiper-button-next, 
    .clinic-slider .swiper-button-prev,
    .feature6 .swiper-button-next, 
    .feature6 .swiper-button-prev { display: none;;}
    .clinic-slider .swiper-pagination,
    .feature6 .swiper-pagination { display: flex;}
}
@media all and (max-width:1280px) {	
    html { font-size:8px; }
    .contact .item { padding:3rem 2rem;}
    .latest-list { gap:20px;}
}


@media all and (max-width:1080px) {

}
@media all and (max-width:1020px) {	
    .pc { display: none;}
    .mobile { display: block;}
    html { font-size:7px; }

    .header { display: none;}
    .top h1 img { height:45px; }

    .m-bg { display: none; position: fixed;left: 0; right:0; top:0; bottom:0; background: rgba(0,0,0,0.7); z-index:5000; }
    body.fixed { overflow: hidden;}

    .btn-m { position: absolute; right:5px; top:15px; width:45px; height: 50px; -webkit-appearance:none; appearance:none; background: none; border: 0;  z-index:5000; outline:none; }
    .btn-m span { display: block; width:22px; height: 2px; background: #666; position: absolute; left: 10px; top:5px; transition:all 0.3s ease;  }
    .btn-m span:nth-child(1) { top:14px; }
    .btn-m span:nth-child(2) { top:21px; }
    .btn-m span:nth-child(3) { top:28px; }

    body.fixed  .btn-m span { background: #fff; }
    body.fixed .btn-m span:nth-child(1) { transform:rotate(45deg); top:21px; }
    body.fixed .btn-m span:nth-child(2) { left:-5px; opacity:0; }
    body.fixed .btn-m span:nth-child(3) { transform:rotate(-45deg); top:21px; }

    #m-gnb { position: fixed; width:80vw; right:-80vw; top:0; bottom:0; background:#fff; z-index:6000; transition: all 0.3s ease; opacity:0; display: block;}
    #m-gnb .btn-close { position: absolute; right:10px; top:0; width:45px; height: 50px; -webkit-appearance:none; appearance:none; background: none; border: 0;  z-index:5000; outline:none; }
    #m-gnb .btn-close:before { content: ''; display: block; width:25px; height: 2px; background:#333; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%) rotate(45deg); }
    #m-gnb .btn-close:after { content: ''; display: block; width:25px; height: 2px; background:#333; position: absolute; left:50%; top:50%; transform: translate(-50%, -50%) rotate(-45deg); }
    #m-gnb nav { display: block; height: calc(100% - 50px); overflow-y: auto;margin-top:50px; }
    #m-gnb nav .btn-dep1 { display: block;  padding:15px 20px; font-size:18px; font-weight:600; position: relative;}
    #m-gnb nav .btn-dep1:before {content: ''; position: absolute; right:25px; top:16px; width:8px; height: 8px; border-left: 2px solid #555; border-bottom: 2px solid #555; transform: rotate(-45deg); transition: all 0.3s ease;}
    #m-gnb nav > ul > li.on .btn-dep1:before { transform: rotate(135deg); top:24px; }
    #m-gnb nav .dep2 { display: none; background-color: #f2f2f2; }
    #m-gnb nav .btn-dep2 { display: block;  padding:10px 20px; font-size:14px; position: relative; }
    body.fixed #m-gnb {right:0; opacity:1;  }

    .main-visual .swiper-slide { height:60vh; }
    /* text_right: 모바일은 br.pc 가 사라져 각 줄이 한 줄로 길어지고, .text 가 max-content→100% 로 꽉 차
       margin-left:auto 의 밀어낼 여백이 없어져 좌측으로 보인다. 이 구간에선 줄 자체를 우측 정렬해 유형 유지. */
    .main-visual .inner.layout-text_right .text { align-items: flex-end; text-align: right; }
    .clinic-slider .swiper-slide a img,
    .clinic-slider .swiper-slide .nolink img { max-height:60px; }
    .sub-visual { margin-top:-2rem;}
    .sub-visual .inner { padding-left: 8rem; padding-right:8rem;}
    .sub-visual .path .home svg { width:10px; height: auto;}
    .title2 { display: block; margin-bottom: 3rem;}
    .title2 .tit { width:auto; padding-left: 0; border-right:0;margin-bottom: 1.5rem;}
    .title2 .text { padding-left:0; }
    .feature1 .item i { width:min(20rem, 100%); padding:4rem; }
    .feature1 .item i img { max-width:10rem; }
    .title .logo img { max-width:9rem; }
    .feature5 ul li i img { max-width:9rem;}
    .process ul li .text .txt br { display: none;}
    .process ul li .img { flex:0 0 35%; }

    
}





@media all and (max-width:800px) {	
    :root { 
        --pd:10rem;
        --tit1:5rem;
        --tit2:4rem; 
    }
    .feature7 ul { flex-wrap: wrap; justify-content: center;}
    .contact { display: block; ;}
    .contact .item + .item { margin-top:20px; }
    .contact .item.map-type { height:240px}
    .main-visual .text .t1 { font-size:3rem; }
    .main-visual .text .t1 strong { font-size:4rem; }
    .main-visual .text .t2 { font-size:3.2rem; margin:2rem 0; }
    .main-visual .text .t3 { font-size:2.4rem; }
    .clinic-slider .swiper-container { margin:0 -20px;}
    .latest-list { display: block;}
    .latest-list .item + .item { margin-top:20px; }
    .slider1 { display: block; padding:0 20px; margin:8rem 0;;}
    .slider1 .left-box { width:auto; margin-bottom: 20px;}
    .slider1 .right-box { width:auto; }
    .slider1 .right-box .swiper-container { padding:0 20px; margin:0 -20px;}
    .slider1 .left-box .t2 { font-size:4rem; word-break: keep-all; }
    /* 모바일: 좌우로 밀어 넘기므로 버튼 숨김(사이트 다른 슬라이더와 동일 정책). */
    .slider1 .left-box .fs-nav { display:none; }
    .contact .item .addr1 { font-size:2.8rem; }
    .contact .item .addr2 { font-size:2.2rem; }
    footer { padding:5rem 0; margin-top:10rem; }
    footer .inner { display: block;}
    footer .logo { margin-bottom: 20px;}
    .sub-visual { margin-left: 0; margin-right:0;;}
    .sub-visual:before { left:0; right:0; border-radius:0;}
    .sub-visual .inner { padding:8rem 20px;}
    .sub-visual h2 { font-size:4rem; }
    .snb nav { flex-wrap: wrap;}
    .tabs a { padding:0 10px; }
    .tabs { gap:10px; flex-wrap: wrap;}
    .feature1 { gap:3rem 3rem; }
    .feature1 .item { flex-basis: calc(50% - 1.5rem); }
    .text-cards .item { flex-basis:100%; padding:3.5rem 3rem; }
    .title { margin-bottom: 4rem;}
    .h2 { font-size:4rem;}
    .feature3 ul { display: block; ;}
    .feature3 ul li + li { margin-top:40px; }
    .feature4 ul li { display: block; ;}
    .feature4 ul li + li { margin-top:40px;}
    .feature4 ul li .img { margin-bottom: 20px;}
    .feature5 ul { display: block;}
    .feature5 ul li { border:0; border-bottom:1px solid #ddd;}
    .feature5 ul li:last-child { border-bottom: 0;}
    .process ul li { display: block; ;}
    .process ul li .text { margin-bottom: 20px;}
    .faq .list ul li { padding-left:6rem; }
    .faq .list ul li .q { padding:3rem 5rem 1rem 0; }
    .faq .list ul li .q:before { right:2rem; }
}


/* ──────────────────────────────────────────────────────────────
   메인 팝업(위치지정) — admin 팝업관리(/admin/popups) 연동.
   박스 = position:absolute + 인라인 left/top/width(운영자 지정값 그대로).
     · absolute = 페이지(문서)에 박혀 스크롤하면 콘텐츠와 함께 위로 사라짐(화면 고정 아님).
       이를 위해 .site-popups 는 비포지셔닝(static) → 자식 absolute 가 문서 좌상단 기준이 됨.
   이미지는 박스를 꽉 채우고, 내용/닫기바는 박스 안 하단 오버레이(absolute)라 박스를 키우지 않음
   → 운영자가 입력한 위치·크기와 정확히 일치.
   기본 표시(fail-open) — front.js 가 '오늘 하루 보지 않기' 설정된 것만 숨김.
   JS 가 꺼지거나 오류여도 팝업은 떠야 하므로 display:none 기본값을 두지 않는다.
   ────────────────────────────────────────────────────────────── */
.site-popups { position: static; }
.site-popup {
    position: absolute;
    z-index: 1200;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, .18);
    max-width: calc(100vw - 24px);
    /* 기본(auto) = 박스 높이는 이미지에 맞춰 자동(크롭·빈공간 없음). 운영자 width 로 폭만 제어. */
}
/* auto 모드 — 이미지를 박스 폭에 맞춰 원본 비율 전체 표시(width:100% / height:auto). 크롭 없음. */
.site-popup-img { display: block; line-height: 0; }
.site-popup-img > a { display: block; }
.site-popup-img img { display: block; width: 100%; height: auto; }
/* cover 모드 — 박스가 지정 height 를 가지고, 이미지가 남는 공간을 채우며 넘치면 크롭(object-fit:cover). */
.site-popup--cover .site-popup-img { flex: 1 1 auto; min-height: 0; }
.site-popup--cover .site-popup-img,
.site-popup--cover .site-popup-img > a { height: 100%; }
.site-popup--cover .site-popup-img img { width: 100%; height: 100%; object-fit: cover; }
/* 내용(선택) = 이미지 아래 텍스트 밴드. 하단 패딩은 오버레이 푸터(absolute) 높이만큼 비워 텍스트 가림 방지. */
.site-popup-content { padding: 14px 16px 46px; font-size: 14px; line-height: 1.6; color: #333; }
/* 닫기바(개별 모드) = 이미지/내용 아래(정상 흐름). 배경 없이 투명 — 스타일은 아래 공통 푸터 규칙(.site-popup-foot/.sps-foot)에서 정의. */

/* 사이트가 모바일(햄버거) 모드로 전환되는 기준(.header 숨김 = ≤1020px)과 동일하게 맞춤.
   이 구간에선 운영자 좌표(데스크탑 1440 기준)가 안 맞으므로 무시하고 화면 중앙 상단 + 화면폭에 맞춤.
   top = 모바일 헤더(.top 로고바, rem 7px 기준 ≈73px) 아래로 안전하게 비킴. */
@media (max-width: 1020px) {
    .site-popup {
        left: 50% !important;
        top: 90px !important;
        transform: translateX(-50%);
        width: calc(100vw - 32px) !important;
        max-width: 360px;
    }
}

/* ──────────────────────────────────────────────────────────────
   통합 슬라이더 모드(중앙 모달) — 디자인 설정 popup_display_mode='slider' 일 때.
   모든 팝업을 어두운 배경 위 중앙 한 창에 모아 한 장씩(가로 트랙 translateX) 표시.
   탐색 = 좌우 화살표 + 하단 점 + 터치 스와이프(front.js). image_fit 무시(원본 비율).
   '오늘 하루 보지 않기' = 전체 키(front.js sitePopupHideAll). 기본 표시(fail-open).
   ────────────────────────────────────────────────────────────── */
.site-popup-modal { position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center; padding: 16px; }
.site-popup-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); }
.site-popup-slider {
    --sps-per: 3;                                   /* 한 화면에 보일 최대 장수(반응형) — front.js 가 읽음 */
    --sps-slide-w: 400px;                           /* 슬라이드 1장 외곽 폭(카드 + 좌우 7px 간격). 비율 유지한 채 키워 3장이 옛 4장폭(~1200px) 차지 */
    position: relative; z-index: 1;
    width: min(1200px, calc(100vw - 32px)); max-height: 88vh;  /* 폴백 — front.js 가 보이는 장수만큼 실폭 지정 */
    display: flex; flex-direction: column;
}
.sps-viewport {
    position: relative; overflow: hidden; flex: 1 1 auto; min-height: 0;
    user-select: none;                              /* 마우스 드래그 스와이프 중 텍스트 선택 방지 */
    /* 투명 — 흰 카드는 각 슬라이드 안쪽(.sps-card)에. 팝업 사이 '투명 간격'으로 dim 배경이 비친다. */
}
.sps-viewport.is-grabbable { cursor: grab; }        /* 스크롤 가능(2장 초과)할 때만 grab 커서 */
.sps-viewport.is-grabbing { cursor: grabbing; }
/* align-items:stretch → 카드 높이를 가장 큰 카드에 통일(상단·하단 모두 정렬). */
.sps-track { display: flex; align-items: stretch; height: 100%; transition: transform .32s ease; will-change: transform; }
/* 슬라이드 = 고정 폭(--sps-slide-w). 좌우 padding 이 팝업 사이 '투명 간격'. display:flex 로 카드가 슬라이드 높이를 채움. */
.sps-slide { flex: 0 0 var(--sps-slide-w); width: var(--sps-slide-w); box-sizing: border-box; padding: 0 7px; display: flex; }
/* 카드 = 흰 배경 + 라운드. flex 컬럼으로 이미지(원본비율 풀폭)+내용 쌓고, 통일 높이를 채움(짧으면 하단 흰 여백). */
.sps-card { background: #fff; border-radius: 8px; overflow: hidden; overflow-y: auto; max-height: 84vh; flex: 1 1 auto; display: flex; flex-direction: column; }
/* 이미지 영역 = 카드 폭을 항상 꽉 채우고(width:100%) 높이는 이미지 원본 비율 그대로(height:auto).
   고정 4/5 박스 + object-fit:contain 은 박스보다 세로로 긴 포스터(예: 500×660=0.758 < 0.8)에서
   WebKit(아이폰)이 박스 비율을 존중해 좌우에 카드 흰 배경 기둥(pillarbox)을 만든다(Blink 는 박스를
   자연 높이로 늘려 안 생김 → 엔진차로 데스크톱만 멀쩡). width:100% 면 어느 엔진에서나 카드 폭을 채워 제거. */
.sps-img { display: block; line-height: 0; flex: 0 0 auto; }
.sps-img > a { display: block; }
.sps-img img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
/* 내용 = 최대 3줄(말줄임)로 높이 변동 억제 + 남는 공간 채움(통일 높이 유지). */
.sps-content {
    padding: 12px 14px; font-size: 14px; line-height: 1.5; color: #333; flex: 1 1 auto;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
/* 좌우 버튼 — 팝업영역 바깥(슬라이더 기준 절대배치), 흰색 외곽선 원형. front.js 가 1페이지면 숨김. */
.sps-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    width: 42px; height: 42px; border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .9); background: rgba(0, 0, 0, .22);
    color: #fff; line-height: 0;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background .15s ease;
}
/* 1페이지(배너 1개 등)면 비노출 — JS 가 건 hidden 속성을 CSS 가 존중(display:flex 가 [hidden] 을 덮던 버그 수정). */
.sps-nav[hidden] { display: none; }
.sps-nav svg { display: block; }                /* 사이트 공통 chevron SVG, stroke=currentColor(흰색) */
.sps-nav:hover { background: rgba(0, 0, 0, .5); }
.sps-prev { left: -54px; }
.sps-next { right: -54px; }
/* 하단 점(dots) */
.sps-dots { position: absolute; left: 0; right: 0; bottom: 8px; z-index: 2; display: flex; justify-content: center; gap: 6px; }
.sps-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .55); box-shadow: 0 0 2px rgba(0, 0, 0, .4); cursor: pointer; }
.sps-dot.is-active { background: #fff; }
/* ── 하단 푸터 — 버튼 2개(A형): 좌 '오늘 하루 보지 않기'(1클릭=적용+닫힘) / 우 '닫기 ✕'(세션 닫기).
   체크박스 변칙 사용을 피하고 둘 다 명확한 버튼. 색은 currentColor → 배경에 맞춰 모드별 color 지정. */
.sps-foot, .site-popup-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px; background: transparent; border-top: 0;
}
.sps-hide, .sps-close, .site-popup-hide, .site-popup-close {
    flex: 0 0 auto; border: 0; color: inherit;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 14px; border-radius: 16px;
    background: rgba(255, 255, 255, .14);            /* 옅은 칩 배경 — '버튼'임이 분명하게 */
    font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer;
    transition: background .15s ease;
}
.sps-close .x, .site-popup-close .x { font-size: 15px; font-weight: 400; }
.sps-hide:hover, .sps-close:hover, .site-popup-hide:hover, .site-popup-close:hover { background: rgba(255, 255, 255, .28); }

/* 슬라이더 — 푸터가 흰 카드 밖, 어두운 dim 배경 위 → 흰색 컨트롤(완전 투명 배경). */
.sps-foot { flex: 0 0 auto; color: #fff; }

/* 개별 — 흰 박스를 키우지 않게 이미지 위 하단 오버레이. 배경은 투명(아주 옅은 하단 그라데이션만 가독용) → 흰색 컨트롤. */
.site-popup-foot {
    position: absolute; left: 0; right: 0; bottom: 0; color: #fff;
    background: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0));
}
/* 반응형 — 좁은 화면일수록 최대 노출 장수(--sps-per)와 슬라이드 폭(--sps-slide-w) 축소.
   모바일은 카드를 거의 화면폭으로 + 바깥 여백이 없어 버튼을 안쪽 가장자리로(흰 외곽선 유지). */
@media (max-width: 1340px) {
    .site-popup-slider { --sps-slide-w: 300px; }    /* 1200px(+좌우 버튼)이 안 들어가는 중간 폭은 1장 폭 축소 */
}
@media (max-width: 1020px) {
    .site-popup-slider { --sps-per: 2; --sps-slide-w: 280px; }
}
@media (max-width: 600px) {
    .site-popup-slider { --sps-per: 1; --sps-slide-w: calc(100vw - 32px); }
    .sps-prev { left: 6px; }
    .sps-next { right: 6px; }
}