/* ported page css: company_pop-up-store */

/* 전역 * 글꼴 지정은 헤더·푸터 글꼴까지 바꿔서 이 페이지 영역으로 한정 */
.pus_section, .pus_section * {
    font-family: "Pretendard Variable", "Pretendard", "Segoe UI", sans-serif;
}
.bebas-neue-regular {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.pus_section{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    /* 캐릭터 이미지 등 의도적으로 튀어나오는 요소가 좁은 화면(1080~1260px)에서
       가로 스크롤을 만들지 않도록 가로만 클리핑. clip은 세로(overflow-y)에는
       영향을 주지 않아 아래로 튀어나오는 연출은 그대로 유지된다. */
    overflow-x: clip;
}
.pus_banner_top{
    width: 100%;
}
.pus_banner_top_picture{
    width: 100%;
}
.pus_banner_top_img{
    width: 100%;
}
.pus_body{
    position: relative;
    width: 100%;
    max-width: 126rem;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
}
.pus_information{
    position: absolute;
    transform: translate(-50%, -50%);
    left: 50%;
    top: 0;
    display: flex;
    justify-content: space-between;
    width: 126rem;
    background-color: white;
    border-radius: 2rem;
    height: 15rem;
    box-shadow: 2px 6px 16px 4px rgba(48, 1, 92, 0.05);
}
.pus_information_box{
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 3px solid #F5F2FE;
    width: 33.333%;
    height: 9rem;
    margin: 3rem 0;
}
.pus_information_box:last-child{
    border: none;
}
.pus_information_box_icon{
    width: 5rem;
    height: 5rem;
}
.pus_information_box_icon_img{
    width: 100%;
}
.pus_information_box_text{
    margin-left: 2.2rem;
}
.pus_information_box_text_top{
    font-weight: 700;
    font-size: 2.4rem;
}
.pus_information_box_text_bottom{
    font-size: 1.8rem;
}
.pus_title{
    position: relative;
    display: inline-block;
    font-size: 4.2rem;
    font-weight: 700;
}
.pus_title::after{
    content: '';
    position: absolute;
    width: 3.2rem;
    height: 3.2rem;
    background: url('/img/popup/Icon_Twinkle.svg') center/contain no-repeat;
    left: calc(100% + 1.2rem);
    top: 0;
}
.pus_content{
    font-size: 2.4rem;
    font-weight: 400;
    margin: 2rem 0 5rem 0;
}
.pus_card{
    margin-top: 6rem;
    width: 100%;
}
.pus_about{
    position: relative;
    margin-top: 24.5rem;
    display: flex;
}
.pus_about_left{
    width: 60rem;
    position: relative;
    z-index: 1;
}
.pus_about_left_img_container{
    display: flex;
    gap: 2.2rem;
}
.pus_about_left_left_img{
    width: 24rem;
    border-radius: 2rem;
}
.pus_about_left_right_img_container{
    width: 26rem;
    display: flex;
    flex-direction: column;
    gap: 2.2rem;
}
.pus_about_left_right_img{
    width: 100%;
    border-radius: 2rem;
}
.pus_about_pattern{
    position: absolute;
    top: calc(50% - 6.3rem);
    left: calc(50% - 2rem);
    transform: translate(-50%, -50%);
    width: 26rem;
    height: 26rem;
}
.pus_about_pattern_img{
    width: 100%;
}
.pus_about_right{
    width: 66rem;
    position: relative;
}
.pus_about_right_img{
    width: 100%;
    border-radius: 2rem;
}
.pus_about_chracter_img{
    position: absolute;
    bottom: -22rem;
    width: 24rem;
    height: 26rem;
    transform: translate(-50%, -50%);
}
.pus_highlight{
    width: 100%;
    margin-top: 16rem;
}
.pus_highlight_container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    margin-top: 2rem;
}
.pus_highlight_box{
    width: 33.333%;
    height: 35rem;
    border-radius: 2rem;
    border: 2px solid #742CF0;
    padding-left: 3rem;
    transition: 0.3s transform ease-in-out;
}
.pus_highlight_box:hover{
    transform: translateY(-10px);
}
.pus_highlight_box_title_wrapper{
    display: flex;
    margin-top: 3rem;
    margin-bottom: 1rem;
}
.pus_highlight_box_num{
    background-color: #742CF0;
    color: white;
    border-radius: 2rem;
    font-size: 1.7rem;
    font-weight: 700;
    width: 3.5rem;
    height: 3.5rem;
    margin-right: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pus_highlight_box_title{
    font-size: 2.4rem;
    font-weight: 700;
}
.pus_highlight_content{
    font-size: 1.8rem;
    margin-bottom: 2.5rem;
    line-height: 2.4rem;
}
.pus_highlight_img_wrapper{
    width: calc(100% - 3rem);
}
.pus_highlight_img{
    width: 100%;
    border-radius: 2rem;
}
.pus_photos{
    margin-top: 16rem;
    width: 100%;
}
.pus_photos_grid{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2rem;
}
.pus_photos_img{
    width: 100%;
    border-radius: 2rem;
}
.pus_photos_grid{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    overflow: hidden;
    max-height: 43rem; /* 사진 2줄 높이에 맞게 조절 */
    transition: max-height .6s ease;
    margin-top: 2rem;
}
.pus_photos_grid.open{
    max-height: 500rem;
}
.pus_photos_more_btn{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.2rem;

    width: 25rem;
    height: 5rem;
    margin: 4rem auto 0;

    border: 1px solid #742CF0;
    border-radius: 1rem;
    background: #fff;

    color: #742CF0;
    font-size: 2rem;

    cursor: pointer;
}
.pus_photos_more_btn:hover{
    background: #742CF0;
    color: white;
}
.pus_photos_more_btn::after{
    content: '';
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform .3s ease;
}

.pus_photos_more_btn.open::after{
    transform: rotate(315deg);
    margin-top: 1rem;
}
.pus_video{
    margin-top: 16rem;
    width: 100%;
}
.pus_banner_bottom{
    width: 100%;
    margin-top: 11.5rem;
}
.pus_banner_bottom_picture{
    width: 100%;
}
.pus_banner_bottom_img{
    width: 100%;
}
.bottombar{
    margin-top: 0 !important;
}
iframe{
    border-radius: 1rem;
    margin-top: 2rem;
}
@media (max-width: 1079px){
    .pus_section{
        overflow: hidden;
    }

    .pus_body{
        width: calc(100% - 3rem);
        max-width: none;
    }

    .pus_card{
        margin-top: 6rem;
    }

    .pus_title{
        font-size: 2rem;
    }

    .pus_title::after{
        width: 2rem;
        height: 2rem;
        left: calc(100% + .6rem);
    }

    /* 정보 카드 */

    .pus_information{
        position: relative;
        left: auto;
        top: auto;
        transform: none;

        width: 100%;
        height: auto;

        margin-top: -2.5rem;

        flex-direction: column;
        border-radius: 2rem;
        padding: 1rem;
        padding-left: 4rem;
        box-sizing: border-box;
        height: 22rem;
        box-shadow: 2px 6px 42px 6px rgba(81, 3, 155, 0.13);
    }

    .pus_information_box{
        width: 100%;
        height: auto;

        margin: 0;
        padding: 1.5rem 0;

        justify-content: flex-start;

        border-right: none;
        border-bottom: 1px solid #eee;
    }

    .pus_information_box:last-child{
        border-bottom:none;
    }

    .pus_information_box_icon{
        width: 3rem;
        height: 3rem;
    }

    .pus_information_box_text_top{
        font-size: 1.4rem;
        font-weight: 600;
    }

    .pus_information_box_text_bottom{
        font-size: 1.1rem;
    }

    /* ABOUT */

    .pus_about{
        margin-top: 5rem;
        flex-direction: column;
        gap: 3rem;
    }

    .pus_about_left,
    .pus_about_right{
        width: 100%;
    }

    .pus_content{
        font-size: 1.1rem;
        line-height: 1.5;
        margin: .8rem 0 1.3rem;
    }

    .pus_about{
        position: unset;
    }

    .pus_about_left_img_container{
        gap: 1rem;
    }

    .pus_about_left_left_img{
        width: calc(47% - .5rem);
        border-radius: 1rem;
    }

    .pus_about_left_right_img{
        border-radius: 1rem;
    }

    .pus_about_left_right_img_container{
        width: calc(53% - .5rem);
        gap: 1rem;
    }
    
    .pus_about_right{
        position: unset;
    }

    .pus_about_right_img{
        display: none;
    }

    .pus_about_pattern{
        display:none;
    }

    .pus_about_chracter_img{
        width: 10rem;
        height: auto;

        right: -3rem;
        top: 13.5rem;

        transform:none;
    }

    /* HIGHLIGHT */

    .pus_highlight{
        margin-top: 6rem;
    }

    .pus_highlight_container{
        justify-content: flex-start;   /* 스크롤 목록에서는 space-between 대신 시작 정렬 */
        flex-wrap: nowrap;
        overflow-x:auto;
        overflow-y:hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        gap:1.5rem;
        padding-bottom:1rem;
        margin-top: 1rem;
    }

    .pus_highlight_container::-webkit-scrollbar{
        display:none;
    }

    .pus_highlight_box{
        flex:none;
        width: 28rem;
        height:auto;
        padding:2rem;
        border-color: #C2A3F8;
        border-radius: 1rem;
        scroll-snap-align: start;
    }
    .pus_highlight_box:hover{
        transform: none;
    }
    .pus_highlight_img{
        border-radius: 1rem;
    }
    .pus_highlight_box_title_wrapper{
        margin-top: 0;
    }
    .pus_highlight_box_num{
        font-size: 1rem;
        width: 2rem;
        height: 2rem;
        margin-right: 1rem;
    }
    .pus_highlight_box_title{
        font-size:1.4rem;
    }

    .pus_highlight_content{
        font-size:1.1rem;
        line-height:1.5rem;
        margin-bottom: 2rem;
    }

    .pus_highlight_img_wrapper{
        width:100%;
    }

    /* PHOTO */

    .pus_photos{
        margin-top:6rem;
    }

    .pus_photos_grid{
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;

        max-height: 24rem;
        margin-top: 1rem;
    }
    .pus_photos_img{
        border-radius: 1rem;
    }

    .pus_photos_more_btn{
        width:18rem;
        height:4rem;

        font-size:1.4rem;
        margin-top:2rem;
        border-radius: .5rem;
    }

    /* VIDEO */

    .pus_video{
        margin-top:6rem;
    }

    .pus_video iframe{
        width:100%;
        height:auto;
        aspect-ratio:16/9;
        margin-top: 1rem;
    }
    .pus_banner_bottom{
        margin-top: 7rem;
    }

}
.image-modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    z-index: 9999;
    justify-content: center;
    align-items: center;
    -webkit-user-select: none; /* 크롬, 사파리, 오페라 */
    -moz-user-select: none;    /* 파이어폭스 */
    -ms-user-select: none;     /* 인터넷 익스플로러 */
    user-select: none;         /* 표준 속성 */
}

.image-modal img {
    max-width: 95vw;
    max-height: 95vh;
    width: auto;
    height: auto;
}

.image-modal .close {
    position: absolute;
    top: 5rem;
    color: #fff;
    font-size: 40px;
    width: 8rem;
    height: 8rem;
    border-radius: 50%;
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    cursor: pointer;
    box-shadow: 5px 5px 10px rgb(0, 0, 0, 0.5);
}
.pus_photos_img, .pus_about_left_right_img, .pus_about_left_left_img, .pus_about_right_img, .pus_highlight_img{
    cursor: pointer;
}