@charset "UTF-8";

/*common*/
.px-0 {
      padding-left: 0 !important; 
      padding-right: 0 !important;
}
.mx-0 {
      margin-left: 0 !important; 
      margin-right: 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% - 950px));
    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: 1.9rem;
    list-style: none;
}

.inner-header .mainmenu .mainmenu-list .mainmenu-list-inner {
    width: 210px;
    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.6rem;
    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);
      }
}





/*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%;
                                    &::after {
                                          font-size: 24px;
                                          font-weight: 700;
                                          color: rgba(0, 0, 0, 0.5);
                                    }
                              }
                              .swiper-button-prev {
                                    left: 0;
                                    top: 37%;
                                    &::after {
                                          font-size: 24px;
                                          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%;
                              }
                              .com-name {
                                    width: 160px;
                                    height: 160px;
                                    margin-left: auto;
                                    margin-right: auto;
                                    border-radius: 50%;
                                    background-color: #fff;
                                    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: #fff;
                              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;
                              -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;
                }
            }
        }
    }
}



/*dialog*/
.dialog.popup-dim {
  .content.popup-img {
      width: 40rem !important;
      padding: 0 0 0 0 !important;
      top: 44%;
      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: #fff;
      }

    }
    .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: #fff;
        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: #fff;
        }
      }
      .btn-popup-close {
        width: 50%;
        background-color: transparent;
        border: none;
        font-size: 1.5rem;
        color: #fff;
      }
    }
  }
}



/* 서브 상단 */
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.contents-section div.contents section.list-section table tr td > span {
      width: 90%;
}

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