/* common */

*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  }
  /* font-size */
  .fz-18 { font-size: clamp(12px, 2vw, 18px); }   /* 10px ~ 18px */
  .fz-20 { font-size: clamp(14px, 2vw, 20px); }   /* 12px ~ 20px */
  .fz-23 { font-size: clamp(14px, 2vw, 23px); }   /* 14px ~ 23px */
  .fz-25 { font-size: clamp(16px, 2.5vw, 25px); }   /* 16px ~ 25px */
  .fz-28 { font-size: clamp(16px, 2.5vw, 28px); }   /* 16px ~ 28px */
  .fz-30 { font-size: clamp(18px, 3vw, 30px); }   /* 18px ~ 30px */
  .fz-32 { font-size: clamp(20px, 3vw, 32px); }   /* 20px ~ 32px */
  .fz-35 { font-size: clamp(20px, 3vw, 35px); }   /* 20px ~ 35px */
  .fz-38 { font-size: clamp(24px, 3vw, 38px); }   /* 24px ~ 38px */
  .fz-45 { font-size: clamp(30px, 4vw, 45px); }   /* 30px ~ 45px */
  .fz-65 { font-size: clamp(35px, 4vw, 65px); }  /* 35px ~ 65px */
  .fz-80 { font-size: clamp(40px, 4vw, 80px); }  /* 40px ~ 80px */
  
  
  /* margin */
  .mb-5{margin-bottom: 5px;}
  .mb-10{margin-bottom: 10px;}
  .mb-20{margin-bottom: 20px;}
  .mb-30{margin-bottom: 30px;}
  .mb-40{margin-bottom: 40px;}
  .mb-50{margin-bottom: 50px;}
  .mb-60{margin-bottom: 60px;}
  
  .mt-10{margin-top: 10px;}
  .mt-20{margin-top: 20px;}
  .mt-30{margin-top: 30px;}
  .mt-40{margin-top: 40px;}
  .mt-50{margin-top: 50px;}
  .mt-60{margin-top: 60px;}
  .mt-100{margin-top: 100px;}
  
  /* font-weight */
  .fw-100{font-weight: 100;}
  .fw-200{font-weight: 200;}
  .fw-300{font-weight: 300;}
  .fw-400{font-weight: 400;}
  .fw-500{font-weight: 500;}
  .fw-600{font-weight: 600;}
  .fw-700{font-weight: 700;}
  .fw-800{font-weight: 800;}
  .fw-900{font-weight: 900;}
  
  /* font */
  
  @font-face {
    font-family: 'aggro';
    src: url('../font/SB_aggro/SB_aggro_M.ttf') format('opentype');
  }
  /* noto */
  @font-face {
    font-family: 'noto_light';
    src: url('../font/Noto_Sans/NotoSansKR-Light.otf') format('opentype');
  }
  @font-face {
    font-family: 'noto';
    src: url('../font/Noto_Sans/NotoSansKR-Regular.otf') format('opentype');
  }
  @font-face {
    font-family: 'noto_bold';
    src: url('../font/Noto_Sans/NotoSansKR-Bold.otf') format('opentype');
  }
  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
  }
  body, p {
    font-family: 'noto', sans-serif;
  }
  p{
    word-wrap: break-word;
    word-break: keep-all;
  
  }
  
  img, video{
    display: block; 
  }
  .bold{
    font-family: 'noto_bold';
  }
  .light{
    font-family: 'noto_light';
  }
  .tit{
    font-family: 'aggro', sans-serif;
  }
  
  :root { --red-color: #AD3439;}
  .color_red {color: var(--red-color);}
  .bg_red {background-color: var(--red-color);}
  
  
  .section_inner{
   /*  background-color: #ddd; */
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
  }
  img{
    width: 100%;
  }
  /* header */
  #header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 80px;
    background-color: #D2232A;
    z-index: 999;
   }
  .menu_bar{
    width: 100%;
    height: 100%;
    max-width: 1200px;
    padding: 0 3%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }
  .logo_img img{
    height: 100%;
    width: 100%;
  }
  .pc_menu{
    flex: 1;
    padding: 3%; 
    box-sizing: border-box;
  
  
  }
  .pc_menu_list{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .pc_menu_list li a p{
    color: #fff;
  }
  .pc_menu_list li:hover a p{
    opacity: 0.6;
  }
  
  
  .visual .section_inner .video video{
    width: 100%;
  }
  
  .section01{
    width: 100%;
    height: auto;
    background-color: var(--red-color);
  }
  .section01 .section_inner{
    padding: 7% 0; box-sizing: border-box;
  }
  .section01 .section_inner p{
    text-align: center;
    color: #fff;
  }
  
  
  /* swiper */
  .swiper {
    width: 80%;
    height: 70vh;
    margin-top: 4%;
  }
  

  .swiper-wrapper{
    height: 100%;
    margin-bottom: 20px;

  }
  .swiper-slide {
    height: 50%;
    font-size: 18px;
    height: auto;
    display: flex !important;
    flex-direction: column;
    /* justify-content: space-between; */
  }
  .swiper-slide .swiper_img{
    width: 85%; 
    height: 50%;
    margin: 0 auto;
    overflow: hidden;
  }
  .swiper-slide .swiper_img img{
    width: 100%; height: 100%;
    scale: 1.3;
    object-fit: cover;
  }
  .swiper_txt{
    padding: 3% 0; box-sizing: border-box;
    margin-bottom: 30px;
  }
  .swiper-pagination-bullet{
    margin-top: 40px;

  }
  .swiper-pagination-bullet-active{
    background-color: #f2898c;
    width: 20px;
    border-radius: 5px;
  }
  .swiper_btn{
    position: absolute;
    top: 35%;
    scale: 1.5;
  
  }
  
  .swiper-button-prev:after{
    display: none;
  }
  .swiper-button-next:after{
    display: none;
  }
  
  
  /* section02 */
  .sec03_tab{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1%;
  }
  .sec03_tab_tit{
    width: 100%;
    padding: 1% 0;
    text-align: center;
    background-color: #D9D9D9;
    cursor: pointer;
  }
  .sec03_tab_tit.active{
    /* background-color: var(--red-color); */
    background-color: #D2232A;
  }
  .sec03_tab_tit p{
    color: #444;
    line-height: 100%;
    font-family: 'noto_bold';
  }
  .sec03_tab_tit.active p{
    color: #fff;
  }
  
  .sec03_sheet {
    width: 100%;
    padding: 5% 0; 
  }
  
  .tab-content {
    display: none;
    margin: 0 auto; 
  }
  
  .tab-content.active {
    display: block; 
  }
  .menu_pop{
    padding: 0 11.5% 0 5%; box-sizing: border-box;
  }
  .menu_pop li{
    cursor: pointer;
    margin-bottom: 2%;
  }
  
  
  
  
  /* popup */
  .pop {
    display: none; 
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    min-width: 400px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    border-radius: 20px;
    overflow: hidden;
  }
  
  .pop_close {
    cursor: pointer;
    position: absolute;
    top: 4%;
    right: 3%;
    width: 7%; height: 7%;
   
  }
  
  .pop_list {
    display: flex;
    justify-content: space-around;
  }
  .pop_list li img{
    height: 100%;
    max-height: 65vh;
  }
  
  /*  */
  
  .pc_only .img011 img{
    width: 106.4%;
  }
  .img_left {
    width: 100.3%;
  }
  .img_left img{
    transform: translateX(-0.5%);
  }
  .drink{
    padding: 0 10.6% 0 5%;
  }
  
  /* top */
  #backToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    padding: 15px 9px;
    color: #D4343A;
    background-color: transparent;
    border-radius: 20px;
    cursor: pointer;
    z-index: 1000;
    border: 4px solid #D4343A;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    opacity: 0; 
    transition: opacity 0.3s ease, visibility 0.3s ease; 
    visibility: hidden;
  }
  #backToTop.show {
    opacity: 1;
    visibility: visible;
  }
  
  /* bd */
  .bd{
    padding-bottom: 50px;
    margin-top: 2%;  
  }
  .bd .section_inner{
    position: relative;
  }
  .quick{
    width: 100%;
    height: 100%;
    min-height: 430px;
  }

  .bd_btn{
    position: absolute;
     bottom: 26%;
     right: 44%;
     width: 100px;
     height: 40px;
     background-color: transparent;
     cursor: pointer;
  }
  .bd_txt{
    display: none;
    position: fixed;
 
    left: 50%; bottom: 50%;
    transform: translate(-50%, 50%);
    background-color: #fff;
    width: 40%;
    min-height: 300px;
    height: 50%;
    border-radius: 10px;
    padding: 2%; box-sizing: border-box;
    z-index: 999;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    
  
  }
  .bd_txt_close{
    position: fixed;
    top: 0;
    width: 100%;
    height: 30px;
  }
  .bd_txt_close .img{
    width: 40px; height: 40px;
    position: absolute;
    right: 3%; top: 2%;
    cursor: pointer;
  }
  .bd_txt_box{
    margin-top: 12%;
    overflow: scroll;
    min-height: 250px;
    height: 88%;
    scrollbar-width: thin; 
    scrollbar-color: #D2232A #f1f1f1; 

  }

  
  
  
  .m_only{display: none;}
  
  /* 미디어 쿼리 */
  @media screen and (max-width: 1400px) {
    .section_inner {
      padding: 0 5%;
      box-sizing: border-box;
    }
    .bd_btn{
      bottom: 29%;
      right: 40%;
    }
  }
  @media screen and (max-width: 1100px){
    .wpc_only{
      display: none;
    }
    .bd_btn{
      bottom: 32%;
    }
  }
  @media screen and (max-width: 970px){
    .bd_btn{
      bottom: 33%;
      right: 36%;
    }
    .bd_txt{
      width: 70%;
      height: 40%;
    }
  }
  @media screen and (max-width: 780px){
    .bd_btn{
      bottom: 35%;
      right: 28%;
    }
  }
  @media screen and (max-width: 711px){
    .bd_btn{
      bottom: 33%;
      right: 43%;
    }
  }
  
  @media screen and (max-width: 640px) {
    .m_only {
      display: block;
    }
    .pc_only {
      display: none;
    }
    .fz-18 { font-size: clamp(12px, 2vw, 18px); }
    .fz-20 { font-size: clamp(12px, 2vw, 20px); }
    .fz-23 { font-size: clamp(14px, 2vw, 23px); }
    .fz-25 { font-size: clamp(14px, 2.5vw, 25px); }
    .fz-28 { font-size: clamp(14px, 2.5vw, 28px); }
    .fz-30 { font-size: clamp(16px, 3vw, 30px); }
    .fz-32 { font-size: clamp(18px, 3vw, 32px); }
    .fz-35 { font-size: clamp(18px, 3vw, 35px); }
    .fz-38 { font-size: clamp(20px, 3vw, 38px); }
    .fz-45 { font-size: clamp(24px, 4vw, 45px); }
    .fz-65 { font-size: clamp(28px, 4vw, 65px); }
    .fz-80 { font-size: clamp(32px, 4vw, 80px); }
  
    .menu_bar{
      align-items: center;
    }
    .pc_menu{
      flex: none;
    }
    .logo_img{
      height: 100%;
    }
    .ham {
      display: inline-block;
      cursor: pointer;
      position: relative;
      width: 40px;
      height: 42px;
      z-index: 9999;
    }
  
    .ham span {
        display: block;
        width: 100%;
        height: 4px;
        background-color: #fff;
        margin: 8px 0;
        transition: all 0.4s;
    }
    
    .ham.active-1 span:nth-of-type(1) {
        transform: translateY(10px) rotate(45deg);
    }
    
    .ham.active-1 span:nth-of-type(2) {
        opacity: 0;
    }
    
    .ham.active-1 span:nth-of-type(3) {
        transform: translateY(-14px) rotate(-45deg);
    }
    
    .modal_wrap {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1000;
    }
    
    .modal {
        position: absolute;
        right: 0;
        top: 65px;
        background: #D2232A;
        padding: 20px;
        border-radius: 0 0 15px 15px;
        box-shadow: 0 rgba(0, 0, 0, 0.2);
        transition: all 0.3s; 
     
    }
    .modal ul li{
      margin-bottom: 20px;
      font-size: 14px;
    }
    .modal ul li a{
      color: #fff;
    }
    #backToTop p {
      font-size: 20px;
    }
    .swiper{
      width: 90%;
      height: 76vh;
    }
    .swiper-slide .swiper_img {
      width: 73%;
     }
     /* mobile_menu */
     .sec03_tab{
      display: block;
     }
     .menu_btn{
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 15px;
      gap: 15px;
     }
     .sec03_tab_tit{
      padding: 3% 0;
      width: 100%; 
     }
     .tab-content .menu_pop{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      padding: 4% 5%;
     }
     .quick{
      width: 100%;
      height: 100%;
      min-height: 400px;
    }
    .bd_btn{
      bottom: 31%;
      right: 40%;
    }
    #header{
      height: 65px;
    }
    .logo_img{
      width: 90px;
    }
    .swiper_btn {
      scale: 1;
    }
    
  }
    
  @media screen and (max-width: 480px) {
    .bd_btn{
      right: 20%;
    }
    

  }
  @media screen and (max-width: 340px) {
    .bd_btn{
      right: 12%;
      bottom: 23%;
    }
  }