body,
html {
  margin: 0;
  padding: 0;
}
p,
h1 {
  padding: 0;
  margin: 0;
}
ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}
a {
  text-decoration: none;
  /* color: var(--main-color-white); */
}
a:hover {
  color: var(--main-color-white);
}
* {
  box-sizing: border-box;
  letter-spacing: -0.7px;
  font-family: "Noto Sans";
}

/* noto sans cjk kr */
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap");

.inner {
  width: 1150px;
  z-index: 99;
  max-width: 100%;
  margin: 0 auto;
}
section {
  padding: 70px 0;
}

:root {
  /* color */
  --main-section-bg: #f7f7f7;
  --main-color-black: #222;
  --main-color-white: #fff;
  --main-color-purple: #7164ff;
  --main-color-purple-title: #5c6dea;

  /* font size */
  --font-size-title: 48px;
  --font-size-sub-title: 26px;
  --font-size-content: 18px;
  --font-size-info-title: 36px;

  /* font weight */
  --font-weight-bold: 600;
}

/* COMMON */
.sub-title {
  color: var(--main-color-purple);
  font-size: var(--font-size-sub-title);
  font-weight: var(--font-weight-bold);
}
.content {
  font-size: var(--font-size-content);
}
/* header */
/* header bg white scroll  */
header.on {
  background: #42424264;
}
header.on .logo p {
  color: var(--main-color-white);
}
/* header.on nav li a {
  color: var(--main-color-white);
} */
.logo span {
  font-size: 16px;
}
header {
  position: fixed;
  padding: 30px 0;
  z-index: 1000;
  width: 100%;
}
header h1 a {
  color: var(--main-color-white);
}
header h1 a:hover {
  color: var(--main-color-white);
}
header .gnb li a {
  color: var(--main-color-white);
}
.text-black {
  color: var(--main-color-black) !important;
}
.logo img {
  width: 58px;
}
.hasmenu {
  position: relative;
}
.hasmenu ul {
  display: none;
  background-color: var(--main-color-white);
  /* padding: 10px; */
  border-radius: 10px;
  /* overflow: hidden; */
  position: absolute;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
}
.hasmenu ul.show {
  display: block;
}
.hasmenu ul::after {
  content: "";
  border-top: 10px solid transparent;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid var(--main-color-white);
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translate(-50%);
}
.hasmenu ul li {
  padding: 10px 15px;
  font-size: 15px;
}
.hasmenu ul a {
  color: var(--main-color-black);
}
.hasmenu ul a:hover {
  color: var(--main-color-purple) !important;
}
nav ul {
  margin-top: 20px;
}
.gnb > li {
  padding: 0 30px;
}
/* slider */
.bx-viewport {
  height: 100vh;
}
.slide-view {
  width: 100%;
  height: 100vh;
}
.slide-view.first {
  background: url(../img/slide01.png) no-repeat center/cover;
}
.slide-view.second {
  background: url(../img/slide02.png) no-repeat center/cover;
}
.slite-title {
  width: 1150px;
  margin: 0 auto;
  position: relative;
  height: inherit;
}
.slide-title-fix {
  font-weight: var(--font-weight-bold);
  color: var(--main-color-white);
  font-size: 60px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.bx-wrapper {
  width: 100%;
  border: 0 !important;
  box-shadow: 0 !important;
  margin-bottom: 0 !important;
}
.bx-wrapper img {
  width: 100%;
  max-width: none;
}
.bx-controls-direction {
  display: none;
}
.bx-wrapper .bx-controls-auto,
.bx-wrapper .bx-pager {
  bottom: 35px !important;
}
/* slider */

/*  section 2 task  */
.section2 {
  background: var(--main-section-bg);
}
.task {
  padding: 20px;
  border-radius: 50%;
  width: 250px;
  height: 250px;
  background-color: #e3e3e3;
  display: inline-block;
  position: relative;
}
.task:hover {
  background-color: #b9b9b9;
}

.task img {
  width: 118px;
  display: block;
  margin: 0 auto;
}
.task-img-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.task span {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sub-title);
  margin-top: 20px;
  display: block;
  color: var(--main-color-black);
}

