.prd-container { margin: 60px 0; }
.prd-container hgroup {
    width: 270px; padding: 0 20px 15px; margin: 0 auto 20px;
    border-bottom: 1px solid #333;
}
.prd-container hgroup h2 {
    font-size: 14px; color: #888; text-align: center;
}
.prd-container hgroup h3 {
    margin: 5px 0 0;
    font-size: 23px; text-align: center;
}

.prd-container .prd-list:after { content: ''; display: block; clear: both; }
.prd-container .prd-list ul li {
    float: left; width: calc(20% - 20px); height: 400px;
    margin: 5px; padding: 5px;
}
.prd-container .prd-list ul li > a { display: block; position: relative; }
.prd-container .prd-list ul li > a:hover .prd-thumb {
    background-size: 150%;
}
.prd-container .prd-list ul li > a .bmai-mark {
    position: absolute; top: 7px; left: 7px; z-index: 1;
    width: 30px; height: 30px;
}
.prd-container .prd-list ul li > a .prd-thumb {
    height: 246px; width: auto; position: relative;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    border: 1px solid #eee;
    -webkit-transition: background-size .2s ease;
    -moz-transition:    background-size .2s ease;
    -ms-transition:     background-size .2s ease;
    -o-transition:      background-size .2s ease;
    transition:         background-size .2s ease;
}
.prd-container .prd-list ul li > a .prd-thumb:after {
    content: ''; display: block; width: 50px; height: 50px; z-index: -1;
    position: absolute; top: calc(50% - 25px); left: calc(50% - 25px);

    border: 2px solid transparent; border-radius: 50%;
    border-color: transparent var(--point-main) transparent var(--point-main);

    -webkit-animation:  rotate-loading 1s linear 0s infinite normal;
    -moz-animation:     rotate-loading 1s linear 0s infinite normal;
    -o-animation:       rotate-loading 1s linear 0s infinite normal;
    animation:          rotate-loading 1s linear 0s infinite normal;
}
.prd-container .prd-list ul li > a > h2 {
    /*font-size: 13px; font-weight: 700;*/
    padding: 10px 0; margin: 0 0 10px;
    border-bottom: 1px solid #eee;
}
.prd-container .prd-list ul li > a > h2 > span { font-size: 12px; font-weight: 400; }

.prd-container .prd-list ul li > a .event-banner img {
    width: auto; height: 19px;
}
.prd-container .prd-list ul li > a .event-banner span {
    position: relative; top: -4px; left: 4px;
    font-size: 12px; color: #555;
}




.prd-container .prd-list ul li > a .price-container:after { content: ''; display: block; clear: both; }
.prd-container .prd-list ul li > a .price-container {
    margin: 10px 0 0;
}
.prd-container .prd-list ul li > a .price-container .price-per {
    float: left; margin: 0 10px 0 0;
    font-size: 35px; font-weight: 700; color: #d50000; letter-spacing: -.04em;
}
.prd-container .prd-list ul li > a .price-container .price-group {
    float: left; position: relative; top: -1px;
}
.prd-container .prd-list ul li > a .price-container .price-group h2 {
    font-family: 'Verdana' !important; font-size: 12px;
    color: #999; text-decoration: line-through;
}
.prd-container .prd-list ul li > a .price-container .price-group h3 {
    font-size: 18px; font-weight: 700;
}

.prd-container .prd-list ul li > a .price-container > h4 {
    margin: 24px 0 0;
    font-size: 18px; font-weight: 700;
}
.prd-container .prd-list ul li > a .price-container > h5:before {
    content: ''; display: block; clear: both; height: 6px;
}
.prd-container .prd-list ul li > a .price-container > h5 {
    font-size: 14px; font-weight: 500; color: #068035; 
}



@media screen and (max-width: 1300px) {
    .prd-container .prd-list ul li { width: calc(25% - 20px); }
}
@media screen and (max-width: 1100px) {
    .prd-container .prd-list ul li { width: calc(33.33333% - 20px); }
}
@media screen and (max-width: 768px) {
    .prd-container .prd-list ul li { width: calc(50% - 20px); }
}
@media screen and (max-width: 550px) {
    .prd-container .prd-list ul li { width: calc(100% - 20px); }
}
@media screen and (max-width: 340px) {
    .prd-container hgroup { width: calc(100% - 40px); }
}