@charset "UTF-8";

    /*PEN STYLES*/
    * {
        box-sizing: border-box;
    }



    .blog-card {
        display: flex;
        flex-direction: column;
        margin: 1rem auto;
        box-shadow: 0 3px 7px -1px rgba(0, 0, 0, 0.1);
        margin-bottom: 1.6%;
        background: #fff;
        line-height: 1.4;
        font-family: sans-serif;
        border-radius: 5px;
        overflow: hidden;
        z-index: 0;
        min-height: 300px;
        /* 加入基本動畫設定 */
        /* opacity: 0;
    animation: slideInRight 1s ease forwards;
    animation-delay: calc(0.5s * var(--animation-order, 0)); */
    }

    /* 偶數卡片從左邊進入 */
    /* .blog-card:nth-child(even) {
    animation-name: slideInLeft;
} */

    /* 自動計算延遲時間 */
    /* .blog-card:nth-child(n) {
    --animation-order: calc(n);
} */

    /* 從右邊滑入的動畫 */
    @keyframes slideInRight {
        from {
            opacity: 0;
            transform: translateX(100px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* 從左邊滑入的動畫 */
    @keyframes slideInLeft {
        from {
            opacity: 0;
            transform: translateX(-100px);
        }

        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .blog-card a {
        color: inherit;
    }

    .blog-card a:hover {
        color: #0f3669;
    }

    .blog-card:hover .photo {
        /* transform: scale(1.3) rotate(3deg); */
    }

    .blog-card .meta {
        position: relative;
        z-index: 0;
        height: 200px;
    }

    .blog-card .photo {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-size: cover;
        background-position: center;
        transition: transform 0.2s;
    }

    .blog-card .details,
    .blog-card .details ul {
        margin: auto;
        padding: 0;
        list-style: none;
    }

    .blog-card .details {
        position: absolute;
        top: 0;
        bottom: 0;
        left: -100%;
        margin: auto;
        transition: left 0.2s;
        background: rgba(0, 0, 0, 0.6);
        color: #fff;
        padding: 10px;
        width: 100%;
        font-size: 0.9rem;
    }

    .blog-card .details a {
        -webkit-text-decoration: dotted underline;
        text-decoration: dotted underline;
    }



    .blog-card .description {
        padding: 1rem;
        background: #fff;
        position: relative;
        z-index: 1;
    }

    .blog-card .description h1,
    .blog-card .description h2 {
        font-family: Poppins, sans-serif;
    }

    .blog-card .description h1 {
        line-height: 1;
        margin: 0;
        font-size: 1.7rem;
    }

    .blog-card .description h2 {
        font-size: 1rem;
        font-weight: 300;
        text-transform: uppercase;
        color: #a2a2a2;
        margin-top: 5px;
    }

    .blog-card .description .read-more {

        text-align: right;
    }

    .blog-card .description .read-more a {
        color: #0f3669;
        display: inline-block;
        position: relative;
    }





    .blog-card p {
        position: relative;
        margin: 1rem 0 0;
    }

    .blog-card p:first-of-type {
        margin-top: 1.25rem;
    }

    .blog-card p:first-of-type:before {
        content: "";
        position: absolute;
        height: 5px;
        background: #0f3669;
        width: 35px;
        top: -0.75rem;
        border-radius: 3px;
    }

    .blog-card:hover .details {
        left: 0%;
    }

    @media (min-width: 640px) {

        .blog-card {
            flex-direction: row;

        }

        .blog-card .meta {
            flex-basis: 40%;
            height: auto;
        }

        .blog-card .description {
            flex-basis: 60%;

        }

        .blog-card .description:before {
            transform: skewX(-3deg);
            content: "";
            background: #fff;
            width: 30px;
            position: absolute;
            left: -10px;
            top: 0;
            bottom: 0;
            z-index: -1;
        }

        .blog-card.alt {
            flex-direction: row-reverse;
        }

        .blog-card.alt .description:before {
            left: inherit;
            right: -10px;
            transform: skew(3deg);
        }

        .blog-card.alt .details {
            padding-left: 25px;
        }
    }
    .main-a{
         color: rgba(0, 0, 0, 0.8);
    }
    .main-a-br{
       font-size:15px;
       color: gray;
       padding-left: 2px;
    }
    .main-card:hover{
        background-color: #333333 !important;
        color: white !important;
    }
    .main-card:hover,
.main-card:hover * {
   color: white !important;
}