/* section3 about us */
.section3 {
  padding: 240px;
  background: url(../img/about-bg.png) no-repeat center/cover;
}
.about {
  color: var(--main-color-white);
}
h1 {
  font-size: var(--font-size-title);
  font-weight: var(--font-weight-bold);
  margin-bottom: 20px;
  position: relative;
  padding-left: 0 !important;
}
.about h1:after {
  content: "";
  display: block;
  width: 50px;
  height: 6px;
  background-color: var(--main-color-white);
  position: absolute;
  bottom: -20px;
  left: 0;
}
.about p {
  font-size: var(--font-size-p);
  margin-top: 20px;
  padding-left: 0 !important;
}

/* section4 history */
/* .section4 {
  padding: 70px 0;
} */
.history-inner {
  padding-top: 60px;
}
.sub-history-inner {
  position: relative;
}
.sub-history-inner::after {
  content: "";
  display: inline-block;
  position: absolute;
  width: 4px;
  height: 200px;
  background-color: var(--main-color-purple);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.sub-history-inner,
.main-history {
  width: calc(100% / 3 - 30px);
}
.sub-history {
  padding: 20px;
  border-radius: 0 20px 20px 20px;
  border: 3px solid var(--main-color-purple);
  display: inline-block;
  /* width: 270px; */
  z-index: 10;
  margin-bottom: 50px;
  background-color: var(--main-color-white);
}

.sub-history:last-child {
  margin-bottom: 0;
}
.sub-history span {
  font-size: var(--font-size-p);
  font-weight: var(--font-weight-bold);
}
.sub-history p {
  font-size: var(--font-size-sub-title);
  color: var(--main-color-purple);
  font-weight: var(--font-weight-bold);
}
.main-history {
  position: relative;
}
.main-history::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: -15px;
  top: -15px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: var(--main-color-purple);
}
.main-history-top {
  border-radius: 0 30px 30px 30px;
  overflow: hidden;
  width: 100%;
}
.main-history-top img {
  width: inherit;
}
.main-history-bottom {
  width: 100%;
  margin-top: -60px;
}
/* .history-inner > div {
  gap: 30px;
} */

/* our behavior */
.behavior {
  margin: 70px 0;
}
.behavior > div {
  padding: 40px;
  width: calc(100% / 3 - 30px);
}
.behavior-inner {
  padding: 30px;
  background-color: var(--main-color-white);
  border-radius: 20px;
  box-shadow: 0 0 20px #87878771;
}
.behavior-inner img {
  width: 150px;
  margin-bottom: 30px;
}
.behavior-inner:last-child {
  margin-right: 0;
}
.behavior-inner .circle {
  position: relative;
  z-index: 0;
}
.behavior-inner .circle::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 50%;
  position: absolute;
  left: -6px;
  top: 2px;
  z-index: -1;
}
.behavior-inner p {
  margin-top: 20px;
}
.behavior-inner .circle.pink::before {
  background-color: #ff64ef;
}
.behavior-inner .circle.purple::before {
  background-color: var(--main-color-purple);
}
/* wave */
.section5 {
  position: relative;
}
.section5 .inner .behavior {
  z-index: 90;
}
.wave {
  position: absolute;
  width: 100%;
  bottom: 0;
}
.wave-inner > use {
  animation: wave-ani 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
}
.wave-inner > use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 25s;
}
.wave-inner > use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 30s;
}

@keyframes wave-ani {
  0% {
    transform: translate3d(-90px, 0, 0);
  }
  100% {
    transform: translate3d(85px, 0, 0);
  }
}

/* section6 organization chart */
.chart {
  padding-top: 60px;
}
.chart-img {
  max-width: 60%;
}
.chart div {
  margin-top: 40px;
}

