.recommendation-header::before, .recommendation-header::after{
    content: "";
    display: table;
}

.recommendation-header-bg{
    position: relative;
    width: fit-content;
    margin: 10px auto 24px;
    text-align: center;
    font-family: "Microsoft YaHei", SimSun, '\5b8b\4f53', sans-serif;
    border: 1px solid #322f35;
}

.recommendation-header-title{
    display: inline-block;
    font-size: 20px;
    color: #333;
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
    /*border: 2px solid #322f35;*/
}

.recommendation-body  ul{
    /*width: 1190px;*/
    max-width: 940px;
    margin: 0 auto;
    font-size: 0;
    list-style:none;
    padding: 0;
}

.recommendation-body li {
    display: inline-block;
    width: 299px;
    height: 335px;
    box-sizing: border-box;
    font-size: 14px;
    border: 1px solid #eee;
    padding: 21px;
    margin-left: -1px;
    margin-bottom: -1px;
}
.recommendation-body  a{
    color: #333;
    text-decoration: none;
}

.recommendation-body .img-box {
    width: 194px;
    height: 194px;
    line-height: 194px;
    text-align: center;
}

.recommendation-body  .img-box .goods-image {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}

.recommendation-body li a:hover .goods-image {
    opacity: .5;
}

.recommendation-body  .good-title {
    margin: 20px 0 15px 0;
    height: 38px;
    line-height: 20px;
    overflow: hidden;
}

.recommendation-body  .good-bottom {
    position: relative;
}

.good-bottom .good-price {
    font-family: verdana,arial;
}

.good-bottom  .good-price strong {
    font-weight: 700;
    font-size: 16px;
}

.good-bottom .good-from {
    position: absolute;
    right: 0;
    top: 0;
    color: #999;
}

/** 走马灯幻灯片 **/
.ads-wrapper {
    width: 75%;
    margin: 0 auto;
}

.ads-wrapper .owl-carousel {
    list-style: none;
    padding: 0;
}

.ads-wrapper li {
    height: 400px !important;
}

.ads-wrapper .owl-item:nth-child(2n) {
    background: #bd0000;
}

.ads-wrapper .owl-item img {
    opacity: 0.75;
}

.ads-wrapper .owl-item img {
    display: block;
    width: 100%;
    height: auto;
}

@media screen and (max-width: 640px) {
    .ads-wrapper  {
        width: 100%;
    }
}

/** 另一种走马灯 **/

.ads-wrapper .animated  {
    -webkit-animation-duration : 3s  ;
    animation-duration : 3s  ;

    -webkit-animation-delay : 500ms  ;
    animation-delay : 500ms  ;
}

.ads-wrapper .animate-out {
    -webkit-animation-delay : 0ms  ;
    animation-delay : 0ms  ;
}

.ads-wrapper h4 {
    font-size: 28px;
}

.ads-wrapper p {
    width: 50%;
    text-align: center;
    margin: 0 auto 20px;
}

.ads-wrapper .owl-item {
    display: table;
}

.ads-wrapper .owl-carousel .item {
    height: 40vh;
    background-color: #fc0;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.ads-wrapper .btn {
    display: inline-block;
    line-height: 35px;
    height: 35px;
    text-align: center;
    padding: 0 20px;
    width: auto;
    background-color: #000;
    text-decoration: none;
    color: #fff;
}