:root {
  --costBtncolor: #f97316;
  --brandColor: #f97316;
  --brandColor2: #fff7f0;
    /* form 사이즈 일괄 지정 */
    --formHeight: 50px;
    --formRadius: 11px;
    --formInput: #f0c9a8;
}

/* sc_visual ============================================== */
.sc_visual {
  position: relative;
  width: 100%;
  background: #fff7f0;
  z-index: 1;
}
.sc_visual .logo_box {
  margin: 30px 0 30px 0;
}
.sc_visual .headline_box{
  display: flex;
  align-items: center;
  gap: 30px;
  justify-content: space-between;
  margin-bottom: 0;
}

.sc_visual .headline_txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.sc_visual .headline{
  text-align: center;
  font-size: 35px;
  font-weight: 700;
  color: #2a2420;
}
.sc_visual .sub_headline{
  font-size: 20px;
  font-weight: 200;
}
.sc_visual .img_hot{
  width: 200px;
}
.sc_visual .hash{
  position: relative;
  font-size: 22px;
  font-weight: 500;
}
.sc_visual .hash::after{
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #000;
}

.date_badge{
  position: relative;
  display: flex;
  gap: 5px;
  padding: 12px 25px 12px 30px;
  font-size: 15px;
  font-weight: 700;
  border: 1px solid #000;
  border-radius: 50px;
  color: #000;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
.date_badge::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffae00;
  animation: lottieTextAni 1s linear infinite;
  margin-bottom: -.1rem;
}

@keyframes lottieTextAni {
  0%, 30% {opacity: 1;}
  40%, 60% {opacity: 0;}
  70%, 100% {opacity: 1;}
}
/* sc_con1 ============================================== */
.sc_con1 {
  background: var(--brandColor2);
}
.sc_con1 .headline_area {
  text-align: center;
  margin-bottom: 30px;
}
.sc_con1 .con_area .top_list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.sc_con1 .con_area .top_list .top_item {
  transition: 0.3s;
  position: relative;
}
.sc_con1 .con_area .top_list .top_item a {
  width: 100%;
  height: 100%;
  transition: all 0.3s;
  border-radius: 10px;
  background: #fff;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.sc_con1 .con_area .top_list .top_item .img_box {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.sc_con1 .con_area .top_list .top_item .img_box img {
  height: 300px;
  object-fit: cover;
  width: 100%;
}
.sc_con1 .con_area .top_list .top_item .textarea {
  flex: 1;
  padding: 30px;
}
.sc_con1 .con_area .top_list .top_item .txt_box {
  flex: 1;
  font-size: 18px;
  line-height: 1.7;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333333;
}
.sc_con1 .con_area .top_list .top_item .img_box img {
}
.sc_con1 .con_area .top_list .top_item .title {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  color: var(--brandColor);
  line-height: 1.3;
}
.sc_con1 .con_area .top_list .top_item .plus {
  display: block;
  width: 100%;
  font-size: 17px;
  text-align: right;
  color: #777777;
  margin-top: 40px;
}

