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

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

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

.main .enTit {font-family: var(--pointfont); font-weight: 700; font-size: 5rem;}
@media(max-width:500px) {
    .main .enTit {font-size: 4rem;}
}

.uuBtn {position: relative; display: flex; align-items: center; justify-content: center; gap:0 1rem; white-space: nowrap; border-radius: 35px; background-color: transparent; border:1px solid var(--pointcolor); padding: .7rem 2rem; color: transparent; width: fit-content; transition-property: all; transition-duration: 0.6s; z-index: 9; overflow: hidden; text-shadow: -50px 0 0 transparent, 0 0 0 var(--pointcolor); transition-timing-function: cubic-bezier(0.77, 0, 0.175, 1);}
.uuBtn: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;}
.uuBtn:hover {text-shadow: 0 0 0 #fff, 50px 0 0 transparent;}
.uuBtn:hover:before {transform: translate(0, 0);}

.uuBtn.Gr {background-color: var(--pointcolor); text-shadow: -50px 0 0 transparent, 0 0 0 #f3eee7;} 
.uuBtn.Gr:before {background-color: #505050;}

.main .swiper-button-next:after, .main .swiper-button-prev:after {display: none;}
.main .swiper-button-next, .main .swiper-button-prev {left: 0; right: 0; margin-top: 0; width: 4.375rem; height: 4.375rem; border-radius: 50%; background-color: #f6f4ee; position: relative;}
.main .swiper-button-prev {background-color: transparent; transition: .3s;}
.main .swiper-button-prev:hover {background-color: #f6f4ee; transition: .3s;}
.main .swiper-button-prev img {transform: rotate(180deg); width: 1rem;}
.main .swiper-button-next img {width: 1rem;}

.main .btn_wrap {display: flex;}

/* mainSlide */
#mainSlide {overflow:hidden;position:relative;width:100%; height: 100vh; /* 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}
#mainSlide .bg.bg-1 {background-image:url('/img/main/mainSlide01.jpg')}

#mainSlide .inner {position: absolute; width: 90%; max-width: 1423px; height: fit-content; top:0; bottom:0; right:0; left:0; margin: auto; line-height: 2;}
#mainSlide .Txt {display: flex; align-items: baseline; gap:0 2rem;}
#mainSlide .Desc {max-width: fit-content; width: 100%; margin-left: auto;}

#mainSlide .swiper-slide .fade {opacity: 0;}
#mainSlide .swiper-slide-active .fade {animation:focus 2s 0.3s forwards ease-in-out;}
@keyframes focus {0% {-webkit-filter: blur(12px);filter: blur(12px);opacity: 0;}  100% {-webkit-filter: blur(0px);filter: blur(0px);opacity: 1;}}

#mainSlide .swiper-slide .fade_T {opacity: 0;}
#mainSlide .swiper-slide-active .fade_T {animation:fade_top 2s 0.3s forwards ease-in-out;}
@keyframes fade_top{
    0%{-webkit-filter: blur(12px);filter: blur(12px);opacity: 0; transform:translateY(50px);}
    100%{-webkit-filter: blur(0px);filter: blur(0px);opacity: 1; transform:translateY(0);opacity:1;}
}
@media(max-width:768px) {
    #mainSlide .font-80 {font-size: 4rem;}
    #mainSlide .Txt {flex-direction: column;}
    #mainSlide .Desc {margin-left: 0;}
}



/* value */
#value {background: no-repeat center url('/img/main/valueBg.jpg'); background-size: cover;}
#value .Desc {position: relative; display: flex; align-items: center; justify-content: center; position: relative; text-align: center;}
#value .Desc > div {max-width: 694px; width: 90%; margin: auto;}
#value .Deco {position: absolute; height: fit-content; top:0; bottom:0; left: 50%; transform: translateX(-50%); margin: auto;}
#value .DecoTxt {font-family: var(--pointfont); white-space: nowrap; font-style: italic; font-size: 2rem; text-align: center; text-transform: uppercase; color:rgba(208,177,127,.3)}
#value .DecoTxt span { color:rgba(208,177,127,.43)}
@media (max-width: 1550px) {
    #value .Desc {justify-content: center;}
}
@media (max-width: 990px) {
    #value .Img img {margin: auto; width: 50rem;}
    #value .Desc {order:-1; padding: 5rem 0;}
    #value .Deco .valueImg {width: 22.375rem;}
}
@media (max-width: 500px) {
    #value .Desc {text-align: center;}
}



/* Signature */
#Signature {background: no-repeat center url('/img/main/SignatureBg.jpg'); background-size: cover;}
#Signature .box {position: relative;}
#Signature .Img img {filter: grayscale(1) brightness();}
#Signature .box.on .Img {border-radius: 1.875rem; overflow: hidden;transition: ease-in .3s;}
#Signature .box.off .Img {border-radius: 0; overflow: hidden;transition: ease-in .3s;}

#Signature .box.on .Img img {filter: brightness(.3); mix-blend-mode: multiply;}
#Signature .Desc {position: absolute; width: fit-content; opacity: 0; height: fit-content; top:0; bottom:0; right:0; left:0; margin: auto; transition: ease-in .3s;}
#Signature .box.on .Desc {opacity: 1;}
#Signature .btn_wrap {display: none;}

@media(max-width:1240px){
    #Signature .container {margin-left: auto; margin-right: 0; width: 95%;}
    #Signature .flexList {flex-wrap: nowrap; --x-gap:0;}    
    #Signature .swiper-button-next, #Signature .swiper-button-prev {position: relative;}
    #Signature .swiper-slide-active .Img {border-radius: 1.875rem; overflow: hidden;}
    #Signature .swiper-slide-active .Img img {filter: brightness(.3); mix-blend-mode: multiply;}
    #Signature .swiper-slide-active .Desc {opacity: 1;}
    #Signature .btn_wrap {display: flex !important; justify-content: flex-end;}
}
@media (max-width: 500px) {
    #Signature .btn_wrap {padding-right: 1rem;}
}



/* Downtime */
#Downtime {background: no-repeat center url('/img/main/DowntimeBg.jpg'); background-size: cover;}
#Downtime .Line {width: 1px; height: 8.125rem; background-color: #fff; margin: 5rem auto;}
#Downtime .enPoint {font-family: var(--pointfont2); font-size: 4rem; color: rgba(255,255,255,.7);}
#Downtime .enPoint span {color: rgba(255,255,255,1);}


/* Doctor */
#Doctor {background: no-repeat center url('/img/main/doctorBg.jpg'); background-size: cover;}
#Doctor .Line {width: 1px; height: 100%; background-color: rgba(151,145,131,.5); position: absolute; top:0; bottom:0; left: 0; right:0; margin: auto;}
#Doctor .Line_w {max-width: 58.125rem; width: 90%; height: 1px; background-color: rgba(151,145,131,.5); position: absolute; top: -1.875rem; bottom:0; left: 0; right:0; margin: auto;}
#Doctor .doctorImg {width: 35.0625rem;}
@media (max-width: 990px) {
    #Doctor .Img {order:2; padding-top: 3rem;}  
}
@media (max-width: 500px) {
   #Doctor .doctorImg {width: 30rem;} 
}



/* point */
#point {background-color: #000; position: relative; z-index: 0;}
#point .bg_wrap {clip: rect(0, auto, auto, 0); position: absolute;top: 0;left: 0;width: 100%;height: 100%; z-index: -1;}
#point .bg {position: fixed;display: block;top: 0;left: 0;width: 100%;height: 100vh;background-image: url('/img/main/pointBg.jpg');background-position: 50%;background-repeat: no-repeat;background-size: cover;transform: translateZ(0);will-change: transform;}

#point .Desc {max-width: 51.25rem; width: fit-content; margin: auto;}
#point .Desc.Lg {max-width: 61rem;}
@media(max-width:500px) {
    #point .Desc {width: fit-content; margin: auto; padding: 5rem 0;}
    #point .font-60 {font-size: 3rem;}
}



/* Interior */
#Interior {background-color: #eae6dd;}
#Interior .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; height: 480px;}
#Interior .btn_wrap {position: absolute; right: 0; bottom:0;}


@media(max-width:500px) {
	#Interior .InteriorSwiper .swiper-slide img {height:300px}
    #Interior .btn_wrap {position: relative;}
}




/* Contact */
#Contact .contactList {display: flex; flex-direction: column; gap:4rem;}
#Contact .contactList li {display: flex;}
#Contact .contactList li:nth-child(1) {align-items: center;}

#Contact .contactList li .Tit {width: 6.25rem;}


#Contact .Desc .trTit {text-align: justify; height: 2rem; width: 6rem; display: block; margin-right: 1.5rem;}
#Contact .Desc .trTit:after {content:''; display: inline-block; width: 100%;}

#Contact .Desc.EN .trTit {width: auto;}
#Contact .Desc.JP .trTit {width: 9rem;}


#Contact .mapBtn {display: flex; align-items: center; justify-content: center; white-space: nowrap; gap:0 1rem; cursor: pointer; padding: .7rem 1.5rem; border:1px solid #414042; width: fit-content; transition: .3s;}
#Contact .mapBtn:hover {background-color: #414042; color:#fff; transition: .3s;}
#Contact .mapBtn img {width: 2.25rem; filter: grayscale(1); transition: .3s;}
#Contact .mapBtn:hover img {filter: none; transition: .3s;}

#Contact .mapBox {align-items: stretch; position: relative;}
#Contact .mapBox #map {width: 100%; min-height: 56.25rem;}
#Contact .mapBox .map_cover{position: absolute;top:0;width:100%; min-height: 56.25rem; left: 0; background-color: rgb(163, 155, 144, .1); z-index: 3;transition: 1s all ease;display:flex;align-items: center;justify-content: center;}
@media(max-width:500px) {
    #Contact .mapBtn {flex:1;}
    #Contact .mapBox #map {min-height: 45rem;}
    #Contact .mapBox .map_cover {min-height: 45rem;}
}




/* footer */
footer {background-color: #979183; padding: 7rem 0;}
footer p {color:rgba(255,255,255,.7); letter-spacing: .0625rem; line-height: 1.8;}
footer .footerList {display: flex; align-items: center; justify-content: flex-end; gap:3rem;}
footer .footerList a {color:rgba(255,255,255,.5); letter-spacing: .0625rem;}
footer .footerList a:hover {color:rgba(255,255,255,1);}
footer .footerLogo {width: 10.5rem;}
@media(max-width:990px) {
    footer .box1 {order:3; text-align: center;}
    footer .box2 {order:2;}
    footer .box3 {order:1;}

    footer .flexList {--y-gap:4rem}
    footer .footerList {justify-content: center;}
}



/* 퀵메뉴 */
.Quick {position: fixed;right: 2rem; bottom:25%; z-index: 9990;}
.Quick .quickList {display: flex; flex-direction: column; gap:.625rem;}
.Quick .quickList li {position: relative; transition: all .3s;}
.Quick .quickList li img {opacity:0; position: absolute; top:0; bottom:0; left: 0; right:0; margin: auto; width: 1.875rem; height: 1.875rem;}
.Quick .quickList li:hover img {opacity: 1; transition: all .3s;}
.Quick .quickList li span {opacity: 1;}
.Quick .quickList li:hover span {opacity: 0; transition: all .3s;}

.Quick .quickList li a {width: 4.1875rem; height: 4.1875rem; border-radius: 50%; text-align: center; line-height: 1.2; background-color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700;}
.Quick .quickList li a.top {background-color: var(--pointcolor);}
@media(max-width:500px) {
    .Quick {bottom:10%;}
}