@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");
@import url("https://webfontworld.github.io/sunn/SUIT.css");

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  position: relative;
}


ul,
li,
ol {
  list-style: none;
}

button{
  font-family: "Noto Sans KR", sans-serif;
  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  cursor: pointer;}
section {
  overflow: hidden;
  background-color: white;
  box-sizing: border-box;
  width: 100%;
  height: auto;
}
span {
  font-weight: 800;
}


/* 날개배너 */
.pop a:link {
  color: white; text-decoration: none;}
.pop a:visited {
  color: white; text-decoration: none;}
.pop{
  font-weight: 700;
  font-size: 14px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: fixed;
  right: 0; top: 140px;
  z-index: 400;
  width: 100px;
  height: 360px;
  gap: 12px;
  background-color: #242530;
}
.pop .pop-1{
  gap: 5px;
  padding: 15px 0 ;
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  width: 70px;
  cursor: pointer;
}
.pop .line{
  display: flex; flex-direction: column;
  justify-content: center; align-items: center;
  width: 60px; height: 2px;
  background-color: #9f9f9f;
}
@media (max-width: 480px){
  .pop{
    transform-origin: 100% 0 ;
    scale: 0.8;}
}




/* 11111 */

.section1 {
  margin-top: 0px;
  z-index: 100;
  height: 800px;
  background-color: #3e02ff;
  background-position: center;
  background-size: cover;
  background-blend-mode: color-burn;
}
.section1 video{
  object-fit: cover;
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 100%; width: 100%;
  justify-content: center; align-items: center;
  }

  @media (max-width: 768px){
    .section1{height: 500px;}
  }
  @media (max-width: 480px){
    .section1{height: 320px;}
  }


/* 22222 */
.section2 {
  width: 100%; height: 730px;
}
.section2 .ttox {
  width: 100%;
  height: auto;
  display: flex; justify-content: center; align-items: center;
  flex-direction: column; padding-top: 90px;
}
.section2 .ttox h5{
  font-size: 20px;
  font-weight: 300;
}
.section2 .ttox h2{
  color: #0c0f81;
  font-size: 48PX;
  font-weight: 500;
}
.section2 .ttox h6{
  text-align: center;
  font-size: 16px;
  font-weight: 400;
}
.section2 .pcontainer{
  width: 1100px;
  height: 340px;
  position: absolute;
  bottom: 100px;
  left: 50%; 
  transform: translate(-50%);
}
.section2 .place {
  overflow: hidden;
  width: 1100px;
  height: 340px;
  position: absolute;
  left: 50%; 
  transform: translate(-50%);
}

.section2 .place .pbox {
  padding: 0 10px;
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  flex-direction: column;
  width: 100%;
  justify-content: center;
  align-items: center;
}
.section2 .pbox .pcont1{
  cursor: pointer;
  background-color: #c3c3cd;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 300px;
}
.section2 .pbox .pcont1 img{
  width: 100%;
  height: 300px;}
.section2 .pbox .pcont1 .pp{
  color: white;
  display: flex; justify-content: center;
  align-items: center;
  font-size: 16px ;
  font-weight: 400;
  width: 100%; height: 40px;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.8);
  bottom: 0;
}
.section2 .pbox .pcont2{
  padding-top: 5px;
  font-size: 16px;
  font-weight: 400;}



.swiper-button-lock{display: block;}
.swiper-button-next {
  cursor: pointer;
  color: #e0e0e0;
  right: -70px;
  width: 38px;
  height: 38px;
  border-radius: 1.5rem;
  color: #4b4b4b;
  background-color: none;
  border: 1px solid #e0e0e0;
  opacity: 1;
}
.swiper-button-next:after, .swiper-button-prev:after{
  color: #e0e0e0;
  font-size: 10px;
  
}
.swiper-button-prev {
  cursor: pointer;
  color: #e0e0e0;
  left: -70px;
  width: 38px;
  height: 38px;
  border-radius: 1.5rem;
  color: #4b4b4b;
  background-color: none;
  border: 1px solid #e0e0e0;
  opacity: 1;
}


  @media (max-width: 768px) {
  .swiper-button-next, .swiper-button-prev {
    display: none;}
  .section2 .place {
    width: 700px;}

  .section2 .pbox .pcont1 img{
    object-fit: cover;
    width: 100%;
    height: 300px;}}

    @media (max-width: 480px){
      .section2 .pbox .pcont1 img{
        object-fit: cover;
        width: 100%;
        height: 300px;}
      .section2 {
        width: 100%; height: 700px;
      }
      .section2 .place {
        width: 350px;}
      .section2 .ttox{
        padding-top: 70px;
        left: 50%;
        transform: translate(-50%);
        width: 80%;}
      .section2 .ttox h5{
        padding-bottom: 10px;
        font-size: 15px;
        font-weight: 400;
      }
      .section2 .ttox h2{
        color: #0c0f81;
        font-size: 35PX;
        padding-bottom: 15px;
        font-weight: 500;
      }
      .section2 .ttox h6{
        text-align: center;
        font-size: 12px;
        font-weight: 500;
        padding-bottom: 30px;
      }
      .section2 .pcontainer{
        bottom: 70px;
      }
      }


/* 33333 */
.section3{
  width: 100%; height: 850px;}
.section3 video{
  object-fit: cover;
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 100%; width: 100%;
  justify-content: center; align-items: center;
  }
