.portfolio .ctgryWrap nav ul {display: flex; justify-content: space-between; align-items: center; font-size: 28px; padding-bottom: calc(105/28*1em);}
.portfolio .ctgryWrap nav ul li {padding: calc(15/28*1em) 0; position: relative; font-size: inherit; font-weight: 600; letter-spacing: -0.01em; font-family: 'Poppins'; color: #a5a5a5; transition: 0.3s; cursor: pointer;}
.portfolio .ctgryWrap nav ul li.active {color: #000;}
.portfolio .ctgryWrap nav ul li::after {content: ''; position: absolute; bottom: 0px; left: 0; width: 100%; height: 2px; background-color: #000; transform: scaleX(0); transition: 0.3s;}
.portfolio .ctgryWrap nav ul li.active::after {transform: scaleX(1);}
.portfolio .ctgryWrap nav ul li:hover {color: #000;}

.portfolio .allList {padding-bottom: 30px;}
.portfolio .allList .list_wrap {font-size: 40px; margin-bottom: calc(130/40*1em);}
.portfolio .allList .list_wrap.tabx {display: none;}
.portfolio .allList .list_wrap iframe {width: 100%; overflow: hidden;}
.portfolio .allList .list_title {text-align: center; padding-bottom: calc(30/40*1em); margin-bottom: calc(30/40*1em); font-size: inherit; font-weight: 600; letter-spacing: -0.01em; font-family: 'Poppins';}
.portfolio .allList .list_title b {text-decoration: underline; text-decoration-color: #fffe93; text-underline-offset: calc(10/40*1em); text-decoration-thickness: calc(15/40*1em);}
.paging {display: flex; align-items: center; justify-content: center; padding-top: 85px; padding-bottom: 20px;}
.paging > div {display: flex; align-items: center;}
.paging > .arr {font-size: 24px;}
.paging > .num {padding: 0 15px;}
.paging > .num a {width: calc(35/18*1em); height: calc(35/18*1em); display: flex; align-items: center; justify-content: center; font-family: 'Poppins'; font-weight: 500; font-size: 17px; letter-spacing: -0.01em; color: #000000b2; border-radius: 50%; }
.paging > .num a + a {margin-left: calc(10/18*1em);}
.paging > .num a.act {background: #000; color: #fff;}
.paging a {transition: all 0.3s;}
.paging a:hover {color: #000;}

.grid {display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; width: 100%; overflow: hidden;}
.grid .item {cursor: pointer; position: relative; width: calc(100% / 3 - (20px * 2 / 3));}
.grid._youtube .item::after {content: ''; display: block; padding-top: calc(330/583*100%);}
.grid._youtube .item::before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0; z-index: 1; transition: 0.3s;}
.grid._youtube .item:hover::before {opacity: 0.3;}
.grid._youtube .item .youtube-player {pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

.grid._instagram .item .instargram_box {position: relative; border: 1px solid #000;}
.grid._instagram .item .instargram_box::after {content: ''; display: block; padding-top: calc(333/510*100%);}
.grid._instagram .item .instargram_box img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}

.grid._shortform .item {width: calc(100% / 5 - (20px * 4 / 5));}
.grid._shortform .item::after {content: ''; display: block; padding-top: calc(546/307*100%);}
.grid._shortform .item::before {content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #000; opacity: 0; z-index: 1; transition: 0.3s;}
.grid._shortform .item:hover::before {opacity: 0.3;}
.grid._shortform .item img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.grid._shortform .item .youtube-player {pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@media screen and (max-width: 1280px) {
    .portfolio .ctgryWrap .wrap {max-width: 530px;}
    .portfolio .ctgryWrap nav ul {font-size: 24px;}
    .portfolio .allList .list_wrap {font-size: 30px;}
}
@media screen and (max-width: 1024px) {
    .portfolio .ctgryWrap .wrap {max-width: 430px;}
    .portfolio .ctgryWrap nav ul {font-size: 20px;}
    .grid {gap: 10px;}
    .grid .item {width: calc(100% / 3 - (10px * 2 / 3));}
    .grid._shortform .item {width: calc(100% / 5 - (10px * 4 / 5));}
    .portfolio .allList .list_wrap {font-size: 25px;}
}
@media screen and (max-width: 820px) {
    .portfolio .allList .paging {padding-top: 50px;}
    .portfolio .allList .paging > .arr {font-size: 20px;}
    .portfolio .allList .paging > .num a {font-size: 14px;}
    .grid .item {width: calc(100% / 2 - (10px * 1 / 2));}
    .grid._shortform .item {width: calc(100% / 3 - (10px * 2 / 3));}
}
@media screen and (max-width: 500px) {
    .portfolio .ctgryWrap nav ul {font-size: 16px;}
    .grid .item {width: 100%;}
    .grid._shortform .item {width: calc(100% / 2 - (10px * 1 / 2));}
}
@media screen and (max-width: 360px) {
    .portfolio .ctgryWrap nav ul {font-size: 14px; flex-wrap: wrap; justify-content: center;}
    .portfolio .ctgryWrap nav ul li {width: calc(50% - (10px * 1 / 2)); text-align: center; position: relative;}
    .portfolio .ctgryWrap nav ul li::after {transform: scaleX(1) translateX(-50%); width: 90%; left: 50%; opacity: .3;}
    .portfolio .ctgryWrap nav ul li.active::after {transform: scaleX(1) translateX(-50%); opacity: 1;}
    .portfolio .allList .list_wrap {font-size: 20px;}
    .portfolio .allList .paging > .num {padding: 0 5px;}
    .portfolio .allList .paging > .num a + a {margin-left: calc(5/18*1em);}
}

.viewPopup {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index: 9999; display: none;}

.viewPopup._youtube .viewPopup_container {width: 90%; max-width: 1200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.viewPopup._youtube .viewPopup_container::after {content: ''; display: block; padding-top: calc(319/583*100%);}
.viewPopup._youtube .viewPopup_content {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.viewPopup._youtube .viewPopup_content iframe {width: 100%; height: 100%;}

.viewPopup._instagram .viewPopup_container {width: 90%; max-width: 1200px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.viewPopup._instagram .viewPopup_container::after {content: ''; display: block; padding-top: calc(333/510*100%);}
.viewPopup._instagram .viewPopup_content {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.viewPopup._instagram .viewPopup_content img {width: 100%; height: 100%; object-fit: cover;}

.viewPopup._shortform .viewPopup_container {width: 90%; max-width: 1200px; max-height: 70vh; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.viewPopup._shortform .viewPopup_container::after {content: ''; display: block; padding-top: calc(546/307*100%);}
.viewPopup._shortform .viewPopup_content {width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.viewPopup._shortform .viewPopup_content iframe {width: 100%; height: 100%;}

.viewPopup_close {margin: 0; position: absolute; bottom: 100%; right: 0; display: flex; align-items: center; justify-content: center; font-size: 40px; padding: calc(5/40*1em); color: #fffec1; cursor: pointer;}

@media screen and (max-width: 1280px) {
    .viewPopup._youtube .viewPopup_container {width: 75%; max-width: 1000px;}
    .viewPopup._youtube .viewPopup_container::after {padding-top: calc(319/583*100%);}

    .viewPopup._instagram .viewPopup_container {width: 75%; max-width: 800px;}
    .viewPopup._instagram .viewPopup_container::after {padding-top: calc(333/510*100%);}

    .viewPopup._shortform .viewPopup_container {width: 75%; max-width: 900px;}
    .viewPopup._shortform .viewPopup_container::after {padding-top: calc(546/307*100%);}
}
@media screen and (max-width: 1024px) {
    .viewPopup._youtube .viewPopup_container {width: 75%; max-width: 800px;}

    .viewPopup._instagram .viewPopup_container {width: 75%; max-width: 700px;}

    .viewPopup._shortform .viewPopup_container {width: 75%; max-width: 800px; max-height: 80vh;}

    .viewPopup_close {font-size: 30px;}
}
@media screen and (max-width: 820px) {
    .viewPopup._youtube .viewPopup_container {width: 90%; max-width: 700px;}

    .viewPopup._instagram .viewPopup_container {width: 90%; max-width: 700px;}

    .viewPopup._shortform .viewPopup_container {width: 80%; max-width: 450px; max-height: 90vh;}
}
@media screen and (max-width: 500px) {
    .viewPopup._youtube .viewPopup_container {width: 95%; max-width: 500px;}

    .viewPopup._instagram .viewPopup_container {width: 95%; max-width: 500px;}

    .viewPopup._shortform .viewPopup_container {width: 80%; max-width: 450px; max-height: 90vh;}
}
@media screen and (max-width: 360px) {
    .viewPopup._shortform .viewPopup_container {width: 95%; max-height: 85vh;}
}