@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700&display=swap');
        *{
            font-family: 'Montserrat', sans-serif;
            font-weight: 400;
            margin:0;
            padding:0;
            box-sizing: border-box;
            text-decoration: none;
        }
        body{
            width:100vw;
            height:100vh;
            overflow-x: hidden;
            background:#222;
            margin:0 auto;
            color:#fff;
            overscroll-behavior-y: none;
        }
        body::-webkit-scrollbar {
            display: none; 
            width: 0;
        }
        .use-limit{
            padding:0 12vw;
        }
        .use-limit .archive-title{
            font-size:1.2vw;
            font-weight:600;
            padding-top:2.49vw;
            margin-bottom:0.99vw;
        }
        .use-limit .archive-header{
            width:76vw;
            height:70px;
            background:rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(20px);
            padding:0 30px;
            border-bottom:1px solid #777;
            display:flex;
            justify-content: space-between;
            align-items: center;
            position:fixed;
            top:0;
            z-index:11;
            transition: transform 0.5s ease-in-out;
        }
        .archive-header.hidden {
            transform: translateY(-100%);
        }

        .use-limit .archive-header .logo{
            width:10%;
            height:27px; 
            background:url(./koong-logo.svg)  left / contain no-repeat;
            transition:0.5s;
        }
        .archive-menu-wrap{
            width:70%;
            display:flex;
            justify-content: flex-end;
            align-items: center;
            gap:2.34vw;
            position: relative;
          }
          .hambuger-padding{
            padding:10px;
            margin-right:-10px;
          }
          .hamburger {
            width: 27px;
            height: 23px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            cursor: pointer;
          }
      
          .hamburger span {
            height: 3px;
            background: #fff;
            transition: 0.3s;
          }
          .hamburger.active{
            height:18px;
          }

          .hamburger.active span:nth-child(1) {
            transform: rotate(45deg) translate(5px, 5px);
          }
      
          .hamburger.active span:nth-child(2) {
            opacity: 0;
          }
      
          .hamburger.active span:nth-child(3) {
            transform: rotate(-45deg) translate(6px, -6px);
          }
          
          .archive-menu{
            display: none;
            /* gap: 2.34vw; */
            transform:translateX(0%);
            position: absolute;
            right: 0;
            top: 0;
            height: 100%;
            align-items: center;
            /* opacity: 0; */
            transition: transform 0.8s ease, opacity 0.8s ease;
            white-space: nowrap;
          }
      
          .archive-menu a {
            padding-left:2.34vw;
            padding-right:2.34vw;
            text-decoration: none;
            color: #fff;
            font-size: 17px;
            font-weight:500;
          }
          .archive-menu a:hover{
            color:#FF4545;
          }
      
          .archive-menu.show {
            display: flex;
            transform:translateX(-90px);
          }

        .use-limit .archive-profile-area{
            width:76vw;
            height:85px;
            background:rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(20px);
            padding:0 30px;
            display:flex;
            align-items: center;
            justify-content: flex-start;
            border-radius: 0 0 0.5vw 0.5vw;
            position:fixed;
            top:70px;
            z-index:10;
        }
        .use-limit .archive-profile{
            width:45px;
            height:45px;
            border-radius:90px;
            background:#454545;
            margin-right:1.15vw;
            flex: 0 0 auto;
        }
        .use-limit .archive-profile img{
          height:45px;
        }
        .archive-welcome{
            font-size:15px;
            flex:1;
          }
          .archive-welcome span{
            display: inline-block;
          }
          .archive-nickname{
            font-weight:bold;
          }
          .archive-count{
            font-size:14px;
          }
        .use-limit .archive-count{
            padding: 5.5px 20px;
            border:1px solid #fff;
            border-radius: 0.21vw;
        }
        .use-limit .db-number{
            margin-top:155px;
        }
        .use-limit .db-height{
            width:33%;
            height:10.5vw;
            border-radius: 0.5vw;
        }
        .use-limit .db-portfolio{
            background:rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(20px);
            padding:1.56vw 2.6vw;
        }
        .use-limit .db-level{
            background:rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(20px);
            padding:1.56vw 2.6vw;
        }
        .use-limit .db-infograph{
            display:flex;
            flex-direction: row;
            justify-content: space-between;
            width:100%;
            gap:0.83vw;
        }
        .use-limit .db-divide{
            height: 10.5vw;
            display:flex;
            flex-direction: column;
            justify-content: center;
            gap:0.83vw;
            position:relative;
        }
        .use-limit .db-divide div{
            border-radius: 0.5vw;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .use-limit .db-divide div:first-child{
            background-color:#FF4545;
        }
        .use-limit .db-divide div:last-child{
            background-color:#FF9A9B;
        }
        .use-limit .db-holding{
            height:50%;
            padding:1.22vw 2.6vw;
        }
        .use-limit .db-title{
            font-size:0.99vw;
            line-height: 2.29vw;
        }
        .use-limit .db-title span{
            font-size:1.2vw;
            line-height: 2.29vw;
            font-weight:600;
            display:inline-block;
            text-align: right;
            width:50%;
            position:absolute;
            right:2.6vw;
        }
        .use-limit .db-portfolio{
            position:relative;
        }
        .full-pie-container{
            position:absolute;
            top:1.56vw;
            right:2.6vw;
        }
        .percentage-label {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 0.9vw;
        color: #333;
        }
        .pie-bg {
        fill: #FF4545;
        }
        .pie-fill {
        fill: #FF9A9B;
        }
        /* level */
        .full-pie-container svg{
            width:7.38vw;
            height:7.38vw;
        }
        .db-level{
        width:100%;
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        }
        .level-graph{
        padding:0.75vw 1.82vw;
        border:1px solid #FF9A9B; 
        border-radius: 10vw;
        display:flex;
        justify-content: space-between;
        align-items: center;
        }
        .level-graph p,
        .level-graph span{
        color:#FF9A9B;
        font-weight: bold;
        font-size:0.72vw;
        }
        .db-level .db-title{
        position:relative;
        }
        .db-level .db-title span{
          width: 27px;
          height: 27px;
          font-size: 14px;
          text-align: center;
          padding-right:1px;
          border-radius: 27px;
        background-color:#FF4545;
        display:flex;
        justify-content: center;
        align-items: center;
        position:absolute;
        left:3.2vw;
        top: 50%;
        transform: translate(-0%, -50%);
        }
        .progress-container {
        width: 70%;
        height: 0.58vw;
        background-color: #FF9A9B;
        border-radius: 2vw;
        overflow: hidden;
        }
        .progress-bar {
        width: 0;
        height: 100%;
        background-color: #FF4545;
        }
        
        .archive-slider-layout{
        width:100%;
        display:flex;
        gap:0.83vw;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        }
        .archive-now{
          position:relative;
        }
        .archive-now .vertical-slider{
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        gap:0.83vw;
        margin-bottom:0.83vw;
        }

        .archive-slider-layout div:nth-child(2){
          flex-grow: 1;
          }
          .vertical-slider {
          height: 22vw;
          overflow: hidden;
          width: 10.585vw;   
          background-position: center;
          background-size: cover;
          }
      
          .vertical-slider ul {
          display: flex;
          flex-direction: column;
          gap:0.83vw;
          list-style: none;
          margin: 0;
          padding: 0;
          transition: transform 0.3s ease;
          }
      
          .vertical-slider li {
          height: 10.585vw;
          display: flex;
          align-items: center;
          justify-content: center;
          background: #333;
          border-radius: 0.5vw;
          cursor: pointer;
          overflow: hidden;
          }
      
          .vertical-slider li img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          }
          .archive-view {
          width: auto;
          height:22vw;
          text-align: center;
          display:flex;
          flex-wrap: wrap;
          flex-direction: column;
          align-content: space-around;
          align-items: center;
          justify-content: center;
          position:relative;
          margin-top:1.04vw;
          border-radius: 0.5vw;
          background-color:#555;
          overflow: hidden;
          }
          .archive-slider-layout .archive-view::before{
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            z-index:2;
            background-color:rgba(255, 255, 255, 0.1);
            border-radius: 0.5vw;
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            }
          .archive-view img {
          width: 100%;
          border-radius: 10px;
          opacity: 0;
          visibility: hidden;
          transition:  1s;
          }
      
          .archive-view img.visible {
          opacity: 1;
          visibility: visible;
          height:100%;
          object-fit: cover;
          }
          .archive-view img.hidden {
            display: none;
            opacity: 0 !important;
            z-index:-10;
            background-color: #555;
          }
        #view-flag{
        display:inline-block;
        font-size:0.8vw;
        padding:0.72vw 1.72vw;
        background:#000;
        transform: rotate(-15deg);
        }
        .archive-item-center{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        position:absolute;
        z-index:3;
        padding:1.04vw;
        }
        .archive-view h5{
        font-size:1.5vw;
        z-index:2;
        }
        .archive-view button{
        font-size:0.75vw;
        font-weight: 600;
        padding:0.59vw 1.82vw;
        border-radius: 5vw;
        border:none;
        background:rgba(255, 255, 255, 0.9);
        backdrop-filter: blur(12px);
        position:absolute;
        right:2.6vw;
        bottom:2.08vw;
        z-index:4;
        }
        .vertical-slider li img.hidden {
          display: none;
        }
        
        .notice-wrap ul{
          height:auto !important;
        }
        .splide {
            width: 100%;
            margin: 0 auto;
          }
          .splide__track {
            overflow: hidden;
          }
          .splide__slide {
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 0.5vw;
            overflow: hidden;
          }
        
        .notice-item {
            width: 100%;
            height: 9.16vw;
            background-color:#555;
            background-position: center;
            color: white;
            font-size: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.83vw;
            border-radius: 0.5vw;
            transition: transform 0.3s ease;
        }
        
        .notice-item img{
          width:100%;
          object-fit: cover;
        }

        .slide-card img {
            width: 100%;
            object-fit: cover;
            display: block;
          }
          
          .slide-card h3 {
            padding: 10px;
            font-size: 1.2rem;
            color: #2d3436;
          }

        .archive-list{
        margin-top: 4.69vw;
        display: flex;
        flex-wrap: wrap;
        gap: 0.83vw;
        justify-content: flex-start;
        }
        .archive-list .archive-list-item{
        background:#333;
        background-position: center;
        background-size: cover;
        border-radius: 0.5vw;
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1 / 1;
        flex: 0 0 calc((100% - (0.83vw * 4)) / 5);
        position:relative;
        overflow: hidden;
        cursor: pointer;
        }
        .archive-list .archive-list-item.empty {
        background:#333;
        cursor: default;
        }

        .archive-list .list-title-box {
        display:flex;
        align-items: center;
        justify-content: center; 
        background:#000;
        font-size:1.12vw;
        font-weight:600;
        }

        .archive-list-item .archive-list-title {
        width: 100%;
        height:5vw;
        box-sizing: border-box;
        background:linear-gradient( rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.9) 70%);
        text-align: left;
        color: #fff;
        font-size: 0.77vw;
        line-height: 1.2vw;
        display:block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transform: translateY(100%);
        opacity:0;
        transition: transform 0.3s ease-in-out;
        position: absolute;
        bottom: 0;
        padding:2.76vw 1.04vw 1.04vw;
        }
        .archive-list .archive-list-item:hover .archive-list-title {
        transform: translateY(0);
        opacity:1;
        }
        .archive-list .archive-list-item.empty .archive-list-title {
        background: transparent;
        }
        .use-limit footer{
        padding:5.21vw 0;
        text-align: center;
        font-size: 0.78vw;
        }

        /* detail */
        .prev-position{
          position:relative;
          width:100%;
          display:flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          margin-top:155px;
          padding-top: 2.49vw;
          margin-bottom:0.99vw;
        }
        .archive-step-1,
        .archive-step-2{
            font-size:0.7vw;
            display: inline-block;
        }
        .archive-prev{
          width:27px;
          height:27px;
        }
        .archive-prev img{
          width:100%;
          height:100%;
          object-fit: cover;
        }
        .archive-player{
            width:100%;
            height:27.8vw;
            overflow: hidden;
            background:rgba(255, 255, 255, 0.1);
            -webkit-backdrop-filter:blur(17px);
            border-radius: 0.5vw;
            display:flex;
            justify-content: center;
            align-items: center;
        }
        .player-container{
            width:50vw; 
            height:100%;
            position: relative;
            cursor: pointer;
        }
        .archive-video{
            width:100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: block;
        }
        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right:0; 
            bottom:0;
            width: 100%;
            background-size:cover;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: opacity 0.3s;
            pointer-events: auto;
            background-position: center;
          }
          /* 플레이 버튼 */
          .play-button {
            width: 2.86vw;
            height: 2.86vw;
            background: url('./play-button.svg') no-repeat center center;
            background-size: contain;
            border: none;
            outline: none;
            cursor: pointer;
            opacity: 0.9;
            transition: opacity 0.2s;
          }         
          .play-button:hover {
            opacity: 1;
          }

        .archive-ownership-number{
            display:flex;
            justify-content: flex-start;
            align-items: center;
            margin-top:1.56vw;
        }
        .archive-for-cover{
            width:4.43vw;
            height:4.43vw;
            border-radius: 0.42vw;
            background:rgba(255, 255, 255, 0.1);
            margin-right:1.15vw;
            flex: 0 0 auto;
            background-size: cover;
            background-position: center;
        }
        .unique-number span{
            font-size:1.2vw;
            font-weight:bold;
            line-height:4.43vw;
            text-align: center;
            margin-right:1.56vw;
        }
        .unique-number small{
            font-size:0.88vw;
            line-height:4.43vw;
            text-align: center;
        }
        .archive-reward-title{
            font-size:1.36vw;
        }
        .archive-step-2{
            margin-top: 2.49vw;
            margin-bottom:0.99vw;
        }
        .archive-detail-infomation{
            font-size:0.8vw;
            line-height:2.08vw;
            padding:2.6vw 0;
            border-top:1px solid #707070;
            border-bottom:1px solid #707070;
            overflow:hidden;
        }

        .archive-detail-infomation h5{
            font-size:0.96vw;
        }
        @media (width <= 1440px){
            .use-limit{
            padding:0 5vw;
            }
            .use-limit .archive-header .logo {
              height:25px;
            }
            .use-limit .archive-header,
            .use-limit .archive-profile-area{
            width:90vw;
            }
            .use-limit .archive-header{
            height:53px;
            }
            .use-limit .archive-profile-area{
            height:63px;
            top:53px;
            }
            
            .hamburger {
            width: 22px;
            height: 21px;
            }
            .archive-menu a {
            font-size: 15.5px;
            }
            .hamburger.active {
            height: 17.8px;
            }
            .archive-welcome{
            font-size:14px;
            }
            .archive-count{
            font-size:13px;
            }
            .use-limit .archive-profile {
            width: 35px;
            height: 35px;
            }
            .use-limit .archive-profile img{
              width:35px;
            }
            .use-limit .archive-header,
            .use-limit .archive-profile-area {
            padding: 0 24px;
            }
            .use-limit .db-number {
            margin-top: 116px;
            }
            .percentage-label {
            font-size: 12px;
            }
            .use-limit .archive-title {
            font-size:1.6vw;
            padding-top: 1.95vw;
            }
            .use-limit .db-title {
            font-size: 1.32vw;
            }
            .use-limit .db-title span {
            font-size: 1.6vw;
            }
            .db-level>.db-title span{
              width:24px;
              height:24px;
              line-height:24px;
              font-size:12px;
              left:4.2vw;
            }
            .archive-list-item .archive-list-title {
              font-size: 1.04vw;
            }
            .archive-view button{
              font-size:12px;
              padding:8px 24px;
              border-radius:30px;
            }
            .prev-position{
            margin-top: 116px;
            margin-bottom: 10px;
            padding-top: 25px;
            }
            .archive-step-1, .archive-step-2 {
            font-size: 10px;
            }
          }
        @media (width <= 850px) {
            .use-limit .archive-header,
            .use-limit .archive-profile-area{
              width:100vw;
              left:0;
              padding:0 4.71vw;
            }
            .use-limit {
              padding: 0 4.71vw;
            }

            .archive-menu a {
              font-size: 14.5px;
            }
            .archive-menu.show {
              transform: translateX(-50px);
            }
            .use-limit .archive-profile-area{
              border-radius:0 0 0.94vw 0.94vw;
            }
            .archive-welcome,
            .archive-count {
              font-size: 12px;
            }
            .use-limit .archive-count {
              padding:4px 18px;
              border-radius:5px;
            }
            .use-limit .db-divide div,
            .use-limit .db-height,
            .vertical-slider li,
            .archive-view,
            .notice-item,
            .slide-card img,
            .splide__slide,
            .archive-list .archive-list-item,
            .archive-player{
              border-radius: 0.94vw;
            }
            .archive-list,
            .use-limit .db-divide,
            .use-limit .db-infograph,
            .vertical-slider ul,
            .archive-slider-layout,
            .notice-item{
            gap: 1.41vw;
            }
            .archive-list .archive-list-item {
            flex: 0 0 calc((100% - (1.41vw * 3)) / 4); 
            }
            .use-limit .archive-title,
            .use-limit .db-title span{
              font-size:2.21vw;
              line-height: 2.35vw;
            }
            .use-limit .archive-title{
              padding-top:25px;
              margin-bottom: 20px;
            }
            .use-limit .db-title {
              font-size: 1.82vw;
              line-height:2.35vw;
            }
            .use-limit .db-divide,
            .use-limit .db-height {
              height: 13.28vw;
            }
            .full-pie-container svg {
              width: 10.16vw;
              height: 10.16vw;
            }
            .level-graph p,
            .level-graph span{
              display:inline-block;
              font-size:1.3vw;
            }
            .db-level>.db-title span{
              width:17px;
              height:17px;
              font-size:11px;
              line-height:17px;
              left: 5.9vw;
            }
            .archive-item-center{
              padding:2.35vw;
            }
            #view-flag{
              font-size:1.41vw;
            }
            .archive-view h5{
              font-size:2.35vw;
            }

            .vertical-slider,
            .archive-view{
              height:29.95vw;
            }
            .vertical-slider {
              width:14.195vw;
            }
            .vertical-slider li{
              height:14.195vw;
            }
            .notice-item{
              height:13.28vw;
            }
            .archive-list .list-title-box{
              font-size:2vw;
            }
            .archive-list {
              margin-top: 25px;
            }
            .archive-list-item .archive-list-title {
              height: 7vw;
              line-height: 2.7vw;
              padding:2.89vw 1.41vw 1.41vw;
              font-size: 1.7vw;
            }
            .archive-player {
              height:50.94vw;
              backdrop-filter: none;
              -webkit-backdrop-filter: none;
            }
            .player-container {
              width: 100%;
            }
            .play-button {
              width: 5.29vw;
              height: 5.29vw;
            }
            .archive-ownership-number {
              margin-top: 2.35vw;
            }
            .archive-step-2 {
              margin-top: 3.53vw;
              margin-bottom: 10px;
            }
            .archive-for-cover {
              width: 5.88vw;
              height: 5.88vw;
              border-radius: 0.71vw;
            }
            .unique-number small {
              font-size: 1.29vw;
            }
            .unique-number span {
              font-size: 1.65vw;
            }
            .archive-reward-title,
            .archive-detail-infomation h5 {
              font-size: 2vw;
            }
            .unique-number{
              white-space: nowrap;
            }
            .archive-reward-title {
              white-space: nowrap;
              text-overflow: ellipsis;
              overflow: hidden;
            }
            .archive-detail-infomation {
              font-size: 1.65vw;
              line-height: 2.47vw;
              padding: 3.53vw 0;
            }
            .use-limit footer {
              font-size: 10px;
              padding: 6.47vw 0;
            }
          }
          @media (width <= 500px) {
            .use-limit .archive-header,
            .use-limit .archive-profile-area,
            .use-limit{
              padding:0 5.56vw;
            }
            .hamburger {
              width: 20px;
              height: 19px;
            }
            .archive-prev {
              width: 24px;
              height: 24px;
            }
            .use-limit .archive-header .logo {
              width: 13%;
            }
            .archive-menu a {
              font-size: 14px;
              padding-left:4vw;
              padding-right:4vw;
            }
            .archive-menu.show {
              transform: translateX(-40px);
            }
            .archive-welcome span:nth-child(2),
            .archive-welcome span:nth-child(4){
              font-size:0;
              display:inline-block;
            }
            .archive-welcome span:nth-child(4)::before{
              content: "th connection :)";
              font-size: 12px;
            }
            .use-limit .archive-count {
              padding: 2px 12px;
            }
            .use-limit .db-infograph {
              flex-direction:column;
            }
            .use-limit .db-height {
              width: 100%;
              height:27.4vw;
            }
            .use-limit .db-title {
              font-size: 14px;
            }
            .use-limit .archive-title,
            #totalValue,
            #subtractValue{
              font-size: 17px;
            }
            .use-limit .archive-profile-area{
              border-radius:0 0 1.6vw 1.6vw;
            }
            .use-limit .db-divide div,
            .use-limit .db-height,
            .vertical-slider li,
            .archive-view,
            .notice-item,
            .slide-card img,
            .splide__slide,
            .archive-list .archive-list-item,
            .archive-now .vertical-slider,
            .archive-slider-layout .archive-view::before,
            .archive-player{
              border-radius: 1.6vw;
            }
            .archive-list,
            .use-limit .db-divide,
            .use-limit .db-infograph,
            .vertical-slider ul,
            .archive-slider-layout,
            .notice-item{
            gap: 2vw;
            }
            .archive-now .vertical-slider{
              margin-bottom:0;
            }
            .level-graph p, .level-graph span {
              font-size: 12px;
            }
            .percentage-label {
              font-size: 10px;
            }
            #totalValue, #subtractValue{
              right:4vw;
            }
            .archive-now{
              margin-top:25px;
              overflow: hidden;
            }
            .archive-now .archive-title{
              position:absolute;
              top:0;
              padding-top:5px;
              margin:0;
            }
            .archive-item-center{
              padding: 0 4vw;
              align-content: center;
              flex-wrap: wrap;
            }
            .use-limit .db-holding,
            .use-limit .db-portfolio,
            .use-limit .db-level {
              padding: 4vw;
            }
            .full-pie-container {
              top: 4vw;
              right: 4vw;
            }
            .full-pie-container svg {
              width: 19.2vw;
              height: 19.2vw;
            }
            .db-level .db-title span {
              left: 10vw;
            }

            .level-graph {
              padding: 2.4vw 4vw;
            }
            .progress-container {
              height: 8px;
            }

            .archive-list {
            gap: 3vw;;
            }
            .archive-list .archive-list-item {
            flex: 0 0 calc((100% - 3vw) / 2);
            }
            .archive-list-item .archive-list-title {
              height: 10vw;
              line-height: 3.9vw;
              padding:3.7vw 2.4vw 2.4vw;
              font-size: 2.9vw;
              transform: translateY(0%);
              opacity: 1;
            }
            .archive-slider-layout {
              flex-direction: column;
              overflow: hidden;
            }
            .mobile-location{
              height:22vw;
              width:1000%;
              position:absolute;
              left:0;
              transform:translateX(42vw);
              overflow: hidden;
            }
            .vertical-slider {
              width: 100%;
              height: auto;
            }
            .vertical-slider ul {
              flex-direction: row;
              gap:3vw;
            }
            .vertical-slider li {
              width: 22vw; 
              height: 22vw;
            }
            .archive-view {
              height: 63.89vw; 
              margin-top:26vw;
            }
            .archive-item-center{
              padding:4vw;
            }
            .archive-view h5 {
              font-size: 4vw;
            }
            #view-flag {
              font-size: 2.4vw;
              padding:1.8vw 4vw;
            }
            .archive-view button{
              right:4vw;
              bottom:4vw;
              margin-top:14px;
            }
            .archive-slider-layout div:nth-child(2) {
              width: 100%;
            }
            .notice-item {
              height: 22.78vw;
            }
            .archive-list .list-title-box{
              font-size:3.4vw;
            }
            .play-button {
              width: 9vw;
              height: 9vw;
            }
            .use-limit footer {
              padding: 11vw 0;
            }
            .archive-for-cover {
              width: 38px;
              height: 38px;
              border-radius: 1.2vw;
            }
            .unique-number small {
              font-size: 10px;
            }
            .unique-number span {
              font-size: 13px;
            }
            .archive-reward-title, .archive-detail-infomation h5 {
              font-size: 14px;
              /* line-height: normal; */
            }
            .archive-detail-infomation {
              font-size: 13px;
              line-height: 1.7;
              padding: 20px 0;
            }
            .archive-ownership-number {
              margin-top: 15px;
            }
            .archive-step-2 {
              margin-top: 20px;
            }
          }
      @media (width <= 420px){
        .use-limit .archive-header .logo {
          width: 15%;
        }
        .use-limit .archive-profile,
        .archive-for-cover {
          margin-right: 12px;
        }
        .db-level .db-title span {
          left: 45px;
        }
        
        .use-limit .db-height {
          height: 32.62vw;
        }
        .full-pie-container svg {
          width: 22.86vw;
          height: 22.86vw;
        }
        .full-pie-container {
          top: 4.88vw;
        }
        .use-limit .db-holding, .use-limit .db-portfolio, .use-limit .db-level {
          padding: 4.88vw 4vw;
        }
        .archive-list, 
        .use-limit .db-divide, 
        .use-limit .db-infograph, 
        .vertical-slider ul, 
        .archive-slider-layout, 
        .notice-item {
          gap: 2.38vw;
        }
        #view-flag {
          font-size: 10px;
          padding:2.18vw 4.85vw;
        }
        .archive-view h5 {
          font-size: 5.56vw;
        }
        .archive-view button {
          font-size: 11px;
          padding: 8px 24px;
          border-radius: 30px;
        }
        .archive-player {
          height: 50vw;
        }
        .use-limit footer {
          padding: 25px 0;
      }
      }
      @media (width <= 360px){
        .use-limit .archive-header .logo {
          width: 17%;
        }
        .archive-header .logo.show {
          transform: translateX(-90px);
        }
        .archive-welcome span {
          font-size:11px;
        }
        .archive-nickname{
          width:75%;
        }
        .archive-player {
          height: 50vw;
        }
        .unique-number{
          white-space: nowrap;
        }
        .use-limit footer {
          font-size: 9px;
        }
      }