/* BASIC css start */
#contentWrapper{padding-bottom:0;}
.footer .instaWrap { display: block !important }
/*.item-wrap .item-cont .item-list .thumb {height:442px !important}*/
/* 메인 비주얼 슬라이드 */
.visualWrap { font-size: 0;}
.visualWrap .visualSlide {  }
.visualWrap .visualSlide img { width: 100% }

.visualWrap .visualSlide .slick-arrow { margin-top:-40px; position: absolute; top:50%; width: 40px; height: 80px; background: url('/design/maatila/phps/main/slide_arrow.png') no-repeat center; background-size: cover; font-size: 0; z-index: 1; }
.visualWrap .visualSlide .slick-arrow.slick-prev { left: 75px; background-position: 0 0; }
.visualWrap .visualSlide .slick-arrow.slick-next { right: 75px; background-position: 0 -80px; }

.visualWrap .visualSlide .slick-dots { width: 100%; position: absolute; bottom: 25px; text-align: center; }
.visualWrap .visualSlide .slick-dots li { display: inline-block; margin:0 6px; width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: 0.4 }
.visualWrap .visualSlide .slick-dots li.slick-active { opacity: 1 }
.visualWrap .visualSlide .slick-dots li button { font-size: 0 }


/* 카테고리 배너 영역 2026.11.02 추가 */
.category-swiper-wrap {position: relative;width: 100%;max-width: 1500px;margin: 70px auto 150px;padding: 0 149.5px;box-sizing: border-box;}
.category-swiper-wrap .swiper-wrapper.is-center{ justify-content: center;}
.category-swiper-wrap .swiper-wrapper.is-center .swiper-slide:last-child{margin-right:0 !important;}
.category-swiper {overflow: hidden;width: 100%;/* max-width: 1310px; */width: 100%;overflow: hidden;margin: 0 auto;}
.category-swiper .swiper-slide {box-sizing: border-box;text-align: center;}
.category-item .img-box {aspect-ratio: 1;margin: 0;background-color: #eeece9;border-radius: 100%;overflow: hidden;display: flex;align-items: center;justify-content: center;}
.category-item .img-box img{width: 100%;vertical-align: middle;object-fit: cover;  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.category-item .img-box:hover img{ transform: scale(1.04); }
.category-item .img-box img.is-nuki{object-fit: contain; width: auto;}
.category-item .txt {display: block;font-size: 16px;font-weight: 400;line-height: 1.2;margin-top: 6px;color: #2f2f2f;}
.category-btn { display: none; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 36px; height: 36px; background: #fff; border: 1px solid #ddd; border-radius: 50%; text-indent: -9999px; cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.category-btn.category-prev { left: 0; }
.category-btn.category-next { right: 0; }
.category-btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; border-top: 2px solid #333; border-right: 2px solid #333; }
.category-prev::after { transform: translate(-30%, -50%) rotate(-135deg); }
.category-next::after { transform: translate(-70%, -50%) rotate(45deg); }
.swiper-button-prev:after, .swiper-button-next:after { content: unset !important; }
.category-swiper-wrap .swiper-button-next.swiper-button-disabled, .category-swiper-wrap .swiper-button-prev.swiper-button-disabled { opacity: 0 !important; }


/* 롤링 배너 영역 2026.11.02 추가 */
.roll-swiper-wrap {}
.roll-swiper-wrap .inner {max-width: 1500px;width: 100%;margin: 0 auto;position: relative;overflow: hidden;}
.roll-swiper-wrap .inner .mySwiper{max-width: 1500px;width: 100%;overflow: hidden;margin: 0 auto;}
.roll-swiper-wrap .section-title {font-size: 35px;font-weight: 700;color: #333;text-align: center;margin-bottom: 50px;}
.roll-swiper-wrap .cozy-swiper { width: 100%; overflow: hidden; }
.roll-swiper-wrap .banner-list { box-sizing: border-box; }
.roll-swiper-wrap .banner-item a {display: block;text-decoration: none;position: relative;border-radius: 10px;overflow: hidden;}
.roll-swiper-wrap .banner-item .img-box { width: 100%; aspect-ratio: 4 / 5; background-color: #f5f5f5; overflow: hidden; }
.roll-swiper-wrap .banner-item .img-box img { width: 100%; height: 100%; object-fit: cover; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
.roll-swiper-wrap .banner-item a:hover .img-box img { transform: scale(1.04); }
.roll-swiper-wrap .banner-item .txt-box {position: absolute;bottom: 0;left: 0;width: 100%;padding: 40px 30px;background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);box-sizing: border-box;z-index: 2;}
.roll-swiper-wrap .banner-item .banner-tit {display: block;font-size: 24px;font-weight: 700;color: #ffffff;margin-bottom: 12px;}
.roll-swiper-wrap .banner-item .banner-desc {font-size: 18px;font-weight: 300;color: #fff;}
.roll-swiper-wrap .swiper_control {max-width: 100%;margin: 31px auto 0;position: relative;display: flex;align-items: center;justify-content: center;}
.roll-swiper-wrap .swiper_control .custom-progressbar {width: 100%;height: 3px;background: #e4e4e4;z-index: 10;}
.roll-swiper-wrap .swiper_control .progress-bar-fill {height: 100%;background: #2f2f2f;transition: width 0.3s ease;}
.roll-swiper-wrap .swiper_control .custom-scrollbar { box-sizing: border-box; position: relative; background: #ededed; height: 2px; flex: 1; margin: 0; overflow: hidden; border-radius: 2px; }
.roll-swiper-wrap .swiper_control .custom-scrollbar .custom-scrollbar-drag { position: absolute; top: 0; left: 0; height: 100%; background: #000; width: 0%; border-radius: 2px; }
.roll-swiper-wrap .swiper_control .swiper-scrollbar .swiper-scrollbar-drag { background: #000; border-radius: 0; }
.roll-swiper-wrap .swiper_control .swiper-pagination {width: 26px;display: flex;align-items: center;gap: 5px;position: relative;font-size: 14px;font-weight: 400;color: #a0a0a0;inset: auto;}
.roll-swiper-wrap .swiper_control .swiper-pagination-fraction .swiper-pagination-current {color: #2f2f2f;font-weight: 700;}
.roll-swiper-wrap .swiper_control .swiper-pagination-fraction .swiper-pagination-total{font-weight: 700; color: #a0a0a0;}
.roll-swiper-wrap .swiper_control .swiper-button-next, .swiper_control .swiper-button-prev { position: relative; inset: auto !important; width: 6px !important; height: auto !important; margin: 0 20px !important; }


/* 배너영역 */
.bannersWrap { width: 100%; min-width: 1200px; max-width: 1500px; margin: 100px auto; overflow: hidden; font-size: 0; }  
.bannersWrap > div { display: inline-block; width: calc(50% - 15px); vertical-align: top }
.bannersWrap > div img { width: 100% }
.bannersWrap .left { margin-right: 15px; }
.bannersWrap .right { margin-left: 15px }
.bannersWrap .right ul { height: 100% }
.bannersWrap .right ul li { position: relative; width: 100%; height: calc(50% - 15px); }
.bannersWrap .right ul li:nth-child(1) { margin-bottom: 4.9% }
.bannersWrap .right ul li .hoverBox { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background:rgba(0,0,0,0.2); opacity: 1; visibility: visible; }
.bannersWrap .right ul li .hoverBox .hoverDetail { position: absolute; width: 25%; text-align: center; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 16px; border: 1px solid #fff; padding: 25px 50px; white-space: nowrap; }
.bannersWrap .right ul li:hover .hoverBox { opacity: 0; visibility: hidden; transition: all 0.3s }

.bannersWrap .bannerSlide img { width: 100% }
.bannersWrap .bannerSlide .slick-dots { width: 100%; position: absolute; bottom: 50px; right: 25px; text-align: right; }
.bannersWrap .bannerSlide .slick-dots li { display: inline-block; margin:0 6px; width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: 1 }
.bannersWrap .bannerSlide .slick-dots li.slick-active { background: #3c2e1c }
.bannersWrap .bannerSlide .slick-dots li button { font-size: 0 }

.bannersWrap .bannerSlide li { position: relative; }
.bannersWrap .bannerSlide li p { position: absolute; bottom:0; width: 100%; height: 30px; background:rgba(60,46,28,0.5); color: #fff; font-size: 14px; text-align: center; line-height: 30px; }
.bannersWrap .bannerSlide li p span { margin-left: 35px }

/* 롤링 슬라이드 */
.rollWrap { width: 100%; min-width: 1200px; /*max-width: 1500px;*/ background: #f8f8f8; padding: 120px 0 }
.rollWrap .rollInner { margin: 0 100px 0 75px; font-size: 0 }
.rollWrap .rollInner .rollDetail { display: inline-block; width: 100%; margin-right: 0%; vertical-align: top; font-size: 14px }
.rollWrap .rollInner .rollDetail h5 { line-height: 35px; font-size: 35px; font-weight: 900; color: #333; width: 100%; text-align: center; margin: 0 auto; }
.rollWrap .rollInner .rollDetail p { line-height: 27px; text-align: center; color: #7c7c7c; font-weight: 300; margin-top: 15px }

.rollWrap .rollInner .rollSlide { display: inline-block; margin-top: 50px; width: 100%; padding-left: 40px; vertical-align: top; font-size: 14px }
.rollWrap .rollInner .rollSlide li { padding: 10px; box-sizing: border-box; }
.rollWrap .rollInner .rollSlide li .prdName { text-align:center; margin-top:35px }
.rollWrap .rollInner .rollSlide li .prdPrice { text-align:center; margin-top:10px }
.rollWrap .rollInner .rollSlide li .prdPrice .percent { margin-right:5px; font-size:16px; color:#978069; font-weight:bold }
.rollWrap .rollInner .rollSlide li .prdPrice .price { font-size:16px; color:#414141; font-weight:700 }

.rollWrap .rollInner .rollSlide .slick-slide { width: 350px; /*margin-right: 30px*/ }
.rollWrap .rollInner .rollSlide .slick-slide .thumb { position:relative }
.rollWrap .rollInner .rollSlide .slick-slide .thumb a { display:block }
.rollWrap .rollInner .rollSlide .slick-slide .thumb .imgBox { display:block; position:relative; padding-top:72.5%; border-radius:100px; overflow:hidden }
.rollWrap .rollInner .rollSlide .slick-slide .thumb .imgBox img { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%) }
.rollWrap .rollInner .rollSlide .slick-slide .thumb .timeSaleIcon { position:absolute; top:0; left:0; width:75px; height:75px; font-size:13px; color:#fff; font-weight:bold; text-align:center; line-height:75px; border-radius:50px; background:#978069; z-index:10 }

.rollWrap .rollInner .rollSlide .slick-arrow { margin-top:-42px; opacity : 1; position: absolute; top: 50%; transform: translateY(-50%); width: 35px; height: 35px; background: url('/design/maatila/phps/main/roll_arrow.png') no-repeat center; background-size: cover; font-size: 0; z-index: 1; }
.rollWrap .rollInner .rollSlide .slick-arrow.slick-disabled { opacity : 0.3; }
.rollWrap .rollInner .rollSlide .slick-arrow.slick-prev { left: 0; background-position: 0 0; }
.rollWrap .rollInner .rollSlide .slick-arrow.slick-next { right: -39px; background-position: 0 -35px; }

/* 베스트 상품노출 */
.bestWrap h2 {margin: 148px 0 50px 0;font-size: 35px;font-weight: 700;color: #333;line-height: 1.25;}
.bestWrap2 h2 {margin: 148px 0 50px 0;font-size: 35px;font-weight: 700;color: #333;line-height: 1.25;}

/* 브랜드스토리 */
.storyWrap {width: 100%;min-width: 1200px;overflow: hidden;font-size: 0;background: #f8f4ef;margin: 100px 0;}  
.storyWrap .storyInner { width: 100%; min-width: 1200px; max-width: 1500px; margin: 0 auto ; }
.storyWrap .storyInner > div { display: inline-block; width: calc(50% - 15px); vertical-align: top }
.storyWrap .storyInner > div img { width: 100% }
.storyWrap .left { margin-right: 15px; }
.storyWrap .right { margin-left: 15px; font-size: 18px; font-weight: 200; padding: 0 150px; box-sizing: border-box; white-space: nowrap; }
.storyWrap .right .tit { position: relative; margin-top: 40%; font-size: 60px; font-weight: 400; color :#525252; }
.storyWrap .right .tit::after { content: ''; display: block; width: 18px; height: 18px; background: #525252; position: absolute; top: -30px; left: -2%; border-radius: 50%;}
.storyWrap .right .sub { margin-top: 30px; line-height: 40px; }
.storyWrap .right a { margin-top: 45%; border: 1px solid #999795; display: block; width: 100%; height: 70px; line-height: 70px; text-align: center; }

/* 도매몰 배너 */
.b2b_bnr_wrap{width: 100%;overflow: hidden;font-size: 0;background: #f3f3f3;}  
.b2b_bnr_wrap a{display:block;width: 100%;min-width: 1900px;max-width: 1900px;margin: 0 auto;}
.b2b_bnr_wrap a img{width:100%;}

/* 영상 영역 */
.playWrap { width: 100%; min-width: 1200px; overflow: hidden; text-align: center; }
.playWrap h2  {margin: 0 0 80px 0;line-height: 40px;font-size: 40px;font-weight: bold;color: #333}
.playWrap h2 span { margin-bottom: 10px; display: block; font-size: 30px; font-weight: 400 }

.playWrap  .playInner { position: relative; }
.playWrap  .playInner img { width: 100%; }
.playWrap  .playInner .playBg { background: url('/design/maatila/phps/main/play_back2.jpg') no-repeat center; background-size: cover; height: 885px; }

.videoWrap { position:absolute; top:50%; left:50%; margin-left:-502px; margin-top: -275px; width:1005px }
.videoWrap .videoArea { position:relative; padding-bottom:53.7%; /* 16:9 */  padding-top: 25px; height: 0; }
.videoWrap .videoArea iframe { position:absolute; top:0; left:0; width:100%; height:100% }




/* 홈데코 상품노출 */
.homeWrap {margin: 148px 0 58px;}
.homeWrap h2 {margin: 0 0 50px 0;font-size: 35px;font-weight: 700;color: #333}


/* 더보기 */
.bestWrap {margin-bottom: 58px;} 
.bestWrap2 {margin-bottom: 0px;}
.js-load1, .js-load2, .js-load3, .js-load4, .js-load5 { display: none; } 
.js-load1.active, .js-load2.active, .js-load3.active, .js-load4.active, .js-load5.active { display: block; } 
.btn-wrap { display: block; } 
.btn-wrap { text-align: center; } 
.btn-wrap a { display: inline-block; font-size: 15px; font-weight: 400; background: #b7a490; color: #fff; padding: 10px 63px; } 

.bestNum { display:none; } 

.hide{display:none !important;}

/* BASIC css end */