@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');
@font-face {
  font-family: 'UhBeeZZIBA-Regular';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/UhBeeZZIBA-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: '3d';
  src: url('../css/font/sketch_3d/Sketch\ 3D.woff') format('truetype');
}
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    color: inherit;
}
body{
    color: #333;
    line-height: 1;
    overflow-x: hidden;
    cursor: url('../img/cursor.png') 38 33, auto;
}
.container{
  width: 500vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
}
.box {
  width: 100vw;
  height: 100vh;
}

/* --------------------------배경 매트릭스-------------------------------------- */
.matrix{
  position: absolute;
  top: 0;
  left: 0;
  display: flex; 
  overflow: hidden;
  align-items: center; 
  justify-content: center;
  background: #000000; 
  opacity: 0.3;
}
.matrix main{
  display: flex;
}
.matrix p{
  line-height: 1;

}
.matrix span{
  display: block;
  width: 2vmax; 
  height: 2vmax; 
  font-size: 1vmax; 
  color: #9bff9b11;
  text-align: center;
  font-family: "Helvetica Neue", Helvetica, sans-serif;
}

/* --------------------------💛header 시작💛-------------------------------- */
#wrap{
    width: 1920px;
    margin: 0 auto;
    position: relative;
}
header{
    font-family: "Press Start 2P";
    position: absolute;
    top: 0px;
    left: 55px;
    z-index: 2;
}
header .inner h1 > a{
    display: block;
    height: 156px;
    cursor: url('../img/pointer.png') 38 33, auto;
}
header .inner nav{
    width: 300px;
    display: flex;
    flex-wrap: wrap;
}
header .inner nav a {
    width: 100%;
    font-size: 25px;
    height: 90px;
    line-height: 90px;
    cursor: url('../img/pointer.png') 38 33, auto;
}
header .inner nav a:last-child{
    margin-top: 70px;
    font-size: 30px;
}
header .inner nav a:nth-child(1){
    margin-top: 50px;
    color: #59f5ff;
    animation: neon1 1.5s ease-in-out infinite alternate;
}
@keyframes neon1 {
  from {
    text-shadow: 0 0 10px #ffffff84, 0 0 20px #ffffff84, 0 0 30px #ffffff84, 0 0 40px #59f5ff,
      0 0 70px #59f5ff, 0 0 80px #59f5ff, 0 0 100px #59f5ff, 0 0 150px #59f5ff;
  }
  to {
    text-shadow: 0 0 5px #ffffff84, 0 0 10px #ffffff84, 0 0 15px #ffffff84, 0 0 20px #59f5ff,
      0 0 35px #59f5ff, 0 0 40px #59f5ff, 0 0 50px #59f5ff, 0 0 75px #59f5ff;
  }
}
header .inner nav a:nth-child(2){
    color: #4afc74;
    animation: neon2 1.5s ease-in-out infinite alternate;
}
@keyframes neon2 {
  from {
    text-shadow: 0 0 10px #ffffff84, 0 0 20px #ffffff84, 0 0 30px #ffffff84, 0 0 40px #4afc74,
      0 0 70px #4afc74, 0 0 80px #4afc74, 0 0 100px #4afc74, 0 0 150px #4afc74;
  }
  to {
    text-shadow: 0 0 5px #ffffff84, 0 0 10px #ffffff84, 0 0 15px #ffffff84, 0 0 20px #4afc74,
      0 0 35px #4afc74, 0 0 40px #4afc74, 0 0 50px #4afc74, 0 0 75px #4afc74;
  }
}
header .inner nav a:nth-child(3){
    color: #fc4ab7;
    animation: neon3 1.5s ease-in-out infinite alternate;
}
@keyframes neon3 {
  from {
    text-shadow: 0 0 10px #ffffff84, 0 0 20px #ffffff84, 0 0 30px #ffffff84, 0 0 40px #fc4ab7,
      0 0 70px #fc4ab7, 0 0 80px #fc4ab7, 0 0 100px #fc4ab7, 0 0 150px #fc4ab7;
  }
  to {
    text-shadow: 0 0 5px #ffffff84, 0 0 10px #ffffff84, 0 0 15px #ffffff84, 0 0 20px #fc4ab7,
      0 0 35px #fc4ab7, 0 0 40px #fc4ab7, 0 0 50px #fc4ab7, 0 0 75px #fc4ab7;
  }
}
header .inner nav a:nth-child(4){
    color: #4afc74;
    animation: neon2 1.5s ease-in-out infinite alternate;
}
header .inner nav a:nth-child(5){
    color: #59f5ff;
    animation: neon1 1.5s ease-in-out infinite alternate;
}
header .inner nav a:nth-child(6){
    color: #fc4ab7;
    animation: neon3 1.5s ease-in-out infinite alternate;
}
header .inner nav a:nth-child(7){
    color: #e4ff00;
    animation: neon4 1.5s ease-in-out infinite alternate;
}
@keyframes neon4 {
  from {
    text-shadow: 0 0 10px #ffffff84, 0 0 20px #ffffff84, 0 0 30px #ffffff84, 0 0 40px #e4ff00,
      0 0 70px #e4ff00, 0 0 80px #e4ff00, 0 0 100px #e4ff00, 0 0 150px #e4ff00;
  }
  to {
    text-shadow: 0 0 5px #ffffff84, 0 0 10px #ffffff84, 0 0 15px #ffffff84, 0 0 20px #e4ff00,
      0 0 35px #e4ff00, 0 0 40px #e4ff00, 0 0 50px #e4ff00, 0 0 75px #e4ff00;
  }
}
.cybr-btn {
    --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 1%));
    --shadow-primary: hsl(var(--shadow-primary-hue), 90%, 50%);
    --primary-hue: 0;
    --primary-lightness: 50;
    /* --color: hsl(0, 0%, 100%); */
    --color: hsl(0, 0%, 100%);
    --font-size: 26px;
    --shadow-primary-hue: 180;
    --label-size: 9px;
    --shadow-secondary-hue: 60;
    --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
    --clip: polygon(0 0, 100% 0, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 70%);
    --border: 4px;
    --shimmy-distance: 5;
    --clip-one: polygon(0 2%, 100% 2%, 100% 95%, 95% 95%, 95% 90%, 85% 90%, 85% 95%, 8% 95%, 0 70%);
    --clip-two: polygon(0 78%, 100% 78%, 100% 100%, 95% 100%, 95% 90%, 85% 90%, 85% 100%, 8% 100%, 0 78%);
    --clip-three: polygon(0 44%, 100% 44%, 100% 54%, 95% 54%, 95% 54%, 85% 54%, 85% 54%, 8% 54%, 0 54%);
    --clip-four: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
    --clip-five: polygon(0 0, 100% 0, 100% 0, 95% 0, 95% 0, 85% 0, 85% 0, 8% 0, 0 0);
    --clip-six: polygon(0 40%, 100% 40%, 100% 85%, 95% 85%, 95% 85%, 85% 85%, 85% 85%, 8% 85%, 0 70%);
    --clip-seven: polygon(0 63%, 100% 63%, 100% 80%, 95% 80%, 95% 80%, 85% 80%, 85% 80%, 8% 80%, 0 70%);
    color: var(--color);
    background: transparent;
    text-transform: uppercase;
    font-size: var(--font-size);
    outline: transparent;
    letter-spacing: 2px;
    position: relative;
    font-weight: 700;
    border: 0;
    /* min-width: 300px; */
    width: 200px;
    /* height: 75px; */
    height: 40px;
    /* line-height: 75px; */
    line-height: 40px;
  }

  
  .cybr-btn:before {
    background: var(--shadow-primary);
    transform: translate(var(--border), 0);
  }
  
  .cybr-btn:after {
    background: var(--primary);
  }
  .cybr-btn__glitch {
    position: absolute;
    top: calc(var(--border) * -1);
    left: calc(var(--border) * -1);
    right: calc(var(--border) * -1);
    bottom: calc(var(--border) * -1);
    /* background: var(--shadow-primary); */
    text-shadow: 2px 2px var(--shadow-primary), -2px -2px var(--shadow-secondary);
    clip-path: var(--clip);
    animation: glitch 2s infinite;
    display: none;
  }
  
  .cybr-btn:hover .cybr-btn__glitch {
    display: block;
  }
  
  .cybr-btn__glitch:before {
    content: '';
    position: absolute;
    top: calc(var(--border) * 1);
    right: calc(var(--border) * 1);
    bottom: calc(var(--border) * 1);
    left: calc(var(--border) * 1);
    clip-path: var(--clip);
    /* background: var(--primary); */
    z-index: -1;
  }
