/* focus news  */
.focus-news img{ width: 100%; height: 100%; object-fit: cover;}
.slide-item{ position: relative;}
.slide-item span{ position: absolute; width: 100%; text-align: center; left: 0; bottom: 30px; color: #FFF; font-size: 16px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap; }
.focus-news .layui-carousel-ind{ position: absolute; width: 100%; top: auto; bottom: 5px;}
.focus-news .layui-carousel-ind ul{ background-color: transparent;}
.focus-news .layui-carousel-ind ul li {
    width: 6px !important;
    height: 6px !important;
    background-color: #fff !important;
    border: 1px solid #CCC;
}
.focus-news .layui-carousel-ind ul li.layui-this { background-color: var(--color-red) !important; border-color: var(--color-red) !important;}
.focus-news .slide-item.ad::after{ content: 'AD'; color: #FFF; position: absolute; right: 0; bottom: 0;  padding-left: 2px; padding-right: 2px; background-color: rgba(0, 0, 0, 0.4); font-size: 10px;}

/* article list  */

.category-name{ 
    background-color: #FFF;
    padding-bottom: 10px;
    border-bottom: 1px solid #EEE;
    font-size: 24px;}

.ellipsis-multiline {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
  }

.art-list{ padding: 30px; background-color: #FFF; }
.list-item{ border-bottom: 1px solid #E4E8EA; padding: 20px 0;}
.list-item:nth-child(1){padding-top: 0;}
.list-item a{ display: flex; width: 100%; color: #000;}
.item-img{ width: 250px; height: 170px;}
.item-img img{ width: 100%; height: 100%; object-fit: cover;  border-radius: var(--border-radius);}
.item-title{ flex: 1; margin-left: 10px; display: flex; justify-content: space-between; flex-direction: column;}
.item-title p:nth-child(1){ font-size: 20px; font-weight: bold; display: flex; align-items: center; flex-wrap: wrap;}
.list-item .istop{ position: relative;}
.list-item .istop::after{ content: '置頂'; position: absolute; right: 0; bottom: 0; font-size: 10px; background-color: var(--color-red); padding: 0 5px; color:#FFF; margin-left: 10px;}
.item-footer{ display: flex; justify-content: space-between; align-items: center;}
.item-footer span{font-size: 12px; color: #888;}


/* only-title  */
.only-title p:nth-child(2){ margin-top: 10px;}

/* ad  */
.list-ad{margin: 0 0; padding: 0;}
.list-ad a{ position: relative;}
.list-ad a::before{ content: 'AD'; position: absolute; background-color: rgba(0, 0, 0, 0.4); color: #FFF; font-size: 10px; right: 0; bottom: 0; }
.list-ad img{ width: 100%; object-fit: cover; border-radius: var(--border-radius);}

/* lay-page */
.pagesize{ text-align: center; padding-bottom: 20px; background-color: #FFF;}
.home-main{ margin: 20px 0; border: 1px solid #EEE;}

.popup-ad{ position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 10; background-color: rgba(0, 0, 0, 0.4);}
.popup-ad>div{ position: absolute; width: 758px; left: 50%; top: 20%; margin-left: -379px; }
.popup-ad img{ display: block; width: 100%;}
.popup-ad i{ display: flex; cursor: pointer; align-items: center; justify-content: center; width: 22px; height: 22px; font-size: 18px;  position: absolute; top: -22px; right: -22px; border: 1px solid #f70d0d; color: #f70d0d; background-color: #FFF; border-radius: 50%;}

.scroll-container {
    overflow: hidden;
    width: 100%;
    height: 40px;
    position: relative;
    border-bottom: 2px solid var(--color-red);
}
/* marquee  */
.scroll-content {
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    display: flex;
    animation: scroll 20s linear infinite;
}
.scroll-content li{ white-space: nowrap; margin-right: 20px;     list-style-type: disc;
    margin-left: 1em;}
.scroll-content li a{ color: var(--color-red); display: block; padding: 10px 0; font-size: 16px;}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

@media screen and (max-width: 640px) {
    .home-main{ padding-top: 70px;    margin: 0;     border: none;}
    .category-name {
        font-size: 20px;
    }
    .art-list {
        padding: 15px;

    }
    .item-img {
        width: 40%;
        height: 100px;
    }
    .item-title p:nth-child(1) {
        font-size: 16px;
    }
    .list-ad {
        margin: 0 -15px;
        border-top: 10px solid #edf0f0; border-bottom: 10px solid #edf0f0;
    }
    .popup-ad>div{ width: 80%; left: 10%; top: 20%; margin-left: 0; }
}