@charset "utf-8";


/* 배경 */
#section1 {
  background: url(../img/bg-sec1.png) no-repeat center;
  background-size: cover;
}

#section2,
#section6 {
  background-color: #fafafa;
  overflow: hidden;
}

#section3 {
  background: url(../img/bg-sec3.png) no-repeat center;
  background-size: cover;
  box-sizing: border-box;
}

/*  */
#section4 .title h2,
#section5 .title h2,
#section6 .title h2,
#section8 .title h2 {
  margin-bottom: 10px;
}

.overlay {
  display: none;
}


.section {
  width: 100%;
  height: 100vh;
  height: 100svh;
}

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  scroll-behavior: smooth;
}



/* 푸터에서 마지막 불릿 숨기기 */
#fp-nav .bullet.footer-bullet {
  display: none;
}

/* 페이지 불릿 */
#fp-nav {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

#fp-nav .bullet {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ccc;
  opacity: 50%;
  transition: 0.2s ease-in-out;
  cursor: pointer;
  border: 1px solid transparent;
}

#fp-nav .bullet:hover {
  transform: scale(3);
  opacity: 1;
  background: #ffffff;
  border: 1px solid var(--po-color);
}

#fp-nav .bullet.active {
  background: var(--po-color);
  filter: brightness(1.2);
  transform: scale(2);
  opacity: 1;
}


.fp-nav li.active {
  background: #fff;
  transform: scale(1);
}


/* full page end */
.section {
  box-sizing: border-box;
  padding: 0 20px;
}

.sec-wrap {
  z-index: 1;
  position: relative;
  width: 100%;
  max-width: 1400px;
  box-sizing: border-box;
  padding-top: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  height: 100svh;
  gap: 40px;
}

#section4 .sec-wrap {
  align-items: end;
  margin-bottom: 40px;
}

#section1 .left,
#section1 .right {
  width: 45%;
}

#section1 .left {
  flex: 1;
}

#section1 .right {
  text-align: right;
}

#section1 img.banner {
  width: 80%;
  box-shadow: 8px 8px 15px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
}

#section1 .top_title h2 {
  margin-bottom: 5px;
  font-size: 4.2rem;
}

#section1 .top_title .sub_title {
  font-size: 20px;
  color: #111;
  font-family: 'paperlogy-M', sans-serif;
}

#section1 .sub_content {
  font-size: 18px;
  margin-top: 20px;
  line-height: 130%;
}

#section1 .line {
  margin-top: 20px;
  width: 20%;
  height: 2px;
  background: #222;
}

#section1 .left_bot {
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

#section1 .left_bot .btns {
  margin-top: 40px;
}

#section1 .left_bot .btn_bot {
  color: var(--po-color);
  font-size: 15px;
  font-family: 'paperlogy-M', sans-serif;
}

#section1 .left_bot .btn_bot a{
  color: var(--po-color);
  font-size: 15px;
  font-family: 'paperlogy-M', sans-serif;
}

/* section 2 */
#section2 {
  position: relative;
}

#section2::before,
#section2::after,
#section8::before,
#section8::after {
  position: absolute;
  content: '';
  width: 470px;
  height: 470px;
  background: var(--gradi);
  border-radius: 100%;
  left: -280px;
  bottom: -300px;
}

#section2::before,
#section8::before {
  background: #a897ff;
  left: -190px;
  bottom: -260px;
}


#section2 .right {
  width: 60%;
}

#section2 .right .info-cards {
  width: 100%;
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

#section2 .right .info-cards .card {
  width: calc(50% - 7.5px);
  background: #fff;
  padding: 25px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 30px;
  border-radius: 15px;
  justify-content: space-between;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

#section2 .right .info-cards .card .text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#section2 .right .info-cards .card .text h3 {
  font-family: 'paperlogy-SB', sans-serif;
}

#section2 .right .info-cards .card .text p {
  line-height: 1.3;
}

