@charset "utf-8";

.ranking_tab{
	width:100%;
	margin:25px 0 0 0;
	border-bottom:5px solid #001c58;
}
.ranking_tab li span{
	display:inline-block;
}
.ranking_tab li{
	width:20%;
	background:#CCCCCC;
	color:#FFF;
	height:44px;
	line-height:44px;
	float:left;
	text-align:center;
	font-size:116%;
	letter-spacing:2px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	border-top-left-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	border-top-right-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	border-left:3px solid #FFF;
}
.ranking_tab li:first-child{
	border-left:none;
}
.ranking_tab li a{
	display:block;
	border-top-left-radius: 10px;
	-webkit-border-top-left-radius: 10px;
	-moz-border-radius-topleft: 10px;
	border-top-right-radius: 10px;
	-webkit-border-top-right-radius: 10px;
	-moz-border-radius-topright: 10px;
	color:#FFF;
	transition:0.5s;
}
.ranking_tab li.active{
	background:#001c58;
}
.ranking_tab li a:hover{
	background:#001c58;
}
@media(max-width: 768px) {
	.ranking_tab li{
		font-size:100%;
	}
}
.ranking_tabbox{
	width:90%;
	margin:20px auto 0px auto;
}
.ranking_tabbox h3{
	font-size:116%;
	color:#263e71;
	border-bottom:2px solid #263e71;
	padding:0 0 5px 0;
}

@media(max-width: 768px) {
	.ranking_tabbox{
		width:94%;
	}
}

.ranking_btnlist{
	margin:50px 0 0 0;
	width:100%;
}
.ranking_btnlist li{
	float:left;
	width:48%;
	margin:0 1%;
	border:2px solid #263e71;
	height:50px;
	line-height:50px;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
	text-align:center;
	font-size:128%;
	font-weight:bold;
}
.ranking_btnlist li.active{
	background:#263e71;
	color:#FFF;
}
.ranking_btnlist li a{
	display:block;
	width:100%;
	height:48px;
	color:#263e71;
	transition:0.5s;
}
.ranking_btnlist li a:hover{
	background:#263e71;
	color:#FFF;
	height:48px;
}

.ranking_list{
	width:96%;
	max-width:1000px;
	margin:0px auto;
}
.ranking_list li{
	display:block !important;
	width:100%;
	background:#FFF;
	padding:30px;
	margin:20px auto;
	position:relative;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}
.ranking_no{
	position:absolute;
	top:0;
	left:20px;
	z-index:99;
}

.ranking_img{
	float:left;
	width:420px;
	margin:0 20px 0 0;
	position:relative;
}
.ranking_img img{
	width:100%;
}
.ranking_icon1{
	position:absolute;
	top:-10px;
	left:-10px;
	background:#e74a46;
	color:#FFF;
	font-size:88%;
	width:60px;
	height:60px;
	line-height:60px;
	text-align:center;
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	z-index:999;
}
.ranking_icon2{
	position:absolute;
	top:-10px;
	left:-10px;
	background:#4a5e89;
	color:#FFF;
	font-size:40%;
	width:60px;
	height:60px;
	line-height:60px;
	text-align:center;
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	z-index:999;
}
.ranking_icon_img{
	position:absolute;
	top:-10px;
	left:-10px;
	font-size:40%;
	width:60px;
	height:60px;
	line-height:60px;
	text-align:center;
	z-index:999;
}
.ranking_icon_img img{
	width:100%;
	height:auto;
}
.ranking_detail{
	float:left;
	width:490px;
}
.ranking_detail .item_price{
	margin:0 0 10px 0;
}
@media(max-width: 1024px) {
	.ranking_img{
		width:45%;
		margin:0 3% 0 0;
	}
	.ranking_detail{
		float:left;
		width:52%;
	}
}
.ranking_catch{
	font-size:26px;
	font-weight:bold;
	margin:0 0 5px 0;
	text-align:left;
	line-height:150%;
}
a .ranking_catch{
	color:#000;
}
a:hover .ranking_catch{
	text-decoration:underline;
}
.ranking_title{
	margin:0 0 5px 0;
	color:#909090;
}
.ranking_price{
	text-align:right;
	color:#e74a46;
	font-size:136%;
}
.ranking_price span{
	font-size:82%;
}
.ranking_body{
	margin:20px 0 5px 0;
	font-size:92%;
	line-height:130%;
}
.ranking_more{
	text-align:center;
	width:100px;
	margin:0 0 0 auto;
	font-size:88%;
}
.ranking_more a{
	display:block;
	background:#FFF;
	color:#000;
	border:2px solid #000;
	padding:5px 0;
	font-weight:bold;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
}
.ranking_more a:hover{
	color:#FFF;
	background:#000;
}
.ranking_cart_btn{
	width:90%;
	margin:40px auto;
	display:block;
	background:#B70617;
	color:#FFF;
	padding:10px 0;
	text-align:center;
	border:none;
	font-size:112%;
	transition:1.0s;
	-webkit-appearance: none;
	border-radius: 0;
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	font-weight:bold;
}
.ranking_cart_btn a{
	color:#FFF;
}
.ranking_cart_btn:hover{
	background:rgba(231,74,70,0.7);
}

@media(max-width: 768px) {
	.ranking_tab li span{
		display:none;
	}
	.ranking_btnlist{
		margin:30px 0 0 0;
	}
	.ranking_btnlist li{
		font-size:108%;
		height:40px;
		line-height:40px;
	}
	.ranking_btnlist li a{
		height:38px;
	}
	.ranking_btnlist li a:hover{
		height:38px;
	}

	.ranking_title{
		font-size:12px;
	}

	.ranking_box{
		width:100%;
		margin:0px auto 10px auto;
		padding:0;
	}
	.ranking_no{
		left:8px;
	}
	.ranking_no img{
		width:35px;
		height:auto;
	}
	.ranking_img{
		width:40%;
		margin:0 3% 0 0;
	}
	.ranking_img .item_list_noimage{
		height:120px;
		line-height:120px;
	}

	.ranking_detail{
		width:57%;
	}
	.ranking_icon_img,
	.ranking_icon1,
	.ranking_icon2{
		font-size:40%;
		width:40px;
		height:40px;
		line-height:40px;
	}
	.ranking_body{
		display:none;
	}
	.ranking_catch{
		font-size:108%;
		line-height:130%;
	}
	.ranking_price{
		margin:0 0 10px 0;
	}
	.ranking_more{
		width:30%;
		margin:0;
		font-size:88%;
		float:right;
	}
	.ranking_more a{
		height:45px;
		line-height:45px;
		padding:0;
	    -webkit-box-sizing: border-box;
	       -moz-box-sizing: border-box;
	         -o-box-sizing: border-box;
	        -ms-box-sizing: border-box;
	            box-sizing: border-box;
	}
	.ranking_cart_btn{
		width:68%;
		float:left;
		margin:0;
		height:45px;
		line-height:45px;
		padding:0;
	}
	.ranking_list{
		width:100%;
	}
	.ranking_list li{
		padding:15px 10px;
	}
	.ranking_list .item_soldout{
		width:68%;
		float:left;
		margin:0;
		height:45px;
		line-height:45px;
	}
}