@charset "UTF-8";

/*common*/
.px-0 {
      padding-left: 0 !important; 
      padding-right: 0 !important;
}
.mx-0 {
      margin-left: 0 !important; 
      margin-right: 0 !important;
}
.pt-0 {
      padding-top: 0 !important;
}
.pb-0 {
      padding-bottom: 0 !important;
}
 
.ellipsis2 {
  width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;  /* 2줄 넘어가면 말줄임 */
  -webkit-box-orient: vertical;}

.wrap-main-container {
      padding-top: 120px;
}


/*headaer*/
header {
    width: 100%;
    background-color: var(--color-of-white );
    height: 120px;
    line-height: 120px; /*텍스트 중앙정렬*/
    overflow: hidden; 
    /*높이가 120px로 정했기 때문에 서브메뉴는 보이지 않는다*/
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;
}


.inner-header {
    max-width: 100%; /*로고,메뉴바가 있는 실제 메뉴 너비*/
    width: 100%;
    margin: auto; /*중앙정렬*/
    display: flex; /*로고, 메뉴 가로 배치*/
    justify-content: space-between;
    align-items: center;
    background-color:  var(--color-of-white);
    .logo {
      position: absolute;
      left: 5%;
      top:14px;
    }

      .header-util {
      position: absolute;
      right:5rem;
      top: 50px;
      line-height: 1;
            a {
               display: inline-block;
               margin-right: 2rem;
               font-size: 1.4rem; 
               i {
                  padding-right: .5rem;
               }   
            }
      }

}


/* gnb*/
.inner-header .mainmenu {
    position: absolute;
    left: calc((100% - 900px));
    top: 0;
    transform: translateX(-60%);
}

.inner-header .mainmenu .mainmenu-list {
    display: flex; 
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    text-align: center;
    font-size: 2rem;
    list-style: none;
}

.inner-header .mainmenu .mainmenu-list .mainmenu-list-inner {
    width: 240px;
    cursor: pointer;
    font-family: var(--font-family-notosans);
}

.inner-header .mainmenu .mainmenu-list .mainmenu-list-inner>a>span {
    position: relative; /*li에 hover 시 밑에 바 생성*/
}

.inner-header .mainmenu .mainmenu-list .mainmenu-list-inner>a>span:after {
    content: "";
    width: 0; /*display none 같은 역할*/
    height: 3px;
    left: 50%; /*left 50%를 주면 중앙에서부터 바가 퍼지게 만듦*/
    bottom: -13px;
    background-color: var(--color-of-theme);
    position: absolute;
    transition: all 0.2s; /*width가 100이 되는 과정을 천천히*/
}

.inner-header .mainmenu .mainmenu-list .mainmenu-list-inner:hover span::after{
    width: 100%; /*hover 하면 span이 100%여서 보임*/
    left: 0;
    height: 3px;
    background:var(--color-of-theme);
}

.inner-header .mainmenu .mainmenu-list .mainmenu-list-inner:hover {
    font-weight: 700;
    color:var(--color-of-theme);
}

.mainmenu .mainmenu-list .submenu {
      padding-left: 0 !important;
}

.mainmenu .mainmenu-list .submenu .submenu-inner {
    font-size: 1.7rem;
    color: #555555;
    text-align: center;
    height: 40px;
    line-height:40px;
    padding-left:0;
    list-style: none;
}

.inner-header .mainmenu .mainmenu-list .mainmenu-list-inner:hover .submenu-inner {
    font-weight: 400;
    font-family: var(--font-family-notosans);
    color: #000;
}

.header-search {
      position: absolute;
      padding: .8rem 1rem .8rem 2rem;
      border-radius: 5rem;
      border: 1px solid var(--default-font-color);
      width: 210px;
      right: calc((100% - 82%));
      top: 39px;
      background-color: var(--color-of-white);
      text-align: left;
      font-size: 1.5rem;
      color: #909090;
      i {
            position: absolute;
            right: 2rem;
            color: var(--default-font-color);
      }
}

.header-search-btn {
      border: 1px solid #000;
      position: absolute;
      right: calc((100% - 83%));
      top: 43px;
      border: none;
      background: transparent;
      span {
            i {
                  font-size: 2.2rem;
            }
      }
      
}





/*swiper*/
    html,
    body {
      position: relative;
      height: 100%;
    }

    .swiper {
      width: 100%;
      height: 100%;
    }


    .swiper-slide img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .swiper-pagination.swiper-pagination-clickable.swiper-pagination-bullets.swiper-pagination-horizontal {
      background-color: transparent !important;
      bottom: 15px;
    }

    .swiper-pagination-bullet {
      border-radius: 50% !important;
      width: 12px !important;
      height: 12px !important;
}