#section2 .right .info-cards .channel-symbol {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* section 3 */
#section3 .sec-wrap {
  flex-direction: column;
  justify-content: center;
  gap: 50px;
}

#section3 .title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#section3 .title,
#section3 .title .sub_title,
#section3 .title .top_sub {
  color: #FFF;
}

#section3 .title .top_sub::after {
  display: none;
}

#section3 .title h2 {
  font-size: 44px;
  margin-bottom: 10px;
}

#section3 .title .sub_title {
  font-family: 'paperlogy-M', sans-serif;
  font-size: 20px;
}

#section3 .bot .type_wrap {
  width: 1330px;
  background: rgba(255, 255, 255, .8);
  backdrop-filter: blur(10px) brightness(3);
  display: flex;
  align-items: center;
  box-sizing: border-box;
  gap: 40px;
  padding: 7rem 10rem;
  border-radius: 1000px;
  border: 2px solid var(--po-color);
}

#section3 .bot .type_wrap .type {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

#section3 .bot .type_wrap .type img {
  width: 40px;
  height: 40px;
}

#section3 .bot .type_wrap .type .text {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#section3 .bot .type_wrap .type .text h3 {
  font-family: 'paperlogy-SB', sans-serif;
}

#section3 .bot .type_wrap .type .text p {
  line-height: 1.4;
}

#section3 .bot .line {
  width: 1px;
  height: 80px;
  background: var(--po-color);
}

#section3 .bot>p {
  color: #fff;
  text-align: center;
  font-size: 1.8rem;
  font-family: 'paperlogy-M', sans-serif;
  margin-top: 25px;
}

#section3 .channel {
  margin: 25px auto 0;
}

#section3 .channel .btn {
  padding: 18px 45px;
  font-size: 20px;
  gap: 12px;
}

/* section 4 */
#section4 {
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: flex;
  align-items: center;
}

#section4 .sec-wrap {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

#section4 .left {
  top: 20%;
  position: absolute;
  z-index: 5;
}

#section4 .right {
  z-index: 1;
  width: 100%;
  height: 85vh;
  height: 85svh;
  display: flex;
  align-items: flex-end;
}

/* ==== 바 차트 ==== */

#section4 .bar-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  align-items: flex-end;
}

#section4 .bar {
  width: 23%;
  background: var(--gradi);
  border-radius: 20px;
  position: relative;
  height: 0;
  padding: 20px;
  box-sizing: border-box;
}


/* 라벨 (위 텍스트) */
#section4 .bar .label {
  position: absolute;
  bottom: 60px;
  left: 25px;
  color: #fff;
  font-size: 15px;
}

/* 숫자 + 단위 묶음 */
#section4 .value-wrap {
  position: absolute;
  bottom: 20px;
  left: 25px;
  display: flex;
  align-items: flex-end;
  gap: 4px;
}

/* 숫자 */
#section4 .value-wrap .num {
  font-size: 28px;
  font-family: 'paperlogy-SB', sans-serif;
  color: #fff;
}

/* 단위 (년, 건) */
#section4 .value-wrap .unit {
  font-size: 16px;
  color: #eaeaea;
}

#section4 .kga {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 1.5vh;
  z-index: 0;
}

#section4 .kga svg path {
  fill: #f8f8f8;
}

#section4 .bar1 {
  background: #f1f1f1;
}

#section4 .bar1 .value-wrap .num,
#section4 .bar1 .value-wrap .unit,
#section4 .bar1 .label {
  color: #222;
}


/* section 5 */
#section5 .sec-wrap {
  flex-direction: column;
  justify-content: center;
  align-items: start;
}

#section5 .bot .card_wrap {
  display: flex;
  gap: 15px;
}

#section5 .bot .card_wrap .card {
  width: calc(25% - 5px);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 55px;
  box-sizing: border-box;
  padding: 20px;
  border-radius: 15px;
  background: #fafafa;
  color: #222;
  border: 3px solid transparent;
  transition: 0.45s ease-in-out;
}

#section5 .bot .card_wrap .card.active {
  border-color: var(--po-color);
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.041);
  transform: scale(1.03);
}


#section5 .bot .card_wrap .card .number {
  position: relative;
  width: fit-content;
  font-size: 30px;
  color: #aaa;
  transition: .4s ease-in-out;
}

#section5 .bot .card_wrap .card.active .number {
  color: var(--po-color);
}


#section5 .bot .card_wrap .card .number::before {
  position: absolute;
  content: '';
  width: 12vw;
  height: 1px;
  background: transparent;
  left: calc(100% + 15px);
  top: 44%;
}

#section5 .bot .card_wrap .card .number.check {
  background-color: #ccc;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
}

#section5 .bot .card_wrap .card.active .number.check {
  background-color: var(--po-color);
}

#section5 .bot .card_wrap .card .text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

#section5 .bot .card_wrap .card .text h3 {
  font-family: 'paperlogy-M', sans-serif;
}

#section5 .bot .card_wrap .card .text p {
  color: #666;
  opacity: 0.9;
  line-height: 1.3;
}

#section5 .channel {
  margin-top: 25px;
  margin-left: auto;
}

#section5 .channel p {
  font-size: 18px;
}

#section5 .channel a {
  font-size: 18px;
}


/* section 6 */
#section6 .sec-wrap {
  flex-direction: column;
  align-items: start;
  justify-content: center;
}

#section6 .sec-wrap .bot .review_wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

#section6 .sec-wrap .bot .review_wrap .review {
  width: calc(33% - 7.5px);
  background: #fff;
  box-sizing: border-box;
  padding: 20px 25px 25px;
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

#section6 .review .star {
  color: #FFB400;
  font-size: 20px;
  letter-spacing: 1px;
}

#section6 .review .text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#section6 .review .text h3 {
  font-family: 'paperlogy-SB', sans-serif;
}

#section6 .review .text p {
  color: #555;
}

#section6 .review .text .writer span {
  color: #aaa;
  font-size: 14px;
}



/* section 7 */
#section7 {
  display: flex;
  flex-direction: column;
  padding: 0;
}

#section7 .top,
#section7 .bot {
  box-sizing: border-box;
  padding: 0 20px;
  width: 100vw;
  height: 50svh;
  background: #01d05c;
  color: #fff;
}

#section7 .bot {
  background: var(--gradi);
}

#section7 .top_wrap,
#section7 .bot_wrap {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#section7 .left_cont h3 {
  font-size: 3.2rem;
  font-family: 'paperlogy-B', sans-serif;
  margin-bottom: 20px;
}

#section7 .left_cont p {
  font-size: 20px;
  line-height: 1.3;
}

#section7 .line {
  width: 150px;
  height: 3px;
  background: #fff;
}

#section7 .right_cont {
  margin-top: 90px;
}

#section7 .right_cont .img img {
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);
  border-radius: 100px;
  transition: .25s ease-in-out;
}

#section7 .right_cont .img:hover img {
  scale: 1.03;
  box-shadow: 8px 8px 25px rgba(0, 0, 0, 0.1);
}

#section7 .right_cont .text {
  margin-top: 20px;
  padding-left: 90px;
  font-size: 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}


/* section 8 */
#section8 .channel {
  margin: 0 auto;
  margin-top: 40px;
}

#section8 .sec-wrap {
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#section8 .top .title {
  display: flex;
  flex-direction: column;
  align-items: center;
}

#section8 .top .title .top_sub::after {
  display: none;
}

/* faq */
.faq_wrap {
  /* display: grid;
  grid-template-columns: 1fr 1fr; */
  display: flex;
  flex-direction: column;
  max-width: 850px;
  margin: 0 auto;
}

.faq_item {
  border: 1px solid transparent;
  border-bottom: 1px solid #eee;
  overflow: hidden;
  background: #fff;
  transition: all 0.3s ease;
}