/* section7 ess */
.section7 {
  background-color: var(--main-section-bg);
}
.ess-info,
.lfp-info {
  gap: 30px;
}
.ess-title,
.lfp-title {
  padding: 30px;
  border-radius: 20px;
  background-color: #fff;
  border: 1px solid #d6d6d6;
}
.ess-title .sub-title {
  margin: 20px 0;
}
.tech-title {
  font-size: var(--font-size-info-title);
  background-color: var(--main-color-purple-title);
  font-weight: var(--font-weight-bold);
  color: var(--main-color-white);
  padding: 6px 30px;
  border-radius: 60px;
  display: inline-block;
}
.ess-feature .sub-title {
  margin-bottom: 20px;
}
.ess-feature .content {
  padding: 30px;
  border-radius: 20px;
  background-color: var(--main-color-white);
  border: 1px solid var(--main-color-purple);
  margin-bottom: 30px;
}
.ess-feature .content:last-child {
  margin-bottom: 0;
}
.ess-feature {
  margin: 70px 0;
}
.ess-feature .d-flex {
  gap: 30px;
}
.ess-feature .d-flex img {
  margin-top: 30px;
}
.ess-spec {
  padding-bottom: 70px;
}
.spec-list li {
  align-content: baseline;
  padding: 15px 30px;
  border-radius: 20px;
  border: 1px solid #d6d6d6;
  background-color: var(--main-color-white);
  margin: 20px 0;
}
.spec-list li::after {
  content: "";
  clear: both;
  display: block;
}
.spec-list li p:first-child {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  color: var(--main-color-purple-title);
  margin-right: 130px;
  width: 200px;
}
.spec-list li p:last-child {
  font-size: 18px;
  margin-top: 5px;
}
.ess-how img {
  width: 100%;
  margin-top: 30px;
}

/* section8 lfp */

.lfp-info .sub-title {
  margin: 20px 0;
}
.lfp-business {
  margin: 70px 0;
}
.lfp-business img {
  width: 100%;
  margin: 30px 0;
}
.lfp-business .content {
  padding: 30px;
  border-radius: 20px;
  background-color: #fff;
  border: 1px solid var(--main-color-purple);
}

/* section9 patent */
.patent-title {
  font-size: 18px;
  background-color: var(--main-color-purple);
  padding: 15px;
  display: inline-block;
  color: var(--main-color-white);
  font-weight: var(--font-weight-bold);
  border-radius: 50px;
}
.patent-inner img {
  display: block;
  margin: auto;
}

