@charset "UTF-8";
#index-block-1 {
  z-index: 1; }
  #index-block-1 .gradient {
    height: 100%;
    width: 100%;
    background: linear-gradient(210deg, #5C9D96 0%, white 10%, #CB6971 30%);
    opacity: .2; }
  #index-block-1::after {
    content: "";
    z-index: -999;
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background-image: url("../img/index/index_1_back.png");
    background-size: cover;
    background-position: center; }
  #index-block-1 .p-fixed {
    position: fixed; }
  #index-block-1 .inner-anchor {
    margin-top: 60vh;
    height: 50%; }
  #index-block-1 .inner-0 {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    background-image: url("../img/index/index_1_back_2.png");
    background-size: 100%;
    background-position: top;
    background-repeat: no-repeat; }
  #index-block-1 .inner-0-overlay {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    height: 540vh;
    width: 100%; }
  #index-block-1 .inner-1 {
    height: 100vh;
    background-image: url("../img/index/index_1_front.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat; }
  #index-block-1 .inner-2 {
    height: 100vh;
    overflow: hidden; }
    #index-block-1 .inner-2 img {
      width: 100%; }

@keyframes monster-1-keyframe {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(-10deg); } }
    #index-block-1 .inner-2 .monster-1 {
      top: 0%;
      left: -5%;
      width: 35%; }
      #index-block-1 .inner-2 .monster-1 img {
        animation: monster-1-keyframe 1.2s ease-in-out infinite alternate; }
    #index-block-1 .inner-2 .monster-2 {
      left: 5%;
      bottom: 5%;
      width: 15%; }

@keyframes monster-3-keyframe {
  0% {
    transform: rotate(0deg); }
  100% {
    transform: rotate(-20deg); } }
    #index-block-1 .inner-2 .monster-3 {
      right: 5%;
      top: 15%;
      width: 15%; }
      #index-block-1 .inner-2 .monster-3 img {
        animation: monster-3-keyframe 1.1s ease-in-out infinite alternate; }
    #index-block-1 .inner-2 .monster-4 {
      right: 0%;
      bottom: 0%;
      width: 50%; }
    #index-block-1 .inner-2 .monster-5 {
      left: 42%;
      top: 40%;
      width: 16%; }
    #index-block-1 .inner-2 .montain {
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-image: url("../img/index/index_2_montain.png");
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat; }
    #index-block-1 .inner-2 .front {
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      background-image: url("../img/index/index_2_front.png");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat; }
  #index-block-1 .inner-3 {
    height: 100vh;
    overflow: hidden;
    margin-top: 30vh;
    margin-bottom: 30vh; }
    #index-block-1 .inner-3 .inner-3-overlay {
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.3); }
    #index-block-1 .inner-3 .inner-3-text-block {
      padding: 1.5rem 1rem 1rem 1rem;
      height: 60%;
      width: 80%;
      top: 20%;
      left: 10%;
      background-color: #F3E0C5; }
      #index-block-1 .inner-3 .inner-3-text-block img {
        padding: 1rem;
        margin-top: .5rem;
        margin-right: 3rem;
        height: 100%; }
      #index-block-1 .inner-3 .inner-3-text-block:before {
        pointer-events: none;
        content: "";
        position: absolute;
        height: calc( 100% - 2rem);
        width: calc( 100% - 2rem);
        top: 1rem;
        left: 1rem;
        outline: 2px solid #C6543C; }
      #index-block-1 .inner-3 .inner-3-text-block:after {
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 2rem;
        content: "計畫說明";
        font-family: 'Noto Serif TC', sans-serif;
        writing-mode: vertical-rl;
        background-color: #C6543C;
        width: auto;
        height: auto;
        padding: 10px 5px;
        color: white; }
      #index-block-1 .inner-3 .inner-3-text-block .inner-3-text-scroll {
        height: 100%;
        width: 100%;
        position: relative;
        overflow-x: scroll;
        overflow-y: hidden; }
      #index-block-1 .inner-3 .inner-3-text-block small {
        font-size: 0.9em; }
  #index-block-1 .inner-3-v {
    position: relative;
    min-height: 100vh;
    background-color: #F3E0C5; }
    #index-block-1 .inner-3-v .inner-3-text-block {
      padding: 6rem 3rem;
      position: relative; }
      #index-block-1 .inner-3-v .inner-3-text-block:before {
        pointer-events: none;
        content: "";
        position: absolute;
        height: calc( 100% - 2rem);
        width: calc( 100% - 2rem);
        top: 1rem;
        left: 1rem;
        outline: 2px solid #C6543C; }
      #index-block-1 .inner-3-v .inner-3-text-block:after {
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 2rem;
        content: "計畫說明";
        font-family: 'Noto Serif TC', sans-serif;
        writing-mode: vertical-rl;
        background-color: #C6543C;
        width: auto;
        height: auto;
        padding: 10px 5px;
        color: white; }
      #index-block-1 .inner-3-v .inner-3-text-block img {
        width: 20%;
        position: absolute;
        bottom: 0;
        right: 0; }

