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

/* ¹è³Ê¿µ¿ª */
.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;}

/* ºê·£µå½ºÅ丮 */
.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_back.jpg') no-repeat center; background-size: cover; height: 885px; }

.videoWrap { position:absolute; top:50%; left:50%; margin-left:-502px; margin-top: -265px; width:1005px }
.videoWrap .videoArea { position:relative; padding-bottom:50.25%; /* 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;} 
.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; } 


/* BASIC css end */