/*main*/
main {
      padding-bottom: 10rem;
}
    .section.main-top {
      display: flex;
      justify-content: space-between;
      padding-top: 0 !important;
      .main-banner {position: relative;
            width: 63% !important;
            height: 450px;
            img {
                 border-top-right-radius: 2rem;
                 border-bottom-right-radius: 2rem; 
            }
            * {border-top-right-radius: 2rem;
            border-bottom-right-radius: 2rem;}
            .swiper-button-next {
                  z-index: 1000;
                  right: 1rem;
                  border-radius: 50%;
                  width: 44px;
                  height: 44px;
                  background-color: rgba(255,255,255,0.4);
                  &::after {
                        font-size: 24px;
                        font-weight: 700;
                        color: rgba(0, 0, 0, 0.5);
                  }
            }     
            .swiper-button-prev {
                  display: none;
                  border: 1px solid #000;
                  }
      }
      .main-banner-cate4 {
            padding: 0 12px;
            width: 37% !important;
            display: flex;
            flex-wrap: wrap;
            div {
                  flex: 0 0 auto;
                  width: 46%;
                  height: 210px;
                  margin: 0 2%;
                  border-radius: 2rem;
                  text-align: left;
                  font-weight: 700;
                  font-size: 2.2rem;
                  line-height:1.5;
                  padding: 4.5rem 0 0 3.9rem;
                  &:nth-child(1)  {
                        background: var(--cate-one-url) no-repeat bottom right #d8f2f0;
                        margin-bottom: 25px;
                  } 
                  &:nth-child(2)  {
                        background: var(--cate-two-url) no-repeat bottom right #f4f5fb;
                        margin-bottom: 25px;
                  } 
                  &:nth-child(3)  {
                        background: var(--cate-three-url) no-repeat bottom right #e2f3ff;
                  } 
                  &:nth-child(4)  {
                        background: var(--cate-four-url) no-repeat bottom right #e7f6fa;
                  }    
                  span {
                        display: block;
                        text-align: left;
                        padding-top: 1rem;
                        i {
                              transition: transform 0.4s ease;
                              font-size: 1.8rem;
                              opacity: 0.4;
                        }
                  }  
                  &:hover {
                        cursor: pointer;
                        span {
                              i {
                                 transform: translateX(16px);  
                              }
                        }
                  }           
            }
      }

    }

    .main-container {
      .main-contents {
                  .section {
                        width: 100%;
                        padding-top: 6rem;
                        >div {
                              display: flex;
                              justify-content: center;
                              width: 1340px;
                              margin-left: auto;
                              margin-right: auto;
                        }
      
                        .section-tit {
                              position: relative;
                              font-size:3.6rem;
                              font-weight: 700;

                              span {
                                    display: block;
                                    font-size: 1.9rem;
                                    color: #5c5c5c;
                                    font-weight: 300;
                                    padding-top: 2rem;
                              }
      
                              .view-more {
                                    padding-right: 2.2rem;
                                    position: absolute;
                                    bottom: 0.2rem;
                                    right: 16.5%;
                                    gap: 0 .4rem;
                                    align-items: center;
                                    letter-spacing: -.028rem;
                                    font-weight: 600;
                                    span {
                                          position: relative;
                                          font-size: 1.5rem;
                                          font-weight: 400;
                                    }
                                    .sr-only {
                                          position: absolute;
                                          left: 0;
                                          top: 0;
                                          width: .1rem;
                                          height: .1rem;
                                          font-size: .1rem;
                                          clip: rect(.1rem, .1rem, .1rem, .1rem);
                                          opacity: 0;
                                          pointer-events: none;
                                    }
                                    .all {
                                          &::after {
                                          width: 1.4rem;
                                          height: 1.4rem;
                                          content: "";
                                          display: block;
                                          position: absolute;
                                          right: -2rem;
                                          top: 2.2rem;
                                          opacity: 0.9;
                                          background: var(--main-section-tit-view_more-all-url) center no-repeat;
                                          background-size: 100%;
                                          text-decoration: inherit;
                                          vertical-align: inherit;
                                          }
                                    }
                              }
                        }
                  }
                  .section.bg-gray {
                        background-color: #f7f7f7;
                  }
                  .section.bg-light-blue {
                        background-color: #f1f8fe;
                  }

            }
      }

            .section.main-video-tech {   
                  padding-bottom: 10rem;
                  >div {
                        margin-top:5rem;
                        width: 1400px !important;
                        border: none;
                        .mySwiper2 {
                              padding-left: 4rem;
                              padding-right: 4rem;
                              padding-bottom: 6rem;
                              .swiper-slide {
                                    /* 2025-07-14 메인에 3~4개만 나오는 경우 방지 */
                                    width: 216px;
                                    margin-right: 60px;
                                    iframe {
                                        width: 216px !important;
                                        height: 382px !important;
                                        border-radius: 2rem;
                                        border: none;
                                    }
                                    p {
                                        width: 216px !important;
                                        padding-top: 2rem;
                                        padding-left: 8%;
                                        padding-left: 2.2rem;
                                        font-size: 1.8rem;
                                        line-height: 1.4;
                                        text-align: left;
                                    }  
                              }
                              .swiper-button-next {
                                    z-index: 1000;
                                    right: 0;
                                    top: 37%;
                                    background-color: transparent;
                                    &::after {
                                          font-size: 32px;
                                          font-weight: 700;
                                          color: rgba(0, 0, 0, 0.5);
                                    }
                              }
                              .swiper-button-prev {
                                    left: 0;
                                    top: 37%;
                                    background-color: transparent;
                                    &::after {
                                          font-size: 32px;
                                          font-weight: 700;
                                          color: rgba(0, 0, 0, 0.5);
                                    }
                              }
                        }
                  }
            }


      .section.main-recom-com {
            padding-bottom: 10rem;
            .com-list {
                  div {
                        width: 20%;
                        display: flex;
                        justify-content: center;  
                        background: #f7f7f7;
                        padding-top: 3rem;
                        a {
                              display: block;
                              width: 100%;
                              text-align: center;
                              img {
                              width: 160px;
                              height: 160px;
                              border-radius: 50%;
                              object-fit: scale-down;
                              background-color: var(--color-of-white);
                              }
                              .com-name {
                                    width: 160px;
                                    height: 160px;
                                    margin-left: auto;
                                    margin-right: auto;
                                    border-radius: 50%;
                                    background-color: var(--color-of-white);
                                    color:var(--color-of-theme);
                                    font-size: 2.2rem;
                                    text-align: center;
                                    line-height: 1.5;
                                    font-weight: 700;
                                    padding: 5rem 2rem 0 2rem;
                                    word-break: keep-all;
                              }
                              .com-tit {
                                    padding-top: 2rem;
                                    font-size: 2rem;
                                    color:var(--default-font-color);
                                    font-weight: 600;
                              }
                              p {
                                    &:last-child {
                                          padding-top: 1rem;
                                          font-size: 1.6rem;
                                          line-height: 1.5;
                                          color:var(--default-font-color);
                                          word-break: keep-all;
                                          padding-left: 20%;
                                          padding-right: 20%;
                                    }
                              }
                        }
                  }
            }
      }
      .section.main-blog {
             padding-bottom: 12rem;
             .blog-list {
                  display: flex;
                  padding-top: 2rem;
                  a {
                        display: block;
                        width: 100%;
                        img {
                              border-radius: 2rem;
                              width: 297px;
                              height: 185px;
                              object-fit: cover;
                        }
                        p {
                              padding-top: 1.4rem;
                              padding-left: 4rem;
                              font-size: 1.8rem;
                              font-weight: 500;
                              line-height: 1.4;
                        }
                  }
             }

      }

      .section.main-req-notice {
            padding-bottom: 12rem;
            div {
                  background-color: #f1f8fe;  
                  }
                  .mySwiper3 {
                        padding-left: 2rem;
                        padding-right: 3rem;
                        a {
                              display: block;
                              position: relative;
                              width: 92%;
                              text-align: left;
                              border-radius: 1.8rem;
                              border: 1px solid #909090;
                              padding: 3.5rem 0 2.5rem 0;
                              background-color: var(--color-of-white);
                              p {
                                    text-align: left !important;
                                    padding-left: 4rem;

                                    font-size: 2.2rem;
                                    line-height: 1.3;
                                    font-weight: 600;
                                    height: 6rem;
                              }
                              .date {
                                    display: block;
                                    padding-left: 4rem;
                                    padding-top: 1rem;
                                    padding-bottom: 1.8rem;
                                    font-size: 1.7rem;
                                    text-align: left !important;
                                    color: #828282;
                                    font-weight: 300;
                              }
                              .cate {
                                    padding: 0.3rem 0.7rem;
                                    border-radius: 1.6rem;
                                    border: 1px solid var(--color-of-theme);
                                    color: var(--color-of-theme);
                                    font-size: 1.6rem;
                                    margin-left: 4rem;
                              }
                                    &:hover {
                                    border: 1px solid var(--color-of-theme);
                                    transition: transform 0.4s ease;
                                    &::after {
                                    width: 2.2rem;
                                    height: 2.2rem;
                                    content: "";
                                    display: block;
                                    position: absolute;
                                    right: 4rem;
                                    bottom: 2.5rem;
                                    opacity: 1;                          
                                    background: var(--section-div-swiper-cate-hover-url) center no-repeat;
                                    background-size: 100%;
                                    text-decoration: inherit;
                                    vertical-align: inherit;
                                    transition: transform 0.4s ease;
                                    }
                              }
                        }
                        .swiper-slide {
                              margin-left: 20px;
                              margin-right: 20px !important;
                        }
                        .swiper-button-next {
                              z-index: 1000;
                              right: 0;
                              &::after {
                                    font-size: 24px;
                                    font-weight: 700;
                                    color: rgba(0, 0, 0, 0.5);
                              }
                        }
                        .swiper-button-prev {
                              left: 0;
                              &::after {
                                    font-size: 24px;
                                    font-weight: 700;
                                    color: rgba(0, 0, 0, 0.5);
                              }
                        }
                  }
      }

      .section.main-media {
            padding-bottom: 10rem;
            .media-list {
               display: flex;   
               padding-top: 3rem;
               > div {
                  width: 33.33333%;
                  padding-left: 4rem;
                  padding-right: 4rem;
                  text-align: left !important;
                  a {
                        display: block;
                        width: 100%;
                        font-size: 2rem;
                        font-weight: 700;
                        line-height: 1.6;
                        span {
                              padding-top: 1.4rem;
                              width: 100%;
                              font-size: 1.6rem;
                              font-weight: 400;
                              line-height: 1.7;
                              color: #555;
                              text-align: left;
                              -webkit-line-clamp: 4;  /* 4줄 넘어가면 말줄임 */
                        }
                        &:hover {
                              text-decoration: underline;
                        }
                  }
               }
            }
      }






      /*scroll*/
      .wrap-scroll {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            .field {
            display: flex;
            align-items: center;
            justify-content: space-around;
            width: 300px;
                  .scroll {
                  width: 60px;
                  height: 60px;
                  border: 2px solid var(--color-of-theme);
                  border-radius: 50%;
                  position: relative;
                  animation: down 1.5s infinite;
                  -webkit-animation: down 1.5s infinite;
                  &::before {
                        content: '';
                        position: absolute;
                        top: 15px;
                        left: 18px;
                        width: 18px;
                        height: 18px;
                        border-left: 2px solid var(--color-of-theme);
                        border-bottom: 2px solid var(--color-of-theme);
                        transform: rotate(-45deg);
                  }
            }
            }
      }
      @keyframes down {
            0% {
                  transform: translate(0);
            }
            20% {
                  transform: translateY(15px);
            }
            40% {
                  transform: translate(0);
            }
      }

      @-webkit-keyframes down {
            0% {
                  transform: translate(0);
            }
            20% {
                  transform: translateY(15px);
            }
            40% {
                  transform: translate(0);
            }
      }


