@charset "UTF-8";


.project_list_wrap{width: 100%;padding: calc((50px * 1.2) + (32px + 16px)) var(--main-page-x) 96px;}

.project_cate_box{width: 100%;overflow-x: auto;overflow-y: hidden;scrollbar-width: none;-webkit-overflow-scrolling: touch;touch-action: pan-x;cursor: default;}
.project_cate_box::-webkit-scrollbar{display: none;}
.project_cate_box .cate_list{display: flex;width: max-content;align-items: center;flex-wrap: nowrap;column-gap: 24px;cursor: grab;user-select: none;}
.project_cate_box .cate_list.is_dragging{cursor: grabbing;}
.project_cate_box .cate_item{flex: 0 0 auto;}
.project_cate_box .cate_item .cate_link{display: inline-block;line-height: 0;cursor: pointer;}
.project_cate_box .cate_list.is_dragging .cate_link{cursor: grabbing;}
.project_cate_box .cate_item .cate_name{display: inline-block;font-size: var(--fs-20);font-weight: 300;line-height: var(--lh-26);color: var(--color-gray4);letter-spacing: -0.025em;white-space: nowrap;transition: color 0.3s ease,-webkit-text-stroke 0.3s ease;}
.project_cate_box .cate_item.is_selected .cate_name{color: var(--color-blue);-webkit-text-stroke: 0.8px var(--color-blue);}

.project_grid_box{display: flex;flex-direction: column;row-gap: 20px;width: 100%;margin: 0 auto;}
.project_cate_box + .project_grid_box{margin-top: 24px;}
.project_grid_box .project_grid_row{display: grid;width: 100%;column-gap: 20px;}
.project_grid_box .grid_row_14_9{grid-template-columns: minmax(0,14fr) minmax(0,9fr);}
.project_grid_box .grid_row_9_14{grid-template-columns: minmax(0,9fr) minmax(0,14fr);}
.project_grid_box .grid_row_full{grid-template-columns: minmax(0,1fr);}
.project_grid_box .grid_row_half{grid-template-columns: repeat(2,minmax(0,1fr));}


.project_grid_box .project_item{position: relative;min-width: 0;border-radius: 20px;overflow: hidden;}
.project_grid_box .project_item:after{content: '';display: block;position: absolute;z-index: 1;bottom: 0;left: 0;width: 100%;height: 60%;background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);opacity: 0;visibility: hidden;transition: opacity .4s ease, visibility .4s ease;pointer-events: none;}
.project_grid_box .project_link{position: relative;display: block;width: 100%;height: 100%;overflow: hidden;}
.project_grid_box .project_img_box{position: relative;width: 100%;height: 100%;overflow: hidden;}
.project_grid_box .project_img_box img{display: block;width: 100%;height: 100%;object-fit: cover;transition: transform .6s ease;}


.project_grid_box .grid_row_14_9 .project_item:nth-child(1){aspect-ratio: 700 / 400;}
.project_grid_box .grid_row_14_9 .project_item:nth-child(2){aspect-ratio: 450 / 400;}
.project_grid_box .grid_row_9_14 .project_item:nth-child(1){aspect-ratio: 450 / 400;}
.project_grid_box .grid_row_9_14 .project_item:nth-child(2){aspect-ratio: 700 / 400;}
.project_grid_box .grid_row_full .project_item{aspect-ratio: 1180 / 400;}
.project_grid_box .grid_row_half .project_item{aspect-ratio: 575 / 400;}


.project_grid_box .project_desc_box{position: absolute;left: 0;bottom: 0;z-index: 2;display: flex;align-items: flex-end;justify-content: space-between;width: 100%;padding: 0 24px 36px;opacity: 0;visibility: hidden;transform: translateY(15px);transition: opacity .35s ease, visibility .35s ease, transform .35s ease;}
.project_grid_box .desc_left{min-width: 0;}
.project_grid_box .desc_right{flex: 0 0 auto;margin-left: 20px;}

