.userListWrap {width:100%;}
.userListWrap .userListInner {max-width:1450px; margin:0 auto; width:100%; padding:100px 0;}
.userListWrap .userListInner > h2 {font-size:1.6rem; font-weight:500; position:relative; color:#5d5d5d;}
.userListWrap .userListInner > h2:after {content:''; height:2px; background:#0066cc; width:26px; position:absolute; top:-10px; left:0; z-index:1;}
.userListWrap .userListInner > table {width:100%; margin:30px auto;}
.userListWrap .userListInner > table tr th {border-bottom:1px solid #ccc; border-right:1px solid #ccc; background:#666; color:#fff; padding:20px 0px; font-size:1.2rem; font-weight:500; width:10%;}
.userListWrap .userListInner > table tr th:first-child {width:40%;}
.userListWrap .userListInner > table tr th:last-child {border-right:none;}
.userListWrap .userListInner > table tr td {border-bottom:1px solid #ccc; border-right:1px solid #ccc; padding:20px 0px; font-size:1.2rem; font-weight:500; text-align:center;}
.userListWrap .userListInner > table tr td:last-child {border-right:none;}
.userListWrap .userListInner > table tr td > a {font-size:1.2rem; font-weight:500;}
.userListWrap .userListInner > table tr td > a > img {width:25px;}

.userListWrap .userListInner .page1 {margin:20px 0;}
@media all and (max-width:680px){
	.userListWrap .userListInner > table tr th {font-size:0.9rem;}
	.userListWrap .userListInner > table tr td {font-size:0.9rem;}
	.userListWrap .userListInner > table tr td > a > img {width:20px;}
}

/* pricelist */
.userListWrap .userListInner ul {width:102.5%; position:relative; margin:0 0 0 -1.5%;}
.userListWrap .userListInner ul:after {content:''; display:block; clear:both;}
.userListWrap .userListInner ul > li { width:25%; float:left;}
.userListWrap .userListInner ul > li .priceBox {margin:30px 20px;}
.userListWrap .userListInner ul > li .priceBox .priceImg {position:relative; border:1px solid #ccc;}
.userListWrap .userListInner ul > li .priceBox .priceImg > img {width:100%; height:450px;}
.userListWrap .userListInner ul > li .priceBox .priceImg > a {display:block; position:absolute; width:100%; height:100%; top:0; left:0;}
.userListWrap .userListInner ul > li .priceBox .priceImg > a > table {width:100%; height:100%; transition:all .3s ease;}
.userListWrap .userListInner ul > li .priceBox .priceImg > a > table tr td {width:100%; height:100%; vertical-align:middle; color:#fff; text-align:center; font-size:2rem; background:rgba(0,0,0,0); transition:all .3s ease; }
.userListWrap .userListInner ul > li .priceBox .priceImg:hover > a > table tr td {background:rgba(0,0,0,0.7);}
.userListWrap .userListInner ul > li .priceBox .priceImg > a > table tr td div {display:none; font-size:1.6rem;}
.userListWrap .userListInner ul > li .priceBox .priceImg:hover > a > table tr td div {display:block; color:#d6c196;}
.userListWrap .userListInner ul > li .priceBox .priceImg > a > table tr td div p img {width:25px;}
.userListWrap .userListInner ul > li .priceBox .priceTitle { text-align:center; font-size:1.2rem; padding:15px 0;}
@media all and (max-width:1400px){ .userListWrap .userListInner ul > li .priceBox .priceImg > img {height:400px;} }
@media all and (max-width:1300px){ .userListWrap .userListInner ul > li .priceBox .priceImg > img {height:370px;} }
@media all and (max-width:1200px){ .userListWrap .userListInner ul > li .priceBox .priceImg > img {height:350px;} }
@media all and (max-width:1100px){ .userListWrap .userListInner ul > li .priceBox .priceImg > img {height:320px;} }
@media all and (max-width:1000px){ .userListWrap .userListInner ul > li .priceBox .priceImg > img {height:300px;} }
@media all and (max-width:900px){ .userListWrap .userListInner ul > li .priceBox .priceImg > img {height:270px;} }
@media all and (max-width:800px){ .userListWrap .userListInner ul > li .priceBox .priceImg > img {height:320px;} }
@media all and (max-width:700px){ .userListWrap .userListInner ul > li .priceBox .priceImg > img {height:280px;} }
@media all and (max-width:640px){ .userListWrap .userListInner ul > li .priceBox .priceImg > img {height:380px;} }
@media all and (max-width:570px){ .userListWrap .userListInner ul > li .priceBox .priceImg > img {height:310px;} }
@media all and (max-width:500px){ .userListWrap .userListInner ul > li .priceBox .priceImg > img {height:280px;} }
@media all and (max-width:410px){ .userListWrap .userListInner ul > li .priceBox .priceImg > img {height:220px;} }
@media all and (max-width:330px){ .userListWrap .userListInner ul > li .priceBox .priceImg > img {height:170px;} }


@media all and (max-width:1450px){
	.userListWrap .userListInner > h2 {padding:0 10px; font-size:1.2rem;}
	.userListWrap .userListInner > h2:after {left:10px;}
	.userListWrap .userListInner > table {width:99%;}
	.userListWrap .userListInner ul {width:100%; margin:0;}
}
@media all and (max-width:1180px){
	.userListWrap .userListInner ul > li .priceBox {margin:10px;}
	.userListWrap .userListInner ul > li .priceBox .priceImg > a > table tr td div {font-size:1.4rem;}
}
@media all and (max-width:980px){
	.userListWrap .userListInner ul > li .priceBox {margin:8px;}
	.userListWrap .userListInner ul > li .priceBox .priceImg > a > table tr td div {font-size:1.1rem;}
}
@media all and (max-width:800px){
	.userListWrap .userListInner ul > li {width:33.333%;}
}
@media all and (max-width:640px){
	.userListWrap .userListInner ul > li {width:50%;}
}