header { background: rgba(255,255,255,0.6); } header #logo a { background:url('/images/common/logo2.svg')no-repeat 0 0; background-size:100%; } header .lang-btn { background:#e9e9e9; } header #gnb li.dt1menu a { color:#111111; } #story-visual { position:relative; width:100%; height:100vh; overflow:hidden; } #story-visual .sv-bg { position:absolute; top:0; left:0; width:100%; height:100%; background:url('/page_KR0/01_sub/images/0101.jpg') no-repeat 50% 50%; background-size:cover; transform:scale(1.08); transition:transform 15.5s cubic-bezier(0.25,1,0.5,1) 0s; } #story-visual.active .sv-bg { transform:scale(1); } #story-visual .sv-inner { position:absolute; top:65%; left:50%; transform:translate(-50%,-50%); text-align:center; width:90%; } #story-visual .sv-logo { position:relative; width:80px; height:80px; margin:0 auto; margin-top:140px; } #story-visual .sv-logo span { position:absolute; top:0; left:0; width:100%; height:100%; } #story-visual .sv-logo span img { width:100%; height:100%; animation:ringRotate 18s linear infinite; } #story-visual .sv-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:28px; height:28px; } #story-visual .sv-title { font-size:52px; font-family: 'NotoSerifKR'; font-weight:500; color:#ffffff; letter-spacing:-0.02em; opacity:0; transform:translateY(20px); transition:opacity 1.6s cubic-bezier(0.25,1,0.5,1) 0.4s, transform 1.6s cubic-bezier(0.25,1,0.5,1) 0.4s; } #story-visual .sv-desc { font-size:22px; font-weight:400; color:#ffffff; line-height:1.7; margin-top:26px; opacity:0; transform:translateY(16px); transition:opacity 1.6s cubic-bezier(0.25,1,0.5,1) 0.8s, transform 1.6s cubic-bezier(0.25,1,0.5,1) 0.8s; } #story-visual .sv-logo { opacity:0; transform:scale(0.85); transition:opacity 1.6s cubic-bezier(0.25,1,0.5,1) 0.2s, transform 1.6s cubic-bezier(0.25,1,0.5,1) 0.2s; } #story-visual.active .sv-logo { opacity:1; transform:scale(1); } #story-visual.active .sv-title { opacity:1; transform:translateY(0); } #story-visual.active .sv-desc { opacity:1; transform:translateY(0); } /* ===== 0101 원장 섹션 ===== */ #s0101-doctor { position:relative; width:100%; padding:120px 0 100px; background:#2a2725; overflow:hidden; } #s0101-doctor .s0101-doc-wrap { width:100%; margin:0 auto; text-align:center; } #s0101-doctor .s0101-doc-quote { font-family: 'NotoSerifKR'; font-size:36px; font-weight:500; color:#ffffff; line-height:1.6; letter-spacing:-0.01em; opacity:0; transform:translateY(20px); transition:opacity 1.4s cubic-bezier(0.25,1,0.5,1) 0.2s, transform 1.4s cubic-bezier(0.25,1,0.5,1) 0.2s; } #s0101-doctor .s0101-doc-img { width:90%; width:555px; margin:60px auto 0; opacity:0; transform:translateY(24px); transition:opacity 1.4s cubic-bezier(0.25,1,0.5,1) 0.5s, transform 1.4s cubic-bezier(0.25,1,0.5,1) 0.5s; } #s0101-doctor .s0101-doc-img img { width:100%; height:auto; display:block; } #s0101-doctor .s0101-doc-info { margin-top:38px; opacity:0; transform:translateY(16px); transition:opacity 1.4s cubic-bezier(0.25,1,0.5,1) 0.8s, transform 1.4s cubic-bezier(0.25,1,0.5,1) 0.8s; } #s0101-doctor .s0101-doc-name { font-size:21px; font-weight:500; color:#ffffff; } #s0101-doctor .s0101-doc-title { font-size:21px; font-weight:500; color:#ffffff; margin-top:12px; } #s0101-doctor .s0101-doc-watermark { position:absolute; top:57%; left:50%; transform:translate(-50%,-50%); white-space:nowrap; font-family:'Orpheus Pro'; font-size:clamp(60px, 9vw, 9vw); color:rgba(255,255,255,0.06); letter-spacing:0.06em; pointer-events:none; user-select:none; } #s0101-doctor.active .s0101-doc-quote { opacity:1; transform:translateY(0); } #s0101-doctor.active .s0101-doc-img { opacity:1; transform:translateY(0); } #s0101-doctor.active .s0101-doc-info { opacity:1; transform:translateY(0); } /* ===== 0101 스토리 섹션 ===== */ #s0101-story { width:100%; padding:100px 0px 160px 0px; background:#2a2725; } #s0101-story .s0101-story-wrap { width:90%; max-width:1354px; padding:28px 7%; box-sizing:border-box; background:#24211f; margin:0 auto; } #s0101-story .s0101-story-list { display:flex; flex-direction:column; } #s0101-story .s0101-story-item { display:flex; gap:60px; padding:60px 0; border-bottom:1px solid rgba(255,255,255,0.1); opacity:0; transform:translateY(24px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.2s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.2s; } #s0101-story .s0101-story-item:last-child { border-bottom:0px; } #s0101-story .s0101-story-left { flex:0 0 32%; } #s0101-story .s0101-story-en { font-family:'Montserrat'; font-size:14px; font-weight:600; color:#91724a; letter-spacing:0.05em; margin-bottom:6px; } #s0101-story .s0101-story-title { font-size:26px; font-weight:600; color:#ffffff; line-height:1.5; letter-spacing:-0.01em; } #s0101-story .s0101-story-right { flex:1; display:flex; align-items:center; } #s0101-story .s0101-story-desc { padding-top:26px; font-size:18.5px; font-weight:400; color:#726f6f; line-height:1.7; } #s0101-story.active .s0101-story-item { opacity:1; transform:translateY(0); } #s0101-story.active .s0101-story-item:nth-child(2) { transition-delay:0.15s; } #s0101-story.active .s0101-story-item:nth-child(3) { transition-delay:0.3s; } #s0101-story.active .s0101-story-item:nth-child(4) { transition-delay:0.45s; } /* ===== 0101 브랜드 섹션 ===== */ #s0101-brand { position:relative; width:100%; height:100vh; overflow:hidden; } #s0101-brand .s0101-brand-bg { position:absolute; top:0; left:0; width:100%; height:100%; background:url('/page_KR0/01_sub/images/brand.jpg') no-repeat 50% 50%; background-size:cover; transform:scale(1.06); transition:transform 12.5s cubic-bezier(0.25,1,0.5,1) 0s; } #s0101-brand.active .s0101-brand-bg { transform:scale(1); } /* 중앙 컨텐츠 */ #s0101-brand .s0101-brand-inner { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); display:flex; gap:60px; align-items:flex-start; width:70%; max-width:840px; } /* 왼쪽 */ #s0101-brand .s0101-brand-left { flex:0 0 auto; opacity:0; transform:translateY(20px); transition:opacity 1.4s cubic-bezier(0.25,1,0.5,1) 0.4s, transform 1.4s cubic-bezier(0.25,1,0.5,1) 0.4s; } #s0101-brand .s0101-brand-en { font-size:18px; font-weight:600; color:#d2ad7d; letter-spacing:0.12em; margin-bottom:14px; } #s0101-brand .s0101-brand-title { font-size:45px; font-weight:700; color:#ffffff; letter-spacing:-0.01em; line-height:1.2; white-space:nowrap; } #s0101-brand .s0101-brand-title span { font-weight:400; } /* 오른쪽 */ #s0101-brand .s0101-brand-right { flex:1; padding-top:32px; opacity:0; transform:translateY(20px); transition:opacity 1.4s cubic-bezier(0.25,1,0.5,1) 0.7s, transform 1.4s cubic-bezier(0.25,1,0.5,1) 0.7s; } #s0101-brand .s0101-brand-desc { font-size:20px; font-weight:400; color:#f5f4ee; line-height:1.6; } /* active */ #s0101-brand.active .s0101-brand-left { opacity:1; transform:translateY(0); } #s0101-brand.active .s0101-brand-right { opacity:1; transform:translateY(0); } /* ===== 0101 가치 섹션 ===== */ #s0101-value { position:relative; display:flex; width:100%; height:100vh; background:#e7e1da; overflow:hidden; } #s0101-value .bg { position:absolute; top:0; left:0; width:100%; height:100%; background:url('/page_KR0/01_sub/images/value.jpg') no-repeat 50% 50%; border-radius:0 0 0 220px; overflow:hidden; background-size:cover; transform:scale(1.06); transition:transform 12.5s cubic-bezier(0.25,1,0.5,1) 0s; } #s0101-value.active .bg { transform:scale(1); } /* 왼쪽 */ #s0101-value .s0101-value-left { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:100%; max-width:1480px; } #s0101-value .s0101-value-list { display:flex; flex-direction:column; gap:0; width:90%; max-width:730px; } #s0101-value .s0101-value-item { padding:18px 0 8px 48px; box-sizing:border-box; margin-bottom:90px; border-left:1px solid rgba(255,255,255,0.15); opacity:0; transform:translateY(20px); } #s0101-value .s0101-value-item:last-child { margin-bottom:0px; } #s0101-value .s0101-value-title { font-size:30px; font-weight:600; color:#a68459; margin-bottom:16px; } #s0101-value .s0101-value-desc { font-size:20px; font-weight:400; color:#848484; line-height:1.6; } /* 아이템 딜레이 */ #s0101-value .s0101-value-item:nth-child(1) { transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.2s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.2s; } #s0101-value .s0101-value-item:nth-child(2) { transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.4s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.4s; } #s0101-value .s0101-value-item:nth-child(3) { transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.6s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.6s; } /* active */ #s0101-value.active .s0101-value-item { opacity:1; transform:translateY(0); } /* ===== 0101 차별점 섹션 ===== */ #s0101-diff { width:100%; padding:200px 0 180px; background:#e7e1da; } #s0101-diff .s0101-diff-wrap { width:90%; max-width:1440px; margin:0 auto; } #s0101-diff .s0101-diff-head { text-align:center; margin-bottom:80px; opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.2s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.2s; } #s0101-diff .s0101-diff-en { font-family:'Montserrat'; font-size:19px; font-weight:600; color:#65594f; letter-spacing:0.14em; margin-bottom:12px; } #s0101-diff .s0101-diff-title { font-size:45px; font-weight:700; color:#222222; letter-spacing:-0.02em; } #s0101-diff .s0101-diff-list { display:grid; grid-template-columns:repeat(3, 1fr); gap:100px; } #s0101-diff .s0101-diff-item { opacity:0; transform:translateY(20px); } #s0101-diff .s0101-diff-num { font-family:'Montserrat'; font-size:16px; font-weight:500; color:#91724a; margin-bottom:10px; } #s0101-diff .s0101-diff-stit { font-size:26px; font-weight:500; color:#1f1f1f; line-height:1.4; margin-bottom:24px; } #s0101-diff .s0101-diff-desc { font-size:20px; color:#5d5d5d; line-height:1.7; padding-bottom:20px; border-bottom:1px solid rgba(0,0,0,0.1); } #s0101-diff .s0101-diff-quote { font-family: 'NotoSerifKR'; font-size:16px; color:#91724a; line-height:1.7; margin-top:20px; font-style:italic; } #s0101-diff .s0101-diff-item:nth-child(1) { transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s; } #s0101-diff .s0101-diff-item:nth-child(2) { transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.2s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.2s; } #s0101-diff .s0101-diff-item:nth-child(3) { transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.3s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.3s; } #s0101-diff .s0101-diff-item:nth-child(4) { transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.4s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.4s; } #s0101-diff .s0101-diff-item:nth-child(5) { transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.5s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.5s; } #s0101-diff .s0101-diff-item:nth-child(6) { transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.6s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.6s; } /* active */ #s0101-diff.active .s0101-diff-head { opacity:1; transform:translateY(0); } #s0101-diff.active .s0101-diff-item { opacity:1; transform:translateY(0); } /* ===== 0101 철학 섹션 ===== */ #s0101-philo { position:relative; width:100%; height:920px; background:#e7e1da; overflow:hidden; } #s0101-philo .s0101-philo { position:relative; width:100%; height:100%; border-top-right-radius:150px; background:#beb5ac; overflow:hidden; } #s0101-philo .s0101-philo-wrap { position:relative; width:100%; min-height:100vh; } #s0101-philo .s0101-philo-left { position:absolute; top:50%; left:30%; transform:translate(-50%,-50%); } #s0101-philo .s0101-philo-en { font-family:'Montserrat'; font-size:19px; font-weight:600; color:#65594f; letter-spacing:0.14em; margin-bottom:18px; opacity:0; transform:translateY(16px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s; } #s0101-philo .s0101-philo-title { font-size:45px; font-weight:700; color:#222222; line-height:1.4; letter-spacing:-0.01em; opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.3s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.3s; } #s0101-philo .s0101-philo-sub { font-size:26px; font-weight:500; color:#1f1f1f; margin-top:14px; opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.5s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.5s; } #s0101-philo .s0101-philo-desc { font-size:21px; color:#3e3e3e; line-height:1.7; margin-top:40px; opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.7s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.7s; } #s0101-philo .s0101-philo-desc2 { font-size:21px; color:#3e3e3e; line-height:1.7; margin-top:24px; opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.9s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.9s; } #s0101-philo .s0101-philo-right { position:absolute; bottom:0%; left:70%; transform:translate(-50%,0%); width:653px; opacity:0; transition:opacity 1.6s cubic-bezier(0.25,1,0.5,1) 0.4s; } #s0101-philo .s0101-philo-right img { object-fit:cover; object-position:center top; display:block; } #s0101-philo.active .s0101-philo-en, #s0101-philo.active .s0101-philo-title, #s0101-philo.active .s0101-philo-sub, #s0101-philo.active .s0101-philo-desc, #s0101-philo.active .s0101-philo-desc2 { opacity:1; transform:translateY(0); } #s0101-philo.active .s0101-philo-right { opacity:1; } /* ===== 0101 시스템 섹션 ===== */ #s0101-system { width:100%; padding:150px 0; background:#f5f4ee; } #s0101-system .s0101-system-wrap { width:90%; max-width:1520px; margin:0 auto; } #s0101-system .s0101-system-head { text-align:center; margin-bottom:60px; opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.2s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.2s; } #s0101-system .s0101-system-en { font-family:'Montserrat'; font-size:19px; font-weight:600; color:#383838; letter-spacing:0.14em; margin-bottom:14px; } #s0101-system .s0101-system-title { font-size:45px; font-weight:700; color:#383838; letter-spacing:-0.01em; } #s0101-system .s0101-system-sub { font-size:22px; color:#383838; margin-top:16px; } #s0101-system .s0101-system-box { background:#e6e1d9; padding:110px 8%; opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.4s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.4s; } #s0101-system .s0101-system-list { display:flex; flex-direction:column; } #s0101-system .s0101-system-item { display:flex; gap:0px; } #s0101-system .s0101-system-stit { flex:0 0 32%; font-size:25px; font-weight:600; color:#1f1f1f; padding-top:10px; } #s0101-system .s0101-system-desc { flex:1; font-size:21px; color:#3e3e3e; line-height:1.7; padding-left:50px; padding-bottom:80px; display:flex; align-items:center; border-left:1px solid rgba(0,0,0,0.15); } #s0101-system .s0101-system-item:last-child .s0101-system-desc {padding-bottom:0px; } #s0101-system.active .s0101-system-head { opacity:1; transform:translateY(0); } #s0101-system.active .s0101-system-box { opacity:1; transform:translateY(0); } /* ===== 0101 클로징 섹션 ===== */ #s0101-closing { position:relative; width:100%; height:100vh; overflow:hidden; } #s0101-closing .s0101-closing-bg { position:absolute; top:0; left:0; width:100%; height:100%; background:url('/page_KR0/01_sub/images/closing.jpg') no-repeat 50% 50%; background-size:cover; transform:scale(1.1); transition:transform 2.8s cubic-bezier(0.25,1,0.5,1) 0s; } #s0101-closing.active .s0101-closing-bg { transform:scale(1); } #s0101-closing .s0101-closing-copy { position:absolute; top:60%; left:50%; transform:translate(-50%, calc(-50% + 40px)); font-family: 'NotoSerifKR'; font-size:38px; font-weight:500; color:#ffffff; letter-spacing:-0.01em; opacity:0; transition:opacity 1.8s cubic-bezier(0.25,1,0.5,1) 0.5s, transform 1.8s cubic-bezier(0.25,1,0.5,1) 0.5s; } #s0101-closing.active .s0101-closing-copy { opacity:1; transform:translate(-50%, -50%); } .mbr { display:none; } .subtitletxt { position:relative; width:100%; padding-top:158px; background:#fafaf7; text-align:center; } .subtitletxt .t1 { font-family:'Montserrat'; font-size:48px; font-weight:600; color:#403b36; letter-spacing:-0.01em; } .subtitletxt .t2 { font-size:22px; color:#4e4943; font-weight:500; margin-top:14px; } .subcontent { position:Relative; width:100%; background:#fafaf7; } .sub0503 { display:flex; justify-content: space-between; position:relative; width:100%; max-width:1264px; margin:0 auto; background:#fafaf7; padding-top:80px; padding-bottom:140px; overflow:hidden; } .sub0503 .submap { width:47%; } .sub0503 .submapview { width:100%; height:380px; } .sub0503 .submapview iframe { width:100%; height:100%; } .sub0503 .submapview .cont { display:none; } .sub0503 .maptxt2 { position:relative; width:100%; height:47px; display:flex; } .sub0503 .maptxt2 li { width:33.3333%; } .sub0503 .maptxt2 li a { display:block; width:100%; height:47px; font-size:13px; font-weight:500; color:#423d2f; background:#ffffff; line-height:47px; text-align:center; box-sizing:border-box; } .sub0503 .maptxt2 li a img { display:inline-block; vertical-align:middle; padding-right:8px; } .sub0503 .maptxt2 li:nth-child(1) a { border-right:1px solid #f9f7f7; background:#ffffff; } .sub0503 .maptxt2 li:nth-child(2) a { border-right:1px solid #f9f7f7; background:#ffffff; } .sub0503 .maptxt2 li:nth-child(3) a { background:#ffffff; } .sub0503 .txt { position:relative; width:47%; } .sub0503 .txt .txt2 { position:relative; width:100%; min-height:30px; padding-left:55px; box-sizing:border-box; background:url('/page_KR0/01_sub/images/05icon1.jpg')no-repeat 0 0; } .sub0503 .txt .txt2 a { font-size:22px; font-weight:600; color:#886329; } .sub0503 .txt .txt1 { position:relative; width:100%; min-height:30px; margin-top:28px; padding-left:55px; box-sizing:border-box; background:url('/page_KR0/01_sub/images/05icon2.jpg')no-repeat 0 0; font-size:17px; font-weight:400; color:#2a2d32; line-height:160%; } .sub0503 .txt .txt1 button { display:inline-block; vertical-align:middle; margin-left:6px; width:57px; height:25px; border:0px; cursor:pointer; font-size:13px; font-weight:400px; background:#e2dcd1; border-radius:4px; color:#3f3f3f; line-height:25px; } .sub0503 .txt .txt1 a { display:inline-block; vertical-align:middle; margin-left:6px; width:57px; height:25px; border:0px; cursor:pointer; font-size:13px; font-weight:400px; background:#ffffff; border-radius:4px; color:#3f3f3f; text-align:center; line-height:25px; } .sub0503 .txt .txt1 li.con div.c2 { margin-top:20px; font-size:18px; font-weight:400; color:#2b2220; } .sub0503 .txt .txt1 li.con div.c2 a { display:inline-block; vertical-align:middle; margin-left:6px; width:18px; height:18px; line-height:16px; cursor:pointer; font-size:16px; font-weight:400px; background:#433e3a; color:#ffffff; border-radius:100%; text-align:center; } .sub0503 .txt .txt3 { position:relative; width:100%; padding-top:2px; margin-top:28px; padding-left:55px; box-sizing:border-box; background:url('/page_KR0/01_sub/images/05icon3.jpg')no-repeat 0 0; font-size:17px; font-weight:500; color:#2a2d32; } .sub0503 .txt .txt3 .con { width:100%; margin-bottom:12px; display:flex; } .sub0503 .txt .txt3 .con li.t1 { width:108px; font-size:17px; font-weight:400; color:#2a2d32; } .sub0503 .txt .txt3 .con li.t2 { width:80%; font-size:17px; font-weight:400; color:#2a2d32; display:flex; } .sub0503 .txt .txt3 .con li.t2 span.txt11 { display:block; width:24px; } .sub0503 .txt .txt3 .con li.t2 span.txt22 { display:block; width:58px; text-align:right; } .sub0503 .txt .txt3 .con li.t2 span.txt33 { display:block; width:22px; text-align:center; } .sub0503 .txt .txt3 .con li.t2 span.txt44 { display:block; width:35px; } .sub0503 .txt .txt3 .con li.t2 span.txt55 { display:block; width:40px; text-align:right; margin-right:6px; } .sub0503 .txt .txt4 { position:relative; width:100%; height:39px; padding-top:2px; margin-top:28px; padding-left:55px; box-sizing:border-box; background:url('/page_KR0/01_sub/images/05icon4.jpg')no-repeat 0 50%; font-size:17px; font-weight:500; color:#2a2d32; display:flex; flex-wrap:wrap; } .sub0503 .txt .txt4 a { display:block; position:relative; width:154px; height:39px; margin-bottom:6px; margin-right:6px; font-size:13px; font-weight:500; color:#423d2f; line-height:39px; text-align:center; box-sizing:border-box; } .sub0503 .txt .txt4 a:nth-child(1) { background:#40fd0f; } .sub0503 .txt .txt4 a:nth-child(2) { background:#fff10d; } .sub0503 .txt .txt4 a img { display:inline-block; vertical-align:middle; padding-right:8px; } #sec-space { position:relative; width:100%; height:100vh; } #sec-space { background:#000000; } #sec-space .main04swiper { position:relative; width:100%; height:100%; overflow:hidden; } #sec-space .main04swiper .swiper-slide.inte01 { background:url(/images/common/inte01bg1.jpg)no-repeat 50% 50%; background-size:cover; } #sec-space .main04swiper .swiper-slide.inte02 { background:url(/images/common/inte01bg2.jpg)no-repeat 50% 50%; background-size:cover; } #sec-space .main04swiper .swiper-slide.inte03 { background:url(/images/common/inte01bg3.jpg)no-repeat 50% 50%; background-size:cover; } #sec-space .main04swiper .swiper-slide.inte04 { background:url(/images/common/inte01bg4.jpg)no-repeat 50% 50%; background-size:cover; } #sec-space .main04swiper .swiper-slide.inte05 { background:url(/images/common/inte01bg5.jpg)no-repeat 50% 50%; background-size:cover; } #sec-space .main04swiper .swiper-slide.inte06 { background:url(/images/common/inte01bg6.jpg)no-repeat 50% 50%; background-size:cover; } #sec-space .main04swiper .swiper-slide.inte07 { background:url(/images/common/inte01bg7.jpg)no-repeat 50% 50%; background-size:cover; } #sec-space .main04swiper .swiper-slide.inte08 { background:url(/images/common/inte01bg8.jpg)no-repeat 50% 50%; background-size:cover; } #sec-space .main04swiper .swiper-slide.inte09 { background:url(/images/common/inte01bg9.jpg)no-repeat 50% 50%; background-size:cover; } #sec-space .main04swiper .swiper-slide.inte10 { background:url(/images/common/inte01bg10.jpg)no-repeat 50% 50%; background-size:cover; } #sec-space .swiperbtwrap { position:absolute; top:54%; left:50%; width:100%; max-width:1346px; transform:translate(-50%,-50%); z-index:2; } #sec-space .maintxt { width:100%; text-align:center; } #sec-space .maintxt .t1 { width:100%; font-size:22px; color:#cdc8c3; font-weight:500; line-height:100%; letter-spacing:1px; } #sec-space .maintxt .t2 { width:100%; margin-top:10px; font-size:22px; color:#cdc8c3; font-weight:500; line-height:150%; } #sec-space .swiperbt { position:relative; width:100%; height:530px; margin-top:40px; z-index:2; overflow:hidden; } #sec-space .swiperbt .swiper-slide img { display:block; width:80%; padding-top:32%; margin:0 auto; transition:all 0.6s cubic-bezier(0.25,1,0.5,1) 0s; } #sec-space .swiperbt .swiper-slide.swiper-slide-active img { width:100%; padding-top:0%; } .main06bt { position:relative; width:100%; height:32px; line-height:32px; max-width:222px; margin:0 auto; margin-top:40px; display:flex; justify-content:space-between; z-index:2; } .main06bt .swiper-pagination2 { width:80px; height:32px; line-height:32px; text-align:center; border-radius:50px; background:#f1ece3; font-size:18px; font-weight:500; color:#4a4239; } .main06bt .btprev2 { font-size:19px; color:#f1ece3; cursor:pointer; letter-spacing:1px; } .main06bt .btnext2 { font-size:19px; color:#f1ece3; cursor:pointer; letter-spacing:1px; } .main06bt .btline { font-size:12px; color:#f1ece3; font-weight:100; } /* ===== 서브 공통 비주얼 ===== */ #sub-visual { position:relative; width:100%; height:100vh; overflow:hidden; } #sub-visual .sv-bg { position:absolute; top:0; left:0; width:100%; height:100%; background-size:cover; background-position:50% 50%; transform:scale(1.12); transition:transform 6s cubic-bezier(0.16,1,0.3,1) 0s; } #sub-visual.active .sv-bg { transform:scale(1); } #sub-visual.sv-eye01 .sv-bg { background-image:url('/page_KR0/02_sub/images/0201.jpg'); } #sub-visual.sv-eye02 .sv-bg { background-image:url('/page_KR0/02_sub/images/0202.jpg'); } #sub-visual.sv-eye03 .sv-bg { background-image:url('/page_KR0/02_sub/images/0203.jpg'); } #sub-visual.sv-eye04 .sv-bg { background-image:url('/page_KR0/02_sub/images/0204.jpg'); } #sub-visual.sv-eye05 .sv-bg { background-image:url('/page_KR0/02_sub/images/0205.jpg'); } #sub-visual.sv-eye06 .sv-bg { background-image:url('/page_KR0/02_sub/images/0206.jpg'); } #sub-visual.sub0301 .sv-bg { background-image:url('/page_KR0/03_sub/images/0301.jpg'); } #sub-visual.sub0302 .sv-bg { background-image:url('/page_KR0/03_sub/images/0302.jpg'); } #sub-visual.sub0303 .sv-bg { background-image:url('/page_KR0/03_sub/images/0303.jpg'); } #sub-visual.sub0304 .sv-bg { background-image:url('/page_KR0/03_sub/images/0304.jpg'); } #sub-visual.sub0305 .sv-bg { background-image:url('/page_KR0/03_sub/images/0305.jpg'); } #sub-visual.sub0306 .sv-bg { background-image:url('/page_KR0/03_sub/images/0306.jpg'); } #sub-visual.sub0401 .sv-bg { background-image:url('/page_KR0/04_sub/images/0401.jpg'); } #sub-visual.sub0402 .sv-bg { background-image:url('/page_KR0/04_sub/images/0402.jpg'); } #sub-visual.sub0403 .sv-bg { background-image:url('/page_KR0/04_sub/images/0403.jpg'); } #sub-visual.sub0404 .sv-bg { background-image:url('/page_KR0/04_sub/images/0404.jpg'); } #sub-visual.sub0405 .sv-bg { background-image:url('/page_KR0/04_sub/images/0405.jpg'); } #sub-visual.sub0501 .sv-bg { background-image:url('/page_KR0/05_sub/images/0501.jpg'); } #sub-visual.sub0502 .sv-bg { background-image:url('/page_KR0/05_sub/images/0502.jpg'); } #sub-visual.sub05033 .sv-bg { background-image:url('/page_KR0/05_sub/images/0503.jpg'); } #sub-visual.sub0504 .sv-bg { background-image:url('/page_KR0/05_sub/images/0504.jpg'); } #sub-visual.sub0505 .sv-bg { background-image:url('/page_KR0/05_sub/images/0505.jpg'); } #sub-visual.sub0601 .sv-bg { background-image:url('/page_KR0/06_sub/images/0601.jpg'); } #sub-visual.sub0602 .sv-bg { background-image:url('/page_KR0/06_sub/images/0602.jpg'); } #sub-visual.sub0701 .sv-bg { background-image:url('/page_KR0/07_sub/images/0701.jpg'); } #sub-visual.sub0702 .sv-bg { background-image:url('/page_KR0/07_sub/images/0702.jpg'); } #sub-visual.sub0703 .sv-bg { background-image:url('/page_KR0/07_sub/images/0703.jpg'); } #sub-visual.sub0704 .sv-bg { background-image:url('/page_KR0/07_sub/images/0704.jpg'); } #sub-visual.sub0705 .sv-bg { background-image:url('/page_KR0/07_sub/images/0705.jpg'); } #sub-visual .sv-inner { position:absolute; top:50%; left:7%; transform:translateY(-50%); } #sub-visual .sv-line { width:0px; height:1px; background:rgba(255,255,255,0.6); margin-bottom:24px; transition:width 0.8s cubic-bezier(0.65,0,0.35,1) 0.3s; } #sub-visual .sv-cate { font-size:25px; font-weight:600; color:#ffffff; margin-bottom:18px; letter-spacing:0.3em; opacity:0; transition:opacity 1s ease 0.4s, letter-spacing 1.2s cubic-bezier(0.16,1,0.3,1) 0.4s; } #sub-visual .sv-title-wrap { overflow:hidden; } #sub-visual .sv-title { font-family:'NotoSerifKR'; font-size:50px; font-weight:600; color:#ffffff; line-height:1.3; letter-spacing:-0.02em; transform:translateY(110%); transition:transform 1.3s cubic-bezier(0.16,1,0.3,1) 0.6s; } #sub-visual .sv-desc { font-size:21px; font-weight:400; color:rgba(255,255,255,0.85); line-height:1.6; margin-top:24px; opacity:0; transform:translateY(20px); filter:blur(6px); transition:opacity 1.2s ease 1s, transform 1.2s cubic-bezier(0.16,1,0.3,1) 1s, filter 1.2s ease 1s; } #sub-visual .sv-logo { position:relative; width:82px; height:82px; margin-top:40px; opacity:0; transform:scale(0.3) rotate(-90deg); transition:opacity 1s ease 1.3s, transform 1.3s cubic-bezier(0.34,1.56,0.64,1) 1.3s; } #sub-visual .sv-logo span { position:absolute; top:0; left:0; width:100%; height:100%; } #sub-visual .sv-logo span img { width:100%; height:100%; animation:ringRotate 18s linear infinite; } #sub-visual .sv-icon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:20px; height:20px; } #sub-visual .sv-watermark { position:absolute; bottom:5%; left:50%; transform:translateX(-50%); white-space:nowrap; font-family:'Orpheus Pro'; font-size:clamp(60px, 8vw, 8vw); color:rgba(255,255,255,0.2); letter-spacing:0.4em; opacity:0; transition:letter-spacing 2s cubic-bezier(0.16,1,0.3,1) 0.5s, opacity 1.5s ease 0.5s; } .sv-quick-btn { cursor:pointer; position:absolute; top:97.5vh; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; padding:14px 36px; background:#c30e20; color:#fff; font-size:14px; font-weight:600; border-radius:40px; z-index:2; } .sv-quick-btn img { width:18px; height:15px; } .sv-quick-btn, .sv-quick-btn:focus, .sv-quick-btn:hover { color:#fff; } #sub-visual.active .sv-line { width:60px; } #sub-visual.active .sv-cate { opacity:1; letter-spacing:0.04em; } #sub-visual.active .sv-title { transform:translateY(0); } #sub-visual.active .sv-desc { opacity:1; transform:translateY(0); filter:blur(0px); } #sub-visual.active .sv-logo { opacity:1; transform:scale(1) rotate(0deg); } #sub-visual.active .sv-watermark { opacity:1; letter-spacing:0.1em; } #s-doctor-common { position:relative; width:100%; padding:120px 0 100px; background:#fdf6eb; overflow:hidden; } #s-doctor-common.sub0301_01 { background:#ffffff; } #s-doctor-common .dc-head { text-align:center; opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s; } #s-doctor-common .dc-sub { font-size:22px; font-weight:500; color:#91724a; margin-bottom:14px; } #s-doctor-common .dc-title { font-size:45px; font-weight:700; color:#222222; letter-spacing:-0.01em; } #s-doctor-common .dc-visual { position:relative; width:100%; height:560px; margin-top:60px; display:flex; align-items:center; justify-content:center; perspective:1200px; } #s-doctor-common .dc-eng { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) scale(1.4); font-family: "Dream Avenue"; font-size:180px; font-weight:400; color:#000000; line-height:1.1; text-align:center; white-space:nowrap; letter-spacing:0.04em; opacity:0; z-index:1; transition:transform 1.8s cubic-bezier(0.16,1,0.3,1) 0.4s, opacity 1.4s ease 0.4s; } #s-doctor-common .dc-img { position:relative; width:0px; height:560px; margin:0 auto; overflow:hidden; z-index:2; transition:all 1.4s cubic-bezier(0.25,1,0.5,1) 1s; } #s-doctor-common .dc-img span { position:absolute; top:0px; left:50%; transform:translateX(-50%); width:510px; height:560px; } #s-doctor-common .dc-img img { width:100%; height:100%; object-fit:cover; display:block; } #s-doctor-common .dc-info { text-align:center; margin-top:32px; opacity:0; transform:translateY(36px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 1.5s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 1.5s; } #s-doctor-common .dc-name { font-size:21px; font-weight:600; color:#1c1b1b; } #s-doctor-common .dc-position { font-size:21px; font-weight:600; color:#525252; margin-top:6px; } #s-doctor-common .dc-bottom { position:relative; margin-top:60px; text-align:center; opacity:0; transform:translateY(36px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 1.9s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 1.9s; } #s-doctor-common .dc-star { position:absolute; left:13%; top:50%; transform:translateY(-50%); font-size:26px; color:rgba(184,150,106,0.5); } #s-doctor-common .dc-desc { font-size:25px; font-weight:600; color:#353535; line-height:1.6; } #s-doctor-common.active .dc-head { opacity:1; transform:translateY(0); } #s-doctor-common.active .dc-eng { opacity:1; transform:translate(-50%,-50%) scale(1); } #s-doctor-common.active .dc-img { width:510px; } #s-doctor-common.active .dc-info { opacity:1; transform:translateY(0); } #s-doctor-common.active .dc-bottom { opacity:1; transform:translateY(0); } .goldtxt { color:#856832 !important; } #sub0201_02 { width:100%; background:#fdf6eb; } #sub0201_02.sub0501_01 { padding-bottom:140px; } #sub0201_02 .introwrap { position:relative; display:flex; width:90%; max-width:1460px; margin:0 auto; padding:100px 100px 100px 140px; background:#f9f0e1; border-left:6px solid #c9a96e; box-sizing:border-box; opacity:0; transform:translateY(50px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.2s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.2s; } #sub0201_02 .titletxt { flex:0 0 34%; } #sub0201_02 .titletxt h3 { font-size:26px; font-weight:600; color:#1f1f1f; line-height:1.5; } #sub0201_02 .contxt { flex:1; display:flex; flex-direction:column; gap:28px; } #sub0201_02 .contxt .t1 { font-size:22px; font-weight:400; color:#3e3e3e; line-height:1.5; } #sub0201_02.active .introwrap { opacity:1; transform:translateY(0); } #sub0201_03 { position:relative; width:100%; padding:100px 0; background:#fdf6eb; } #sub0201_03.sub0301_03 { background:#ffffff; } #sub0201_03 .zigwrap { width:690px; margin:0 auto; } #sub0201_03 .ziglist { display:flex; flex-direction:column; gap:0; } #sub0201_03 .zigitem { display:flex; align-items:center; margin-bottom:40px; opacity:0; transform:translateY(20px); transition:opacity 1s cubic-bezier(0.25,1,0.5,1), transform 1s cubic-bezier(0.25,1,0.5,1); } #sub0201_03 .zigitem.solo { justify-content:center; } #sub0201_03 .zigitem.imgright { width:534px; margin:0 auto; margin-bottom:40px; justify-content:space-between; } #sub0201_03 .zigitem.imgleft { margin-bottom:40px; } #sub0201_03 .zigtxt h3 { font-family: 'NotoSerifKR'; font-size:38px; font-weight:600; color:#000000; } #sub0201_03 .zigtxt p { font-size:17px; font-weight:500; color:#525252; margin-top:10px; } #sub0201_03 .zigitem.imgright .zigtxt, #sub0201_03 .zigitem.imgleft .zigtxt { flex:1; } #sub0201_03 .zigitem.imgleft .zigtxt { padding-left:30px; } #sub0201_03 .zigimg { width:228px; height:101px; border-radius:101px; overflow:hidden; } #sub0201_03 .zigimg img { width:100%; height:100%; object-fit:cover; } #sub0201_03 .zigitem.imgleft .zigimg { width:239px; height:101px; } #sub0201_03 .star { position:absolute; top:118px; left:75%; transform:translateX(-50%); width:0px; height:0px; opacity:0; filter: blur(4px); transition:all 1.2s cubic-bezier(0.25,1,0.5,1) 0.6s; } #sub0201_03 .zigitem:nth-child(1) { transition-delay:0.1s; } #sub0201_03 .zigitem:nth-child(2) { transition-delay:0.25s; } #sub0201_03 .zigitem:nth-child(3) { transition-delay:0.4s; } #sub0201_03 .zigitem:nth-child(4) { transition-delay:0.55s; } #sub0201_03.active .zigitem { opacity:1; transform:translateY(0); } #sub0201_03.active .star { width:27px; height:27px; opacity:1; filter: blur(0px); } #sub0201_04 { position:relative; width:100%; padding:160px 0 190px 0; background:#f5f4ee; overflow:hidden; } #sub0201_04 .bgwrap { position:absolute; top:0; left:0; width:100%; height:100%; border-bottom-left-radius:180px; overflow:hidden; background:url('/page_KR0/02_sub/images/0201_04.jpg') no-repeat 50% 0; background-size:cover; } #sub0201_04.sub0301_04 .bgwrap { background:url('/page_KR0/03_sub/images/0301_04.jpg') no-repeat 50% 0; background-size:cover; } #sub0201_04.sub0401_04 .bgwrap { background:url('/page_KR0/04_sub/images/0401_04.jpg') no-repeat 50% 0; background-size:cover; } #sub0201_04.sub0501_02 .bgwrap { background:url('/page_KR0/05_sub/images/0501_02.jpg') no-repeat 50% 0; background-size:cover; } #sub0201_04 .procwrap { position:relative; width:90%; max-width:1600px; margin:0 auto; z-index:1; } #sub0201_04 .prochead { opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s; } #sub0201_04 .catetxt { font-size:22px; font-weight:600; color:#91724a; margin-bottom:16px; } #sub0201_04 .prochead h2 { font-size:45px; font-weight:700; color:#f5f4ee; line-height:1; } #sub0201_04 .entxt { font-family:'Montserrat'; font-size:19px; font-weight:600; color:#65594f; margin-top:16px; } #sub0201_04 .proclist { display:grid; grid-template-columns:1fr 1fr; column-gap:120px; row-gap:100px; margin-top:80px; } #sub0201_04 .procitem { border-left:1px solid rgba(255,255,255,10%); padding-left:30px; box-sizing:border-box; opacity:0; transform:translateY(20px); transition:opacity 1.1s cubic-bezier(0.25,1,0.5,1), transform 1.1s cubic-bezier(0.25,1,0.5,1); } #sub0201_04 .procitem .num { font-size:20px; font-weight:700; color:#91724a; margin-bottom:10px; } #sub0201_04 .procitem h3 { font-size:30px; font-weight:700; color:#ffffff; margin-bottom:16px; } #sub0201_04 .procitem p { font-size:20px; font-weight:400; color:#848484; line-height:1.6; } #sub0201_04 .procitem:nth-child(1) { transition-delay:0.2s; } #sub0201_04 .procitem:nth-child(2) { transition-delay:0.35s; } #sub0201_04 .procitem:nth-child(3) { transition-delay:0.5s; } #sub0201_04 .procitem:nth-child(4) { transition-delay:0.65s; } #sub0201_04.active .prochead { opacity:1; transform:translateY(0); } #sub0201_04.active .procitem { opacity:1; transform:translateY(0); } #sub0201_04.sub0501_02 .prochead { text-align:center; } #sub0201_04.sub0501_02 .prochead h2 { font-size:45px; font-weight:700; color:#222222; line-height:1; } #sub0201_04.sub0501_02 .entxt { color:#222222; } #sub0201_04.sub0501_02 .procitem { border-left:1px solid #dad4cb; } #sub0201_04.sub0501_02 .procitem .num { color:#91724a; } #sub0201_04.sub0501_02 .procitem h3 { color:#222222; } #sub0201_04.sub0501_02 .procitem p { color:#59554e; } #sub0201_05 { width:100%; padding:160px 0 100px 0; background:#f5f4ee; } #sub0201_05 .lineuphead { text-align:center; margin-bottom:60px; opacity:0; transform:translateY(50px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s; } #sub0201_05 .brandtxt { font-size:20px; font-weight:500; color:#65594f; margin-bottom:10px; } #sub0201_05 .lineuphead h2 { font-family:'Montserrat'; font-size:55px; font-weight:600; color:#000000; letter-spacing:0.02em; } #sub0201_05 .lineuphead.active { opacity:1; transform:translateY(0); } #sub0201_05 .methodbox { width:90%; max-width:1576px; margin:0 auto 60px; background:#fffef9; border-radius:10px; padding:90px 110px 90px 60px; box-sizing:border-box; opacity:0; transform:translateY(20px); transition:opacity 1.1s cubic-bezier(0.25,1,0.5,1), transform 1.1s cubic-bezier(0.25,1,0.5,1); } #sub0201_05 .methodbox.active { opacity:1; transform:translateY(0); } #sub0201_05 .methodtitle { position:relative; padding-left:44px; border-left:4px solid #d8b8a8; box-sizing:border-box; } #sub0201_05 .methodtitle h3 { font-size:40px; font-weight:700; color:#2d2d2d; margin-bottom:14px; } #sub0201_05 .methodtitle p { font-size:21px; color:#4a4a4c; line-height:1.6; } #sub0201_05 .recommendbox { margin-top:32px; padding-left:44px; box-sizing:border-box; } #sub0201_05 .rectit { font-size:23px; font-weight:600; color:#97784f; margin-bottom:14px; } #sub0201_05 .reclist { display:grid; grid-template-columns:repeat(2, max-content); column-gap:60px; row-gap:15px; } #sub0201_05 .reclist li { font-size:20px; color:#333333; padding-left:14px; position:relative; } #sub0201_05 .reclist li::before { content:'·'; position:absolute; left:0; color:#333333; font-weight:700; } #sub0201_05 .stepimglist { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; margin-top:36px; padding-left:44px; box-sizing:border-box; } #sub0201_05 .stepimglist li { width:100%; border:1px solid #c2b9b4; border-radius:14px; overflow:hidden; } #sub0201_05 .stepimglist li img { width:100%; height:100%; object-fit:cover; display:block; } #sub0201_05 .stepimglist2 { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; margin-top:36px; padding-left:44px; box-sizing:border-box; } #sub0201_05 .stepimglist2 li { width:100%; aspect-ratio:1.5/1; border:1px solid #c2b9b4; border-radius:14px; overflow:hidden; } #sub0201_05 .stepimglist2 li img { width:100%; height:100%; object-fit:cover; display:block; } #sub0201_05 .stepimglist3 { width:100%; margin-top:36px; padding-left:44px; box-sizing:border-box; } #sub0201_05 .stepimglist3 li { width:100%; border:1px solid #c2b9b4; border-radius:14px; overflow:hidden; } #sub0201_05 .stepimglist3 li img { width:100%; height:100%; object-fit:cover; display:block; } #sub0201_05 .stepimglist4 { position:relative; width:100%; padding-left:44px; box-sizing:border-box; margin-top:50px; overflow:hidden; } #sub0201_05 .stepimglist4 ul { width:100%; display:flex; justify-content: space-between; margin-bottom:80px; overflow:hidden; } #sub0201_05 .stepimglist4 ul:last-child { margin-bottom:20px; } #sub0201_05 .stepimglist4 ul li.imgs { width:48%; } #sub0201_05 .stepimglist4 ul li.imgs img { width:100%; } #sub0201_05 .stepimglist4 ul li.txt { width:48%; } #sub0201_05 .stepimglist4 ul li.txt span.t1 { display:block; width:100%; font-size:23px; font-weight:600; color:#97784f; line-height:1.4; } #sub0201_05 .stepimglist4 ul li.txt span.t2 { display:block; width:100%; margin-top:20px; font-size:21px; font-weight:400; color:#4a4a4c; line-height:1.6; } #sub0201_05 .lineupstar { display:none; text-align:left; width:90%; max-width:1576px; margin:20px auto 0; font-size:24px; color:rgba(170,140,100,0.6); } #sub0201_05 .lineupwatermark { width:100%; overflow:hidden; margin-top:30px; } #sub0201_05 .lineupwatermark p { white-space:nowrap; font-family: "Dream Avenue"; font-size:clamp(60px, 8vw, 8vw); color:rgba(0,0,0,0.18); letter-spacing:0.4em; padding-left:2%; opacity:0; transition:letter-spacing 2s cubic-bezier(0.16,1,0.3,1) 0.2s, opacity 1.5s ease 0.2s; } #sub0201_05 .lineupwatermark.active p { letter-spacing:0.06em; opacity:1; } #sub0201_06 { position:relative; width:100%; height:100vh; background:#f5f4ee; overflow:hidden; } #sub0201_06 .dtwrap { position:relative; width:100%; height:100%; border-top-right-radius:150px; background:#beb5ac; overflow:hidden; } #sub0201_06 .dtleft { position:absolute; top:55%; left:28%; transform:translate(-50%,-50%); width:90%; max-width:816px; box-sizing:border-box; opacity:0; transition:all 1.2s cubic-bezier(0.25,1,0.5,1) 0.2s; } #sub0201_06 .dtleft h2 { font-size:45px; font-weight:700; color:#2d2117; line-height:1.3; margin-bottom:32px; } #sub0201_06 .dtlist li { font-size:23px; color:#5a524a; font-weight:400; line-height:1.7; padding-left:16px; position:relative; } #sub0201_06 .dtlist li::before { content:'·'; position:absolute; left:0; color:#8a8178; } #sub0201_06 .dtlist2 { width:100%; max-width:704px; font-size:23px; color:#5a524a; font-weight:400; line-height:1.7; position:relative; } #sub0201_06 .dtnote { margin-top:158px; padding-left:22px; border-left:1px solid #4a3c30; } #sub0201_06 .dtnote p { font-size:22px; color:#4a3c30; font-weight:500; line-height:1.85; } #sub0201_06 .dtright { position:absolute; bottom:0%; left:70%; transform:translate(-50%,0%); width:653px; opacity:0; transition:opacity 1.6s cubic-bezier(0.25,1,0.5,1) 0.4s; } #sub0201_06 .dtright img { object-fit:cover; object-position:center top; display:block; } #sub0201_06.active .dtleft { opacity:1; top:50%; } #sub0201_06.active .dtright { opacity:1; } #sub0201_07 { position:relative; width:100%; padding:126px 0 200px; background:#1d1815; overflow:hidden; } #sub0201_07 .linebg { position:absolute; top:157px; left:50%; transform:translate(-50%,0%); width:94%; height:80vh; border-top:1px solid rgba(255,255,255,0.2); } #sub0201_07 .linebg::before { content:''; position:absolute; top:0; left:0; width:1px; height:100%; background:linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(255,255,255,0)); } #sub0201_07 .linebg::after { content:''; position:absolute; top:0; right:0; width:1px; height:100%; background:linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(255,255,255,0)); } #sub0201_07 .whystar1 { position:absolute; top:60px; left:50%; transform:translateX(-50%); width:24px; opacity:0; transition:opacity 1.2s ease 0.2s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.2s; } #sub0201_07 .whystar2 { position:absolute; top:46%; right:6%; width:30px; opacity:0; transition:opacity 1.2s ease 0.8s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.8s; } #sub0201_07.active .whystar1, #sub0201_07.active .whystar2 { opacity:1; } #sub0201_07 .whylogoring { position:absolute; top:184px; right:87px; width:90px; height:90px; opacity:0; transition:opacity 1.2s ease 0.3s; } #sub0201_07 .whylogoring span { position:absolute; top:0; left:0; width:100%; height:100%; } #sub0201_07 .whylogoring span img { width:100%; height:100%; animation:ringRotate 18s linear infinite; } #sub0201_07 .whyringicon { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:28px; height:28px; } #sub0201_07.active .whylogoring { opacity:1; } #sub0201_07 .whywrap { position:relative; width:90%; max-width:1580px; margin:0 auto; } #sub0201_07 .whyhead { opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s; } #sub0201_07 .whysub { display:inline-block; margin-left:-10px; font-size:22px; color:#d6d6d6; font-weight:500; background:#1d1815; padding:0px 10px; line-height:1; margin-bottom:14px; } #sub0201_07 .whyhead h2 { font-size:45px; font-weight:700; color:#ffffff; line-height:1; } #sub0201_07 .whyen { font-family:'Montserrat'; font-size:19px; font-weight:600; color:#b8966a; letter-spacing:0.14em; line-height:1; margin-top:14px; } #sub0201_07 .whycontent { position:relative; width:100%; margin-top:24px; padding-left:55%; box-sizing:border-box; } #sub0201_07 .whyimgbox { position:absolute; top:55%; left:25%; transform:translate(-50%,-50%); width:627px; height:581px; opacity:0; transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.3s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.3s; } #sub0201_07 .whyimgwrap { position:absolute; overflow:hidden; } #sub0201_07 .whyimgwrap img { width:100%; height:100%; object-fit:cover; display:block; } #sub0201_07 .whyimgwrap.img1 { top:0px; right:85px; width:249px; } #sub0201_07 .whyimgwrap.img2 { bottom:0px; left:0px; width:249px; } #sub0201_07 .whycircle { position:absolute; bottom:0px; right:0px; width:136px; height:136px; } #sub0201_07 .whylist { position:relative; width:100%; max-width:544px; } #sub0201_07 .whyitem { padding-top:40px; opacity:0; transform:translateY(20px); transition:opacity 1.1s cubic-bezier(0.25,1,0.5,1), transform 1.1s cubic-bezier(0.25,1,0.5,1); } #sub0201_07 .whyitem:first-child { padding-top:0px; } #sub0201_07 .whyicon { margin-bottom:14px; } #sub0201_07 .whyitem h3 { font-size:26px; font-weight:700; color:#b8966a; margin-bottom:10px; } #sub0201_07 .whyitem p { font-size:18px; font-weight:500; color:#868686; line-height:1.6; } #sub0201_07 .whyitem:nth-child(1) { transition-delay:0.5s; } #sub0201_07 .whyitem:nth-child(2) { transition-delay:0.65s; } #sub0201_07 .whyitem:nth-child(3) { transition-delay:0.8s; } #sub0201_07 .whyitem:nth-child(4) { transition-delay:0.95s; } #sub0201_07.active .whyhead, #sub0201_07.active .whyimgbox { opacity:1; top:50%; } #sub0201_07.active .whyitem { opacity:1; transform:translateY(0); } #sub0201_08 { width:100%; padding:100px 0 120px; background:#ffffff; } #sub0201_08 .prowrap { width:90%; max-width:1450px; margin:0 auto; } #sub0201_08 .prohead { text-align:center; margin-bottom:70px; opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s; } #sub0201_08 .proen { font-family:'Montserrat'; font-size:19px; font-weight:600; color:#65594f; line-height:1; letter-spacing:0.1em; margin-bottom:14px; } #sub0201_08 .prohead h2 { font-size:40px; font-weight:700; color:#2d2d2d; line-height:1; } #sub0201_08 .prosub { font-size:20px; color:#4a4a4c; margin-top:18px; line-height:1; } #sub0201_08 .prolist { display:grid; grid-template-columns:1fr 1fr; column-gap:60px; row-gap:70px; } #sub0201_08 .proitem { opacity:0; transform:translateY(20px); transition:opacity 1.1s cubic-bezier(0.25,1,0.5,1), transform 1.1s cubic-bezier(0.25,1,0.5,1); } #sub0201_08 .proimg { width:100%; border-radius:12px; overflow:Hidden; overflow:hidden; margin-bottom:30px; } #sub0201_08 .proimg img { width:100%; height:100%; object-fit:cover; display:block; } #sub0201_08 .prostep { font-size:20px; font-weight:700; color:#91724a; margin-bottom:10px; } #sub0201_08 .proitem h3 { font-size:30px; font-weight:700; color:#222222; margin-bottom:12px; } #sub0201_08 .prodesc { font-size:22px; color:#686868; line-height:1.5; } #sub0201_08 .proitem:nth-child(1) { transition-delay:0.2s; } #sub0201_08 .proitem:nth-child(2) { transition-delay:0.35s; } #sub0201_08 .proitem:nth-child(3) { transition-delay:0.5s; } #sub0201_08 .proitem:nth-child(4) { transition-delay:0.65s; } #sub0201_08.active .prohead { opacity:1; transform:translateY(0); } #sub0201_08.active .proitem { opacity:1; transform:translateY(0); } #sub0201_09 { width:100%; padding:90px 0 110px; background:#f5f4ee; overflow:hidden; } #sub0201_09 .closingwrap { position:relative; width:90%; max-width:1000px; margin:0 auto; text-align:center; } #sub0201_09 .closingcircle { position:relative; width:658px; height:658px; margin:0 auto; opacity:0; transform:scale(0.92); transition:opacity 1.4s cubic-bezier(0.25,1,0.5,1) 0.1s, transform 1.4s cubic-bezier(0.25,1,0.5,1) 0.1s; } #sub0201_09 .circletext { position:absolute; top:0; left:0; width:100%; height:100%; } #sub0201_09 .circletext span:nth-child(1) { display:block; position:absolute; bottom:0px; left:0px; animation:ringRotate 28s linear infinite; } #sub0201_09 .circletext span:nth-child(2) { display:block; position:absolute; bottom:0px; left:0px; } #sub0201_09 .closinglabel { position:absolute; top:78px; left:50%; transform:translateX(-50%); font-size:22px; font-weight:600; color:#2c2c2c; white-space:nowrap; } #sub0201_09 .closingimg { position:absolute; top:128px; left:50%; transform:translateX(-50%); width:397px; overflow:hidden; } #sub0201_09 .closingimg img { width:100%; display:block; } #sub0201_09 .closingstar1 { position:absolute; left:3%; top:55%; width:57px; opacity:0; transition:opacity 1.2s ease 0.6s; } #sub0201_09 .closingstar2 { position:absolute; right:3%; top:65%; width:25px; opacity:0; transition:opacity 1.2s ease 0.8s; } #sub0201_09 .closingtitle { width:90%; max-width:852px; margin:0 auto; font-family: 'NotoSerifKR'; font-size:52px; font-weight:600; color:#302221; line-height:1; opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.4s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.4s; } #sub0201_09 .closingtitle span:nth-child(1) { display:block; width:100%; text-align:left; } #sub0201_09 .closingtitle span:nth-child(2) { display:block; width:100%; margin-top:24px; text-align:right; } #sub0201_09 .closingdesc { font-size:22px; color:#363636; line-height:1.6; margin-top:34px; opacity:0; transform:translateY(16px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.6s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.6s; } #sub0201_09.active .closingcircle { opacity:1; transform:scale(1); } #sub0201_09.active .closingstar1, #sub0201_09.active .closingstar2 { opacity:1; } #sub0201_09.active .closingtitle, #sub0201_09.active .closingdesc { opacity:1; transform:translateY(0); } #sub0301_06 { width:100%; padding:90px 0 110px; background:#f5f4ee; } #sub0301_06 .perswrap { width:90%; max-width:1576px; margin:0 auto; } #sub0301_06 .pershead { opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s; } #sub0301_06 .persen { font-family:'Montserrat'; font-size:19px; font-weight:600; color:#65594f; letter-spacing:0.14em; margin-bottom:14px; } #sub0301_06 .pershead h2 { font-size:45px; font-weight:700; color:#222222; line-height:1.4; } #sub0301_06 .perssub { font-size:23px; font-weight:500; color:#2d2d2d; line-height:1.6; margin-top:16px; } #sub0301_06 .persbox { position:relative; width:100%; margin-top:50px; background:#ffffff; border-radius:12px; overflow:hidden; box-sizing:border-box; display:flex; gap:0; opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.3s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.3s; } #sub0301_06 .persimgwrap { position:relative; width:50%; overflow:hidden; } #sub0301_06 .persimgwrap img { width:100%; height:100%; object-fit:cover; display:block; } #sub0301_06 .perslist { position:absolute; top:0px; left:52%; width:40%; height:100%; } #sub0301_06 .persitem { position:absolute; left:0px; transform:translateY(-50%); width:100%; padding-left:44px; border-left:1px solid #e3dbd2; } #sub0301_06 .persitem h3 { font-size:clamp(16px, 1.15vw, 22px); font-weight:600; color:#060606; margin-bottom:10px; } #sub0301_06 .persitem p { font-size:clamp(13px, 1.04vw, 20px); font-weight:500; color:#5e5e5e; line-height:1.6; } #sub0301_06 .persitem.persitem1 { top:19%; } #sub0301_06 .persitem.persitem2 { top:45%; } #sub0301_06 .persitem.persitem3 { top:63%; } #sub0301_06 .persitem.persitem4 { top:83%; } #sub0301_06.active .pershead, #sub0301_06.active .persbox { opacity:1; transform:translateY(0); } #sub0401_05 { width:100%; padding:150px 0 110px; background:#f5f4ee; } #sub0401_05 .implantwrap { width:90%; max-width:1576px; margin:0 auto; } #sub0401_05 .implanthead { text-align:center; margin-bottom:60px; opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s; } #sub0401_05 .implanten { font-size:20px; color:#65594f; font-weight:600; margin-bottom:12px; } #sub0401_05 .implanthead h2 { font-family:'Montserrat'; font-size:55px; font-weight:600; color:#000000; letter-spacing:0.02em; } #sub0401_05 .implantlist { display:grid; grid-template-columns:repeat(3, 1fr); column-gap:30px; } #sub0401_05 .implantitem { opacity:0; transform:translateY(20px); transition:opacity 1.1s cubic-bezier(0.25,1,0.5,1), transform 1.1s cubic-bezier(0.25,1,0.5,1); } #sub0401_05 .implantimg { width:100%; overflow:hidden; } #sub0401_05 .implantimg img { width:100%; height:100%; object-fit:cover; display:block; } #sub0401_05 .implantkr { font-size:26px; font-weight:700; color:#8f6732; text-align:center; margin-top:-44px; } #sub0401_05 .implanten2 { font-family:'Montserrat'; font-size:18px; color:#65594f; font-weight:600; text-align:center; margin-top:8px; } #sub0401_05 .implantitem:nth-child(1) { transition-delay:0.2s; } #sub0401_05 .implantitem:nth-child(2) { transition-delay:0.35s; } #sub0401_05 .implantitem:nth-child(3) { transition-delay:0.5s; } #sub0401_05.active .implanthead { opacity:1; transform:translateY(0); } #sub0401_05.active .implantitem { opacity:1; transform:translateY(0); } #sub0401_06 { width:100%; background:#f5f4ee; } #sub0401_06 .motivahead { width:90%; max-width:1576px; margin:0 auto; padding:70px 0 10px; padding-left:54px; border-left:4px solid #d8b8a8; box-sizing:border-box; opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s; } #sub0401_06 .motivasub { font-size:22px; font-weight:500; color:#65594f; line-height:1; margin-bottom:12px; } #sub0401_06 .motivahead h2 { font-size:45px; font-weight:700; color:#222222; line-height:1; } #sub0401_06 .motivavisual { position:relative; width:100%; height:760px; margin-top:50px; background:url('/page_KR0/04_sub/images/0401_06.jpg') no-repeat 50% 50%; background-size:cover; background-attachment: fixed; opacity:0; transition:opacity 1.6s cubic-bezier(0.25,1,0.5,1) 0.3s; } #sub0401_06 .motivabrand { position:absolute; top:50%; left:45%; transform:translateY(-50%); text-align:left; } #sub0401_06 .motivahospital { width:225px; margin:0 auto; margi-bottom:20px; } #sub0401_06 .motivahospital img { width:225px; } #sub0401_06 .motivalogo { height:85px; } #sub0401_06.active .motivahead { opacity:1; transform:translateY(0); } #sub0401_06.active .motivavisual { opacity:1; } #sub0401_07 { width:100%; padding:150px 0 110px; background:#f5f4ee; } #sub0401_07 [name="07wrap"] { width:90%; max-width:1576px; margin:0 auto; } #sub0401_07 .techhead { opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s; } #sub0401_07 .techen { font-family:'Montserrat'; font-size:19px; font-weight:600; color:#65594f; line-height:1; letter-spacing:0.1em; margin-bottom:18px; } #sub0401_07 .techhead h2 { font-size:40px; font-weight:700; color:#2d2d2d; line-height:1; } #sub0401_07 .techsub { font-size:20px; color:#4a4a4c; line-height:1.6; margin-top:30px; } #sub0401_07 .techlist { display:grid; grid-template-columns:repeat(4, 1fr); column-gap:24px; margin-top:60px; } #sub0401_07 .techitem { opacity:0; transform:translateY(20px); transition:opacity 1.1s cubic-bezier(0.25,1,0.5,1), transform 1.1s cubic-bezier(0.25,1,0.5,1); } #sub0401_07 .techimg { width:100%; border-radius:12px; border:1px solid #ffffff; box-sizing:border-box; overflow:hidden; margin-bottom:34px; } #sub0401_07 .techimg img { width:100%; height:100%; object-fit:cover; display:block; } #sub0401_07 .techitem h3 { font-size:25px; font-weight:600; color:#060606; margin-bottom:10px; } #sub0401_07 .techitem p { font-size:20px; color:#646363; line-height:1.6; } #sub0401_07 .techitem:nth-child(1) { transition-delay:0.2s; } #sub0401_07 .techitem:nth-child(2) { transition-delay:0.32s; } #sub0401_07 .techitem:nth-child(3) { transition-delay:0.44s; } #sub0401_07 .techitem:nth-child(4) { transition-delay:0.56s; } #sub0401_07.active .techhead { opacity:1; transform:translateY(0); } #sub0401_07.active .techitem { opacity:1; transform:translateY(0); } #sub0401_08 { width:100%; background:#f5f4ee; } #sub0401_08 .implantdetail { width:100%; } #sub0401_08 .detailitem { display:flex; width:90%; max-width:1576px; margin:0 auto; border-radius:12px; overflow:hidden; margin-bottom:38px; } #sub0401_08 .detailitem { display:flex; width:100%; opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1), transform 1.2s cubic-bezier(0.25,1,0.5,1); } #sub0401_08 .detailitem.active { opacity:1; transform:translateY(0); } #sub0401_08 .detailimg { position:relative; flex:0 0 50%; background:#fffef9; } #sub0401_08 .detailimg img { width:100%; object-fit:contain; } #sub0401_08 .detailtxt { flex:0 0 50%; display:flex; flex-direction:column; justify-content:center; padding:50px 5%; background:#fffef9; box-sizing:border-box; } #sub0401_08 .detailtxt h3 { font-size:25px; font-weight:700; color:#060606; margin-bottom:18px; } #sub0401_08 .detailtxt p { font-size:21px; color:#4a4a4c; line-height:1.6; } #sub0401_08 .detailtaglist { display:flex; flex-wrap:wrap; gap:10px; margin-top:30px; } #sub0401_08 .detailtaglist li { font-size:20px; color:#826478; font-weight:500; background:#ede7dd; padding:8px 18px; border-radius:6px; } #sub0401_08 .lineupwatermark { width:100%; overflow:hidden; padding:40px 0; } #sub0401_08 .lineupwatermark p { white-space:nowrap; font-family: "Dream Avenue"; font-size:clamp(60px, 8.5vw, 8.5vw); color:rgba(0,0,0,0.18); letter-spacing:0.4em; margin-left:-2%; opacity:0; transition:letter-spacing 2s cubic-bezier(0.16,1,0.3,1) 0.2s, opacity 1.5s ease 0.2s; } #sub0401_08 .lineupwatermark.active p { letter-spacing:0.06em; opacity:1; } #sub0401_09 { width:100%; padding:90px 0 110px; background:#f5f4ee; } #sub0401_09 .positionhead { width:90%; max-width:1576px; margin:0 auto 60px; padding:60px 0 10px; padding-left:30px; border-left:4px solid #d8b8a8; box-sizing:border-box; opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s; } #sub0401_09 .positionsub { font-size:22px; font-weight:500; color:#65594f; line-height:1; margin-bottom:14px; } #sub0401_09 .positionhead h2 { font-size:45px; font-weight:700; color:#222222; line-height:1; } #sub0401_09 .positionlist { display:grid; grid-template-columns:repeat(3, 1fr); column-gap:40px; row-gap:110px; width:90%; max-width:1576px; margin:0 auto; } #sub0401_09 .positionitem { opacity:0; transform:translateY(20px); transition:opacity 1.1s cubic-bezier(0.25,1,0.5,1), transform 1.1s cubic-bezier(0.25,1,0.5,1); } #sub0401_09 .positionimg { width:100%; overflow:hidden; margin-bottom:34px; } #sub0401_09 .positionimg img { width:100%; height:100%; object-fit:cover; display:block; } #sub0401_09 .positionitem h3 { font-size:25px; font-weight:700; color:#060606; margin-bottom:12px; } #sub0401_09 .positionitem p { font-size:21px; color:#4a4a4c; font-weight:500; line-height:1.6; } #sub0401_09 .positiontag { display:inline-block; font-size:20px; color:#826478; font-weight:500; background:#ede7dd; padding:8px 18px; border-radius:6px; margin-top:18px; } #sub0401_09 .positionitem:nth-child(1) { transition-delay:0.2s; } #sub0401_09 .positionitem:nth-child(2) { transition-delay:0.3s; } #sub0401_09 .positionitem:nth-child(3) { transition-delay:0.4s; } #sub0401_09 .positionitem:nth-child(4) { transition-delay:0.2s; } #sub0401_09 .positionitem:nth-child(5) { transition-delay:0.3s; } #sub0401_09 .positionitem:nth-child(6) { transition-delay:0.4s; } #sub0401_09.active .positionhead { opacity:1; transform:translateY(0); } #sub0401_09.active .positionitem { opacity:1; transform:translateY(0); } #sub0402_01 { width:100%; padding:150px 0 140px; background:#f5f4ee; } #sub0402_01 .lineuphead { text-align:center; margin-bottom:60px; opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s; } #sub0402_01 .brandtxt { font-size:20px; color:#65594f; font-weight:500; margin-bottom:10px; } #sub0402_01 .lineuphead h2 { font-family:'Montserrat'; font-size:45px; font-weight:600; color:#000000; letter-spacing:0.02em; } #sub0402_01 .lineuphead.active { opacity:1; transform:translateY(0); } #sub0402_01 .methodbox { width:90%; max-width:1576px; margin:0 auto; padding:60px 70px; opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.3s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.3s; } #sub0402_01 .methodbox.active { opacity:1; transform:translateY(0); } #sub0402_01 .methodtitle { position:relative; padding-left:44px; border-left:4px solid #d8b8a8; } #sub0402_01 .methodtitle h3 { font-size:40px; font-weight:700; color:#2d2d2d; margin-bottom:14px; } #sub0402_01 .methodtitle p { font-size:21px; font-weight:500; color:#4a4a4c; line-height:1.6; } #sub0402_01 .gradeimglist { display:grid; grid-template-columns:repeat(4, 1fr); column-gap:24px; margin-top:40px; } #sub0402_01 .gradeimglist.grid2 { grid-template-columns:repeat(2, 1fr); column-gap:25px; margin-top:40px; } #sub0402_01 .gradeimglist.methodgap { margin-top:60px; } #sub0402_01 .gradeimg { width:100%; overflow:hidden; border-radius:12px; margin-bottom:30px; } #sub0402_01 .gradeimg img { width:100%; height:100%; object-fit:cover; display:block; } #sub0402_01 .gradeimglist h4 { font-size:25px; font-weight:700; color:#060606; margin-bottom:10px; } #sub0402_01 .gradeimglist p { font-size:20px; font-weight:400; color:#646363; line-height:1.4; } #sub0402_01 .gradeimglist.methodgap li { background:#ffffff; border-radius:12px; overflow:hidden; } #sub0402_01 .gradeimglist.methodgap li h4 { width:86%; margin:0 auto; margin-bottom:10px; } #sub0402_01 .gradeimglist.methodgap li p { width:86%; margin:0 auto; padding-bottom:30px; } #sub0402_01 .lineupstar { display:none; text-align:center; width:90%; max-width:1576px; margin:60px auto 0; font-size:24px; color:rgba(170,140,100,0.6); } #sub0402_01 .lineupwatermark { width:100%; overflow:hidden; margin-top:20px; opacity:0; transition:opacity 1.5s ease 0.2s; } #sub0402_01 .lineupwatermark p { white-space:nowrap; font-family:'Orpheus Pro'; font-size:clamp(60px, 9vw, 130px); color:rgba(0,0,0,0.18); letter-spacing:0.4em; padding-left:4%; transition:letter-spacing 2s cubic-bezier(0.16,1,0.3,1) 0.2s; } #sub0402_01 .lineupwatermark.active { opacity:1; } #sub0402_01 .lineupwatermark.active p { letter-spacing:0.06em; } #sub0501_03 { width:100%; padding:150px 0 140px; background:#faf6ed; } #sub0501_03 .subtxt { width:100%; text-align:center; } #sub0501_03 .subtxt .t1 { font-size:20px; color:#65594f; font-weight:500; margin-bottom:10px; } #sub0501_03 .subtxt .t2 { font-family:'Montserrat'; font-size:45px; font-weight:600; color:#000000; letter-spacing:0.02em; } #sub0501_03 .sub0501_03 { position:relative; width:100%; height:912px; margin-top:50px; background:url('/page_KR0/05_sub/images/0501_03.jpg') no-repeat 50% 50%; background-size:cover; background-attachment: fixed; } #sub0501_03 .sub0502_03 { position:relative; width:100%; height:912px; margin-top:50px; background:url('/page_KR0/05_sub/images/0502_03.jpg') no-repeat 50% 50%; background-size:cover; background-attachment: fixed; } .ulthera-prime-wrap { width: 90%; max-width: 1578px; padding:100px 56px; box-sizing:border-box; margin: 70px auto 0; text-align: left; background:#fffef9; } .prime-head { padding-left: 44px; border-left: 4px solid #91724a; margin-bottom: 8px; opacity: 0; transform: translateY(20px); transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.1s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.1s; } .prime-title { font-size: 40px; font-weight: 700; color: #2d2d2d; margin-bottom: 20px; letter-spacing: -0.01em; } .prime-desc { font-size: 21px; color: #4a4a4c; line-height: 1.6; word-break: keep-all; } .prime-body { display: flex; gap: 70px; margin-top: 60px; padding-left:48px; box-sizing:border-box; } .prime-img-col { flex: 0 0 46%; max-width: 650px; opacity: 0; transform: translateX(-40px); transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0.3s, transform 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; } .prime-img-col img { width: 100%; height: auto; display: block; } .prime-text-col { flex: 1; opacity: 0; transform: translateY(30px); transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0.5s, transform 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0.5s; } .feature-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 50px; padding-top:16px; } .feature-list li { position: relative; padding-left: 12px; font-size: 20px; color: #676767; font-weight: 500; } .feature-list li::before { content: ''; position: absolute; left: 0; top:8px; width: 4px; height: 4px; background: #676767; border-radius: 50%; } .feature-list span { display:inline-block; width:60px; color: #97784f; } .feature-list.feature-list2 li::before { background: #97784f; } .feature-list.feature-list3 span { display:inline-block; width:134px; color: #97784f; } .recommend-box h4 { font-size: 23px; font-weight: 600; color: #97784f; margin-bottom: 24px; letter-spacing: -0.01em; } .recommend-list { display: flex; flex-direction: column; gap: 14px; } .recommend-list li { position: relative; padding-left: 14px; font-size: 20px; font-weight: 500; color: #333333; line-height: 1; } .recommend-list li::before { content: ''; position: absolute; left: 0; top: 8px; width: 4px; height: 4px; background: #333333; border-radius: 50%; } /* ===== [Motion] 스크롤 시 활성화되는 클래스 ===== */ .active .prime-head { opacity: 1; transform: translateY(0); } .active .prime-img-col { opacity: 1; transform: translateX(0); } .active .prime-text-col { opacity: 1; transform: translateY(0); } #sub0501_04 { width: 100%; padding-bottom: 120px; background: #faf6ed; } #sub0501_04 .subtxt { width: 90%; max-width: 1578px; margin: 0 auto; margin-bottom: 60px; opacity: 0; transform: translateY(20px); transition: opacity 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.1s, transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) 0.1s; } #sub0501_04 .subtxt .t1 { font-family:'Montserrat'; font-size:19px; font-weight:600; color:#65594f; letter-spacing:0.02em; } #sub0501_04 .subtxt .t2 { font-size: 45px; font-weight:700; color: #222222; line-height: 1; margin-top: 20px; word-break: keep-all; } #sub0501_04 .subtxt .t3 { font-size: 23px; font-weight:500; color: #2d2d2d; line-height: 1.5; margin-top: 20px; word-break: keep-all; } .compare-table-wrap { width: 90%; max-width: 1578px; margin: 0 auto; border-radius:8px; overflow:hidden; opacity: 0; transform: translateY(30px); transition: opacity 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0.3s, transform 1.4s cubic-bezier(0.25, 1, 0.5, 1) 0.3s; } .table-scroll-box { width: 100%; } .compare-table { width: 100%; border-collapse: collapse; table-layout: fixed; background: #ffffff; } .compare-table th { background: #d7ccb9; color: #000000; font-size: 23px; font-weight: 600; padding: 24px 10px; border-right: 1px solid #e5dfd8; text-align: center; } .compare-table td { font-size: 22px; color: #333333; padding: 22px 10px; border-right: 1px solid #e5e2df; border-bottom: 1px solid #e5e2df; text-align: center; font-weight: 500; } .compare-table td.lbl { background: #eeedeb; color: #4a4a4c; font-weight: 600; } .compare-table tr:last-child td { border-bottom:0px; } .compare-table tr td:last-child { border-right:0px; } .dot-active { display: inline-block; width: 14px; height: 14px; background: #be9d73; border-radius: 50%; vertical-align: middle; } .dot-inactive { display: inline-block; width: 14px; height: 14px; background: #ebdcc9; border-radius: 50%; vertical-align: middle; } #sub0501_04.active .subtxt { opacity: 1; transform: translateY(0); } #sub0501_04.active .compare-table-wrap { opacity: 1; transform: translateY(0); } #sub0701_01 { width:100%; padding:150px 0 120px; background:#faf6ed; } #sub0701_01 .sub0704_01 { position:relative; width:100%; height:912px; margin-top:50px; background:url('/page_KR0/07_sub/images/0704_01.jpg') no-repeat 50% 50%; background-size:cover; background-attachment: fixed; } #sub0701_01 .lineuphead { text-align:center; margin-bottom:60px; opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s, transform 1.2s cubic-bezier(0.25,1,0.5,1) 0.1s; } #sub0701_01 .lineuphead.active { opacity:1; transform:translateY(0); } #sub0701_01 .brandtxt { font-size:20px; font-weight:500; color:#65594f; margin-bottom:10px; line-height:1; } #sub0701_01 .lineuphead h2 { font-family:'Montserrat'; font-size:55px; font-weight:600; color:#000000; letter-spacing:0.02em; line-height:1; } #sub0701_01 .injectbox { width:90%; max-width:1576px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; column-gap:40px; } #sub0701_01 .injectbox.injectbox2 { margin-top:40px; } #sub0701_01 .injectitem { display:flex; background:#fdf8f0; opacity:0; transform:translateY(20px); transition:opacity 1.2s cubic-bezier(0.25,1,0.5,1), transform 1.2s cubic-bezier(0.25,1,0.5,1); } #sub0701_01 .injectitem:nth-child(1) { transition-delay:0.2s; } #sub0701_01 .injectitem:nth-child(2) { transition-delay:0.35s; } #sub0701_01 .injectitem.active { opacity:1; transform:translateY(0); } #sub0701_01 .injectimg { width:50%; border-radius:8px; overflow:hidden; } #sub0701_01 .injectimg img { width:100%; height:100%; object-fit:cover; display:block; } #sub0701_01 .injecttxt { width:50%; padding:40px 44px 50px; background:#f6efe0; border-radius:8px; box-sizing:border-box; } #sub0701_01 .injecttxt h3 { font-size:26px; font-weight:600; color:#8f6732; margin-bottom:16px; } #sub0701_01 .injecttxt h3 span { display:block; font-family:'Montserrat'; font-size:18px; font-weight:600; color:#65594f; margin-top:4px; } #sub0701_01 .injecttxt p { font-size:18px; font-weight:400; color:#676767; line-height:1.7; } #sub0701_01 .injecttaglist { display:flex; flex-direction:column; gap:10px; margin-top:24px; } #sub0701_01 .injecttaglist li { display:inline-block; font-size:18px; color:#676767; background:#ffffff; padding:8px 20px; border-radius:6px; width:fit-content; } #sub0701_01 .injectbox.active .injectitem { opacity:1; transform:translateY(0); } /* 🌟 상담예약 페이지 폼 영역 */ .sub06_01 { width:100%; padding:80px 0; background:#f8f8f5; } .sub06_01 .inner-wrap { width:90%; max-width:718px; margin:0 auto; } /* 폼이 너무 넓어지지 않게 최대 가로폭 900px 고정 */ /* 입력창 공통 스타일 */ .sub06_01 .reserve-form .form-row { margin-bottom:20px; } .sub06_01 .reserve-form label { display:none; font-size:0px; } .sub06_01 .reserve-form .f-input { width:100%; height:75px; padding:0 30px; border:1px solid #b7ada1; border-radius:4px; font-size:18px; background:#fafafa; box-sizing:border-box; outline:none; color:#333; font-family:'Pretendard', sans-serif; transition:border-color 0.3s; } .sub06_01 .reserve-form .f-textarea { width:100%; height:280px; padding:30px; border:1px solid #b7ada1; border-radius:4px; font-size:18px; background:#fafafa; box-sizing:border-box; outline:none; color:#333; font-family:'Pretendard', sans-serif; resize:none; transition:border-color 0.3s; } .sub06_01 .reserve-form .f-input:focus, .sub06_01 .reserve-form .f-textarea:focus { border-color:#1e241f; } .sub06_01 .reserve-form input::placeholder, .sub06_01 .reserve-form textarea::placeholder { color:#888; font-weight:400; } /* 동의 체크박스 (우측 정렬 & 커스텀 동그라미) */ .sub06_01 .reserve-form .agree-row { text-align:right; margin:15px 0 40px; } .sub06_01 .reserve-form .custom-chk { display:inline-flex; align-items:center; cursor:pointer; } .sub06_01 .reserve-form .custom-chk input { display:none; } /* 기본 네모 체크박스 숨김 */ .sub06_01 .reserve-form .chk-mark { width:22px; height:22px; background:#d2d2d2; border-radius:50%; margin-right:10px; transition:background-color 0.3s; display:inline-block; } .sub06_01 .reserve-form .custom-chk input:checked + .chk-mark { background:#1e241f; } /* 체크 시 진녹색으로 변경 */ .sub06_01 .reserve-form .chk-txt { font-size:16px; color:#444; font-weight:500; } /* 신청하기 버튼 */ .sub06_01 .reserve-form .btn-submit { width:100%; height:90px; background:#1e241f; color:#ffffff; font-size:24px; font-weight:500; border:none; border-radius:2px; cursor:pointer; transition:background-color 0.3s; letter-spacing:1px; } .sub06_01 .reserve-form .btn-submit:hover { background:#000000; } /* 날짜 시간 선택 */ .sub06_01 .reserve-form .dt-trigger { display:flex; align-items:center; gap:8px; background:#fafafa; border:1px solid #b7ada1; border-radius:4px; padding:0 30px; height:75px; cursor:pointer; font-size:18px; color:#888; box-sizing:border-box; transition:border-color 0.3s; position:relative; } .sub06_01 .reserve-form .dt-trigger:hover { border-color:#1e241f; } .sub06_01 .reserve-form .dt-trigger.selected { color:#333; } .sub06_01 .reserve-form .dt-panel { display:none; position:absolute; z-index:99999; background:#fff; border:1px solid #ddd; border-radius:10px; width:100%; top:calc(100% + 4px); left:0; box-shadow:0 4px 16px rgba(0,0,0,0.12); } .sub06_01 .reserve-form .dt-panel-header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #f0f0f0; } .sub06_01 .reserve-form .dt-nav-btn { background:none; border:none; cursor:pointer; font-size:20px; color:#666; } .sub06_01 .reserve-form .dt-month-label { font-size:15px; font-weight:600; color:#222; } .sub06_01 .reserve-form .dt-grid { display:grid; grid-template-columns:repeat(7,1fr); padding:8px 10px; gap:2px; } .sub06_01 .reserve-form .dt-time-panel { display:none; border-top:1px solid #f0f0f0; padding:10px 12px; } .sub06_01 .reserve-form .dt-time-title { font-size:12px; color:#888; margin-bottom:8px; } .sub06_01 .reserve-form .dt-time-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }