@charset "utf-8";

.navbar .dropdown-toggle:after {
    display: none !important;
}

.navbar .nav-item .nav-item-link.active,
.navbar .nav-item .nav-item-link:hover {

    color: #B8D200;
}

.navbar .nav-item .nav-item-link.active:before {
    content: url("/img/header_act.png");
    position: absolute;
    left: 0;
    bottom: 70%;
    transform: translate(-50%, -50%);

    width: 100%;

    height: 2px;
    background-color: unset;
    transition: 0.4s ease;
}

.slider .slide-item {
    max-height: 800px;
}

@media screen and (max-width : 426px) {
body {
    font-size: 12px!important;
}
}
    


/* .navbar .nav-item .nav-item-link:hover:before
 {
   background-color: #B8D200 !important;
} */

.mv .slide-title {
color: #FFF;
font-family: Roboto;
font-size: 3rem;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 72px */
letter-spacing: 0.48px;
text-align: left;
}
.mv_small_txt {
    color: #FFF;
font-family: Roboto;
font-size: 1.25rem;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 24px */
letter-spacing: 0.16px;
text-align: left;
}

.slide-content .mv_small_txt.mt10 {
    margin-bottom: 1.185rem;
}

.slider-centerd .slick-slide {
    padding-bottom: 0!important;
}

.btn {
    height: auto;
    padding: 1rem 1.5rem;
    font-size: 1.25rem!important;
}

.btn-secondary {
    border-radius: 5px;
    background: #B8D200;
    color: #FFF !important;
    text-align: center;
    font-size: 1rem;
}

.btn-white {
    color: #222 !important;
}

.btn-white:hover {
    color: #fff !important;
}


.tit_box_ya {
    display: flex;
    gap: 20px;
    align-items: center;
}

