.s1{padding-top: 90px;padding-bottom: 120px;}

/* 탭메뉴 */
.s1 .tabmenu{display: flex;align-items: center;justify-content: center;gap: 10px;}
.s1 .tabmenu li{border:1px solid #c9c9c9; border-radius: 22px;padding: 10px 20px;cursor: pointer;font-family: 'Dm Sans', sans-serif;color: #7c7c7c; font-size: 20px;}
.s1 .tabmenu li.on{background-color: #4754d2;border: 1px solid #4754d2;color: #fff;}
.s1 .tabmenu li br.max-500{display: none;}

/* 리스트박스 */
.s1 .listBx{padding-top: 40px;}
.s1 .listBx .video_list{display: flex;gap: 20px;width: 100%;flex-wrap: wrap;row-gap: 60px;justify-content: flex-start;}
.s1 .listBx .video_list li{width: calc((100% - 40px) / 3);}
.s1 .listBx .video_list li:hover .video_tit p{color: #4754d2;transition: color 0.5s;}
.s1 .listBx .video_list .videoBx{position: relative;width: 100%;overflow: hidden;border-radius: 9px;}
.s1 .listBx .video_list .videoBx .blur {content:'';display: block;width: 100%;height: 100%;background-color: rgba(0,0,0,0.5);position: absolute;top: 0;left: 0; z-index: 1; opacity: 0; transition: opacity 0.5s;}
.s1 .listBx .video_list .videoBx .blur .play{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); width: 36px; height: 36px;}
.s1 .listBx .video_list .videoBx .blur .play img{width: 100%;}
@media screen and (min-width: 821px) {
    .s1 .listBx .video_list li:hover .videoBx .blur{opacity: 1;}
}

.s1 .listBx .video_list .videoBx:before{content:'';display: block;width: 100%;padding-bottom: calc(265/466*100%);}
.s1 .listBx .video_list .videoBx img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;border-radius: 9px;}

.s1 .listBx .video_list .video_tit{padding-top: 20px;}
.s1 .listBx .video_list .video_tit em{display: block;font-family: 'Dm Sans', sans-serif;font-size: 16px;font-weight: 500;}
.s1 .listBx .video_list .video_tit p{font-size: 22px;font-weight: 600;padding-top: 15px;line-height: 1.3;transition: color 0.5s;}


/* 페이지네이션 */
.s1 .pagination{display: flex;align-items: center; justify-content: center;gap: 20px;padding-top: 85px;}
.s1 .pagination ul{display: flex; align-items: center; justify-content: center;gap: 22px;}
.s1 .pagination li{font-size: 16px;font-weight: 400;color: #7c7c7c;
    display: inline-flex;align-items: center;justify-content: center;
}

/* 페이지네이션 on */
.s1 .pagination li{position: relative;}
.s1 .pagination li a{z-index: 1;}
.s1 .pagination li.on a{color: #000;}
.s1 .pagination li.on:before{content:'';display: block;width: 26px;height: 26px;border-radius: 50%;background-color: #e2f157;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
.s1 .pagination .next, .s1 .pagination .prev{font-size: 16px;font-weight: 400;color: #7c7c7c;}

@media screen and (max-width: 1680px) {
}
@media screen and (max-width: 1440px) {
    .s1 .tabmenu li {font-size: 18px;}
    .s1 .listBx .video_list .video_tit p {font-size: 20px;}
}
@media screen and (max-width: 1280px) {}
@media screen and (max-width: 1024px) {
    .s1 .tabmenu li{font-size: 16px;}
    .s1 .listBx .video_list .video_tit em{font-size: 14px;}
    .s1 .listBx .video_list .video_tit p{font-size: 18px;}
}
@media screen and (max-width: 820px) {
    .s1 .listBx .video_list li{width: calc((100% - 20px) / 2);}
    .s1 .tabmenu{display: inline-block;width: 100%;}
    .s1 .tabmenu li p{text-align: center; line-height: 1.3;}
    .s1 .tabmenu li p .max-820{display: none;}
    .s1 .tabmenu li{margin-bottom: 10px;padding: 10px 20px;}
}
@media screen and (max-width: 500px) {
    .s1{padding-top: 50px;padding-bottom: 80px;}
    .s1 .tabmenu li{font-size: 14px; padding: 10px 8px;}
    .s1 .listBx .video_list li{width: 100%;}
    
}
@media screen and (max-width: 360px) {}


/* vide_view Bx */
.viewBx{position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,0.9);z-index: 9999;display: none;}
.viewBx .wrap{position: relative;width: 100%;height: 100%;}
.view{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);max-width: 1112px;width: 100%;}
.view .tit{display: flex;align-items: center;justify-content: space-between;padding-bottom:20px ;}
.view p{font-size: 28px;font-weight: 500;color: #fff;font-family: 'Dm Sans', sans-serif;
    line-height: 1.3;
}
.view p em{margin-right: 5px;}
.view .tit i{font-size: 36px;color: #fff;cursor: pointer;}
.view .video{position: relative;width: 100%;}
.view .video:before{content:'';display: block;width: 100%;padding-bottom: calc(629/1112*100%);}
.view .video iframe{position: absolute;top: 0;left: 0;width: 100%;height: 100%;border-radius: 20px;}

@media screen and (max-width: 1280px) {
    .viewBx .wrap{position: relative;width: 90%;}
}
@media screen and (max-width: 1024px) {
    .view p{font-size: 24px;}
    .view .tit i{font-size: 30px;}
}
@media screen and (max-width: 820px) {
    .view p{font-size: 20px;}
    .view .tit i{font-size: 26px;}
}
@media screen and (max-width: 500px) {
    .view p{font-size: 18px;}
    .view .tit i{font-size: 20px;}
}


/* pagin 대체 버튼  0619 추가*/
.portfolio .more_btn{margin-top: 70px;
    display: flex;align-items: center;justify-content: center;
}
.portfolio .more_btn .btn{
    cursor: pointer;
    max-width: 399px;
    width: 100%;
    display: block;
    text-align: center;
    padding: 20px;
    border: 1px solid #101010;
    border-radius: 9px;
    font-size: 18px;
    font-weight: 400;
    color: #101010;
    letter-spacing: -0.025em;
    box-sizing: border-box;
    transition: all .3s ease-in-out;
}
.portfolio .more_btn .btn:hover{
    background: #000;
    color: #fff;
}
@media screen and (max-width: 1680px) {
    .portfolio .more_btn .btn{
        max-width: 350px;
        font-size: 16px;
    }
}
@media screen and (max-width: 1024px) {
    .portfolio .more_btn .btn{
        padding: 12px;
    }
}

@media screen and (max-width: 820px){
    .portfolio .more_btn .btn{
        font-size: 14px;
    }
}

@media screen and (max-width: 500px){
    
    .portfolio .more_btn .btn {
        max-width: 300px;
    }
}