@media screen and (max-width: 1230px){
  .container {max-width: 100%; padding: 0 20px; box-sizing: border-box;}
}

@media screen and (max-width: 1024px) {
  footer .container {flex-flow: column; align-items: flex-start; gap: 30px;}
}

@media screen and (max-width: 900px) {
  header {height: 60px;}
  header .logo {width: 120px;}
  header nav ul {gap: 10px;}
  header nav ul li:first-child a {font-size: 14px;}
  header nav ul li:last-child a {width: 150px; height: 30px; font-size: 14px;}

  /* 햄버거 메뉴 버튼 스타일 */
  .menu-toggle {
    display: block;
    background: none;
    border: none;
    font-size: 24px;
    color: white; /* 버튼 색상 */
    cursor: pointer;
    margin-left: auto; /* 오른쪽 정렬 */
  }

  /* 초기에는 nav를 숨깁니다 */
  header nav {
    display: none;
    flex-direction: column;
    width: 80%; /* 메뉴의 너비 */
    background: #e0e0e0; /* 연한 그레이 색상 */
    position: absolute;
    top: 60px; /* 햄버거 버튼의 높이에 맞춤 */
    right: 0; /* 메뉴를 오른쪽으로 붙임 */
    z-index: 1000; /* 다른 요소들 위에 나타나도록 */
  }

  /* 메뉴가 세로로 정렬되도록 설정 */
  header nav ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center; /* 가운데 정렬 */
    padding: 0; /* 패딩 초기화 */
    margin: 0; /* 마진 초기화 */
  }

  header nav ul li {
    text-align: center;
    width: 100%;
    padding: 12px 0; /* 간격 추가 */
  }

  header nav ul li a {
    width: 100%; /* 링크가 전체 너비를 차지하도록 */
    display: block !important; /* 링크가 블록 요소처럼 행동 */
    color: black !important; /* 메뉴 텍스트 색상을 검은색으로 변경, 중요 표시를 추가 */
    text-align: center !important; /* 모든 링크를 가운데 정렬 */
    font-size: 18px !important; /* 폰트 크기를 18px로 설정 */
  }

  .visual {height: calc(100vh - 60px); margin-top: 60px;}
  .visual .kv_slider li .txt-box .tit {margin-bottom: 20px; font-size: 30px;}
  .visual .kv_slider li .txt-box .sub {font-size: 16px; margin-bottom: 20px;}
  .visual .kv_slider li .txt-box .box {width: calc(100% - 40px); height: 60px; margin: 0 auto;}
  .visual .kv_slider li .txt-box .box span {font-size: 20px;}
  .visual .kv_slider li .txt-box .box span img {width: 15px;}
  .visual .kv_slider li .txt-box .box b {font-size: 30px;}
  .visual .kv_slider li .txt-box .txt {font-size: 14px;}
  .visual .kv_slider .slick-dots {position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); gap: 5px; padding-top: 0; background: transparent;}
  .visual .kv_slider .slick-dots li {width: 10px; height: 10px;}

  section {padding: 50px 0;}
  .sec1 {padding: 30px 0; margin-top: 0;}
  .tit-box {margin-bottom: 30px;}
  .tit-box .tit {margin-bottom: 15px; font-size: 30px;}
  .tit-box .sub {font-size: 16px;}
  .content2 ul li {width: calc(100% / 3);}

  .map-content ul li:first-child {width: 323px;}
  .map-content ul li.txt .tit {margin-bottom: 20px; font-size: 20px;}
  .map-content ul li.txt .txt-box {gap: 5px;}
  .map-content ul li.txt .txt-box > p {font-size: 14px;}

  .notice1 {padding-top: 100px;}
  .notice1 .content3 ul {gap: 20px 0; margin: 0 -10px;}
  .notice1 .content3 ul li {width: calc(100% / 2); padding: 0 10px;}
}

@media screen and (max-width: 600px) {

  .visual {height: 350px;}
  .visual .kv_slider li .txt-box .tit {margin-bottom: 10px; font-size: 18px; letter-spacing: -1.5px;}
  .visual .kv_slider li .txt-box .sub {margin-bottom: 10px; font-size: 14px;;}
  .visual .kv_slider li .txt-box .box {display: inline-flex; width: auto; height: auto; padding: 10px 20px; box-sizing: border-box;}
  .visual .kv_slider li .txt-box .box span {font-size: 14px;}
  .visual .kv_slider li .txt-box .box b {font-size: 16px;}
  .visual .kv_slider li .txt-box .txt {font-size: 12px;}
  .visual .kv_slider .slick-arrow.slick-next {right: 20px; width: 10.3px; height: 20px;}
  .visual .kv_slider .slick-arrow.slick-prev {left: 20px; width: 10.3px; height: 20px;}

  .sec1 ul {flex-flow: column;}
  .sec1 ul li {width: 100%;}
  .content ul {flex-flow: column;}
  .content ul li {width: 100%;}
  .content2 ul {margin: 0 -5px; gap: 10px 0;}
  .content2 ul li {width: calc(100% / 2); padding: 0 5px;}
  .sec5 ul {flex-flow: column;}
  .sec5 ul li {width: 100%;}
  .map-content ul {flex-flow: column-reverse; align-items: flex-start;}
  .map-content ul li:first-child {width: 100%;}

  footer {padding: 30px 0;}
  footer .logo {width: 150px;}
  footer address ul li {font-size: 14px;}
  footer address ul:first-child li {white-space: nowrap;}

  .tit-box .tit {margin-bottom: 10px; font-size: 20px;}
  .tit-box .sub {font-size: 14px;}
}


@media screen and (max-width: 397px) {
  header .logo {width: 100px;}
  header nav ul li:first-child a {font-size: 12px;}
  header nav ul {gap: 5px;}

	header nav ul li:last-child a {
	  display: block;
	  width: 220px;
	  font-size: 12px;
	  text-align: center;
	  margin: 0 auto;
	  height: 30px;
	  line-height: 30px;
	}

  /*
  header nav ul li:last-child a {width: 220px; font-size: 12px;}
  */
  
  .notice1 .content3 ul {margin: 0;}
  .notice1 .content3 ul li {width: 100%; padding: 0;}
}

@media screen and (max-width: 329px) {
  header {height: auto; padding: 10px 0;}
  header .container {flex-wrap: wrap; gap: 5px;}

	header nav ul li:last-child a {
	  display: block;
	  width: 220px;
	  font-size: 12px;
	  text-align: center;
	  margin: 0 auto;
	  height: 30px;
	  line-height: 30px;
	}
}