@keyframes glitch {
    0% {
      clip-path: var(--clip-one);
    }
    2%, 8% {
      clip-path: var(--clip-two);
      transform: translate(calc(var(--shimmy-distance) * -100%), 0);
    }
    6% {
      clip-path: var(--clip-two);
      transform: translate(calc(var(--shimmy-distance) * 100%), 0);
    }
    9% {
      clip-path: var(--clip-two);
      transform: translate(0, 0);
    }
    10% {
      clip-path: var(--clip-three);
      transform: translate(calc(var(--shimmy-distance) * 5%), 0);
    }
    13% {
      clip-path: var(--clip-three);
      transform: translate(0, 0);
    }
    14%, 21% {
      clip-path: var(--clip-four);
      transform: translate(calc(var(--shimmy-distance) * 5%), 0);
    }
    25% {
      clip-path: var(--clip-five);
      transform: translate(calc(var(--shimmy-distance) * 5%), 0);
    }
    30% {
      clip-path: var(--clip-five);
      transform: translate(calc(var(--shimmy-distance) * -5%), 0);
    }
    35%, 45% {
      clip-path: var(--clip-six);
      transform: translate(calc(var(--shimmy-distance) * -5%));
    }
    40% {
      clip-path: var(--clip-six);
      transform: translate(calc(var(--shimmy-distance) * 5%));
    }
    50% {
      clip-path: var(--clip-six);
      transform: translate(0, 0);
    }
    55% {
      clip-path: var(--clip-seven);
      transform: translate(calc(var(--shimmy-distance) * 5%), 0);
    }
    60% {
      clip-path: var(--clip-seven);
      transform: translate(0, 0);
    }
    31%, 61%, 100% {
      clip-path: var(--clip-four);
    }
  }
  

