@charset "UTF-8";
/* 764 - 1189 */
/* padding: 0 30px; */

/* 1348 -  以上*/
/* padding: 0 95px; */
/*-------------------------------------------------------------*/
/*-------------------------------------------------------------*/
/* .section__list {} */

.section__list {
	overflow: hidden;
}

.section__list .box__container {
	display: grid;
	justify-content: space-between;
	grid-template-columns: repeat(4, minmax(300px, 350px));
	grid-auto-rows: minmax(560px, auto);
}

.section__list .box__container > li {
	margin-bottom: 50px;
}

.section__list .box__container > li > a .item__cover {
    position: relative;
	display: block;
    width: 100%;
}

.section__list .box__container > li > a .item__cover::before {
	content: "";
	display: block;
	width: 100%;
	padding-top: 100%;
}

.section__list .box__container > li > a .item__cover > div {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}


.js-tilt-container {
	pointer-events: auto;
	cursor: pointer;

	transform: rotateX(0) rotateY(0);
	transform-style: preserve-3d;

    /* -webkit-transition: box-shadow 0.1s, transform 0.1s;
    -o-transition: box-shadow 0.1s, transform 0.1s;
    -moz-transition: box-shadow 0.1s, transform 0.1s;
    transition: box-shadow 0.1s, transform 0.1s; */

    -webkit-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    -moz-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s;
}

/* .js-tilt-container:hover {
	box-shadow: 0px 0px 15px rgba(0,0,0, 0.6);
} */
.js-tilt-container:hover {
	transform: scale(1.02);
	transform-origin: center center;
	/* box-shadow: 0px 0px 15px rgba(0,0,0, 0.6); */
}

.js-tilt-leave {
	transform: rotateX(0) rotateY(0) !important;
	transition-timing-function: cubic-bezier(0.42, 0, 0, 1) !important;
	transition-duration: .5s;
}

.tilt-light {
	background: radial-gradient(ellipse at center, rgba(255,255,255,0.15) 0%,rgba(255,255,255,0) 60%);
	width: 600px;
	height: 600px;
	background-blend-mode: lighten;
	
	position: fixed;
	pointer-events: none;

    -webkit-transition: opacity .2s ease-in-out 0s;
    -o-transition: opacity .2s ease-in-out 0s;
    -moz-transition: opacity .2s ease-in-out 0s;
    transition: opacity .2s ease-in-out 0s;
	opacity: 0;

	transform-origin: center;

	transform: scale(2)
}


.section__list .box__container > li > a .item__cover .js-tilt-container::after {
	content: "";
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	/* box-shadow: inset 0 0 0px 0px #000000; */
    -webkit-transition: all .2s ease-in-out 0s;
    -o-transition: all .2s ease-in-out 0s;
    -moz-transition: all .2s ease-in-out 0s;
    transition: all .2s ease-in-out 0s;
}

/* .section__list .box__container > li > a:hover .item__cover .js-tilt-container::after {
	box-shadow: inset 0 0 0px 5px #000000; 
} */

.section__list .box__container > li > a .item__cover > div > img {
	width: auto;
	height: auto;
}

.section__list .box__container > li > a .item__cover > div > img.cover-by-w {
	width: 100%;
	height: auto;
}

.section__list .box__container > li > a .item__cover > div > img.cover-by-h {
	width: auto;
	height: 100%;
}

.section__list .box__container > li > a > .item__title,
.section__list .box__container > li > a .item__describe {
	padding: 0 20px;
}

.section__list .box__container > li > a > .item__title > h3 {
	margin: 15px 0;
	font-size: 22px;
	font-weight: 400;
	line-height: 30px;
}

.section__list .box__container > li > a .item__describe > p {
    color: #B0B0B0;
    /* font-size: 14px; */
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3rem;

}


@media only screen and (min-width:360px) {
	/* 80 x 2 */
	/* .section__list {
		margin-top: 100px;
	} */

	.section__list .box__container {
		padding: 0px 0px;
		grid-template-columns: repeat(1, 100%);
	}

	.section__list .box__container > li > a > .item__title,
	.section__list .box__container > li > a .item__describe {
		padding: 0 20px;
	}

	.section__list .box__container > li > a > h3,
	.section__list .box__container > li > a > p {
		padding: 0 20px;
	}
}

/*  */
@media only screen and (min-width:764px) {
	/* 100 x 2 */
	.section__list {
		/* margin-top: 50px; */
		padding-top: 50px;
	}

}

/* 1079 */
@media only screen and (min-width:1024px) {
    .section__list .box__container {
        padding: 0px 30px;
    }

	.section__list .box__container {
		grid-template-columns: repeat(2, minmax(300px, 465px));
	}

	.section__list .box__container > li > a > .item__title,
	.section__list .box__container > li > a .item__describe {
		padding: 0 0px;
	}

	.section__list .box__container > li > a > h3,
	.section__list .box__container > li > a > p {
		padding: 0 0px;
	}
}

@media only screen and (min-width:1189px) {
	.section__list .box__container {
		grid-template-columns: repeat(3, minmax(300px, 350px));
	}
}
/*  */
@media only screen and (min-width:1348px) {
    .section__list .box__container {
        padding: 0px 95px;
    }
}

@media only screen and (min-width:1669px) {
	.section__list .box__container {
		grid-template-columns: repeat(4, minmax(300px, 350px));
	}
}

@media only screen and (min-width:2300px) {
	.section__list .box__container {
		grid-template-columns: repeat(5, minmax(300px, 350px));
	}
}

@media only screen and (min-width:2560px) {
	.section__list .box__container {
		grid-template-columns: repeat(6, minmax(300px, 350px));
	}
}