@charset "utf-8";

/* 메인배너 Swiper */
#main_bn {width:100%;height:300px;overflow:hidden;display:block;position:relative;}
.main_banner_swiper {width:100%;height:100%;}
.main_banner_swiper .swiper-wrapper {display:flex;}
.main_banner_swiper .swiper-slide {width:100%;height:auto;flex-shrink:0;}
.main_banner_swiper .swiper-slide img {width:100%;height:100%;object-fit:cover;}
.main_banner_swiper .swiper-pagination {display:none;}
.main_banner_swiper .swiper-controls {position:absolute;bottom:20px;right:5%;display:flex;align-items:center;gap:10px;z-index:1000;}
.main_banner_swiper .swiper-control-panel {display:flex;align-items:center;gap:10px;background:#00000026;border-radius:20px;padding:8px 15px;}
.main_banner_swiper .swiper-play-pause {background:none;border:none;color:#fff;font-size:14px;cursor:pointer;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;}
.main_banner_swiper .swiper-play-pause:hover {opacity:.8;}
.main_banner_swiper .swiper-counter {color:#fff;font-size:14px;font-weight:400;line-height:1;}
.main_banner_swiper .swiper-button-next,
.main_banner_swiper .swiper-button-prev {position:relative; top:10px; left:auto; right:auto; background:#00000026; border-radius:50%;width:36px;height:36px;color:#fff;font-size:20px;cursor:pointer;transition:all 0.3s ease;}
.main_banner_swiper .swiper-button-next:after,
.main_banner_swiper .swiper-button-prev:after {font-family:'FontAwesome';font-size:24px;}
.main_banner_swiper .swiper-button-next:after {content:'\f105';}
.main_banner_swiper .swiper-button-prev:after {content:'\f104';}

/* 메인 버튼 탭 (기존) */
.main_button_wrap {padding: 20px 0; background-color: #fff;}
.inner_area {max-width: 100%; margin: 0 auto; padding: 0 10px;}
.tab_buttons {display: flex; justify-content: center; margin-bottom: 20px; flex-wrap: nowrap; gap: 6px;}
.tab_buttons li {position: relative; flex: 1; /* max-width: calc(16.666% - 5px); */}
.tab_buttons li a{display:block;padding:8px 12px;border-radius:20px;font-size:12px;line-height:12px;background-color:#f5f5f5;color:#000;text-decoration:none;transition:all .3s ease;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tab_buttons li a:hover {background-color: #e8e8e8; color: #333;}
.tab_buttons li.active a {background-color: #541c86; color: #fff; text-decoration: none; transition: all 0.3s ease;}
.tab_content {position: relative;}
.tab_panel {display: none; opacity: 0; transition: opacity 0.3s ease;}
.tab_panel.active {display: block; opacity: 1;}
.main_button_list {display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; padding: 0 10px;}
.main_button_list li {text-align: center; max-width: 100px;}
.main_button_list .icon_wrap {margin: 0 auto 10px; border-radius: 50%; background: #f7f2fb; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease;}
.main_button_list .icon_wrap.no_bg {background: none;}
.main_button_list .icon {width: calc(100vw / 6 - 20px) ; height: calc(100vw / 6 - 20px); background-size: contain; background-position: center; background-repeat: no-repeat;}
.main_button_list .icon_wrap.no_bg .icon {width: calc(100vw / 6 - 20px); height: calc(100vw / 6 - 20px);}
.main_button_list .desc {font-size: 12px; color: #333; font-weight: 500; line-height: 1.3; word-break: keep-all;}
.main_button_list li:hover a {text-decoration: none;}
.main_button_list li:hover .icon {transform: scale(1.05); transition: all 0.3s ease;}
.main_button_list li:hover .icon_wrap {background: #e8e8e8; transition: all 0.3s ease;}

/* 메인 버튼 Swiper 스타일 */
.main_button_swiper{width:100%;height:auto;}
.main_button_swiper .swiper-wrapper{align-items:center;height: 110px;}
.main_button_swiper .swiper-slide{width:auto;height:auto;flex-shrink:0;margin-bottom:20px}
.main_button_swiper .swiper-slide:first-child{margin-left:15px!important}
.main_button_swiper .swiper-slide:last-child{width:5px!important}
.main_button_swiper .swiper-slide a{display:flex;flex-direction:column;align-items:center;justify-content:center}
.main_button_swiper .swiper-slide .icon_wrap{width:55px;height:55px;margin-bottom:5px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;transition:all .3s ease;border-radius:25%}
.main_button_swiper .swiper-slide .icon_wrap .icon{width:100%;height:100%;border-radius:25%;background-size:contain;background-repeat:no-repeat;background-position:center}
.main_button_swiper .swiper-slide .desc{font-size:12px;font-weight:500;color:#333;text-align:center;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
.main_button_swiper .swiper-button-next,.main_button_swiper .swiper-button-prev{display:none}
.main_button_swiper .swiper-scrollbar {border-radius: 2px;height: 5px;width: 150px;bottom: 0;left: 50%;transform: translateX(-50%);}
.main_button_swiper .swiper-scrollbar-drag{background-color:#541c86;}
.main_button_swiper .swiper-pagination{display:none}

/*메인 상품평*/
.main_post {padding:0 5px 20px;}
.main_post li {padding:10px 0;margin:0 10px;border-top:1px dotted #ddd;}
.main_post li p {font-size:12px;color:#888;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.main_post li .tit {font-weight:600;color:#333;margin:0 0 3px 0;}
.main_post li:first-child {border-top:0 !important;}

/*** 진열관리 ***/
.main_display_wrap,
.cont_full_wrap {margin:20px 0 30px 0;}

/*** 진열관리 ***/
.main_display_wrap,
.cont_full_wrap {margin:20px 0 30px 0;}

/* 리스트형 */
.main_display_wrap .pr_desc,
.cont_full_wrap .pr_desc {overflow: visible;}
.main_display_wrap .pr_desc li,
.cont_full_wrap .pr_desc li {margin-bottom: 15px;padding:0;}
.main_display_wrap .pr_desc li dt img.goods_img_hover,
.cont_full_wrap .pr_desc li dt img.goods_img_hover {display: none;}
.main_display_wrap .pr_desc .description,
.cont_full_wrap .pr_desc .description,
.main_display_wrap .pr_desc li dd.description,
.cont_full_wrap .pr_desc li dd.description {text-align:left; margin: 15px auto 0;}
.main_display_wrap .pr_desc .description .pname,
.cont_full_wrap .pr_desc .description .pname,
.main_display_wrap .pr_desc li .description .pname,
.cont_full_wrap .pr_desc li .description .pname,
.main_display_wrap .pr_desc li dd.description .pname,
.cont_full_wrap .pr_desc li dd.description .pname {display: block !important; font-size:14px !important; height: unset !important; margin: 0 0 4px !important; line-height:1.3 !important; color:#333 !important; font-weight:500 !important;}
.main_display_wrap .pr_desc .description .price,
.cont_full_wrap .pr_desc .description .price,
.main_display_wrap .pr_desc li .description .price,
.cont_full_wrap .pr_desc li .description .price,
.main_display_wrap .pr_desc li dd.description .price,
.cont_full_wrap .pr_desc li dd.description .price {display: block !important; margin: 0 0 5px !important;}
.main_display_wrap .pr_desc .description .price .mpr,
.cont_full_wrap .pr_desc .description .price .mpr,
.main_display_wrap .pr_desc li .description .price .mpr,
.cont_full_wrap .pr_desc li .description .price .mpr,
.main_display_wrap .pr_desc li dd.description .price .mpr,
.cont_full_wrap .pr_desc li dd.description .price .mpr {display:inline-block !important; color:#000000 !important; font-weight:600 !important;}
.main_display_wrap .pr_desc .description .explan,
.cont_full_wrap .pr_desc .description .explan,
.main_display_wrap .pr_desc li .description .explan,
.cont_full_wrap .pr_desc li .description .explan,
.main_display_wrap .pr_desc li dd.description .explan,
.cont_full_wrap .pr_desc li dd.description .explan {display: block !important; font-size: 12px !important; color: #555555 !important; line-height: 1.4em !important; letter-spacing: -0.3px !important; margin-top: 4px !important;}

/* 반응형 이미지 */
.img-responsive {max-width: 100%; height: auto; display: block;}
.goods_img {max-width: 100%; height: auto; display: block;}
.goods_img_hover {max-width: 100%; height: auto; display: none;}

/* 슬라이드형 */
.main_display .swiper {padding-right:40px}
.slide_wrap .swiper-wrapper .swiper-slide:first-child {margin-left:20px}
.main_display .swiper-button-next,.main_display .swiper-button-prev{display:none}

/* 슬라이드형(배너) */
.banner_slide_wrap .swiper-wrapper .swiper-slide {border-radius: 10px; overflow: hidden;margin:0 5px;}
.banner_slide_wrap .swiper-wrapper .swiper-slide a img {border-radius: 10px; width:100%; height:unset;}

/* 슬라이드형(랭크 출력) */
.slide_wrap .swiper-wrapper .swiper-slide.rank_goods {border-radius: 10px;background-color: #f7f7f7;height: 95%;}
.slide_wrap .swiper-wrapper .swiper-slide.rank_goods dt {border-radius: unset;}
.slide_wrap .swiper-wrapper .swiper-slide.rank_goods .description {margin: 15px 10px 10px; display: block; height: 160px;}
.slide_wrap .swiper-wrapper .swiper-slide.rank_goods .description .rank_num {font-size: 20px; font-weight: 700; margin-bottom: 10px;}

/* 구매후기 */
.main_review_wrap {padding: 20px 0 30px; margin-top: 40px; background-color:#f8f8f8}
.main_review_wrap .btn_wrap {text-align: center; margin-top: 15px;}
.main_review_wrap .swiper .swiper-wrapper {width: 100%; margin: 0 auto;overflow: visible;}
.main_review_wrap .swiper .swiper-wrapper .swiper-slide {margin: 0;border-radius: 10px;background-color: #fff; height: 300px;padding:0;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
.main_review_wrap .swiper .swiper-wrapper .swiper-slide img {width: 100%; height: 140px; object-fit: cover;border-radius:10px 10px 0 0;}
.main_review_wrap .swiper .swiper-wrapper .swiper-slide .description {padding: 10px;}
.main_review_wrap .swiper .swiper-wrapper .swiper-slide .description .pname {display: block;font-size: 14px; font-weight: 600; height: 40px; overflow: hidden;line-height:1.3;color:#333;}
.main_review_wrap .swiper .swiper-wrapper .swiper-slide .description .memo {display: block;font-size: 13px; font-weight: 400;margin: 8px 0 12px; height: 35px; overflow: hidden;line-height:1.3;color:#666;}
.main_review_wrap .swiper .swiper-wrapper .swiper-slide .description .info_wrap {display: flex; align-items: center;}
.main_review_wrap .swiper .swiper-wrapper .swiper-slide .description .info_wrap .txt_wrap {flex: 1; display: flex; flex-direction: column; justify-content: center;}
.main_review_wrap .swiper .swiper-wrapper .swiper-slide .description .info_wrap .txt_wrap span {display: block; font-size: 12px; font-weight: 400; margin-top: 2px;color:#888;}
.main_review_wrap .swiper .swiper-wrapper .swiper-slide .description .info_wrap .img_wrap {flex: 0 0 50px; text-align: center;}
.main_review_wrap .swiper .swiper-wrapper .swiper-slide .description .info_wrap .img_wrap img {width: 45px; height: 45px; object-fit: cover; border-radius: 3px;}
.main_review_wrap .swiper-button-next,.main_review_wrap .swiper-button-prev{display:none}

/* 메인 배너 */
.main_banner_wrap {padding: 15px 0;}
.main_banner_wrap .title {text-align:center;margin-bottom:12px;}
.main_banner_wrap .title h2 {font-size:16px;font-weight:600;color:#333;margin-bottom:5px;}
.main_banner_wrap .title .sub {font-size:12px;color:#666;}

/* 2단 */
.main_banner_w2 {display: flex; gap: 10px;padding:0 10px;}
.main_banner_w2 li {width: 49%; border-radius: 5px; overflow: hidden;}
.main_banner_w2 li img {width: 100%; height:unset; transition: transform 0.3s ease-in-out;}
.main_banner_w2 li:hover img {transform: scale(1.05);}

/* 1단 */
.main_banner_w1 {display: flex;padding:0 10px;}
.main_banner_w1 li {width: 100%; border-radius: 5px; overflow: hidden;}
.main_banner_w1 li img {width: 100%; height:unset; transition: transform 0.3s ease-in-out;}
.main_banner_w1 li:hover img {transform: scale(1.05);}

/* 브랜드 TV */
.main_video_wrap {padding: 20px 0 0}
.video_wrap {position: relative;padding-bottom: 56.25%; /* 16:9 */height: 0;overflow: hidden;margin-top: 12px; }
.video_wrap iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;border: 0;}

/* MD 탭 버튼 */
.tab_button_wrap {display:flex;justify-content:center;margin-bottom:20px;flex-wrap:wrap;}
.tab_button_wrap li {position:relative;margin:0 3px 10px;}
.tab_button_wrap li a{display:block;padding:8px 15px;border-radius:20px;font-size:13px;line-height:13px;background-color:#f5f5f5;color:#000;text-decoration:none;transition:all .3s ease}
.tab_button_wrap li.active a {background-color: #541c86; color: #fff; text-decoration: none; transition: all 0.3s ease;}

/* MD 탭 패널 */
.tab_panel {display:none;opacity:0;transition:opacity 0.3s ease;}
.tab_panel.active {display:block;opacity:1;}

/* 작은 모바일 (480px 이상) */
@media (min-width: 480px) {
    .main_button_wrap {padding: 25px 0;}
    .tab_buttons li a {padding: 10px 14px; font-size: 13px;}
    .main_button_list {gap: 20px;}
    .main_button_list li {flex: 0 0 calc(25% - 15px); max-width: 120px;}
    .main_button_list .desc {font-size: 13px;}
    
    .main_display_wrap,
    .cont_full_wrap {padding:20px 0;}
    .main_display_wrap .title h2,
    .cont_full_wrap .title h2 {font-size:20px;}
    .main_display_wrap .title .sub,
    .cont_full_wrap .title .sub {font-size:14px;}
    .main_display_wrap .pr_desc .description .pname,
    .cont_full_wrap .pr_desc .description .pname {font-size:16px;}
    .main_display_wrap .pr_desc .description .price .mpr,
    .cont_full_wrap .pr_desc .description .price .mpr{font-size:15px;}
    .pr_desc .swiper-wrapper .swiper-slide.rank_goods {height: 300px;}
    .pr_desc .swiper-wrapper .swiper-slide.rank_goods .description .rank_num {font-size: 24px;}
    .main_review_wrap .swiper .swiper-wrapper .swiper-slide {height: 300px;}
    .main_review_wrap .swiper .swiper-wrapper .swiper-slide img {height: 160px;}
    .video_wrap {height: 200px;}
    .main_banner_wrap {padding: 20px 0;}
    .main_banner_wrap .title h2 {font-size:18px;}
    .main_banner_wrap .title .sub {font-size:13px;}
    .main_video_wrap .title h2 {font-size:18px;}
    .main_video_wrap .title .sub {font-size:13px;}
}

/* 중간 모바일 (768px 이상) */
@media (min-width: 768px) {
    .main_button_wrap {padding: 30px 0;}
    .tab_buttons li a {padding: 12px 16px; font-size: 14px;}
    .main_button_list {gap: 25px;}
    .main_button_list li {flex: 0 0 calc(20% - 20px); max-width: 140px;}
    .main_button_list .desc {font-size: 14px;}
    
    .main_display_wrap,
    .cont_full_wrap {padding:30px 0;}
    .main_display_wrap .title h2,
    .cont_full_wrap .title h2 {font-size:22px;}
    .main_display_wrap .title .sub,
    .cont_full_wrap .title .sub {font-size:15px;}
    .main_display_wrap .pr_desc .description .pname,
    .cont_full_wrap .pr_desc .description .pname {font-size:17px;}
    .main_display_wrap .pr_desc .description .price .mpr,
    .cont_full_wrap .pr_desc .description .price .mpr{font-size:16px;}
    .pr_desc .swiper-wrapper .swiper-slide.rank_goods {height: 350px;}
    .pr_desc .swiper-wrapper .swiper-slide.rank_goods .description .rank_num {font-size: 28px;}
    .main_review_wrap .swiper .swiper-wrapper .swiper-slide {height: 350px;}
    .main_review_wrap .swiper .swiper-wrapper .swiper-slide img {height: 200px;}
    .video_wrap {height: 250px;}
    .main_banner_wrap .title h2 {font-size:20px;}
    .main_banner_wrap .title .sub {font-size:14px;}
    .main_video_wrap .title h2 {font-size:20px;}
    .main_video_wrap .title .sub {font-size:14px;}
}