/*# sourceURL=../css/main.css */
/*@ sourceURL=../css/main.css */
@charset "utf-8";

#max_container {width:100%; min-width:1366px; height:auto; position:relative;}

/* top banner */
.max_top_ad {display:block; width:100%; min-width:1366px; height:48px; line-height:48px; background-color:#000; color:#fff; text-align:center; font-size:14px; position:absolute; top:0; left:0; z-index:70;}
.max_top_ad button {position:absolute; top:14px; right:50%; margin-right:-684px;}

/* main visual */
#main_visual {width:100%; height:560px; position:relative; overflow:hidden;}
#main_visual .main-visual-swiper {width:100%; height:100%;}
#main_visual .main-visual-swiper .swiper-wrapper {height:100%;}
#main_visual .main-visual-swiper .swiper-slide {width:100%; height:560px; text-align:center; overflow:hidden; position:relative;}
#main_visual .main-visual-swiper .swiper-slide a {display:block; width:100%; height:100%;}
#main_visual .main-visual-swiper .swiper-slide img,
#main_visual .main-visual-swiper .swiper-slide img.bn_item {display:block; position:absolute; top:50%; left:50%; width:auto !important; height:560px !important; max-width:none !important; max-height:560px; object-fit:contain; object-position:center center; transform:translate(-50%, -50%);}
#main_visual .main-visual-control {position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:5; display:flex; align-items:center; gap:14px; padding:8px 14px; border-radius:999px; background:rgba(255,255,255,.08);}
#main_visual .main-visual-navi {display:flex; align-items:center; color:rgba(255,255,255,.72); font-size:12px; line-height:1; letter-spacing:.08em;}
#main_visual .main-visual-navi .cur-page {font-weight:700; color:#fff;}
#main_visual .main-visual-navi .total_page {color:rgba(255,255,255,.52);}
#main_visual .main-visual-navi .total_page:before {content:'/'; display:inline-block; margin:0 6px 0 5px; color:rgba(255,255,255,.36);}
#main_visual .main-visual-pagination {position:static; width:auto !important; left:auto; bottom:auto !important; display:flex; align-items:center;}
#main_visual .main-visual-pagination .swiper-pagination-bullet {width:6px; height:6px; margin:0 4px !important; background:rgba(255,255,255,.26); opacity:1; box-shadow:none;}
#main_visual .main-visual-pagination .swiper-pagination-bullet-active {background:rgba(255,255,255,.74); transform:scale(1.04);}
#main_visual .main-visual-pagination.swiper-pagination-lock {display:none;}

/* main product common */
.prod_wrap {width:1366px; height:auto; margin:96px auto 0; position:relative;}
.prod_wrap:after {content:''; display:block; clear:both;}
.prod_wrap .max_tt {padding-left:6px; text-transform:uppercase; letter-spacing:0;}
.prod_wrap .max_tt span {display:block; padding-top:10px; font-size:15px; font-family:'Verdana','Malgun Gothic'; color:#797979; letter-spacing:-1px;}
.prod_wrap .inner {}
.prod_wrap .inner .tabmenu { width:100%; height:auto; margin:10px auto 30px; box-sizing:border-box; display:flex; align-items: center; justify-content: center; gap:10px;}
.prod_wrap .inner .tabmenu li { display:flex; }
.prod_wrap .inner .tabmenu li button { display:block; width:100%; border-radius:999px; font-weight: 400; position:relative; color: #29292d;padding:5px 20px; border: 1px solid #e8e8e8; }
.prod_wrap .inner .tabmenu li .active { font-weight:600;  background:#333; color:#fff; border:none; }


.prod_wrap .tabcont {float:left; width:100%; height:auto; overflow:hidden;}
.prod_wrap .tabcont .bt_control.prev {right:57px;}
.prod_wrap .tabcont .bt_control.next {right:10px;}
.prod_wrap .tabcont .max_prd_lst {margin-top:32px; position:relative; }
.prod_wrap .bt_more {display:block; width:128px; padding:14px 0; margin:0 auto; border:1px solid currentColor; box-sizing:border-box; font-size:14px; margin-top:32px; border-radius:8px;}

.prod_wrap .product-swiper-box {margin-top:32px; position:relative;}
.prod_wrap .product-swiper {overflow:hidden;}
.prod_wrap .product-swiper .max_prd_lst {margin-top:0; flex-wrap:nowrap;}
.prod_wrap .product-swiper .max_prd_lst li {flex:0 0 20%; width:20%; max-width:20%; height:auto; box-sizing:border-box;}
.prod_wrap .product-swiper .max_prd_lst li.empty-item {flex:0 0 100%; width:100%; max-width:100%;}
.prod_wrap .product-swiper-box .swiper-pagination {display:none !important;}
.prod_wrap .product-swiper-button {display:flex; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid #d9d9d9; border-radius:50%; background:rgba(255,255,255,.96); color:#111; font-size:0; line-height:1; position:absolute; top:130px; z-index:3; box-shadow:0 8px 18px rgba(0,0,0,.08); cursor:pointer; transition:background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;}
.prod_wrap .product-swiper-button::before {content:''; display:block; width:10px; height:10px; border-top:2px solid currentColor; border-right:2px solid currentColor;}
.prod_wrap .product-swiper-prev::before {transform:rotate(-135deg); margin-left:4px;}
.prod_wrap .product-swiper-next::before {transform:rotate(45deg); margin-left:-2px;}
.prod_wrap .product-swiper-button:hover {background:#111; color:#fff; border-color:#111;}
.prod_wrap .product-swiper-button.is-disabled {opacity:.35; cursor:default; pointer-events:none;}
.prod_wrap .product-swiper-button.is-lock {display:none;}
.prod_wrap .product-swiper-prev {left:-12px;}
.prod_wrap .product-swiper-next {right:-12px;}


#best_prod {margin-bottom:0;}
#best_prod mark {width:32px; height:32px; line-height:32px; text-align:center; background-color:#252525; color:#fff; position:absolute; top:0; left:0; z-index:1; font-weight:bold; font-size:12px;}
#best_prod .scroll_bar_wrap {width:100%; height:436px; overflow:hidden;}
#best_prod .scroll_bar_wrap .max_prd_lst li:nth-child(1) mark {background-color:#ed145b;}
#best_prod .scroll_bar_wrap .scroll_bar {width:1366px; height:4px; border-radius:50px; margin:0 auto; background-color:#eee; position:relative;}
#best_prod .scroll_bar_wrap .scroll_bar button {height:4px; border-radius:50px; background-color:#252525; position:absolute; top:0; left:0; font-size:0;}

#popular_prod {}

#popular_prod > .max_prd_lst {margin-top:32px;}

#good_prod .max_tt {font-weight:400; letter-spacing:-2px;}
#good_prod .max_prd_lst {margin-top:32px;}


/* edit brand */
#edit_brand {width:1382px; height:auto; margin:96px auto 0; position:relative; text-align:center; overflow:hidden;}
#edit_brand:after {content:''; display:block; clear:both;}
#edit_brand .max_tt {text-transform:uppercase; letter-spacing:0;}
#edit_brand .bt_control.prev {right:57px;}
#edit_brand .bt_control.next {right:10px;}
#edit_brand .inner {margin-top:32px; position:relative; overflow:hidden;}
#edit_brand .inner ul {width:100%; height:auto; position:absolute; z-index:2;}
#edit_brand .inner ul:after {content:''; display:block; clear:both;}
#edit_brand .inner ul li {float:left; width:260px; margin:8px; height:auto; color:#fff;}
#edit_brand .inner ul li a {display:block; width:260px; height:100%; box-sizing:border-box; position:relative; overflow:hidden;}
#edit_brand .inner ul li a .thumb {display:block; font-size:0; background:#000;}
#edit_brand .inner ul li a .thumb img {opacity:.8;}
#edit_brand .inner ul li a > p {width:100%; height:auto; padding:24px; position:absolute; bottom:24px; left:0; box-sizing:border-box;}
#edit_brand .inner ul li a p {font-size:13px; letter-spacing:0;}
#edit_brand .inner ul li a p strong {display:block; font-weight:bold; font-size:18px; text-transform:uppercase; padding-bottom:8px;}
#edit_brand .inner ul li a .box_over {opacity:0; transition:all .3s ease; width:100%; height:100%; padding:128px 24px 0; box-sizing:border-box; position:absolute; top:130px; left:0; z-index:1;}
#edit_brand .inner ul li a .box_over:after {content:''; display:block; width:100%; height:100%; background-color:rgba(0,0,0,.65); position:absolute; top:0; left:0; z-index:-1;}
#edit_brand .inner ul li a .box_over span {display:inline-block; padding:14px 24px; border:1px solid #fff; box-sizing:border-box; font-size:12px; margin-top:24px;}
/* hover */
#edit_brand .inner ul li a:hover > p {opacity:0;}
#edit_brand .inner ul li a:hover .box_over {opacity:1; top:0; color:#fff;}
#edit_brand .bt_more {display:inline-block; padding:14px 24px; border:1px solid currentColor; box-sizing:border-box; font-size:14px; margin-top:32px; border-radius:8px;}


.visual-bottom-wrap { width:100%; padding:86px 0 20px; }
.visual-bottom-inner { width:1366px; margin:0 auto; display:flex; flex-wrap: wrap; gap:20px 10px; }
.visual-bottom-inner .visual-bottom-item { flex:0 0 calc((100% - 70px) / 8); max-width:calc((100% - 70px) / 8); }
.visual-bottom-inner .visual-bottom-item a { display:flex; flex-direction: column; align-items: center; font-weight:600; transition:transform .35s cubic-bezier(.22,1,.36,1); }
.visual-bottom-inner .visual-bottom-item a .img { position:relative; width:160px; height:160px; overflow:hidden; display:flex; align-items:center; justify-content:center; box-sizing:border-box; transition:background .3s ease, border-color .3s ease, box-shadow .35s ease, transform .35s ease; }
.visual-bottom-inner .visual-bottom-item a .img img { transition:transform .35s cubic-bezier(.22,1,.36,1); transform-origin:center center; }
.visual-bottom-inner .visual-bottom-item a .tit { position:relative; margin-top:10px; color:#333; transition:color .25s ease; }
.visual-bottom-inner .visual-bottom-item a .tit::after { content:""; position:absolute; left:50%; bottom:-6px; width:0; height:2px; background:#111; transform:translateX(-50%); opacity:0; transition:width .28s ease, opacity .28s ease; }
.visual-bottom-inner .visual-bottom-item a:hover .img { background:#fff; }
.visual-bottom-inner .visual-bottom-item a:hover .img img { transform:scale(1.03); }
.visual-bottom-inner .visual-bottom-item a:hover .tit { color:#000; }
.visual-bottom-inner .visual-bottom-item a:hover .tit::after { width:34px; opacity:1; }

.middle_banner { width:1366px; min-width:1366px; height:auto; margin:100px auto; position:relative; overflow:hidden; }
.middle_banner .banner-item { width:1366px; }
.middle_banner .banner-item a { display:block; }
.middle_banner .banner-item img { display:block; width:100%; height:auto; }