@charset "utf-8";
/* Modelroom */
.model{background: #344630; color: #fff; padding-bottom: 90px;}
.model-tit{font-size: 2.5rem; text-align: center; padding: 70px 0;}

.model-slider{max-width: 1100px;}
.slider{line-height: 0;}
.slider-nav{display: flex; margin-top: 60px;}
.slider-nav .slick-slide{width: 23.365% !important; margin-bottom: 2.18%; background: #000;}
.slider-nav .slick-slide:not(:nth-of-type(4n)){margin-right: 2.18%;}
.slider-nav .slick-current .thumb{opacity: 1;}
.slider-nav .slick-track, 
.slider-nav .slick-list {width: 100% !important;
  -webkit-transform: translate3d(0, 0, 0) !important;
  -moz-transform: translate3d(0, 0, 0) !important;
  -ms-transform: translate3d(0, 0, 0) !important;
  -o-transform: translate3d(0, 0, 0) !important;
  transform: translate3d(0, 0, 0) !important;}

.slider-for .slick-list:before,
.slider-for .slick-list:after{content: ''; position: absolute; top: 0; max-width: 80px; width: 10%; height: 100%; display: block; z-index: 1;}
.slider-for .slick-list:before{background: linear-gradient(to right, rgba(0,0,0,.3), rgba(0,0,0,0)); left: 0;}
.slider-for .slick-list:after{background: linear-gradient(to left, rgba(0,0,0,.3), rgba(0,0,0,0)); right: 0;}

.slick-arrow{position: absolute; top: 50%; margin-top: -37px; width: 44px; height: 74px; text-indent: -9999px; border: none; outline: none; z-index: 10; cursor: pointer;}
.slick-next{background: url("../images/gallery/btn_next.png") no-repeat center center/100% auto; right: 10px;}
.slick-prev{background: url("../images/gallery/btn_prev.png") no-repeat center center/100% auto; left: 10px;}

.slide{position: relative;}
.slide p{font-size: 2rem; letter-spacing: 0.05em; line-height: 1; color: #fff; /* font-family: 'Barlow Condensed', sans-serif; */ position: absolute; bottom: 13px; right: 15px; text-shadow: 0 0 0.3em rgba(0,0,0,.7), 0 0 0.6em rgba(0,0,0,.7);}
.slide img{width: 1100px;}
 
.thumb{position: relative; opacity: .5;}
.thumb p{font-size: 1.2rem; letter-spacing: 0.05em; line-height: 1; color: #fff; /* font-family: 'Barlow Condensed', sans-serif; */ position: absolute; bottom: 6px; right: 6px; text-shadow: 0 0 0.3em rgba(0,0,0,.8), 0 0 0.6em rgba(0,0,0,.8);}

@media (max-width: 767px){
    .model{padding-bottom: 60px;}
    .model-tit{font-size: 1.8rem; padding: 50px 0;}
    
    .slick-arrow{width: 24px; height: 40px; margin-top: -20px;}
    .slick-next{right: 0;}
    .slick-prev{left: 0;}
    
    .slider-nav{margin-top: 30px;}
    .slide p{font-size: 5vw; bottom: 7px; right: 7px;}
    .thumb p{font-size: 2vw; bottom: 3px; right: 3px;}
}