@charset "utf-8";

.main-visual {
    height: 76.8rem;
    position: relative;
    overflow: hidden;
}
.main-visual .maxinner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}
.main-visual .maxinner > * {
    flex-shrink: 0;
}
.main-visual .maxinner h2 {
    position: relative;
    z-index: 1;
}
.main-visual .txt b {
    font-size: 3.8rem;
    font-weight: 500;
    color: #111111;
    margin-bottom: 2rem;
    display: block;
}
.main-visual .txt p {
    font-size: 1.6rem;
    color: #666666;
    font-weight: 400;
    margin-bottom: 7rem;
}
.main-visual .img {
    position: relative;
    z-index: 1;
    margin-left: 15rem;
}
.main-visual .bg > *{
    position: absolute;
}
.main-visual .bg .bg01 {
    background: url('../../images/main/main-img02.png') no-repeat;
    top: 0;
    left: 0;
    width: 388px;
    height: 332px;
}
.main-visual .bg .bg02 {
    background: url('../../images/main/main-img03.png') no-repeat;
    width: 791px;
    height: 588px;
    top: 50%;
    left: 65%;
    transform: translate(-50%, -50%);
}


/** sec01 **/
.main-slide {
    background-color: #eff6ff;
    padding: 11.5rem 0 15rem;
    overflow: hidden;
}
.main-slide h3 {
    font-size: 3.4rem;
    color: #111111;
    font-weight: 600;
    text-align: center;
    margin-bottom: 5rem;
}
.main-slide .mainSlide .swiper-slide {
    background: #ffffff;
    border-radius: 10px;
    padding: 6rem 4.5rem;
    transition: 0.3s;
    width: 90%;
    max-width: 41rem;
    height: 39rem;
}
.main-slide .mainSlide .swiper-slide .txt {
    margin-bottom: 6rem;
}
.main-slide .mainSlide .swiper-slide .txt span {
    font-size: 1.4rem;
    color: #0357c2;
    font-weight: 600;
    display: block;
    margin-bottom: 1rem;
}
.main-slide .mainSlide .swiper-slide .txt b {
    font-size: 2.2rem;
    color: #333333;
    margin-bottom: 2.5rem;
    display: block;
}
.main-slide .mainSlide .swiper-slide .txt p {
    font-size: 1.6rem;
    color: #888888;
}
.main-slide .mainSlide .swiper-slide .img {
    text-align: right;
}


/* swiper active */
.main-slide .mainSlide .swiper-slide.swiper-slide-active {
    background: #0357c2;
    box-shadow: 7px 0 27px rgb(150 164 182);
}
.main-slide .mainSlide .swiper-slide.swiper-slide-active .txt > * {
    color: #fff;
}
/* swiper active */

/* swiper btn */
.main-slide .mainSlide .slide-btn {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
}
.main-slide .mainSlide .slide-btn .swiper-pagination {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
}
.main-slide .mainSlide .slide-btn .swiper-pagination .swiper-pagination-bullet {
    background: #c7d0db;
    opacity: 1;
    margin: 0 5px;
}
.main-slide .mainSlide .slide-btn .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
    background-color: #0357c2;
    width: 12px;
    height: 12px;
}

.main-slide .mainSlide .slide-btn .paging {
    height: 100%;
}
.main-slide .mainSlide .slide-btn .paging > * {
    opacity: 1;
    width: 44px;
    height: 44px;
}
.main-slide .mainSlide .slide-btn .paging .main-prev {
    background: url('../../images/ico/ico-arrow-left01.png') no-repeat;
    left: 27%;
    z-index: 99;
}
.main-slide .mainSlide .slide-btn .paging .main-next {
    background: url('../../images/ico/ico-arrow-left01.png') no-repeat;
    right: 27%;
    z-index: 99;
    transform: rotate(180deg);
}
.main-slide .mainSlide .slide-btn .paging .main-prev:hover {
    background: url('../../images/ico/ico-arrow-right01.png') no-repeat;
    transform: rotate(180deg);
}
.main-slide .mainSlide .slide-btn .paging .main-next:hover {
    background: url('../../images/ico/ico-arrow-right01.png') no-repeat;
    transform: unset;
}
/* swiper btn */
/** sec01 **/


/** sec02 **/
.sec02 {
    padding: 15rem 0;
    overflow: hidden;
}
.sec02 .flex-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25rem;
}
.sec02 .flex-box:last-child {
    margin: 0;
}
.sec02 .flex-box .img {
    position: relative;
}
.sec02 .flex-box .img .bg {
    position: absolute;
}
.sec02 .flex-box .img .screen span {
    position: relative;
}
.sec02 .flex-box .img .screen span img {
    position: absolute;
}
.sec02 .flex-box .img .screen span .img01 {
    position: relative;
    left: unset;
    transform: unset;
    box-shadow: 5px 0px 50px rgb(0 0 0 / 14%);
    border-radius: 10px;
}

.sec02 .flex-box .img .screen span.mb {
    display: none;
}

.sec02 .flex-box .txt {
    margin: 0 6rem;
}
.sec02 .flex-box .txt .tit {
    margin-bottom: 5rem;
    display: flex;
    flex-direction: column;
}
.sec02 .flex-box .txt .tit span {
    font-size: 1.6rem;
    color: #166cd8;
    font-weight: 600;
}
.sec02 .flex-box .txt .tit b {
    font-size: 3.4rem;
    color: #111111;
    font-weight: 900;
}
.sec02 .flex-box .txt li {
    position: relative;
    font-size: 1.6rem;
    color: #666666;
    margin: 0 0 1rem 1rem;
}
.sec02 .flex-box .txt li::before {
    content: '';
    width: 4px;
    height: 4px;
    background: #666666;
    display: block;
    position: absolute;
    border-radius: 100%;
    margin: 1rem 0 0 -1rem;
}
.sec02 .flex-box .txt li:last-child {
    margin-bottom: 0;
}


