@charset "utf-8";
.main-visual {padding-block: 0 !important; position: relative; height: calc(100vh - var(--header-height)); max-height: 775px; overflow: hidden; }
.main-visual .main-visual-swiper {z-index: 1; position: absolute; inset: 0; width: 100%; height: 100%; }
.main-visual .main-visual-swiper .swiper-slide { background-repeat: no-repeat; background-position: center; background-size: cover; }
.main-visual .main-visual-pagination {display: flex; align-items: center; justify-content: center; column-gap: 10px; position: absolute; z-index: 2; left: 50%; transform: translateX(-50%); bottom: calc(var(--fs-30) * 2); width: 100%;}
.main-visual .swiper-pagination-bullet {border-radius: 999px; transition: width 0.2s ease !important; margin: 0 !important; width: 8px; height: 8px; background: #fff; opacity: 1; }
.main-visual .swiper-pagination-bullet-active { width: 24px; border-radius: 999px;}
.main-visual .inner {position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding-block: calc(var(--fs-30) * 2);}
.main-visual .hero-head,
.main-visual .body-medium {color: var(--color-text6);}
.main-visual .body-medium {margin-block: var(--fs-26);}
.main-visual .btn-wrap {margin-top: calc(var(--fs-20) * 4);}

.help-section {background-image: url(../img/main/help-section-bg.webp); background-repeat: no-repeat; background-position: center; background-size: cover;}
.help-section .help-card-list {margin-top: var(--fs-30); display: flex; align-items: stretch; column-gap: var(--fs-30);}
.help-section .help-card-list .help-card {width: calc(100% / 3 - var(--fs-30) * 2 / 3); padding: calc(var(--fs-20) * 2); background-color: rgb(var(--rgb-black) / 5%); display: flex; flex-direction: column; align-items: center; row-gap: 20px;}
.help-section .help-card-list .help-card .ico-wrap {display: flex; align-items: center; justify-content: center; border-radius: 12px; background: #EDE9FE; background: linear-gradient(145deg,rgba(237, 233, 254, 1) 0%, rgba(219, 234, 254, 1) 100%); border: 1px solid var(--color-white); width: 60px; height: 60px; border-radius: 12px;}
.help-section .help-card-list .help-card .txt-wrap {margin-top: var(--fs-20); display: flex; flex-direction: column; align-items: center; row-gap: 10px;}
.help-section .help-card-list .help-card .txt-wrap .body-large {text-align: center;}

.process-section .process-list {position: relative; margin-top: calc(var(--fs-30) + var(--fs-20) * 2); display: flex; align-items: flex-start; justify-content: space-between; column-gap: var(--fs-30);}
.process-section .process-list::after {width: calc(100% - (100% / 5 - var(--fs-30) * 4 / 5)); height: 2px; background: #7698D9; background: linear-gradient(90deg, rgba(118, 152, 217, 1) 0%, rgba(7, 21, 47, 1) 100%); content: ''; display: block; position: absolute; top: calc((var(--fs-30) * 2)); left: 50%; transform: translate(-50%,-50%); z-index: 1;}
.process-section .process-list .process {position: relative; z-index: 2; width: calc(100% / 5 - var(--fs-30) * 4 / 5); max-width: 224px; display: flex; flex-direction: column; align-items: center; row-gap: 14px;}
.process-section .process-list .process .ico-wrap {width: calc((var(--fs-30) * 4)); height: calc((var(--fs-30) * 4)); border-radius: 50%; display: flex; align-items: center; justify-content: center; background-color: #7698D9;}
.process-section .process-list .process:nth-of-type(2) .ico-wrap {background-color: #7698D9;}
.process-section .process-list .process:nth-of-type(3) .ico-wrap {background-color: #3A5791;}
.process-section .process-list .process:nth-of-type(4) .ico-wrap {background-color: #213D71;}
.process-section .process-list .process:nth-of-type(5) .ico-wrap {background-color: #07152F;}
.process-section .process-list .process .txt-wrap {display: flex; flex-direction: column; align-items: center; row-gap: 8px;}
.process-section .process-list .process .txt-wrap .card-tit {color: #07152F;}
.process-section .process-list .process .txt-wrap .body-large {text-align: center; color: #404040;}

.notice-section {background-image: url(../img/main/notice-section-bg.webp); background-repeat: no-repeat; background-position: center; background-size: cover;}
.notice-section .inner {display: flex; align-items: flex-start; column-gap: calc(var(--fs-30) * 2);}

@media screen and (max-width:1024px) {
    .main-visual .swiper-pagination-bullet {bottom: var(--fs-36);}
    .main-visual .inner {padding-block: var(--fs-36);}

    .help-section .help-card-list {flex-direction: column; row-gap: var(--fs-24);}
    .help-section .help-card-list .help-card {width: 100%;}

    .process-section .process-list {flex-wrap: wrap; gap: calc(var(--fs-24) * 2); justify-content: center;}
    .process-section .process-list .process {width: calc(100% / 4 - var(--fs-30) * 2 / 3);}
    .process-section .process-list::after {display: none;}
}

@media screen and (max-width:768px) {

    .notice-section .inner {flex-direction: column; row-gap: var(--fs-30);}
}