/* 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%; }
.title { margin-bottom: 30px; font-size: 22px; line-height: 30px; font-weight: 500; }
.swiper-button-prev, .swiper-button-next { border: 0; background: none; }
a.all { display: block; background-image:url(/design/jmomall/ECHO/uiux/icon/arrow_right.svg); background-repeat:no-repeat; background-position: right center; background-size: 7px; width: 66px; margin-top: 4px; font-size: 16px; line-height: 24px; color: #393939;}

#main_slider, .section { margin: 0 auto; }
#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-title-wrap { display: flex; flex-direction: column; gap: 18px; margin: 0 126px 40px 0; margin-bottom: 40px; width: 297px; }
.main-title-wrap .title { margin-bottom: 0; }
.main-title-wrap span { display: block; font-size: 17px; font-weight: 400; color:#393939; }

.section { position: relative; display: flex; width: 100%; padding: 193px 0 0 30px; }
.section .prd-swiper { margin: 0; width: 100%; }
.section .prd-swiper .prd_list { padding-top: 0; flex-wrap: nowrap; }
.section .prd-swiper .prd_list li { width: 365px; }
.section .prd-swiper .prd_list li .thumb img{ width: 100%; }
.section .prd-swiper .prd_list li .prd_info { padding-top: 16px; }
.section .prd-swiper .prd_list li .prd_info .name{ font-size: 16px; font-weight: 400; line-height:18px; color:#333; padding-bottom:4px; }
.section .prd-swiper .prd_list li .prd_info .custom_price { font-size: 12px; font-weight: 400; color:#BFBFBF; margin-top: 2px; text-decoration:line-through; }
.section .prd-swiper .prd_list li .prd_info .price { display: flex; gap: 2px; }
.section .prd-swiper .prd_list li .prd_info .price > div,
.section .prd-swiper .prd_list li .prd_info .price .listDiscount { font-size: 14px; font-weight: 400; color:#BF214B; }
.section .prd-swiper .prd_list li .prd_info .price .sell_price { font-size: 14px; font-weight: 400; color:#000000; }

.section .swiper-pagination.progress { top: auto ; bottom: 0; left: 10px; right: 170px; width: auto; height: 1px;  background: #e2e2e2; }
.section .swiper-pagination.progress .swiper-pagination-progressbar-fill{ background: #000; }
.section .paging-wrap .swiper-pagination.frac { bottom: -8px; right: 122px; width: 43px; }
.section .paging-wrap .swiper-nav { position: absolute; bottom: -9px; right: 17px; width: 86px; }
.section .paging-wrap .swiper-nav button { width: 24px; height: 24px; color: #000; }
.swiper-nav .swiper-button-next::after, .swiper-nav .swiper-button-prev::after { font-size: 18px; } 

/* º£½ºÆ®¼¿·¯ */
.section.best { display: block; padding-left: 0; }
.section.best .main-title-wrap { display: block; margin: 0; width: 100%; padding-left: 30px; margin-bottom: 30px; }
.section.best .main-title-wrap .title { margin-bottom: 16px; }

.section.best .b-thumb-wrap { position: relative; overflow: hidden; }
.section.best .b-thumb-swiper { width: 100%; margin-bottom: 20px; cursor: grab; user-select: none; box-sizing: border-box; overflow: visible; }
.section.best .b-thumb-slide { position: relative; height: 100%; overflow: hidden; }   
.section.best .b-thumb-slide img { display: block; width: 100%; }   
.section.best .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; }
.section.best .b-thumb-slide:not(.swiper-slide-active)::after { background: rgba(28, 28, 28, 0.6); }
.section.best .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; }
.section.best .b-thumb-slide .b-overlay { position: absolute; bottom: 30px; left: 30px; z-index: 3; }
.section.best .b-thumb-slide .b-overlay p { margin-bottom: 14px; font-size: 33px; font-weight: 600; color: #ffffff; }
.section.best .b-thumb-slide .b-overlay span { line-height: 1.5em; font-size: 23px; font-weight: 400; color: #ffffff; }

.section.best .main-title-wrap .swiper-nav { position: absolute; right: 17px; width: 86px; }
.section.best .main-title-wrap button { width: 24px; height: 24px; color: #000; }
.section.best .main-title-wrap .swiper-button-next::after, .section.best .swiper-button-prev::after { font-size: 18px; } 

.section.best .b-prd-wrap { padding-left: 30px; }
.section.best .b-prd-panel { display: none; }
.section.best .b-prd-panel.is-active { position: relative; display: block; }
.section.best .prd_list .thumb { background: #f6f6f6; }
.section.best .prd-swiper .prd_list li .thumb img{ transform: scale(0.85); transform-origin: center; }

/* .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: 155px 30px 0px; }
.review_box .title { margin-bottom: 0; }

.event_box { padding: 0 30px; flex-direction: column; }
.event_box > div { display: flex; justify-content: space-between; }
.event_box > div a.all { padding-top: 8px; background-position: right 14px; }
.event_box ul{ display: flex; align-items: start; 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 4px;}
.event_box ul li a article h5{ font-size: 18px;}
.event_box ul li a article p{ font-size: 14px; padding-top: 11px;}


/* ŸÀÌ¸Ó */

#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 */