@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap");
@import url("/eng/assets/font/SUITE.css");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, etails, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, button {
  margin: 0;
  padding: 0;
  border: 0;
  vertical-align: baseline;
  font-family: inherit; }

main, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block; }

body {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

body {
  min-width: 360px;
  width: 100%;
  font-size: 12px;
  color: #000;
  line-height: 1;
  font-family: "Noto Sans KR", sans-serif;
  font-weight: 400;
  word-break: keep-all;
  box-sizing: border-box; }
  body *, body *::before, body *::after {
    box-sizing: border-box; }

hr {
  display: block;
  border: 0;
  margin: 0; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

input, select, textarea {
  font-family: inherit;
  outline: none; }

a, button {
  color: #000;
  cursor: pointer;
  border: 0;
  padding: 0;
  outline: none;
  text-decoration: none;
  background: none; }
  a:hover, button:hover {
    color: #000; }

.container {
  display: block;
  width: 100%;
  max-width: 1610px;
  padding: 0 10px;
  margin: 0 auto; }
  @media (min-width: 1024px) {
    .container {
      padding: 0 15px; } }

.container-fluid {
  display: block;
  width: 100%;
  margin: 0 auto;
  padding: 0 10px; }
  @media (min-width: 1024px) {
    .container-fluid {
      padding: 0 15px; } }

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0); }
  40% {
    transform: translateY(-15px); }
  60% {
    transform: translateY(-10px); } }
/* jumbotron */
.jumbotron {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  background-color: #000; }
  .jumbotron .video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: 100vh;
    transform: translate(-50%, -50%); }
  .jumbotron .jumbo-slider {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%; }
    .jumbotron .jumbo-slider .swiper-wrapper .swiper-slide .container {
      display: table;
      table-layout: fixed;
      text-align: center;
      height: 100%; }
      .jumbotron .jumbo-slider .swiper-wrapper .swiper-slide .container > .v-align {
        display: table-cell;
        vertical-align: middle; }
        .jumbotron .jumbo-slider .swiper-wrapper .swiper-slide .container > .v-align h3 {
          position: relative;
          font-size: 32px;
          color: #fff;
          font-weight: 700;
          line-height: 34px;
          letter-spacing: 0.32px; }
          .jumbotron .jumbo-slider .swiper-wrapper .swiper-slide .container > .v-align h3 span {
            position: relative;
            left: 40px;
            opacity: 0;
            display: block; }
            .jumbotron .jumbo-slider .swiper-wrapper .swiper-slide .container > .v-align h3 span:nth-of-type(1) {
              -webkit-transition-property: all;
              transition-property: all;
              -webkit-transition-duration: 0.5s;
              transition-duration: 0.5s;
              -webkit-transition-timing-function: linear;
              transition-timing-function: linear;
              -webkit-transition-delay: 0.1s;
              transition-delay: 0.1s; }
            .jumbotron .jumbo-slider .swiper-wrapper .swiper-slide .container > .v-align h3 span:nth-of-type(2) {
              -webkit-transition-property: all;
              transition-property: all;
              -webkit-transition-duration: 0.3s;
              transition-duration: 0.3s;
              -webkit-transition-timing-function: linear;
              transition-timing-function: linear;
              -webkit-transition-delay: 0.4s;
              transition-delay: 0.4s; }
    .jumbotron .jumbo-slider .swiper-wrapper .swiper-slide.swiper-slide-active .container .v-align h3 span {
      left: 0;
      opacity: 1; }
  .jumbotron .scroll-down {
    position: absolute;
    bottom: 30px;
    right: 15px;
    display: block;
    animation: bounce 1.3s ease infinite; }
    .jumbotron .scroll-down figure img {
      display: block;
      width: 25px; }
  @media (min-width: 1024px) {
    .jumbotron .jumbo-slider .swiper-wrapper .swiper-slide .container > .v-align h3 {
      font-size: 46px;
      line-height: 54px; }
    .jumbotron .scroll-down {
      display: none; } }
  @media (min-width: 1200px) {
    .jumbotron .jumbo-slider .swiper-wrapper .swiper-slide .container > .v-align h3 {
      font-size: 60px;
      line-height: 70px; } }
  @media (min-width: 1600px) {
    .jumbotron .video {
      transform: translate(-50%, -50%) scale(1.2); } }

