/*通用样式*/

.line5 {
    height: 5px !important;
}

.line10 {
    height: 10px !important;
}

.line20 {
    height: 20px !important;
}
.border-radius-10{border-radius:10px;}

.margin-0-13{margin: 0 13px;}
/*分割线*/

.divide-line {
    width: 100%;
    height: 10px;
    background-color: #f5f5f5;
}

/*标题样式*/


/*默认样式*/

.module-title {
    height: 40px;
    line-height: 40px;
    color: #000;
    font-size: 16px;
    padding-left:30px;
    font-weight: inherit;
    position: relative;
    /*border-bottom: 1px solid #ebebeb;*/
}

.module-title::before {
    height: 16px;
    width: 3px;
    display: block;
    content: "";
    position: absolute;
    top: 12px;
    left:20px;
    border-radius: 5px;
    background: #fe9d53;
}

.module-title .more {
    float: right;
    margin-right: 15px;
    height: 40px;
    line-height: 40px;
    color: #666;
    font-size: 15px;
}

/*样式2*/

.module-title-1 {
    height: 40px;
    line-height: 40px;
    color: #666;
    font-size: 16px;
    text-align: center;
    font-weight: inherit;
    position: relative;
    border-bottom: 1px solid #ebebeb;
}

.module-title-1 span {
    display: inline-block;
    z-index: 1;
    position: relative;
    background-color: #fff;
    padding: 0 8px;
    height: 39px;
}

.module-title-1::before {
    height: 2px;
    width: 80%;
    display: block;
    content: "";
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #d8505c;
}

.module-title-1 .more {
    display: none;
}

/*样式3*/

.module-title-2 {
    height: 40px;
    line-height: 40px;
    color: #666;
    font-size: 16px;
    text-align: center;
    font-weight: inherit;
    position: relative;
    border-bottom: 1px solid #ebebeb;
}

.module-title-2 span {
    display: inline-block;
    z-index: 1;
    position: relative;
    background-color: #fff;
    padding: 0 8px;
    height: 39px;
}

.module-title-2::before {
    height: 3px;
    width: 40%;
    display: block;
    content: "";
    position: absolute;
    bottom: 18px;
    left: 0;
    right: 0;
    margin: 0 auto;
    background: #d8505c;
}

.module-title-2 .more {
    display: none;
}

/*样式4*/

.module-title-3 {
    height: 40px;
    line-height: 40px;
    color: #666;
    font-size: 16px;
    padding-left: 15px;
    font-weight: inherit;
    position: relative;
    border-bottom: 1px solid #ebebeb;
}

.module-title-3::before {
    height: 100%;
    width: 4px;
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: #d8505c;
}

.module-title-3 .more {
    float: right;
    margin-right: 15px;
    height: 40px;
    line-height: 40px;
    color: #666;
    font-size: 15px;
}

/*加载更多*/

.list-more {
    display: block;
    border-top: 1px solid #dcdcdc;
    padding: 10px 0;
}

.list-more a {
    display: block;
    margin: 0 auto;
    width: 40%;
    height: 36px;
    line-height: 36px;
    text-align: center;
    color: #666;
    border: 1px solid #dcdcdc;
}

.wrapper {
    min-width: 300px;
    max-width: 640px;
    margin: 0 auto;
}

/*通用样式*/

/*头部模块*/

.header {
    margin: 0 auto;
    height: 40px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background: transparent;
}

.header .header_box {
    position: relative;
    background: rgba(201, 21, 35, 1);
}

.header a.icon-left {
    position: absolute;
    top: 0;
    left: 0;
    height: 40px;
    width: 50px;
    font-size: 26px;
    text-align: center;
    line-height: 40px;
    color: #fff;
}

.header a.icon-right {
    position: absolute;
    top: 0;
    right: 0;
    height: 40px;
    width: 50px;
    font-size: 18px;
    text-align: center;
    line-height: 40px;
    color: #fff;
}

.header .title {
    width: 100%;
    height: 40px;
    padding-left: 60px;
    padding-right: 60px;
    text-align: center;
    font-size: 16px;
    line-height: 40px;
    color: #fff;
}

/*头部模块*/


/*banner模块*/

.banner {
    margin: 0 auto;
    width: 100%;
}

.banner .swiper-container {
    width: 100%;
    height: 180px;
}