/*FAQ*/
.faq-accordion {
      padding-left: 2%;
      padding-right: 2%;
      display: block !important;
}

.accordion {
    position: relative;
    width: 100%;
    color: #222;
    cursor: pointer;
    text-align: left;
    outline: none;
    font-size: 2rem;
    font-weight: 500;
    transition: 0.4s;
    padding: 26px 80px;
    border-top: 1px solid #bdbdbd;
    line-height: 1.8;

    *:before, *:after {
        box-sizing: border-box;
        word-break: keep-all;
        word-wrap: break-word;
    }

    &:first-child {
        border-top: 2px solid #222;
    }

    &::before {
        content: '';
        position: absolute;
        top: 33px;
        left: 34px;
        width: 16px;
        height: 21px;
        background: var(--accordion-before-url) no-repeat center;
    }
    &::after {
        content: '';
        display: block;
        position: absolute;
        right: 1%;
        top: 50%;
        width: 30px;
        height: 30px;
        margin-top: -15px;
        border: solid #bdbdbd 1px;
        border-radius: 50%;
        background: var(--accordion-after-url) no-repeat center 4px;
        background-size: 66%;
    }
    .qusetion {
        display: block;
        position: absolute;
        left: -9999px;
        top: 0;
        width: 1px;
        height: 1px;
        overflow: hidden;
    }
}


.accordion.active{
   &::after {
   content: '';
    display: block;
    position: absolute;
    right: 1%;
    top: 50%;
    width: 30px;
    height: 30px;
    margin-top: -15px;
    border: solid #bdbdbd 1px;
    border-radius: 50%;
    background: var(--accordion-active-after-url) no-repeat center 4px;
    background-size: 66%;
   }
}


.accordion-body {
    padding: 0;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;

    &:last-child {
        border-bottom: 1px solid #888;
    }

    .bg-ans {
        position: relative;
        background-color:#f9f9f9;
        padding: 26px 50px 26px 80px;
        &::before {
            content: '';
            position: absolute;
            top: 30px;
            left: 34px;
            width: 14px;
            height: 21px;
            background: var(--accordion-body-bg-ans-before-url) no-repeat center;
        }
        .answer {
            position: absolute;
            top: 34px;
            left: 30px;
            width: 16px;
            height: 19px;
            overflow: hidden;
            display: block;
            text-indent: -9899px;
        }
        .faq-answer {
            background-color:#f9f9f9;
            padding-bottom: 40px;
                p {
                    text-align: left;
                    font-size: 1.7rem;
                    line-height: 1.7;
                    color: #555;
                    word-break: keep-all;
                }
            .attchment {
                position: absolute;
                right: 4%;
                bottom: 14%;
                font-size: 1.5rem;
                color: var(--color-of-gray);
            }
            .download {
                position: absolute;
                right: 4%;
                bottom: 8%;
                border: none;
                background-color: transparent;
                color: var(--color-of-theme);
                font-size: 1.6rem;
                &:hover {
                    text-decoration: underline;
                }
                i {
                    margin-right: 0.2rem;
                }
            }
        }
    }
}


/*통합검색*/
.head-srch-inner {
   display: none;
   position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    justify-content: center;
    padding: 4rem 0 10rem 0;
    width: 100%;
    background: var(--color-of-white);
      .input-group {
            position: relative;
            display: flex;
            flex-wrap: wrap;
            width: 100%;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            gap: 16px;
            input[type=text] {
            -webkit-box-flex: 1;
            -ms-flex: 1 1 auto;
            flex: 1 1 auto;
            width: 1%;
            min-width: 0;
            }
      }
      .srch-group  {
            margin: 5rem auto;
            max-width: 700px;
            input[type=text] {
            background: var(--color-of-white);
            border: 1px solid var(--color-of-theme);
            height: 64px;
            border-radius: 32px;
            padding: 0 2rem;
            font-size: 1.8rem;
            color:var(--default-font-color);
            }
            .btn-circle {
            font-size: 60px;
            width: 60px;
            height: 60px;
            border-radius: 100%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
            -ms-flex-align: center;
            align-items: center;
            -webkit-box-pack: center;
            -ms-flex-pack: center;
            justify-content: center;
            background-color: var(--color-of-theme);
            background-image: var(--magnifying-glass-solid-full-url);
            background-repeat: no-repeat;
            background-size: 3.5rem;
            background-position: 1rem 1rem;
            border: 1px solid var(--color-of-theme);
            -ms-flex-negative: 0;
            flex-shrink: 0;
            text-indent: -9999px;
            i {
                  color:var(--color-of-white);
            }

            
            }
      }
      .keyword {
      position: relative;
      max-width: 900px;
      padding-right: 80px;
      margin: 5rem auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: left;
      -webkit-box-align: start;
      -ms-flex-align: start;
      align-items: flex-start;
      gap: 1.3333333333rem;
      font-size: 1.6rem;
      line-height: 1.2;
            strong {
            margin-top: 2px;
            margin-right: 20px;
            color: var(--default-font-color);
            font-size: 1.7rem;
            font-weight: 700;
            -ms-flex-negative: 0;
            flex-shrink: 0;
            i {
                  margin-right: 0.5rem;
            }
            }
            .tags {
                  text-align: left;  
                  div {
                        position: relative;
                        display: inline-block;
                  }
                  button {
                        display: inline-block;
                        margin: 0 0 0.7rem 1rem;
                        padding: 0.4rem 4rem 0.4rem 1.2rem;
                        font-size: 1.5rem;
                        font-weight: 400;
                        background-color: var(--color-of-white);
                        color: var(--mob-menu-bg-color);
                        border: 1px solid var(--color-of-soft-border);
                        border-radius: 20rem;
                  }
                  .search-delete-btn {
                              display: inline-block;
                              position: absolute;
                              right: 1rem;
                              top: .6rem;
                              z-index: 2;
                              padding: .3rem;
                              width: 16px;
                              height: 16px;
                              background: var(--xmark-regular-full-url) center center no-repeat;
                              text-indent: -99999px;
                              border: none;
                        }
                  .nolately {
                        text-align: left;
                        font-size: 1.5rem;
                        color: var(--color-of-dark-gray);
                        padding-left: 2rem;
                        padding-top: 0.5rem;
                  }
            }
            .btn-del-all {
                  position: absolute;
                  right:0;
                  top: -5px;
                  border: none;
                  background: none;
                  color: var(--color-of-dark-gray);
                  font-size: 1.5rem;
            }
      }
      .recom {
            .tags {
                  button {
                  padding-right: 1.2rem;
                  color: var(--color-of-theme);
                  border: 1px solid var(--color-of-theme-border);
                  background-color: var(--color-of-bg);    
                  }
            }
      }
      .close { 
            cursor:pointer; 
            position:absolute; 
            top:3rem; 
            right:4rem; 
            width:5rem; 
            height:5rem; 
            .pop-close {
                      cursor: pointer;
                        margin: 0;
                        padding: 0;
                        border: 0;
                        -webkit-tap-highlight-color: transparent;
                  &::before {
                        content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        width: 5rem;
                        height: 2px;
                        background-color: #666;
                        box-sizing: content-box;
                        -webkit-transform: translate(-50%, -50%) rotate(45deg);
                        transform: translate(-50%, -50%) rotate(45deg);
                  }
                  &::after {
                      content: '';
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        width: 5rem;
                        height: 2px;
                        background-color: #666;
                        box-sizing: content-box;
                        -webkit-transform: translate(-50%, -50%) rotate(135deg);  
                  }
            }
      }

}
.head-srch-inner.active {
    display: block
}
.dimd-bg {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100lvh;
    background: rgba(0,0,0,.4)
}