/* ------------------------main_visual 시작--------------------------- */

.bg{
    width: 100vw;
    height: 100vh;
    position: relative;
}
.bg video{
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: relative;
  z-index: -3;
}

.container .box .bg::after{
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.297);
  z-index: -2;

}
.box.main .bg .inner_01 div span{
    position: absolute;
    left: -999999999999px;
}
.box.main .bg .inner_02 div span{
  position: absolute;
  left: -999999999999px;

}
.box.main .bg .inner_01 div{
    position: absolute;
    background: #b0b0b0;
    animation: neon5 1.5s ease-in-out infinite alternate;

}
.box.main .bg .inner_01 div:nth-child(1){
    width: 1860px;
    height: 3px;
    top: 20px;
    left: 20px;
}
.box.main .bg .inner_01 div:nth-child(2){
    width: 3px;
    height: 910px;
    top: 20px;
    left: 20px;
}
.box.main .bg .inner_01 div:nth-child(3){
    width: 3px;
    height: 910px;
    top: 20px;
    right: 40px;
}
.box.main .bg .inner_01 div:nth-child(4){
    width: 1860px;
    height: 3px;
    bottom: 20px;
    left: 20px;
}
.box.main .bg .inner_02 div{
    position: absolute;
    background: #b4fffc;
    animation: neon6 1.5s ease-in-out infinite alternate;

}
.box.main .bg .inner_02 div:nth-child(1){
    width: 1800px;
    height: 3px;
    top: 50px;
    left: 50px;
}
.box.main .bg .inner_02 div:nth-child(2){
    width: 3px;
    height: 850px;
    top: 50px;
    left: 50px;
}
.box.main .bg .inner_02 div:nth-child(3){
    width: 3px;
    height: 850px;
    top: 50px;
    right: 70px;
}
.box.main .bg .inner_02 div:nth-child(4){
    width: 1800px;
    height: 3px;
    bottom: 50px;
    left: 50px;
}
@keyframes neon5 {
    from {
      box-shadow: 0 0 10px #ffffff84, 0 0 20px #ffffff84, 0 0 30px #ffffff84, 0 0 40px #b0b0b0,
        0 0 70px #b0b0b0, 0 0 80px #b0b0b0, 0 0 100px #b0b0b0, 0 0 150px #b0b0b0;
    }
    to {
      box-shadow: 0 0 5px #ffffff84, 0 0 10px #ffffff84, 0 0 15px #ffffff84, 0 0 20px #b0b0b0,
        0 0 35px #b0b0b0, 0 0 40px #b0b0b0, 0 0 50px #b0b0b0, 0 0 75px #b0b0b0;
    }
  }
@keyframes neon6 {
    from {
      box-shadow: 0 0 10px #ffffff84, 0 0 20px #ffffff84, 0 0 30px #ffffff84, 0 0 40px #b4fffc,
        0 0 70px #b4fffc, 0 0 80px #b4fffc, 0 0 100px #b4fffc, 0 0 150px #b4fffc;
    }
    to {
      box-shadow: 0 0 5px #ffffff84, 0 0 10px #ffffff84, 0 0 15px #ffffff84, 0 0 20px #b4fffc,
        0 0 35px #b4fffc, 0 0 40px #b4fffc, 0 0 50px #b4fffc, 0 0 75px #b4fffc;
    }
  }
 
  .text-change-container {
    letter-spacing: 10px;
    position: absolute;
    text-align: center;
    top: 100px;
    right: 100px;
    font-size: 30px;
    transform: translateY(-50%);
    justify-content: center;
    align-items: center;
    display: flex;
  }
  .text-change {
    font-family: "Press Start 2P";
    font-weight: normal;
    font-size: larger;
    color: #eaff00;
    filter: drop-shadow(0 0 0.3em rgba(200,200,200,0.3));
  }
  .dud {
    color: rgb(255, 255, 255);
    filter: drop-shadow(0 0 0.5em rgb(60, 255, 213));
  }
   