.sec02 .flex-box.reverse {
    flex-direction: row-reverse;
}


.sec02 .flex-box:first-child .bg {
    min-width: 747px;
    min-height: 523px;
    top: -7rem;
    left: -18rem;
}
.sec02 .flex-box:first-child .screen span .img02 {
    top: 4rem;
    left: 2rem;
}
.sec02 .flex-box:first-child .screen span .img03 {
    bottom: 2rem;
    left: 2rem;
}
.sec02 .flex-box:nth-child(2) .bg {
    min-width: 539px;
    min-height: 528px;
    top: -5rem;
    right: 0;
}
.sec02 .flex-box:nth-child(2) .screen {
    margin-right: 15rem;
}
.sec02 .flex-box:nth-child(2) .screen span .img02 {
    top: 5rem;
    min-width: 388px;
    box-shadow: 4px 0 60px rgb(0 0 0 / 5%);
    border-radius: 10px;
    left: -4rem;
}
.sec02 .flex-box:nth-child(2) .screen span .img03 {
    bottom: -3rem;
    left: -28%;
    min-width: 383px;
    box-shadow: 4px 0 60px rgb(0 0 0 / 5%);
    border-radius: 10px;
}
.sec02 .flex-box:last-child .bg {
    min-width: 600px;
    min-height: 428px;
    top: -10rem;
    right: 0;
}
.sec02 .flex-box:last-child .screen span .img02 {
    top: 30%;
    right: -7%;
    box-shadow: 4px 0 60px rgb(0 0 0 / 5%);
    border-radius: 10px;
}

/** sec02 **/



/** sec03 **/
.sec03 {
    padding-bottom: 15rem;
}
.sec03 .box {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 8rem 0 6rem;
}
.sec03 .box b {
    font-size: 2.6rem;
    color: #fff;
    font-weight: 500;
    z-index: 1;
    margin-bottom: 1.5rem;
}
.sec03 .box .btn {
    z-index: 1;
}
.sec03 .box .btn a {
    color: #024ba8;
    background: #fff;
    border-radius: 20px;
    width: 140px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0 0.7rem;
}
.sec03 .box .bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url('../../images/main/main-img15.png') no-repeat center / cover;
    transform: scale(1.2);
    transition: 1s;
}

.sec03 .box.active .bg {
    transform: scale(1);
}

/** sec03 **/



@media (max-width: 1400px) {
    .main-visual .maxinner > * {
        flex-shrink: unset;
    }
    .main-visual .img {
        margin-left: 0;
    }
    .main-slide .mainSlide .swiper-slide {
        max-width: unset;
    }

    .sec02 .flex-box .img .screen span {
        display: none;
    }
    .sec02 .flex-box .img .screen span.mb {
        display: block;
    }
    .sec02 .flex-box .img .screen span.mb img {
        position: relative;
    }
}
@media (max-width: 1200px) {
    .main-visual {
        height: auto;
    }
    .main-visual .maxinner {
        padding: 15rem 0 10rem;
    }

    .sec02 .flex-box:nth-child(2) .screen {
        margin-right: 0;
    }
}
@media (max-width: 1024px) {
    .main-slide .mainSlide .slide-btn .paging .main-next {
        right: 24%;
    }
    .main-slide .mainSlide .slide-btn .paging .main-prev {
        left: 23.5%;
    }

    .sec02 .flex-box {
        margin-bottom: 15rem;
    }

}
@media (max-width: 768px) {
    .main-visual .maxinner {
        flex-direction: column;
        justify-content: center;
    }
    .main-visual .maxinner h2 {
        text-align: center;
    }
    .main-visual .txt b {
        font-size: 3.2rem;
    }
    .main-visual .txt p {
        margin-bottom: 3rem;
    }
    .main-visual .btn-wrap {
        margin: 0 auto;
    }
    .main-visual .img {
        margin-top: 5rem;
    }

    .main-slide {
        padding: 8rem 0 12rem;
    }
    .main-slide h3 {
        font-size: 3rem;
    }
    .main-slide .mainSlide .slide-btn .paging .main-next {
        right: -5%;
    }
    .main-slide .mainSlide .slide-btn .paging .main-prev {
        left: -5%;
    }

    .sec02 {
        padding: 10rem 0;
    }
    .sec02 .flex-box,
    .sec02 .flex-box.reverse {
        flex-direction: column;
        margin-bottom: 10rem;
    }
    .sec02 .flex-box .txt {
        margin: 0;
        width: 100%;
    }
    .sec02 .flex-box .img {
        margin: 1rem 0 3rem;
    }
    .sec02 .flex-box .txt .tit {
        margin-bottom: 3rem;
    }
    .sec02 .flex-box .txt .tit b {
        font-size: 2.8rem;
    }

    .sec03 {
        padding-bottom: 10rem;
    }

}
@media (max-width: 500px) {
    .main-visual .maxinner {
        padding: 12.5rem 0 10rem;
    }
    .main-visual .bg .bg01 {
        display: none;
    }
    .main-visual .bg .bg02 {
        width: 571px;
        height: 368px;
        left: 50%;
        background-size: cover;
    }
    .sec03 .box {
        padding: 5rem 0;
    }
    .sec03 .box b {
        font-size: 2rem;
    }
}