@keyframes page-change-animation {
    0% {
    }

    100% {
        transform: translate3d(-50%, -50%, 0);
    }
}

@keyframes page-change-canvas-animation {
    0% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    100% {
        transform: translate3d(0, 0, 0) scale(3);
    }
}

html {
    overflow-y: hidden;
}

body.isIe11, body.isEdge {
    -ms-touch-action: none !important;
    -ms-content-zooming: none !important;
}

#story.index {
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 2;
    overflow: hidden;
    background-attachment: fixed;
}

#story.index.isIe11, #story.index.isEdge {
    -ms-touch-action: none !important;
    -ms-content-zooming: none !important;
}

#story.index #overlay.show {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 1600ms;
}

#story.index header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    pointer-events: none;
}

#story.index header .bg_header {
    transition: opacity 300ms;
    transition-delay: 300ms;
    opacity: 0;
}

#story.index header .bg_header.bg_black {
    opacity: 1 !important;
    z-index: 1;
}

#story.index header .bg_header.current {
    opacity: 1;
    z-index: 3;
    transition-delay: 0ms;
}

#story.index header.small .bg_header {
    transform: translate(0, -25%);
    transition-duration: 200ms;
}

#story.index header.small .header_inner {
    transform: scale(0.6);
    transition-duration: 200ms;
}

#story.index header .header_inner {
    transition: transform 400ms;
    transform-origin: 50% 0%;
}

#story.index #wrapper {
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

#story.index .bg_num {
    pointer-events: none;
}

#story.index .bg_num .story_num {
    opacity: 1;
}

#story.index .bg_num .story_num img {
    opacity: 0;
    transform: translate(25%, 0%) skew(44deg);
    transition: all 120ms;
    transition-timing-function: ease-in-out;
}

#story.index .bg_num .story_num.current img {
    opacity: 1;
    transform: translate(0%, 0%) skew(44deg);
    transition-duration: 270ms;
}

#story.index .zone-list {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    margin-top: 60px;
    transform: translate3d(-50%, -9%, 0);
    -ms-touch-action: none !important;
    touch-action: none !important;
}

@media screen and (max-width: 750px) {
    #story.index .zone-list {
        transform: translate3d(-50%, calc(-480px + -34.5vh), 0);
    }
}

#story.index .zone-list .swiper-container {
    width: 100%;
}

#story.index .zone-list .touch-moving .swiper-slide.swiper-slide-active .front-item01,
    #story.index .zone-list .touch-moving .swiper-slide.swiper-slide-active .front-item02 {
    transition-duration: 0ms !important;
}

#story.index .zone-list .swiper-slide {
    margin: 0 auto;
}

#story.index .zone-list .swiper-slide a {
    -webkit-tap-highlight-color: transparent;
    color: #fff;
    text-decoration: none;
    transform: translate3d(0, 0, 0) scale(1);
}

#story.index .zone-list .swiper-slide a, #story.index .zone-list .swiper-slide img {
    display: block;
    height: auto;
    width: 100%;
}

#story.index .zone-list .swiper-slide canvas {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0) scale(0.62);
    z-index: 2;
    pointer-events: none;
}

@media screen and (max-width: 750px) {
    #story.index .zone-list .swiper-slide canvas {
        transform: translate3d(-50%, -50%, 0) scale(0.8);
    }
}

#story.index .zone-list .swiper-slide .canvas-img {
    pointer-events: none;
    transition: opacity 400ms;
}

#story.index .zone-list .swiper-slide.item-fade-in .front-items img {
    opacity: 1;
}

#story.index .zone-list .swiper-slide.swiper-slide-active .front-item01 {
    transition: all 700ms !important;
}

#story.index .zone-list .swiper-slide.swiper-slide-active .front-item02 {
    transition: all 800ms !important;
}

#story.index .zone-list .swiper-slide .front-items {
    pointer-events: none;
}

#story.index .zone-list .swiper-slide .front-items img {
    opacity: 0;
    transition: opacity 500ms;
}

#story.index .zone-list .swiper-slide .title-area .title,
      #story.index .zone-list .swiper-slide .title-area .detail {
    transition: all 300ms;
    opacity: 0;
    transform: translate(20px, 0);
}

#story.index .zone-list .swiper-slide .title-area .title {
    transition-delay: 100ms;
}

#story.index .zone-list .swiper-slide .title-area .detail {
    transition-delay: 200ms;
}

#story.index .zone-list .swiper-slide.text-fade-in .title-area .title,
      #story.index .zone-list .swiper-slide.text-fade-in .title-area .detail {
    opacity: 1;
    transform: translate(0, 0);
}

#story.index.start header {
    opacity: 0 !important;
    transition: opacity 300ms;
}

#story.index.start nav,
  #story.index.start .bg_num {
    opacity: 0;
    transition: opacity 300ms !important;
}

#story.index.start .zone-list {
    transition: all 1400ms !important;
    transition-delay: 1300ms !important;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

#story.index.start .zone-list .swiper-slide {
    opacity: 0 !important;
    transition: opacity 100ms !important;
}

#story.index.start .zone-list .swiper-slide.start {
    opacity: 1 !important;
}

#story.index.start .zone-list .swiper-slide.start .title-area {
    opacity: 0;
    transition: opacity 300ms !important;
}

#story.index.start .zone-list .swiper-slide.start .front-items img {
    opacity: 0;
    transition: opacity 300ms !important;
}

#story.index.start .zone-list .swiper-slide.start a {
    animation: page-change-canvas-animation 1400ms;
    animation-delay: 1300ms;
    animation-fill-mode: forwards;
}

#story.index.start .zone-list .swiper-slide.start a .canvas-img img {
    opacity: 0.2;
    transition: opacity 300ms;
}

#story.index .swiper-pagination .swiper-pagination-bullet {
    background: #484747;
    content: "";
    height: 3px;
    opacity: 1;
    width: 10px;
    border-radius: 0;
}

#story.index .swiper-pagination .swiper-pagination-bullet-active {
    background: #dadada !important;
    opacity: 1;
}

#story.index .swiper-slide-shadow-top,
  #story.index .swiper-slide-shadow-left,
  #story.index .swiper-slide-shadow-right,
  #story.index .swiper-slide-shadow-bottom {
    display: none !important;
}