* {box-sizing: border-box; word-break: keep-all;}
html {font-size: 16px;}
.inner {width: 870px; margin: 0 auto; position: relative;}

/*header*/
header {box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; position: relative; z-index: 100; padding: 30px 0; width: 100%; position: fixed; background: #fff; top: 0; left: 0;}
header .inner {display: flex; align-items: center; justify-content: space-between;}
header .inner a.logo {font-size: 2rem; font-weight: 700; letter-spacing: -3px; display: inline-block;}
header .inner a.faq {font-size: 1.5rem; font-weight: 700; background: #000; padding: 10px 30px; color: #fff; border-radius: 10px;}


section {display: flex; flex-direction: column; gap: 50px; margin-top: 109px;}
section .cont .inner {padding: 50px;}
section .cont1 {}
section .cont1 .inner {display: flex; flex-direction: column; align-items: center; justify-content: center; background: #f4f4f8;}
section .cont1 .inner h2 {font-size: 2rem; line-height: 2.5rem; letter-spacing: -1px; font-weight: 700; margin-bottom: 16px;}
section .cont1 .inner p {font-size: 1.2rem; line-height: 1.8rem; font-weight: 400; text-align: center;}

section .cont2 {}
section .cont2 .inner {background: #f6f6f6; padding: 0;}
section .cont2 .inner .txt_wrap {display: flex; flex-direction: column; gap: 5px;}
section .cont2 .inner .txt_wrap h2 {font-size: 2rem; line-height: 3rem; letter-spacing: -2px; font-weight: 600; margin-bottom: 15px; display: flex; align-items: center; gap: 10px; position: relative; margin-left: 15px;}
section .cont2 .inner .txt_wrap h2::before {content: ""; position: absolute; top: 50%; left: -15px; width: 5px; height: 70%; background: #FFA500; transform: translateY(-50%);}
section .cont2 .inner .txt_wrap  pre {font-size: 1.2rem; line-height: 2rem; font-weight: 500; letter-spacing: -1px; white-space: pre-wrap; word-break: keep-all;}
section .cont2 .inner .cont_wrap {display: flex; align-items: center; justify-content: space-between; padding: 40px; padding-left: 70px; padding-right: 70px; border-bottom: 1px solid #ccc; gap: 0 30px;}
section .cont2 .inner .cont_wrap a {background: #FFA500; display: inline-block; padding: 20px 30px; border-radius: 10px; color: #fff; font-weight: 600; font-size: 1.2rem; white-space: nowrap;}

.faq_wrap {padding: 80px 0; padding-top: 189px;}
.faq_wrap .inner {display: flex; flex-direction: column; gap: 30px;}
.faq_wrap .inner .txt_wrap {}
.faq_wrap .inner .txt_wrap h2 {font-size: 1.5rem; line-height: 2rem; font-weight: 600; background: #FFA500; color: #fff; padding: 15px 20px; border-radius: 10px; letter-spacing: -1px; margin-bottom: 30px;}
.faq_wrap .inner .txt_wrap p {}
.faq_wrap .inner .txt_wrap pre {white-space: pre-wrap; font-size: 1.2rem; line-height: 2rem; padding: 0 20px; padding-bottom: 30px; border-bottom: 1px solid #ddd; font-weight: 500;}
.faq_wrap .inner .txt_wrap:last-child pre {border: 0;}

@media (max-width: 1000px) {
  .inner {width: 93%;}
  section .cont1 {background: #f4f4f8;}
  section .cont1 .inner {background: none;}
  section .cont2 {background: #f6f6f6;}
  section .cont2 .inner {background: none;}
}

@media (max-width: 900px) {
  section .cont2 .inner .cont_wrap a {width: 100%; text-align: center;}
  section .cont2 .inner .txt_wrap {margin-bottom: 30px;}
  section .cont2 .inner .cont_wrap {flex-direction: column; padding: 40px 0; align-items: flex-start;}
  section .cont2 .inner .cont_wrap a {padding: 15px 20px;}
}


@media (max-width: 800px) {
  html {font-size: 14px;}
  header .inner a {font-size: 1.8rem;}
  section .cont1 .inner {padding: 50px 10px;}
  section .cont1 .inner h2 {text-align: center;}
  section .cont1 .inner p {text-align: center;}
  section .cont2 .inner .txt_wrap {}
  section .cont2 .inner .cont_wrap {padding: 30px 0;}
  .faq_wrap {padding: 50px 0; padding-top: 121px;}
  header {padding: 20px 0;}
  header .inner a.logo {font-size: 1.7rem;}
  header .inner a.faq {font-size: 1.2rem;}
  section {margin-top: 77px;}
}