/* ------------------------cont_01 시작--------------------------- */
.cont_01 .inner{
  color: #fff;
  font-family: "Press Start 2P";
  position: absolute;
  top: 50px;
  left: 1970px;
  z-index: 1;
  width: 1820px;
}
@keyframes neon7 {
  from {
    box-shadow: 0 0 10px #ffffff84, 0 0 20px #ffffff84, 0 0 25px #ffffff84, 0 0 30px #b0b0b0;
    box-shadow: 0 0 10px #ffffff84, 0 0 20px #ffffff84, 0 0 25px #ffffff84, 0 0 30px #b0b0b0 inset;
  }
  to {
    box-shadow: 0 0 5px #ffffff84, 0 0 10px #ffffff84, 0 0 15px #ffffff84, 0 0 20px #b0b0b0;
    box-shadow: 0 0 5px #ffffff84, 0 0 10px #ffffff84, 0 0 15px #ffffff84, 0 0 20px #b0b0b0 inset;
  }
}

.cont_01 .inner .title{
  height: 100px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 3px solid #b0b0b0;
  border-radius: 20px;
  margin-bottom: 50px;
  animation: neon7 1.5s ease-in-out infinite alternate;
  background: #0000009d;
  overflow-x: hidden;
  cursor: url('../img/pointer.png') 38 33, auto;
}
.cont_01 .inner .title p{
  animation: slide 200s infinite linear;
  font-size: 50px;
  white-space: nowrap;
}
.cont_01 .inner .title img{
  margin: 0 100px;
}
.cont_01 .inner .title p span{
  color: #ea4afc;
}
@keyframes slide{
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(-100%);
  }
}
.cont_01 .inner .arti{
  height: calc(100vh - 250px);
  border: 3px solid #b0b0b0;
  border-radius: 20px;
  position: relative;
  animation: neon7 1.5s ease-in-out infinite alternate;
  display: none;

}
.cont_01 .inner .arti .img{
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
}
.cont_01 .inner .arti .img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  transition: 0.5s;
  cursor: url('../img/pointer.png') 38 33, auto;
}
.cont_01 .inner .arti .img img:hover{
  opacity: 1;
}
.cont_01 .inner .arti .info{
  width: 60%;
  height: 60%;
  border-left: 3px solid #b0b0b0;
  border-bottom: 3px solid #b0b0b0;
  border-radius: 0 20px 0 20px;
  position: absolute;
  top: 0;
  right: 0;
  overflow: hidden;
  animation: neon7 1.5s ease-in-out infinite alternate;
  background: #0000009d;


}
.cont_01 .inner .arti .info .up{
  height: 15%;
}
.cont_01 .inner .arti .info .up ul{
  display: flex;
  height: 100%;
  align-items: center;
  border-bottom: 3px solid #b0b0b0;
  animation: neon7 1.5s ease-in-out infinite alternate;

}
.cont_01 .inner .arti .info .up ul li{
  width: calc(100% / 5);
  border-right: 3px solid #b0b0b0;
  animation: neon7 1.5s ease-in-out infinite alternate;
  height: 100%;
  text-align: center;
  line-height: 63px;
  cursor: url('../img/pointer.png') 38 33, auto;

}
.cont_01 .inner .arti .info .down{
  height: 85%;
}
.cont_01 .inner .arti .info .down .item{
  display: none;

}
.cont_01 .inner .arti .info .down .item.on{
  width: 100%;
  height: 100%;
  display: flex;
}
.cont_01 .inner .arti .info .down .item.on .left{
  height: 100%;
  border-right: 3px solid #b0b0b0;
  animation: neon7 1.5s ease-in-out infinite alternate;
  width: 200%;

}
.cont_01 .inner .arti .info .down .item.on .left img{
  width: 100%;
  height: calc(100% / 3);
  object-fit: cover;
  cursor: url('../img/pointer.png') 38 33, auto;
}
.cont_01 .inner .arti .info .down .item.on .right{
  padding: 30px;
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
}
.cont_01 .inner .arti .info .down .item.on .right h4{
  font-size: 30px;
}
.cont_01 .inner .arti .info .down .item.on .right p{
  line-height: 1.3;
}

/* ------------------------cont_02 시작--------------------------- */

