@charset "utf-8";

@import url(https://cdn.jsdelivr.net/gh/sunghyunzz/eulyoo1945/eulyoo1945.css);

* {
 padding: 0;
 margin: 0;
 box-sizing: border-box;
 list-style: none;
 text-decoration: none;
}

html {
 scroll-behavior: smooth;
}

body {
 scroll-behavior: smooth;
 font-family: "Pretendard variable", sans-serif;
}

:root {
 --eu1945: "Eulyoo1945", serif;
 --wc: white;
 --bc: black;
}

header.open {
 --wc: black;
 --bc: white;
 background: white;
 transition: 0.7s;
}

header.open .depth_menu {
 border-top: 1px solid #ccc;
 transition: 0.5s;
}

body:not(:has(#fullpage)) header .main_logo {
 -webkit-filter: grayscale(100%) brightness(0);
 filter: grayscale(100%) brightness(0);
}

header.open .logo img {
 filter: grayscale(100%) brightness(0);
 transition: 0.3s;
}

.ham {
 cursor: pointer;
 display: flex;
 align-items: center;
 justify-content: center;
 flex-direction: column;
 gap: 0.62rem;
 height: 100%;
 padding: 0.9rem 0;
 padding-right: 0;
}

.ham .line {
 display: block;
 background-color: var(--wc);
 border-radius: 5rem;
 width: 2.2vw;
 height: 1px;
}

#ham-toggle:checked + .ham {
 gap: 0;
 transition: 0.5s;
}

#ham-toggle:checked + .ham .line:first-child {
 height: 0;
 visibility: hidden;
 opacity: 0;
 transition: 0.5s;
}

header.open .depth_menu {
 height: 400px;
 transition: 0.7s;
 visibility: visible;
 opacity: 1;
}

.depth_menu {
 width: 100%;
 background: white;
 height: 0;
 overflow: hidden;
 visibility: hidden;
 opacity: 0;
 transition: 0.5s ease-in-out;
}

.depth_menu .depth {
 display: flex;
 width: 100%;
 gap: 2vw;
 padding-inline: 5%;
 height: 100%;
}

.depth_menu .depth > li {
 padding-inline: 40px;
 letter-spacing: -0.3px;
 padding: 20px;
 border-right: 1px solid #ccc;
 flex: 1;
}

.depth_menu .depth > li:nth-child(1) {
 border-left: 1px solid #ccc;
}

.depth_menu .depth li h2 {
 color: black;
 margin-block: 2rem;
 font-size: 2rem;
 font-weight: 400;
 font-family: var(--eu1945);
}

.depth_menu .depth li > ul li {
 padding-block: 1rem;
}

.depth_menu .depth li > ul li a {
 color: #999999;
 font-weight: 300;
 font-size: 22px;
 padding-bottom: 3px;
 font-family: "Pretendard Variable", sans-serif;
}

.depth_menu .depth li > ul li a:hover {
 color: black;
 border-bottom: 1px solid black;
 transition: 0.4s;
}

#fp-nav.fp-left {
 left: 3.5%;
}

#fp-nav ul li a span,
.fp-slidesNav ul li a span {
 left: auto;
 top: auto;
}

#fp-nav ul,
.fp-slidesNav ul {
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 14px;
}

#fp-nav ul li a span {
 background: rgb(255, 255, 255, 0.5);
}

#fp-nav ul li:hover a span,
.fp-slidesNav ul li:hover a span {
 width: 10px;
 height: 10px;
 margin: 0 auto;
}

#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span {
 width: 10px;
 height: 10px;
 margin: 0 auto;
 box-shadow: 0 0 0 2px white;
}

#fp-nav ul li,
.fp-slidesNav ul li,
#fp-nav ul li a span,
.fp-slidesNav ul li a span {
 width: 10px;
 height: 10px;
 margin: 0 auto;
}

.bgmove {
 scale: 1.06;
 transform: translate(10px, 10px);
 transition: 8s;
}

header {
 position: fixed;
 z-index: 99;
 width: 100%;
 transition: 0.7s;

 > * {
  color: white;
  letter-spacing: 0;
 }

 .header_wrap {
  display: flex;
  padding-inline: 5%;
  width: 100%;
  height: 90px;
  align-items: center;
  position: relative;
  justify-content: space-between;
  background: transparent;

  .nav {
   display: flex;
   align-items: center;
   gap: 1rem;

   ul {
    display: flex;
    color: white;
    height: 22px;

    li {
     a {
      color: var(--wc);
      border-right: 1px solid var(--wc);
      padding-inline: 1rem;
      font-size: 1.125rem;
      font-family: var(--eu1945);
     }
    }
   }

   .ham {
    cursor: pointer;
   }

   .lang {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--wc);
    cursor: pointer;

    span {
     margin-top: 2px;
     font-weight: 300;
    }
   }

   summary {
    display: flex;
    align-items: center;
   }
  }
 }
}

.section {
 text-align: center;
 padding: 0;
 font-family: var(--eu1945);
 line-height: 1.5;
 letter-spacing: -0.15px;
}

