.sec1{
    padding:4.4% 0 10.4%;
    text-align:right;
}
.sec1 .inner{
    width:1526px;
}
.sec1 .year-box{
    vertical-align:top;
    text-align:left;
    margin-bottom:4.1%;
    position:relative;
    border:1px solid rgba(51,51,51,0.2);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-direction:row;
    font-size:1.5em;
    color:var(--theme-purple);
    padding:0.6em 1em;
    line-height:1;
    cursor:pointer;
}
.sec1 .year-box span{
    margin-right:1.5em;
}
.sec1 .year-box::after{
    content:"▲";
    display:block;
    transform:rotateX(180deg);
    font-size:0.875em;
    transition: transform 0.25s;
}
.sec1 .year-box:hover::after{
    transform:rotateX(0deg);
}
.sec1 .year-box .slide-box{
    position:absolute;
    z-index:1;
    left:-1px;
    right:-1px;
    top:100%;
    background-color:#fff;
    border:1px solid rgba(51,51,51,0.2);
    border-top:0 none;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s,opacity 0.25s;
    transform: rotateX(-90deg) ;
    transform-origin: center top;
}
.sec1 .year-box:hover .slide-box{
    opacity: 1;
    transform: rotateX(0deg);
    pointer-events: auto;
}
.sec1 .year-box a{
    display:block;
    padding:0.5em 1em;
}
.sec1 .year-box a.active{
    background-color:var(--theme-purple);
    color:#fff;
}
.sec1 .list-box{
    text-align:left;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    flex-direction:row;
    flex-wrap:wrap;
    padding-bottom:4%;
}
.sec1 .list-box::after{
    content:"";
    display:block;
    width:31.3%;
}
.sec1 .list-box a{
    color:#333;
    box-shadow: 0px 0px 1.25em rgba(8, 8, 8, 0.05);
    display:block;
    width:31.3%;
    margin-bottom:5.1%;
}
.sec1 .date-box{
    position:absolute;
    left:8.6%;
    bottom:100%;
    margin-bottom:-2em;
    text-align:center;
}
.sec1 .list-box h3{
    color:#fff;
    font-size:2.5em;
    background-color:var(--theme-purple);
    height:2em;
    line-height:2;
}
.sec1 .list-box h4{
    background-color:#f3f3f3;
    height:2em;
    line-height:2;
    width:6.125em;
}
.sec1 .text-box{
    position:relative;
    padding:11.38% 8.6% 8.6%;
    text-align:left;
}
.sec1 .list-box h5{
    font-size:1.625em;
    line-height:1.5;
    margin-bottom:3.3%;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.sec1 .list-box p{
    font-size:1.25em;
    line-height:1.6;
    padding-right:2em;
    position:relative;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}
.sec1 .list-box p::after{
    font-family: 'FontAwesome400';
    content:'\f054';
    border:2px solid #333;
    border-radius:50%;
    width:1.5em;
    height:1.5em;
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    right:0;
    top:50%;
    margin-top:-0.75em;
}
.sec1 .list-box .img-box{
    position:relative;
    overflow:hidden;
}
.sec1 .list-box .img-box::before{
    content:"";
    display:block;
    padding-top:50%;
}
.sec1 .list-box .img-box img{
    width:100%;
    height:100%;
    position:absolute;
    left:0;
    top:0;
}
@media only screen and (min-width:1025px){
    .sec1 .year-box a:hover{
        background-color:var(--theme-purple);
        color:#fff;
    }
    .sec1 .list-box a:hover p::after{
        color: var(--theme-purple);
        border-color: var(--theme-purple);
    }
    .sec1 .list-box a:nth-child(3n-1){
        transition-delay:0.2s,0.2s;
    }
    .sec1 .list-box a:nth-child(3n){
        transition-delay:0.4s,0.4s;
    }
}
@media only screen and (max-width:1024px){
    .section{
        font-size:1.25em;
    }

    .sec1{
        padding:10% 0 15%;
    }
    .sec1 .year-box{
        margin-bottom:10%;
    }
    .sec1 .year-box span{
        margin-right:1em;
    }
    .sec1 .list-box{
        display:block;
        padding-bottom:5%;
    }
    .sec1 .list-box::after{
        display:none;
    }
    .sec1 .list-box a{
        width:100%;
        margin-bottom:5%;
    }
    .sec1 .date-box{
        position:absolute;
        left:8.6%;
        bottom:100%;
        margin-bottom:-2em;
        text-align:center;
    }
    .sec1 .list-box h3{
        color:#fff;
        font-size:2.5em;
        background-color:var(--theme-purple);
        height:2em;
        line-height:2;
    }
    .sec1 .list-box h4{
        background-color:#f3f3f3;
        height:2em;
        line-height:2;
        width:6.125em;
    }
    .sec1 .text-box{
        position:relative;
        padding:11.38% 8.6% 8.6%;
        text-align:left;
    }
    .sec1 .list-box h5{
        font-size:1.625em;
        line-height:1.5;
        margin-bottom:3.3%;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
    .sec1 .list-box p{
        font-size:1.25em;
        line-height:1.6;
        padding-right:2em;
        position:relative;
        text-overflow: ellipsis;
        overflow: hidden;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
    }
    .sec1 .list-box p::after{
        font-family: 'FontAwesome400';
        content:'\f054';
        border:2px solid #333;
        border-radius:50%;
        width:1.5em;
        height:1.5em;
        display:flex;
        align-items:center;
        justify-content:center;
        position:absolute;
        right:0;
        top:50%;
        margin-top:-0.75em;
    }
}