.s-main--visual{
    padding:0;
}
.main--visual_content{
    position:relative;
}
.main-swiper{
    position:relative;
    width:100%;
    height:75vh;
    z-index:1;
}
.main-swiper .swiper-slide{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.main-swiper .slide-bg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
    transform:scale(1);
}
.main-swiper .content-txt{
    position:absolute;
    width:calc(100% - 2.5rem);
    margin:0 auto;
    color:var(--color-base);
    text-align:center;
    z-index:2;
}
.main-swiper .content-txt h2{
    font-size:var(--fs-xl);
}
.main-swiper .gradient-bg{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(to bottom,rgba(13,90,141,.3) 0%,rgb(9,67,105,.3) 50%,rgb(8,47,73,1) 100%);
    z-index:1;
}
.thumbnail-content{
    position:absolute;
    width:100%;
    left:.938rem;
    bottom:.625rem;
    z-index:2;
}
.main-swiper--thumbnail .swiper-slide{
    width:clamp(2.813rem,2.91vi + 2.13rem,5.625rem)!important;
    height:clamp(3.438rem,3.56vi + 2.6rem,6.875rem);
    overflow:hidden;
}
.main-swiper--thumbnail .swiper-slide img{
    height:100%;
    object-fit:cover;
    object-position:center;
}
.main-swiper--thumbnail .swiper-slide::before{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:100%;
    background:linear-gradient(to top,#0D5A8D 0%,#094369 50%,#082F49 100%);
    z-index:2;
    opacity:.8;
    transition:opacity 600ms ease-in-out,height 600ms ease-in-out;
}
.main-swiper--thumbnail .swiper-slide::after{
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    height:0%;
    background:linear-gradient(to top,#0D5A8D 0%,#094369 50%,#082F49 100%);
    z-index:3;
    opacity:0;
    transition:opacity 600ms ease-in-out;
}
.main-swiper--thumbnail .swiper-slide-thumb-active::before{
    opacity:0;
    height:0%;
}
.main-swiper--thumbnail .swiper-slide-thumb-active::after{
    animation:progressBar 4000ms cubic-bezier(.4,.0,.2,1) linear;
    opacity:.5;
}
.s-intro .container{
    max-width:80rem;
}
.s-intro .content01{
    position:relative;
}
.s-intro .flex{
    flex-direction:column;
}
.s-intro .content-img{
    margin-top:1.875rem;
}
.s-intro .content-img .md-img{
    position:relative;
    width:clamp(12.5rem,12.94vi + 9.47rem,25rem);
    height:clamp(9.375rem,9.71vi + 7.1rem,18.75rem);
    margin-top:-2.5rem;
    margin-right:-.938rem;
    margin-left:auto;
    z-index:2;
    overflow:hidden;
}
.s-intro .sm-img{
    width:11.25rem;
    height:7.5rem;
    margin-top:3.125rem;
    overflow:hidden;
}
.s-intro .lead-txt{
    margin-top:clamp(3.125rem,3.24vi + 2.37rem,6.25rem);
}
.s-intro .lead-txt p{
    font-size:clamp(1.25rem,2.07vi + .76rem,3.25rem);
}
.s-services{
    background-color:var(--color-gray);
}
.s-services .container{
    max-width:67.5rem;
}
.s-services .content-txt{
    margin-bottom:1.875rem;
}
.s-services .-services--list{
    display:flex;
    flex-wrap:wrap;
}
.s-services .-services--list > dl{
    width:50%;
    line-height:1
}
.s-services .-services--list > dl dt{
    height:clamp(12.5rem,12.94vi + 9.47rem,25rem);
    overflow:hidden;
}
.s-services .-services--list > dl dd{
    display:flex;
    align-items:center;
    gap:.625rem;
    height:3.125rem;
    background-color:var(--color-base);
}
.s-services .-services--list > dl dd span:nth-of-type(1){
    font-weight:var(--fw-md);
    display:flex;
    align-items:center;
    justify-content:center;
    width:3.125rem;
    height:100%;
    background-color:var(--color-background);
    color:var(--color-base);
    line-height:1;
}
.s-services .primary-btn{
    margin-top:3.75rem;
    text-align:center;
}
.s-services .primary-btn a{
    font-size:1.875rem;
    justify-content:center;
    width:18.75rem;
    height:4.5rem;
    line-height:4.5rem;
}
.s-services .primary-btn .btn-icon{
    width:2.5rem;
    height:2.5rem;
}
.s-services .primary-btn .btn-icon img{
    width:1.375rem;
}
.en-page .main-swiper .content-txt h2{
    font-size:clamp(1.75rem,1.7vi + 1.35rem,2.625rem);
    line-height:1.4;
}
.en-page .s-intro .lead-txt p{
    line-height:1.6;
}
.en-page .s-services .content-txt p{
    font-size:clamp(1.25rem,.73vi + 1.08rem,1.625rem);
    line-height:1.6;
}
.en-page .s-services .primary-btn a{
    width:25rem;
}
/*-- media query 60rem --*/
@media screen and (min-width:60rem){
    .s-intro .content01{
        padding-bottom:6.25rem;
    }
    .s-intro .flex{
        flex-direction:row-reverse;
        justify-content:center;
        gap:3.125rem;
    }
    .s-intro .flex > div{
        width:50%;
    }
    .s-intro .flex > div.content-img{
        width:40%;
        margin-top:0;
    }
    .s-intro .flex > div.content-img figure{
        width:25rem;
        left:-5rem;
    }
    .s-intro .sm-img{
        position:absolute;
        width:13.75rem;
        height:10rem;
        right:-2.5rem;
        bottom:0;
        margin-top:0;
    }
    .s-services .-services--list > dl{
        width:25%;
    }
}
/*-- media query 75rem --*/
@media screen and (min-width:75rem){
  .main-swiper{
    height:100dvh;
  }
  .main-swiper .content-txt{
    width:50%;
    margin:0 auto;
  }
  .s-intro .flex > div{
    width:40%;
  }
  .s-intro .flex > div.content-img{
    width:50%;
  }
  .s-intro .flex > div.content-img figure{
    width:37.5rem;
  }
  .en-page .main-swiper .content-txt{
    width:100%;
  }
}
/*-- keyframes --*/
@keyframes progressBar{
    0%{
        height:0%;
        opacity:.3;
    }
    5%{
        opacity:.5;
    }
    100%{
        height:100%;
        opacity:.5;
    }
}