html, head, body{margin:0; padding:0; }
 
/* header 컨테이너에 여백 없애기 */
.header_container {
  margin: 0 0 40px 0;
  padding: 0;     /* 내부 여백 제거 */
  background-color: #a40000;
}

/* h1 기본 마진 리셋 & 필요 시 내부 패딩 추가 */
.header_container h1 {
  margin: 0;          /* h1 기본 마진 제거 */
  padding: 20px 0;    /* (선택) 위·아래 20px 패딩 주기 */
  color:  #a40000;        /* (선택) 글자색 흰색으로 */
  font-size:2px;
}

  .main {
      display: flex;
      flex-wrap: wrap;
      padding: 20px;
      margin: 0 auto;
      list-style: none;
      gap: 28px;
      max-width: 1100px;
      width: 100%;
	  box-sizing:border-box;
	  justify-content: center;
    }

    /* 기본 (모바일): 2개 노출 -> gap 1개 = 28px */
    .main li {
      width: calc((100% - 28px) / 2);
    }

    .main img {
      width: 100%;
      height: auto;
      display: block;
    }

    /* 태블릿 이상 (min-width:768px): 3개 노출 -> gap 2개 = 56px */
    @media (min-width: 768px) {
      .main li {
        width: calc((100% - 56px) / 3);
      }
    }

    /* 데스크탑 이상 (min-width:1280px): 4개 노출 -> gap 3개 = 84px */
    @media (min-width: 1280px) {
      .main li {
        width: calc((100% - 84px) / 4);
      }
    }



  .main-s {
      display: flex;
      flex-wrap: wrap;
      padding: 20px;
      margin: 0 auto;
      list-style: none;
      gap: 20px;
      max-width: 1100px;
      width: 100%;
	  margin:0 auto; 
	  box-sizing:border-box;
	  justify-content: center;
    }

  
    .main-s li {
      width: calc((100% - 4px) / 4);
    }

    .main-s img {
      width: 100%;
      height: auto;
      display: block;
    }

   
    @media (min-width: 640px) {
      .main-s li {
        width: calc((100% - 16px) / 6);
		
      }
    }

    @media (min-width: 960px) {
      .main-s li {
        width: calc((100% - 20px) / 8);
      }
    }

 
    @media (min-width: 1280px) {
      .main-s li {
        width: calc((100% - 40px) / 10);
      }
    }




.flex{display:flex; }
li{list-style:none; }

.content{width:100%; margin:20px auto; text-align:center;   }
.content img{margin:0 auto; text-align:center;  }

@media (max-width: 960px){
.content img{width:100%; max-width:700px; }

}

.header_container{ width: 100%; background-color:#a40000; margin:0 auto; padding-bottom:12px;  }

.menu{
	display:flex; 
	justify-content: space-between;
	color:#fff; width:100%; max-width:1100px;  box-sizing:border-box; margin:0 auto 20px auto; }

.menu img{width:100px;  margin-left:20px; }


button{background-color:#fff; border:0; border-radius:8px; padding:4px 8px;}
button:hover{background-color:green;cursor: pointer; color:#fff;  }

footer{ background-color: #a40000;}
footer div{
	max-width: 1100px;
    width: 100%;
	margin:0 auto;
	padding:20px; 
	box-sizing:border-box;
	color:#fff;}