/* ===== 폰트: NanumSquare (CDN, 각 페이지 의 nanumsquare.css 링크로 로드) ===== */ /* 굵기: Light 300 / Regular 400 / Bold 700 / ExtraBold 800 */ :root { --beige: #D8ADC1; --beige-soft: #EAE4E7; --cream: #EAE4E7; --ink: #000000; /* 사이트 기본 텍스트/블랙 대체 색 */ --gray: #505050; --line: #e5e5e5; --header-h: 100px; /* PC 헤더 총 높이 고정 (1px 하단 stroke 포함) */ } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "NanumSquare", -apple-system, "Apple SD Gothic Neo", sans-serif; color: var(--ink); background: #fff; line-height: 1.7; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* 반응형 줄바꿈: 모바일 전용 br은 기본 숨김(아래 미디어쿼리에서 표시) */ .br-mo { display: none; } /* 본문 폭 = 최대 1180px, 좌우 거터(gutter) 15px (전 페이지 공통) */ .container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 15px; } /* ===== 미디어 플레이스홀더 (이미지·영상 들어갈 자리) ===== */ .media-placeholder { position: relative; width: 100%; height: 100%; background: repeating-linear-gradient(45deg, #EAE4E7 0 12px, #EAE4E7 12px 24px); border: 1px dashed #c4bba8; display: flex; align-items: center; justify-content: center; color: #8a8170; font-size: 0.85rem; font-weight: 500; text-align: center; } .media-placeholder::after { content: attr(data-label); padding: 0.4rem 0.8rem; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--ink); color: #fff; padding: 0.7rem 1.2rem; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; } /* ===== 헤더 ===== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; background: transparent; /* 기본(최상단): 투명 — 어두운 히어로/배너 위에 오버레이 */ border-bottom: 1px solid transparent; transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease; } /* 스크롤 내리면: 흰 배경 + 검은 텍스트(기존 룩) */ .site-header.scrolled { background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); border-bottom-color: #e5e5e5; /* 헤더 하단 stroke = 기준 회색 */ } /* 기본(투명) 상태: 텍스트·로고·아이콘 흰색 */ .site-header:not(.scrolled) .gnb > ul > li > a { color: #fff; } .site-header:not(.scrolled) .gnb-more-btn .dot { background: #fff; } .site-header:not(.scrolled) .nav-toggle span { background: #fff; } .site-header:not(.scrolled) .logo img { filter: brightness(0) invert(1); } /* 모바일 메뉴 열렸을 땐 흰 패널 가독성 위해 솔리드로 */ .site-header:has(.nav-toggle[aria-expanded="true"]) { background: rgba(255,255,255,0.97); backdrop-filter: blur(8px); border-bottom-color: #e5e5e5; } .site-header:has(.nav-toggle[aria-expanded="true"]) .logo img { filter: none; } .site-header:has(.nav-toggle[aria-expanded="true"]) .nav-toggle span { background: var(--ink); } /* 로고+메뉴 전체 가운데 정렬, 위아래 +3px (76→82px) */ /* 총 헤더 높이 = var(--header-h)(75px). 1px 하단 stroke 포함이라 inner는 -1px */ .header-inner { position: relative; display: flex; align-items: center; justify-content: center; gap: 2.5rem; height: calc(var(--header-h) - 1px); } .logo { display: flex; align-items: center; flex: none; } /* 좁아져도 로고 안 줄어들게 */ .logo img { width: 86px; height: auto; max-width: none; display: block; } /* 헤더 로고 (이전 144 → -40%) */ .logo-w { font-family: "NanumSquare", serif; font-style: italic; color: var(--beige); } /* GNB (데스크톱) — 풀하이트 + 호버 드롭다운 */ .gnb { align-self: stretch; } .gnb > ul { display: flex; flex-wrap: nowrap; gap: 1.8rem; list-style: none; height: 100%; } .gnb > ul > li { position: relative; display: flex; align-items: center; flex: none; } .gnb > ul > li > a { display: flex; align-items: center; height: 100%; white-space: nowrap; /* 가로 줄어도 줄바꿈 금지 */ font-size: 18px; font-weight: 500; color: var(--ink); transition: color .2s; } .gnb > ul > li > a:hover { color: #D8ADC1; } /* 현재 보고 있는 섹션의 메뉴: 색 + 2px 밑줄 */ .gnb > ul > li > a.is-active { color: #D8ADC1; text-decoration: underline; text-decoration-color: #D8ADC1; text-decoration-thickness: 2px; text-underline-offset: 7px; } .gnb-sub { position: absolute; top: calc(100% - 10px); left: 0; /* 헤더와 살짝 겹치게 */ min-width: 170px; background: #fff; /* 테두리·라운드 없음 */ box-shadow: 0 12px 30px rgba(0, 0, 0, .08); padding: 6px 0; list-style: none; opacity: 0; visibility: hidden; transition: opacity .18s ease; z-index: 1; } .gnb > ul > li:hover > .gnb-sub, .gnb > ul > li:focus-within > .gnb-sub { opacity: 1; visibility: visible; } .gnb-sub li { white-space: nowrap; } .gnb-sub a { display: block; padding: 10px 22px; font-size: 16px; font-weight: 400; /* 텍스트 16px · 상하 10px */ color: var(--ink); transition: background .15s; } .gnb-sub a:hover { background: #EAE4E7; } /* 더보기(…) 오버플로 메뉴 — 화면 좁아지면 안 들어가는 대메뉴를 여기로 */ .gnb-more { position: relative; display: flex; align-items: center; flex: none; } .gnb-more[hidden] { display: none; } .gnb-more-btn { display: flex; align-items: center; gap: 4px; height: 100%; background: none; border: 0; cursor: pointer; padding: 0 6px; } .gnb-more-btn .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ink); } .gnb-more-list { position: absolute; top: calc(100% - 10px); right: 0; min-width: 150px; background: #fff; box-shadow: 0 12px 30px rgba(0, 0, 0, .08); padding: 6px 0; list-style: none; opacity: 0; visibility: hidden; transition: opacity .18s ease; z-index: 2; } .gnb-more:hover > .gnb-more-list, .gnb-more:focus-within > .gnb-more-list { opacity: 1; visibility: visible; } .gnb-more-list > li { position: relative; white-space: nowrap; } .gnb-more-list > li > a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 20px; font-size: 16px; font-weight: 400; color: var(--ink); transition: background .15s; } .gnb-more-list > li:hover > a { background: #EAE4E7; } /* 하위메뉴 있는 항목엔 우측 화살표(>) */ .gnb-more-list > li.has-children > a::after { content: ""; width: 7px; height: 7px; flex: none; margin-left: 6px; border-right: 1.5px solid #999; border-top: 1.5px solid #999; transform: rotate(45deg); } /* 오버플로 항목의 서브메뉴: 기본은 우측 플라이아웃, 공간 없으면 좌측(flip-left) */ .gnb-more-list .gnb-sub { top: -6px; left: 100%; right: auto; } .gnb-more-list > li.flip-left > .gnb-sub { left: auto; right: 100%; } .gnb-more-list > li:hover > .gnb-sub, .gnb-more-list > li:focus-within > .gnb-sub { opacity: 1; visibility: visible; } /* 햄버거 버튼 (모바일 전용, 기본 숨김) */ .nav-toggle { display: none; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 24px; height: 20px; background: none; border: 0; cursor: pointer; padding: 0; } .nav-toggle span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink); transition: transform .25s, opacity .25s; } .nav-toggle span:nth-child(1) { top: 1px; } .nav-toggle span:nth-child(2) { top: 9px; } .nav-toggle span:nth-child(3) { top: 17px; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); } /* 모바일 햄버거 메뉴 (헤더 아래로 펼쳐지는 패널 + 대메뉴 아코디언) */ .mobile-menu { display: none; /* 데스크톱에선 항상 숨김 */ position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0; z-index: 40; background: #fff; overflow-y: auto; padding-bottom: 32px; } .mmenu { list-style: none; } /* 선은 대메뉴 사이에만 (대메뉴↔서브·서브↔서브엔 선 없음) */ .mmenu > li { border-bottom: 1px solid #f4f4f4; } .mmenu > li > a, .mmenu-parent { display: flex; align-items: center; gap: 9px; width: 100%; padding: 15px 20px; font-family: inherit; font-size: 14px; font-weight: 500; /* 모바일 메뉴 텍스트 축소 */ color: var(--ink); background: none; border: 0; text-align: left; cursor: pointer; line-height: 1.4; } /* 텍스트 좌측 · 화살표 우측 끝 */ .mmenu-parent { justify-content: space-between; } /* 펼친(누른) 대메뉴 배경만 강조 */ .mmenu-parent[aria-expanded="true"] { background: #EAE4E7; } /* 우측 아래화살표(⌄) — 얇은 선 · 연한 회색, 펼치면 위로(⌃) */ .mmenu-arrow { flex: none; width: 9px; height: 9px; margin-top: -4px; border-right: 1.5px solid #999; border-bottom: 1.5px solid #999; transform: rotate(45deg); transition: transform .2s; transform-origin: center; } .mmenu-parent[aria-expanded="true"] .mmenu-arrow { transform: rotate(-135deg); margin-top: 2px; } /* 하위메뉴 (아코디언) */ .mmenu-sub { list-style: none; overflow: hidden; max-height: 0; transition: max-height .28s ease; background: #fff; } .mmenu-parent[aria-expanded="true"] + .mmenu-sub { max-height: 640px; } .mmenu-sub a { display: block; padding: 8px 20px 8px 38px; font-size: 13px; font-weight: 400; color: var(--ink); /* 모바일 서브메뉴 텍스트 축소 */ } /* ===== 히어로 (풀스크린 / 어떤 해상도에서도 화면 꽉 채움) ===== */ .hero { position: relative; width: 100%; height: 100vh; /* 폴백 */ height: 100dvh; /* 헤더가 fixed 오버레이라 히어로는 화면 전체를 채움(헤더가 위에 뜸) */ overflow: hidden; background: var(--ink); } /* 데스크톱(>768px): YouTube iframe을 화면 꽉 차게 cover (16:9 유지하며 넘치는 부분 crop) */ .hero-video { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: var(--ink); } .hero-video iframe { position: absolute; bottom: -6vh; left: 50%; /* 하단 기준에서 아래로 내려 빈 여백 크롭(텍스트가 더 보이게) */ transform: translateX(-50%); width: 100vw; height: 56.25vw; /* 화면 너비 기준 16:9 */ min-width: 177.78vh; min-height: 100vh; /* 화면 높이 기준 16:9 (둘 중 큰 쪽이 적용돼 cover) */ border: 0; } /* 스크롤 인디케이터 (가운데 하단, 위아래로 바운스) */ .hero-scroll { position: absolute; left: 50%; bottom: 26px; z-index: 5; text-align: center; text-decoration: none; color: #fff; font-size: 0.78rem; letter-spacing: 2px; text-transform: lowercase; animation: heroScrollBounce 1.4s ease-in-out infinite; } .hero-scroll img { display: inline-block; } @keyframes heroScrollBounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } /* 모바일(≤768px): 배너 슬라이더로 대체 (기본 숨김, 미디어쿼리에서 노출) */ .hero-mobile { position: absolute; inset: 0; display: none; } /* 모바일 전용 영상: 1:1 풀폭 박스에 cover (16:9 플레이어의 가운데 정사각만 보이게 크롭) */ .hero-mobile-video { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--ink); pointer-events: none; } .hero-mobile-video iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100%; width: 177.78%; border: 0; } .hero-slider { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--ink); touch-action: pan-y; } .hero-slides { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; width: 100%; height: 100%; transition: transform .4s ease; } .hero-slide { flex: 0 0 100%; height: 100%; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .hero-dots { position: absolute; bottom: 18px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 8px; } .hero-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,0.55); cursor: pointer; transition: width .25s, background .25s; } .hero-dot.is-active { width: 22px; border-radius: 4px; background: #fff; } /* ===== 섹션 공통 ===== */ .section-eyebrow { font-family: "NanumSquare", sans-serif; font-size: 0.78rem; letter-spacing: 3px; color: var(--beige); font-weight: 600; text-align: center; margin-bottom: 0.6rem; } .section-title { font-size: clamp(1.6rem, 3.5vw, 2.3rem); font-weight: 500; text-align: center; letter-spacing: -0.5px; margin-bottom: 3rem; } /* ===== 진료 안내 (좌:이미지 / 우:텍스트, 슬라이드) ===== */ .services { height: 1100px; display: flex; align-items: center; overflow: hidden; } .svc-slider { position: relative; overflow: visible; touch-action: pan-y; } /* 화살표 바깥 배치 위해 visible — 슬라이드 클리핑은 .svc-viewport */ .svc-viewport { overflow: hidden; } .svc-track { display: flex; align-items: flex-start; list-style: none; transition: transform .5s ease; } /* 슬라이드를 위로 정렬(키 큰 슬라이드에 안 늘어남) */ .svc-slide { flex: 0 0 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; /* 이미지·타이틀 시작점 항상 동일 */ } /* 좌측 이미지 */ /* 이미지+데코사각형을 figure 박스 안에 담아 잘리지 않게 (우측 30px·하단 34px peek 공간) */ /* 우측 헤딩의 line-height 윗여백만큼 이미지를 내려 글자 윗변과 사진 윗변을 맞춤(텍스트를 올리면 슬라이더 overflow에 잘림) */ .svc-image { margin: 0; position: relative; padding: 9px 30px 34px 0; } /* 우측 아래 노란(크림) 데코 사각형 — 사진 뒤에서 peek */ .svc-image::after { content: ""; position: absolute; z-index: 0; left: 16%; top: 22%; right: 0; bottom: 0; background: #EAE4E7; } .svc-image .media-placeholder { aspect-ratio: 1 / 1; position: relative; z-index: 1; } .svc-image img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; position: relative; z-index: 1; } /* 우측 텍스트 */ .svc-text { padding-right: 12px; } .svc-en { font-size: 44px; font-weight: 800; line-height: 1.15; color: var(--ink); letter-spacing: -0.5px; } .svc-divider { display: block; width: 28px; height: 2px; background: #000000; margin: 22px 0 16px; } .svc-kr { font-size: 32px; font-weight: 700; color: #D8ADC1; margin-bottom: 22px; } .svc-b1 { font-size: 24px; font-weight: 400; color: var(--ink); margin-bottom: 14px; } .svc-b2 { font-size: 18px; font-weight: 400; color: var(--gray); line-height: 1.7; } /* 하단 점 (비활성=연한 링, 활성=베이지 채움) — 내용과 56px 간격 */ .svc-dots { display: flex; justify-content: center; gap: 12px; margin-top: 66px; } .svc-dot { width: 11px; height: 11px; padding: 0; border: 1px solid #EAE4E7; border-radius: 50%; background: #EAE4E7; cursor: pointer; transition: background .2s, border-color .2s; } .svc-dot.is-active { background: #EAE4E7; border-color: #EAE4E7; } /* 진료 슬라이더 좌우 화살표 (이미지 양옆, 텍스트와 안 겹침) */ .svc-image a { display: block; } .svc-arrow { position: absolute; z-index: 6; top: 50%; transform: translateY(-50%); border: none; background: none; padding: 0; cursor: pointer; color: #D8ADC1; display: flex; align-items: center; justify-content: center; transition: opacity .2s; } .svc-arrow:hover { opacity: .65; } .svc-arrow svg { width: 44px; height: 31px; display: block; } .svc-arrow:hover { background: #fff; } .svc-prev { left: 6px; } .svc-next { right: 6px; } @media (min-width: 769px) { .svc-slide { padding-left: 40px; padding-right: 40px; } /* 그룹 약 10% 확대 */ .svc-text { padding-top: 40px; } .svc-prev { left: -50px; } /* PC: 그룹에서 더 바깥(컨테이너 밖 허용) */ .svc-next { right: -50px; } /* 우측 텍스트 위에서 20px 내림 */ } @media (max-width: 768px) { .svc-arrow { top: 34%; } .svc-arrow svg { width: 36px; height: 26px; } } /* ===== 푸터 ===== */ .site-footer { background: #074430; color: rgba(255,255,255,0.85); padding: 3.5rem 0; font-size: 0.82rem; text-align: center; } .footer-logo { margin-bottom: 1.1rem; text-align: center; } .footer-logo img { width: 90px; height: auto; display: block; margin: 0 auto; } /* 푸터 로고 (이전 150 → -40%) */ /* 비급여안내 버튼 (기본 다크 → hover 시 메인 골드), 가운데 정렬 */ .footer-btn { display: block; width: fit-content; margin: 0 auto 1.8rem; padding: 6px 15px; background: #fff; color: #074430; font-size: 0.9rem; font-weight: 500; text-align: center; transition: background .2s; } .footer-btn:hover { background: #D8ADC1; color: #fff; } .footer-biz { text-align: left; } /* 컨테이너 폭 안에서 좌측정렬 */ .footer-biz p { font-size: 12px; white-space: nowrap; line-height: 1.9; color: rgba(255,255,255,0.8); margin: 0; } /* 지점별 한 줄 */ .footer-copy { margin-top: 1.6rem; color: rgba(255,255,255,0.6); } /* ===== PC 우측 플로팅 상담 버튼 (연결된 패널 + 가운데 구분선) ===== */ .dmenu { position: fixed; right: 55px; top: 50%; transform: translateY(calc(-50% - 100px)); z-index: 99; list-style: none; display: flex; flex-direction: column; border-radius: 14px; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); /* 본문과 겹쳐도 보이도록 그림자 */ } .dmenu > li { position: relative; } .dmenu > li:not(:last-child) { border-bottom: 1px solid #e5e5e5; } /* 버튼 사이 가운데선 */ .flo-item { display: block; padding: 0; border: 0; background: none; cursor: pointer; } /* 모달 오픈 버튼 리셋 */ .dmenu .flo-item img { width: 88px; max-width: none; height: auto; display: block; } /* 실제 이미지 크기(88×112) */ .dmenu > li:first-child .flo-item img { border-radius: 14px 14px 0 0; } .dmenu > li:last-child .flo-item img { border-radius: 0 0 14px 14px; } .ddropdown { position: absolute; right: 100%; top: 0; margin-right: 8px; list-style: none; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); /* 라운드 없음 */ padding: 6px 0; min-width: 108px; opacity: 0; visibility: hidden; transform: translateX(8px); transition: opacity .18s, transform .18s; } /* 버튼↔서브메뉴 사이 빈공간을 투명 브리지로 덮어 hover 유지 */ .ddropdown::after { content: ""; position: absolute; top: 0; right: -12px; width: 12px; height: 100%; } .dmenu > li:hover > .ddropdown, .dmenu > li:focus-within > .ddropdown { opacity: 1; visibility: visible; transform: translateX(0); } .ddropdown li { white-space: nowrap; } .ddropdown a { display: block; padding: 9px 18px; font-size: 15px; color: var(--ink); transition: background .15s; } .ddropdown a:hover { background: #EAE4E7; } /* hover 시 배경만, 글씨는 기본 어두운색 유지 */ /* ===== 모바일 하단 고정 탭바 (이미지맵) ===== */ .mobile-tabbar { display: none; } .tabbar-area { position: absolute; top: 0; height: 100%; width: 25%; background: none; border: 0; padding: 0; cursor: pointer; } /* ===== 반응형 ===== */ @media (max-width: 900px) { .value-grid, .branch-grid { grid-template-columns: 1fr; } .service-grid { grid-template-columns: 1fr; } } /* 모바일 분기 = 768px (아임웹 원본과 동일) */ @media (max-width: 768px) { /* 모바일 헤더 높이 100→92px (상하 각 4px 줄임) */ :root { --header-h: 72px; } /* 모바일 헤더 높이 축소 */ /* 모바일 본문(헤더 포함) 좌우 margin 20px. 단 히어로는 풀블리드(아래에서 inset:0) */ .container { padding: 0 20px; } /* 반응형 줄바꿈 전환 */ .br-pc { display: none; } .br-mo { display: inline; } .logo img { width: 62px; } /* 모바일 헤더 로고 = 77의 -20% */ .footer-logo img { width: 65px; } /* 모바일 푸터 로고 = 81의 -20% */ .footer-biz { display: none; } /* 모바일 푸터 사업자정보 숨김 */ /* 헤더: 로고 왼쪽 + 햄버거 오른쪽, GNB 숨김 */ .header-inner { justify-content: flex-start; } .gnb { display: none; } .nav-toggle { display: block; } /* 햄버거 메뉴: 열렸을 때만 헤더 아래로 표시 */ .mobile-menu:not([hidden]) { display: block; } /* 우측 플로팅 버튼은 숨기고 하단 탭바 사용 */ .dmenu { display: none; } /* 하단 고정 탭바 — 화면 맨 아래 딱 붙이고, safe-area(주소창/홈인디케이터)까지 같은 배경으로 메워 본문 비침 방지 */ .mobile-tabbar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 35; line-height: 0; background: #f4f4f4; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -2px 10px rgba(0, 0, 0, .07); } .mobile-tabbar img { width: 100%; display: block; } body { padding-bottom: calc(24vw + env(safe-area-inset-bottom, 0px)); } /* 탭바(높이 ≈23vw)에 본문이 안 가리도록 */ /* 히어로(모바일): 데스크톱 영상 숨기고, 모바일 전용 영상(1:1 풀폭) 노출 */ .hero { height: auto; } .hero-video { display: none; } .hero-mobile { display: block; position: static; } .hero-scroll { display: none; } /* 진료 안내: 세로 스택, 이미지-내용 간격 40px */ .services { height: auto; padding: 56px 0; } .svc-slide { grid-template-columns: 1fr; gap: 40px; } .svc-en { font-size: 36px; } /* 타이틀1 */ .svc-kr { font-size: 28px; margin-bottom: 18px; } /* 타이틀2 */ .svc-b1 { font-size: 20px; } .svc-b2 { font-size: 16px; } } /* ===== About 유테라 페이지 ===== */ .about-hero { background: linear-gradient(rgba(216,186,200,0.2), rgba(216,186,200,0.2)), url("images/about유테라/상단이미지_about유테라.png") center/cover no-repeat; color: #fff; display: flex; align-items: center; padding: calc(80px + var(--header-h)) 0 80px; /* 상단 = 80 + 고정헤더 높이(오버레이 가림 방지). 좌우 거터는 .container */ } .about-hero-title { font-size: 44px; font-weight: 800; letter-spacing: -0.5px; color: #EAE4E7; } .about-hero-title strong { font-weight: 800; } .about-hero-sub { margin-top: 1.2rem; font-size: 20px; line-height: 1.65; color: rgba(255,255,255,.9); } .about-intro { padding: 150px 0; text-align: center; } .about-logo img { width: 240px; height: auto; max-width: 100%; display: inline-block; } /* 이전 400 → -40% */ .about-intro-title { margin-top: 60px; font-size: 32px; font-weight: 500; color: #D8ADC1; letter-spacing: -0.5px; } .about-intro-title .ink { color: var(--ink); } /* '유테라산부인과'만 기본 검은 텍스트 */ .about-divider { display: block; width: 100%; height: 1px; background: #e5e5e5; margin: 3rem auto 0; } .about-philosophy { background: linear-gradient(rgba(5,38,31,0.8), rgba(5,38,31,0.8)), url("images/about유테라/about-mid.jpg") center/cover no-repeat; background-attachment: fixed; /* 스크롤해도 이미지 고정(parallax) */ color: #fff; padding: 150px 0; text-align: center; } .about-ph-title { font-size: 32px; font-weight: 400; margin-bottom: 1.8rem; letter-spacing: -0.5px; color: #EAE4E7; } /* 나머지 medium */ .about-ph-title strong { font-weight: 800; } /* 임신·출산·피임·노화만 extrabold */ .about-ph-body { max-width: 720px; margin: 0 auto; font-size: 18px; line-height: 1.95; color: #EAE4E7; } .about-closing { padding: 150px 0 360px; text-align: center; } /* 공통 150 / 하단만 360 예외 */ .about-closing-text { font-size: 32px; font-weight: 600; line-height: 1.6; color: var(--ink); letter-spacing: -0.5px; } .about-closing-text .line1 { font-weight: 300; } /* 윗줄만 light */ @media (max-width: 768px) { .about-hero { min-height: 220px; padding: calc(50px + var(--header-h)) 0 50px; } /* 상단 = 50 + 고정헤더 높이 */ .about-hero-title { font-size: 29px; } .about-hero-sub { font-size: 16px; margin-top: 0.9rem; } .about-intro { padding: 98px 0; } .about-logo img { width: 90px; } /* 이전 150 → -40% */ .about-intro-title { font-size: 24px; margin-top: 1.6rem; } .about-divider { margin-top: 2.2rem; } .about-philosophy { padding: 98px 0; } .about-ph-title { font-size: 26px; margin-bottom: 1.3rem; } .about-ph-body { font-size: 16px; line-height: 1.85; text-align: left; } .about-closing { padding: 98px 0; } .about-closing-text { font-size: 26px; } } /* ===== 진료 상세 페이지 공통 (임신/피임 등) ===== */ /* 상단 배너 (사진 위 텍스트 오버레이) — 전 페이지 공통 시스템 표준(about과 동일) */ .page-hero { color: #fff; display: flex; align-items: center; background-position: center; background-size: cover; background-repeat: no-repeat; } /* dim = 밝은 크림 .25 (전 페이지 공통) + 페이지별 배너 이미지 */ .preg-hero { background-image: linear-gradient(rgba(216,186,200,0.2), rgba(216,186,200,0.2)), url("images/임신피임/상단이미지_임신.jpg"); } .exam-hero { background-image: linear-gradient(rgba(216,186,200,0.2), rgba(216,186,200,0.2)), url("images/여성검진/상단이미지_여성검진.jpg"); } /* 여성검진 섹션 사진(3:2) — 가운데, 라운드 없음 */ .exam-figure { max-width: 600px; margin: 0 auto 36px; overflow: hidden; } .exam-figure img { width: 100%; height: auto; display: block; } .page-hero-inner { padding-top: calc(80px + var(--header-h)); padding-bottom: 80px; } /* 상단 = 80 + 고정헤더 높이. 좌우는 .container(15/20px) 유지 */ .page-hero-title { font-size: 44px; font-weight: 800; letter-spacing: -0.5px; color: #EAE4E7; } /* 1) 48 EB, 크림 */ .page-hero-sub { margin-top: 1.2rem; font-size: 20px; font-weight: 400; line-height: 1.65; color: rgba(255,255,255,.9); } /* 2) 20, 흰색 */ /* 부분 강조 공통: 섹션 내 strong = ExtraBold, .accent = 메인 골드 */ .dept strong { font-weight: 800; } .accent { color: #D8ADC1; } /* 진료 섹션 — 상하 패딩 = 페이지 공통 기본(PC 150 / 모바일 98). 마지막 섹션 하단만 360 예외 */ .dept { padding: 150px 0; } .dept:last-of-type { padding-bottom: 360px; } /* 페이지 마지막 섹션 = 푸터 앞 여백 */ #perineal { padding-bottom: 0; } /* 마지막 블록이 feature-bg 밴드(자체 패딩 90px) → 하단 패딩 제거, 다음 섹션과 간격 정상화 */ #bleeding { padding-bottom: 0; } /* 여성질환 마지막 — 회색 밴드로 끝나게(흰 여백 제거) */ .dept-alt { background: #fff; } /* 피임 섹션 배경 = 흰색 */ .dept-head { text-align: center; margin-bottom: 104px; } /* 타이틀↔첫 소제목 간격 2배 */ .dept-title { font-size: 44px; font-weight: 800; color: var(--ink); letter-spacing: -0.5px; } /* 3)/13) 48 EB, 기본 검은색 */ .dept-title--partial { font-weight: 400; color: var(--ink); } /* '임신의 증상'처럼 일부(strong)만 ExtraBold, 기본 검은색 */ .dept-divider { display: block; width: 36px; height: 2px; background: #D8ADC1; margin: 22px auto 0; } /* 하위 블록(섹션) 간 여백 = 200px (공통) */ .dept-block { margin-top: 200px; } .dept-block:first-of-type { margin-top: 0; } /* 소제목: 36 ExtraBold, 가운데 정렬(앞 골드바 없음). 부분강조(--partial)는 base 400 + strong 800 */ .dept-sub { font-size: 32px; font-weight: 800; color: var(--ink); text-align: center; margin-bottom: 42px; letter-spacing: -0.5px; /* 타이틀↔내용 간격 +20px */ } .dept-sub--partial { font-weight: 400; } /* 본문/노트 (기본 16) */ .dept-lead { font-size: 18px; color: var(--gray); margin-bottom: 26px; } .dept-note { font-size: 18px; color: var(--gray); margin-top: 18px; line-height: 1.85; } .dept-note--lg { font-size: 28px; font-weight: 500; color: var(--ink); line-height: 1.5; margin-top: 26px; } /* 27) 30 */ .dept-note--18 { font-size: 18px; color: var(--gray); } /* 32) 18 */ /* 임신 증상 — 5칸 카드 그리드 (이미지에 라벨 포함) */ .symptom-lead { font-size: 18px; color: var(--gray); margin-bottom: 26px; text-align: center; } /* 4) 18, 가운데 */ .symptom-grid { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .symptom-grid figure { margin: 0; overflow: hidden; } /* 그림자 없음 */ .symptom-grid img { width: 100%; height: auto; display: block; } /* 임신 검사 — 3칸 카드 */ .exam-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; } .exam-card { background: #fff; border: 1px solid #e5e5e5; } .exam-img { margin: 0; aspect-ratio: 3 / 2; overflow: hidden; background: #f4f4f4; } .exam-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .exam-name { font-size: 26px; font-weight: 700; color: var(--ink); padding: 18px 20px 0; } /* 6) 26 B */ .exam-tag { font-size: 18px; font-weight: 500; color: #D8ADC1; padding: 8px 20px 0; } /* 7) 18 */ .exam-body { font-size: 18px; color: var(--gray); line-height: 1.8; padding: 8px 20px 22px; } /* 본문 18 */ /* 이미지 + 텍스트 좌우 split (임신초기출혈·자궁내장치·임플라논) */ .media-split { display: grid; grid-template-columns: 5fr 7fr; gap: 44px; align-items: center; } .media-split-img { margin: 0; overflow: hidden; } .media-split-img img { width: 100%; height: auto; display: block; } .media-split-text p + p { margin-top: 14px; } .media-split-text p { font-size: 18px; color: var(--gray); line-height: 1.9; } /* 가운데 정렬 본문 (임신초기 출혈 등) */ .section-body { font-size: 18px; color: var(--gray); line-height: 1.9; text-align: center; } /* 10) 18 */ .section-body--left { text-align: left; } .section-body--pcc { text-align: center; } /* PC 가운데, 모바일 좌측 (아래 미디어쿼리) */ /* 이미지 섹션 (사진 왼쪽 + 텍스트 오른쪽) — 배경 풀블리드 밴드 */ .feature-bg { position: relative; left: 50%; right: 50%; width: 100vw; margin: 200px -50vw 0; /* 위 섹션과 200px 간격 */ background: #f4f4f4; padding: 90px 0; } .feature-bg:not(.dept-block) { margin-top: 180px; } /* 루프·임플라논 마무리 밴드 위 패딩 180 */ .feature-bg--gray { background: #f4f4f4; } /* 장점+스펙 섹션 — 연한 회색 배경 */ .feature-split { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; } .feature-split-img { margin: 0; overflow: hidden; } .feature-split-img img { width: 100%; height: auto; display: block; } .feature-title { font-size: 28px; font-weight: 400; color: var(--ink); line-height: 1.45; text-align: left; margin-bottom: 22px; letter-spacing: -0.5px; } /* 11) 30, 강조 EB */ .feature-body { font-size: 18px; color: var(--gray); line-height: 1.9; text-align: left; } /* 12) 18 */ /* Q&A 리스트 (섹션별 크기 변형) — 질문=베이지 밴드, 답변=하단 골드 라인, 가운데 정렬 */ .qa-list dt { font-weight: 700; color: var(--ink); text-align: left; background: #EAE4E7; padding: 16px 24px; margin-top: 28px; } .qa-list dt::first-letter { font-weight: 800; } /* 질문 첫 글자 'Q'만 ExtraBold */ .qa-list dt:first-child { margin-top: 0; } .qa-list dd { margin: 0; color: var(--gray); line-height: 1.85; text-align: left; padding: 24px; border-bottom: 1px solid #D8ADC1; } .qa--24-20 dt { font-size: 24px; } .qa--24-20 dd { font-size: 18px; } /* 경구피임약 — 답변 본문 18 */ .qa--22-20 dt { font-size: 22px; } .qa--22-20 dd { font-size: 18px; } /* 자궁내 장치 — 답변 본문 18 */ .qa--22-18 dt { font-size: 22px; } .qa--22-18 dd { font-size: 18px; } /* 임플라논 30)/31) */ /* 자궁내 장치 — 이미지(상단 중앙) + Q&A 3박스 가로 배치 */ .iud-figure { margin: 0 auto 50px; max-width: 500px; } .iud-figure img { width: 100%; height: auto; display: block; } .qa-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; } .qa-card { display: flex; flex-direction: column; } .qa-card .qa-q { background: #EAE4E7; text-align: left; font-weight: 700; color: var(--ink); font-size: 22px; padding: 16px 20px; } .qa-card .qa-q::first-letter { font-weight: 800; } /* 'Q'만 ExtraBold */ .qa-card .qa-a { flex: 1; text-align: left; font-size: 18px; color: var(--gray); line-height: 1.85; padding: 28px 20px; border-bottom: 1px solid #D8ADC1; } /* 좌측정렬 + 하단 골드 스트로크 */ .list-center { text-align: center; } /* 불릿 리스트(inline-block)를 섹션 가운데로 — 텍스트는 좌측정렬 유지 */ .bullet-list { list-style: none; margin-top: 8px; display: inline-block; text-align: left; } /* 가운데 dd 안에서 좌측정렬 블록 */ .bullet-list li { position: relative; padding-left: 16px; } .bullet-list li::before { content: "•"; position: absolute; left: 0; color: #D8ADC1; } /* 경구피임약의 종류 — 이미지(왼쪽 프레임) + 텍스트(오른쪽) */ .pill-grid { list-style: none; display: grid; grid-template-columns: 1fr; gap: 40px; } .pill-card { display: grid; grid-template-columns: 388px 1fr; gap: 50px; align-items: center; } .pill-img { margin: 0; border: 1px solid #e5e5e5; background: #fff; } /* 이미지 가로 388px (컬럼 고정) */ .pill-img img { width: 100%; height: auto; display: block; } .pill-name { font-size: 26px; font-weight: 700; color: var(--ink); margin-bottom: 14px; } /* 18) 26 B */ .pill-lead { font-size: 18px; color: var(--ink); line-height: 1.7; } /* 19) 18 */ .pill-body { font-size: 18px; color: var(--gray); line-height: 1.85; margin-top: 20px; } /* 본문 18 */ /* 종합 안내 — 배경 채운 별도 섹션 밴드(풀블리드, 시스템 섹션 패딩 150/98) */ .pill-note-band { position: relative; left: 50%; right: 50%; width: 100vw; margin: 200px -50vw 0; /* 위 섹션과 200px 간격 */ background: #f4f4f4; padding: 150px 0; } .pill-note { text-align: center; } .pill-note p { font-size: 22px; color: var(--ink); line-height: 1.8; } /* 21) 22 */ .pill-note p + p { margin-top: 1.6em; } /* 루프 종류 비교표 */ .iud-q { font-size: 32px; font-weight: 400; color: var(--ink); text-align: center; margin-top: 200px; margin-bottom: 42px; letter-spacing: -0.5px; } /* 36, '루프의 종류'만 EB(strong), 나머지 Medium. 위 간격=하위블록 200 */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } .iud-table { width: 100%; table-layout: fixed; border-collapse: collapse; background: #fff; font-size: 16px; min-width: 820px; } /* 26) 16, 데이터 4열 균등 */ .iud-table th, .iud-table td { border: 1px solid #e5e5e5; padding: 14px 16px; vertical-align: top; text-align: left; } .iud-table thead th { background: #EAE4E7; color: var(--ink); font-weight: 700; text-align: center; } .iud-table .iud-col-name { width: 80px; } /* 구분열 너비(첫 행 기준, table-layout:fixed) */ .iud-table .iud-name { padding-left: 6px; padding-right: 6px; text-align: center; vertical-align: middle; background: #f4f4f4; font-weight: 700; } /* 행머리(구분열)=연회색, 열머리(thead)=핑크그레이 — 서로 다른 색 */ .iud-table .iud-name img { width: 100%; height: auto; margin: 0 auto 8px; display: block; } /* 이미지 채움 */ .iud-table td ul { list-style: none; } .iud-table td li { position: relative; padding-left: 14px; color: var(--gray); line-height: 1.7; } .iud-table td li + li { margin-top: 6px; } .iud-table td li::before { content: "•"; position: absolute; left: 0; color: #D8ADC1; } /* 진료 상세 페이지 — 반응형 (모바일 768px, PC −2px 기준) */ @media (max-width: 768px) { .page-hero { min-height: 220px; } .page-hero-inner { padding-top: calc(50px + var(--header-h)); padding-bottom: 50px; } .page-hero-title { font-size: 29px; } .page-hero-sub { font-size: 16px; margin-top: 0.9rem; } .dept { padding: 98px 0; } .dept:last-of-type { padding-bottom: 200px; } .dept-head { margin-bottom: 72px; } .dept-title { font-size: 32px; } .dept-block { margin-top: 120px; } .dept-sub { font-size: 26px; } .dept-lead { font-size: 16px; } .dept-note { font-size: 16px; } .dept-note--lg { font-size: 22px; } .dept-note--18 { font-size: 16px; } /* 증상: 5칸 → 2칸 */ .symptom-lead { font-size: 16px; } .symptom-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } /* 검사: 3칸 → 1칸 */ .exam-grid { grid-template-columns: 1fr; gap: 20px; } .exam-name { font-size: 22px; } .exam-tag { font-size: 16px; } .exam-body { font-size: 16px; } /* split: 세로 스택 */ .media-split { grid-template-columns: 1fr; gap: 22px; } .media-split-text p { font-size: 16px; line-height: 1.85; } .section-body { font-size: 16px; } .section-body br { display: none; } /* 모바일은 자연 줄바꿈 */ .section-body--pcc { text-align: left; } /* 모바일은 좌측정렬 */ .feature-bg { padding: 56px 0; margin-top: 120px; } .feature-bg:not(.dept-block) { margin-top: 120px; } /* 루프·임플라논 밴드 모바일 간격(시스템 120) */ .feature-split { grid-template-columns: 1fr; gap: 24px; } .feature-title { font-size: 22px; } .feature-body { font-size: 16px; } .feature-body br { display: none; } .qa-list dt { padding: 13px 16px; margin-top: 20px; } .qa-list dd { padding: 18px 16px; } .qa--24-20 dt { font-size: 20px; } .qa--24-20 dd { font-size: 16px; } .qa--22-20 dt { font-size: 18px; } .qa--22-20 dd { font-size: 16px; } .qa--22-18 dt { font-size: 18px; } .qa--22-18 dd { font-size: 16px; } /* 자궁내 장치: 이미지/카드 모바일 */ .iud-figure { margin-bottom: 32px; max-width: 360px; } .qa-cards { grid-template-columns: 1fr; gap: 16px; } .qa-card .qa-q { font-size: 18px; padding: 13px 16px; } .qa-card .qa-a { font-size: 16px; padding: 20px 16px; } .pill-grid { gap: 44px; } .pill-card { grid-template-columns: 1fr; gap: 18px; } .pill-img { max-width: 320px; } .pill-name { font-size: 22px; } .pill-lead { font-size: 16px; } .pill-body { font-size: 16px; margin-top: 14px; } .pill-note-band { padding: 98px 0; margin-top: 120px; } .pill-note { text-align: left; } /* 모바일 본문 좌측정렬 */ .pill-note p { font-size: 18px; } .pill-note br { display: none; } .iud-q { font-size: 26px; margin-top: 120px; } .iud-table { font-size: 14px; min-width: 680px; } /* 밴드(컬러 섹션): 모바일 — 배경은 화면 풀폭, 콘텐츠는 내부 container로 좌우 20px */ .feature-bg, .pill-note-band { position: static; left: auto; right: auto; width: auto; margin-left: -20px; margin-right: -20px; /* 컨테이너 거터(20px) 상쇄 → 배경 풀폭 */ } /* 내부 .container는 기본 좌우 20px(거터) 유지 → 콘텐츠만 20px 들어옴 */ } /* ===== 지점 소개 페이지 ===== */ .branch-hero { background: linear-gradient(rgba(216,186,200,0.2), rgba(216,186,200,0.2)), url("images/지점소개/상단이미지_지점소개.png") center/cover no-repeat; } .branch-sec { padding: 150px 0; } .branch-logo { text-align: center; margin-bottom: 80px; } .branch-logo img { width: 240px; height: auto; display: inline-block; } /* 탭 */ .branch-tabs { display: flex; justify-content: center; margin: 0 auto 25px; background: var(--ink); overflow: hidden; } .branch-tab { flex: 1 1 0; min-width: 0; padding: 16px 8px; text-align: center; font-size: 20px; font-weight: 500; color: rgba(255,255,255,.7); background: none; border: 0; cursor: pointer; transition: background .2s, color .2s; } .branch-tab:hover { background: #D8ADC1; color: var(--ink); } .branch-tab.is-active { background: #EAE4E7; color: var(--ink); } /* 패널 */ .branch-panel[hidden] { display: none; } /* 갤러리 */ .bgal { position: relative; overflow: hidden; margin: 0 auto; touch-action: pan-y; cursor: grab; user-select: none; } .bgal:active { cursor: grabbing; } .bgal img { -webkit-user-drag: none; user-drag: none; pointer-events: none; } .bgal-track { display: flex; list-style: none; transition: transform .4s ease; } .bgal-track > li { flex: 0 0 100%; } .bgal-track img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .bgal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 0; background: rgba(0,0,0,.35); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; } .bgal-nav.prev { left: 14px; } .bgal-nav.next { right: 14px; } .bgal-dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; } .bgal-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: rgba(255,255,255,.55); cursor: pointer; } .bgal-dot.is-active { background: #fff; } .branch-cap { text-align: center; color: var(--ink); font-size: 28px; margin: 24px 0 0; padding-bottom: 50px; border-bottom: 1px solid #D8ADC1; } /* 의료진 — 섹션 배경은 브라우저 풀폭(풀블리드), 내부 콘텐츠는 컨테이너 폭으로 정렬 */ .doctor-sec { background: #f4f4f4; position: relative; left: 50%; right: 50%; width: 100vw; max-width: 100vw; margin-left: -50vw; margin-right: -50vw; margin-top: 70px; padding: 100px max(15px, calc(50vw - 575px)); } .branch-h2 { text-align: center; font-size: 32px; font-weight: 800; margin: 0 0 50px; letter-spacing: -0.5px; } .doctor { display: grid; grid-template-columns: 475px 1fr; gap: 60px; align-items: center; margin: 0 auto 120px; } /* 의료진 여러 명일 때 간격 */ .doctor:last-child { margin-bottom: 0; } .doctor-photo { margin: 0; overflow: hidden; } .doctor-photo img { width: 100%; display: block; } .doctor-name { font-size: 28px; font-weight: 800; color: #D8ADC1; margin-bottom: 40px; } /* 이름 = ExtraBold, 노란색 */ .doctor-name .role { display: inline; font-size: 25px; color: #D8ADC1; font-weight: 400; margin-right: 6px; } /* 직책 = 기본 굵기 */ .doctor-name .role b { font-weight: 800; } /* "~점" 만 ExtraBold */ .doctor-cred { list-style: none; } .doctor-cred li { position: relative; padding-left: 14px; font-size: 18px; color: var(--gray); line-height: 1.9; } .doctor-cred li::before { content: ""; position: absolute; left: 0; top: 13px; width: 4px; height: 4px; border-radius: 50%; background: var(--gray); } .doctor-cred li.gap-after { margin-bottom: 30px; } .doctor-cred li.strong { font-size: 18px; color: var(--ink); font-weight: 700; } /* 첫줄: 본문과 같은 18px, bold만 */ .doctor-cred li.strong::before { background: var(--ink); } .doctor-cred li.todo { color: #b9a36a; } .doctor-cred li.todo::before { display: none; } /* 지점 정보 + 지도 — 테두리 없이 좌:지도 / 우:정보 */ .branch-info-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: stretch; margin: 200px auto 0; } .branch-map { min-height: 460px; background: repeating-linear-gradient(45deg,#e5e5e5 0 12px,#f4f4f4 12px 24px); display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; } .branch-info { padding: 0; } .branch-info h3 { font-size: 25px; font-weight: 700; margin-bottom: 15px; letter-spacing: -0.5px; } .bi-row { display: flex; align-items: center; font-size: 18px; color: var(--ink); margin-bottom: 8px; } .bi-row a { color: inherit; } .bi-icon { width: 26px; height: auto; flex: none; margin-right: 12px; } .bi-label { color: var(--ink); font-weight: 500; border-right: 1px solid #d9d9d9; padding-right: 14px; margin-right: 14px; } .bi-hours { margin-top: 40px; background: #f4f4f4; border-radius: 8px; padding: 34px 55px; } .bi-hours h4 { font-size: 32px; font-weight: 700; margin-bottom: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--line); } .bi-hours p { font-size: 16px; color: var(--ink); margin-bottom: 10px; } /* 진료시간 텍스트 한단계 ↓(18→16) */ .bi-hours p span { display: inline-block; min-width: 120px; font-weight: 700; } .bi-hours p.bi-strong { font-weight: 700; } /* 월수·화목금·토요일 = 줄 전체 bold */ .bi-hours p.bi-lunch { font-size: 15px; font-weight: 400; color: #D8ADC1; margin-top: 40px; } /* 점심시간 = 하단·분홍 */ .bi-hours p.bi-lunch span { font-weight: 400; } .bi-hours p.bi-sat { margin-top: 0; } .bi-hours p.bi-note { color: #D8ADC1; font-size: 15px; margin-top: 6px; line-height: 1.7; } /* 점심시간↔명절 간격 붙임 */ @media (max-width: 768px) { .branch-sec { padding: 98px 0; } .branch-logo { margin-bottom: 28px; } .branch-logo img { width: 180px; } .branch-tabs { margin-bottom: 34px; flex-wrap: wrap; } .branch-tab { flex: 0 0 33.333%; padding: 14px 3px; font-size: 16px; } .bgal-nav { width: 36px; height: 36px; font-size: 18px; } .bgal-track img { aspect-ratio: 3 / 4; } /* 모바일 지점 사진 = 3:4 (2:3보다 세로 축소) */ .branch-cap { font-size: 16px; margin-top: 16px; padding-bottom: 28px; } /* 본문 16 */ .doctor-sec { padding: 44px 20px; margin-top: 60px; } .branch-h2 { font-size: 26px; margin: 0 0 34px; } /* 섹션제목 26 */ .doctor { grid-template-columns: 1fr; gap: 22px; margin-bottom: 100px; } .doctor-photo { max-width: 260px; margin: 0 auto; } .doctor-name { font-size: 24px; text-align: center; } .doctor-name .role { font-size: 24px; } /* 직책 = 이름과 동일 크기 */ .doctor-name .role b { display: none; } /* 모바일에선 "~점" 텍스트 숨김 */ .doctor-cred li { font-size: 16px; } /* 본문 16 */ .doctor-cred li.gap-after { margin-bottom: 18px; } /* 모바일 약력 공백 = PC보다 작게 */ .branch-info-row { grid-template-columns: 1fr; gap: 28px; margin-top: 120px; } .branch-map { aspect-ratio: 1 / 1; min-height: 0; } /* 모바일 지도 = 1:1 */ .branch-info { padding: 0; } .branch-info h3 { font-size: 22px; margin-bottom: 16px; } .bi-row { font-size: 16px; } .bi-icon { width: 22px; margin-right: 10px; } .bi-hours { padding: 24px 22px; margin-top: 32px; } .bi-hours h4 { font-size: 26px; } /* 섹션제목 26 */ .bi-hours p { font-size: 14px; } .bi-hours p span { min-width: 92px; } .bi-hours p.bi-lunch { font-size: 14px; } .bi-hours p.bi-note { font-size: 14px; } } /* ===== 여성성형 페이지 ===== */ /* 상단 배너 */ .surgery-hero { background-image: linear-gradient(rgba(216,186,200,0.2), rgba(216,186,200,0.2)), url("images/여성성형/상단이미지_여성성형.jpg"); /* 시스템 표준 크림 dim */ background-position: center top; /* 꽃 부분이 보이도록 상단 정렬 */ } /* 소음순성형 인트로 (각종 여성질환 / 소음순 변형이 원인이었다면?) */ .surgery-intro-title { font-size: 44px; font-weight: 800; color: var(--ink); line-height: 1.35; letter-spacing: -0.5px; } /* 섹션 인트로 큰제목 = ExtraBold 기본 */ .surgery-intro-title .accent { color: #D8ADC1; font-weight: 800; } .surgery-intro-title strong { font-weight: 800; } .surgery-intro-sub { font-size: 28px; font-weight: 400; color: var(--ink); line-height: 1.5; margin-top: 24px; } .surgery-intro-sub strong { color: var(--ink); font-weight: 800; } .surgery-em { color: var(--ink); font-weight: 800; margin-top: 1.4em; } .intro-rule { border-top: 1px solid #D8ADC1; border-bottom: 1px solid #D8ADC1; padding: 50px 0; } .intro-light { color: var(--ink); font-weight: 400; } .intro-light strong { font-weight: 400; } .surgery-figure { margin: 40px auto 0; max-width: 540px; } .surgery-figure img { width: 100%; height: auto; display: block; } /* 6가지 고민 — 한 줄씩 번호 리스트 (가운데) */ .worry-list { list-style: none; counter-reset: worry; text-align: center; max-width: 920px; margin: 0 auto; border: 1px solid #D8ADC1; padding: 35px 15px; } .worry-list li { counter-increment: worry; font-size: 20px; font-weight: 400; color: var(--ink); line-height: 2.2; } .worry-list li::before { content: counter(worry) ". "; } .worry-list strong { font-weight: 800; font-size: 25px; } .head-dash { display: block; width: 28px; height: 1px; background: #D8ADC1; margin: 40px auto; } .surgery-priority { text-align: center; } .surgery-priority .section-body { margin-top: 24px; } .dept-note strong { color: var(--ink); } /* 소제목 위 영문 eyebrow (Self Check, Why 유테라 등) */ .dept-sub .eyebrow-en { display: block; font-size: 16px; font-weight: 400; color: #D8ADC1; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 12px; } /* 6가지 고민 (번호 카드) */ .worry-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 18px; } .worry-grid li { display: flex; gap: 14px; align-items: center; background: #EAE4E7; padding: 24px; font-size: 18px; color: var(--gray); line-height: 1.7; } .worry-no { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #D8ADC1; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; } .worry-grid strong { color: var(--ink); } /* Self Check (셀프체크 이미지 카드) */ .selfcheck-grid { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; } .selfcheck-grid figure { margin: 0; text-align: center; } .selfcheck-grid img { width: 100%; height: auto; border: 1px solid #e5e5e5; display: block; } .selfcheck-grid figcaption { font-size: 14px; font-weight: 700; color: var(--ink); margin-top: 10px; line-height: 1.5; } .selfcheck-grid .cap-sub { font-weight: 400; color: var(--gray); } /* 소음순 수술법 비교표 (이미지 셀) */ .surgery-table .iud-col-name { width: 150px; } .surgery-table .iud-name { padding: 14px 14px; font-size: 16px; vertical-align: middle; } .surgery-table td img { width: 100%; max-width: 220px; height: auto; margin: 0 auto; display: block; } /* 3단계 카드 (세밀한수술/봉합/회복) */ .step-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .step-grid li { background: #EAE4E7; padding: 36px 24px; text-align: center; display: flex; flex-direction: column; justify-content: center; } .step-grid h4 { font-size: 24px; font-weight: 800; color: var(--ink); padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid #e5e5e5; } /* 박스 제목 통일 24, 구분선 #e5e5e5 */ .step-grid p { font-size: 18px; color: var(--gray); line-height: 1.8; } /* Why 유테라 (01~04) — 2x2 명암 카드 */ .why-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 40px; } .why-card { padding: 42px 44px; background: #EAE4E7; color: var(--ink); text-align: left; } .why-card--dark { background: #2C6852; color: #fff; } .why-no { font-weight: 800; margin-right: 4px; } .why-head { font-size: 20px; font-weight: 800; margin-bottom: 18px; letter-spacing: -0.3px; } .why-body { font-size: 16px; line-height: 1.8; } .why-card--dark .why-body { color: rgba(255,255,255,.85); } /* 체크리스트 (✓) */ .checklist { list-style: none; } .checklist li { position: relative; padding-left: 30px; font-size: 18px; color: var(--gray); line-height: 1.8; } .checklist li + li { margin-top: 12px; } .checklist li::before { content: "✓"; position: absolute; left: 0; color: #D8ADC1; font-weight: 800; } .checklist strong { color: var(--ink); } .checklist--center { width: fit-content; max-width: 100%; margin: 0 auto; } .checklist--center li { font-size: 25px; } .checklist--2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 44px; max-width: 1000px; margin: 0 auto; } .checklist--2col li + li { margin-top: 0; } .checklist--lg li { font-size: 18px; } .checklist--lg li + li { margin-top: 18px; } /* 스펙 리스트 (시술시간/마취/회복 등) */ .spec-list { max-width: 760px; margin: 0 auto 28px; border-top: 1px solid #e5e5e5; } .spec-list > div { display: flex; gap: 24px; padding: 16px 8px; border-bottom: 1px solid #e5e5e5; } .spec-list dt { flex: 0 0 140px; font-weight: 700; color: var(--ink); font-size: 18px; display: flex; align-items: center; } .spec-icon { width: 22px; height: 22px; object-fit: contain; margin-right: 14px; display: inline-block; } .spec-list dd { margin: 0; color: var(--gray); font-size: 18px; } /* Before / After 카드 */ .ba-grid { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .ba-grid--3 { grid-template-columns: repeat(3, 1fr); } .ba-card { text-align: center; } .ba-img { margin: 0 0 18px; border: 1px solid #e5e5e5; overflow: hidden; } .ba-img img { width: 100%; height: auto; display: block; } .ba-name { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 8px; } .ba-desc { font-size: 16px; color: var(--gray); line-height: 1.7; } /* 여성성형 — 반응형 (모바일 768px) */ @media (max-width: 768px) { .surgery-intro-title { font-size: 32px; } /* 템플릿 큰제목 모바일 36 */ .surgery-intro-sub { font-size: 18px; } .intro-rule { padding: 36px 0; } /* PC 50 → 모바일 36 */ .worry-list { padding: 26px 16px; } .worry-list li { font-size: 16px; line-height: 1.9; } .worry-list strong { font-size: 20px; } .checklist--center li { font-size: 18px; } /* PC 25 → 모바일 18 */ .worry-grid { grid-template-columns: 1fr; grid-auto-rows: auto; gap: 12px; } .worry-grid li { font-size: 16px; padding: 18px; } .selfcheck-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .selfcheck-grid figcaption { font-size: 13px; } .surgery-table .iud-col-name { width: 96px; } .surgery-table .iud-name { font-size: 14px; padding: 12px 8px; } .step-grid { grid-template-columns: 1fr; gap: 16px; } .step-grid li { padding: 28px 20px; } .step-grid h4 { font-size: 20px; } .step-grid p { font-size: 16px; } .lead-30 { font-size: 20px; } .lead-22 { font-size: 18px; } .why-grid { grid-template-columns: 1fr; margin-bottom: 32px; } .why-card { padding: 28px 22px; } .why-head { font-size: 18px; } .why-body { font-size: 14px; } /* 모바일 1열: 노랑(연베이지)·갈색 번갈아 — PC의 2·3번 갈색 연속 방지 */ .why-grid li:nth-child(odd) { background: #EAE4E7; color: var(--ink); } .why-grid li:nth-child(odd) .why-body { color: var(--ink); } .why-grid li:nth-child(even) { background: #2C6852; color: #fff; } .why-grid li:nth-child(even) .why-body { color: rgba(255,255,255,.85); } .checklist li { font-size: 16px; padding-left: 26px; } .checklist--2col { grid-template-columns: 1fr; gap: 12px; } .checklist--lg li + li { margin-top: 14px; } .spec-list dt { flex-basis: 110px; font-size: 16px; } .spec-list dd { font-size: 16px; } .ba-grid, .ba-grid--3 { grid-template-columns: 1fr; gap: 28px; } .ba-name { font-size: 18px; } } /* 철학 섹션 (성형외과가 아닌 산부인과) */ .philo { text-align: center; } .gold-rule { border: 0; border-top: 1px solid #D8ADC1; margin: 50px 0; } .philo-arrow { margin: -6px auto; line-height: 0; } .philo-arrow svg { display: inline-block; } @media (max-width: 768px) { .gold-rule { margin: 36px 0; } } .minor-dash { display: block; width: 28px; height: 1px; background: #D8ADC1; margin: 30px auto; } .lead-30 { font-size: 28px; line-height: 1.5; } .media-split-text .split-title { text-align: left; margin-bottom: 20px; } .philo-tight { margin-top: -6px; margin-bottom: -6px; } #labia-h2 { font-weight: 800; } #labia-h2 .accent { font-weight: 800; } #tightening-h2 { font-weight: 800; } #vagina-h2 { font-weight: 800; } #perineal-h2 { font-weight: 800; } .lead-22 { font-size: 22px; line-height: 1.6; } /* 추천 대상 박스 */ .reco-box { background: #f4f4f4; padding: 44px 40px; max-width: 920px; margin: 0 auto; text-align: center; } .reco-title { font-size: 24px; font-weight: 800; color: var(--ink); margin-bottom: 26px; } .reco-list { width: fit-content; max-width: 100%; margin: 0 auto; text-align: left; } .reco-list li { font-size: 18px; } .reco-box .checklist li::before { color: #074430; } @media (max-width: 768px) { .reco-box { padding: 28px 22px; } .reco-title { font-size: 20px; } .reco-list li { font-size: 16px; } } .checklist--c { max-width: 760px; margin: 0 auto 30px; } /* ===== 모바일 전용 줄바꿈/정렬 유틸 (PC 불변) ===== */ .br-mo { display: none; } @media (max-width: 768px) { .br-mo { display: inline !important; } /* 모바일에서만 줄바꿈 표시 */ .br-pc { display: none !important; } /* PC 줄바꿈은 모바일에서 숨김 */ .mo-left { text-align: left !important; } /* 모바일에서만 왼쪽정렬 */ } /* WHY 마무리 문구 — WHY 카드 제목(36/26)보다 작게 */ .why-note { font-size: 28px; } @media (max-width: 768px) { .why-note { font-size: 22px; } } /* 모바일 히어로 — 꽃(우측 상단)이 중심에 오도록 */ @media (max-width: 768px) { .surgery-hero { background-position: 70% top; } } /* ===== 여성검진 페이지 — 원본 레이아웃 컴포넌트 ===== */ /* (a) 기본검진 3열 카드 */ .exam-card-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .exam-info-card { background: #EAE4E7; border-radius: 12px; padding: 42px 30px; text-align: center; } .exam-info-title { font-size: 24px; font-weight: 800; color: var(--ink); padding-bottom: 22px; margin-bottom: 24px; border-bottom: 1px solid #e5e5e5; } .exam-info-body { font-size: 18px; color: var(--gray); line-height: 1.85; } .exam-info-note { font-size: 16px; color: var(--gray); line-height: 1.95; margin-top: 22px; } /* (b) 산전검사 — 텍스트/이미지 체커보드 */ .exam-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; } /* 이미지·박스 높이 맞춤, 사이 공백 없음 */ .exam-row + .exam-row { margin-top: 0; } /* 윗줄·아랫줄 밀착 */ .exam-row figure { margin: 0; overflow: hidden; } .exam-row figure img { width: 100%; height: auto; display: block; } .exam-row--rev .exam-row-text { order: 2; } /* PC: 이미지 왼쪽 / 텍스트 오른쪽 */ #prenatal { background: #f4f4f4; } /* 산전검사 섹션 전체 — 연한 노란색(시스템 기본) 풀폭 */ .exam-row-text { background: #fff; padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; } /* 텍스트 구간 = 흰색 박스(테두리 없음), 이미지 높이에 맞춰 늘어남 */ .exam-block-title { font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.45; text-align: left; margin-bottom: 18px; word-break: keep-all; } /* 어절 단위 줄바꿈(단어 중간 안 깨짐) */ .exam-block-title--ul { padding-bottom: 18px; border-bottom: 1px solid #e5e5e5; margin-bottom: 22px; } .exam-row-text .bullet-list li { text-align: left; font-size: 16px; color: var(--gray); line-height: 1.8; } /* (c) 검사 가능 안내(골드) */ .exam-avail { text-align: center; color: #074430; font-size: 16px; margin-top: 14px; } @media (max-width: 768px) { .exam-card-grid { grid-template-columns: 1fr; gap: 16px; } .exam-info-card { padding: 28px 22px; } .exam-info-title { font-size: 20px; padding-bottom: 16px; margin-bottom: 18px; } .exam-info-body { font-size: 16px; } .exam-info-note { font-size: 14px; } .exam-row { grid-template-columns: 1fr; gap: 0; } .exam-row figure { order: -1; } /* 모바일: 항상 이미지 먼저 (이미지→텍스트 반복) */ .exam-row + .exam-row { margin-top: 0; } .exam-row-text { padding: 26px 22px; } .exam-block-title { font-size: 20px; } .exam-row-text .bullet-list li { font-size: 16px; } .exam-avail { font-size: 14px; } } /* 섹션 리드(인트로 문단) → 첫 콘텐츠 블록 간격 (같은 섹션 내, 블록간 200보다 작게) */ .dept-block--lead + .dept-block { margin-top: 80px; } @media (max-width: 768px) { .dept-block--lead + .dept-block { margin-top: 48px; } } /* media-split 이미지를 우측 텍스트 높이에 맞춰 채움(PC) — 유방/갑상선 등 */ @media (min-width: 769px) { .media-split--fill { align-items: stretch; } .media-split--fill .media-split-img { position: relative; overflow: hidden; min-height: 280px; } .media-split--fill .media-split-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } } /* 섹션 인트로(리드) — 모바일에서만 어절 단위 줄바꿈(가운데 정렬, 단어 중간 끊김 방지). PC 불변 */ @media (max-width: 768px) { .dept-block--lead .section-body { word-break: keep-all; } } /* 유방/갑상선 — 섹션 전체 연한 회색 배경(풀폭) + 우측 텍스트 흰 박스 */ #breast { background: #f4f4f4; } #breast .media-split { gap: 0; } /* 흰 박스 처리 → 이미지↔박스 여백 0(박스 padding이 간격 담당) */ #breast .media-split-text { background: #fff; padding: 36px 38px; } @media (max-width: 768px) { #breast .media-split-text { padding: 26px 22px; } } /* 여성질환 페이지 상단 배너 (이미지 경로는 사용자 제공 예정) */ .disease-hero { background-image: linear-gradient(rgba(216,186,200,0.2), rgba(216,186,200,0.2)), url("images/여성질환/상단이미지_여성질환.jpg"); } /* ===== 여성질환 페이지 컴포넌트 ===== */ /* 증상 크림 박스 (질염·방광염 증상) */ .symp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 1040px; margin: 0 auto; } .symp-box { background: #EAE4E7; border-radius: 10px; padding: 26px 24px; text-align: center; font-size: 18px; color: var(--ink); line-height: 1.6; display: flex; align-items: center; justify-content: center; word-break: keep-all; } .symp-box--full { grid-column: 1 / -1; } /* 자궁경부염 악순환 사이클 */ .cycle-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; max-width: 1000px; margin: 46px auto 0; } .cycle-node { width: 128px; height: 128px; border-radius: 50%; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 16px; font-weight: 700; line-height: 1.35; padding: 10px; word-break: keep-all; } .cycle-node--dark { background: #2C6852; color: #fff; } .cycle-node--g1 { background: #EAE4E7; color: var(--ink); } .cycle-node--g2 { background: #D8ADC1; color: var(--ink); } .cycle-node--g3 { background: #d6bd78; color: #fff; } .cycle-arrow { color: #D8ADC1; font-size: 22px; line-height: 1; } /* 성병 종류 카드 (크림/다크 교차 그리드) */ .std-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .std-card { background: #EAE4E7; padding: 44px 40px; text-align: center; } .std-card--dark { background: #2C6852; color: #fff; } .std-card h4 { font-size: 24px; font-weight: 800; color: inherit; margin-bottom: 12px; } .std-dash { display: block; width: 24px; height: 2px; background: currentColor; opacity: .55; margin: 0 auto 18px; } .std-card p { font-size: 17px; line-height: 1.75; color: inherit; word-break: keep-all; } .std-card--dark p { color: rgba(255,255,255,.85); } /* 다크 바 (예방·비정상 월경) */ .dark-bar-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .dark-bar { background: #2C6852; color: #fff; border-radius: 6px; padding: 20px 24px; text-align: center; font-size: 18px; line-height: 1.5; word-break: keep-all; } .dark-bar strong { color: #EAE4E7; } /* 크림 안내 밴드 (강조 한 줄) */ .note-band { background: #EAE4E7; padding: 24px 30px; text-align: center; font-size: 18px; font-weight: 700; color: var(--ink); margin: 0 auto; line-height: 1.6; word-break: keep-all; } /* 폭 = 컨테이너 전체(골드선과 동일) */ /* media-split 텍스트측 박스 변형 + 좌우반전 */ .media-split--rev { grid-template-columns: 7fr 5fr; } .media-split--rev .media-split-img { order: 2; } .media-split-text.is-cream { background: #EAE4E7; padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; } .media-split-text.is-dark { background: #2C6852; color: #fff; padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; } .media-split-text.is-dark p, .media-split-text.is-dark .feature-body { color: rgba(255,255,255,.88); } .media-split-text .ms-title { font-size: 24px; font-weight: 800; color: var(--ink); line-height: 1.45; text-align: left; margin-bottom: 18px; word-break: keep-all; } .media-split-text.is-dark .ms-title { color: #fff; } .media-split-text .ms-title--ul { padding-bottom: 18px; border-bottom: 1px solid #e5e5e5; margin-bottom: 22px; } @media (max-width: 768px) { .symp-grid { grid-template-columns: 1fr; gap: 12px; } .symp-box { font-size: 16px; padding: 20px 18px; } .cycle-node { width: 104px; height: 104px; font-size: 13px; } .std-grid { grid-template-columns: 1fr; } .std-card { padding: 28px 22px; } .std-card h4 { font-size: 20px; } .std-card p { font-size: 15px; } .dark-bar { font-size: 16px; padding: 16px 18px; } .note-band { font-size: 16px; padding: 18px 20px; } .media-split--rev { grid-template-columns: 1fr; } .media-split--rev .media-split-img { order: 0; } .media-split-text.is-cream, .media-split-text.is-dark { padding: 26px 22px; } .media-split-text .ms-title { font-size: 20px; } } .exam-info-body strong, .exam-info-note strong { color: var(--ink); } .media-split--box { gap: 0; } /* 텍스트측이 박스(크림/다크)면 이미지와 여백 0 */ .exam-row-text.is-cream { background: #EAE4E7; padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; } @media (max-width: 768px) { .exam-row-text.is-cream { padding: 26px 22px; } } /* ===== 팝업 (비급여안내 모달 / 홈 진료안내) ===== */ .popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 1000; display: none; } .popup-overlay.is-open { display: block; } .popup { position: relative; background: #fff; box-shadow: 0 12px 44px rgba(0,0,0,.28); } .popup-img { display: block; width: 100%; height: auto; } .popup-x { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border: 0; background: rgba(255,255,255,.75); border-radius: 50%; cursor: pointer; font-size: 19px; line-height: 1; color: #555; z-index: 2; } .popup-bar { display: flex; border-top: 1px solid #e5e5e5; } .popup-bar button { flex: 1; border: 0; background: #fff; padding: 16px 10px; font-size: 15px; color: var(--ink); cursor: pointer; font-family: inherit; } .popup-bar button + button { border-left: 1px solid #e5e5e5; } .popup-bar button:hover { background: #EAE4E7; } .popup-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 600px; max-width: calc(100vw - 40px); max-height: 92vh; overflow-y: auto; z-index: 1001; } .popup-home { position: fixed; top: 15%; left: 40%; width: 500px; max-width: calc(100vw - 32px); z-index: 950; display: none; } .popup-home.is-open { display: block; } @media (max-width: 768px) { .popup-home { left: 50%; transform: translateX(-50%); top: 12%; width: calc(100vw - 32px); } .popup-modal { width: calc(100vw - 32px); } } /* 박스(media-split 텍스트측) 흰색 변형 + 박스 안 불릿 본문 18 통일 */ .media-split-text.is-white { background: #fff; padding: 40px 38px; display: flex; flex-direction: column; justify-content: center; } .media-split-text .bullet-list li { font-size: 16px; color: var(--gray); line-height: 1.8; } @media (max-width: 768px) { .media-split-text.is-white { padding: 26px 22px; } .media-split-text .bullet-list li { font-size: 16px; } } .cycle-figure { margin: 46px auto 0; max-width: 1040px; } .cycle-figure img { width: 100%; height: auto; display: block; } /* 체커보드 텍스트박스 안 문단 */ .exam-row-text p { font-size: 16px; color: var(--gray); line-height: 1.85; text-align: left; } .exam-row-text p + p { margin-top: 14px; } @media (max-width: 768px) { .exam-row-text p { font-size: 16px; } } /* 체커보드 이미지가 텍스트박스 높이를 채우도록(PC) — 아래 여백 제거 */ @media (min-width: 769px) { .exam-row figure { position: relative; overflow: hidden; min-height: 280px; } .exam-row figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } } /* 박스 안 본문 = 16px (제목과 분리된 내용). 3단계(제목1·제목2·내용)면 제목2=18 */ .media-split-text.is-white p, .media-split-text.is-cream p, .media-split-text.is-dark p { font-size: 16px; } .box-subtitle { font-size: 18px; font-weight: 800; color: var(--ink); } /* Q 박스(바톨린 등) = 24px (시스템 QnA dt와 동일) */ .note-band--q { font-size: 24px; } @media (max-width: 768px) { .note-band--q { font-size: 20px; } } /* feature-split-text 안 불릿 */ .feature-split-text .bullet-list { margin-top: 6px; } .feature-split-text .bullet-list li { font-size: 16px; color: var(--gray); line-height: 1.8; } .feature-split-text .bullet-list li + li { margin-top: 8px; } /* 여성질환 마지막 회색 밴드 = 시스템 하단 길이(360/200)로 회색이 끝까지 */ #bleeding .feature-bg:last-child { padding-bottom: 360px; } @media (max-width: 768px) { #bleeding .feature-bg:last-child { padding-bottom: 200px; } } /* feature-split 이미지 길이 맞춤(세로 긴 사진 crop): 최소 280px, 텍스트가 크면 텍스트 높이 */ @media (min-width: 769px) { .feature-split--fill { align-items: stretch; } .feature-split--fill .feature-split-img { position: relative; overflow: hidden; min-height: 280px; } .feature-split--fill .feature-split-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .feature-split--fill .feature-split-text { display: flex; flex-direction: column; justify-content: center; } } /* 이미지 높이 캡(340px) — 일러스트 등 큰 이미지 */ .ms-img-340 { display: flex; align-items: center; justify-content: center; } .ms-img-340 img { max-height: 340px; width: auto; max-width: 100%; } /* 성병 종류: 모바일 1단일 때 컬러 교차(크림/다크 반복) */ @media (max-width: 768px) { .std-grid .std-card:nth-child(odd) { background: #EAE4E7; color: var(--ink); } .std-grid .std-card:nth-child(odd) p { color: var(--ink); } .std-grid .std-card:nth-child(even) { background: #2C6852; color: #fff; } .std-grid .std-card:nth-child(even) p { color: rgba(255,255,255,.9); } } /* ===== 히어로(요실금/중절) 임시 다크 배너 — 이미지 주시면 교체 ===== */ .incont-hero { background-image: linear-gradient(rgba(216,186,200,0.2), rgba(216,186,200,0.2)), url("images/요실금/상단이미지_요실금.jpg"); } .abortion-hero { background-image: linear-gradient(rgba(216,186,200,0.2), rgba(216,186,200,0.2)), linear-gradient(rgba(5,38,31,0.8), rgba(5,38,31,0.8)), linear-gradient(135deg, #000000, #000000); } /* ===== 중절수술 아티클(원본 코드 이식, .abortion-article로 스코프) ===== */ .abortion-article { max-width: 1040px; margin: 0 auto; line-height: 1.6; color: #000000; } .abortion-article h2, .abortion-article h3, .abortion-article p, .abortion-article li { color: #000000; word-break: keep-all; } .abortion-article .abort-lead { font-size: 40px; font-weight: 800; line-height: 1.4; padding-top: 0; padding-bottom: 8px; } .abortion-article h2 { font-size: 28px; font-weight: 800; line-height: 1.5; padding-top: 120px; } .abortion-article hr { border: none; border-top: 1px solid #e5e5e5; margin: 16px 0 26px; } .abortion-article h3 { font-size: 21px; font-weight: 700; line-height: 1.8; padding-top: 26px; } .abortion-article h3::before { content:""; display:inline-block; width:4px; height:1em; background:#D8ADC1; margin-right:10px; vertical-align:middle; } .abortion-article .faq h3::before { content:none; } .abortion-article .faq h3 { font-weight: 800; } .abortion-article p { font-size: 18px; line-height: 1.9; } .abortion-article li p > strong:first-child { display:block; padding-top: 16px; } .abortion-article img { width: 400px; max-width: 100%; height: auto; margin: 1.4rem 0; display: block; } /* 원본비율·가로400·좌측 */ .abortion-article ol { padding-left: 22px; margin: 8px 0; } .abortion-article ol > li { margin-bottom: 10px; } .abortion-article .categoryblock { border-left: 4px solid #D8ADC1; background:#f4f4f4; padding: 28px 30px; margin: 8px 0 0; } .abortion-article .categorytitle { font-size: 18px; font-weight: 800; margin-bottom: 12px; } .abortion-article .categorylist { list-style: decimal; padding-left: 20px; margin: 0; } .abortion-article .categorylist li { margin-bottom: 6px; } .abortion-article .categorylist a { color:#555; text-decoration:none; } .abortion-article .categorylist a:hover { text-decoration: underline; color:#000000; } .abortion-article .custom-button { display:block; width:100%; text-align:center; padding:22px 24px; margin-top:60px; background:#074430; color:#fff; font-size:21px; font-weight:700; text-decoration:none; transition:all .3s ease; } .abortion-article .custom-button:hover { background:#D8ADC1; color:#fff; } .abortion-article .yellowlg { color:#D8ADC1; font-size:24px; } .abortion-article .yellowsm { color:#074430; font-weight:700; font-size:17px; letter-spacing:.04em; } .abortion-article .yellow { color:#D8ADC1; } @media (max-width: 768px) { .abortion-article .abort-lead { font-size: 28px; padding-top: 0; } .abortion-article h2 { font-size: 22px; padding-top: 80px; } .abortion-article h3 { font-size: 18px; } .abortion-article p, .abortion-article li { font-size: 16px; line-height: 1.85; } .abortion-article .custom-button { font-size: 17px; padding: 18px 20px; margin-top: 44px; } .abortion-article .yellowlg { font-size: 20px; } .abortion-article .categoryblock { padding: 22px 20px; } .abortion-article img { height: auto; } } /* ===== 실시간 상담 지점 선택 팝업(중절수술 CTA) ===== */ .consult-modal-overlay { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0,0,0,.45); } .consult-modal-overlay[hidden] { display: none; } .consult-modal { position: relative; background: #fff; width: 100%; max-width: 440px; padding: 0; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.25); } .consult-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid #e5e5e5; } .consult-modal-title { font-size: 17px; font-weight: 700; color: var(--ink); margin: 0; } .consult-modal-x { width: 30px; height: 30px; border: 0; background: none; cursor: pointer; font-size: 24px; line-height: 1; color: #333; } .consult-branch-list { list-style: none; display: flex; flex-direction: column; gap: 14px; padding: 22px; } .consult-branch-list a { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 20px; background: #074430; color: #fff; text-decoration: none; font-size: 18px; font-weight: 500; transition: background .2s; } .consult-branch-list a:hover { background: #D8ADC1; color: #fff; } @media (max-width: 768px) { .consult-branch-list { padding: 18px; } .consult-branch-list a { min-height: 80px; } } /* 크림(노란) 변형 바 — 여성질환 카드 크림(#EAE4E7)과 동일 */ .dark-bar-list--cream .dark-bar { background: #EAE4E7; color: var(--ink); } .dark-bar-list--cream .dark-bar strong { color: var(--ink); } /* 인트로 밴드 안 흰색 박스 */ .intro-whitebox { background: #fff; padding: 36px 44px; max-width: 1040px; margin: 44px auto 0; } .surgery-priority .intro-whitebox .section-body { margin: 0; } @media (max-width: 768px) { .intro-whitebox { padding: 24px 22px; margin-top: 32px; } } /* 마무리 문구 한 단계 큰 사이즈(dept-note--lg 30 → 36 / 모바일 22 → 26) */ .dept-note--xl { font-size: 32px; font-weight: 400; color: var(--ink); line-height: 1.5; } @media (max-width: 768px) { .dept-note--xl { font-size: 26px; } } /* 요실금 유형 카드: 원인 본문 → 가로선 → 주요증상(한단계 작은 제목) */ .std-card .std-cause { font-size: 17px; line-height: 1.75; color: inherit; word-break: keep-all; } .std-card--dark .std-cause { color: rgba(255,255,255,.85); } .std-card .std-line { border: none; border-top: 1px solid #D8ADC1; margin: 24px 0; } .std-card--dark .std-line { border-top-color: rgba(255,255,255,.28); } .std-card .std-symptom-title { font-size: 18px; font-weight: 800; line-height: 1.4; color: var(--ink); word-break: keep-all; margin: 0 0 10px; } .std-card--dark .std-symptom-title { color: #fff; } .std-card .std-symptom { font-size: 17px; line-height: 1.75; color: inherit; word-break: keep-all; margin: 0; } .std-card--dark .std-symptom { color: rgba(255,255,255,.85); } @media (max-width: 768px) { .std-card .std-cause { font-size: 15px; } .std-card .std-symptom-title { font-size: 16px; } .std-card .std-symptom { font-size: 15px; } .std-card .std-line { margin: 18px 0; } .std-grid .std-card:nth-child(odd) .std-line { border-top-color: #D8ADC1; } .std-grid .std-card:nth-child(odd) .std-symptom-title { color: var(--ink); } .std-grid .std-card:nth-child(even) .std-line { border-top-color: rgba(255,255,255,.28); } .std-grid .std-card:nth-child(even) .std-symptom-title { color: #fff; } } /* ===== 블로그 (목록 + 상세) ===== */ .blog-hero { background-image: linear-gradient(rgba(216,186,200,0.2), rgba(216,186,200,0.2)), url("images/블로그/상단이미지_블로그.jpg"); background-position: center 20%; } .blog-sec { padding: 150px 0 360px; } .blog-cats { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 54px; } .blog-cat { border: 1px solid var(--line); background: #fff; padding: 9px 22px; border-radius: 999px; font-size: 16px; color: var(--ink); cursor: pointer; transition: all .15s; } .blog-cat:hover { border-color: #D8ADC1; } .blog-cat.is-active { background: var(--ink); color: #fff; border-color: var(--ink); } .blog-grid { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px 40px; } /* 데스크톱 3열 (세로52/가로40) */ .bcard-link { display: block; } .bcard-thumb { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: #EAE4E7; } /* 페슈: 썸네일 4:3 */ .bcard-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s ease; } .bcard-link:hover .bcard-thumb img { transform: scale(1.05); } .bcard-body { display: block; padding: 22px 0 0; } .bcard-title { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 18px; font-weight: 800; color: var(--ink); line-height: 1.6; margin-bottom: 8px; height: 3.2em; } .bcard-sum { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 16px; color: var(--gray); line-height: 1.55; margin-bottom: 32px; } .bcard-date { display: block; font-size: 15px; color: #a8a39a; letter-spacing: 0.02em; } .blog-empty { text-align: center; color: var(--gray); padding: 60px 0; } /* 상세 (루트 평면 구조: blog-.html) — 페슈 레이아웃 + 우리 컬러. 본문 최대폭 800px */ .blog-article { padding: 70px 0 150px; } .ba-wrap { max-width: 800px; margin: 0 auto; } .ba-head { margin-bottom: 28px; } .ba-title { font-size: 44px; font-weight: 800; color: var(--ink); line-height: 1.3; letter-spacing: -0.5px; } .ba-subtitle { margin-top: 16px; font-size: 19px; color: var(--gray); line-height: 1.8; } .ba-meta { display: flex; align-items: center; gap: 10px; margin-top: 48px; padding-bottom: 22px; border-bottom: 1px solid #e5e5e5; font-size: 14px; color: #aa9; } .ba-body hr { display: none; } .ba-summary { background: #f4f4f4; border-radius: 2px; padding: 24px 26px; margin: 64px 0 56px; font-size: 16px; color: var(--gray); line-height: 1.8; } .ba-thumb { margin: 0 0 32px; } .ba-thumb img { width: 100%; height: auto; display: block; } .ba-body { font-size: 18px; line-height: 1.9; color: var(--ink); } /* 시스템 본문 18px */ .ba-body > *:first-child { margin-top: 0; } .ba-body h2 { font-size: 28px; font-weight: 800; margin: 4em 0 .6em; letter-spacing: -0.5px; } .ba-body h2:first-of-type { margin-top: 1.6em; } /* 인트로 바로 다음 첫 h2는 가깝게 */ .ba-body h3 { font-size: 22px; font-weight: 700; margin: 1.4em 0 .5em; } .ba-body p { margin: 0 0 1em; } .ba-body ul { list-style: disc outside; margin: .4em 0 1.2em; padding-left: 1.4em; } .ba-body ol { list-style: decimal outside; margin: .4em 0 1.2em; padding-left: 1.5em; } .ba-body li { margin-bottom: .4em; } .ba-body img { max-width: 100%; height: auto; display: block; margin: 3em auto 0; } /* 이미지+캡션 그룹 위 여백 */ .ba-body h2, .ba-body h3, .ba-faq h2 { scroll-margin-top: 110px; } /* 목차 클릭 시 헤더에 안 가리게 */ .ba-body strong { font-weight: 800; } .ba-body a { color: #074430; text-decoration: underline; } .ba-body blockquote { border-left: 3px solid #D8ADC1; margin: 1em 0; padding: 2px 0 2px 16px; color: var(--gray); } .ba-body table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .95em; } .ba-body th, .ba-body td { border: 1px solid var(--line); padding: .6em .85em; } .ba-body thead th { background: #EAE4E7; font-weight: 700; } /* 의료진(작성처) 카드 */ .ba-author { display: flex; align-items: stretch; background: #f4f4f4; border: 1px solid var(--line); border-radius: 2px; overflow: hidden; margin-top: 48px; } .ba-author-photo { width: 230px; aspect-ratio: 460 / 560; align-self: flex-start; flex: none; background: #f4f4f4 center/cover no-repeat; } .ba-author-info { padding: 6px 26px; display: flex; flex-direction: column; justify-content: center; } .ba-author-name { font-size: 19px; font-weight: 800; color: var(--ink); } .ba-author-bio { font-size: 15px; color: var(--gray); margin-top: 8px; line-height: 1.6; } .blog-back { margin: 80px auto 0; text-align: center; } .blog-back a { display: inline-block; border: 1px solid var(--line); padding: 14px 36px; border-radius: 0; font-size: 15px; color: var(--ink); } .blog-back a:hover { border-color: #D8ADC1; } @media (max-width: 768px) { .ba-title { font-size: 27px; } .ba-subtitle { font-size: 16px; } .ba-author { flex-direction: column; } /* 모바일: 전용 모바일 사진(--bg-mo, 4:3)을 풀폭으로. 없으면 PC 사진으로 폴백 */ .ba-author-photo { width: 100%; aspect-ratio: 4 / 3; background-position: center; background-image: var(--bg-mo, var(--bg-pc)) !important; } /* 모바일은 사진↔글이 붙지 않게 상하 패딩 유지(PC만 축소) */ .ba-author-info { padding: 22px 26px; } } @media (max-width: 768px) { .blog-sec { padding: 98px 0 200px; } .blog-cats { gap: 8px; margin-bottom: 36px; } .blog-cat { font-size: 14px; padding: 8px 16px; } .bcard-title { font-size: 18px; } .blog-article { padding: 44px 0 98px; } .ba-title { font-size: 30px; } .ba-body { font-size: 16px; } .ba-body h2 { font-size: 24px; } .ba-body h3 { font-size: 20px; } .ba-summary { font-size: 15px; } } /* 블로그 카드 열 수: 데스크톱 4 → 3 → 2 → 1 (페슈식 반응형) */ @media (max-width: 1000px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 820px) { .blog-grid { grid-template-columns: repeat(2, 1fr); gap: 36px 20px; } } @media (max-width: 520px) { .blog-grid { grid-template-columns: 1fr; } } /* ===== 블로그 상세 — 페슈 구조(TOC/FAQ/관련글) + 우리 컬러 ===== */ .ba-layout { display: flex; gap: 48px; align-items: stretch; } /* stretch라야 목차 sticky가 끝까지 따라옴 */ .ba-side { width: 240px; flex: none; } .ba-toc { position: sticky; top: 140px; max-height: calc(100vh - 160px); overflow-y: auto; } .ba-toc-h { font-size: 15px; font-weight: 800; color: var(--ink); margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid #D8ADC1; } .ba-toc ul { list-style: none; } .ba-toc li { margin: 7px 0; line-height: 1.4; } .ba-toc li.lv-h3 { padding-left: 12px; } .ba-toc a { font-size: 14px; color: var(--gray); } .ba-toc a:hover { color: #D8ADC1; } .ba-main { flex: 1; min-width: 0; max-width: 820px; } .ba-toc-mobile { display: none; } /* 데스크톱은 사이드바 사용, 모바일에서만 본문 안 목차 노출 */ .ba-body p.ba-caption { text-align: center; margin: 10px 0 3em; } /* 이미지엔 가깝게(10px), 본문과는 멀게(3em) — .ba-body p보다 우선 */ .ba-caption em { font-style: normal; color: #8a8a8a; font-size: .9em; } .ba-body a.ba-cite { color: #8a8a8a; font-style: italic; font-size: .92em; } /* FAQ */ .ba-faq { margin-top: 104px; } /* 글 사이(h2) 간격(4em)과 동일하게 */ .ba-faq h2 { font-size: 28px; font-weight: 800; margin-bottom: 18px; letter-spacing: -0.5px; } .ba-faq-item { border-top: 1px solid #e5e5e5; padding: 28px 0; } .ba-faq-item:last-child { border-bottom: 1px solid #e5e5e5; } .ba-faq-q { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 8px; } .ba-faq-q::before { content: "Q. "; color: #D8ADC1; font-weight: 800; } .ba-faq-a { font-size: 18px; color: var(--ink); line-height: 1.9; } /* 본문과 동일하게 */ .ba-faq-a::before { content: "A. "; color: var(--ink); font-weight: 700; } /* FAQ 모바일 크기 — base 규칙이 위 미디어쿼리보다 뒤에 있어, 여기서(뒤) 다시 지정해야 적용됨(본문과 동일 16px) */ @media (max-width: 768px) { .ba-faq h2 { font-size: 24px; } .ba-faq-q, .ba-faq-a { font-size: 16px; } } /* 관련글 */ .ba-related { margin-top: 48px; background: #f4f4f4; border-radius: 2px; padding: 24px 28px; } .ba-related h2 { font-size: 22px; font-weight: 800; margin-bottom: 12px; } .ba-related ul { list-style: none; } .ba-related li { margin: 7px 0; line-height: 1.5; } .ba-related a { font-size: 15px; color: var(--ink); } .ba-related a:hover { color: #074430; } @media (max-width: 980px) { .ba-layout { display: block; } .ba-side { display: none; } .ba-main { max-width: none; } /* 모바일: 목차를 핵심요약 아래에 박스로 노출(사이드바 대체) */ .ba-toc-mobile { display: block; background: transparent; border: 1px solid #D8ADC1; border-radius: 2px; padding: 16px 18px; margin: 0 0 32px; } .ba-toc-mobile .ba-toc { position: static; max-height: none; overflow: visible; } } /* 블로그 상세 — 의료진 역할/링크 + 고지문구 */ .ba-author-specialty { display: block; font-size: 14px; font-weight: 600; color: #074430; margin-bottom: 2px; } .ba-author-branch { font-size: 16px; font-weight: 400; color: var(--ink); margin-right: 8px; } .ba-author-role { font-size: 17px; font-weight: 400; color: var(--gray); margin-left: 6px; } .ba-author-top { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .ba-author-link { display: inline-block; margin-top: 0; font-size: 14px; color: #074430; flex: none; white-space: nowrap; } .ba-author-cred { list-style: none; margin: 20px 0 0; padding: 0; } .ba-author-cred li { position: relative; padding-left: 11px; font-size: 14px; color: #a39d92; line-height: 1.7; } .ba-author-cred li::before { content: ""; position: absolute; left: 0; top: 11px; width: 3px; height: 3px; background: #074430; border-radius: 50%; } .ba-notices { margin-top: 44px; padding-top: 20px; border-top: 1px solid #e5e5e5; } .ba-notices p { font-size: 13px; color: #9a948b; line-height: 1.7; margin: 0 0 7px; } /* 모바일 본문: NanumSquare가 커 보여 한 단계 축소(연세w 톤 매칭) */ @media (max-width: 768px) { .section-body, .feature-body, .exam-body, .exam-info-body, .pill-body, .pill-lead, .dept-lead, .dept-note, .dept-note--18, .symptom-lead, .about-ph-body, .media-split-text p, .exam-row-text p, .feature-split-text .bullet-list li, .media-split-text .bullet-list li, .worry-list li, .worry-grid li, .step-grid p, .checklist li, .spec-list dt, .spec-list dd, .qa-card .qa-a, .doctor-cred li, .branch-cap { font-size: 15px; } }