.article-content {
    position: relative;
    width: 22.8125vw;
    height: auto;
    border-bottom: solid 2px #2e4565;
    margin: 4.8vw 2.26vw 0 2.26vw;
    padding-bottom: 2vw;
    overflow: hidden;
}

.article-content p {
    font-family: 'Noto Sans TC', sans-serif;
}

.post_counter{
    font-family: 'TimesNewRoman';
    font-size: 3.0208333vw;
    font-weight: bold;
    font-stretch: normal;
    font-style: italic;
    line-height: 1.03;
    letter-spacing: normal;
    text-align: left;
    color: #2e4565;
}

.post_icon{
    position:absolute;
    top: 6.5104166666vw;
    left: 42%;
    width: 15.1%;
    height: 12.6%;
    opacity: 1;    
    background-color: #2e4565;
    border-radius: 1vw;
    transition: 0.4s linear;
    display: flex;
    justify-content: center;
    align-items: center;
}

.post_icon > img{
    position: absolute;
    width: 1.927vw;
    height: auto;
    transition: 0.4s ease-in-out;
}

.post_icon > div{
    position: absolute;
    display: flex;
    align-items: center;
    width: 60%;
    justify-content: space-between;
    opacity: 0;
    transition: 0.4s ease-in-out;
}

.post_icon_hover_dots{
    display: inline-block;
    width: 0.3vw;
    height: 0.3vw;
    background-color: #ffbb00;
    border: solid .1041666vw #2e4565;
    border-radius: 45%;
}

.border-anim{
    position: absolute;
    top:11.2%;
    right: 0;
    width: 24.4%;
    height: 22.5%;
    border-top-right-radius: 5px;
    border-top: solid 2px #2e4565;
    border-right: solid 2px #2e4565;
    transition: width 800ms, height 800ms ease-in-out;
}

.article-meta{
    position: relative;
    transition: 500ms cubic-bezier(.52,.06,.42,.86);
    display: flex;
    flex-direction: column;
    transition: 450ms ease-in-out;
    display: flex;
    flex-direction: row;
    width: fit-content;
    align-items: center;
}

.post_time{
    margin-left: 5px; 
    color: #2e4565;
    font-family: 'TimesNewRoman';
    font-size: 1.198333333vw;
    line-height: 1.67;
    text-align: left;
    font-weight: bold;
    letter-spacing: normal;
}

.icon-clock {
    width: 1.1458vw;
    height: 1.1458vw;
}

#clock_blue{
    display: block;
}

#clock_white{
    display: none;
}

.post_tags{
    position: relative;
    transition: 450ms ease-in-out;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    width: max-content;
}

.article-attr {
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-direction: column;
    margin-top: 1.0416vw;
}

.post-sdg-tag{
    display: flex;
    flex-direction: row;
}
.post-sdg-tag > li{
    margin-left: 0.5vw;
}
.post_category, .post-sdg-tag > li{
    color: #ffbb00;
    font-family: 'Noto Sans TC', sans-serif;
    text-decoration: none;
    font-size: .9375vw;
    line-height: 1.57;
    font-weight: bold;
    padding: 0.15vw 0.833vw; 
    background-color: #2e4565;
    border-radius: 0.885vw;  
}

.article-title
{
    position: relative;
    width: 100%;
    transition: 500ms cubic-bezier(.52,.06,.42,.86);
    margin-top: 1.0416vw;
}

.article-title a{
    color: #374a73;
    font-family: 'Noto Sans TC', sans-serif;
    text-decoration: none;
    font-size: 1.3025vw;
    line-height: 1.28;
    letter-spacing: 0.2vw;
    font-weight: bold;
}

.excerpt{
    position: relative;
    margin-top:5vw;
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 1.04166666667vw;
    font-weight: normal;
    line-height: 1.17225rem;
    letter-spacing: 0.104vw;
    padding: 0 0.5vw;
    color: rgba(46, 69, 101, 0.7);
    opacity: 0;
    transition: 480ms cubic-bezier(.52,.06,.42,.86);
    word-break: break-word;
}