.banner .swiper-slide {
    background-position: center !important;
    background-size: cover !important;
}

.banner .swiper-pagination-bullet-active {
    background: rgba(255, 255, 255, .8);
}

/*banner模块*/


/*导航管理模块*/

.nav {
    background: #fff;
    margin-top: 10px;
}

.nav ul {
  /*  padding: 5px 10px;*/
}

.nav ul li {
    width: 25%;
    text-align: center;
    float: left;
}

.nav ul li a {
    display: block;
    margin: 0 auto;
    width: 80%;
    height:80%;
    margin-top: 15px;
}

.nav ul li img {
    width: 45px;
    height:45px;
    margin-bottom:15px;
}

.nav ul li p {
    font-size: 12px;
    line-height: 12px;
    color: #000;
    margin-bottom: 15px;
}

/*导航管理模块*/


/*公告栏模块*/

.announcement {
    /*margin: 0 auto;
    width: 100%;*/
    background: #fff;
}

.announcement .info {
    position: relative;
}

.announcement .info .icon-left {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 40px;
    width: 40px;
    line-height: 40px;
    text-align: center;
    color:#fe9d53;
}

.announcement .info .content {
    height: 40px;
    line-height: 40px;
    padding-left: 40px;
    overflow: hidden;
}

.announcement .info .content ul li {
    display: block;
    width: 100%;
    color: #666;
    white-space: nowrap;  
    text-overflow: ellipsis;  
    overflow: hidden; 
}

/*公告栏模块*/


/*优惠券模块*/

.coupon {
    background-color: #fff;
}

.coupon ul {
    ;
    padding: 10px 0;
}

.coupon ul li {
    display: block;
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
    z-index: 1000;
}

.coupon ul li:last-child {
    margin-bottom: 0;
}

.coupon .stamp {
    margin: 0 auto;
    width: 80%;
    height: 100px;
    padding: 0 10px;
    position: relative;
    overflow: hidden;
    z-index: 1000;
}

@media screen and (max-width:370px) {
    .coupon .stamp{
        width: 90%;
    }
}

.coupon .stamp:before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10px;
    right: 10px;
    z-index: -1;
}

.coupon .stamp i {
    position: absolute;
    left: 20%;
    top: 45px;
    height: 190px;
    width: 390px;
    background-color: rgba(255, 255, 255, .15);
    transform: rotate(-30deg);
}

.coupon .stamp .par {
    float: left;
    padding: 13px 0 13px 15px;
    width: 45%;
    border-right: 2px dashed rgba(255, 255, 255, .3);
    text-align: left;
}

