﻿body {
    user-select: none;
    box-sizing: border-box;
    font-family: "Pretendard, sans-serif";
}

* {
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.Product_Container {
    display: flex;
    flex-direction: column;
    padding: 60px 20px 0; /* 양쪽 패딩 추가 */
    background: url('/images/background.png') no-repeat right top;
    background-blend-mode: soft-light;
    background-size: 50%;
    width: 100%; /* 100%로 변경 */
    max-width: 1610px; /* 최대 너비 설정 */
    margin: 0 auto;
}

.Prod_Tit {
    display: flex;
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap; /* 줄바꿈 허용 */
    align-items: flex-start; /* 시작점 정렬로 변경 */
    justify-content: space-between;
    gap: 30px; /* 요소 간 간격 추가 */
}

    .Prod_Tit h2 {
        color: #021623;
        font-size: calc(1.6rem + 1vw);
        padding-bottom: calc(20px + 1vw);
    }

    .Prod_Tit p {
        line-height: 32px;
        font-size: calc(0.7rem + 0.7vw);
        color: #787878;
    }

.intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1; /* 남은 공간 차지 */
    min-width: 300px; /* 최소 너비 설정 */
}

.contactBox {
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

    .contactBox ul li {
        line-height: 24px;
    }

    .contactBox h4 {
        font-size: 16px;
        font-weight: bold;
        padding-bottom: 7px;
        margin-left: 30px;
    }

        .contactBox h4 img {
            height: 24px;
            margin-right: 7px;
            vertical-align: middle; /* 이미지 수직 정렬 */
        }

/* 제품 목록 */
.Product_List {
    width: 100%;
    margin-top: 50px;
}

.Product_Info {
    width: 100%;
    height: auto;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important; /* 반응형 그리드 */
    justify-content: center !important;
    align-items: center !important;
    padding: 50px 0;
    border-bottom: 1px solid #787878;
    gap: 30px; /* 간격 조정 */
}

/* 제품 설명 스타일 수정 */
.Product_Title, .Other_Tit {
    padding: 0 20px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: auto; /* 자동 높이로 변경 */
}

    .Product_Title h2, .Other_Tit h2 {
        font-size: calc(1rem + 1vw);
        margin-bottom: 25px;
        font-weight: bold;
        color: #4d8fcc;
        -webkit-text-stroke: 0.5px #4D8FCC;
        letter-spacing: -1px;
        word-break: keep-all; /* 단어 분리 방지 */
    }

    .Product_Title p, .Other_Tit p {
        font-size: calc(0.8rem + 0.5vw);
        line-height: 1.6;
        color: #021623;
        letter-spacing: -1px;
        word-break: keep-all; /* 단어 분리 방지 */
    }

.Slider_Container {
    overflow: hidden;
    width: 100%; /* 100%로 변경 */
    max-width: 750px; /* 최대 너비 설정 */
    height: 350px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f5f5f5;
    border-radius: 10px;
    margin: 0 auto; /* 중앙 정렬 */
}

.Slider {
    width: 100%;
    height: 330px;
    display: flex;
}

    .Slider img {
        width: 100%; /* 100%로 변경 */
        height: 85%;
        object-fit: contain;
    }

.Slider_Item {
    min-width: 100%; /* 최소 너비 설정 */
    display: flex;
    justify-content: center;
    align-items: center;
}

.Slider_Buttons {
    margin-top: -5px;
    width: 220px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.PSWrap .Slider_Buttons {
    width: 220px;
}

.Slider_Buttons button {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    cursor: pointer;
    border: 0;
    background: #ccc;
    color: #ccc;
}

    .Slider_Buttons button.active {
        background-color: #4d8fcc !important;
        color: #4d8fcc !important;
    }

/* 미디어 쿼리 추가 */
@media screen and (max-width: 1200px) {
    .Product_Info {
        grid-template-columns: 1fr !important; /* 한 열로 변경 */
    }

    .Slider_Container {
        order: -1; /* 모든 슬라이더를 위로 */
        margin-bottom: 30px;
    }
}

@media screen and (max-width: 768px) {

    .contactBox {
        padding: 5px 0;
        width: 100%;
        margin-left: -30px;
    }

        .contactBox h4 {
            font-size: 16px;
        }

    .Slider_Container {
        height: 300px;
    }

    .Slider {
        height: 280px;
    }
}
