@charset "UTF-8";
/* pop */

#pop {
  position: fixed;
  left: 0;
  top: 150px;
  z-index: 310;
  display: none;
  right: 0;
  text-align: center;

  img {
    max-width: 470px;
    max-height: 550px;
  }

  .cont {
    overflow: hidden;
  }

  .close {
    /* padding: 5px; */
    color: #fff;
    text-align: center;
    /* padding-top: 30px; */
    display: flex;
    justify-content: center;
    font-size: 2rem;
    margin-top: 1rem;

    form {

      display: flex;

      align-items: center;

      gap: 1rem;

      >span {
        display: flex;
        gap: 1rem;
      }
    }

    label {
      cursor: pointer;
    }
  }
}


#pop .close #check input[type=checkbox]+label:before {
  /* line-height: .9; */
}

#pop .close #check input[type=checkbox]:checked+label:before {
  color: #fff;
}

#pop .close #close span {
  border: 1px solid #717171;
  border-radius: 3px;
  padding: 3px;
  font-size: .7em;
  background: #fff;
  color: #777;
  cursor: pointer;
}

#pop .close #close {
  cursor: pointer;
}

#pop .close #close i.icon-close:before {
  scale: 100%;
  opacity: 1;
}

#popdim {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 300;
  width: 100%;
  background: rgba(0, 0, 0, .6);
  display: none;
  cursor: pointer;
}

.dim_bg {
  width: 100%;
  height: 100%;
  position: fixed;
  display: none;
  background: rgb(0, 0, 0);
  background: transparent\5;
  background: rgba(0, 0, 0, 0.5);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#b2000000, endColorstr=#b2000000);
  display: none;
  z-index: 110;
  cursor: pointer;
  top: 0;
}

@media (max-width: 768px) {
  .layer_pop {
    top: 100px;
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 200;
    left: auto;
    margin: 0;
  }

  #pop {
    /* position: absolute; */
    width: 300px;
    height: 300px;
    left: 50%;
    margin-left: -150px;
    top: 110px;
    margin-top: 0;
    z-index: 310;
    display: none;
  }

  #pop .owl-nav {
    color: #fff;
    position: absolute;
    left: 0;
    right: 0;
    top: 130px;
    font-size: 4em;
  }

  #pop .owl-carousel .owl-nav button.owl-prev {
    left: -30px;
    position: absolute;
  }

  #pop .owl-carousel .owl-nav button.owl-next {
    right: -30px;
    position: absolute;
  }

  #pop .owl-dots {
    position: absolute;
    top: -40px;
    left: 0;
    right: 0
  }

  #pop .owl-carousel button.owl-dot {
    background: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100px;
    margin: 0 3px;
    opacity: .5;
  }

  #pop .owl-carousel button.active {
    opacity: 1;
  }

  #pop .close {
    padding-top: 10px
  }
}

@media only screen and (max-width: 600px) {}


@media only screen and (max-width: 320px) {
  #pop .owl-carousel .owl-nav {
    display: none;
  }
}

/* introVisual */
.introVisual {
  background: var(--fff);
  overflow: hidden;
  min-height: 100dvh;

  >div.tit {
    display: flex;
    align-items: center;
    position: absolute;
    z-index: 10;
    width: 100dvw;
    height: 100dvh;
    left: 0;
    top: 0;
    right: 0;
    justify-content: center;
    flex-direction: column;
    gap: 2em;

    img {
      transition-duration: 1.2s;
    }

    h1 {
      color: var(--fff);
      display: none;
    }

    h2 {
      font-family: "Italianno", cursive;
      color: var(--fff);
      font-size: 8em;
      margin: 0;
      line-height: 1;
      font-weight: 100;
      transition-duration: 1.8s;
    }

    h3 {
      font-size: 1.5em;
      text-align: center;
      color: var(--fff);
      font-weight: 400;
      transition-duration: 2.4s;
    }
  }

  &:before {
    content: '';
    background: rgba(0, 0, 0, .6);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
  }

  .owl-carousel {
    .item {
      height: 100dvh;

      .img {
        overflow: hidden;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;

        >div {
          background-size: cover;
          transform: scale(1.2);
          -webkit-transition: all 5s;
          -moz-transition: all 5s;
          -ms-transition: all 5s;
          -o-transition: all 5s;
          transition: all 5s;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background-position: center 30%;
        }
      }

    }

    .active {
      .img {
        >div {
          transform: scale(1);
          z-index: 10;
        }
      }
    }

  }
}

