/* 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; }


.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;}



/* ¸ÞÀΠŸÀÌƲ °øÅë */
.main_article{ margin-top: 2rem; position:relative;}
.main_article :is( .title, .main, .sub){margin: 0 0 1.5rem;}
.main_article .title{ font-size: 20px; padding:0 1.3rem;}
.main_article .title.eng{ font-size: 23px;}
.main_article > a{  padding:0 1.3rem; margin: 0 0 1rem; color: #000; font-size: 20px; font-weight: 300;}
.main_article > a span{ display: inline-block; width: 15px; height: 1px; background: #000; transform: translate(10px, -8px); }
.main_article > a span:last-child{ transform: translate(-5px, -8px) rotate(90deg);}
.main_article > a span{}

.main_article div{}
.main_article div img{ width: 100%;}
.main_article article{position: absolute; left: 1.3rem; bottom: 2rem;}
.main_article article .main{ font-size: 22px; font-weight: 500;}
.main_article article .sub{ font-size: 18px; line-height: 1.4; margin-bottom: 0;}
.main_article a.goto{  padding: 10px 20px; border-radius: 40px; background: #000; color: #fff; font-size: 15px; line-height: 1;}

/* ¸ÞÀÎ ½½¶óÀÌµå °øÅë */

.p_product{ overflow-x: hidden;}
.p_product .main_article,
.review_box .main_article,
.event_box .main_article{ display: flex; align-items: center; justify-content: space-between;}
.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 .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: #000; }



.styleRow{ position: relative; padding: 0 0 2rem 0; margin-bottom: 4rem;}
.styleRow .swiper-wrapper{ }
.styleRow .swiper-slide .prd_list{margin-top: 20px;}
.styleRow .swiper-slide .prd_list .prd-item{display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px;}
.styleRow .swiper-slide .prd_list .prd-item > a{display: flex; align-items: center; justify-content: flex-start; width: 90%;}
.styleRow .swiper-slide .prd_list .prd-item > a .thumb{ width: 30%;}
.styleRow .swiper-slide .prd_list .prd-item > a .prd_info{width: 70%; padding-left: 6.5%;}
.styleRow .swiper-slide .prd_list .prd-item > a .prd_info .color_chip ul li{width: 9px; height: 9px; margin: 0 4px 0 0;}
.styleRow .swiper-slide .prd_list .prd-item > a .prd_info .color_chip .eng{ display: none;}
.styleRow .swiper-slide .prd_list .prd-item > a .prd_info .name{ font-size: 15px;  margin-bottom: 10px;}
.styleRow .swiper-slide .prd_list .prd-item > a .prd_info .sub_name{ font-size: 14px; margin-bottom: 10px;}
.styleRow .swiper-slide .prd_list .prd-item > a .prd_info .price *{ font-size: 15px; }
.styleRow .swiper-slide .prd_list .prd-item > a .prd_info .price .custom_price{ font-size: 8px;}

.styleRow .swiper-slide .prd_list .prd-item .wish_box {width: 10%; text-align: right;}
.styleRow .swiper-slide .prd_list .prd-item .wish_box .my-wish-list{ width: 15px; height: 15px;}
.styleRow .swiper-pagination{ bottom: 0 !important;}




.event_box{margin-bottom: 3rem;}
.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%;}


/* ÅǸ޴º */
.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}

.prd_list .prd_info .price .listDiscount span {font-size: 16px;}
/* BASIC css end */