/* Slider */
#slider {
	background-color: #000;
	height: 35rem;
}

#bgr {opacity: .5;}

#title {
	padding-top: 4rem;
	font-size: 6rem;
	letter-spacing: .2rem;
}

#stitle {
	font-size: 1.2rem;
	padding: 0 2rem;
	max-width: 500px;
}

/* Shop */
#body {
	background-color: #FFF;
	min-height: 40rem;
}

.item-box {
	padding: 1rem;
	vertical-align: top;
}

.item {
	background-color: #ebebeb;
	padding: 1rem 0;
	border-radius: 20px;
	transform-style: preserve-3d;
}

.item-img {
	padding-bottom: 120%;
}

.item-circle {
	border-radius: 100%;
	width: 70%;
	padding-bottom: 70%;
	transform: translateX(-50%) translateY(-50%) translateZ(30px);
}

#item1 .item-circle {background-color: var(--c1);}
#item2 .item-circle {background-color: var(--c3);}

.item-img .bgr {transform: translateZ(60px);}

.item-name {
	opacity: 0;
	padding-top: 10px;
	top: 0;
	font-size: 1.4rem;
	transform: translateY(-2rem) translateZ(80px);
	transition: opacity .4s, transform .4s;
	z-index: 1;
}

.item .mbtn {
	opacity: 0;
	border-radius: 30px;
	bottom: 0;
	line-height: 3;
	z-index: 1;
	transform: translateX(-50%) translateY(2rem) translateZ(80px);
	transition: opacity .4s, transform .4s;
}

.item:hover .item-name {
	opacity: 1;
	transform: translateZ(80px);	
}

.item:hover .mbtn {
	opacity: 1;
	transform: translateX(-50%) translateZ(80px);
}

#item1 .mbtn {background-color: var(--c1);}
#item2 .mbtn {background-color: var(--c3); color: #fff;}

/* Responsive */
@media (max-width: 1000px) {

	.item {padding: 0 !important;}

	.item-img {padding-bottom: 110%;}

	.item-name {
		opacity: 1;
		width: auto;
		padding: 1rem 1rem 0 1rem;
		position: relative !important;
		transform: none !important;
		font-weight: 700;
	}

	.btn-box {
		padding: 0 1rem;
	}

	.item .mbtn {
		opacity: 1;
		transform: none !important;
		position: relative;
		left: 0;
		line-height: 4.5;
	}
}

@media (max-width: 450px) {

	#title {font-size: 4rem;}
	#stitle {font-size: 1rem;}

	.item-name {font-size: 1.6rem;}
}