/* BASIC css start */
body #top-banner { height: 0; overflow: hidden; opacity:0; }
header#header { top: 0; }
body .logo_ani { display: block; }
body #header .headerMenu #logo { width: 0; overflow: hidden; transition: 0.5s linear; }
body #header .headerMenu #logo img { width: 70px; }

body.fixed #header .headerMenu #logo{ width: 70px; }
/*
body header#header #gnb,
body.fixed #header #gnb{display:none !important;}
*/

#container{overflow-x:hidden;}

.main img{ width: 100%; }

/* 메인 슬라이드 */
#main_slider{ position:relative; overflow-x: hidden; width: 100%; /*margin-bottom: 60px;*/}
#main_slider img{ width: 100%;}

#main_slider .bf_btn { position: absolute; bottom: 0; left: 0; width: 100%; z-index:1;}
#main_slider .bf_popup { display:none; position: fixed; top:50%; left:50%; transform: translate(-50%, -50%); z-index:15; width:90%; }
#main_slider .bf_popup img{width:100%; border:1px solid rgba(0,0,0,0.1)}
#main_slider .bf_popup .bf_popup_close { position: absolute; right:0; top:0; width:60px; height: 60px; z-index:1;}

#main_slider .swiper-slide{ position:relative; }
#main_slider .swiper-slide a{ display: block;}
#main_slider .swiper-slide a article{position: absolute; left: 50%; bottom: 13%; transform: translateX(-50%); width: 100%; text-align: center;}
#main_slider .swiper-slide a article h4{ font-size: 25px; font-weight: 500;color: #fff;}
#main_slider .swiper-slide a article > span{ display:inline-block; font-size: 14px; color: #fff; padding-top: 10px;}
#main_slider .swiper-slide a article > span span{display: inline-block; width: 8px; height: 1px; background: #fff; transform: rotate(227deg) translate(7px, 2px); }
#main_slider .swiper-slide a article > span span:first-child{ width: 7.7px; transform: rotate(138deg) translate(-4px, -2px);}

#main_slider .swiper-pagination{ bottom: 5%; left: 50%; transform: translateX(-50%); width: 100%; }
#main_slider .swiper-pagination .swiper-pagination-bullet{ width:4px; height: 4px;  background: #fff; }
#main_slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: #fff; }