.dimd-bg.active {
    display: block
}


/*통합검색결과*/
.total-search-wrap {
     .head-srch-inner {
      display: block;
      position: static;
      padding: 2rem 0 4rem 0;
      .srch-group {
            margin: 0 auto;
      }
     } 
}
.total-search-cate {
      button {
            padding: 1rem 3rem;
            margin: 1rem 0.5rem 4rem 0.5rem;
            font-size: 1.7rem;
            border: 1px solid var(--color-of-theme);
            background-color: var(--color-of-bg);
            span {
                  display: inline-block;
                  margin-left: 1rem;                  
                  color: var(--color-of-white);
                  background-color: var(--color-of-theme);
                  font-weight: 200;
                  border-radius: 100%;
                  width: 2rem;
                  height: 2rem;

            }
      }
      .active {
                background-color: var(--color-of-theme);
                color: var(--color-of-white);  
                span {
                  color: var(--color-of-theme);
                  background-color: var(--color-of-white);
                  font-weight: 400;
                }
            }
}
section.contents-section.total-search {
      display: block;
      width: 1310px;
      max-width: 1310px;
      min-width: 1310px;

      .contents {
            margin-bottom: 10rem;
            padding-top: 0;
            .list-section-title {
                  font-size: 2rem;
            }

            section.list-section {
                  position: relative;
                  padding: 0 0 0 0;

                  .list-section-title {
                        position: absolute;
                        left: 0;
                        top: -5rem;
                        font-size: 3rem;
                        font-weight: 500;
                        background: transparent;

                        span {
                              position: absolute;
                              top: 0.45rem;
                              right: -4.5rem;
                              display: inline-block;
                              color: var(--color-of-theme);
                              background-color: var(--color-of-tag-hv-bg);
                              border-radius: 100%;
                              font-size: 2rem;
                              line-height: 1.5;
                              width: 3rem;
                              height: 3rem;
                        }
                  }
                  .company {
                        display: flex;
                        padding: 3rem 0;
                        border-bottom: 1px solid var(--color-of-soft-border);
                        .video {
                        margin: 0;
                        padding: 0;
                        box-sizing: border-box;
                        text-align: center;
                        position: relative;
                        width: 250px;
                        min-width: 250px;
                        height: 140px;
                        }
                        .comp {
                        padding: 0 3rem;
                        width: 100%;
                        text-align: left;
                              .tags {
                              margin-top: 1.4rem;
                              text-align: left;
                              }
                        }
                  }
                  .request-list {
                  padding-top: 3rem;
                  }

                  .vod-list-wrap {
                        display: flex;
                        padding-top: 4rem;
                        padding-bottom: 2rem;
                        .vod-list {
                              img {
                              border-radius: 2rem;
                              width: 190px;
                              height: 340px;
                              object-fit: cover;
                              }
                              iframe {
                              border-radius: 2rem;
                              width: 190px;
                              height: 340px;    
                              }
                              .vod-tit {
                                    padding-top: 1.4rem;
                                    padding-left: 4rem;
                                    font-size: 1.6rem;
                                    font-weight: 500;
                                    line-height: 1.4;
                                    text-align: left;
                              }
                        }
                  }

                  .blog-list-wrap {
                        display: flex;
                        padding-top: 4rem;
                        .blog-list {
                              img {
                              border-radius: 2rem;
                              width: 250px;
                              height: 156px;
                              object-fit: cover;
                              }
                              .blog-tit {
                                    padding-top: 1.4rem;
                                    padding-left: 4rem;
                                    font-size: 1.6rem;
                                    font-weight: 500;
                                    line-height: 1.4;
                                    text-align: left;
                              }
                        }
                  }
                  .press-release {
                        padding-top: 2rem;
                        div {
                              text-align: left;
                              border-bottom: 1px solid var(--color-of-soft-border);
                              a {
                                    display: block;
                                    padding: 2.3rem 2rem 2.3rem 3rem;
                                    p {
                                          text-align: left;
                                          font-size: 1.6rem;
                                          line-height: 1.6;
                                    }
                                    .press-title {
                                          font-size: 1.9rem;
                                          font-weight: 700;
                                          padding-bottom: 1rem;
                                    }
                                    span {
                                          display: block;
                                          text-align: left;
                                          font-size: 1.5rem;
                                          color: var(--color-of-gray);
                                          padding-top: 1rem;
                                    }
                              }
                        }
                  }
                  .total-search-more {
                        margin-top: 2rem;
                        a {
                              display: inline-block;
                              padding: 1rem 3rem;
                              border-radius: 100rem;
                              color: var(--color-of-white);
                              font-size: 1.7rem;
                              background-color: var(--mob-menu-bg-color);
                              i {
                              padding-left: 1rem;
                              font-size: 1.5rem;
                              }
                        }
                  }
            }

            .nodata {
                  padding: 10rem 0 7rem 0 !important;
                  font-size: 1.8rem;
            }
            
      }
}



/*맞춤 제조 신청*/

