/* BASIC css start */
.header .app_down { display:block; }
#container { padding-top:0; }
.hd_bottom { bottom:0 !important }
.cateWrap { height:calc(100% - 57px) !important; }
.instaWrap { display: block !important }

body .header .hd_line01 { height: 54px;}
.header .hd_line01.act {position:fixed; left:0;right:0; background:#fff; }
.header .hd_line01.act .logo .logo_change { background:url('/design/maatila2/maatila/phps/m/common/ma_logo_new.png') no-repeat center !important; background-size: 100% !important; font-size: 0; display:block; width:80px; height:30px; transition: 0.2s all;}

.header .hd_line01.act .right .ico { display:inline-block; width: 25px; height: 25px; background: url('/design/maatila2/maatila/phps/common/top_menuIcons_new.png') no-repeat center !important; background-size: cover !important; font-size: 0 }
.header .hd_line01.act .right .ico.ico01 { background-position: 0 0 !important; margin-right: 3px; }
.header .hd_line01.act .right .ico.ico02 { background-position: 0 -25px !important; }
.header .hd_line01.act .right .ico.ico03 { background-position: 0 -50px !important; }
.header .hd_line01.act .right .menu { margin-left:5px; }

.header .hd_line01.act .left .ico { display:inline-block; width: 25px; height: 25px; background: url('/design/maatila2/maatila/phps/common/top_menuIcons_new.png') no-repeat center !important; background-size: cover !important; font-size: 0 }
.header .hd_line01.act .left .ico.ico02 { background-position: 0 -25px !important; }


body .header { position:fixed;width:100%; z-index:101 }
body .header {margin-top:0;}
#container.act {padding-top:36px; }


/* 메인 비주얼 슬라이드 */
.visualWrap {  }
.visualWrap .visualSlide {  }
.visualWrap .visualSlide img { width: 100% }
.visualWrap .visualSlide .slick-dots { width: 100%; height: 10px; position: absolute; bottom: 30px; text-align: center; }
.visualWrap .visualSlide .slick-dots li { display: inline-block; margin:0 4px; width: 10px; height: 10px; border-radius: 50%; background: #fff; opacity: 1 }
.visualWrap .visualSlide .slick-dots li.slick-active { background: #494949; }
.visualWrap .visualSlide .slick-dots li button { cursor:pointer;  outline:0; line-height: 0; border: 0;font-size: 0; width: 10px; height: 10px;-webkit-appearance: none;background: none;display: block;}

.visualWrap .visualTxtSlide .txtBox { margin: 20px 0 60px 0; text-align: center; }
.visualWrap .visualTxtSlide .txtBox .date { font-size: 12px; margin-bottom: 7px;}
.visualWrap .visualTxtSlide .txtBox .tit { font-size: 20px; font-weight: 900; }
.visualWrap .visualTxtSlide .txtBox .subTit { margin-top: 10px; font-size: 14px; }

/* 배너영역 */
.bannersWrap {width: 100%;padding: 30px 0;font-size: 0;}  
.bannersWrap img { width: 100% }
.bannersWrap .left {}
.bannersWrap .right {  }
.bannersWrap .right ul { height: 100% }
.bannersWrap .right ul li { position: relative; width: 100%; height: calc(50% - 15px);  margin-bottom: 10px; }
.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: 0; visibility: hidden; transition: all 0.3s }
.bannersWrap .right ul li .hoverBox .hoverDetail { position: absolute; width:43%; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 14px; border: 1px solid #e1e1e1; padding: 15px 30px; white-space: nowrap; text-align:center;}
.bannersWrap .right ul li .hoverBox { opacity: 1; visibility: visible; }

.bannersWrap .bannerSlide img { width: 100% }
.bannersWrap .bannerSlide .slick-dots { width: 100%; position: absolute; bottom: 50px; right: 15px; text-align: right; }
.bannersWrap .bannerSlide .slick-dots li { display: inline-block; margin:0 3px; width: 10px; height: 10px; border-radius: 50%; background: #565656; opacity: 1 }
.bannersWrap .bannerSlide .slick-dots li.slick-active { background: #fff }
.bannersWrap .bannerSlide .slick-dots li button { line-height: 0; border: 0; 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: 13px; text-align: center; line-height: 30px; }
.bannersWrap .bannerSlide li p span { margin-left: 35px }

/* 롤링 슬라이드 */
.rollWrap { width: 100%; background: #f8f8f8; margin: 60px 0; padding:60px 0 60px }
.rollWrap .rollInner { margin: 0 15px; font-size: 0 }
.rollWrap .rollInner .rollDetail { padding-bottom:28px; vertical-align: top; font-size: 14px }
.rollWrap .rollInner .rollDetail h5 { margin-bottom:8px; font-size: 19px; font-weight: 900; text-align: center; color: #333; }
.rollWrap .rollInner .rollDetail .desc { font-size:12px; color:#969696; text-align:center }
.rollWrap .rollInner .timeSaleWrap {  }
.rollWrap .rollInner .swiper-slide { margin-left:17px; margin-right:1px; width:75% }
.rollWrap .rollInner .swiper-slide:first-child { }
.rollWrap .rollInner .swiper-slide .linkTimeSale { display:block; padding-top:17px }
.rollWrap .rollInner .swiper-slide .thumb { position:relative }
.rollWrap .rollInner .swiper-slide .thumb .imgBox { display:block; position:relative; padding-top:87.5%; border-radius:50px; overflow:hidden }
.rollWrap .rollInner .swiper-slide .thumb .imgBox img { position:absolute; width:100%; top:50%; left:50%; transform:translate(-50%, -50%)}
.rollWrap .rollInner .swiper-slide .thumb .timeSaleIcon { position:absolute; top:-17px; left:-17px; width:65px; height:65px; font-size:11px; color:#fff; font-weight:bold; text-align:center; line-height:65px; border-radius:50px; background:#978069; z-index:10 }
.rollWrap .rollInner .swiper-slide .timePrdInfo .prdName { margin-top:12px; font-size:12px; text-align:center }
.rollWrap .rollInner .swiper-slide .timePrdInfo .prdPrice { margin-top:4px; text-align:center }
.rollWrap .rollInner .swiper-slide .timePrdInfo .prdPrice .percent { margin-right:5px; font-size:14px; color:#978069; font-weight:bold }
.rollWrap .rollInner .swiper-slide .timePrdInfo .prdPrice .price { font-size:14px; color:#414141; font-weight:700 }

/* 브랜드스토리 */
.storyWrap { width: 100%; overflow: hidden; font-size: 0; background: #f8f4ef; margin-bottom: 70px;}  
.storyWrap .storyInner { display: table; width: 100%; }
.storyWrap .storyInner > div { display: table-cell; vertical-align: top; }
.storyWrap .storyInner > div.left { background: url(/design/maatila2/maatila/phps/m/main/story_img_m.jpg) no-repeat center; background-size: cover; width: 47%; }
.storyWrap .storyInner > div img { width: 100%; padding: 20px; box-sizing: border-box; }
.storyWrap .left { width: 55%; }
.storyWrap .right { width: calc(45% - 30px); padding: 0 10%; font-size: 12px; font-weight: 300; box-sizing: border-box; }
.storyWrap .right .tit { position: relative; line-height: 28px; margin-top: 40%; font-size: 30px; font-weight: 400; color :#525252; }
.storyWrap .right .tit::after { content: ''; display: block; width: 8px; height: 8px; background: #525252; position: absolute; top: -20%; left: -2%; border-radius: 50%;}
.storyWrap .right .sub { margin-top: 30px; line-height: 20px; font-size: 12px; }
.storyWrap .right a { margin-top: 22%; margin-bottom: 25px; border: 1px solid #ddd; display: block; width: 100%; height: 30px; line-height: 30px; text-align: center; }

/* 영상 영역 */
.playWrap { margin-bottom: 65px; width: 100%; overflow: hidden; text-align: center; }
.playWrap h2  { margin: 15px 0 25px 0; line-height: 20px; font-size: 19px; font-weight: 700; color: #333 }
.playWrap h2 span { display: block; margin: 5px 0; font-size: 13px; font-weight: 300 }

.playWrap  .playInner { position: relative; padding-top: 56.5%; }
.playWrap  .playInner iframe { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) }

/* 기획전 영역 */
.exWrap {  }

.exWrap .txtBox { margin: 20px 0 40px 0; text-align: center; }
.exWrap .txtBox li { margin-bottom: 35px }
.exWrap .txtBox li a { display: block; width: 100%; height: 100% }
.exWrap .txtBox li img { width: 100% }
.exWrap .txtBox li .tit { margin-top: 15px; color: #000; font-size: 15px; font-weight: 700 }
.exWrap .txtBox li .subTit { margin-top: 5px; font-size: 12px; }


/*220404*/
.mainSpotSliderArea { position:relative; width:100%; overflow:hidden }
.mainSpotSliderArea .swiper-slide {  }
.mainSpotSliderArea .swiper-slide img.mainimg {width:100%;/*object-fit: cover;height: calc(98vh - 36px);*/}
.banDesc{ }
.wtext .banDesc{color:#fff;/* text-shadow: 1px 1px 2px rgb(0 0 0 / 20%); */}
.banTitle{ width:100%; position:absolute; top:10%; }
.banTitle img { width:100%; }

.banShop{ width:30%; position:absolute; bottom:5%; right:5%; }
.banShop img { width:100%; }

.mainSpotSliderArea .visur-pagination { position:absolute; bottom:5%; left:5%;  z-index:50; color:#fff;  text-align:left; letter-spacing:-1px; font-size:10px; }
.mainSpotSliderArea .visur-pagination .swiper-pagination-bullet { width:20px; height:3px; border-radius:0; background:#ccc; opacity:1; vertical-align:top; transition:all 0.3s ease; -webkit-transition:all 0.3s ease }
.mainSpotSliderArea .visur-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { width:40px; background:#505050 }

.mainSpotSliderArea .swiper-button-next,.mainSpotSliderArea .swiper-button-prev{top: 58%;}
.mainSpotSliderArea .swiper-button-prev{background-image:url("/design/maatila2/maatila/phps/m/common/main_next2.png");left:10px;width: 25px;height: 25px;background-size: 25px;}
.mainSpotSliderArea .swiper-button-next{background-image:url("/design/maatila2/maatila/phps/m/common/main_next.png");right:10px;width: 25px;height: 25px;background-size: 25px;}


.header .hd_line01.black .right .ico { display:inline-block; width: 25px; height: 25px; background: url('/design/maatila2/maatila/phps/common/top_menuIcons_new.png') no-repeat center; background-size: cover; font-size: 0; transition: 0.2s all;}
.header .hd_line01.black .right .ico.ico01 { background-position: 0 0; margin-right: 6px; }
.header .hd_line01.black .right .ico.ico02 { background-position: 0 -25px; }
.header .hd_line01.black .right .ico.ico03 { background-position: 0 -50px; }
.header .hd_line01.black .left .ico { display:inline-block; width: 25px; height: 25px; background: url('/design/maatila2/maatila/phps/common/top_menuIcons_new.png') no-repeat center; background-size: cover; font-size: 0; transition: 0.2s all; }
.header .hd_line01.black .left .ico.ico02 { background-position: 0 -25px;}
.header .hd_line01.black .logo {width:80px; position:absolute; left:50%; transform: translate(-50%, -50%); margin:26px 0 0 0; }
.header .hd_line01.black .logo .logo_change{background:url('/design/maatila2/maatila/phps/m/common/ma_logo_new.png') no-repeat center; background-size: 100%; font-size: 0; display:block; width:80px; height:30px; transition: 0.2s all;}

.moreCount{display:none !important;}




/* BASIC css end */