@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard.woff') format('woff');
  font-style: normal;
}
/* 공통 */
#wrap{font-family: 'Pretendard';}
.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; font-family: 'Pretendard'; text-align: center; line-height: 1em; margin: 0 auto 50px;}
.sec-wrap .secTit span{color: #a51013; 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: 26px; height: 23px; background: center / 100% no-repeat url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/CBN/161809581278917.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/CBN/161809581626905.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%; height: 290px; margin-bottom: 30px; overflow: hidden;}
.sec-wrap .gd-img img{width: 100%; height: 100%; transition: 0.3s;}
.sec-wrap .gd-info{padding-left: 15px; position: relative;}
.sec-wrap .gd-info span{display: block;}
.sec-wrap .gd-name a{font-family: 'Pretendard'; font-size: 1.05rem; color: #777;}
.sec-wrap .gd-info span.gd-name{display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
.sec-wrap .sale-price{font-family: 'Pretendard'; font-weight: bold; font-size: 1.1rem; color: #321301;}
.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/CBN/162083403685562.png);}
/* .sec-wrap .price-flex{display: flex; gap: 10px; align-items: center;} */
.sec-wrap .gd-price{position: relative; color: #bbb; line-height: 1; padding-top: 4px;}
.sec-wrap .gd-price::after{content: "";display: block;position: absolute; top: 50%; left: -3px; width: 80px;height: 1px;background-color: #bbb;}
.sec-wrap .sale_per,.sec-wrap .sale_per i{font-weight: bold; color: #e03434;}
.sec-wrap .sale_per{padding-left: 5px;}
/* hover */
.sec-wrap .gd-img:hover img{transform: scale(1.1);}


/* section01 */
.sec01 .mainSwiper{width: 100%; height: 480px; position: relative;}
.sec01 .slide_wrap{width: 100%; height: 100%;}
.sec01 .swiper-slide img{width: 100%; height: 100%;}
.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: #a51013;}
.sec01 .swiper-pagination-bullet-active{opacity: 1;}
.sec01 .hashtag-wrap{width: 100%; background-color: #a51013;}
.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-family: 'Pretendard'; font-size: 14px;}

/* section02 */
.sec02{margin-bottom: 0;}
.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: 0 4px 60px; padding-bottom: 10px;}


/* section03 */
.sec03{width: 100%; background-color: #f8f8f8; padding: 70px 0 40px;}
.sec03 .proBan-mo{max-width: 1200px; margin: 0 auto; overflow: hidden;}
.sec03 .swiper-wrapper{width: 100%; }
.sec03 .proBan-mo div.swiper-slide{width: 1200px; height: 250px; background: center / 100% no-repeat;}
.sec03 .proBan-mo div.pcBa01{background-image: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/CBN/162076974842356.jpg);}
.sec03 .proBan-mo div.pcBa02{background-image: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/CBN/162076974323887.jpg);}
.sec03 .proBan-mo div.pcBa03{background-image: url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/CBN/162076975260503.jpg);}
.sec03 .s-pagination{margin-top: 30px; text-align: center;}
.sec03 .swiper-pagination-bullet{width: 12px; height: 12px; opacity: 0.4; background-color: #a51013;}
.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{position: relative; width: 370px; 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%; }
.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/CBN/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/CBN/161809355599763.png); background-color: #a51013; transition: 0.2s;}
.sec04 li.homepage .banIcon{background: center / 55px no-repeat url(https://s3.ap-northeast-2.amazonaws.com/lbcontents/images/CBN/161809428222469.png); background-color: #f5c73c; transition: 0.2s;}
.sec04 li .banTxt{font-size: 23px; color: #353535; font-family: 'Pretendard'; line-height: 1.2em; margin-bottom: 13px;}
.sec04 li .banTxt span{color: #f5c73c; font-weight: 600;}
.sec04 li.comuAsk .banTxt span{color: #a51013;}
/* 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);}









/***********************************************
*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;}
  .sec04 li{width: 320px;}

}

/**********************************************
*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: 80%; margin: 0 auto;}
  .sec04 ul{display: block; width:100%;}
  .sec04 li{width: 100%; padding-top: 0; padding-right: 50px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; margin-bottom: 20px;}
  .sec04 li .banIcon{left: 50px; top: 50%; transform: translateY(-50%);}
  .sec04 li .banTxt{text-align: right;}


  
  


}

/***********************************************
*1024px max
***********************************************/
@media screen and (max-width: 1024px){
  .sec01 .mainSwiper{height: 350px;}

  .sec02 .best-goods, .new-goods{padding: 0 20px;}
  


}

/***********************************************
*960px max
***********************************************/
@media screen and (max-width: 960px){
  .sec-wrap .secTit{width: 33%;}
  .sec-wrap .goods-wrap li{width: 49%;}


}

/***********************************************
*840px max
***********************************************/
@media screen and (max-width: 840px){
  .sec-wrap .secTit{width: 100%;}
  
  .sec-wrap .goods-wrap li{width: 47%; }
  .sec-wrap .gd-img{height: 230px;}

  .sec03{padding: 0 0 10px;}
  .sec03 .s-pagination{margin-top: -30px;}
  .sec03 .swiper-pagination-bullet{width: 8px; height: 8px;}
  .sec03 .proBan-mo div.swiper-slide{background-size: auto 70%;}


}

/***********************************************
*769px max
***********************************************/
@media screen and (max-width: 769px){

  .sec01 .mainSwiper{height: 500px;}
  .sec01 .swiper-slide .pcBanner{display: none;}
  .sec01 .swiper-slide .moBanner{display: block;}

  .sec-wrap .gd-price::after {width: 68px;}



}

/***********************************************
*576px max
***********************************************/
@media screen and (max-width: 576px){

  .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;}
  .sec-wrap .gd-img{height: 180px;}

  .sec03 div{height: 280px;}
  
  .sec04 li .banIcon{left: 15px; width: 95px; height: 95px;}
  .sec04 li .banTxt{font-size: 18px;}

 

}
 
/***********************************************
*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 .banIcon{left: 13px;}
  .sec04 li{padding-right: 20px;}

  .sec-wrap .gd-info{padding-left: 0;}

}

/***********************************************
*350 max
***********************************************/
@media screen and (max-width: 350px){


}