/* product */
.product {
  padding: 80px 0 50px;
  background-image: url(/eng/assets/images/main/bg_product.png);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: cover; }
  .product .container > ul {
    overflow: hidden;
    width: calc(100% + 12px);
    margin: 0 -6px; }
    .product .container > ul > li {
      float: left;
      width: 50%;
      padding: 0 6px; }
      .product .container > ul > li:nth-of-type(2) ~ li {
        margin-top: 35px; }
      .product .container > ul > li .box {
        letter-spacing: 0;
        padding: 15px 10px 10px;
        border-radius: 20px;
        background: rgba(217, 217, 217, 0.3); }
        .product .container > ul > li .box .details small {
          display: block;
          font-size: 13px;
          color: #FFB800;
          font-weight: 700; }
        .product .container > ul > li .box .details strong {
          display: block;
          font-size: 16px;
          line-height: 22px;
          color: #fff;
          font-weight: 700;
          margin-top: 5px; }
        .product .container > ul > li .box > figure img {
          display: block;
          width: 100%; }
        .product .container > ul > li .box .btn-area {
          overflow: hidden;
          margin-top: 20px; }
          .product .container > ul > li .box .btn-area > a {
            display: inline-block;
            vertical-align: top;
            -webkit-transition-property: all;
            transition-property: all;
            -webkit-transition-duration: 0.15s;
            transition-duration: 0.15s;
            -webkit-transition-timing-function: linear;
            transition-timing-function: linear;
            -webkit-transition-delay: 0s;
            transition-delay: 0s; }
            .product .container > ul > li .box .btn-area > a.btn-youtube {
              float: left; }
              .product .container > ul > li .box .btn-area > a.btn-youtube img {
                width: 31px; }
              .product .container > ul > li .box .btn-area > a.btn-youtube:hover {
                opacity: .7; }
            .product .container > ul > li .box .btn-area > a.btn-more {
              float: right;
              width: 80px;
              font-size: 10px;
              color: #fff;
              font-weight: 700;
              line-height: 18px;
              text-align: center;
              border-radius: 100px;
              border: 2px solid #fff; }
              .product .container > ul > li .box .btn-area > a.btn-more:hover {
                color: #FFB800;
                background-color: #fff; }
  @media (min-width: 768px) {
    .product .container > ul > li {
      width: 33.333333333%; }
      .product .container > ul > li:nth-of-type(2) ~ li {
        margin-top: 0; }
      .product .container > ul > li:nth-of-type(3) ~ li {
        margin-top: 35px; } }
  @media (min-width: 1024px) {
    .product {
      padding: 180px 0; }
      .product .container > ul {
        display: table;
        width: 100%;
        table-layout: fixed; }
        .product .container > ul > li {
          float: none;
          display: table-cell;
          vertical-align: top;
          height: 100%; }
          .product .container > ul > li .box .details strong {
            height: 44px; }
          .product .container > ul > li .box .btn-area {
            margin-top: 30px; }
            .product .container > ul > li .box .btn-area > a.btn-youtube img {
              width: auto;
              height: 26px; }
            .product .container > ul > li .box .btn-area > a.btn-more {
              width: 90px;
              line-height: 22px; } }
  @media (min-width: 1400px) {
    .product {
      padding: 240px 0; }
      .product .container > ul > li .box {
        padding: 25px 20px 20px;
        /*.details {
            small {
                font-size: 20px;
            }
            strong {
                height: 60px;
                font-size: 26px;
                line-height: 30px;
            }
        }*/ }
        .product .container > ul > li .box .btn-area {
          margin-top: 40px; }
          .product .container > ul > li .box .btn-area > a.btn-youtube img {
            height: 30px; }
          .product .container > ul > li .box .btn-area > a.btn-more {
            width: 150px;
            font-size: 16px;
            line-height: 26px; } }
  @media (min-width: 1600px) {
    .product .container > ul {
      width: calc(100% + 20px);
      margin: 0 -10px; }
      .product .container > ul > li {
        padding: 0 10px; }
        .product .container > ul > li .box {
          padding: 35px 30px 25px; }
          .product .container > ul > li .box .details small {
            font-size: 18px; }
          .product .container > ul > li .box .details strong {
            font-size: 24px;
            line-height: 34px;
            height: 68px; }
          .product .container > ul > li .box .btn-area > a.btn-more {
            width: 170px; } }

/* performance */
.performance {
  overflow: hidden;
  text-align: center;
  padding: 60px 0;
  background-color: rgba(0, 0, 0, 0.44); }
  .performance .container {
    padding: 0;
    max-width: 100%; }
    .performance .container .section-header {
      padding-bottom: 40px; }
      .performance .container .section-header h3 {
        font-size: 30px;
        color: #fff;
        font-weight: 600; }
      .performance .container .section-header hr {
        display: block;
        width: 60px;
        height: 2px;
        margin: 30px auto 0;
        background-color: #fff; }
    .performance .container .section-content .partners {
      position: relative; }
      .performance .container .section-content .partners:before {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        display: block;
        width: 100%;
        height: 100%;
        content: ''; }
      .performance .container .section-content .partners .simply-scroll {
        width: 100% !important;
        height: 66px !important; }
        .performance .container .section-content .partners .simply-scroll .simply-scroll-clip {
          width: 100% !important;
          height: 66px !important; }
          .performance .container .section-content .partners .simply-scroll .simply-scroll-clip > ul > li {
            width: auto !important;
            height: 66px !important;
            margin-right: 10px; }
            .performance .container .section-content .partners .simply-scroll .simply-scroll-clip > ul > li > figure img {
              width: 66px; }
      .performance .container .section-content .partners ~ .partners {
        margin-top: 15px; }
  @media (min-width: 1024px) {
    .performance {
      padding: 80px 0 70px; }
      .performance .container .section-header {
        padding-bottom: 50px; }
        .performance .container .section-header h3 {
          font-size: 33px; }
        .performance .container .section-header hr {
          margin-top: 30px; }
      .performance .container .section-content .partners .simply-scroll {
        height: 104px !important; }
        .performance .container .section-content .partners .simply-scroll .simply-scroll-clip {
          height: 104px !important; }
          .performance .container .section-content .partners .simply-scroll .simply-scroll-clip > ul > li {
            margin-right: 30px;
            height: 104px !important; }
            .performance .container .section-content .partners .simply-scroll .simply-scroll-clip > ul > li > figure img {
              width: 104px; }
      .performance .container .section-content .partners ~ .partners {
        margin-top: 30px; } }
  @media (min-width: 1200px) {
    .performance .container .section-header {
      padding-bottom: 60px; }
      .performance .container .section-header h3 {
        font-size: 40px; }
      .performance .container .section-header hr {
        width: 90px;
        margin-top: 45px; }
    .performance .container .section-content .partners .simply-scroll {
      height: 194px !important; }
      .performance .container .section-content .partners .simply-scroll .simply-scroll-clip {
        height: 194px !important; }
        .performance .container .section-content .partners .simply-scroll .simply-scroll-clip > ul > li {
          height: 194px !important;
          margin-right: 40px; }
          .performance .container .section-content .partners .simply-scroll .simply-scroll-clip > ul > li > figure img {
            width: 194px; }
    .performance .container .section-content .partners ~ .partners {
      margin-top: 60px; } }

/* site-map */
.site-map {
  overflow: hidden;
  font-family: 'SUITE', sans-serif;
  letter-spacing: 0;
  padding: 60px 0;
  /*@media(min-width: $xl) {
      .container {
          .section-content {
              > ul {
                  font-size: 0;
                  > li {
                      > dl {
                          > dt {
                              font-size: 36px;
                              padding-left: 40px;
                              &:before {
                                  width: 7px;
                                  height: 42px;
                              }
                          }
                          > dd {
                              padding-left: 40px;
                              > ul {
                                  > li {
                                      > a {
                                          font-size: 23px;
                                          line-height: 26px;
                                      }
                                  }
                              }
                          }
                      }
                  }
              }
          }
      }
  }*/ }
  .site-map .container .section-header {
    padding-bottom: 40px; }
    .site-map .container .section-header h3 {
      font-size: 65px;
      color: #FFB800;
      font-weight: 800; }
  .site-map .container .section-content > ul {
    overflow: hidden;
    font-size: 0;
    width: calc(100% + 20px);
    margin: 0 -10px; }
    .site-map .container .section-content > ul > li {
      float: left;
      padding: 0 10px; }
      .site-map .container .section-content > ul > li > dl > dt {
        position: relative;
        font-size: 19px;
        font-weight: 800;
        padding-left: 15px; }
        .site-map .container .section-content > ul > li > dl > dt:before {
          position: absolute;
          top: 50%;
          left: 0;
          width: 5px;
          height: 24px;
          content: '';
          transform: translateY(-50%);
          background-color: #FFB800; }
      .site-map .container .section-content > ul > li > dl > dd {
        margin-top: 15px;
        padding-left: 15px; }
        .site-map .container .section-content > ul > li > dl > dd > ul > li > a {
          display: inline;
          font-size: 12px;
          color: #A1A1A1;
          font-weight: 400;
          font-family: "Noto Sans KR", sans-serif;
          -webkit-transition-property: all;
          transition-property: all;
          -webkit-transition-duration: 0.15s;
          transition-duration: 0.15s;
          -webkit-transition-timing-function: linear;
          transition-timing-function: linear;
          -webkit-transition-delay: 0s;
          transition-delay: 0s; }
          .site-map .container .section-content > ul > li > dl > dd > ul > li > a:hover {
            color: #FFB800; }
        .site-map .container .section-content > ul > li > dl > dd > ul > li ~ li {
          margin-top: 10px; }
      .site-map .container .section-content > ul > li:nth-of-type(2) ~ li {
        margin-top: 40px; }
      .site-map .container .section-content > ul > li:nth-of-type(2n + 1) {
        width: 40%;
        clear: left; }
      .site-map .container .section-content > ul > li:nth-of-type(2n + 2) {
        width: 60%; }
  @media (min-width: 768px) {
    .site-map .container .section-content > ul {
      display: table;
      width: 100%;
      table-layout: fixed; }
      .site-map .container .section-content > ul > li {
        display: table-cell;
        float: none;
        width: 25% !important; } }
  @media (min-width: 1200px) {
    .site-map {
      padding: 100px 0; }
      .site-map .container .section-header {
        padding-bottom: 60px; }
        .site-map .container .section-header h3 {
          font-size: 60px; }
      .site-map .container .section-content > ul > li {
        width: 23% !important; }
        .site-map .container .section-content > ul > li:nth-of-type(4) {
          width: 31% !important; }
        .site-map .container .section-content > ul > li > dl > dt {
          font-size: 20px;
          padding-left: 30px; }
          .site-map .container .section-content > ul > li > dl > dt:before {
            height: 20px; }
        .site-map .container .section-content > ul > li > dl > dd {
          padding-left: 30px;
          margin-top: 25px; }
          .site-map .container .section-content > ul > li > dl > dd > ul > li > a {
            font-size: 16px;
            line-height: 20px; }
          .site-map .container .section-content > ul > li > dl > dd > ul > li ~ li {
            margin-top: 15px; } }

/*# sourceMappingURL=main.css.map */