.project_grid_box .project_tit{font-size: var(--fs-20);font-weight: 600;line-height: var(--lh-28);color: var(--color-white-txt);letter-spacing: -0.025em;}
.project_grid_box .project_cate{font-size: var(--fs-16);font-weight: 400;line-height: var(--lh-24);color: var(--color-white-txt);letter-spacing: -0.025em;}
.project_grid_box .arrow_txt{font-size: var(--fs-20);font-weight: 600;line-height: var(--lh-24);color: var(--color-white-txt);letter-spacing: -0.025em;}


@media (hover: hover) and (pointer: fine){
    .project_grid_box .project_item:hover:after{opacity: 1;visibility: visible;}
    .project_grid_box .project_item:hover .project_desc_box{opacity: 1;visibility: visible;transform: translateY(0);}
    .project_grid_box .project_item:hover .project_img_box img{transform: scale(1.15);}
}

@media (max-width: 1440px){}

@media (max-width: 1200px){
    .project_list_wrap{width: 100%;padding: calc(80px + 32px) var(--main-page-x) 64px;}


    .project_grid_box{row-gap: 24px;}
    .project_grid_box .project_grid_row{column-gap: 24px;}
    .project_grid_box .grid_row_14_9,
    .project_grid_box .grid_row_9_14,
    .project_grid_box .grid_row_half{grid-template-columns: repeat(2,minmax(0,1fr));}
    .project_grid_box .grid_row_14_9 .project_item:nth-child(1),
    .project_grid_box .grid_row_14_9 .project_item:nth-child(2),
    .project_grid_box .grid_row_9_14 .project_item:nth-child(1),
    .project_grid_box .grid_row_9_14 .project_item:nth-child(2),
    .project_grid_box .grid_row_half .project_item{aspect-ratio: 1 / 1;}
    .project_grid_box .grid_row_full .project_item{aspect-ratio: 2 / 1;}
    .project_grid_box .project_desc_box{padding: 24px;}
}

@media (max-width: 768px){
    .project_grid_box{row-gap: 20px;}
    .project_grid_box .project_grid_row,
    .project_grid_box .grid_row_14_9,
    .project_grid_box .grid_row_9_14,
    .project_grid_box .grid_row_full,
    .project_grid_box .grid_row_half{row-gap: 20px;}
    .project_grid_box .project_item{border-radius: 16px;}
    .project_grid_box .project_desc_box{padding: 20px;opacity: 1;visibility: visible;transform: translateY(0);}
    .project_grid_box .desc_right{margin-left: 16px;}
}


@media (max-width: 650px){
    .project_list_wrap{width: 100%;padding: calc(68px + 24px) var(--main-page-x) 56px;}

    .project_cate_box .cate_list{column-gap: 16px;}
    .project_cate_box .cate_item .cate_name{font-size: var(--fs-16);line-height: var(--lh-20);}
    
    .project_grid_box{row-gap: 16px;}
    .project_grid_box .project_grid_row,
    .project_grid_box .grid_row_14_9,
    .project_grid_box .grid_row_9_14,
    .project_grid_box .grid_row_full,
    .project_grid_box .grid_row_half{grid-template-columns: minmax(0,1fr);row-gap: 16px;}
    .project_grid_box .grid_row_14_9 .project_item:nth-child(1),
    .project_grid_box .grid_row_14_9 .project_item:nth-child(2),
    .project_grid_box .grid_row_9_14 .project_item:nth-child(1),
    .project_grid_box .grid_row_9_14 .project_item:nth-child(2),
    .project_grid_box .grid_row_full .project_item,
    .project_grid_box .grid_row_half .project_item{aspect-ratio: 1 / 1;}
    .project_grid_box .project_desc_box{padding: 18px;}
    .project_grid_box .desc_right{margin-left: 12px;}
}