.main-visual {position: relative; overflow: hidden;}
.main-visual .swiper-slide {height: 937px; background-repeat: no-repeat; background-position: center; background-size: cover; border-radius: 0 0 0 200px; overflow: hidden;}
.main-visual .swiper-slide.slide1 {background-image: url("../img/main1.jpg?v=221011a");}
.main-visual .swiper-slide.slide2 {background-image: url("../img/main2.jpg?v=221011a");}
.main-visual .swiper-slide.slide3 {background-image: url("../img/main3.jpg?v=221011a");}
.main-visual .swiper-slide.slide4 {background-image: url("../img/main4.jpg?v=221011a");}
.main-visual .swiper-slide::before {content: ''; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .15);}

.main-visual .group-title {position: absolute; left: 50%; top: 27%; transform: translateX(-50%); width: 100%; max-width: 1700px; z-index: 1;}
.main-visual .group-title .swiper-navi {position: absolute; top: 20%; z-index: 2;}
.main-visual .swiper-navi .btn {position: static; margin: 0; width: auto; height: auto; font-size: 12px; font-weight: 300; color: #fff; flex-direction: column;}
.main-visual .swiper-navi .btn + .btn {border-top: 1px solid rgba(255, 255, 255, .35); margin-top: 25px; padding-top: 25px;}
.main-visual .swiper-navi .btn:hover {color: #ccc;}
.main-visual .swiper-navi .swiper-button-prev::after {display: none;}
.main-visual .swiper-navi .swiper-button-prev::before, .main-visual .swiper-navi .swiper-button-next::after {content: ''; display: block; width: 14px; height: 9px; background-repeat: no-repeat; background-position: center;}
.main-visual .swiper-navi .swiper-button-prev::before {background-image: url("../img/m_prev.png"); margin-bottom: 5px;}
.main-visual .swiper-navi .swiper-button-next::after {background-image: url("../img/m_next.png"); margin-top: 7px;}
.main-visual .group-title .title-area {text-align: center;}
.main-visual .group-title .title {margin-bottom: 40px;}
.main-visual .group-title .title::before {content: ''; display: inline-block; width: 542px; height: 202px; background: url("../img/vis_logo.png") no-repeat center;}
.main-visual .group-title .desc {font-size: 19px; font-weight: 400; line-height: 1.84; color: #fff;}
.main-visual .group-title .swiper-pagination {width: auto; right: 0; left: auto; top: 5%; bottom: auto;}
.main-visual .group-title .swiper-pagination-bullet {position: relative; opacity: 1; margin: 0; display: block; width: auto; height: auto;}
.main-visual .group-title .swiper-pagination-bullet + .swiper-pagination-bullet {margin-top: 50px;}
.main-visual .group-title .swiper-pagination-bullet::before {content: ''; display: block; width: 10px; height: 10px; background: #fff; border-radius: 50%;}
.main-visual .group-title .swiper-pagination-bullet::after {content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(229, 0, 80, .3); border: 1px solid #e50050; opacity: 0; z-index: -1;}
.main-visual .group-title .swiper-pagination-bullet-active::after {opacity: 1;}

.main-visual .goal-area {position: absolute; left: 0; bottom: 0; width: 100%; border-top: 1px solid rgba(255, 255, 255, .5); z-index: 1;}
.main-visual .goal-area .inner {max-width: 1500px; display: flex; justify-content: space-between; padding: 60px 20px 70px;}
.main-visual .goal-area .goal-box {width: 33.33%; display: flex; justify-content: center;}
.main-visual .goal-area .goal-thumb {margin-right: 35px;}
.main-visual .goal-area .goal-thumb::before {content: ''; display: inline-block; width: 96px; height: 65px; background-repeat: no-repeat; background-position: center; vertical-align: top; transition: .5s;}
.main-visual .goal-box:nth-child(1) .goal-thumb::before {background-image: url("../img/vis_icon1.png");}
.main-visual .goal-box:nth-child(2) .goal-thumb::before {background-image: url("../img/vis_icon2.png");}
.main-visual .goal-box:nth-child(3) .goal-thumb::before {background-image: url("../img/vis_icon3.png");}
.main-visual .goal-box:hover .goal-thumb::before {transform: rotateY(180deg);}
.main-visual .goal-area .title {font-size: 24px; font-weight: 700; color: #fff;}
.main-visual .goal-area .desc {font-size: 15px; font-weight: 300; color: rgba(255, 255, 255, 0.7); margin-top: 8px;}

/* media query */
@media screen and (max-width: 1800px) {
    .main-visual .group-title {width: 95%;}
    .main-visual .goal-area .inner {padding-left: 80px;}
}


@media screen and (max-width: 1200px) {
    .main-visual .main-typo h3 {font-size: 55px;}
    .main-visual .goal-area .goal-thumb {margin-right: 20px;}
    .main-visual .goal-area .goal-thumb::before {background-size: contain; width: 80px;}
}

@media screen and (max-width: 1023px) {
    .main-visual br {display: none;}
    .main-visual .swiper-slide {height: 720px; border-radius: 0;}

    .main-visual .group-title {top: 15%; width: 90%;}
    .main-visual .group-title .title {margin-bottom: 20px;}
    .main-visual .group-title .title::before {background-size: contain; width: 300px; height: 170px;}
    .main-visual .group-title .desc {font-size: 19px;}
    .main-visual .group-title .swiper-navi {display: none;}
    .main-visual .group-title .swiper-pagination {position: static; width: 100%; text-align: center; display: block; margin-top: 70px;}
    .main-visual .group-title .swiper-pagination-bullet {display: inline-block;}
    .main-visual .group-title .swiper-pagination-bullet + .swiper-pagination-bullet {margin: 0 0 0 30px;}
    .main-visual .group-title .swiper-pagination-bullet::after {width: 30px; height: 30px;}

    .main-visual .goal-area .goal-box {flex-direction: column; text-align: center; justify-content: flex-start;}
    .main-visual .goal-area .goal-thumb {margin-right: 0; margin-bottom: 15px;}
    .main-visual .goal-area .goal-thumb::before {background-size: contain; width: 70px; height: 55px;}
    .main-visual .goal-area .title {font-size: 18px;}
    .main-visual .goal-area .desc {font-size: 14px; color: #fff;}
    .main-visual .goal-area .inner {padding: 35px 20px;}
}

@media screen and (max-width: 767px) {
    .main-visual .group-title .desc {font-size: 18px;}
    .main-visual .goal-area .inner {padding: 25px 20px;}
    .main-visual .goal-area .goal-thumb {margin-bottom: 10px;}
    .main-visual .goal-area .desc {display: none;}
}

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

}

@media screen and (max-width: 600px) {
    .main-visual .swiper-slide {height: 650px;}
    .main-visual .group-title {top: 20%;}
    .main-visual .group-title .title::before {width: 250px; height: 120px;}
    .main-visual .group-title .desc {font-size: 17px;}
    .main-visual .goal-area .goal-thumb::before {width: 60px; height: 45px;}
}

@media screen and (max-width: 480px) {
    .main-visual .swiper-slide {height: 600px;}
    .main-visual .group-title .title::before {width: 195px; height: 100px;}
    .main-visual .group-title .desc {font-size: 16px;}

    .main-visual .goal-area .goal-thumb::before {width: 50px; height: 35px;}
    .main-visual .goal-area .title {font-size: 16px;}
    .main-visual .goal-area .desc {font-size: 13px; color: #fff;}
}