.tit_box_ya h2 {
color: #B8D200;
font-family: Pretendard;
font-size: 3.125rem;
font-style: normal;
font-weight: 700;
line-height: 56px; /* 112% */
}
.tit_box_ya.sub h2 {
color: var(--Kootho-Green-500, #B8D200);
font-family: Pretendard;
font-size: 2.5rem;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 32px */
letter-spacing: 0.4px;
text-transform: capitalize;
}

.row.reverse_ya {
    flex-direction: row-reverse;
    align-items: center;
}

.black_ya {
    color: #222 !important;
}

.video-btn .video-player:before {
    display: none !important;
}

.has-pattern-bg:after {
    background-image: unset !important;
    display: none !important;
}

.footer .footer-primary {
    background: #1F495C;
}

.footer .footer-primary:after {
    display: none !important;
}

.footer .footer-primary {
    padding: 50px 0 25px 0;
}

.footer_copy_box {
    background-color: #1D2225;
    padding: 60px 0;
}

.footer_copy_box p {
    margin-bottom: unset;
    color: rgba(255, 255, 255, 0.40);
    font-family: 'Roboto';
    font-size: 15px;
    font-style: normal;
    text-align: center;
    font-weight: 400;
    line-height: 22.5px;
    /* 150% */
}

.clients.clients-light {
    display: none !important;
}

.fancybox-title {
    color: #222;
    font-size: 30px !important;
    font-style: normal;
    font-weight: 600;
    line-height: 56px;
}

.fancybox-layout5 .fancybox-item,
.fancybox-layout6 .fancybox-item {
    padding: 36px 30px 40px;
}

.footer .footer-widget-title {
    color: #B8D200;
}


.footer .footer-widget-title {
    text-align: center;
}

.copy_txt {
    color: #FFF;
    text-align: end;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

@media all and (max-width:900px) {
    .tit_box_ya h2 {
        font-size: 42px;
    }

    .copy_txt {
        font-size: 18px;
    }
}

svg {
    width: 100%;
    height: auto;
    /* 높이 비율 유지 */
    display: block;
    /* 불필요한 여백 제거 */
}

/* sub_visual */
.sub_vi_txt {
    padding: 210px 0;
}

.sub_vi_txt h2 {
    color: #FFF;
    text-align: center;
    font-family: 'Lexend';
    font-size: 50px;
    font-style: normal;
    font-weight: 700;
    line-height: 60px;
}



.section {
    padding: 100px 0;
}

/* about */
.about_circle_box {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.circle_con_yo {
    display: flex;
    gap: 40px;
    align-items: center;
}

.circle_con_yo h2 {
    color: #222;
    font-family: 'Lexend';
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: 36px;
}

.circle_con_yo p {
    color: #222;
    font-family: 'Roboto';
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 28px;
}

.about_bg_txt_box {
    position: absolute;
    top: 120px;
    right: 0;

}

.big_line_yo {
    width: 100%;
    height: 1px;
    background: #DCDCDC;
    margin: 100px 0;
}



@media all and (max-width:1000px) {
    .circle_con_yo {
        flex-direction: column;
        gap: 20px;
    }

    .circle_con_yo h2 br {
        display: none;
    }
}


/* history */
.his_box {
    display: flex;
    gap: 60px;
    flex-direction: column;
}

.his_row {
    display: flex;
    gap: 140px;
    align-items: start;
}

.his_year {
    width: 138px;
    max-width: 138px;
}

.his_year h2 {
    color: #222;
    font-family: 'Lexend';
    font-size: 3.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    margin-bottom: unset;
    max-width: 100%;
}

.his_txt p {
    color: #222;
    font-family: 'Roboto';
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: 33px;
    margin-bottom: unset;
    position: relative;
}

.his_txt {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.his_txt p:before {
    content: '';
    position: absolute;
    top: 12px;
    left: -40px;
    width: 10px;
    height: 10px;
    background-color: #B8D200;
    border-radius: 3px;
    z-index: 1;
}

.his_txt p::after {
    content: '';
    position: absolute;
    top: 12px;
    left: -36px;
    width: 0.5px;
    height: calc(100% + 40px);
    background-color: #1F495C;
    z-index: 0;
}

/* 연도별 마지막 항목에도 선을 추가해서 다음 연도와 이어지게 */
.his_row:last-child .his_txt p:last-child::after {
    display: none;
    /* 마지막 연도의 마지막 도트는 선 없애기 */
}

.his_row:not(:last-child) .his_txt p:last-child::after {
    content: '';
    position: absolute;
    top: 12px;
    left: -36px;
    width: 0.5px;
    height: calc(100% + 60px);
    background-color: #1F495C;
    z-index: 0;
}

.his_mail_box {
    border-radius: 15px;
    background: #B8D200;
    box-shadow: 0px 0px 20px 0px rgba(184, 210, 0, 0.50);
    padding: 48px;
    display: flex;
    gap: 40px;
    align-items: center;
}

.mail_txt_yo {
    display: flex;
    flex-direction: column;
    gap: 32px;
    height: 100%;
}

.left_right_yo {
    height: 100%;
}

.mail_txt_yo p {
color: #FFF;
font-family: Pretendard;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 24px */
}

.mail_txt_yo .mail_top_txt,
.mail_txt_yo b 
 {
    color: #FFF;
font-family: Pretendard;
font-size: 23px;
font-style: normal;
font-weight: 700;
line-height: 130%; /* 31.2px */
text-transform: capitalize;
}


@media all and (max-width:1200px) {
    .his_mail_box {
        height: 100%;
        padding: 20px 40px;
        flex-direction: column;
    }
    .mail_txt_yo {
        gap: 10px;
    }
}

@media all and (max-width:700px) {

    .his_row {
        gap: 20px;
        flex-direction: column;
    }

    .his_txt {
        gap: 20px;
    }

    .his_txt p:before {
        display: none;
    }

    .his_txt p::after {
        display: none;
    }
}

/* pipeline */
.sub_vi_tab {
    width: 100%;
    /* transform: translateY(-68px); */
    margin-top: 100px;
}

.sub_vi_tab ul {
    display: flex;
    padding-left: unset;
}

.sub_vi_tab ul li {
    width: 50%;

    display: flex;

justify-content: center;
align-items: center;
background: #2C3539;
cursor: pointer;
}

.sub_vi_tab ul li.active {
    background: #B8D200;
}

.sub_vi_tab ul li a {
    color: #FFF;
    padding: 22.75px 0px 22.25px 0px;
text-align: center;
font-family: 'Roboto';
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 22.5px; /* 140.625% */
width: 100%;
height: 100%;
}

.tit_box_ya.tit_flex_yo {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: start;
}


.tit_box_ya p {
    color: #222;

font-family: 'Roboto';
font-size: 1.25rem;
font-style: normal;
font-weight: 400;
line-height: 28px;
}

.pipe_img_box {
    border-radius: 15px;
background: #FFF;
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
/* padding: 100px; */
}

.tit_box_ya.tit_flex_yo h3 {
    color: #222;
font-family: 'Lexend';
font-size: 1.75rem;
font-style: normal;
font-weight: 600;
line-height: 36px;
}

/* @media all and (max-width:1400px) {
    .pipe_img_box {
        padding: 10px;
    }
} */


/* 250425 추가 */

.tab-nav {
    list-style: none;
    padding: 0;
    display: flex;
    margin-bottom: 5rem;
  }
  .tab-nav li {

height: 100px;
  }

  .tab-nav li a {
    display: flex;
    justify-content: center;
    align-items: center;

    height: 100px;
flex-shrink: 0;
border-radius: 15px 0px 0px 0px;
background: #FFF;
box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
color: var(--BK, #2C2C2C);
text-align: center;
font-family: Pretendard;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 100%; /* 20px */
text-transform: capitalize;
    
  }

  @media screen and (max-width: 500px) {
    .tab-nav {
        flex-direction: column;
    }
    .tab-nav li {
        margin-bottom: 1rem;
    }
    
  }

  .tab-nav li a.active {
    position: relative;
    background-color: #B8D200;
    color: var(--WH, #FAFAF8);
text-align: center;
font-family: Pretendard;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 100%; /* 20px */
text-transform: capitalize;
  }

  .tab-nav li a.active::after {
    
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -15px;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 20px solid #B8D200;
  }

  .about_pyo_yo.mt1b8 {
    margin-bottom: 8rem;
    margin-top: 1rem;
  }
  .about_pyo_yo.mt1b4 {
    margin-bottom: 4rem;
    margin-top: 1rem;
  }

  .about_pyo_yo p {
    color: #2C2C2C;
font-family: Pretendard;
font-size: 1.25rem;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 24px */
letter-spacing: 1px;
text-transform: capitalize;
align-self: stretch;
  }

  .pb-8rem {
    padding-bottom: 8rem;
  }

  .wik h4 {
    color: var(--Kootho-Green-500, #B8D200);
    font-family: Pretendard;
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    /* 32px */
    text-transform: capitalize;
    margin-bottom: 0rem;
  }

  .pb-4rem {
    padding-bottom: 4rem;
  }

  .wik h6 {
    color: #2C2C2C;
    text-align: left;
    font-family: Pretendard;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 700;
    line-height: 100%;
    /* 20px */
    text-transform: capitalize;
  }

  .wik .referenceDiv h6 {
    text-align: left;
    font-size: 1.25rem;
    color: #2C2C2C;
  }
  .referenceDiv {
    margin-top: 1rem
  }

  .grbox > div {
border-radius: 12px;
background: #F6F6F6;
padding: 2rem 1rem;
flex: 1 1 0;
text-align: center;
  }

  /* .wik .referenceDiv h6 {
    color: var(--reference-100, #BDBDBD);
  } */

  .wik h6.gray {
    color: var(--reference-100, #BDBDBD);
    font-family: Pretendard;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 150%;
    /* 30px */
    letter-spacing: 0.2px;
  }

  .wik h3 {
    color: #2C2C2C;
font-family: Pretendard;
font-size: 1.4rem;
font-style: normal;
font-weight: 700;
line-height: 150%; /* 30px */
letter-spacing: 0.2px;
  }

  .wik p {
color: #2C2C2C;
font-family: Pretendard;
font-size: 1.25rem;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 30px */
letter-spacing: 0.2px;
min-height: 100px;
  }

  .wik img {
    min-height: 300px;
  }

  .wik p.gray {
color: #434343;
font-family: Pretendard;
font-size: 1.25rem;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 27px */
letter-spacing: 0.18px;
  }

  .wik ul {
    padding-bottom: 4rem;
  }

  .wik ul li p {
    color: #2C2C2C;
    font-weight: bold;
    font-family: Pretendard;
    font-size: 43px;
    letter-spacing: 1%;
    line-height: 150%;

  }

  .con04 {
    margin: 80px 0;
  }

  .con04 .name {
    background: #B8D200;
    background: linear-gradient(142deg,rgba(184, 210, 0, 1) 0%, rgba(44, 53, 57, 1) 30%);
    border-radius: 15px 0 0 15px;
  }
  .con04 .name {
    aspect-ratio: 1/1;
  }
  .con04 .name h5 {
    text-align: center;
    color: #fff;
    margin-bottom: 0;
  }
  .con04 .career h6 {
color: #000;
font-weight: bold;
font-size: 1.5rem;
  }
  .con04 .career ul {
    padding-left: 0;
  }
  .con04 .career ul li {
    font-weight: 400;
    font-size: 1.25rem;
    color: #000;
    margin-bottom: 0.25rem;
  }
  .con04 .gap-4 {
    margin-bottom: 2rem;
  }
  .mobileOnly {
    display: none;
  }
  @media screen and (max-width:769px) {

    .slider .slide-item {
        padding: 50px 10px 50px!important;
      }
      .mv .slide-title {
        line-height: 125%;
        font-size: 2.5rem;
      }
      .wik h4 {
        margin-bottom: 0!important;
        padding-bottom: 2rem!important;
      }

      .wik p {
        min-height: 0;
      }
      .referenceDiv a {
        font-size: 1rem;
        margin-top: 1rem;
      }
      .wik p.gray {
        margin-bottom: 2rem;
      }
  }

  @media screen and (max-width:576px) {
    .mobileOnly {
        display: block;
      }
      .pcOnly {
        display: none;
      }
    .con04 .name {
        aspect-ratio: 1/0.25;
        max-height: 200px;
      }
      body {
        font-size: 12px;
      }
      .con04 .name {
        border-radius: 15px;
      }

  }


  /* 20250519 추가 */
  .navbar .nav-item .nav-item-link {
    color: #222;

text-align: right;
font-family: Roboto;
font-size: 28px;
font-style: normal;
font-weight: 700;
line-height: 100px; /* 416.667% */
text-transform: capitalize;
  }

@media (max-width: 991px) {
    .navbar .navbar-collapse.menu-opened .navbar-nav {
        gap: 10px;
    }
}

section .container.position-relative button {
    top: calc(100% + 20px);
    right: 20px;
    bottom: unset;
    position: absolute;
    width: 100px;
    height: 35px;
    border-radius: 10px;
    background: #2C3539;
    flex-shrink: 0;
}

#footer {
    padding: 74px 0;
    background: #2C3539;
    margin-top: 60px;
}

.footer_wrapper {
    display: flex;
    gap: 80px;
    flex-wrap: wrap;
}
.footer_info {
    display: flex;
    gap: 16px;
    flex-direction: column;
}
.footer_top_menu ul {
    display: flex;
    gap: 60px;
    align-items: center;
    padding-left: unset;
    flex-wrap: wrap;
}
.footer_top_menu ul li a {
    color: #FFF;
font-family: Roboto;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 18px; /* 100% */
letter-spacing: 0.4px;
text-transform: capitalize;
}

.footer_location h2 {
    color: #B7D100;
font-family: Pretendard;
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: 100%; /* 24px */
text-transform: capitalize;
}
.footer_location p {
    color: #FFF;
font-family: Pretendard;
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 24px */
}

.con02.wik .green_h6 {
    color: #B8D200;
font-family: Pretendard;
font-size: 32px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 48px */
}

.con02.wik .subtype_p {
    color: #2C2C2C;
font-family: Pretendard;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 150%; /* 30px */
}

@media (max-width: 768px) {
    .footer_wrapper {
        gap: 30px;
    }
    .footer_top_menu ul {
        gap: 32px;
    }
}