@charset "utf-8";
@import url('reset.css');
@import url('common.css');

/* 
.icon_box,
.footer {
    display: none;
}
 */
.product {
    font-family: "Pretendard-Regular";
    max-width: 176rem;
    width: calc(100% - 60px);
    margin: 0 auto;
    padding: 15rem 0;
    position: relative;
    height: fit-content;

    .item_list {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: clamp(5rem, 3vw + 2rem, 11rem);
        margin-bottom: clamp(5rem, 5vw + 2rem, 10rem);
        position: sticky;
        z-index: 99;
        background-color: #fff;
        width: 100%;
        padding: 2.5rem 0;
        height: 13rem;
        top: 90px;
        transition: 0.7s;

        &.active {
            top: -130px;
            position: sticky;
        }

        .category {
            font-size: clamp(2.4rem, 2vw + 1rem, 4rem);
            font-weight: 400;
            color: rgba(0, 0, 0, 0.4);

            &:hover {
                color: #203163;
            }

            &.active {
                color: #203163;
                background-color: #20316327;
                border-radius: 50%;
                backdrop-filter: blur(4px);

            }
        }
    }

    .product_list {

        .item_wrap {
            display: flex;
            flex-direction: column;
            justify-content: center;
            display: none;


            .item_line {
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: flex-start;

                .item {
                    width: 31.41%;
                    height: auto;


                    &:hover {
                        img {
                            transform: scale(1.2);
                        }
                    }

                    .image {
                        width: 100%;
                        overflow: hidden;
                        border-radius: 2rem;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            transition: 0.4s;
                        }
                    }

                    .text {
                        padding: 1rem clamp(1.5rem, 2vw + 0.5rem, 2.5rem);
                        width: 100%;
                        text-align: center;


                        p {
                            font-size: 2rem;
                            font-weight: 600;
                            color: #203163;
                            margin-bottom: 0.7rem;
                            line-height: 1.2;
                            letter-spacing: 0.3px;
                            word-break: keep-all;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 3;
                            /* 👈 최대 줄 수 */
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        span {
                            font-size: clamp(1.2rem, 1vw + 0.5rem, 1.6rem);
                            font-weight: 500;
                            letter-spacing: 0.5px;
                            line-height: 1.2;
                            color: rgba(0, 0, 0, 0.8);
                            word-break: break-all;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 3;
                            /* 👈 최대 줄 수 */
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }

                        .price {
                            margin-top: 1rem;
                            display: flex;
                            flex-direction: column;
                            align-items: center;
                            justify-content: center;
                            gap: 0.4rem;

                            .before {
                                text-decoration-line: line-through;
                                color: rgba(0, 0, 0, 0.6);
                            }

                            strong {
                                font-size: 2.4rem;
                                color: #203163;
                                font-weight: 700;
                            }
                        }
                    }

                    /*                     &.none {
                        opacity: 0;
                        visibility: hidden  ;
                    } */
                }
            }
        }

        .item_wrap:first-child {
            display: block;
        }

    }
}

@media screen and (max-width: 1300px) {}

@media screen and (max-width: 768px) {
    .product {

        .item_list {
            gap: 4rem;
            flex-wrap: wrap;

        }
    }

}

@media screen and (max-width: 500px) {

    .header {
        .inner {
            .logo {
                
                width: 10rem;
            }
        }
    }



    .product {

        .item_list {
            flex-wrap: wrap;
            gap: 2rem;

            &.active {}

        }

        .product_list {
            .item_wrap {
                flex-wrap: wrap;

                .item_line {
                    flex-wrap: wrap;
                    gap: 3rem;

                    .item {
                        width: 100%;

                    }

                }
            }

        }
    }

    .footer {
        .inner {
            .top {
                .right {
                    gap: 2.8rem;
                    flex-wrap: wrap;
                }
            }

            .center {
                .list3 {
                    .image {
                        width: 100%;

                        span {}
                    }
                }
            }
        }
    }


}