@charset "utf-8";

/* slide button & scroll bar */
[role="button"]{ cursor: pointer; }
.swiper-button-disabled{ opacity: .3; }
.swiper-button-lock{ display: block; }
#wrap .swiper-scrollbar{ position: relative; left: 0; bottom: 0; width: 100%; height: 5px; background: #e8e8e8; border-radius: 100px; }
.swiper-scrollbar-drag{ position: relative; background: #1e1e1e; border-radius: inherit; cursor:grab; }
.swiper-scrollbar-drag:active{ cursor: grabbing; }
.swiper-scrollbar-drag::before{ content: ''; position: absolute; inset: -10px 0; }

/* button arrow */
.icon_arrow{ overflow: hidden; display: inline-block; position: relative; width: 2.8em; height: .9em; font-size: 10px; }
.icon_arrow::before,
.icon_arrow::after{ content: ''; position: absolute; height: 2px; background: #1e1e1e; }
.icon_arrow.orange::before,
.icon_arrow.orange::after{ background: #ea6d22; }
.icon_arrow.white::before,
.icon_arrow.white::after{ background: #fff; }
.icon_arrow::before{ inset: auto 0 0; }
.icon_arrow::after{ inset: auto 0 -1px auto; width: 1.2em; transform: rotate(45deg); transform-origin: 100%; }
.icon_arrow.left::after{ inset: auto auto -1px 0; transform: rotate(-45deg); transform-origin: 0% 100%; }
@media(max-width:767px){
    .icon_arrow{ font-size: 8.571428571px; }
}

/* visual */
#visual .mob{display:none !important;}
#visual .swiper-slide span img{width:100%;}
.visual__control{display: flex; flex-wrap: wrap; align-items: center; gap: 1.1875em; position: absolute; inset: auto 8.07291667vw 0; max-width: 450px; padding: 15px 0 21px; background: #fff; z-index: 1; }
.visual__control::before{ content: ''; position: absolute; inset: 0 -8.07291667vw; background: #fff; z-index: -1;}
#wrap .visual__pager{ bottom: auto; left: auto; width: auto; font-size: 14px; font-weight: 600; color: #afafaf; }
.visual__pager .swiper-pagination-current{ color: #1e1e1e; }
#wrap .visual__control .swiper-scrollbar{ height: 2px; background:rgba(0, 0, 0, 0.3);}

@media(max-width: 1024px){
    #visual .mob{display:block !important;}
    #visual .web{display:none !important;}
    .visual__control{padding:8px 0 12px; gap:0.6em; max-width:none; width:60%;}
    #wrap .visual__pager{font-size:13px;}
}

/* main common */
.main__section{ padding: 8.375em 0 3.125em; border-bottom: 1px solid #333; }
.main__h2{ padding-bottom: .95em; border-bottom: 1px solid #333; text-align: center; text-transform: uppercase; font-size:28px; font-weight:normal; color: #1e1e1e; }
.main__h2.text_white{ color: #fff; }
.main__h2.no_border{ border: 0; }
.main__h2.align_left{ text-align: left; }
@media(max-width: 1279px){
    .main__section{ font-size: 12px; }
    .main__h2{ font-size: 26px; }
}
@media(max-width: 767px){
    .main__section{ font-size: 8px; }
    .main__h2{ font-size: 22px; }
}

/* quick */
.main_quick{ overflow: hidden; position: sticky; float: right; margin-top: 277px; top: 50vh; right: 0.52083333%; transform: translateY(-50%); padding: 1.875em .46875em 0.84375em; background: #fff; border-radius: 3px; box-shadow: 5px 9px 15px 0 rgb(0 0 0 / 20%); text-align: center; z-index: 50; }
.main_quick__tel{ display: flex; flex-direction: column; justify-content: center; align-items: center; gap: .5625em; font-weight: 500; }
.main_quick__time{ display: block; font-size: 13px; font-weight: 500; }
.main_quick__time:first-of-type{ margin-top: 3px; }
.main_quick__time + .main_quick__time{ margin-top: -.15384615em; }
.main_quick__sns{ margin-top: 1.5625em; padding-top: .9375em; border-top: 1px dashed #e8e8e8; }
.main_quick__link{ display: flex; justify-content: center; align-items: center; width: 100%; padding: 1.09375em 0; object-fit: scale-down; }
@media(max-width:767px){
    .main_quick{ display: none; }
}

/* merchandise */
.merchandise__wrap_img{ position: relative; margin: 0 auto 1.875em; aspect-ratio: 1/1; }
.merchandise__img{ display: block; margin: 0 auto; max-width: 100%; max-height: 100%; height: 100%; object-fit: contain; }
.merchandise__number{ display: flex; justify-content: center; align-items: center; position: absolute; inset: 0; width: 2.27272727em; height: 2.27272727em; background: #1e1e1e; font-size: 20px; font-weight: 700; color: #fff; }
.merchandise__number::before,
.merchandise__number::after{ content: ''; position: absolute; width: 4.54545455em; height: 1px; background: linear-gradient(to right, #1e1e1e, #00000000); }
.merchandise__number::before{ top: 0; left: 100%; }
.merchandise__number::after{ top: calc( 100% - 1px); left: 0; transform: rotate(90deg); transform-origin: left bottom; }
.merchandise__a{ display: block; width: 100%; height: 100%; color: inherit }
.merchandise__brand{ font-size: 13px; font-weight:400; color: #b0b0b0; }
.merchandise__title{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: keep-all; font-size: 14px;}
.merchandise__price{ margin-top: 0.66666667em; font-size: 16px; font-weight:400; letter-spacing: -.05em; color: #1e1e1e; }
.merchandise__del{ margin-left: 0.77777778em; color: #d0d0d0; }
#hot_deals .swiper-scrollbar{ margin-top: 2.5625em; }
@media(max-width:1279px){
    .merchandise__number{ font-size: 18px; }
    .merchandise__brand{ font-size: 12px; }
    .merchandise__title{ font-size: 14px; }
    .merchandise__price{ font-size: 16px; }
}

/* hot deals */
#hot_deals{ padding-top: 3.15em; }

/* goods */
.goods__inr{ position: relative; margin-top: 3.125em; }
.goods__inr::before{ content: ''; position: absolute; inset: 0 auto 0 45.57142857%; width: 2px; background: #e8e8e8; }
.goods__inr::after{ content: ''; display: block; clear: both; }
.goods__first{  position: relative; float: left; width: 42.85714286%; }
.goods__first .merchandise__number{ background: #ea6d22; }
.goods__first .merchandise__brand{ font-size: 16px; }
.goods__first .merchandise__title{ font-size: 20px; }
.goods__first .merchandise__price{ font-size: 22px; }
.goods__control{ display: flex; justify-content: flex-end; gap: 1.8125em; margin: 147px 0 89px; }
.wrap_goods{ float: right; width: 51.57142857%; }
@media(min-width:768px){
    .goods__first .merchandise__wrap_img{ margin-bottom: 1.2em; }
    .goods__first .merchandise__number{ width: 2em; height: 2em; font-size: 30px; background: #ea6d22; }
    .goods__first .merchandise__price{ margin-top: 0.153846153em; }
}
@media(min-width:1280px){
    #goods .merchandise__wrap_img{ margin-bottom: 17px; }
    .goods__first .merchandise__number{ font-size: 40px; }
}
@media(max-width:1279px){
    .goods__inr::before{ left: calc( ( 100% - 16px ) / 3 + 8px ); width: 1px; }
    .goods__first{ margin-top: 54px; }
    .goods__first{ width: calc( ( 100% - 16px ) / 3 ); }
    .wrap_goods{ width: calc( ( 100% - 16px ) / 3 * 2 ); }
    .goods__control{ margin: 0 0 30px }
    .goods__first .merchandise__brand{ font-size: 14px; }
    .goods__first .merchandise__title{ font-size: 16px; }
    .goods__first .merchandise__price{ font-size: 18px; }
}
@media(max-width: 767px){
    .goods__inr::before{ display: none; }
    .goods__first{ margin-top: 0; }
    .goods__first,
    .wrap_goods{ width: 100%; }
    .wrap_goods{ margin-top: 40px; }
    .goods__first .merchandise__brand{ font-size: 12px; }
    .goods__first .merchandise__title{ font-size: 14px; }
    .goods__first .merchandise__price{ font-size: 16px; }
}

/* brand */
.brand__section{ padding-bottom: 9.375em; }
.brand__grid{ display: grid; grid-template: 'a a b c' 'a a d e' / 1fr 1fr 1fr 1fr; gap: 20px; counter-reset: number; }
.brand__link{ counter-increment: number; display: block; position: relative; width: 100%; min-height: 8.5em; height: 100%; background: 50% / cover; font-size:26px; font-weight:700; color: #fff; }
.brand__link:nth-child(1){ grid-area: a;}
.brand__link:nth-child(2){ grid-area: b;}
.brand__link:nth-child(3){ grid-area: c;}
.brand__link:nth-child(4){ grid-area: d;}
.brand__link:nth-child(5){ grid-area: e;}
.brand__box{ display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); transition: .4s; }
.brand__top{ display: inline-block; padding: .375em 1.9em; background: #000; border-radius: 300px; font-size: 15px; font-weight:700; }
.brand__top::after{ content: counter(number); }
.brand__text{ margin-top: .225em; }

.brand__link:nth-child(1){ font-size: 50px; }
.brand__link:nth-child(1) .brand__top{ padding: .25em 1.26666667em; background: #ea6d22; font-size: .6em; }
.brand__link:nth-child(1) .brand__text{ margin-top: .1em; }
@media(hover:hover){
    .brand__link::before{ content: attr(data-text); display: flex; justify-content: center; align-items: center; position: absolute; inset: 0; transition: .4s; opacity: 0; }
    .brand__link:hover::before{ opacity: 1; }
    .brand__link:hover .brand__box{ opacity: 0; }
}
@media(max-width:1279px){
    .brand__grid{ grid-template: 'a a' 'b c' 'd e' / 1fr 1fr; gap: 16px; }
    .brand__link{ font-size: 22px; }
    .brand__link:nth-child(1){ font-size: 34px; }
}
@media(max-width:767px){
    .brand__grid{ gap: 8px; }
    .brand__link{ font-size: 16px; }
    .brand__link:nth-child(1){ min-height: 8em; font-size: 18px; }
    .brand__top{ padding: .25em 1.26666667em; font-size: 10px; }
}

/* categories */
.categories__section{ overflow: hidden; position: relative; padding-bottom: 12.4375em; background: #303145; }
.categories__section::before{ content: 'HIGH-SEND'; position: absolute; bottom: -0.15333333em; left: calc(-0.08666667em + 2.60416667vw ); font-family:'Montserrat', '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif; font-size: 150px; font-weight: 700; line-height: 1; color: rgba(255, 255, 255, 0.03); }
.categories__box_title{ display: flex; justify-content: space-between; align-items: baseline; gap: 20px; }
.categories__control{ display: flex; gap: 1.875em; }
#categories{ margin-top: 2.8125em; width: 1920px; }
#categories .merchandise__wrap_img{ margin-bottom: 1.1875em; aspect-ratio: 450/550; }
.categories__link{ display: flex; justify-content: space-between; align-items: center; font-size:18px; color: #fff; font-weight:300;}
@media(max-width:1279px){
    .categories__section::before{ font-size: 100px; }
    #categories{ width: 100%; }
    .categories__link{ font-size:17px; }
}
@media(max-width:767px){
    .categories__section::before{ font-size: 49px; }
    .categories__link{ font-size:16px; }
}