/* BASIC css start */
#header .header{display: none;}
#header .fullMenu{display: none;}

/*¸ÞÀÎÀü¿ëÇì´õ*/
.mainHeader {display: flex; justify-content: space-between; position: absolute; z-index: 9; width: 100%; padding: 8px 10px 10px; box-sizing: border-box;}
.mainHeader button {border: none; background-color: rgba(0,0,0,0);}
.mainHeader button img {display: block;}
.mainHeader .left {display: flex; align-items: center;}
.mainHeader .right {display: flex; align-items: center;}
.mainHeader .menuOpen {width: 26px; height: 26px; margin: 0 10px 0 0; text-align: center;}
.mainHeader .searchOpen {width: 26px; height: 26px; margin: 0 10px 0 0; text-align: center;}
.mainHeader .myPage {width: 26px; height: 26px; margin: 0 0 0 10px; text-align: center;}
.mainHeader .cartPage {width: 26px; height: 26px; margin: 0 0 0 10px; text-align: center;}
.mainHeader .logo img{width: 84px;}

.mainHeader .quan{position: absolute; top: 32px; right: 6px; margin-top: -14px;  background-color: #b99a77;  font-weight: 500;  font-size: 10px;  display: block; padding: 0 2px;  min-width: 16px;  box-sizing: border-box;
    height: 16px;  text-align: center;  line-height: 16px;  border-radius: 8px;  color: #fff;}


.main {overflow: hidden;}
.main h3 {font-size: 20px;text-align: center;font-weight: 700; margin:45px 0 18px 0;color: #000;padding-top:6px;font-family: 'Cormorant Garamond', serif;}


.main .topBanner {margin-top:15px;}
.main .topBanner .topBannerLeft {width:49%; float:left; position:relative;}
.main .topBanner .topBannerRight {width:49%; float:right; position:relative;}
.main .topBanner img {width:100%; vertical-align:top;}
.main .topBanner .topBannerTitle {width:100%; font-size:1.083em; font-weight:bold; padding:2px 0; background-color:rgba(0,0,0,0.4);; text-align:center; color:#fff; position:absolute; bottom:0; left:0;}

/*»óÇ°¸®½ºÆ®*/
.list_shopping2x {padding-bottom: 30px}
.list_shopping2x li a {padding: 0 0px 45px 0px;}
.list_shopping3x li a {padding: 2px 2px 30px 2px}
.listPrice {margin-bottom: 0;}
.review {margin: 4px 5px 0 0;color: #a78e66;font-size: 10px;line-height: 1;}
.icons {margin-top: 6px;}

.more {padding: 0 12px; box-sizing: border-box;}
.more button { color: #000; height:38px;  font-size: 11px;  letter-spacing: 0.44px; border-radius: 3px; border:none; background-color: #fff;}
.more button img {display: inline-block; position: relative; top: 12px;}


.MK-product-icons {display: flex; flex-wrap: wrap;}
.MK-product-icons img {height: 11px; padding: 0 3px 3px 0;}

/*¸ÞÀιè³Ê*/
.mainSwiper {position: relative; overflow: hidden;}
.mainSwiper img {width: 100%;}
.mainSwiper .con {position: absolute; bottom: 50px; left: 24px;}
.mainSwiper .p01 {color: #fff; font-size: 32px; font-weight: bold; line-height: 1.31; letter-spacing: -1.28px; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);}
.mainSwiper .p02 {color: #fff; font-size: 16px; font-weight: 500; line-height: 2; letter-spacing: -0.64px;}
.mainSwiper .swiper-pagination {bottom: 24px; left: auto; right: 14px; width: auto; padding: 3px 11px; color: #fff; font-size: 12px; font-weight: 500; border-radius: 100px; background-color: rgba(0, 0, 0, 0.51);}


/*¸ÞÀÎ ½á±ÛÇü ¹è³Ê*/
.circleMainEvent{  margin: 40px 0px 40px 0px; overflow:hidden; padding:0 14px} 
.circleMainEvent .eventListArea .swiper-slide span {display: block; width:100%; text-align: center; margin-top:8px; line-height: 15px; }
.circleMainEvent .eventListArea {/*width:100%; overflow:hidden; margin:0 auto 30px; margin:0 auto;overflow: hidden;*/}
.circleMainEvent .eventListArea .swiper-slide { position: relative;}
.circleMainEvent .eventListArea .swiper-slide img {width:70px;}
.circleMainEvent .eventListArea .swiper-slide span {text-align:center; display:block}
.circleMainEvent .eventListArea .swiper-container { }
.circleMainEvent .eventListArea .swiper-container-horizontal > .swiper-pagination-progressbar {bottom:-20px; top:auto;  height:2px; background:rgba(0, 0, 0, 0.15); }
.circleMainEvent .eventListArea .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {margin:0; }
.circleMainEvent .eventListArea .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#000; }
.circleMainEvent .eventListArea .swiper-slide span.new{position:absolute;right:0;width: 16px;}
.circleMainEvent .eventListArea .swiper-slide span.new img{width:16px; }




/*TREND PICK*/
.bagicSlideBannerArea  {padding: 0 14px 60px; overflow: hidden;margin: 0 0 60px 0px;padding-bottom: 0px;}
.bagicSlideBannerArea .swiper-container {overflow:inherit; }
.bagicSlideBannerArea .swiper-slide { width:60%;}
.bagicSlideBannerArea .swiper-slide a {display:block;/* margin-right: 20px !important; */}
.bagicSlideBannerArea .swiper-slide img { width:100%; display: block; object-fit: cover; }
.bagicSlideBannerArea .mdtit{margin-top: 15px; color: #333; font-size: 16px; font-weight: 500;}
.bagicSlideBannerArea .mdsubname {color: #a8a8a8; font-size: 12px; margin-top: 4px;}
.bagicSlideBannerArea .swiper-scrollbar {position: relative; bottom: 0; top: auto!important; height: 2px!important; margin: 30px 0 0; background-color: #ddd}
.bagicSlideBannerArea .swiper-scrollbar-drag {background-color: #000;}

.bagicSlideBannerArea .swiper-horizontal>.swiper-scrollbar, .bagicSlideBannerArea .swiper-scrollbar.swiper-scrollbar-horizontal {position:relative; opacity: 1 !important;}

/*NEW ARRIVALS*/

/*NOW BEST*/
.list_shopping3x ul {padding: 0 12px;}
.list_shopping3x .list_shoppingInfo {text-align: left;}
.list_shopping3x .listPrice del {display: block;}

.nowBest {padding: 50px 0 15px; background-color: #f8f3f0;}
.nowBest h3{margin: 0; padding: 0;}
.nowBest .subTitle {margin: 4px 0 0; color: #333; font-size: 13px; text-align: center;}
.nowBest .tabs {display: flex; justify-content: space-between; max-width: 351px; margin: 18px auto 22px; padding: 0 12px;}
.nowBest .tabs button{height: 29px; padding: 0 10px; color: #999; font-size: 12px; line-height: 29px; text-align: center; border: none; border-radius: 3px; background-color: #fff;}
.nowBest .tabs button.on{color: #c2935f; font-size: 12px; font-weight: bold;}
.nowBest .list_shopping3x {display: none;}

/*Áß°£¹è³Ê(¶ì¹è³Ê) 01*/
.midBanner01 {display: block; margin: 20px 0 0;}
.midBanner01 img {display: block; width: 100%;}

/*TIME SALE*/
.timeSale .con {
    height: 332px; 
    margin: 0 0 -107px; 
    padding: 60px 0 0; 
    text-align: center; 
    background-color: #eee; 
    box-sizing: border-box; 
    background-image: url('//joamom.jpg2.kr/2023/renewal/timesale/0919_time_sale_m.jpg'); 
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;
}

.timeSale .con .title{color: #000; font-size: 24px; line-height: 1.3;}
.timeSale .con .title strong{color: #333; font-size: 18px;}
.timeSale #timer {display: flex; justify-content: center; margin-top: 5px; font-size: 40px; font-weight: bold; line-height: 49px;}
.timeSale #timer p {position: relative; color: #000;}
.timeSale #timer p::after {content: ''; position: absolute; top: 100%; left: 0; width: 100%; font-size: 10px; font-weight: normal; text-align: center; line-height: 1; letter-spacing: 0.5px;}
.timeSale #timer .days::after {content: 'DAYS';}
.timeSale #timer .hours::after {content: 'HOURS';}
.timeSale #timer .minutes::after {content: 'MINUTES';}
.timeSale #timer .seconds::after {content: 'SECONDS';}
.timeSale #timer>span {line-height: 45px;}
.timeSale #timer span {display: inline-block; width: 28px;}
.timeSale .area{position: relative; margin: 0 0 0 12px; padding: 12px; background-color: #fff;}
.timeSaleSwiper {overflow: hidden;}
.timeSaleSwiper ul {display: flex;}
.timeSaleSwiper .list_shoppingInfo {position: relative; margin-top: 10px;}
.timeSaleSwiper .listPic {width: 100%;}
.timeSaleSwiper .cart {display: block; position: absolute; top: -64px; right: 8px; width: 40px; height: 40px; text-align: center; border: none; border-radius: 100%; background-color: rgba(255, 255, 255, 0.7);}
.timeSaleSwiper .cart img{display: table; position: relative; margin: 0 auto;}
.timeSaleSwiper .listName {margin-bottom: 5px; font-size: 14px;}
.timeSaleSwiper .listDiscount {font-size: 12px;}
.timeSaleSwiper .listPrice {font-size: 12px;}
.timeSaleSwiper .swiper-pagination {position: relative; bottom: 0; top: auto!important; height: 2px!important; margin: 30px 0 0; background-color: #ddd}
.timeSaleSwiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color: #000;}

/*MADE JOAMOM*/
.madeIn {margin: 20px 0 30px; padding: 40px 0 48px; background-color: #f8f3f0; overflow: hidden;}
.madeIn h3 {margin: 0;}
.madeIn .tabs {padding: 20px 12px;}
.madeIn .tabs button {width: 78px; height: 78px; padding: 2px; border-radius: 100%; border: 2px solid rgba(0,0,0,0); background-color: rgba(0,0,0,0)}
.madeIn .tabs button img {display: block; width: 100%;}
.madeIn .tabs button.on {border: 2px solid #333;}
.madeIn .tabs button span {display: block; width: 100%; height: 100%; background-color: #fff; border-radius: 100%; overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: contain;}
.madeInSwiper {display: none; position: relative; padding: 0 12px;}
.madeInSwiper ul {display: flex;}
.madeInSwiper .swiper-pagination {position: relative; bottom: 0; top: auto!important; width: calc(100% - 6px)!important; height: 2px!important; margin: 32px 0 0; background-color: #ddd}
.madeInSwiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color: #000;}
.list_shopping3x .madeInSwiper ul {padding: 0;}
.madeIn .colorchips, .nowBest .colorchips, .planning .colorchips {width:45%}



/*¹è³Ê02 (Á¶¾Æ¸¾ ¸â¹ö½Ê)*/
.midBanner02 {position: relative; margin: 0 0 13px;}
.midBanner02 img {display: block; width: 100%;}
.midBanner02 .con {position: absolute; top: 50%; left: 15px; transform: translateY(-50%); width: 100%;}
.midBanner02 .con .p01 {margin: 0 0 6px; color: #fff; font-size: 26px; font-weight: 900; line-height: 1; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);}
.midBanner02 .con .p02 {margin: 0 0 15px; color: #fff; font-size: 15px; line-height: 1.2;}
.midBanner02 .con a {display: inline-block; padding: 8px 21px 6px; color: #fff; font-size: 14px; font-weight: 500; text-align: center; border: 1px solid #fff}

/*¹è³Ê03 (½½¶óÀ̵å)*/
.midBanner03 {position: relative;}
.midBanner03 img {display: block; width: 100%;}
.midBanner03 .swiper-pagination {position: relative; bottom: auto!important; margin: 8px 0 0;}
.midBanner03 .swiper-pagination-bullet {width: 6px; height: 6px; margin: 0 3px!important; background-color: #d9d9d9; opacity: 1;}
.midBanner03 .swiper-pagination-bullet.swiper-pagination-bullet-active {background-color: #000000}

/*±âȹ»óÇ° ¿µ¿ª*/
.planning {margin: 20px 0 30px;padding: 40px 0 48px;/* background-color: #f8f3f0; */overflow: hidden;}/*Àüü¹è°æ º¯°æ*/
.planning h3 {margin: 0;}
.planning .special_tab {display: flex;justify-content: space-between;width: 100%;margin: 18px auto 22px;/* padding: 0 12px; */text-align: center;/* margin: 0 auto; */width: 80%;}
.planning .special_tab button{width: auto;margin: 0 5px;padding: 0 10px;color: #333;font-size: 12px;line-height: 29px;text-align: center;border: none;border-radius: 25px;background-color: #f4f4f4;}/*Åǹè°æ º¯°æ*/
.planning .special_tab button.on{color: #fff;font-size: 12px;background: #b99a77;font-weight: bold;}
.planning .special_tab button span{}
.styleSwiper {display: none; position: relative; padding: 0 12px;}
.styleSwiper ul {display: flex;}
.styleSwiper .swiper-pagination {position: relative; bottom: 0; top: auto!important; width: calc(100% - 6px)!important; height: 2px!important; margin: 32px 0 0; background-color: #ddd}
.styleSwiper .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background-color: #000;}
.list_shopping3x .styleSwiper ul {padding: 0;}



/*ÄÚµð¾ÆÀÌÅÛ ¿µ¿ª*/
.codiSwiper {position: relative; padding: 0 12px 77px; background-color: #fff;}
.codiSwiper ul {display: flex;}
.codiSwiper .list_shoppingInfo {margin-top: 10px;}
.codiSwiper .listPic {width: 100%;}
.codiSwiper .listName {font-size: 12px;}
.codiSwiper .listDiscount {display: inline-block;font-size: 12px;}
.codiSwiper .listPrice {font-size: 12px;display: inline-block;}






/* BASIC css end */