.infomations-top-wrap {
      position: relative;

      .infomations-top {

            .infomations-inner {
                  padding-top: 3rem;
                  display: flex;

                  .comp-logo-thumb {
                        padding-left: 3rem;
                        width: 172px;

                        img {
                              width: 140px;
                              height: 140px;
                              border-radius: 100px;
                              border: 1px solid var(--color-of-input-border);
                        }
                  }

                  .comp-wide-info {
                        padding-left: 4rem;
                        flex: 1;

                        div {
                              text-align: left;

                              h3 {
                                    font-size: 2.3rem;
                                    font-weight: var(--font-weight-bolder);
                                    display: inline-block;
                                    line-height: 1;
                                    margin-bottom: 1.8rem;
                              }

                              button {
                                    margin: 0 0 0 1.7rem;
                                    padding: 1.5rem;
                                    width: max-content;
                                    font-size: 1.6rem;
                                    color: var(--color-of-theme);
                                    border: 1px solid var(--color-of-theme);
                                    border-radius: 0.8rem;
                                    background-color: var(--color-of-white);
                                    vertical-align: middle;
                              }

                              .fav {
                                    border-color: var(--color-of-soft-border);
                                    background-image: var(--icon-not-fav-url);
                                    background-repeat: no-repeat;
                                    background-position: center;
                                    background-color: var(--color-of-white);
                              }

                              .on {
                                    background-image: var(--icon-fav-url);
                                    border-color: var(--color-of-theme);
                              }
                        }

                        p {
                              padding: 0 0 1rem 0;
                              font-size: 1.8rem;
                        }

                        .tags-area {
                              position: relative;

                              .tags {
                                    padding-right: 20%;
                                    max-height: 37px;
                                    overflow: hidden;

                                    span {
                                          display: inline-block;
                                          color: var(--color-of-theme);
                                          font-size: 1.5rem;
                                          padding: 1rem 0.8rem 0 0;
                                    }
                              }

                              .expanded {
                                    max-height: 1000px;
                              }

                              .more-btn {
                                    position: absolute;
                                    bottom: 0.85rem;
                                    left: 78%;
                                    border: none;
                                    color: var(--default-font-color);
                                    background-image: var(--caret-down-solid-full-url);
                                    background-position: 0.7rem 0;
                                    background-repeat: no-repeat;
                                    background-size: 1.9rem;
                                    padding: 0 1.2rem 0 3rem;
                                    font-size: 1.6rem;
                                    color: var(--color-of-dark-gray);
                              }

                              .fold {
                                    background-image: var(--caret-up-solid-full-url);
                                    background-position: 0.7rem 0.2rem;
                              }
                        }

                        .buttons {
                              button {
                                    margin: 0 0.6rem;
                                    padding: 1rem 1.5rem;
                                    width: max-content;
                                    font-size: 1.6rem;
                                    color: var(--color-of-theme);
                                    border: 1px solid var(--color-of-theme);
                                    border-radius: 0.8rem;
                                    background-color: var(--color-of-white);
                              }

                              button.theme {
                                    background-color: var(--color-of-theme);
                                    color: var(--color-of-white);
                                    ;
                              }
                        }

                        p {
                              text-align: left;
                        }

                        .buttons {
                              padding-top: 1.5rem;
                        }
                  }

            }

            .linker {
                  margin-top: 3rem;
                  padding: 0 1rem;
                  text-align: left;
                  border-top: 1px solid var(--color-of-soft-border);

                  a {
                        display: inline-block;
                        position: relative;
                        padding: 1.6rem 3rem;
                        font-size: 1.8rem;
                        color: var(--mob-menu-bg-color);
                        font-family: var(--font-family-notosans);
                  }
                  a.active {
                        &::after {
                              position: absolute;
                              content: "";
                              width: 100%;
                              height: 0.3rem;
                              left: 0;
                              bottom:-1px;
                              background-color: var(--color-of-theme);
                        }
                  }
            }
      }
      .infomations-top.fixed {
            position: fixed;
            top: 0;
            z-index: 900;
            width: 1248px;
            .infomations-inner {
                  padding-top: 1rem;
                  .tags-area {
                  display: none;
                   }
            }

            .linker { 
              border-bottom: 1px solid var(--color-of-soft-border);    
            }
            
      }
}

/*제조기술영상 모아보기*/
section.search-section {
      .btn {
            position: absolute;
            top: 14.8rem;
            right: 0;
            z-index: 111;
            display: flex;
            align-items: center;
            justify-content: center;
            border: none;
            color: var(--color-of-white);
            font-size: 19px;
            float: left;
            width: 25%;
            margin: 0;
            padding: 0;
            background-color: var(--color-of-theme);
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
            border-top-right-radius: 6px;
            border-bottom-right-radius: 6px;

            .btn-gradient {
                  background: rgba(0, 0, 0, 0.15);
                  box-shadow: 2px 0 0 0 rgba(78, 72, 72, 0.4);
                  border-top-left-radius: 6px;
                  border-bottom-left-radius: 6px;
                  border-top-right-radius: 48px;
                  background-image: var(--circle-play-regular-full-url);
                  background-position: 1.5rem 0.7rem;
                  background-repeat: no-repeat;
                  background-size: 4.2rem;
                  position: relative;
                  left: 0;
                  top: 0;
                  width: 25%;
                  height: 5.5rem;
                  padding: 10px 10px;
            }

            .btn-text {
                  width: 75%;
            }
      }
}

.btn-ma-area {
  position: relative;
    .btn {
      position: absolute;
      top: -9.5rem;
      right: 0;
      z-index: 111;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: var(--color-of-white);
    font-size: 19px;
    float: left;
    width:25%;
    margin: 0;
    padding: 0;
    background-color: var(--color-of-theme);
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
    
    .btn-gradient { 
      background: rgba(0, 0, 0, 0.15);
      box-shadow: 2px 0 0 0 rgba(78, 72, 72, 0.4);
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
      border-top-right-radius: 48px;
      background-image: var(--circle-play-regular-full-url);
      background-position: 1.5rem 0.7rem;
      background-repeat: no-repeat;
      background-size: 4.2rem;
      position: relative;
      left:0;
      top: 0;
      width: 25%;
      height: 5.5rem;
      padding:10px 10px;
    }
    .btn-text {
    width: 75%;
    }
  }

  .btn.back {
    width: 21%;
    .btn-gradient {
      background-image: var(--arrow-u-turn-up-left-solid-full-url);
      background-size: 3rem;
      background-position: 1.6rem 1.3rem;
    }
  }

}

.tech-video-tab {
      text-align: left;
      button {
            padding: 1rem 3rem;
            margin-right: 1rem;
            align-items: center;
            justify-content: center;
            font-size: 1.7rem;
            background-color: var(--color-of-white);
            color: var(--color-of-theme);
            border: 1px solid  var(--color-of-theme);
            border-radius: 24rem;
      }
      .active {
            background-color: var(--color-of-theme);
            color: var(--color-of-white);
      }
}

.tech-video-long {
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      justify-content: flex-start;
      margin: 0 auto;

      .item {
            margin-top: 5rem;
            flex-grow: 0;
            flex-basis: calc(33.3333% - 20px);
            .thumb-long {
                        position: relative;
                        img {
                              width: 100%;
                              border-radius: 1.5rem;
                              height: 223px;
                        }
                        .play-icon {
                              position: absolute;
                              top: 50%;
                              left: 50%;
                              transform: translate(-50%, -50%);
                              width: 70px;
                              height: 70px;
                              background-image: var(--youtube-brands-solid-full-url); 
                              background-size: cover;
                              background-color: transparent;
                              cursor: pointer;
                              }
                  }

                  .title-long {
                        display: flex;
                        .logo {
                              border-radius: 50%;
                              padding-top: 0.8rem;
                              img {
                                    width: 6.5rem;
                                    height: 6.5rem;
                                   border-radius: 50%; 
                                   padding: 0.3rem;
                                   border: 1px solid var(--color-of-soft-border);
                                   object-fit: cover;
                              }
                        }
                        .text {
                              padding-left: 1.5rem;
                              a {
                                  display: block;
                                  margin-bottom: .7rem;
                                  padding: 1rem 0;
                                  text-align: left;
                                  font-size: 1.7rem;
                                  font-weight:var(--font-weight-bolder);
                                  color: var(--default-font-color);
                              }
                              p {
                                    text-align: left;
                              }
                        }
                        
                  }
      }
}

.tech-video-short {
      padding-top: 5rem;
      display: flex;
      flex-wrap: wrap;
      gap: 30px;
      justify-content: flex-start;
      margin: 0 auto;
      .item {
            position: relative;
            flex-grow: 0;
            flex-basis: calc(25% - 22.5px);
            border-radius: 2rem;
            img {
                  width: 100%;
                  height: 500px;
                  border-radius: 2rem;
                  object-fit: cover;
            }
            .play-icon {
                              position: absolute;
                              top: 50%;
                              left: 50%;
                              transform: translate(-50%, -50%);
                              width: 80px;
                              height: 80px;
                              background-image: var(--youtube-brands-solid-full-url); 
                              background-size: cover;
                              background-color: transparent;
                              cursor: pointer;
                              }
      }
}

.dialog.popup-dim.tech-video {
background-color: rgba(0, 0, 0, 0.85);
}

.dialog.popup-dim.tech-video.mob {
      .tech-video-slide {
           .swiper { 
            width: 1000px;
            margin-top: 7rem;
            .swiper-slide {
                  iframe {
                        width: 360px;
                        height: 640px;
                        }
                  }
                  .tech-video-title { 
                        display: block;
                        width: 360px;
                        margin-top: 0.5rem;
                        .logo {
                        display: flex;
                        div {
                              &:last-child {
                                    margin-right: 0;
                              }
                        }
                        }
                        .btn-detail {
                              margin-top: 3rem;
                        }
                  }
           } 
      }
}