@keyframes scrollUp {
  0% {
    transform: translateY(100%);
  }

  50%,
  100% {
    transform: translateY(-100%);
  }
}

@media (max-width: 1200px) {}

@media (max-width: 768px) {
  .introVisual {
    >div.tit {
      img {
        width: 50%;
      }

      h2 {
        text-align: center;
        font-size: 4em;
      }

      h3 {
        font-size: 1.1em;
        line-height: 1.6em;
      }

      height: 100dvh;
      width: 100dvw;
    }

  }
}

body {
  >section.section {
    padding: 13rem 3rem;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    /* min-height: 100dvh; */
    display: flex;
    align-items: center;
    justify-content: center;



    .inwrap {
      max-width: 1400px;
      margin: 0 auto;
      width: 100%;
    }

    div.tit {
      text-align: center;
      margin-bottom: 5rem;

      h2 {
        font-size: 5.5rem;
        font-weight: 600;
        color: var(--000);
      }

      h3 {
        font-size: 2.4rem;
        font-weight: 500;
        color: var(--666);
        margin-top: 1rem;
      }
    }
  }
}

@media (max-width: 1200px) {}

@media (max-width: 768px) {
  body {
    >section.section {
      padding: 6rem 3rem;

      div.tit {
        h2 {
          font-size: 5rem;
        }

        h3 {
          font-size: 2.2rem;
        }
      }
    }
  }
}

/* MainVisual */
.MainVisual {
  background: var(--fff);
  overflow: hidden;
  min-height: 100dvh;
  position: relative;

  div.tit {
    display: flex;
    position: absolute;
    z-index: 10;
    height: 100dvh;
    left: 0;
    top: 0;
    right: 0;
    justify-content: center;
    flex-direction: column;
    gap: 2em;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem;



    img {
      transition-duration: 1.2s;
    }

    h1 {
      color: var(--fff);
      font-size: 7rem;
      margin: 0;
      line-height: 1.2;
      font-weight: 500;
      transition-duration: 1.8s;
    }

    h2 {
      font-size: 2rem;
      color: var(--fff);
      font-weight: 400;
      transition-duration: 2.4s;
    }

    ul {
      transition-duration: 3.2s;
      display: flex;
      gap: 2rem;
      margin-top: 4rem;


      >li {
        a {
          color: var(--fff);
          display: block;
          border: 1px solid var(--fff);
          padding: 1rem 2rem;
          cursor: pointer;
          /* margin-top: 4rem; */
          font-size: 2rem;
        }
      }
    }
  }


  .owl-carousel {
    .item {
      height: 100dvh;

      &.video {
        video {
          min-height: 100%;
          min-width: 100%;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      .img {
        overflow: hidden;
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;

        >div {
          background-size: cover;
          transform: scale(1.2);
          -webkit-transition: all 5s;
          -moz-transition: all 5s;
          -ms-transition: all 5s;
          -o-transition: all 5s;
          transition: all 5s;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          background-position: center 30%;

          &:after {
            content: '';
            background: rgba(0, 0, 0, .6);
            position: absolute;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: -1;
          }
        }
      }

    }

    .active {
      .img {
        >div {
          transform: scale(1);
          z-index: 10;
        }
      }
    }

  }

  /* 기본 dots 숨김 */
  .owl-dots {
    display: none !important;
  }

  /* nav 래퍼 - prev / counter / next 가로 정렬 */
  .owl-nav {
    position: absolute;
    bottom: 3rem;
    display: flex;
    gap: 3rem;
    margin: 0;
    justify-content: center;
    width: 100%;
    align-items: center;
    align-content: center;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    font-size: 2rem;





    /* 슬라이드 카운터 — JS로 삽입되는 요소 */
    .owl-counter {
      color: rgba(255, 255, 255, 0.9);
      letter-spacing: 0.08em;
      min-width: 5rem;
      text-align: center;
      pointer-events: none;
      user-select: none;

      em {
        min-width: 1.5rem;
        display: inline-block;

        &:first-child {
          color: var(--color_sub3);
        }
      }
    }

    button.owl-prev,
    button.owl-next {
      background: transparent !important;
      border: none !important;
      outline: none !important;
      padding: 0 !important;
      margin: 0 !important;
      line-height: 1;
      cursor: pointer;
      width: auto;
      height: auto;
      color: var(--fff);
      position: relative;

      &:after {
        content: '';
        width: 38px;
        height: 38px;
        border-radius: 50%;
        transition: all 0.4s ease-in-out;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(1.4);
        border: 3px solid var(--fff);
        opacity: 0;
      }

      &:hover {
        &:after {
          transform: translate(-50%, -50%) scale(1);
          opacity: 1;
        }
      }
    }
  }

}

@keyframes scrollUp {
  0% {
    transform: translateY(100%);
  }

  50%,
  100% {
    transform: translateY(-100%);
  }
}

@media (max-width: 1200px) {}

@media (max-width: 768px) {
  .MainVisual {
    div.tit {

      h1 {
        font-size: 4rem;
      }

      ul {
        display: flex;
        align-items: flex-start;
        flex-wrap: wrap;


        >li {
          a {
            min-width: 211px;
          }
        }
      }
    }
  }
}
/* 
.videoPop{
  position:fixed;
  z-index: 500;
  width:100%;
  height:100%;
  left:0;
  right:0;
  .auto_height {
  padding-bottom: 0;
  max-width: 1280px;
  max-height: 720px;
  width:100%;
  height:100%;
  position: relative;
  overflow: hidden;
  margin: 0;
     left:50%;
    top:50%;
    transform:translate(-50%,-50%);
  iframe{
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  } 
}
  
  &:after{
    content:'';
    position:absolute;
    background: rgba(0,0,0,.8);
    top:0;
    width:100%;
    height:100%;
    left:0;
    right:0;
    z-index:-1;
  }
  video{
    max-width:100%;
    max-height:100%;
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%);
  }
  .close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    cursor: pointer;
    color: var(--fff);
    font-size: 4rem;
  }



}
@media (max-width: 768px) {
  .videoPop {

    .auto_height {
      max-width: 100%;
      left: auto;
      top: auto;
      transform: translate(0%,0%);
      position: relative;
      
        iframe{height: 100%;width: 100%;left: 50%;top: 50%;transform: translate(-50%, -50%);} 
    }
}

} */

/* CSS */
.videoPop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.7);
  align-content: center;
}

