/* 전체 */
body {
  margin: 0;
  font-family: "Pretendard GOV Variable", "Pretendard GOV", -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
}

/* 헤더푸터 */
header, footer {background-color: #fff; text-align: center; width: 100%;}
header {top: 0; padding: 1.125rem 0 1.25rem 0 ; z-index: 1000; position: fixed;}
header .logo {height: 2rem;}
footer {display: flex; justify-content: center; gap: 1rem;}
footer button {
  background-color: #4C3893;
  color: #fff;
  border: none;
  height: 56px;
  border-radius: 0.5rem;
  font-weight: 600;
  cursor: pointer;
  font-size: 17px;
  width: 300px;
}

/* 비주얼 */
main {
  background-color: #4C3893;
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 110px 0 40px 0;
}
.visual {
  width: 50%;
  max-width: 700px;
  aspect-ratio: 597 / 283;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.visual img {
  width: 100%;
  height: auto;
  object-fit: contain;
}
.visual_mo {display: none;}
.visual_pc {height: 320px;}

/* 내용 */
.contents {
  width: 80%;
  max-width: 1100px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding: 3rem 1rem;
  gap: 1.25rem;
  margin: 0 auto 24px auto;
}
.contents img {width: 100%;}
.contents .mo {display: none;}

/* 모바일반응 */
@media all and (max-width:780px){
  .visual_pc {display: none;}
  .visual_mo {display: block;}
  .visual {width: 56%; aspect-ratio: 216 / 401;}
  .contents {width: 100%; grid-template-columns: 1fr; gap: 4rem; margin: 0 auto 100px auto;}
  .contents .mo {display: block;}
  .contents .pc {display: none;}
  footer {gap: 0.5rem; padding: 0.75rem 1rem ; z-index: 1000; position: fixed; bottom: 0;}
  footer button {width: 100%; padding: 0 0;}
}