.faq_question {
  font-family: 'paperlogy-M', sans-serif;
}

.faq_question .label,
.faq_answer .label {
  flex: 0 0 24px;
  /* Q./A. 폭 고정 */
  color: #222;
}

.faq_question .text,
.faq_answer .text {
  height: 100%;
  display: flex;
  align-items: center;
  flex: 1;
  line-height: 1.6;
}

.faq_question {
  width: 100%;
  text-align: left;
  padding: 1.8rem 2rem;
  font-size: 1.8rem;
  font-family: 'paperlogy-SB', sans-serif;
  color: #333;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}


.faq_item:hover {
  border: 1px solid var(--po-color);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.faq_item:hover .faq_question::after {
  transform: translateY(-50%) rotate(180deg);
  color: var(--po-color);
}

.faq_item.active {
  border: 1px solid var(--po-color);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.faq_question::after {
  content: '+';
  position: absolute;
  padding-bottom: 2px;
  width: 22px;
  height: 22px;
  text-align: center;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #888;
  transition: transform 0.3s ease;
}

.faq_item.active .faq_question {
  border-bottom: 1px solid #eee;
}

.faq_item.active .faq_question::after {
  transform: translateY(-50%) rotate(45deg);
  color: var(--po-color);
}

.faq_answer {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.4s ease, opacity 0.3s ease;
  background: #fff;
  padding: 0rem 2rem;
}

.faq_item.active .faq_answer {
  opacity: 1;
}

.faq_answer p {
  font-size: 1.8rem;
  line-height: 1.6;
  color: #555;
}

.faq_question,
.faq_answer .faq_inner {
  display: flex;
  align-items: center;
  gap: 5px;
}

.faq_answer .faq_inner {
  padding: 1.5rem 0;
}

#section1 .left .banner_wrap {
  display: none;
}

.kga_logo-bot {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  width: 150px;
}

.tablet-img {
  display: none;
  border-radius: 20px;
  margin-top: 20px;
  overflow: hidden;
}

@media (max-width:1024px) {
  .kga_logo-bot {
    display: none;
  }

  .tablet-img {
    display: block;
  }

  #section1 .top_title h2 {
    font-size: 3.4rem;
  }


  html,
  body {
    overflow: auto;
  }

  .section {
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 5rem 20px;
  }

  #section1 {
    height: 100svh;
  }

  .overlay {
    display: block;
    position: absolute;
    width: 100vw;
    height: 100%;
    background: rgba(255, 255, 255, 0.7);
    left: 0;
    top: 0;
  }

  .sec-wrap {
    flex-direction: column;
    justify-content: center;
    height: 100%;
    margin-bottom: 0;
  }

  .sec-wrap .left,
  .sec-wrap .right {
    width: 100% !important;
  }

  #section1 .left {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  #section1 .left .left_top {
    display: flex;
    flex-direction: column;
    align-items: center;
  }


  #section1 .left .top_sub:after {
    display: none;
  }

  #section1 .right {
    display: none;
  }

  /* section 2 */

  #section2 .right .info-cards .channel-symbol {
    display: none;
  }

  #section2 .right .info-cards .card {
    min-width: 335px;
    flex: 1;
  }


  /* section 3 */
  #section3 .title h2 {
    font-size: 28px;
    text-align: center;
  }

  #section3 .title .sub_title {
    font-size: 18px;
    text-align: center;
  }

  #section3 .bot .type_wrap {
    width: 100%;
    border-radius: 30px;
    flex-direction: column;
    padding: 4rem 4rem;
  }

  #section3 .bot .line {
    width: 50%;
    height: 1px;
  }

  /* section 4 */
  #section4 .left {
    position: static;
  }

  #section4 .bar-container {
    flex-direction: column;
    gap: 8px;
  }

  #section4 .bar {
    width: 0;
    height: 33%;
  }

  #section4 .value-wrap .num {
    font-size: 20px;
    font-family: 'paperlogy-M', sans-serif;
  }

  #section4 .bar .label {

    bottom: 50px;
  }

  /* section 5 */
  #section5 .bot {
    width: 100%;
  }

  #section5 .bot .card_wrap {
    flex-direction: column;
  }

  #section5 .bot .card_wrap .card {
    width: 100%;
  }

  /* section 6 */
  #section6 .sec-wrap .bot .review_wrap .review {
    width: 100%;
  }

  /* section 7 */
  #section7 .top,
  #section7 .bot {
    height: auto;
    padding: 5rem 20px;
  }

  #section7 .top_wrap,
  #section7 .bot_wrap {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    align-items: center;
  }

  #section7 .left_cont h3 {
    font-size: 2.4rem;
    text-align: center;
  }

  #section7 .left_cont p {
    font-size: 18px;
    text-align: center;
  }

  #section7 .line {
    display: none;
  }

  #section7 .right_cont {
    margin-top: 4rem;
  }

  #section7 .right_cont .text {
    padding-left: 0;
    font-size: 18px;
    gap: 8px;
    align-items: center;
  }

  /* sec 8 */
  #section8 .sec-wrap {
    align-items: center;
  }

  #section8 .title .sub_title {
    text-align: center;
  }
}


