.visualSlideWrapper { position: relative; } 
.visualSlider { position: relative; } 
.visualSlider .swiper-wrapper > .el { position:relative; overflow:hidden; height:100vh; will-change: opacity, transform; background: #000; } 
.visualSlider .swiper-wrapper > .el .bg { position:absolute; left:0; top:0; width:100%; height:100%; } 
.visualSlider .swiper-wrapper > .el .bg:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .15); content: ''; } 
.visualSlider .swiper-wrapper > .el .bg > img { height: 100%; object-fit: cover; width: 100%; } 
.visualSlider .swiper-wrapper > .el .vod_wrap { position: relative; width: 100%; height: 100%; } 
.visualSlider .swiper-wrapper > .el .vod_wrap:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .15); content: ''; z-index: 1; } 

.visualSlideWrapper .slogan_wrap { position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; z-index: 2; } 
.visualSlideWrapper .slogan_wrap .slogan { text-align: center; } 
.visualSlideWrapper .slogan_wrap .slogan > .t1 { font-size: calc(180 / 1920 * 100vw); color: var(--color-point2); font-weight: 700; font-family: var(--ff1); line-height: 1; letter-spacing: 1.5rem; } 
.visualSlideWrapper .slogan_wrap .slogan > .t4 { font-size: var(--font-size-lg-2); color: var(--color-point2); margin-top: var(--space-4); font-family: var(--ff1); text-transform: uppercase; line-height: var(--line-height-normal); } 

.mainScroll { position:absolute; left: 50%; bottom: 0; transform: translateX(-50%); z-index: 99; } 
.mainScroll .inner { align-items: center; justify-content: center; } 
.mainScroll .tt { display:block; text-align: center; color: var(--color-point2); font-size: var(--font-size-sm); margin-bottom: var(--space-2); font-family: var(--ff1); font-weight: 400; } 
.mainScroll .mouseImg { position:relative; } 
.mainScroll .mouseImg > .point { width: 1px; height: 35px; background: rgba(255, 255, 255, 0.2); margin: 0 auto; position: relative; overflow: hidden; } 
.mainScroll .mouseImg > .point > span { display: block; width: 1px; height: 200%; background: #fff; position: absolute; top: 0; left: 0; bottom: auto; -webkit-animation: scroll 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; animation: scroll 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } 

@-webkit-keyframes scroll { 
 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 
to { -webkit-transform: translateY(50%); transform: translateY(50%); } 
 }

@keyframes scroll { 
 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); } 
to { -webkit-transform: translateY(50%); transform: translateY(50%); } 
 }
.mainScroll .mouseImg > img { width: 100%; height: 30px; object-fit: contain; filter: var(--crWhitefil); } 

#scrollAni { position: absolute; left: 50%; width: 6em; margin-left: -3em; text-align: center; bottom: 2em; opacity: 1; z-index: 100; text-decoration: none; animation-name: downAni; animation-duration: 3s; animation-iteration-count: infinite } 
#scrollAni .xi { vertical-align: middle } 
#scrollAni .xi-mouse { font-size: 3em; color: #fff; margin-right: -7px } 
#scrollAni .xi-scroll { font-size: 2em; color: #fff; margin-left: -7px } 
#scrollAni .tt { display: block; color: #fff; font-size: .75em; text-transform: uppercase; font-family: Arial, Helvetica, sans-serif; letter-spacing: 0 } 
#scrollAni.hide { opacity: 0; z-index: -1 } 

@keyframes downAni { 60% { margin-bottom: 0 } 
80% { margin-bottom: -1em } 
100% { margin-bottom: 0 } 
 }