#m1 {
 color: white;
 overflow: hidden;

 .swiper {
  width: 100%;
  height: 100%;
  position: relative;

  .swiper-slide {
   width: 100%;
   height: 100%;
   background: black;
   position: relative;
  }

  /* .swiper-slide:nth-of-type(1) {
            background: url(../1x/m1_bg.jpg) no-repeat center / cover;
        } */

  .swiper-slide:nth-of-type(2) {
   background: url(../1x/m1s2.jpg) no-repeat center / cover;
  }

  .swiper-slide:nth-of-type(3) {
   background: url(../1x/m1s3.jpg) no-repeat center / cover;
  }

  .vid {
   position: absolute;
   background-color: #111111;
   z-index: -1;
   width: 100%;

   video {
    width: 100%;
    height: 100%;
    display: block;
   }
  }
 }

 .fp-overflow {
  height: 100%;
  align-content: center;
 }

 .desc {
  position: relative;
  top: 48%;
  transform: translateY(-50%);
  animation: fadein 1.8s forwards;
  text-align: center;

  &::before {
   position: absolute;
   top: -60%;
   left: 50%;
   width: 0.5px;
   height: 45%;
   background: #fff;
   content: "";
   display: block;
   z-index: 0;
   opacity: 0.6;
  }

  span {
   font-family: "Poppins", sans-serif;
   letter-spacing: 0.4vw;
   font-size: 1.75rem;
   font-weight: 300;
   text-transform: uppercase;
  }

  h2 {
   margin-top: 0.85rem;
   font-size: 5.25rem;
   font-weight: normal;
   line-height: 1.25;
   letter-spacing: 0;
  }
 }

 .bot_line {
  position: absolute;
  bottom: 10%;
  left: 50%;
  width: 0.5px;
  height: 5.5vw;
  background: linear-gradient(rgba(255, 255, 255, 0.6) 70%, transparent 30%);
  content: "";
  display: block;
  z-index: 2;

  &::after {
   position: absolute;
   width: 3px;
   height: 50%;
   top: 50%;
   left: 50%;
   content: "";
   transform: translateX(-40%);
   display: block;
   opacity: 1;
   background: #fff;
   border-radius: 999px;
   animation: updown 1.5s infinite ease-in-out;
  }
 }
}

/* #m2.active {
    transform: translateY(0) scale(1) rotate(0.001deg);
}

#m2 {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    z-index: -1;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center 60%;
    background-size: cover;
    transition: transform 1.2s ease;
    transform: translateY(-100%) scale(0.85) rotate(0.001deg);
} */

#m2 {
 background: black;
 /* background: url(/1x/m2_bg.jpg) no-repeat center / cover; */
 color: white;
 text-align: left;
 position: relative;
 overflow: hidden;

 .bg {
  position: absolute;
  inset: 0 0 0 0;
  z-index: 0;
  background: url(../1x/m2_bg.jpg) no-repeat center / cover;
 }

 .fp-table {
  display: block;
  padding: 0;
  flex-direction: row;
 }

 .fp-overflow {
  height: 100%;
  align-content: center;
 }

 .flex_wrap {
  display: flex;
  height: 100%;
  align-items: center;

  .flex_left {
   flex: 1;
   width: 50%;
   padding-left: 10%;
   position: relative;

   span {
    font-size: 2rem;
   }

   h3 {
    font-size: 4rem;
    font-weight: normal;
    line-height: 1.25;
    margin-top: 0.3rem;
   }

   p {
    margin-block: 3.5rem 5.5rem;
    font-size: 1.25rem;
    font-weight: 300;
    letter-spacing: 0;
    font-family: "Pretendard Variable", sans-serif;
   }
  }

  .flex_right {
   position: relative;
   flex: 1;
   padding-top: 13%;
   width: 50%;
   display: flex;
   height: 100%;
   align-items: center;
   padding-left: 60px;

   &::before {
    position: absolute;
    left: 0;
    width: 50%;
    top: 0;
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    filter: brightness(1.18);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    height: 100dvh;
    content: "";
    display: block;
   }

   .desc {
    margin-bottom: 3rem;
    transition: 0.7s ease;
    opacity: 0;
    position: relative;

    h4 {
     font-size: 58px;
     font-weight: 600;
     position: relative;

     &::before {
      top: -1rem;
      display: block;
      content: "";
      left: 0;
      height: 2px;
      width: 5%;
      z-index: 1;
      background-color: white;
     }
    }

    p {
     font-size: 22px;
     position: relative;
     line-height: 1.25;
    }
   }

   .swiper-slide-active .desc {
    transition: all 1s;
    opacity: 1;
   }

   .m2_nav {
    position: absolute;
    display: inline-flex;
    top: 50%;
    z-index: 9;
    gap: 10px;
    width: auto;
    cursor: pointer;
    left: 39%;
   }
  }

  .more {
   display: inline-flex;
   align-items: center;
   position: relative;

   a {
    color: white;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-size: 14px;

    i {
     position: relative;
     margin-left: 1.5rem;
     display: inline-block;
     padding-bottom: 3px;
     left: 0;

     img {
      vertical-align: middle;
     }
    }

    .circle {
     aspect-ratio: 1;

     background: rgba(255, 255, 255, 0.1);
     width: 36px;
     display: inline-block;
     content: "";
     border-radius: 50%;
     margin-left: -1rem;
    }
   }
  }
 }
}

