body{
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 501px) {

  #contents2 {
    display: none;
  }
}


@media screen and (max-width: 500px) {
  #contents {
    display: none;
  }

  body {
    background-color: black;
  }

  #contents2 {
  font-family: 'Noto Sans KR', sans-serif;
  text-align: justify;
  position: absolute;
  padding: 10%;
  word-break: keep-all; 
  line-height: 2;
  font-size: 6px;
  }
}

a {
  color: #fff;
  text-decoration: underline;
}


.hiddentxt {
  font-weight: bold;
  text-decoration: underline;
  color: #ffffff;
  z-index:-1;
}

.hiddentxt2 {
  font-weight: bold;
  text-decoration: underline;
  color: #ffffff;
  z-index:-1;
}

.hiddenimg2 {
  display: none;
  position: absolute;
  margin: 0;    
  top: 4%;      
  left: 13%;
  z-index:-1;
}

.hiddenimg3 {
  display: none;
  position: absolute;
  margin: 0;    
  top: 3%;      
  left: 35%;
  z-index:-1;
}

.hiddenimg4 {
  display: none;
  position: absolute;
  margin: 0;    
  top: 20%;      
  left: 0%;
  z-index:-1;
}

.hiddenimg6 {
  display: none;
  position: absolute;
  margin: 0;    
  top: 20%;      
  left: 10%;
  z-index:-1;
}

.hiddenimg7 {
  display: none;
  position: absolute;
  margin: 0;    
  top: 50%;      
  left: 1%;
  z-index:-1;
}

.hiddenimg8 {
  display: none;
  position: absolute;
  margin: 0;    
  top: 70%;      
  left: 25%;
  z-index:-1;
}

.hiddenimg9 {
  display: none;
  position: absolute;
  margin: 0;    
  top: 50%;      
  left: 0%;
  z-index:-1;
}

.hiddenimg10 {
  display: none;
  position: absolute;
  margin: 0;    
  top: 8%;      
  left: 27%;
  z-index:-1;
}

.hiddenimg11 {
  display: none;
  position: absolute;
  margin: 0;    
  top: 35%;      
  left: 10%;
  z-index:-1;
}

.hiddenimg12 {
  display: none;
  position: absolute;
  margin: 0;    
  top: 40%;      
  left: 10%;
  z-index:-1;
}

.hiddenimg13 {
  display: none;
  position: absolute;
  margin: 0;    
  top: 60%;      
  left: 1%;
  z-index:-1;
}

.hiddenimg14 {
  display: none;
  position: absolute;
  margin: 0;    
  top: 50%;      
  left: 20%;
  z-index:-1;
}


.hiddentxt:hover ~ .hiddenimg2 {
  display: block;
  position: absolute;
  z-index: 300;
}

.hiddentxt:hover ~ .hiddenimg3 {
  display: block;
  position: absolute;
  z-index: 300;
}

.hiddentxt:hover ~ .hiddenimg4 {
  display: block;
  position: absolute;
  z-index: 300;
}

.hiddentxt:hover ~ .hiddenimg6 {
  display: block;
  position: absolute;
  z-index: 300;
}

.hiddentxt:hover ~ .hiddenimg7 {
  display: block;
  position: absolute;
  z-index: 300;
}

.hiddentxt:hover ~ .hiddenimg8 {
  display: block;
  position: absolute;
  z-index: 300;
}

.hiddentxt:hover ~ .hiddenimg9 {
  display: block;
  position: absolute;
  z-index: 300;
}

.hiddentxt2:hover ~ .hiddenimg10 {
  display: block;
  position: absolute;
  z-index: 300;
}

.hiddentxt2:hover ~ .hiddenimg11 {
  display: block;
  position: absolute;
  z-index: 300;
}

.hiddentxt2:hover ~ .hiddenimg12 {
  display: block;
  position: absolute;
  z-index: 300;
}

.hiddentxt2:hover ~ .hiddenimg13 {
  display: block;
  position: absolute;
  z-index: 300;
}

.hiddentxt:hover ~ .hiddenimg14 {
  display: block;
  position: absolute;
  z-index: 300;
}





/* 예원 언니 코딩 */

#example {
  width: 700px;
  height: 300px;
  overflow: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -150px 0px 0px -350px;
  line-height: 2;
  text-align: justify;
  font-family: 'Noto Sans KR', sans-serif;
  color: #fff;
  z-index: 200;
  font-size: 15px;
}

::-webkit-scrollbar {
  display: none;
}

.dd {
  color: #000;
}

#img {
   position: fixed;
   width: 100%;
   height: 100vh;
   z-index: 0;
}

#bul {
  top: 85%;
  left: 90%;

  position: absolute;
  z-index: 200;
}

h1 
{ background: linear-gradient(rgb(189, 189, 189),rgb(117, 117, 117),#2b2b2b,rgb(187, 187, 187) );
color: transparent;
-webkit-background-clip: text; }