@font-face {
  font-family: 'SEBANG_Gothic_Bold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2104@1.0/SEBANG_Gothic_Bold.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

#intro
  {position: relative;}

#intro>*
  {position: absolute;}

@keyframes photo{
  
  100%{opacity: 1;}
  }
@keyframes one{
  14%
    {transform: translate(-50%, 21rem);}
  15%
    {transform: translate(-40%, 23rem);}
  16%
    {transform: translate(0, 23.5rem);}
  50%
    {transform: translate(58rem, 23.5rem);
    }
  51%{transform: translate(58.5rem, 23rem);}
  52%{transform: translate(59rem, 22.5rem);}
  53%{transform: translate(59rem, 22rem);}
  67%{transform: translate(59rem, -1rem);}
  68%{transform: translate(58.5rem, -2rem);}
  69%{transform: translate(57.5rem, -3rem);}
  97%{transform: translate(1rem, -3rem);}
  98%{transform: translate(-30%, -2.5rem);}
  }
@keyframes expect
  {100%{background-color: rgb(133, 255, 241);}}
  #intro>img
  {display: none;
  right: 10%;
  }
  #intro .intro
  {font-size: 4.5rem;
  font-weight: bold;
  line-height: 1.5;
  padding: 50px;
  border-radius: 50px;
  border: 1px solid #000;
  left: 5%;
  z-index: 100;
  }
  #intro .intro:before
    {position: absolute;
    content: '';
    display: block;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: gold;
    border: 1px solid #000;
    left: 0;
    transform: translateX(-50%);
    top: 2rem;
    animation: one 15s linear infinite;
    }
    #intro .intro .hide {position: absolute;
  z-index: 100;
  }
  #intro .intro p
    {position :absolute;
    top: 50%;
    left: 75vw;
    display: block;
    transform: translateY(-50%);
    z-index: 0 !important;
    }

  #intro .intro  p>*
   {position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    }
    #intro .intro p img
    {height: 85vh;
    z-index: 100;
    }
    #intro .intro p .halo
    {transform: translate(-50%, -50%) scale(2);
    animation: halo 3s infinite;
    }
    #intro .intro p .halo1
      {animation-delay: 0.3s;} 
  @keyframes halo{
    40%
      {transform: translate(-50%, -50%) scale(2.3);}
    60%{opacity: 0.8}
    }
  #intro .intro b
    {animation: expect 1.5s 2s forwards;}
  #intro .intro span
  {font-weight: normal;
  /* background-color: gold; */
  border: 1px solid #000;
  background-color: #fff;
  padding: 20px;
  border-radius: 50px;
  }
  #intro .intro .hide span{position: absolute;  z-index: 100 !important;}
  #intro .intro span strong
    {  font-size: 5rem;}
  #intro #mainmodal
  {width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  background-color: #eee;
  z-index: 90000;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  }
  #intro #mainmodal>div
  {border: 1px solid #000;
  padding: 30px;
  border-radius: 30px;
  background-color: gold;
  }
  #intro #mainmodal>div>div.degree
    {background-color: #fff;
    padding: 20px;
    border-radius: 20px;
    margin: 0 0 20px;
    }
  #intro #mainmodal>div>div b
  {display: block;
  margin: 10px 0 0;
  }

  #intro #mainmodal .bye
    {padding: 20px 0px;
    border: 1px solid #000;
    border-radius: 50%;
    width: 200px;
    margin: 20px auto;
    font-family: 'SEBANG_Gothic_Bold';
    cursor: pointer;
    transition: 0.2s;
    }
    #intro #mainmodal .bye:hover
      {/* box-shadow: 0 0 10px rgba(0,0,0,0.5); */
      background-color: #a39aff;
      }