/* BASIC css start */
body #header .header_wrap .logo_ani{ display:block;}
body #container{margin-top: 470px; }
body #header .headerMenu .header_left #logo{ width: 0px; margin-right: 0;}




/* ½ºÅ¸ÀÏ °øÅë */
main > [class*="_box"] h2.title{font-size: 22px; margin-bottom: 20px;}
img{width: 100%;}

#main_slider{ position:relative; overflow-x: hidden; width: 100%; margin-bottom: 100px;}
#main_slider img{ width: 100%;}

#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;  padding-top: 10px;  color:#fff}
#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: #000; }
#main_slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{ background: #000; }



.brand_story{ text-align: center; padding: 100px 0;}
.brand_story .brand_img{ width: 450px; margin: 0 auto;}
.brand_story .brand_img img{width: 100%;}
.brand_story .brand_desc{padding: 38px 0 40px;}
.brand_story .brand_desc h3{ font-size: 40px; line-height: 1.4;}
.brand_story .brand_desc p{ font-size: 24px; line-height: 1.5; padding-top: 20px;}
.brand_story .brand_goto{ display: inline-block; font-size: 16px; padding: 14px 27px; border: 1px solid #000; border-radius: 50px; font-weight: 500; line-height: 1;}
.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_p_box{ padding: 0 30px;}

.main_p_tab{ display: flex; align-items: center; margin: 0 0 40px;}
.main_p_tab li{ font-size: 14px; padding: 10px 20px; border-radius: 50px; border: 1px solid #000; margin-right: 10px; cursor: pointer;}
.main_p_tab li.on{ background: #000; color:#fff;}

.main_p_cont .main_p{display:none;}
.main_p_cont .main_p.on{display:block;}

.p_product.main_p .prd_list > li{ width: 24%; margin-right: 1%; }
.p_product.main_p .prd_list > li:first-child{ width: 50%; }
.p_product.main_p .prd_list > li:nth-child(4n){margin-right: 1%;}
.p_product.main_p .prd_list > li:nth-child(3),
.p_product.main_p .prd_list > li:nth-child(7){ margin-right: 0;}



.style_wrap{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 160px;}
.style_wrap li{ width: 49.5%; position: relative;}
.style_wrap li article{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center;}
.style_wrap li article h4{ font-size: 24px; padding-bottom: 30px; color:#fff}
.style_wrap li article u{ font-size: 16px;  color:#fff}


.review_box{ padding: 0 30px; margin-bottom: 160px;}

.event_box{ padding: 0 30px;}
.event_box ul{ display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.event_box ul li{width: 24.5%;}
.event_box ul li a{ display: block;}
.event_box ul li a article{ padding: 18px;}
.event_box ul li a article h5{ font-size: 18px;}
.event_box ul li a article p{ font-size: 14px; padding-top: 11px;}


.prd_list .prd_info .price .listDiscount span {font-size: 16px;}




/* ŸÀÌ¸Ó */

#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:29%; bottom:30%; left: 49.5%; color: #000000;
}
#HourCountdown span{ width: calc(100%/7); display: block; font-size:60px; font-weight: 600;}


/* ÅǸ޴º */
.bf_landing .tab {position:relative;}
.bf_landing .tab .tab_menu{position:absolute; left:50%; top:27.9%; transform: translateX(-50%); z-index:1; display: flex; gap:14px;}
.bf_landing .tab .tab_menu li {    font-size: 14px; padding: 10px 20px; border-radius: 50px; border: 1px solid #000; cursor: pointer;}
.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: flex;}
.bf_landing .tab .tab_content .con > div{position:relative;}
/*bf ½º¿ÍÀÌÆÛ*/
.bfSwiper { position:absolute; width:40%; top:20px; right:200px; overflow:hidden;}
.bfSwiper .swiper-wrapper .swiper-slide{ position:relative; }
.bfSwiper .swiper-button-prev::after, .bfSwiper .swiper-button-next::after {font-size: 25px; color:#a2a2a2}

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