@charset "utf-8";

html,
body {width: 100%;height: 100%;background: #f5f8fc;overflow: hidden;}

*,
*:before,
*:after {box-sizing: border-box;}

body {margin: 0;font-family: "pretendard", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;color: #15365a;}

a {text-decoration: none;color: inherit;}

.intro-page {display: flex;height: 100vh;flex-direction: column;background: #f6f9fd;}

.intro-wrap {width: min(1660px, calc(100% - 120px));margin: 0 auto;}

.intro-header {height: 100px;background: rgba(255,255,255,.96);box-shadow: 0 1px 0 rgba(19,64,109,.06);}
.intro-header .intro-wrap {display: flex;align-items: center;justify-content: space-between;height: 100%;}
.intro-logo {display: inline-flex;align-items: center;}
.intro-logo img {display: block;width: 398px;height: auto;}

.intro-actions {display: flex;align-items: center;gap: 18px;}
.intro-action,
.intro-language button {display: inline-flex;align-items: center;justify-content: center;height: 40px;border-radius: 8px;font-size: 17px;font-weight: 800;letter-spacing: -0.02em;white-space: nowrap;}
.intro-action.reservation {min-width: 152px;padding: 0 18px;background: linear-gradient(90deg, #1677c8 0%, #154b86 100%);color: #fff;box-shadow: 0 5px 12px rgba(21,84,139,.24);}
.intro-action.kakao {min-width: 150px;padding: 0 16px;background: #ffd900;color: #201a00;box-shadow: 0 5px 12px rgba(128,105,0,.18);}
.intro-action.kakao img {display: block;width: 28px;height: 28px;margin-right: 7px;object-fit: contain;}
.intro-action.result {min-width: 150px;padding: 0 16px;border: 1px solid #43c5b4;background: #fff;color: #15548b;box-shadow: 0 5px 12px rgba(67,197,180,.16);}
.intro-language {position: relative;width: 150px;}
.intro-language button {width: 100%;border: 1px solid #15548b;background: #fff;color: #15548b;cursor: pointer;}
.intro-language button span {width: 0;height: 0;margin-left: 11px;border-left: 5px solid transparent;border-right: 5px solid transparent;border-top: 6px solid #15548b;}
.intro-language ul {position: absolute;right: 0;top: calc(100% + 8px);z-index: 20;display: grid;width: 100%;margin: 0;padding: 8px;list-style: none;border: 1px solid #d8e4f0;border-radius: 10px;background: #fff;box-shadow: 0 12px 24px rgba(16,44,72,.14);opacity: 0;visibility: hidden;transform: translateY(-6px);transition: .18s;}
.intro-language:hover ul,
.intro-language:focus-within ul {opacity: 1;visibility: visible;transform: translateY(0);}
.intro-language a {display: block;padding: 8px 10px;border-radius: 6px;font-size: 14px;font-weight: 700;color: #15548b;}
.intro-language a:hover {background: #eef6fd;}

.intro-main {position: relative;flex: 1;background: url("../images/intro/intro_bg.png") center / cover no-repeat;overflow: hidden;}

.intro-hero {position: relative;z-index: 1;display: grid;grid-template-columns: minmax(420px, .9fr) minmax(620px, 1fr);gap: 80px;align-items: center;min-height: 100%;padding: 72px 0 74px;}

#intro-title {margin: 0 0 56px;font-family: "SUIT Variable", "SUIT", "pretendard", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif;font-style: normal;letter-spacing: 0 !important;word-spacing: 0 !important;color: #154b86;font-kerning: normal;}
#intro-title span {display: block;font-family: inherit;font-style: normal;color: #154b86;letter-spacing: 0 !important;word-spacing: 0 !important;}
#intro-title .title-secondary {white-space: nowrap;}
#intro-title .title-primary {font-size: 80px;font-weight: 700;line-height: 85px;}
#intro-title .title-secondary {font-size: 60px;font-weight: 600;line-height: 85px;}
.intro-copy p {margin: 0 0 44px;font-size: 26px;font-weight: 400;line-height: 1.62;letter-spacing: -0.045em;color: #1d3043;}
.intro-copy .intro-tagline {display: block;font-size: 16px;font-weight: 600;letter-spacing: .14em;color: rgba(45,45,45,.38);white-space: nowrap;}

.intro-centers {display: grid;grid-template-columns: repeat(3, minmax(0, 1fr));gap: 20px;}
.center-card {--card-accent: #1979ad;--card-border: rgba(67,197,180,.9);--hover-bg: linear-gradient(180deg, #155b8c 0%, #1979ad 100%);position: relative;z-index: 0;display: flex;min-height: 230px;flex-direction: column;justify-content: center;overflow: hidden;padding: 36px 30px;border: 1px solid rgba(255,255,255,.86);border-radius: 15px;background: rgba(255,255,255,.66);box-shadow: 0 18px 45px rgba(62,115,173,.1), inset 0 1px 0 rgba(255,255,255,.72);backdrop-filter: blur(7px);transition: transform .28s cubic-bezier(.2,.72,.22,1), box-shadow .28s ease, background .28s ease, border-color .28s ease;}
.center-card.is-medical {--card-accent: #176aa6;--card-border: rgba(23,106,166,.72);--reserve-color: #0f5288;--hover-bg: linear-gradient(145deg, rgba(18,74,130,.88) 0%, rgba(35,138,184,.76) 100%);}
.center-card.is-skin {--card-accent: #c7608d;--card-border: rgba(199,96,141,.72);--reserve-color: #a83e70;--hover-bg: linear-gradient(145deg, rgba(177,74,117,.78) 0%, rgba(224,138,171,.68) 100%);}
.center-card.is-vascular {--card-accent: #208775;--card-border: rgba(32,135,117,.72);--reserve-color: #126a5d;--hover-bg: linear-gradient(145deg, rgba(18,106,101,.82) 0%, rgba(52,166,124,.7) 100%);}
.center-card.is-health {--card-accent: #b98324;--card-border: rgba(185,131,36,.72);--reserve-color: #936018;--hover-bg: linear-gradient(145deg, rgba(171,116,25,.8) 0%, rgba(220,174,82,.68) 100%);}
.center-card.is-kidney {--card-accent: #4e68b5;--card-border: rgba(78,104,181,.72);--reserve-color: #314f9d;--hover-bg: linear-gradient(145deg, rgba(55,78,150,.84) 0%, rgba(117,145,215,.68) 100%);}
.center-card.is-stem {--card-accent: #7c68b7;--card-border: rgba(124,104,183,.72);--reserve-color: #624aa0;--hover-bg: linear-gradient(145deg, rgba(94,74,154,.8) 0%, rgba(159,137,211,.68) 100%);}
.center-card:before {content: "";position: absolute;inset: 0;z-index: 0;border-radius: inherit;background: var(--hover-bg, linear-gradient(180deg, #155b8c 0%, #1979ad 100%));opacity: 0;transition: opacity .3s ease;}
.center-card:hover,
.center-card:focus {border-color: var(--card-border);background: rgba(255,255,255,.9);box-shadow: 0 26px 58px rgba(21,84,139,.26), 0 9px 18px rgba(21,84,139,.12), inset 0 1px 0 rgba(255,255,255,.45);transform: translateY(-4px) scale(1.012);outline: 0;}
.center-card:hover:before,
.center-card:focus:before {opacity: 1;}
.center-card .card-icon {position: absolute;left: 30px;top: 30px;z-index: 1;display: inline-flex;align-items: center;justify-content: center;width: 42px;height: 42px;transition: opacity .22s ease, transform .22s ease;}
.center-card .card-icon img {display: block;max-width: 100%;max-height: 100%;object-fit: contain;filter: saturate(1.55) contrast(1.1);}
.center-card .num {position: absolute;right: 0;top: 0;z-index: 1;display: flex;align-items: flex-start;justify-content: flex-end;width: 86px;height: 86px;padding: 14px 14px 0 0;background: var(--hover-bg);clip-path: polygon(0 0, 100% 0, 100% 100%);font-family: "Noto Sans KR", "pretendard", "Malgun Gothic", Arial, sans-serif;font-size: 23px;font-style: normal;font-weight: 900;line-height: 1;color: #fff;letter-spacing: .04em;text-shadow: 0 2px 10px rgba(0,0,0,.18);box-shadow: inset 12px -12px 20px rgba(255,255,255,.18), inset -8px 8px 18px rgba(17,54,89,.12);filter: drop-shadow(-9px 11px 13px rgba(21,84,139,.2));transform-origin: right top;transition: opacity .28s ease, transform .38s cubic-bezier(.2, .72, .2, 1), filter .28s ease;}
.center-card .num:before {content: "";position: absolute;right: 0;top: 0;width: 100%;height: 100%;background: radial-gradient(circle at 88% 12%, rgba(255,255,255,.48) 0%, rgba(255,255,255,.18) 30%, rgba(255,255,255,0) 62%), linear-gradient(135deg, rgba(255,255,255,.32) 0%, rgba(255,255,255,.1) 42%, rgba(255,255,255,0) 70%);clip-path: polygon(0 0, 100% 0, 100% 100%);pointer-events: none;}
.center-card strong {position: relative;z-index: 1;display: block;width: 220px;max-width: 100%;margin-top: 42px;font-family: "Noto Sans KR", "pretendard", "Malgun Gothic", Arial, sans-serif;font-size: 35px;font-style: normal;font-weight: 700;line-height: normal;letter-spacing: 1.75px;color: #154b86;word-break: keep-all;transition: color .22s ease, margin .22s ease, font-size .22s ease, letter-spacing .22s ease, transform .22s ease;}
.center-card.is-medical strong {width: 220px;letter-spacing: 2.36em;}
.center-card.is-skin strong {width: 220px;letter-spacing: .68em;}
.center-card.is-vascular strong,
.center-card.is-health strong,
.center-card.is-kidney strong,
.center-card.is-stem strong {letter-spacing: .68em;}
.center-card .branch-buttons {position: absolute;left: 22px;right: 22px;bottom: 22px;z-index: 1;display: grid;grid-template-columns: 1fr;gap: 8px;margin-top: 0;opacity: 0;transform: translateY(18px) scale(.98);transition: opacity .26s ease .12s, transform .34s cubic-bezier(.2, .72, .2, 1) .12s;}
.center-card .branch-buttons.three {grid-template-columns: 1fr;}
.center-card .branch-buttons span {display: inline-flex;align-items: center;justify-content: center;width: 100%;height: 34px;padding: 0 12px;border-radius: 6px;border: 1px solid rgba(255,255,255,.36);background: rgba(255,255,255,.1);color: #fff;font-size: 14px;font-weight: 800;line-height: 1;letter-spacing: -0.02em;white-space: nowrap;cursor: pointer;}
.center-card .branch-buttons .reserve {border-color: transparent;border-radius: 6px;background: #fff;color: var(--reserve-color, #176194);}
.center-card:hover strong,
.center-card:focus strong {color: #fff;}
.center-card:hover .card-icon,
.center-card:focus .card-icon {opacity: 0;transform: translateY(-8px) scale(.94);}
.center-card:hover .num,
.center-card:focus .num {opacity: 0;filter: blur(.1px) drop-shadow(-4px 6px 8px rgba(21,84,139,.12));transform: translate(9px, -9px) scale(1.18);}
.center-card:hover strong,
.center-card:focus strong {width: auto;margin-top: 0;padding-left: 0;text-align: center;font-size: 29px;line-height: 1.2;letter-spacing: .12em;transform: translateY(-58px);}
.center-card:hover .branch-buttons,
.center-card:focus .branch-buttons {opacity: 1;transform: translateY(0) scale(1);}

.intro-footer {background: #f4f6fa;border-top: 1px solid rgba(19,64,109,.08);}
.footer-grid {display: grid;grid-template-columns: minmax(350px, 1fr) minmax(560px, 1fr);align-items: center;gap: 50px;min-height: 168px;padding: 28px 0;}
.footer-brand {width: fit-content;max-width: 100%;}
.footer-brand img {display: block;width: 368px;max-width: 100%;height: auto;}
.footer-brand p {width: 368px;max-width: 100%;margin: 12px 0 0;font-size: 15px;font-weight: 600;letter-spacing: .02em;word-spacing: .1em;color: rgba(45,45,45,.16);white-space: nowrap;}
.footer-info {text-align: right;color: #164d8b;}
.footer-info p {margin: 0 0 14px;font-size: 15px;font-weight: 700;line-height: 1.5;letter-spacing: -0.02em;}
.footer-info p span {display: inline-block;margin-left: 46px;}
.footer-info .copy {margin: 12px 0 0;font-size: 12px;font-weight: 500;color: rgba(22,77,139,.38);}

@media screen and (max-width: 1280px) {
	html,
	body {height: auto;min-height: 100%;overflow-y: auto;}
	body {overflow-x: hidden;}
	.intro-page {height: auto;min-height: 100vh;}
	.intro-main {overflow: visible;}
	.intro-wrap {width: min(100% - 64px, 1120px);}
	.intro-logo img {width: 330px;}
	.intro-hero {grid-template-columns: 1fr;gap: 54px;min-height: 0;padding: 64px 0;}
	.intro-copy h1 {margin-bottom: 32px;}
	.intro-centers {grid-template-columns: repeat(3, minmax(0, 1fr));}
	.center-card {min-height: 188px;}
	.center-card strong {width: 188px;font-size: 30px;font-weight: 700;letter-spacing: 1.5px;}
	.center-card.is-medical strong {width: 188px;letter-spacing: 2.32em;}
	.center-card.is-skin strong {width: 188px;letter-spacing: .66em;}
	.center-card.is-vascular strong,
	.center-card.is-health strong,
	.center-card.is-kidney strong,
	.center-card.is-stem strong {letter-spacing: .66em;}
	.center-card:hover strong,
	.center-card:focus strong {padding-left: 0;font-size: 25px;letter-spacing: .1em;transform: translateY(-58px);}
}

@media screen and (max-width: 860px) {
	.intro-wrap {width: calc(100% - 32px);}
	.intro-header {height: auto;}
	.intro-header .intro-wrap {flex-direction: column;align-items: flex-start;gap: 18px;padding: 22px 0;}
	.intro-logo img {width: min(100%, 310px);}
	.intro-actions {width: 100%;gap: 8px;flex-wrap: wrap;}
	.intro-action,
	.intro-language button {height: 38px;font-size: 14px;}
	.intro-action.reservation,
	.intro-action.kakao,
	.intro-action.result,
	.intro-language {flex: 1 1 calc(50% - 8px);min-width: 0;}
	.intro-language {width: auto;}
	#intro-title .title-primary {font-size: 52px;line-height: 1.18;}
	#intro-title .title-secondary {font-size: clamp(32px, 5.1vw, 40px);line-height: 1.25;}
	.intro-copy p {font-size: clamp(17px, 2.5vw, 20px);}
	.intro-copy p br {display: block;}
	.intro-copy .intro-tagline {font-size: clamp(11px, 1.9vw, 12px);letter-spacing: .08em;}
	.intro-centers {grid-template-columns: repeat(2, minmax(0, 1fr));gap: 12px;}
	.center-card {min-height: 176px;padding: 22px 18px 18px;border-radius: 13px;background: var(--hover-bg);}
	.center-card:before {opacity: 1;}
	.center-card .num,
	.center-card .card-icon {display: none;}
	.center-card strong {display: block;width: 100%;margin: 0 0 10px;padding-left: .08em;box-sizing: border-box;text-align: center;font-size: 22px;font-weight: 700;line-height: 1.25;letter-spacing: .08em;text-indent: 0;color: #fff;transform: none;}
	.center-card.is-medical strong,
	.center-card.is-skin strong,
	.center-card.is-vascular strong,
	.center-card.is-health strong,
	.center-card.is-kidney strong,
	.center-card.is-stem strong {width: 100%;max-width: 100%;letter-spacing: .08em;text-indent: 0;}
	.center-card:hover strong,
	.center-card:focus strong {font-size: 22px;letter-spacing: .08em;text-indent: 0;transform: none;}
	.center-card .branch-buttons {position: relative;left: auto;right: auto;bottom: auto;grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));gap: 6px;width: 100%;margin-top: auto;opacity: 1;transform: none;}
	.center-card .branch-buttons.three {grid-template-columns: repeat(3, minmax(0, 1fr));}
	.center-card .branch-buttons span {min-width: 0;height: 30px;padding: 0 8px;border-radius: 8px;font-size: 12px;}
	.footer-grid {display: block;min-height: 0;padding: 30px 0;}
	.footer-brand img {width: 300px;}
	.footer-brand p {width: 300px;}
	.footer-brand p {font-size: clamp(13px, 2.5vw, 15px);letter-spacing: 0;word-spacing: .08em;}
	.footer-info {margin-top: 26px;text-align: left;}
	.footer-info p {font-weight: 600;line-height: 1.55;}
	.footer-info p strong {font-weight: 700;}
	.footer-info p span {display: block;margin: 8px 0 0;}
}

@media screen and (max-width: 640px) {
	.intro-centers {grid-template-columns: 1fr;gap: 14px;}
	.center-card {min-height: 150px;}
}

@media screen and (max-width: 480px) {
	.intro-wrap {width: calc(100% - 20px);}
	.intro-hero {gap: 28px;padding: 34px 0 18px;}
	#intro-title {margin-bottom: 28px;}
	#intro-title .title-primary {font-size: 42px;}
	#intro-title .title-secondary {font-size: clamp(24px, 7.5vw, 30px);line-height: 1.28;}
	.intro-copy p {margin-bottom: 28px;font-size: clamp(13px, 4.15vw, 17px);line-height: 1.7;white-space: nowrap;}
	.intro-copy .intro-tagline {font-size: clamp(10.5px, 3.25vw, 12px);letter-spacing: .045em;}
	.footer-brand p {font-size: clamp(12px, 3.65vw, 14px);letter-spacing: 0;word-spacing: .035em;}
	.footer-info p {font-size: 14px;font-weight: 600;line-height: 1.6;}
	.intro-centers {grid-template-columns: 1fr;gap: 12px;}
	.center-card {min-height: 132px;border-radius: 10px;padding: 18px 16px 12px;}
	.center-card strong {margin-bottom: 7px;font-size: 22px;line-height: 1.25;}
	.center-card.is-medical strong,
	.center-card.is-skin strong,
	.center-card.is-vascular strong,
	.center-card.is-health strong,
	.center-card.is-kidney strong,
	.center-card.is-stem strong {width: 100%;max-width: 100%;letter-spacing: .08em;text-indent: 0;}
	.center-card .branch-buttons {left: auto;right: auto;bottom: auto;grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));gap: 5px;}
	.center-card .branch-buttons.three {grid-template-columns: repeat(3, minmax(0, 1fr));}
	.center-card .branch-buttons span {height: 28px;padding: 0 6px;border-radius: 6px;font-size: 11px;}
	.center-card:hover strong,
	.center-card:focus strong {font-size: 22px;letter-spacing: .08em;text-indent: 0;transform: none;}
}

@media screen and (max-width: 360px) {
	.intro-wrap {width: calc(100% - 18px);}
	.intro-hero {gap: 24px;padding: 30px 0 14px;}
	#intro-title .title-secondary {font-size: clamp(23px, 7.2vw, 24px);}
	.intro-copy p {font-size: clamp(12.5px, 4vw, 13.5px);}
	.intro-copy .intro-tagline {font-size: 10px;letter-spacing: .02em;}
	.footer-brand p {font-size: 11.5px;letter-spacing: 0;word-spacing: 0;}
	.footer-info p {font-size: 13px;font-weight: 500;line-height: 1.62;}
	.footer-info p strong {font-weight: 600;}
	.center-card {min-height: 124px;padding: 16px 14px 11px;}
	.center-card strong,
	.center-card:hover strong,
	.center-card:focus strong {font-size: 20px;}
	.center-card.is-medical strong,
	.center-card.is-skin strong,
	.center-card.is-vascular strong,
	.center-card.is-health strong,
	.center-card.is-kidney strong,
	.center-card.is-stem strong {width: 100%;max-width: 100%;letter-spacing: .06em;text-indent: 0;}
	.center-card .branch-buttons span {height: 26px;padding: 0 4px;font-size: 10px;}
}