/* 메인 페이지 */
html {
  scroll-behavior: smooth;
}
.main-bg{
  background: #D0E3F0 url(/asset/img/main/bg_no01.png)no-repeat center center /cover;
}
/* main section01 */
.main-sec01 .sec-cont{
  padding: 15.625vw 0 13.021vw;
  position: relative;
}
.main-sec01 .sec-cont:before{
  content: '';
  width: 100%;
  height: 49.375vw;
  position: absolute;
  left: 0;
  bottom: 5.469vw;
  background: url(/asset/img/main/mainbg01.png)no-repeat center center /cover;
  opacity: 0;
  transform: translateY(15vw);
  transition: 5s;
  z-index: 0;
  pointer-events: none;
}
.main-sec01.in-view .sec-cont:before{
  opacity: 1;
  transform: translateY(0);
}
.main-sec01 .video-box{
  width: 60.521vw;
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.main-sec01 .video-box .video{
  width: 100%;
  aspect-ratio: 16/9;
  border-radius: 1.042vw;
  overflow: hidden;
}

.main-sec01 .tit-box .tag{
  background-color: #075388;
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 0.6511vw 1.302vw;
  border-radius: 0.521vw;
}

@keyframes balloon01 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-3.646vw); 
    }
    100% {
        transform: translateY(0);
    }
}
@keyframes balloon02 {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(4.167vw); 
    }
    100% {
        transform: translateY(0);
    }
}