.tech-video-slide {
      background-color: transparent;
      .dim-close {
      position: absolute;
      left: 53%;
      top: 8rem;
      margin-left: 460px;
      padding: 0 0 0 0;
      border-radius: 50%;
      width: 5.5rem;
      height: 5.5rem;
      background: transparent;
      border: none;
      text-align: center;
      font-size: 3.5rem;
      i {
        color: var(--color-of-white);
        font-weight: 200 !important;
      }

    }
    div {
      background-color: transparent;
    }
      .swiper {
            z-index: 11;
            margin: 15rem auto 0 auto;
            width: 1000px;
            .swiper-slide {
                  iframe {
                        width: 85%;
                        height: 478px;
                  }
            }
            .tech-video-title {
                 width: 85%;
                 margin: 1.3rem auto;
                 justify-content: space-between;
                 display: flex;
                 .logo {
                  display: flex;
                  div {
                        margin-right: 1.8rem;
                        text-align: left;
                        img {
                              width: 6.6rem;
                              height: 6.6rem;
                              border-radius: 100%;
                        }
                        h3 {
                        font-size: 1.9rem;
                        font-weight:var(--font-weight-bold);
                        color: var(--color-of-white);
                        text-align: left; 
                        margin-bottom: 1rem;
                        margin-top: 0.7rem;
                        }
                        p {
                        text-align: left;
                        color: var(--color-of-white);
                        font-weight:300;
                        }
                  }
                 }
                 .btn-detail {
                  padding-top: 1.7rem;
                  margin-right: 0;
                  min-width: 30%;
                  a {
                       padding: 1rem 3rem;
                       border-radius: 0.8rem;
                       background: var(--color-of-theme);
                       color: var(--color-of-white);
                       font-size: 1.7rem;
                       i {
                        margin-left: 1rem;
                        font-size: 1.4rem;
                       }
                  }
                 }
            }
      }
      
}




/*K-MAP소개 2025*/

.about-kmap-intro {

      div {
            text-align: left;
            background-color: transparent;
      }

      h2.title {
            text-align: center;
            span {
                  display: inline-block;
                  padding: 0.7rem 2rem;
                  min-width: 20rem;
                  border-radius: 3rem;
                  background-color: var(--color-of-soft-theme);
                  font-weight: 700;
                  color: #62799f;
                  font-size: 2.3rem;
            }
      }
      .title-kmap {
            text-align: center;
            h3 {
                  font-size: 3.5rem;
                  font-weight: 700;
                  margin-top: 7rem;
                  margin-bottom: 1.3rem;
                  color: var(--mob-menu-bg-color);
            }
            p {
                  font-size: 2.8rem;
            }
      }

      .story-container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            max-width: 1200px;
            margin: 100px auto 130px auto;
            gap: 90px;
            padding: 0;

            .text-section {
                  flex: 1.1;

                  h1 {
                        font-size: 2.8rem;
                        font-weight: 700;
                        margin-bottom: 25px;
                  }
                  p {
                        text-align: left;
                        font-size: 1.8rem;
                        color: var(--color-of-charcoal );
                        margin-bottom: 3rem;
                        line-height: 1.8;
                        span {
                              color: var(--color-of-theme);
                              font-weight: 600;
                        }
                  }
            }

            .video-section {
                  flex: 1;
                  background-color:var(--color-of-blue);
                  padding: 20px;
                  position: relative;
                  color: var(--color-of-white);
                  h2 {
                        font-size: 22px;
                        font-weight: 700;
                        color: var(--color-of-green);
                        margin-bottom: 10px;
                        text-transform: uppercase;
                        line-height: 1.4;
                        span {
                        color: var(--color-of-white);
                        }
                  }
                  .video-wrapper {
                  position: relative;
                  overflow: hidden;
                  margin-top: 15px;
                  margin-left: -65px;
                  iframe {
                  width: 569px;
                  height: 330px;
                  display: block;
                  border: none;
                  }
                  }
            }
      }
}

.about-kmap-intro.vision {

      .title-kmap {
            h3 {
                  line-height: 1.5;
            }
      }

     .story-container {
      display: block;
      margin-top: 8rem;

      .img-vision {
            text-align: center;
            margin-bottom: 8rem;
      }

      .text-sectio {
            p {
                  word-break: keep-all;
            }
      }

      .sign {
            p {
                  text-align: right;
                  font-size: 2rem;
                  span {
                        display: inline-block;
                        vertical-align: middle;
                        margin-left: 2rem;
                  }
            }
      }
     }
}




/* 반응형 처리 */
    @media (max-width: 900px) {
      .about-kmap-intro {
            .container {
            flex-direction: column;
            gap: 40px;
            margin: 60px auto;
            padding: 0 20px;
            }
            .text-section h1 {
            font-size: 32px;
            }
            .video-section {
            padding: 15px;
            }
      }
      
    }


.support-link-container {

      div {
            text-align: left;
            background-color: transparent;
      }

       .row {
      display: flex;
      flex-wrap: wrap;
      gap: 50px;
      padding-left: 3rem;
      padding-right: 3rem;
      justify-content: space-between;
      .box {
      flex: 1 1 calc(33.333% - 50px);
      min-width: 280px;
      background: var(--color-of-drop-down-bg );
      border-radius: 10px;
      text-align: center;
      padding: 3rem;
      transition: 0.4s;
      position: relative;
      overflow: hidden;
      &::after {
            content: "";
            position: absolute;
            right: -60px;
            bottom: -60px;
            width: 110px;
            height: 110px;
            background: var(--color-of-blue);
            border-radius: 50%;
            opacity: 0;
            transition: 0.5s;
            }
      &:hover {
             background: var(--color-of-blue);
             color: var(--color-of-white);
             &::after {
                  opacity: 0.1;
                  width: 500%;
                  height: 500%;
                  background: var(--color-of-white);
             }
            .title,
            .info,
            .info span {
                  color: var(--color-of-white);
            }

            .icon {
                  background: #f0f6fe;

                  i {
                  color: var(--color-of-blue);
                  transform: scale(0.85);
                  }
            }
             .icon.support1 {
            i {
                  background-image: var(--icon_support1_over-url);
            }
            }
            .icon.support2 {
                  i {
                        background-image: var(--icon_support2_over-url);
                  }
            }
            .icon.support3 {
                  i {
                        background-image: var(--icon_support3_over-url);
                  }
            }

            .btn {
                  border-color: var(--color-of-white);
                  color: var(--color-of-white);

                  i {
                  transform: rotate(0deg);
                  }
            }
      }
      }

      .icon {
            width: 100px;
            height: 100px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
            background: var(--color-of-blue);
            border-radius: 10px;
            i {
                  width: 90px;
                  height: 90px;
                  transition: 0.3s;
                  }
            }
      .icon.support1 {
            i {
                  background-image: var(--icon_support1-url);
            }
      }
      .icon.support2 {
            i {
                  background-image: var(--icon_support2-url);
            }
      }
      .icon.support3 {
            i {
                  background-image: var(--icon_support3-url);
            }
      }
      .title {
            color: var(--mob-menu-bg-color);
            font-weight: 600;
            margin-bottom: 10px;
            transition: 0.3s;
            text-align: center;
            font-size: 2.2rem;
            }

      .info {
            color: var(--color-of-dark-gray);
            font-size:1.8rem;
            line-height: 1.4;
            margin-bottom: 25px;
            text-align: center;
            span {
            color: var(--color-of-blue);
            font-weight: bold;
            }
            }
      .btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 46px;
            height: 46px;
            border: 2px solid var(--color-of-blue);
            border-radius: 50%;
            color: var(--color-of-blue);
            text-decoration: none;
            transition: 0.3s;
            i {
                  transform: rotate(-45deg);
                  transition: 0.3s;
                  font-size: 1.8rem;
            }
            }
      }
}

