@font-face {
  
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard.woff') format('woff');
  font-style: normal;
}
/* 공통 */
#wrap{}
/* .sec-wrap{margin-bottom: 100px;} */
.sec-wrap .secTit_wrap{position: relative;}
.sec-wrap .secTit_wrap::before{z-index: -1; display: block; content: ""; width: 100%; height: 1px; background-color: #ccc; position: absolute; top: 42%; left: 0;}
.sec-wrap .secTit_wrap::after{z-index: -1; display: block; content: ""; width: 100%; height: 1px; background-color: #ccc; position: absolute; bottom: 42%; left: 0;}
.sec-wrap .secTit{display: flex; justify-content: center; width: 22%; padding: 0 20px; background-color: #fff; font-size: 26px; font-weight: 600; color: #484848;  text-align: center; line-height: 1em; margin: 0 auto 50px;}
.sec-wrap .secTit span{color: #b7a695; animation: 1.3s infinite secTit; margin: 0 5px;}
/* animation */
@keyframes secTit{
  0%{opacity: 1;}
  50%{opacity: 0.5;}
  100%{opacity: 1;}
}

.sec-wrap .goods-wrap li{width: 32.5%; position: relative;}
.sec-wrap .heartIcon{width: 36px; height: 33px; background: center / 100% no-repeat url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/BLASHOP/165584547628946.png); position: absolute; top: 10px; right: 10px; z-index: 10;}
.sec-wrap .heartIcon.click{background-image: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/BLASHOP/165584552351468.png);}
/* .sec-wrap .heartIcon i{font-size: 25px; color: #888;}
.sec-wrap .heartIcon i.click{font-size: 25px; color: #f83030;} */
.sec-wrap .gd-img{width: 100%; margin-bottom: 30px; overflow: hidden;border:1px solid #ddd;padding-bottom: 100%;position: relative;}
.sec-wrap .gd-img img{position: absolute;  left: 50%;top:50%;transform: translate(-50%,-50%);}

.sec-wrap .gd-img img{width: 100%; height: 100%; transition: 0.3s;display: block;}
.sec-wrap .gd-info span{display: block;}
.sec-wrap .gd-name a{ font-size: 1.125rem;font-weight: 600; }
.sec-wrap .gd-info span.gd-name{word-break: initial !important;white-space: normal; display: -webkit-box !important; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}



.sec-wrap .gd-price{ font-size: 1.1rem; color: #321301;}
.sec-wrap .gd-percent{ font-size: 1rem; color: #dd3333;font-weight: 600;position: relative;top:-3px;margin-left: 10px;;}
.sec-wrap .gd-sale{ font-size: 1.1rem; color: #888;position: relative;width: max-content;margin-left: 10px;}
.sec-wrap .gd-info p{display: flex;margin-top: 8px;}
.sec-wrap .gd-sale::before{content:'';display: block;width: 100%;height: 1px;background: #888;position:absolute;left:50%;top:50%;transform: translate(-50%,-50%);}
.sec-wrap .cartIcon{position: absolute; bottom: 10px; right: 5px; width: 43px; height: 33px; background: center / 100% no-repeat url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/COMMON/162083403685562.png);}
/* hover */
.sec-wrap .gd-img:hover img{transform:translate(-50%,-50%) scale(1.1);}


/* section01 */
.sec01 .mainSwiper{width: 100%;  position: relative;}
.sec01 .slide_wrap{width: 100%; height: 100%;}
.sec01 .swiper-slide img{width: 100%; height: 100%;    display: block;}
.sec01 .swiper-slide .moBanner{display: none;}
.sec01 .s-pagination{position: absolute; left: 102%; z-index: 10; text-align: center;}
.sec01 .swiper-pagination-bullet{width: 12px; height: 12px; opacity: 0.4; background-color: #b7a695;}
.sec01 .swiper-pagination-bullet-active{opacity: 1;}
.sec01 .hashtag-wrap{width: 100%; background-color: #b7a695;}
.sec01 .tag_inner{max-width: 1200px; padding: 10px 0; margin: 0 auto;}
.sec01 .tag_inner ul{width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; padding: 4px 0;}
.sec01 .tag_inner li{line-height: 1em; margin: 0 10px; padding: 7px 0;}
.sec01 .tag_inner li a{color: #fff;  font-size: 14px;}

/* section02 */
.sec02{margin-bottom: 0;padding-top: 100px;}
.sec02 .best-goods, .new-goods{max-width: 1200px; margin: 0 auto 40PX; padding: 0 20px;}
.sec02 .goods-wrap ul{display: flex; flex-wrap: wrap;}
.sec02 .goods-wrap li{margin-bottom: 60px; padding-bottom: 10px; margin: 0 4px 60px;}


/* section03 */
.sec03{width: 100%;margin-bottom: 100px; }
.sec03 .proBan-mo{max-width: 1200px; margin: 0 auto; overflow: hidden;}
.sec03 .swiper-wrapper{width: 100%; }
.sec03 .proBan-mo div.swiper-slide{width: 100%; background: center / cover;padding-bottom: 20%;}
.sec03 .proBan-mo div.pcBa01{background-image: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/COMMON/162076974842356.jpg);}
.sec03 .proBan-mo div.pcBa02{background-image: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/COMMON/162076974323887.jpg);}
.sec03 .proBan-mo div.pcBa03{background-image: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/COMMON/162076975260503.jpg);}
.sec03 .s-pagination{margin-top: 30px; text-align: center;}
.sec03 .swiper-pagination-bullet{width: 12px; height: 12px; opacity: 0.4; background-color: #b7a695;}
.sec03 .swiper-pagination-bullet-active{opacity: 1;}
/* hover */
.sec03 .goods-banner p:hover{background-size: 103%;}

/* section04 */
.sec04{margin-bottom: 130px;}
.sec04 .s04-inner{width: 1200px; padding-top: 70px; margin: 0 auto;}
.sec04 ul{display: flex; justify-content: space-between;}
.sec04 li > div{position: relative;height: 220px; background-color: #fff; box-shadow: 0 0 24px rgba(145, 145, 145, 0.2); text-align: center; padding-top: 90px;}
.sec04 li .banIcon{position: absolute; left: 50%; top: 0; transform: translate(-50%,-50%); width: 130px; height: 130px; border-radius: 100%;display: flex;align-items: center;
  justify-content: center; }
  .sec04 li .banIcon img{width: 60%;display: block;}
.sec04 li .banLink a{color: rgb(18, 18, 18, 0.6); font-size: 13px;}
.sec04 li.howTOuse .banIcon{background: center / 57px 77px no-repeat url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/COMMON/161809354742944.png); background-color: #f5c73c; transition: 0.2s;}
.sec04 li.comuAsk .banIcon{background: center / 70px 63px no-repeat url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/COMMON/161809355599763.png); background-color: #b7a695; transition: 0.2s;}
.sec04 li.homepage .banIcon{background: center / 55px no-repeat url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/COMMON/161809428222469.png); background-color: #f5c73c; transition: 0.2s;}
.sec04 li .banTxt{font-size: 23px; color: #353535;  line-height: 1.3em; margin-bottom: 13px;}
.sec04 li .banTxt span{color: #f5c73c; font-weight: 600;}
.sec04 li.comuAsk .banTxt span{color: #b7a695;}
/* hover */
.sec04 li.howTOuse:hover .banIcon{background-size: 64px 84px;}
.sec04 li.comuAsk:hover .banIcon{background-size: 77px 70px;}
.sec04 li.homepage:hover .banIcon{background-size: 62px;}
.sec04 li .banLink a:hover{color: rgb(18, 18, 18, 1);}


.main_review .more_but{margin:0 auto;text-align: center;margin-top: 20px;}
.main_review .more_but button{background: #333;color: #fff;padding:15px 40px;border-radius: 10px;}


.main_wrap .main_review .swiper-slide{border:1px solid #ddd;;}
.main_wrap .main_review .swiper-slide > div{border:none;margin-bottom: 0;}
.main_wrap.main_review .Textbox{margin-bottom: 0;}




/***********************************************
*1800px max
***********************************************/
@media screen and (max-width:1800px){


}

/***********************************************
*1600px max
***********************************************/
@media screen and (max-width:1800px){

    
}

/***********************************************
*1500px max
***********************************************/
@media screen and (max-width:1500px){


}

/***********************************************
*1400px max
***********************************************/
@media screen and (max-width: 1400px){
  .sec04 .s04-inner{width: 1150px;}
  .sec04 ul{justify-content: space-evenly;}

}

/**********************************************
*1200px max
**********************************************/
@media screen and (max-width: 1200px){

  .sec-wrap .secTit{width: 27%;}

  .sec02 .best-goods, .new-goods{padding: 0 40px;}

  .sec04 .s04-inner{width:90%; margin: 0 auto;}
  .sec04 ul{display: block; }

  .main_review{padding: 0 20px}
  
  


}

/***********************************************
*1024px max
***********************************************/
@media screen and (max-width: 1024px){
  /* .sec01 .mainSwiper{height: 350px;} */

  .sec02 .best-goods, .new-goods{padding: 0 20px;}
  /* .sec02 .goods-wrap ul{justify-content: space-evenly;} */

  .sec-wrap .goods-wrap li{width: calc((100% - 16px) / 2 );}

}

/***********************************************
*960px max
***********************************************/
@media screen and (max-width: 960px){
  .sec-wrap .secTit{width: 33%;}


}

/***********************************************
*840px max
***********************************************/
@media screen and (max-width: 840px){
  .sec-wrap .secTit{width: 100%;}
  

  .sec03{padding: 0 0 10px;}
  .sec03 .s-pagination{margin-top: -30px;}
  .sec03 .swiper-pagination-bullet{width: 8px; height: 8px;}

  .sec02 {padding-top: 80px;}
  .sec04 {margin-bottom: 80px;}
  .sec03 { margin-bottom: 80px;}
  .main_review{margin-bottom: 80px;}

}

/***********************************************
*769px max
***********************************************/
@media screen and (max-width: 769px){

  /* .sec01 .mainSwiper{height: 500px;} */
  .sec01 .swiper-slide .pcBanner{display: none;}
  .sec01 .swiper-slide .moBanner{display: block;}


  .sec04 li .banIcon {  width: 90px;height: 90px;}
  .sec04 li > div {height: 200px;  padding-top: 70px;}


}

/***********************************************
*576px max
***********************************************/
@media screen and (max-width: 576px){
  .sec-wrap .secTit { margin: 0px auto 30px;}

  /* .sec01 .mainSwiper{height: 390px;} */

  .sec03 .goods-banner p, .sec03 .goods-banner p:last-child{width: 450px; height: 198px;}
  .sec03 .free-banner p{width: 450px; height: 396px;}
  .sec04 li .banIcon{width: 110px; height: 110px;}

  .sec-wrap .cartIcon{width: 35px;}


  .sec04 li .banTxt {   font-size: 18px;}
  .sec04 ul li{width: 100%;padding:0 !important}
  .sec04 ul li + li{margin-top:50px;}
  .sec04 li > div {height: 155px;    padding-top: 53px;}
  .sec04 li .banIcon {width: 70px;    height: 70px;}
  .sec04 ul{margin:0 !important}

  .sec-wrap .heartIcon {width: 26px;height: 23px;}

  .sec-wrap .gd-img {margin-bottom: 10px;}


  .sec04 .s04-inner { padding-top: 20px;}

  .sec03 .proBan-mo div.swiper-slide { padding-bottom: 30%;}


  .sec-wrap .gd-info p {margin-top: 0px;  flex-direction: column-reverse;position: relative;}
  .sec-wrap .gd-sale{margin-left: 0;}
  .sec-wrap .gd-percent{position: absolute;right:0;top:0;background-color:#dd3333;color: #fff;padding:0 6px;font-size: 12px;}
  .sec-wrap .gd-percent::before{content:'SALE ';}
  .sec02 .goods-wrap li {margin: 0 6px 20px;width:calc((100% - 24px) / 2 )}
  .sec02 .goods-wrap ul{margin-left:-6px;margin-right:-6px;}
  .sec-wrap .gd-info span.gd-name{margin-bottom: 4px;border-bottom:1px solid #ddd;padding-bottom:4px;margin-bottom: 8px;}
  .sec-wrap .gd-price{font-weight: 600;}

}
 
/***********************************************
*460px max
***********************************************/
@media screen and (max-width: 460px){

  /* .sec01 .mainSwiper{height: 330px;} */

  .sec03 .goods-banner p, .sec03 .goods-banner p:last-child{width: 400px; height: 180px;}
  .sec03 .free-banner p{width: 400px; height: 353px;}
  .sec04 li{padding-right: 20px;}

  .sec02 {padding-top: 60px;}
  .sec04 {margin-bottom: 60px;}
  .sec03 { margin-bottom: 60px;}
  .main_review{margin-bottom: 60px;}


  .sec02 .best-goods, .new-goods {padding: 0 16px;}

}

/***********************************************
*400 max
***********************************************/
@media screen and (max-width: 400px){

  .sec-wrap .gd-sale {font-size: 14px;}
  .sec-wrap .gd-name a {font-size: 15px;}
  .sec-wrap .gd-percent { padding: 0 2px;}

}