#m2 .swiper-slide > div img {
 display: block;
 border-radius: 12px;
}

#m3 {
 position: relative;
 width: 100%;
 height: 100dvh;

 .pro_modal {
  position: absolute;
  width: 100vw;
  height: 100dvh;
  top: 0;
  left: 0;
  z-index: 4;
  display: none;
  transition: 2s;
  z-index: 2;

  .modal_item {
   display: none;
   /* 기본적으로 숨겨둠 */
   position: absolute;
   inset: 0 0 0 0;
   width: 100%;
   height: 100%;
   opacity: 0;
   scale: 1.1;
  }

  .pro_1 {
   position: absolute;
   display: block;
   content: "";
   inset: 0 0 0 0;
   width: 100%;
   background: url(../1x/프리미엄_modal.jpg) no-repeat center / cover;
   height: 100%;
  }

  .pro_2 {
   position: absolute;
   display: block;
   content: "";
   inset: 0 0 0 0;
   width: 100%;
   background: url(../1x/바람햇살_modal.jpg) no-repeat center / cover;
   height: 100%;
  }

  .pro_3 {
   position: absolute;
   display: block;
   content: "";
   inset: 0 0 0 0;
   width: 100%;
   background: url(../1x/플레이버_modal.jpg) no-repeat center / cover;
   height: 100%;
  }

  .pro_4 {
   position: absolute;
   display: block;
   content: "";
   inset: 0 0 0 0;
   width: 100%;
   background: url(../1x/후리가케_modal.jpg) no-repeat center / cover;
   height: 100%;
  }

  .pro_5 {
   position: absolute;
   display: block;
   content: "";
   inset: 0 0 0 0;
   width: 100%;
   background: url(../1x/그라인더_modal.jpg) no-repeat center / cover;
   height: 100%;
  }

  .modal_desc {
   background-color: rgba(0, 0, 0, 0.7);
   height: 100%;
   margin: 0 auto;
   width: 30%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

   h4 {
    color: white;
    font-size: 3rem;
    font-weight: normal;
    margin-bottom: 1rem;
   }

   p {
    color: white;
    font-family: "Pretendard variable", sans-serif;
    font-size: 1.375rem;
    font-weight: 300;
    line-height: 1.25;
   }

   .more {
    display: inline-flex;
    align-items: center;
    position: relative;
    margin-top: 10%;

    a {
     color: white;
     display: flex;
     align-items: center;
     text-transform: uppercase;
     font-weight: normal;
     font-size: 14px;

     i {
      position: relative;
      margin-left: 1.5rem;
      display: inline-block;
      padding-bottom: 3px;
      left: 0;

      img {
       vertical-align: middle;
      }
     }

     .circle {
      aspect-ratio: 1;

      background: rgba(255, 255, 255, 0.1);
      width: 36px;
      display: inline-block;
      content: "";
      border-radius: 50%;
      margin-left: -1rem;
     }
    }
   }
  }
 }

 .desc {
  text-align: left;
  position: absolute;
  top: 15%;
  left: 10%;
  margin-left: 3%;
  overflow: hidden;

  span {
   font-size: 2rem;
  }

  h3 {
   font-size: 4rem;
   font-weight: normal;
   line-height: 1.37;
   margin-top: 0.3rem;
  }

  p {
   margin-block: 1.5rem;
   font-size: 1.25rem;
   font-weight: 300;
   letter-spacing: 0;
   font-family: "Pretendard Variable", sans-serif;
  }

  .more {
   display: inline-flex;
   align-items: center;
   position: relative;

   a {
    color: black;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-size: 14px;

    i {
     position: relative;
     margin-left: 1.5rem;
     display: inline-block;
     padding-bottom: 3px;
     left: 0;

     img {
      vertical-align: middle;
     }
    }

    .circle {
     aspect-ratio: 1;

     background: rgba(230, 230, 230, 1);
     width: 36px;
     display: inline-block;
     content: "";
     border-radius: 50%;
     margin-left: -1rem;
    }
   }
  }
 }

 .pro_thumb {
  position: absolute;
  width: 100%;
  bottom: 8%;
  padding-inline: 8%;

  .m3_swiper .swiper-wrapper {
   align-items: flex-end;
  }

  .m3_swiper .swiper-slide {
   position: relative;
   display: flex;
   flex-direction: column;
   overflow: hidden;
   cursor: pointer;

   &:hover .pro_desc p {
    height: 50px;
    opacity: 1;
    transition: 0.5s;
   }

   .pro_item {
    position: relative;
    top: 0;
   }

   &::before {
    background-color: #f2f2f2;
    height: 280px;
    position: absolute;
    bottom: 0;
    width: 100%;
    content: "";
    z-index: -1;
    display: block;
    transition: 0.5s;
   }

   .pro_desc {
    padding: 20px;
    padding-top: 0;

    h4 {
     font-size: 28px;
     font-weight: normal;
     letter-spacing: -0.25px;
     color: #111111;
     text-align: center;
    }

    p {
     margin-top: 10px;
     line-height: 1.25;
     font-weight: 300;
     font-size: var(--f20);
     height: 0;
     opacity: 0;
     transition: 0.5s;
     color: #999999;
     font-family: "Pretendard Variable", sans-serif;
    }
   }
  }
 }

 .thumb_prev {
  width: 40px;
  height: 40px;
  background: url(../1x/m3_prev.png) no-repeat center;
  background-size: cover;
  position: absolute;
  left: 7%;
  top: 76%;
  z-index: 1;

  &::after {
   content: none;
  }
 }

 .thumb_next {
  width: 40px;
  height: 40px;
  background: url(../1x/m3_next.png) no-repeat center;
  background-size: cover;
  position: absolute;
  right: 7%;
  top: 76%;
  z-index: 1;
  &::after {
   content: none;
  }
 }
}

