/* BASIC css start */
#productClass .page-body > img,
#productClass .page-body > a img { display: block; width: 100%; height: auto; margin-bottom: 0 !important; }

/* class-list */
#productClass .cate-wrap { margin: 0 auto 40px; overflow: hidden }
#productClass .cate-wrap .bcate { margin-bottom: 40px; font-size:28px; font-weight: 600; color:var(--black03); text-align:center; }
#productClass .cate-wrap .class-list ul { text-align:center}
#productClass .cate-wrap .class-list ul:after { display:block; clear:both; content:'' }
#productClass .cate-wrap .class-list ul li { width: auto; margin-right: 15px; }
#productClass .cate-wrap .class-list ul li:last-of-type { margin-right: 0; }
#productClass .cate-wrap .class-list ul li a { display:block; height: 43px; font-size:15px; font-weight: 500; letter-spacing: -0.7px; line-height: 43px; padding: 0 19px; box-sizing: border-box; border-radius: 4px; background-color: var(--gray03); color: var(--black02); }
#productClass .cate-wrap .class-list ul li.sel a,
#productClass .cate-wrap .class-list ul li:hover a { background-color: var(--red); color: var(--white); font-weight: 600; }

#productClass .item-wrap { margin-top: 0px; }
/* best-item */

#productClass .best-item { padding-top: 20px; padding-bottom: 10px; border-top: 2px solid #5c5c5c; border-bottom: 2px solid #5c5c5c; background-color: #f8f8f8; }

.best_sec{margin-bottom:00px; padding:100px 0 00px; }

.best_sec_inner{ margin:0 auto;position:relative; }
.best_sec .swiper{padding-bottom:00px;}
.best_sec .swiper .swiper-pagination-progressbar{bottom: 0; top: unset; height:3px; background-color: rgba(0,0,0,.09);}
.best_sec .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{background-color: #dc3737;}


.scate-more .more {display: block;width: 200px;height: 0x;margin: 10px auto 0;border: 1px solid var(--gray05);border-radius: 100px;box-sizing: border-box;position: relative;top: 0;left: 0;font-size: 15px;font-weight: 400;line-height: 52px;overflow: hidden;transition: 0.5s;text-align: center;}
.scate-more .more::before { content: ""; width: 100%; height: 100%; border-radius: 100px; position: absolute; top: 0; left: 0; transition: 0.5s; background-color: var(--red); transform: translateX(-100%); z-index: -1; }
.scate-more .more:hover { color: var(--white); }
.scate-more .more:hover::before { transform: translateX(0); }
/* BASIC css end */