@charset "UTF-8";
/**/
.container-section {
    padding:0;
}

/**/
main {
    overflow-x: hidden;
}
main section {
    padding-bottom: 10rem;
}

@media screen and (max-width: 768px) {
    main section {
        padding-bottom: 8rem; /* 기존 10rem → 모바일용 축소 */
    }
}

main section h2 {
    color: #000;
    font-family: Pretendard, sans-serif;
    font-size: 2.8rem;
    font-style: normal;
    font-weight: 700;
    line-height: 135%; /* 43.2px */
    padding-bottom: 2.8rem;
}

@media screen and (max-width: 768px) {
    main section h2 {
        padding-bottom: 1.6rem;
    }
}

/**/
#main-visual {
    margin-top: 0;
}
#main-visual > .wrap {
    outline:2px solid blue;
    position:relative;
    height:100%;
}
#main-visual .visual-button-prev,
#main-visual .visual-button-next {
    z-index: 100;
    position: absolute;
    width: 64px;
    height: 64px;
    top: 250px;
    cursor: pointer;
    border-radius: 100%;
    background: rgba(0, 0, 0, 0.2) no-repeat center center;
    backdrop-filter: blur(5px);
    opacity: 0; /* 기본은 숨김 */
    pointer-events: none; /* 숨겨진 동안 클릭 불가 */
    transition: opacity 0.3s ease;
}

#main-visual:hover .visual-button-prev,
#main-visual:hover .visual-button-next {
    opacity: 1;
    pointer-events: auto;
}

#main-visual .visual-button-prev {
    left:-3rem;
    transform:translateX(-100%) rotate(180deg);
    background-image:url(/images/content/main/main_visual_prev.png);
}
#main-visual .visual-button-next {
    right:-3rem;
    transform:translateX(100%);
    background-image:url(/images/content/main/main_visual_next.png);
}
#main-visual .swiper-slide {
    height:560px;
    background-repeat: no-repeat;
    background-position:right center;
    background-size:cover;
}
#main-visual .swiper-slide-1 {
    background-image:url(/images/content/main/main_visual_01.png);
}
#main-visual .swiper-slide-2 {
    background-image:url(/images/content/main/main_visual_02.png);
}
#main-visual .swiper-slide-3 {
    background-image:url(/images/content/main/main_visual_03.png);
}




#main-visual .swiper-slide {}
#main-visual .swiper-slide .wrap {
    height:100%;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
#main-visual .swiper-slide .wrap p:nth-child(1) {
    color: #fff;
    font-size: 2rem;
    font-style: normal;
    font-weight: 500;
    margin-bottom:1.6rem;
    margin-left: 40px;
}
#main-visual .swiper-slide .wrap p:nth-child(2) {
    color: #fff;
    font-size: 4rem;
    font-style: normal;
    font-weight: 700;
    margin-bottom:1.6rem;
    margin-left: 40px;
}
#main-visual .swiper-slide .wrap p:nth-child(3) {
    color:#fff;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 300;
    opacity: 0.8;
    margin-bottom:3rem;
    margin-left: 40px;
}
#main-visual .swiper-slide .wrap a {
    border: 1px solid #fff;
    margin-left: 40px;
    color: #fff;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 600;
    width:180px;
    height:52px;
    display:flex;
    justify-content: center;
    align-items: center;
}

/* 📱 모바일용 (768px 이하) */
@media screen and (max-width: 768px) {

    /* 배경이미지 교체 */
    #main-visual .swiper-slide-1 {
        background-image: url(/images/content/main/main_visual_01_m.png);
        background-size: cover;
        background-position: center;
    }
    #main-visual .swiper-slide-2 {
        background-image: url(/images/content/main/main_visual_02_m.png);
        background-size: cover;
        background-position: center;
    }
    #main-visual .swiper-slide-3 {
        background-image: url(/images/content/main/main_visual_03_m.png);
        background-size: cover;
        background-position: center;
    }

    #main-visual .swiper-slide .wrap {
    justify-content: flex-start; /* 위쪽 정렬 */
    align-items: center;         /* 가로 중앙 정렬 */
    height: 100%;
    padding-top: 48px;           /* 이제 정상적으로 적용됨 ✅ */
    text-align: center;
}

    #main-visual .swiper-slide .wrap p,
    #main-visual .swiper-slide .wrap a {
        margin-left: 0 !important;
    }

    /* 높이 조정 (선택 사항) */
    #main-visual .swiper-slide {
        height: 600px; /* 원하면 줄이거나 늘릴 수 있음 */
    }
}



