.title {
color: #5C6AC4;
}
body {
  transition: background-color 2s ease-in-out; /* 2초변화 */
}
#hadra {
  width: 100%;
  height: 10%;
  top: 8%;
  left:0;
  position: fixed;
  background-color: red;
  z-index: 999;
  flex-direction: column;
  transition: background-color 2s ease-in-out; /* 2초 동안 색상 변화 */
  box-shadow: 0px 4px 35px rgba(0, 0, 0, 1);
}
#hadra .dada {
  display: flex;
  position: absolute;
  width: 50%;
  height: 50%;
  left: 25%;
  top: 25%;
}
#hadra .dada .whing {
  width: 25%;
  height: 50%;
  font-size: 1rem;
}
#hadra .dada .nala {
  width: 50%;
  height: 50%;
  font-size: 1rem;
}
#hadra .dada .weeeng {
  width: 25%;
  height: 70%;
  font-size: 1rem;
}

#nouth {
  width: 40%;
  height: 5%;
  top: 18%;
  left:30%;
position: absolute;
  background-color: rgba(255, 0, 0, 0);
}
#mouth {
  transition: background-color 2s ease-in-out; /* 2초 동안 색상 변화 */
  width: 40%;
  height: 500px;
  top: 23%;
  left:30%;
  position: absolute;
  background-color: green;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.9);
}
#zaa {
  width: 80%;
  left: 10%;
z-index: 999;
  height: 30px;
position: fixed;
background-color: white;
  display: grid; /* 그리드 컨테이너 */
  justify-content: center; /* 가로 중앙 정렬 */
}
#tung {
  width: 80%;
  height: 100%;
  top: 30px;
  left:10%;
position: absolute;
  background-color: rgba(0, 0, 255, 0)
}
.flagzs {
  margin-top: 5px;
  width: 100%;
  height: 30px;
position: relative;
background-color: white;
  display: grid; /* 그리드 컨테이너 */
  grid-auto-flow: column; /* 요소를 가로로 배치 */
  justify-content: center; /* 가로 중앙 정렬 */
}
.flagzs span {
  font-weight: bold; /* 굵은 글씨 */
  background-color: rgba(0, 0, 0, 0);
  width: 100%;
  height: 100%;
  display: grid; /* 그리드 컨테이너 */
position: absolute;
  text-align: center; /* 텍스트 중앙 정렬 */
  align-items: center; /* 세로 중앙 정렬 */
 
}
.flagzs .gb {
  white-space: nowrap; /* 텍스트가 줄 바꿈되지 않게 설정 */
  width: 10%;
  left: 0%;
}
.flagzs .gb .gp {
  width: 80%;
  left:0px;
  transform: rotate(90deg); /* 90도 회전하여 세로로 만들기 */
}
.flagzs .gb .ho {
  right: 0;
  width: 30%;
}
.flagzs .gi {
  width: 50%;
  left: 10%;
  height: 100%;
}
.flagzs .di {
  text-align: left;
  width: 40%;
  left: 60%;
  height: 100%;
}

#sun {
  display: flex;
  position: fixed;
  width: 100%;
  height: 2.5%;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}  
  #we {
 z-index: 999;
    display: flex;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 8%;
    background-color: #1e2b20;
    box-shadow: 10px 15px rgba(0, 0, 0, 0.9);
  }
  #we button {
    background-color: rgba(255, 0, 0, 0);
    color: white;
    font-family: 'Times New Roman', 'Georgia', serif;
    font-weight: 700;
  }
  #we div {
    display: flex;
    position: relative;
    height: 100%;
  }
 
  #we .heavy {
    justify-content: flex-start;
    width: 30%;
  }
  #we .heavy div {
    margin-left: 3%;
    width: 40%;
    position: relative;
  }
  #we .heavy div button {
    position: absolute;
    width: 90%;
    left: 10%;
    height: 60%;
    top: 20%;
    border-radius: 15px;
  }
 
  #we .ton {
    width: 40%;
  }
  #we .ton .ver1 {
    left: 0%;
    width: 100%;
  }
  #we .ton div{
    width: 80%;
    left: 50%;
  }
 
  #we .light {
    justify-content: flex-end;
    width: 30%;
  }
  #we .light div {
    width: 30%;
    position: relative;
  }