#hero {
    height: calc(100vh - var(--navHforxl));
    background-image: url(../img/hero.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    background-repeat: no-repeat;

}

#hero::before {
    position: absolute;
    content: '';
    inset: 0;
    background-image: linear-gradient(133deg,rgba(0,0,0,1),rgba(0,0,0,0));
}

#hero .slideshow {
    position: absolute;
    left: 1rem;
    top: 20vh;
    width: min(400px, 80vw);
}

#hero .slideshow .slideitem {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    visibility: hidden;
}

/* 當 `active` class 被加上時，執行 fadeIn 動畫 */
#hero .slideshow .slideitem.active {
    visibility: visible;
    animation: fadeInOut 4s ease-in-out;
    /* 4 秒動畫 */
}

/* 定義淡入與淡出的補間動畫 */
@keyframes fadeInOut {
    0% {
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    /* 前 10% 時間漸顯 */
    40% {
        opacity: 1;
    }

    /* 保持可見 */
    90% {
        opacity: 1;
    }

    /* 60% 開始淡出 */
    100% {
        opacity: 0;
    }
}

.section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.home-tw-made .arrowLine {
    display: flex;
    align-items: center;
    height: 5px;
    background-color: var(--siteLight);
    width: 100%;
}

.home-tw-made .arrow-i {
    clip-path: polygon(99% 50%, 0 0, 0 100%);
    background-color: var(--siteLight);
    width: 30px;
    height: 30px;
}

.home-tw-made .arrow-i.first-child {
    transform: rotate(180deg);
}

.home-about {
    background-color: #F8F9FA;
}

@media (max-width:768px) {
    #hero {
        height: calc(100vh - var( --navHforsm));
        background-position: center right 25%;
    }
    #hero .slideshow{
        top: 10vh;
    }
}