@import url('./animation.css');

.sec-sub-visual{position: relative; width: 100%; aspect-ratio: 1920/600; background-color: #dddddd;}
.sec-sub-visual .wrap{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;}
.sec-sub-visual h2{color: #222222; margin-bottom: 30px;}
.sec-sub-visual .visual-desc{color: #222222; font-size: var(--tit-desc-fz);}

/* 공통 css */
.reverse{flex-direction: row-reverse;}

.sub-page .sub-intro {position: relative;width: 100%;height: 960px;background-color: #2A2A2A; background-size: cover;background-position: center center;background-repeat: no-repeat;box-sizing: border-box;overflow: hidden;}
.sub-page .sub-intro .intro {position: relative; z-index: 2; width: 100%; max-width: 1600px; height: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-sizing: border-box;}
.sub-page .sub-intro .intro-header {display: flex; flex-direction: column; align-items: center; text-align: center; gap: 11px;}
.sub-page .sub-intro .intro-header img {width: 32px; height: auto; object-fit: contain; display: block;}
.sub-page .sub-intro .intro-header h2 {color: var(--white, #FFF);text-align: center;font-family: "Noto Serif KR";font-size: 30px;font-style: normal;font-weight: 600;line-height: 46px;}
.sub-page .sub-intro .intro-header p {color: var(--white, #FFF);font-family: Pretendard;font-size: 20px;font-style: normal;font-weight: 400;line-height: 30px; letter-spacing: -0.2px;}
.sub-page .sub-intro .intro-scroll-down {position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; user-select: none; z-index: 5; transition: opacity 0.3s ease, transform 0.3s ease;}
.sub-page .sub-intro .intro-scroll-down:hover {transform: translateX(-50%) scale(1.06);}
.sub-page .sub-intro .scroll-img {position: relative; width: 120px; height: 120px; display: flex; align-items: center; justify-content: center;}
.sub-page .sub-intro .scroll-img .circle-txt {width: 100%; height: 100%; object-fit: contain; display: block; animation: rotateCircle 20s linear infinite;}
.sub-page .sub-intro .scroll-img .arrow-icon {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 27px; height: auto; object-fit: contain; display: block; pointer-events: none; animation: arrowBounce 2s ease-in-out infinite;}

.sub-page .sub-define {width: 100%;min-height: 820px;background-image: url('../sub/img/sub_define_bg.webp');background-size: cover;background-position: center center;background-repeat: no-repeat;display: flex;align-items: center;overflow: hidden;box-sizing: border-box;padding: 180px 0;}
.sub-page .sub-define .inner {position: relative;z-index: 2;width: 100%;max-width: 1440px;min-height: 460px;margin: 0 auto;display: flex;flex-direction: row;justify-content: space-between;align-items: flex-start;}
.sub-page .sub-define .define-left {position: relative;}
.sub-page .sub-define .define-left .img-box {position: absolute;top: -50px;left: 190px;width: 196px;height: 196px;pointer-events: none;z-index: 1;}
.sub-page .sub-define .define-left .img-box img {width: 100%;height: 100%;object-fit: contain;display: block;animation: defineStampRotate 35s linear infinite;}

.sub-page .sub-define .define-left .left-title {position: relative;z-index: 2;color: var(--white, #FFF);font-family: "Noto Serif KR";font-size: 32px;font-style: normal;font-weight: 600;line-height: 48px; }
.sub-page .sub-define .define-right {display: flex;flex-direction: column;align-items: flex-start;padding-top: 120px;}
.sub-page .sub-define .define-right .text-box {margin-bottom: 56px;}
.sub-page .sub-define .define-right .right-title {color: var(--white, #FFF);font-family: "Noto Serif KR";font-size: 24px;font-style: normal;font-weight: 700;line-height: 40px;margin-bottom: 32px;}
.sub-page .sub-define .define-right .desc {color: #F4F4F4;font-family: "Noto Serif KR";font-size: 20px;font-style: normal;font-weight: 400;line-height: 32px;}
.sub-page .sub-define .define-right .slogan-box {width: 100%;}
.sub-page .sub-define .define-right .en-slogan {color: var(--white, #FFF);font-family: Cardo;font-size: 90px;font-style: normal;font-weight: 400;line-height: 120%;letter-spacing: -1.8px;}

/* about 페이지 */
#sub_about .sub-about-intro {position: relative;width: 100%;height: 960px;background-image: url('../sub/img/about_intro_bg.webp');background-size: cover;background-position: center center;background-repeat: no-repeat;box-sizing: border-box;overflow: hidden;}
#sub_about .sub-about-intro .inner {position: relative;z-index: 2;width: 100%;height: 100%;margin: 0 auto; padding: 80px 80px 140px 80px;display: flex;flex-direction: column;justify-content: space-between;box-sizing: border-box;}
#sub_about .sub-about-intro .intro-header {padding-top: 80px;}
#sub_about .sub-about-intro .intro-header .title {color: #FFF;font-family: Cardo;font-size: 112px;font-style: normal;font-weight: 400;line-height: 120%;letter-spacing: -3.36px;margin-bottom: 8px;}
#sub_about .sub-about-intro .intro-header .title .h {letter-spacing: 0;}
#sub_about .sub-about-intro .intro-header .title .open {font-size: 80px;letter-spacing: -2.4px;}
#sub_about .sub-about-intro .intro-header .title .mid {font-size: 120px;letter-spacing: -3.6px;}
#sub_about .sub-about-intro .intro-header .title .close {font-size: 80px;letter-spacing: -2.4px;}
#sub_about .sub-about-intro .intro-header .desc {color: var(--white, #FFF);font-family: "Noto Serif KR";font-size: 32px;font-style: normal;font-weight: 600;line-height: 48px; }
#sub_about .sub-about-intro .intro-header .desc strong {color: var(--white, #FFF);font-family: "Noto Serif KR";font-size: 32px;font-style: normal;font-weight: 700;line-height: 48px;}
#sub_about .sub-about-intro .intro-scroll-down {position: absolute;bottom: 50px;left: 50%;transform: translateX(-50%);display: flex;flex-direction: column;align-items: center;justify-content: center;cursor: pointer;user-select: none;z-index: 5;transition: opacity 0.3s ease, transform 0.3s ease;}
#sub_about .sub-about-intro .intro-scroll-down:hover {transform: translateX(-50%) scale(1.06);}
#sub_about .sub-about-intro .scroll-img {position: relative;width: 120px;height: 120px;display: flex;align-items: center;justify-content: center;}
#sub_about .sub-about-intro .scroll-img .circle-txt {width: 100%;height: 100%;object-fit: contain;display: block;animation: rotateCircle 20s linear infinite;}
#sub_about .sub-about-intro .scroll-img .arrow-icon {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 27px;height: auto;object-fit: contain;display: block;pointer-events: none;animation: arrowBounce 2s ease-in-out infinite;}
#sub_about .sub-about-intro .intro-caption {align-self: flex-end;text-align: left;margin-bottom: 24px;}
#sub_about .sub-about-intro .intro-caption .caption-title {color: var(--white, #FFF);font-family: "Noto Serif KR";font-size: 24px;font-style: normal;font-weight: 700;line-height: 40px;padding-bottom: 24px;}
#sub_about .sub-about-intro .intro-caption .caption-desc {color: var(--white, #FFF);font-family: "Noto Serif KR";font-size: 20px;font-style: normal;font-weight: 400;line-height: 32px;}
#sub_about .sub-about-intro .intro-caption .caption-desc strong{color: var(--white, #FFF);font-family: "Noto Serif KR";font-size: 20px;font-style: normal;font-weight: 600;line-height: 32px;}
#sub_about .sub-about-space .space-dot { background: #ffffff; }
#sub_about .sub-about-space .space-dot.is-active { background: #7E7978; }

@keyframes rotateCircle {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes arrowBounce {
    0%, 100% {
        transform: translate(-50%, -50%);
    }
    50% {
        transform: translate(-50%, calc(-50% + 6px));
    }
}

#sub_about .sub-about-why {width: 100%; background-image: url(../sub/img/about_why_bg.webp);background-size: cover;background-position: center center;background-repeat: no-repeat;box-sizing: border-box;overflow: hidden;}
#sub_about .sub-about-why .inner{width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 140px;padding: 140px 0 180px 0;}
#sub_about .sub-about-why .inner .why-sec {max-width: 1600px;width: 100%;display: flex;justify-content: space-between;align-items: flex-end;padding-left: 80px;}
#sub_about .sub-about-why .inner .why-sec:nth-child(2) {padding-left: 0px;padding-right: 80px;}
#sub_about .sub-about-why .why-text-box {display: flex;padding-bottom: 50px;flex-direction: column;align-items: flex-start;}
#sub_about .sub-about-why .why-sub-title {color: var(--brown, #76614A);text-align: center;font-family: Cardo;font-size: 40px;font-style: normal;font-weight: 400;line-height: 52px;padding-bottom: 12px;}
#sub_about .sub-about-why .why-title {color: var(--2A, #2A2A2A);font-family: var(--ff-notoSerif);font-size: 32px;font-style: normal;font-weight: 600;line-height: 48px; padding-bottom: 48px;}
#sub_about .sub-about-why .why-desc {color: var(--3C, #3C3C3C);font-family: Pretendard;font-size: 20px;font-style: normal;font-weight: 600;line-height: 30px;letter-spacing: -0.2px;}
#sub_about .sub-about-why .img-box {max-width: 825px; width: 100%;}
#sub_about .sub-about-why .img-box img {width: 100%;object-fit: cover;display: block;}

#sub_about .sub-about-standard {width: 100%; background-image: url(../sub/img/about_standard_bg.webp);background-size: cover;background-position: center center;background-repeat: no-repeat;box-sizing: border-box;overflow: hidden;}
#sub_about .sub-about-standard .inner{width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 80px;padding: 180px 0 160px 0;}
#sub_about .sub-about-standard .text {display: flex;flex-direction: column;align-items: center;gap: 12px;align-self: stretch;}
#sub_about .sub-about-standard .text-title {display: flex;align-items: flex-start;gap: 12px;}
#sub_about .sub-about-standard .text-title img {width: 51px;}
#sub_about .sub-about-standard .text-title h3 {color: var(--Primary, #2F2A28);text-align: center;font-family: Cardo;font-size: 30px;font-style: normal;font-weight: 400;line-height: 52px;}
#sub_about .sub-about-standard .text p {color: var(--2A, #2A2A2A);text-align: center;font-family: "Noto Serif KR";font-size: 32px;font-style: normal;font-weight: 600;line-height: 48px;}
#sub_about .sub-about-standard .standard-list {max-width: 1600px;width: 100%;display: grid;grid-template-columns: repeat(3, 1fr);gap: 0;background-image: url(../sub/img/about_standardlist_bg.webp);background-size: cover;background-position: center center;background-repeat: no-repeat;box-sizing: border-box;overflow: hidden;}
#sub_about .sub-about-standard .standard-card {display: flex;min-height: 625px;padding: 60px 24px;flex-direction: column;justify-content: center;align-items: center;box-sizing: border-box; border-right: 1px solid #FFFFFF55;border-left: 1px solid #FFFFFF55;}
#sub_about .sub-about-standard .card-inner {display: flex;width: 100%;max-width: 376px;height: auto;flex-direction: column;justify-content: center;align-items: center;text-align: center;box-sizing: border-box;}
#sub_about .sub-about-standard .en-title {color: var(--Primary, #2F2A28);text-align: center;font-family: Cardo;font-size: 30px;font-style: normal;font-weight: 400;line-height: 52px;}
#sub_about .sub-about-standard .ko-title {color: var(--3C, #3C3C3C);text-align: center;font-family: "Noto Serif KR";font-size: 24px;font-style: normal;font-weight: 500;line-height: 44px;letter-spacing: -0.48px;}
#sub_about .sub-about-standard .line {display: block;width: 64px;height: 1px;flex-shrink: 0;background: var(--666, #666);margin:32px 0;}
#sub_about .sub-about-standard .desc {color: var(--666, #666);text-align: center;font-family: Pretendard;font-size: 20px;font-style: normal;font-weight: 400;line-height: 30px;letter-spacing: -0.2px;}

#sub_about .sub-about-space {width: 100%; background-image: url(../sub/img/about_space_bg.webp);background-size: cover;background-position: center center;background-repeat: no-repeat;box-sizing: border-box;overflow: hidden;}
#sub_about .sub-about-space .inner{width: 100%; display: flex;padding: 160px 0 140px 0;flex-direction: column;justify-content: center;align-items: center;gap: 100px;}
#sub_about .sub-about-space .inner .text-box {width: 100%;max-width: 1200px;display: flex;flex-direction: column;align-items: center;text-align: center;}
#sub_about .sub-about-space .inner .text-box .text-title {display: flex;align-items: center;justify-content: center;gap: 12px;margin-bottom: 12px;}
#sub_about .sub-about-space .inner .text-box .text-title img {width: 51px;display: block;}
#sub_about .sub-about-space .inner .text-box .text-title h3 {color: var(--Primary, #2F2A28);font-family: Cardo;font-size: 30px;font-style: normal;font-weight: 400;line-height: 52px;}
#sub_about .sub-about-space .inner .text-box .main-title {color: var(--2A, #2A2A2A);font-family: "Noto Serif KR";font-size: 24px;font-style: normal;font-weight: 600;line-height: 40px;}
#sub_about .sub-about-space .inner .text-box .line {display: block;width: 1px;height: 30px;opacity: 0.8;background: var(--brown, #76614A);margin: 28px 0;}
#sub_about .sub-about-space .inner .text-box .desc {color: var(--3C, #3C3C3C);font-family: "Noto Serif KR";font-size: 18px;font-style: normal;font-weight: 400;line-height: 27px;}
#sub_about .sub-about-space .inner .text-box .desc strong {color: var(--2A, #2A2A2A);font-family: "Noto Serif KR";font-size: 20px;font-style: normal;font-weight: 600;line-height: 32px;letter-spacing: -0.4px;display: block;margin-top: 12px;}

/* doctor 페이지 */
#sub_doctor .sub-intro{ background-image: url(../sub/img/sub_doctor_bg.webp); }
#sub_doctor .sub-doctor-derma { width: 100%;display: flex;flex-direction: column;align-items: center;gap: 120px;align-self: stretch;padding: 180px 0;background-image: url(../sub/img/sub_doctor_bg02.webp);background-size: cover;background-position: center center;background-repeat: no-repeat;box-sizing: border-box;overflow: hidden;}
#sub_doctor .sub-doctor-derma .inner {max-width: 1440px;width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 120px;}
#sub_doctor .sub-doctor-derma .derma-text {display: flex;flex-direction: column;justify-content: center;align-items: center;}
#sub_doctor .sub-doctor-derma .derma-text .sub-title {color: #2A2A2A;font-family: Cardo;font-size: 30px;font-style: normal;font-weight: 400;line-height: 44px;margin-bottom: 4px;}
#sub_doctor .sub-doctor-derma .derma-text .main-title {color: var(--2A, #2A2A2A);text-align: center;font-family: "Noto Serif KR";font-size: 30px;font-style: normal;font-weight: 600;line-height: 46px; letter-spacing: -0.6px;margin-bottom: 40px;}
#sub_doctor .sub-doctor-derma .derma-text .desc {color: var(--3C, #3C3C3C);text-align: center;font-family: Pretendard;font-size: 20px;font-style: normal;font-weight: 400;line-height: 30px; letter-spacing: -0.2px;}
#sub_doctor .sub-doctor-derma .derma-text .desc strong {color: var(--3C, #3C3C3C);font-family: Pretendard;font-size: 20px;font-style: normal;font-weight: 600;line-height: 30px; letter-spacing: -0.2px; margin-top: 32px;display: block;}
#sub_doctor .sub-doctor-derma .doctor-list {width: 100%;display: flex;flex-direction: column;align-items: flex-start;gap: 140px;}
#sub_doctor .sub-doctor-derma .doctor-item {display: flex;align-items: center;}
#sub_doctor .sub-doctor-derma .doctor-item.reverse {}
#sub_doctor .sub-doctor-derma .doctor-img-box {max-width: 734px;}
#sub_doctor .sub-doctor-derma .doctor-img-box .doctor-img {width: 100%;object-fit: cover;display: block;}
#sub_doctor .sub-doctor-derma .doctor-info-box {width: 100%;max-width: 706px;display: flex;flex-direction: column;align-items: flex-start;gap: 64px;padding-left: 120px;white-space: nowrap;}
#sub_doctor .sub-doctor-derma .doctor-item:nth-child(2) .doctor-info-box {padding-left: 0;padding-right: 120px;white-space: nowrap;}
#sub_doctor .sub-doctor-derma .doctor-info-box .line{width: 584px;height: 1px;background: var(--line, #C9C9C9);}
#sub_doctor .sub-doctor-derma .doctor-header {display: flex;align-items: center;gap: 12px;}
#sub_doctor .sub-doctor-derma .badge-derma {max-width: 64px;aspect-ratio: 1/1;}
#sub_doctor .sub-doctor-derma .badge-derma img {width: 100%;}
#sub_doctor .sub-doctor-derma .name-box {display: flex;align-items: center;gap: 12px;}
#sub_doctor .sub-doctor-derma .name-box .name {color: var(--2A, #2A2A2A);font-family: "Noto Serif KR";font-size: 48px;font-style: normal;font-weight: 600;line-height: 60px;}
#sub_doctor .sub-doctor-derma .name-box .position {color: var(--2A, #2A2A2A);font-family: "Noto Serif KR";font-size: 30px;font-style: normal;font-weight: 600;line-height: 46px;}
#sub_doctor .sub-doctor-derma .doctor-career {display: flex;align-items: flex-start;gap: 32px;align-self: stretch;}
#sub_doctor .sub-doctor-derma .career-col {display: flex;width: 320px;flex-direction: column;align-items: flex-start;gap: 32px;}
#sub_doctor .sub-doctor-derma .career-tag {display: flex;width: 120px;padding: 6px 32px;justify-content: center;align-items: center;gap: 10px;border-radius: 999px;border: 1px solid #000;color: var(--3C, #3C3C3C);font-family: Pretendard;font-size: 18px;font-style: normal;font-weight: 400;line-height: normal;letter-spacing: -0.18px;}
#sub_doctor .sub-doctor-derma .career-list {display: flex;flex-direction: column;align-items: flex-start;gap: 12px;}
#sub_doctor .sub-doctor-derma .career-list li {position: relative;padding-left: 12px;color: var(--3C, #3C3C3C);font-family: Pretendard;font-size: 18px;font-style: normal;font-weight: 400;line-height: normal;letter-spacing: -0.18px;}
#sub_doctor .sub-doctor-derma .career-list li::before {content: '';position: absolute;left: 0;top: 10px;width: 4px;height: 4px;background-color: var(--Primary, #2F2A28);border-radius: 50%;}
#sub_doctor .sub-doctor-derma .career-list li.gap32 {margin-top: 20px;}

/* location 페이지 */

#sub_location{ background-color: #F4F3F1;  }
#sub_location .sub-intro { background-image: url(../sub/img/sub_location_bg.webp); }
#sub_location .location-info { width: 100%;display: flex;padding: 120px 0 180px 0;flex-direction: column;justify-content: center;align-items: center;border-bottom: 1px solid #C9C9C9;}
#sub_location .location-info .inner {max-width: 1440px;width: 100%;margin: 0 auto;display: flex;justify-content: center;align-items: center;gap: 60px;box-sizing: border-box;}
#sub_location .info-left { max-width: 860px;width: 100%;display: flex;flex-direction: column;align-items: flex-start;justify-content: center;gap: 56px;}
#sub_location .info-title-box { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
#sub_location .info-title-box .info-logo { width: 44px; height: auto; display: block; }
#sub_location .info-title-box .info-title { color: var(--2A, #2A2A2A); font-family: Cardo; font-size: 36px; font-weight: 400; line-height: 120%; letter-spacing: -0.36px; }
#sub_location .info-content-box { width: 100%; display: flex;align-items: flex-start;gap: 56px; }
#sub_location .col-title {color: #2A2A2A;text-align: center;font-family: Cardo;font-size: 32px;font-style: normal;font-weight: 400;line-height: 32px; margin-bottom: 32px; }
#sub_location .contact-col { max-width: 328px;width: 100%;display: flex;flex-direction: column;justify-content: space-between;align-items: flex-start;align-self: stretch;}
#sub_location .contact-col .tel-number { color: #3C3C3C;font-family: Cardo;font-size: 48px;font-style: normal;font-weight: 400;line-height: 56px; margin-bottom: 36px; display: block; text-decoration: none; }
#sub_location .contact-col .btn-wrap { display: flex; gap: 10px; }
#sub_location .info-btn { width: 160px; display: inline-flex; justify-content: center; align-items: center; padding: 10px 24px; border-radius: 999px; background: #2A2A2A; color: #FFFFFF; font-family: Pretendard; font-size: 15px; font-weight: 500; text-decoration: none; transition: background 0.3s ease; }
#sub_location .info-btn:hover { background: #444444; }
#sub_location .line,
#sub_location .v-line { width: 1px; background: #D9D9D9; align-self: stretch; }
#sub_location .hours-col { width: 100%; display: flex; flex-direction: column; align-items: flex-start; }
#sub_location .hours-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px; }
#sub_location .hours-list li { display: flex;align-items: center;gap: 40px;}
#sub_location .hours-list .day {display: flex;width: 88px;justify-content: space-between;align-items: center;color: #3A3A3A;font-family: var(--ff-notoSerif);font-size: 24px;font-style: normal;font-weight: 600;line-height: 40px;letter-spacing: 0.57px;}
#sub_location .hours-list .day span {display: inline-flex;justify-content: center;}
#sub_location .hours-list .time { color: #3A3A3A;text-align: center;font-family: Cardo;font-size: 24px;font-style: normal;font-weight: 400;line-height: 40px; letter-spacing: 0.57px;}
#sub_location .holiday-note { color: #666;font-family: Pretendard;font-size: 20px;font-style: normal;font-weight: 400;line-height: 24px;}
#sub_location .info-right { max-width: 600px; width: 100%; }
#sub_location .info-right .img-box { max-width: 580px; }
#sub_location .info-right .img-box img { width: 100%; object-fit: cover; display: block; }
#sub_location .location-map { width: 100%; padding: 160px 0; overflow: hidden; }
#sub_location .location-map .inner { max-width: 1440px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; align-items: center; box-sizing: border-box; }
#sub_location .map-title-box { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 80px; }
#sub_location .map-title-box .map-logo { width: 51px; height: auto; display: block; }
#sub_location .map-title-box .map-title { color: #2F2A28;text-align: center;font-family: Cardo;font-size: 40px;font-style: normal;font-weight: 400;line-height: 52px;}
#sub_location .map-container { position: relative; width: 100%; overflow: hidden;}
#sub_location .map-view { width: 100%; min-height: 640px; display: flex; }
#sub_location .map-view .map-img { width: 100%; height: auto; object-fit: cover; display: block; }
#sub_location .map-view #map,
#sub_location .map-view .naver-map-box { width: 100%; height: 540px; }
#sub_location .map-btn-wrap { width: 100%; position: absolute; bottom: 140px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; gap: 8px; z-index: 5; }
#sub_location .nav-btn { max-width: 180px; width: 100%;min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px;border: 1px solid var(--Primary, #2F2A28);background: var(--Primary, #2F2A28); color: var(--white, #FFF);font-family: Pretendard;font-size: 15px;font-style: normal;font-weight: 600;line-height: 24px; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2); transition: background 0.3s ease, transform 0.2s ease; }
#sub_location .nav-btn:hover { background: #000000; transform: translateY(-2px); }
#sub_location .nav-btn .btn-icon { width: 18px; height: 18px; object-fit: contain; display: block; }
#sub_location .map-info-grid { width: 100%; display: flex; justify-content: space-between; align-items: flex-start;border-bottom: 1px solid var(--line, #C9C9C9);}
#sub_location .info-item { display: flex;height: 120px;align-items: center;justify-content: center;gap: 32px;flex: 1 0 0; }
#sub_location .item-label { display: flex;align-items: center;gap: 6px; color: #3A3A3A;text-align: center;font-family: var(--ff-notoSerif);font-size: 19px;font-style: normal;font-weight: 600;line-height: 40px; letter-spacing: 0.57px; }
#sub_location .item-label .item-icon { width: 24px; object-fit: contain; display: block; flex-shrink: 0; }
#sub_location .item-desc { display: flex; flex-direction: column; gap: 4px; color: #444;font-family: Pretendard;font-size: 18px;font-style: normal;font-weight: 500;line-height: 29px; word-break: keep-all; }


@media (max-width: 1024px) {
    .sec-sub-visual { aspect-ratio: unset; height: 60svh; }
    
    /* 서브 인트로 공통 모바일 */
    .sub-page .sub-intro { height: auto; min-height: 100svh; display: flex; align-items: center; justify-content: center; }
    .sub-page .sub-intro .intro { padding: 60px 20px; height: auto; justify-content: center; }
    .sub-page .sub-intro .intro-header h2 { font-size: 24px; line-height: 36px; }
    .sub-page .sub-intro .intro-header p { font-size: 16px; line-height: 26px; word-break: keep-all; }
    .sub-page .sub-intro .intro-scroll-down { position: relative;bottom: -120px;left: auto;transform: none;margin: 20px auto 0 auto; }
    .sub-page .sub-intro .intro-scroll-down:hover { transform: scale(1.06); }
    .sub-page .sub-intro .scroll-img { width: 80px; height: 80px; }

    .sub-page .sub-define { min-height: auto; padding: 80px 0; }
    .sub-page .sub-define .inner { flex-direction: column; align-items: flex-start; padding: 0 20px; gap: 44px; min-height: auto; }
    .sub-page .sub-define .define-left { width: 100%; padding-top: 16px; }
    .sub-page .sub-define .define-left .left-title { font-size: 24px; line-height: 36px; word-break: keep-all; }
    .sub-page .sub-define .define-left .img-box { width: 130px; height: 130px; left: 120px; top: -15px; }
    .sub-page .sub-define .define-right { padding-top: 0; width: 100%; }
    .sub-page .sub-define .define-right .text-box { margin-bottom: 28px; }
    .sub-page .sub-define .define-right .right-title { font-size: 20px; line-height: 30px; margin-bottom: 16px; word-break: keep-all; }
    .sub-page .sub-define .define-right .desc { font-size: 16px; line-height: 26px; word-break: keep-all; }
    .sub-page .sub-define .define-right .en-slogan { font-size: 52px; letter-spacing: -1px; word-break: break-word; }

    #sub_about .sub-about-intro { height: auto; min-height: 100svh; display: flex; align-items: center; justify-content: center; }
    #sub_about .sub-about-intro .inner { padding: 60px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 32px; height: auto; }
    #sub_about .sub-about-intro .intro-header { padding-top: 0; text-align: center; width: 100%; }
    #sub_about .sub-about-intro .intro-header .title { font-size: 52px; letter-spacing: -1.5px; margin: 0 auto 8px auto; text-align: center; }
    #sub_about .sub-about-intro .intro-header .title .open { font-size: 36px; letter-spacing: -1px; }
    #sub_about .sub-about-intro .intro-header .title .mid { font-size: 56px; letter-spacing: -1.5px; }
    #sub_about .sub-about-intro .intro-header .title .close { font-size: 36px; letter-spacing: -1px; }
    #sub_about .sub-about-intro .intro-header .desc { font-size: 19px; line-height: 30px; word-break: keep-all; text-align: center; }
    #sub_about .sub-about-intro .intro-header .desc strong { font-size: 19px; line-height: 30px; }
    #sub_about .sub-about-intro .intro-caption { align-self: center; text-align: center; margin-bottom: 0; width: 100%; }
    #sub_about .sub-about-intro .intro-caption .caption-title { font-size: 19px; line-height: 28px; padding-bottom: 12px; text-align: center; }
    #sub_about .sub-about-intro .intro-caption .caption-desc { font-size: 15px; line-height: 24px; word-break: keep-all; text-align: center; }
    #sub_about .sub-about-intro .intro-caption .caption-desc strong { font-size: 15px; line-height: 24px; }
    #sub_about .sub-about-intro .intro-scroll-down { position: relative; bottom: auto; left: auto; transform: none; margin: 10px auto 0 auto; }
    #sub_about .sub-about-intro .intro-scroll-down:hover { transform: scale(1.06); }
    #sub_about .sub-about-intro .scroll-img { width: 80px; height: 80px; }
    #sub_about .sub-about-why .inner { gap: 60px; padding: 80px 20px 90px 20px; }
    #sub_about .sub-about-why .inner .why-sec { flex-direction: column !important; align-items: flex-start !important; gap: 28px; padding-left: 0 !important; padding-right: 0 !important; }
    #sub_about .sub-about-why .inner .why-sec:nth-child(2) { flex-direction: column-reverse !important; padding-left: 0 !important; padding-right: 0 !important; }
    #sub_about .sub-about-why .why-text-box { padding-bottom: 0; width: 100%; flex: unset; }
    #sub_about .sub-about-why .why-sub-title { font-size: 26px; line-height: 36px; padding-bottom: 8px; }
    #sub_about .sub-about-why .why-title { font-size: 24px; line-height: 34px; padding-bottom: 18px; word-break: keep-all; }
    #sub_about .sub-about-why .why-desc { font-size: 15px; line-height: 25px; word-break: keep-all; }
    #sub_about .sub-about-why .img-box { width: 100% !important; max-width: 100% !important; flex: unset; }
    #sub_about .sub-about-standard .inner { gap: 46px; padding: 80px 20px; }
    #sub_about .sub-about-standard .text { gap: 10px; }
    #sub_about .sub-about-standard .text-title img { width: 38px; }
    #sub_about .sub-about-standard .text-title h3 { font-size: 22px; line-height: 32px; }
    #sub_about .sub-about-standard .text p { font-size: 20px; line-height: 30px; word-break: keep-all; }
    #sub_about .sub-about-standard .standard-list { grid-template-columns: 1fr; gap: 20px; background-image: none; }
    #sub_about .sub-about-standard .standard-card { min-height: auto; padding: 38px 24px; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(0, 0, 0, 0.07); border-radius: 6px; }
    #sub_about .sub-about-standard .card-inner { gap: 16px; }
    #sub_about .sub-about-standard .en-title { font-size: 22px; line-height: 30px; }
    #sub_about .sub-about-standard .ko-title { font-size: 19px; line-height: 28px; word-break: keep-all; }
    #sub_about .sub-about-standard .line { width: 36px; }
    #sub_about .sub-about-standard .desc { font-size: 15px; line-height: 24px; word-break: keep-all; }
    #sub_about .sub-about-space .inner { padding: 80px 20px 70px 20px; gap: 40px; }
    #sub_about .sub-about-space .inner .text-box .text-title img { width: 38px; }
    #sub_about .sub-about-space .inner .text-box .text-title h3 { font-size: 22px; line-height: 32px; }
    #sub_about .sub-about-space .inner .text-box .main-title { font-size: 21px; line-height: 32px; word-break: keep-all; }
    #sub_about .sub-about-space .inner .text-box .line { height: 20px; margin: 16px 0; }
    #sub_about .sub-about-space .inner .text-box .desc { font-size: 15px; line-height: 25px; word-break: keep-all; }
    #sub_about .sub-about-space .inner .text-box .desc strong { font-size: 16px; line-height: 26px; margin-top: 10px; word-break: keep-all; display: block; }
    #sub_about .sub-about-space .swiper-slide { width: 84vw; max-width: 600px; min-width: 280px; }

    /* doctor 페이지 모바일 */
    #sub_doctor .sub-doctor-derma { padding: 80px 0; gap: 60px; }
    #sub_doctor .sub-doctor-derma .inner { padding: 0 20px; gap: 60px; }
    #sub_doctor .sub-doctor-derma .derma-text .sub-title { font-size: 22px; line-height: 32px; }
    #sub_doctor .sub-doctor-derma .derma-text .main-title { font-size: 24px; line-height: 36px; margin-bottom: 20px; word-break: keep-all; }
    #sub_doctor .sub-doctor-derma .derma-text .desc { font-size: 15px; line-height: 25px; word-break: keep-all; }
    #sub_doctor .sub-doctor-derma .derma-text .desc strong { font-size: 15px; line-height: 25px; margin-top: 20px; }
    #sub_doctor .sub-doctor-derma .doctor-list { gap: 80px; width: 100%; }
    #sub_doctor .sub-doctor-derma .doctor-item { flex-direction: column !important; align-items: flex-start; gap: 36px; width: 100%; }
    #sub_doctor .sub-doctor-derma .doctor-img-box { width: 100%; max-width: 100%; }
    #sub_doctor .sub-doctor-derma .doctor-img-box .doctor-img { width: 100%; height: auto; }
    #sub_doctor .sub-doctor-derma .doctor-info-box { width: 100%; max-width: 100%; padding-left: 0 !important; padding-right: 0 !important; gap: 32px; white-space: normal; }
    #sub_doctor .sub-doctor-derma .doctor-item:nth-child(2) .doctor-info-box { padding-left: 0 !important; padding-right: 0 !important; white-space: normal; }
    #sub_doctor .sub-doctor-derma .doctor-info-box .line { width: 100%; max-width: 100%; }
    #sub_doctor .sub-doctor-derma .doctor-header { gap: 10px; }
    #sub_doctor .sub-doctor-derma .badge-derma { max-width: 46px; }
    #sub_doctor .sub-doctor-derma .name-box { gap: 8px; flex-wrap: wrap; align-items: baseline; }
    #sub_doctor .sub-doctor-derma .name-box .name { font-size: 32px; line-height: 42px; }
    #sub_doctor .sub-doctor-derma .name-box .position { font-size: 18px; line-height: 28px; }
    #sub_doctor .sub-doctor-derma .doctor-career { flex-direction: column; gap: 28px; width: 100%; }
    #sub_doctor .sub-doctor-derma .career-col { width: 100%; gap: 16px; }
    #sub_doctor .sub-doctor-derma .career-tag { width: auto; min-width: 84px; padding: 4px 18px; font-size: 15px; }
    #sub_doctor .sub-doctor-derma .career-list { gap: 10px; width: 100%; }
    #sub_doctor .sub-doctor-derma .career-list li { font-size: 15px; line-height: 24px; word-break: keep-all; }
    #sub_doctor .sub-doctor-derma .career-list li.gap32 { margin-top: 14px; }

    /* location 페이지 모바일 */
    #sub_location .location-info { padding: 80px 0 90px 0; }
    #sub_location .location-info .inner { flex-direction: column; padding: 0 20px; gap: 48px; }
    #sub_location .info-left { max-width: 100%; width: 100%; gap: 36px; }
    #sub_location .info-title-box { gap: 8px; }
    #sub_location .info-title-box .info-logo { width: 36px; }
    #sub_location .info-title-box .info-title { font-size: 28px; }
    #sub_location .info-content-box { flex-direction: column; gap: 36px; width: 100%; }
    #sub_location .col-title { font-size: 24px; line-height: 28px; margin-bottom: 20px; text-align: left; }
    #sub_location .contact-col { max-width: 100%; width: 100%; align-self: auto; }
    #sub_location .contact-col .tel-number { font-size: 38px; line-height: 44px; margin-bottom: 24px; }
    #sub_location .contact-col .btn-wrap { width: 100%; gap: 8px; }
    #sub_location .info-btn { flex: 1; padding: 10px 16px; font-size: 14px; }
    #sub_location .line, #sub_location .v-line { width: 100%; height: 1px; align-self: auto; }
    #sub_location .hours-col { width: 100%; }
    #sub_location .hours-list { gap: 12px; margin-bottom: 16px; width: 100%; }
    #sub_location .hours-list li { gap: 24px; justify-content: flex-start; }
    #sub_location .hours-list .day { width: 76px; font-size: 18px; line-height: 28px; }
    #sub_location .hours-list .time { font-size: 18px; line-height: 28px; }
    #sub_location .holiday-note { font-size: 15px; line-height: 22px; }
    #sub_location .info-right { max-width: 100%; width: 100%; }
    #sub_location .info-right .img-box { max-width: 100%; width: 100%; }
    #sub_location .info-right .img-box img { width: 100%; height: auto; border-radius: 4px; }

    #sub_location .location-map { padding: 80px 0 90px 0; }
    #sub_location .location-map .inner { padding: 0 20px; }
    #sub_location .map-title-box { gap: 10px; margin-bottom: 40px; }
    #sub_location .map-title-box .map-logo { width: 38px; }
    #sub_location .map-title-box .map-title { font-size: 28px; line-height: 36px; }
    #sub_location .map-container { width: 100%; }
    #sub_location .map-view { min-height: 320px; }
    #sub_location .map-view .map-img { min-height: 320px; object-fit: cover; }
    #sub_location .map-view #map,
    #sub_location .map-view .naver-map-box { width: 100%; height: 380px; }
    #sub_location .map-btn-wrap { bottom: 40px; width: calc(100% - 32px); gap: 8px; justify-content: center; }
    #sub_location .nav-btn { flex: 1; max-width: 170px; min-height: 38px; padding: 8px 12px; font-size: 13px; }
    #sub_location .map-info-grid { flex-direction: column; width: 100%; padding-top: 24px; }
    #sub_location .info-item { height: auto; min-height: unset; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 16px; padding: 20px 0; border-top: 1px solid rgba(201, 201, 201, 0.5); }
    #sub_location .info-item:first-child { border-top: none; }
    #sub_location .item-label { min-width: 100px; font-size: 16px; line-height: 24px; gap: 6px; text-align: left; }
    #sub_location .item-label .item-icon { width: 20px; }
    #sub_location .item-desc { font-size: 14px; line-height: 23px; }

}