#m3 .m3_logo {
 display: inline-block;
 position: absolute;
 right: 10%;
 top: 5%;
}

#m3 .m3_logo img {
 max-width: 88%;
 opacity: 0.23;
 filter: grayscale(1);
 z-index: -1;
}

#m4 {
 background: url(../1x/m4_bg.jpg) no-repeat center / cover;

 .desc {
  color: white;
  text-align: center;

  span {
   font-size: 2rem;
  }

  h3 {
   font-size: 4rem;
   font-weight: normal;
   line-height: 1.25;
   margin-top: 0.3rem;
  }

  p {
   margin-block: 3.5rem 5.5rem;
   font-size: 1.25rem;
   font-weight: 300;
   letter-spacing: 0;
   font-family: "Pretendard Variable", sans-serif;
  }
 }

 .grid_wrap {
  display: grid;
  gap: 25px;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  padding-inline: 10%;
  margin-block: 3.35rem;

  .grid_item {
   align-content: center;
   border: 1px solid #fff;
   height: 220px;
   transition: 0.2s;

   &:hover {
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(14px);
    transition: 2s;
   }

   h4 {
    margin-top: 1rem;
    color: white;
    font-size: 26px;
    font-weight: normal;
    line-height: 1.25;
   }
  }
 }

 .more {
  display: inline-flex;
  align-items: center;
  position: relative;

  a {
   color: white;
   display: flex;
   align-items: center;
   text-transform: uppercase;
   font-weight: normal;
   font-size: 14px;

   i {
    position: relative;
    margin-left: 1.5rem;
    display: inline-block;
    padding-bottom: 3px;
    left: 0;

    img {
     vertical-align: middle;
    }
   }

   .circle {
    aspect-ratio: 1;

    background: rgba(255, 255, 255, 0.1);
    width: 36px;
    display: inline-block;
    content: "";
    border-radius: 50%;
    margin-left: -1rem;
   }
  }
 }
}

.m5 {
 width: 100%;

 .fp-overflow {
  height: 100%;
  display: block;
  overflow: auto;
  flex-direction: column;
  width: 100%;
 }

 .flex_wrap {
  display: flex;
  gap: 40px;
  max-height: 70vh;
  width: 100%;
  height: 100%;
  align-items: center;

  .flex_left {
   width: 100%;
   margin-left: 10%;

   .desc {
    display: flex;
    flex-direction: column;
    text-align: left;

    span {
     font-size: 2rem;
     margin-top: 0.75rem;
    }

    h3 {
     font-size: 4rem;
     font-weight: normal;
     line-height: 1.37;
     letter-spacing: -0.55px;
    }

    .more {
     display: inline-flex;
     align-items: center;
     position: relative;

     margin-top: 12%;
     font-size: 14px;

     a {
      color: rgb(0, 0, 0);
      display: flex;
      align-items: center;
      text-transform: uppercase;
      font-weight: normal;

      i {
       position: relative;
       margin-left: 1.5rem;
       display: inline-block;
       padding-bottom: 3px;
       left: 0;

       img {
        vertical-align: middle;
       }
      }

      .circle {
       aspect-ratio: 1;

       background: rgba(230, 230, 230, 1);
       width: 36px;
       display: inline-block;
       content: "";
       border-radius: 50%;
       margin-left: -1rem;
      }
     }
    }
   }
  }

  .flex_right {
   width: 60%;

   .m5_swiper {
    width: 100%;

    .swiper-wrapper {
     padding: 40px;

     .swiper-slide {
      background-color: white;
      align-content: center;
      box-shadow: 0px 3px 12px 5px rgba(0, 0, 0, 0.1);
      padding: 2rem;

      h4 {
       font-size: 1.55rem;
       color: black;
       font-weight: normal;
       margin-top: 1rem;
      }

      img {
       padding: 12px;
       border: 1px solid rgb(140, 140, 140);
      }
     }
    }
   }
  }
 }

 .m5_scetion_2 {
  display: flex;
  width: 100%;
  overflow: hidden;
  justify-content: center;

  .sub_sec:hover {
   filter: saturate(2) brightness(1.05);
   transition: 0.5s;
  }

  .sec2,
  .sec2 .desc * {
   color: white;
  }

  div {
   position: relative;

   & > img {
    height: 100%;
   }

   .desc {
    position: absolute;
    inset: 0 0 0 10%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: left;

    .d_title {
     display: inline-flex;
     align-items: baseline;
     gap: 2rem;
     margin-bottom: 1rem;

     h4 {
      font-size: 38px;
      font-weight: normal;
     }
    }

    p {
     font-family: "Pretendard variable", sans-serif;
     font-size: 16px;
     font-weight: 300;
     color: #1a1a1a;
     line-height: 1.35;

     span {
      font-weight: 500;
      display: inline-block;
      margin-right: 0.35rem;
     }
    }

    .more {
     display: inline-flex;
     align-items: center;
     position: relative;

     .sec2 {
      color: white;
     }

     a {
      color: rgb(0, 0, 0);
      display: flex;
      align-items: center;
      text-transform: uppercase;
      font-weight: normal;
      font-size: 14px;

      i {
       position: relative;
       margin-left: 1.5rem;
       display: inline-block;
       padding-bottom: 3px;
       left: 0;

       img {
        vertical-align: middle;
       }
      }

      .circle {
       aspect-ratio: 1;

       background: rgb(0, 0, 0, 0.3);
       width: 36px;
       display: inline-block;
       content: "";
       border-radius: 50%;
       margin-left: -1rem;
      }
     }
    }
   }
  }
 }
}