/**/
#category {
    margin-top:8rem;
}
/*
#category ul {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}
#category ul li {
    flex: 1 1 auto;
}
 */
#category nav {
    position:absolute;
    top:0;
    right:0;
}
#category nav button {
    background:rgba(0,0,0,0.2);
    width:24px;
    height:24px;
    border-radius: 100%;
}
#category nav button.prev img {
    transform: translateX(-1px) translateY(-2px) rotate(180deg) scale(0.5);
}
#category nav button.next img {
    transform: translateX(1px) translateY(-2px) scale(0.5);
}
#category ul li {
    text-align:center;
}
#category ul li p {
    margin-top: 1.2rem;
    color: #555;
    text-align: center;
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 28px; /* 140% */
}
#contact {
    background: #e2e1e4;
    padding: 6rem 0 12rem 0;
    margin-bottom: 0;
}

/* 카테고리별 추천 상품 */
#recommend {}
#recommend .recommend-body {
    display:flex;
    gap:1.6rem;
    padding-top:4rem;

    min-height:416px;
}
#recommend .recommend-body .left {
    flex:1 0 auto;
    max-width:723px;
}
#recommend .recommend-body .left .item-1 {
    width:100%;
    max-width:723px;
    height:416px;
    background-repeat:no-repeat;
    background-position: center center;
    background-image: url(/images/content/main/category_item_1.png);
    background-size:cover;
    border-radius:12px;
    display:flex;
    flex-direction: column;
    justify-content: flex-end;
    padding:0 5.6rem 5.6rem 5.6rem;
}
#recommend .recommend-body .left .item-1.cat-1 {
    background-image: url(/images/content/main/category_item_1.png);
}
#recommend .recommend-body .left .item-1.cat-2 {
    background-image: url(/images/content/main/category_item_2.png);
}
#recommend .recommend-body .left .item-1.cat-3 {
    background-image: url(/images/content/main/category_item_3.png);
}
#recommend .recommend-body .left .item-1.cat-4 {
    background-image: url(/images/content/main/category_item_4.png);
}
#recommend .recommend-body .left .item-1.cat-5 {
    background-image: url(/images/content/main/category_item_5.png);
}


/* ===== 📱 모바일용 이미지 (768px 이하) ===== */
@media screen and (max-width: 768px) {
    #recommend .recommend-body .left .item-1 {
        height: 440px; /* 모바일에서 높이 줄이기 */
        padding: 0 2.4rem 3.2rem 2.4rem; /* 여백 축소 */
    }

    /* 카테고리별 모바일 이미지 */
    #recommend .recommend-body .left .item-1.cat-1 {
        background-image:url(/images/content/main/category_item_1_m.png);
    }
    #recommend .recommend-body .left .item-1.cat-2 {
        background-image:url(/images/content/main/category_item_2_m.png);
    }
    #recommend .recommend-body .left .item-1.cat-3 {
        background-image:url(/images/content/main/category_item_3_m.png);
    }
    #recommend .recommend-body .left .item-1.cat-4 {
        background-image:url(/images/content/main/category_item_4_m.png);
    }
    #recommend .recommend-body .left .item-1.cat-5 {
        background-image:url(/images/content/main/category_item_5_m.png);
    }
}

#recommend .recommend-body .left .item-1 p {
    color:#fff;
}
#recommend .recommend-body .left .item-1 p:nth-child(1) {
    font-size:1.6rem;
    font-weight:400;
    margin-bottom:1.0rem;
}
#recommend .recommend-body .left .item-1 p:nth-child(2) {
    font-size:3.2rem;
    font-weight:600;
    margin-bottom:2.4rem;
}
#recommend .recommend-body .left .item-1 a {
    color:#fff;
    border:1px solid #fff;
    width:180px;
    height:52px;
    display:flex;
    justify-content: center;
    align-items: center;
}

#recommend .recommend-body .right {
    flex:1 0 auto;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}
