ul{list-style: none;} /* 리스트 앞에 . 제거*/
li{list-style: none;}
a{text-decoration: none;} /* 링크에 밑줄 제거*/

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
.grid-container{
  display:grid;
  grid-template-rows:100px 100px;
}

header{
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 125px;
    background-color: #FF94A4;
    z-index: 1000;
    display: flex;
    justify-content: space-between; /* .logo와 #main-navigation 사이에 공간을 분배 */
    align-items: center; /* 수직 가운데 정렬 */
    padding: 0 20px; /* 좌우 여백 추가 */
  }
  
  .logo{
    width: 150px;
    margin-left: 30px;
  }
  
  .content {
    padding-top: 0; /* top 여백 제거 */
    padding-left: 0;
    padding-right: 0;
  }
  .bigimg-container {
      display: flex;
      justify-content: flex-end; 
      width: 100%;
      margin-top:40px;
  }
    
  .bigimg {
      width: 800px;
      margin: 20px;
  }
  
  footer{
    position: relative;
    height: 290px;
    background-color: #FF94A4;
    margin-top: 0 auto;
  }
  
  .sns_container{
      position: absolute;
      right:80px; top:55px;
      width: 120px;
      display: flex; 
      flex-direction:row; 
      justify-content: space-between; 
      align-items: center; 
      gap: 30px;
  }
  
  .sns_container img {
      width: 26px; /* 이미지 크기 조정 */
      height: auto;
      object-fit: contain; /* 이미지 비율 유지 */
  }
  
  .logo2{
      position: absolute;
      width: 90px;
      left: 60px; top:50px;
  }
  
  .text{
      position: absolute;
      font-size: 13px; text-align: left;
      left:60px; top: 120px;
      color: white;
  }
  
  .text2{
      position: absolute;
      font-size: 14.5px; text-align: left;
      left:60px; top: 145px;
      color: white;
  }
  

   content {
   background-color: #ffffff;
   padding-top: 150px;
   padding-bottom: 0; /* .box가 아래로 붙을 수 있도록 제거 */
   min-height: 200vh; /* 전체 높이 차지 */
   display: flex;
   flex-direction: column;
   align-items: center;
   }

   footer{
   height: 290px;
   background-color: #FF94A4;
   }

   #main-navigation {
    display: flex; /* flexbox 적용 */
    justify-content: center; /* 메뉴 항목들을 수평으로 정렬 */
    align-items: center; /* 메뉴 항목들을 수직으로 정렬 */
    height: 100%;
    width: 800px;
    margin-bottom: 10px;
    margin-right:50px;
   }
          
   .outer-menu-item {
   /* 메뉴바 우측정렬 */
    display: flex;
    width: 135px;
    height: 65px;
    align-items: center; 
    justify-content: center;
    margin-top: 15px;
    margin-right: 10px;
    float: right;  
    position: relative;
    color:white;
    font-family: 'EF_hyunydororong', Arial, sans-serif;
    font-size: 20px;
   }      
  
   .outer-menu-item:hover .inner-menu {
    display: block;
   }
  
   .outer-menu-item:hover {
   background: #FFB7C2;
   color: white
   }
  
   .menu-title {
    display: block;
    height: 30px; line-height: 30px;
    text-align: center;
    padding: 5px 20px;
   }
  
   * {
     box-sizing: content-box; /*  설정한 width와 height 값이 곧 요소 내부의 콘텐츠 크기 */
   }
  
  ul {
    list-style-position: inside;
    padding-left: 0;
  }
  
  .inner-menu {
  display: none;
  position: absolute;
  background: #ff4a65;
  color: white;
  z-index: 1200;
  text-align: left;
  left: 0; 
  top: 100%;
  width: 100%;
  margin:0; padding:0;
  }
  
  /* inner-menu-item 기본 스타일 */
  .inner-menu-item > a {
  display: block;
  width: 100%;
  padding: 5px 0;
  height: 40px;
  line-height: 30px;
  text-align: center;
  align-items: center; 
  justify-content: center;
  background-color: #fbeec8;
  color: #FF94A4;
  }
  
  /* inner-menu-item hover 시 스타일 */
  .inner-menu-item > a:hover {
  background:#FF94A4;
  color: white;
  }
  
  /* 썸네일 10개가 들어가는 컨테이너 */
  .flex-container {
    display: flex;
    justify-content: space-between; /* 가로로 아이템 간격 조절 */
    flex-wrap: wrap; /* 요소가 화면을 넘어가면 다음 줄로 배치 */
    margin-left: 30px; 
    margin-right: 30px;
    gap: 40px;
  }
  
h1{
font-family: 'Ownglyph_meetme-Rg';
font-size: 50px;
padding-top: 50px;
padding-bottom: 50px;
color: #5D3333;
}

h2{
font-family: 'Ownglyph_meetme-Rg';
font-size: 35px;
color: #FF94A4;
margin-bottom: 5px;
}


h3{
font-family: 'Ownglyph_meetme-Rg';
font-size: 25px;
color: #5D3333; 
text-align: center;
line-height: 50px;
}

.usa{
width: 200px;
position:absolute;
top: 700px; left:150px;
}

.gif{
width: 250px;
position:absolute;
top: 1350px; right:150px;
}

.box {
    width: 100%;
    height: 150px;
    background-color: #FFEFEF;
    margin: 0 auto; /* 양쪽 여백 제거 */
    margin-top:350px;
    display: flex; 
    justify-content: center; 
    align-items: center;
  }

.box2{
    width:620px;
    display: flex; 
    justify-content: space-between; 
    align-items: center;
}

.center{
   font-family: 'Ownglyph_meetme-Rg';
   font-size: 35px;
   color: #FF94A4;
   margin-bottom: 5px;
   display: flex;
   justify-content: center;
   align-items: center;
}

.banner{
    display: flex;
    width: 200px;
}

.next{
    display: flex;
    width: 70px;
}

.box3{
  width: 1100px;
  height: 300px;
  margin: 0 auto; /* 양쪽 여백 제거 */
  margin-bottom:70px;
  display: flex; 
  justify-content: space-around; 
  align-items: flex-end;
}
.box-container{
  width: 100px; height: 100px;
  display: flex;
  flex-direction: column; /* 세로 정렬 */
  align-items: left;
  justify-content: center;
  text-align: center;
  
}
h4{
  font-family: 'Pretendard';
  font-size: 16px; font-weight: 800;
  color: #5D3333; 
  text-align: left;
  line-height: 25px;
}
h5{
  font-family: 'Pretendard';
  font-size: 16px;
  color: #5D3333; 
  text-align: left; font-weight: 500;
  line-height: 50px;
}