/*sec_trand*/
#sec_trand { } 
#sec_trand .productSlide_control { position: absolute; right: 0; top: 1rem; } 
#sec_trand .productSlide_control .swiperBtn { width: auto; height: auto; border-radius: 0; } 
#sec_trand .productSlide_control .swiperBtn:before { color: #111; font-size: var(--font-size-md); } 
#sec_trand .productSlide_control .swiper-pagination-container { display: flex; gap: var(--gap-sm); } 
#sec_trand .productSlide .swiper-wrapper { display: flex; align-items: stretch; } 
#sec_trand .productSlide .el { height: auto; } 
.productWrapper { position:relative; height: 100%; } 
.productWrapper .icoW { /* position: absolute; right: 0rem; bottom: 0rem; display: flex; gap: .25rem; z-index: 9; */ } 
.productContainer { cursor: pointer; height: 100%; /* padding: 2.5rem 2.5rem 1rem 2.5rem; box-sizing: border-box; border: 1px solid var(--gray-line); border-right: none; */ } 
.productContainer .proTop { position:relative; } 
.productContainer .proTop .CateList { position: absolute; left: 1rem; top: 1rem; z-index: 9; } 
.productContainer .proTop .proImgBox { width: 100%; height: 20rem; overflow: hidden; } 
.productContainer .proTop .proImgBox > img { width: 100%; height: 100%; object-fit: cover; transition: .8s ease; } 
.productContainer .Btn_wrapper { padding: 1.5rem 0rem 0 0rem; box-sizing: border-box; color: var(--color-point6); } 
.productContainer .Btn_wrapper .infoCon { /* padding: .75rem 0; border-top: 2px solid var(--color-point4); border-bottom: 2px solid var(--color-point4); */ } 
.productContainer .Btn_wrapper .infoCon .tit { font-size: var(--font-size-base); font-weight: 500; line-height: var(--line-height-tight); } 
.productContainer .Btn_wrapper .infoCon .txt { font-size: var(--font-size-sm); font-weight: 400; margin-top: var(--space-1); } 

.productContainer .Btn_wrapper .etcWrap { display: flex; align-items: center; gap: var(--gap-sm); padding-top: var(--space-2); } 