.section3 .text{
  text-shadow: 0 0 10px black;
  position: absolute; 
  z-index: 30;
  left: 20%; top: 130px;
  color: #fff;}
.section3 h2{
  padding-bottom: 20px;
  font-size: 48px;
  font-weight: 500;
}
.section3 h6{
  padding-bottom: 50px;
  font-size: 16px;
  font-weight: 400;
}
.section3 button{
  font-weight: 400;
  height: 38px;
  width: 120px;
  border-radius: 20px;
  border: 1px solid white;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
}
@media (max-width: 480px){
  .section3{height: 600px;}
  .section3 .text{
    left: 7%; top:100px
  }
  .section3 h2{
    padding-bottom: 10px;
    font-size: 40px;
    font-weight: 500;
  }
  .section3 h6{
    padding-bottom: 50px;
    font-size: 12.5px;
    font-weight: 400;
    padding-bottom: 30px;
  }
}



/* 44444 */
.section4{
  display: flex;
  background-color: #f0f0f3;
  width: 100%; height: 760px;}
.section4 .text{
  position: absolute; 
  z-index: 30;
  left: 20%; top: 30%;
  color: black;}
.section4 h2{
  padding-bottom: 20px;
  font-size: 48px;
  font-weight: 500;
}
.section4 h6{ 
  padding-bottom: 50px;
  font-size: 16px;
  font-weight: 400;
}
.section4 button{
  height: 38px;
  width: 120px;
  border-radius: 20px;
  border: 1px solid #202020;
  background-color: white;
  color: #202020;
  font-weight: bold;
}

.section4 .tea{
  width: 100%; height: 100%;
}

.section4 .part2{
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.section4 .part2 img{
  width: 100%; height: 100%;
}
.section4 .part1 .t1{height: 760px;}
.section4 .part1 .t2{position: absolute; top: 100%;left: 0; height: 760px;}

.section4 .part1 .tcontt{
  width: 100%;
  height: 760px;
  animation: aa 10s infinite linear;
}
@keyframes aa{
    0%{top: 0;}
    100%{top: -100%;}
}
#mtimg {
  transition: transform 2s ease;
  width: 100%; 
  height: 100%;
  object-fit: cover; 
}

@media (max-width: 768px){
  .section4 .part2{
    display: none;
  }
}
@media (max-width: 480px){
  .section4 .text{
    left: 7%;}
  .section4 h2{
    padding-bottom: 10px;
    font-size: 40px;
    font-weight: 500;
  }
  .section4 h6{
    padding-bottom: 50px;
    font-size: 12.5px;
    font-weight: 500;
    padding-bottom: 30px;
  }
}

/* 555555 */

.section5{
  width: 100%;
  height: 430px;
  display: flex;
  background-color: #282a75;
}
.section5 .sec1{
  width: 30%;
  position: absolute;
  top: 50%;
  transform: translate(10%, -50%);}
.section5 .sec2{
  text-align: center;
  color: white;
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);}
.section5 .sec3{
  width: 30%;
  position: absolute;
  bottom: -20px; 
  right: -20px;}

.section5 .sec2 button{
  line-height: 83px;
  font-size: 16px; 
  font-weight: 600; 
  color: white;
  width: 350px; height: 83px;
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 70px;
  border: 1px solid white;
  box-shadow: inset  5px 5px 5px rgba(0, 0, 0, 0.4);
}
.section5 .sec2 button::after{
  content: '';
  color: #ffffff;
  display: inline-block;
  background-color: white;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 50%;
  margin-left: 10px;
  margin-bottom: -17px;
}

.section5 .sec2 button::before{
  position: absolute;
  right: 70px; 
  top: 50%; 
  content: '';
  width: 7px;
  height: 7px;
  border-top: 2px solid #282a75;
  border-right: 2px solid #282a75; 
  transform: rotate(45deg);
}

.section5 .sec2 h2{
  text-shadow: 0 0 10px black;
  padding-bottom: 5px;
  font-size: 48px; font-weight: 400;}
.section5 .sec2 h5{
  font-size: 16px; font-weight: 300; padding-bottom: 35px;}



  @media (max-width: 768px){
    .section5 .sec1{
      opacity: 0.5;
      width:0%;
      position: absolute;
      scale: 90%;
      top: 30%;
      transform: translate(10%, -50%);}
    .section5 .sec2{
      text-align: center;
      color: white;
      width: 470px;
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);}
    .section5 .sec2 h5{font-weight: 400;}
    .section5 .sec3{
      opacity: 0.5;
      width: 30%;
      scale: 90%;
      position: absolute;
      bottom: -100px; 
      right: 30px;}}

  @media (max-width: 480px){
    .section5 .sec1{
      opacity: 0.5;
      width:0%;
      position: absolute;
      scale: 90%;
      top: 10%;
      transform: translate(10%, -50%);}
    .section5 .sec2{
      text-align: center;
      color: white;
      width: 400px;
      position: absolute;
      left: 50%; top: 50%;
      transform: translate(-50%, -50%);}
    .section5 .sec2 h5{font-size: 12px;}
    .section5 .sec2 h2{font-size: 40px;}
    .section5 .sec2 button{
      line-height: 70px;
      font-size: 16px; 
      font-weight: 600; 
      color: white;
      width: 300px; height:70px;
      background-color: rgba(255, 255, 255, 0.2);
      border-radius: 70px;
      border: 1px solid white;
      box-shadow: inset  5px 5px 5px rgba(0, 0, 0, 0.4);
    }
    .section5 .sec2 button::after{
      content: '';
      color: #ffffff;
      display: inline-block;
      background-color: white;
      width: 30px;
      height: 30px;
      text-align: center;
      border-radius: 50%;
      margin-left: 10px;
      margin-bottom: -10px;
    }
    
    .section5 .sec2 button::before{
      position: absolute;
      right: 45px; 
      top: 49%; 
      content: '';
      width: 7px;
      height: 7px;
      border-top: 2px solid #282a75;
      border-right: 2px solid #282a75; 
      transform: rotate(45deg);
    }
    }