@charset "UTF-8";
#main{position: relative;width: 100%;background-color: var(--color-white-bg);isolation: isolate;}

#main.main_component{width: 100%;min-height: 100dvh;overflow: hidden;}
#main .main_sect_wrap{position: relative;width: 100%;padding: 0 var(--main-page-x) 0 var(--main-content-left);box-sizing: border-box;}
#main .main_sect{}
/* #main .main_reveal{visibility: hidden;opacity: 0;} */


#main .main_sect01{}
#main .main_sect01 .sect_inner{width: 100%;min-height: 100dvh;padding: 16px 0;position: relative;box-sizing: border-box;}
#main .main_sect01 .sect_bd{width: 100%;padding-top: calc((300px * 1.2) - 16px);box-sizing: border-box;}
#main .main_sect01 .sect_ft{position: absolute;left: 0;bottom: 16px;}
#main .main_sect01 .sect_cnt_box{}
#main .main_sect01 .cnt_intro_txt{font-size: var(--fs-60);font-weight: 400;line-height: var(--lh-120);color: var(--color-blue);letter-spacing: -0.025em;}
#main .main_sect01 .cnt_intro_motto{font-size: var(--fs-20);font-weight: 400;line-height: var(--lh-120);color: var(--color-blue);letter-spacing: -0.025em;}

#main .main_sect02{}
#main .main_sect02 .sect_inner{width: 100%;min-height: 100dvh;padding: 48px 0 16px;position: relative;box-sizing: border-box;}
#main .project_grid_box{display: flex;flex-direction: column;row-gap: 30px;width: 100%;margin: 0 auto;}
#main .project_grid_box .project_grid_row{display: grid;width: 100%;column-gap: 30px;}
#main .project_grid_box .grid_row_14_9{grid-template-columns: minmax(0,14fr) minmax(0,9fr);}
#main .project_grid_box .grid_row_9_14{grid-template-columns: minmax(0,9fr) minmax(0,14fr);}
#main .project_grid_box .grid_row_full{grid-template-columns: minmax(0,1fr);}
#main .project_grid_box .grid_row_half{grid-template-columns: repeat(2,minmax(0,1fr));}

#main .project_grid_box .project_item{position: relative;min-width: 0;border-radius: 20px;overflow: hidden;}
#main .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;}
#main .project_grid_box .project_link{position: relative;display: block;width: 100%;height: 100%;overflow: hidden;}
#main .project_grid_box .project_img_box{position: relative;width: 100%;height: 100%;overflow: hidden;}
#main .project_grid_box .project_img_box img{display: block;width: 100%;height: 100%;object-fit: cover;transition: transform .6s ease;}

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

#main .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;}
#main .project_grid_box .desc_left{min-width: 0;}
#main .project_grid_box .desc_right{flex: 0 0 auto;margin-left: 20px;}

