:root {
  --index_font_16: max(16px, 1.17vw);
  --index_font_28: max(28px, 2.05vw);
  --index_font_45: max(45px, 3.29vw);
  --index_font_18: max(18px, 1.32vw);
  --index_font_19: max(19px, 1.39vw);
  --margin_60: max(60px, 4.39vw);
  --margin_70: max(70px, 5.12vw);
  --gap_15: max(15px, 1vw);
  --padding_30: max(30px, 2.20vw);
  --padding_20: max(20px, 1.46vw);
  --margin_scroll_120: max(120px, 8.78vw)
}

@media screen and (max-width: 770px) {
  :root {
    --index_font_16: max(13px, 3.47vw);
    --index_font_28: max(15px, 4vw);
    --index_font_45: max(29px, 7.73vw);
    --index_font_18: max(14px, 3.73vw);
    --index_font_19: max(13px, 3.47vw);
    --margin_60: max(40px, 10.67vw);
    --margin_70: max(40px, 10.67vw);
    --gap_15: max(5px, 1.33vw);
    --margin_scroll_120: max(100px, 26.67vw)
  }
}

html {
  scroll-behavior: smooth;
}

#paymentArea,
#orderArea,
#deliveryArea,
#shippingArea,
#shippingFeeArea,
#returnExchangeArea,
#accessoriesArea,
#warrantyArea {
  scroll-margin-top: var(--margin_scroll_120);
}

main .firstView {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

@media screen and (max-width: 770px) {
  main .firstView {
    height: auto;
    flex-direction: column;
  }
}

main .firstView .title {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: var(--block_margin) auto;
}

main .firstView h1 {
  font-size: var(--index_font_45);
}

main .firstView p {
  font-size: var(--index_font_19);
}

main .firstView .buttonAreaList ul {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: var(--margin_60);
  gap: var(--gap_15);
}

main .firstView .buttonAreaList ul li .base_btn {
  border-radius: 30px;
  border: 1px solid #000000;
  padding: 14px 16px;
}

main .firstView .buttonAreaList ul li .base_btn span {
  font-size: var(--index_font_16);
}

@media screen and (max-width: 770px) {
  main .firstView .buttonAreaList ul {
    row-gap: 10px;
  }
}

main .guideContentArea {
  background-color: #F7F7F7;
}

main .guideContentArea .container {
  width: 93%;
  max-width: 1200px;
  margin: 0 auto;
}

main .guideContentArea .container ul {
  padding: var(--margin_70) 0 var(--section_margin);
}

main .guideContentArea .container ul li {
  margin-bottom: var(--margin_70);
}

main .guideContentArea .container ul li:last-child {
  margin-bottom: 0;
}

main .guideContentArea .container ul li h2 {
  font-size: var(--index_font_28);
  border-top: 1px solid #000000;
  border-bottom: 1px solid #000000;
  line-height: 1;
  padding: var(--list_margin) 0;
  margin-bottom: var(--list_margin);
}

main .guideContentArea .container .areaInformation p {
  font-size: var(--base_font);
}

main .guideContentArea .container .areaInformation .subTitle {
  margin: var(--title_margin) 0;
}

main .guideContentArea .container .areaInformation .subTitle h3 {
  font-size: var(--index_font_18);
}

main .guideContentArea .container .areaInformation .subTitle img {
  width: 214px;
}

main .guideContentArea .container .areaInformation .subTitle .bankArea {
  display: flex;
  flex-direction: column;
  border: 1px solid #B0B2AF;
  padding: var(--padding_20) var(--padding_30);
  width: fit-content;
  margin: clamp(0.938rem, 0.819rem + 0.505vw, 1.25rem) 0;
}

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

  main .guideContentArea .container .areaInformation .subTitle .bankArea {
    padding: var(--index_font_28);
  }
}