header {display: flex;justify-content: space-between;align-items: center;    padding: 2rem 1rem 2rem 2rem;height: 6rem;  position: -webkit-sticky; position: sticky;top:0; }
header > h1 {height: 3rem;}
header > h1 img {height:100%}
header > a {background: #fff;color: #333;padding: 0 1.5rem;font-size: 1.5rem;border-radius: 2rem;    display: flex;justify-content: space-between; align-items: center;height:3rem}
header > a span {color: #333;font-size: 1.5rem;margin: 0 0.5rem;}
header > a img {width: 0.7rem;margin-left: 1rem;}
.main_content {display: flex;flex-direction: column;padding:2rem 1rem 4rem 2rem; position:relative; z-index:1000}
.main_content > div {display: flex;flex-direction: column;margin-bottom:4rem;  }
@keyframes fadeIn {
  
  from {
    transform: translateY(100%);
	opacity:0
  }
  
  to {
    transform: translateY( 0 );
	opacity:1
  }
}
.main_content > div:nth-child(1) { animation: fadeIn 1s ;}
.main_content > div:nth-child(2) { animation: fadeIn 2s}
.main_content > div:nth-child(3) { animation: fadeIn 3s ;}
.main_content > div:nth-child(4) { animation: fadeIn 4s ;}
.main_content > div:nth-child(5) { animation: fadeIn 5s ;}
.main_content > div:nth-child(6) { animation: fadeIn 6s ;}
.main_content > div:nth-child(7) { animation: fadeIn 7s ;}


.main_content > div > p {font-size: 1.6rem; margin-top: 1rem;}
.main_content > div:last-child {margin-bottom:0}
.main_content > div > div  {display: flex;flex-direction: row;    justify-content: space-between;align-items: center;}
.main_content > div > div  h2 {display: flex;font-size: 3rem;font-weight: 900;flex-direction: column;}
.main_content > div > div  h2 span {font-size: 1.5rem;margin-top: 1rem;}
.main_content > div > div  a {background: #fff;color: #333;padding: 0.5rem 1rem;font-size: 1.5rem;border-radius: 3rem;display: flex;align-items: center;    font-weight: 900;}
.main_content > div > div  a img {width:1.5rem;margin-left:.5rem}

.main_content > div > ul  {display: flex;flex-direction: row;justify-content: space-between;align-items: center;margin-top: 1.5rem;flex-wrap: wrap;}
.main_content > div > ul  li {background: rgba(255,255,255,.4);width: 32%;border-radius: 1rem;height: 10rem;}
.main_content > div > ul  li a {display: flex;justify-content: center;align-items: center;align-content: center;flex-direction: column;height: 100%; width: 100%;font-size: 1.5rem;    font-size: 1.8rem; word-break: keep-all;text-align: center}
.main_content > div > ul  li a:hover {transform: scale(1.1);}
.main_content > div > ul  li a img {height: 40%;margin-bottom: 1rem;}


.noise{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
	margin-right:1rem
}
.noise > span{
    width: 2px;
    height: 15px;
    margin: 0 1px;
    border-radius: 3px;
}
.noise > span:nth-child(5){
    background: #cb22d2;
    animation: anim 0.7s infinite;
}
.noise > span:nth-child(4){
    background: #831fcd;
    animation: anim1 0.8s infinite;
}
.noise > span:nth-child(3){
    background: #2223b9;
    animation: anim2 0.9s infinite;
}
.noise > span:nth-child(2){
    background: #1870f3;
    animation: anim3 1s infinite;
}
.noise > span:nth-child(1){
    background: #1ec5ff;
    animation: anim4 1.1s infinite;
}
@keyframes anim{
    0%,100%{
        height: 2px;
    }
    50%{
        height: 15px;
    }
}
@keyframes anim1{
    0%,100%{
        height: 2px;
    }
    50%{
        height: 15px;
    }
}
@keyframes anim2{
    0%,100%{
        height: 2px;
    }
    50%{
        height: 15px;
    }
}
@keyframes anim3{
    0%,100%{
        height: 2px;
    }
    50%{
        height: 15px;
    }
}
@keyframes anim4{
    0%,100%{
        height: 2px;
    }
    50%{
        height: 15px;
    }
}

/* 배경 별 */

#wrap {
    background: url(../img/background_1.png) no-repeat;
    background-size: cover;

    min-width: 100vw;
    min-height: 100vh;
    overflow: hidden;
    position: relative;
}
html {
  /* height: 100%;
  overflow: hidden; */
}

body {
  background-color: #111;
  height: 100%;
}

/* Space */
@keyframes spin {
  
  from {
    transform: rotate( 0deg );
  }
  
  to {
    transform: rotate( 360deg );
  }
}

.space {
  position: absolute;
  width: 400%;
  height: 400vh;
  top: -50%;
  left: -100%;
  transform:translate(-50%,-50%);
  animation: spin 240s linear infinite;
  backface-visibility: visible;
  background-image: url(../img/stars2.png);
}