.coupon .stamp .par p {
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.coupon .stamp .par span {
    font-size: 30px;
    color: #fff;
    margin-right: 5px;
    line-height: 30px;
}

.coupon .stamp .par .sign {
    font-size: 20px;
    vertical-align: middle;
}

.coupon .stamp .par sub {
    position: relative;
    top: -5px;
    color: rgba(255, 255, 255, .8);
}

.coupon .stamp .copy {
    display: inline-block;
    padding: 10px 0 8px 15px;
    vertical-align: text-bottom;
    color: rgb(255, 255, 255);
    text-align: center;
    line-height: initial;
}

.coupon .stamp .copy p {
    font-size: 14px;
    margin-top: 5px;
    line-height: 20px;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.coupon .stamp .copy p span{
    font-size: 13px;
    line-height: 16px;
}

.coupon .stamp-yellow {
    background: radial-gradient(rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 5px, #F39B00 5px);
    background-size: 15px 15px;
    background-position: 9px 3px;
}

.coupon .stamp-yellow:before {
    background-color: #F39B00;
}

.coupon .stamp-red {
    background: radial-gradient(transparent 0, transparent 5px, #D24161 5px);
    background-size: 15px 15px;
    background-position: 9px 3px;
}

.coupon .stamp-red:before {
    background-color: #D24161;
}

.coupon .stamp-green {
    background: #7EAB1E;
    background: radial-gradient(transparent 0, transparent 5px, #7EAB1E 5px);
    background-size: 15px 15px;
    background-position: 9px 3px;
}

.coupon .stamp-green:before {
    background-color: #7EAB1E;
}

.coupon .stamp-blue {
    background: #50ADD3;
    background: radial-gradient(transparent 0, transparent 5px, #50ADD3 5px);
    background-size: 15px 15px;
    background-position: 9px 3px;
}

.coupon .stamp-blue:before {
    background-color: #50ADD3;
}

@media screen and (max-width:370px) {
    .coupon .stamp .par {
        width: 130px;
    }
    .coupon .stamp .copy {
        width: 130px;
        font-size: 18px;
    }
}

/*优惠券模块*/


/*产品展示模块*/

.products {
    margin: 0 auto;
    background: #fff;
}

.products ul li {
    width: 50%;
    text-align: center;
    float: left;
    margin-bottom: 10px;
}

.products .list li:nth-child(2n) {
    padding-left: 7.5px;
    padding-right: 15px;
}

.products .list li:nth-child(2n+1) {
    padding-right: 7.5px;
    padding-left: 15px;
}

.products ul li .img_box {
    width: 100%;
    text-align: center;
    margin-top: 10px;
    position: relative;
}

.products .list li:nth-child(2n) .img_box::before{
   content: " ";
   position: absolute;
   top: 0;
   left: -7.5px;
   width: 1px;
   height: 100%;
   background-color: #dcdcdc;
}

.products ul li:last-child .img_box {
    border-right: 0;
}

.products ul li .img_box img {
    width: 78%;
}

.products ul li .name {
    text-align: center;
    font-size: 15px;
    padding: 10px 0 5px 0;
    color: #666;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
}

.products ul li .bottom {
    padding: 0 20px;
    height: 30px;
}

.products ul li .bottom .price {
    /*float: left;*/
    color: #d8505c;
    font-size: 16px;
    line-height: 30px;
}

.products ul li .bottom .num {
    float: right;
    color: #666;
    font-size: 14px;
    line-height: 30px;
}

@media screen and (max-width:370px) {
    .products ul li .bottom .price {
        font-size: 13px;
    }
    .products ul li .bottom .num {
        font-size: 13px;
    }
}

/*产品展示模块*/


/*新闻列表模块*/

.news {
    /*margin: 0 auto;*/
    background: #fff;

}
.news ul{
    margin: 0 20px;
    overflow: hidden;
}
.news ul li {
    width: 100%;
    overflow: hidden;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f3f4f6;
}

.news ul li:last-child {
    border-bottom: 0;
}

.news ul li .left {
    width: 30%;
    float: left;
}

.news ul li .left .img {

}
.news ul li .left .img img{
    display: block;
    width:100%;
    height:100%;
    object-fit: cover;
}
.news ul li .right {
    width: 65%;
    float: right;
}

.news ul li .right p.title {
    width: 100%;
    font-size: 14px;
    color: #333;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    overflow: hidden;
    line-height: 20px;
    font-weight: 700;
}

.news ul li .right p.content {
    width: 100%;
    font-size: 12px;
    line-height: 18px;
    color: #666;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp:2;
    overflow: hidden;
}

.news ul li .right p.bottom {
    margin-top: 3px;
    padding-right: 3px;
    height: 20px;
    line-height: 20px;
    color: #666;
    font-size: 12px;
}

.news ul li .right p.bottom .category{
    float: left;
}

.news ul li .right p.bottom .time{
    float: right;
}
@media screen and (max-width:600px){
    .news ul li .left .img{
        height:107px;
    }
}
@media screen and (max-width:540px){
    .news ul li .left .img{
        height:95px;
    }
}
@media screen and (max-width:480px){
    .news ul li .left .img{
        height:83px;
    }
}
@media screen and (max-width:414px){
    /*首页文章*/
    .news ul li .left .img{
        height:70px;
    }
}
/*苹果12-1170宽*/
@media screen and (max-width:412px){
    .news ul li .left .img{
        height:69px;
    }
}
@media screen and (max-width:411px){
    .news ul li .left .img{
        height:69px;
    }
}
@media screen and (max-width:384px){
    .news ul li .left .img{
        height:64px;
    }
}
@media screen and (max-width:375px){
    .news ul li .left .img{
        height: 62px;
    }
}
@media screen and (max-width:360px){
    .news ul li .left .img{
        height: 59px;
    }
}
@media screen and (max-width:320px){
    .news ul li .left .img{
        height:51px;
    }
    .news ul li .right p.title{
        margin-bottom: 0px;
    }
}
/*华为mate20pro*/
@media screen and (max-width:280px){
    .news ul li .left .img{
        height:47px;
    }
}
/*新闻列表模块*/