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


.sub .Tit_wrap {position: relative; padding-top: 1.5rem;}
.sub .enTit {font-size: 5rem; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1;}

.sub .BgPoint {background-image: linear-gradient(to bottom, rgba(245,245,245,.4), rgba(169,202,225,.4));}

/* sub Top */
.subTop {background-color: #000; position: relative; z-index: 0; height: 75vh;}
.subTop .subTopImg {clip: rect(0, auto, auto, 0); position: absolute;top: 0;left: 0;width: 100%;height: 100%; z-index: -1; /* transform:scale(1.05); transition:transform 12s var(--ani); */}
.subTop .subTopImg .Bg {position: fixed;display: block;top: 0;left: 0;width: 100%;height: 1000px; background-position: 50%;background-repeat: no-repeat;background-size: cover;transform: translateZ(0);will-change: transform;}

.subTop .subTop_txt {position: relative; z-index: 2; height: 100%;}
.subTop .inner {position: relative; max-width: var(--layoutwidth); width: 90%; top: 40%; margin: auto; text-align: center; }
.subTop .EnTit {font-family: var(--enfont); color: rgba(255, 255, 255, .5); font-size: 6.25rem; font-weight: 700; letter-spacing: 0; line-height: 1;}
@media(max-width:500px) {
    .subTop .EnTit {font-size: 5rem;}
}



/* intro */
.sub .intro .container {position: relative; word-break: keep-all;}
.sub .intro .ImgBox {max-width: 66.5625rem; width: 95%; aspect-ratio: 12 / 11; position: relative; margin-left: auto; /* transform: translateY(-16rem); */ margin-top: -16rem;}
.sub .intro .introImg {position: absolute; width: 35.1875rem;}
.sub .intro .introImg.Img1 {top:0; right:0;}
.sub .intro .introImg.Img2 {bottom:0; left: 0;}

@media(max-width:1140px) {
    .sub .intro .ImgBox {max-width: 75vw;}
    .sub .intro .introImg {width: 40vw;}
}
@media(max-width:990px) {
    .sub .intro .ImgBox {margin-top: -6rem;}
}
@media(max-width:768px) {
    .sub .intro .ImgBox {margin-top: 0;}
}



/* direction */
.sub .direction .image-wrap .Img {background-image: url('/img/sub/direction.jpg');}


.sub .direction .image-wrap {transition: 1s ease-out; transition-delay: 0.2s; position: relative; width: 100%; height: 27.625rem; overflow: hidden; visibility: hidden;}
.sub .direction .image-wrap.LR {clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);}

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



.sub .direction .flexBox {display: flex; gap:2rem; position: relative; height: auto;}
.sub .direction .TitBox {position: sticky; top:1rem; height: fit-content;}
.sub .direction .Line {width: 1px; height: auto; background-color: var(--pointcolor); margin: 0 2rem;}
.sub .direction .DescBox ul {display: flex; flex-direction: column; gap:3rem; position: relative;}

.sub .direction .MiniTit {position: relative; padding-top: 1.5rem;}
.sub .direction .MiniTit .En {font-family: var(--enfont); color: rgba(3,110,184,.15); font-weight: 700; position: absolute; top: 0; left: 0;}

.sub .direction .LogoImg {width: 8.0625rem;}

@media(max-width:500px) {
    .sub .direction .image-wrap, .sub .direction .Img {height: 20rem;}

    .sub .direction .TitBox {width: 20%;}
    .sub .direction .DescBox  {width: 70%;}
    .sub .direction .Line {margin: 0 1rem;}
}



.sub .BtnBox .flexBox {display: flex; gap: 3rem 2rem}
.sub .BtnBox .material-symbols-outlined {font-size: 1.5rem;}
@media(max-width:768px) {
    .sub .BtnBox .flexBox {flex-direction: column;}
}