@charset "utf-8";
main { position: relative; width: 100%; height: calc(100vh - 92.53px); margin-top: 92.53px; }
main .main-slide { width: 100%; height: 100%; overflow: hidden; } 
main .main-slide div .s1 { background: url(../img/main/image1.jpg) no-repeat center/cover; }
main .main-slide div .s2 { background: url(../img/main/image2.jpg) no-repeat center/cover; }
main .main-slide div .s3 { background: url(../img/main/image3.jpg) no-repeat center/cover; }
main .main-slide div .s4 { background: url(../img/main/image4.jpg) no-repeat center/cover; }
main .main-slide div .s5 { background: url(../img/main/image5.jpg) no-repeat center/cover; }
main .swiper-button-prev, main .swiper-button-next { width: 70px; aspect-ratio: 1/1; height: auto; background: rgba(0, 0, 0, 0.4); }
main .swiper-button-prev { left: 0; }
main .swiper-button-next { right: 0; }
main .swiper-button-prev::after, main .swiper-button-next::after { color: #fff; font-size: 24px; }


.abouts> div { display: flex; justify-content: space-between; align-items: center; }
.abouts div .lefts { width: 50%; padding-right: 20px; }
.abouts div .lefts .tit p { opacity: 1; }
.abouts div .lefts .tit h1 { font-weight: 300; color: #333; }
.abouts div .lefts .tit h1 span { font-weight: 700; font-size: inherit; color: inherit; }
.abouts div .lefts> p { font-size: 16px; margin-bottom: 40px; }
.abouts div .lefts a { display: flex; justify-content: space-between; align-items: center; width: 140px; border: 1px solid #333785; padding: 15px 20px; width: 140px; }
.abouts div .lefts a:hover { background: #333785; }
.abouts div .lefts a p { color: #333785; font-weight: 800; }
.abouts div .lefts a:hover p { color: #fff;}
.abouts div .lefts a i { color: #333785; }
.abouts div .lefts a:hover i { transform: rotate(90deg); color: #fff; }
.abouts div .rights { position: relative; width: 46.875%; aspect-ratio: 600/540; background: url(../img/main/image6.jpg) no-repeat center/cover; }
.abouts div .rights .txtbox { position: absolute; left: 0; bottom: 80px; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; width: 200px; aspect-ratio: 1/1; background: #3997d2; text-align: center; }
.abouts div .rights .txtbox p { font-size: 28px; line-height: 1.2em; color: #fff; }
.abouts div .rights .txtbox p span { font-size: 30px; font-weight: 800; color: #fff; }


.fields { background: rgba(33, 34, 60, 0.9); margin-bottom: 0; overflow: hidden;}
.fields .bg1 { top: calc(70% - 70px); left: -100px; transform: translate(0,-50%); width: 60%; aspect-ratio: 1190/1670; background: url(../img/main/pattern1.png) no-repeat center/contain;  }
.fields .bg2 { top: 50%; right: -100%; transform: translate(-35%,-50%); width: 88%; aspect-ratio: 1790/2390; background: url(../img/main/pattern2.png) no-repeat center/contain;  }
.fields .bg3 { bottom: 0; left: 50%; transform: translate(-270px,0); width: 70%; aspect-ratio: 1420/800; background: url(../img/main/pattern3.png) no-repeat center/contain;  }
.fields .tit { position: relative; text-align: center; z-index: 1; }
.fields .tit p { color: #fff; }
.fields .tit h1 { color: #fff; }
.fields .tit span { background: #fff; margin: 0 auto; }
.fields ul { position: relative; display: flex; justify-content: space-between; align-items: flex-start; z-index: 1; }
.fields ul li { width: calc(25% - 15px); padding: 40px 20px; text-align: center; border-radius: 15px;  }
.fields ul> :first-child { height: 466px; }
.fields ul> :nth-child(2n) { background: #282A67; margin-top: 80px; }
.fields ul> :nth-child(2n+1) { background: #62648B;  }
.fields ul li div { width: 100%; aspect-ratio: 4/3; margin-bottom: 40px; border-radius: 15px; }
.fields ul li .img1 { background: url(../img/main/image7.jpg) no-repeat center/cover; }
.fields ul li .img2 { background: url(../img/main/image8.jpg) no-repeat center/cover; }
.fields ul li .img3 { background: url(../img/main/image9.jpg) no-repeat center/cover; }
.fields ul li .img4 { background: url(../img/main/image10.jpg) no-repeat center/cover; }
.fields ul li h2 { margin-bottom: 20px; color: #fff; }
.fields ul li p { color: #ccc; font-size: 14px; }
.fields .bg1, .fields .bg2, .fields .bg3 { position: absolute; }


.merits { display: flex; padding: 0; }
.merits div { position: relative; width: calc(100% / 3); aspect-ratio: 1/1; min-height: 430px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.merits div::after { position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); transition: all 0.3s ease-in-out; }
.merits div:hover::after { background: rgba(0, 0, 0, 0.2); }
.merits> :first-child { background: url(../img/main/image11.jpg) no-repeat center/cover; }
.merits> :nth-child(2) {  background: url(../img/main/image12.jpg) no-repeat center/cover; }
.merits> :last-child { background: url(../img/main/image13.jpg) no-repeat center/cover; }
.merits div h1 { color: #fff; letter-spacing: -0.05em; margin-bottom: 25px; z-index: 1; }
.merits div p { font-size: 16px; color: rgba(255, 255, 255, 0.6); z-index: 1; }


.procedures div .tit { margin: 0;}
.procedures div .innercon { display: flex; justify-content: space-between; }
.procedures div .innercon .lefts { width: 25%; padding-right: 20px; }
.procedures div .innercon .lefts> p { margin: 60px 0 40px; }
.procedures div .innercon .lefts a { display: flex; align-items: center; }
.procedures div .innercon .lefts a p { font-size: 16px; font-weight: 800; color: #3997d2; }
.procedures div .innercon .lefts a span { display: block; width: 20px; height: 20px; border-radius: 50%; background: #3997d2; margin-left: 10px; text-align: center; }
.procedures div .innercon .lefts a:hover span { margin-left: 20px; }
.procedures div .innercon .lefts a span i { color: #fff; line-height: 20px; }
.procedures div .innercon ul { width: 75%; display: flex; flex-wrap: wrap; justify-content: space-between; }
.procedures div .innercon ul li { padding: 40px 30px; border: 1px solid #ccc; width: calc((100% - 60px) / 3);  }
.procedures div .innercon ul> :nth-child(-n+3) { margin-bottom: 40px; }
.procedures div .innercon ul li span { display: block; width: 40px; aspect-ratio: 1/1; border-radius: 50%; background-color: #3997d2; margin-bottom: 40px; color: #fff; text-align: center; line-height: 40px; font-size: 18px; font-weight: 800;  }
.procedures div .innercon ul li h2 { margin-bottom: 20px; }

@media screen and (max-width: 1600px) {
    .fields .bg1 { width: 90%; left: -30%; }
    .fields .bg2 { width: 90%; transform: translate(-35%,-40%); }
    .fields .bg3 { width: 90% ; }
}

@media screen and (max-width: 1440px) {
    .procedures div .tit { margin-bottom: 60px; }
    .procedures div .innercon .lefts> p { margin-top: 0; }
}

@media screen and (max-width: 1320px) {
    .abouts div .lefts { width: 60%; }
    .abouts div .rights { width: 40%; }
    .abouts div .rights .txtbox { bottom: 40px; width: 150px; }
    .abouts div .rights .txtbox p { font-size: 18px; }
    .abouts div .rights .txtbox p span { font-size: 24px; }

    .merits div { aspect-ratio: 3/4; }
    .merits div::after { background: rgba(0, 0, 0, 0.4); }

    .procedures div .innercon ul li { width: calc((100% - 40px) / 3);  }
}

@media screen and (max-width: 1024px) {
    main .swiper-button-prev, main .swiper-button-next { width: 50px; }

    .abouts div .lefts> p { font-size: 15px; }
    .abouts div .lefts a { padding: 8px 20px; }

    .fields .bg1 { display: none; }
    .fields .bg2 { top: auto; bottom: 0; width: 150%; right: 0; transform: translate(60%,30%); }
    .fields .bg3 { bottom: auto; top: 150px; width: 100%; }
    .fields ul { flex-wrap: wrap; }
    .fields ul li { width: calc(50% - 10px); height: stretch; }
    .fields ul> :first-child { height: auto; }
    .fields ul> :nth-child(2n) { margin-top: 0; }
    .fields ul> :nth-child(-n+2) { margin-bottom: 30px; }
    .fields ul> :nth-child(3) { background: #282A67; }
    .fields ul> :last-child { background: #62648B; }
    .fields ul li div { margin-bottom: 30px; }
    .fields ul li h2 { margin-bottom: 10px; }
    .fields ul li h2 br { display: none; }

    .merits div h1 { font-size: 24px; margin-bottom: 15px; }
    .merits div p { font-size: 14px; }

    .procedures div .innercon .lefts { width: 30%; }
    .procedures div .innercon .lefts> p br { display: none; }
    .procedures div .innercon ul { width: 70%; }
    .procedures div .innercon ul li { width: calc(50% - 10px); }
    .procedures div .innercon ul> :nth-child(-n+4) { margin-bottom: 20px; }
    .procedures div .innercon ul li h2 { margin-bottom: 10px; }
}


@media screen and (max-width: 820px) {
    main { margin-top: 72.67px; height: 60vh;  }

    .abouts> div { flex-direction: column; }
    .abouts div .lefts { width: 100%; padding: 0; margin-bottom: 40px; }
    .abouts div .lefts> p { text-align: justify; }
    .abouts div .lefts> p br { display: none; }
    .abouts div .rights { width: 100%; aspect-ratio: 1.618/1; }
    .abouts div .rights .txtbox { bottom: 0; transform: none; }

    .merits { display: block; }
    .merits div { width: 100%; aspect-ratio: 1.618/1;  }

    .procedures div .tit { margin-bottom: 40px; }
    .procedures div .innercon { display: block; }
    .procedures div .innercon .lefts { width: 100%; padding: 0; margin-bottom: 40px; }
    .procedures div .innercon .lefts> p { margin-bottom: 10px; }
    .procedures div .innercon ul { width: 100%; }
}

@media screen and (max-width: 601px) {
    main .swiper-button-prev, main .swiper-button-next { width: 40px; }
    main .swiper-button-prev::after, main .swiper-button-next::after { font-size: 20px; }

    .abouts div .lefts .tit h1 { font-size: 24px; } 
    .abouts div .lefts .tit h1 br { display: none; }
    .abouts div .lefts> p br { display: none; }
    .abouts div .rights { aspect-ratio: 1/1; }

    .fields .bg3 { top: 100px; width: 200%; transform: translate(-180px,0); }
    .fields ul li { width: 100%; }
    .fields ul> :nth-child(3) { margin-bottom: 30px; background: #62648B;}
    .fields ul> :last-child { background: #282A67; }
    .fields ul li div { margin-bottom: 30px; }
    .fields ul li h2 { margin-bottom: 10px; }
    .fields ul li p br { display: none; }
    
    .procedures div .innercon ul li { width: 100%; padding: 30px 20px; }
    .procedures div .innercon ul :nth-child(5) { margin-bottom: 20px; }
}