/* magazine.css */

.magazine .s2 .inner .list{}
.magazine .s2 .inner .list .flx{
    display: flex;
    align-items: center;
    gap: 50px;
    width: 100%;
}
.magazine .s2 .inner .list .flx .imgBx{
    position: relative;
    max-width: 480px;
    width: 100%;
}
.magazine .s2 .inner .list .flx .imgBx:before{
    content: '';
    display: block;
    padding-bottom: calc(320/480 * 100%);
}
.magazine .s2 .inner .list .flx .imgBx img{
    position: absolute;
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    object-fit: cover;
    border-radius: 20px;
}
.magazine .s2 .inner .list .flx .txtBx{
    display: flex;
    flex-direction: column;
    gap: 30px;
}
.magazine .s2 .inner .list .flx .txtBx .tag{
    font-size: 14px;padding: .5em;box-sizing: border-box; letter-spacing: -0.03em; font-weight: 500;
    background-color: #0076ff;
    max-width: 80px;text-align: center;
    border-radius: 16px;
    color: #fff;
}
.magazine .s2 .inner .list .flx .txtBx .tag span{
    font-weight: 500;color: #fff;
}
.magazine .s2 .inner .list .flx .txtBx .tit{word-break: keep-all;}
.magazine .s2 .inner .list .flx .txtBx .tit span{
    font-size: 30px;font-weight: 600;color: #000;
    line-height: 1.3; letter-spacing: -0.03em;
}
.magazine .s2 .inner .list .flx .txtBx .date{}
.magazine .s2 .inner .list .flx .txtBx .date span{}

.magazine .s2 .inner .list a .arr{
    flex-shrink: 0;
}

@media screen and (max-width: 1280px) {
    .magazine .s2 .inner .list .flx .imgBx{
        max-width: clamp(380px, 380 / 1024 * 100vw , 480px);
    }

    .magazine .s2 .inner .list .flx .txtBx .tit span{
        font-size: clamp(26px, 26 / 1024 * 100vw , 30px);
    }
    
}
@media screen and (max-width: 1024px) {
    .magazine .s2 .inner .list .flx .imgBx{
        max-width: clamp(300px, 300 / 820 * 100vw , 380px);
    }

    .magazine .s2 .inner .list .flx .txtBx .tit span{
        font-size: clamp(22px, 22 / 820 * 100vw , 26px);
    }
}

@media screen and (max-width: 820px) {
    .magazine .s2 .inner .list .flx{flex-direction: column;align-items: flex-start;gap: 25px;}
    .magazine .s2 .inner .list .flx .imgBx{max-width: 95%;}
    .magazine .s2 .inner .list .flx .txtBx{gap: 15px;}
}

@media screen and (max-width: 500px) {
    .magazine .s2 .inner .list .flx .txtBx .tit span{
        font-size: clamp(18px, 18 / 360 * 100vw , 22px);
    }
    .magazine .s2 .inner .list .flx .txtBx .tag{
        font-size: clamp(12px, 12 / 360 * 100vw , 14px);
        max-width: 65px;
    }
    .magazine .s2 .inner .list .flx .txtBx .date span{
        font-size: clamp(14px, 14 / 360 * 100vw , 16px);
    }
    .magazine .s2 .inner .list .flx .imgBx{ max-width: 100%; }
}