@charset "utf-8";
.sub-wrapper:has(.about-section){background-color: #FAF7FB;}
.sub-tit-section {background-repeat: no-repeat; background-size: cover; width: 100%; height: 500px; padding: 105px 32px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end;}
.sub-tit-section .sub-small-tit {font-size: 1.111rem; color: #fff;}
.sub-tit-section .sub-tit {font-size: 2rem; color: #fff; font-weight: 600; margin: 38px 0 44px;}
.sub-cont-tit-wrap .sub-cont-label {font-family: "Crimson Text", serif; font-size: 1.111rem;}
.sub-cont-tit-wrap .sub-cont-tit {font-family: 'YeogiOttaeJalnan'; font-size: 2.667rem; margin-top: 20px; line-height: 1.2;}
.scroll-mouse-wrap{position: relative; width: 30px; height: 45px; pointer-events: none;}
.scroll-mouse-btn{position: absolute; inset: 0; display: block; pointer-events: auto; cursor: pointer; animation: nudgeMouse 2.4s cubic-bezier(.25,.46,.45,.94) infinite;}
.scroll-mouse-btn::after{content:""; position:absolute; inset:0; border:2px solid rgba(255,255,255,.5); border-radius:30px; box-sizing:border-box; z-index:1;}
.scroll-mouse-svg{position:absolute; inset:0; width:100%; height:100%; z-index:2; color:#fff;}
.scroll-mouse-path{stroke-dasharray:120; stroke-dashoffset:120; animation: mouse-scroll-btn-roll-out .55s cubic-bezier(.5,.1,.07,1);}
.scroll-mouse-trackball{position:absolute; left:50%; top:22px; margin-left:-1px; width:2px; height:6px; border-radius:10px; background:rgba(255,255,255,.5); z-index:3; transition: background-color .55s cubic-bezier(.5,.1,.07,1); animation: trackBallSlide 2.4s cubic-bezier(0,0,.725,1) infinite;}
.scroll-mouse-wrap:hover .scroll-mouse-path{stroke-dashoffset:0; animation: mouse-scroll-btn-roll-over .55s cubic-bezier(.5,.1,.07,1);}
.scroll-mouse-wrap:hover .scroll-mouse-trackball{background:#fff;}
@keyframes mouse-scroll-btn-roll-over {0% { stroke-dashoffset:120; } 100% { stroke-dashoffset:0; }}
@keyframes mouse-scroll-btn-roll-out {0% { stroke-dashoffset:0; } 100% { stroke-dashoffset:-120; }}
@keyframes trackBallSlide {0% { opacity:1; transform:scaleY(1) translateY(-10px); } 45% { opacity:0; transform:scaleY(.5) translateY(13px); } 46% { opacity:0; transform:scaleY(1) translateY(-10px); } 65%,100% { opacity:1; transform:scaleY(1) translateY(-10px); }}
@keyframes nudgeMouse {0% { transform:translateY(0); } 45% { transform:translateY(8px); } 65%,100% { transform:translateY(0); }}
/* 리핏의원 의료진 */
.about-tit-section {background-image: url(../img/sub/about/about-tit-bg.webp); background-repeat: no-repeat; background-size: cover;}
.doctor-section {padding: 16.667rem 0 10rem; width: 100%; overflow: hidden;}
.doctor-section .inner {display: flex; flex-direction: column; row-gap: 15.556rem;}
.doctor-section .doctor-wrap {display: flex; align-items: center; justify-content: space-between;}
.doctor-section .doctor-wrap .img-wrap {position: relative; overflow: visible; border-radius: 50px; width: 50%; aspect-ratio: 848 / 584; background-image: url(../img/sub/about/doctor-bg.webp); background-repeat: no-repeat; background-size: cover;}
.doctor-section .doctor-wrap .img-wrap img {position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); height: 125%; max-height: 720px;}
.doctor-section .doctor-wrap .cont-wrap {width: 45%; max-width: 687px;}
.doctor-section .doctor-wrap .cont-wrap .top {padding-bottom: 30px; margin-bottom: 30px; border-bottom: 1px solid #D8D8D8; display: flex; flex-direction: column; align-items: flex-start; row-gap: 20px;}
.doctor-section .doctor-wrap .cont-wrap .top span {font-size: 1.111rem;}
.doctor-section .doctor-wrap .cont-wrap .top h3 {font-size: 1.111rem; display: flex; align-items: baseline; column-gap: 20px;}
.doctor-section .doctor-wrap .cont-wrap .top .name {font-size: 2.667rem;}
.doctor-section .doctor-wrap .cont-wrap .top p {font-size: 1.111rem;}
.doctor-section .doctor-wrap .cont-wrap .bot {display: flex; align-items: flex-start; flex-wrap: wrap;}
.doctor-section .doctor-wrap .cont-wrap .bot .career-list:first-child {width: 45%;}
.doctor-section .doctor-wrap .cont-wrap .bot .career-list:last-child {width: 55%;}
.doctor-section .doctor-wrap .cont-wrap .bot .career-list li {font-size: 1rem; line-height: 1.4; color: #5C5C5C;}
.doctor-section .detail-wrap {height: fit-content; background-color: #E6D9E3; border-radius: 50px; overflow: hidden; display: flex; align-items: center;}
.doctor-section .detail-wrap .img-wrap {overflow: hidden; width: 40%; height: auto; aspect-ratio: 1/1;}
.doctor-section .detail-wrap .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.doctor-section .detail-wrap .cont-wrap {width: 60%; display: flex; align-items: center; justify-content: center;}
.doctor-section .detail-wrap .cont {display: flex; flex-direction: column; align-items: flex-start; justify-content: center;}
.doctor-section .detail-wrap .cont span {}
.doctor-section .detail-wrap .cont h3 {margin: 10px 0 40px;}
.doctor-section .detail-wrap .cont h3 br.mo {display: none;}
.doctor-section .detail-wrap .cont .detail-list {display: flex; flex-direction: column; row-gap: 24px;}
.doctor-section .detail-wrap .cont .detail-list li {display: flex; align-items: center; column-gap: 16px;font-size: 1.111rem;}
.award-section {padding: 60px 0 100px; background-image: url(../img/sub/about/award-bg.webp); background-repeat: no-repeat; background-size: cover; background-attachment: fixed;}
.award-section .tit-wrap {display: flex; flex-direction: column; align-items: center; row-gap: 20px; margin-bottom: 66px;}
.award-section .tit-wrap strong {font-size: 2.222rem;} /* 40px */
.award-section .tit-wrap p {font-size: 1.111rem; color: #5B5B5B; text-align: center;} /* 20px */
.award-section .award-swiper{width: 100%; padding-bottom: 86px;}
.award-section .award-swiper .swiper-slide{height: auto;}
.award-section .award-swiper .award-card{background: #fff; border-radius: 30px; padding: 72px 40px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 48px;}
.award-section .award-swiper .award-logo{width: 100%; height: auto; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;}
.award-section .award-swiper .award-logo img{width: 100%; height: 100%; aspect-ratio: 1/1; object-fit: contain;}
.award-section .award-swiper .award-txt{font-size: 0.944rem; white-space: nowrap;} /* 17px */
.award-section .award-swiper .award-pagination{margin-top: 66px; display: flex; justify-content: center; align-items: center; gap: 20px;}
.award-section .award-swiper .award-pagination .swiper-pagination-bullet {transition: border 0.2s; border: 2px solid transparent; width: 20px; height: 20px; background: #fff; opacity: 1;}
.award-section .award-swiper .award-pagination .swiper-pagination-bullet-active {border-color: #B9A98A;}
.we-are-section {padding: 160px 0 176px; background: #E6D9E3; background: linear-gradient(180deg,rgba(230, 217, 227, 1) 0%, rgba(250, 247, 251, 1) 100%);}
.we-are-section .sub-cont-tit br.mo {display: none;}
.we-are-section .fixed-slide {width: 100%; display: flex; align-items: flex-start; justify-content: space-between;}
.we-are-section .fixed-slide .sub-cont-tit-wrap {position: sticky; top: 40%;}
.we-are-section .fixed-slide .we-are-cont-wrap {width: 50%; overflow: hidden; display: flex; flex-direction: column; row-gap: 95px;}
.we-are-section .fixed-slide .we-are-cont .img-wrap {margin-bottom: 36px; border-top-left-radius: 100px; overflow: hidden; width: 100%; height: auto; aspect-ratio: 948 / 500;}
.we-are-section .fixed-slide .we-are-cont .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.we-are-section .fixed-slide .we-are-cont .txt-wrap span {margin-bottom: 10px; display: flex; align-items: center; column-gap: 16px; font-size: 1.778rem; font-weight: 500; color: #2E2E2E;}
.we-are-section .fixed-slide .we-are-cont .txt-wrap .num {font-size: 3.556rem; font-weight: 600; color: #2C1333;}
.we-are-section .fixed-slide .we-are-cont .txt-wrap p {font-size: 1rem; color: #4B5563; line-height: 1.5;}
/* 진료안내 */
.treatment-section {padding: 5.556rem 0 10rem;}
.treatment-section .sub-cont-tit-wrap {text-align: center; margin-bottom: 8.333rem;}
.treatment-section .treatment-list {display: flex; align-items: stretch; column-gap: 1.333rem;}
.treatment-section .treatment-list li {min-height: 20rem; width: calc(100% / 3  - 2.666rem / 3); padding: 2.611rem; border-radius: 30px; background-color: #fff; display: flex; align-items: center; justify-content: center; column-gap: 4.2vw;}
.treatment-section .treatment-list .img-wrap {width: 5.556rem; height: 5.556rem;}
.treatment-section .treatment-list .img-wrap img {width: 100%; height: 100%; object-fit: contain;}
.treatment-section .treatment-list .txt-wrap {max-width: 265px; display: flex; flex-direction: column; row-gap: 1.111rem;}
.treatment-section .treatment-list .txt-wrap strong {font-size: 1.333rem; font-weight: 600;}
.treatment-section .treatment-list .txt-wrap p {word-break: keep-all; font-size: 1rem; line-height: 1.5; font-weight: 600; color: #4B5563;}
/* 오시는길 */
.location-section {margin-top: 8.889rem; padding: 7.222rem 0; background-image: url(../img/main/info-bg.webp); background-size: cover;}
.location-section .inner4 {display: flex; align-items: center; justify-content: space-between;}
.location-section .sub-cont-tit-wrap .sub-cont-tit  {margin-top: 12px;}
.location-section .left .txt-wrap {display: flex; flex-direction: column; margin-top: 40px;}
.location-section .left .txt-wrap p {font-size: 1.333rem; font-size: 500; color: #2E2E2E; margin-bottom: 8px;}
.location-section .left .txt-wrap span {font-size: 1rem; color: #717171;}
.location-section .left .park-locate {margin-top: 20px;}
.location-section .left .park-locate li {font-size: 1rem; color: #2E2E2E; font-weight: 500;}
.location-section .left .btn-wrap {display: flex; align-items: center; column-gap: 20px; margin-top: 30px;}
.location-section .right {border-radius: 50px; overflow: hidden;}
.access-section {padding: 8.333rem 0 8.889rem;}
.access-section .sub-cont-tit-wrap {text-align: center;}
.access-section .sub-cont-tit-wrap .sub-cont-tit {font-size: 2rem;}
.access-section .access-list {margin-top: 60px; display: flex; align-items: stretch; column-gap: 1.333rem;}
.access-section .access-list > div {width: calc(50% - 1.333rem / 2); border-radius: 30px; overflow: hidden;}
.access-section .access-list .access-tit {text-align: center; padding: 27px 0; background-color: #81BAFF; font-size: 1.333rem; font-weight: 600; color: #fff;}
.access-section .access-list .access-body {padding: 2.333rem; height: calc(100% - 4.611rem); background-color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center;}
.access-section .access-list .left .access-item {max-width: 694px;}
.access-section .access-list .access-item {width: 100%;}
.access-section .access-list .access-item:first-child {padding-bottom: 2.222rem; margin-bottom: 2.222rem; border-bottom: 1px solid #DEDEDE;}
.access-section .access-list .access-item h5 {font-size: 1.222rem; font-weight: 600; margin-bottom: 20px;}
.access-section .access-list .access-item .route-list {display: flex; flex-direction: column; row-gap: 30px;}
.access-section .access-list .access-item .route-list li {display: flex; align-items: center; column-gap: 20px; font-weight: 500; font-size: 1rem; color: #505050;}
.access-section .access-list .access-item .route-list li .square-label {flex-shrink: 0;}





/* 반응형 */
@media screen and (min-width: 1921px) {
    .treatment-section .treatment-list li {column-gap: 4.444rem;}
}
@media screen and (max-width: 1600px) {
    /* 리핏의원 의료진 */
    .doctor-section .doctor-wrap .img-wrap {width: 45%;}
    .doctor-section .doctor-wrap .cont-wrap {width: 50%;}
    .award-section .award-swiper .award-card {padding: 70px 40px 40px;}
    /* 진료안내 */
    .treatment-section .treatment-list li {column-gap: unset; justify-content: space-between;}
}
@media screen and (max-width: 1440px) {
    /* 리핏의원 의료진 */
    .doctor-section .doctor-wrap .img-wrap {width: 50%;}
    .doctor-section .doctor-wrap .cont-wrap {width: 40%;}
    .doctor-section .doctor-wrap .cont-wrap .bot {flex-direction: column;}
    .doctor-section .doctor-wrap .cont-wrap .bot .career-list:first-child,
    .doctor-section .doctor-wrap .cont-wrap .bot .career-list:last-child  {width: 100%;}
    .doctor-section .detail-wrap .img-wrap {width: 50%;}
    .award-section .award-swiper .award-card {padding: 60px 40px 30px;}
    /* 진료안내 */
    .treatment-section .treatment-list li {flex-direction: column; row-gap: 20px;}
    .treatment-section .treatment-list .txt-wrap {align-items: center;}
    .treatment-section .treatment-list .txt-wrap p {text-align: center;}
}
@media screen and (max-width: 1280px) {
    /* 리핏의원 의료진 */
    .doctor-section .detail-wrap .cont .detail-list {row-gap: 10px;}
    .doctor-section .detail-wrap .cont .detail-list li {font-size: 1rem; column-gap: 0.875rem;}
    .doctor-section .detail-wrap .cont .detail-list li svg {width: 1.6rem; height: 1.6rem; flex-shrink: 0;}
    .doctor-section .detail-wrap .cont .sub-cont-tit {font-size: 2.4rem;}
    .we-are-section .sub-cont-tit br.mo {display: inline-block;}
    .we-are-section .fixed-slide .sub-cont-tit-wrap {top: 35%;}
    .we-are-section .fixed-slide .we-are-cont-wrap {width: 60%;}
    /* 진료안내 */
    .treatment-section .treatment-list li {padding: 2.5rem 2rem;}
    /* 오시는길 */
    .location-section .inner4 {flex-direction: column; row-gap: 50px;}
    .location-section .left,
    .location-section .right,
    .location-section .right .root_daum_roughmap_landing {width: 100% !important;}
}
@media screen and (max-width: 1024px) {
    /* 리핏의원 의료진 */
    .doctor-section .doctor-wrap {flex-direction: column; row-gap: 40px;}
    .doctor-section .doctor-wrap:nth-child(2) {flex-direction: column-reverse;}
    .doctor-section .doctor-wrap .img-wrap {width: 100%; max-width: 848px;}
    .doctor-section .doctor-wrap .cont-wrap {width: 100%;}
    .doctor-section .doctor-wrap .cont-wrap .bot {flex-direction: unset;}
    .doctor-section .doctor-wrap .cont-wrap .bot .career-list:first-child {width: 45%; min-width: 260px;}
    .doctor-section .doctor-wrap .cont-wrap .bot .career-list:last-child {width: 55%; min-width: 340px;}
    .doctor-section .detail-wrap {flex-direction: column;}
    .doctor-section .detail-wrap .img-wrap {width: 100%; aspect-ratio: 16 / 9;}
    .doctor-section .detail-wrap .cont-wrap {width: 100%; padding: 3rem 1.5rem;}
    /* 진료안내 */
    .treatment-section .treatment-list {flex-direction: column; align-items: center; row-gap: 1.5rem;}
    .treatment-section .treatment-list li {max-width: 557px; width: 100%;}
    .location-section .left .txt-wrap {margin-top: 20px;}
    .location-section .left .btn-wrap {margin-top: 16px;}
    .access-section .access-list .access-body {justify-content: flex-start; padding: 2rem;}
    .access-section .access-list .access-item .route-list li {flex-direction: column; align-items: flex-start; row-gap: 10px;}
}
@media screen and (max-width: 768px) {
    .sub-tit-section {height: fit-content;}
    /* 리핏의원 의료진 */
    .award-section .award-swiper .award-card { padding: 40px 20px; gap: 24px; }
    .award-section .tit-wrap { margin-bottom: 40px; }
    .doctor-section {padding: 16rem 0 0;}
    .doctor-section .detail-wrap {border-radius: 0; overflow: visible; background-color: transparent;}
    .doctor-section .detail-wrap .img-wrap {padding: 0 2rem; position: relative; overflow: visible;}
    .doctor-section .detail-wrap .img-wrap::after {content: 'RE:FIT CLINIC'; font-family: "Crimson Text", serif; font-size: 10vw; color: #2C1333; white-space: nowrap; position: absolute; left: 50%; top: 0; transform: translate(-50%,-50%);}
    .doctor-section .detail-wrap .img-wrap img {aspect-ratio: 16 / 9;}
    .doctor-section .detail-wrap .cont-wrap {padding: 2rem 0; margin-top: 2rem; position: relative; width: 100%;}
    .doctor-section .detail-wrap .cont-wrap .cont {position: relative; z-index: 2;}
    .doctor-section .detail-wrap .cont-wrap::after {content: ''; background-color: #E6D9E3; width: 100vw; height: 100%; position: absolute; z-index: 1; left: 50%; top: 0; transform: translateX(-50%);}
    .doctor-section .detail-wrap .cont h3 {font-size: 2.4rem;}
    .we-are-section .fixed-slide .sub-cont-tit-wrap {position: unset;}
    .we-are-section .fixed-slide {flex-direction: column; row-gap: 40px;}
    .we-are-section .sub-cont-tit br:first-child,
    .we-are-section .sub-cont-tit br:last-child {display: none;}
    .we-are-section .fixed-slide .we-are-cont-wrap {width: 100%;}
    /* 진료안내 */
    .access-section .access-list {flex-direction: column; row-gap: 1.333rem;}
    .access-section .access-list > div {width: 100%;}
    .access-section .access-list .access-item .route-list li {flex-direction: row; align-items: center;}
}
@media screen and (max-width: 600px) {
    /* 리핏의원 의료진 */
    .award-section .tit-wrap strong {font-size: 1.4rem;}
    .award-section .tit-wrap p {font-size: 0.9rem; word-break: keep-all;}
    .award-section .tit-wrap p br {display: none;}
}
@media screen and (max-width: 480px) {
    /* 리핏의원 의료진 */
    .doctor-section {padding: 15rem 0 0;}
    .doctor-section .inner {row-gap: 10rem;}
    .doctor-section .detail-wrap .cont h3 br.mo {display: inline-block;}
    .award-section .tit-wrap { margin-bottom: 24px; }
    .award-section .award-swiper .award-card { padding: 30px 15px; gap: 20px; }
    .we-are-section .fixed-slide .we-are-cont .txt-wrap .num {font-size: 3rem;}
    .we-are-section .fixed-slide .we-are-cont .txt-wrap span {font-size: 1.7rem;}
    /* 오시는길 */
    .access-section .access-list .access-body {padding: 1.8rem;}
    .access-section .access-list .access-item .route-list li {flex-direction: column; align-items: flex-start; row-gap: 10px;}
}