/* sc_qna ========================================== */
.sc_qna .row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* ======================질문 페이지====================== */
.qna_list {
  display: flex;
  flex-direction: column;
}
.qna_list .qna_item {
  border-top: 1px solid #ddd;
  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 .a_box .a_wrap,
.qna_list .qna_item .q_box {
  padding: 30px;
}
.qna_list .qna_item .q_box .q_wrap {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 20px;
}
.qna_list .qna_item .a_box em,
.qna_list .qna_item .q_box .q_wrap em {
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.qna_list .qna_item .q_box .q_wrap em {
  background: #000;
}
.qna_list .qna_item .q_box .q_wrap p {
  flex: 1;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
}
.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 .q_box {
  background: #fff;
}
.qna_list .qna_item .a_box .a_wrap {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  border-top: 1px dashed #f5d0b5;
  padding: 30px;
  background: #fff7f0;
  overflow: auto;
}
.qna_list .qna_item .a_box em {
  background: var(--brandColor);
}
.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 li,
.qna_list .qna_item .a_box .txt_box p {
  font-size: 17px;
  line-height: 1.6;
}
.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;
}

.link_go {
    padding: 10px 20px;
    border-radius: 10px;
    background: var(--brandColor);
    color: #fff;
    white-space: nowrap;
}
/* sc_last ============================================== */
.sc_last{
  position: relative;
  padding: 75px 0;
  background: transparent;
}
.sc_last .inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  z-index: 1;
}
.sc_last .headline{
  color: #ffffff;
  margin-bottom: 30px;
}
.sc_last img {
  width: 200px;
}
.sc_last .link_wrap{
  display: flex;
  gap: 20px;
}
.sc_last .link_more{
  color: #fff;
  border: 2px solid #fff;
  padding: 15px 30px;
  font-weight: 600;
  transition: all 0.2s;
  border-radius: 5px;
}
.sc_last .vid_bg{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* 테블릿 */
/* 960 ~ 1023 */
@media (max-width: 1023px) {

}
/* pc hover */
@media (min-width: 768px) {
  .sc_con1 .con_area .top_list .top_item a:hover {
      border: 1px solid var(--brandColor);
  }
  .btn_submit:hover {
      background: #24292f;
  }
  .cost_area .cost_list .cost_item:hover {
      background: #f4f6f8;
  }
  .sc_bohum .bohum_list .bohum_item:hover {
      background: rgba(255,255,255,.2);
  }
  .sc_last .link_more:hover {
      color: var(--brandColor);
      border: 2px solid #fff;
      background: #fff;
      padding: 15px 30px;
      font-weight: 600;
      transition: all 0.2s;
  }

  #board table tr:not(.list):hover {
      background: #fff;
  }

  header .group_header .gnb_list .gnb_item:hover {
      color: var(--brandColor);
  }
}
/* 테블릿 */
/* 768 ~ 959 */
@media (max-width: 959px) {
  .headline {
      font-size: 30px;
  }
  .sc_1 ul {
      gap: 20px;
  }
  .sc_con1 .con_area .top_list {
    grid-template-columns: repeat(1, 1fr);
    gap: 20px;
  }
  .sc_last .link_wrap {
      gap: 7px;
  }
  .sc_last .headline {
      font-size: 30px;
  }
  .sc_visual .headline_box {
    flex-direction: column;
  }
  .form_area {
    width: 70%;
  }

  .sc_con1 .con_area .top_list .top_item .img_box img {
    height: 400px;
  }
}
/* 겔럭시 폴드 & 핸드폰 가로 사이즈 */
/* 587 ~ 767 */
@media (max-width: 767px) {
  section{
      padding: 60px 0;
  }
  .headline {
      font-size: 28px;
  }
  .sc_visual .headline {
      font-size: 46px;
  }
  .sc_visual .img_hot {
      width: 150px;
  }
  .sc_visual .hash {
      font-size: 21px;
  }
  .sc_con1 .con_area .top_list .top_item a {
    padding: 25px;
  }
  .sc_con1 .con_area .top_list .top_item .title {
    font-size: 20px;
    margin-bottom: 10px;
    line-height: 1.3;
  }
  .sc_con1 .con_area .top_list .top_item .plus {
    font-size: 15px;
    margin-top: 35px;
  }
  .form_area {
    width: 100%;
  }

  .sc_con1 .con_area .top_list .top_item .img_box img {
    height: 250px;
  }
}
/* 핸드폰 */
/* 431 ~ 586 */
@media (max-width: 586px) {
  .inner {
      width: calc(100% - 50px);
  }
  section {
      padding: 50px 0;
  }
  .headline_box{
      text-align: center;
  }
  .headline{
      font-size: 25px;
  }
  .sub_headline {
      font-size: 16px;
      margin-top: 10px;
  }
  .enter_586{display: block;}


  .sc_visual .logo_box {
    margin: 0px 0 10px 0;
}
  .sc_visual{
      margin-top: 40px;
      padding-top: 45px;
  }
  .sc_visual .headline_box{
      gap: 20px;
  }
  .sc_visual .hash {
      font-size: 19px;
  }
  .sc_visual .headline {
      font-size: 37px;
  }
  .sc_visual .img_hot {
      width: 120px;
  }
  .date_badge {
      padding: 12px 20px 12px 25px;
      font-size: 13px;
  }

  .sc_con1 .con_area .top_list .top_item a {
    display: flex;
    flex-direction: column;
    gap: 15px;
  }
  .sc_con1 .con_area .top_list .top_item .img_box {
    width: 100%;
  }
  .sc_con1 .con_area .top_list .top_item .title {
    font-size: 18px;
  }
  .sc_con1 .con_area .top_list .top_item .txt_box {
    font-size: 16px;
  }
  .sc_con1 .con_area .top_list .top_item .plus {
    font-size: 14px;
    margin-top: 20px;
  }
  .sc_1 ul{
      display: flex;
      flex-direction: column;
      gap: 15px;
  }
  .qna_list .qna_item .q_box .q_wrap {
    gap: 10px;
  }
  .qna_list .qna_item .q_box .q_wrap p {
    font-size: 18px;
  }
  .qna_list .qna_item .a_box .a_wrap, .qna_list .qna_item .q_box {
    padding: 25px 10px;
  }
  .qna_list .qna_item .q_box img {
    width: 15px;
  }
  .qna_list .qna_item .a_box .txt_box li, .qna_list .qna_item .a_box .txt_box p {
    font-size: 15px;
    line-height: 1.6;
  }
  .qna_list .qna_item .a_box .a_wrap {
    gap: 10px;
  }
  .qna_list .qna_item .a_box em, .qna_list .qna_item .q_box .q_wrap em {
    font-size: 18px;
  }
  .link_go {
      padding: 9px 17px;
      font-size: 14px;
  }
  .sc_last {
      padding: 60px 0;
  }
  .sc_last .inner{
  }
  .sc_last .headline {
      font-size: 28px;
  }
  .sc_last .link_more {
      padding: 12px 20px;
  }

  .sc_con1 .con_area .top_list .top_item .img_box img {
    height: 200px;
  }
}
/* 핸드폰 */
/* 아이폰 XR pro */
/* 360 ~ 430 */

@media (max-width: 430px) {
  .enter_430{
      display: block;
  }
  section {
      padding: 35px 0;
  }
  .inner {
      width: calc(100% - 40px);
  }
  .headline {
      font-size: 24px;
  }
  .sub_headline {
      font-size: 14px;
  }



  .sc_visual .headline_box {
      gap: 15px;
  }
  .sc_visual .headline {
      font-size: 32px;
  }
  .sc_visual .img_hot {
      width: 100px;
  }
  .date_badge {
      padding: 10px 15px 10px 25px;
  }
  .sc_visual .hash {
      font-size: 17px;
  }



  .sc_1 ul li {
      padding: 25px;
  }
  .sc_1 ul li h3 {
      font-size: 20px;
  }
  .sc_1 ul li p{
      font-size: 15px;
  }



  .sc_last .headline {
      font-size: 24px;
  }
  .sc_last .link_more {
      border: 1px solid #fff;
      padding: 10px 15px;
      font-size: 15px;
  }

    .sc_con1 .con_area .top_list .top_item .img_box img {
    height: 150px;
  }
}


