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

#container{
	padding-top: 2%;
}

.title {
	font-size: 1rem;
	margin: 0 0 10px;
	letter-spacing: 0.25rem;
}

#main{
	width: 1020px;
	float:right;
}

#reccomend {
	margin:0 0 6%;
}

#reccomend h3 {
	text-align: center;
	letter-spacing: 0.25rem;
	font-size: 1.33rem;
	color: #FF7F00;
	font-weight: 700;
	margin: 0 0 4%;
}

#reccomend h3::before{
	content: '';
	display: inline-block;
	width: 25px;
	height: 25px;
	background: url(/img/icon_star.svg) no-repeat center top / contain;
	vertical-align: middle;
	padding: 0 30px 0 0;
	margin: -5px 0 0;
}


#main ul {
}

#main li{
	width: 240px;
	float:left;
	position:relative;
	margin: 0px 20px 50px 0;
	height: 250px;
}

#main li:nth-child(4n){
	margin:0;
}

.icon{
	position:absolute;
	background-color:#FF4D4D;
	text-align:center;
	color:#FFF;
	width:40px;
	height:40px;
	border-radius:20px;
	font-size:0.78rem;
	line-height:3.5em;
	right:2px;
	top:2px;
}

#main li .photo{
}

#main li .photo a img{
	width:100%;
	transition: 0.5s;
}

#main li .photo a:hover img{
	filter:Alpha(opacity=40) ;
	opacity:0.4 ;
	-moz-opacity:0.4;
}

#main li .item{
	margin:5% 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
	
#main li .shop{
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#main li .shop a{
	color: #4e2600;
	font-size: 0.88rem;
}

#reccomend li .price{
	margin:5% 0 0;
}

#number{
	overflow:hidden;
	margin:0 0 2%;
}

#number .thum{
}

#number .thum .select {
    display: inline-block;
    width: 280px;
}

#number .thum .select.short {
    width: 100px;
}

#number .thumr{
}

#detail{
}





/* =============================================================================
   Device
   ========================================================================== */


@media screen and (max-width: 768px) {
	#container .container{
		width: 100%;
	}
	#side {
	    width: auto;
	    float: none;
	}
	#main {
	    width: auto;
	    float: none;
	}
	#reccomend {
		padding: 0 2%;
	}
	#reccomend h3 {
		font-size: 1rem;
	}
	#reccomend h3::before {
		height: 20px;
		width: 20px;
		padding: 0 20px 0 0;
	}
	#main li{
	    width: 49%;
		margin:0 0 5%;
		height: 200px;
	}
	#main li:nth-child(odd){
		margin-right: 2%;
	}
	#main li .shop {
		margin: 2% 0 0;
	}
	.icon {
	    width: 30px;
	    height: 30px;
	    border-radius: 15px;
	    font-size: 0.55rem;
	    right: 2px;
	    top: 2px;
	}
	#number{
		padding: 0 2%;
	}
	#number .thum{
		float: none;
		width: 100%;
	}
	#number .thumr{
		float: none;
		text-align: right;
		margin: 2% 0 0;
		font-size: 0.78rem;
	}
	#number .thum .select{
		width: 74%;
	}
	#number .thum .select.short {
		width: 24%;
	}
	#detail{
		padding: 0 2%;
	}
}