/* 공식 사이트 배너 스타일 */
.official_link_banner .banner_wrap {
    display: flex;
    align-items: center;
    background-color: #f7f7f7;
    text-decoration: none;
    overflow: hidden;
    border-radius: 8px;
    transition: background 0.3s;
}



.official_link_banner .banner_img {
    flex: 0 0 50%; /* 이미지 영역 50% */
    /*background: #7986ff;*/
    line-height: 0;
}

.official_link_banner .banner_img img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.official_link_banner .banner_txt {
    flex: 1;
    padding: 40px 60px;
    color: #fff;
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.official_link_banner .banner_txt strong {
    display: block;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -0.05em;
}

.official_link_banner .banner_txt p {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.05em;
}

/* 공식 사이트 배너 내 심플 화살표 */
.official_link_banner .banner_txt .arrow_right {
    display: inline-block;
    width: 25px;
    height: 25px;
    border-top: 3px solid rgb(85, 85, 85);
    border-right: 3px solid rgb(85, 85, 85);
    transform: rotate(45deg);
    transition: transform 0.3s ease;
    margin-right: 20px; /* 우측 여백 */
}

/* 마우스 오버 시 살짝 움직이는 효과 */
.official_link_banner .banner_wrap:hover .arrow_right {
    transform: rotate(45deg) translate(5px, -5px);
}

/* 텍스트 정렬 미세 조정 */
.official_link_banner .banner_txt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 50px; /* 패딩 최적화 */
}


/* 반응형 */
@media (max-width: 1024px) {
    .official_link_banner .banner_txt strong { font-size: 16px; }
    .official_link_banner .banner_txt p { font-size: 14px; }
}

@media (max-width: 768px) {
    .official_link_banner .banner_wrap { flex-direction: column; }
    .official_link_banner .banner_img { flex: none; width: 100%; }
    .official_link_banner .banner_txt { width: 100%; padding: 30px; }
}


/* =========================================
   상품 리스트 반응형 Grid 레이아웃 (PC 4단 / 모바일 2단)
========================================= */

/* 1. PC: 4단 Grid 구성 및 기존 그누보드 틀 깨기 */
ul.sct.sct_10 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* 정확히 4등분 */
    gap: 20px; /* 상품 상하좌우 간격 */
    width: 100%;
    margin: 0;
    padding: 0;
}

/* 2. 개별 상품 리스트 인라인 스타일(width:230px) 무력화 */
ul.sct.sct_10 li.sct_li {
    width: 100% !important; /* 강제 width 덮어쓰기 */
    margin: 0 !important; /* 그누보드 기본 여백 제거 */
    clear: none !important; /* sct_clear(줄바꿈) 속성 무력화 */
    float: none !important; /* 기존 float 배열 해제 */
}

/* 3. 상품 이미지 반응형 처리 (기존 width=230 무시) */
ul.sct.sct_10 li.sct_li .sct_img img {
    width: 100% !important;
    max-width: 100%;
    height: auto !important; /* 원본 비율 유지 */
    display: block;
}

/* 4. 모바일 화면 (가로 768px 이하): 2단 구성으로 자동 전환 */
@media (max-width: 768px) {
    ul.sct.sct_10 {
        grid-template-columns: repeat(2, 1fr) !important; /* 2등분으로 변경 */
        gap: 10px; /* 모바일 화면에 맞춰 간격 축소 */
    }
    
    /* 텍스트가 너무 크면 모바일에서 어색할 수 있으므로 살짝 조정 (선택사항) */
    ul.sct.sct_10 li.sct_li .sct_txt {
        font-size: 14px; 
    }
}

/* 5. 상품 카드 내부 요소 세로 정렬 (이미지 옆으로 글자 새는 현상 완벽 차단) */
ul.sct.sct_10 li.sct_li {
    display: flex !important;
    flex-direction: column; /* 내용물을 위에서 아래로 세로 배치 */
    align-items: center; /* 가운데 정렬 (왼쪽 정렬을 원하면 flex-start로 변경) */
    text-align: center;
    border: 1px solid #e5e5e5; /* 첨부 이미지에 있는 테두리 살림 */
    padding: 15px; /* 테두리 안쪽 여백 */
    box-sizing: border-box; /* 패딩이 넓이에 영향을 주지 않도록 고정 */
}

/* 6. 이미지 영역이 카드 넓이를 꽉 채우도록 설정 */
ul.sct.sct_10 li.sct_li .sct_img {
    width: 100%;
    margin-bottom: 15px; /* 이미지와 상품명 사이의 간격 */
}

ul.sct.sct_10 li.sct_li .sct_img img {
    width: 100% !important;
    height: auto !important;
    display: block;
}

/* 7. 텍스트 박스 넓이 확보 및 긴 글자 자동 줄바꿈 */
ul.sct.sct_10 li.sct_li .sct_txt,
ul.sct.sct_10 li.sct_li .sct_cost {
    width: 100%;
    display: block;
    word-break: break-all; /* 상품명이 너무 길면 밖으로 튀어나가지 않고 자동 줄바꿈 */
    margin-bottom: 5px;
}