

/* -------- 홍보센터 / 홍보영상 / promo2-detail -------- */


.promo2-wrap {
    width:100%;
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 0px 20px rgba(26,92,164,0.16);
    overflow: hidden;
}

.promo2-header {
    text-align: center;
    border-bottom:unset;
}

.promo2-wrap .board-detail-info {
    justify-content: center;
}

.promo2 .gallery-board {
    grid-template-columns: repeat(3,1fr);
}

.video-view {
    width:100%;
    aspect-ratio: 16/9;
    height:fit-content; 
    background: #f9fbfd;
}

.video-list {
    background: #f9fbfd;
}

.video-list {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:30px;padding:30px;
}

.video-con {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    overflow:hidden;
    transition: all 0.2s ease;
    cursor: pointer;
}

.video-con:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(26,92,164,0.1);
}

.video-thum {
    width:100%;
    aspect-ratio: 16/9;
}

.video-thum img {
    width:100%;
    height:100%;
    object-fit: cover;
}

.video-text {
    padding:15px;
    text-align: center;
    width:100%;
}

.video-text span {
    font-size:20px;
    font-weight:500;
    word-break: break-all;
    line-height:1.4;
}

.video-text p {
    color:#666;
    padding-top:5px;
}


/* -------- 홍보센터 / 홍보영상 / promo2 -------- */


/* -------- 홍보센터 / 카탈로그 / promo3 -------- */


.promo-gallery {
    grid-template-columns: repeat(3,1fr);
}

.catalog-btn {
    display:flex;
    gap:15px;
}

.catalog .gallery-board-text {
    gap:15px
}

.catalog-btn span { 
    border-radius:8px;
    padding:7px 20px;
    cursor: pointer;
}

.catalog-view {
    border:1px solid var(--primary-color2);
    color:var(--primary-color2);
    transition:0.15s;
}

.catalog-view:hover {
    background:var(--primary-color2);
    color:#fff;
    transition:0.15s;
}

.catalog-down {
    border:1px solid #5c84c0;
    color:#5c84c0;
    transition:0.15s;
}

.catalog-down:hover {
    background:#5c84c0;
    color:#fff;
    transition:0.15s;
}




/* -------- 홍보센터 / 카탈로그 / promo3 -------- */





/* -------- 1600px --------*/
@media screen and (max-width: 1600px) {

    


}




/* -------- 1440px --------*/
@media screen and (max-width: 1440px) {

.catalog-btn {
    flex-direction: column;
    text-align: center;
    gap:10px;
}

.video-text span {
    font-size:18px;
}

.video-text p {
    font-size:16px;
}




}


/* -------- 1280px --------*/
@media screen and (max-width: 1280px) {
    
    .promo3 .flex-wrap {
        grid-template-columns: 1fr;
        gap:0
    }

    .video-list {
        gap:20px;
        padding:20px;
    }

    .board-detail-header {
        padding:30px 40px;
    }

    .board-detail-title h3 {
        margin-bottom: 5px;
    }



}



/* -------- 1024px --------*/
@media screen and (max-width: 1024px) {


    .promo-gallery {
        grid-template-columns: repeat(2,1fr);
    }

    /* .catalog-btn {
        flex-direction: row;
    } */

    .catalog-btn span {
        padding:7px 15px;
    }

}





/* -------- 768px --------*/
@media screen and (max-width: 768px) {

    .video-text span {
        font-size:16px;
    }


    .video-list {
        grid-template-columns: 1fr;
        gap:15px;
        padding:15px;
    }

    
    .video-con {
        display:grid;
        grid-template-columns: 3fr 5fr;
    }

    .video-text {
        text-align: left;
        padding:15px 25px
    }

    .video-thum {
        aspect-ratio: 4/3;
    }



}


/* -------- 600px --------*/
@media screen and (max-width: 600px) {

    .promo-gallery {
        grid-template-columns: repeat(1,1fr);
    }

    


}




/* -------- 480px --------*/
@media screen and (max-width: 480px) {

    

}

/* -------- 350px --------*/
@media screen and (max-width: 350px) {

    

}