/* news */
/* page  devide*/
.news,
.ess,
.lfp,
.history,
.contact,
.patent,
.organization,
.behavior-all-inner {
  padding: 200px 0;
}
.contact {
  padding-bottom: 0;
}
.news h1 span {
  color: var(--main-color-purple);
}
.news-inner {
  margin-top: 30px;
}
.news-inner .d-flex {
  gap: 30px;
  padding-left: 0;
  margin-bottom: 30px;
}
.news-inner .news-latest {
  padding: 30px;
  border-radius: 0 20px 20px 20px;
  background-color: var(--main-section-bg);
  border: 1px solid #dadada;
}
.news-inner .content {
  margin: 20px 0;
}
.news-inner a img {
  width: 30px;
  height: 30px;
  margin-top: 5px;
}
.news-inner .content,
.news-inner .sub-title {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.news-inner .content {
  max-width: 100%;
}
.news-inner .sub-title {
  max-width: 400px;
}
.page {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
  font-weight: var(--font-weight-bold);
  margin-top: 5px;
  margin-right: 16px;
  display: inline-block;
  font-size: var(--font-size-sub-title);
}
.page.current {
  background-color: var(--main-color-purple);
  color: var(--main-color-white);
}
.page.next {
  background-color: var(--main-section-bg);
  color: var(--main-color-black);
  border: 1px solid #dadada;
}
.page.next img {
  width: 10px;
  margin-top: -5px;
}
/* contact */
.contact h1 {
  color: var(--main-color-purple);
}
.contact-area {
  max-width: 700px;
  display: block;
  margin: 0 auto;
}
.contact-area input,
.contact-area button,
.contact-area textarea {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--main-color-purple);
}
.contact-area p,
.contact-area button {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  margin-bottom: 10px;
}
.chk-policy {
  width: 100%;
  display: block;
}
.contact-area input[type="checkbox"] {
  accent-color: var(--main-color-purple);
  margin-bottom: 30px;
  display: inline-block;
  width: auto;
}
.contact-area button {
  background-color: var(--main-color-purple);
  color: var(--main-color-white);
  transition: 0.2s;
}
.contact-area button:hover {
  background-color: #2b1fae;
}
/* map */
.map-inner {
  margin-bottom: 30px;
}
.google-map {
  height: 550px;
}
/* top */
.wrraper {
  position: relative;
}
.top {
  position: fixed;
  right: 100px;
  bottom: 100px;
  height: 80px;
  width: 80px;
  border-radius: 50%;
  background-color: var(--main-color-purple);
  z-index: 200;
}
.top-inner {
  color: var(--main-color-white);
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.top-inner img {
  width: 20px;
  display: block;
  margin: 0 auto;
}

/* footer */
footer {
  padding: 60px 0;
  background-color: #dadada;
}
.footer-logo img {
  width: 56px;
  margin-top: 20px;
}
.company-info {
  margin-left: 30px;
  width: 100%;
}

.dimmed {
  content: "";
  display: none;
  z-index: 2000;
  background: rgba(0, 0, 0, 0.576);
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
}
.open-mo,
.close-mo {
  display: none;
}
.slide-title-mo {
  display: none;
}

.modal-body img {
  width: 100%;
  height: 200px;
  border-radius: 20px;
  object-fit: scale-down;
}

/* 반응형 */

@media screen and (max-width: 1230px) {
  /* page  devide*/
  .news,
  .ess,
  .lfp,
  .history,
  .contact,
  .patent,
  .organization,
  .behavior-all-inner {
    padding: 200px 30px;
  }
  .contact {
    padding-bottom: 0;
  }
  .bx-viewport {
    height: 550px;
  }
  .slide-view {
    height: 60vh;
  }
  /* mobile header, nav */
  .open-mo,
  .close-mo {
    display: block;
  }
  .dimmed.open {
    display: block;
  }
  .open-mo {
    background: none;
    border: none;
  }
  .open-mo img {
    width: 30px;
  }
  header nav {
    display: none;
  }
  header nav.open-mobile-menu {
    display: block;
    width: 60%;
    z-index: 4000;
    max-width: 300px;
    background-color: var(--main-color-white);
    position: fixed;
    right: 0;
    top: 0;
    height: 100vh;
  }
  header nav.open-mobile-menu .d-flex {
    color: var(--main-color-black) !important;
    display: block !important;
    font-size: 24px;
    margin-top: 80px;
  }
  header nav.open-mobile-menu .d-flex li {
    display: block;
    padding: 15px 25px;
  }
  header nav.open-mobile-menu .hasmenu ul {
    position: static;
    padding-left: 20px;
    margin-top: 0;
    transform: none;
    background-color: var(--main-section-bg);
  }
  header nav.open-mobile-menu .hasmenu ul li {
    font-size: 20px;
  }
  header nav.open-mobile-menu .hasmenu ul::after {
    display: none;
  }
  .close-mo {
    position: absolute;
    right: 30px;
    top: 30px;
    background: none;
    cursor: pointer;
    border: none;
  }
  .close-mo img {
    width: 30px;
  }
  header {
    align-content: baseline;
    padding: 30px;
  }
  header h1 {
    margin-bottom: 0;
  }
  /* mobile nav */
  section,
  .section2 {
    padding: 40px 20px;
  }
  h1 {
    font-size: 34px;
  }
  .sub-title,
  .sub-history p,
  .tech-title {
    font-size: 20px;
  }
  /* slide */
  /* .slide-view {
    height: 40vh;
  } */
  .slite-title {
    width: 100%;
  }
  .slide-title-fix {
    font-size: 40px;
    left: 30px;
  }
  /* section2 */
  .task {
    width: 200px;
    height: 200px;
  }
  .task img {
    width: 80px;
  }
  .task span {
    font-size: 20px;
  }
  /* section3 about */
  .section3 {
    padding: 60px 80px;
  }
  /* section5 behavior */
  .behavior-inner img {
    width: 100px;
  }
  .wave {
    display: none;
  }
  .behavior {
    margin: 40px 0;
  }
  /* section6 chart */
  .chart {
    padding-top: 0;
  }
  .chart-img {
    max-width: 100%;
  }
  /*  ess / lfp */
  .ess .d-flex {
    flex-direction: column;
  }

  .ess-info > div img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 20px;
  }
  .ess-title,
  .lfp-title,
  .ess-feature .content,
  .lfp-business .content {
    padding: 20px;
  }
  .ess-feature .d-flex {
    flex-direction: row;
  }

  .spec-list li p:first-child {
    font-size: 18px;
  }
  .spec-list li {
    padding: 12px;
  }
  .lfp-business {
    margin-bottom: 0;
  }
  /* news */
  .news-inner > .d-flex {
    width: calc(100% - 30px);
  }
  /* footer */
  footer {
    padding: 30px 40px;
  }
  footer .d-flex {
    flex-direction: column;
  }
  .company-info,
  .footer-logo img {
    margin: 0;
  }
  .footer-logo img {
    margin-bottom: 20px;
  }
}

