:root{--ani:cubic-bezier(.32,.94,.6,1)}

.main .xgap2 {--x-gap:2rem;}
.main .xgap3 {--x-gap:3rem;}
.main .xgap4 {--x-gap:4rem;}
.main .xgap5 {--x-gap:5rem;}

.main .ygap0 {--y-gap:0;}
.main .ygap2 {--y-gap:2rem;}
.main .ygap3 {--y-gap:3rem;}
.main .ygap4 {--y-gap:4rem;}
.main .ygap5 {--y-gap:5rem;}


.main .swiper-button-next:after, .main .swiper-button-prev:after {display: none;}
.main .swiper-button-next, .main .swiper-button-prev {height: auto; margin-top: 0; top: 0; width: auto; left: 0; right: 0; position: relative;}
.main .swiper-button-prev img {transform: rotate(180deg); filter: invert(1) grayscale(1) brightness(1.5);}

.main .swiper-pagination {bottom:0; position: relative;}
.main .swiper-pagination-progressbar {width: 100%; height: 1px; background: #fff; position: relative; z-index: 3;}
.main .swiper-pagination-progressbar-fill {background: var(--pointcolor);}

.main .check {position: relative; padding-left: 2rem;}
.main .check:after {content:''; width: .9375rem; height: .8125rem; background-image: url('/img/main/check.png'); background-repeat: no-repeat; background-size: cover; position: absolute; left: 0; top:.3125rem;}

.enTit {font-family: var(--pointfont); letter-spacing: 0.05rem; position: relative; padding-right: .625rem; width: fit-content;}
.enTit b {font-weight: 500;}
.enTit:after {content:''; width: .3125rem; height: .3125rem; border-radius: 50%; background-color: var(--pointcolor); position: absolute; right:0; bottom:.3125rem;}

.main_Tit {font-weight: 800; font-size: 3.75rem;}
.main_Tit span {color:var(--pointcolor);}


.cozyBtn {position: relative; display: flex; align-items: center; justify-content: center; font-weight: 500; gap:1rem; white-space: nowrap; border-radius: 1.75rem; background-color: var(--pointcolor); padding: .8rem 2rem; width: fit-content; color: transparent; transition-property: all; transition-duration: 0.6s; z-index: 9; overflow: hidden; text-shadow: -50px 0 0 transparent, 0 0 0 #fff; transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);}
.cozyBtn:before {width: 100%; height: 100%; top: 0; left: -1px; background-color: #000; transform: translate(-100%, 0); content: ""; position: absolute; z-index: -3; transition-property: inherit; transition-duration: inherit; transition-timing-function: inherit;}
.cozyBtn:hover {text-shadow: 0 0 0 #fff, 50px 0 0 transparent;}
.cozyBtn:hover:before {transform: translate(0, 0);}

.cozyBtn.between { justify-content: space-between; }

.cozyBtn.Reverse { background: var(--light-gray); color: #000; }
.cozyBtn.Reverse:hover { color: transparent; }

.cozyBtn.Wh {border:1px solid #fff;}
.cozyBtn.Wh:before {background-color: #fff;} 
.cozyBtn.Wh:hover {text-shadow: 0 0 0 var(--pointcolor), 50px 0 0 transparent;}

@media(max-width:768px) {
    .main .main_Tit {font-size: 3.125rem;}

    .main.font-20 {font-size: 1.4rem;}
}
/* carousel */
#carousel {display: flex;position: absolute;z-index: 1;top: 100px;width: 100%;overflow: hidden;background: #fff;color: #000;padding: 1rem;}
#carousel ul {display: flex;gap: 1rem;}
#carousel ul li {flex: 1;}

/* mainSlide */
#mainSlide {overflow:hidden;position:relative;width:100%; height: 52.3125rem; /* aspect-ratio: 16/8; */ }

#mainSlide .mainSwiper {width:100%;height:100%; position: relative;}
#mainSlide .mainSwiper .swiper-slide.on .bg {animation:imgscale forwards 6s 0.2s ease-in-out;}

#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:center top 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 .Btn_wrap {position: absolute; max-width: 212px; width: 100%; bottom:6.25rem; left: 0; right:0; margin: auto;}
#mainSlide .arrow-box {display: flex; align-items: center; justify-content: space-between;}
#mainSlide .swiper-pagination {display: flex; gap:1.3rem; font-size: 14px; width: fit-content; color:#fff;}



#mainSlide .TxtBox {position: absolute;top:50%;left:50%;transform: translate(-50%,-50%); max-width:1544px; width: 90%;}
#mainSlide .enTxt {font-family: var(--pointfont); letter-spacing: 0.05rem;}
#mainSlide .checkList {display: flex; flex-direction: column; gap: 1rem;}
#mainSlide .checkList li {background-color: rgba(255,255,255,.1); padding: .5rem 1.5rem; width: fit-content;}
#mainSlide .checkList.Bl li {background-color: rgba(39,39,39,.5); color:#fff;} 
#mainSlide .flexBox {display: flex; align-items: center; gap: 0 3rem;}
#mainSlide .Desc {width: fit-content; padding-right: 5vw;}
#mainSlide .graphImg {width: 42.3125rem;}

#mainSlide .swiper-slide .fade_T, #mainSlide .swiper-slide .fade_R {opacity: 0;}
#mainSlide .swiper-slide-active .fade_T {animation:fade_top 1s 1.5s forwards ease-in-out;}
#mainSlide .swiper-slide-active .fade_R {animation:fade_right 1s 1.5s forwards ease-in-out;}

@media(max-width:768px) {
    #mainSlide {height: 90vh;}
    #mainSlide .TxtBox {width: 80%; top:auto; bottom:26vh; transform: translateX(-50%);}
    #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')}

    #mainSlide .Desc {order:2; width: 100%;}
    #mainSlide .graphImg {width: 30rem; margin-left: auto; margin-bottom: -4rem;  margin-right: -4rem;}
}
@media(max-width:500px) {
    #mainSlide {height: 95vh;}
    #mainSlide .TxtBox {width: 90%; bottom:21vh;}
    #mainSlide .graphImg {width: 25rem; margin-right: -2rem;}
}

@keyframes fade_top{
    0%{transform:translateY(20px);}
    100%{transform:translateY(0);opacity:1;}
}
@keyframes fade_right{
    0%{transform:translateX(20px);opacity:0;}
    100%{transform:translateX(0);opacity:1;}
}


/* relaxed */
#relaxed .swiper-slide {position: relative; background-color: #000; transition: all ease-in .3s;}
#relaxed .swiper-slide:before {opacity: 0; content:''; width: calc(.75rem + 100%); clear: both; height: calc(.75rem + 100%); position: absolute; border:6px solid var(--pointcolor); position: absolute; top:-0.375rem; left: -0.375rem; z-index: 3;}
#relaxed .swiper-slide.on:after {content:''; width: 100%; height: 50%; background-image: linear-gradient(to top, rgba(0,0,0,.6),transparent); position: absolute; bottom:0;left: 0;}
#relaxed .swiper-slide.on:before {opacity: 1;}
#relaxed .swiper-slide img {filter: grayscale(1) opacity(.5);}
#relaxed .swiper-slide.on {filter: none; transition: all ease-in .3s;}
#relaxed .swiper-slide.on img, #relaxed .swiper-slide-active img {filter: none;}

#relaxed .TxtBox {position: absolute; width: 100%; bottom:3rem; left: 50%; transform: translateX(-50%); z-index: 5;}

#relaxed .swiper-slide .hiddenBox {height: 0; overflow: hidden; transition: ease-in .3s;} 
#relaxed .swiper-slide.on .hiddenBox {height: 5.625rem; overflow: visible; transition: ease-in .3s;}
#relaxed .Line {width: .9375rem; height: .125rem; background-color: var(--pointcolor); margin: 1rem auto;}


#relaxed .swiper-slide .Deco {font-family: var(--pointfont); writing-mode: vertical-rl; position: absolute; color:rgba(0,0,0,.08); transform: rotate(180deg); letter-spacing: 0.05rem; top:1.5rem; left:.7rem;}
#relaxed .swiper-slide.on .Deco {color:rgba(0,0,0,.2);}


@media(min-width:1341px){
    #relaxed .relaxedSwiper {overflow: visible;}
}
@media(max-width:1340px){
    #relaxed .flexList {flex-wrap: nowrap; --x-gap:0;}
    #relaxed .swiper-slide:before {display: none;}
    #relaxed .swiper-slide:after {content:''; width: 100%; height: 50%; background-image: linear-gradient(to top, rgba(0,0,0,.6),transparent); position: absolute; bottom:0;left: 0;}
    #relaxed .swiper-slide {border-bottom:6px solid var(--pointcolor); box-shadow: 0 0 0 6px var(--pointcolor);}
    #relaxed .swiper-slide img {filter: none; transition: all ease-in .3s;}
    #relaxed .swiper-slide .hiddenBox {height: 5.625rem; overflow: visible; transition: ease-in .3s;}
    #relaxed .swiper-slide .Deco {opacity: 1; transition: all ease-in .3s;}
    #relaxed .swiper-pagination-progressbar {background-color: #f2f2f2; height: 3px;}
}



/* review */
#review {background: no-repeat center url('/img/main/reviewBg.jpg'); background-size: cover;}
#review .TitBox {height: 48rem;}
#review .swiper {height: 100%; padding-right: 1rem; position: absolute; max-width: 33rem; width: 100%; right: 0;}
#review .swiper-slide {width: 100%; height: 100%; padding: .5rem 1rem; opacity: .5;}
#review .swiper-slide-active, #review .swiper-slide-next {opacity: 1;}
#review .Desc {display: block; width: 100%; height: 100%; border-radius: 1.25rem; background-color: #fff; padding: 2.5rem 2rem; box-shadow: 0 0 15px rgb(0 0 0 / 5%);}
#review .nameBox {display: flex; align-items: center; gap:0 1rem;}
#review .star {width: 5.4375rem;}

#review .swiper-pagination-progressbar {width: 4px; height: 100%; position: absolute; right: 0; left: auto;}

@media(max-width:768px){
    #review .flexList {padding-bottom: 6rem;}
    #review .TitBox {height: auto;}
    #review .swiper {position: relative; height: 53rem; margin-left: auto; margin-right: 0;}
    #review .Desc {padding: 2rem 1.5rem;}
    #review .cozyBtn {position: absolute; bottom:0; left: 0;}
}
@media(max-width:500px){
      #review .swiper {height: 49rem;}
     #review .Desc {padding: 1.5rem; font-size: 1.25rem;}
}



/* doctor */
#doctor {background: no-repeat 30% 60% url('/img/main/doctorBg.png'); background-size: auto;}
#doctor .container {padding: 0 1.25rem;}
#doctor .flexBox {display: flex; gap:3rem 1rem;}
#doctor .mark {background-color: var(--pointcolor); color:#fff; padding: 0 .2rem;}
#doctor .Img.R {max-width: 41.6875rem; width: 100%; margin-left: auto;}
#doctor .Img.L {max-width: 44.375rem; width: 100%; margin-right: auto; left: 0; margin-top:-3rem;}
#doctor .Img img {width: 30.5625rem;}
#doctor .name {position: absolute; top:50%; transform: translateY(-50%); white-space: nowrap;}
#doctor .name.R {right:54%;}
#doctor .name.L {left: 56%;}
#doctor .enName {font-family: var(--pointfont); letter-spacing: 0.05rem; color:var(--pointcolor);}
@media(max-width:1240px){
    #doctor .Img.L {left:-4rem;}
    #doctor .name.L {left: 66%;}
}
@media(max-width:990px){
    #doctor .ImgBox {margin-left: auto;}
    #doctor .Img.L {margin-left: auto; margin-right: 0; left: 0; margin-top: -2rem;}
}
@media(max-width:500px){
    #doctor {background-size: 80%; background-position: 30% 37%;}
    #doctor .container {padding: 0;}
    #doctor .Img img {width: 24.5625rem;}
    #doctor .name.L {left: 58%;}
}


/* differentiate */
#differentiate .flexList {--x-gap:7rem; position: relative; margin-top: 12rem;}
#differentiate .Num {color: var(--pointcolor); font-family: var(--pointfont); letter-spacing: 0.05rem; position: absolute; top:0; right:0;}
#differentiate .Line {width: 3px; height: 10.875rem; background-color: var(--pointcolor); position: absolute; left: -1rem; top:-5rem;}
#differentiate .Txt {max-width: 39.5rem; width: 90%; padding:2rem 1rem; position: relative;}
#differentiate .Txt.R {margin-left: auto;}
#differentiate .Deco {font-family: var(--pointfont); letter-spacing: 0.05rem; font-size: 6.875rem; color:#f2f2f2; font-weight: 600; width: fit-content; position: relative;}
#differentiate .Deco.R {right:-1rem; margin-left: auto;}

#differentiate .box.Up {transform: translateY(-10rem); margin-top: -10rem;}

#differentiate .cozyBtn {position: absolute; bottom: 6rem; right: 0;}

@media(max-width:990px){
    #differentiate .flexList {margin-top: 6rem;}

    #differentiate .box.Up {transform: translateY(0); margin-top:0;}
    #differentiate .Img {width: fit-content;}
    #differentiate .Txt {margin-right: auto;}
    #differentiate .Txt.R {margin-left: 5rem;}

    #differentiate .cozyBtn {position: relative; margin-left: auto; order:5;}

    #differentiate .box1 {order:1;}
    #differentiate .box2 {order:2;}
    #differentiate .box3 {order:3;}
    #differentiate .box4 {order:4;}
}
@media(max-width:500px) {
    #differentiate .Txt.R {margin-left: 3rem;}
    #differentiate .Deco {font-size: 5.875rem;}
    #differentiate .Deco.R {right: 0;}
}



/* social */
#social {position: relative; background: no-repeat bottom center url('/img/main/socialBg.png'); background-size: contain; padding-top: 9.375rem;}
/* #special:after {content:''; width: 100%; height: 100%;} */

#social .swiper-wrapper {align-items: center;}
#social .swiper-slide {transform: scale(0.8) translateY(0); flex-shrink: 0; transition: transform 1s; border-radius: 1.25rem; overflow: hidden;}
#social .swiper-slide-active {transform: scale(1) translateY(0%);}

#social .swiper-slide img {border-radius: 1.25rem; overflow: hidden;}
#social .swiper-slide-active img {border-radius: 0;}

#social .swiper-slide .Txt {padding: 2.3rem 0; opacity: 0; background-color: #d7ebf8;}
#social .swiper-slide-active .Txt {opacity: 1;}
#social .enTxt {font-size: 1rem; font-family: var(--pointfont); color:var(--pointcolor); letter-spacing: 0;}


#social .swiper-button-prev {right: 74%; left: auto;}
#social .swiper-button-next {left:74%; right: auto;}


#social .slideBtn {display: flex; cursor: pointer; position: absolute; bottom:50%; top:auto; align-items: center; justify-content: center; background-color: rgba(9,130,211,.1); width: 5rem; height: 5rem; border-radius: 50%; transition: all 0.3s; cursor: pointer}
#social .slideBtn img {width: .875rem;}
#social .swiper-button-prev {background-color: rgba(39,39,39,.1);}
#social .swiper-button-prev img {filter: invert(1) grayscale(1) brightness(3);}

#social .cozyBtn {margin: 5rem auto 0;}

@media(max-width:990px) {
    #social .slideBtn {opacity: 1; border-color:#fff; bottom:40%;}
    #social .swiper-slide .Txt {padding: 1.5rem 0;}
    #social .swiper-button-prev {right: 80.5%;}
    #social .swiper-button-next {left:80.5%;}
}
@media(max-width:500px) {
    #social .socialSwiper {width: 80%; overflow: visible;}
    #social {background-size: cover;}
    #social .slideBtn {top:auto; bottom:45%; width: 4rem; height: 4rem;}
    #social .swiper-button-prev {right: auto; left: -3rem;}
    #social .swiper-button-next {left:auto; right: -3rem;}
}




/* equipment */
#equipment .container {padding: 0 1.25rem;}

#equipment .equipmentSwiper {margin-top: 5rem;}
#equipment .swiper-slide-prev .Img {left: -2rem;}
#equipment .swiper-slide-next .Img {right: -2rem;}
#equipment .swiper-slide .Img {transform: scale(0.6) translateY(0); flex-shrink: 0; transition: transform 1s; border-radius: 1.25rem; overflow: hidden;}
#equipment .swiper-slide-active .Img {transform: scale(1) translateY(0%);}

#equipment .swiper-slide .Img {width: 29.25rem; position: relative;}
#equipment .swiper-slide .Img img {width: 25.5rem;}
#equipment .swiper-slide .Img:after {content:''; height: 26.8125rem; aspect-ratio: 1/1; background-color: #f6f6f6; position: absolute; left: 0; bottom:0; border-radius: 50%; z-index: -1;}
#equipment .swiper-slide-active .Img:after {background-image: linear-gradient(15deg, #0982d3, #87cefe);}

#equipment .swiper-slide .Txt {text-align: right; opacity: 0; margin-top: .625rem;}
#equipment .swiper-slide-active .Txt {opacity: 1;}

#equipment .slide5 img {margin-left: -13px;}

#equipment .cozyBtn {position: absolute; right: 0; bottom:0;}
@media(max-width:990px) {
    #equipment .cozyBtn.visible-sm {display: flex !important; position: relative;}
}
@media(max-width:500px) {
    #equipment .equipmentSwiper {margin-top: 2rem;}
    #equipment .swiper-slide .Img {width: 25.25rem; position: relative;}
    #equipment .swiper-slide .Img img {width: 21.5rem;}
    #equipment .swiper-slide .Img:after {height: 21.8125rem;}

    #equipment .swiper-slide-prev .Img {left: -1rem;}
    #equipment .swiper-slide-next .Img {right: 0rem;}
}
@media(max-width:400px) {
    #equipment .swiper-slide .Img {width: 22.25rem; position: relative;}
    #equipment .swiper-slide .Img img {width: 18.5rem;}
    #equipment .swiper-slide .Img:after {height: 18.8125rem;;}
}



/* directions */
#directions {background-color: #f6f6f6;}
#directions .container {padding: 0 1.25rem;}
#directions .directionsList {display: flex; flex-direction: column; gap:4rem;}
#directions .directionsList li {display: flex; gap:1rem 2rem; align-items: baseline;}
#directions .directionsList li.items-center { align-items: center; gap: .5rem 2rem; }
#directions .directionsList li:first-child {align-items: center;}
#directions .directionsList .Tit {display: flex; align-items: center; gap:.5rem; width: 9.375rem; white-space: nowrap;}
#directions .directionsList .Tit img, #directions .directionsList .width45 img {width: 1.5625rem;}

#directions .trTit {padding-right: 2rem;}
#directions .trTit span {padding: 0 .45rem;}

#directions .moon {display: flex; align-items: center; gap:.5rem; padding-left: .8rem;}
#directions .moon img {width: 1.0625rem;}
#directions .moon b {box-shadow: inset 0 -0.65em 0 rgba(252, 227, 172, 0.9);}

#directions .check2 {position: relative; padding-left: 2rem;}
#directions .check2:after {content:''; width: 1rem; height: .75rem; background-image: url('/img/main/check2.png'); background-repeat: no-repeat; background-size: cover; position: absolute; left: 0; top:.5625rem;}

#directions .BtnBox {display: flex; gap:1.5rem; align-items: center;}
#directions .mapBtn {padding: .8rem; width: 12.5rem; border-radius: 1.75rem; border:1px solid #272727; display: flex; align-items: center; justify-content: center; gap:1rem; transition: .3s;}
#directions .mapBtn:hover {background-color: #272727; color:#fff; transition: .3s;}
#directions .mapBtn img { max-height: 22px; }

#directions .wrap_controllers, #directions .section_address {display: none;}
#directions .root_daum_roughmap {width: 100%; height: 100%;}
#directions .root_daum_roughmap .wrap_map {width: 100%; height: 48.6875rem;}
#directions .mapBox .map_cover{position: absolute;top:0;width:100%; height: 48.6875rem; left: 0; background-color: rgb(163, 155, 144, 0); z-index: 3;transition: 1s all ease;display:flex;align-items: center;justify-content: center;}

@media (max-width:1140px){
    #directions .mapBox {order:-1;}
}
@media (max-width:500px){
    #directions .directionsList li {flex-direction: column;}
    #directions .directionsList li:first-child {align-items: flex-start;}
    #directions .directionsList li.items-center { align-items: baseline; }

    #directions .directionsList li .width45 { width: 100%; }
    #directions .directionsList .Tit + *, #directions .directionsList .width45 ~ * { padding-left: 1.75rem; }

    #directions .root_daum_roughmap .wrap_map, #directions .mapBox .map_cover {height: 40rem;}
    #directions .BtnBox { flex-wrap: wrap; }
    #directions .mapBtn { width: 45%; }
}


/* footer */
footer {background-color: #272727; position: relative;}
footer:after {content:''; width: 1px; height: 100%; background-color: rgba(255,255,255,.22); position: absolute; top:0; left: 10%;}
footer:before {content:''; width: 1px; height: 100%; background-color: rgba(255,255,255,.22); position: absolute; top:0; right: 10%;}
footer .LogoBox {padding: 4rem 0; border-bottom:1px solid rgba(255,255,255,.22)}
footer .LogoBox img {width: 6.125rem;}
footer .Desc {padding: 4rem 0;}
footer .Desc .op {opacity: .5; letter-spacing: 0;} 
@media(max-width:500px) {
    footer:after {left: 5%;}
    footer:before {right: 5%;}
}