#조거맥스 #런링화 #애슬레저라이프스타일

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<script src="https://cdn.tutorialjinni.com/jQuery-rwdImageMaps/1.6/jquery.rwdImageMaps.min.js"></script>
<style type="text/css">
  /* reset */
  body {
    margin: 0;
  }
  dl,
  ul,
  ol,
  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* base */
  html {
    overflow: hidden;
  }
  #contents {
    padding-bottom: 0;
  }
  .evt {
    opacity: 0;
    position: relative;
    z-index: 0;
  }
  .evt.on {
    opacity: 1;
  }
  .evt img {
    display: block;
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    vertical-align: top;
  }
  .evt a,
  .evt button {
    -webkit-tap-highlight-color: transparent;
    display: block;
  }
  .evt a:focus,
  .evt button:focus {
    outline: none;
  }
  .evt .sec_group {
    position: relative;
  }
  .evt .abs {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 2;
  }
  .swiper-button-next:after,
  .swiper-button-prev:after {
    display: none;
  }

  /* SECTION COMMON */
  .evt .section {
    position: relative;
    width: 100%;
    overflow: hidden;
  }
  .evt .cont {
    position: relative;
  }

  /* SWIPER SLIDER */
  .evt .evt_slider_wrap {
    position: absolute;
  }
  .evt .evt_slider_wrap .evt_slider {
    overflow: hidden;
  }
  .evt .evt_slider_wrap img {
    width: 100%;
  }
  .evt .evt_slider_wrap .arrow {
    top: calc(470 / 750 * 100vw);
    margin: 0;
    width: calc(72 / 750 * 100vw);
    height: calc(113 / 750 * 100vw);
    background-size: cover !important;
  }
  .evt .evt_slider_wrap .arrow:after {
    display: none;
  }
  .evt .evt_slider_wrap .arrow.swiper-button-prev {
    left: 0;
    background: url(https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/arrow-prev.png) no-repeat;
  }
  .evt .evt_slider_wrap .arrow.swiper-button-next {
    right: 0;
    background: url(https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/arrow-next.png) no-repeat;
  }
  .evt .evt_slider_wrap .swiper-pagination {
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: 0;
  }
  .evt .evt_slider_wrap .swiper-pagination span {
    /* border-radius: unset; */
    margin: 0 calc(10 / 750 * 100vw);
    width: calc(20 / 750 * 100vw);
    height: calc(20 / 750 * 100vw);
    background: #fff;
    opacity: 0.3;
  }
  .evt .evt_slider_wrap .swiper-pagination span.swiper-pagination-bullet-active {
    opacity: 1;
  }

  /* LINEAR SLIDER */
  .evt .linear-slider {
    top: 50vw;
    left: 0;
    width: 180vw;
  }
  .evt .linear-slider .swiper-wrapper {
    transition-timing-function: linear;
  }
  .evt .linear-slider .swiper-slide {
    padding-right: 2vw;
    width: 30vw;
  }

  /* SCROLL ANIMATION */
  .evt .ani {
    position: absolute;
  }
  .evt .ani > * {
    opacity: 0;
    transition: 0.6s;
  }
  .evt .ani.toUp > * {
    transform: translate3d(0, 100px, 0);
  }
  .evt .ani.toDown > * {
    transform: translate3d(0, -100px, 0);
  }
  .evt .ani.toRight > * {
    transform: translate3d(-100px, 0, 0);
  }
  .evt .ani.toLeft > * {
    transform: translate3d(100px, 0, 0);
  }
  .evt.on .ani.active.remove > * {
    transition: 0s;
    opacity: 0;
  }
  .evt.on .ani.toUp.active.remove .img2 {
    transition: 0s;
    transition-delay: 0s !important;
    opacity: 0;
    transform: translate3d(0, 100px, 0) !important;
  }
  .evt.on .ani.toDown.active.remove .img2 {
    transition: 0s;
    transition-delay: 0s !important;
    opacity: 0;
    transform: translate3d(0, -100px, 0) !important;
  }
  .evt.on .ani.toRight.active.remove .img2 {
    transition: 0s;
    transition-delay: 0s !important;
    opacity: 0;
    transform: translate3d(-100px, 0, 0) !important;
  }
  .evt.on .ani.toLeft.active.remove .img2 {
    transition: 0s;
    transition-delay: 0s !important;
    opacity: 0;
    transform: translate3d(100px, 0, 0) !important;
  }
  .evt.on .ani.active > * {
    opacity: 1;
    transform: translateZ(0) !important;
  }

  /* IMAGE MOTION */
  @keyframes swing-w {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(2.8vw, 0);
    }
  }
  @keyframes swing-h {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(0, 2.8vw);
    }
  }
  @keyframes fadeInOut {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  .evt .motion {
    position: absolute;
    animation-duration: 0.6s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  .evt .swing-h {
    animation-name: swing-h;
  }
  .evt .swing-w {
    animation-name: swing-w;
  }
  .evt .fadeInOut {
    animation-name: fadeInOut;
  }

  /* VIDEO CLIP */
  .evt .clip_wrap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 67.46666666666667vw;
  }

  /* ------------------------------------ */

  /* 섹션별 */
  .evt .sec_top .abs.step1 {
    top: calc(142 / 750 * 100vw);
  }
  .evt.on .sec_top .abs.step1 > * {
    transition-delay: 0.3s;
  }
  .evt .sec_top .abs.step2 {
    top: calc(1351 / 750 * 100vw);
  }

  .evt .sec01 .evt_slider_wrap.step1 {
    top: calc(133 / 750 * 100vw);
    left: calc(47 / 750 * 100vw);
    width: calc(656 / 750 * 100vw);
  }

  .evt .sec01 .graph {
    position: absolute;
    top: calc(1321 / 750 * 100vw);
    left: 0;
    width: 100%;
  }
  .evt .sec01 .graph li {
    position: absolute;
    top: 0;
    left: calc(51 / 750 * 100vw);
    width: calc(300 / 750 * 100vw);
    height: calc(20 / 750 * 100vw);
    border-radius: calc(10 / 750 * 100vw);
    background: #323232;
    overflow: hidden;
  }
  .evt .sec01 .graph li:nth-child(even) {
    left: calc(395 / 750 * 100vw);
  }
  .evt .sec01 .graph li.step3 {
    top: calc(136 / 750 * 100vw);
  }
  .evt .sec01 .graph li.step4 {
    top: calc(136 / 750 * 100vw);
  }
  .evt .sec01 .graph li span {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-radius: calc(10 / 750 * 100vw);
    overflow: hidden;
  }
  .evt .sec01 .graph li span img {
    width: auto;
    height: 100%;
  }
  @keyframes bar1 {
    0% {
      width: 0;
    }
    100% {
      opacity: 1;
      width: calc(262 / 750 * 100vw);
    }
  }
  @keyframes bar2 {
    0% {
      width: 0;
    }
    100% {
      opacity: 1;
      width: calc(284 / 750 * 100vw);
    }
  }
  @keyframes bar3 {
    0% {
      width: 0;
    }
    100% {
      opacity: 1;
      width: calc(300 / 750 * 100vw);
    }
  }
  @keyframes bar4 {
    0% {
      width: 0;
    }
    100% {
      opacity: 1;
      width: calc(272 / 750 * 100vw);
    }
  }
  .evt .sec01 .graph.ani.active li.step1 span {
    animation: bar1 0.5s ease-out forwards;
  }
  .evt .sec01 .graph.ani.active li.step2 span {
    animation: bar2 0.5s ease-out forwards 0.2s;
  }
  .evt .sec01 .graph.ani.active li.step3 span {
    animation: bar3 0.5s ease-out forwards 0.4s;
  }
  .evt .sec01 .graph.ani.active li.step4 span {
    animation: bar4 0.5s ease-out forwards 0.6s;
  }

  .evt .sec02 .abs.step1 {
    top: calc(130 / 750 * 100vw);
  }
  .evt .sec02 .img1 {
    transform: translateZ(0);
  }
  .evt .sec02 .img2 {
    position: absolute;
    left: 0;
  }
  .evt.on .sec02 .img1 {
    transition-duration: 1s;
  }
  .evt.on .sec02 .img2 {
    transition-delay: 0.3s;
  }
  .evt .sec02 .abs.step2 {
    top: calc(508 / 750 * 100vw);
  }
  .evt .sec02 .abs.step2 .img2 {
    top: calc(60 / 750 * 100vw);
  }
  .evt .sec02 .abs.step3 {
    top: calc(1446 / 750 * 100vw);
  }
  .evt .sec02 .abs.step3 .img2 {
    top: calc(531 / 750 * 100vw);
  }
  .evt .sec02 .abs.step4 {
    top: calc(2573 / 750 * 100vw);
  }
  .evt .sec02 .abs.step4 .img2 {
    top: calc(471 / 750 * 100vw);
  }
  .evt .sec02 .abs.step5 {
    top: calc(3380 / 750 * 100vw);
  }
  .evt .sec02 .abs.step5 .img2 {
    top: calc(198 / 750 * 100vw);
  }
</style>
<script>
  /* 
    레이아웃이 자리잡기 전에 컨텐츠가 먼저 노출되어 덜컹 거리는 현상 방지
  */
  $(document).ready(function () {
    function onClickLink(url) {
      window.parent.postMessage({ action: "onClickLink", url }, "*");
    }

    setTimeout(function () {
      $(".evt .goDetail").click(function (e) {
        e.preventDefault();

        onClickLink(e.currentTarget.href);
      });
    }, 100);

    setTimeout(function () {
      $("#evt_container").addClass("on");
    }, 500);
  });
  $(window.parent).on("load", function () {
    $("#evt_container").addClass("on");
  });

  $(document).ready(function () {
    // 반응형 이미지맵
    $(".evt img[usemap]").rwdImageMaps();

    // 스크롤시 애니메이션
    function isEmpty(obj) {
      return obj === null || obj === undefined;
    }

    function scrollAnimation() {
      if (isEmpty(window.parent) || isEmpty(window.parent.document)) {
        return;
      }
      $(".evt .ani").each(function () {
        var aniPoint = $(this).offset().top;
        var showPoint = $(window.parent).scrollTop() + window.parent.innerHeight * 0.85;

        if (showPoint > aniPoint) {
          if (!$(this).hasClass("active")) {
            $(this).addClass("active");
          }
        }
      });
    }
    scrollAnimation();

    $(window.parent).on("scroll resize", function () {
      scrollAnimation();
    });

    // sec01 페이드인 슬라이드1
    var sec01FadeSlider1 = new Swiper(".evt .sec01 .fadeIn-slider.step1 .evt_slider", {
      observer: true,
      observeParents: true,
      slidesPerView: "auto",
      effect: "fade",
      loop: true,
      speed: 1000,
      autoplay: {
        delay: 2000,
        disableOnInteraction: false,
      },
      pauseOnMouseEnter: false,
      allowTouchMove: true,
      navigation: {
        prevEl: ".evt .sec01 .fadeIn-slider.step1 .swiper-button-prev",
        nextEl: ".evt .sec01 .fadeIn-slider.step1 .swiper-button-next",
      },
      on: {
        realIndexChange: function () {
          sessionStorage.setItem("sec01FadeSlider1", this.realIndex);
        },
      },
    });

    document.addEventListener("visibilitychange", function () {
      if ("visible" === document.visibilityState) {
        setTimeout(() => {
          sec01FadeSlider1.destroy();
          sec01FadeSlider1 = new Swiper(".evt .sec01 .fadeIn-slider.step1 .evt_slider", {
            observer: true,
            observeParents: true,
            slidesPerView: "auto",
            effect: "fade",
            loop: true,
            speed: 1000,
            autoplay: {
              delay: 2000,
              disableOnInteraction: false,
            },
            pauseOnMouseEnter: false,
            allowTouchMove: true,
            navigation: {
              prevEl: ".evt .sec01 .fadeIn-slider.step1 .swiper-button-prev",
              nextEl: ".evt .sec01 .fadeIn-slider.step1 .swiper-button-next",
            },
            on: {
              realIndexChange: function () {
                sessionStorage.setItem("sec01FadeSlider1", this.realIndex);
              },
            },
          });
          sec01FadeSlider1.slideToLoop(Number(sessionStorage.getItem("sec01FadeSlider1")), 0, false);
        }, 100);
      }
    });

    // resize 후 슬라이드 멈춤 방지
    var resizeEnd = () => {
      if (isEmpty(window.parent) || isEmpty(window.parent.document)) {
        return;
      }

      sec01FadeSlider1.autoplay.stop();
      sec01FadeSlider1.autoplay.start();
    };

    var doit;
    window.parent.addEventListener("resize", () => {
      clearTimeout(doit);
      doit = setTimeout(resizeEnd, 100);
    });

    // slider 위치 기억
    sec01FadeSlider1.slideToLoop(Number(sessionStorage.getItem("sec01FadeSlider1")), 0, false);
  });
</script>

<div class="evt" id="evt_container">
  <div class="section sec_top" id="evt_top">
    <div class="cont step1">
      <a class="goDetail" href="/search?searchText=DXSH5313N" title="상품 바로가기"
        ><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/bg-top1-1.jpg" />
      </a>
      <div class="abs step1 toUp ani">
        <a class="goDetail" href="/search?searchText=DXSH5313N" title="상품 바로가기"
          ><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/top-text1.png" />
        </a>
      </div>
      <a class="goDetail" href="/search?searchText=DXSH5313N" title="상품 바로가기"> </a>

      <div class="abs step2 toUp ani">
        <a class="goDetail" href="/search?searchText=DXSH5313N" title="상품 바로가기"
          ><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/top-text2-2.png" />
        </a>
      </div>
      <a class="goDetail" href="/search?searchText=DXSH5313N" title="상품 바로가기"> </a>
    </div>
  </div>

  <div class="sec_group">
    
    <div class="section sec01" id="evt_sec01">
      <div class="cont step1">
        <img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/bg-sec01.jpg" />
        <div class="swiper-container evt_slider_wrap fadeIn-slider step1">
          <div class="arrow swiper-button-prev">&nbsp;</div>

          <div class="evt_slider">
            <ul class="swiper-wrapper">
              <li class="swiper-slide">
                <a class="goDetail" href="/product-detail/DXSH5313N-BKS" title="상품 바로가기"
                  ><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/sec01-s1.png" />
                </a>
              </li>
              <li class="swiper-slide">
                <a class="goDetail" href="/product-detail/DXSH5313N-PPS" title="상품 바로가기"
                  ><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/sec01-s2.png" />
                </a>
              </li>
              <li class="swiper-slide">
                <a class="goDetail" href="/product-detail/DXSH5313N-WHS" title="상품 바로가기"
                  ><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/sec01-s3.png" />
                </a>
              </li>
            </ul>
          </div>

          <div class="arrow swiper-button-next">&nbsp;</div>
        </div>

        <ul class="graph ani">
          <li class="step1">
            <span><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/sec01-bar1.png" /></span>
          </li>
          <li class="step2">
            <span><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/sec01-bar2.png" /></span>
          </li>
          <li class="step3">
            <span><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/sec01-bar3.png" /></span>
          </li>
          <li class="step4">
            <span><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/sec01-bar4.png" /></span>
          </li>
        </ul>
      </div>
    </div>
    

    <div class="section sec02" id="evt_sec02">
      <div class="cont step1">
        <img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/bg-sec02.jpg" />
        <div class="abs step1 toUp ani"><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/sec02-text1-1.png" /></div>

        <div class="abs step2 toUp ani">
          <img alt="" class="img1" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/sec02-img1.png" />
          <img alt="" class="img2" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/sec02-text2.png" />
        </div>

        <div class="abs step3 toUp ani">
          <img alt="" class="img1" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/sec02-img2.png" />
          <img alt="" class="img2" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/sec02-text3-1.png" />
        </div>

        <div class="abs step4 toUp ani">
          <img alt="" class="img1" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/sec02-img3.png" />
          <img alt="" class="img2" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/sec02-text4.png" />
        </div>

        <div class="abs step5 toUp ani">
          <img alt="" class="img1" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/sec02-img4.png" />
          <img alt="" class="img2" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/mo/sec02-text5.png" />
        </div>
      </div>
    </div>
  </div>
</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
<style type="text/css">
  /* reset */
  body {
    margin: 0;
  }
  dl,
  ul,
  ol,
  li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  /* base */
  #wrap {
    overflow-y: hidden;
    height: auto;
  }
  #contents.events {
    padding-bottom: 0;
  }
  .contain {
    padding-bottom: 0;
  }
  .location-container {
    display: none;
  }
  .visual-area {
    margin: 0;
  }
  .evt {
    position: relative;
    left: 50%;
    margin-left: -960px;
    width: 1920px;
    text-align: left;
    opacity: 0;
    font-size: 0;
    overflow: hidden;
  }
  .evt * {
    box-sizing: border-box;
  }
  .evt.on {
    opacity: 1;
  }
  .evt img {
    width: 100%;
    display: block;
    vertical-align: top;
  }
  .evt a:focus,
  .evt button:focus {
    outline: none;
  }
  .evt .sec_group {
    position: relative;
  }
  .evt .abs {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }

  /* SECTION COMMON */
  .evt .section {
    position: relative;
  }
  .evt .cont {
    position: relative;
  }

  /* SWIPER SLIDER */
  .evt .evt_slider_wrap {
    position: absolute;
  }
  .evt .evt_slider_wrap .evt_slider {
    overflow: hidden;
  }
  .evt .evt_slider_wrap img {
    width: 100%;
  }
  .evt .evt_slider_wrap .arrow {
    top: 315px;
    margin: 0;
    width: 95px;
    height: 131px;
    background-size: cover !important;
  }
  .evt .evt_slider_wrap .arrow:after {
    display: none;
  }
  .evt .evt_slider_wrap .arrow.swiper-button-prev {
    left: 0;
    background: url(https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/arrow-prev.png) no-repeat;
  }
  .evt .evt_slider_wrap .arrow.swiper-button-next {
    right: 0;
    background: url(https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/arrow-next.png) no-repeat;
  }
  .evt .evt_slider_wrap .swiper-pagination {
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: 0;
  }
  .evt .evt_slider_wrap .swiper-pagination span {
    /* border-radius: unset; */
    margin: 0 4px;
    width: 208px;
    height: 3px;
    background: #fff;
    opacity: 0.3;
  }
  .evt .evt_slider_wrap .swiper-pagination span.swiper-pagination-bullet-active {
    opacity: 1;
  }

  /* LINEAR SLIDER */
  .evt .linear-slider {
    top: 200px;
    left: 0;
    width: 2400px;
  }
  .evt .linear-slider .swiper-wrapper {
    transition-timing-function: linear;
  }
  .evt .linear-slider .swiper-slide {
    padding-right: 20px;
    width: 400px;
  }

  /* SCROLL ANIMATION */
  .evt .ani {
    position: absolute;
  }
  .evt .ani > * {
    opacity: 0;
    transition: 0.6s;
  }
  .evt .ani.toUp > * {
    transform: translate3d(0, 100px, 0);
  }
  .evt .ani.toDown > * {
    transform: translate3d(0, -100px, 0);
  }
  .evt .ani.toRight > * {
    transform: translate3d(-100px, 0, 0);
  }
  .evt .ani.toLeft > * {
    transform: translate3d(100px, 0, 0);
  }
  .evt.on .ani.active.remove > * {
    transition: 0s;
    opacity: 0;
  }
  .evt.on .ani.toUp.active.remove .img2 {
    transition: 0s;
    transition-delay: 0s !important;
    opacity: 0;
    transform: translate3d(0, 100px, 0) !important;
  }
  .evt.on .ani.toDown.active.remove .img2 {
    transition: 0s;
    transition-delay: 0s !important;
    opacity: 0;
    transform: translate3d(0, -100px, 0) !important;
  }
  .evt.on .ani.toRight.active.remove .img2 {
    transition: 0s;
    transition-delay: 0s !important;
    opacity: 0;
    transform: translate3d(-100px, 0, 0) !important;
  }
  .evt.on .ani.toLeft.active.remove .img2 {
    transition: 0s;
    transition-delay: 0s !important;
    opacity: 0;
    transform: translate3d(100px, 0, 0) !important;
  }
  .evt.on .ani.active > * {
    opacity: 1;
    transform: translateZ(0) !important;
  }

  /* IMAGE MOTION */
  @keyframes swing-w {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(15px, 0);
    }
  }
  @keyframes swing-h {
    0% {
      transform: translate(0, 0);
    }
    100% {
      transform: translate(0, 15px);
    }
  }
  @keyframes fadeInOut {
    0% {
      opacity: 0;
    }
    80% {
      opacity: 1;
    }
  }
  .evt .motion {
    position: absolute;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
  }
  .evt .swing-h {
    animation-name: swing-h;
  }
  .evt .swing-w {
    animation-name: swing-w;
  }
  .evt .fadeInOut {
    animation-name: fadeInOut;
  }

  /* VIDEO CLIP */
  .evt .clip_wrap {
    position: absolute;
    width: 402px;
  }

  /* ------------------------------------ */

  /* 섹션별 */
  .evt .sec_top .abs.step1 {
    top: 273px;
    left: 260px;
  }
  .evt.on .sec_top .abs.step1 > * {
    transition-delay: 0.3s;
  }

  .evt .sec01 .evt_slider_wrap.step1 {
    top: 127px;
    left: 151px;
    width: 895px;
    padding: 0 95px;
  }

  .evt .sec01 .graph {
    position: absolute;
    top: 371px;
    left: 1110px;
    width: 100%;
  }
  .evt .sec01 .graph li {
    position: absolute;
    top: 0;
    left: 0;
    width: 598px;
    height: 10px;
  }
  .evt .sec01 .graph li.step2 {
    top: 97px;
  }
  .evt .sec01 .graph li.step3 {
    top: 192px;
  }
  .evt .sec01 .graph li.step4 {
    top: 288px;
  }
  .evt .sec01 .graph li span {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    border-radius: 5px;
    overflow: hidden;
  }
  .evt .sec01 .graph li span img {
    width: auto;
    height: 100%;
  }
  @keyframes bar1 {
    0% {
      width: 0;
    }
    100% {
      opacity: 1;
      width: 521px;
    }
  }
  @keyframes bar2 {
    0% {
      width: 0;
    }
    100% {
      opacity: 1;
      width: 565px;
    }
  }
  @keyframes bar3 {
    0% {
      width: 0;
    }
    100% {
      opacity: 1;
      width: 598px;
    }
  }
  @keyframes bar4 {
    0% {
      width: 0;
    }
    100% {
      opacity: 1;
      width: 541px;
    }
  }
  .evt .sec01 .graph.ani.active li.step1 span {
    animation: bar1 1.5s ease-out forwards;
  }
  .evt .sec01 .graph.ani.active li.step2 span {
    animation: bar2 1.5s ease-out forwards 0.2s;
  }
  .evt .sec01 .graph.ani.active li.step3 span {
    animation: bar3 1.5s ease-out forwards 0.4s;
  }
  .evt .sec01 .graph.ani.active li.step4 span {
    animation: bar4 1.5s ease-out forwards 0.6s;
  }

  .evt .sec02 .abs.step1 {
    top: 180px;
    left: 399px;
  }
  .evt .sec02 .img1 {
    transform: translateZ(0);
  }
  .evt .sec02 .img2 {
    position: absolute;
  }
  .evt .sec02 .pointer {
    transform: translateZ(0);
    position: absolute;
    top: 449px;
    left: 32px;
    width: 44px;
    height: 44px;
  }
  .evt .sec02 .pointer i {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: url(https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/pointer.png) no-repeat;
  }
  .evt.on .sec02 .img1 {
    transition-duration: 2s;
  }
  .evt.on .sec02 .img2 {
    transition-delay: 0.3s;
    transition-duration: 1.2s;
  }
  .evt .sec02 .abs.step2 {
    top: 177px;
    left: 1039px;
  }
  .evt .sec02 .abs.step2 .img2 {
    top: 228px;
    left: -201px;
    width: 236px;
  }
  .evt .sec02 .abs.step3 {
    top: 672px;
    left: 311px;
  }
  .evt .sec02 .abs.step3 .img2 {
    top: 408px;
    left: 546px;
    width: 289px;
  }
  .evt .sec02 .abs.step3 .pointer {
    top: 358px;
    left: 333px;
  }
  .evt .sec02 .abs.step4 {
    top: 1359px;
    left: 769px;
  }
  .evt .sec02 .abs.step4 .img2 {
    top: 187px;
    left: -312px;
    width: 337px;
  }
  .evt .sec02 .abs.step4 .pointer {
    top: 232px;
    left: 264px;
  }
  .evt .sec02 .abs.step5 {
    top: 1896px;
    left: 666px;
  }
  .evt .sec02 .abs.step5 .img2 {
    top: 293px;
    left: 495px;
    width: 372px;
  }
  .evt .sec02 .abs.step5 .pointer {
    top: 217px;
    left: 262px;
  }
