@charset "utf-8";

body {
    margin: 0;
    padding: 0;
    text-align: center; /* 인라인-block 요소를 가운데로 */
}

/* PC에서 이미지 박스 기본 스타일 (가운데 정렬) */
.imgbox, .imgbox01, .imgbox04 {
    display: flex;
    flex-wrap: wrap;             /* 여러 줄 허용 */
    
    gap: 2%;                     /* 이미지 간격 */
    margin: 30px auto 0 auto;
}

.imgbox01 {
    margin-top: 140px;
}

.imgbox04 {
    margin-bottom: 80px;
}

.item {
    width: 15%;
    height: auto;
    overflow: hidden;
    margin: 10px; /* 간격 조정 */
}

.item img {
    width: 100%;
    height: 100%;  /* 비율을 유지하면서 크기 조정 */
    object-fit: cover; /* 이미지 크기가 맞춰지지 않으면, 비율을 유지하면서 꽉 채우도록 설정 */
    display: block;
}

.item img:hover {
    transform: scale(1.1) rotate(3deg);
}

/* 기본적으로 PC에서만 보이도록 설정 (모바일에서는 숨김) */
.imgbox01, .imgbox, .imgbox04 {
    display: block; /* PC에서 보이도록 */
}

.mobi_imgbox01, .mobi_imgbox, .mobi_imgbox04 {
    display: none; /* 모바일에서는 숨기기 */
}






/*모바일 */

/* 모바일 화면 크기에서만 mobi_imgbox01 보이도록 설정 */
@media screen and (max-width: 768px) {
    /* PC에서 보이던 박스를 모바일에서 숨기기 */
    .imgbox01, .imgbox, .imgbox04 {
        display: none; /* PC에서는 숨기기 */
    }

    /* 모바일에서 보이도록 설정 */
    .mobi_imgbox01, .mobi_imgbox, .mobi_imgbox04 {
        display: flex; /* 모바일에서 보이도록 */
        justify-content: center; /* 가로 가운데 정렬 */
        align-items: center; /* 세로 가운데 정렬 */
        width: 100%; /* 너비 100%로 설정 */
        gap: 2%;
    }

    /* 모바일에서 이미지 크기 조정 (필요시) */
    .mobi_imgbox01 .item, .mobi_imgbox .item, .mobi_imgbox04 .item {
        width: 30%; /* 모바일에서 이미지 크기 조정*/
    }

    .mobi_imgbox01 {
        margin-top: 100px;
    }

    .mobi_imgbox04 {
        margin-bottom: 90px;
    }

    .item {
        margin: 5px 0 5px 0;
    }
}