@charset "utf-8";

/* 반응형 이미지 */
.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;}

/* 메인 버튼 탭 */
.tab_buttons {display:flex;justify-content:center;margin-bottom:30px;}
.tab_buttons li {position:relative;margin:0 5px;}
.tab_buttons li a {display:block;padding:15px 30px;font-size:18px;color:#666;text-decoration:none;outline:none;border:none;transition: all 0.3s ease;}
.tab_buttons li a:hover {border-bottom:2px solid #8e31b9;}
.tab_buttons li.active a {color:#8e31b9;font-weight:600;border-bottom:2px solid #8e31b9;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_wrap {padding:50px 0;}
.main_button_list {display:flex;justify-content:center;gap:20px;}
.main_button_list li {text-align:center;}
.main_button_list .icon_wrap {width:75px;height:75px;margin:0 auto 15px;border-radius:25%;background:#f7f2fb;display:flex;align-items:center;justify-content:center;transition:all 0.3s ease;}
.main_button_list .icon {width:100%;height:100%;border-radius:25%;background-size:contain;background-position:center;background-repeat:no-repeat;}
.main_button_list .desc {font-size:16px;color:#333;font-weight:500;}
/* .main_button_list li:hover .icon_wrap {background:#d9cae0;transition:all 0.3s ease;} */
.main_button_list li:hover a {text-decoration:none; cursor: pointer;}
.main_button_list li:hover .icon {transform: scale(1.08);transition:all 0.3s ease;}
/* .main_button_list li:hover .desc {color:#8e31b9;} */
@media (min-width: 1400px) {
    .main_button_list {gap:30px;}
    .main_button_list .icon_wrap {width:95px;height:95px;}  
}

/*** 메인 상품진열 ***/
.main_display_wrap {padding:40px 0}
/* 리스트형 */
.main_display .pr_desc li {margin-bottom: 20px}
.main_display .pr_desc .description {text-align:left; margin: 20px auto 0}
.main_display .pr_desc .description .pname {display: block; font-size:18px; height: unset; margin: 0 0 4px;}
.main_display .pr_desc .description .price {display: block; margin: 0 0 5px}
.main_display .pr_desc .description .price .mpr{display:inline-block;font-size:16px;color:#000000;font-weight:600;}
.main_display .pr_desc .description .explan {display: block; font-size: 12px;color: #555555;line-height: 1.5em;letter-spacing: -0.3px;}
/* 슬라이드형 */
.slide_wrap {position: relative;width: 1050px;margin: 0 auto;}
.slide_wrap .swiper {overflow: hidden; width: 100%; margin: 0 auto;height: 480px;position: relative;display: block;}
.slide_wrap .swiper .swiper-wrapper {display: flex; overflow: visible;}
.slide_wrap .swiper .swiper-wrapper .swiper-slide {float: none; width:100%;height:auto;flex-shrink:0; margin: 20px 20px 0 0;}
.slide_wrap .swiper-button-next, .slide_wrap .swiper-button-prev{margin-top:-20px;font-size:40px;width:40px;color:transparent;position:absolute;top:40%;z-index:900;outline:none;transition:All .3s ease;-webkit-transition:All .3s ease;-moz-transition:All .3s ease;-o-transition:All .5s ease;opacity:1}
.slide_wrap .swiper-button-next{right:-100px;background:url(../img/btn_circle_arrow.svg) no-repeat center;transform:rotate(0deg);background-size:contain}
.slide_wrap .swiper-button-prev{left:-100px;background:url(../img/btn_circle_arrow.svg) no-repeat center;transform:rotate(180deg);background-size:contain}
.slide_wrap .swiper-button-prev::before, .slide_wrap .swiper-button-next::before, .slide_wrap .swiper-button-prev::after, .slide_wrap .swiper-button-next::after{display:none;content:none}
.slide_wrap .swiper-button-disabled {opacity: 1 !important;pointer-events: auto !important;cursor: pointer !important;}
.slide_wrap .swiper-pagination{display:none}
.slide_wrap .swiper-control-panel{position:absolute;bottom:20px;right:10%;display:flex;align-items:center;gap:10px;background:#00000026;border-radius:20px;padding:8px 15px;z-index:1000}
.slide_wrap .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}
.slide_wrap .swiper-play-pause:hover{opacity:.8}
.slide_wrap .swiper-counter{color:#fff;font-size:14px;font-weight:400;line-height:1}
@media (min-width: 1400px) {
    .slide_wrap {width: 1400px;}
}
/* 슬라이드형(배너) */
.banner_slide_wrap .swiper {border-radius: 10px; overflow: hidden;  -webkit-mask-image: -webkit-radial-gradient(white, black);}
.banner_slide_wrap .swiper .swiper-slide a {border-radius: 10px; overflow: hidden; display: block; cursor: pointer; pointer-events: auto !important; position: relative; z-index: 10;}
.banner_slide_wrap .swiper .swiper-slide a img {border-radius: 10px; width:100%; height:unset; pointer-events: none;}
/* 슬라이드형(랭크 출력) */
.main_display .pr_desc li.rank_goods {border-radius: 7px;background-color: #f7f7f7;height: 455px;}
.main_display .pr_desc li.rank_goods dt {border-radius: unset;}
.main_display .pr_desc li.rank_goods .description {margin: 20px 20px 10px; display: flex;}
.main_display .pr_desc li.rank_goods .description .rank_num {font-size: 32px; font-weight: 700; margin-right: 15px;}

/* 탭 버튼 */
.tab_button_wrap {display:flex;justify-content:center;margin-bottom:30px}
.tab_button_wrap li{position:relative;margin:0 5px}
.tab_button_wrap li a{display:block;padding:13px 30px;border-radius:50px;margin:0 5px 20px;font-size:16px;line-height:16px;background-color:#f5f5f5;color:#000;text-decoration:none;transition:all .3s ease}
.tab_button_wrap li.active a{background-color:#5f0080;color:#fff;text-decoration:none;transition:all .3s ease}
.tab_content{position:relative}
.tab_panel{display:none}
.tab_panel.active{display:block}

/*** 구매후기 ***/
.main_review_wrap {padding: 60px 0 80px; margin-top: 60px; background-color:#f8f8f8}
.main_review_wrap .btn_wrap {text-align: center; margin-top: 20px;}
.review_list {display: flex; flex-wrap: wrap; gap: 20px;}
.review_list .swiper-wrapper {width: 1050px; margin: 0 auto;}
.review_list .swiper-slide {margin: 20px 20px 0 0;border-radius: 7px;background-color: #fff; height: 440px;}
.review_list .swiper-slide img {width: 100%; height: 235px; object-fit: cover;}
.review_list .swiper-slide .description {padding: 20px;}
.review_list .swiper-slide .description .pname {display: block;font-size: 18px; font-weight: 600; height: 43px; overflow: hidden;}
.review_list .swiper-slide .description .memo {display: block;font-size: 16px; font-weight: 400;margin: 5px 0 15px; height: 40px; overflow: hidden;}
.review_list .swiper-slide .description .info_wrap {display: flex; }
.review_list .swiper-slide .description .info_wrap .txt_wrap {flex: 7.5; display: flex; flex-direction: column; justify-content: flex-end;}
.review_list .swiper-slide .description .info_wrap .txt_wrap span {display: block; font-size: 15px; font-weight: 400; margin-top: 5px;}
.review_list .swiper-slide .description .info_wrap .img_wrap {flex: 1.5;}
.review_list .swiper-slide .description .info_wrap .img_wrap img {width: 60px; height: 60px; object-fit: cover; border-radius: 5px;}
@media (min-width: 1400px) {
    .review_list .swiper-wrapper {width: 1400px;}
}
/* 슬라이드형 */
.review_list .slick-dots {position:unset; margin-top: 20px;}
.review_list .swiper-pagination li {float: none;}
.review_list .swiper-pagination button {width: 16px;height: 4px;border-radius: 0;}
.review_list .swiper-arrow {top: 40%; opacity: 1 !important;}
.review_list .swiper-arrow.swiper-prev {left: 60px}
.review_list .swiper-arrow.swiper-next {right: 60px}

/*** 메인 배너 ***/
.main_banner_wrap {padding: 40px 0;}
/* 2단 */
.main_banner_w2 {display: flex; gap: 25px;}
.main_banner_w2 li {width: 49%; border-radius: 7px; 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;}
.main_banner_w1 li {width: 100%; border-radius: 7px; 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: 60px 0 0}
.video_wrap {margin-top: 30px;width: 100%; height: 591px; border-radius: 7px; overflow: hidden;}
.video_wrap iframe {width: 100%; height: 100%; border: 0;}

/*** 기존(tubeweb) ***/
.best_wrap {height:400px;margin-top:30px;position:relative;overflow:hidden;}
.best_wrap:after {clear:both;content:'';}
.best_wrap .bnr1 {width:280px;height:400px;position:absolute;top:0;left:0;}
.best_wrap .bnr2 {width:400px;height:195px;position:absolute;top:0;left:290px;}
.best_wrap .bnr3 {width:400px;height:195px;position:absolute;bottom:0;left:290px;}
.best_rol_slide {width:190px;height:330px;padding:35px 45px;background-color:#f1f1f1;position:absolute;top:0;right:0;}
.best_rol_slide h2 {font-size:22px;font-weight:600;color:#222;line-height:1em;text-align:center;}
.best_rol_slide h2:after {width:20px;height:1px;margin:15px auto 25px;background-color:#222;display:block;content:'';}
.best_rol_slide dl {width:190px;text-align:left;float:left;position:relative;outline:none;}
.best_rol_slide dl a {display:block;text-decoration:none !important;outline:none;}
.best_rol_slide dl .sale {width:50px;height:50px;font-size:15px;font-weight:600;line-height:50px;color:#fff;border-radius:30px;background-color:#f33e31;text-align:center;position:absolute;top:0;left:0;z-index:50;}
.best_rol_slide dl .pimg {width:190px;height:190px;border-radius:50%;overflow:hidden;position:relative;}
.best_rol_slide dl .pimg img {width:100%;height:auto;}
.best_rol_slide dl dd {text-align:center;}
.best_rol_slide dl .pname {height:32px;font-size:13px;margin:17px 0 9px;line-height:1.3em;overflow:hidden;}
.best_rol_slide dl .price .mpr {font-size:18px;font-weight:800;color:#000;letter-spacing:-1px;}
.best_rol_slide dl .price .mpr span {font-weight:normal;margin-left:2px;}
.best_rol_slide dl .price .spr {margin-right:5px;font-size:13px !important;font-weight:normal;color:#999;margin-right:7px;text-decoration:line-through;}
.best_rol_slide dl .ic_bx {width:86px;margin-left:-43px;position:absolute;top:77px;left:50%;right:0;z-index:20;text-align:center;display:none;}
.best_rol_slide dl .pimg:before {background-color:rgba(0,0,0,0.2);border-radius:50%;position:absolute;top:0;left:0;right:0;bottom:0;z-index:10;opacity:0;content:'';transition:All 0.3s ease;-webkit-transition:All 0.3s ease;-moz-transition:All 0.3s ease;-o-transition:All 0.3s ease;}
.best_rol_slide dl:hover .pimg:before {opacity:1;}
.best_rol_slide dl:hover .ic_bx {display:block;}
.best_rol_slide .slick-slider {position:initial !important;}
.best_rol_slide .slick-arrow {width:15px;height:50px;margin-top:-25px;font-size:0;color:rgba(0,0,0,0.15);position:absolute;top:50%;outline:none;}
.best_rol_slide .slick-arrow:before {font-family:'FontAwesome';font-size:50px;font-weight:600;}
.best_rol_slide .slick-next {right:15px;}
.best_rol_slide .slick-next:before {content:'\f105';}
.best_rol_slide .slick-prev {left:15px;}
.best_rol_slide .slick-prev:before {content:'\f104';}

.wide_bn img {width:100%;height:auto;}

/* 메인 베스트 버튼 */
.mask_bn {width:100%;min-width:1050px;height:350px;margin-top:50px;position:relative;}
.mask_bn:before {background-color:rgba(0,0,0,0.1);position:absolute;top:0;left:0;bottom:0;right:0;display:block;content:'';}
.mask_bn a {display:block;}
.mask_bn p {width:600px;margin-left:-300px;text-align:center;display:table;position:absolute;left:50%;top:0;bottom:0;z-index:10;}
.mask_bn span {height:350px;font-size:33px;font-weight:600;line-height:1.4em;color:#fff;display:table-cell;vertical-align:middle;}

.mmd_bn {width:1050px;height:500px;margin:0 auto;position:relative;}
.mmd_bn li {position:absolute;}
.mmd_bn li.bnr1 {width:480px;height:290px;top:0;left:0;}
.mmd_bn li.bnr2 {width:200px;height:290px;top:0;left:490px;}
.mmd_bn li.bnr3 {width:690px;height:200px;bottom:0;left:0;}
.mmd_bn li.bnr4 {width:300px;height:500px;top:0;right:0;}

.mtit {height:25px;text-align:center;position:relative;clear:both;}
.mtit:after {width:400px;height:1px;margin:-13px auto 0;background-color:#222;display:block;content:'';}
.mtit span{font-size:25px;font-weight:600;line-height:1em;color:#222;margin:0 auto;padding:0 25px;background-color:#fff;display:inline-block;}

/*메인 카테고리별 베스트*/
.bestca_tab {height:40px;margin:35px 0 25px;text-align:center;overflow:visible;clear:both;}
.bestca_tab li {font-size:14px;padding:0 20px;color:#888;border-width:1px 1px 1px 0;border-style:solid;border-color:#e1e1e1;text-align:center;float:left;cursor:pointer;position:relative;overflow:visible;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.bestca_tab li:first-child {border-left:1px solid #ddd;}
.bestca_tab li span {height:40px;line-height:38px;overflow:hidden;display:block;}
.bestca_tab li.active {background-color:#222;border-color:#222;color:#fff;}
.bestca_tab li.active:after {width:0;height:0;border:8px solid transparent;border-bottom:none;border-top-color:#222;display:inline-block;position:absolute;bottom:-8px;left:50%;margin-left:-8px;content:'';}
.bestca ul {height:420px;display:none;}
.bestca li {width:25%;height:420px;border-width:1px 0 1px 1px;border-style:solid;border-color:#e1e1e1;position:relative;float:left;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.bestca li:first-child {border-left-color:#fff;}
.bestca li > a {padding:35px 20px;text-decoration:none !important;display:block;}
.bestca li p {overflow:hidden;}
.bestca li dd {text-align:center;}
.bestca li .pimg {overflow:hidden;position:relative;margin-bottom:15px;}
.bestca li .pimg:after {background-color:rgba(0,0,0,0);border-radius:50%;position:absolute;top:41px;left:0;right:0;bottom:0;z-index:10;content:'';transition:All 0.3s ease;-webkit-transition:All 0.3s ease;-moz-transition:All 0.3s ease;-o-transition:All 0.3s ease;}
.bestca li .pimg img {width:209px;height:209px;border-radius:50%;}
.bestca li .pimg:before {width:20px;height:1px;margin:20px auto;background-color:#bbb;display:block;content:'';}
.bestca li .pname {height:40px;padding:0 10px;font-size:15px;font-weight:600;line-height:1.4em;text-align:center;}
.bestca li .price .mpr {font-size:18px;font-weight:800;color:#000;letter-spacing:-1px;}
.bestca li .price .mpr span {font-weight:normal;margin-left:2px;}
.bestca li .price .spr {margin-right:5px;font-size:13px !important;font-weight:normal;color:#999;margin-right:7px;text-decoration:line-through;}
.bestca li .petc {margin-top:10px;}
.bestca li .ic_bx {width:86px;margin:3px 0 0 -43px;opacity:0;position:absolute;top:50%;left:50%;right:0;z-index:20;text-align:center;transition:All 0.3s ease;-webkit-transition:All 0.3s ease;-moz-transition:All 0.3s ease;-o-transition:All 0.3s ease;}
.bestca li:hover .pimg:after {background-color:rgba(0,0,0,0.2);}
.bestca li:hover .ic_bx {opacity:1;}
.bestca li.empty_list {width:100%;line-height:300px;font-size:13px;color:#bbb;}