@media (max-width: 768px) {
  .box {
    flex: 1 1 100%;
  }
}   

.kmap-cont {
       
      .item {
       display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 1200px;
      margin: 0 auto;
      padding: 80px 20px 0 20px;
      flex-wrap: wrap;
            .img-kmap {
                  width: 43.1%;
                  margin-right: 6.9%;
                  img {
                        width: 100%;
                  }
            }
            .item-text {
                  width: 50%;

                  div {
                        margin-bottom: 10rem;

                        h3 {
                              font-size: 3.2rem;
                              font-weight: 700;
                        }
                        p {
                              margin-top: 2rem;
                              line-height: 1.8;
                              font-size: 1.8rem;
                              color: var(--color-of-dark-gray);
                              text-align: left;
                              word-break: keep-all;
                        }
                  }
            }
      }

      .item2 {

            .img-kmap {
                  width:50%;
                  margin-right: 0;
                  margin-left: 0;
                  text-align: right;

                  img {
                        width: 94.85%;
                  }
            }
      }
}

.intro-kitech {
      width: 1140px;
      height: 287px;
      margin: 5rem auto;

      a {
            display: block;
            border-top: 1px dashed var(--color-of-default-border);
            text-align: center;
            padding: 7rem 0;

            img {
                  padding-bottom: 2rem;
            }

            p {
                  text-align: center;
                  font-size: 1.8rem;
                  line-height: 1.8;
                  margin-bottom: 6rem;
                  color: var(--color-of-dark-gray);

                  strong {
                        color:#0257c5 ;
                        font-weight: 500;
                  }
                  
            }
      }


}


/*제조기업 회원 혜택-마케팅 지원*/
.kmap-support {
      .video-intro-container {
            text-align: center;
            p {
                  padding-top: 2rem;
                  font-size: 1.8rem;
                  line-height: 2;
                  color: var(--color-of-dark-gray);
                  text-align:center;
            }
            img {
                  padding-top: 5rem;
                  padding-bottom: 7rem;
            }
      }
      .video-intro-text {
            width: 1140px;
            height: 330px;
            margin: 0 auto;
            border-radius: 2rem;
            background-image: var(--bg_intro_marketing-url);
            background-size: cover;
                  h3 {
                  text-align: center;
                  font-size: 3rem;
                  line-height: 1.6;
                  font-weight: 700;
                  padding-top: 6rem;
                  margin-bottom: 3rem;
                  color: var(--color-of-white);
            }
            p {
                  text-align: center;
                  font-size: 1.8rem;
                  line-height: 1.8;
                  margin-bottom: 6rem;
                  color: var(--color-of-white);
            }
      }   
      .video-intro-text.tech {
            background-image: var(--bg_intro_tech-url);
            p {
                  padding-left: 8%;
                  text-align: left;
                  margin-bottom: 1rem;
                  span {
                       display: inline-block;
                       padding: 0.1rem 2rem;
                       margin-right: 1.5rem;
                       width: 144.06px;
                       border-radius: 200px;
                       border: 1px solid #fff; 
                  }
            }
      }
      .support-items {
            padding-top: 10rem;
            h3.title {
                  text-align: center;
                  font-size: 3rem;
                  line-height: 1.8;
                  font-weight: 700;
                  margin-bottom: 5rem;
                  color: var(--mob-menu-bg-color);
            }

            .item-cards {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            gap: 0 80px;
            max-width: 1200px;
            margin: 0 auto;

            .card { 
            display: flex;
            align-items: flex-start;
            background: #fff;
            padding: 30px 0 40px 0;
            flex: 1 1 45%;
            max-width: 500px;

            .icon-wrap {
                  position: relative;
                  min-width: 140px;
                  height: 140px;
                  margin-right: 25px;

                  .icon-border { 
                  width: 100%;
                  height: 100%;
                  border-radius: 50%;
                  border: 4px solid var(--color-of-theme);
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  font-size: 42px;
                  color: var(--color-of-theme);
                  background: #f0f5ff;
                  img {
                        width: 100%;
                        height: 100%;
                        border-radius: 50%;
                  }
                  }

                  .icon-badge { 
                  position: absolute;
                  bottom: -5px;
                  right: -5px;
                  background: var(--color-of-theme);
                  color: #fff;
                  font-size: 18px;
                  width: 50px;
                  height: 50px;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  border-radius: 50%;
                  font-weight: bold;
                  i {
                        font-size: 2.3rem;
                        padding-left: 0.5rem;
                  }
                  }
            }

            .card-content {
                  text-align: left;

                  h3 {
                  font-size: 2.1rem;
                  font-weight: 700;
                  margin: 5px 0 10px;
                  color: #222;
                  }

                  p {
                  color: #555;
                  font-size:1.6rem;
                  line-height: 1.7;
                  text-align: left;
                  word-break: keep-all;
                  }
            }
            } 


            .card.full { 
            flex: 1 1 100%;
            justify-content: center;
            max-width: 600px;
            }
            } 


            @media (max-width: 900px) {

            .container {
            flex-direction: column;
            align-items: center;
            }

            .item-cards { 
            .card, .card.full {
                  flex: 1 1 100%;
                  max-width: 90%;
            }

            .icon-wrap {
                  min-width: 100px;
                  height: 100px;
                  margin-right: 20px;
            }
            }
            }
      }  
}

.btn-regist-center {
      text-align: center !important;
      padding-top: 5rem;
      padding-bottom: 10rem;

      button {
            padding: 1.2rem 6rem;
            font-size: 1.8rem;
            border-radius: 0.6rem;
            border: none;
            background-color: var(--color-of-theme);
            color: var(--color-of-white);
      }
}



/*K-MAP 가이드*/
.kmap-guide {
      .nav-kmap {
                  text-align: center;
                  padding-top: 3rem;
                  padding-bottom: 8rem;
                        a {
                              position: relative;
                              display: inline-block;
                              padding: 0 3rem;
                              font-size: 3rem;
                              font-weight: 300;
                              color: var(--color-of-gray);
                              &::before {
                                    content: "";
                                    position: absolute;
                                    width:1px;
                                    height:2.5rem;
                                    left: 0;
                                    top:0.7rem;
                                    background-color: var(--color-of-hover-border);
                              }
                              &:first-child::before {
                                    display: none;
                              }

                        }
                        .active {
                              color: var(--color-of-theme);
                              font-weight: 700;
                        }
            }

            .nav-guide {
                  border-bottom: 1px solid var(--color-of-default-border);
                  margin-bottom: 1rem;
                  a {
                        display: inline-block;
                        padding: 1.3rem 3rem;
                        font-size: 2rem;      
                        color: var(--color-of-gray);
                  }
                  .active {
                              font-weight: 700;
                              color: var(--color-of-charcoal);
                              border-bottom: 2px solid var(--color-of-charcoal);
                        }
            }
            .nav-guide.scrolling {
                  position: fixed;
                  top: 0;
                  background-color: var(--color-of-white);
                  width: 1248px;
                  z-index: 998;
            }

      .nav-kmap-guide {
            text-align: left;
            button {
                  padding: 1rem 3rem;
                  margin-right: 1rem;
                  align-items: center;
                  justify-content: center;
                  font-size: 1.7rem;
                  background-color: var(--color-of-white);
                  color: var(--color-of-theme);
                  border: 1px solid  var(--color-of-theme);
                  border-radius: 24rem;
            }
            .active {
                  background-color: var(--color-of-theme);
                  color: var(--color-of-white);
            }
      }
}

      .kmap-guide-content {
            padding-top: 6rem;
            h3 {
                  font-size: 2.8rem;
                  font-weight: 700;
                  margin-bottom: 2rem;
                  line-height: 1.6;
            }
            p {
                  font-size: 1.8rem;
                  line-height: 1.8;
                  color: var(--color-of-dark-gray);
                  margin-bottom: 2rem;
            }
            a.link {
                  display: inline-block;
                  font-size: 1.8rem;
                  color: var(--color-of-theme);
                  text-decoration: none;
                  margin-bottom: 5rem;
                  &:hover {
                        text-decoration: underline;
                  }
                  i {
                        font-size: 1.4rem;
                        margin-left: 0.5rem;
                  }
            }
      }
      .kmap-guide-content.bg-blue {
            background-color: #ecf7ff;
      }

