.gnb_btn a {
    color: white;
    transition: color .3s;
}
.gnb_box .on a {
    font-weight: 700;
    color: var(--primary-orange);
    transform: translateY(3px);
}
.gnb_box .on {
    border-bottom: 5px solid var(--primary-orange);
    transition: all 0.3s ease-in;
}
.scrolled .gnb_box .on {
    border-bottom: 5px solid var(--primary-orange);
}
/* === SECTION 01 === */
.section01--faq {
  background-image: url("../public/images/faq/faq_visu.jpg");
}
/* === SECTION 04 === */
.section04{
  position: relative;
  width: 100%;
  height: auto;
  background-color: #FFF1DE;
}
.section04_container{
  margin: 0 auto;
  width: 1400px;
  padding-bottom: 380px;
}
.section04 h1{
  font-family: 'HakgyoansimB';
  color: #FF5117;
  font-size: 84px;
  padding: 200px 0 70px 0;
  text-align: left;
}

/* 질문 */
.question{
  display: flex;
  align-items: center;
  height: 98px;
  box-sizing: border-box;
  border-top: 1px solid #FF5117;
  padding: 27px 50px;
  transition: background-color 0.2s ease;
}
.section04_group .question:hover{
  background-color: #ff51173b;
}
.question span{
  font-family: 'HakgyoansimB';
  color: #FF5117;
  font-size: 43px;
  margin-right: 40px;
}
.question p{
  font-family: 'MalangmalangR';
  color: #30231B;
  font-size: 26px;
  -webkit-text-stroke: 1px #30231B;
}
.question .q_button{
  margin-left: auto;
  display: block;
}
.section04_group:last-child .question {
  border-bottom: 1px solid #FF5117;
}

/* 답변 */
.answer{
  display: flex;
  align-items: flex-start;
  box-sizing: border-box;
  background-color: #FF5117;
  max-height: 0;
  overflow: hidden;
  padding: 0 50px;
  transition:
    max-height 0.4s ease,
    padding 0.4s ease,
    opacity 0.3s ease;
}
.answer span{
  font-family: 'HakgyoansimB';
  color: #FFF;
  font-size: 43px;
  margin-right: 40px;
}
.answer p{
  font-family: 'Pretendard-Regular';
  color: #FFF;
  font-size: 18px;
  line-height: 30px;
  padding-right: 10px;
}
.answer .a_button{
  margin-left: auto;
  display: block;
}
.answer b {
  font-family: 'MalangmalangR';
  font-weight: 800;
  font-size: 18px;
  color: #FFF;
}
.answer .paste {
  user-select: text;
  -webkit-user-select: text; 
}
.answer button a {
  font-size: 20px;
  border-bottom: 1px solid white;
  color: white;
  opacity: .7;
  transition: all .3s;
}
.answer button a:hover {
  opacity: 1;
}
.section04_group.active .answer{
  max-height: 800px;
  padding: 27px 50px;
  opacity: 1;
}
.fury {
  position: absolute;
  bottom: 0;
  left: 5%;
  width: auto;
  height: auto;
  z-index: 5;  
}

@media (max-width: 1500px) {
    /* ------------ 로그인용 gnb ------------ */
    /* 모바일 헤더 */
    .menu_btn,
    .close_btn {
        display: block;
    }
    .menu_btn {
        width: 28px;
        height: 28px;
        background-color: white;
        -webkit-mask-image: url("../public/images/icon/fe_bar.svg");
        mask-image: url("../public/images/icon/fe_bar.svg");
    }
    header.scrolled .menu_btn {
        width: 28px;
        height: 28px;
        background-color: white;
        -webkit-mask-image: url("../public/images/icon/fe_bar.svg");
        mask-image: url("../public/images/icon/fe_bar.svg");
    }
    .gnb_box .on {
        border-bottom: 5px solid var(--primary-orange);
        transition: all 0.3s ease-in;
    }
      .section04_container {
    width: 90%;
  }
}
@media (max-width: 1400px) {
  .section04 h1 {
    font-size: 84px;
    padding: 200px 0 40px 0;
    text-align: left;
  }
}
@media (max-width: 1024px) {
  .section04_container {
    padding-bottom: 180px;
  }
  .section04 h1 {
    font-family: 'HakgyoansimB';
    color: #FF5117;
    font-size: 48px;
    padding: 100px 0 20px 0;

  }
  .question {
    display: flex;
    align-items: center;
    height: 98px;
    box-sizing: border-box;
    border-top: 1px solid #FF5117;
    padding: 10px 20px;
    transition: background-color 0.2s ease;
  }
  .question span {
    margin-right: 20px;
  }
  .question p {
    font-size: 2rem;
  }
  .q_button,
  .a_button {
    width: 20px;
  }
  .section04_group.active .answer {
    padding: 30px 20px;
    opacity: 1;
  }
  .answer p{
    font-size: 1.6rem;
    line-height: 30px;
    padding-right: 10px;
    font-weight: 500;
  }
  .answer span {
    margin-right: 20px;
  }
  .answer b {
    font-size: 1.6rem !important;
  }
  @media (max-width: 800px) {
    .fury {
      width: 300px;
    }
    .character_hand {
      width: 320px !important;
      position: absolute;
      top: -70px !important;
      left: 11% !important;
    }
  }
}
@media (max-width: 850px) {
  .section04 h1 {
    padding: 80px 0 40px 0;
  }
}
@media (max-width: 450px) {
  .section04 h1 {
    padding: 50px 0 40px 0;
    text-align: center;
  }

  .question span{
    font-size: 30px;
    margin-right: 10px;
    margin-left: -10px;
  }
  .answer span{
    font-size: 30px;
    margin-right: 10px;
    margin-left: -10px;
  }
  .a_button,
  .q_button{
    margin-right: -10px;
  }
}