#main .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;}
#main .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;}
#main .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){
    #main .project_grid_box .project_item:hover:after{opacity: 1;visibility: visible;}
    #main .project_grid_box .project_item:hover .project_desc_box{opacity: 1;visibility: visible;transform: translateY(0);}
    #main .project_grid_box .project_item:hover .project_img_box img{transform: scale(1.15);}
}
@media (max-width: 1440px){
    #main .main_sect01 .sect_bd{padding-top: calc((240px * 1.2) - 16px);}
    #main .main_sect01 .cnt_intro_txt{font-size: var(--fs-50);}
}
@media (max-width: 1200px){
    #main .main_sect_wrap{padding: 0 var(--main-page-x);transform: translateY(var(--mobile-menu-height, 0px));transition: transform .5s cubic-bezier(.65,0,.35,1);}

    #main .main_sect01 .sect_inner{min-height: 80dvh;}
    #main .main_sect01 .sect_bd{padding-top: calc((125px * 1.2) + 64px);}
    #main .main_sect01 .sect_ft{left: unset;right: 0;}
    #main .main_sect01 .cnt_intro_motto{text-align: right;}

    #main .main_sect01 .cnt_intro_txt{font-size: var(--fs-30);}
    
    #main .project_grid_box{row-gap: 24px;}
    #main .project_grid_box .project_grid_row{column-gap: 24px;}
    #main .project_grid_box .grid_row_14_9,
    #main .project_grid_box .grid_row_9_14,
    #main .project_grid_box .grid_row_half{grid-template-columns: repeat(2,minmax(0,1fr));}
    #main .project_grid_box .grid_row_14_9 .project_item:nth-child(1),
    #main .project_grid_box .grid_row_14_9 .project_item:nth-child(2),
    #main .project_grid_box .grid_row_9_14 .project_item:nth-child(1),
    #main .project_grid_box .grid_row_9_14 .project_item:nth-child(2),
    #main .project_grid_box .grid_row_half .project_item{aspect-ratio: 1 / 1;}
    #main .project_grid_box .grid_row_full .project_item{aspect-ratio: 2 / 1;}
    #main .project_grid_box .project_desc_box{padding: 24px;}
}
@media (max-width: 768px){
    #main .project_grid_box{row-gap: 20px;}
    #main .project_grid_box .project_grid_row,
    #main .project_grid_box .grid_row_14_9,
    #main .project_grid_box .grid_row_9_14,
    #main .project_grid_box .grid_row_full,
    #main .project_grid_box .grid_row_half{row-gap: 20px;}
    #main .project_grid_box .project_item{border-radius: 16px;}
    #main .project_grid_box .project_desc_box{padding: 20px;opacity: 1;visibility: visible;transform: translateY(0);}
    #main .project_grid_box .desc_right{margin-left: 16px;}
}
@media (max-width: 650px){
    #main .main_sect01 .sect_bd{padding-top: calc((125px * 1.2) + 52px);}
    
    #main .project_grid_box{row-gap: 16px;}
    #main .project_grid_box .project_grid_row,
    #main .project_grid_box .grid_row_14_9,
    #main .project_grid_box .grid_row_9_14,
    #main .project_grid_box .grid_row_full,
    #main .project_grid_box .grid_row_half{grid-template-columns: minmax(0,1fr);row-gap: 16px;}
    #main .project_grid_box .grid_row_14_9 .project_item:nth-child(1),
    #main .project_grid_box .grid_row_14_9 .project_item:nth-child(2),
    #main .project_grid_box .grid_row_9_14 .project_item:nth-child(1),
    #main .project_grid_box .grid_row_9_14 .project_item:nth-child(2),
    #main .project_grid_box .grid_row_full .project_item,
    #main .project_grid_box .grid_row_half .project_item{aspect-ratio: 1 / 1;}
    #main .project_grid_box .project_desc_box{padding: 18px;}
    #main .project_grid_box .desc_right{margin-left: 12px;}
}

@media (max-width: 480px){
    #main .main_sect01 .sect_bd{padding-top: calc((100px * 1.2) + 52px);}
    #main .main_sect01 .cnt_intro_txt{font-size: var(--fs-24);line-height: var(--lh-30);}
    #main .main_sect01 .cnt_intro_motto{font-size: var(--fs-16);line-height: var(--lh-22);}
}
@media (max-width: 375px){
    #main .main_sect01 .sect_bd{padding-top: calc((80px * 1.2) + 52px);}
    #main .main_sect01 .cnt_intro_txt{font-size: var(--fs-20);line-height: var(--lh-26);}
    #main .main_sect01 .cnt_intro_motto{font-size: var(--fs-14);line-height: var(--lh-20);}
}
@media (max-width: 320px){
    #main .main_sect01 .sect_bd{padding-top: calc((60px * 1.2) + 52px);}
    #main .main_sect01 .cnt_intro_txt{font-size: var(--fs-18);line-height: var(--lh-24);}
    #main .main_sect01 .cnt_intro_motto{font-size: var(--fs-12);line-height: var(--lh-18);}
}