/* common */
.overview .title-area {text-align: center;}
.overview .title-area .title {font-size: 50px; font-weight: 700; color: #000; margin-bottom: 25px;}
.overview .title-area .title::before {content: ''; display: block; width: 50px; height: 3px; background: #e50050; margin: 0 auto 10px;}
.overview .title-area .desc {font-size: 16px; font-weight: 300; line-height: 1.88; color: #4c4c4c;}

/* overview */
.overview {overflow: hidden;}
.overview::after {content: ''; display: block; width: 100%; height: 547px; background: url("../img/about_img.jpg?v=230628") no-repeat center/cover;}
.overview > div:nth-of-type(2n) {background: #f7f7f7;}
.overview > div:nth-of-type(2n+1) {background: #ffff;}
.overview .inner {padding: 80px 0 95px;}
.overview-title {display: block; font-size: 25px; font-weight: 700; color: #4c4c4c; margin-bottom: 25px;}
.overview-title::before {content: ''; display: inline-block; width: 15px; height: 2px; background: #e50050; margin-right: 15px; vertical-align: 8px;}

/* slide-area */
.overview .slide-area .swiper {margin-top: 20px;}
.overview .slide-area .swiper-button-prev::after, .overview .slide-area .swiper-button-next::after {content: ''; width: 25px; height: 48px; background-repeat: no-repeat; background-position: center;}
.overview .slide-area .swiper-button-prev, .overview .slide-area .swiper-button-after {width: auto; height: auto; margin-top: 0;}
.overview .slide-area .swiper-button-prev {left: -100px;}
.overview .slide-area .swiper-button-next {right: -100px;}
.overview .slide-area .swiper-button-prev::after {background-image: url("../img/about1_prev.png");}
.overview .slide-area .swiper-button-next::after {background-image: url("../img/about1_next.png");}
.overview .slide-area .comment {font-size: 15px; font-weight: 300; color: #4c4c4c; margin-top: 15px; opacity: 0;}
.overview .slide-area .comment::before {content: '·'; margin-right: 5px;}
.overview .swiper-slide-active .comment {opacity: 1;}
/* pagination */
.overview .pagination-area {display: flex; justify-content: space-between; align-items: center; margin-top: 20px;}
.overview .swiper-pagination {position: static;}
/* progress-bar */
.overview .swiper-pagination-progressbar {height: 1px; background: #ddd; width: 90%;}
.overview .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {height: 2px; background: #333;}
/* bullet */
.overview .pagination-bullet {width: auto; font-family: 'Poppins', sans-serif; font-size: 20px; font-weight: 400; color: #4c4c4c;}
.overview .pagination-bullet .swiper-pagination-current {}
.overview .pagination-bullet .swiper-pagination-current::before {}

/* info-area */
.overview .info-area .info-box-wrap {border-right: 1px solid #ddd; border-top: 3px solid #e50050;}
.overview .info-area .info-box {display: flex; justify-content: space-between;}
.overview .info-area .title, .overview .info-area .desc {padding: 16px 30px;}
.overview .info-area .title {display: block; width: 20%; min-width: 100px; font-size: 18px; font-weight: 500; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .21); background: #363d43; text-align: center;}
.overview .info-area .desc {width: 80%; font-size: 17px; font-weight: 300; color: #666; border-bottom: 1px solid #ddd; background: #fff; word-break: break-all;}

/* media query */
@media screen and (max-width: 1700px) {
    /* common */
    .overview .inner {padding: 80px 20px 95px;}
}

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

}

@media screen and (max-width: 1400px) {
    /* common */
    .overview .inner {padding: 80px 60px 95px;}
}

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

}

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

}

@media screen and (max-width: 1023px) {
    /* common */
    .overview br {display: none;}
    .overview .title-area .title {font-size: 40px;}
}

@media screen and (max-width: 767px) {
    /* common */
    .overview .inner {padding: 60px 40px;}
    .overview .title-area .title {font-size: 35px; margin-bottom: 20px;}
    .overview .title-area .desc {font-size: 15px;}

    .overview::after {height: 400px;}
    .overview-title {font-size: 23px;}
    .overview .pagination-bullet {font-size: 18px;}
    .overview .info-area .title {font-size: 17px;}
    .overview .info-area .desc {font-size: 16px;}
    .overview .slide-area .comment {font-size: 14px;}
}

@media screen and (max-width: 640px) {
    .overview::after {height: 300px;}
    .overview-title {font-size: 22px;}
    .overview .pagination-area {flex-direction: column;}
    .overview .swiper-pagination-progressbar {width: 100%;}
    .overview .pagination-bullet {margin-top: 10px;}
    .overview .info-area .title, .overview .info-area .desc {padding: 16px;}
}

@media screen and (max-width: 480px) {
    /* common */
    .overview .inner {padding: 60px 20px;}
    .overview .title-area .title {font-size: 30px;margin-bottom: 15px;}
    .overview .title-area .desc {font-size: 14px;}

    .overview::after {height: 200px;}
    .overview-title {font-size: 20px;}
    .overview .pagination-bullet {font-size: 17px;}
    .overview .info-area .title {font-size: 16px;}
    .overview .info-area .desc {font-size: 15px;}
}