.main .xgap1 {--x-gap:1rem;}
.main .xgap3 {--x-gap:3rem;}


.main .ygap1 {--y-gap:1rem;}
.main .ygap2 {--y-gap:2rem;}
.main .ygap3 {--y-gap:3rem;}
.main .ygap5 {--y-gap:5rem;}

@media(max-width:768px) {
    .main .xs-mt2 {margin-top: 2rem;}
    .main .xs-mt3 {margin-top: 3rem;}
    .main .font-18 {font-size: 1.5rem;}
}

.main .mainTit {font-size: 2.5rem; font-weight: 700;}
.main .mainTit span {color:var(--pointcolor)}

.main .gray {color:#767676;}

.responsive-br {display: block;}  
@media screen and (min-width: 500px) and (max-width: 1240px) {
    .responsive-br {display: none;}
}

.moreBtn {font-size: 14px; position: relative; display: inline-block; text-align: center; padding:.7rem 2.2rem; border-radius: .25rem; border:1px solid #111; width: fit-content; transition: .3s; 	overflow: hidden; pointer-events: auto; transition-timing-function: cubic-bezier(0.7, 0, 0.2, 1); box-shadow: inset 0 0 0 0px #000;}
.moreBtn:hover {position: relative; box-shadow: inset 0 0 0 40px #000; transition-delay: 0s, 0s, 0.2s; color:#fff;}


.moreBtn.F {display: flex; align-items: center; gap:0 .7rem; justify-content: center;}
.moreBtn.F:hover img {filter: invert(1);}

.swiper-pagination.slidePg {position: relative; margin-top: 3rem; height: 3px; background-color: #e5e5e5; opacity: 1;}
.swiper-pagination.slidePg .swiper-pagination-progressbar-fill {background-color: #111;}


/* mainSlide */
#mainSlide {overflow:hidden;position:relative;width:100%;/* aspect-ratio: 16/8;  */ height: 100vh; transition:transform .6s var(--ani)}

#mainSlide .mainSwiper {/* opacity:0;transform:scale(1.05); */width:100%;height:100%;/* transition:all 2s var(--ani) */}

#mainSlide .mainSwiper .swiper-slide {height:100%;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:transform .3s}
#mainSlide .mainSwiper .swiper-slide-active {transform:skew(0)}
#mainSlide .bg {position:absolute;left:0;top:0;width:100%;height:100%;background:80% no-repeat;background-size:cover}
#mainSlide .bg.bg-1 {background-image:url('/img/main/mainSlide01.jpg')}
#mainSlide .bg.bg-2 {background-image:url('/img/main/mainSlide02.jpg')}
#mainSlide .bg.bg-3 {background-image:url('/img/main/mainSlide03.jpg')}
#mainSlide .bg.bg-4 {background-image:url('/img/main/mainSlide04.jpg')}

#mainSlide .TxtBox {position: absolute;top:50%;left:50%;transform: translate(-50%,-50%); max-width:1440px; width: 95%;}
#mainSlide .Line {width: 22px; height: .125rem; background-color: #111; margin: 2rem 0;}
#mainSlide .Line.Wh {background-color: #fff;} 
#mainSlide .roundBox {color:#111; border-radius: 27px; text-align: left; position: relative; background-color: #fff; display: block; width: fit-content; padding: .5rem 1.5rem .5rem 3.5rem;} 
#mainSlide .roundBox:after {content:''; width: 1.4375rem; height: 1.1875rem; background-image: url('/img/main/check.png'); background-size: contain; background-repeat: no-repeat; position: absolute; left: 1.5rem; top: 1.0625rem;}
#mainSlide .Slide_more {background-color: #111; border-radius: 4px; padding: .7rem 1.5rem; color:#fff; font-size: 1.125rem; display: block; width: fit-content;}

.progress_wrap {position: absolute;bottom: 5%;left: 50%;display: flex;align-items: center;justify-content: center;transform: translateX(-50%);z-index: 990;}
.autoplay-button > div{position: absolute;cursor: pointer;top:50%;left:50%;transform: translate(-50%,-50%);}
.autoplay-button > div span{display: block;color: #fff;}
#mainSlide .swiper-pagination{position: relative;left: auto;bottom: auto;display: flex;align-items: center; gap:0 1rem; font-size: 1.125rem;color:rgba(255,255,255,0.5);}
#mainSlide .swiper-pagination .current {color:rgba(255,255,255,1)}

#mainSlide .swiper-button-next:after, #mainSlide .swiper-button-prev:after {display: none;}
#mainSlide .swiper-button-next, #mainSlide .swiper-button-prev {position: relative; top: auto; margin-top: 0; left: auto; right: auto; width: 100%; padding: 0 1rem;}
#mainSlide .swiper-button-next img {transform: rotate(180deg);}

.progress {transform: rotate(-90deg);}
.play_btn {margin-left: 30px;position: relative;top: 0;left: 0;}
.swiper-pagination2 {position: relative;top: 0;left: 0;width: 42px!important;height: 42px;border: 3px solid rgba(255,255,255,0.5);display: block;bottom: auto;right: auto;border-radius: 50%;}
.swiper-pagination2 .swiper-pagination-bullet {position: absolute;top: -3px;left: -3px;width: 42.5px;height: 42.5px;background-color: transparent;margin: 0!important;}
.circle-origin {fill: transparent;stroke: #fff;stroke-width: 3;stroke-linecap: round;stroke-dasharray: 180.664px;stroke-dashoffset: 180.664px;}
.swiper-pagination-bullet-active .circle-origin {animation: progress 5s;}
.swiper-pagination-bullet.replay .circle-origin {animation: progress1 5s;}

@keyframes progress {
    0% {stroke-dashoffset: 180.664px;}
    90% {stroke-dashoffset: 0;}
    100% {stroke-dashoffset: -180.664px;}
}
@keyframes progress1 {
    0% {stroke-dashoffset: 180.664px;}
    90% {stroke-dashoffset: 0;}
    100% {stroke-dashoffset: -180.664px;}
}


@media(max-width:768px){
    #mainSlide {height: 90vh;}
    #mainSlide .TxtBox {text-align: center; top:20%; transform: translate(-50%, 0%);}
    #mainSlide .Line {margin: 2rem auto;}
    #mainSlide .roundBox, #mainSlide .Slide_more {margin-left: auto; margin-right: auto;}

    #mainSlide .bg.bg-1 {background-image:url('/img/main/mainSlide01_m.jpg')}
    #mainSlide .bg.bg-2 {background-image:url('/img/main/mainSlide02_m.jpg')}
    #mainSlide .bg.bg-3 {background-image:url('/img/main/mainSlide03_m.jpg')}
    #mainSlide .bg.bg-4 {background-image:url('/img/main/mainSlide04_m.jpg')}
}



/* treatment */
#treatment .treatmentList .box {border-radius: 1rem; overflow:hidden; position: relative; transition: all ease .3s; cursor: pointer;}
#treatment .treatmentList .box:after {content:''; width: 100%; height: 45%; background: linear-gradient(0deg, rgba(44,31,20,.9), rgba(44,31,20,.0)); position: absolute; bottom:0; left: 0; right:0; transition: all ease .3s;}
#treatment .treatmentList .box:hover:after {height: 100%; backdrop-filter: blur(5px); background: rgba(44,31,20,.5); transition: all ease .3s;}

#treatment .treatmentList .TxtBox {position: absolute; z-index: 3; width: 90%; margin: auto; height: fit-content; left: 0; right: 0; bottom:2rem; color:#fff; transition: all ease .3s;}
#treatment .treatmentList .Desc {display: none; transition: all ease .3s;}
#treatment .treatmentList .box:hover .Desc {display: block; transition: all ease .3s;}

#treatment .treatmentList_sm .box:hover img {transform: translateY(-20px); transition: all ease .3s;}
#treatment .treatmentList_sm img {width: 6.25rem;}



/* balance */
#balance {position: relative; padding-top: 8.125rem;}
#balance:after {content:''; width: 100%; height: 60.3125rem; background-image:  url('/img/main/balanceBg.jpg'); background-repeat: no-repeat; background-size: cover; top:0; position: absolute; left: 0; right:0; margin: auto; z-index: -1;}
#balance .inner {padding: 0 5.8rem;}
#balance .inner.Wh {background-color: #faf9f7; border-radius: 1rem; padding: 5.8rem 5.8rem 0 5.8rem;}

#balance .flexBox {display: flex; gap:0 2rem;}
#balance .Tit {text-decoration : underline; text-decoration-thickness: 4px; text-underline-offset:.95rem;}
#balance .Desc {width: calc(70% - 1rem); margin-left: auto; color:#fff;}

#balance .Line {border-bottom: 1px solid #111; margin-top: -40px;}

#balance .balanceSwiper .swiper-slide {border-radius: 1rem; overflow: hidden;}

#balance .Btn_wrap {padding-left: 4rem;}
#balance .balanceTextBox {position: relative; display: flex; flex-direction: column; height: 100%; bottom:0;}
#balance .balance-item {position: relative; width: 100%; border-radius: 0; background-color: transparent; padding: 1rem; opacity: 1; color:#bfbfbf; margin: 0; text-align: left; display: flex; flex-direction: column; justify-content: center; height: calc(100% / 3); border-bottom:1px solid #e5e5e5; transition: .3s;}
#balance .balance-item.active {padding-left: 4rem; color:#111; transition: .3s;}
#balance .balance-item.active:after {content:''; width: 1.875rem; height: .625rem; background-image: url('/img/main/arrow_sm.png'); background-repeat: no-repeat; background-size: contain; position: absolute; left: 0; top:2.875rem;}
#balance .balance-item .moreBtn {display: none; margin-top: 1rem;}
#balance .balance-item.active .moreBtn {display: block; z-index: 9;}



@media (max-width:1240px){
    #balance .Btn_wrap {margin-top: 2rem; padding-left: 0;}
    #balance .swiper-pagination-bullet {padding-top: 2rem; padding-bottom: 2rem;}
}

@media (max-width:768px){
    #balance .inner {padding: 0 1.5rem;}
    #balance .inner.Wh {padding: 3rem 2rem 0 2rem;}
    #balance .Desc {width: 100%;}
    #balance .Line {margin-top: -2rem;}
}



/* doctor */

#doctor .inner {width: 98%;}
#doctor .brit {position: relative; padding-left: 1.5rem; text-decoration : underline; text-decoration-thickness: 1px; letter-spacing: -0.025rem; text-underline-offset:.6rem; line-height: 1.8; white-space: nowrap;}
#doctor .brit:after {content:''; width: .9375rem; height: 1.125rem; background-image: url('/img/main/brit.png'); background-repeat: no-repeat; background-size: contain; position: absolute; left: 0; top:.3125rem;}
  
#doctor .TitBox {position: absolute; z-index: 3;}
#doctor .enTit {font-size: 16px; letter-spacing: 14px; font-weight: 300; line-height: 1.8; margin-bottom: 12rem;}
#doctor .moreBtn {margin-left: 1.3rem;}
#doctor .ImgBox {max-width: 70.5rem; width: 90%; margin-left: auto; position: relative;}

#doctor .plusBtn {display: flex; align-items: flex-end; gap:0 1rem; position: absolute; top:17rem; bottom:auto; left:21rem; margin: auto; width: fit-content; height: fit-content; cursor: pointer;}
#doctor .plus {width: 1.5rem; height: 1.5rem; background-color: var(--pointcolor); border-radius: 50%; transition: .3s;}
#doctor .plusBtn:hover .plus {transform: scale(1.2); transition: .3s;}
#doctor .plus img {width: .875rem;}

#doctor .modal {max-width: 23.75rem; width: 90%; background-color: #fff; border-radius: 1rem; padding: 2rem; position: absolute; filter: drop-shadow(0 0 15px rgba(0,0,0,.2)); top:21.5rem; left: 9.1rem; z-index: 5; display: none;}
#doctor .modal:after {content:''; width: 1.25rem; height: .875rem; clip-path: polygon(50% 25%, 0% 100%, 100% 100%); background-color: #fff; position: absolute; top:-.8rem; right: 2rem;}
#doctor .Line {width: 100%; height: 1px; background-color: #e5e5ec; margin: .7rem auto;}
#doctor .close {position: absolute; right: 1rem; top:1rem; cursor: pointer;}

@media (max-width:1340px){
    #doctor .section-left {padding-right: 5%;}
    #doctor .inner {width: 100%;}
    #doctor .TitBox {position: relative;}
    #doctor .ImgBox {max-width: 100%; width: 100%; margin-top: 3rem;}
}
@media (max-width:768px){
    #doctor .modal {width: 100%; max-width: fit-content; aspect-ratio:11/12; left: 2rem; top:12rem;}
    #doctor .plusBtn {left: 18rem; top:7rem;}
}
@media (max-width:500px){
    #doctor .enTit {margin-bottom: 8rem;}
    #doctor .modal {left: 0; right:0; margin: auto; top:13rem; max-width: 90%; aspect-ratio:auto; padding: 3rem;}
    #doctor .modal:after {right:55%;}
    #doctor .plusBtn {left: 6rem; top:8rem;}
}



/* thesis */
#thesis .swiper-wrapper {-webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear;}



/* interior */
#interior .TitFelx {display: flex; align-items: center; justify-content: space-between; gap:2rem;}

#interior .swiper-wrapper {-webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear;}
#interior .interiorSwiper .swiper-wrapper {-webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear;}
#interior .interiorSwiper .swiper-slide {width: auto !important;}
#interior .interiorSwiper .swiper-slide img {object-fit: cover;}

@media(max-width:990px) {
    #interior .interiorSwiper .swiper-slide img {height:30rem}
}
@media(max-width:768px) {
    #interior .TitFelx {align-items:flex-start; flex-direction: column;}
}
@media(max-width:500px) {
    #interior .interiorSwiper .swiper-slide img {height:20rem}
}



/* notice */
#notice .TitFelx {display: flex; align-items: center; justify-content: space-between; gap:2rem;}

#notice .swiper-wrapper {-webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear;}
#notice .swiper-slide {padding: 2rem 0;}
#notice .swiper-slide-next {padding: 2rem; background-color: #fff; border-radius: 1rem;}
#notice .Desc {overflow: hidden; text-overflow: ellipsis; white-space: normal; letter-spacing: 1px; line-height: 1.4; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2 ; -webkit-box-orient: vertical;}
#notice .notice_more {font-size: 14px; text-decoration : underline; text-decoration-thickness: 1px; display: block; margin-left: auto; width: fit-content; text-underline-offset:.1875rem;}
@media(max-width:500px) {
    #notice .section-left {padding-right: 5%;}
}


/* health */
#health .swiper .swiper-slide img { display: block; object-fit: cover; object-position: center top; aspect-ratio: 1/1; overflow: hidden; }

/* reservation */
#reservation .inner {max-width: 1792px; margin: auto; width: 95%; background-color: #f2f1eb; padding:7rem 3rem 5rem; border-radius: 4rem;}
#reservation .flexBox {display: flex; gap:6rem 2rem;}
#reservation .Desc {color:#bfbfbf; line-height: 1.2;}
#reservation .box {position: relative; transform: translateY(0px); transition: .3s;}
#reservation .box:hover img {transform: translateY(-10px); transition: .3s;}
#reservation .box:after {content:''; height: 100%; width: 1px; background-color: #e5e5e5; position: absolute; right:0; top:0; bottom:0;}
#reservation .box:last-child:after {display: none;}
#reservation .box img {width: 6.25rem;}
#reservation .callBox {position: absolute; left: 0; right:0; margin: auto; top:-3.3rem; width: fit-content; color:#fff; padding: .3rem 1rem; border-radius: .5rem; background-color: var(--pointcolor);}
#reservation .box.call:hover .callBox {animation: bounce 1s ease-in infinite;}
#reservation .callBox:after {content:''; width: 1.25rem; height: .875rem; clip-path: polygon(50% 83%, 0 0, 100% 0); background-color: var(--pointcolor); bottom:-0.8rem; left: 0; right:0; margin: auto; position: absolute;}
@media(max-width:768px) {
    #reservation .flexBox {gap:4rem;}
}
@media(max-width:500px) {
    #reservation .box:after {display: none;}
    #reservation .inner {max-width: 100%; width: 100%;}
}
@keyframes bounce {
  50% {
    transform: translateY(-15px);
  }
}


/* info */
#info .infoList {max-width: 586px; width: 100%;}
#info .infoList li {display: flex; gap:1rem; padding: 1.8rem 0; border-bottom:1px solid #e0e0e0;}
#info .infoList li:last-child {border:none; padding-bottom: 0;}
#info .infoList .Tit {width: 15%;}
#info .infoList .Desc {width: 85%;}
#info .infoList .Desc.callDesc {display: flex; align-items: center; justify-content: space-between; width: 100%;}
#info .infoList .callNum {font-size: 2.125em;}
#info .infoList .telBtn {background-color: var(--pointcolor); border-radius: 1.875rem; padding: 10px 2.3rem; color:#fff; font-size: 1.5rem;}
#info .infoList .zum {position: relative; padding-left: 1rem;}
#info .infoList .zum:after {content:'· '; position: absolute; left: 0; top:0;}
#info .infoBtn {display: flex; align-items: center; gap:1rem; justify-content: center; background-color: #e5e5e5; border-radius: 37px; padding: .7rem 1rem; font-size: 1rem;}

#info .trTit {text-align: justify; height: 1.7rem; width: auto; display: block; margin-right: 1.5rem;}
#info .trTit:after {content:''; display: inline-block; width: 100%;}
#info .moon {display: flex; align-items: center; gap:.5rem; padding-left: .8rem;}
#info .moon img {width: 1rem;}
#info .moon b {box-shadow: inset 0 -0.65em 0 rgba(252, 227, 172, 0.9);}

#info .map_wrap {background-color: #fff; border:.5625rem solid #fff; border-bottom:none; align-self: flex-start;}
#info #map {width: 100%; min-height: 603px; height: 100%;}
#info .mapList {padding: 1rem 0;}
#info .mapBtn {display: flex; align-items: center; gap:.5rem; justify-content: center; border-right: 1px solid #e0e0e0;}
#info .mapBtn:last-child {border:none;}
#info .mapIcon {height: 1.5625rem;}

@media(max-width:990px) {
    /* #info .trTit {width: 6rem;} */
    #info #map {height: auto; min-height: auto; aspect-ratio: 6/4;}
}
@media(max-width:500px) {
    #info #map {aspect-ratio: 1/1;}
    #info .infoList li {flex-direction: column; align-items: flex-start;}
    #info .infoList .callNum {font-size: 2.5em;}
    #info .infoBtn {font-size: 1.5rem;}
    #info .mapBtn {flex-direction: column;}
}




/* footer */
footer {background-color: #111; padding: 6.25rem 0;}
footer .TitFlex {display: flex; align-items: center; justify-content: flex-end; gap: 0 2rem;}
footer .iconFelx {display: flex; gap: .5rem; align-items: center;}
footer .iconFelx img {width: 2.75rem;}
footer .footerLogo {width: 11.9375rem;}

footer .Line {width: 100%; height: 1px; background-color: rgba(255,255,255,.1); margin: 2rem auto;}
footer .infoLink {display: flex; align-items: center;}
footer .infoLink li {padding: 0 1.1rem; position: relative;}
footer .infoLink li:after {content:''; height: 80%; width: 1px; background-color: #767676; position: absolute; top:0; bottom:0; left:0; margin: auto;}
footer .infoLink li:first-child {padding-left: 0;}
footer .infoLink li:first-child:after {display: none;}
footer .infoLink li a {color:#fff;}

footer .rights {text-align: right; letter-spacing: 0;}


@media(max-width:768px) {
    footer .footerLogo {width: 17rem;}
    footer .TitBox {order:-1;}
    footer .TitFlex {justify-content: flex-start; justify-content: space-between;}
    footer .rights {text-align: left;}

    footer.font-16 {font-size: 1.2rem;}
}