/* 彈跳視窗 */
.pop-modal-content {
  position: relative;
}

/* 背景SVG圖片 */
.modal-bg {
  height: 70vh;
  display: block;
}

/* ── Close ── */
.close-btn {
position: absolute;
top: calc(100% - 400px); 
right: calc(100% - 630px);
width: 32px; 
height: 32px;
background: rgba(255,255,255,.9);
border: none;
border-radius: 50%;
cursor: pointer;
font-size: 15px;
color: #444;
display: flex; align-items: center; justify-content: center;
z-index: 20;
box-shadow: 0 2px 8px rgba(0,0,0,.18);
transition: background .2s, transform .2s;
}
.close-btn:hover { background: #fff; transform: rotate(90deg); }


/* 透明按鈕框 (無框線, 無陰影) */
.modal-button {
  all: unset; /* 移除所有瀏覽器預設樣式 */
  position: absolute;
  cursor: pointer;
  width: 50vw; /* 依據視窗大小調整 */
  height: 10vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

/* 按鈕位置設定 */
.btn-1 {
  top: 38%;
  left: 50%;
}
.btn-2 {
  top: 52%;
  left: 50%;
}
.btn-3 {
  top: 68%;
  left: 50%;
  transform: translate(-50%,-50%);
}

/* RWD 適配 */
@media (max-width: 820px) and (min-width: 768px) {
  .pop-modal-content {
    width: 95%;
    max-width: 320px;
  }
  .modal-button {
    width: 70vw;
    height: 10vh;
  }
  .btn-1 {
    top: 38%;
    left: 50%;
  }
  .btn-2 {
    top: 52%;
    left: 50%;
  }
  .btn-3 {
    top: 68%;
    left: 50%;
  }
  .close-btn {
    position: absolute;
    top: calc(100% - 340px); 
    right: calc(100% - 560px);
  }

}
@media (max-width: 767px) and (min-width: 390px) {
    .modal-bg {
        height: 60vh;
        display: block;
      }

  .pop-modal-content {
    width: 95%;
    max-width: 320px;
    top: 80px;
  }
  .modal-button {
    width: 70vw;
    height: 10vh;
  }
  .btn-1 {
    top: 37%;
    left: 50%;
  }
  .btn-2 {
    top: 50%;
    left: 50%;
  }
  .btn-3 {
    top: 67%;
    left: 50%;
  }
  .close-btn {
    position: absolute;
    top: calc(100% - 260px); 
    right: calc(100% - 365px);
    width: 24px; 
    height: 24px;
  }

}
@media (max-width: 389px) and (min-width: 350px) {
    .modal-bg {
        height: 60vh;
        display: block;
      }

    .pop-modal-content {
      width: 95%;
      max-width: 320px;
      top: 80px;
    }
    .modal-button {
      width: 70vw;
      height: 10vh;
    }
    .btn-1 {
      top: 37%;
      left: 50%;
    }
    .btn-2 {
      top: 50%;
      left: 50%;
    }
    .btn-3 {
     top: 67%;
      left: 50%;
    }
    .close-btn {
      position: absolute;
      top: calc(100% - 260px); 
      right: calc(100% - 335px);
      width: 24px; 
      height: 24px;
    }
  }

/*test*/
/* 輪播容器 */
.custom-popup-slides-container {
  position: relative;
  overflow: hidden;
  text-align: center;
}

/* 每一張輪播圖片 */
.custom-popup-slide {
  display: none;
}

.custom-popup-slide.active {
  display: block;
}


/* 點點指示器 */
.custom-popup-dots {
  display: block;
  align-items: center;
  justify-content: center;
}

.custom-popup-dot {
  height: 10px;
  width: 10px;
  margin: 0 5px;
  background-color: #ffffff;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}

.custom-popup-dot.active {
  background-color: #ffab72;
}




/* ── Slogan（modal 外，置中，底部微壓邊框） ── */
.slogan-wrap {
position: absolute;
bottom: calc(100% - 130px);
left: 50%;
transform: translateX(-50%);
width: 300px;
z-index: 10;
filter: drop-shadow(0 4px 12px rgba(0,60,30,.22));
animation: floatSlow 4s ease-in-out infinite;
}
@keyframes floatSlow {
0%,100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-7px); }
}
.slogan-wrap svg,
.slogan-wrap img { width: 100%; height: auto; display: block; }

/* ════════════════════════════
SKY SCENE
════════════════════════════ */
.sky-scene {
position: relative;
height: 195px;
overflow: hidden;
background: linear-gradient(170deg, #4bbee8 0%, #85d8f4 50%, #beeeff 100%);
border-radius: 24px 24px 0 0;
}

/* 窗框底部白色半橢圓弧 */
.window-arc {
position: absolute;
bottom: -2px; left: 50%;
transform: translateX(-50%);
width: 120%; height: 52px;
background: #fff;
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
z-index: 3;
pointer-events: none;
}

/* ── Clouds ── */
.clouds-track {
position: absolute;
top: 0; left: 0;
width: 200%; height: 100%;
animation: cloudScroll 14s linear infinite;
z-index: 1;
}
@keyframes cloudScroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); }
}

