.xs-box{
    margin-top: 53px!important;
}
.xs-box .xsswiper {
    position: relative;
    height: 420px;
    margin-left: auto;
    margin-right: auto;
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    margin-top: 0px;
    border-top: 0;
    /* border-left: 1px solid gainsboro; */
    box-sizing: border-box;
}

.xs-box .xsswiper .swiper-slide {
    padding: 0!important;
    margin: 0!important;
    text-align: center;
    width: 399px!important;
    font-size: 18px;
    background: #fff;
    height: 209px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    flex-direction: row;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    border: 1px solid #e7e7e7;
    border-right: 1px solid #e7e7e7;
    border-top: none;
    border-left: none;
}
.xs-box .xs-header{
    position: relative;
    height:60px;
    width: 1200px;
    background: url("../images/index/headerbg.png");
    margin: 0 auto
}
.xs-box .xsleft{
  height: 100%;
  width: 40%;
  float: left;
}
.xs-box .xsleft a{
    display: block;
    margin-left: 15px;
    margin-top: 28px;
    position: relative;
}
.xs-box .xshot{
    position: absolute;
    top: 5px;
    left: 9px;
}
.xs-box .xsleft a img{
    width: 100%;
    width: 144px;
    height: 144px;
    transition: all .4s ease-in-out;
}
.xs-box .xsleft a img:hover{
    width: 100%;
    width: 144px;
    height: 144px;
    transform:scale(1.1);
}
.xs-box .xsright{
      /* width: 70%;
      height: 100%; */
      width: 60%;
      height: 100%;
}
.xs-box .xsinfo{
      width: 212.8px;
      margin-left: 14px;
      margin-top: 32px;
      font-size: 14px;
      text-align: left;
      height: 35px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
}

.xs-box .xsprogress{
      width: 152.8px;
      border: 1px solid;
      margin-left: 13px;
      background: rgba(173, 173, 173, 0.63);
      border-radius: 12px;
      color: white;
      font-size: 12px;
      margin-top: 13px;
      position: relative;
      height: 16px;
}
.xs-box .sxbar{
      border: 1px solid;
      margin-left: 31px;
      background: #f85435;
      /* border-radius: 12px; */
      border-top-left-radius: 12px;
      border-bottom-left-radius: 12px;
      color: white;
      font-size: 13px;
      margin-top: 12px;
      position: absolute;
      height: 16px;
      top: -12px;
      left: -31px;
      border: none;
}
.xs-box .sxbarname{
    text-align: center;
    position: relative;
    /* left: 108px; */
    color: #4e4e4e;
    margin-left: 160px;
    white-space: nowrap;
}
.xs-box .xsprice{
      /* color: #f85435;
      font-size: 14px;
      margin-top: 8px;
      margin-left: -69px; */
      color: #f85435;
      font-size: 14px;
      margin-top: 8px;
      margin-left: 5px;
      display: inline-block;
      text-align: left;
      width: 213px;
}
.xs-box .xsprice i{
      font-style: normal;
      font-size: 20px;
      font-weight: 600;
}
.xs-box .xsprice span{
      color: #cdcdcd;
      text-decoration: line-through;
}
.xs-box .xsbuy{
      width: 100px;
      height: 30px;
      background: #f85435;
      margin-left: 15px;
      border-radius: 18px;
      font-size: 14px;
      color: white;
      line-height: 30px;
      margin-top: 9px;
}
.xs-box .clearfix:after{
      clear: both;
      content: ".";
      display: block;
      height: 0;
      line-height: 0;
      visibility: hidden;
}

.xs-box .xsmaq{
    position: absolute;
    top: 18px;
    left: 189px;
    width: 280px;
    height: 24px;
    line-height: 26px;
    background: rgba(255, 255, 255, 0.85);
    color: #ca3215;
    border-radius: 32px;
    overflow: hidden;
    cursor: pointer;
    white-space: nowrap;
}
.xs-box .xsmaq li{
    margin-left: 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #716e6e;
}