.main-sec01 .balloon{
  position: absolute;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
.main-sec01 .balloon01{
  top: -9.063vw;
  left: calc(100% + 4.688vw);
  width: 6.823vw;
  aspect-ratio: 1/1.397;
  background-image: url(/asset/img/main/main_con01_ball01.png);
  animation: balloon01 5s ease-in-out infinite;

}
.main-sec01 .balloon02{
  bottom: 9.115vw;
  right: calc(100% + 6.042vw);
  width: 7.604vw;
  aspect-ratio: 1/1.39;
  background-image: url(/asset/img/main/main_con01_ball02.png);
  animation: balloon02 6s ease-in-out infinite;

}


/* main section02 */
.main-sec02{
  position: relative;
}
.main-sec02 .water-cont{
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 100%;
}

.main-sec02 .water-cont{
    position: absolute;
    bottom: 100%; /* 파도를 아래쪽에 배치 */
    left: 0;
    width: 100%;
    /* water-cont 자체의 높이를 설정하거나, 자식 요소가 결정하게 둡니다. */
    height: 300px; 
}
.waves {
  position: absolute;
  bottom: 100%;
  width: 100%;
  height: 200px; /* 원하는 높이로 변경 */
  overflow: hidden;
}

/* 공통 파도 */
.wave {
  position: absolute;
  bottom: -0.052vw;
  width: 200%;
  height: 5.208vw;
  background-repeat: repeat-x;
  background-size: 50% 100%;  
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

/* 각 파도 이미지 */
.wave1 { 
  background-image: url(/asset/img/main/main_water01.png);
  animation: move1 12s linear infinite;
  z-index: 4;
}
.wave2 { 
  background-image: url(/asset/img/main/main_water03.png);
  animation: move2 10s linear infinite, up-down 5s ease-in-out infinite;
  opacity: .7;
  z-index: 3;
}
.wave3 { 
  background-image: url(/asset/img/main/main_water03.png);
  animation: move1 7s linear infinite, up-down 7s ease-in-out infinite;
  opacity: .5;
  z-index: 2;
}
.wave4 { 
  background-image: url(/asset/img/main/main_water03.png);
  animation: move2 8s linear infinite, up-down 7s ease-in-out infinite;
  opacity: .3;
  z-index: 1;
}

/* 움직임 keyframes */
@keyframes move1 {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
@keyframes move2 {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes up-down {
    0%, 100% {
        margin-bottom: 0; /* 시작과 끝은 원래 위치 */
    }
    50% {
        /* 각 레이어마다 다른 높이로 움직이게 설정 */
        margin-bottom: -1vw; 
    }
}




.main-sec02 .sec-cont{
  padding: 9.375vw 0 5.208vw;
  position: relative;
}
.main-sec02 .sec-cont:before{
  content: '';
  position: absolute;
  width: 100%;
  height: 27.031vw;
  left: 0;
  top: 5.469vw;
  z-index: 0;
  pointer-events: none;
  background: url(/asset/img/main/mainbg02.png)no-repeat center center /cover;
  opacity: 0;
  transition: 5s;
  transform: translateY(-15vh);
}
.main-sec02.in-view .sec-cont:before{
  opacity: 1;
  transform: translateY(0);
}
.main-sec02 .tit-box .tag{
  background-color: #075388;
  display: block;
  width: fit-content;
  margin: 0 auto;
  padding: 0.6511vw 1.302vw;
  border-radius: 0.521vw;
}
.main-sec02 .post-it-box{
  margin-left: auto;
  margin-right: auto;
  width: 80.208vw;
  display: flex;
  gap: 0 1.25vw;
}
.main-sec02 .post-it-box .post-it{
  width: calc(25% - 0.9375vw);
  border-radius: 1.042vw;
  padding: 3.646vw 3.125vw;
  aspect-ratio: 1/1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-sec02 .post-it-box .post-it:nth-child(odd){
  background-color: #FFEA9C;
}
.main-sec02 .post-it-box .post-it:nth-child(even){
  background-color: #FBB03B;
}

.main-sec02 .post-it-box .post-it.in-view:nth-child(odd){
  transform: rotate(7deg) translateY(0);
}
.main-sec02 .post-it-box .post-it.in-view:nth-child(even){
  transform: rotate(-7deg) translateY(0);
}

.main-sec02 .post-it-box .icon-box{
  width: 3.646vw;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 auto;
  box-shadow: 0 0.208vw 0.208vw rgba(0,0,0,.1);
}
.main-sec02 .post-it-box .icon-box.icon01{background-image: url(/asset/img/main/main_con02_icon01.png);}
.main-sec02 .post-it-box .icon-box.icon02{background-image: url(/asset/img/main/main_con02_icon02.png);}
.main-sec02 .post-it-box .icon-box.icon03{background-image: url(/asset/img/main/main_con02_icon03.png);}
.main-sec02 .post-it-box .icon-box.icon04{background-image: url(/asset/img/main/main_con02_icon04.png);}

.main-sec02 .post-it-box .btn-box{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.521vw 2.315vw;
  border: 1px solid #262626;
  border-radius: 26.042vw;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.main-sec02 .slide-txt-box{color: #99C0D9;}

.main-sec02 .slide-txt-box {
  width: 100%;
  overflow: hidden; 
  white-space: nowrap;
  box-sizing: border-box; 
  line-height: 1;
  z-index: 1;
  position: relative;
}
.main-sec02 .slide-txt-inner {
  display: inline-block; 
}

.main-sec02 .slide-txt-box .slide-txt {
  text-transform: uppercase;
}

.main-sec02 .slide-txt-box .swiper-wrapper{transition-timing-function:linear; }

/* main section03 */
.main-sec03 .sec-cont{
  padding: 8.073vw 0;
  position: relative;
}
.main-sec03 .sec-cont:before{
  content: '';
  position: absolute;
  left: 0;
  bottom: 8.542vw;
  width: 100%;
  height: 57.5vw;
  background: url(/asset/img/main/mainbg03.png)no-repeat center center /cover;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: 5s;
  transform: translateY(-15vh);
}
.main-sec03.in-view .sec-cont:before{
  opacity: 1;
  transform: translateY(0);
}

.main-sec03 .all-for-you{
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.main-sec03 .air-txt{
  width: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  align-items: center;
  white-space: nowrap;
  justify-content: center;
}
.main-sec03 .air-txt .lt-txt{
  width: 50%;
  margin-right: 16.771vw;
  text-align: right;
}
.main-sec03 .air-txt .rt-txt{
  width: 50%;
  margin-left: 16.771vw;
  opacity: 0;
}
.main-sec03 .swiper-slide-active .air-txt .rt-txt{
  opacity: 1;
}
.main-sec03 .img-radius{
  width: 25.208vw;
  border-radius: 26.042vw;
  overflow: hidden;
}
.main-sec03 .img-radius .img{
  width: 100%;
  aspect-ratio: 1/1.343;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.main-sec03 .img-radius .img.img01{background-image: url(/asset/img/main/main_con03_i01.png);}
.main-sec03 .img-radius .img.img02{background-image: url(/asset/img/main/main_con03_i02.png);}
.main-sec03 .img-radius .img.img03{background-image: url(/asset/img/main/main_con03_i03.png);}

/* main section04 */
.main-sec04 .sec-cont{
  padding: 6.510vw 0 21.354vw;
  position: relative;
}
.main-sec04 .sec-cont:before{
  content: '';
  position: absolute;
  left: 50%;
  top: 25.521vw;
  transform: translateX(-50%);
  width: 90.938vw;
  height: 30.625vw;
  background: url(/asset/img/main/mainbg04.png)no-repeat center center /cover;
  opacity: 0;
  transition: opacity 5s 1s;
}
.main-sec04.in-view .sec-cont:before{
  opacity: 1;
}
.main-sec04 .tit-box{
  display: flex;
  align-items: center;
  gap: 0 1.042vw;
  justify-content: center;
}
.main-sec04 .tit-box .icon{
  width: 7.5vw;
  aspect-ratio: 1/1.021;
  background: url(/asset/img/main/main_con04_icon01.png)no-repeat center center /cover;
}
.main-sec04 .game-box{
  display: block;
  width: 60.521vw;
  margin-left: auto;
  margin-right: auto;
  transition-property: box-shadow;
  transition-delay: 2s;
}
.main-sec04 .game-box .game-img{
  width: 100%;
  aspect-ratio: 16/9;
  background: url(/asset/img/main/main_con04_game01.png)no-repeat center center /cover;
  clip-path: inset(100%);
  transition: clip-path 2s linear;
}
.main-sec04 .game-box.in-view{
  box-shadow: 0 0 2.083vw 1.042vw rgba(255,255,255,.5);
}
.main-sec04 .game-box.in-view .game-img{
    clip-path: inset(0%);
}

.main-sec04 .sub-tit-box{
  width: 17.71vw;
  height: 4.17vw;
  background-color: #fff;
  border-radius: 0.26vw;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.042vw;
  margin: 0 auto;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}
.main-sec04 .sub-tit-box .ico{
  display: block;
  width: 1.25vw;
  height: 1.458vw;
  background: url(/asset/img/main/main_con04_arw01.png)no-repeat center center /cover;
  animation: scrollDown 1.5s infinite ease-in-out;
}

/* 아래로 움직이는 애니메이션 정의 */
@keyframes scrollDown {
  0% {
    transform: translateY(-.33vw); /* 시작 위치 */
    opacity: 0.3;             /* 살짝 투명하게 */
  }
  50% {
    transform: translateY(.33vw); /* 10px 아래로 이동 (필요시 조정) */
    opacity: 1;                  /* 선명하게 */
  }
  100% {
    transform: translateY(-.33vw);    /* 다시 제자리로 */
    opacity: 0.3;
  }
}
/* popup 20251216 추가 */
.pop-up-layout{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.5);
  z-index: 12;
  display: none;
}
.pop-up-layout.on{
  display: block;
}

.pop-up-layout .pop-up{
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  /*height: 100%;*/
  height: 100vh;
}
.pop-up-layout .pop-up.on{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.pop-up-layout .pop-closed{
  cursor: pointer;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  right: -30px;
  background: url(/asset/img/main/btn_modal_close.png)no-repeat center center;
}
.pop-up-layout .pop-text-btn{
  display: flex;
  justify-content: center;
  background-color: #fff;
  border-radius: 1.042vw 1.042vw 0 0;
  overflow: hidden;
}

.pop-up-layout .pop-text-btn .pop-btn{
  color: #717171;
  text-align: center;
  padding: 0.521vw 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pop-up-layout .pop-text-btn .pop-btn.on{
  background-color: #3A9DD3;
  font-weight: 700;
  color: #fff;
}
.pop-up-layout .pop-text-btn .pop-btn + .pop-btn{
  border-left: 1px solid #D6D8D8;
}
.pop-up-layout .pop-text-btn.item04 .pop-btn{
  width: 25%;
}
.pop-up-layout .pop-text-btn.item05 .pop-btn{
  width: 20%;
}
.pop-up-layout .pop-cont{
  width: 36.458vw;
  /* max-height: 84.26vh; */
  position: relative;
}

.pop-up-layout .pop-img-box{
  position: relative;
}
.pop-up-layout .swiper_slider {
  border-radius: 0 0 1.042vw 1.042vw;
  overflow: hidden;
}
.pop-up-layout .pop-img-box .iframe-box{
  aspect-ratio: 16/9;
}
.pop-up-layout .pop-up01 .pop-img-box .swiper-slide {
  aspect-ratio: 70/86;
  max-height: 90vh;

}
.pop-up-layout .pop-up01 .pop-img-box .pop-img {
  /*overflow-y: auto;*/
  height: 100%;
  position: relative;
}
.pop-up-layout .pop-img-box .pop-img img{
  height: 100%;
  max-width: none;
  width: 100%;
}
.pop-up-layout .pop-up01 .pop-img .href-btn{
  display: block;
  position: relative;
  width: 12.500vw;
  height: 2.083vw;
  /* margin: -5.833vw auto 0; */
      z-index: 2;
    position: absolute;
    bottom: 8%;
    left: 50%;
    transform: translateX(-50%);
}

.pop-up-layout .swiper-btn-box{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  z-index: 1;
}
.pop-up-layout .swiper-btn-box .swiper-btn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 3.125vw;
  height: 3.125vw;
  background-color: rgba(255,255,255,.4);
  border-radius: 50%;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1;
  cursor: pointer;
}
.pop-up-layout .swiper-btn-box .prev-btn{
  right: calc(100% + 2.083vw);
  background-image: url(/asset/img/main/swiper_btn01.png);
}
.pop-up-layout .swiper-btn-box .next-btn{
  background-image: url(/asset/img/main/swiper_btn02.png);
  left: calc(100% + 2.083vw);
}




.policy-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
}

/* 활성화 */
.policy-modal.is-open {
  display: block;
}

/* 딤 */
.policy-modal__dim {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

/* 모달 박스 */
.policy-modal__content {
  position: relative;
  width: 90%;
  max-width: 800px;
  max-height: 80vh;
  background: #fff;
  margin: 5vh auto;
  padding: 30px;
  overflow-y: auto;
  border-radius: 12px;
}

/* 닫기 버튼 */
.policy-modal__close {
  position: absolute;
  top: 16px;
  right: 20px;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
}

/* 내용 */
.policy-modal__body {
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.6;
}

.btn-link{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.521vw 2.315vw;
  border: 1px solid #262626;
  border-radius: 26.042vw;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}