.article-passage {
    display: flex;
    flex-direction: column;
    height: 10.8333vw;
    top: 0;
    transform: translateY(18vw);
    position: absolute;
    width: 100%;
    justify-content: space-between;
    transition: 0.4s ease-in-out;
 }

.article-content:hover .article-passage{
    transform: translateY(15.5vw);
    border-top: solid 2px #2e4565;
}

.article-content:hover .article-preview-pic {
    transform: translateY(-15vw);
}

 .article-content:hover .article-title {
    transform: translateY(-7.36vw);
 }

 .article-content:hover .article-attr {
    transform: translateY(-7.36vw);
 }

 .article-preview-pic, .article-title, .article-attr {
    transition: .5s;
 }

 .article-content:hover .excerpt{
    opacity: 1;
    margin-top: 0;
    position: relative;
    padding: 1.5vw;
}
 /*********************************/

/*for the single-post page*/

.whiteText{
    border-bottom: solid 2px #efeee4;
}

.whiteText div, .whiteText div a, .whiteText div span{
    color: #efeee4;
}

.whiteText .post_category, .whiteText .post-sdg-tag > li {
    background-color: #efeee4;
    color: #2e4565;
}

.article-preview-pic {
    display: block;
    width: 22.8125vw;
    height: 11.354vw;
    border-radius: 10px;
    overflow: hidden;
}

.article-preview-pic img {
   width: 22.8125vw;
    height: 11.354vw;
}

@media (max-width:960px) {
    .article-preview-pic {
        width: 219px;
        height: 109px;
    }
    .article-content {
        width: 219px;
        height: auto;
        margin: 46.08px 26.496px 0 26.496px;
        padding: 2vw;
    }
    .post_counter{
        font-size: 29px;
    }
    .post_icon{
        position:absolute;
        top: 62.5px;
        border-radius: 9.6px;
    }
    .post_icon > img{
        width: 18.45px;
    }
    .post_icon_hover_dots{
        width: 2.88px;
        height: 2.88px;
    }
    .post_time{
        margin-left: 4.8px; 
        font-size: 14px;
    }
    .icon-clock {
        width: 11.5px;
    }
    .post-sdg-tag > li{
        margin-left: 4.8px;
    }
    .post_category, .post-sdg-tag > li{
        font-size: 9px;
        padding: 1.44px 8px; 
        border-radius: 8.5px;  
    }
    .article-title a{
        font-size: 12.504px;
        letter-spacing: 1.92px;
    }
    
    .article-passage{
        display: none;
    }
    
    /*disable hover effect in mobile device*/
    .article-content:hover .article-content{
        border-bottom: none;
    }
    
    .article-content:hover .post_tags{
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        width: max-content;
    }
    
    .article-content:hover .article-passage{
        transform: none;
        border-top: none;
    }
    
    .article-content:hover .article-preview-pic {
        transform: none;
    }
    
     .article-content:hover .article-title {
        transform: none;
     }
    
     .article-content:hover .article-attr {
        transform: none;
     }
    
     .article-preview-pic, .article-title, .article-attr {
        transition: .5s;
     }
     
     .article-preview-pic img{
        width: 219px;
        height: 109px;
     }
}

@media (max-width: 768px) {
    .article-preview-pic, .article-preview-pic img {
        width: 219px;
        height: 109px;
    }
}


@media (max-width: 480px) {
    .article-preview-pic {
        width: 89.333vw;
        height: 52vw;
        border-radius: 15px;
    }

    .post_counter, .post_icon, .border-anim{
        display: none;
    }

    .article-content {
        width: 89.333vw;
        height: fit-content;
        margin: 2vw;
    }

    .article-title {
        margin-top: 20px;
    }

    .article-title a {
        font-size: 18px;
        line-height: 6.6688vw;
    }

    .post_time {
        font-size: 14px;
    }

    .icon-clock {
        height: 4.266vw;
        width: 4.266vw;
    }

    .post_category, .post-sdg-tag > li {
        font-size: 14px;
        padding: 0.8vw 4.2667vw;
        border-radius: 2.8vw;
        height: min-content;
    }

    .excerpt {
        font-size: 3.6272vw;
    }

    .article-attr {
        margin: 20px 0;
    }

    .article-preview-pic img {
        width: 89.333vw;
        height: 52vw;
    }
}