#sub01_08 { display:grid; grid-template-columns:minmax(0,560fr) minmax(0,1130fr); gap:40px; width:90%; max-width:1740px; margin:210px auto 0; padding-bottom:110px; } #sub01_08 > .subtxt .t1 { margin:0 0 28px; font-family:'Noto Serif KR',serif; font-size:42px; font-weight:600; line-height:1.4; word-break:keep-all; } #sub01_08 > .subtxt .t2 { margin:0 0 30px; font-size:17px; font-weight:400; line-height:1.65; word-break:keep-all; } #sub01_08 .rows { display:grid; gap:36px; min-width:0; } #sub01_08 .row { display:grid; grid-template-columns:minmax(0,580fr) minmax(0,510fr); gap:40px; align-items:start; scroll-margin-top:120px; } #sub01_08 .photo { position:relative; overflow:hidden; aspect-ratio:580 / 345; } #sub01_08 .photo img { display:block; width:100%; height:100%; object-fit:cover; } #sub01_08 .photo .over { position:absolute; inset:0; opacity:0; transition:opacity .7s; } #sub01_08 .txt .t1 { margin:0 0 16px; font-family:'CormorantGaramond',serif; font-size:56px; font-weight:400; line-height:1; } #sub01_08 .txt .t2 { margin:0 0 18px; font-size:20px; font-weight:600; line-height:1.5; word-break:keep-all; } #sub01_08 .txt .t3 { margin:0; font-size:17px; font-weight:400; line-height:1.6; word-break:keep-all; } #sub01_08 .subtxt.ready, #sub01_08 .row.ready { opacity:0; } #sub01_08 .subtxt.ready.entered { animation:hybrid-left 1.4s cubic-bezier(.25,1,.5,1) .2s both; } #sub01_08 .row.ready.entered { animation:hybrid-up 1.5s cubic-bezier(.25,1,.5,1) .3s both; } @media (hover:hover) and (pointer:fine) { #sub01_08 .row:hover .photo .over { opacity:1; } } @media (max-width:1400px) { #sub01_07 { padding-top:100px; } #sub01_07 .inner, #sub01_08, #sub01_08 .row { gap:24px; } #sub01_07 .subtxt { padding-top:70px; } #sub01_07 .subtxt .t1, #sub01_08 > .subtxt .t1 { font-size:30px; } #sub01_08 { margin-top:140px; } #sub01_08 .txt .t1 { font-size:38px; } #sub01_08 .txt .t2 { font-size:17px; } #sub01_08 .txt .t3 { font-size:15px; } } @media (max-width:1000px) { #sub01_07 .title { flex-wrap:wrap; gap:12px; font-size:7vw; } #sub01_07 .inner { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } #sub01_07 .subtxt { padding-top:30px; } #sub01_08 { grid-template-columns:minmax(0,1fr); gap:40px; margin-top:100px; } #sub01_08 .row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } @media (max-width:640px) { #sub01_07 { padding-top:70px; } #sub01_07 .title { margin-bottom:40px; font-size:10vw; } #sub01_07 .title .cross { font-size:38px; } #sub01_07 .inner { width:calc(100% - 40px); grid-template-columns:minmax(0,1fr); gap:36px; } #sub01_07 .subtxt { padding-top:0; } #sub01_07 .subtxt .t1, #sub01_08 > .subtxt .t1 { font-size:27px; margin-bottom:24px; } #sub01_07 .subtxt .t2, #sub01_08 > .subtxt .t2 { font-size:15px; line-height:1.8; } #sub01_07 .portrait { width:90%; max-width:420px; margin:0 auto; } #sub01_08 { width:calc(100% - 40px); margin-top:76px; padding-bottom:70px; } #sub01_08 .rows { gap:48px; } #sub01_08 .row { grid-template-columns:minmax(0,1fr); gap:24px; scroll-margin-top:90px; } #sub01_08 .txt .t1 { font-size:42px; } } @media (prefers-reduced-motion:reduce) { #sub01_07 .title span.ready, #sub01_07 .title span.ready.entered, #sub01_07 .subtxt.ready, #sub01_07 .subtxt.ready.entered, #sub01_08 .subtxt.ready, #sub01_08 .subtxt.ready.entered, #sub01_08 .row.ready, #sub01_08 .row.ready.entered { opacity:1; transform:none; animation:none; } #sub01_07 .portrait.ready .window, #sub01_07 .portrait.ready.entered .window { clip-path:none; animation:none; } #sub01_07 .portrait.ready img, #sub01_07 .portrait.ready.entered img { transform:none; animation:none; } #sub01_08 .photo .over { transition:none; } } #sub0401_10 { background-image:url('/images/sub/0401_10.jpg'); } #sub0402_10 { background-image:url('/images/sub/0402_10.jpg'); } #sub0403_10 { background-image:url('/images/sub/0403_10.jpg'); }#sub02_04 { position:relative; isolation:isolate; padding:110px 0 0; overflow:hidden; background:#f8f4f0; color:#956c51; } #sub02_04::before { content:""; position:absolute; right:0; bottom:0; left:0; z-index:-1; height:36%; background:#061f2d; } #sub02_04 .subtxt { width:90%; max-width:1740px; margin:0 auto 48px; } #sub02_04 .t1 { margin:0 0 20px; font-family:'Noto Serif KR',serif; font-size:45px; font-weight:600; line-height:1.4; word-break:keep-all; } #sub02_04 .t2 { margin:0; font-size:17px; font-weight:400; line-height:1.6; word-break:keep-all; } #sub02_04 .image { position:relative; width:calc(100% - 100px); max-width:1820px; aspect-ratio:1784 / 864; margin:0 auto; overflow:hidden; } #sub02_04 .frame { position:absolute; inset:0; overflow:hidden; } #sub02_04 .photo { position:absolute; inset:0; background:url('/images/sub/02_04.jpg') no-repeat center / cover; } #sub02_04 .photo.photo2 { position:absolute; inset:0; background:url('/images/sub/03_04.jpg') no-repeat center / cover; } #sub02_04 .photo.photo3 { position:absolute; inset:0; background:url('/images/sub/0401_04.jpg') no-repeat center / cover; } #sub02_04 .photo.photo4 { position:absolute; inset:0; background:url('/images/sub/0402_04.jpg') no-repeat center / cover; } #sub02_04 .photo.photo5 { position:absolute; inset:0; background:url('/images/sub/0403_04.jpg') no-repeat center / cover; } #sub02_04 .subtxt .t1.ready, #sub02_04 .subtxt .t2.ready { opacity:0; transform:translateY(36px); } #sub02_04 .subtxt .t1.ready.entered { animation:sub02_04-up 1.4s cubic-bezier(.25,1,.5,1) .3s both; } #sub02_04 .subtxt .t2.ready.entered { animation:sub02_04-up 1.4s cubic-bezier(.25,1,.5,1) .6s both; } #sub02_04 .image.ready .frame { clip-path:inset(0 50%); } #sub02_04 .image.ready .photo { transform:scale(1.12); } #sub02_04 .image.ready.entered .frame { animation:sub02_04-open 1.6s cubic-bezier(.25,1,.5,1) .8s both; } #sub02_04 .image.ready.entered .photo { animation:sub02_04-zoom 6s cubic-bezier(.25,1,.5,1) 1.4s both; } @media (max-width:1100px) { #sub02_04 { padding-top:90px; } #sub02_04::before { height:22vw; } #sub02_04 .subtxt { width:86%; max-width:1740px; margin-bottom:48px; } #sub02_04 .t1 { font-size:38px; } #sub02_04 .image { width:94%; aspect-ratio:16 / 8; } } @media (max-width:640px) { #sub02_04 { padding-top:64px; } #sub02_04::before { height:140px; } #sub02_04 .subtxt { width:calc(100% - 40px); margin-bottom:44px; } #sub02_04 .t1 { margin-bottom:24px; font-size:29px; line-height:1.5; } #sub02_04 .t2 { font-size:15px; line-height:1.8; } #sub02_04 .image { width:calc(100% - 40px); aspect-ratio:1784 / 864; } } @media (prefers-reduced-motion:reduce) { #sub02_04 .subtxt .t1.ready, #sub02_04 .subtxt .t2.ready { opacity:1; transform:none; filter:none; animation:none; } #sub02_04 .image.ready .frame, #sub02_04 .image.ready.entered .frame { clip-path:none; animation:none; } #sub02_04 .image.ready .photo, #sub02_04 .image.ready.entered .photo { transform:none; animation:none; } } #sub02_08 { padding:130px 0 130px; color:#956c51; overflow:hidden; } #sub02_08 .subtxt { width:90%; max-width:1740px; margin:0 auto 60px; } #sub02_08 .subtxt .t1 { margin:0 0 26px; font-family:'Noto Serif KR',serif; font-size:45px; font-weight:600; line-height:1.4; letter-spacing:0; word-break:keep-all; } #sub02_08 .subtxt .t2 { margin:0; font-size:17px; font-weight:400; line-height:1.65; letter-spacing:0; word-break:keep-all; } #sub02_08 .equipment { width:95%; margin:0 0 0 5%; overflow:hidden; touch-action:pan-y; } #sub02_08 .swiper-slide { height:auto; min-width:0; } #sub02_08 .equipment:not(.swiper-initialized) { overflow-x:auto; scroll-snap-type:x mandatory; } #sub02_08 .equipment:not(.swiper-initialized) .swiper-wrapper { display:flex; gap:28px; } #sub02_08 .equipment:not(.swiper-initialized) .swiper-slide { flex:0 0 33%; scroll-snap-align:start; } #sub02_08 .photo { aspect-ratio:560 / 600; overflow:hidden; background:#eee8df; } #sub02_08 .photo img { display:block; width:100%; height:100%; object-fit:cover; } #sub02_08 .card .t1 { margin:24px 0 16px; font-family:'CormorantGaramond',serif; font-size:45px; font-weight:400; line-height:1; letter-spacing:0; } #sub02_08 .card .t2 { margin:0; font-size:17px; font-weight:400; line-height:1.65; letter-spacing:0; word-break:keep-all; } #sub02_08 .subtxt .ready, #sub02_08 .card.ready { opacity:0; } #sub02_08 .subtxt .t1.ready.entered { animation:bodydesign-up 1.4s cubic-bezier(.25,1,.5,1) .3s both; } #sub02_08 .subtxt .t2.ready.entered { animation:bodydesign-up 1.4s cubic-bezier(.25,1,.5,1) .6s both; } #sub02_08 .swiper-slide:nth-child(1) { --delay:.9s; } #sub02_08 .swiper-slide:nth-child(2) { --delay:1.2s; } #sub02_08 .swiper-slide:nth-child(3) { --delay:1.5s; } #sub02_08 .swiper-slide:nth-child(4) { --delay:1.8s; } #sub02_08 .card.ready.entered { animation:bodydesign-up 1.4s cubic-bezier(.25,1,.5,1) var(--delay,.3s) both; } #sub02_08 .controls { display:flex; justify-content:flex-end; gap:12px; width:90%; margin:28px auto 0; } #sub02_08 .controls[hidden] { display:none; } #sub02_08 .controls button { width:44px; height:44px; border:1px solid #d7c8bc; border-radius:50%; background:#fff; color:#956c51; font-size:22px; cursor:pointer; } #sub02_08 .controls button:disabled { opacity:.3; cursor:default; } #sub02_08 :focus-visible { outline:2px solid #956c51; outline-offset:-2px; } @media (max-width:1100px) { #sub02_07 { padding-top:100px; } #sub02_07 .inner { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; } #sub02_07 .subtxt { padding-top:40px; } #sub02_07 .subtxt .t1, #sub02_08 .subtxt .t1 { font-size:34px; } #sub02_08 .equipment:not(.swiper-initialized) .swiper-slide { flex-basis:47%; } #sub02_08 .card .t1 { font-size:36px; } } @media (max-width:640px) { #sub02_07 { padding-top:72px; } #sub02_07 .title { flex-wrap:wrap; column-gap:12px; row-gap:8px; width:calc(100% - 40px); margin-bottom:40px; font-size:clamp(32px,8vw,48px); } #sub02_07 .title .right { flex-basis:100%; text-align:center; } #sub02_07 .inner { grid-template-columns:minmax(0,1fr); width:calc(100% - 40px); gap:28px; } #sub02_07 .subtxt { padding-top:0; } #sub02_07 .subtxt .t1, #sub02_08 .subtxt .t1 { font-size:28px; } #sub02_07 .subtxt .t2, #sub02_08 .subtxt .t2, #sub02_08 .card .t2 { font-size:15px; line-height:1.8; } #sub02_07 .portrait { width:80%; max-width:420px; margin:0 auto; } #sub02_08 { padding:64px 0 72px; } #sub02_08 .subtxt { width:calc(100% - 40px); margin-bottom:36px; } #sub02_08 .equipment { width:calc(100% - 20px); margin-left:20px; } #sub02_08 .equipment:not(.swiper-initialized) .swiper-slide { flex-basis:86%; } #sub02_08 .swiper-slide:nth-child(n) { --delay:.3s; } } @media (prefers-reduced-motion:reduce) { #sub02_07 .title .ready, #sub02_07 .subtxt.ready, #sub02_08 .subtxt .ready, #sub02_08 .card.ready { animation:none; opacity:1; transform:none; } #sub02_07 .portrait.ready .window { animation:none; clip-path:none; } #sub02_07 .portrait.ready img { animation:none; transform:none; } } /* 지방이식 비교: 기존 sub01_08 구조와 반응형 재사용 */ #sub01_08.fatcompare { margin-top:0; padding-top:140px; color:#956c51; background:#fff; } #sub01_08.fatcompare > .title { grid-column:1 / -1; margin:0 0 120px; font-family:'CormorantGaramond',serif; font-size:clamp(40px,6.39vw,128px); font-weight:400; line-height:1.1; letter-spacing:-.025em; text-align:center; overflow-wrap:anywhere; } #sub01_08.fatcompare > .title.ready { opacity:0; } #sub01_08.fatcompare > .title.ready.entered { animation:hybrid-up 1.4s cubic-bezier(.25,1,.5,1) .2s both; } #sub01_08.fatcompare .more { display:inline-block; margin-top:48px; padding:10px 16px; border-radius:10px; background:#f6f1ed; color:inherit; font-size:15px; font-weight:400; line-height:1.4; letter-spacing:0; text-decoration:none; } #sub01_08.fatcompare .photo:focus-visible { outline:2px solid #956c51; outline-offset:4px; } #sub01_08.fatcompare .photo:focus .over { opacity:1; } @media (max-width:1100px) { #sub01_08.fatcompare { padding-top:100px; } #sub01_08.fatcompare > .title { margin-bottom:40px; } } @media (max-width:640px) { #sub01_08.fatcompare { padding-top:70px; } #sub01_08.fatcompare > .title { margin-bottom:16px; font-size:40px; line-height:1.15; } #sub01_08.fatcompare > .subtxt br { display:none; } #sub01_08.fatcompare .more { margin-top:28px; } } @media (prefers-reduced-motion:reduce) { #sub01_08.fatcompare > .title.ready, #sub01_08.fatcompare > .title.ready.entered { opacity:1; transform:none; animation:none; } } /* sub.css: 영역별 규칙 · 한 규칙 한 줄 · 영역 사이 빈 줄 두 개 */ .external-feed, .external-grid { --external-accent: #1EA9DC; font-family: Pretendard, system-ui, sans-serif; } .external-feed { padding: 0px 0px 40px; } .external-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 24px; } .external-card { min-width: 0px; overflow: hidden; background: rgb(255, 255, 255); border: 1px solid rgb(231, 235, 240); border-radius: 18px; transition: border-color 0.18s, box-shadow 0.18s; } .external-card:hover { border-color: var(--external-accent); box-shadow: rgba(36, 62, 80, 0.063) 0px 8px 24px; } .external-card > a { display: block; height: 100%; color: rgb(23, 43, 70); text-decoration: none; } .external-card > a:focus-visible { outline: 3px solid var(--external-accent); outline-offset: -3px; border-radius: 18px; } .external-image { position: relative; aspect-ratio: 16 / 9; background: rgb(241, 245, 248); display: grid; place-items: center; overflow: hidden; } .external-image img { display: block; width: 100%; height: 100%; object-fit: cover; } .external-short .external-image { aspect-ratio: 4 / 5; } .external-short .external-image img { object-fit: contain; } .external-placeholder { font-size: 22px; font-weight: 700; letter-spacing: 0.16em; color: rgb(120, 144, 164); } .external-play { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; background: rgba(21, 39, 56, 0.7); color: rgb(255, 255, 255); border-radius: 50%; font-size: 16px; } .external-copy { padding: 24px; } .external-category { color: rgb(81, 105, 123); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; } .external-category::before { content: ""; display: inline-block; width: 6px; height: 6px; background: var(--external-accent); border-radius: 50%; margin-right: 7px; vertical-align: middle; } .external-copy h2 { font-size: 18px; line-height: 1.55; letter-spacing: -0.03em; font-weight: 600; margin: 10px 0px 14px; overflow-wrap: anywhere; } .external-copy p { font-size: 14px; color: rgb(102, 118, 138); line-height: 1.7; margin: 0px 0px 18px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .external-copy time { font-size: 12px; color: rgb(120, 135, 153); } .external-tabs { display: flex; gap: 8px; margin: 0px 0px 24px; flex-wrap: wrap; } .external-tabs a, .external-pagination a { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; min-height: 42px; box-sizing: border-box; border: 1px solid rgb(224, 230, 237); border-radius: 9px; color: rgb(88, 103, 122); background: rgb(255, 255, 255); font-size: 14px; } .external-tabs a[aria-current], .external-pagination a[aria-current] { background: var(--external-accent); border-color: var(--external-accent); color: rgb(255, 255, 255); font-weight: 600; } .external-tabs a:focus-visible, .external-pagination a:focus-visible { outline: 2px solid var(--external-accent); outline-offset: 3px; } .external-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 28px; } .external-empty { padding: 80px 24px; background: rgb(255, 255, 255); border: 1px solid rgb(231, 235, 240); border-radius: 18px; text-align: center; color: rgb(109, 124, 144); font-size: 15px; } @media (prefers-reduced-motion: reduce) { .external-card { transition: none; } } .service-page { --accent: #1EA9DC; --ink: #172b46; --line: #e2e7ee; color: var(--ink); font-family: var(--font-sans); max-width: 1120px; padding: 64px 24px 80px; margin: 0px auto; } .service-page .page-heading { margin: 0px 0px 36px; } .service-page .page-heading .eyebrow { display: none; } .service-page .page-heading h1 { font-size: 32px; line-height: 1.35; letter-spacing: -0.04em; font-weight: 650; margin: 0px; } .service-page input, .service-page select, .service-page textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line); background: rgb(255, 255, 255); color: var(--ink); border-radius: 9px; min-height: 50px; padding: 13px 15px; font-style: inherit; font-variant: inherit; font-weight: inherit; font-stretch: inherit; line-height: inherit; font-family: inherit; font-optical-sizing: inherit; font-size-adjust: inherit; font-kerning: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-language-override: inherit; font-size: 16px; transition: border-color 0.15s, box-shadow 0.15s; } .service-page :is(input, select, textarea):focus { outline: none; border-color: var(--accent); box-shadow: rgba(30, 169, 220, 0.094) 0px 0px 0px 3px; } .service-page input:user-invalid, .service-page textarea:user-invalid { border-color: rgb(201, 62, 72); } .service-page .required { display: inline; color: rgb(201, 62, 72); margin-left: 3px; } .service-page :is(button, .button) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 22px; border: 1px solid transparent; border-radius: 9px; background: var(--accent); color: rgb(255, 255, 255); text-decoration: none; cursor: pointer; transition: filter 0.15s; } .service-page :is(button, .button):hover { filter: brightness(0.95); } .service-page :is(button, a):focus-visible { outline: rgba(30, 169, 220, 0.4) solid 3px; outline-offset: 3px; } .service-page :is(button, .button).secondary { background: rgb(255, 255, 255); border-color: var(--line); color: var(--ink); } .service-page button:disabled { cursor: wait; opacity: 0.55; } .service-page .form-grid label { display: block; font-size: 15px; font-weight: 500; } .service-page .form-grid label > input, .service-page .form-grid label > select, .service-page .form-grid label > textarea, .service-page .service-password { margin-top: 10px; } .service-page .form-grid { gap: 24px; } .service-password { display: flex; align-items: center; position: relative; } .service-password input { padding-right: 64px; } .service-page .service-password button { position: absolute; right: 5px; background: transparent; color: rgb(91, 108, 128); font-size: 13px; min-height: 40px; padding: 8px 10px; } .lookup-page { max-width: 520px; margin: 56px auto; padding: 38px; background: rgb(255, 255, 255); border: 1px solid rgb(237, 240, 244); border-radius: 24px; box-shadow: rgba(23, 43, 70, 0.027) 0px 12px 40px; } body:has(.lookup-page) { background: rgb(245, 246, 248); } .lookup-page .page-heading h1 { font-size: 27px; } .lookup-page .panel { border: 0px; box-shadow: none; padding: 0px; margin: 0px 0px 28px; background: transparent; } .lookup-page .lookup-form { display: grid; grid-template-columns: 1fr; max-width: none; margin: 0px; } .lookup-page .lookup-form .full { grid-column: 1; } .lookup-page .panel:not(.lookup-form), .lookup-page .notice { padding: 22px; background: rgb(245, 248, 250); border-radius: 12px; line-height: 1.8; overflow-wrap: anywhere; } .lookup-page .panel h2, .lookup-page .notice h2 { font-size: 18px; margin: 0px 0px 12px; } .lookup-page .panel h3 { font-size: 15px; margin: 20px 0px 8px; } .lookup-page .panel p { margin: 12px 0px; } .lookup-page .danger { background: rgb(255, 255, 255); color: rgb(173, 52, 64); border-color: rgb(231, 200, 204); } .medis-default-footer { padding: 24px; border-top: 1px solid rgb(231, 235, 239); } .medis-default-footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px; } .medis-default-footer a { color: rgb(101, 116, 138); text-decoration: none; padding: 8px 0px; } @media (prefers-reduced-motion: reduce) { .service-page * { transition: none; } } .medis-ui.service-page.section { padding-block: 64px 80px; } .medis-ui.lookup-page.section { padding-block: 38px; width: calc(100% - 32px); } .service-page .service-error { padding: 14px 16px; margin: 0px 0px 24px; color: rgb(166, 46, 59); border: 1px solid rgb(239, 203, 208); background: rgb(255, 247, 248); border-radius: 9px; font-size: 14px; } .medis-ui { --brand: #1EA9DC; --brand-dark: #1685b0; } #sub01_07 .title { display:flex; align-items:center; justify-content:center; gap:22px; width:96%; margin:0 auto 60px; font-family:'CormorantGaramond',serif; font-size:clamp(40px,7.8vw,146px); font-weight:600; line-height:1; letter-spacing:.01em; } #sub01_07 .title span { display:block; white-space:nowrap; } #sub01_07 .cross { font-family:'CormorantGaramond',serif; font-weight:400; } #sub01_07 .inner { display:grid; grid-template-columns:minmax(0,560fr) minmax(0,580fr) minmax(0,510fr); gap:40px; width:90%; max-width:1740px; margin:0 auto; } #sub01_07 .subtxt { padding-top:140px; } #sub01_07 .subtxt .t1 { margin:0 0 36px; font-family:'Noto Serif KR',serif; font-size:42px; font-weight:600; line-height:1.4; word-break:keep-all; } #sub01_07 .subtxt .t2 { margin:0; font-size:17px; font-weight:400; line-height:1.65; word-break:keep-all; } #sub01_07 .portrait { position:relative; aspect-ratio:580 / 1050; } #sub01_07 .window { position:absolute; inset:0; overflow:hidden; } #sub01_07 .portrait img { display:block; width:100%; height:100%; object-fit:cover; transform-origin:50% 28%; } #sub01_07 .title span.ready, #sub01_07 .subtxt.ready { opacity:0; } #sub01_07 .left.ready.entered { animation:hybrid-left 1.5s cubic-bezier(.25,1,.5,1) .2s both; } #sub01_07 .cross.ready.entered { animation:hybrid-up 1.5s cubic-bezier(.25,1,.5,1) .2s both; } #sub01_07 .right.ready.entered { animation:hybrid-right 1.5s cubic-bezier(.25,1,.5,1) .2s both; } #sub01_07 .subtxt.ready.entered { animation:hybrid-left 1.4s cubic-bezier(.25,1,.5,1) .8s both; } #sub01_07 .portrait.ready .window { clip-path:inset(26% 0 74%); } #sub01_07 .portrait.ready img { transform:scale(1.1); } #sub01_07 .portrait.ready.entered .window { animation:hybrid-open 1.8s cubic-bezier(.25,1,.5,1) 1.0s both; } #sub01_07 .portrait.ready.entered img { animation:hybrid-zoom 3s cubic-bezier(.25,1,.5,1) 1.0s both; } :is(#sub01_08, #sub0401_05) { display:grid; grid-template-columns:minmax(0,560fr) minmax(0,1130fr); gap:40px; width:90%; max-width:1740px; margin:210px auto 0; padding-bottom:110px; } :is(#sub01_08, #sub0401_05) > .subtxt .t1 { margin:0 0 28px; font-family:'Noto Serif KR',serif; font-size:42px; font-weight:600; line-height:1.4; word-break:keep-all; } :is(#sub01_08, #sub0401_05) > .subtxt .t2 { margin:0 0 30px; font-size:17px; font-weight:400; line-height:1.65; word-break:keep-all; } :is(#sub01_08, #sub0401_05) .rows { display:grid; gap:36px; min-width:0; } :is(#sub01_08, #sub0401_05) .row { display:grid; grid-template-columns:minmax(0,580fr) minmax(0,510fr); gap:40px; align-items:start; scroll-margin-top:120px; } :is(#sub01_08, #sub0401_05) .photo { position:relative; overflow:hidden; aspect-ratio:580 / 345; } :is(#sub01_08, #sub0401_05) .photo img { display:block; width:100%; height:100%; object-fit:cover; } :is(#sub01_08, #sub0401_05) .photo .over { position:absolute; inset:0; opacity:0; transition:opacity .7s; } :is(#sub01_08, #sub0401_05) .txt .t1 { margin:0 0 16px; font-family:'CormorantGaramond',serif; font-size:56px; font-weight:400; line-height:1; } :is(#sub01_08, #sub0401_05) .txt .t2 { margin:0 0 18px; font-size:20px; font-weight:600; line-height:1.5; word-break:keep-all; } :is(#sub01_08, #sub0401_05) .txt .t3 { margin:0; font-size:17px; font-weight:400; line-height:1.6; word-break:keep-all; } :is(#sub01_08, #sub0401_05) .subtxt.ready, :is(#sub01_08, #sub0401_05) .row.ready { opacity:0; } :is(#sub01_08, #sub0401_05) .subtxt.ready.entered { animation:hybrid-left 1.4s cubic-bezier(.25,1,.5,1) .2s both; } :is(#sub01_08, #sub0401_05) .row.ready.entered { animation:hybrid-up 1.5s cubic-bezier(.25,1,.5,1) .3s both; } @media (hover:hover) and (pointer:fine) { :is(#sub01_08, #sub0401_05) .row:hover .photo .over { opacity:1; } } @keyframes hybrid-left { from { opacity:0; transform:translateX(-65px); } to { opacity:1; transform:none; } } @keyframes hybrid-right { from { opacity:0; transform:translateX(65px); } to { opacity:1; transform:none; } } @keyframes hybrid-up { from { opacity:0; transform:translateY(60px); } to { opacity:1; transform:none; } } @keyframes hybrid-open { from { clip-path:inset(26% 0 74%); } to { clip-path:inset(0); } } @keyframes hybrid-zoom { from { transform:scale(1.1); } to { transform:scale(1); } } @media (max-width:1400px) { #sub01_07 { padding-top:100px; } #sub01_07 .inner, :is(#sub01_08, #sub0401_05), :is(#sub01_08, #sub0401_05) .row { gap:24px; } #sub01_07 .subtxt { padding-top:70px; } #sub01_07 .subtxt .t1, :is(#sub01_08, #sub0401_05) > .subtxt .t1 { font-size:30px; } :is(#sub01_08, #sub0401_05) { margin-top:140px; } :is(#sub01_08, #sub0401_05) .txt .t1 { font-size:38px; } :is(#sub01_08, #sub0401_05) .txt .t2 { font-size:17px; } :is(#sub01_08, #sub0401_05) .txt .t3 { font-size:15px; } } @media (max-width:1000px) { #sub01_07 .title { flex-wrap:wrap; gap:12px; font-size:7vw; } #sub01_07 .inner { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } #sub01_07 .subtxt { padding-top:30px; } :is(#sub01_08, #sub0401_05) { grid-template-columns:minmax(0,1fr); gap:40px; margin-top:100px; } :is(#sub01_08, #sub0401_05) .row { grid-template-columns:minmax(0,1fr) minmax(0,1fr); } } @media (max-width:640px) { #sub01_07 { padding-top:70px; } #sub01_07 .title { margin-bottom:40px; font-size:10vw; } #sub01_07 .title .cross { font-size:38px; } #sub01_07 .inner { width:calc(100% - 40px); grid-template-columns:minmax(0,1fr); gap:36px; } #sub01_07 .subtxt { padding-top:0; } #sub01_07 .subtxt .t1, :is(#sub01_08, #sub0401_05) > .subtxt .t1 { font-size:27px; margin-bottom:24px; } #sub01_07 .subtxt .t2, :is(#sub01_08, #sub0401_05) > .subtxt .t2 { font-size:15px; line-height:1.8; } #sub01_07 .portrait { width:90%; max-width:420px; margin:0 auto; } :is(#sub01_08, #sub0401_05) { width:calc(100% - 40px); margin-top:76px; padding-bottom:70px; } :is(#sub01_08, #sub0401_05) .rows { gap:48px; } :is(#sub01_08, #sub0401_05) .row { grid-template-columns:minmax(0,1fr); gap:24px; scroll-margin-top:90px; } :is(#sub01_08, #sub0401_05) .txt .t1 { font-size:42px; } } @media (prefers-reduced-motion:reduce) { #sub01_07 .title span.ready, #sub01_07 .title span.ready.entered, #sub01_07 .subtxt.ready, #sub01_07 .subtxt.ready.entered, :is(#sub01_08, #sub0401_05) .subtxt.ready, :is(#sub01_08, #sub0401_05) .subtxt.ready.entered, :is(#sub01_08, #sub0401_05) .row.ready, :is(#sub01_08, #sub0401_05) .row.ready.entered { opacity:1; transform:none; animation:none; } #sub01_07 .portrait.ready .window, #sub01_07 .portrait.ready.entered .window { clip-path:none; animation:none; } #sub01_07 .portrait.ready img, #sub01_07 .portrait.ready.entered img { transform:none; animation:none; } :is(#sub01_08, #sub0401_05) .photo .over { transition:none; } } .subdoctors { position:relative; padding:160px 0 56px; overflow:hidden; isolation:isolate; background:#332a2b; scroll-snap-align:none; } .subdoctors .subtxt { position:relative; width:90%; max-width:1740px; margin:0 auto 85px; text-align:left; } .subdoctors .subtxt .t1 { margin:0 0 36px; color:#956c51; font-family:'Noto Serif KR', serif; font-size:45px; line-height:1.4; letter-spacing:0; font-weight:600; overflow-wrap:break-word; } .subdoctors .subtxt .t2 { margin:0; color:#956c51; font-size:17px; line-height:1.65; letter-spacing:0; font-weight:400; word-break:keep-all; } .subdoctors .doctors { position:relative; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:30px; width:90%; max-width:1740px; margin:0 auto; } .subdoctors .doctors::before { content:""; position:absolute; top:calc((100% - 58px) * .19); bottom:-56px; left:50%; z-index:-1; width:100vw; background:#986e52; transform:translateX(-50%); } .subdoctors .box { min-width:0; } .subdoctors .photo { position:relative; aspect-ratio:560 / 732; overflow:hidden; background:#bba995; } .subdoctors .photo > img { display:block; width:100%; height:100%; object-fit:cover; } .subdoctors .bio { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:safe flex-end; padding:50px 36px 50px 46px; overflow-y:auto; overscroll-behavior:auto; scrollbar-width:thin; scrollbar-color:#e0ab87 transparent; background:rgb(51 42 43 / 88%); color:#e0ab87; opacity:0; visibility:hidden; pointer-events:none; transition:opacity .65s ease, visibility .65s; } .subdoctors .bio > * { flex-shrink:0; } .subdoctors .bio .t1 { margin:0 0 22px; color:#e0ab87; font-size:22px; line-height:1; letter-spacing:-0.03em; font-weight:600; } .subdoctors .bio .t2 { margin:0; color:#e0ab87; font-size:17px; line-height:1.5; letter-spacing:-0.03em; font-weight:400; word-break:keep-all; overflow-wrap:break-word; } .subdoctors .career { margin-top:50px; } .subdoctors .bio .t3 { margin:0; color:#e0ab87; font-size:17px; line-height:1.5; letter-spacing:-0.03em; font-weight:400; } .subdoctors .bio .t4 { margin:0; padding:0; color:#e0ab87; font-size:17px; line-height:1.5; letter-spacing:-0.03em; font-weight:400; list-style:none; word-break:keep-all; overflow-wrap:break-word; } .subdoctors .bio .t4 li { position:relative; padding-left:10px; } .subdoctors .bio .t4 li::before { content:"·"; position:absolute; left:0; } .subdoctors .name { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:58px; padding-top:16px; } .subdoctors .toggle { margin:0; padding:4px 0; border:0; background:none; color:#fff; font-size:22px; line-height:1.4; letter-spacing:-0.03em; font-weight:600; text-align:left; cursor:pointer; } .subdoctors .hint { display:none; } .subdoctors .more { display:flex; align-items:center; justify-content:center; flex:0 0 30px; width:30px; height:30px; border-radius:50%; background:#fff; color:#986e52; font-size:22px; line-height:1; text-decoration:none; } .subdoctors .more[aria-disabled="true"] { cursor:default; } .subdoctors .more span { transform:translateY(-1px); } .subdoctors .toggle:focus-visible { outline:2px solid #fff; outline-offset:5px; } .subdoctors .more:focus-visible { outline:2px solid #fff; outline-offset:5px; } .subdoctors .box.open .bio { opacity:1; visibility:visible; pointer-events:auto; } .subdoctors .subtxt > .t1.ready:not(.entered) { opacity:0; } .subdoctors .subtxt > .t2.ready:not(.entered) { opacity:0; } .subdoctors .box.ready:not(.entered) { opacity:0; } .subdoctors .subtxt > .t1.entered { animation:subdoctors-up 1.4s cubic-bezier(.25,1,.5,1) .2s both; } .subdoctors .subtxt > .t2.entered { animation:subdoctors-up 1.4s cubic-bezier(.25,1,.5,1) .2s both; } .subdoctors .box.entered { animation:subdoctors-up 1.4s cubic-bezier(.25,1,.5,1) .2s both; } @media (hover:hover) and (pointer:fine) { .subdoctors .photo:hover .bio { opacity:1; visibility:visible; pointer-events:auto; } } @media (prefers-reduced-motion:reduce) { .subdoctors .bio { transition:none; } .subdoctors .subtxt > .t1.ready:not(.entered) { opacity:1; } .subdoctors .subtxt > .t2.ready:not(.entered) { opacity:1; } .subdoctors .box.ready:not(.entered) { opacity:1; } .subdoctors .subtxt > .t1.entered { animation:none; } .subdoctors .subtxt > .t2.entered { animation:none; } .subdoctors .box.entered { animation:none; } } @keyframes subdoctors-up { from { opacity:0; transform:translateY(32px); } to { opacity:1; transform:translateY(0); } } @media (max-width:1280px) { .subdoctors .bio { justify-content:flex-start; padding:32px 24px; } .subdoctors .bio .t2 br { display:none; } .subdoctors .bio .t1 { font-size:20px; line-height:1.3; } .subdoctors .bio .t2 { font-size:16px; } .subdoctors .bio .t3 { font-size:16px; } .subdoctors .bio .t4 { font-size:16px; } .subdoctors .career { margin-top:32px; } .subdoctors .toggle { font-size:19px; } } @media (max-width:640px) { .subdoctors { padding:64px 0 48px; } .subdoctors .subtxt .t1 { font-size:32px; line-height:1.4; } .subdoctors .doctors { grid-template-columns:minmax(0, 1fr); gap:36px; max-width:560px; } .subdoctors .doctors::before { top:280px; bottom:-48px; } .subdoctors .hint { display:block; margin-top:4px; font-size:12px; line-height:1.4; font-weight:400; } .subdoctors .bio { padding:32px 28px; } } @media (max-width:380px) { .subdoctors .subtxt { margin-bottom:36px; } .subdoctors .subtxt .t1 { font-size:26px; } .subdoctors .doctors::before { top:200px; } .subdoctors .bio { padding:28px 22px; } } /* 서브 공통 마무리 비주얼 */ .subending { position:relative; isolation:isolate; display:flex; align-items:center; justify-content:center; width:100%; min-height:540px; height:100vh; height:100svh; overflow:hidden; background-color:#332a2b; background-repeat:no-repeat; background-position:center; background-size:cover; } .subending .subtxt { width:94%; margin:0 auto; padding:0 0 0; transform:translateY(85px); color:#fff; text-align:center; } .subending .t1 { margin:0 0 20px; font-size:24px; font-weight:600; line-height:1.5; letter-spacing:0; word-break:keep-all; } .subending .t2 { margin:0 0 12px; font-family:'CormorantGaramond',serif; font-size:clamp(40px,4.17vw,80px); font-weight:400; line-height:1; letter-spacing:0; } .subending .t3 { margin:0; font-family:'Noto Serif KR',serif; font-size:22px; font-weight:400; line-height:1.4; letter-spacing:0; } .subending [data-sub-reveal].ready:not(.entered) { opacity:0; } .subending .t1.entered { animation:ending-focus 1s ease .2s both; } .subending .t2.entered { animation:ending-expand 1.3s cubic-bezier(.25,1,.5,1) .5s both; } .subending .t3.entered { animation:ending-up 1.2s cubic-bezier(.25,1,.5,1) .8s both; } .subending video { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; opacity:70%; } /* 페이지별 배경: 다른 서브에서는 ID와 이미지 경로만 변경 */ #sub01_10 { background-image:#000000; } #sub02_10 { background-image:url('/images/sub/02_10.jpg'); } #sub03_10 { background-image:url('/images/sub/03_10.jpg'); } @keyframes ending-focus { from { opacity:0; filter:blur(10px); } to { opacity:1; filter:blur(0); } } @keyframes ending-expand { from { opacity:0; filter:blur(10px); letter-spacing:-.06em; } to { opacity:1; filter:blur(0); letter-spacing:0; } } @keyframes ending-up { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } } @media (max-width:1000px) { .subending .t1 { font-size:20px; } .subending .t3 { font-size:19px; } } @media (max-width:640px) { .subending { min-height:480px; } .subending .subtxt { width:calc(100% - 40px); transform:translateY(45px); } .subending .t1 { margin-bottom:24px; font-size:17px; } .subending .t2 { margin-bottom:20px; font-size:clamp(38px,10vw,60px); line-height:1.05; text-wrap:balance; } .subending .t3 { font-size:16px; line-height:1.6; } } @media (prefers-reduced-motion:reduce) { .subending [data-sub-reveal].ready:not(.entered) { opacity:1; } .subending .t1.entered, .subending .t2.entered, .subending .t3.entered { animation:none; } } .subending { background-size:0 0; } .subending::before { content:""; position:absolute; inset:-3%; z-index:-1; background-image:inherit; background-repeat:no-repeat; background-position:center; background-size:cover; animation:ending-bg 10s ease-in-out infinite alternate; } @keyframes ending-bg { from { transform:scale(1.1) translateY(-1%); } to { transform:scale(1) translateY(0); } } @media (prefers-reduced-motion:reduce) { .subending::before { animation:none; } } /* 서브 공통 칼럼 */ .subcolumn { padding:130px 0 110px; background:#fff; } .subcolumn > .title { margin:0 0 76px; color:#956c51; font-family: 'Noto Serif KR'; font-size:70px; font-weight:600; line-height:1; letter-spacing:0; text-align:center; } .columncards { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:90px 54px; width:90%; max-width:1740px; margin:0 auto; } .columncards .box { min-width:0; } .columncards .box > a { display:block; color:inherit; text-decoration:none; } .columncards .box > a:focus-visible { outline:2px solid #956c51; outline-offset:8px; } .columncards .photo { display:flex; align-items:center; justify-content:center; aspect-ratio:394 / 248; overflow:hidden; background:#eee7e1; } .columncards .photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 1.2s cubic-bezier(.25,1,.5,1); } .columncards .placeholder { color:#956c51; font-family:'CormorantGaramond',serif; font-size:32px; font-weight:400; line-height:1; letter-spacing:.04em; } .columncards .txt { padding:34px 10px 0; } .columncards .t1 { display:-webkit-box; margin:0 0 6px; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; color:#555; font-size:21px; font-weight:600; line-height:1.4; letter-spacing:-.025em; word-break:keep-all; } .columncards .t2 { display:-webkit-box; margin:0; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2; color:#888; font-size:17px; font-weight:400; line-height:1.5; letter-spacing:-.025em; word-break:keep-all; } .columncards .meta { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:16px; } .columncards time { color:#999; font-size:14px; font-weight:400; line-height:1.5; letter-spacing:0; } .columncards .more { display:flex; align-items:center; justify-content:center; flex:0 0 28px; height:28px; border-radius:50%; background:#e7e5e3; color:#444; font-size:19px; font-weight:400; line-height:1; letter-spacing:0; } /* 칼럼 게시판 목록 */ .columnpage { padding:0 0 110px; background:#f8f4f0; } .columnpage .tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; width:fit-content; max-width:90%; margin:0 auto 76px; padding:18px; border-radius:8px; background:#fff; } .columnpage .tabs a { padding:5px 20px; color:#956c51; font-size:16px; font-weight:600; line-height:1.4; letter-spacing:0; text-decoration:none; } .columnpage .tabs a[aria-current] { border-radius:5px; background:#f8f4f0; } .columnpage .pages { display:flex; justify-content:center; gap:12px; margin-top:100px; } .columnpage .pages a { display:flex; align-items:center; justify-content:center; min-width:38px; height:38px; border-radius:50%; color:#444; font-size:16px; font-weight:600; line-height:1; letter-spacing:0; text-decoration:none; } .columnpage .pages a[aria-current] { background:#44403c; color:#fff; } .columnpage .empty { padding:80px 20px; color:#888; text-align:center; } @media (hover:hover) and (pointer:fine) { .columncards .box > a:hover .photo img { transform:scale(1.045); } } @media (max-width:1280px) { .columncards { column-gap:28px; } .columncards .t1 { font-size:18px; } .columncards .t2 { font-size:15px; } } @media (max-width:1000px) { .columncards { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:44px; } .columnpage .tabs a { padding:5px 12px; } } @media (max-width:640px) { .subcolumn { padding:76px 0; } .subcolumn > .title { margin-bottom:38px; font-size:56px; } .columncards { grid-template-columns:minmax(0,1fr); width:calc(100% - 40px); gap:40px; } .columncards .txt { padding:20px 2px 0; } .columncards .t1 { font-size:20px; } .columncards .t2 { font-size:16px; } .columnpage { padding:0 0 76px; } .columnpage .tabs { margin-bottom:40px; padding:12px; } .columnpage .tabs a { font-size:14px; } .columnpage .pages { margin-top:56px; } } @media (prefers-reduced-motion:reduce) { .columncards .photo img { transition:none; } } .subvideo { position:relative; padding:70px 0 90px; overflow:hidden; background:#fff; scroll-snap-align:none; } .subvideo .subtxt { width:calc(100% - 48px); max-width:1740px; margin:0 auto; text-align:center; } .subvideo .t1 { margin:0 0 24px; color:#956c51; font-family:'Noto Serif KR', serif; font-size:80px; line-height:1; letter-spacing:0; font-weight:600; overflow-wrap:break-word; } .subvideo .t2 { margin:0; color:#956c51; font-family:'Noto Serif KR', serif; font-size:25px; line-height:1.5; letter-spacing:0; font-weight:600; word-break:keep-all; overflow-wrap:break-word; } .subvideo .movie { position:relative; width:calc(100% - 48px); max-width:1220px; aspect-ratio:1220 / 644; margin:56px auto 0; overflow:hidden; } .subvideo .frame { position:absolute; inset:0; background:#e5dbd0; } .subvideo .movie video { display:block; width:100%; height:100%; object-fit:cover; } .subvideo .vplay { position:absolute; right:20px; bottom:20px; padding:9px 14px; border:1px solid rgb(255 255 255 / 65%); border-radius:30px; background:rgb(0 0 0 / 30%); color:#fff; font-size:12px; line-height:1.4; cursor:pointer; } .subvideo .vplay[hidden] { display:none; } .subvideo .vplay:focus-visible { outline:2px solid #fff; outline-offset:4px; } .subvideo .subtxt > .ready:not(.entered) { opacity:0; } .subvideo .movie.ready:not(.entered) .frame { clip-path:inset(0 50% 0 50%); } .subvideo .subtxt .t1.entered { animation:subvideo-expand 1.4s cubic-bezier(.25,.46,.45,.94) .2s both; } .subvideo .subtxt .t2.entered { animation:subvideo-up 1.4s cubic-bezier(.25,1,.5,1) .5s both; } .subvideo .movie.entered .frame { animation:subvideo-open 1.8s cubic-bezier(.25,1,.5,1) .2s both; } .subvideo .movie:focus-within .frame { animation:none; clip-path:inset(0); } @media (max-width:1280px) { .subvideo .t1 { font-size:64px; } .subvideo .t2 { font-size:23px; } } @media (max-width:640px) { .subvideo { padding:50px 0 64px; } .subvideo .t1 { margin-bottom:20px; font-size:44px; line-height:1.2; } .subvideo .t2 { font-size:20px; line-height:1.6; } .subvideo .movie { margin-top:36px; } .subvideo .vplay { right:12px; bottom:12px; padding:7px 10px; font-size:11px; } } @media (max-width:360px) { .subvideo .t1 { font-size:35px; } .subvideo .t2 { font-size:18px; } } @media (prefers-reduced-motion:reduce) { .subvideo .subtxt > .ready:not(.entered) { opacity:1; } .subvideo .movie.ready:not(.entered) .frame { clip-path:none; } .subvideo .subtxt .t1.entered { animation:none; } .subvideo .subtxt .t2.entered { animation:none; } .subvideo .movie.entered .frame { animation:none; } } @keyframes subvideo-expand { from { opacity:0; filter:blur(5px); letter-spacing:-0.08em; } to { opacity:1; filter:blur(0); letter-spacing:0; } } @keyframes subvideo-up { from { opacity:0; transform:translateY(32px); } to { opacity:1; transform:translateY(0); } } @keyframes subvideo-open { from { clip-path:inset(0 50% 0 50%); } to { clip-path:inset(0 0 0 0); } } .subclips { position:relative; padding:100px 0 140px; overflow:hidden; background:#fff; } .subclips .maintxt { width:calc(100% - 48px); margin:0 auto 56px; text-align:center; } .subclips .t1 { margin:0; color:#956c51; font-family:'Noto Serif KR', serif; font-size:70px; line-height:1; letter-spacing:0; font-weight:600; } .subclips .clips { width:calc(100% - 48px); max-width:1320px; margin:0 auto; } .subclips .swiper { overflow:hidden; touch-action:pan-y; } .subclips .swiper-wrapper { align-items:stretch; } .subclips .swiper-slide { height:auto; min-width:0; } .subclips .swiper:not(.swiper-initialized) { overflow-x:auto; scroll-snap-type:x mandatory; } .subclips .swiper:not(.swiper-initialized) .swiper-wrapper { display:flex; gap:32px; } .subclips .swiper:not(.swiper-initialized) .swiper-slide { flex:0 0 calc((100% - 96px) / 4); scroll-snap-align:start; } .subclips .box { position:relative; display:block; aspect-ratio:9 / 16; overflow:hidden; border-radius:22px; background:#332a2b; text-decoration:none; color:#fff; isolation:isolate; } .subclips .box > img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 1s cubic-bezier(.25,1,.5,1); } .subclips .box::after { position:absolute; inset:35% 0 0; z-index:1; background:linear-gradient(transparent,rgba(0,0,0,.15) 40%,rgba(0,0,0,.8)); content:""; pointer-events:none; } .subclips .caption { position:absolute; right:20px; bottom:20px; left:20px; z-index:2; display:flex; align-items:center; gap:14px; } .subclips .logo { display:flex; flex:0 0 54px; align-items:center; justify-content:center; width:54px; height:54px; border-radius:50%; background:#fff; color:#956c51; font-family:'Noto Serif KR', serif; font-size:10px; line-height:1; letter-spacing:0; font-weight:600; } .subclips .t2 { display:-webkit-box; overflow:hidden; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:15px; line-height:1.5; letter-spacing:-.03em; font-weight:600; word-break:keep-all; overflow-wrap:anywhere; } .subclips .play { position:absolute; top:50%; left:50%; z-index:2; width:54px; height:54px; border:1px solid rgba(255,255,255,.7); border-radius:50%; background:rgba(0,0,0,.2); opacity:0; transform:translate(-50%,-40%); transition:opacity .3s, transform .3s; } .subclips .play::before { position:absolute; top:18px; left:22px; border-top:8px solid transparent; border-bottom:8px solid transparent; border-left:12px solid #fff; content:""; } .subclips .box:focus-visible { outline:3px solid #956c51; outline-offset:-3px; } .subclips .box:focus-visible .play { opacity:1; transform:translate(-50%,-50%); } .subclips .controls { display:flex; align-items:center; justify-content:center; gap:24px; margin-top:32px; } .subclips .controls[hidden] { display:none; } .subclips .controls button { display:flex; align-items:center; justify-content:center; width:46px; height:46px; padding:0; border:1px solid #d7c8bc; border-radius:50%; background:#fff; color:#956c51; font-size:24px; line-height:1; cursor:pointer; transition:background .25s, color .25s; } .subclips .controls button:disabled { opacity:.3; cursor:default; } .subclips .controls .swiper-button-lock { display:none; } .subclips .count { min-width:54px; color:#956c51; font-size:14px; line-height:1.5; letter-spacing:.05em; font-weight:400; text-align:center; } .subclips .maintxt.ready:not(.entered) { opacity:0; transform:translateY(32px); } .subclips .swiper-slide.ready:not(.entered) .box { opacity:0; transform:translateY(40px); } .subclips .maintxt.entered { animation:subclips-up 1.4s cubic-bezier(.25,1,.5,1) .2s both; } .subclips .swiper-slide.entered .box { animation:subclips-up 1.4s cubic-bezier(.25,1,.5,1) var(--delay,.2s) both; } .subclips .swiper-slide:focus-within .box { opacity:1; transform:none; animation:none; } @keyframes subclips-up { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:translateY(0); } } @media (hover:hover) { .subclips .box:hover > img { transform:scale(1.045); } .subclips .box:hover .play { opacity:1; transform:translate(-50%,-50%); } .subclips .controls button:hover:not(:disabled) { background:#956c51; color:#fff; } } @media (max-width:1199px) { .subclips .t1 { font-size:58px; } .subclips .swiper:not(.swiper-initialized) .swiper-slide { flex-basis:calc((100% - 48px) / 3); } .subclips .swiper:not(.swiper-initialized) .swiper-wrapper { gap:24px; } } @media (max-width:899px) { .subclips { padding:80px 0 100px; } .subclips .swiper:not(.swiper-initialized) .swiper-slide { flex-basis:calc((100% - 20px) / 2); } .subclips .swiper:not(.swiper-initialized) .swiper-wrapper { gap:20px; } } @media (max-width:599px) { .subclips { padding:64px 0 80px; } .subclips .maintxt { margin-bottom:36px; } .subclips .t1 { font-size:40px; line-height:1.2; } .subclips .swiper:not(.swiper-initialized) .swiper-slide { flex-basis:86.96%; } .subclips .swiper:not(.swiper-initialized) .swiper-wrapper { gap:16px; } .subclips .caption { right:16px; bottom:18px; left:16px; gap:10px; } .subclips .logo { flex-basis:44px; width:44px; height:44px; font-size:9px; } .subclips .t2 { font-size:14px; } .subclips .box { border-radius:18px; } .subclips .controls { margin-top:24px; } } @media (prefers-reduced-motion:reduce) { .subclips .maintxt.ready, .subclips .swiper-slide.ready .box { opacity:1; transform:none; animation:none; } .subclips .box > img, .subclips .play, .subclips .controls button { transition:none; } } #sub02_01 { position:relative; isolation:isolate; width:100%; height:100vh; height:100svh; min-height:540px; overflow:hidden; background:#000000; } #sub02_01 .bg { position:absolute; inset:0; z-index:-2; display:block; width:100%; height:100%; object-fit:cover; object-position:50% 50%; opacity:1; background:url('/images/sub/02_01.jpg') no-repeat center / cover; animation:sub02-hero-bg 12s ease-out both; } #sub02_01::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.16) 100%); pointer-events:none; } #sub02_01 .subtxt { position:absolute; top:72%; left:50%; transform:translate(-50%,-50%); width:96%; text-align:center; color:#fff; } #sub02_01 .t1 { margin:0 0 20px; font-size:24px; font-weight:600; line-height:1; word-break:keep-all; animation:sub02-focus 1s cubic-bezier(.55,.085,.68,.53) .3s both; } #sub02_01 .t2 { margin:0 0 28px; text-transform:uppercase; font-family:'CormorantGaramond',serif; font-size:130px; font-weight:400; line-height:1; letter-spacing:0; white-space:nowrap; animation:sub02-expand .8s cubic-bezier(.25,.46,.45,.94) 1.2s both; } #sub02_01 .t3 { margin:0; font-family:'Noto Serif KR',serif; font-size:22px; font-weight:600; line-height:1; animation:sub02-up 1.2s cubic-bezier(.25,1,.5,1) 1.5s both; } #sub02_01 .bg.bg03 { background:url('/images/sub/03_01.jpg') no-repeat center / cover; } #sub02_01 .bg.bg0401 { background:url('/images/sub/0401_01.jpg') no-repeat center / cover; } #sub02_01 .bg.bg0402 { background:url('/images/sub/0402_01.jpg') no-repeat center / cover; } #sub02_01 .bg.bg0403 { background:url('/images/sub/0403_01.jpg') no-repeat center / cover; } @keyframes sub02-focus { from { opacity:0; filter:blur(8px); } to { opacity:1; filter:blur(0); } } @keyframes sub02-expand { from { opacity:0; filter:blur(12px); letter-spacing:-.2em; } to { opacity:1; filter:blur(0); letter-spacing:0; } } @keyframes sub02-up { from { opacity:0; filter:blur(4px); transform:translateY(36px); } to { opacity:1; filter:blur(0); transform:translateY(0); } } @media (max-width:1600px) { #sub02_01 .t2 { font-size:8.125vw; } } @media (max-width:1024px) { #sub02_01 .t1 { font-size:20px; line-height:1.4; } #sub02_01 .t3 { font-size:20px; } } @media (max-width:640px) { #sub02_01 { min-height:480px; } #sub02_01 .subtxt { top:70%; width:calc(100% - 36px); } #sub02_01 .t1 { max-width:310px; margin:0 auto 20px; font-size:16px; line-height:1.6; } #sub02_01 .t2 { margin-bottom:24px; font-size:clamp(38px,10.5vw,66px); line-height:.95; white-space:normal; } #sub02_01 .t3 { font-size:17px; line-height:1.4; } } @media (max-height:500px) and (min-width:641px) { #sub02_01 { min-height:360px; } #sub02_01 .subtxt { top:65%; } #sub02_01 .t1 { margin-bottom:12px; font-size:17px; } #sub02_01 .t2 { margin-bottom:16px; font-size:8vw; } #sub02_01 .t3 { font-size:17px; } } @media (prefers-reduced-motion:reduce) { #sub02_01 .t1, #sub02_01 .t2, #sub02_01 .t3 { animation:none; } } #sub02_02 { position:relative; isolation:isolate; display:flex; align-items:flex-end; box-sizing:border-box; width:100%; min-height:100vh; min-height:100svh; padding:180px 5% 17vh; padding-bottom:17svh; overflow:hidden; background:#969291; } #sub02_02 .bg { position:absolute; inset:0; z-index:-2; background:url('/images/sub/02_02.jpg') no-repeat 50% 50% / cover; } #sub02_02 .bg.ready { transform:scale(1.1); } #sub02_02 .bg.ready.entered { animation:sub02_02-bg 7s cubic-bezier(.25,1,.5,1) both; } #sub02_02 .subtxt { width:100%; color:#fff; } #sub02_02 .t1 { margin:0 0 24px; font-family:'Noto Serif KR',serif; font-size:45px; font-weight:600; line-height:1.4; word-break:keep-all; } #sub02_02 .t2 { margin:0; font-size:17px; font-weight:400; line-height:1.6; word-break:keep-all; } #sub02_02 .subtxt .t1.ready, #sub02_02 .subtxt .t2.ready { opacity:0; transform:translateY(36px); } #sub02_02 .subtxt .t1.ready.entered { animation:sub02_02-up 1.4s cubic-bezier(.25,1,.5,1) .2s both; } #sub02_02 .subtxt .t2.ready.entered { animation:sub02_02-up 1.4s cubic-bezier(.25,1,.5,1) .5s both; } #sub02_02 .bg.bg03 { background:url('/images/sub/03_02.jpg') no-repeat center / cover; } #sub02_02 .bg.bg0401 { background:url('/images/sub/0401_02.jpg') no-repeat center / cover; } #sub02_02 .bg.bg0402 { background:url('/images/sub/0402_02.jpg') no-repeat center / cover; } #sub02_02 .bg.bg0403 { background:url('/images/sub/0403_02.jpg') no-repeat center / cover; } @keyframes sub02_02-bg { from { transform:scale(1.1); } to { transform:scale(1); } } @keyframes sub02_02-up { from { opacity:0; filter:blur(4px); transform:translateY(36px); } to { opacity:1; filter:blur(0); transform:translateY(0); } } @media (max-width:1024px) { #sub02_02 { padding-right:6%; padding-left:6%; } #sub02_02 .t1 { font-size:36px; line-height:1.35; } } @media (max-width:640px) { #sub02_02 { padding:150px 24px 70px; } #sub02_02::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent 35%,rgba(0,0,0,.4)); pointer-events:none; } #sub02_02 .bg { background-position:52% 50%; } #sub02_02 .t1 { max-width:340px; margin-bottom:20px; font-size:30px; line-height:1.4; } #sub02_02 .t2 { max-width:390px; font-size:15px; line-height:1.8; } #sub02_02 .t2 br { display:none; } } @media (prefers-reduced-motion:reduce) { #sub02_02 .bg.ready, #sub02_02 .bg.ready.entered { transform:none; animation:none; } #sub02_02 .subtxt .t1.ready, #sub02_02 .subtxt .t2.ready { opacity:1; transform:none; filter:none; animation:none; } } #sub02_03 { position:relative; isolation:isolate; overflow:hidden; padding:180px 0 120px; background:#f8f4f0; color:#956c51; } #sub02_03 > .bg { position:absolute; inset:-5%; z-index:-1; background:url('/images/sub/02_03_bg.jpg') no-repeat center / cover; transform-origin:50% 50%; animation:sub02_03-wave 18s ease-in-out infinite alternate; pointer-events:none; } #sub02_03 .subtxt { width:90%; max-width:1740px; margin:0 auto; scroll-margin-top:120px; } #sub02_03 .subtxt .t1 { margin:0 0 12px; font-family:'Noto Serif KR',serif; font-size:70px; font-weight:600; line-height:1; } #sub02_03 .subtxt .t2 { margin:0 0 20px; font-family:'Noto Serif KR',serif; font-size:40px; font-weight:600; line-height:1; } #sub02_03 .subtxt .t3 { margin:0 0 40px; font-family:'Noto Serif KR',serif; font-size:40px; font-weight:600; line-height:1.3; word-break:keep-all; } #sub02_03 .subtxt .t4 { margin:0; font-size:17px; font-weight:400; line-height:1.6; word-break:keep-all; } #sub02_03 .boxes { display:grid; grid-template-columns:repeat(3,minmax(0,450px)); justify-content:space-between; gap:48px; width:90%; max-width:1740px; margin:48px auto 0; } #sub02_03 .box { min-width:0; margin:0; color:#a58161; } #sub02_03 .photo { position:relative; aspect-ratio:460 / 550; overflow:hidden; margin-bottom:54px; } #sub02_03 .photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 2.4s cubic-bezier(.25,1,.5,1); } #sub02_03 .txt { width:100%; } #sub02_03 .box .t1 { margin:0 0 10px; font-size:15px; font-weight:600; line-height:1; } #sub02_03 .box .t2 { margin:0 0 18px; font-family:'Noto Serif KR',serif; font-size:33px; font-weight:600; line-height:1.15; letter-spacing:1px; overflow-wrap:anywhere; } #sub02_03 .box .t3 { margin:0 0 24px; font-size:20px; font-weight:500; line-height:1.4; word-break:keep-all; } #sub02_03 .box .t4 { margin:0; font-size:17px; font-weight:400; line-height:1.6; word-break:keep-all; } #sub02_03 .subtxt .tit.ready, #sub02_03 .subtxt > .t4.ready { opacity:0; transform:translateY(36px); } #sub02_03 .subtxt .tit.ready.entered { animation:sub02_03-up 1.4s cubic-bezier(.25,1,.5,1) .2s both; } #sub02_03 .subtxt > .t4.ready.entered { animation:sub02_03-up 1.4s cubic-bezier(.25,1,.5,1) .5s both; } /* 카드 세 개 함께 등장 */ #sub02_03 .boxes.ready { opacity:0; } #sub02_03 .boxes.ready.entered { animation:sub02_03-cards 1.4s cubic-bezier(.25,1,.5,1) .8s both; } @keyframes sub02_03-cards { from { opacity:0; transform:translateY(36px); } to { opacity:1; transform:none; } } @keyframes sub02_03-wave { 0% { transform:translate3d(-1%,-1%,0) scale(1.02) rotate(-.5deg); } 50% { transform:translate3d(1%,.8%,0) scale(1.05) rotate(.4deg); } 100% { transform:translate3d(-.5%,1%,0) scale(1.02) rotate(-.3deg); } } @keyframes sub02_03-up { from { opacity:0; transform:translateY(56px); } to { opacity:1; transform:translateY(0); } } @media (hover:hover) and (pointer:fine) { #sub02_03 .box:hover .photo img { transform:scale(1.06); } } @media (max-width:1600px) { #sub02_03 .boxes { width:94%; } #sub02_03 .box { min-width:0; margin:0; color:#956c51; } #sub02_03 .box .t2 { font-size:28px; } #sub02_03 .box .t4 br { display:none; } } @media (max-width:1100px) { #sub02_03 { padding:120px 0 80px; } #sub02_03 .boxes { grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; margin-top:56px; } #sub02_03 .box { min-width:0; margin:0; color:#956c51; } #sub02_03 .subtxt .t1 { font-size:58px; } #sub02_03 .subtxt .t2, #sub02_03 .subtxt .t3 { font-size:32px; line-height:1.35; } #sub02_03 .subtxt .t4 br { display:none; } } @media (max-width:640px) { #sub02_03 { padding:80px 0 56px; } #sub02_03 .subtxt { width:calc(100% - 40px); scroll-margin-top:90px; } #sub02_03 .subtxt .t1 { font-size:48px; } #sub02_03 .subtxt .t2 { font-size:25px; } #sub02_03 .subtxt .t3 { margin-bottom:28px; font-size:27px; line-height:1.5; } #sub02_03 .subtxt .t4 { font-size:15px; line-height:1.8; } #sub02_03 .boxes { grid-template-columns:minmax(0,1fr); width:calc(100% - 40px); margin-top:56px; gap:18px; } #sub02_03 .box { min-width:0; margin:0; color:#956c51; } #sub02_03 .box .t2 { font-size:28px; } #sub02_03 .box .t3 { font-size:18px; } #sub02_03 .box .t4 { font-size:15px; line-height:1.7; } } @media (prefers-reduced-motion:reduce) { #sub02_03 > .bg { animation:none; transform:none; } #sub02_03 .subtxt .tit.ready, #sub02_03 .subtxt > .t4.ready, #sub02_03 .boxes.ready, #sub02_03 .boxes.ready.entered { animation:none; opacity:1; transform:none; } #sub02_03 .photo img { transition:none; } } :is(#sub02_04, #sub0401_04) { position:relative; isolation:isolate; padding:110px 0 0; overflow:hidden; background:#f8f4f0; color:#956c51; } :is(#sub02_04, #sub0401_04)::before { content:""; position:absolute; right:0; bottom:0; left:0; z-index:-1; height:36%; background:#061f2d; } :is(#sub02_04, #sub0401_04) .subtxt { width:90%; max-width:1740px; margin:0 auto 48px; } :is(#sub02_04, #sub0401_04) .t1 { margin:0 0 20px; font-family:'Noto Serif KR',serif; font-size:45px; font-weight:600; line-height:1.4; word-break:keep-all; } :is(#sub02_04, #sub0401_04) .t2 { margin:0; font-size:17px; font-weight:400; line-height:1.6; word-break:keep-all; } :is(#sub02_04, #sub0401_04) .image { position:relative; width:calc(100% - 100px); max-width:1820px; aspect-ratio:1784 / 864; margin:0 auto; overflow:hidden; } :is(#sub02_04, #sub0401_04) .frame { position:absolute; inset:0; overflow:hidden; } :is(#sub02_04, #sub0401_04) .photo { position:absolute; inset:0; background:url('/images/sub/02_04.jpg') no-repeat center / cover; } :is(#sub02_04, #sub0401_04) .photo.photo2 { position:absolute; inset:0; background:url('/images/sub/03_04.jpg') no-repeat center / cover; } :is(#sub02_04, #sub0401_04) .photo.photo3 { position:absolute; inset:0; background:url('/images/sub/0401_04.jpg') no-repeat center / cover; } :is(#sub02_04, #sub0401_04) .photo.photo4 { position:absolute; inset:0; background:url('/images/sub/0402_04.jpg') no-repeat center / cover; } :is(#sub02_04, #sub0401_04) .photo.photo5 { position:absolute; inset:0; background:url('/images/sub/0403_04.jpg') no-repeat center / cover; } :is(#sub02_04, #sub0401_04) .subtxt .t1.ready, :is(#sub02_04, #sub0401_04) .subtxt .t2.ready { opacity:0; transform:translateY(36px); } :is(#sub02_04, #sub0401_04) .subtxt .t1.ready.entered { animation:sub02_04-up 1.4s cubic-bezier(.25,1,.5,1) .3s both; } :is(#sub02_04, #sub0401_04) .subtxt .t2.ready.entered { animation:sub02_04-up 1.4s cubic-bezier(.25,1,.5,1) .6s both; } :is(#sub02_04, #sub0401_04) .image.ready .frame { clip-path:inset(0 50%); } :is(#sub02_04, #sub0401_04) .image.ready .photo { transform:scale(1.12); } :is(#sub02_04, #sub0401_04) .image.ready.entered .frame { animation:sub02_04-open 1.6s cubic-bezier(.25,1,.5,1) .8s both; } :is(#sub02_04, #sub0401_04) .image.ready.entered .photo { animation:sub02_04-zoom 6s cubic-bezier(.25,1,.5,1) 1.4s both; } @keyframes sub02_04-up { from { opacity:0; filter:blur(4px); transform:translateY(36px); } to { opacity:1; filter:blur(0); transform:translateY(0); } } @keyframes sub02_04-open { from { clip-path:inset(0 50%); } to { clip-path:inset(0 0); } } @keyframes sub02_04-zoom { from { transform:scale(1.05); } to { transform:scale(1); } } @media (max-width:1100px) { :is(#sub02_04, #sub0401_04) { padding-top:90px; } :is(#sub02_04, #sub0401_04)::before { height:22vw; } :is(#sub02_04, #sub0401_04) .subtxt { width:86%; max-width:1740px; margin-bottom:48px; } :is(#sub02_04, #sub0401_04) .t1 { font-size:38px; } :is(#sub02_04, #sub0401_04) .image { width:94%; aspect-ratio:16 / 8; } } @media (max-width:640px) { :is(#sub02_04, #sub0401_04) { padding-top:64px; } :is(#sub02_04, #sub0401_04)::before { height:140px; } :is(#sub02_04, #sub0401_04) .subtxt { width:calc(100% - 40px); margin-bottom:44px; } :is(#sub02_04, #sub0401_04) .t1 { margin-bottom:24px; font-size:29px; line-height:1.5; } :is(#sub02_04, #sub0401_04) .t2 { font-size:15px; line-height:1.8; } :is(#sub02_04, #sub0401_04) .image { width:calc(100% - 40px); aspect-ratio:1784 / 864; } } @media (prefers-reduced-motion:reduce) { :is(#sub02_04, #sub0401_04) .subtxt .t1.ready, :is(#sub02_04, #sub0401_04) .subtxt .t2.ready { opacity:1; transform:none; filter:none; animation:none; } :is(#sub02_04, #sub0401_04) .image.ready .frame, :is(#sub02_04, #sub0401_04) .image.ready.entered .frame { clip-path:none; animation:none; } :is(#sub02_04, #sub0401_04) .image.ready .photo, :is(#sub02_04, #sub0401_04) .image.ready.entered .photo { transform:none; animation:none; } } #sub02_05 { padding:160px 0 100px; overflow:hidden; background:#061f2d url('/images/sub/02_05.jpg') no-repeat center / cover; color:#f8f4f0; } #sub02_05 .subtxt { width:90%; max-width:1740px; margin:0 auto; } #sub02_05 .subtxt .t1 { margin:0 0 26px; font-family:'CormorantGaramond',serif; font-size:clamp(48px,6.77vw,130px); font-weight:400; line-height:1; letter-spacing:0; text-align:center; white-space:normal; } #sub02_05 .subtxt .t2 { margin:0 auto; max-width:830px; font-family:'Noto Serif KR',serif; font-size:26px; font-weight:600; line-height:1.6; word-break:keep-all; } #sub02_05 .steps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); width:calc(100% - 144px); max-width:1776px; margin:122px auto 0; padding:0; list-style:none; } #sub02_05 .box { position:relative; box-sizing:border-box; min-width:0; min-height:365px; margin:0; padding:54px 36px 48px; } #sub02_05 .box:first-child { padding-left:8px; } #sub02_05 .box::before { content:""; position:absolute; top:0; right:10px; left:8px; height:1px; background:rgba(248,244,240,.28); transform-origin:left; } #sub02_05 .box + .box::after { content:""; position:absolute; top:8px; bottom:0; left:0; width:1px; background:rgba(248,244,240,.28); } #sub02_05 .box .t1 { margin:0 0 8px; font-size:15px; font-weight:400; line-height:1; } #sub02_05 .box .t2 { margin:0 0 44px; font-family:'CormorantGaramond',serif; font-size:40px; font-weight:400; line-height:1; white-space:nowrap; } #sub02_05 .box .t3, #sub02_05 .box .t4 { margin:0; font-size:17px; font-weight:400; line-height:1.6; word-break:keep-all; } #sub02_05 .subtxt .t1.ready, #sub02_05 .subtxt .t2.ready, #sub02_05 .box.ready { opacity:0; } #sub02_05 .subtxt .t1.ready.entered { animation:sub02_05-title 1.6s cubic-bezier(.25,1,.5,1) .3s both; } #sub02_05 .subtxt .t2.ready.entered { animation:sub02_05-up 1.4s cubic-bezier(.25,1,.5,1) .7s both; } #sub02_05 .box:nth-child(1) { --delay:.9s; } #sub02_05 .box:nth-child(2) { --delay:.9s; } #sub02_05 .box:nth-child(3) { --delay:.9s; } #sub02_05 .box:nth-child(4) { --delay:.9s; } #sub02_05 .box:nth-child(5) { --delay:.9s; } #sub02_05 .box.ready.entered { animation:sub02_05-up 1.4s cubic-bezier(.25,1,.5,1) var(--delay) both; } #sub02_05 .box.ready.entered::before { animation:sub02_05-line 1.6s cubic-bezier(.25,1,.5,1) var(--delay) both; } @keyframes sub02_05-title { from { opacity:0; filter:blur(8px); letter-spacing:-.08em; transform:translateY(16px); } to { opacity:1; filter:blur(0); letter-spacing:0; transform:translateY(0); } } @keyframes sub02_05-up { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } } @keyframes sub02_05-line { from { transform:scaleX(0); } to { transform:scaleX(1); } } @media (max-width:1600px) { #sub02_05 .steps { width:94%; } #sub02_05 .box { padding-right:20px; padding-left:20px; } #sub02_05 .box .t2 { font-size:32px; } #sub02_05 .box .t4 br { display:none; } } @media (max-width:1100px) { #sub02_05 { padding:110px 0 70px; } #sub02_05 .subtxt { width:86%; max-width:720px; } #sub02_05 .subtxt .t1 { font-size:clamp(48px,6.77vw,74px); } #sub02_05 .subtxt .t2 { font-size:23px; } #sub02_05 .steps { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:80px; } #sub02_05 .box, #sub02_05 .box:first-child { min-height:300px; padding:40px 28px; } #sub02_05 .box:nth-child(odd)::after { display:none; } #sub02_05 .box .t2 { margin-bottom:30px; font-size:36px; } #sub02_05 .box:nth-child(n) { --delay:.2s; } #sub02_05 .box:nth-child(even) { --delay:.4s; } } @media (max-width:640px) { #sub02_05 { padding:76px 0 44px; } #sub02_05 .subtxt { width:calc(100% - 40px); } #sub02_05 .subtxt .t1 { margin-bottom:22px; font-size:clamp(38px,8vw,51px); } #sub02_05 .subtxt .t2 { font-size:19px; line-height:1.7; } #sub02_05 .steps { grid-template-columns:minmax(0,1fr); width:calc(100% - 40px); margin-top:56px; } #sub02_05 .box, #sub02_05 .box:first-child { min-height:0; padding:32px 0 38px; } #sub02_05 .box::before { right:0; left:0; } #sub02_05 .box + .box::after { display:none; } #sub02_05 .box .t2 { margin-bottom:24px; font-size:36px; } #sub02_05 .box .t3, #sub02_05 .box .t4 { font-size:15px; line-height:1.8; } #sub02_05 .box:nth-child(n) { --delay:.2s; } } @media (prefers-reduced-motion:reduce) { #sub02_05 .subtxt .t1.ready.entered, #sub02_05 .subtxt .t2.ready.entered, #sub02_05 .subtxt .t1.ready, #sub02_05 .subtxt .t2.ready, #sub02_05 .box.ready.entered, #sub02_05 .box.ready { opacity:1; filter:none; transform:none; animation:none; } #sub02_05 .box.ready.entered::before { transform:none; animation:none; } } @keyframes sub02-hero-bg { from { transform:scale(1); } to { transform:scale(1.065); } } @media (prefers-reduced-motion:reduce) { #sub02_01 .bg { animation:none; transform:none; } } /* 바디라인 06 · 부위별 이미지 */ #sub02_06 { --photo-top:110px; padding:140px 0 150px; overflow:clip; background:#fffbf3; color:#956c51; } #sub02_06 { padding:140px 0 150px; overflow:clip; background:#fffbf3; color:#956c51; } #sub02_06 .title { width:98%; margin:0 auto 90px; font-family:'CormorantGaramond',serif; font-size:clamp(42px,6.4vw,128px); font-weight:500; line-height:1; letter-spacing:0; text-align:center; } #sub02_06 .subtxt { width:90%; max-width:1740px; margin:0 auto 64px; } #sub02_06 .subtxt .t1 { margin:0 0 24px; font-family:'Noto Serif KR',serif; font-size:45px; font-weight:600; line-height:1.4; letter-spacing:0; word-break:keep-all; } #sub02_06 .subtxt .t2 { margin:0; font-size:17px; font-weight:400; line-height:1.6; letter-spacing:0; word-break:keep-all; } #sub02_06 .inner { display:grid; grid-template-columns:minmax(0,884fr) minmax(0,750fr); align-items:start; gap:96px; width:90%; max-width:1740px; margin:0 auto; } #sub02_06 .menu { min-width:0; } #sub02_06 .item { position:relative; display:block; box-sizing:border-box; width:100%; min-height:80px; padding:23px 34px; border:0; border-bottom:1px solid #e9ded1; border-radius:0; background:transparent; color:inherit; font-family:inherit; text-align:left; cursor:pointer; } #sub02_06 .item::before { content:""; position:absolute; top:30px; bottom:30px; left:0; width:1px; background:#c29571; transform:scaleY(0); transform-origin:top; transition:transform .45s cubic-bezier(.25,1,.5,1); } #sub02_06 .item[aria-pressed="true"]::before { transform:scaleY(1); } #sub02_06 .item:focus-visible { outline:2px solid #956c51; outline-offset:-2px; } #sub02_06 .item .t1 { display:block; margin:0 0 8px; font-size:20px; font-weight:600; line-height:1; letter-spacing:0; } #sub02_06 .item .t2 { display:block; font-size:17px; font-weight:400; line-height:1.5; letter-spacing:0; word-break:keep-all; } #sub02_06 .image { position:relative; top:auto; justify-self:stretch; align-self:start; width:100%; max-width:none; min-width:0; height:auto; min-height:0; max-height:none; margin:0; overflow:hidden; aspect-ratio:750 / 840; background:#e3ddd7; } #sub02_06 .image img { display:block; width:100%; height:100%; object-fit:contain; } #sub02_06 .image { position:relative; overflow:hidden; aspect-ratio:750 / 840; background:#e3ddd7; } #sub02_06 .image img { display:block; width:100%; height:100%; object-fit:cover; } #sub02_06 .image .base { position:absolute; inset:0; } #sub02_06 .image .next { position:absolute; inset:0; z-index:1; } #sub02_06 .image .next[hidden] { display:none; } #sub02_06 .title.ready, #sub02_06 .subtxt .ready, #sub02_06 .menu.ready, #sub02_06 .image.ready { opacity:0; } #sub02_06 .title.ready.entered { animation:body06-up 1.5s cubic-bezier(.25,1,.5,1) .3s both; } #sub02_06 .subtxt .t1.ready.entered { animation:body06-up 1.4s cubic-bezier(.25,1,.5,1) .6s both; } #sub02_06 .subtxt .t2.ready.entered { animation:body06-up 1.4s cubic-bezier(.25,1,.5,1) .9s both; } #sub02_06 .menu.ready.entered { animation:body06-up 1.4s cubic-bezier(.25,1,.5,1) .6s both; } #sub02_06 .image.ready.entered { animation:body06-up 1.6s cubic-bezier(.25,1,.5,1) .9s both; } #sub02_06 .menu:focus-within { opacity:1; animation:none; } @keyframes body06-up { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:translateY(0); } } @media (max-width:1280px) { #sub02_06 { padding:100px 0; } #sub02_06 .title { margin-bottom:64px; } #sub02_06 .subtxt .t1 { font-size:36px; } #sub02_06 .inner { gap:48px; } #sub02_06 .item { min-height:110px; padding:24px; } #sub02_06 .item .t1 { font-size:18px; } #sub02_06 .image { position:sticky; top:110px; } } @media (max-width:760px) { #sub02_06 { --photo-top:80px; padding:72px 0; } #sub02_06 { padding:72px 0; } #sub02_06 .title { width:calc(100% - 40px); margin-bottom:44px; font-size:clamp(36px,8vw,58px); line-height:1.1; } #sub02_06 .subtxt { width:calc(100% - 40px); margin-bottom:36px; } #sub02_06 .subtxt .t1 { font-size:28px; } #sub02_06 .subtxt .t2 { font-size:15px; line-height:1.8; } #sub02_06 .subtxt .t2 br { display:none; } #sub02_06 .inner { display:flex; flex-direction:column; gap:24px; width:calc(100% - 40px); } #sub02_06 .image { order:-1; top:var(--photo-top); z-index:2; width:100%; max-width:none; height:38svh; aspect-ratio:auto; } #sub02_06 .image { order:-1; top:80px; z-index:2; width:100%; height:38svh; aspect-ratio:auto; } #sub02_06 .image img { object-fit:contain; } #sub02_06 .menu { width:100%; } #sub02_06 .item { min-height:0; padding:22px 18px; } #sub02_06 .item .t2 { font-size:15px; } #sub02_06 .item::before { top:24px; bottom:24px; } } @media (prefers-reduced-motion:reduce) { #sub02_06 .title.ready, #sub02_06 .subtxt .ready, #sub02_06 .menu.ready, #sub02_06 .image.ready { animation:none; opacity:1; transform:none; } #sub02_06 .item::before { transition:none; } } .bodydesign { position:relative; display:grid; grid-template-columns:minmax(0,1fr); isolation:isolate; background:#fff; color:#956c51; } .bodydesign > .cellbg { grid-area:1 / 1; position:sticky; top:0; align-self:start; height:100svh; background:url('/images/sub/02_07_bg.jpg') no-repeat center / cover; pointer-events:none; } .bodydesign > .content { grid-area:1 / 1; position:relative; min-width:0; } #sub02_07 { padding:140px 0 0; overflow:clip; } #sub02_07 .title { display:flex; align-items:center; justify-content:center; gap:22px; width:98%; margin:0 auto 100px; font-family:'CormorantGaramond',serif; font-size:clamp(40px,6.4583vw,124px); font-weight:400; line-height:1; letter-spacing:-.025em; } #sub02_07 .title span { display:block; white-space:nowrap; } #sub02_07 .inner { display:grid; grid-template-columns:minmax(0,610fr) minmax(0,580fr) minmax(0,450fr); gap:40px; width:90%; max-width:1740px; margin:0 auto; } #sub02_07 .subtxt { padding-top:90px; } #sub02_07 .subtxt .t1 { margin:0 0 36px; font-family:'Noto Serif KR',serif; font-size:45px; font-weight:600; line-height:1.4; letter-spacing:0; word-break:keep-all; } #sub02_07 .subtxt .t2 { margin:0 0 28px; font-size:17px; font-weight:400; line-height:1.65; letter-spacing:0; word-break:keep-all; } #sub02_07 .portrait { position:relative; aspect-ratio:580 / 1050; mask-image:linear-gradient(#000 85%,transparent 100%); } #sub02_07 .window { position:absolute; inset:0; overflow:hidden; } #sub02_07 .portrait img { display:block; width:100%; height:100%; object-fit:cover; transform-origin:50% 30%; } #sub02_07 .title .ready, #sub02_07 .subtxt.ready { opacity:0; } #sub02_07 .left.ready.entered { animation:bodydesign-left 1.5s cubic-bezier(.25,1,.5,1) .3s both; } #sub02_07 .cross.ready.entered { animation:bodydesign-up 1.5s cubic-bezier(.25,1,.5,1) .3s both; } #sub02_07 .right.ready.entered { animation:bodydesign-right 1.5s cubic-bezier(.25,1,.5,1) .3s both; } #sub02_07 .subtxt.ready.entered { animation:bodydesign-left 1.4s cubic-bezier(.25,1,.5,1) .6s both; } #sub02_07 .portrait.ready .window { clip-path:inset(26% 0 74%); } #sub02_07 .portrait.ready.entered .window { animation:bodydesign-open 1.8s cubic-bezier(.25,1,.5,1) .9s both; } #sub02_07 .portrait.ready.entered img { animation:bodydesign-zoom 4s cubic-bezier(.25,1,.5,1) .9s both; } :is(#sub02_08, #sub0401_06) { padding:130px 0 130px; overflow:hidden; } :is(#sub02_08, #sub0401_06) .subtxt { width:90%; max-width:1740px; margin:0 auto 60px; } :is(#sub02_08, #sub0401_06) .subtxt .t1 { margin:0 0 26px; font-family:'Noto Serif KR',serif; font-size:45px; font-weight:600; line-height:1.4; letter-spacing:0; word-break:keep-all; } :is(#sub02_08, #sub0401_06) .subtxt .t2 { margin:0; font-size:17px; font-weight:400; line-height:1.65; letter-spacing:0; word-break:keep-all; } :is(#sub02_08, #sub0401_06) .equipment { width:95%; margin:0 0 0 5%; overflow:hidden; touch-action:pan-y; } :is(#sub02_08, #sub0401_06) .swiper-slide { height:auto; min-width:0; } :is(#sub02_08, #sub0401_06) .equipment:not(.swiper-initialized) { overflow-x:auto; scroll-snap-type:x mandatory; } :is(#sub02_08, #sub0401_06) .equipment:not(.swiper-initialized) .swiper-wrapper { display:flex; gap:28px; } :is(#sub02_08, #sub0401_06) .equipment:not(.swiper-initialized) .swiper-slide { flex:0 0 33%; scroll-snap-align:start; } :is(#sub02_08, #sub0401_06) .photo { aspect-ratio:560 / 600; overflow:hidden; background:#eee8df; } :is(#sub02_08, #sub0401_06) .photo img { display:block; width:100%; height:100%; object-fit:cover; } :is(#sub02_08, #sub0401_06) .card .t1 { margin:24px 0 16px; font-family:'CormorantGaramond',serif; font-size:45px; font-weight:400; line-height:1; letter-spacing:0; } :is(#sub02_08, #sub0401_06) .card .t2 { margin:0; font-size:17px; font-weight:400; line-height:1.65; letter-spacing:0; word-break:keep-all; } :is(#sub02_08, #sub0401_06) .subtxt .ready, :is(#sub02_08, #sub0401_06) .card.ready { opacity:0; } :is(#sub02_08, #sub0401_06) .subtxt .t1.ready.entered { animation:bodydesign-up 1.4s cubic-bezier(.25,1,.5,1) .3s both; } :is(#sub02_08, #sub0401_06) .subtxt .t2.ready.entered { animation:bodydesign-up 1.4s cubic-bezier(.25,1,.5,1) .6s both; } :is(#sub02_08, #sub0401_06) .swiper-slide:nth-child(1) { --delay:.9s; } :is(#sub02_08, #sub0401_06) .swiper-slide:nth-child(2) { --delay:1.2s; } :is(#sub02_08, #sub0401_06) .swiper-slide:nth-child(3) { --delay:1.5s; } :is(#sub02_08, #sub0401_06) .card.ready.entered { animation:bodydesign-up 1.4s cubic-bezier(.25,1,.5,1) var(--delay,.3s) both; } :is(#sub02_08, #sub0401_06) .controls { display:flex; justify-content:flex-end; gap:12px; width:90%; margin:28px auto 0; } :is(#sub02_08, #sub0401_06) .controls[hidden] { display:none; } :is(#sub02_08, #sub0401_06) .controls button { width:44px; height:44px; border:1px solid #d7c8bc; border-radius:50%; background:#fff; color:#956c51; font-size:22px; cursor:pointer; } :is(#sub02_08, #sub0401_06) .controls button:disabled { opacity:.3; cursor:default; } :is(#sub02_08, #sub0401_06) :focus-visible { outline:2px solid #956c51; outline-offset:-2px; } @keyframes bodydesign-left { from { opacity:0; transform:translateX(-40px); } to { opacity:1; transform:none; } } @keyframes bodydesign-right { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:none; } } @keyframes bodydesign-up { from { opacity:0; transform:translateY(30px); } to { opacity:1; transform:none; } } @keyframes bodydesign-open { from { clip-path:inset(26% 0 74%); } to { clip-path:inset(0); } } @keyframes bodydesign-zoom { from { transform:scale(1.1); } to { transform:scale(1); } } @media (max-width:1100px) { #sub02_07 { padding-top:100px; } #sub02_07 .inner { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:30px; } #sub02_07 .subtxt { padding-top:40px; } #sub02_07 .subtxt .t1, :is(#sub02_08, #sub0401_06) .subtxt .t1 { font-size:34px; } :is(#sub02_08, #sub0401_06) .equipment:not(.swiper-initialized) .swiper-slide { flex-basis:47%; } :is(#sub02_08, #sub0401_06) .card .t1 { font-size:36px; } } @media (max-width:640px) { #sub02_07 { padding-top:72px; } #sub02_07 .title { flex-wrap:wrap; column-gap:12px; row-gap:8px; width:calc(100% - 40px); margin-bottom:40px; font-size:clamp(32px,8vw,48px); } #sub02_07 .title .right { flex-basis:100%; text-align:center; } #sub02_07 .inner { grid-template-columns:minmax(0,1fr); width:calc(100% - 40px); gap:28px; } #sub02_07 .subtxt { padding-top:0; } #sub02_07 .subtxt .t1, :is(#sub02_08, #sub0401_06) .subtxt .t1 { font-size:28px; } #sub02_07 .subtxt .t2, :is(#sub02_08, #sub0401_06) .subtxt .t2, :is(#sub02_08, #sub0401_06) .card .t2 { font-size:15px; line-height:1.8; } #sub02_07 .portrait { width:80%; max-width:420px; margin:0 auto; } :is(#sub02_08, #sub0401_06) { padding:64px 0 72px; } :is(#sub02_08, #sub0401_06) .subtxt { width:calc(100% - 40px); margin-bottom:36px; } :is(#sub02_08, #sub0401_06) .equipment { width:calc(100% - 20px); margin-left:20px; } :is(#sub02_08, #sub0401_06) .equipment:not(.swiper-initialized) .swiper-slide { flex-basis:86%; } :is(#sub02_08, #sub0401_06) .swiper-slide:nth-child(n) { --delay:.3s; } } @media (prefers-reduced-motion:reduce) { #sub02_07 .title .ready, #sub02_07 .subtxt.ready, :is(#sub02_08, #sub0401_06) .subtxt .ready, :is(#sub02_08, #sub0401_06) .card.ready { animation:none; opacity:1; transform:none; } #sub02_07 .portrait.ready .window { animation:none; clip-path:none; } #sub02_07 .portrait.ready img { animation:none; transform:none; } } /* 지방이식 비교: 기존 sub01_08 구조와 반응형 재사용 */ :is(#sub01_08, #sub0401_05).fatcompare { margin-top:0; padding-top:140px; color:#956c51; background:#fff; } :is(#sub01_08, #sub0401_05).fatcompare > .title { grid-column:1 / -1; margin:0 0 120px; font-family:'CormorantGaramond',serif; font-size:clamp(40px,5.9vw,115px); font-weight:500; line-height:1.1; letter-spacing:0.01em; text-align:center; overflow-wrap:anywhere; } :is(#sub01_08, #sub0401_05).fatcompare > .title.ready { opacity:0; } :is(#sub01_08, #sub0401_05).fatcompare > .title.ready.entered { animation:hybrid-up 1.4s cubic-bezier(.25,1,.5,1) .2s both; } :is(#sub01_08, #sub0401_05).fatcompare .more { display:inline-block; margin-top:48px; padding:10px 16px; border-radius:10px; background:#f6f1ed; color:inherit; font-size:15px; font-weight:400; line-height:1.4; letter-spacing:0; text-decoration:none; } :is(#sub01_08, #sub0401_05).fatcompare .photo:focus-visible { outline:2px solid #956c51; outline-offset:4px; } :is(#sub01_08, #sub0401_05).fatcompare .photo:focus .over { opacity:1; } @media (max-width:1100px) { :is(#sub01_08, #sub0401_05).fatcompare { padding-top:100px; } :is(#sub01_08, #sub0401_05).fatcompare > .title { margin-bottom:40px; } } @media (max-width:640px) { :is(#sub01_08, #sub0401_05).fatcompare { padding-top:70px; } :is(#sub01_08, #sub0401_05).fatcompare > .title { margin-bottom:16px; font-size:40px; line-height:1.15; } :is(#sub01_08, #sub0401_05).fatcompare > .subtxt br { display:none; } :is(#sub01_08, #sub0401_05).fatcompare .more { margin-top:28px; } } @media (prefers-reduced-motion:reduce) { :is(#sub01_08, #sub0401_05).fatcompare > .title.ready, :is(#sub01_08, #sub0401_05).fatcompare > .title.ready.entered { opacity:1; transform:none; animation:none; } } /* 리프팅 04: 기존 sub02_04 공통 규칙 사용 */ #sub0401_04::before { height:25%; background:#fff; } #sub0401_04 .photo { background-image:url('/images/sub/0401_04.jpg'); } /* 리프팅 05: 기존 sub01_08 및 fatcompare 공통 규칙 사용 */ #sub0401_05.fatcompare .photo:focus-visible { outline:2px solid #956c51; outline-offset:4px; } #sub0401_05.fatcompare .photo:focus .over { opacity:1; } /* 리프팅 06: 기존 장비 슬라이드와 게시판 카드 공통 규칙 사용 */ #sub0401_06 { color:#956c51; background:#fff; } #sub0401_06 .empty { width:90%; margin:40px auto; font-size:17px; line-height:1.6; } .skin-equipment-title { display:flex; justify-content:center; width:100%; max-width:none; margin:120px 0 0; padding:0; overflow:hidden; color:#956c51; font-family:'CormorantGaramond',serif; font-size:6.8vw; font-weight:400; line-height:1.1; letter-spacing:.18em; text-indent:.18em; text-align:center; white-space:nowrap; } @media (max-width:640px) { .skin-equipment-title { margin-top:70px; } } /* 0403_03: 기존 sub02_03의 4열 변형 */ #sub02_03.personal-assessment .boxes { grid-template-columns:repeat(4,minmax(0,1fr)); gap:4vw; margin-top:100px; } #sub02_03.personal-assessment .photo { aspect-ratio:380 / 530; } #sub02_03.personal-assessment .box .t2 { font-size:clamp(26px,1.85vw,36px); line-height:1.2; letter-spacing:0; overflow-wrap:normal; } @media (max-width:1000px) { #sub02_03.personal-assessment .boxes { grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px 28px; margin-top:56px; } } @media (max-width:640px) { #sub02_03.personal-assessment .subtxt .t1 { font-size:clamp(30px,8.4vw,48px); } #sub02_03.personal-assessment .boxes { grid-template-columns:minmax(0,1fr); gap:44px; } #sub02_03.personal-assessment .photo { margin-bottom:24px; } #sub02_03.personal-assessment .box .t2 { font-size:28px; } } /* 0403_04: 이미지와 설명을 각각 묶은 3개 카드 */ #sub02_04.personal-options { padding-top:0; } #sub02_04.personal-options::before { height:32%; background:#053030; } #sub02_04.personal-options > .title { display:flex; justify-content:center; width:100%; margin:0 0 140px; overflow:hidden; color:#956c51; font-family:'CormorantGaramond',serif; font-size:6.8vw; font-weight:400; line-height:1.1; letter-spacing:.26em; text-indent:.26em; white-space:nowrap; } #sub02_04.personal-options .panels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; overflow:hidden; width:93%; max-width:1820px; margin:0 auto; } #sub02_04.personal-options .panel { position:relative; isolation:isolate; display:flex; align-items:flex-end; box-sizing:border-box; min-width:0; min-height:min(45vw,880px); padding:48px 3vw; overflow:hidden; background:#053030; } #sub02_04.personal-options .panel > img { position:absolute; inset:-1px; z-index:-2; display:block; width:calc(100% + 2px); max-width:none; height:calc(100% + 2px); object-fit:cover; transform-origin:center; } #sub02_04.personal-options .panel::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent 50%,rgb(0 0 0 / 24%)); } #sub02_04.personal-options .copy { position:relative; width:100%; color:#fff; } #sub02_04.personal-options .copy h3 { margin:0 0 10px; font-size:20px; font-weight:600; line-height:1.5; word-break:keep-all; } #sub02_04.personal-options .copy p { margin:0; font-size:17px; font-weight:400; line-height:1.6; word-break:keep-all; } /* 카드 전체의 투명도와 위치는 유지해 배경 경계가 비치지 않도록 처리 */ #sub02_04.personal-options .panel { --panel-delay:0s; margin:0; border:0; border-radius:0; } #sub02_04.personal-options .panel + .panel { margin-left:-1px; } #sub02_04.personal-options .panel:nth-child(2) { --panel-delay:.12s; } #sub02_04.personal-options .panel:nth-child(3) { --panel-delay:.24s; } #sub02_04.personal-options .panel.ready:not(.entered) > img { transform:scale(1.10); } #sub02_04.personal-options .panel.ready:not(.entered) .copy { opacity:0; transform:translateY(24px); } #sub02_04.personal-options .panel.ready.entered > img { animation:personal-panel-zoom 2.4s cubic-bezier(.22,1,.36,1) var(--panel-delay) both; } #sub02_04.personal-options .panel.ready.entered .copy { animation:personal-panel-copy 1.2s cubic-bezier(.22,1,.36,1) calc(var(--panel-delay) + .2s) both; } @keyframes personal-panel-zoom { from { transform:scale(1.10); } to { transform:scale(1); } } @keyframes personal-panel-copy { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } } @media (max-width:640px) { #sub02_04.personal-options .panel:nth-child(n) { --panel-delay:0s; } #sub02_04.personal-options .panel + .panel { margin-left:0; margin-top:-1px; } } @media (prefers-reduced-motion:reduce) { #sub02_04.personal-options .panel.ready > img, #sub02_04.personal-options .panel.ready .copy { animation:none; transform:none; opacity:1; } } /* TREATMENT OPTIONS: 모인 자간이 좌우로 펼쳐지는 효과 */ #sub02_04.personal-options > .title.ready:not(.entered) { letter-spacing:-.06em; text-indent:-.06em; } #sub02_04.personal-options > .title.ready.entered { animation:personal-title-spread 2s cubic-bezier(.22,1,.36,1) both; } @keyframes personal-title-spread { from { letter-spacing:-.06em; text-indent:-.06em; } to { letter-spacing:.26em; text-indent:.26em; } } @media (prefers-reduced-motion:reduce) { #sub02_04.personal-options > .title.ready:not(.entered), #sub02_04.personal-options > .title.ready.entered { animation:none; letter-spacing:.26em; text-indent:.26em; } } @media (max-width:1000px) { #sub02_04.personal-options > .title { margin-bottom:80px; } #sub02_04.personal-options .panel { min-height:500px; padding:30px 20px; } #sub02_04.personal-options .copy h3 { font-size:18px; } #sub02_04.personal-options .copy p { font-size:15px; } #sub02_04.personal-options .copy br { display:none; } } @media (max-width:640px) { #sub02_04.personal-options > .title { margin-bottom:54px; } #sub02_04.personal-options .panels { grid-template-columns:minmax(0,1fr); width:calc(100% - 40px); } #sub02_04.personal-options .panel { min-height:440px; padding:230px 26px 32px; } } /* 0403_05: 기존 sub02_05의 5단계 구성과 애니메이션 재사용 */ #sub02_05.personal-plan { background:#053030 url('/images/sub/0403_05.jpg') no-repeat center / cover; } /* 0403_10: 기존 subending 재사용 */ #sub0403_10 { background-image:url('/images/sub/0403_10.jpg'); } /* 0403_12: 기존 subvideo에서 정지 이미지 사용 */ .subvideo.personal-media .movie img { display:block; width:100%; height:100%; object-fit:cover; } /* 05_01 · 05_02: 기존 히어로와 소개 애니메이션 사용 */ #sub02_01 .bg.bg05 { background-image:url('/images/sub/05_01.jpg'); } #sub02_02 .bg.bg05 { background-image:url('/images/sub/05_02.jpg'); } /* 05_03: BODY · VOLUME · SKIN · CELL */ #sub02_03.well-overview { padding-bottom:60px; background:#fff; } #sub02_03.well-overview > .bg { mask-image:linear-gradient(to bottom,#000 0%,#000 40%,transparent 85%); -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 40%,transparent 85%); } #sub02_03.well-overview .areas { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0; width:95%; max-width:1820px; margin:90px auto 0; overflow:hidden; } #sub02_03.well-overview .area { position:relative; isolation:isolate; display:flex; align-items:flex-end; box-sizing:border-box; min-width:0; min-height:min(37vw,710px); padding:40px 2vw 6vw; overflow:hidden; background:#766550; --delay:0s; } #sub02_03.well-overview .area + .area { margin-left:-1px; } #sub02_03.well-overview .area > img { position:absolute; inset:-1px; z-index:-2; display:block; width:calc(100% + 2px); max-width:none; height:calc(100% + 2px); object-fit:cover; } #sub02_03.well-overview .area::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent 30%,rgb(0 0 0 / 32%)); } #sub02_03.well-overview .copy { width:100%; color:#fff; } #sub02_03.well-overview .number { margin:0 0 8px; font-size:15px; font-weight:400; line-height:1; } #sub02_03.well-overview .copy h3 { margin:0 0 14px; font-family:'CormorantGaramond',serif; font-size:40px; font-weight:400; line-height:1; } #sub02_03.well-overview .lead { margin:0 0 20px; font-size:18px; font-weight:600; line-height:1.5; word-break:keep-all; } #sub02_03.well-overview .description { margin:0; font-size:16px; font-weight:400; line-height:1.65; word-break:keep-all; } #sub02_03.well-overview .area:nth-child(2) { --delay:.12s; } #sub02_03.well-overview .area:nth-child(3) { --delay:.24s; } #sub02_03.well-overview .area:nth-child(4) { --delay:.36s; } #sub02_03.well-overview .area.ready:not(.entered) > img { transform:scale(1.1); } #sub02_03.well-overview .area.ready:not(.entered) .copy { opacity:0; transform:translateY(24px); } #sub02_03.well-overview .area.ready.entered > img { animation:well-photo-settle 2.4s cubic-bezier(.22,1,.36,1) var(--delay) both; } #sub02_03.well-overview .area.ready.entered .copy { animation:well-copy-rise 1.2s cubic-bezier(.22,1,.36,1) calc(var(--delay) + .2s) both; } @media (max-width:1100px) { #sub02_03.well-overview .areas { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:60px; } #sub02_03.well-overview .area { min-height:580px; padding:40px 30px; } #sub02_03.well-overview .area:nth-child(3) { margin-left:0; } #sub02_03.well-overview .area:nth-child(n+3) { margin-top:-1px; } } @media (max-width:640px) { #sub02_03.well-overview .areas { grid-template-columns:minmax(0,1fr); width:calc(100% - 40px); } #sub02_03.well-overview .area:nth-child(n) { min-height:520px; margin:0; padding:240px 26px 36px; --delay:0s; } #sub02_03.well-overview .area + .area { margin-top:-1px; } #sub02_03.well-overview .lead { font-size:17px; } #sub02_03.well-overview .description { font-size:15px; } #sub02_03.well-overview .description br { display:none; } } /* 05_04: 의료진 사진을 개별 3장으로 구성 */ #sub02_04.well-consult { padding-top:60px; background:#fff; } #sub02_04.well-consult::before { height:34%; background:#061f2d; } #sub02_04.well-consult > .title { display:flex; justify-content:center; width:100%; margin:0 0 140px; overflow:hidden; color:#956c51; font-family:'CormorantGaramond',serif; font-size:6.45vw; font-weight:400; line-height:1.1; letter-spacing:.38em; text-indent:.38em; white-space:nowrap; } #sub02_04.well-consult > .title.ready:not(.entered) { letter-spacing:-.06em; text-indent:-.06em; } #sub02_04.well-consult > .title.ready.entered { animation:well-title-spread 2s cubic-bezier(.22,1,.36,1) both; } #sub02_04.well-consult .portraits { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; width:93%; max-width:1820px; margin:70px auto 0; overflow:hidden; } #sub02_04.well-consult .portrait { position:relative; min-width:0; aspect-ratio:595 / 864; margin:0; overflow:hidden; background:#d1cbc1; --delay:0s; } #sub02_04.well-consult .portrait + .portrait { margin-left:-1px; } #sub02_04.well-consult .portrait img { position:absolute; inset:-1px; display:block; width:calc(100% + 2px); max-width:none; height:calc(100% + 2px); object-fit:cover; } #sub02_04.well-consult .portrait:nth-child(2) { --delay:.12s; } #sub02_04.well-consult .portrait:nth-child(3) { --delay:.24s; } #sub02_04.well-consult .portrait.ready:not(.entered) img { transform:scale(1.1); } #sub02_04.well-consult .portrait.ready.entered img { animation:well-photo-settle 2.4s cubic-bezier(.22,1,.36,1) var(--delay) both; } @media (max-width:1000px) { #sub02_04.well-consult > .title { margin-bottom:80px; } } @media (max-width:640px) { #sub02_04.well-consult { padding-top:20px; } #sub02_04.well-consult > .title { margin-bottom:54px; } #sub02_04.well-consult .portraits { grid-template-columns:minmax(0,1fr); width:calc(100% - 40px); margin-top:44px; } #sub02_04.well-consult .portrait:nth-child(n) { margin-left:0; --delay:0s; } #sub02_04.well-consult .portrait + .portrait { margin-top:-1px; } } /* 05_05: 기존 원칙/단계 공통 스타일의 3열 변형 */ #sub02_05.well-principles { background:#061f2d url('/images/sub/05_05.jpg') no-repeat center / cover; } #sub02_05.well-principles .steps { grid-template-columns:repeat(3,minmax(0,1fr)); } #sub02_05.well-principles .box { padding-right:48px; padding-left:48px; } #sub02_05.well-principles .box:first-child { padding-left:8px; } #sub02_05.well-principles .box + .box::after { display:block; } @media (max-width:1000px) { #sub02_05.well-principles .box { padding-right:24px; padding-left:24px; } #sub02_05.well-principles .box .t2 { font-size:30px; } } @media (max-width:640px) { #sub02_05.well-principles .steps { grid-template-columns:minmax(0,1fr); } #sub02_05.well-principles .box, #sub02_05.well-principles .box:first-child { padding:32px 0 38px; } #sub02_05.well-principles .box + .box::after { display:none; } } /* 05_10: 기존 하단 배너와 05_12 영상 공통 스타일 사용 */ #sub05_10 { background-image:url('/images/sub/05_10.jpg'); } /* 05 페이지 전용 모션: 기존 data-sub-reveal 감지 사용 */ @keyframes well-photo-settle { from { transform:scale(1.1); } to { transform:scale(1); } } @keyframes well-copy-rise { from { opacity:0; transform:translateY(24px); } to { opacity:1; transform:translateY(0); } } @keyframes well-title-spread { from { letter-spacing:-.06em; text-indent:-.06em; } to { letter-spacing:.38em; text-indent:.38em; } } @media (prefers-reduced-motion:reduce) { #sub02_03.well-overview .area.ready > img, #sub02_03.well-overview .area.ready .copy, #sub02_04.well-consult .portrait.ready img { animation:none; opacity:1; transform:none; } #sub02_04.well-consult > .title.ready { animation:none; letter-spacing:.38em; text-indent:.38em; } } /* 0601 인사말 전체: 기존 0601 CSS 블록을 교체 (다른 서브페이지 CSS 유지) */ #sub0601_01 { --intro-duration:8s; --intro-gap:136px; position:relative; width:100%; height:100svh; min-height:640px; overflow:hidden; isolation:isolate; background:#f8f4f0; color:#956c51; } #sub0601_01 .intro-top { position:absolute; top:50%; left:0; z-index:2; width:100%; padding:0 24px; box-sizing:border-box; text-align:center; transform:translateY(-100%); visibility:hidden; } #sub0601_01 .eyebrow { margin:0 0 20px; font-family:'Noto Serif KR',serif; font-size:25px; line-height:1.4; letter-spacing:0; font-weight:600; color:#956c51; } #sub0601_01 .intro-top h1 { margin:0; font-family:'Noto Serif KR',serif; font-size:60px; line-height:1.3; letter-spacing:0; font-weight:600; color:#956c51; } #sub0601_01 .intro-bottom { position:absolute; top:50%; left:0; z-index:2; width:100%; margin:0; padding:0 24px; box-sizing:border-box; text-align:center; font-family:'Noto Serif KR',serif; font-size:50px; line-height:1.4; letter-spacing:0; font-weight:600; color:#956c51; visibility:hidden; } #sub0601_01 .intro-film { position:absolute; top:0; left:0; z-index:3; width:100%; height:100%; overflow:hidden; background:#101820; clip-path:inset(0); } #sub0601_01 .intro-film video { display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; transform:translateZ(0); transform-origin:center; backface-visibility:hidden; } #sub0601_01 .intro-final { position:absolute; inset:0; z-index:4; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px; box-sizing:border-box; text-align:center; color:#f8f4f0; } #sub0601_01 .intro-final h2 { margin:0 0 16px; font-family:'Noto Serif KR',serif; font-size:70px; line-height:1.2; letter-spacing:0; font-weight:600; color:#f8f4f0; } #sub0601_01 .intro-final p { margin:0; font-size:17px; line-height:1.6; letter-spacing:0; font-weight:400; color:#f8f4f0; } #sub0601_01:is(.is-waiting,.is-playing) .intro-top { visibility:visible; animation:jeunex0601Top var(--intro-duration) linear both; } #sub0601_01:is(.is-waiting,.is-playing) .intro-bottom { visibility:visible; animation:jeunex0601Bottom var(--intro-duration) linear both; } #sub0601_01:is(.is-waiting,.is-playing) .intro-film { animation:jeunex0601Film var(--intro-duration) linear both; will-change:clip-path; } #sub0601_01:is(.is-waiting,.is-playing) .intro-film video { animation:jeunex0601VideoScale var(--intro-duration) linear both; will-change:transform; } #sub0601_01:is(.is-waiting,.is-playing) .intro-final h2 { animation:jeunex0601FinalTitle var(--intro-duration) linear both; } #sub0601_01:is(.is-waiting,.is-playing) .intro-final p { animation:jeunex0601FinalText var(--intro-duration) linear both; } #sub0601_01.is-waiting .intro-top, #sub0601_01.is-waiting .intro-bottom, #sub0601_01.is-waiting .intro-film, #sub0601_01.is-waiting .intro-final h2, #sub0601_01.is-waiting .intro-final p, #sub0601_01.is-waiting .intro-film video { animation-play-state:paused; } @keyframes jeunex0601Top { 0% { opacity:0; transform:translateY(-100%); animation-timing-function:ease-out; } 16% { opacity:.4; transform:translateY(-100%); animation-timing-function:cubic-bezier(.22,1,.36,1); } 30%, 44% { opacity:1; transform:translateY(calc(-100% - var(--intro-gap))); animation-timing-function:ease-in-out; } 56%, 100% { opacity:0; transform:translateY(calc(-100% - var(--intro-gap) - 24px)); visibility:hidden; } } @keyframes jeunex0601Bottom { 0% { opacity:0; transform:translateY(0); animation-timing-function:ease-out; } 16% { opacity:.4; transform:translateY(0); animation-timing-function:cubic-bezier(.22,1,.36,1); } 30%, 44% { opacity:1; transform:translateY(var(--intro-gap)); animation-timing-function:ease-in-out; } 56%, 100% { opacity:0; transform:translateY(calc(var(--intro-gap) + 24px)); visibility:hidden; } } @keyframes jeunex0601Film { 0%, 18% { clip-path:inset(50% var(--film-inset-x, 0px)); animation-timing-function:cubic-bezier(.22,1,.36,1); } 30%, 44% { clip-path:inset(var(--film-inset-y, 0px) var(--film-inset-x, 0px)); animation-timing-function:cubic-bezier(.16,1,.3,1); } 58%, 100% { clip-path:inset(0px 0px); } } @keyframes jeunex0601VideoScale { 0%, 44% { transform:translateZ(0) scale(var(--film-small-scale, 1)); animation-timing-function:cubic-bezier(.16,1,.3,1); } 58%, 100% { transform:translateZ(0) scale(1); } } @keyframes jeunex0601FinalTitle { 0%, 60% { opacity:0; transform:translateY(32px); clip-path:inset(100% 0 0); animation-timing-function:cubic-bezier(.16,1,.3,1); } 80%, 100% { opacity:1; transform:translateY(0); clip-path:inset(0); } } @keyframes jeunex0601FinalText { 0%, 68% { opacity:0; transform:translateY(20px); animation-timing-function:cubic-bezier(.16,1,.3,1); } 90%, 100% { opacity:1; transform:translateY(0); } } @media (max-width:1000px) { #sub0601_01 { --intro-gap:116px; min-height:620px; } #sub0601_01 .intro-top h1 { font-size:44px; } #sub0601_01 .intro-bottom { font-size:36px; } #sub0601_01 .intro-final h2 { font-size:52px; } } @media (max-width:600px) { #sub0601_01 { --intro-gap:100px; min-height:580px; } #sub0601_01 .eyebrow { font-size:20px; } #sub0601_01 .intro-top h1 { font-size:clamp(22px,5.8vw,34px); line-height:1.4; } #sub0601_01 .intro-bottom { font-size:clamp(23px,6vw,32px); } #sub0601_01 .intro-film { max-width:100%; } #sub0601_01 .intro-final h2 { max-width:440px; font-size:clamp(36px,8vw,46px); text-wrap:balance; } #sub0601_01 .intro-final p { max-width:300px; font-size:15px; word-break:keep-all; } } @media (prefers-reduced-motion:reduce) { #sub0601_01:is(.is-waiting,.is-playing) .intro-top, #sub0601_01:is(.is-waiting,.is-playing) .intro-bottom { animation:none; visibility:hidden; } #sub0601_01:is(.is-waiting,.is-playing) .intro-film { animation:none; width:100%; height:100%; clip-path:none; } #sub0601_01:is(.is-waiting,.is-playing) .intro-film video { animation:none; transform:none; } #sub0601_01:is(.is-waiting,.is-playing) .intro-final h2, #sub0601_01:is(.is-waiting,.is-playing) .intro-final p { animation:none; opacity:1; transform:none; clip-path:none; } } /* 0601 두 번째~네 번째 영역: 이미지 확장 후 오른쪽에서 덮기 전환 */ #sub0601_02 { position:relative; background:#f8f4f0; color:#956c51; } #sub0601_02 .story-stage { position:relative; isolation:isolate; } #sub0601_02 .story-intro { position:relative; z-index:1; padding:120px 24px 80px; text-align:center; box-sizing:border-box; } #sub0601_02 .story-intro h2 { margin:0 0 20px; color:#956c51; font-family:'Noto Serif KR',serif; font-size:50px; line-height:1.4; letter-spacing:0; font-weight:600; word-break:keep-all; } #sub0601_02 .story-intro p { margin:0; color:#956c51; font-size:17px; line-height:1.6; letter-spacing:0; font-weight:400; word-break:keep-all; } #sub0601_02 .story-track { position:relative; z-index:2; } #sub0601_02 .story-panel { position:relative; width:100%; height:100svh; min-height:680px; overflow:hidden; } #sub0601_02 .story-media { position:absolute; inset:0; overflow:hidden; background:#ab8969; } #sub0601_02 .story-media img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; transform-origin:center; backface-visibility:hidden; } #sub0601_02 .story-copy { position:absolute; left:6.4%; right:5%; bottom:5%; z-index:3; color:#f8f4f0; } #sub0601_02 .story-copy p { margin:0 0 28px; color:#f8f4f0; font-size:17px; line-height:1.6; letter-spacing:0; font-weight:400; word-break:keep-all; } #sub0601_02 .story-copy h3 { margin:0; color:#f8f4f0; font-family:'Noto Serif KR',serif; font-size:clamp(40px,3.65vw,70px); line-height:1.2; letter-spacing:0; font-weight:600; } #sub0601_02 .personal .story-copy { left:21.2%; bottom:14%; } #sub0601_02 .personal .story-body { margin-bottom:60px; } #sub0601_02 .balance .story-copy { inset:0; } #sub0601_02 .balance .story-body { position:absolute; top:39%; right:4.8%; width:430px; max-width:36%; } #sub0601_02 .balance h3 { position:absolute; left:36.8%; bottom:9.8%; white-space:nowrap; } #sub0601_02.is-scroll .story-stage { position:sticky; top:0; height:100svh; overflow:hidden; } #sub0601_02.is-scroll .story-intro { position:absolute; top:25%; left:0; width:100%; padding:0 24px; } #sub0601_02.is-scroll .story-track { width:100%; height:100%; } #sub0601_02.is-scroll .story-panel { position:absolute; inset:0; width:100%; height:100%; min-height:0; } #sub0601_02.is-scroll .expertise { z-index:1; } #sub0601_02.is-scroll .personal { z-index:2; transform:translate3d(100%,0,0); will-change:transform; } #sub0601_02.is-scroll .balance { z-index:3; transform:translate3d(100%,0,0); will-change:transform; } #sub0601_02.is-scroll .personal .story-body p, #sub0601_02.is-scroll .personal h3, #sub0601_02.is-scroll .balance .story-body p, #sub0601_02.is-scroll .balance h3 { opacity:0; } #sub0601_02.is-scroll .expertise .story-media { will-change:clip-path; } #sub0601_02.is-scroll .expertise .story-media img { will-change:transform; } #sub0601_02.is-scroll .expertise .story-copy { opacity:0; } /* 태블릿 */ @media (max-width:1000px) { #sub0601_02 .story-intro h2 { font-size:38px; } #sub0601_02 .story-copy h3 { font-size:44px; } #sub0601_02 .personal .story-copy { left:8%; bottom:10%; } #sub0601_02 .balance .story-body { max-width:46%; top:30%; } #sub0601_02 .balance h3 { left:8%; white-space:normal; } } /* 모바일 */ @media (max-width:600px) { #sub0601_02 .story-intro { padding:80px 24px 50px; } #sub0601_02 .story-intro h2 { max-width:340px; margin:0 auto 18px; font-size:28px; } #sub0601_02 .story-intro p { font-size:14px; } #sub0601_02.is-scroll .story-intro { top:22%; } #sub0601_02 .story-copy, #sub0601_02 .personal .story-copy, #sub0601_02 .balance .story-copy { inset:auto 24px 32px; } #sub0601_02 .story-copy p { margin-bottom:18px; font-size:14px; line-height:1.65; } #sub0601_02 .story-copy p br { display:none; } #sub0601_02 .story-copy h3 { position:static; max-width:100%; font-size:32px; line-height:1.2; text-wrap:balance; white-space:normal; overflow-wrap:break-word; } #sub0601_02 .personal .story-body { margin-bottom:28px; } #sub0601_02 .balance .story-body { position:static; width:auto; max-width:none; margin-bottom:28px; } #sub0601_02 .balance .story-media img { object-position:43% center; } } /* 가로 모바일 */ @media (max-height:540px) and (orientation:landscape) { #sub0601_02.is-scroll .story-intro { top:12%; } #sub0601_02 .story-intro h2 { margin-bottom:10px; font-size:28px; } #sub0601_02 .story-copy, #sub0601_02 .personal .story-copy, #sub0601_02 .balance .story-copy { inset:auto 24px 20px; } #sub0601_02 .story-copy p { margin-bottom:8px; font-size:13px; line-height:1.45; } #sub0601_02 .story-body, #sub0601_02 .personal .story-body, #sub0601_02 .balance .story-body { position:static; width:auto; max-width:none; margin-bottom:16px; } #sub0601_02 .story-copy h3 { position:static; font-size:32px; white-space:normal; } } /* 0601 다섯 번째 영역: 웰에이징 / sub.css에 추가 (반응형 포함) */ /* 개별 등장 시간(duration), 지연(delay)은 각 글자 규칙에서 수정 */ #sub0601_05 { position:relative; display:flex; align-items:center; justify-content:center; min-height:100svh; padding:160px 24px; overflow:hidden; isolation:isolate; box-sizing:border-box; background:#f8f4f0; color:#956c51; } #sub0601_05 .aging-video { position:absolute; inset:0; z-index:-1; display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; pointer-events:none; } #sub0601_05 .aging-content { position:relative; width:100%; max-width:1100px; text-align:center; } #sub0601_05 .aging-label { --duration:0.9s; --delay:0s; margin:0 0 20px; color:#956c51; font-size:17px; line-height:1.6; letter-spacing:0; font-weight:400; } #sub0601_05 .aging-title { --duration:1.4s; --delay:0.18s; margin:0 0 52px; color:#956c51; font-family:'Noto Serif KR',serif; font-size:60px; line-height:1.2; letter-spacing:0; font-weight:600; } #sub0601_05 .aging-message { --duration:1.1s; --delay:0.42s; margin:0 0 92px; color:#956c51; font-family:'Noto Serif KR',serif; font-size:50px; line-height:1.4; letter-spacing:0; font-weight:600; word-break:keep-all; } #sub0601_05 .aging-body { --duration:1.1s; --delay:0.64s; color:#956c51; font-size:17px; line-height:1.6; letter-spacing:0; font-weight:400; word-break:keep-all; overflow-wrap:break-word; } #sub0601_05 .aging-body p { margin:0 0 28px; color:inherit; font-size:inherit; line-height:inherit; letter-spacing:0; font-weight:400; } #sub0601_05 .aging-body p:last-child { margin-bottom:0; } /* 화면에 들어온 글자부터 한 번씩 실행 */ #sub0601_05.is-motion .aging-motion { opacity:0; transform:translate3d(0,26px,0); } #sub0601_05.is-motion .aging-motion.is-visible { animation:jeunex0601AgingUp var(--duration) cubic-bezier(.22,1,.36,1) var(--delay) both; } #sub0601_05.is-motion .aging-title { transform:none; filter:blur(8px); letter-spacing:-.055em; } #sub0601_05.is-motion .aging-title.is-visible { animation-name:jeunex0601AgingTitle; } @keyframes jeunex0601AgingUp { from { opacity:0; transform:translate3d(0,26px,0); } to { opacity:1; transform:translate3d(0,0,0); } } @keyframes jeunex0601AgingTitle { from { opacity:0; filter:blur(8px); letter-spacing:-.055em; } to { opacity:1; filter:blur(0); letter-spacing:0; } } /* 반응형 */ @media (max-width:1000px) { #sub0601_05 { padding:120px 32px; } #sub0601_05 .aging-title { font-size:52px; } #sub0601_05 .aging-message { font-size:42px; margin-bottom:72px; } } @media (max-width:600px) { #sub0601_05 { padding:96px 24px; } #sub0601_05 .aging-label { font-size:15px; } #sub0601_05 .aging-title { margin-bottom:36px; font-size:38px; } #sub0601_05 .aging-message { margin-bottom:48px; font-size:32px; line-height:1.5; } #sub0601_05 .aging-body { font-size:15px; line-height:1.8; } #sub0601_05 .aging-body .pc-br { display:none; } } @media (max-width:380px) { #sub0601_05 .aging-title { font-size:34px; } #sub0601_05 .aging-message { font-size:28px; } } @media (prefers-reduced-motion:reduce) { #sub0601_05.is-motion .aging-motion, #sub0601_05.is-motion .aging-motion.is-visible { opacity:1; transform:none; filter:none; letter-spacing:0; animation:none; } } /* 0601 여섯 번째 영역: 마지막 인사말과 스크롤 갤러리 */ #sub0601_06 { position:relative; padding:260px 4.7vw 190px; background:#f8f4f0; color:#956c51; box-sizing:border-box; } #sub0601_06 .chapter-copy { max-width:1000px; margin:0 auto 90px; text-align:center; } #sub0601_06 .chapter-copy h2 { margin:0 0 36px; color:#956c51; font-family:'Noto Serif KR',serif; font-size:60px; line-height:1.25; letter-spacing:0; font-weight:600; } #sub0601_06 .chapter-description { color:#956c51; font-size:17px; line-height:1.6; letter-spacing:0; font-weight:400; word-break:keep-all; overflow-wrap:break-word; } #sub0601_06 .chapter-description p { margin:0 0 28px; color:inherit; font-size:inherit; line-height:inherit; letter-spacing:0; font-weight:400; } #sub0601_06 .chapter-description p:last-child { margin-bottom:0; } #sub0601_06 .chapter-gallery { --gallery-y:0px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:88px clamp(24px,9vw,172px); width:100%; max-width:1740px; margin:0 auto; padding:0; list-style:none; } #sub0601_06 .chapter-item { --multiplier:0; position:relative; min-width:0; margin:0; padding:0; transform:translate3d(0,calc(var(--gallery-y) * var(--multiplier)),0); } #sub0601_06 .chapter-item:nth-child(5n+1), #sub0601_06 .chapter-item:nth-child(5n) { --multiplier:2.4; } #sub0601_06 .chapter-item:nth-child(5n+2), #sub0601_06 .chapter-item:nth-child(5n+4) { --multiplier:1.2; } #sub0601_06 .chapter-photo { width:100%; aspect-ratio:214/260; overflow:hidden; background:#e9e1d9; } #sub0601_06 .chapter-photo img { display:block; width:100%; height:100%; max-width:none; object-fit:cover; object-position:center; transform:scale(1); transition:transform .6s cubic-bezier(.25,1,.5,1); } @media (hover:hover) and (pointer:fine) { #sub0601_06 .chapter-item:hover .chapter-photo img { transform:scale(1.15); } } /* 마지막 영역 반응형: 모든 이미지 유지 */ @media (max-width:1000px) { #sub0601_06 { padding:150px 32px 120px; } #sub0601_06 .chapter-copy h2 { font-size:48px; } #sub0601_06 .chapter-gallery { grid-template-columns:repeat(3,minmax(0,1fr)); gap:56px 56px; } #sub0601_06 .chapter-item:nth-child(n) { --multiplier:1.2; } #sub0601_06 .chapter-item:nth-child(3n+2) { --multiplier:0; } } @media (max-width:600px) { #sub0601_06 { padding:96px 24px 80px; } #sub0601_06 .chapter-copy { margin-bottom:56px; } #sub0601_06 .chapter-copy h2 { margin-bottom:28px; font-size:clamp(26px,6.7vw,38px); line-height:1.4; } #sub0601_06 .chapter-description { font-size:15px; line-height:1.8; } #sub0601_06 .chapter-description .pc-br { display:none; } #sub0601_06 .chapter-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 20px; } #sub0601_06 .chapter-item:nth-child(n) { transform:none; } } @media (prefers-reduced-motion:reduce) { #sub0601_06 .chapter-item:nth-child(n) { transform:none; } #sub0601_06 .chapter-photo img { transition:none; } #sub0601_06 .chapter-item:hover .chapter-photo img { transform:none; } } /* 의료진 소개 /css/sub.css에 추가 */ #sub0602_01 { --team-gap:64px; position:relative; isolation:isolate; padding:0 max(24px,2.75vw) 96px; background:#f8f4f0; box-sizing:border-box; } #sub0602_01::before { content:''; position:absolute; top:calc((100vw - max(48px,5.5vw) - 128px) / 3 * 850 / 560 * .523); inset-inline:0; bottom:0; z-index:-1; background:#986e52; } #sub0602_01 .medical-team { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--team-gap); } #sub0602_01 .medical-member { min-width:0; scroll-margin-top:130px; } #sub0602_01 .medical-photo { aspect-ratio:560/850; overflow:hidden; background:#bba995; } #sub0602_01 .medical-photo img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; } #sub0602_01 .medical-copy { position:relative; padding:56px 4px 20px; color:#f8f4f0; } #sub0602_01 .medical-member:not(:nth-child(3n)) .medical-copy::after { content:''; position:absolute; top:20px; bottom:0; right:calc(var(--team-gap) / -2); width:1px; background:rgb(248 244 240 / 22%); } #sub0602_01 .medical-copy h2 { margin:0 0 20px; color:#f8f4f0; font-size:22px; line-height:1.4; letter-spacing:0; font-weight:600; } #sub0602_01 .doctor-biography { color:#f8f4f0; font-size:17px; line-height:1.6; letter-spacing:0; font-weight:400; word-break:keep-all; overflow-wrap:break-word; } #sub0602_01 .doctor-biography p { margin:0; color:inherit; font-size:inherit; line-height:inherit; letter-spacing:inherit; font-weight:400; } #sub0602_01 .doctor-biography h3 { margin:60px 0 4px; color:inherit; font-size:17px; line-height:1.6; letter-spacing:0; font-weight:400; } #sub0602_01 .doctor-biography ul { margin:0; padding:0; list-style:none; } #sub0602_01 .doctor-biography li { position:relative; padding-left:10px; } #sub0602_01 .doctor-biography li::before { content:'·'; position:absolute; left:0; } @media (max-width:1280px) { #sub0602_01 { --team-gap:32px; } #sub0602_01::before { top:calc((100vw - max(48px,5.5vw) - 64px) / 3 * 850 / 560 * .523); } #sub0602_01 .doctor-biography { font-size:15px; } #sub0602_01 .doctor-biography br { display:none; } } @media (max-width:900px) { #sub0602_01 { padding:0 24px 64px; background:#986e52; } #sub0602_01::before { display:none; } #sub0602_01 .medical-team { grid-template-columns:1fr; gap:60px; } #sub0602_01 .medical-member { max-width:560px; width:100%; margin:0 auto; } #sub0602_01 .medical-member .medical-copy::after { display:none; } #sub0602_01 .medical-copy { padding:28px 0 0; } #sub0602_01 .medical-copy h2 { font-size:21px; } #sub0602_01 .doctor-biography { font-size:16px; line-height:1.7; } #sub0602_01 .doctor-biography h3 { margin-top:32px; font-size:16px; } } /* 의료진 소개 사진 교차 전환: sub.css 맨 아래 추가 */ #sub0602_01 .medical-photo { position:relative; } #sub0602_01 .medical-photo .medical-photo-second { position:absolute; inset:0; opacity:0; pointer-events:none; } #sub0602_01 .medical-photo.is-photo-ready .medical-photo-second { animation:medicalPhotoCrossfade 10s ease-in-out var(--photo-delay,3s) infinite both; animation-play-state:paused; } #sub0602_01 .medical-photo.is-photo-ready.is-photo-playing .medical-photo-second { animation-play-state:running; } @keyframes medicalPhotoCrossfade { 0%, 100% { opacity:0; } 15%, 50% { opacity:1; } 65% { opacity:0; } } @media (prefers-reduced-motion:reduce) { #sub0602_01 .medical-photo.is-photo-ready .medical-photo-second { animation:none; opacity:0; } } /* 협력연구센터 — sub.css 맨 아래 추가 */ #sub0603_01 { padding:18px max(24px,4.6875vw) 210px; background:#f8f4f0; box-sizing:border-box; } #sub0603_01 .research-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:56px; max-width:1740px; margin:0 auto; } #sub0603_01 .research-card { min-width:0; overflow:hidden; border-radius:22px; background:#fff; } #sub0603_01 .research-content { display:flex; flex-direction:column; padding:0 18px; color:#75685f; text-decoration:none; } #sub0603_01 .research-logo { display:flex; align-items:center; justify-content:center; height:376px; } #sub0603_01 .research-logo img { display:block; width:auto; max-width:100%; } #sub0603_01 .research-name { display:flex; align-items:center; justify-content:center; gap:10px; min-height:79px; margin:0; padding:18px 0; border-top:1px solid #eae3de; box-sizing:border-box; font-size:18px; line-height:1.4; letter-spacing:0; font-weight:600; text-align:center; word-break:keep-all; } #sub0603_01 .research-name img { flex-shrink:0; width:24px; height:24px; object-fit:contain; } #sub0603_01 a.research-content:focus-visible { outline:2px solid #956c51; outline-offset:-4px; border-radius:22px; } @media (max-width:1280px) { #sub0603_01 { padding-bottom:120px; } #sub0603_01 .research-grid { gap:24px; } #sub0603_01 .research-logo { height:280px; } #sub0603_01 .research-name { font-size:16px; } } @media (max-width:1000px) { #sub0603_01 .research-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media (max-width:600px) { #sub0603_01 { padding:8px 20px 72px; } #sub0603_01 .research-grid { gap:16px; } #sub0603_01 .research-card { border-radius:16px; } #sub0603_01 .research-content { padding:0 10px; } #sub0603_01 .research-logo { height:170px; } #sub0603_01 .research-logo img { width:90%; height:110px; } #sub0603_01 .research-name { gap:6px; min-height:66px; font-size:14px; } #sub0603_01 .research-name img { width:18px; height:18px; } } @media (max-width:380px) { #sub0603_01 .research-grid { grid-template-columns:1fr; } } /* 오시는 길 · 0605.html */ #directions0605 { padding:0 0 92px; background:#f8f4f0; color:#956c51; } #directions0605 .directions-heading { padding:142px 20px 46px; text-align:center; } #directions0605 .directions-heading .english { margin:0 0 12px; font-family:'Noto Serif KR',serif; font-size:70px; line-height:1.2; letter-spacing:0; font-weight:600; } #directions0605 .directions-heading h1 { margin:0 0 12px; font-family:'Noto Serif KR',serif; font-size:25px; line-height:1.4; letter-spacing:0; font-weight:600; } #directions0605 .directions-heading .description { margin:0; font-size:17px; line-height:27px; letter-spacing:0; font-weight:400; } #directions0605 .directions-inner { width:810px; max-width:calc(100% - 40px); margin:0 auto; } #directions0605 .directions-map { position:relative; height:380px; overflow:hidden; background:#fff; } #directions0605 .directions-map .root_daum_roughmap { width:100% !important; padding:0; border:0; background:transparent; } #directions0605 .directions-map .wrap_map { height:380px !important; } #directions0605 .directions-map .wrap_controllers, #directions0605 .directions-map .wrap_cont { display:none !important; } #directions0605 .map-fallback { position:absolute; inset:0; align-content:center; margin:0; padding:24px; text-align:center; font-size:15px; line-height:1.6; letter-spacing:0; font-weight:400; } #directions0605 .directions-map-links { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid #e2e2e2; background:#fff; } #directions0605 .directions-map-links a { display:flex; align-items:center; justify-content:center; gap:8px; height:45px; color:inherit; font-size:13px; line-height:1.4; letter-spacing:0; font-weight:400; text-decoration:none; } #directions0605 .directions-map-links a + a { border-left:1px solid #e2e2e2; } #directions0605 .map-icon { flex:none; width:20px; height:20px; background:center / contain no-repeat; } #directions0605 .map-icon.naver { background-image:url('/images/common/mapicon1.png'); } #directions0605 .map-icon.kakao { background-image:url('/images/common/mapicon2.png'); } #directions0605 .map-icon.google { background-image:url('/images/common/mapicon3.png'); } #directions0605 .directions-info { margin:48px 0 0; } #directions0605 .info-row { display:grid; grid-template-columns:174px minmax(0,1fr); align-items:center; min-height:76px; padding:20px 28px; border-bottom:1px solid #eee1d6; box-sizing:border-box; } #directions0605 .info-row > dt { display:flex; align-items:center; gap:20px; margin:0; font-size:17px; line-height:1.6; letter-spacing:0; font-weight:600; } #directions0605 .info-row > dt svg { flex:none; width:26px; height:30px; fill:currentColor; } #directions0605 .info-row > dd { min-width:0; margin:0; font-size:17px; line-height:1.6; letter-spacing:-.025em; font-weight:400; word-break:keep-all; } #directions0605 .phone-number { color:inherit; font-size:26px; line-height:1.4; letter-spacing:0; font-weight:600; text-decoration:none; } #directions0605 .address-row > dd { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; } #directions0605 .route-link { flex:none; display:inline-flex; align-items:center; justify-content:center; padding:3px 12px; border-radius:2px; background:#956c51; color:#fff; font-size:13px; line-height:20px; letter-spacing:0; font-weight:500; text-decoration:none; } #directions0605 .hours-row { min-height:180px; align-items:start; padding-top:26px; padding-bottom:54px; } #directions0605 .hours-list { margin:0; } #directions0605 .hours-list > div { display:grid; grid-template-columns:108px minmax(0,1fr); min-height:33px; } #directions0605 .hours-list dt, #directions0605 .hours-list dd { margin:0; font-size:17px; line-height:27px; letter-spacing:-.025em; font-weight:400; } #directions0605 .hours-list dd { display:flex; flex-wrap:wrap; align-items:start; gap:4px 14px; } #directions0605 .hours-note { padding:0 10px; border-radius:4px; background:#fff; white-space:nowrap; } #directions0605 .parking-row { min-height:70px; } #directions0605 .subway-row { min-height:80px; } #directions0605 .subway-row > dd { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; } #directions0605 .subway-line { display:inline-flex; align-items:center; padding:0 12px; border-radius:20px; background:#f6bc38; color:#fff; font-size:17px; line-height:25px; letter-spacing:0; font-weight:600; } #directions0605 .exit-number { display:inline-grid; place-items:center; width:23px; height:23px; margin:0 3px; border-radius:50%; background:#ffbb00; color:#956c51; font-size:14px; line-height:1; letter-spacing:0; font-weight:400; vertical-align:middle; } #directions0605 a:focus-visible { outline:2px solid #956c51; outline-offset:3px; } /* 오시는 길 · 관리자 둘러보기 */ #directions0605 .directions-tour { width:804px; max-width:100%; margin:92px auto 0; } #directions0605 .tour-stage { position:relative; aspect-ratio:804 / 512; background:#e8e2dc; touch-action:pan-y; } #directions0605 .tour-photo { display:block; width:100%; height:100%; object-fit:cover; } #directions0605 .tour-photo[hidden] { display:none; } #directions0605 .tour-arrow { position:absolute; top:50%; display:grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:50%; background:#fff; color:#483d35; font-size:22px; line-height:1; letter-spacing:0; font-weight:400; transform:translateY(-50%); cursor:pointer; } #directions0605 .tour-arrow[hidden] { display:none; } #directions0605 .tour-prev { left:-60px; } #directions0605 .tour-next { right:-60px; } #directions0605 .tour-thumbs { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:9px; margin-top:26px; } #directions0605 .tour-thumb { display:block; min-width:0; padding:0; border:0; border-radius:0; background:transparent; opacity:.55; cursor:pointer; transition:opacity .2s ease; } #directions0605 .tour-thumb img { display:block; width:100%; height:auto; aspect-ratio:804 / 512; object-fit:cover; } #directions0605 .tour-thumb[aria-pressed="true"], #directions0605 .tour-thumb:hover { opacity:1; } #directions0605 .tour-arrow:focus-visible, #directions0605 .tour-thumb:focus-visible { outline:2px solid #956c51; outline-offset:3px; } #directions0605 .tour-status { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* 기존 640px 이하 반응형 CSS에 추가 */ @media (max-width:640px) { #directions0605 { padding-bottom:60px; } #directions0605 .directions-heading { padding:110px 20px 32px; } #directions0605 .directions-heading .english { font-size:44px; } #directions0605 .directions-heading h1 { font-size:22px; } #directions0605 .directions-heading .description { font-size:15px; line-height:25px; } #directions0605 .directions-map, #directions0605 .directions-map .wrap_map { height:300px !important; } #directions0605 .directions-map-links a { gap:8px; font-size:12px; } #directions0605 .map-icon { width:18px; height:18px; } #directions0605 .directions-info { margin-top:28px; } #directions0605 .info-row { grid-template-columns:minmax(0,1fr); gap:12px; min-height:0; padding:22px 4px; } #directions0605 .info-row > dt { gap:12px; font-size:16px; } #directions0605 .info-row > dt svg { width:22px; height:26px; } #directions0605 .info-row > dd { padding-left:34px; font-size:15px; line-height:1.7; } #directions0605 .phone-number { font-size:24px; } #directions0605 .hours-list > div { grid-template-columns:82px minmax(0,1fr); gap:0; margin-bottom:6px; } #directions0605 .hours-list dt, #directions0605 .hours-list dd { font-size:14px; line-height:25px; } #directions0605 .hours-note { padding:2px 6px; font-size:12px; line-height:20px; white-space:normal; } #directions0605 .subway-line { font-size:14px; line-height:24px; } } @media (max-width:1000px) { /* 오시는 길 · 둘러보기 화살표 */ #directions0605 .tour-prev { left:12px; } #directions0605 .tour-next { right:12px; } } /* 기존 640px 이하 반응형 CSS에 추가 */ @media (max-width:640px) { #directions0605 { padding-bottom:60px; } #directions0605 .directions-heading { padding:110px 20px 32px; } #directions0605 .directions-heading .english { font-size:44px; } #directions0605 .directions-heading h1 { font-size:22px; } #directions0605 .directions-heading .description { font-size:15px; line-height:25px; } #directions0605 .directions-map, #directions0605 .directions-map .wrap_map { height:300px !important; } #directions0605 .directions-map-links a { gap:8px; font-size:12px; } #directions0605 .map-icon { width:18px; height:18px; } #directions0605 .directions-info { margin-top:28px; } #directions0605 .info-row { grid-template-columns:minmax(0,1fr); gap:12px; min-height:0; padding:22px 4px; } #directions0605 .info-row > dt { gap:12px; font-size:16px; } #directions0605 .info-row > dt svg { width:22px; height:26px; } #directions0605 .info-row > dd { padding-left:34px; font-size:15px; line-height:1.7; } #directions0605 .phone-number { font-size:24px; } #directions0605 .hours-list > div { grid-template-columns:82px minmax(0,1fr); gap:0; margin-bottom:6px; } #directions0605 .hours-list dt, #directions0605 .hours-list dd { font-size:14px; line-height:25px; } #directions0605 .hours-note { padding:2px 6px; font-size:12px; line-height:20px; white-space:normal; } #directions0605 .subway-line { font-size:14px; line-height:24px; } } /* 둘러보기 */ @media (max-width:640px) { #directions0605 .directions-tour { margin-top:56px; } #directions0605 .tour-prev { left:10px; } #directions0605 .tour-next { right:10px; } #directions0605 .tour-arrow { width:32px; height:32px; font-size:18px; } #directions0605 .tour-thumbs { gap:5px; margin-top:16px; } } .member-body .member-policy:focus { outline:none; } .member-body .member-close:focus { outline:none; } .member-body .member-close:focus-visible { background:#eee5dc; border-radius:50%; } #sub01_08 .photo.is-alternate .over, #sub0401_05 .photo.is-alternate .over { opacity:1; } @media (hover:none) { #sub01_08 .photo:not(.is-alternate) .over, #sub0401_05 .photo:not(.is-alternate) .over { opacity:0; } }