:root {
  --maincolor: #3FA9FF;
  --subcolor: #c9e2f3;
}

* {letter-spacing: -1px; font-size: 16px; box-sizing: border-box; line-height: 1.5rem;}
.inner {width: 1200px; margin: 0 auto; position: relative;}
section {padding: 130px 0;}
section .title_wrap {
  margin-bottom: 80px;
}
section .title_wrap h2 {text-align: center; font-size: 32px; letter-spacing: 0px; font-weight: 700; line-height: 1.6; margin-bottom: 20px;}
section .title_wrap p {text-align: center; font-size: 20px; color: #333; line-height: 1.6;}
img {max-width: 100%; display: block;}
table {width: 100%; border-collapse: collapse;}
th, td {border: 1px solid #d9d9d9; padding: 12px; text-align: center; background: #ffffff33;}
th {background-color: #fff; font-weight: 500;}

/* header */

header {padding: 20px 0; border-bottom: 1px solid #ddd;}
header .inner {}
header .inner a {font-size: 1.4rem; font-weight: 700; letter-spacing: -2px;}

/* section1 */

#section1 {
  background: var(--maincolor);
  padding: 130px 0 100px 0;
}
#section1 .row {display: flex; justify-content: space-between; align-items: flex-end;}
#section1 .row .title_wrap {display: flex; flex-direction: column; align-items: center; gap: 30px; margin-bottom: 0;}
#section1 .row .title_wrap h2 {    
  font-size: 50px;
  line-height: 1.4; letter-spacing: -2px; font-weight: 600;
  text-align: left;
}
#section1 .row .title_wrap h2 b {    color: #fff; font-weight: 700;}
#section1 .row .title_wrap .text_wrap {display: flex; align-items: center; justify-content: space-between; width: 100%;}
#section1 .row .title_wrap .text_wrap ul {width: 100%; display: flex; justify-content: space-between; gap: 40px; }
#section1 .row .title_wrap .text_wrap ul li {
  flex: 1;
  display: flex; flex-direction: column; gap: 15px; padding: 40px 30px; border: 1px solid #fff; border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  background: #ffffff3d;
}
#section1 .row .title_wrap .text_wrap ul li span {    
  font-size: 28px;
  font-weight: 600;
  color: #fff;
}
#section1 .row .title_wrap .text_wrap ul li p {font-size: 1.5rem; font-weight: 700; letter-spacing: -2px; line-height: 1.6; text-align: left; color: #000;}
#section1 .row .title_wrap .text_wrap ul li p b {position: relative; z-index: 1;}
#section1 .row .title_wrap .text_wrap ul li p b::before {content: ""; width: 100%; height: 40%; background: #ffffff8f; position: absolute; bottom: 0; left: 0; z-index: -1;}
#section1 .img_box {
  flex: 1;
}
#section1 .img_box img {
  max-width: 300px;
  margin: auto;
}
/* section2 */

#section2 {
  background: #1a1a1a;
}
#section2 .inner {}
#section2 .inner .title_wrap {}
#section2 .inner .title_wrap h2 { color: #fff;}
#section2 .inner ul {display: flex; gap: 50px; justify-content: center;}
#section2 .inner ul li {display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 30px; position: relative;}
#section2 .inner ul li .circle_wrap {    
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 250px;
      height: 250px;
      border-radius: 50%;
      overflow: hidden;
      background: #fff;
}
#section2 .inner ul li h3 {
  font-size: 18px;
  color: #fff;
  text-align: center;
}
#section2 .inner ul li .circle_wrap span {width: 100%; height: 60%; text-align: center;  background: var(--maincolor); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 22px; font-weight: 500;}
#section2 .inner ul li .circle_wrap p {    
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: center;
  font-size: 30px;
  font-weight: 700;
  padding: 70px 0;
  color: var(--maincolor);
}
#section2 .inner ul li img {

}

/* section3 */

#section3 {}
#section3 .inner {}
#section3 .inner .title_wrap {margin-bottom: 50px;}
#section3 .inner .title_wrap h2 {text-align: center;}
#section3 .inner .title_wrap p {}
#section3 .inner .con3_wrap {display: flex; justify-content: space-between; gap: 50px; flex-direction: column;}
#section3 .inner .con3_wrap .img_wrap {width: 100%; display: flex; justify-content: center;}
#section3 .inner .con3_wrap .img_wrap img {object-fit: contain; width: 350px;}
#section3 .inner .con3_wrap ul {display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px;}
#section3 .inner .con3_wrap ul li {background: var(--maincolor); padding: 40px 30px; border-radius: 10px; display: flex; flex-direction: column; gap: 15px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;}

