@charset "utf-8";

/*
=========================================================================
메인 콘텐츠 css
=========================================================================
*/

/* 슬라이드 기본설정 */
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
}
.swiper-container-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-container-vertical > .swiper-wrapper {
	-webkit-box-orient: vertical;
	-moz-box-orient: vertical;
	-ms-flex-direction: column;
	-webkit-flex-direction: column;
	flex-direction: column;
  }
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-container-multirow-column > .swiper-wrapper {
  flex-wrap: wrap;
  
}
.swiper-container-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-container-pointer-events {
  touch-action: pan-y;
}
.swiper-container-pointer-events.swiper-container-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
  height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
/* a11y */
.swiper-container .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
  transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
  pointer-events: none;
  transition-property: opacity;
}
.swiper-container-fade .swiper-slide .swiper-slide {
  pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
  pointer-events: auto;
}


.mVisual{position:relative;margin:0 auto;padding-top: 40px;z-index:50}
.mVisual .visualSlide ul li{width: 1280px;}
.mVisual .visualSlide ul li .mv_mb{display: none;}
.mVisual .control{position: absolute;left:0;bottom: 30px;display: flex;justify-content: center;align-items: center;width: 100%;z-index: 20;}
.mVisual .control button{position: relative;width:44px;height:44px;text-indent:-999px;overflow: hidden;border-radius: 50%;}
.mVisual .control .cnt1{display: flex;align-items: center;justify-content: space-between;margin: 0 10px;padding: 0 20px 0 25px;width: 135px;height: 44px;background: rgba(0, 0, 0, 0.2);border-radius: 22px;}
.mVisual .control .cnt2{display: flex;align-items: center;padding: 0 5px;height: 44px;background: rgba(0, 0, 0, 0.2);border-radius: 22px;}
.mVisual .control .mPage1{margin-right: 10px;font-size: 16px;color: rgba(255,255,255,0.6);}
.mVisual .control .mPage1 .swiper-pagination-current{color: #fff;}
.mVisual .control .btnMore{display: inline-block;}
.mVisual .control .btnMore a{position:relative;display: block;width: 24px;height: 24px;text-indent: -999px;overflow: hidden;}
.mVisual .control .btnMore a::before{position: absolute;top: 50%;left: 50%;width: 18px;height: 2px;content: '';background:#fff;transform: translate(-50%,-50%);}
.mVisual .control .btnMore a::after{position: absolute;top: 50%;left: 50%;width: 2px;height: 18px;content: '';background:#fff;transform: translate(-50%,-50%);}
.mVisual .control .stopSlide{background: rgba(0, 0, 0, 0.2);}
.mVisual .control .stopSlide::after{position: absolute;top: 50%;left: 50%;width: 12px;height: 15px;content: '';border:1px solid #fff;border-width: 0 2px;transform: translate(-50%, -50%);}
.mVisual .control .startSlide{background: rgba(0, 0, 0, 0.2);}
.mVisual .control .startSlide::after{position: absolute;top: 50%;left: 50%;width: 0;height: 0;content: '';border-top:9px solid transparent;border-bottom:9px solid transparent;border-left:9px solid #fff;transform: translate(-50%, -50%);}
.mVisual .control .cnt2 button::after{position: absolute;top: 50%;left: 50%;width: 10px;height: 10px;content: '';border:1px solid #fff;border-width: 0 0 2px 2px;}
.mVisual .control .prevSlide::after{transform:translate(-30%,-50%) rotate(45deg);}
.mVisual .control .nextSlide::after{transform:translate(-70%,-50%) rotate(-135deg);}

.mConWide{padding: 90px 20px;}
.mConWide.bg{background:#f8f8ff}
.mConWide h2{margin-bottom: 20px;padding: 0 5px;font-size: 25px;color: #000;font-weight: 700;line-height: 1;}

.mpage{display: none;}

.prd_box{position:relative;margin: 5px;}
.prd_box a{display: block;text-decoration: none;}
.prd_box a .prd_thumb{padding-top: 100%;}
.prd_box .prd_thumb{position: relative;margin-bottom: 20px;overflow: hidden;border-radius: 10px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);}
.prd_box .prd_thumb img{position: absolute;top: 50%;left: 50%;max-width: none;min-width: 100%;min-height: 100%;transform:translate(-50%,-50%);transition: all 0.2s ease;}
.prd_box .prd_thumb a{display: block;padding-top: 100%;}
.prd_box:hover img,
.prd_box a:hover img{transform:translate(-50%,-50%) scale(1.1);}
.prd_box a:focus::after{position:absolute;top: 0;left: 0;width: 100%;height: 100%;content: '';border:1px dotted #000}
.prd_box .prd_thumb .btnBsket{position: absolute;right: 10px;bottom: 10px;width: 48px;height: 48px;text-indent: -999px;overflow: hidden;background: #fff url('../img/ico-basket.png') no-repeat center center / 23px;border:1px solid #efefef;border-radius: 50%;z-index:2}
.prd_box .prd_thumb .btnBsket:hover,
.prd_box .prd_thumb .btnBsket:focus{border-color: #0765af;}
.prd_box .prd_infor{position:relative}
.prd_box .prd_infor .prd_tit{margin-bottom: 15px;height: 50px;font-size: 19px;line-height: 1.3;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;}
.prd_box .prd_infor .prd_price{display: flex;align-items: center;}
.prd_box .prd_infor .prd_price .sale{margin-right: 10px;font-size: 23px;color: #f43142;}
.prd_box .prd_infor .prd_price .price{margin-right: 10px; font-weight: 500; font-size: 20px;}
.prd_box .prd_infor .prd_price .day{margin-right: 10px; font-size: 14px; color:#666}

.mControl button{position: absolute;top: 50%;width: 52px;height: 52px;text-indent: -999px;overflow: hidden;background:#fff;border:1px solid #e0e0e0;border-radius: 50%;z-index:20;transition: all 0.2s ease;}
.mControl button::after{position: absolute;top: 50%;left: 50%;width: 12px;height: 12px;content: '';border:1px solid #111;border-width: 0 0 2px 2px;}
.mControl .prev{left:-25px}
.mControl .next{right:-25px}
.mControl .prev::after{transform:translate(-30%, -50%) rotate(45deg);}
.mControl .next::after{transform:translate(-70%, -50%) rotate(-135deg);}
.mControl button.swiper-button-disabled{opacity:0}
.mControl button:focus,
.mControl button:hover{border-color: #0765af;}
.mControl button:focus::after,
.mControl button:hover::after{border-color: #0765af;}

.mCon1 .mConSlide1,
.mCon2 .mConSlide2,
.mCon3 .mConSlide3,
.mCon4 .mConSlide4{margin: 0 -5px;}

.mCon1{position: relative;margin: 0 auto 90px;max-width: 1280px;}
.mCon1 .mConSlide1 ul li .prd_box{overflow: hidden;border-radius:20px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);}
.mCon1 .mConSlide1 ul li .prd_box .prd_thumb{margin-bottom: 0;box-shadow: none;border-radius:0}
.mCon1 .mConSlide1 ul li .prd_box .prd_infor{padding:30px;}
.mCon1 .mControl button{top: 40%;}

.mCon2{position: relative;margin: 0 auto;max-width: 1280px;}
.mCon2 .mConSlide2 ul li{padding: 5px;}
.mCon2 .mConSlide2 ul li .prd_box2{display: flex;overflow: hidden;border-radius: 20px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);}
.mCon2 .mConSlide2 ul li a{display: block;text-decoration: none;}
.mCon2 .mConSlide2 ul li .prd_box2 .prd_thumb{width: 50%;overflow: hidden;}
.mCon2 .mConSlide2 ul li .prd_box2 .prd_thumb img{transition: all 0.2s ease;}
.mCon2 .mConSlide2 ul li a:hover .prd_box2 .prd_thumb img{transform:scale(1.05);}
.mCon2 .mConSlide2 ul li .prd_box2 .prd_infor{display: flex;flex-direction: column;justify-content: center;padding: 50px;width: 50%;}
.mCon2 .mConSlide2 ul li .prd_box2 .prd_infor .timer{position:relative;margin-bottom: 25px;padding-left: 60px;font-size: 33px;color: #f43142;font-weight: 700;line-height: 1;}
.mCon2 .mConSlide2 ul li .prd_box2 .prd_infor .timer::before{position: absolute;bottom: 0;left:0;width: 55px;height: 52px;content: '';background: url('../img/ico-alarm-clock.png') no-repeat center center;opacity:0.2}
.mCon2 .mConSlide2 ul li .prd_box2 .prd_infor .timer .col{font-size: 25px;font-weight: 400;}
.mCon2 .mConSlide2 ul li .prd_box2 .prd_infor .prd_tit{margin-bottom: 15px;height:60px;font-size: 23px;line-height: 1.4;overflow: hidden;text-overflow: ellipsis;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient:vertical;}
.mCon2 .mConSlide2 ul li .prd_box2 .prd_infor .prd_price{margin-bottom: 15px;font-size: 19px;}
.mCon2 .mConSlide2 ul li .prd_box2 .prd_infor .prd_price .hot_special{margin-right: 10px;color: #f43142;font-weight: 500;}
.mCon2 .mConSlide2 ul li .prd_box2 .prd_infor .prd_price .price{font-weight: 500;}
.mCon2 .mConSlide2 ul li .prd_box2 .prd_infor .prd_price .price_regular{font-size: 15px;color: #999;font-weight: 300;text-decoration: line-through;}
.mCon2 .mConSlide2 ul li .prd_box2 .prd_infor .num{font-size: 15px;color: #666;}
.mCon2 .mPage_mb{display: none;}

.mCon3,
.mCon4{position: relative;margin: 0 auto;max-width: 1280px;}
.mCon3 .mControl button,
.mCon4 .mControl button{transform: translateY(-110%);}

.m_ad_con{background:#fbb93e}
.m_ad_con a{display: block;text-decoration: none;}
.m_ad_con .box{display: flex;justify-content: center;align-items: center;margin: 0 auto;padding: 0 20px;max-width: 1280px;}
.m_ad_con .box p{padding-left: 80px;width: 50%;font-size: 28px;color: #fff;}
.m_ad_con .box p span{display: block;font-size: 33px;font-weight: 700; line-height:1.2}

.mCon5{position: relative;margin: 0 auto 90px;max-width: 1280px;}
.mCon5 .con{display: flex;justify-content: space-between;}
.mCon5 .con .ltCon{padding-right:20px;width: 50%;}
.mCon5 .con .rtCon{position: relative;padding-left: 5px;width: 50%;}
.mCon5 .con .rtCon .mConSlide5{margin-top: -5px;}
.mCon5 .con .rtCon .mConSlide5 ul li{margin-bottom: 20px;padding: 0 15px;}
.mCon5 .con .rtCon .mConSlide5 .prd_box .prd_infor .prd_tit{display: block;margin-bottom: 5px;height: auto;white-space: nowrap;-webkit-line-clamp: 1;line-height: 1;}
.mCon5 .con .rtCon .mPage2{position: absolute;top: -35px;right: 10px;display: flex;}
.mCon5 .con .rtCon .mPage2 button{margin-left: 5px;width: 13px;height: 13px;text-indent: -999px;overflow: hidden;background: #efefef;border-radius: 50%;}
.mCon5 .con .rtCon .mPage2 button.swiper-pagination-bullet-active{background: #0765af;}

.mCon6{position: relative;margin: 0 auto;max-width: 1280px;}
.mCon6 ul{display: flex;flex-wrap: wrap;margin: 0 -23px;}
.mCon6 ul li{margin-bottom: 40px;padding: 0 18px;width: 25%;}

.mCon7{position: relative;margin: 0 auto;max-width: 1280px;}
.mCon7 ul{display: flex;justify-content: space-between;}
.mCon7 ul li{width: calc(50% - 20px);}
.mCon7 ul li .event_thumb{margin-bottom: 20px;}
.mCon7 ul li .event_infor{padding: 0 10px;}
.mCon7 ul li .event_infor .event_tit{margin-bottom: 10px;font-size: 23px;font-weight: 500;text-overflow: ellipsis;overflow: hidden;white-space: nowrap;line-height: 1;}
.mCon7 ul li .event_infor .event_date{font-size: 18px;color: #666;}
.mCon7 ul li a{display: block;text-decoration: none;}

.view_prod{position: fixed;bottom:20px;right: 40px;padding:12px 9px;width: 130px;text-align: center;background:#fff;border:1px solid #ededed;border-radius: 5px;z-index: 50;}
.view_prod h2{margin-bottom: 15px;font-size: 17px;color: #353535;line-height: 1;}
.view_prod ul li{margin-bottom: 10px;overflow: hidden;border:1px solid #ededed;border-radius: 10px;}
.view_prod ul li a{display: block;}
.view_prod ul li a:focus{border:1px dotted #000}
.view_prod .btnBasket{display: block;margin-bottom: 5px;}
.view_prod .btnBasket a{display: block;font-size: 13px;color:#fff;line-height: 30px;text-decoration: none;background:#0765af;border-radius: 5px;}
.view_prod .botBtTop{width: 100%;font-size: 13px;color:#fff;line-height: 30px;background:#353535;border-radius: 5px;}

/* 애니효과 */
.ani_0{transition-property: all;transition-duration: 0.6s;-webkit-transition-property: all;-webkit-transition-duration: 0.6s;}
.ani{opacity:0;transition-property: all;transition-duration: 0.6s;-webkit-transition-property: all;-webkit-transition-duration: 0.6s;}
.ani_y{opacity:0;transform:translateY(50px);transition-property: all;transition-duration: 0.6s;-webkit-transform:translateY(50px);-webkit-transition-property: all;-webkit-transition-duration: 0.6s;}
.ani_y.m{transform:translateY(-50px);-webkit-transform:translateY(-50px);transition-timing-function:ease;-webkit-transition-timing-function:ease}
.ani_x{opacity:0;transform:translateX(50px);transition-property: all;transition-duration: 0.6s;-webkit-transform:translateX(50px);-webkit-transition-property: all;-webkit-transition-duration: 0.6s;}
.ani_x.m{transform:translateX(-50px);-webkit-transform:translateX(-50px);transition-timing-function:ease;-webkit-transition-timing-function:ease}
.delay1{transition-delay:0.2s;-webkit-transition-delay:0.2s;}
.delay2{transition-delay:0.5s;-webkit-transition-delay:0.5s;}
.delay3{transition-delay:0.8s;-webkit-transition-delay:0.8s;}
.delay4{transition-delay:1.1s;-webkit-transition-delay:1.1s;}
.delay5{transition-delay:1.4s;-webkit-transition-delay:1.4s;}
.delay6{transition-delay:1.7s;-webkit-transition-delay:1.7s;}
.delay7{transition-delay:2.0s;-webkit-transition-delay:2.0s;}
.delay8{transition-delay:2.3s;-webkit-transition-delay:2.3s;}
.delay9{transition-delay:2.6s;-webkit-transition-delay:2.6s;}
.delay10{transition-delay:3.0s;-webkit-transition-delay:3.0s;}

.firstAct .ani{opacity:1;}
.firstAct .ani_y,
.firstAct .ani_x{opacity:1;transform:translate(0);-webkit-transform:translate(0)}

/*
================================================================================
반응형 메인 콘텐츠
================================================================================
*/


 /* TABLET Device */
@media all and (max-width:1400px){
	


}

 /* PC Device */
@media all and (min-width:1201px){
	
	.mVisual .visualSlide ul li{width: 1280px !important;}
  

}

 /* TABLET Device */
@media all and (max-width:1200px){
	
	.mVisual{padding-top: 0;}
  .mVisual .visualSlide ul li img{width: 100%;}
  .mVisual .visualSlide ul li .mv_pc{display: none;}
  .mVisual .visualSlide ul li .mv_mb{display: block;}

  .mVisual .control{justify-content: flex-end;padding: 0 30px;}
  .mVisual .control .cnt2{display: none;}

  .mConWide{padding: 90px 0;}
  .mConWide h2{padding: 0 20px;}

  .mCon1 .mConSlide1 ul li{width: 400px;}
  .mControl{display: none;}

  .mpage{display: block;position: absolute;top: 0;right: 20px;display: flex;}
  .mpage button{margin-left: 15px;width: 15px;height: 15px;text-indent: -999px;overflow: hidden;background: #efefef;border-radius: 50%;}
  .mpage button.swiper-pagination-bullet-active{background: #0765af;}

  .mCon2 .mConSlide2{margin: 0;padding: 0 20px;}
  .mCon2 .mConSlide2 ul li .prd_box2{flex-direction: column;}
  .mCon2 .mConSlide2 ul li .prd_box2 .prd_thumb{width: 100%;}
  .mCon2 .mConSlide2 ul li .prd_box2 .prd_thumb img{width: 100%;}
  .mCon2 .mConSlide2 ul li .prd_box2 .prd_infor{width: 100%;}

  .mCon3 .mConSlide3{margin: 0;padding: 0 20px;}
  
  .mCon4 .mConSlide4{margin: 0;padding: 0 20px;}

  .m_ad_con .box img{width: 50%;}
  .m_ad_con .box p{padding-left: 40px;}

  .mCon5 .con{flex-direction: column;}
  .mCon5 .con .ltCon{margin-bottom:80px;padding: 0 20px;width: 100%;}
  .mCon5 .con .ltCon img{width: 100%;}

  .mCon5 .con .rtCon{padding-left: 0;width: 100%;}
  .mCon5 .con .rtCon .mConSlide5 ul li{padding: 0 10px;}
  .mCon5 .con .rtCon .mPage2{right:20px}
  .mCon5 .con .rtCon .mPage2 button{margin-left: 15px;width: 15px;height: 15px;}

  .mCon6 ul{margin: 0 5px;}
  .mCon6 ul li{padding:0 10px;width: 50%;}

  .mCon7 ul{flex-direction: column;padding: 0 20px;}
  .mCon7 ul li{margin-bottom: 40px;width: 100%;}
  .mCon7 ul li:last-child{margin-bottom: 0;}
  .mCon7 ul li .event_thumb img{width: 100%;}


  .view_prod{display: none;}


}


 /* Mobile Device */
@media all and (max-width:640px){

  .mVisual .control{bottom: 15px;padding:0 15px}
  .mVisual .control button{width: 25px;height: 25px;}
	.mVisual .control .stopSlide::after{width: 8px;height: 10px;}
  .mVisual .control .startSlide::after{border-width: 5px 0 5px 5px;}
  .mVisual .control .cnt1{margin: 0 0 0 5px;padding: 0 10px 0 15px;width: 85px;height: 25px;}
  .mVisual .control .btnMore a{width: 20px;height: 20px;}
  .mVisual .control .btnMore a::before{width: 10px;}
  .mVisual .control .btnMore a::after{height: 10px;}
  .mVisual .control .mPage1{margin-right: 0;font-size: 12px;}

  .mConWide{padding: 30px 0;}
  .mConWide h2{margin-bottom: 10px;padding: 0 10px;font-size: 18px;}

  .mCon1{margin-bottom: 40px;}
  .mCon1 .mConSlide1 ul li{width: 260px;}
  .mCon1 .mConSlide1 ul li .prd_box{border-radius: 10px;}
  .mCon1 .mConSlide1 ul li .prd_box .prd_infor{padding:15px;}

  .prd_box .prd_thumb{margin-bottom: 10px;}
  .prd_box .prd_infor .prd_tit{margin-bottom: 5px;height: 35px;font-size: 14px;}
  .prd_box .prd_infor .prd_price .sale{font-size: 16px;}
  .prd_box .prd_infor .prd_price .price{font-size: 14px;}
  .prd_box .prd_thumb .btnBsket{right: 6px;bottom: 6px;width: 30px;height: 30px;background-size: 16px;}

  .mCon2 .mConSlide2{padding: 0 10px;}

  .mCon2 .mConSlide2 ul li .prd_box2{border-radius: 10px;}
  .mCon2 .mConSlide2 ul li .prd_box2 .prd_infor{padding:25px 20px 20px;}
  .mCon2 .mConSlide2 ul li .prd_box2 .prd_infor .timer{margin-bottom: 10px;padding-left: 35px;font-size: 15px;}
  .mCon2 .mConSlide2 ul li .prd_box2 .prd_infor .timer .col{font-size: 17px;}
  .mCon2 .mConSlide2 ul li .prd_box2 .prd_infor .timer::before{width: 30px;height: 27px;background-size: 100%;}
  .mCon2 .mConSlide2 ul li .prd_box2 .prd_infor .prd_tit{margin-bottom: 5px;height: 45px;font-size: 16px;}
  .mCon2 .mConSlide2 ul li .prd_box2 .prd_infor .prd_price{margin-bottom: 5px;font-size: 15px;}
  .mCon2 .mConSlide2 ul li .prd_box2 .prd_infor .prd_price .price_regular{font-size: 12px;}
  .mCon2 .mConSlide2 ul li .prd_box2 .prd_infor .num{font-size: 12px;}

  .mCon3 .mConSlide3{padding:  0 10px;}

  .mCon4 .mConSlide4{padding: 0 10px;}

  .m_ad_con .box{padding: 0 10px;}
  .m_ad_con .box p{padding-left: 10px;font-size: 14px;}
  .m_ad_con .box p span{font-size: 16px;}

  .mCon5 .con .ltCon{margin-bottom: 60px;padding: 0 10px;}
  .mCon5 .con .rtCon .mPage2{top: -25px;}
  .mCon5 .con .rtCon .mPage2 button{margin-left: 8px;width: 8px;height: 8px;}
  .mCon5 .con .rtCon .mConSlide5{padding: 0 5px;}
  .mCon5 .con .rtCon .mConSlide5 ul li{margin-bottom: 10px;padding:0 3px;}

  .mCon6 ul li{margin-bottom: 10px;padding: 0 3px;}

  .mCon7 ul{padding: 0 10px;}
  .mCon7 ul li{margin-bottom: 20px;}
  .mCon7 ul li .event_thumb{margin-bottom: 10px;}
  .mCon7 ul li .event_infor{padding: 0 5px;}
  .mCon7 ul li .event_infor .event_tit{margin-bottom: 5px;font-size: 16px;}
  .mCon7 ul li .event_infor .event_date{font-size: 14px;}

  .mpage{top: 5px;right: 10px;}
  .mpage button{margin-left: 8px;width: 8px;height: 8px;}


}