/* BASIC css start */
.sub_page_area img {
    padding-bottom: 100px;
}

.sub_page_area .tab_content img {
    padding-bottom: 0;
}

.sub_page_area .tab_content .features img {
    padding: 50px 0;
}

.sliderkit {
    display: block;
}

.sliderkit .sliderkit-nav-clip,
.sliderkit .sliderkit-nav-clip ul {
    width: 100% !important;
}

.contentslider-tab .sliderkit-nav-clip li .thum img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}


#cartridge .border {
    width: 100%;
    border-bottom: 2px solid #a30000;
    margin-bottom: 50px;
}

.cartridge-href {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px 10px;
    max-width: 450px;
    margin-bottom: 50px;
}

.cartridge-href a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 38px;                     /* 버튼 높이 */
    background-color: #fefefe;        /* 기본 배경색 */
    color: #333;                      /* 글자색 */
    border: 1px solid #dcdcdc;        /* 테두리선 */
    border-radius: 6px;               /* 둥근 모서리 */
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease-in-out; /* 부드러운 색상 전환 */
    box-sizing: border-box;
}

.cartridge-href a:hover {
    background-color: #007bff;        /* 호버 시 포인트 배경색 (브랜드 컬러로 변경 가능) */
    color: #ffffff;                   /* 호버 시 글자색 */
    border-color: #007bff;
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.25); /* 살짝 떠오르는 그림자 */
    transform: translateY(-1px);      /* 살짝 올라오는 모션 */
}

.cartridge-container {
    font-family: "Open Sans";
    display: flex;
    max-width: 1200px;
    margin-bottom: 100px;
    color: #333;
    scroll-margin-top: 100px;
}

.cartridge-container .image-section {
    width: 400px;
    height: 300px;
    flex: 0 0 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.cartridge-container .image-section img {
    width: auto;            
    height: auto;
    max-width: none;        
    max-height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
}

.cartridge-container .info-section {
    flex: 1;
}

.cartridge-container .info-title {
    font-size: 34px;
    font-weight: 300;
    margin: 0 0 30px 0;
    color: #222;
    line-height: 1.2;
}

.cartridge-container .cartridge-spec {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.cartridge-container .cartridge-spec th {
    width: 35%;
    color: #a30000;
    font-weight: 700;
    text-align: left;
    background-color: #fff;
}

.cartridge-container .cartridge-spec td {
    color: #555;
    text-align: left;
    line-height: 1.5;
}


/* --- 반응형 (모바일) 대응 --- */
@media (max-width: 768px) {
    .cartridge-container {
        flex-direction: column; /* 좁은 화면에서는 위아래로 배치 */
        margin: 30px;
        padding: 20px;
    }
    .image-section {
        flex: none;
        width: 100%;           /* 이미지 너비 100% */
        max-width: 400px;      /* 너무 커지지 않게 제한 */
    }
    .info-title {
        font-size: 26px;       /* 모바일에서 타이틀 크기 조절 */
    }
}


#accessory .spec-title {
    font-size: 28px;
    font-weight: 700;
    color: #000;
    margin-bottom: 30px;
}

#accessory img {
    margin-bottom: 50px;
}

/* 테이블 스타일 */
.spec-table {
    width: 100%;
    max-width: 1000px;
    border-collapse: collapse;
    font-size: 15px;
    line-height: 1.6;
    margin: 20px 0;
}


/* 모든 셀 공통 */
.spec-table th, .spec-table td {
    padding: 15px 20px;
    border: 1px solid #eee; /* 아주 연한 테두리 */
    text-align: left;
}

/* 좌측 항목 열 (제목) */
.spec-table th {
    width: 25%;
    color: #a30000; /* 붉은색 글씨 */
    font-weight: 500;
}

/* 우측 데이터 열 */
.spec-table td {
    color: #444;
}

/* 홀수 줄 연한 분홍 배경색 */
.spec-table tr:nth-child(odd) {
    background-color: #fdf2f4; /* 연분홍색 */
}

/* 짝수 줄 배경색 */
.spec-table tr:nth-child(even) {
    background-color: #ffffff;
}



/* BASIC css end */