/* BASIC css start */
/*--------------------------------------------------------------------------------
//
//            공통
//
--------------------------------------------------------------------------------*/
body header {
    border-bottom: none;
}

body header.fixed {
    border-bottom: 1px solid #e9e9e9;
}

section {
    margin-bottom: 70px;
}

section h2.secTit,
section h2.secTit a {
    display: block;
    margin-bottom: 40px;
    font-size: 34px;
    font-weight: 600;
    line-height: 50px;
}

section h2.secTit span.icon {
    display: inline-block;
    margin-top: -7px;
    margin-left: 10px;
    font-size: 20px;
    vertical-align: middle;
}

/*--------------------------------------------------------------------------------
//
//            section01
//
--------------------------------------------------------------------------------*/
.mainSec01 {
    width: 100%;
    margin-bottom: 10px;
    margin-top: 10px;
    overflow: hidden;
    height: 450px;
}

.mainSec01 .swiper {
    padding-bottom: 42px;
    overflow: visible;
}

.mainSec01 .swiper-button-next,
.mainSec01 .swiper-button-prev {
    color: #fff;
}

.mainSec01 .swiper-button-prev {
    left: 50px;
}

.mainSec01 .swiper-button-next {
    right: 50px;
}

.mainSec01 .swiper-pagination-progressbar {
    background: #ccc;
}

.mainSec01 .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {
    background: #000;
}

.mainSec01 ul li img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.mainSec01 ul li a {
    display: block;
    position: relative;
}

/*--------------------------------------------------------------------------------
//
//            section02
//
--------------------------------------------------------------------------------*/

/* 신부의자 텍스트 스타일 */
.centerpiece-text {
    font-size: 14px; /* 다른 텍스트와 동일한 크기 */
    font-weight: 500; /* 폰트 두께 조정 */
    text-align: center; /* 중앙 정렬 */
    line-height: 1.5; /* 줄 간격 */
    color: #000; /* 텍스트 색상 (검정) */

    display: block; /* 블록 요소로 설정 */
    margin-top: 20px; /* 이미지와 텍스트 간격 조정 */
}



.mainSec02 .myWrap {
    display: flex;
    justify-content: space-between; /* 요소 간 간격 균등 */
    align-items: center;
    flex-wrap: nowrap; /* 줄 바꿈 금지 */
    gap: 10px; /* 아이템 사이 간격 */
    width: 100%; /* 부모 너비에 맞춤 */
    max-width: 1500px; /* 최대 너비 제한 */
    margin: 0 auto; /* 중앙 정렬 */
    padding: 30px 30px; /* 양쪽 여백 추가 */
}



.mainSec02 .box1, 
.mainSec02 .box2 ul li {
    display: flex;
    flex-direction: column; /* 이미지와 텍스트를 위아래로 배치 */
    align-items: center; /* 항목을 중앙 정렬 */
}

.mainSec02 .box1 img,
.mainSec02 .box2 ul li img {
    width: 150px; /* 이미지 크기 통일 */
    height: auto; /* 비율 유지 */
}

.mainSec02 .box2 ul {
    display: flex; /* "MEN"과 나머지를 일렬로 정렬 */
    justify-content: center; /* 가운데 정렬 */
    gap: 20px; /* 요소 간 여백 */
}

.mainSec02 .box2 ul li {
    margin: 0; /* 기본 여백 제거 */
    list-style: none; /* 기본 리스트 스타일 제거 */
}

.mainSec02 .box2 ul li span {
    margin-top: 10px; /* 이미지와 텍스트 간 간격 추가 */
    font-size: 14px; /* 텍스트 크기 조정 */
    text-align: center; /* 텍스트 중앙 정렬 */
}
-----------------------------------------------*/





.mainSec02 .box1{
    width:300px;
    padding:48px 0 25px;
    text-align:center;
}



.mainSec02 .box1 .text01{
    width:300px;
    display:block;
    font-size:24px;
    font-weight:500;
    line-height:32px;
}

.mainSec02 .box1 .text02{
    display:block;
    margin-bottom:20px;
    font-size:50px;
    font-weight:500;
    line-height:57px;
    font-family:'Georgia';
}

.mainSec02 .box1 .text03{
    display:block;
    margin-bottom:55px;
    font-size:18px;
    line-height:19px;
}


.mainSec02 .box1 .text04 {
    display: block;
    margin-top: 10px; /* 이미지와의 간격 */
    font-size: 18px; /* 텍스트 크기 */
    font-weight: 400; /* 글씨 두께 */
    text-align: center; /* 중앙 정렬 */
    line-height: 1.5; /* 줄 간격 */
}
-------------------------------------------------*/


.mainSec02 .box2{
    width:1450px;
}

.mainSec02 .box2 ul li{
    width:225px;
    margin-right:20px;
}

.mainSec02 .box2 ul li:last-child{
    margin-right:0;
}

