article { display: grid; grid-template-columns: repeat(3, 453px); text-align: start;margin: 40px 0 60px 0; gap: 60px 40px;position: relative; }
article > div {position: relative;}
article .article-image { width: 453px; height: 272px;  display: block; overflow: hidden;}
article .article-image img{width: 100%; height: 100%; object-fit: cover; object-position: center center;}
article .article-info { padding: 20px 0; }
article .article-info h6 { font-size: 18px; line-height: 26px; position: relative; display: inline-block; }
article .article-info h6:after { 
    content: '';
    position: absolute;
    top: 100%;
    left: 0; 
    width: 0;
    transition: 0.5s;
    height: 1px;
    background: #111;
}
article .article-box .article-image { position: relative; }
article .article-box .article-image:before { 
    content: url('../../images/common/play_btn.png');
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: none;
}
article .article-box:hover .article-image:before { display: block; }
article .article-box:hover h6:after { width: 100%; }
article .article-info span { display: block; margin-top: 6px; font-size: 18px; line-height: 26px; color: #767676; }

article > div .media-admin-btn{
    position: absolute;
    width: 453px; 
    height: 272px;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.6);
    top: 0;
    left: 0;
}
article > div:hover .media-admin-btn {
    display: flex;
}
article > div:hover .media-admin-btn a{
    display: block;
    width: 124px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    font-size: 18px;
}
article > div:hover .media-admin-btn .media-delete{
    background: var(--main);
    color: #fff;
}
article > div:hover .media-admin-btn .media-modify{
    background: rgba(0,0,0,0.6);
    color: #fff;
    border: 1px solid #fff;
    margin-left: 12px;
}


/* media POPUP */
.media_popup_box { position: fixed; width: 100%; height: 100vh; background-color: #000000E5; z-index: 9999;  top: 0; display: none;  color: #fff; }
body.media_popup .media_popup_box { display: block; }

.inner-popup { width: 1193px; left: 50%; position: absolute; bottom: 46px; transform: translateX(-50%); }
.media_popup_box .popup_util { height: 716px;  position: relative; }
.media_popup_box .popup_util .media { display: block; width: 100%; }
.media_popup_box .popup_util .close_btn { position: absolute; right: -40px; transform: translateX(100%); cursor: pointer; }
.media_popup_box .popup_text h6{ text-decoration: underline; margin: 20px 0 6px 0; }
.media_popup_box .popup_text h6,
.media_popup_box .popup_text span { font-size: 26px; line-height: 36px; font-weight: 700; }
.media_popup_box .popup_text span { font-weight: 400; }


/* 20220620 */
article .article-box span#link{ 
    display: none; 
}
.media_popup_box .popup_util .player{
    width: 100%;
    height: 100%;
    display: none;
}
.media_popup_box.youtube .popup_util .player#pop-youtube{
    display: block;
}
.media_popup_box.upload .popup_util .player#pop-upload{
    display: block;
}

@media (max-width:1440px) {
    

    article {grid-template-columns: repeat(3, 27rem); margin: 2.5rem 0 3.75rem 0; gap: 3.75rem 2.5rem; }

    article .article-image { width: 27rem; height: 17rem;  display: block; overflow: hidden;}


    article .article-info { padding: 1.25rem 0; }
    article .article-info h6 { font-size: 1.125rem; line-height: 1.625rem;}




    article .article-info span { margin-top: 0.375rem; font-size: 1.125rem; line-height: 1.625rem; }


    article > div .media-admin-btn{
        width: 27rem; 
        height: 17rem;
    }


    article > div:hover .media-admin-btn a{
        width: 7.75rem;
        height: 3.5rem;
        line-height: 3.5rem;
        font-size: 1.25rem;
    }

    article > div:hover .media-admin-btn .media-modify{
        margin-left: 0.75rem;
    }
    
    .inner-popup { width: 74.563rem; bottom: 2.875rem;}
    .media_popup_box .popup_util { height: 44.75; }

    .media_popup_box .popup_util .close_btn { right: -2.5rem; }

    .media_popup_box .popup_text h6{ margin: 1.25rem 0 0.375rem 0; }


    .media_popup_box .popup_text h6,
    .media_popup_box .popup_text span { font-size: 1.625rem; line-height: 2.25rem;}








}



@media (max-width: 1024px){
    article { margin-top: 1.5rem; grid-template-columns: repeat(1, 100%); gap: 1.5rem; }
    article .article-image { width: 100%; height: 12.3125rem; }
    article .article-info { padding: 1.25rem 0; }
    article .article-info h6,
    article .article-info span { font-size: 1.125rem; line-height: 1.625rem; }
    article .article-info span { margin-top: 0.375rem; }    

    .inner-popup { width: 100%; top: 50%; transform: translate(-50%, -50%); bottom: auto; }
    .media_popup_box .popup_util { height: 216px; }
    .media_popup_box .popup_text { padding: 0 1rem; }
    .media_popup_box .popup_text h6 { margin: 1.25rem 0 0.25rem 0; }
    .media_popup_box .popup_text h6, .media_popup_box .popup_text span { font-size: 1.25rem; line-height: 1.875rem; }
    .media_popup_box .popup_util .close_btn { 
        transform: translateY(-100%);
        right: 1rem;
        top: -1.875rem; 
    }

    article > div:hover .media-admin-btn{
        display: none;
    }
    
}