/*===== works heading =====*/
.works{min-height:110vh;}
.works-heading{
    margin-bottom:60px;
}
.works .title{
    /* padding-top:280px; */
    margin-top:280px;
}


.filter-list{
    margin-top:60px;
    display:flex;
    flex-wrap:wrap;
}
.filter-list li{
    font-size:1.4rem;
    margin-right:4rem;
}

.filter-btn {
    position: relative;
    border: none;
    background: transparent;
    padding: 0;
    text-transform: uppercase;
}

.filter-btn {
    position: relative;
    border: none;
    background: transparent;
    padding:4px 0;
    cursor: pointer;
}

.filter-btn::after {
    position: absolute;
    content: "";
    width: calc(100% - 1px);
    height: 1px;
    background: #000;
    bottom:0;
    left: 0;
    transform: scale(0, 1);
    transform-origin: right center;
    transition: transform 0.5s ease;
}


.filter-btn.active::after {
    transform: scale(1, 1);
    transform-origin: left center;
}
@media (max-width:1024px) {
    .filter-list li{
        margin-right:3rem;
    }  
}
@media (max-width:920px) {
    .works-heading{
        margin-bottom:40px;
    }
    .filter-list{
        margin-top:40px;
    }
    .filter-list li{
        font-size:1.2rem;
        margin-right:2.5rem;
        margin-bottom:6px;
    }  
}
@media (max-width:520px) {
    .works .title{
        margin-top:160px;
    }

}

/*===== works list =====*/
.work-list{
    padding-bottom:200px;
    overflow: hidden;
}
.work-list .col{
    margin-bottom:100px;
}
.work-list .col:nth-child(odd){
    padding-right:20px;
}
.work-list .col:nth-child(even){
    padding-left:20px;
}

.work-list .img-inner{
    position: relative;
    aspect-ratio: 8 / 5;
    overflow: hidden;
    will-change: transform;
    opacity:0;
}
.work-list .img-inner img,
.work-list .img-inner video{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
    height:100%;
    object-fit:cover;
}

.work-list .work-tle{
    font-family:var(--content-font);
    font-weight:400;
    font-size:var(--font-size-lg);
    margin:12px 0;
}
.work-list .work-label{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.work-list .work-label li{
    border:1px solid var(--color-secondary);
    /* padding:1.5px 6px; */
    padding:2px 10px;
    border-radius:20px;
    transition:all 0.2s ease;
}

.no-work{
    font-size:1.2rem;
    color:var(--color-gray);
    min-height:40vh;
}
@media (max-width:920px) {
    .work-list .col:nth-child(odd){
        padding-right:12px;
    }
    .work-list .col:nth-child(even){
        padding-left:12px;
    }
}
@media (max-width:767px) {
   .work-list .col{
        margin-bottom:5rem;
    }
    
}

/*===== work show =====*/
.work-show{
   padding-bottom:200px;
}
.work-heading{
    padding-top:280px;
}
.work-heading .work-title{
    font-size: clamp(2rem, 9.5vw, 3rem);
    font-weight:600;
    display:inline-block;
    overflow: hidden;
}

.work-heading .work-title span{
    display: block;
}

.services-inner{
    display:flex;
    flex-wrap: nowrap;
    position: relative;
    margin:100px 0;
}
.line{
    opacity:0;
    width:2px;
    height:100%;
    position:absolute;
    left:-40%;
    /* transform:rotate(26deg); */
    background:#000;
}
.items li{
    color:#000;
    font-size:1.2rem;
    text-transform: capitalize;
}

/* cover */
.cover .img-inner{
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    opacity:0;
}
.cover .img-inner img,
.cover .img-inner video{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    height:120%;
    object-fit:cover;
    /* will-change: transform; */
}

/* concept */
.concept{
    padding:240px 0;
}
.concept .content{
    font-size:1.2rem;
    line-height:1.5;
    color:var(--color-secondary);
}

/* bottom info */
.bottom-info .row > div{
    margin-bottom:60px;
}
.bottom-info p{
    font-size:1.2rem;
    color:var(--color-secondary);
}
.bottom-info .small-text p{
    font-size:1rem ;
    line-height:1.3 ;
}
.bottom-info .gray-text p{
    color:var(--color-gray);
}

.bottom-info .text-center{
    text-align:center;
}


.bottom-info .img-inner{
    position: relative;
    overflow: hidden;
}
.bottom-info .img-inner.ratio {
    width: 100%;
}


.ratio-2x1{
    aspect-ratio: 2 / 1;
}
.ratio-16x9{
    aspect-ratio: 16 / 9;
}
.ratio-8x5{
    aspect-ratio: 8 / 5;
}

.ratio-4x3{
    aspect-ratio: 4 / 3;
}
.ratio-1x2{
    aspect-ratio: 1 / 1.1;
}


.bottom-info .img-inner.ratio img{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    height:102%;
    object-fit:cover;
    will-change: transform;
}
.bottom-info .img-inner.ratio video{
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    height:100%;
    object-fit:cover;
    will-change: transform;
}


/* 沒 ratio 的：自然高度，容器裁掉溢出，圖放大留位移空間 */
.bottom-info .img-inner.natural-ratio{
    overflow: hidden;
}
.bottom-info .img-inner.natural-ratio img{
    width:100%;
    height:auto;
    display:block;
    transform: scale(1.1);   
    transform-origin: center;
    will-change: transform;
}
.bottom-info .img-inner.natural-ratio .scroll-video{
    width:100%;
    height:auto;
    display:block;
    transform: scale(1.1);
    transform-origin: center;
    will-change: transform;
    object-fit: cover;
}




@media (max-width:680px) {
    .concept{
        padding:100px 0;
    }
}

@media (max-width:450px) {
    .work-heading-inner{
        height:92vh;
        display:flex;
        align-items:flex-end;
    }

    .work-heading{
        padding-top:0;
        width:100%;
    }

    .services-inner{
        margin:70px 0;
    }
    .line{left:-30%;}
    .items li{ font-size:1rem;}
    .cover .img-inner{aspect-ratio: 16 / 10; }

    .concept{
        padding:80px 0;
    }
    .concept .content{
        font-size:1.15rem;
    }
    .bottom-info p{
        font-size:1.15rem;
    }

}

@media (max-width:450px) and (max-height:720px) and (orientation: portrait){
    .work-heading-inner{
        padding-top:34vh;
        height:100%;
    }
}