/* 모달 커스텀 */
.popup-wrap {
    min-height:auto !important; background: #f3f5f7;

    .pop-conts img{width: 100%;}

    @media screen and (max-width: 767px){
        .pop-conts.no-footer {
            padding-right: 0;
            padding-left:0;
        }
    }
}
/* // 모달 커스텀 */


.event-benefit-template {

    /* 임직원이 알아두면 좋은 특별 혜택*/
    .article-01 {
        .article-01__banner {
            flex: 1 1 50%;
        }
        .article-01__banner:nth-child(1),
        .article-01__banner:nth-child(2){
            margin-bottom: 8px;
            padding-bottom: 8px;
            border-bottom: 1px dotted #C8C8C8;
        }

        ul{display: flex;flex-wrap:wrap;}
        .article-01__banner{position: relative;}
        .article-01__banner button{position: absolute;left: 2%;top: 59%;width: 29%;height: 21%;}
        .article-01__banner:last-of-type button:first-of-type{top: 52%;}
        .article-01__banner:last-of-type button:last-of-type{top: 72%;}

        #event_tab01_popup04 .lifecare{position: absolute; left: 28.4%; width: 10%; top: 23.8%; height: 5%;}

        @media screen and (max-width: 767px){
            .benefit_pop{margin: 0 calc(20 / 390 * 100vw);}
            
            .article-01__banner {
                flex: 1 1 100%;
            }
            .article-01__banner:nth-child(3){
                border-bottom: 1px dotted #C8C8C8;
            }
            
            ul{display: block;}
            .article-01__banner,
            .article-01__banner:nth-child(1),
            .article-01__banner:nth-child(2){
                padding-bottom: calc(8 / 390 * 100vw);
                margin-bottom: calc(8 / 390 * 100vw);
            }
            .article-01__banner:last-of-type {padding-bottom:0; margin-bottom:0;}
            .article-01__banner img{max-width: 100%;}    
            .article-01__banner button{top: 65%;width: 46%;}

            #event_tab01_popup04 .lifecare{left: 55.4%;width: 25%;top: calc(70 / 390 * 100vw);height:  calc(60 / 390 * 100vw);}
        }
    }
}


/* 오버플로우 스크롤 영역 */
.event-benefit-template .article_card_list .card_list_wrap { transition: max-height 0.5s ease-in-out; overflow: hidden; }
.event-benefit-template .article_card_list .card_list_wrap .c-list{ padding: 2% 0 0 0; }
@media screen and (max-width: 767px) {
    .event-benefit-template .article_card_list .card_list_wrap {position: relative; margin: 0 0 6% 0; overflow-x: auto; transition: max-height 0.5s ease-in-out; }
    .event-benefit-template .article_card_list .card_list_wrap .c-list{ padding: 6% 0 0 0; }
    .event-benefit-template .article_card_list .card_list_wrap .card_list_section01 { width: 270%; padding: 0 5%; }
}