.cont_02 .inner{
  color: #fff;
  font-family: "Press Start 2P";
  width: 1820px;
  position: absolute;
  top: 50px;
  left: 3890px;
  height: 860px;
  border:  3px solid #b0b0b0;
  border-radius: 20px;
  overflow: hidden;
  animation: neon7 1.5s ease-in-out infinite alternate;
}
.cont_02 .inner .arti{
  width: 1820px;
  height: 100%;
  display: flex;
}
.cont_02 .inner .arti .left{
  width: 50%;
  height: 100%;
  border-right: 3px solid #b0b0b0;
  animation: neon7 1.5s ease-in-out infinite alternate;
}
.cont_02 .inner .arti .left .item{
  display: none;
}
.cont_02 .inner .arti .left .item.on {
  display: block;
  height: 90%;
  border-bottom: 3px solid #b0b0b0;
  animation: neon7 1.5s ease-in-out infinite alternate;
  cursor: url('../img/pointer.png') 38 33, auto;
}
.cont_02 .inner .arti .left .item.on:nth-child(2) .in{
  display: none;
}
.cont_02 .inner .arti .left .item.on:nth-child(2) .in.on{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 20px;
}
.cont_02 .inner .arti .left .item.on:nth-child(2) img{
  width: 380px;
  height: 214px;
  margin-bottom: 30px;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info{
  display: none;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(1) h4{
  color: #ee77f9;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(1) p{
  color: #ffe53e;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(2) h4{
  color: #82a29f;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(2) p{
  color: #e7ffff;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(3) h4{
  color: #7e4788;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(3) p{
  color: #fae0fd;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(4) h4{
  color: #5bfef9;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(4) p{
  color: #008eda;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(5) h4{
  color: #ff4234;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(5) p{
  color: #feb858;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(6) h4{
  color: #61b9c5;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(6) p{
  color: #fef8d8;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(7) h4{
  color: #09fac5;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(7) p{
  color: #38d7ff;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(8) h4{
  color: #c548a3;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(8) p{
  color: #f6cec4;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(9) h4{
  color: #b99fcf;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(9) p{
  color: #c1807a;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(10) h4{
  color: #33675a;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(10) p{
  color: #a23d21;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(11) h4{
  color: #c8ebff;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(11) p{
  color: #6f93cd;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(12) h4{
  color: #d0d44c;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(12) p{
  color: #748634;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(13) h4{
  color: #e6aa76;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(13) p{
  color: #70f2ce;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(14) h4{
  color: #ffedbb;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(14) p{
  color: #de4f4b;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(15) h4{
  color: #7ff0c5;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(15) p{
  color: #9afef2;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(16) h4{
  color: #56ffd6;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(16) p{
  color: #ff2388;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(17) h4{
  color: #479541;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(17) p{
  color: #076c88;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(18) h4{
  color: #983037;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(18) p{
  color: #acfeff;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(19) h4{
  color: #fffedf;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(19) p{
  color: #fff533;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(20) h4{
  color: #b3e8f0;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(20) p{
  color: #f4f2b9;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(21) h4{
  color: #23a69e;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(21) p{
  color: #fbd848;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(22) h4{
  color: #c6454a;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info:nth-child(22) p{
  color: #2ca227;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info.on{
  display: block;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info.on h4{
  padding: 20px;
  font-size: 24px;
}
.cont_02 .inner .arti .left .item.on:nth-child(3) .info.on p{
  padding: 0 20px;
  line-height: 1.3;
  font-size: 14px;
}
.cont_02 .inner .arti .left .item.on >img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
  transition: 0.5s;
}
.cont_02 .inner .arti .left .item.on >img:hover{
  opacity: 1;
}
.cont_02 .inner .arti .left .item.on .in.on > img{
  object-fit: cover;
  opacity: 0.2;
  transition: 0.5s;
}
.cont_02 .inner .arti .left .item.on .in.on img:hover{
  opacity: 1;
}
.cont_02 .inner .arti .left .item .info.on{
  opacity: 0.2;
  transition: 1s;
}
.cont_02 .inner .arti .left .item .info.on img{
  width: 100%;
  object-fit: cover;
}
.cont_02 .inner .arti .left .item .info.on:hover{
  opacity: 1;
}
.cont_02 .inner .arti .left .down{
  display: flex;
  background: #0000009d;
  height: 10%;
}
.cont_02 .inner .arti .left .down div{
  width: calc(100% / 4);
  height: 100%;
  width: 100%;
  border-right: 3px solid #b0b0b0;
  animation: neon7 1.5s ease-in-out infinite alternate;
  position: relative;
  line-height: 85px;
  text-align: center;
  background: #ffffff48;
  cursor: url('../img/pointer.png') 38 33, auto;
}
.cont_02 .inner .arti .left .down div:last-child{
  border-right: 0;
}
.cont_02 .inner .arti .left .down div img{
 width: 50%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
}
.cont_02 .inner .arti .center{
  width: 30%;
  height: 100%;
  border-right: 3px solid #b0b0b0;
  background: transparent;
  transition: 1s;
  animation: neon7 1.5s ease-in-out infinite alternate;
}
.cont_02 .inner .arti .center:hover{
  background: #0000009d;
}
.cont_02 .inner .arti .center .info {
  display: none;
}
.cont_02 .inner .arti .center .info.on {
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  flex-wrap: wrap;
}
.cont_02 .inner .arti .center:hover .info.on:nth-child(1){
  opacity: 1;
}
.cont_02 .inner .arti .center .info.on:nth-child(1){
  letter-spacing: 2px;
  line-height: 1.5;
  opacity: 0.2;
  transition: 1s;
}
.cont_02 .inner .arti .center .info.on:nth-child(1) h4{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  color: #ff2388;
}
.cont_02 .inner .arti .center .info.on:nth-child(1) a{
  display: flex;
  justify-content: center;
}
.cont_02 .inner .arti .center .info.on:nth-child(1) p{
  text-align: center;
  font-size: 20px;
}
.cont_02 .inner .arti .center .info.on:nth-child(2) .btn{
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.cont_02 .inner .arti .center .info.on:nth-child(2) .btn > span{
  width: 200px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  cursor: url('../img/pointer.png') 38 33, auto;
  backdrop-filter: blur(10px);
  background-color: transparent;
  transition: 1s;
  position: relative;
}
.cont_02 .inner .arti .center .info.on:nth-child(2) .btn > span .triangle span{
  position: absolute;
  top: -9999999999999999px;
}
.cont_02 .inner .arti .center .info.on:nth-child(2) .btn > span .triangle{
  position: absolute;
  bottom: 0px;
  left: 0px;
  z-index: 4;
  border-bottom: 25px solid #ffffff;
  border-right: 25px solid transparent;
}
.cont_02 .inner .arti .center .info.on:nth-child(2) .btn > span.on{
  background-color: rgb(75, 255, 32);
}
.cont_02 .inner .arti .center .info.on:nth-child(2) .btn > span:hover{
  background-color: #00f0ff;
}

.cont_02 .inner .arti .center .info:nth-child(3){
  padding: 0;
  overflow-y: scroll;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(1):hover{
  color: #ee77f9;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(2):hover{
  color: #82a29f;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(3):hover{
  color: #7e4788;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(4):hover{
  color: #5bfef9;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(5):hover{
  color: #ff4234;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(6):hover{
  color: #61b9c5;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(7):hover{
  color: #09fac5;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(8):hover{
  color: #c548a3;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(9):hover{
  color: #b99fcf;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(10):hover{
  color: #33675a;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(11):hover{
  color: #c8ebff;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(12):hover{
  color: #d0d44c;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(13):hover{
  color: #e6aa76;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(14):hover{
  color: #ffedbb;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(15):hover{
  color: #7ff0c5;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(16):hover{
  color: #56ffd6;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(17):hover{
  color: #479541;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(18):hover{
  color: #983037;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(19):hover{
  color: #fffedf;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(20):hover{
  color: #b3e8f0;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(21):hover{
  color: #23a69e;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:nth-child(22):hover{
  color: #c6454a;
}
.cont_02 .inner .arti .center .info:nth-child(3)::-webkit-scrollbar{
  width: 10px;  
}
.cont_02 .inner .arti .center .info:nth-child(3)::-webkit-scrollbar-thumb{
  background-color: #fffedf;
  border-radius: 10px;
}
.cont_02 .inner .arti .center .info:nth-child(3)::-webkit-scrollbar-track{
  border-radius: 10px;
  background-color: #ba3cbeb3;
  box-shadow: inset 0px 0px 5px white;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4{
  margin: 20px;
  position: relative;
  transition: 1s;
}
.cont_02 .inner .arti .center .info:nth-child(3) h4:hover{
  transform: translateX(10px);
  cursor: url('../img/pointer.png') 38 33, auto;
}
.cont_02 .inner .arti .center .info h4{
  width: 100%;
}
.cont_02 .inner .arti .center .info a{
  width: 100%;
  display: block;
  height: 150px;
}
.cont_02 .inner .arti .center .info a img{
  height: 100%;
  object-fit: cover;
  cursor: url('../img/pointer.png') 38 33, auto;
}
.cont_02 .inner .arti .right{
  width: 20%;
  height: 100%;
}
.cont_02 .inner .arti .right .title{
  border-bottom: 3px solid #b0b0b0;
  animation: neon7 1.5s ease-in-out infinite alternate;
  height: 20%;
}
.cont_02 .inner .arti .right .title a img{
  cursor: url('../img/pointer.png') 38 33, auto;
}
.cont_02 .inner .arti .right .list{
  width: 100%;
  height: 80%;
  display: flex;
}
.cont_02 .inner .arti .right .list p{
  cursor: url('../img/pointer.png') 38 33, auto;
  width: calc(100% / 3);
  height: 100%;
  word-break: break-all;
  padding: 10px;
  font-size: 60px;
  letter-spacing: 10px;
  line-height: 1.3;
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  border-right: 3px solid #b0b0b0;
  background: #0000009d;
  animation: neon7 1.5s ease-in-out infinite alternate;
  position: relative;
  top: 0;
}
.cont_02 .inner .arti .right .list p:hover{
  background: transparent;
  top: -20px;
  transition: 0.5s;
  border: 0;
  animation: none;
}
.cont_02 .inner .arti .right .list p:last-child{
  border-right: 0;
}

/* ------------------------------------💛cont_03 시작💛-------------------------------- */
.cont_03 .change{
  width: 100%;
  height: 100%;
}
.cont_03 .inner{
  display: none;
}
.cont_03 .inner.on{
  font-family: "Press Start 2P";
  color: #fff;
  width: 1820px;
  height: 860px;
  border: 3px solid #b0b0b0;
  position: absolute;
  top: 50px;
  left: 5810px;
  border-radius: 20px;
  display: flex;
  animation: neon7 1.5s ease-in-out infinite alternate;
}

.cont_03 .inner.on .img{
  width: 60%;
  height: 100%;
  border-right: 3px solid #b0b0b0;
  animation: neon7 1.5s ease-in-out infinite alternate;
  display: flex;
  flex-wrap: wrap;
  padding: 50px;
  justify-content: space-between;
  position: relative;
}
.cont_03 .inner.on .img::after{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: 0.5s;
  background: #0000000e;
  backdrop-filter: blur(10px);
  z-index: -1;
}
.cont_03 .inner.on .img{
  transition: 0.5s;
}
.cont_03 .inner.on .img .item{
  width: 300px;
  opacity: 0.2;
  transition: 0.5s;
  cursor: url('../img/pointer.png') 38 33, auto;
}
.cont_03 .inner.on .img .item:hover{
  opacity: 1;
}
.cont_03 .inner.on .cont{
  width: 40%;
  height: 100%;
}
.cont_03 .inner.on .cont .title{
  height: 10%;
  width: 100%;
  border-bottom: 3px solid #b0b0b0;
  animation: neon7 1.5s ease-in-out infinite alternate;
  display: flex;
  background: #00000070;
}
.cont_03 .inner.on .cont .title h4{
  line-height: 83px;
  font-size: 50px;
  width: 50%;
  text-align: center;
}
.cont_03 .inner.on .cont .title h4:first-child{
  border-right: 3px solid #b0b0b0;
}
.cont_03 .inner.on .cont .item_01{
  padding: 20px;
  width: 100%;
  height: 20%;
  border-bottom: 3px solid #b0b0b0;
  animation: neon7 1.5s ease-in-out infinite alternate;
}
.cont_03 .inner.on .cont .item_01 p{
  display: none;
}
.cont_03 .inner.on .cont .item_01 p.on{
  display: block;
  line-height: 1.5;
  letter-spacing: 2px;
  font-size: 20px;
}
.cont_03 .inner.on .cont .item_02{
  padding: 20px;
  width: 100%;
  height: 25%;
  border-bottom: 3px solid #b0b0b0;
  animation: neon7 1.5s ease-in-out infinite alternate;
  overflow: hidden;
  overflow-y: scroll;
}
.cont_03 .inner.on .cont .item_02 p{
  display: none;
}
.cont_03 .inner.on .cont .item_02 p.on{
  display: block;
  line-height: 1.3;
  font-size: 18px;
  letter-spacing: 2px;
}
.cont_03 .inner.on .cont .item_02::-webkit-scrollbar{
  width: 10px;  
}
.cont_03 .inner.on .cont .item_02::-webkit-scrollbar-thumb{
  background-color: #fffedf;
  border-radius: 10px;
}
.cont_03 .inner.on .cont .item_02::-webkit-scrollbar-track{
  border-radius: 10px;
  background-color: #44ddffb3;
  box-shadow: inset 0px 0px 5px white;
}
.cont_03 .inner.on .cont .item_03{
  display: flex;
  width: 100%;
  height: 10%;
  border-bottom: 3px solid #b0b0b0;
  animation: neon7 1.5s ease-in-out infinite alternate;
  background: #00000070;
}
.cont_03 .inner.on .cont .item_03 h3{
  padding: 0 20px;
  text-align: center;
  line-height: 83px;
  font-size: 37px;
  border-right: 3px solid #b0b0b0;
  animation: neon7 1.5s ease-in-out infinite alternate;
  position: relative;
  left: 0;
  transition: 0.5s;
  cursor: url('../img/pointer.png') 38 33, auto;
}
.cont_03 .inner.on .cont .item_03 h3:hover{
  left: 10px;
  animation: none;
  border-right: 0;
}
.cont_03 .inner.on .cont .item_03 h3:last-child{
  border-right: 0;
  font-size: 21px;
}
.cont_03 .inner.on .cont .item_04{
  width: 100%;
  height: 35%;
  overflow: hidden;
  transition: 1s;
}
.cont_03 .inner.on .cont .item_04 .big_img{
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cont_03 .inner.on .cont .item_04 .big_img img{
  display: none;
}
.cont_03 .inner.on .cont .item_04 .big_img img.on{
  display: block;
  height: 95%;
  object-fit: cover;
  opacity: 0.2;
  transition: 1s;
}
.cont_03 .inner.on .cont .item_04:hover .big_img img.on{
  opacity: 1;
  box-shadow: 5px 5px 10px;
}

/* ------------------------------------💛cont_04 시작💛-------------------------------- */

.cont_04 .inner{
  font-family: "Press Start 2P";
  color: #fff;
  width: 1820px;
  height: 860px;
  position: absolute;
  top: 50px;
  left: 7730px;
  border: 3px solid #b0b0b0;
  border-radius: 20px;
  display: flex;
  animation: neon7 1.5s ease-in-out infinite alternate;
}
.cont_04 .inner > div{
  width: calc(100% /3);
  height: 100%;
  border-right: 3px solid #b0b0b0;
  animation: neon7 1.5s ease-in-out infinite alternate;
}
.cont_04 .inner > div h3{
  cursor: url('../img/pointer.png') 38 33, auto;
  height: 100%;
}
.cont_04 .inner > div:last-child{
  border: 0;
}
.cont_04 .inner > div .title{
  height: 10%;
  width: 100%;
  border-bottom: 3px solid #b0b0b0;
  animation: neon7 1.5s ease-in-out infinite alternate;
  display: flex;
  justify-content: center;
  padding: 0 20px;
  line-height: 85px;
  letter-spacing: 5px;
  font-size: 30px;
}

.cont_04 .inner > div .end{
  border-top: 3px solid #b0b0b0;
  animation: neon7 1.5s ease-in-out infinite alternate;
  height: 10%;
  width: 100%;
  display: flex;
  text-align: center;
  padding: 0 20px;
  align-items: center;
  color: #787878b1;
  font-size: 12px;
}

.cont_04 .inner .left .cont_01{
  width: 100%;
  height: 50%;
  display: flex;
  position: relative;
}
.cont_04 .inner .left .cont_01 >div{
  width: calc(100% / 3);
  height: 100%;
  opacity: 0.2;
  transition: 1s;
  cursor: url('../img/pointer.png') 38 33, auto;
}
.cont_04 .inner .left .cont_01 >div:nth-child(1){
  background: url('../img/community1.png') left center /cover no-repeat;
}
.cont_04 .inner .left .cont_01 >div:nth-child(1).on{
  background: url('../img/community1.png') center center /cover no-repeat;
}
.cont_04 .inner .left .cont_01 >div:nth-child(2){
  background: url('../img/community2.png') center center /cover no-repeat;
}
.cont_04 .inner .left .cont_01 >div:nth-child(3){
  background: url('../img/community3.png') right center /cover no-repeat;
}
.cont_04 .inner .left .cont_01 >div:nth-child(3).on{
  background: url('../img/community3.png') center center /cover no-repeat;
}
.cont_04 .inner .left .cont_01 >div.on{
  opacity: 1;
  position: absolute;
  width: 600px;
  top: 0;
  left: 0;
  z-index: 3;

}
.cont_04 .inner .left .cont_01 >div span{
  position: absolute;
  top: 99999999999999999px;
}
.cont_04 .inner .left .cont_02{
  width: 100%;
  height: 30%;
  display: flex;
}
.cont_04 .inner .left .cont_02 span{
  display: block;
  width: calc(100% / 8);
  height: 100%;
  word-break: break-all;
  font-size: 22px;
  padding: 10px 20px;
  cursor: url('../img/pointer.png') 38 33, auto;
  border: 3px solid #b0b0b0;
  position: relative;
  top: 0;
  transition: 0.5s;
  animation: neon7 1.5s ease-in-out infinite alternate;
}
.cont_04 .inner .left .cont_02 span:hover{
  animation: none;
  top: -10px;
  border: 0;
}
.cont_04 .inner .left .cont_02 span:last-child{
  border: 0;
}
.cont_04 .inner .center .cont_01{
  width: 100%;
  height: 80%;
}
.cont_04 .inner .center .cont_01 .item{
  display: none;
}
.cont_04 .inner .center .cont_01 .item.on{
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 20px;
}

.cont_04 .inner .center .cont_01 .item a{
  width: 100%;
  display: flex;
  justify-content: space-between;
  line-height: 1.3;
  opacity: 0.5;
  transition: 1s;
  padding: 10px 0;
  align-items: center;
  padding: 0 20px;
  cursor: url('../img/pointer.png') 38 33, auto;
}

.cont_04 .inner .center .cont_01 .item a span{
  font-size: 14px;
  word-break: break-all;
}
.cont_04 .inner .center .cont_01 a:last-child{
  display: block;
  text-align: right;
}
.cont_04 .inner .center .cont_01 a:hover{
  background: #3f79f569;
  opacity: 1;
}
.cont_04 .inner .center .cont_01 a:last-child:hover{
  background: none;
  font-size: 20px;
}

.cont_04 .inner .right .cont_01{
  width: 100%;
  height: 50%;
  border-bottom: 3px solid #b0b0b0;
  animation: neon7 1.5s ease-in-out infinite alternate;
  display: flex;
  align-items: center;
  
}
.cont_04 .inner .right .cont_01 a{
  border: 3px solid #3f79f569;
  width: 50%;
  height: 20%;
  display: flex;
  align-items: center;
  font-size: 25px;
  position: relative;
  color: #fff;
  justify-content: center;
  letter-spacing: 3px;
  cursor: url('../img/pointer.png') 38 33, auto;
  margin: 0 auto;
}
.cont_04 .inner .right .cont_01 a span{
  position: relative;
  z-index: 4;
}
.cont_04 .inner .right .cont_01 a::after{
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  content: "";
  transition: 1s;
  background: #5865F2;
}
.cont_04 .inner .right .cont_01 a:hover::after{
  width: 100%;
}
.cont_04 .inner .right .cont_02{
  width: 100%;
  height: 30%;
}