.top{
  width: 100dvw;
  height: 100dvh;
}
  .top .container{
    position: relative;
    width: 100%;
    height: 100%;
  }
    .top .container .hero{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
      .top .container .hero .hero-image-box{
        width: 100%;
        height: 55%;
        object-fit: cover;
      }
        .top .container .hero .hero-image-box img{
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
    .top .container .page-nav{
      position: absolute;
      bottom: 0;
      left: 0;

      width: 100%;
      height: 45%;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
      .top .container .page-nav .page-title{
        display: none;
      }
      .page-nav-box{
        max-width: 800px;
        width: 100%;
        height: auto;

        margin-top: 40px;
      }
        .page-nav-box nav{
          display: flex;
          flex-wrap: wrap;
          justify-content: space-evenly;
          row-gap: 2.5rem;
        }
          .page-nav-box nav .nav-item{
            max-width: 50%;
            width: 100%;
            display: flex;
            align-items: center;
            gap: 1rem;
          }
            .nav-item p{
              font-size: var(--subtitle-font-sise);
              color: var(--white);
              font-weight: 100;
            }
            .nav-item a{
              font-size: var(--subtitle-font-sise);
              color: var(--white);
              font-weight: bold;
            }
            .nav-item button{
              width: 36px;
              height: 36px;
              border-radius: 18px;

              background-color: rgba(255, 255, 255, 0.2);
              cursor: pointer;
              outline: none;
              appearance: none;

              display: flex;
              align-items: center;
              justify-content: center;
            }
.top .container .title{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
  .top .container .title p{
    color: var(--white);
    font-size: 300px;
  }
.about-dao{
  box-sizing: border-box;
  width: 100dvw;
  height: auto;

  display: flex;
  justify-content: center;
  padding: 50px 0 100px;
}
  .about-dao .container{
    max-width: 1170px;
    width: 100%;
    height: auto;

    display: flex;
    flex-direction: column;
    align-items: center;
  }
    .about-dao .container .center-line{
      width: 1px;
      height: 200px;
      margin-left: 1px;
      border-left: 1px solid var(--white);

      margin-top: -100px;
      margin-bottom: 100px;

      z-index: 100;
    }
    .section-title-block{
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 30px;
    }
      .section-title-block .section-title{
        font-size: 2.5rem;
        color: var(--white);
        font-family: var(--second-font-family);
      }
      .section-title-block p{
        font-size: var(--accent-font-sise);
        color: var(--white);
        font-family: var(--second-font-family);
        line-height: var(--default-line-height);
        text-align: center;
      }
    .presentation{
      box-sizing: border-box;
      width: 100%;
      height: auto;

      border-radius: 30px;
      background-color: var(--pale-white);

      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 50px;

      padding: 50px;
      margin: 50px 0;
    }
      .presentation .selector-box{
        display: flex;
        gap: 30px;
        height: 70px;
      }
        .presentation .selector-box .selector-item{
          height: 100%;
          width: 230px;

          display: flex;
          justify-content: center;
          align-items: center;

          border-bottom: solid 1px var(--pale-white);
          transition: 0.3s;
          transition-delay: 0.2s;
        }
          .selector-item h6{
            font-size: var(--subtitle-font-sise);
            font-weight: lighter;
            color: var(--pale-white);
            text-align: center;
            transition: 0.3s;
            transition-delay: 0.2s;
          }
          .selector-item p{
            font-size: var(--desc-font-sise);
            font-weight: lighter;
            color: var(--pale-white);
            text-align: center;
            transition: 0.3s;
            transition-delay: 0.2s;
          }
      .presentation .image{
        display: flex;
        align-items: center;
        justify-content: center;
      }
        .presentation .image .presentation-image-box{
          height: 400px;
          width: auto;
          display: none;
        }
          .presentation-image-box img{
            height: 100%;
            width: auto;
          }
      .presentation .desc-box{
        width: 100%;
        height: auto;
      }
        .presentation .desc-box p{
          width: 100%;
          text-align: center;
          color: var(--white);
          display: none;
        }
/* when active */
.selector-item.active{
  border-bottom: solid 1px var(--white) !important;
}
  .selector-item.active a h6{
    color: var(--white);
  }
  .selector-item.active a p{
    color: var(--white);
  }
.presentation .image .presentation-image-box.active {
  display: block;
}
.presentation .desc-box p.active {
  display: block;
}
.fade {
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fade.show {
  opacity: 1;
}

.about-neo88dao{
  box-sizing: border-box;
  width: 100dvw;
  height: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;

  padding: 100px 0;
}
    .about-neo88dao .content-box{
      width: 100%;
      height: auto;
    }
      .about-neo88dao .content-box .image-box{
        box-sizing: border-box;
        width: 100%;
        height: auto;
        padding: 0 8%;

        display: flex;
        justify-content: center;
      }
        .about-neo88dao .content-box .image-box img{
          width: 130%;
          height: auto;
        }
    .about-neo88dao .content-box.concept {
      background-color: rgba(255, 255, 255, 0.2);
    }
      .about-neo88dao .content-box.concept .head-accent{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: center;
      }
        .about-neo88dao .content-box.concept .head-accent .triangle{
          width: 80px;
          aspect-ratio: 1/cos(70deg);
          clip-path: polygon(50% 100%,100% 0,0 0);
          background: var(--black);
        }
      .about-neo88dao .wrapper{
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
      }
        .about-neo88dao .content-text{
          max-width: 1170px;
          width: 100%;
          height: auto;

          display: flex;
          flex-direction: column;
          gap: 30px;

          margin: 100px 0 30px 0;
        }
          .about-neo88dao .content-text h5{
            font-size: 2.5rem;
            font-family: var(--second-font-family);

            color: var(--white);
          }
          .about-neo88dao .content-text p{
            max-width: 350px;
            width: 100%;

            font-size: var(--accent-font-sise);
            font-family: var(--second-font-family);
            line-height: var(--default-line-height);

            color: var(--white);
          }
        .about-neo88dao .wrapper .image-box{
          width: 100%;
          height: auto;
          padding: 0;
          display: flex;
          justify-content: center;
          overflow: hidden;

          margin-bottom: 100px;
        }
          .about-neo88dao .wrapper .image-box img{
            width: 110%;
          }
.member{
  width: 100dvw;
  height: auto;

  padding: 100px 0;
}
  .member .counter-viewer{
    width: 100%;
    height: 50px;

    padding: 0 100px;
    margin: 50px auto;

    display: flex;
    justify-content: end;
    align-items: center;
  }
    .counter-control-btn{
      width: fit-content;
      height: auto;
      display: flex;
      gap: 30px;
    }
      .counter-control-btn .prev-btn,
      .counter-control-btn .next-btn{
        display: block;
        width: 33px;
        height: 33px;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--white);
        border-radius: 50%;

        transition: 0.3s;
      }
      .prev-btn:disabled,
      .next-btn:disabled {
        opacity: .3;
        cursor: default;
      }
        .counter-control-btn p{
          color: #000000;
        }
  .member .content-container{
    width: 100%;
    height: 600px;
    overflow: hidden;
  }
    .member .content-container .content-list{
      width: auto;
      height: 600px;
      
      display: flex;
      flex-wrap: nowrap;
      transition: transform .4s ease;
    }
    .member .content-container .content-list >:last-child{
      margin-right: 40px;
    }
      .member .content-list .card{
        width: 440px;
        height: 600px;
        display: flex;

        margin-left: 40px;
      }
        .member .content-list .card .outside-name{
          min-width: 40px;
          width: 40px !important;
          height: 600px;
          display: flex;
          justify-content: center;
        }
          .card .outside-name p{
            writing-mode: vertical-rl;
            color: var(--white);
            white-space: nowrap;
          }
        .card .item-box{
          position: relative;
          width: 400px;
          height: 100%;
        }
          .card .item-box .image-box{
            width: 100%;
            height: 100%;
          }
            .card .item-box .image-box img{
              width: 100%;
              height: 100%;
              border-radius: 20px;
              object-fit: cover;
            }
          .card .item-box .card-over-box{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
          }
            .card-over-box .wrapper{
              position: relative;
              width: 100%;
              height: 100%;
              /* overflow: hidden; */
            }
              .card-over-box .wrapper .name-text{
                position: absolute;
                top: 30px;
                left: 30px;

                display: flex;
                flex-direction: column;
                gap: 15px;
              }
                .card-over-box .wrapper .name-text .name{
                  font-size: var(--title-font-sise);
                  color: var(--white);
                  line-height: 1;
                }
                .card-over-box .wrapper .name-text .name.black{
                  color: var(--black);
                }
                .card-over-box .wrapper .name-text .live{
                  width: fit-content;
                  height: 32px;
                  
                  display: flex;
                  align-items: center;
                  gap: 10px;
                  padding: 0 20px;
                  border-radius: 16px;
                  border: solid 1px #424242;

                  opacity: 0;
                  visibility: hidden;
                  transition: 0.2s ease-in-out;
                }
                  .card-over-box .wrapper .name-text .live img{
                    height: var(--default-font-sise);
                    opacity: 40%;
                  }
                  .card-over-box .wrapper .name-text .live p{
                    font-size: var(--default-font-sise);
                    font-family: var(--second-font-family);
                  }
                .card-over-box .wrapper .icon-links{
                  position: absolute;
                  top: 30px;
                  right: 30px;

                  width: auto;
                  height: var(--title-font-sise);

                  display: flex;
                  align-items: center;
                  gap: 15px;

                  opacity: 0;
                  visibility: hidden;
                  transition: 0.2s ease-in-out;
                }
                  .card-over-box .wrapper .icon-links a{
                    width: auto;
                    height: 30px;
                  }
                    .card-over-box .wrapper .icon-links a img{
                      width: auto;
                      height: 30px;
                    }
                .card-over-box .wrapper .hover-item-2{
                  box-sizing: border-box;
                  
                  position: absolute;
                  bottom: -50px;
                  left: 50%;
                  transform: translateX(-50%);
                  -webkit-transform: translateX(-50%);
                  -ms-transform: translateX(-50%);

                  width: calc(100% - 30px);
                  height: fit-content;
                  padding: 10px 20px;

                  border-radius: 15px;
                  background: rgba(255, 255, 255, 0.2);
                  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
                  backdrop-filter: blur(5px);
                  -webkit-backdrop-filter: blur(5px);
                  border: 0.5px solid rgba(255, 255, 255, 0.3);

                  opacity: 0;
                  visibility: hidden;
                  transition: 0.5s ease-in-out;
                }
                  .card-over-box .wrapper .hover-item-2 p{
                    font-family: var(--second-font-family);
                    font-size: var(--desc-font-sise);
                    color: var(--white);
                  }
            .wrapper:hover .name-text .live{
              opacity: 1;
              visibility: visible;
            }
            .wrapper:hover .icon-links{
              opacity: 1;
              visibility: visible;
            }
            .wrapper:hover .hover-item-2{
              bottom: 15px;
              opacity: 1;
              visibility: visible;
            }
.partner{
  width: 100%;
  height: auto;

  padding: 100px 0 0;
}
  .partner-container{
    max-width: 1170px;
    width: 100%;
    height: fit-content;

    margin: 70px auto;
  }
    .partner-container .logo-list{
      display: flex;
      justify-content: center;
      gap: 30px;
      flex-wrap: wrap;
    }
      .partner-container .logo-list .logo-item{
        box-sizing: border-box;
        max-width: 300px;
        min-width: 180px;
        flex: 1;
        aspect-ratio: 1 / 1;
        height: auto;

        background-color: #424242;
        border-radius: 30px;

        padding: 30px;

        display: flex;
        flex-direction: column;
        justify-content: center;
      }
        .partner-container .logo-list .logo-item img{
          width: 100%;
          height: auto;
        }










@media (max-width: 440px) {

  .top .container .hero .hero-image-box{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .top .container .page-nav{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);

    width: 80%;
    height: 100%;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
    .top .container .page-nav .page-title{
      display: block;
      color: var(--white);
      font-size: var(--title-font-sise);
    }
    .page-nav-box nav{
      display: flex;
      flex-direction: column;
      flex-wrap: nowrap;
    }
      .page-nav-box nav .nav-item{
        max-width: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        gap: 1rem;
      }
  .top .container .title{
    display: none;
  }


.about-dao .container{
  max-width: calc(100dvw - 30px);
  width: 100%;
  height: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
}
  .about-dao .container .center-line{
    height: 250px;

    margin-top: -150px;
    margin-bottom: 150px;
  }
        .presentation .selector-box{
          display: flex;
          gap: 10px;
          height: 70px;
        }
          .presentation .selector-box .selector-item{
            width: auto;
          }
            .selector-item h6{
              font-size: var(--default-font-sise);
            }
            .selector-item h6 span{
              /* display: none; */
            }
.about-neo88dao .section-title-block{
  max-width: calc(100dvw - 30px);
}
        .about-neo88dao .content-box .image-box img{
          width: 200%;
          height: auto;
        }
    .about-neo88dao .content-text{
      padding: 0 15px;
      width: 100%;

      margin: 50px 0 10px 0;
    }
    .about-neo88dao .wrapper .image-box{
      margin-bottom: 0px;
    }

  .member .counter-viewer{
    display: none;
  }
  .member .content-container{
    margin-top: 40px;
    height: calc(100dvh - 140px) !important;
  }
    .member .content-container .content-list{
      height: calc(100dvh - 140px) !important;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
    }
    .member .content-container .content-list::-webkit-scrollbar {
      display: none; /* Chrome/Safari非表示 */
    }
      .member .content-list .card{
        width: calc(100dvw - 40px);
        height: calc(100dvh - 140px) !important;

        margin-left: 20px;
        scroll-snap-align: center;
      }
        .member .content-list .card .outside-name{
          height: calc(100dvh - 140px) !important;
        }
      .card .item-box{
        width: calc(100dvw - 80px);
        height: 100%;
      }
        .card .item-box .image-box{
          width: 100%;
          height: 80%;
        }
        .card-over-box .wrapper .hover-item-2{
          position: absolute;
          bottom: 0;
          left: 0;
          transform: translateX(0);
          -webkit-transform: translateX(0);
          -ms-transform: translateX(0);

          width: 100%;
          height: 20%;
          padding: 10px 0px;

          border-radius: 0;
          background: none;
          box-shadow: none;
          backdrop-filter: none;
          -webkit-backdrop-filter: none;
          border: none;

          opacity: 1;
          visibility: visible;
          transition: 0;
        }
.partner-container{
  width: 100%;
  padding: 50px 20px 0;
  margin: 30px auto;
}
  .partner-container .logo-list{
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }
    .partner-container .logo-list .logo-item{
      box-sizing: border-box;
      max-width: 260px;
      min-width: 180px;
      flex: 1;
      aspect-ratio: 1 / 1;
      height: auto;

      padding: 15px;
    }

}