/* ===============================================================
    * about
=============================================================== */
.about {width: 100%; height: 100vh;}
.swiper-container, .swiper-wrapper {height: 100%;}
.swiper-slide {width: 100%; height: 100vh !important;}
.about-tit {opacity: 0; visibility: hidden; transition: opacity .3s;}
.about-tit.active {position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%); text-align: center; color: #fff; opacity: 1; visibility: visible;}
.about-tit h2 {font-size: 80px; letter-spacing: 0.04em; margin-bottom: 40px;}
.about-tit p {font-size: 20px; letter-spacing: 0.2em;}
.about-pager {z-index: 10; position: absolute; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; z-index: 100; right: 0 !important; top: 50%; transform: translateY(-50%);}
.about-pager .swiper-pagination-bullet {width: 30px; height: 2px; background: #fff; border-radius: 0; opacity: 0.4; margin: 10px 0 !important; cursor: pointer;}
.about-pager .swiper-pagination-bullet-active {width: 40px; opacity: 1;}
@media (max-width: 820px){
    .about {height: auto}
    .swiper-wrapper {flex-wrap: wrap;}
    .swiper-slide {height: 56.27vw !important; margin-bottom: 10px;}
    .about-pager {display: none;} 
    .about-tit h2 {font-size: 10.67vw; margin-bottom: 2.67vw;}
    .about-tit p {font-size: 3.20vw;}
}