/* BASIC css start */

/* #pageWrap .loc-navi{font-size:12px;color:#999;margin-bottom:83px}
*{max-width:100%;scroll-behavior: smooth;  }
body{overflow-y: hidden; margin: 0; padding: 0; scroll-behavior: smooth;width:100%;;}

a{text-decoration: none; color: inherit;}
li{list-style: none;}
section{margin: 0; padding: 0; display: block; margin: 0 auto;}

#font {font-size:30px;}
#shop1 {font-size:30px;}
#shop2 {font-size:30px;}
#shop3 {font-size:30px;line-height: 60px;}

#pageWrap .inner .con01 .main .tab_box ul li{font-size:22px;}

/* main *
.main{text-align: center; width: 1600px; margin: 0 auto;}
/* .main img{position: fixed; width: 100%; margin: 0 auto; text-align: center; align-items: center;} *
.tab_box{background: #000; width: 1600px; height: 100px;margin:  0 auto; font-family: 'Pretendard-Regular', sans-serif; position: relative; overflow-y: hidden; z-index: 2; }
.tab_box ul{display: flex; justify-content: space-between; color: #fff; width: 80%; margin: 0 auto; font-size: 23px; line-height: 100px;}
/* .tab_box ul li{background: red; width: 55%; height: 40px; margin: 30px;line-height: 40px;} *
.tab_box ul span{background: #fff; width: 1px; height: 35px; margin: 35px; opacity:0.3}
.tab_box ul li{transition: all 0.2s;}
.tab_box ul li:hover{transition: all 0.2s; color: #FFCE1D;}

#sale01, #sale02, #sale03, #sale04 {
    scroll-margin-top: 150px; /* ÅÇ Å¬¸¯ ½Ã ÇØ´ç ¼½¼ÇÀÌ #fix ³ôÀ̸¦ °í·ÁÇÏ¿© À§Ä¡ÇÔ *
}


/* ¸Þ´º°íÁ¤ *
 #fix.fixed{
    position: fixed;
      left: 50%;
      transform: translateX(-50%);
      top: 100px;
      width: 860px;
      z-index: 2;
      background: #000;
      justify-content: center;
      color: #fff;
      
      display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  } 
 

/* event1 *
.event01{max-width: 100%; height: auto; margin: 0 auto; }
/* box01 *
.event01 .box1{position: relative;} 
.event01 .box1 img{position: relative; z-index: -5;}
.event01 .box1 .btnred{font-family: 'jost',sans-serif; width: 1600px; height: 90px; position: absolute; bottom: 161px; line-height: 90px; font-size: 35px; color: #fff;  overflow: hidden;}
.event01 .box1 .btnred .btn1{width: 735px; height: 90px; background: #F83B3B; margin: 0 auto; border-radius: 20px; text-align: center; overflow-y: hidden;}

/* box2 *
.event01 .box2{position: relative;}
.event01 .box2 .btnyellow{font-family: 'jost',sans-serif; width: 1600px; height: 90px; position: absolute; bottom: 230px; left: 140px; line-height: 71px; font-size: 35px; color: #000;  overflow: hidden;}
.event01 .box2 .btnyellow .btn2{width: 399px; height: 71px; background: #FFCE1D; margin: 0 auto; border-radius: 20px; text-align: center; overflow-y: hidden;}

/* event03 *
.event03{max-width: 100%; height: auto; margin: 0 auto; text-align: center; position: relative; justify-content: center; }
.event03 img{position: relative; justify-content: center; margin: 0 auto; }
.event03 .btnblack{font-family: 'jost',sans-serif; width: 1420px; height: 70px; position: absolute; top:430px;  left: 50%; transform: translateX(-50%); line-height: 70px;  font-size: 35px; color: #000;overflow-y: hidden; display: flex; justify-content:right;}
.event03 .btnblack a{width: 350px; height: 70px; pointer-events: auto; position: absolute;overflow-y: hidden;}
.event03 .btnblack a span{position: absolute; line-height: 60px; width: 60px; height: 60px; background: #000; color: #fff; margin-left: 20px;  border-radius: 500px; overflow-y: hidden; align-items: center; }


/* event03 *
.event04{max-width: 100%; height: auto; margin: 0 auto; text-align: center;  position: relative;}
.event04 .box2 .type{width: 1600px; position: absolute; display: flex; justify-content: center; top:495px ; left: 50%; transform: translateX(-50%); }


/* footer *
.footer{width: 1600px; margin: 0 auto;}

@media(max-width:860px){
 .tab_box{width:860px}
 .tab_box ul{width:100%}
  #font{font-size: 14px;}

  .event01 .box1 .btnred { position: absolute; bottom: 40px; height: 60px; line-height: 50px; align-items:center; }
  .event01 .box1 .btnred .btn1{height: 60px;}
  #shop1{font-size: 27px; line-height: 27px;}

  .event01 .box2 .btnyellow{position: absolute; bottom: 30px; height: 60px; line-height: 50px; align-items:center; }
  .event01 .box2 .btnyellow .btn2{height: 60px;}
  #shop2{font-size: 27px; line-height: 27px;}

  .event03 .btnblack{ position: absolute; top:230px; }
  .event03 .btnblack a span{width: 50px; height: 50px; line-height: 50px;}

  .event03 .top5{width: 860px; position: absolute; display: flex; justify-content: center; top: 300px; left: 50%; transform: translateX(-50%);}
  .event03 .top5 .top{width: 100%; display: flex; flex-wrap: wrap;}
  .event03 .top5 ul{display: flex; justify-content: flex-start; width: 860px; gap: 8px;margin: 0 auto;}
  .event03 .top5 .top li img{object-fit: contain; transform: scale(0.7); flex-wrap: wrap;}

  .event04 .box2 .type{position: absolute; top: 300px;}
}

@media (max-width:884px){
 body{overflow-y:scroll;}
  .tab_box{width:884px; height: 80px;}
  .tab_box ul{width:100%; justify-content: center; line-height: 80px;}
  .tab_box ul span{background: #fff; width: 1px; height: 20px;  margin: 35px 13px; line-height: 80px;}
  #font{font-size: 15px;}
  
   .event01 .box1 .btnred { position: absolute; bottom: 50px; height: 50px; line-height: 45px; width: 300px; left: 50%; transform: translateX(-50%);}
  .event01 .box1 .btnred .btn1{height: 50px;}
  #shop1{font-size: 20px;}
  
  .event01 .box2 .btnyellow{position: absolute; bottom: 60px; height: 50px; line-height: 45px; width: 300px; left: 50%; transform: translateX(-50%); }
  .event01 .box2 .btnyellow .btn2{height: 50px;}
  #shop2{font-size: 20px;}
  

 .event03 .top5{width: 100%; position: relative; display: flex; justify-content: center; top:0px; left: 50%; transform: translateX(-50%);}
.event03 .top5 .top{width: 88%; display: flex; margin: 0 auto; position: absolute; justify-content: center;}
 .event03 .top5 .top li{width: calc(50% - 5px);overflow: hidden;position: relative;  justify-content: center; margin:0 auto; margin-bottom:20px}
  .event03 .top5 .top li:last-child{justify-content: flex-start;}
 
  .event03 .top5 .top li img{  width: 100%;  height:100%; object-fit: cover; object-position: center;transform:scale(1) ;width:0 auto; justify-content: center; }
  
} */
/* BASIC css end */