.orz {
          border-bottom: 1px solid #ccc;
          width: 100%;
          height: 20%;
          overflow-y: auto;
          overflow-x: hidden;
       }
     #orzl {
        position: fixed;
        top: 10%;
        left: 0%;
        width: 100%;
        height: 89%;
        overflow: scroll;
        }
   #header {
    position: absolute;
    width: 100%;
    height: 10%;
    top: 0%;
    left: 0%;
    background-color: #eee;
   }
  #title {
   position: absolute;
   top: 15%;
   left: 10%;
   font-size: 30px;
  }
 #search { 
   position: absolute;
   height: 50%; 
   width: 30%; 
   background-color: #f6f6f6; 
   top: 20%;
   left: 50%;
   font-size: 20px;
 }
#sub {
   position: absolute;
   height: 40%; 
   width: 15%; 
   background-color: #f6f6f6; 
   top: 25%;
   left: 83%;
   font-size: 20px;
   color: black;
   border-radius: 5px;
 } 
    
   #gn {
     animation: fr 0.5s ease forwards;
     position: absolute;
     background-color: #eee;
     left: -7%;
     top: 10%;
     border-radius: 7%;
     width: 35%;
     height: 90%;
     z-index: 1;
     display: none;
     border: 1px solid black;
}
   #ad {
     position: absolute;
     left: 20%;
     top: 85%;
     width: 80%;
     height: 15%;
     overflow-x: hidden;
     overflow-y: scroll;
     z-index: 1;
      }

 @keyframes fr {
          0% {
            opacity: 0;
            left: -35%;
          }
          100% {
            opacity: 1;
            left: -7%;
          }
        }