</style>
<script>
  /* 
    레이아웃이 자리잡기 전에 컨텐츠가 먼저 노출되어 덜컹 거리는 현상 방지
  */
  $(document).ready(function () {
    function onClickLink(url) {
      window.parent.postMessage({ action: "onClickLink", url }, "*");
    }

    setTimeout(function () {
      $(".evt .goDetail").click(function (e) {
        e.preventDefault();

        onClickLink(e.currentTarget.href);
      });
    }, 100);

    setTimeout(function () {
      $("#evt_container").addClass("on");
    }, 500);
  });
  $(window.parent).on("load", function () {
    $("#evt_container").addClass("on");
  });

  $(document).ready(function () {
    // 스크롤시 애니메이션
    var titleW = $("#promotion-iframe-container", window.parent.document).outerWidth();
    var evtW = 1920;
    var evtScale = titleW / evtW;

    function isEmpty(obj) {
      return obj === null || obj === undefined;
    }

    function scrollAnimation() {
      if (isEmpty(window.parent) || isEmpty(window.parent.document)) {
        return;
      }
      titleW = $("#promotion-iframe-container", window.parent.document).outerWidth();
      evtW = 1920;
      evtScale = titleW / evtW;

      $(".evt .ani").each(function () {
        var bandBannerH = $("#bandBanner", window.parent.document).is(":visible") ? $("#bandBanner", window.parent.document).outerHeight() : 0;
        var commonHeaderH = $("#commonHeader", window.parent.document).outerHeight();
        var titleH = $("#promotion-iframe-container", window.parent.document).prev("div").outerHeight();
        var aniPoint = bandBannerH + commonHeaderH + titleH + $(this).offset().top * evtScale;
        var showPoint = $(window.parent).scrollTop() + window.parent.innerHeight * 0.85;

        if (showPoint > aniPoint) {
          if (!$(this).hasClass("active")) {
            $(this).addClass("active");
          }
        }
      });
    }
    scrollAnimation();

    $(window.parent).on("scroll resize", function () {
      scrollAnimation();
    });

    // sec01 페이드인 슬라이드1
    var sec01FadeSlider1 = new Swiper(".evt .sec01 .fadeIn-slider.step1 .evt_slider", {
      observer: true,
      observeParents: true,
      slidesPerView: "auto",
      effect: "fade",
      loop: true,
      speed: 1000,
      autoplay: {
        delay: 2000,
        disableOnInteraction: false,
      },
      pauseOnMouseEnter: false,
      allowTouchMove: true,
      navigation: {
        prevEl: ".evt .sec01 .fadeIn-slider.step1 .swiper-button-prev",
        nextEl: ".evt .sec01 .fadeIn-slider.step1 .swiper-button-next",
      },
      on: {
        realIndexChange: function () {
          sessionStorage.setItem("sec01FadeSlider1", this.realIndex);
        },
      },
    });

    $(document).on("touchend", function () {
      sec01FadeSlider1.autoplay.start();
    });

    // slider 위치 기억
    sec01FadeSlider1.slideToLoop(Number(sessionStorage.getItem("sec01FadeSlider1")), 0, false);
  });
