.visible-pc {display: none;}
.hidden-pc {display: block;}
.visible-mo {display: none;}

@media(max-width:1440px) {
    .visible-pc {display: block;}
    .hidden-pc {display: none;}
}

@media(max-width:1550px) {
    .main .container {width: 85%;}
    .main .section-left  {padding-left : 7.5%}
    .main .section-right {padding-right: 7.5%}
}

/* 폰트 */
@media(max-width:768px) {
    .font-55 {font-size: 3.75rem;}
    .font-40 {font-size: 3.125rem;}
    .font-30,
    .font-32 {font-size: 2.25rem;}
    .font-22 {font-size: 1.75rem;}
    .font-18 {font-size: 1.375rem;}
}

/* 버튼 */
.moreBtn {background: #066cd7; padding: 0.7rem 2rem; gap: 2rem; color: #fff; border-radius: 100px; position: relative; overflow: hidden; display: flex; align-items: center;}
.moreBtn img {filter: brightness(100);}

@media(max-width:768px) {
    .moreBtn img {width: 13px;}
}


.main {margin-top: 6.25rem;}

.main #mainSlide {height: calc(100svh - 6.25rem);}
.main #mainSlide .mainSwiper {height: 100%; overflow:hidden;}
.main #mainSlide .swiper-slide {position: relative; overflow:hidden;-webkit-backface-visibility:hidden; backface-visibility:hidden; width: 100%;}
.main #mainSlide .swiper-slide .bg {background-size: cover; background-repeat: no-repeat; background-position: center; height: 100%; width: 100%;}
.main #mainSlide .swiper-slide.slide01 .bg {background-image: url("/img/main/mainSlide01.jpg");}
.main #mainSlide .swiper-slide.slide02 .bg {background-image: url("/img/main/mainSlide02.jpg");}
.main #mainSlide .swiper-slide.slide03 .bg {background-image: url("/img/main/mainSlide03.jpg");}
.main #mainSlide .swiper-slide.slide04 .bg {background-image: url("/img/main/mainSlide04.jpg");}

.main #mainSlide .txtbox {position: absolute; max-width: var(--layoutwidth); width: 100%; top: 45%; left: 50%; transform: translate(-50%, -50%);}
.main #mainSlide .txtbox ul {gap: 1rem;}
.main #mainSlide .txtbox li {background: #fff; padding: 0.8rem 2.5rem; border-radius: 4px; width: fit-content;}
.main #mainSlide .txtbox li img {margin-top: 0.5rem;}
.main #mainSlide .txtbox .check {width: 1.3125rem; margin-right: 0.8rem;}

.main #mainSlide .page-wrap {position: absolute; left: calc((100% - var(--layoutwidth)) / 2); bottom: 10%; width: 15.5rem; z-index: 1;}
.main #mainSlide .page-wrap > div.flex {gap: 1.5rem; justify-content: space-between;}

.main #mainSlide .swiper-pagination {color: #fff;}
.main #mainSlide .swiper-pagination-current {color: var(--orgcolor); font-weight: 700;}
.main #mainSlide .swiper-pagination .spacing {opacity: 0.3; padding: 0 1rem;}

#mainSlide .custom-pg {width: 100%; height: 2px; background: rgba(255, 255, 255, 0.3);} 
#mainSlide .swiper-pagination2 {height: 2px; background: #fff; position: relative;overflow: hidden; transition: 1.5s;}

.swiper-button-prev,
.swiper-button-next,
.swiper-pagination {position: initial; height: auto; width: fit-content; margin-top: 0;}

.swiper-button-prev:after {display: none;}
.swiper-button-next:after {display: none;}

@media(max-width:1550px) {
    .main #mainSlide .txtbox {width: 85%;}
    .main #mainSlide .page-wrap {left: 5%;}
}

@media(max-width:768px) {
    .main #mainSlide .swiper-slide.slide01 .bg {background-image: url("/img/main/mainSlide01_m.jpg");}
    .main #mainSlide .swiper-slide.slide02 .bg {background-image: url("/img/main/mainSlide02_m.jpg");}
    .main #mainSlide .swiper-slide.slide03 .bg {background-image: url("/img/main/mainSlide03_m.jpg");}
    .main #mainSlide .swiper-slide.slide04 .bg {background-image: url("/img/main/mainSlide04_m.jpg");}

    .main #mainSlide .txtbox {top: 10%; transform: translateX(-50%);}
    .main #mainSlide .txtbox ul {flex-direction: column; align-items: flex-start;}
    .main #mainSlide .txtbox .check {width: 1.5rem;}
    .main #mainSlide .page-wrap {left: 50%; transform: translateX(-50%); width: 18rem; font-size: 1.25rem;}
    .main #mainSlide .page-wrap img {width: 1.25rem;}
    .main #mainSlide .font-30 {font-size: 2.1875rem;}
}

/* 서비스바로가기 */
.main #service {background-image: url("/img/main/service_bg.jpg"); background-size: cover;}
.main #service .titbox {background-image: url("/img/main/service_tit_bg.jpg"); background-size: cover; border-radius: 0 1.25rem 1.25rem 0; padding-left: calc((100% - var(--layoutwidth)) / 2); width: 32%;}
.main #service .contbox {width: 68%;}
.main #service .flexList {width: 87%; margin: auto; background: #fff; padding: 1.5rem 0; border-radius: 12px; --x-gap: 0rem;}
.main #service .box {position: relative; padding: 1rem;}
.main #service .box:after {position: absolute; right: 0; top: 50%; transform: translateY(-50%); height: 70%; width: 1px; background: #111111; content: ""; opacity: 0.15;}
.main #service .box:last-child:after {display: none;}
.main #service .box img {width: 4.5rem; transition: 0.3s;}

.main #service .box:hover img {transform: translateY(-0.5rem);}

@media(max-width:1550px) {
    .main #service .titbox  {padding-left: 7.5%; padding-right: 7.5%;}
}

@media(max-width:1440px) {
    .main #service .wrap {flex-direction: column;}
    .main #service .titbox,
    .main #service .contbox {width: 100%;}
    .main #service .titbox {border-radius: 0 0 1.25rem 1.25rem;}
}

@media(max-width:990px) {
    .main #service .titbox {background-image: url("/img/main/service_tit_bg_m.jpg");}
    .main #service .flexList {padding: 1.5rem 2rem;}

    .main #service .box:nth-child(1),
    .main #service .box:nth-child(2) {width: 50%;}

    .main #service .box:before {position: absolute; left: 50%; transform: translateX(-50%); bottom: -0.75rem;  height: 1px; width: 100%; background: #000; content: ""; opacity: 0.15;}

    .main #service .box:nth-child(3),
    .main #service .box:nth-child(4),
    .main #service .box:nth-child(5) {width: 33.333%;}

    .main #service .box:nth-child(2):after {display: none;}

    .main #service .box:nth-child(3):before,
    .main #service .box:nth-child(4):before,
    .main #service .box:nth-child(5):before {display: none;}
}

@media(max-width:500px) {
    .main #service .visible-mo {display: block;}

    .main #service .box:nth-child(3),
    .main #service .box:nth-child(4) {width: 50%;}
    .main #service .box:nth-child(5) {width: 100%;}

    .main #service .box:nth-child(4):after {display: none;}

    .main #service .box:nth-child(3):before,
    .main #service .box:nth-child(4):before {display: block;}
}

@media(max-width:360px) {
    .main #service .visible-mo {display: none;}
    .main #service .box {width: 100% !important;}
    .main #service .box:after {display: none;}
}

/* 진료과목 */
.main #subject {background-image: url("/img/main/subject_bg.jpg"); background-size: cover;}
.main #subject .flexList {--x-gap: 0rem; --y-gap: 0rem; border-bottom: 1px solid #afcddb; padding: 0 15%;}
.main #subject .box {padding: 1rem; position: relative; cursor: pointer;}
.main #subject .box.current {color: var(--pointcolor2); font-weight: 700;}
.main #subject .box .background {position: absolute; left: 0; top: 1px; width: 100%; height: 100%; border-bottom: 3px solid var(--pointcolor2); display: none; }

@media(min-width:501px) {
    .main #subject .box[data-active] .background {display: block; will-change: transform;}

}

.main #subject .tab-content {background-size: cover; background-position: center right; border-radius: 12px; overflow: hidden; color: #fff; padding: 4.5rem 7.5rem; display: none; height: 30.125rem;}
.main #subject .tab-content.current {display: block;}
.main #subject .tab-content:nth-child(1){background-image: url("/img/main/subject_cont01_bg.jpg");}
.main #subject .tab-content:nth-child(2){background-image: url("/img/main/subject_cont02_bg.jpg");}
.main #subject .tab-content:nth-child(3){background-image: url("/img/main/subject_cont03_bg.jpg");}
.main #subject .tab-content:nth-child(4){background-image: url("/img/main/subject_cont04_bg.jpg");}

.main #subject .tab-content li {padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.2); width: 13.5rem; position: relative; line-height: 1;}
.main #subject .tab-content li:after {position: absolute; left: 0; top: 50%; transform: translateY(-50%); content: "•"; color: var(--orgcolor); font-size: 0.8rem;}

@media(max-width:768px) {
    .main #subject .flexList {padding: 0;}
    .main #subject .tab-content {height: 34rem; padding: 4.5rem 3.5rem;}
    .main #subject .tab-content:nth-child(1){background-image: url("/img/main/subject_cont01_bg_m.jpg");}
    .main #subject .tab-content:nth-child(2){background-image: url("/img/main/subject_cont02_bg_m.jpg");}
    .main #subject .tab-content:nth-child(3){background-image: url("/img/main/subject_cont03_bg_m.jpg");}
    .main #subject .tab-content:nth-child(4){background-image: url("/img/main/subject_cont04_bg_m.jpg");}
    .main #subject .tab-content li:after {font-size: 1.125rem;}
}

@media(max-width:500px) {
    .main #subject .box {padding: 1.5rem;}
    .main #subject .box:nth-child(1),
    .main #subject .box:nth-child(2) {border-bottom: 1px solid #afcddb;}
    .main #subject .box:after {position: absolute; left: 0; bottom: -1px; width: 0%; height: 3px; background: var(--pointcolor2); content: ""; transition: 0.3s;}
    .main #subject .box.current:after {width: 100%;}
}


/* 특별함 */
.main #special .txtbox {background-image: url("/img/main/special_txt_bg.jpg"); background-size: cover; border-radius: 0 0 6.25rem 0; padding-left: calc((100% - var(--layoutwidth)) / 2); padding-right: 9.375rem; display: flex; flex-direction: column; justify-content: space-between;}
.main #special .tabs li {padding: 1rem 1.25rem; line-height: 1; color: rgba(17,17,17,0.5); border-bottom: 1px solid rgba(17,17,17,0.2); position: relative; cursor: pointer;}
.main #special .tabs li:after {position: absolute; left: 0; top: 50%; transform: translateY(-50%); content: "•"; color: var(--orgcolor); font-size: 1.125rem; opacity: 0; transition: 0.3s;}
.main #special .tabs li:before {position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); content: url("/img/next.png"); z-index: 1; opacity: 0; transition: 0.3s;}

.main #special .tabs li.current {color: #000; border-color: #111111;}
.main #special .tabs li.current:after {opacity: 1;}
.main #special .tabs li.current:before {opacity: 1; right: 0;}

.main #special .contbox {padding-left: 9.375rem; padding-right: 5%;}
.main #special .tab-content {display: none;}
.main #special .tab-content.current {display: block;}

@media(max-width:1700px) {
    .main #special .txtbox {padding-right: 6rem;}
    .main #special .contbox {padding-left: 6rem;}
}

@media(max-width:1550px) {
    .main #special .txtbox {padding-left: 7.5%;}
}


@media(max-width:990px) {
    .main #special .wrap {flex-direction: column;}
    .main #special .txtbox {width: 92.5%; padding-right: 5%;}
    .main #special .contbox {width: 100%; padding-left:0; padding-right: 0; padding-top: 50px; padding-bottom: 0;}
    .main #special .contbox .txt {width: 85%; margin: auto;}
    .main #special .contbox .imgbox {width: 90%; margin: 5.625rem auto 0;}
    .main #special .tabs li:after {font-size: 1.25rem;}

    .main #special .visible-pc {display: none;}
    .main #special .hidden-pc {display: block;}
}

@media(max-width:768px) {
    .main #special .tabs li {padding: 1.25rem 1.5rem;}
}

@media(max-width:500px) {
    .main #special br {display: none !important;}
    .main #special .txtbox {padding-right: 10%;}
}

/* 품격 있는 힐링 공간 */
.main #space {background: linear-gradient(to bottom, #fff 20%, rgba(8,162,234,0.15) 100%); overflow: hidden;}
.main #space .cont .flex {flex-wrap: wrap; gap: 1.5rem;}
.main #space .box {width: calc(50% - 0.75rem);}
.main #space .box:nth-child(2) {padding-left: 7.5rem; margin-top: 11.25rem;}
.main #space .box:nth-child(3) {padding-left: 7.5rem; margin-top: -12.5rem;}
.main #space .box img {border-radius: 12px;}

.main #space .bg-logo {position: absolute; bottom: -6%; right: 10%;}
.main #space .bg-logo img {width: 39.375rem;}

.main #space br.mo {display: block;}

@media(max-width:1550px) {
   .main #space .bg-logo {right: 5%;} 
}

@media(max-width:1024px) {
    .main #space .cont .flex {gap: 3rem;}
    .main #space .box {width: calc(50% - 1.5rem);}
    .main #space .box:nth-child(2) {padding-left: 5rem;}
    .main #space .box:nth-child(3) {padding-left: 5rem;}
    .main #space .bg-logo img {width: 35rem;}
}

@media(max-width:768px) {
    .main #space .tit-wrap {flex-direction: column; align-items: flex-start; gap: 2rem;}
    .main #space .cont .flex {gap: 4.5rem;}
    .main #space .box {width: 100%;}
    .main #space .box:nth-child(2) {padding-left: 30%; margin-top: 0;}
    .main #space .box:nth-child(3) {padding-left: 0; padding-right: 30%; margin-top: 0;}
    .main #space .box h3.mt-20 {margin-top: 2rem;}
    .main #space .bg-logo {bottom: -3%; right: -8%;}
    .main #space .bg-logo img {width: 25rem;}
}

@media(max-width:500px) {
    .main #space .box:nth-child(2) {padding-left: 20%;}
    .main #space .box:nth-child(3) {padding-right: 20%;}
    .main #space .bg-logo img {width: 20rem;}
}

@media(max-width:360px) {
    .main #space br.mo {display: none;}
    .main #space br.visible-xs {display: none !important;}
}

/* 커뮤니티 */
.main #community {background-image: url("/img/main/community_bg.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center; overflow: hidden;}

.main #community .swiper-slide {cursor: pointer;}
.main #community .swiper-slide .imgbox {border-radius: 12px; overflow: hidden;}
.main #community .swiper-slide .imgbox img {transition: 0.3s;}
.main #community .swiper-slide:hover .imgbox img {transform: scale(1.1);}
.main #community .cir-txt {position: absolute; top: -15%; left: -3%; z-index: 10; animation: rotate 8s linear infinite both;;}
.main #community .cir-txt img {width: 7.5rem;}

.main #community .flexList {--y-gap: 3rem;}
.main #community .txt-wrap {display: flex; align-items: center; justify-content: space-between;}
.main #community .box {background: #fff; padding: 2rem; border-radius: 12px;}
.main #community .box .line {width: 100%; height: 1px; background: #c9e5f2;}
.main #community .box li {padding: 0.8rem 0; cursor: pointer; display: flex; align-items: center;}
.main #community .box li p {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}

.main #community .box.news .category {color: var(--orgcolor); width: 7.2rem; border-radius: 100px; border: 1px solid var(--orgcolor); padding: 0.3rem; display: inline-block; text-align: center; margin-right: 2rem;}
.main #community .box.news p {width: calc(100% - 9.2rem);}

.main #community .box.customer li {position: relative; padding-left: 1rem; border-bottom: 1px solid #dfdfdf; justify-content: space-between;}
.main #community .box.customer li:last-child {border: none;}
.main #community .box.customer li:after {position: absolute; left: 0; top: 50%; transform: translateY(-50%); content: "•"; color: var(--orgcolor); font-size: 1.1rem;}
.main #community .box.customer .date {color: #b7b7b7; padding: 0.3rem 0;}

.main #community .box .more {transition: 0.3s;}
.main #community .box .more:hover {transform: rotate(90deg);}

@keyframes rotate {
    0% {
        transform: rotate(0);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media(max-width:1024px) {
    .main #community .cir-txt {top: -13%; left: -3.5%;}
}

@media(max-width:768px) {
    .main #community .box {padding: 2rem 7.5%;}
    .main #community .box.news .category {font-size: 1.375rem; width: 8.5rem;}
    .main #community .box.news p {width: calc(100% - 11rem);}
    .main #community .box.customer .font-18 {font-size: 1.125rem;}
}

@media(max-width:500px) {
    .main #community .cir-txt {top: -12%; left: -7.5%;}
}

/* 협력병원 */
.main #partnership {background: linear-gradient(to bottom, #e7f4fa 75%, #fff 100%);}
.main #partnership > div {background-image: url("/img/main/partnership_bg.jpg"); background-size: cover; background-repeat: no-repeat; overflow: hidden; margin-left: calc((100% - var(--layoutwidth)) / 4);  overflow: hidden; border-radius: 20px 0 0 20px; padding-left: calc((100% - var(--layoutwidth)) / 4);}
.main #partnership .tit-wrap {display: flex; align-items: center;  gap: 2.5rem; padding-right: 5%;}

/* 서브와 공통 */
#partnership .tit-wrap img {width: 11.125rem;}
#partnership .swiper-wrapper {transition-timing-function: linear !important;}
#partnership .swiper-slide {border-radius: 12px; overflow: hidden; width: 22.875rem;}

@media(max-width:1550px) {
    .main #partnership > div {padding-left: 7.5%; margin-left: 7.5%; background-image: url("/img/main/partnership_bg_m.jpg"); }
}

@media(max-width:768px) {
    .main #partnership .tit-wrap {flex-direction: column; align-items: flex-start;}
}

/* 오시는길 */
.root_daum_roughmap .wrap_controllers,
.root_daum_roughmap .cont {display: none;}

#location {background-image: url("/img/main/location_bg.png"); background-repeat: no-repeat; background-size: 90%; background-position: 105% top; margin-bottom: 300px;}
#location .mapbox {width: calc(50% - 1.5rem); position: absolute; left: 0; top: 65%; transform: translateY(-50%); z-index: 1;}
#location .mapbox > div {width: 100%; height: 58rem; border-radius: 0 12px 12px 0;}
#location .mapbox .wrap_map {height: 100%;}

#location .contbox {float: right;}
#location .address {background: var(--pointcolor); color: #fff; padding: 1rem 2rem; border-radius: 12px; display: flex; align-items: center;}
#location .infor {background: #fff; border-radius: 12px; padding: 2rem;}

#location .cont .txt {width: 13rem; gap: 1rem;}
#location .cont .desc p b {letter-spacing: 0.025em; padding-right: 1rem;}

#location .org-color {color: #ff562f !important; position: relative; width: fit-content;}
#location .desc.org-color:after {position: absolute; left: 0; bottom: 10%; width: 0; height: 1rem; background: #ff562f; opacity: 0.1; content: ""; transition: 2s; transition-delay: 1.5s;}

#location .cont.aos-animate .org-color:after {width: 100%;}


@media(max-width:1550px) {
    #location {margin-bottom: 230px;}
    #location .mapbox > div {height: 52rem;}
}

@media(max-width:1440px) {
    #location .contbox > .width80 {width: 90%;}
}

@media(max-width:1240px) {
    #location {background-size: auto; background-position: -20% center;}
    #location .mapbox {top: 60%;}
    #location .mapbox > div {height: 56rem;}
}

@media(max-width:1024px) {
    #location {margin-bottom: 200px;}
    #location .mapbox > div {height: 60rem;}
}

@media(max-width:990px) {
    #location {margin-bottom: 180px;}
    #location .mapbox > div {height: 54rem;}
}

@media(max-width:768px) {
    #location {background: none; margin-bottom: 0; padding-top: 0;}
    #location .wrap {display: flex; flex-direction: column; background: none;}
    #location .mapbox {position: initial; order: 2; transform: none; width: 100%;} 
    #location .mapbox > div {border-radius: none;}

    #location .contbox {float: none; width: 100%; background-image: url("/img/main/location_bg_m.jpg"); background-position: center; background-size: cover; padding: 80px 0;}
    #location .contbox > .width80 {width: 85%;}
    #location .infor > div.flex {flex-direction: column; align-items: flex-start; gap: 0.5rem;}
    #location .cont .address .txt {width: 8rem;}
    #location .cont .infor .txt {width: 100%;}
    #location .cont .infor .desc {margin-left: calc(18px + 1rem);}
    #location .cont .desc .visible-md {display: none !important;}
    #location .cont img {width: 18px;}
}

@media(max-width:500px) {
    #location .mapbox {aspect-ratio: 1 / 1;}
    #location .mapbox > div {height: 100%;}
}

@media(max-width:400px) {
    #location .address {flex-direction: column; align-items: flex-start; gap: 0.5rem;}
    #location .cont .address .txt {width: 100%;}
    #location .cont .address .desc {margin-left: calc(18px + 1rem);}
}

@media(max-width:380px) {
    #location .cont .desc .visible-md {display: block !important;}
}