.worksArea .worksBox{
    margin-top: 10%;
}

.worksArea .worksBox h2{
    margin-top: 5%;
}

.worksArea .worksBox .itemBox{
    margin-top: 18%;
    align-items: start;
}

.worksArea .worksBox .itemBox a {
    color: #3e3a39;
    display: block;
    padding-bottom: 20px;
    break-inside: avoid;
}

.worksArea .worksBox .itemBox a .imgBox{
    margin-bottom: 5px;
}

.worksArea .worksBox .itemBox a .imgBox::after {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: transparent;
    transition: all 0.4s ease;
    border-radius: 10px;
}

.worksArea .worksBox .itemBox a:hover .imgBox::after {
    background: #0000006e;
    transition: all 0.4s ease;
}

.worksArea .worksBox .itemBox a .imgBox::before {
    content: 'more';
    width: 100%;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    text-align: center;
    color: transparent;
    font-family: "Cinzel", sans-serif;
    transition: all 0.4s ease;
}

.worksArea .worksBox .itemBox a:hover .imgBox::before {
    color: #fff;
    transition: all 0.4s ease;
    z-index: 3;
}

.worksArea .worksBox .itemBox a .imgBox img{
    width: 100%;
    border-radius: 10px;
}

.worksArea .worksBox .itemBox a span{
    display: block;
}

.worksArea .worksBox .itemBox a:hover span{
    color: #000;
    transition: all 0.4s ease;
}

.worksArea .worksBox .itemBox a span::after{
    content: '∙∙∙';
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.worksArea .worksBox .itemBox a:hover span::after{
    letter-spacing: 1px;
    color: #000;
    transition: all 0.4s ease;
}

/* 手機版 */
@media (max-width: 991px) {
    .worksArea{
        padding-bottom: 10%;
    }

    .worksArea .worksBox .title-EN{
        margin-top: 15%;
    }

    .worksArea .worksBox .itemBox{
        margin-top: 8%;
    }

}