mo0647
/
splas


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405
							<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
  <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/ungveloper/web-fonts/GmarketSans/font-face.css" />
  <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css" />
  <link rel="stylesheet" href="assets/css/style.css">
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <title>스플라스 스파&워터파크</title>
</head>
<body>
  <section class="evt--section01">
    <div class="palm--img1"><img src="assets/img/img_1.png" alt=""></div>
    <div class="palm--img2"><img src="assets/img/img_2.png" alt=""></div>
    <div class="wave--bg"></div>
    <div class="section--container">
      <div class="section--title">
        <div class="logo"><img src="assets/img/logo.png"></div>
        <h1><img src="assets/img/font_2.png" alt="스플라스 스파&워터파크"></h1>
        <h2><img src="assets/img/font_3.png" alt="RENEW-ALL"></h2>     
        <h3><img src="assets/img/font_10.png" alt="GRAND RE-OPENING"></h3>
        <div class="bg--wave--wrap">
          <div class="bg--wave">
            <img class="bg--wave1" src="assets/img/bg_wave_1.png" alt="">
            <img class="bg--wave2" src="/assets/img/bg_wave_2.png" alt="">
          </div>
        </div>
        <div class="bg1 floating"><img src="assets/img/img_bg_1.png" alt=""></div>
        <div class="bg2 floating"><img src="assets/img/img_bg_2.png" alt=""></div>
        <div class="bg4 floating"><img src="assets/img/img_bg_4.png" alt=""></div>
        <div class="bubble--bg"></div>
      </div>
      <div class="video--wrap">
        <video controls="true" id="tsVideo" muted type="video/mp4">
          <source src="assets/img/splas_video.MOV">
              해당 브라우저는 video 태그를 지원하지 않습니다.
          </video>
        </video>
        <div class="video--btn play"></div>
      </div>
      <div class="swiper--wrap">
        <div class="bg1"><img src="assets/img/img_bg_7.png" alt=""></div>
        <div class="bg3"><img src="assets/img/img_bg_8.png" alt=""></div>
        <div class="swiper swiper1">
          <div class="swiper--tab--wrap">
            <button class="tab--btn active" data-index="0">아쿠아 스톰</button>
            <button class="tab--btn" data-index="1">블라스터 2종</button>
            <button class="tab--btn" data-index="2">하이드로 스핀</button>
            <button class="tab--btn" data-index="3">스트림 리버</button>
            <button class="tab--btn" data-index="4">온천 스파</button>
          </div>
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="slide--wrap">
                <div class="slide--img">
                  <span class="new--icon"></span>
                  <img src="assets/img/img_3.png" alt="">
                </div>
                <div class="slide--desc">
                  <h4>아쿠아 스톰 <span>AQUA STORM</span></h4>
                  <p>새롭게 선보이는 패밀리형 파도풀로 8가지 패턴의 다이나믹한 파도가 몰아칩니다.<br>
                    최대 1.8m의 파고로 아이들과 함께 안전하면서도 신나게 즐길 수 있습니다.
                  </p>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="slide--wrap">
                <div class="slide--img">
                  <span class="new--icon"></span>
                  <img src="assets/img/img_4.png" alt="">
                </div>
                <div class="slide--desc type2">
                  <h4>토네이도 블라스터 <span>TORNADO BLASTER</span></h4>
                  <p>롤러코스터를 타듯 198m 내내 스릴 넘치는 워터 슬라이드입니다.  마치 블랙홀로 빠져드는 듯한 스피드의 토네이도존과 컬러풀한 특수효과존이 즐거움을 더해줍니다.</p>
                  <h4>갤럭시 블라스터 <span>GALAXY BLASTER</span></h4>
                  <p>업앤다운을 반복하며 시원하게 스피드를 즐기는 직선 튜브와 빙글뱅글 회오리 존, 시각적인 재미를 더한 특수효과 존까지! 193m 슬라이드를 타는 내내 익사이팅한 매력에 기다리는 시간도 즐거워져요.</p>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="slide--wrap">
                <div class="slide--img">
                  <span class="new--icon"></span>
                  <img src="assets/img/img_5.png" alt="">
                </div>
                <div class="slide--desc">
                  <h4>하이드로 스핀 <span>HYDRO SPIN</span></h4>
                  <p>짧지만 강한 재미를 느낄 수 있는 신규 어트랙션. 튜브를 타고 최대 속도 45km/hr로 <br>빠르게 상승과 하강을 반복해 지루할 틈 없는 U형 무동력 슬라이드입니다.</p>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="slide--wrap">
                <div class="slide--img">
                  <img src="assets/img/img_6.png" alt="">
                </div>
                <div class="slide--desc">
                  <h4>스트림 리버 <span>STREAM RIVER</span></h4>
                  <p>스플라스 워터파크에서 단연 최고의 인기를 자랑하는 토렌트 리버가 업그레이드 되어 돌아왔습니다. <br>동종 시설 중 가장 액티브한 급류 파도풀로, 최대 파고 2.5M 로 리뉴얼되어 더욱 강력해진 짜릿함을 선사합니다.</p>
                </div>
              </div>
            </div>
            <div class="swiper-slide">
              <div class="slide--wrap">
                <div class="slide--img">
                  <img src="assets/img/img_7.png" alt="">
                </div>
                <div class="slide--desc">
                  <h4>실내 · 야외 온천 스파</h4>
                  <p>조용하고 편안하게 즐기는 실내 스파, 자연의 소리와 은은한 허브향이 함께하는 야외 스파, <br>계절과 테마 별 이색 컨텐츠를 담은 이벤트 스파까지. 17개의 온천 스파를 취향 따라 즐겨보세요.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="swiper-pagination"></div>
        <div class="swiper-button-next"></div>
        <div class="swiper-button-prev"></div>
      </div>
    </div>
  </section>
  <section class="evt--section02-1">
    <div class="cloud--img1"><img src="assets/img/img_9.png" alt=""></div>
    <div class="cloud--img2"><img src="assets/img/img_8.png" alt=""></div>
    <div class="section--container">
      <div class="evt--1">
        <span class="evt--circle">EVENT.01</span>
        <h3>내 취향 알고 즐기자!</h3>
        <h2><img src="assets/img/font_4.png" alt="물놀이 성향 테스트"></h2>
        <p class="evt--box"><img src="assets/img/img_16.png" alt="나에게 맞는 스타일은?"></p>
        <a href="#"><img src="assets/img/img_14.png" alt=""></a>
        <div class="bg1"><img src="assets/img/img_10.png" alt=""></div>
        <div class="bg2"><img src="assets/img/img_11.png" alt=""></div>
        <div class="bg3"><img src="assets/img/img_12.png" alt=""></div>
        <div class="bg4"><img src="assets/img/img_13.png" alt=""></div>
      </div>
    </div>
  </section>
  <section class="evt--section02-2">
    <!-- <div class="bg1"><img src="assets/img/bg_5.png" alt=""></div>
    <div class="bg2"><img src="assets/img/bg_6.png" alt=""></div> -->
    <div class="section--container">
      <div class="evt--2">
        <span class="evt--circle">EVENT.02</span>
        <h3>인스타그램 댓글 이벤트</h3>
        <h2><img src="assets/img/font_5.png" alt="이모지 퀴즈"></h2>
        <div class="evt--box2"><img src="assets/img/font_6.png" alt=""></div>
        <ul class="evt--box">
          <li><span class="circle">기 간</span>2025.05.30 - 2025.06.08</li>
          <li><span class="circle">내 용</span>이모지 힌트로 어트랙션 이름 맞추기</li>
          <li><span class="circle">발 표</span>2025.06.13 / 개별 DM 안내</li>
          <li><span class="circle">경 품</span>스파이용권 (1매) / 20명</li>
        </ul>
        <a href="#" class="evt--btn">이벤트 참여하기</a>
        <div class="bg1"><img src="" alt=""></div>
        <div class="bg2"><img src="" alt=""></div>
        <div class="bg3"><img src="" alt=""></div>
        <div class="bg4"><img src="" alt=""></div>

        <div class="bob--wrap01">
          <div class="bob01"></div>
        </div>
        <div class="bob--wrap02">
          <div class="bob02"></div>
        </div>
        <div class="bob--wrap03">
          <div class="bob03"></div>
        </div>
        <div class="bob--wrap04">
          <div class="bob04"></div>
        </div>
        <div class="bob--wrap05">
          <div class="bob05"></div>
        </div>
        <div class="bob--wrap06">
          <div class="bob06"></div>
        </div>
        <div class="bob--wrap07">
          <div class="bob07"></div>
        </div>
        <div class="bob--wrap08">
          <div class="bob08"></div>
        </div>
        <div class="bob--wrap09">
          <div class="bob09"></div>
        </div>

        <div class="tok01"></div>
        <div class="tok02"></div>
        <div class="tok03"></div>
        <div class="tok04"></div>
        <div class="tok05"></div>
      </div>
    </div>
  </section>
  <section class="evt--section03">
    <div class="section--container">
      <div class="section--title">
        <h3><img src="assets/img/font_11.png" alt="6월 5일 단 한번의 기회!"></h3>
        <h2><img src="assets/img/font_7.png" alt="얼리버드 프로모션"></h2>
        <div class="circle"><img src="assets/img/font_12.png" alt=""></div>
      </div>
      <div class="promotion--wrap">
        <div class="promotion">
          <h4>혜택 01</h4>
          <p>입장권</p>
          <h5>50<span>%</span><br>할인</h5>
        </div>
        <div class="promotion">
          <h4>혜택 01</h4>
          <p>1시간</p>
          <h5>사전<br>입장</h5>
        </div>
      </div>
      <div class="promotion--detail--wrap">
        <div class="detail">
          <div class="detail--l">
            <span>혜택 01</span>
            <h5>새로워진 스플라스 워터파크,<br>
            <span>반값으로</span> 즐겨요!</h5>
            <ul>
              <li>사용 기간 : 2025.7.1(화) ~ 8.31(일)</li>
              <li>구매 수량 : 1인 최대 2매</li>
            </ul>
          </div>
          <div class="detail--r">
            <span>한정<br>수량</span>
            <p>성인 · 소인 통합권</p>
            <div class="before--price">70,000원</div>
            <div class="after--price">35,000원</div>
          </div>
        </div>
        <div class="detail">
          <div class="detail--l">
            <span>혜택 02</span>
            <h5><span>1시간 먼저 입장</span>해 여유롭게!<br>
            오픈 런 하지마세요.</h5>
            <ul>
              <li>사전 입장 가능 시간 : 오전 8:00 ~ 8:59</li>
              <li>얼리버드 티켓 사용 당일 한정</li>
            </ul>
          </div>
          <div class="detail--r">
            <span>사전<br>입장</span>
            <p>정규 오픈 시간</p>
            <div class="before--price">오전 9:00</div>
            <div class="after--price">오전 8:00</div>
          </div>
        </div>
        <ul class="detail--plus">
          <li>
            사전 입장 시간이 지나면 혜택이 자동 소멸됩니다. (9:00부터 일반 줄 대기)
          </li>
          <li>
            평소 혼잡도가 높은 인기  <strong>어트랙션 3종</strong>에 한해 이용 가능합니다.<br>
            - 토네이도 블라스터, 갤럭시 블라스터, 하이드로 스핀
          </li>
        </ul>
      </div>
      <div class="count--wrap">
        <div class="count--txt">
          <p>6월 5일 (목)</p>
          <div class="img--wrap">
            <div class="wch--l"></div>
            <img src="assets/img/img_15.png" alt="시계">
            <div class="wch--r"></div>
          </div>
          <p>10시에 만나요 !</p>
        </div>
        <div class="count--num">
          <div class="bbl--eft03"></div>
          <div class="bbl--eft02"></div>
          <div class="bbl--eft01"></div>
          <div class="hours"><span>0</span><span>1</span></div>
          <div class="minutes"><span>0</span><span>0</span></div>
          <div class="seconds"><span>0</span><span>0</span></div>
          <div class="bbl--eft06"></div>
          <div class="bbl--eft05"></div>
          <div class="bbl--eft04"></div>
        </div>
        <a href="#" class="evt--btn">얼리버드 티켓 구매</a>
      </div>
    </div>
  </section>
  <script>
    const video = document.getElementById('tsVideo');
    const wrapper = document.querySelector('.video--wrap');
    const playBtn = document.querySelector('.video--btn');

    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach(entry => {
          if (entry.isIntersecting) {
            video.play();
          } else {
            video.pause();
          }
        });
      },
      {
        threshold: 0.5 // 50% 이상 보여야 재생
      }
    );

    observer.observe(wrapper);

    // 버튼 클릭 시 재생 + 클래스 제거
    playBtn.addEventListener('click', () => {
      if (video.paused) {
        video.play();
      } else {
        video.pause();
      }
    });
    video.addEventListener('play', () => {
      playBtn.classList.remove('play');
    });

    // 비디오 일시 정지되면 클래스 추가
    video.addEventListener('pause', () => {
      playBtn.classList.add('play');
    });

    var swiper = new Swiper(".swiper1", {
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });
    const tabButtons = document.querySelectorAll('.tab--btn');

    tabButtons.forEach(btn => {
      btn.addEventListener('click', () => {
        const index = parseInt(btn.dataset.index);
        swiper.slideTo(index);
      });
    });

    swiper.on('slideChange', () => {
      tabButtons.forEach(btn => btn.classList.remove('active'));
      tabButtons[swiper.activeIndex].classList.add('active');
    });

    const deadline = new Date('2025-06-05T10:00:00');

    function padDigits(num) {
      return String(num).padStart(2, '0').split('');
    }

    function updateCountdown() {
      const now = new Date();
      const diff = deadline - now;

      const hourEl = document.querySelector('.hours').children;     // ← 여기에 시
      const minEl = document.querySelector('.minutes').children;    // ← 여기에 분
      const secEl = document.querySelector('.seconds').children;  // ← 여기에 초

      if (diff <= 0) {
        hourEl[0].textContent = '0';
        hourEl[1].textContent = '0';
        minEl[0].textContent = '0';
        minEl[1].textContent = '0';
        secEl[0].textContent = '0';
        secEl[1].textContent = '0';
        clearInterval(timer);
        return;
      }

      const hours = Math.floor((diff / (1000 * 60 * 60)) % 100); // 2자리 확보
      const minutes = Math.floor((diff / (1000 * 60)) % 60);
      const seconds = Math.floor((diff / 1000) % 60);

      const [h1, h2] = padDigits(hours);
      const [m1, m2] = padDigits(minutes);
      const [s1, s2] = padDigits(seconds);

      animateIfChanged(hourEl[0], h1);
      animateIfChanged(hourEl[1], h2);
      animateIfChanged(minEl[0], m1);
      animateIfChanged(minEl[1], m2);
      animateIfChanged(secEl[0], s1);
      animateIfChanged(secEl[1], s2);
    }

    updateCountdown();
    const timer = setInterval(updateCountdown, 1000); // 1초마다 갱신

    function animateIfChanged(el, newVal) {
      if (el.textContent !== newVal) {
        el.textContent = newVal;
        el.classList.add('flip');
        setTimeout(() => el.classList.remove('flip'), 400); // 애니메이션 끝나면 제거
      }
    }
  </script>
</body>
</html>