</script>

<div class="evt" id="evt_container">
  <div class="section sec_top" id="evt_top">
    <div class="cont step1">
      <a class="goDetail" href="/search?searchText=DXSH5313N" title="상품 바로가기"
        ><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/bg-top1.jpg" />
      </a>
      <div class="abs step1 toRight ani">
        <a class="goDetail" href="/search?searchText=DXSH5313N" title="상품 바로가기"
          ><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/top-text1-2.png" />
        </a>
      </div>
      <a class="goDetail" href="/search?searchText=DXSH5313N" title="상품 바로가기"> </a>
    </div>
  </div>

  <div class="sec_group">
    
    <div class="section sec01" id="evt_sec01">
      <div class="cont step1">
        <img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/bg-sec01.jpg" />
        <div class="swiper-container evt_slider_wrap fadeIn-slider step1">
          <div class="arrow swiper-button-prev">&nbsp;</div>

          <div class="evt_slider">
            <ul class="swiper-wrapper">
              <li class="swiper-slide">
                <a class="goDetail" href="/product-detail/DXSH5313N-BKS" title="상품 바로가기"
                  ><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/sec01-s1.png" />
                </a>
              </li>
              <li class="swiper-slide">
                <a class="goDetail" href="/product-detail/DXSH5313N-PPS" title="상품 바로가기"
                  ><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/sec01-s2.png" />
                </a>
              </li>
              <li class="swiper-slide">
                <a class="goDetail" href="/product-detail/DXSH5313N-WHS" title="상품 바로가기"
                  ><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/sec01-s3.png" />
                </a>
              </li>
            </ul>
          </div>

          <div class="arrow swiper-button-next">&nbsp;</div>
        </div>

        <ul class="graph ani">
          <li class="step1">
            <span><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/sec01-bar1.png" /></span>
          </li>
          <li class="step2">
            <span><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/sec01-bar2.png" /></span>
          </li>
          <li class="step3">
            <span><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/sec01-bar3.png" /></span>
          </li>
          <li class="step4">
            <span><img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/sec01-bar4.png" /></span>
          </li>
        </ul>
      </div>
    </div>
    

    <div class="section sec02" id="evt_sec02">
      <div class="cont step1">
        <img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/bg-sec02.jpg" />
        <div class="abs step1 toRight ani">
          <img alt="" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/sec02-text1-1.png" />
        </div>

        <div class="abs step2 toUp ani">
          <img alt="" class="img1" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/sec02-img1.png" />
          <img alt="" class="img2" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/sec02-text2.png" />
        </div>

        <div class="abs step3 toUp ani">
          <img alt="" class="img1" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/sec02-img2.png" />
          <img alt="" class="img2" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/sec02-text3-1.png" />
        </div>

        <div class="abs step4 toUp ani">
          <img alt="" class="img1" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/sec02-img3.png" />
          <img alt="" class="img2" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/sec02-text4.png" />
        </div>

        <div class="abs step5 toUp ani">
          <img alt="" class="img1" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/sec02-img4.png" />
          <img alt="" class="img2" src="https://static.discovery-expedition.com/motioneye/yoil/23_0816_jogger/pc/sec02-text5.png" />
        </div>
      </div>
    </div>
  </div>
</div>