.xs-box .timer-box{
    position: relative;
    right: 31px;
    width: 170px;
    height: 27px;
    color: white;
    left: 1016px;
    top: 20px;
}
.xs-box .timer-box .hours{
       margin-top: 36px;
       height: 26px;
       width: 29px;
       display: inline-block;
       position: absolute;
       top: -38px;
       text-align: center;
       left: 3px;
       font-size: 16px;
       background: #bc0000;
       border-radius: 6px;
       line-height: 26px;
}
.xs-box .timer-box .minutes{
        height: 26px;
        width: 29px;
        position: absolute;
        left: 61px;
        text-align: center;
        font-size: 16px;
        background: #bc0000;
        border-radius: 6px;
        line-height: 26px;
        top: -2px;
}
.xs-box .timer-box .seconds{
    margin-top: 36px;
    position: absolute;
    height: 26px;
    width: 28px;
    top: -37px;
    left: 120px;
    text-align: center;
    font-size: 16px;
    background: #bc0000;
    border-radius: 6px;
    line-height: 26px;
    top: -38px;
}
.xs-box .xsnext{
    background: url(../img/rightArrow1.png)!important;
}
.xs-box .xspre{
    background: url(../img/leftArrow1.png)!important;
}
.xs-box .xsend{
    width: 100px;
    height: 30px;
    background: #bfbfbf;
    margin-left: 15px;
    border-radius: 18px;
    font-size: 14px;
    color: white;
    line-height: 30px;
    margin-top: 9px;
}
.xs-box .time-title{
  display: inline-block;
    margin-left: -214px;
    font-size: 15px;
}
.xs-box .timer-box i{
  font-style: normal;
}
.xs-box .hours+i{
  position: absolute;
  left: 40px;
  font-size: 15px;
}
.xs-box .minutes+i{
  position: absolute;
  left: 97px;
  font-size: 15px;
}
.xs-box .seconds+i{
  position: absolute;
  left: 154px;
  font-size: 15px;
}
.xs-box .days{
    margin-top: 36px;
    height: 26px;
    width: 29px;
    display: inline-block;
    position: absolute;
    top: -38px;
    text-align: center;
    left: -55px;
    font-size: 16px;
    background: #bc0000;
    border-radius: 6px;
    line-height: 26px;
}
.xs-box .days+i{
    position: absolute;
    left: -20px;
    font-size: 15px;
}
.xs-box .xsswiper:before {
    width: 1px;
    height: 420px;
    content: '';
    background:#e7e7e7;;
    z-index: 10000;
    left: 0;
    position: absolute;
}
.xs-box .xslink{display:block; position:absolute; background:#000; width:400px; height:96px; top:42px; left:10px; opacity:0;}

/*限时抢购2019新年风格*/
.xs-box{background:url(http://www.upetmart.com/templates/default/skin/1901/2019qgbg.png) top center no-repeat; z-index:11; position:relative; height:574px; width:1200px; margin:20px auto 0 !important;}
.xs-box .xs-header{background:none; height:142px;}
.xs-box .xsmaq{top:72px; left:422px; background:rgba(244,147,0,0.0);}
.xs-box .xsmaq li{color:#fff9b8;; font-size:13px;}
.xs-box .timer-box{top:73px;}
.xs-box i,.xs-box .time-title{opacity:0; }
.xs-box .xsprice i{opacity:1; font-size:18px; margin:0 14px 0 4px}
.xs-box .timer-box .days,.xs-box .timer-box .hours,.xs-box .timer-box .minutes,.xs-box .timer-box .seconds{background:none; font-size:20px;color:#fff9b8;}
.xs-box .timer-box .days{left:-115px}
.xs-box .timer-box .hours{left:-45px}
.xs-box .timer-box .minutes{left:24px}
.xs-box .timer-box .seconds{left:96px}
.xs-box .xsswiper{width: 1180px;height: 419px; border-radius:24px;}
.xs-box .xsswiper .swiper-slide{width:392px !important}
.xs-box .xslink{display:block; position:absolute; background:#000; width:400px; height:96px; top:42px; left:10px; opacity:0;}