@charset "utf-8";


.portfolio{}
.portfolio .list{}
.portfolio .list ul{display: flex;flex-wrap: wrap;margin:-1%;}
.portfolio .list ul li{display: inline-block;width:23%;margin:1%;}
.portfolio .list ul li a{position:relative;display: block;width:100%;height:100%;}
.portfolio .list ul li .img img{display: block;width:100%;}
.portfolio .list ul li .mask {opacity:0;position: absolute;top:0;left:0;width:100%;height:100%;background: rgba(0,0,0,0.4);-moz-transition: all 0.3s;-webkit-transition: all 0.3s;-ms-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}
.portfolio .list ul li .mask p{position: absolute;top:50%;transform: translateY(-50%);width:100%;text-align: center; font-size: 16px;font-weight: 500;color: #f5f5f5;}
.portfolio .list ul li:hover .mask{opacity: 1;}
.portfolio .list .button-box{margin-top:60px;text-align: center;}
.portfolio .list .button-box button{position:relative;display: inline-block;width:100px;height:40px;border: 1px solid #000;text-align: center; font-size: 15px;color:#000;font-weight: normal;letter-spacing: -0.3px;}
.portfolio .list .button-box button:after{content: "";vertical-align: middle;position: relative;top: -1px;display: inline-block;margin-left:10px;width:13px;height:7px;background: url(/_public/images2/icon/btn_arrow1.svg) no-repeat;background-size: cover;}

.portfolio .view .slider-wrap{position: relative;}
.portfolio .view .slider-wrap .target-arrow{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:100%;max-width: 1700px;display: flex;justify-content: space-between;z-index: 10;}
.portfolio .view .slider-wrap .target-arrow .slick-arrow{display: inline-block;width:50px;height:50px;font-size:0;}
.portfolio .view .slider-wrap .target-arrow .slick-prev{background: url(/_public/images2/icon/slick_arrow1.svg) no-repeat;background-size: cover;}
.portfolio .view .slider-wrap .target-arrow .slick-next{background: url(/_public/images2/icon/slick_arrow2.svg) no-repeat;background-size: cover;}
.portfolio .view .slider{}
.portfolio .view .slider .slick-slide{margin:0 10px;cursor: pointer;}
.portfolio .view .slider .slick-slide img{max-height: 500px;}
.portfolio .view .info-txt{max-width:1200px;margin:40px auto 0;}
.portfolio .view .info-txt dl{}
.portfolio .view .info-txt dl dt{width:95px; font-size: 13px;font-weight: 500;letter-spacing: 0.3px;color: #aaa;}
.portfolio .view .info-txt dl dd{padding:0 0 10px 95px; font-size: 13px;font-weight: 600;letter-spacing: 0.3px;color: #555;}
.portfolio .view .swiper-slide{width:auto; cursor: pointer;}
.portfolio .view .target-control{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:100%;max-width: 1700px;display: flex;justify-content: space-between;z-index: 10;}
.portfolio .view .target-control .swiper-button-prev{display: inline-block;width:50px;height:50px;font-size:0;background: url(/_public/images2/icon/slick_arrow1.svg) no-repeat;background-size: cover;}
.portfolio .view .target-control .swiper-button-prev:after{display: none;}
.portfolio .view .target-control .swiper-button-next{display: inline-block;width:50px;height:50px;font-size:0;background: url(/_public/images2/icon/slick_arrow2.svg) no-repeat;background-size: cover;}
.portfolio .view .target-control .swiper-button-next:after{display: none;}
.portfolio .view .target-control .swiper-button-disabled{opacity: 0;}
.portfolio .view .swiper-slide img{max-height:500px;}


/* spinner */
.spinner-wrap2 .view .slider-wrap{position: relative;}
.spinner-wrap2 .view .slider-wrap .target-arrow{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);width:100%;max-width: 1700px;display: flex;justify-content: space-between;z-index: 10;}
.spinner-wrap2 .view .slider-wrap .target-arrow .slick-arrow{display: inline-block;width:50px;height:50px;font-size:0;}
.spinner-wrap2 .view .slider-wrap .target-arrow .slick-prev{background: url(/_public/images2/icon/slick_arrow1.svg) no-repeat;background-size: cover;}
.spinner-wrap2 .view .slider-wrap .target-arrow .slick-next{background: url(/_public/images2/icon/slick_arrow2.svg) no-repeat;background-size: cover;}
.spinner-wrap2 .view .slider{}
.spinner-wrap2 .view .slider .slick-slide{margin:0 10px;cursor: pointer;}
.spinner-wrap2 .view .slider .slick-slide img{max-height: 500px;}
.spinner-wrap2 .view .info-txt{max-width:1200px;margin:40px auto 0;}
.spinner-wrap2 .view .info-txt dl{}
.spinner-wrap2 .view .info-txt dl dt{width:95px; font-size: 15px;font-weight: 500;letter-spacing: 0.3px;color: #787878;}
.spinner-wrap2 .view .info-txt dl dd{padding:0 0 10px 95px; font-size: 15px;font-weight: 600;letter-spacing: 0.3px;color: #2e2e2e;}


/* tablet */
@media all and (max-width:1280px) {
    .portfolio .list ul li{display: inline-block;width:31.3333%;margin:1%;}
}


@media all and (max-width:1024px){
    .portfolio .view .target-control{display: none;}
    .portfolio .view .swiper-wrapper{flex-wrap:wrap;}
    .portfolio .view .swiper-slide{width:100%;}
    .portfolio .view .swiper-slide img{width:100%;max-height: auto;}
}

/* mobile */
@media all and (max-width:768px) {
    .portfolio .list ul li{display: inline-block;width:48%;margin:1%;}
    .portfolio .list ul li .mask p{font-size:14px;}
    .portfolio .view{position: relative;padding-top:45%;}
    .portfolio .view .slider-wrap .target-arrow .slick-arrow{width:40px;height:40px;}
    .portfolio .view .slider > div + div{margin-top:10px;}
    .portfolio .view .slider > div{font-size: 0;text-align: center;}
    .portfolio .view .info-txt{margin:0;position: absolute;top:0;lefT:0;width:100%;}
    .portfolio .view .info-txt dl dt{font-size: 14px;}
    .portfolio .view .info-txt dl dd{font-size: 14px;}
    .portfolio .list .button-box button{font-size:14px;width:100%;}

	/* spinner */
	.spinner-wrap2 .list ul li{display: inline-block;width:48%;margin:1%;}
	.spinner-wrap2 .list ul li .mask p{font-size:14px;}
	.spinner-wrap2 .view{position: relative;padding-top:45%;}
	.spinner-wrap2 .view .slider-wrap .target-arrow .slick-arrow{width:40px;height:40px;}
	.spinner-wrap2 .view .slider > div + div{margin-top:10px;}
	.spinner-wrap2 .view .slider > div{font-size: 0;text-align: center;}
	.spinner-wrap2 .view .info-txt{margin:0;position: absolute;top:0;lefT:0;width:100%;}
	.spinner-wrap2 .view .info-txt dl dt{font-size: 14px;}
	.spinner-wrap2 .view .info-txt dl dd{font-size: 14px;}
	.spinner-wrap2 .list .button-box button{font-size:14px;width:100%;}
}