#intro-video {
  z-index: 2;
  height: 150vh;
  display: flex;
  align-items: center; }

#index-block-2 {
  z-index: 2;
  height: 150vh;
  background-color: #F3E0C5;
  position: relative; }
  #index-block-2 .gradient {
    height: 100%;
    width: 100%;
    background: linear-gradient(30deg, #5C9D96 0%, white 50%, #CB6971 100%);
    opacity: .3; }
  #index-block-2 .inner {
    height: 100vh;
    width: 100%;
    background-image: url("../img/index/index_4_banner.png");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat; }
    #index-block-2 .inner .go-map-overlay {
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      background-color: rgba(0, 0, 0, 0.5); }
    #index-block-2 .inner #go-map {
      display: block;
      position: absolute;
      height: 50%;
      width: 50%;
      top: 25%;
      left: 25%;
      background-image: url("../img/index/gomap.png");
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat; }
  #index-block-2 #block-2-anchor {
    margin-top: 25vh; }

.inner-block-3 {
  z-index: 3;
  position: relative;
  min-height: 100vh;
  background-color: #F3E0C5; }
  .inner-block-3 .inner-3-text-block {
    padding: 6rem 3rem;
    position: relative; }
    .inner-block-3 .inner-3-text-block p {
      text-align: center; }
    .inner-block-3 .inner-3-text-block:before {
      pointer-events: none;
      content: "";
      position: absolute;
      height: calc( 100% - 2rem);
      width: calc( 100% - 2rem);
      top: 1rem;
      left: 1rem;
      outline: 2px solid #C6543C; }
    .inner-block-3 .inner-3-text-block:after {
      pointer-events: none;
      position: absolute;
      right: 0;
      top: 2rem;
      content: "計畫參與";
      font-family: 'Noto Serif TC', sans-serif;
      writing-mode: vertical-rl;
      background-color: #C6543C;
      width: auto;
      height: auto;
      padding: 10px 5px;
      color: white; }
    .inner-block-3 .inner-3-text-block > img {
      width: calc( 100% - 4rem);
      margin: 2rem; }
    .inner-block-3 .inner-3-text-block .go-map-overlay {
      position: absolute;
      bottom: 12rem;
      left: 0;
      height: 21rem;
      width: 100%; }
      .inner-block-3 .inner-3-text-block .go-map-overlay #go-map {
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("../img/index/gomap_v.png");
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat; }
    .inner-block-3 .inner-3-text-block #block-3-anchor {
      margin-top: 3rem;
      margin-bottom: 0; }
    .inner-block-3 .inner-3-text-block .link-group {
      display: flex;
      justify-content: center; }
      .inner-block-3 .inner-3-text-block .link-group img {
        width: 3rem;
        margin: 0 1rem; }

@media (max-width: 767px) {
  #index-block-1 .inner-2 .monster-1 {
    width: 60%; }
  #index-block-1 .inner-2 .monster-2 {
    width: 40%; }
  #index-block-1 .inner-2 .monster-3 {
    width: 20%; }
  #index-block-1 .inner-2 .monster-4 {
    width: 80%; }
  #index-block-1 .inner-2 .monster-5 {
    left: 30%;
    top: 40%;
    width: 40%; }
  #index-block-1 .inner-2 .front {
    background-size: 150%; }
  #intro-video {
    height: 50vh;
    background: #F3DFC3; }
  #index-block-2 {
    height: 100%; }
    #index-block-2 .inner {
      background-image: url("../img/index/index_4_banner_v.jpg"); }
    #index-block-2 #block-2-anchor {
      margin-top: 0; } }

/*# sourceMappingURL=index.css.map */