.productContainer .Btn_wrapper .price { display: flex; justify-content: space-between; align-items: start; width: 100%; } 
.productContainer .Btn_wrapper .price .cost { } 
.productContainer .Btn_wrapper .price .cost > .tt { display: inline-block; font-size: var(--font-size-sm); color: #999; letter-spacing: -0.03rem; } 
.productContainer .Btn_wrapper .price .cost > .tt > .pr { margin-right: 3px; } 
.productContainer .Btn_wrapper .price > .saleP { display: flex; align-items: baseline; gap: var(--gap-xs); } 
.productContainer .Btn_wrapper .price > .saleP > .percent { } 
.productContainer .Btn_wrapper .price > .saleP > .percent > .num { font-size: var(--font-size-xs); font-weight: 500; padding: .15rem .25rem; box-sizing: border-box; background: var(--color-point7); color: #fff; letter-spacing: -0.03rem; } 
.productContainer .Btn_wrapper .price > .saleP > .tt { font-size: var(--font-size-sm); font-weight: 500; line-height: 1; letter-spacing: -0.03rem; } 

.productSlide_wrap .product_paging_control { margin: 0 auto; width: 16rem; margin-top: var(--space-6); } 

.productContainer:hover .proTop .proImgBox > img { transform: scale(1.03); } 
.productContainer:hover .Btn_wrapper .infoCon > .tit,
.productContainer:hover .Btn_wrapper .infoCon > .txt { text-decoration: underline; } 

/*sec_category*/
 #sec_category { position: relative; overflow: hidden; width: 100%; } 
#sec_category .box1 { position:relative; height: 100%; } 
#sec_category .wideImg-inner { position: relative; width: 100%; height: 43.5rem; overflow: hidden; } 
#sec_category .wideImg-inner:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .1); content: ''; z-index: 1; } 
#sec_category .wideImg-cover { position:relative; width: 100%; height: 100%; } 
#sec_category .wideImg-cover:before { } 
#sec_category .wideImg-cover .wideImg-thumb { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } 
#sec_category .wideImg-cover .wideImg-thumb > img { width: 100%; height: 100%; object-fit: cover; transform-origin: center center; } 
#sec_category .wideImg-cover .wideImg-thumb:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .1); content: ''; } 
#sec_category .wideImg-inner .infoInner { position: absolute; display: flex; left: 0; top: 0; width: 100%; height: 100%; z-index: 2; } 
#sec_category .wideImg-inner .innerContainer { display: flex; height: 100%; align-items: center; justify-content: center; flex-direction: column; } 
#sec_category .wideImg-inner .innerContainer .tit2 { color: #fff; letter-spacing: -2px; } 
#sec_category .wideImg-inner .innerContainer .tit2 > i { font-family: var(--ff2); font-style: italic; } 
#sec_category .cateLink_container { padding: 4rem 0; box-sizing: border-box; } 
#sec_category .cateLink_container { } 


#sec_category .cate-bg-img-con { position: relative; height: calc(var(--vh, 1vh) * 90); width: 100%; } 
#sec_category .cate-bg-img-con .cate-bg-img-list { position: absolute; width: 100%; height: 100%; top: 0; left: 0; } 
#sec_category .cate-bg-img-con .cate-bg-img-list > .bg_item { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; z-index: 0; } 
#sec_category .cate-bg-img-con .cate-bg-img-list > .bg_item > .bg { position: relative; width: 100%; height: 100%; } 
#sec_category .cate-bg-img-con .cate-bg-img-list > .bg_item > .bg > img { width: 100%; height: 100%; object-fit: cover; } 
#sec_category .cate-bg-img-con .cate-list-con { display: flex; gap: .5rem; position:relative; height: 100%; z-index: 3; } 
#sec_category .cate-bg-img-con .cate-list-con > li { width: calc((100% - .5rem) / 2); position: relative; height: 100%; vertical-align: top; box-sizing: border-box; transition: .3s ease; } 
#sec_category .cate-bg-img-con .cate-list-con > li:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .265); content: ''; z-index: 1; } 
#sec_category .cate-bg-img-con .cate-list-con > li .inner-wrap { position:relative; width: 100%; height: 100%; } 
#sec_category .cate-bg-img-con .cate-list-con > li .inner-wrap > .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center; padding: 0 4rem; box-sizing: border-box; transition: padding-bottom 0.6s ease-in-out; overflow: hidden; z-index: 2; } 
#sec_category .cate-bg-img-con .cate-list-con > li .inner-wrap > .inner > .kn { position:relative; display: inline-block; font-size: var(--font-size-md); font-weight: 500; color: var(--color-point2); } 
#sec_category .cate-bg-img-con .cate-list-con > li .inner-wrap > .inner > .kn:before { position: absolute; bottom: -.35rem; width: 100%; height: 2px; background: var(--color-point4); content: ''; } 
#sec_category .cate-bg-img-con .cate-list-con > li .inner-wrap > .inner > .tit { font-size: var(--font-size-xl); font-family: var(--ff1); color: #fff; font-weight: 400; margin: 1.5rem 0; } 
#sec_category .cate-bg-img-con .cate-list-con > li .inner-wrap > .inner > .txt { font-size: var(--font-size-base); font-weight: 400; line-height: var(--line-height-normal); color: rgba(255,255,255, .815); } 
#sec_category .cate-bg-img-con .cate-list-con > li .inner-wrap > .inner > .inner_arrow { position: absolute; bottom: -4rem; left: 50%; transform: translateX(-50%); width: 3rem; height: 3rem; color: var(--color-point2); backdrop-filter: blur(2rem); border-radius: var(--radius-pill); background: var(--color-point4); display: flex; align-items: center; justify-content: center; transition: bottom 0.6s ease-in-out; } 

#sec_category .cate-bg-img-con .bg_item.active { opacity:1.0; z-index: 1; } 
#sec_category .cate-bg-img-con .cate-list-con > li.active .inner-wrap > .inner .inner_arrow { bottom: 0; } 
#sec_category .cate-list-con .item:not(.active) .inner-wrap > .inner > .icon { opacity: 1; } 

/*sec_about*/
#sec_about { position: relative; overflow: hidden; } 
#sec_about .textAniW { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; } 
#sec_about .textAniW > i { font-size: 12vmin; text-transform: uppercase; font-family: var(--ff1); font-weight: 400; color: var(--color-point5); } 
#sec_about .AboutContainer { position: relative; display: flex; gap: var(--space-5); justify-content: center; z-index: 2; } 
#sec_about .AboutContainer .titleCon { position: relative; width: 30%; max-width: 30%; } 
#sec_about .AboutContainer .titleCon > .titPo { position: absolute; width: max-content; top: 7rem; left: 4.35rem; z-index: 2; } 
#sec_about .AboutContainer .titleCon .tit { font-size: var(--font-size-xxxl); font-family: var(--ff1); font-weight: 400; z-index: 2; } 
#sec_about .AboutContainer .aboutImg { height: calc(var(--vh, 1vh) * 74.5); border-radius: var(--radius-lg); overflow: hidden; width: 27.5%; } 
#sec_about .AboutContainer .aboutImg img { width: 100%; height: 110%; object-fit: cover; filter: grayscale(.615); } 
#sec_about .AboutContainer .descCon { width: 30%; max-width: 30%; margin-top: auto; } 
#sec_about .AboutContainer .descCon > .subT { font-size: var(--font-size-md); font-weight: 600; line-height: var(--line-height-normal); } 
#sec_about .AboutContainer .descCon > .desc { font-size: var(--font-size-base); line-height: var(--line-height-normal); margin-top: var(--space-3); } 

/*sec_best*/
#sec_best { background: #fff; } 
#sec_best .pro_tab { display: flex; justify-content: center; } 
#sec_best .pro_tab > li { min-width: 9.5rem; } 
#sec_best .pro_tab > li > .con { position:relative; display: flex; align-items: center; gap: .25rem; justify-content: center; padding-bottom: .75rem; cursor: pointer; border-bottom: 3px solid #ddd; } 
#sec_best .pro_tab > li > .con:before { position: absolute; bottom: -3px; width: 100%; transform: scaleX(0); height: 3px; background: var(--color-black-1); content: ''; transition: .3s ease; } 
#sec_best .pro_tab > li > .con .tt { font-size: var(--font-size-base); text-align: center; font-family: var(--ff1); font-weight: 400; } 
#sec_best .pro_tab > li > .con:hover:before,
#sec_best .pro_tab > li.on > .con:before { transform: scaleX(1); } 
#sec_best .best_container .bestCate { position: sticky; top: calc(var(--headerH) + 50px); width: 25%; } 
#sec_best .best_container .bestList { flex: 1; display: flex; align-items: stretch; flex-wrap: wrap; gap: var(--gap-md); } 
#sec_best .best_container .bestList > .productWrapper { width: calc((100% - 3.2rem) / 3); height: unset; } 
#sec_best .best_container .pro_tab > li:hover > .con .cr > .xi,
#sec_best .best_container .pro_tab > li.on > .con .cr > .xi { transform: translateX(0); opacity: 1; filter: blur(0); } 

#sec_best .proBest_container { display: flex; gap: 1.5rem; align-items: center; margin-top: var(--space-6); overflow: hidden; } 
#sec_best .proBest_container .leftContianer { position: relative; width: 35%; } 
#sec_best .proBest_container .leftContianer:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .15); content: ''; z-index: 1; } 
#sec_best .proBest_container .leftContianer > .inner { position: relative; display: flex; flex-direction: column; justify-content: space-between; padding: 4rem; box-sizing: border-box; height: 37.5rem; z-index: 2; } 
#sec_best .proBest_container .leftContianer > .inner > .cate { display: flex; align-items: center; gap: .25rem; font-family: var(--ff1); font-size: var(--font-size-md); font-weight: 400; color: #fff; } 
#sec_best .proBest_container .leftContianer > .inner > .cate > .xi { font-size: var(--font-size-md-1); } 
#sec_best .proBest_container .leftContianer > .inner > .tit { font-size: var(--font-size-xxl); color: #fff; font-weight: 400; line-height: var(--line-height-tight); font-family: var(--ff1); } 
#sec_best .proBest_container .rightContainer { width: 65%; min-width: 65%; flex-shrink: 0; box-sizing: border-box; } 
#sec_best .proBest_container .bestProdSlide_wrap { position:relative; } 
#sec_best .proBest_container .bestProdSlide_wrap .bestProdSlide_control { position:relative; margin-top: var(--space-4); } 
#sec_best .proBest_container .bestProdSlide_wrap .bestProdSlide_control .swiperControl { display: block; } 

/*sec_event*/
#sec_event { position:relative; } 
#sec_event .event_container { display: flex; } 
#sec_event .event_container .eventSlider_wrap { position:relative; width: 60%; } 
#sec_event .eventSlider_control { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 2; } 
#sec_event .event_container .eventSlider_wrap .eventBanner { display: block; width: 100%; height: calc(var(--vh, 1vh) * 65); } 
#sec_event .event_container .eventSlider_wrap .eventBanner > img { width: 100%; height: 100%; object-fit: cover; transition: 2s ease; } 
#sec_event .event_container .eventSlider_wrap .eventBanner.gsClass:not(.on) > img { transform: scale(1.1); } 
#sec_event .event_container .eventSlider_wrap .eventBanner.gsClass.on > img { transform: scale(1); } 
#sec_event .event_container .eventInfoSlider_wrap { width: 40%; padding-left: 7rem; box-sizing: border-box; } 
#sec_event .event_container .eventInfoSlider_wrap .eventInfoSlider { position:relative; height: 100%; } 
#sec_event .event_container .eventInfoSlider_wrap .infoCon { display: flex; flex-direction: column; gap: 2rem; padding: 1rem 0; box-sizing: border-box; height: 100%; opacity: 0; visibility: hidden; } 
#sec_event .event_container .eventInfoSlider_wrap .infoCon .eventTit { font-size: var(--font-size-lg-2); font-weight: 600; line-height: 1.4; } 
#sec_event .event_container .eventInfoSlider_wrap .infoCon .infoBtm { } 
#sec_event .event_container .eventInfoSlider_wrap .infoCon .infoBtm .eventDesc { font-size: var(--font-size-base); line-height: var(--line-height-normal); } 

#sec_event .event_container .eventInfoSlider_wrap .el.swiper-slide-active .infoCon { opacity: 1; visibility: visible; } 
#sec_event .event_container .eventInfoSlider_wrap .el.swiper-slide-active .infoCon { } 

/*sec_slogan*/
#sec_slogan { position:relative; padding-bottom: 0; } 
#sec_slogan .wideImg { position:relative; height: calc(var(--vh, 1vh) * 70); border-radius: var(--radius-lg); } 
#sec_slogan .wideImg:after { position: absolute; inset: 3.25rem; border: 1px solid rgba(255,255,255, .415); border-radius: var(--radius-lg); content: ''; z-index: 1; } 
#sec_slogan .wideImg:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0, .1); content: ''; z-index: 1; } 
#sec_slogan .wideImg .sloganWrap { position: absolute; top: 50%; transform: translateY(-50%); width: 100%; padding: 0 6rem; box-sizing: border-box; text-align: center; z-index: 2; } 
#sec_slogan .wideImg .sloganWrap > .tit { font-size: var(--font-size-xxl); font-family: var(--ff3); color: #fff; } 
#sec_slogan:before { position: absolute; left: 0; bottom: 0; height: 50%; width: 100%; background: var(--color-point4); content: ''; } 