.kga-logo-mob {
  display: none;
  width: 100%;
  box-sizing: border-box;
  padding: 3.5rem 20px;
  text-align: center;
}

.kga-logo-mob.bg_gray {
  background: #fafafa;
}

.kga-logo-mob img {
  width: 40%;
}

@media (max-width:500px) {
  .kga-logo-mob {
    display: block;
  }


  .tablet-img {
    display: none;
  }

  #section1 {
    height: auto;
  }

  #section1 .left_bot .btns {
    width: 100%;
    flex-direction: column;
  }

  #section1 .btn {
    width: 100%;
    box-sizing: border-box;
    padding: 18px 25px;
  }

  #section1 .left .banner_wrap {
    display: block;
  }

  #section1 {
    padding-top: 8rem;
    padding-bottom: 0;
  }

  #section1 .title h2 {
    font-size: 25px;
  }

  #section1 .title h2 .po_color {
    display: inline;
  }

  #section1 .title .sub_title {
    display: none;
  }

  #section1 .left .banner_wrap img {
    width: 100%;
    box-shadow: none;
  }

  #section1 .left_bot {
    width: 100%;
  }

  #section1 .sub_content {
    margin-top: 10px;
  }

  #section1 .left_bot .btns {
    margin-top: 20px;
  }

  #section1 .line {
    display: none;
  }

  #section1 .right {
    display: none;
  }

  #section1 .sub_content p {
    display: none;
  }

  #section3 .sec-wrap {
    gap: 25px;
  }

  #section5,
  #section6 {
    padding-bottom: 0;
  }

  #section2,
  #section4,
  #section5,
  #section8 {
    padding-top: 0;
  }

  .channel {
    width: 100%;
  }

  .channel .btn.channel_btn {
    width: 100%;
  }
}

@media (max-width:475px) {
  #section1 .top_title .sub_title {
    font-size: 17px;
  }

  #section1 .sub_content {
    font-size: 16px;
  }

  #section1 .sub_content .br {
    display: inline;
  }

  /* sec 3 */
  #section3 .bot .type_wrap {
    padding: 4rem 2rem;
  }

  #section3 .bot .type_wrap .type .text h3 {
    font-size: 17px;
  }

  #section3 .bot>p {
    display: none;
  }

  /* sec 4 */
  #section4 {
    height: auto;
  }

  #section4 .title .sub_title,
  #section2 .title .sub_title {
    width: 95%;
  }

  #section4 .title .sub_title .br {
    display: inline;
  }

  #section4 .right {
    height: 335px;
  }

  #section8::before,
  #section8::after {
    left: -340px;
  }

  #section8::before {
    left: -280px;
  }
}