.promotion-page{width:100%; float:left; position:relative; }
.promotion-page .title-promotion{width:100%; float:left; position:relative;}
.promotion-page .title-promotion h4{display:block; font-weight:bold; margin:0; font-size:25px; padding-bottom:5px;}
.promotion-page .title-promotion span{display:block; width:100%; font-size:15px; opacity:.75}
.promotion-page .body-promotion{width:100%; float:left; position:relative;}

@media (max-width:767px) {
    .promotion-page{padding-bottom:65px; padding-top:50px;}
    .promotion-page .title-promotion{display:none;}
    .promotion-page ul.list-promotion li:first-child{margin-top:10px;}
    
}

ul.list-promotion{padding:0; list-style:none; clear:both;}
ul.list-promotion li{position:relative; margin-top:30px;}
ul.list-promotion li .inner .label-status{position:absolute; top:-11px; left:20px; z-index:5; line-height:23px; height:22px; font-size:13px; text-transform:uppercase; font-weight:500; letter-spacing:1px; padding: 0 10px; border-radius:4px; box-shadow: 0 0 0 2px rgba(255,255,255,1);}
ul.list-promotion li .inner .label-status.soon{background:#ffc107;}
ul.list-promotion li .inner .label-status.progress{background:#4bcb66;}
ul.list-promotion li .inner .label-status.end{background:#ea2b0f; color:#fff}
ul.list-promotion li .inner{width:100%; float:left; position:relative; transition:.3s; box-shadow: 0 0 10px rgba(0,0,0,0)}
ul.list-promotion li .inner:before{content:''; width:100%; height:calc(100% - 30px); border-radius:7px; position:absolute; left:0; bottom:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
ul.list-promotion li .nav-img{width:100%; float:left; position:relative; z-index:3; background:#fff; border-radius:7px;}
ul.list-promotion li .nav-img:before{content:''; width:100%; padding-top:42%; display:block;}
ul.list-promotion li .nav-img .box{width:100%; height:100%; position:absolute; top:0; left:0; overflow:hidden; border-radius:7px;}
ul.list-promotion li .nav-img .box img{width:inherit; height:inherit; object-fit:cover;}
ul.list-promotion li .info{width:100%; float:left; position:relative; padding:30px 20px 20px 20px; z-index:3;}
ul.list-promotion li .info .nav-name{display:block; text-decoration:none; color:#000; transition:.3s;}
ul.list-promotion li .info .nav-name:hover{color:var(--color2)}
ul.list-promotion li .info .nav-name h4{font-size:16px; font-weight:500; line-height:24px; margin:0;}
ul.list-promotion li .info p{-webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; line-height:24px; overflow: hidden; text-overflow: ellipsis;  display: -webkit-box; margin:10px 0 0 0; width:100%; float:left; color:rgba(0,0,0,.75)}

@media (max-width:767px) {
    ul.list-promotion li{border-top: 1px solid var(--border-color); margin:0; padding: 15px}
    ul.list-promotion li:first-child{border:none; padding-top:5px;}
    ul.list-promotion li .inner:before{display:none;}
    ul.list-promotion li .info{padding: 20px 0 0 0}
}


.promotion-detail-page{width:100%; float:left; position:relative;}
.promotion-detail-page .col-left{width:calc(100% - 350px); float:left; padding-right:40px;}
.promotion-detail-page .col-right{width:350px; float:right;}
.promotion-detail-page .col-right .title-promotion-more{width:100%; float:left; position:relative; font-size:22px; font-weight:bold;}
.promotion-detail-page .col-right ul li:first-child{margin-top:20px;}
.promotion-detail-page .head-promotion{width:100%; float:left; position:relative; border-bottom:1px solid rgba(0,0,0,.07); padding-bottom:30px; margin-bottom:30px;}
.promotion-detail-page .head-promotion .label-status{position:relative; z-index:5; line-height:23px; height:22px; font-size:13px; text-transform:uppercase; font-weight:500; letter-spacing:1px; padding: 0 10px; border-radius:4px; box-shadow: 0 0 0 2px rgba(255,255,255,1); display:block; float:left;}
.promotion-detail-page .head-promotion .label-status.soon{background:#ffc107;}
.promotion-detail-page .head-promotion .label-status.progress{background:#4bcb66;}
.promotion-detail-page .head-promotion .label-status.end{background:#ea2b0f; color:#fff}
.promotion-detail-page .head-promotion h3{margin:0; padding:0; font-size:28px; width:100%; float:left; margin-top:10px;}
.promotion-detail-page .head-promotion .time-range{width:100%; float:left; position:relative; display:flex; padding-top:10px;}
.promotion-detail-page .head-promotion .time-range .time-ele{padding-right:20px;}
.promotion-detail-page .head-promotion .time-range .time-ele span{font-size:14px; opacity:.8 }
.promotion-detail-page .head-promotion .time-range .time-ele span:after{content:':'; padding-right:10px;}
.promotion-detail-page .body-promotion{width:100%; float:left; position:relative; line-height:24px; }
.promotion-detail-page .body-promotion img{display:block; margin: 20px auto; max-width:100%!important; height:auto!important; border-radius:7px;}
.promotion-detail-page .wrap-tags{width:100%; float:left; position:relative; margin-top:40px; margin-bottom:20px;}
.promotion-detail-page .wrap-tags .title-tags{display:block; text-transform:uppercase; font-weight:900; color:var(--color2); margin-bottom:5px;}
.promotion-detail-page .wrap-tags .title-tags:before{font-family: "Font Awesome 5"; font-weight: 900; font-size:16px; margin-right:10px; content: "\f02c";}
.promotion-detail-page .wrap-tags a{line-height:32px; height:32px; border:1px solid var(--border-color); padding: 0 15px; display:inline-block; margin: 5px 5px 0 0; border-radius:5px; transition:.3s;}
.promotion-detail-page .wrap-tags a:hover{color:var(--color2)}

@media (max-width:991px) {
    .promotion-detail-page .col-left{width:100%; padding:50px 0 0 0;}
    .promotion-detail-page .col-right{width:100%; padding-top:40px;}
    .promotion-detail-page .col-right ul li:first-child{margin-top:30px;}
    .promotion-detail-page .head-promotion{padding-bottom:20px; margin-bottom:20px;}
}
@media (max-width:767px) {
    .promotion-detail-page{padding-bottom:65px; padding-top:10px;}
}