#NewsBox ul {
    padding-top: 2vw
}

#NewsBox ul li {
    margin: 30px 1px 30px 0
}

#NewsBox ul li, #NewsBox ul li .lineBox {
    position: relative
}

#NewsBox ul li:before, #NewsBox ul li:after {
    position: absolute;
    width: 1px;
    height: calc(100% - 2px);
    display: block;
    background: rgb(55 100 167 / 29%);
    top: 1px;
    left: 0;
    content: ""
}

#NewsBox ul li:after {
    left: auto;
    right: 0
}

#NewsBox ul li .lineBox {
    margin: 0 5px
}

#NewsBox ul li .lineBox font {
    position: relative;
    margin-top: -26px;
    display: block;
    text-align: center;
    font-size: 16px;
    color: #3764a7;
}

#NewsBox ul li .lineBox a {
    margin-bottom: -13px;
    display: block;
    text-align: center;
    font-size: 15px;
    color: #3764a7;
    font-family: 'Cormorant', serif;
    text-transform: uppercase
}

#NewsBox ul li .lineBox a:before {
    position: absolute;
    top: -30px;
    left: calc((100% - 50px) / 2);
    width: 50px;
    height: 1px;
    background: rgb(189 173 132 / 30%);
    content: ""
}

#NewsBox ul li .lineBox:before, #NewsBox ul li .lineBox:after {
    position: absolute;
    width: calc((100% - 200px) / 2);
    height: 1px;
    display: block;
    background: rgb(55 100 167 / 29%);
    left: 1px;
    top: calc((100% - 1px) / 2);
    content: ""
}

#NewsBox ul li .lineBox:after {
    left: auto;
    right: 1px
}

#NewsBox ul li .news-block {
    position: relative;
    padding: 50px 50px 50px 50px
}

#NewsBox ul li .news-block a.photo {
    position: absolute;
    width: calc(100% - 80px);
    height: calc(100% - 50px);
    top: 25px;
    left: 40px;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px);
    opacity: 0;
    z-index: 10
}

#NewsBox ul li .news-block p {
    color: #3764a7;
}

#NewsBox ul li .news-block h3 {
    margin-bottom: 25px;
    margin-top: 5px;
    height: 70px;
    transition-duration: .6s;
    font-size: 20px;
    line-height: 170%;
    font-family: 'Noto Serif TC', serif;
    letter-spacing: 1.5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    color: #6b6862
}

#NewsBox ul li .news-block article {
    height: 57px;
    -webkit-line-clamp: 2;
    transition-duration: .8s;
    margin-bottom: 10px;
    font-size: 15px;
    letter-spacing: 0.05em;
    font-weight: 400;
    line-height: 200%;
    text-align: left;
    color: #aca99e;
}

.contentMain #NewsBox ul {
    font-size: 0
}

.contentMain #NewsBox ul li {
    margin: 45px 0;
    width: calc(100% / 3);
    display: inline-block
}

#NewsBox ul li:nth-child(3n - 1):after, #NewsBox ul li:nth-child(3n - 2):after {
    background: transparent
}

@media screen and (min-width: 981px) {
    #NewsBox ul li .news-block:hover a.photo {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
        opacity: 1
    }

    #NewsBox ul li .news-block:hover .info>* {
        transform: translateY(-30px);
        opacity: 0
    }

    #NewsBox ul li .lineBox a:hover {
        letter-spacing: .3em
    }

    #NewsBox ul li .lineBox a:hover:before {
        top: -2px;
        transition-duration: .3s
    }
}

@media screen and (max-width: 1280px) {
    .contentMain #NewsBox ul li {
        width: calc(100% / 2)
    }

    #NewsBox ul li:nth-child(3n - 1):after, #NewsBox ul li:nth-child(3n - 2):after {
        background: rgb(189 173 132 / 26%)
    }

    #NewsBox ul li:nth-child(2n - 1):after {
        background: transparent
    }
}

@media screen and (max-width: 980px) {
    #NewsBox .btn {
        left: auto;
        right: 0
    }

    #NewsBox ul li .date {
        font-size: 28px
    }

    #NewsBox ul li .info {
        display: inline-block;
        padding: 22px 15px 25px;
        text-align: center
    }

    #NewsBox ul li .news-block {
        padding: 15px 20px
    }

    #NewsBox ul li .news-block a.photo {
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        position: relative;
        display: inline-block;
        opacity: 1;
        transform: translateX(0)
    }

    #NewsBox ul li .slick-slide:after {
        background: #bdad84
    }
}

@media screen and (max-width: 680px) {
    .contentMain #NewsBox ul li {
        width: 100%;
        margin: 35px 0
    }

    #NewsBox ul li:nth-child(2n - 1):after {
        background: rgb(189 173 132 / 26%)
    }
}