.cloud {
position: absolute;
background: rgba(255,255,255,.82);
border-radius: 50px;
filter: blur(1px);
}
.cloud::before, .cloud::after {
content: '';
position: absolute;
background: rgba(255,255,255,.82);
border-radius: 50%;
}

.c1 { width: 100px; height: 32px; top: 22px; left: 5%; }
.c1::before { width: 46px; height: 46px; top: -23px; left: 12px; }
.c1::after { width: 34px; height: 34px; top: -16px; left: 48px; }

.c2 { width: 70px; height: 24px; top: 88px; left: 34%; }
.c2::before { width: 32px; height: 32px; top: -17px; left: 8px; }
.c2::after { width: 24px; height: 24px; top: -11px; left: 34px; }

.c3 { width: 112px; height: 36px; top: 128px; left: 58%; }
.c3::before { width: 52px; height: 52px; top: -26px; left: 16px; }
.c3::after { width: 38px; height: 38px; top: -18px; left: 58px; }

.c4 { width: 100px; height: 32px; top: 22px; left: 55%; }
.c4::before { width: 46px; height: 46px; top: -23px; left: 12px; }
.c4::after { width: 34px; height: 34px; top: -16px; left: 48px; }

.c5 { width: 70px; height: 24px; top: 88px; left: 84%; }
.c5::before { width: 32px; height: 32px; top: -17px; left: 8px; }
.c5::after { width: 24px; height: 24px; top: -11px; left: 34px; }

.c6 { width: 112px; height: 36px; top: 128px; left: 108%; }
.c6::before { width: 52px; height: 52px; top: -26px; left: 16px; }
.c6::after { width: 38px; height: 38px; top: -18px; left: 58px; }

/* ── Airplane ── */
.airplane {
position: absolute;
top: calc(100% - 330px); 
right: 30%;
width: 140px;
z-index: 6;
filter: drop-shadow(2px 6px 10px rgba(0,0,0,.18));
animation: floatPlane 3s ease-in-out infinite;
}
@keyframes floatPlane {
0%,100% { transform: translateY(0) rotate(-4deg); }
50% { transform: translateY(-13px) rotate(-4deg); }
}
/*.airplane svg, .airplane img { width: 100%; height: auto; display: block; }*/

/* ── IP Character ── */
.ip-character {
position: absolute;
top: calc(100% - 260px); 
right: 70%;
width: 120px;
z-index: 6;
filter: drop-shadow(1px 4px 8px rgba(0,0,0,.16));
animation: floatIP 2.8s ease-in-out infinite;
animation-delay: -1.1s;
}
@keyframes floatIP {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-11px); }
}
.ip-character svg, .ip-character img { width: 100%; height: auto; display: block; }

/* ── Modal Body ── */
.pop-modal-body {
background: #fff;
border-radius: 0 0 24px 24px;
padding: 8px 24px 30px;
text-align: center;
}

.pop-modal-body p {
font-size: 14px;
color: #555;
line-height: 1.85;
margin-bottom: 22px;
}
.pop-modal-body p strong { color: #1a9e56; font-weight: 700; }

.pop-cta-btn {
display: inline-block;
background: linear-gradient(135deg, #3ec97a, #1a9e56);
color: #fff;
border: none;
padding: 13px 44px;
border-radius: 50px;
font-size: 15px;
font-weight: 700;
letter-spacing: 1.5px;
cursor: pointer;
box-shadow: 0 6px 20px rgba(26,158,86,.4);
transition: transform .2s, box-shadow .2s;
position: relative;
overflow: hidden;
}
.pop-cta-btn::after {
content: '';
position: absolute;
top: -50%; left: -60%;
width: 40%; height: 200%;
background: rgba(255,255,255,.28);
transform: skewX(-20deg);
animation: btnSheen 3.2s ease-in-out infinite;
}
@keyframes btnSheen {
0%,65%,100% { left: -60%; opacity: 0; }
40% { left: 130%; opacity: 1; }
}
.pop-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(26,158,86,.5); }