#section3 .inner .con3_wrap ul li h3 {    
  letter-spacing: 0px;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 15px;
  text-align: center
}
#section3 .inner .con3_wrap ul li p {font-size: 18px; color: #ffffffcf; line-height: 1.8; position: relative; padding-left: 35px;}
#section3 .inner .con3_wrap ul li p::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0px;
  background: #ffffff66 url(../img/check.svg) no-repeat center / cover;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  border: 1px solid #fff;
}

#section4 {    background: #f5f5f5;}
#section4 .inner {}
#section4 .inner .title_wrap {}
#section4 .inner .title_wrap h2 {text-align: center;}
#section4 .inner h3 {
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 50px;
  border-bottom: 1px solid #dbdbdb;
  padding-bottom: 30px;
  text-align: center;
  color: #333;
}
#section4 .inner table {margin-bottom: 80px;}

#section5 {background: var(--maincolor);}
#section5 .inner {}
#section5 .inner .title_wrap {}
#section5 .inner .title_wrap h2 {text-align: center;}
#section5 .inner .title_wrap h2 b {color: #fff;}
#section5 .inner ul {}
#section5 .inner ul li {background: #ffffffab; padding: 30px; border: 1px solid #fff; border-radius: 10px; display: flex; flex-direction: column; gap: 20px;}
#section5 .inner ul li .img_wrap {display: flex; gap: 30px; align-items: center; justify-content: flex-start;}
#section5 .inner ul li .img_wrap img {
  width: 85px; height: 90px;
  background: #fff; border-radius: 100%; padding: 15px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
#section5 .inner ul li .img_wrap p {font-size: 1.3rem; font-weight: 600; line-height: 1.8rem;}
#section5 .inner ul li h3 {color: #232323; font-weight: 400;}
#section5 .inner ul li .hash_tag {display: flex; gap: 8px; flex-wrap: wrap;} 
#section5 .inner ul li .hash_tag span {display: inline-block; border: 1px solid var(--maincolor); background: #fff; color: var(--maincolor); padding: 5px 15px; border-radius: 100px; font-weight: 600;}


