: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:0rem}
.main .ygap2 {--y-gap:2rem}
.main .ygap3 {--y-gap:3rem}
.main .ygap4 {--y-gap:4rem}
.main .ygap5 {--y-gap:5rem}

.main .enTit {font-weight: 700; font-family: var(--pointfont); color:var(--subcolor)}
.main .mainTit span {color:var(--pointcolor);}
.main .zum {position: relative; padding-left: 1rem;}
.main .zum:after {content:'· '; position: absolute; left: 0; top:0; color:#1d284f; font-weight: 800;}
@media(max-width:768px) {
    .main.font-20 {font-size: 1.5rem;}
    .main .font-42 {font-size: 2.6rem;}
}
.BR_Btn {pointer-events: auto; cursor: pointer; background: transparent; width: fit-content; border: 1px solid var(--pointcolor); padding: .45rem 1.7rem; position: relative; display: flex; align-items: center; gap: 1rem; border-radius: 23px; overflow: hidden; color: var(--pointcolor); transition: color 0.3s ease;}
.BR_Btn span {position: relative; z-index: 2;}
.BR_Btn .material-symbols-outlined {font-size: 1.125rem;}
.BR_Btn:hover span {color: #fff;}
.BR_Btn::before {content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: var(--pointcolor); transition: transform 0.3s cubic-bezier(0.3, 0, 0.2, 1), top 0.5s cubic-bezier(0.3, 0, 0.2, 1); z-index: 1;}
.BR_Btn:hover::before {top: 0;}
  
.BR_Btn.Wh {color:#fff; border-color:#fff;}
.BR_Btn.Wh:hover span {color: var(--pointcolor);}
.BR_Btn.Wh::before {background-color: #fff;}


.main .swiper-button-next:after, .main .swiper-button-prev:after {content:'';}
.main .swiper-button-prev img {transform: rotate(180deg);}

.main .SlideBtn {position: relative; width: 3.75rem; margin-top: 0; top:0; left: 0; right:0; height: 3.75rem; border-radius: 50%; border:1px solid var(--pointcolor);}
.main .SlideBtn:hover {background-color: var(--pointcolor);}
.main .SlideBtn:hover img {filter: invert(1) brightness(10);}
.main .swiper-button-prev img, .main .swiper-button-next img {width: 1.375rem;}


@media (max-width: 1550px) {
    .main .container {width: 86%; margin: auto; padding: 0;}
}
@media (max-width: 400px) {
    .main .container {width: 90%; margin: auto; padding: 0;}
}

/* mainSlide */
#mainSlide {overflow:hidden;position:relative;width:100%; margin-top: 70px; aspect-ratio: 12/5.4;  /* height: 860px */; 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: no-repeat center;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%); width:1410px; max-width: 90%;}
#mainSlide .Name {position: absolute; padding: 1.3rem 2.3rem; text-align: center; border-radius: .75rem; backdrop-filter: blur(15px) brightness(105%); right: 1.3rem; bottom:-4.375rem;}
#mainSlide .TxtBox ul {display: flex; align-items: center; gap:.7rem;}
#mainSlide .TxtBox ul li {border-radius: 1.5rem; background-color: rgba(255,255,255,.7); text-align: center; padding: .5rem 1rem; width: 165px;}

#mainSlide .pageBox {display: flex; align-items: center; gap:.5rem; position: absolute; bottom:5rem; left: 50%; transform: translateX(-50%); z-index: 3;}

#mainSlide .swiper-button-next, #mainSlide .swiper-button-prev {position: relative; left: auto; right: auto; margin-top: 0;}
#mainSlide .swiper-pagination {position: relative; bottom:0; display: flex; align-items: center; justify-content: center; gap:.5rem}
#mainSlide .swiper-pagination-bullet {margin: 0; width: 6px; height: 6px; border-radius: 3px; border:1px solid #fff; background-color: transparent; opacity: 1; transition: width .3s;}
#mainSlide .swiper-pagination-bullet-active {width: 22px; background-color: #fff;}

@media(max-width:1440px) {
    #mainSlide {height: 860px; aspect-ratio: auto;}
}
@media(max-width:768px) {
    #mainSlide {height: 62.5rem;}
    
    #mainSlide .bg {background-position: 69%;}
    #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 .TxtBox {top: 40%; bottom: 0; max-width: 85%;}
    #mainSlide .Name {position: relative; width: fit-content; right: 0; background-color: rgba(255, 255, 255, .5);}
    #mainSlide .TxtBox ul {flex-direction: column; align-items: flex-start;}

    #mainSlide .pageBox {left: 20%;}
}



/* Subject */
#Subject .LogoBg {position: absolute; right:0; bottom:0; width: 9rem;}
#Subject .Inner {max-width: var(--layoutwidth); margin: auto;}
#Subject .swiper-slide img {border-radius: .75rem; overflow: hidden;}
#Subject .box.Left {display: flex; flex-direction: column; justify-content: space-between;}
#Subject .SubjectImgSwiper {max-width: 600px; width: 100%; margin-left: 0;}
#Subject .Desc {position: absolute; display: flex; align-items: center; justify-content: space-between; padding: 1rem 2rem; width: 90%; left: 50%; transform: translateX(-50%); bottom: 2rem; border-radius: .75rem; background-color: rgba(255,255,255,.75);}
#Subject .arrowImg {width: 1.625rem;}

#Subject .BtnBox {display: flex; align-items: center; gap:0 4rem;}
#Subject .Btn_wrap {display: flex; align-items: center; gap:1rem;}

#Subject .swiper-pagination {position: relative; width: fit-content; bottom:0; display: flex; align-items: center; gap:2rem; color:rgba(0,0,0,.5)}
#Subject .swiper-pagination-current {color:var(--pointcolor)}
#Subject .swiper-pagination-total {color:#2c2c2c;}


@media (max-width: 1550px) {
    #Subject .Inner {width: 90%;} 
}
@media(max-width:768px) {
    #Subject .Inner {width: 100%; max-width: 100%;} 
    #Subject .box.Left {display: none;}

    #Subject .SubjectSwiper .swiper-slide {opacity: .5;}
    #Subject .SubjectSwiper .swiper-slide-active {opacity: 1;}
}



/* Doctor */
#Doctor {background: no-repeat center /cover url('/img/main/DoctorBg.jpg');}
#Doctor .Desc {padding: 0 3rem;}

#Doctor .ImgBox {position: relative;}
#Doctor .Name {color:#fff; font-size: 5rem; font-family: var(--pointfont); font-weight: 700; letter-spacing: 0; position: absolute; z-index: 3; white-space:nowrap; bottom: .5rem; left: 92%;}
#Doctor .DoctorImg {border-radius: .75rem; overflow: hidden;}
#Doctor .DoctorImg.Img1 {margin-left: auto; position: relative; z-index: 3;}
#Doctor .DoctorImg.Img2 {position: absolute; bottom:-3rem; left:-15rem;}
@media(max-width:768px) {
    #Doctor .Desc {padding: 0;}
    #Doctor .ImgBox {padding-bottom: 11rem;}
    #Doctor .DoctorImg.Img2 {left: -1.875rem; bottom: 0; width: 65%;}
    #Doctor .Name {left: auto; font-size: 4rem; right: -1rem; bottom:4rem; text-align: right; line-height: 1.2;}
}


/* Philosophy */
#Philosophy .BR_Btn {position: absolute; bottom:0; right: 0;}
#Philosophy .flexBox {display: flex; gap:0 2rem;}
#Philosophy .Slide {width: 70%;}
#Philosophy .ImgSlide {width: calc(30% - 2rem); padding-right: 1rem;}
#Philosophy .PhilosophySwiper .swiper-slide {display: flex; align-items: center; gap:2rem;}
#Philosophy .PhilosophySwiper .swiper-slide img {border-radius: 212.5px; overflow: hidden;}

#Philosophy .PhilosophySwiper .Desc {padding: 0 2rem 2rem;}
#Philosophy .BtnBox {display: flex; align-items: center; gap:1rem; width: calc(40% - 4rem); position: absolute; z-index: 3; bottom:1px; left: 61%;}

#Philosophy .PhilosophyImgSwiper .swiper-slide {background: no-repeat center / cover; min-height: 425px; border-radius: .75rem; opacity: .5;}
#Philosophy .PhilosophyImgSwiper .slide1 {background-image: url('/img/main/Philosophy01.jpg');}
#Philosophy .PhilosophyImgSwiper .slide2 {background-image: url('/img/main/Philosophy02.jpg');}
#Philosophy .PhilosophyImgSwiper .slide3 {background-image: url('/img/main/Philosophy03.jpg');}
@media(max-width:1800px) {
    #Philosophy .BtnBox {left: 65%;}
}
@media(max-width:1360px) {
    #Philosophy .Slide {width: 100%;}
    #Philosophy .PhilosophyImgSwiper, #Philosophy .BtnBox {display: none;}
    #Philosophy .Slide, #Philosophy .Desc {width: 100%;} 
    #Philosophy .PhilosophySwiper .swiper-slide {flex-direction: column; gap:2rem; align-items: flex-start; opacity: .5;}
    #Philosophy .PhilosophySwiper .swiper-slide-active {opacity: 1;}
}
@media(max-width:990px) {
    #Philosophy .BR_Btn {position: relative; margin-top: 3rem;}
}
@media(max-width:768px) {
    #Philosophy .PhilosophySwiper .Desc {padding: 0;}
}

/* Equipment */
#Equipment .BR_Btn {position: absolute; bottom:0; right: 0;}
#Equipment .inner {position: relative;}
#Equipment .inner:after {content:''; max-width: 35vw; width: 90%; height: 47.5rem; background-image: url('/img/main/EquipmentBg.jpg'); background-size: cover; position: absolute; left: 0; top:50%; transform: translateY(-50%); border-radius: .75rem; overflow: hidden;}
#Equipment .BtnBox {display: flex; align-items: center; gap:1rem; width: fit-content; position: absolute; z-index: 3; left: 10%; bottom:1rem;}

#Equipment .SlideBox {max-width: 1425px; width: 78%; margin-left: auto; margin-top: 12.5rem;}
#Equipment .EquipmentSwiper .swiper-slide img {border-radius: .75rem; overflow: hidden; position: relative;}
#Equipment .EquipmentSwiper .name {background-color: rgba(255,255,255,.7); border-radius: .75rem; padding: 1rem; position: absolute; bottom:2rem; left: 50%; transform: translateX(-50%); width: 90%; max-width: 340px;}
@media(max-width:1100px) {
    #Equipment .inner:after {height: 42rem;}
}
@media(max-width:990px) {
    #Equipment .BR_Btn {position: relative; margin-top: 3rem;}
    #Equipment .BtnBox {display: none;}
    #Equipment .SlideBox {width: 90%;}
}
@media(max-width:768px) {
    #Equipment .inner:after {height: 40rem;}
}
@media(max-width:500px) {
    #Equipment .inner:after {height: 36rem;}
}


/* Interior */
#Interior .flexBox {display: flex; align-items: center; gap:5rem 1rem;}
#Interior .Img img {border-radius: .75rem; overflow: hidden;} 
@media(max-width:990px) {
    #Interior .BR_Btn {margin-top: 3.125rem;}
    #Interior .section-left {width: 85%; margin: auto; padding-left: 0;}
    #Interior .Img img {transform: scale(1.1);}
}


/* Information */
#Information {background-image: linear-gradient(0deg, #f2f5ff, #fff);}
#Information #map {height: 77.4375rem; border-radius: .75rem; border:1px solid #d3d6e1; overflow: hidden;}
#Information .mapBox {position: relative;}
#Information .map_cover{position: absolute;top:0;width:100%; height: 100%; left: 0; background-color: rgb(0,0,0,.01); z-index: 3;transition: 1s all ease;display:flex;align-items: center;justify-content: center;}
#Information .mapLink.mapIn {gap:0; position: absolute; right: 0; bottom:0; z-index: 3;}

#Information .mapLink.mapIn li a {border-radius: 0;}
#Information .mapLink.mapIn li:first-child a {border-radius: .5rem 0 0 0; border-right: none;}
#Information .mapLink.mapIn li:last-child a {border-radius:  0 0 .5rem 0; border-left:none;}
#Information .mapLink.mapIn li:nth-child(2) a {background-color: #fbe100;}

#Information .infoBox {padding: 0 3rem 0 2rem;}
#Information .inner {padding: 0 2rem;}
#Information .Number {font-family: var(--pointfont); color:var(--pointcolor); letter-spacing: .05rem;}

#Information .Desc li {display: flex; gap:0 2rem;}
#Information .TimeTb {color:#2c2c2c; letter-spacing: 0;}
#Information .TimeTb td {padding-bottom: .7rem;}

#Information .TimeTb .TbTit {text-align: justify; letter-spacing: -.07rem; padding-right: 2rem; height: 30px; display: block;}
#Information .TimeTb .TbTit:after {content:''; display: inline-block; width: 100%;}

#Information .Line {width: 100%; height: 1px; background-color: rgba(56,74,139,.25); margin: 2.5rem auto;}



#Information .mapLink {display: flex; align-items: center; gap:0 .5rem;}
#Information .mapLink li a {display: flex; align-items: center; justify-content: center; white-space: nowrap; gap:0 1rem; font-size: 1.125rem; font-weight: 600; padding: .7rem 1.5rem; border-radius: .5rem; border:1px solid #e3e7ea; background-color: #fff;}
@media(max-width:990px) {
    #Information #map {height: 48rem;}
    #Information .mapBox {width: 95%; margin: auto;}
    #Information .mapLink li {flex: 1; max-width: 190px;}
}
@media(max-width:768px) {
    #Information .TimeTb .TbTit {padding-right: 1rem;}
}
@media(max-width:500px) {
    #Information .infoBox {padding: 0 2rem;}
    #Information .inner {padding: 0; width: 95%; margin: auto;}
    #Information .Line {width: 95%;}
    #Information .mapLink.mapIn {width: 80%;}
    #Information .mapLink li a {padding: .7rem 1rem; gap:.3rem}
}


/* footer */
footer {background-color: #232b48; padding: 3rem 0; position: relative; overflow: hidden;}
footer .flexBox {display: flex; gap:2rem;}

footer .footerLogo {width: 12.5625rem;}
footer .infoLink {display: flex; align-items: center; gap:0 2rem; font-weight: 700;}
footer a {color:#fff;}

footer .footerBg {position: absolute; right: 3rem; bottom:-3rem; width: 12.375rem;}
@media(max-width:500px) {
    footer {padding: 3rem 0 8rem;}
    footer .footerBg {right: -1rem; bottom:2rem;}
}