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

.main .xgap2 {--x-gap:2rem;}
.main .ygap2 {--y-gap:2rem;}
.main .ygap6 {--y-gap:6rem;}

.main .material-symbols-outlined {font-size: 1.5rem;}
.main a {text-decoration: none;}

.enTit {color: rgba(3,110,184,.3); font-family: var(--enfont); white-space: nowrap; font-weight: 700; font-size: 12.5rem; line-height: .7;}
.Title {font-size: 3.75rem; font-weight: 600; line-height: 1.2;}
.pointEn {font-family: var(--pointfont); color: var(--pointcolor); font-weight: 600;}
.split > span {display: inline-block;} 


.LL_Btn {padding: 1rem 2rem; border-top:1px solid #fff; border-bottom:1px solid #fff; display: flex; align-items: center; justify-content: space-between; font-weight: 500; letter-spacing: .3125rem; animation: fade-up 2.5s both;}
.LL_Btn  {position: relative; white-space: nowrap;  background-color:transparent; 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);}

.LL_Btn:before {width: 100%; height: 100%; top: 0; left: 0; background-color: #fff; transform: translate(-100%, 0); content: ""; position: absolute; z-index: -3; transition-property: inherit; transition-duration: inherit; transition-timing-function: inherit;}
.LL_Btn:hover {text-shadow: 0 0 0 var(--pointcolor), 50px 0 0 transparent;}
.LL_Btn:hover:before {transform: translate(0, 0);}


.LL_Btn.Bl {border-top:1px solid var(--pointcolor); border-bottom:1px solid var(--pointcolor);}
.LL_Btn.Bl  {text-shadow: -50px 0 0 transparent, 0 0 0 #000;}

.LL_Btn.Bl:before {width: 100%; height: 100%; top: 0; left: 0;  background-color: var(--pointcolor); transform: translate(-101%, 0); content: ""; position: absolute; z-index: -3; transition-property: inherit; transition-duration: inherit; transition-timing-function: inherit;}
.LL_Btn.Bl:hover {text-shadow: 0 0 0 #fff, 50px 0 0 transparent; }
.LL_Btn.Bl:hover:before {transform: translate(0, 0);}


.LL_Btn.Bk {border-top:1px solid #000; border-bottom:1px solid #000;}
.LL_Btn.Bk  {text-shadow: -50px 0 0 transparent, 0 0 0 #000;}

.LL_Btn.Bk:before {width: 100%; height: 100%; top: 0; left: 0;  background-color: #000; transform: translate(-101%, 0); content: ""; position: absolute; z-index: -3; transition-property: inherit; transition-duration: inherit; transition-timing-function: inherit;}
.LL_Btn.Bk:hover {text-shadow: 0 0 0 #fff, 50px 0 0 transparent; }
.LL_Btn.Bk:hover:before {transform: translate(0, 0);}

@media(max-width:550px) {
    .enTit {font-size: 10rem;}
}
@media(max-width:430px) {
    .enTit {font-size: 8rem;}
}


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

#mainSlide .mainSwiper {opacity:0;transform:scale(1.05); width:100%;height:100%;transition:all 5s 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 .TxtBox {position: absolute;top:0;left:50%;transform: translate(-50%,0); width:var(--layoutwidth); max-width: 90%; height: 100%; z-index: 9; color: #fff;}
#mainSlide .Tit {position: absolute; top:35%}
#mainSlide .Desc {font-family: var(--pointfont); position: absolute; bottom:10%; letter-spacing: 0;} 

#mainSlide .swiper-pagination {font-family: var(--enfont); color:#fff; font-size: 1.875rem; font-weight: 300; bottom: 5rem; left: auto; right:5rem; width: fit-content;}
#mainSlide .swiper-pagination-current {font-size: 4.375rem;}

@media(max-width:500px) {
    #mainSlide .swiper-pagination {bottom:2rem; right:2rem;}
}


/* Txt_Effect */
#Txt_Effect .Txt_Inner {position: relative; font-weight: 700; color: rgba(0, 0, 0, .4)}
#Txt_Effect .Txt_Inner .Txt {position: relative; word-break: keep-all; background: linear-gradient(to right, #000, #000) no-repeat; -webkit-background-clip: text; background-clip: text; background-size: 0%; transition: background-size cubic-bezier(.1,.5,.5,1) 0.5s;}



/* Number */
#Number .flexBox {display: flex; gap:2.5rem; position: relative; height: auto;}
#Number .pointEn {text-align: right;}
#Number .box2 {transform: translateY(25rem);}

#Number .TitBox {position: sticky; top: 0; height: 100%;}
#Number .DescBox {padding-top: 8rem; position: relative; z-index: 3;}
@media(max-width:990px) {
    #Number .TitBox {position: relative;}
    #Number .DescBox {padding-top: 0;}
}


/* Group */
#Group {background: no-repeat center / cover url('/img/main/GroupBg.jpg');}
#Group .enTit {margin-left: -8rem;}
#Group .flexBox {display: flex; gap:2.5rem}
@media(max-width:768px) {
    #Group .enTit {margin-left: -4rem;}
}
@media(max-width:500px) {
    #Group .enTit {margin-left: -2rem;}
}


/* Cases */
#Cases {background: no-repeat 40% / cover url('/img/main/CasesBg.jpg'); overflow: hidden;}
#Cases .box {background-color: rgba(3,110,184,.05); padding: 2rem 2rem 3rem; transition: .3s;}
#Cases .box:hover {background-color: rgba(243, 243, 243, 0.7); box-shadow: 4px 8px 20px rgba(0, 0, 0, .15); transition: .3s;}
#Cases .Line {width: 100%; height: 1px; background-color: #000; margin: 1.5rem auto;}
#Cases .Tit {display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; line-height: 1.4; max-height: calc(1.4em * 2);}
#Cases .Desc {display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; line-height: 1.5; max-height: calc(1.5em * 4);}
@media(max-width:500px) {
    #Cases .box {padding: 1.5rem 1.5rem 2rem;}
}


/* Offices */
#Offices {background-image: linear-gradient(to bottom, #fff, #ACCDE3); border-radius: 0 0 3.125rem 3.125rem; overflow: hidden; position: relative; z-index: 3;}
#Offices .Img {position: relative; width: 30.8125rem; margin: auto;}
#Offices .Img .mapImg {width: 30.8125rem; margin: auto; }

#Offices .LL_Btn {padding: .7rem 2rem; width: 100%;}
#Offices .BtnList {--x-gap:1rem; --y-gap:1rem;}

#Offices .DescBox {padding: 1rem 2rem; border-top: 1px solid #000; border-bottom: 1px solid #000;}
#Offices .Titflex {display: flex; align-items: flex-start; gap:3rem;}
#Offices .round {border-radius: 3.75rem; width: fit-content; background-color: #000; color:#fff; padding: .2rem 1rem .1rem; font-size: .875rem; white-space: nowrap;}

#Offices .marker {display: flex; flex-direction: column; justify-content: center; gap:.3rem; align-items: center; position: absolute;}




/* hours */
#hours {background-color: #EFEFEF; margin-top: -3.125rem; overflow: hidden;}
#hours .image-wrap {transition: 1s ease-out; transition-delay: 0.2s; position: relative; width: 100%; height: 57rem; overflow: hidden; visibility: hidden;}
#hours .image-wrap.LR {clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);}

#hours .Img {width: 100%; height: 57rem; transform: scale(1.3);transition: 2s ease-out; background: no-repeat center / cover url('/img/main/hours.jpg');} 
#hours .animating .image-wrap {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); visibility: visible; transform: skewY(0);}  
#hours .animating .Img {transform: scale(1); transition: 4s ease-out;}  

#hours .Logo {position: absolute; top:2rem; left: 2rem; z-index: 3; opacity: .5;}
#hours .LogoImg {width: 9.1875rem;}

#hours .enTit {margin-right: -13vw;}

#hours .Inner {margin: 0 auto; max-width: 565px; width: 100%;}
#hours form {display: flex; flex-direction: column; gap:1rem}
#hours input[type="text"], #hours select {border: none; box-shadow: none; border-radius: 0; background-color: #fff; padding: 1.2rem; width: 100%;}
#hours input[type=text]:focus { border:none !important; box-shadow: none !important;}
#hours select {-webkit-appearance: none; appearance: none; display: inline-block; border:none; color: var(--gray); appearance:none; background:url('/img/main/select_arrow.png') no-repeat right 14px center #fff;}
#hours select option {color: var(--gray);}

#hours input.agree_checkbox { width: 0; height: 0; visibility: hidden; }
#hours input.agree_checkbox + label { position: relative; padding-left: 1.5rem; }
#hours input.agree_checkbox + label::before { position: absolute; content: ''; display: inline-block; width: 1.2rem; height: 1.2rem; cursor: pointer; border: 1px solid var(--gray); top: 2px; left: 0; }
#hours input.agree_checkbox:checked + label::before { background: var(--gray) url(/img/sub/chk.png) no-repeat center / contain; background-size: 100%; }

#hours .confirm_submit {background-color: var(--pointcolor); color:#fff; text-align: center; width: 100%; padding: 1rem;}
#hours .confirm_submit:hover {background-color: #0d619c;}

@media(max-width:1240px) {
    #hours .enTit {margin-right: -7vw;}
}
@media(max-width:768px) {
    #hours .enTit {margin-right: -13vw;}
    #hours .image-wrap, #hours .Img {height: 30rem;}
}
@media(max-width:500px) {
    #hours .enTit {margin-right: -3rem;}
}



/* partner */
#partner {padding: 1rem 0; background-color: #EFEFEF; border-top:1px solid rgba(3,110,157,.3)}
#partner .partnerSwiper .swiper-wrapper {-webkit-transition-timing-function: linear; -o-transition-timing-function: linear; transition-timing-function: linear;}
#partner .partnerSwiper img {width: 3.5rem;}


/* footer */
footer {background-color: #191919; padding: 6.25rem 0; letter-spacing: 0; color:#ebebeb;}
footer a {color:#ebebeb; font-weight: 300; text-decoration: none;}
footer .footerMenu {display: flex; align-items: center; gap: 0 3rem; justify-content: flex-end;}
footer .footerMenu a {opacity: .8;}
footer .footerMenu a:hover {opacity: 1;}
footer .Line {width: 100%; height: .5px; background-color: rgba(255,255,255,.5); margin: 2rem auto;}

@media(max-width:500px) {
    footer .footerMenu {gap:0 2rem;}
}