.footer {
 padding-block: 3rem;
 overflow: hidden;
 max-height: 40vh;
 background: #1a1a1a;
 width: 100%;
 font-family: "Pretendard variable", sans-serif;
 text-align: left;
 overflow: hidden;
 position: relative;

 .footer_wrap {
  display: flex;
  flex-direction: column;

  > div:not(.gotop) {
   padding: 0 10%;
  }

  .footer_top {
   display: flex;
   justify-content: space-between;
   align-items: baseline;

   .footer_link {
    ul {
     display: flex;
     gap: 2.6vw;

     li a {
      font-size: 18px;
      font-weight: 500;
      letter-spacing: 0.15px;
      color: white;
     }
    }
   }

   .footer_menu {
    ul {
     display: flex;
     gap: 2vw;

     li a {
      font-size: 15px;
      color: white;
     }
    }
   }
  }
 }

 hr {
  position: relative;
  border: none;
  background: #b2b2b2;
  height: 1px;
  margin-block: 1rem 2rem;
  display: block;
 }

 .gotop {
  position: absolute;
  transform: translateY(50%);
  right: 5%;
 }

 .footer_bot {
  display: flex;
  justify-content: space-between;
  width: 100%;

  .footer_info {
   ul {
    margin-top: 12px;

    li {
     display: flex;
     color: white;
     font-weight: 300;
     gap: 6px;
     line-height: 1.6;

     span {
      font-weight: 500;
      text-transform: uppercase;
     }
    }
   }
  }

  .footer_nav {
  }
 }
}

.more:hover {
 i img {
  transform: translateX(8px);
  transition: 0.7s;
 }
}

/* sub page sp*/
.sub_wrap {
 max-width: 1640px;
 margin: 0 auto;
 width: 100%;
 padding: 190px 20px 0;
}

.sub_wrap .bread {
 display: flex;
 gap: 1rem;
 align-items: center;
 margin-bottom: 4rem;
}

.sub_wrap .bread img {
 display: block;
 margin-bottom: 2px;
}

.sub_wrap .bread p {
 color: black;
 font-size: 18px;
 font-weight: 300;
}

.sub_wrap .sub_title {
 font-family: var(--eu1945);
 margin-bottom: 4rem;
}

.sub_wrap .sub_title h2 {
 font-size: 4.5rem;
 font-weight: normal;
 font-family: inherit;
 line-height: 1.3;
}

.sub_wrap .sub_title p {
 font-size: 26px;
 font-weight: normal;
 font-family: inherit;
 letter-spacing: -0.8px;
}

