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

.dodamBtn {font-size: 1.5rem; font-family: var(--mainfont); position: relative; display: flex; align-items: center; justify-content: center; white-space: nowrap; border:1px solid #fff; padding: .5rem;  color: transparent; width: 16.3rem; 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);}
.dodamBtn:before {width: 100%; height: 100%; top: 0; left: 0; background-color: var(--pointcolor); transform: translate(-100%, 0); content: ""; position: absolute; z-index: -3; transition-property: inherit; transition-duration: inherit; transition-timing-function: inherit;}
.dodamBtn:hover {text-shadow: 0 0 0 #fff, 50px 0 0 transparent; border-color:var(--pointcolor);}
.dodamBtn:hover:before {transform: translate(0, 0);}

.dodamBtn.BL {border-color:#000; text-shadow: -50px 0 0 transparent, 0 0 0 #000;}
.dodamBtn.BL:before {background-color: #000;}
.dodamBtn.BL:hover {text-shadow: -50px 0 0 transparent, 0 0 0 #fff;}

.main_Tit {font-size: 2.625rem; font-weight: 700; color:var(--pointcolor); font-family: var(--pointfont);}
.main .swiper-button-next:after, .main .swiper-button-prev:after {content:'';}




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

#mainSlide .mainSwiper {opacity:0;transform:scale(1.05);width:100%;height:100%;transition:all 2s var(--ani)}
#mainSlide .mainSwiper.on {opacity:1;transform:scale(1)}
#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 no-repeat;background-size:cover; transition: .3s;}
#mainSlide .bg.bg-1 {background-image:url('/img/main_new/mainSlide01.jpg')}
#mainSlide .bg.bg-2 {background-image:url('/img/main_new/mainSlide02.jpg')}
#mainSlide .bg.bg-3 {background-image:url('/img/main_new/mainSlide03.jpg')}
#mainSlide .bg.bg-4 {background-image:url('/img/main_new/mainSlide04.jpg')}
#mainSlide .bg.bg-5 {background-image:url('/img/main_new/mainSlide05.jpg')}
#mainSlide .bg.bg-6 {background-image:url('/img/main_new/mainSlide06.jpg')}

#mainSlide .TxtBox {position: absolute;top:50%;left:50%;transform: translate(-50%,-50%); max-width:var(--layoutwidth); width: 100%; padding: 0 1rem;}
/* #mainSlide .TxtBox {position: relative; max-width:var(--layoutwidth); margin: auto; top:50%; } */

#mainSlide .slide01 {transition: .3s;}
#mainSlide .slide01:hover .bg.bg-1 {background-image:url('/img/main_new/mainSlide01_1.jpg'); transition: .3s;}


#mainSlide .page_wrap {position: absolute; bottom:2rem; display: flex; justify-content: space-between; align-items: center; width: 300px; right:0; left:0; margin: auto;}
#mainSlide .pagination_bullet {position: relative; z-index: 3; bottom:0; width: 90px; font-size: 1.5rem; font-family: var(--mainfont);}
#mainSlide .swiper-pagination-total {opacity: .6;}
#mainSlide .pagination_progress {position: relative; z-index: 3; width: 90px; height: 2px; background-color: #fff;}
#mainSlide .swiper-pagination-progressbar-fill {background-color: var(--pointcolor);}
#mainSlide .slideBtn {font-size: 30px; color:#fff; opacity: 1; position: relative; padding: .5rem;}
#mainSlide .swiper-button-next, #mainSlide .swiper-button-prev {margin-top: 0; right: 0; left: 0;}


@media(max-width:768px){
    #mainSlide {aspect-ratio: 100 / 163;}
    #mainSlide .bg.bg-1 {background-image:url('/img/main_new/mainSlide01_m.jpg')}
    #mainSlide .slide01:hover .bg.bg-1 {background-image:url('/img/main_new/mainSlide01_1_m.jpg')}
    #mainSlide .bg.bg-2 {background-image:url('/img/main_new/mainSlide02_m.jpg')}
    #mainSlide .bg.bg-3 {background-image:url('/img/main_new/mainSlide03_m.jpg')}
    #mainSlide .bg.bg-4 {background-image:url('/img/main_new/mainSlide04_m.jpg')}
    #mainSlide .bg.bg-5 {background-image:url('/img/main_new/mainSlide05_m.jpg')}
    #mainSlide .bg.bg-6 {background-image:url('/img/main_new/mainSlide06_m.jpg')}
}




/* treatment */
#treatment .box {padding: 5rem 1rem; box-shadow: 0 5px 15px rgb(0 0 0 / 7%);}
#treatment .treatmentImg {width: 5.6875rem;}
#treatment a {color:#000; display: flex; align-items: center; justify-content: center; transition: .3s; position: relative;}
#treatment a:hover {background:linear-gradient(to bottom, rgba(255,255,255,.1) 50%, var(--pointcolor)); width: fit-content; margin-left: auto; margin-right: auto;}
@media(max-width:768px){
    #treatment a span {display: none;}
}


/* problem */
#problem {background: no-repeat center url('/img/main_new/problemBg.jpg'); background-size: cover;}
#problem ul {max-width: 906px;}
#problem ul li {background-color: #fff; border-radius: 1.875rem; padding:1.3rem 2rem; width: 28.125rem; position: relative;}
#problem ul li:after {content:''; position: absolute; clip-path: polygon(75% 75%, 75% 100%, 73% 100%, 52% 75%); width: 100px; height: 100px; background-color: #fff; bottom:-1.5rem; right:0; left:0; margin: auto; border-radius: 5px;}

#problem ul li:nth-child(odd) {margin-left: auto;}
#problem ul li:nth-child(odd):after {transform: rotateY(180deg);}
@media(max-width:1400px){
    #problem .flex {flex-wrap: wrap;}
    #problem .Tit {text-align: center; width: 100%; margin-top: 3rem;}
    #problem .Desc {order:-1; margin: auto; width: 100%;}
}
@media(max-width:768px){
    #problem ul li:nth-child(even) {margin: 2rem 0;} 
}


/* why */
#why .Desc {background-color: #f9fdff; border:1px solid #cee3f2; padding: 5rem; max-width: 849px; position: relative;}
#why .Desc:after {content:''; position: absolute; width: 85%; height: 10px; background-color: #cee3f2; top:-5px; left: 0;}
#why .Desc:before {content:''; position: absolute; height: 85%; width: 10px; background-color: #cee3f2; top:-5px; left: -5px;}
#why .Img {position: absolute; z-index: -1; right:0; top:10%;}
@media(max-width:990px){
    #why .container {width: 100%;}
    #why .flex {flex-direction: column;}
    #why .Img {position: relative; order:-1; z-index: 3; width: 90%; margin: auto;} 
    #why .Desc {padding: 30rem 5rem 10rem; margin-top: -23rem;}
}
@media(max-width:500px){
    #why .Desc  {padding: 30rem 3rem 5rem;}
}



/* doctor */
#doctor {background-color: #eef0f3; position: relative;}
#doctor .container {max-width: 1700px;}
#doctor .LogoBg {width: 30.25rem; position: absolute; top:0; right:0;}
@media(max-width:990px){
    #doctor .flex {flex-wrap: wrap;}
    #doctor .Img, #doctor .Desc {width: 100%;}
    #doctor .Img {order:2;}
    #doctor .Desc {text-align: center; margin-bottom: 5rem;}
    #doctor .dodamBtn {margin: auto;}
}


/* philosophy */
#philosophy {background: no-repeat center url('/img/main_new/philosophyBg.jpg'); background-size: cover; position: relative;}
#philosophy .Line {height: 9.8125rem; width: 1px; background-color: var(--pointcolor); position: absolute; z-index: 3 ; top:0; right:0; left:0; margin: auto;}
#philosophy .Line:after {content:''; width: 10px; height: 10px; border-radius: 50%; background-color: var(--pointcolor); position: absolute; bottom:0; right:-5px;}



/* difference */
#difference .Img {position: relative; }
#difference .Img img {filter: grayscale(1); transition: ease-in .3s;}
#difference .Img .Tit {font-size: 2.625rem; text-align: center; color:var(--pointcolor); letter-spacing: .5rem; position: absolute; top:0; bottom:0; right:0; left:0; margin: auto; width: fit-content; height: fit-content;}
#difference .Img:hover img {filter: grayscale(0);}
#difference .Img:hover .Tit {color:#fff;}
#difference .Desc {display: flex; align-items: center; justify-content: center;}
#difference .secondBox {margin-top: -3rem;}
@media(max-width:1240px){
    #difference .Img {order:-1;}
    #difference .Desc {padding: 3rem 2rem;}
    #difference .secondBox {margin-top: 3rem;}
}



/* interior */
#interior .slideBtn {width: 4.4375rem; height: 4.4375rem; border-radius: 50%; background-color: var(--pointcolor); opacity: 1;}
#interior .slideBtn span {color:#fff;}
#interior .swiper {overflow:visible;}
#interior .swiper-button-next {right:-2.2188rem}
#interior .swiper-button-prev {left: -2.2188rem;}
@media(max-width:500px) {
    #interior .swiper-button-next {right:-1.5rem}
    #interior .swiper-button-prev {left:-1.5rem}
}


/* info */
#info .map_Inner {width: 100%; height: 61rem;}
#info .root_daum_roughmap {width: 100%; height: 61rem;}
#info .wrap_map {width: 100%; height: 61rem;}
#info .Tit {position: relative; padding-left: -1rem; font-family: var(--pointfont);}
#info .Tit:after {content:''; width: .625rem; height: .625rem; border-radius: 50%; background-color: var(--pointcolor); position: absolute; left: -1rem; top:0;}

#info .map_cover{position: absolute;top:0;width:100%; height: 61rem; left: 0; background-color: rgb(0,0,0,.1); filter: sepia(1); color:#333; opacity: 0; z-index: 2;transition: 1s all ease;display:flex;align-items: center;justify-content: center;}
#info .map_cover:hover {opacity: 1;}

#info .Desc {position: absolute; padding: 4rem; width: fit-content; height: fit-content; background-color: #fff; top:0; bottom:0; left:5rem; margin: auto; z-index: 3;}

#info table {}
#info table td {vertical-align: baseline;}
#info .TbTit {width: 7rem; word-break:break-all; text-align: justify; font-weight: 700; padding-right: 1rem; height: 30px; display: block;}
#info .TbTit:after {content:''; display: inline-block; width: 100%;}

@media(max-width:1240px){
    #info .Desc {position: relative; left:0; margin-top:-5rem;}
}
@media(max-width:500px){
    #info .Desc {width: 90%; padding:4rem 2rem;}
}




/* footet */
footer.section {padding: 5rem 0;}
footer .flexList {--y-gap:4rem;}
footer .footer_logo {width: 10.6875rem;}
footer ul li {margin-left: 2rem;}