@media (max-width: 991px) {
  .task {
    width: calc(100% / 4 - 30px);
    border-radius: 20px;
  }
  .sub-history-inner,
  .main-history {
    width: calc(100% / 3 - 20px);
  }
  .behavior > div {
    text-align: center;
  }
  .behavior-inner .circle {
    text-align: left;
  }
  .lfp-info {
    flex-direction: column;
  }
  .lfp-info img {
    width: 100%;
  }
  .news-inner > .d-flex {
    width: auto;
  }
}
@media (max-width: 820px) {
  .sub-title,
  .sub-history p,
  .tech-title {
    font-size: 18px;
  }
  .section5 .inner .behavior {
    flex-direction: column;
  }
  .behavior > div {
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-around;
  }
  .ess-feature .d-flex {
    flex-direction: column-reverse;
  }
  .ess-feature .d-flex img {
    text-align: center;
    width: 150px;
  }
}

@media (max-width: 767px) {
  .slide,
  section {
    width: 100%;
  }
  .slide-view {
    height: 70vh;
  }
  .slide-title-fix {
    font-size: 30px;
  }
  .task {
    width: 100%;
    margin-bottom: 20px;
  }
  .slide-title-mo {
    display: block;
  }
  h1 {
    font-size: 28px;
  }
  .section3 {
    padding: 30px 50px;
  }
  .history-inner {
    flex-direction: column;
    padding-top: 0;
  }
  .sub-history-inner {
    margin-bottom: 20px;
  }
  .sub-history-inner,
  .main-history {
    width: 100%;
  }
  .behavior > div {
    flex-direction: column;
  }
  .sub-title,
  .sub-history p,
  .tech-title {
    font-size: 22px;
  }
  .behavior {
    margin: 0;
  }
  /* .section5, .section6 {
        padding-top: 0;
    } */
  .ess-info,
  .lfp-info {
    gap: 20px;
  }
  .ess-feature .content {
    margin-bottom: 20px;
  }
  .spec-list li p:first-child {
    float: none !important;
    margin-right: 0;
    display: block;
    width: auto;
  }
  .patent-inner {
    width: 100%;
  }
  .patent-inner-all {
    flex-direction: column;
  }
  .news-inner > .d-flex {
    flex-direction: column;
    width: 100%;
  }
  .page {
    width: 40px;
    height: 40px;
    font-size: 18px;
    line-height: 40px;
  }
  .google-map {
    height: 300px;
    margin-bottom: 20px;
  }
  .top {
    right: 30px;
    bottom: 50px;
  }
  header nav.open-mobile-menu .hasmenu ul {
    padding-left: 0;
  }
  header nav.open-mobile-menu .hasmenu ul li {
    font-size: 16px;
  }
}