.btn-kmap-guide {
      position: relative;
      .btn {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 111;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        color: var(--color-of-white);
        font-size: 19px;
        float: left;
        width: 20%;
        margin: 0;
        padding: 0;
        background-color: var(--color-of-theme);
        border-top-left-radius: 6px;
        border-bottom-left-radius: 6px;
        border-top-right-radius: 6px;
        border-bottom-right-radius: 6px;
    }
    .btn-gradient { 
      background: rgba(0, 0, 0, 0.15);
      box-shadow: 2px 0 0 0 rgba(78, 72, 72, 0.4);
      border-top-left-radius: 6px;
      border-bottom-left-radius: 6px;
      border-top-right-radius: 48px;
      background-image: var(--download-light-full-white-url);
      background-position: 1.5rem 0.9rem;
      background-repeat: no-repeat;
      background-size: 3.8rem;
      position: relative;
      left:0;
      top: 0;
      width: 28%;
      height: 5.5rem;
      padding:10px 10px;
    }
    .btn-text {
    width: 72%;
    }
}

.guide-features {
      display: flex;
      justify-content: center;
      gap: 60px;
      margin: 60px 0;
      flex-wrap: wrap;
      h3 {
      width: 100%;
            span {
                  display: block;
                  margin-top: 2rem;
                  font-size: 1.8rem;
            }
      }

      .feature {
            width: 260px;
            text-align: center;

            h4 {
                  font-size: 1.8rem;
                  font-weight: 600;
                  margin-bottom: 8px;
            }
            img {
                  width: 80px;
            }
            p {
                  font-size: 1.6rem;
                  color: #666;
                  line-height: 1.6;
                  word-break: keep-all;
            }
      }
}

.guide-items {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 60px;
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px 20px 80px 20px;
      flex-wrap: wrap;
      background-color: transparent;
      img {
      width: 100%;
      max-width: 610px;
    }
    .text-box {
      text-align: left;
      background-color: transparent;
      flex: 1 1;
      h4 {
            font-size: 2.4rem;
            font-weight: 700;
            padding-left: 3.6rem;
            margin-bottom: 1.5rem;
            background-image: var(--circle-check-solid-full-url);
            background-position: 0 0;
            background-repeat: no-repeat;
      }
      p {
            padding-left: 0.4rem;
            text-align: left;
            font-size: 1.8rem;
            line-height: 1.8;
            color: var(--color-of-dark-gray);
      }
    }
}








/* FAQ  GUIDE */
.faq-kmap-guide {
      background-color: #fafafa;
      display: flex;
      margin-bottom: 10rem;
      padding: 2rem 0 1rem 0;
      .faq-title {
            width: 28%;
            background-color: transparent;
            h3 {
                  font-size: 2rem;
                  font-weight: 400;
            }
      }
      .faq-item-box {
            width: 69%;
            background-color: transparent;
            .faq-item {
                 max-width:100%;
                  margin: 0 auto;
                  background:transparent;
                  border-bottom: 1px solid var(--color-of-soft-border);
                  padding: 20px;
                  font-size: 1.6rem;
                  color: #4f6d9f;
                  cursor: pointer;
                  transition: all 0.2s;
                   .faq-question {
                        display: flex;
                        position: relative;
                        align-items: center;
                        justify-content: space-between;
                        background:transparent;
                        font-weight: 500;
                        padding-left: 1.6rem;
                        &::before {
                             content: '';
                              position: absolute;
                              top: 2px;
                              left: -12px;
                              width: 14px;
                              height: 21px;
                              background: var(--q-solid-faq-url) no-repeat;
                              background-position: 0 0;
                        } 
                        .faq-icon {
                              width: 2.3rem;
                              height: 2.3rem;
                              background: var(--angle-down-regular-full_faq-url) no-repeat;
                        }
                  }
                  .faq-answer {
                        position: relative;
                        max-height: 0;
                        overflow: hidden;
                        color:  var(--color-of-charcoal);
                        font-size: 1.6rem;
                        text-align: left;
                        line-height: 1.6;
                        margin-top: 0;
                        padding-left: 3em;
                        padding-top: 1rem;
                        transition: all 0.3s ease;
                        background:transparent;
                        word-break: keep-all;
                        &::before {
                             content: '';
                              position: absolute;
                              top: 1.4rem;
                              left: 1.7rem;
                              width: 12px;
                              height: 19px;
                              background: var(--a-solid-faq-url) no-repeat;
                              background-position: 0 0;
                        } 
                  }
                  &:last-child {
                        border-bottom: none;
                  }

            }
             .faq-item.active {
                  .faq-answer {
                        max-height: 200px;
                        margin-top: 10px;
                  }
                  .faq-icon {
                       background: var(--angle-up-regular-full_faq-url) no-repeat;
                  }
             } 
      }

    
}













/*dialog*/
.dialog.popup-dim {
  .content.popup-img {
      width: 48rem !important;
      padding: 0 0 0 0 !important;
      top: 44rem;
      background:transparent;
    .dim-close {
      position: absolute;
      right: 0.4rem;
      top: -4.5rem;
      padding: 0 0 0 0;
      border-radius: 50%;
      width: 3.5rem;
      height: 3.5rem;
      background-color: rgba(0, 0, 0, 0.4);
      border: none;
      text-align: center;
      i {
        color: var(--color-of-white);
      }

    }
    .popup-dim-cont {
      border-radius: 2rem;
      background:transparent;
      img {
        width: 100%;
        max-width: 100%;
        border-radius: 2rem;
      }
    }
    .popup-bottom {
      background-color: transparent;
      display: flex;
      padding-top: 1rem;
      .dont-show {
        display: block;
        position: relative;
        width: 50%;
        text-align: center;
        font-size: 1.5rem;
        line-height: 1.5;
        color: var(--color-of-white);
        input {
        margin-top: 1px;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        }
        &::after {
           content: "";
            width: 1px;
            height: 19px;
            position: absolute;
            top: 47%;
            right: 0;
            transform: translateY(-50%);
            background-color: var(--color-of-white);
        }
      }
      .btn-popup-close {
        width: 50%;
        background-color: transparent;
        border: none;
        font-size: 1.5rem;
        color: var(--color-of-white);
      }
    }
  }
}

div.dialog > div.content {
      z-index: 1010 !important;
}



/* 서브 상단 */
section.contents-section div.lnb section {
    margin-top: 155px;
}
section.contents-section div.lnb div.lnb-title {
    top:155px;
}

/* 견적요청서 보기 */
div#estm-req-info div.content {
    padding-top: 0;
}
div.dialog > div.content > div.head {
      margin-top: 0;
}
div#estm-req-info div.content > div.body section table tr td textarea {
    height: 10rem;
}
div.dialog > div.content > div.head button.dim-close {
      right:0.3rem;
      top: 1.8rem;
}
div.dialog > div.content > div.footer {
    margin-top: 1rem;
}

/* 공지사항 */
section.contents-section div.contents section.list-section table tr td > span {
      width: 90%;
}

/* 뉴스레터 구독하기 */
section.contents-section div.contents section.newsletter-subscribe-section {
      width: 100%;
}