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

@media print, screen and (min-width: 769px) {

.toplist ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
margin: 0!important;
}
.toplist li {
width: 31%;
background-color: #fff;
margin-bottom: 40px;
}
.toplist li img {
width: auto;
}
.toplist .box {
padding: 20px;
}
.toplist .box ol {
display: flex;
justify-content:flex-start;
}
.toplist .box ol li {
padding-left: 12px;
padding-right: 12px;
font-size: 14px;
color: #fff;
margin-right: 10px;
margin-bottom: 5px!important;
}
.toplist .box ol .new {
background-color: #CB3302;
width: 60px;
}
.toplist .box ol .kind {
background-color: #4D872B
}
.toplist .box .photo {
width: 100%;
height: 225px;
overflow: hidden;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 5px;
}
.toplist .box .photo img {	
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
.toplist .box .thumb {
}
.toplist .box .thumb li {
width: 49%;
margin-bottom: 5px!important;
}
.toplist .box .ol {
overflow: hidden;
margin: 0px;
}
.toplist .box .ol .add {
width: 60%;
float: left;
text-align: left;
margin: 0;
}
.toplist .box .ol .price {
width: 40%;
float: right;
margin: 0;
}
.toplist .box .ol .price span {
font-size: 24px;
color: #CB3302;
}
.toplist .box .ol .access {
clear: both;
text-align: left;
}
.toplist .box .btn a {
color: #fff;
width: 30%;
float: right;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
display: block;
background-color: #989898;
border-radius: 4px;
margin-bottom: 20px;
transition : all 0.3s ease 0s;
}
.toplist .box .btn a:hover {
background-color: #CC1E1E;
}

}

@media screen and (min-width: 521px) and (max-width: 768px) {

.toplist ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
margin: 0!important;
}
.toplist li {
width: 31%;
background-color: #fff;
margin-bottom: 40px;
}
.toplist .box {
padding: 20px;
}
.toplist .box ol {
display: flex;
justify-content:flex-start;
}
.toplist .box ol li {
padding-left: 12px;
padding-right: 12px;
font-size: 14px;
color: #fff;
margin-right: 10px;
margin-bottom: 5px!important;
}
.toplist .box ol .new {
background-color: #CB3302;
width: 60px;
}
.toplist .box ol .kind {
background-color: #4D872B
}
.toplist .box .photo {
width: 100%;
height: 225px;
overflow: hidden;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 5px;
}
.toplist .box .photo img {	
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
.toplist .box .thumb {
}
.toplist .box .thumb li {
width: 49%;
margin-bottom: 5px!important;
}
.toplist .box .ol {
overflow: hidden;
margin: 0px;
}
.toplist .box .ol .add {
width: 60%;
float: left;
text-align: left;
margin: 0;
}
.toplist .box .ol .price {
width: 40%;
float: right;
margin: 0;
}
.toplist .box .ol .price span {
font-size: 24px;
color: #CB3302;
}
.toplist .box .ol .access {
clear: both;
text-align: left;
}
.toplist .box .btn a {
color: #fff;
width: 30%;
float: right;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
display: block;
background-color: #989898;
border-radius: 4px;
margin-bottom: 20px;
transition : all 0.3s ease 0s;
}
.toplist .box .btn a:hover {
background-color: #CC1E1E;
}

}

@media screen and (max-width: 520px) {

.toplist ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
position: relative;
margin: 0!important;
}
.toplist li {
width: 100%;
background-color: #fff;
margin-bottom: 40px;
}
.toplist .box {
padding: 20px;
}
.toplist .box ol {
display: flex;
justify-content:flex-start;
}
.toplist .box ol li {
padding-left: 12px;
padding-right: 12px;
font-size: 14px;
color: #fff;
margin-right: 10px;
margin-bottom: 5px!important;
}
.toplist .box ol .new {
background-color: #CB3302;
width: 60px;
}
.toplist .box ol .kind {
background-color: #4D872B
}
.toplist .box .photo {
width: 100%;
height: 225px;
overflow: hidden;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 5px;
}
.toplist .box .photo img {	
width:auto;
height:auto;
max-width:100%;
max-height:100%;
}
.toplist .box .thumb {
}
.toplist .box .thumb li {
width: 49%;
margin-bottom: 5px!important;
height: 124px;
}
.toplist .box .thumb li img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.toplist .box .ol {
overflow: hidden;
margin: 0px;
}
.toplist .box .ol .add {
width: 60%;
float: left;
text-align: left;
margin: 0;
}
.toplist .box .ol .price {
width: 40%;
float: right;
margin: 0;
}
.toplist .box .ol .price span {
font-size: 24px;
color: #CB3302;
}
.toplist .box .ol .access {
clear: both;
text-align: left;
}
.toplist .box .btn a {
color: #fff;
width: 30%;
float: right;
padding-left: 20px;
padding-right: 20px;
padding-top: 5px;
padding-bottom: 5px;
display: block;
background-color: #989898;
border-radius: 4px;
margin-bottom: 20px;
transition : all 0.3s ease 0s;
}
.toplist .box .btn a:hover {
background-color: #CC1E1E;
}

}