/* responsive start */
@media screen and (max-width: 1281px) {
 #m1 .desc span {
  font-size: 24px;
 }

 #m1 .desc h2 {
  font-size: 72px;
 }

 #m2 .flex_wrap .flex_left span {
  font-size: 22px;
 }

 #m2 .flex_wrap .flex_left h3 {
  font-size: 2.5rem;
 }

 #m2 .flex_wrap .flex_left span p {
  margin-block: 3.5rem 4.5rem;
  font-size: 1.25rem;
 }

 #m2 .flex_wrap .flex_right .desc h4 {
  font-size: 2.5rem;
 }

 #m2 .flex_wrap .flex_right .desc p {
  font-size: 18px;
  line-height: 1.5;
 }

 #m2 .flex_wrap .flex_right .m2_nav {
  top: 47%;
  left: 55%;
  gap: 1rem;
 }

 #m2 .flex_wrap .flex_right::before {
  width: 70%;
 }

 #m3 .desc span {
  font-size: 22px;
 }

 #m3 .desc h3 {
  font-size: 2.5rem;
 }

 #m3 .desc p {
  font-size: 14px;
 }

 #m3 .pro_thumb .m3_swiper .swiper-slide::before {
  height: 225px;
 }

 #m3 .pro_thumb .m3_swiper .swiper-slide .pro_item img {
  max-width: 75%;
 }

 #m3 .pro_thumb .m3_swiper .swiper-slide .pro_desc h4 {
  font-size: 24px;
 }

 #m3 .pro_modal .modal_desc h4 {
  font-size: 2rem;
 }

 #m3 .pro_modal .modal_desc p {
  font-size: 1.2rem;
 }

 #m4 .desc {
  margin-top: 4rem;
 }

 #m4 .desc p {
  font-size: 22px;
 }

 #m4 .desc h3 {
  font-size: 2.5rem;
 }

 #m4 .desc h3 br {
  display: none;
 }

 #m4 .grid_wrap {
  margin-block: 2rem;
 }

 #m4 .grid_wrap .grid_item h4 {
  font-size: 24px;
 }

 .m5 .flex_wrap .flex_left .desc h3 {
  font-size: 2.5rem;
 }

 .m5 .flex_wrap .flex_left .desc span {
  font-size: 1.5rem;
 }

 .m5 .m5_scetion_2 {
  height: 30%;
 }

 .m5 .m5_scetion_2 div > img {
  width: 100%;
  object-fit: cover;
 }

 .m5 .m5_scetion_2 div.desc .d_title h4 {
  font-size: 30px;
 }
}

@media screen and (max-width: 1025px) {
 #m1 .desc h2 {
  font-size: 52px;
 }
 #m2 .flex_wrap .flex_left span {
  font-size: 20px;
 }

 #m2 .flex_wrap .flex_left h3 {
  font-size: 36px;
 }

 #m2 .flex_wrap .flex_right .desc h4 {
  font-size: 36px;
 }

 #m2 .flex_wrap .flex_left p {
  margin-block: 3rem 4rem;
 }

 #m2 .flex_wrap .flex_right .m2_nav {
  top: 40%;
 }

 #m3 .desc span {
  font-size: 20px;
 }

 #m3 .desc h3 {
  font-size: 36px;
 }

 #m3 .pro_thumb .m3_swiper .swiper-slide .pro_item img {
  max-width: 55%;
 }

 #m4 .desc span {
  font-size: 20px;
 }

 #m4 .desc h3 {
  font-size: 36px;
 }

 #m4 .grid_wrap .grid_item h4 {
  font-size: 22px;
 }

 .m5 .flex_wrap .flex_left .desc h3 {
  font-size: 36px;
 }

 .m5 .flex_wrap .flex_left .desc span {
  font-size: 20px;
 }

 .m5 .flex_wrap .flex_right .m5_swiper .swiper-wrapper .swiper-slide h4 {
  font-size: 20px;
 }
}

@media screen and (max-width: 900px) {
 #m1 .swiper .vid {
  width: unset;
  height: 100%;
 }

 #m1 .swiper .vid video {
  width: unset;
 }

 #m2 .flex_wrap .flex_right::before {
  width: 100%;
 }

 #m2 .flex_wrap .flex_right .m2_nav {
  top: 43%;
  left: 67%;
  gap: 2rem;
 }

 #m3 .pro_thumb .m3_swiper .swiper-slide .pro_item img {
  max-width: 100%;
 }

 #m3 .pro_modal .modal_desc {
  width: 60%;
 }

 .m5 .flex_wrap {
  gap: 1rem;
 }

 .m5 .m5_scetion_2 {
  height: 40%;
 }

 .footer .footer_wrap > div:not(.gotop) {
  padding: 0 5%;
 }

 .footer .footer_wrap .footer_top {
  justify-content: start;
  gap: 7rem;
 }
}

@media screen and (max-width: 801px) {
 header.open .depth_menu {
  height: 40vh;
 }

 #m1 .desc span {
  font-size: 20px;
 }

 #m1 .desc h2 {
  font-size: 48px;
 }

 #m2 .flex_wrap {
  flex-direction: column;
 }

 #m2 .flex_wrap .flex_left {
  width: 100%;
  padding-block: 15% 0;
  padding-left: 60px;
  flex: unset;
 }

 #m2 .flex_wrap .flex_right {
  width: 100%;
  padding-top: 0;
  flex: unset;
 }

 #m2 .flex_wrap .flex_right::before {
  height: 60dvh;
 }

 #m2 .flex_wrap .flex_right .m2_nav {
  top: 30%;
  left: 45%;
 }

 #m3 {
  height: 70dvh;
 }

 .m5 .fp-overflow {
  overflow: auto;
 }

 .m5 .flex_wrap {
  gap: 0;
 }

 .m5 .flex_wrap {
  max-height: 65vh;
 }

 .m5 .flex_wrap .flex_left .desc {
  width: 100%;
  padding-block: 8% 0;
 }

 .m5 .flex_wrap .flex_left .desc .more {
  margin-top: 7%;
 }

 .m5 .flex_wrap .flex_right {
  width: 50%;
 }

 .m5 .m5_scetion_2 div .desc br {
  display: none;
 }

 .footer .footer_wrap > div:not(.gotop) {
  padding: 0 24px;
 }

 .footer .footer_wrap .footer_top {
  gap: 5rem;
 }

 .footer .gotop {
  right: 2%;
  top: 0;
 }
}