/* 메인 타이틀 공통 */
.main-article { position:relative; margin-top: 2rem; padding: 0 1.3rem; }
.main > .p-product:nth-of-type(2) > .main-article { margin-top: 5rem; }
.main-article :is( .title, .main, .sub) { margin: 0 0 10px; }
.main-article .title { font-size: 20px; line-height: 30px; color: #121212; }
.main-article .title.eng{ font-size: 29px;}
.main-article .sub-title { color: #525252;}
.main-article > div { display: flex; justify-content: space-between; margin-bottom: 22px; }
.main-article > div a { padding-top: 1px; color: #525252; font-size: 13px; }
.main-article > div a::after, .main-article a::after { content: ""; display: inline-block; margin: 0 0 1px 2px; width: 5px; height: 5px; border-top: 1px solid #525252; border-right: 1px solid #525252; transform: rotate(45deg); }


/* 메인 슬라이드 공통 */
.p-product { overflow-x: hidden; }
.p-product .prd_wrap.swiper-container { padding: 0 1.3rem 45px; position: relative; }
.p-product .prd_wrap.swiper-container .prd_list{ overflow: visible !important;}
.p-product .prd_wrap.swiper-container .prd_list > li {margin-bottom: 0;}
.p-product .prd_wrap.swiper-container .prd_list .prd-item .prd_info { padding: 10px 2px; }
.p-product .prd_wrap.swiper-container .prd_list .prd-item .prd_info .name { font-size: 16px; margin-bottom: 8px; }
.p-product .prd_wrap.swiper-container .prd_list .prd-item .prd_info .sub_name { font-size: 14px; margin-bottom: 8px; }
.p-product .prd_wrap.swiper-container .prd_list .prd-item .prd_info .color_chip * { font-size: 8px; }
.p-product .prd_wrap.swiper-container .prd_list .prd-item .prd_info .price * { font-size: 14px; }
.p-product .swiper-pagination { bottom: 8% !important; top: auto !important; width: calc(100% - 2.6rem) !important; margin: 0 auto; height: 1px !important; left: 1.3rem !important; background: #e2e2e2; }
.p-product .swiper-pagination .swiper-pagination-progressbar-fill { background: #121212; }


/* 베스트셀러 영역 */
.p-product.best { margin-top: 55px; }
.p-product.best .prd_wrap.swiper-container { padding: 0 0 45px 1.3em; }
.p-product.best .main-article > div { margin-bottom: 16px; }
.b-thumb-wrap { position: relative; padding: 0 0 0 1.3rem; }
.b-thumb-swiper { width: 100%; margin-bottom: 20px; user-select: none; box-sizing: border-box; overflow: visible; }
.b-thumb-swiper .b-thumb-slide { transition: opacity 0.3s ease; }
.b-thumb-swiper .swiper-slide-prev { opacity: 0; }
.b-thumb-swiper .b-thumb-slide img { display: block; width: 100%; } 
.b-thumb-swiper .b-thumb-slide::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(28,28,28); transition: background 0.5s ease; z-index: 3; }
.b-thumb-swiper .b-thumb-slide:not(.swiper-slide-active)::after { background: rgba(28, 28, 28, 0.6); }
.b-thumb-swiper .b-thumb-slide.swiper-slide-active::after { 
    content: ""; 
    position: absolute; 
    top: auto; 
    bottom: 0; 
    left: 0;
    width: 100%; 
    height: 30%; 
    opacity: 1; 
    background: linear-gradient(
        to bottom,
        rgba(28, 28, 28, 0) 0%,
        rgba(28, 28, 28, 0.25) 100%
    ); 
    transition: none;
    z-index: 2; }
.b-thumb-swiper .b-thumb-slide .b-overlay { position: absolute; bottom: 20px; left: 15px; z-index: 3; }
.b-thumb-swiper .b-thumb-slide .b-overlay p { margin-bottom: 4px; font-size: 26px; font-weight: 500; color: #ffffff; }
.b-thumb-swiper .b-thumb-slide .b-overlay span { line-height: 1.4em; font-size: 18px; font-weight: 400; color: #ffffff; }

.swiper-nav { position: absolute; bottom: 0px; right: 0; width: 75px; height: 15px; }
.swiper-nav button { background: none; border: none; }
.b-thumb-prev.swiper-button-prev::after { font-size: 10px; color: #1c1b1f; }
.b-thumb-next.swiper-button-next::after { font-size: 10px; color: #1c1b1f; }

.b-prd-panel { display: none; }
.b-prd-panel.is-active { position: relative; display: block; }

.p-product.best .prd_list .thumb { background:#f6f6f6; }
.p-product.best .prd_list img { transform: scale(0.85); transform-origin: center; }
 
/* 솔직한 후기 */
.review_box .main-article .title { margin-bottom: 22px; }


/* 헤택 & 이벤트 */
.event_box{margin-bottom: 3rem;}
.event_box .main-article { display: flex; justify-content: space-between; align-items: end; margin-bottom: 15px; margin-top: 82px; }
.event_box .main-article .title { margin: 0; }
.event_box .main-article a { line-height: 28px; font-size: 13px; }
.event_box .event_wrap{padding: 0 1.3rem;}
.event_box .event_wrap li{margin-bottom: 10px;}
.event_box .event_wrap li:last-child{margin-bottom: 0;}
.event_box .event_wrap li a{ display: flex; align-items: center; justify-content: space-between;}
.event_box .event_wrap li a div{ width: 55%;}
.event_box .event_wrap li a div p{ font-size: 18px; font-weight: 500; margin-bottom: 10px; word-break: keep-all;}
.event_box .event_wrap li a div span{ font-size: 14px; }
.event_box .event_wrap li a img{ display:inline-block; width: 40%;}


/* 브랜드 스토리 */
.brand_story { text-align: center; padding: 60px 1rem; }
.brand_story .brand_img { width: 73%; margin: 0 auto; }
.brand_story .brand_img img { width: 100%; }
.brand_story .brand_desc { line-height: 1.5; padding: 38px 0 40px; }
.brand_story .brand_desc p { font-size: 29px;  line-height: 1.4; }
.brand_story .brand_desc p:last-child { font-size: 17px;  padding-top: 20px; line-height: 1.5; }
.brand_story .brand_goto { display: inline-block; font-size: 14px; padding: 10px 22px; border: 1px solid #000; border-radius: 50px; font-weight: 500; }
.brand_story .brand_goto span { display: inline-block; width: 8px; height: 1px; background: #000; transform: rotate(227deg) translate(7px, 2px); }
.brand_story .brand_goto span:first-child { width: 7.7px; transform: rotate(138deg) translate(-4px, -2px); }
.brand_story > span { display: block; margin: 36px 0 0; font-size: 25px; }


/* 탭메뉴 */
.bf_landing .tab {position:relative;}
.bf_landing .tab .tab_menu{position:absolute; left:50%; top:20.4%; transform: translateX(-50%); z-index:1; display: flex; gap:14px;}
.bf_landing .tab .tab_menu li {font-size:17px; display: block; padding: 8px 15px; border-radius:20px; border:solid 1px #000;}
.bf_landing .tab .tab_menu li.on{background:#000; color:#fff;}
.bf_landing .tab .tab_content .con{display: none;}
.bf_landing .tab .tab_content .con.on{display: block;}


/* 타이머 */
#timer{ width: 100%; text-align: center; position:relative;}
#timer img{width:100%}
#HourCountdown { 
     display: flex; position:absolute;  transform:translate(-50%, -50%); 
     text-align:center; letter-spacing: 1px;
     width:63%; bottom:28%; left: 47.5%; color: #000000;
}
#HourCountdown span{ width: calc(100%/7); display: block; font-size:9vw; font-weight: 600;}

/*bf 스와이퍼*/
.bfSwiper { position:relative; }
.bfSwiper .swiper-wrapper .swiper-slide{ position:relative; }
.bfSwiper .swiper-button-prev::after, .bfSwiper .swiper-button-next::after {font-size: 6vw; color:#a2a2a2}
/* BASIC css end */