#recommend .recommend-body .right .item-2 a {
    flex:1 0 auto;
    max-height:200px;
    border-radius:12px;
    display:flex;
    overflow:hidden;
    border:1px solid #ccc;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
}
#recommend .recommend-body .right .item-2 .img {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width:200px;
    height:200px;
}
#recommend .recommend-body .right .item-2 .data {
    padding:3.2rem;
    flex:1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#recommend .recommend-body .right .item-2 .data .name {
    font-size:1.6rem;
    font-weight:400;
    margin-bottom:0.4rem;
    color: #555;
}
#recommend .recommend-body .right .item-2 .data .price {
    font-size:2.8rem;
    font-weight:700;
    margin-bottom:0.4rem;
}
#recommend .recommend-body .right .item-2 .data .review {
    color:#777;
    font-size:1.4rem;
    font-weight:400;
    margin-bottom:1.2rem;
}
#recommend .recommend-body .item-1,
#recommend .recommend-body .item-2:nth-child(1),
#recommend .recommend-body .item-2:nth-child(2) {
    transition:all 400ms;
    transform:translateY(-20px);
    opacity: 0;
}
#recommend .recommend-body .item-1 {transition-delay: 0;}
#recommend .recommend-body .item-2:nth-child(1) {transition-delay: 100ms;}
#recommend .recommend-body .item-2:nth-child(2) {transition-delay: 200ms;}
#recommend .recommend-body.active .item-1,
#recommend .recommend-body.active .item-2:nth-child(1),
#recommend .recommend-body.active .item-2:nth-child(2) {
    transform:translateY(0);
    opacity: 1;
}

@media (max-width:1023px){
    #recommend .recommend-body {
        flex-direction: column;
    }
    #recommend .recommend-body .left {
        max-width:100%;
    }
    #recommend .recommend-body .left .item-1 {
        max-width:100%;
    }
    #recommend .recommend-body .item-2 {
        margin-bottom:1.6rem;
    }
    #recommend .recommend-body .item-2:last-child {
        margin-bottom:0;
    }
}
@media (max-width:767px){
    #recommend .recommend-body .right .item-2 a {
        max-height:40rem;
        flex-direction: column;
    }
    #recommend .recommend-body .right .item-2 .img {
        width:auto;
        height:40rem;
    }
}

#best .shop-product-list a {
    border-radius:12px;
    overflow:hidden;
}

/* 레오몰 BEST 상품 */
#best .wrap {}
#best .shop-product-list {
    margin:0;
    flex-wrap: nowrap;
}
#best .shop-product-list .product-item {
    margin:0;
}
#best nav {
    position:absolute;
    top:0;
    right:0;
}
#best nav button {
    background:rgba(0,0,0,0.2);
    width:24px;
    height:24px;
    border-radius: 100%;
}
#best nav button.prev img {
    transform: translateX(-1px) translateY(-2px) rotate(180deg) scale(0.5);
}
#best nav button.next img {
    transform: translateX(1px) translateY(-2px) scale(0.5);
}

/* 더 많은 레오의 소식 */
#news {}
#news .news-body {
    display:flex;
    justify-content: space-between;
    gap:1rem;
}
#news .news-body .best-case {}
#news .news-body .best-review {}
#news .news-body a.img {
    margin-bottom:2.4rem;
    display:block;
}
#news .news-body .txt p:nth-child(1) {
    color: #000;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 700;
    margin-bottom:0.8rem;
}
#news .news-body .txt p:nth-child(2) {
    color: #777;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
}

@media (max-width:767px){
    #news .news-body {
        flex-direction: column;
        gap:3rem;
    }
    #news .news-body a.img {}
    #news .news-body a.img img {
        width:100%;
    }
}

/**/
#contact {}
#contact .contact-body {
    display:flex;
    justify-content: space-between;
}
#contact .contact-body .card {
    width:49%;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
}
#contact .contact-body .card .card-body {
    display:flex;
    justify-content: space-between;
    align-items: center;
    
}
#contact .contact-body .card .card-body .icon {
    width:64px;
    height:64px;
    display:flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #d7ebff;
    margin-right:2.4rem;
}
#contact .contact-body .card .card-body .icon img {}
#contact .contact-body .card .card-body .txt {
    flex:1 0 auto;
    height:100%;
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}
#contact .contact-body .card .card-body .txt p {}
#contact .contact-body .card .card-body .txt p:nth-child(1) {
    color: #000;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 700;
}
#contact .contact-body .card .card-body .txt p:nth-child(2) {
    color: #777;
    font-size: 1.6rem;
    font-style: normal;
    font-weight: 400;
}
#contact .contact-body .card .card-body .arr {}
#contact .contact-body .card .card-body .arr img {}

@media(max-width: 767px){
    #contact .contact-body {
        flex-direction: column;
        gap: 3rem;
    }
    #contact .contact-body .card {
        width:100%;
    }
    #contact .contact-body .card .card-body .txt {
        flex: 0 1 auto;
    }
    #contact .contact-body .card .card-body .arr {
        flex:0 0 auto; 
    }
}