@media screen and (max-width: 769px) {
 #m2 .flex_wrap .flex_right .m2_nav {
  top: 25%;
  left: 47%;
 }

 #m3 .pro_thumb {
  padding-inline: 3%;
 }

 #m3 .pro_thumb .m3_swiper .swiper-slide .pro_item img {
  max-width: 70%;
 }

 #m3 .pro_modal .modal_desc {
  width: 70%;
 }

 #m3 .thumb_prev {
  left: 2%;
  top: 50%;
 }

 #m3 .thumb_next {
  right: 2%;
  top: 50%;
 }
}

@media screen and (max-width: 430px) {
 header .header_wrap {
  height: 60px;
 }

 header .header_wrap .logo img {
  max-width: 75%;
 }

 header.open .depth_menu {
  text-align: center;
  height: 55vh;
 }

 .ham .line {
  width: 24px;
 }

 header .header_wrap .nav ul {
  display: none;
 }

 .depth_menu .depth {
  padding-inline: 0;
  gap: 0;
 }

 .depth_menu .depth > li {
  padding-inline: 1rem;
  padding: 0 5px;
 }

 .depth_menu .depth li > ul li a {
  font-size: 14px;
 }

 .depth_menu .depth li > ul li {
  padding-block: 0.5rem;
 }

 .depth_menu .depth li h2 {
  font-size: 1rem;
 }

 #m1 .desc span {
  font-size: 16px;
 }

 #m1 .desc h2 {
  font-size: 28px;
  padding-inline: 20px;
 }

 #m1 .desc h2 br{
  display: none;
 }

 #m2 .flex_wrap .flex_left {
  padding-block: 13% 0;
  padding-left: 46px;
 }

 #m2 .flex_wrap .flex_left span {
  font-size: 16px;
 }

 #m2 .flex_wrap .flex_left h3 {
  font-size: 32px;
 }

 #m2 .flex_wrap .flex_left p {
  font-size: 14px;
  margin-block: 1.2rem;
 }

 #m2 .flex_wrap .more {
  margin-bottom: 2rem;
 }

 #m2 .flex_wrap .flex_right {
  padding-left: 46px;
 }

 #m2 .flex_wrap .flex_right::before {
  height: 53dvh;
 }

 #m2 .flex_wrap .flex_right .desc h4 {
  font-size: 28px;
 }

 #m2 .flex_wrap .flex_right .m2_nav {
  left: 70%;
 }

 #m2 .flex_wrap .flex_right .swiper-slide-active .desc {
  padding-top: 1.5rem;
  margin-bottom: 1rem;
 }

 #m2 .flex_wrap .flex_right .swiper-slide img {
  max-width: 80%;
 }

 #m2 .flex_wrap .flex_right .desc h4 {
  font-size: 32px;
 }

 #m3 {
  height: 100dvh;
 }

 #m3 .desc {
  margin-left: 0;
  top: 10%;
  margin-right: 10%;
 }

 #m3 .desc p {
  margin-block: 1.2rem;
 }

 #m3 .desc p br {
  display: none;
 }

 #m3 .pro_thumb .m3_swiper .swiper-slide .pro_desc h4 {
  font-size: 20px;
 }

 #m3 .desc span {
  font-size: 16px;
 }

 #m3 .desc h3 {
  font-size: 32px;
 }

 #m3 .pro_modal .modal_desc img {
  max-width: 90%;
 }

 #m3 .pro_modal .modal_desc h4 {
  font-size: 24px;
  margin-bottom: 0.7rem;
 }

 #m3 .pro_modal .modal_desc p {
  font-size: 16px;
 }

 #m3 .pro_thumb {
  bottom: 3%;
 }

 #m3 .thumb_prev {
  left: 8%;
 }

 #m3 .thumb_next {
  right: 8%;
 }

 #m4 .desc {
  margin-top: 5rem;
 }

 #m4 .desc h3 {
  font-size: 32px;
 }

 #m4 .desc h3 br {
  display: block;
 }

 #m4 .grid_wrap .grid_item h4 {
  font-size: 16px;
 }

 #m4 .more {
  margin-bottom: 2rem;
 }

 .m5 {
  height: auto;
  overflow: hidden;
 }

 .m5 .flex_wrap {
  flex-direction: column;
  max-height: 100vh;
 }

 .m5 .flex_wrap .flex_left {
  margin-left: 0%;
  width: 80%;
  overflow: hidden;
 }

 .m5 .flex_wrap .flex_right {
  width: 100%;
 }

 .m5 .flex_wrap .flex_right .m5_swiper .swiper-wrapper {
  padding: 0;
 }

 .m5 .flex_wrap .flex_right .m5_swiper .swiper-wrapper .swiper-slide {
  padding: 1rem;
 }

 .m5 .flex_wrap .flex_right .m5_swiper .swiper-wrapper .swiper-slide {
  padding: 0;
  padding-block: 1rem;
 }

 .m5 .flex_wrap .flex_right .m5_swiper .swiper-wrapper .swiper-slide img {
  width: 40%;
 }

 .m5 .flex_wrap .flex_right .m5_swiper .swiper-wrapper .swiper-slide h4 {
  font-size: 18px;
 }

 .m5 .flex_wrap .flex_left .desc {
  padding-block: 15% 3%;
 }

 .m5 .flex_wrap .flex_left .desc h3 {
  font-size: 26px;
 }

 .m5 .flex_wrap .flex_left .desc span {
  font-size: 18px;
 }

 .m5 .m5_scetion_2 {
  flex-direction: column;
  height: 30%;
  overflow: hidden;
 }

 .m5 .m5_scetion_2 .sub_sec {
  height: 200px;
 }

 .m5 .m5_scetion_2 div > img {
  display: block;
  height: 100%;
 }

 .m5 .m5_scetion_2 div.desc .d_title h4 {
  font-size: 22px;
 }

 .m5 .m5_scetion_2 div .desc {
  inset: 0 0 0 10%;
 }

 .m5 .m5_scetion_2 div.desc p {
  font-size: 14px;
  padding-right: 11%;
 }

 .footer {
  max-height: 60vh;
  padding-block: 2rem;
 }

 .footer .footer_wrap > div:not(.gotop) {
  padding: 0 8%;
 }

 .footer .footer_bot .footer_info .info_desc li:nth-child(3) {
  flex-direction: column;
  padding-top: 1.5rem;
 }

 .footer .footer_wrap .footer_top {
  display: flex;
  flex-direction: column;
  gap: 2rem;
 }

 .footer .footer_wrap .footer_top .footer_menu ul {
  gap: 1.5rem;
 }

 .footer .footer_wrap .footer_top .footer_menu ul li a {
  font-size: 14px;
 }

 .footer .footer_wrap .footer_top .footer_link {
  gap: 3rem;
 }

 .footer .footer_wrap .footer_top .footer_link ul li a {
  font-size: 15px;
 }

 .footer .footer_wrap .footer_top .footer_link ul {
  gap: 2rem;
 }

 .footer .footer_bot .footer_info img {
  width: 115px;
 }

 .footer .footer_bot .footer_info ul {
  margin-top: 5px;
  font-size: 14px;
 }
}

