@charset "utf-8";
/* CSS Document */

.mainGallery { margin-top: 60px; }
.mainGallery .galleryTitle { font-weight: bold; font-size: 1.125em; }
.mainGallery .imageArea { margin-top: 20px; }
.mainGallery .imageArea .swiper.swiper-main {}
.mainGallery .imageArea .swiper.swiper-main ul.swiper-wrapper {}
.mainGallery .imageArea .swiper.swiper-main ul.swiper-wrapper li.swiper-slide {}
.mainGallery .imageArea .swiper.swiper-main ul.swiper-wrapper li.swiper-slide img { width: 100%; height: auto; }
.mainGallery .imageArea .swiper.swiper-thumb {}
.mainGallery .imageArea .swiper.swiper-thumb ul.swiper-wrapper { display: block!important; }
.mainGallery .imageArea .swiper.swiper-thumb ul.swiper-wrapper li.swiper-slide { float: left; margin-top: 1px; width: 10%; height: 0; padding-top: 10%; border-right: solid 1px #fff; position: relative; cursor: pointer; flex-shrink: inherit; }
.mainGallery .imageArea .swiper.swiper-thumb ul.swiper-wrapper li.swiper-slide::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #000; opacity: 0.2; transition: all 250ms ease-out; }
.mainGallery .imageArea .swiper.swiper-thumb ul.swiper-wrapper li.swiper-slide:hover::after { opacity: 0; }
.mainGallery .imageArea .swiper.swiper-thumb ul.swiper-wrapper li.swiper-slide.swiper-slide-thumb-active::after { opacity: 0; }
.mainGallery .imageArea .swiper.swiper-thumb ul.swiper-wrapper li.swiper-slide img { position: absolute; width: 100%; height: 100%; top: 0; object-fit: cover; transition: all 250ms ease-out; }

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

.mainGallery { margin-top: 20px; }
.mainGallery .galleryTitle { font-size: 1em; }
.mainGallery .imageArea { margin-top: 15px; }
.mainGallery .imageArea .swiper.swiper-main {}
.mainGallery .imageArea .swiper.swiper-main ul.swiper-wrapper {}
.mainGallery .imageArea .swiper.swiper-main ul.swiper-wrapper li.swiper-slide {}
.mainGallery .imageArea .swiper.swiper-main ul.swiper-wrapper li.swiper-slide img {}
.mainGallery .imageArea .swiper.swiper-thumb {}
.mainGallery .imageArea .swiper.swiper-thumb ul.swiper-wrapper {}
.mainGallery .imageArea .swiper.swiper-thumb ul.swiper-wrapper li.swiper-slide { width: 20%; height: 0; padding-top: 20%; }
.mainGallery .imageArea .swiper.swiper-thumb ul.swiper-wrapper li.swiper-slide::after {}
.mainGallery .imageArea .swiper.swiper-thumb ul.swiper-wrapper li.swiper-slide:hover::after {}
.mainGallery .imageArea .swiper.swiper-thumb ul.swiper-wrapper li.swiper-slide.swiper-slide-thumb-active::after {}
.mainGallery .imageArea .swiper.swiper-thumb ul.swiper-wrapper li.swiper-slide img {}

}