.qna_list{
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* margin-top: 40px; */
}
.qna_list .qna_item{
  padding: 0 30px;
  background-image: linear-gradient(to right, var(--maincolor) 0%, #8f9aff 100%);
  border-radius: 10px;
  cursor: pointer;
}
.q_box.on img{
  transform: rotate(180deg);
}

/* Q */
.qna_list .qna_item .q_box{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}
.qna_list .qna_item .q_box, .qna_list .qna_item .a_box .a_wrap{
  padding: 25px 0px;
}
.qna_list .qna_item .q_box .q_wrap{
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20px;
}
.qna_list .qna_item .q_box .q_wrap em, .qna_list .qna_item .a_box em{
  font-size: 22px;
  font-weight: 600;
  color: var(--maincolor);
  width: 30px;
  height: 30px;
  text-align: center;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.qna_list .qna_item .q_box .q_wrap em{
  background: #fff;
}
.qna_list .qna_item .q_box .q_wrap p{
  flex: 1;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}
.qna_list .qna_item .q_box img{
  width: 20px;
  transition: all 0.3s;
}

/* A */
.qna_list .qna_item .a_box{
  display: none;
}
.qna_list .qna_item .a_box .a_wrap{
  display: flex;
  align-items: flex-start;
  gap: 20px;
  border-top: 1px dashed #ddd;
}
.qna_list .qna_item .a_box em{
  background: none;
  color: #fff;
  border: 1px solid #fff;
}
.qna_list .qna_item .a_box.show{
  display: block;
}

/* 텍스트 */
.qna_list .qna_item .a_box .txt_box{
  flex: 1;
}
.qna_list .qna_item .a_box .txt_box p,
.qna_list .qna_item .a_box .txt_box ul{
  padding-bottom: 5px;
}
.qna_list .qna_item .a_box .txt_box p,
.qna_list .qna_item .a_box .txt_box li{
  font-size: 17px;
  line-height: 1.6;
  color: #fff;
}
.qna_list .qna_item .a_box .txt_box li{
  position: relative;
  padding-left: 20px;
}
.qna_list .qna_item .a_box .txt_box li::before{
  content: '-';
  position: absolute;
  left: 5px;
}
.qna_list .qna_item .a_box .txt_box b{
  font-weight: 600;
}




@media (max-width: 1280px) {
  .inner {width: 93%;}
}
@media (max-width: 1200px) {
  #section1 .row .title_wrap h2 {
    font-size: 43px;
  }
  #section2 .inner ul {
    gap: 30px;
  }
}
@media (max-width: 1056px) {
  #section2 .inner ul {
    gap: 10px;
}
}
@media (max-width: 959px) {
  #section1 .row .title_wrap h2 {
    font-size: 36px;
  }
  #section1 .img_box img {
    max-width: 225px;
  }
  #section1 .row .title_wrap .text_wrap ul {
    gap: 25px;
  }
  #section2 .inner ul li .circle_wrap {
    width: 200px;
    height: 200px;
  }
  #section2 .inner ul li .circle_wrap p {
    font-size: 25px;
    padding: 40px 0;
  }
  #section2 .inner ul {
      gap: 0px;
  }
  #section3 .inner .con3_wrap ul {
    grid-template-columns: repeat(1, 1fr);
  }
}
@media (max-width: 768px) {
  section {
    padding: 80px 0;
}
section .title_wrap {
  margin-bottom: 60px;
}
  #section1 {
    padding: 85px 0;
  }
  #section1 .row {
    flex-direction: column;
    align-items: center;
    gap: 40px;
  }
  #section1 .row .title_wrap {
    width: 100%;
  }
  #section1 .row .title_wrap h2{
    text-align: center;
  }
  #section2 .inner ul li .circle_wrap {
    width: 150px;
    height: 150px;
  }
  #section2 .inner ul li .circle_wrap span {
    font-size: 18px;
  }
  #section2 .inner ul li .circle_wrap p {
    font-size: 20px;
    padding: 30px 0;
  }
  #section2 .inner ul li h3 {
    font-size: 14px;
  }
  #section5 .inner ul li .img_wrap {
    gap: 10px;
  }
  #section5 .inner ul li .img_wrap p {
    font-size: 18px;
    line-height: 1.6;
  }
  #section5 .inner ul li .img_wrap img {
    width: 65px;
    height: 70px;
  }
  #section5 .inner ul li {
    padding: 20px;
  }
  #section5 .inner ul li .hash_tag span {
    padding: 3px 12px;
    font-size: 14px;
  }
}
@media (max-width: 586px) {
  section .title_wrap {
    margin-bottom: 40px;
  }
  .qna_list .qna_item .q_box .q_wrap p {
    font-size: 18px;
  }
  .qna_list .qna_item .a_box .txt_box p, .qna_list .qna_item .a_box .txt_box li {
    font-size: 16px;
  }
  #section1 .row .title_wrap h2 {
    font-size: 30px;
  }
  #section1 .row .title_wrap .text_wrap ul li {
    padding: 30px 20px;
  }
  #section1 .row .title_wrap .text_wrap ul li span {
    font-size: 26px;
  }
  #section1 .row .title_wrap .text_wrap ul li p {
    font-size: 20px;
  }
  #section2 .inner ul {
    flex-direction: column;
    gap: 40px;
  }
  #section2 .inner ul li img {
    height: 60px;
    transform: rotate(90deg);
  }
  #section2 .inner ul li .circle_wrap {
    width: 230px;
    height: 230px;
  }
  #section2 .inner ul li .circle_wrap p {
    font-size: 26px;
    padding: 70px 0;
  }
  #section2 .inner ul li .circle_wrap span {
    font-size: 20px;
  }
  #section2 .inner ul li h3 {
    font-size: 18px;
  }
  section .title_wrap h2 {
    font-size: 28px;
  }
  section .title_wrap p {
    font-size: 16px;
  }
  #section3 .inner .con3_wrap ul li {
    padding: 30px 20px;
  }
  #section3 .inner .con3_wrap ul li h3 {
    font-size: 22px;
  }
  #section3 .inner .con3_wrap ul li p {
    font-size: 16px;
    padding-left: 25px;
  }
  #section3 .inner .con3_wrap ul li p::before {
    width: 15px;
    height: 15px;
  }
  #section3 .inner .con3_wrap .img_wrap img {
    width: 250px;
  }
  #section4 .inner h3 {
    font-size: 18px;
    margin-bottom: 30px;
    padding-bottom: 15px;
  }
  th, td {
    font-size: 14px;
  }
  #section4 .inner table {
    margin-bottom: 60px;
  }
  #section5 .inner ul li .img_wrap {
    gap: 10px;
  }
}
@media (max-width: 430px) {
  section .title_wrap h2 {
    font-size: 24px;
}
  #section1 .row .title_wrap h2 {
    font-size: 24px;
  }
  #section1 .row .title_wrap .text_wrap ul {
    gap: 17px;
  }
  #section3 .inner .con3_wrap ul li h3 {
    font-size: 20px;
    margin-bottom: 10px;
  }
  #section3 .inner .con3_wrap ul li p {
    font-size: 13px;
  }
  #section4 .inner table {
    margin-bottom: 40px;
}
}