.mainSec02 .box2 ul li span{
   
    flex: 0 1 auto; /* 아이템 크기 고정, 너무 퍼지지 않도록 설정 */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px; /* 최소 크기 설정 */
    max-width: 200px; /* 최대 크기 설정 */
}


.mainSec02 .item {
    flex: 1; /* 아이템을 동일한 비율로 나눔 */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 100px; /* 최소 크기 설정 */
    max-width: 200px; /* 최대 크기 설정 */
}

.mainSec02 .item img {
    width: 10vw; /* 화면 너비에 따라 자동 조절 */
    max-width: 150px; /* 최대 크기 제한 */
    height: auto;
}

.mainSec02 .item span {
    font-size: 16px; /* 섹션 4와 동일한 폰트 크기 */
    font-weight: 600; /* 폰트 두께 맞추기 */
    color: #333; /* 글자 색상 동일하게 적용 */
    text-align: left; /* 좌측 정렬 (상품명과 동일) */
    margin-top: 10px; /* 상단 여백 동일 */
}

/*--------------------------------------------------------------------------------
//
//            Unified Section (Merged section03 & section04)
//
--------------------------------------------------------------------------------*/

.mainSec03_04 {
    margin-bottom: 70px;
}


/* 섹션 3, 4와 섹션 6의 가로 폭을 맞추기 */
.mainSec03_04 .myWrap {
    max-width: 1500px;  /* 섹션 6과 동일한 최대 너비 */
    margin: 0 auto;  /* 중앙 정렬 */
    padding: 0 20px; /* 좌우 여백 추가 */


}
    /* 제목과 상품 전체를 포함하는 컨테이너 중앙 정렬 */
.mainSec03_04 .mdsPickWrap {
    display: flex;
    flex-direction: column; /* 위아래 배치 */
    align-items: center; /* 중앙 정렬 */
    width: 100%;
    padding-left: 10px; /* 왼쪽 여백 줄이기 */
}



/* 작은 화면에서 그리드 중앙 정렬 문제 해결 */
.mainSec03_04 .goodsListWrap {
    display: grid;
    grid-template-columns: repeat(5, 1fr); /* 기본적으로 5개 배치 */
    gap: 20px;
    justify-content: center; /* 중앙 정렬 */
    max-width: 1500px;
    margin: 0 auto; /* 중앙 정렬 */
}


@media screen and (max-width: 1500px) {
    .mainSec03_04 .goodsListWrap {
        grid-template-columns: repeat(4, 1fr); /* 4개 배치 */
        max-width: 1200px; /* 최대 너비 제한 */
    }
    .mainSec03_04 .item-list {
        width: calc(25% - 20px); /* 4개 배치 */
    }
}

.mainSec03_04 .item-list {
    width: 100%; /* 그리드 자동 조정 */
    height: auto;
    box-sizing: border-box;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column; /* 내부 요소 정렬 */
}

.mainSec03_04 .item-list img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

.mainSec03_04 .item-list .prd-name,
.mainSec03_04 .item-list .product_price {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    text-align: left;
    margin-top: 10px;
}


/* 제목을 오른쪽으로 이동 */
.mainSec03_04 .secTit {
    position: relative; /* 위치 조정 가능하도록 설정 */
    grid-column: 1 / span 1; /* 첫 번째 컬럼 차지 */
    align-self: start; /* 상단 정렬 */
    margin-bottom: 20px; /* 상품과 간격 유지 */
    margin-left: 0px; /* 오른쪽으로 이동 */
}

/* 해상도에 따라 위치 조정 (좌표는 직접 수정 가능) */
@media screen and (max-width: 1500px) {
    .mainSec03_04 .secTit {
        left: 130px; /* 해상도 1500px 이하일 때 왼쪽으로 이동 */
    }
}

/*--------------------------------------------------------------------------------
//
//            mainSec06
//
--------------------------------------------------------------------------------*/
.mainSec06 {
    margin-bottom: 70px 
}



.mainSec06 .myWrap {
    max-width: 1500px;  /* 동일한 최대 너비 설정 */
    margin: 0 auto;  /* 가운데 정렬 */
    padding: 0 20px; /* 좌우 여백 추가 */
}

/* Swiper 컨테이너 크기 조정 */
.mainSec06 .swiper {
    width: 100%;  /* 전체 컨테이너가 동일한 폭을 차지하도록 설정 */
    max-width: 1500px; /* 메인 3, 4와 동일한 최대 너비 */
    margin: 0 auto;  /* 가운데 정렬 */
}



.mainSec06 .tabBtn {
    padding: 0 0 40px;
}

.mainSec06 .bestSellTab {
    display: none;
}

.mainSec06 .bestSellTab:nth-child(1) {
    display: block;
}

.mainSec06 .tabBtn li {
    margin-right: 40px;
}

.mainSec06 .tabBtn li:last-child {
    margin-right: 0;
}

.mainSec06 .tabBtn li a {
    display: block;
    font-size: 20px;
    color: #969696;
    font-weight: 500;
}

.mainSec06 .tabBtn li.active a {
    color: #000;
}





/* BASIC css end */