/* 16:9 비율 유지 컨테이너 */
.videoPop .video_container {
  &:before{
    content:'';
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:1;
  }
  position: relative;
  width: 90%;
  max-width: 1280px;
  max-height: 720px;
  height: 0;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 720px;
  /* padding-bottom: 56.21%; */
}

.videoPop .video_container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.videoPop .close {
  position: absolute;
  top: 2rem; right: 2rem;
  cursor: pointer;
  color: #fff;
  font-size: 3rem;
  z-index: 10;
}
@media (max-width: 768px) {
  .videoPop{
   .video_container{
     height: 0;
     padding-bottom: 56.21%;
   }
  }
}

/*coreValue*/
.coreValue {
  >div {
    ul {
      display: flex;
      justify-content: center;
      gap: 2rem;

      >li {
        position: relative;

        >a {
          color: var(--aaa);
          transition: all 0.4s ease-in-out;


          >span {
            position: absolute;
            color: var(--fff);
            font-size: 12.8rem;
            font-family: "Italianno", cursive;
            right: 5rem;
            top: 0;
            line-height: 1;
            opacity: .5;
            transition: all 0.4s ease-in-out;
          }

          >div.text {
            position: absolute;
            bottom: 2em;
            left: 3rem;
            right: 3rem;


























            h3 {
              color: var(--aaa);
              font-size: 1.5em;
              transition: all 0.4s ease-in-out;
            }
          }

        }

        &:hover {
          >a {
            color: var(--fff);

            >span {
              opacity: 1;
            }

            >div.text {
              h3 {
                color: var(--fff);
              }
            }
          }
        }
      }
    }
  }
}

@media (max-width: 1200px) {}

@media (max-width: 768px) {
  .coreValue {
    >div {
      ul {
        flex-direction: column;

        >li {
          >a {
            div.text {
              bottom: 2rem;
              left: 2rem;
              right: 2rem;
            }

            >span {
              right: 3rem;
              font-size: 10rem;
            }
          }
        }
      }
    }
  }
}

