@charset "utf-8";

/******************************************
    서브페이지 공통
******************************************/
.page_content {
  padding: 40px 0 200px;
}

.page_content .page_container {
  width: calc(var(--inner-size) + (var(--page-margin) * 2));
  padding: 0 var(--page-margin);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.page_content .page_container img {
  display: block;
  width: 100%;
  max-width: 100%;
}

@media screen and (min-width: 1025px) and (max-width: 1420px) {
  .page_content .page_container {
    width: 100%;
  }
}

@media screen and (max-width: 1024px) {
  .page_content {
    padding: 60px 0 80px;
  }

  .page_content .page_container {
    width:100%;
  }
}

/******************************************
    서브페이지 공통 - 크게보기 버튼
******************************************/
.sub_zoom {
  display: flex;
  justify-content: center;
  padding: 30px 0;
}

.sub_zoom_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 148px;
  min-height: 52px;
  padding: 12px 24px;
  border-radius: var(--radius-full);
  background: var(--fill-secondary);
}

.page_content .sub_zoom_button img {
  width: 20px;
  height: 20px;
}

.sub_zoom_button span {
  color: var(--white);
  line-height: 1;
  font-size: 16px;
}

@media screen and (max-width: 1024px) {
  .sub_zoom {
    padding: 20px 0 32px;
  }

  .sub_zoom_button {
    gap: 7px;
    min-width: 112px;
    min-height: 42px;
    padding: 10px 18px;
    font-size: 13px;
  }

  .page_content .sub_zoom_button img {
    width: 16px;
    height: 16px;
  }
}

/******************************************
    서브페이지 공통 - 하단 오리발
******************************************/
.sub_notice {
  display: flex;
  align-items: center;
  gap: 44px;
  margin-top: 100px;
  padding: 32px 44px;
  background: #f4f4f4;
}

.sub_notice > strong {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 57px;
  height: 57px;
  color: var(--white);
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="57" height="57" fill="none"><path fill="%238b7f71" d="M52.96 43.134A28.36 28.36 0 0 0 57 28.5C57 12.76 44.24 0 28.5 0S0 12.76 0 28.5 12.76 57 28.5 57c5.35 0 10.356-1.476 14.634-4.04l6.45 1.728 6.972 1.868-1.868-6.972z"/></svg>') no-repeat center / cover;
  font-size: 28px;
}

.sub_notice ul {
  flex: 1 1 auto;
  min-width: 0;
  letter-spacing: -0.02em;
  line-height: 1.45;
}

.sub_notice li {
  position: relative;
  padding-left: 10px;
  word-break: keep-all;
}

.sub_notice li::before {
  content: "\2022";
  position: absolute;
  left: 0;
}

@media screen and (max-width:1024px) {
  .sub_notice {
    align-items: flex-start;
    gap: 18px;
    margin-top: 44px;
    padding: 24px 20px;
  }

  .sub_notice > strong {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  .sub_notice ul {
    font-size: 11px;
  }
}

@media screen and (max-width:600px) {
  .sub_notice {
    gap: 12px;
  }

  .sub_notice > strong {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
    font-size: 22px;
  }
}