@media screen and (max-width: 391px) {
 #m1 .desc span {
  font-size: 14px;
 }

 #m1 .desc h2 {
  font-size: 30px;
 }

 #m2 .flex_wrap .flex_left h3 {
  font-size: 24px;
 }

 #m2 .flex_wrap .flex_right .desc h4 {
  font-size: 30px;
 }

 #m2 .flex_wrap .flex_right .desc p {
  font-size: 16px;
 }

 #m2 .flex_wrap .flex_right .m2_nav {
  left: 67%;
 }

 #m3 .desc h3 {
  font-size: 26px;
  margin-top: 0;
 }

 #m4 .grid_wrap {
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
 }

 #m4 .desc h3 {
  font-size: 26px;
 }

 .m5 .flex_wrap .flex_left {
  margin-left: 0;
  width: 75%;
 }

 .m5 .m5_scetion_2 div.desc .d_title h4 {
  font-size: 1.25rem;
 }

 .m5 .m5_scetion_2 div.desc .d_title {
  display: block;
 }
}

@media screen and (max-width: 321px) {
 header .header_wrap .logo img {
  max-width: 70%;
 }
 .depth_menu .depth li h2 {
  margin-block: 1.2rem;
 }
 header.open .depth_menu {
  height: 100vh;
 }

 #m1 .desc span {
  font-size: 12px;
 }

 #m1 .desc h2 {
  font-size: 24px;
 }

 #m2 .flex_wrap .flex_right::before {
  height: 76dvh;
 }

 #m2 .flex_wrap .flex_left h3 {
  font-size: 26px;
 }

 #m2 .flex_wrap .flex_right .desc h4 {
  font-size: 26px;
 }

 #m2 .flex_wrap .flex_right .desc p {
  font-size: 14px;
  line-height: 1.6;
 }

 #m2 .flex_wrap .flex_right .m2_nav {
  left: 64%;
 }

 #m3 .desc h3 {
  font-size: 26px;
 }

 #m3 .desc p {
  font-size: 14px;
 }

 #m3 .pro_thumb .m3_swiper .swiper-slide .pro_desc h4 {
  font-size: 20px;
 }

 #m3 .pro_thumb .m3_swiper .swiper-slide::before {
  height: 165px;
 }

 #m4 .desc span {
  font-size: 18px;
 }

 #m4 .desc h3 {
  font-size: 26px;
 }

 #m4 .grid_wrap {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
 }

 #m4 .grid_wrap .grid_item h4 {
  font-size: 18px;
 }

 .m5 .flex_wrap .flex_left .desc h3 {
  font-size: 26px;
 }

 .m5 .flex_wrap .flex_left .desc span {
  font-size: 18px;
 }
}

/* responsive ends */

@keyframes fadein {
 0% {
  opacity: 0;
  scale: 1.1;
 }

 100% {
  opacity: 1;
  scale: 1;
 }
}

@keyframes updown {
 0% {
  top: 30%;
 }

 100% {
  top: 50%;
 }
}