/*location*/
.location {
  background: var(--bg);

  >div {
    >ul {
      display: flex;
      gap: 2rem;
      justify-content: center;

      >li {
        position: relative;
        overflow: hidden;

        &::before {
          content: '';
          background: linear-gradient(0deg, rgba(115, 115, 115, 0.00) 43.56%, rgba(0, 0, 0, 0.50) 100%);
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          z-index: 1;
        }

        img {
          display: block;
        }

        .text {
          position: absolute;
          top: 3rem;
          right: 3rem;
          left: 3rem;
          bottom: 2rem;
          z-index: 2;



          h4 {
            color: var(--fff);
            font-family: "Italianno", cursive;
            font-size: 4rem;
            font-weight: 300;
            position: absolute;
            right: 0;
            opacity: .6;
          }

          h3 {
            color: var(--fff);
            font-size: 3.6rem;
            line-height: 1.2;

          }

          h5 {
            color: var(--fff);
            bottom: 0;
            position: absolute;
            right: 0;
            font-size: 2rem;
            text-align: right;

            span {
              display: block;
              font-size: 1.4rem;
              font-weight: 400;
            }
          }
        }
      }
    }

    p {
      text-align: center;

      a {
        color: var(--000);
        display: inline-block;
        border: 1px solid var(--000);
        padding: 1rem 2rem;
        cursor: pointer;
        margin-top: 2rem;
      }
    }
  }

}


@media (max-width: 1200px) {}

@media (max-width: 768px) {
  .location {
    >div {
      >ul {
        flex-direction: column;

        >li {
          .text {
            top: 2rem;
            left: 2rem;
            right: 2rem;
            bottom: 2rem;

            h4 {
              top: -1rem;
            }

            h3 {
              font-size: 2.6rem;
            }
          }
        }
      }
    }
  }

}


/*service*/
.service {
  background: var(--222);
  text-align: center;

  >div.inwrap {
    max-width: 1400px;
    margin: 0 auto;

    div.tit {
      h2 {
        color: var(--fff);
      }

      h3 {
        color: var(--aaa);
      }
    }

    ul {
      display: flex;
      justify-content: center;
      gap: 12rem;

      li {
        color: var(--fff);
        position: relative;
        flex: 1;


        &::before {
          content: '\E837';
          font-family: 'icon_font';
          font-size: 5rem;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translate(320%, -70%);
        }

        &:last-child {
          &:before {
            display: none;
          }
        }

        >span {
          display: block;

          em {
            display: block;
            font-size: 4rem;
          }
        }

        i {
          font-size: 15rem;
        }

        h3 {
          color: var(--fff);
          margin-top: 2rem;
          font-size: 2.6rem;
        }

        p {
          color: var(--aaa);
          line-height: 1.4;
        }

      }
    }

    a {
      color: var(--fff);
      display: inline-block;
      border: 1px solid var(--fff);
      padding: 1rem 2rem;
      cursor: pointer;
      margin-top: 5rem;
    }
  }

}

@media (max-width: 1200px) {}

@media (max-width: 768px) {
  .service {
    >div.inwrap {
      div.tit {
        h2 {
          line-height: 1.2;
        }
      }

      ul {
        flex-wrap: wrap;
        gap: 1rem;

        li {
          width: 50%;
          border: 1px solid var(--aaa);
          padding: 2rem 0;
          min-width: 40%;

          h3 {
            margin-top: 1rem;
          }

          >span {
            margin-bottom: 1rem;
          }

          i {
            font-size: 10rem;
          }

          &:before {

            display: none;
          }

        }
      }

      a {
        margin-top: 2rem;
      }
    }
  }

}

/*experts*/
.experts {
  background: url(../main/images/team_bg.jpg) center;
  background-size: cover;
  /* min-height: 100dvh; */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  display: flex;
  align-items: center;




  .inwrap {
    text-align: center;

    ul {
      display: flex;
      justify-content: center;
      gap: 5rem;

      li {
        background: var(--fff);
        padding: 5rem 3rem;
        flex: 1;
        border: 1px solid var(--000);

        h3 {
          font-size: 2.6rem;
        }

        p {
          color: var(--888);
          font-size: 1.8rem;
          line-height: 1.4;
        }
      }
    }
  }

  a {
    color: var(--000);
    display: inline-block;
    border: 1px solid var(--000);
    padding: 1rem 2rem;
    cursor: pointer;
    margin-top: 2rem;
  }
}

@media (max-width: 1200px) {}

@media (max-width: 768px) {
  .experts {
    .inwrap {
      ul {
        display: flex;
        flex-direction: column;
        gap: 2rem;

        li {
          padding: 2rem 0;
        }
      }
    }
  }
}