/* 공통영역 */

@keyframes fadeInUpWithTranslateX {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

.animate__fadeInUpWithTranslateX {
  animation-name: fadeInUpWithTranslateX;
  animation-duration: 1s;
  animation-fill-mode: both;
}

@keyframes neonpur {
  0% {
    box-shadow: 0 0 2px #fb7fff, 0 0 5px #fb7fff, 0 0 8px #fb7fff,
      0 0 14px #fb7fff, 0 0 17px #fb7fff;
  }

  50% {
    box-shadow: 0 0 5px #fdccf9, 0 0 8px #fdccf9, 0 0 14px #fdccf9,
      0 0 17px #fdccf9, 0 0 20px #fdccf9;
  }

  100% {
    box-shadow: 0 0 2px #e57fff, 0 0 5px #e57fff, 0 0 8px #e57fff,
      0 0 14px #e57fff, 0 0 17px #e57fff;
  }
}

@keyframes neonyel {
  0% {
    box-shadow: 0 0 2px #dafd87, 0 0 5px #f4fd9e, 0 0 8px #fdff91,
      0 0 14px #f6ff7f, 0 0 17px #fff27f;
  }

  50% {
    box-shadow: 0 0 5px #eefdcc, 0 0 8px #eafdcc, 0 0 14px #f4fdcc,
      0 0 17px #f8fdcc, 0 0 20px #fcfdcc;
  }

  100% {
    box-shadow: 0 0 2px #fffd7f, 0 0 5px #f6ff7f, 0 0 8px #fff67f,
      0 0 14px #fff27f, 0 0 17px #fff27f;
  }
}

@keyframes neonbu {
  0% {
    box-shadow: 0 0 2px #87dcfd, 0 0 5px #9eeafd, 0 0 8px #91efff,
      0 0 14px #7facff, 0 0 17px #7fecff;
  }

  50% {
    box-shadow: 0 0 2px #454fe4, 0 0 8px #6063ec, 0 0 14px #6473f1,
      0 0 17px #6668f7, 0 0 20px #6056ee;
  }

  100% {
    box-shadow: 0 0 2px #98a2f7, 0 0 5px #7f88ff, 0 0 8px #7f96ff,
      0 0 14px #7fa8ff, 0 0 17px #7fa1ff;
  }
}

@keyframes neonbl {
  0% {
    box-shadow: 0 0 2px #050505, 0 0 5px #181818, 0 0 8px #252525,
      0 0 14px #1d1d1d, 0 0 17px #141414;
  }

  50% {
    box-shadow: 0 0 2px #5f5f5f, 0 0 8px #585858, 0 0 14px #5f5f5f,
      0 0 17px #2e2e2e, 0 0 20px #868686;
  }

  100% {
    box-shadow: 0 0 2px #464646, 0 0 5px #4e4e4e, 0 0 8px #666666,
      0 0 14px #1a1a1a, 0 0 17px #747474;
  }
}

.op0 {
  opacity: 0;
}

.op0_s {
  opacity: 0;
}

.main-box {
  width: 100%;
}

.main-box h2 {
  font-size: 42px;
  font-weight: 600;
  color: #ccc;
  line-height: 1.4;
  text-align: center;
}

.main-box h3 {
  font-size: 30px;
  font-weight: 500;
  color: #fff;
  line-height: 1.4;
  text-align: center;
}

.main-box p {
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  line-height: 1.4;
  text-align: center;
}

.main-box .explain {
  font-size: 15px;
  font-weight: 300;
  color: #fff;
  line-height: 1.4;
  text-align: left;
}

#main-body .main-box h2 {
  color: #fff;
}

.main-box h2 strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 0 25px;
  font-size: 24px;
  font-weight: 600;
  color: #a079fa;
}

.main-box h2 p {
  width: 100%;
  text-align: center;
  margin: 20px 0 0;
  font-size: 24px;
  font-weight: 500;
  line-height: 1.5;
  color: #878e98;
}

.main-box h3 {
  font-size: 28px;
}

.main-box h3 strong {
  color: #a079fa;
}

@media (max-width: 991px) {
  .main-box h2 {
    font-size: 25px;
    word-break: keep-all;
  }

  .main-box h2 br {
    display: none;
  }

  .main-box h2 strong {
    font-size: 16px;
    margin: 0 0 15px;
  }

  .main-box h2 p {
    margin: 15px 0 0;
    font-size: 16px;
    word-break: keep-all;
  }

  .main-box h2 p br {
    display: block;
  }
}

/* 첫번째 영역 */

.main-box .main-first {
  position: relative;
  width: 100%;
  padding: 200px 0, 0;
  margin-top: 140px;
  background: url("../images/bg_main_first.png") no-repeat center / cover;
  min-height: 380px;
}

.main-box .main-first h2 {
  font-size: 36px;
  color: white;
  line-height: 1.5;
  margin-bottom: 30px;
}

.main-box .main-first h2 span {
  font-size: inherit;
  line-height: inherit;
  color: white;
  font-weight: 600;
}

.main-box .main-first h2 strong {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  font-weight: 800;
  color: yellow;
}

.main-box .main-first h3 strong {
  display: inline;
  font-size: inherit;
  line-height: inherit;
  font-weight: 800;
  color: yellow;
}

.main-box .main-first h3 {
  font-size: 24px;
  color: white;
  line-height: 1.5;
  margin-bottom: 30px;
  text-align: center;
}

.draw-container {
  position: relative;
}

.draw-wrapper {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.draw-wrapper .circle {
  width: 100%;
  height: 100%;
  transform: scale(1.6, 3);
  opacity: 0.7;
}

.draw-wrapper .star {
  position: absolute;
  width: 50%;
  aspect-ratio: 1 / 1;
  top: -100%;
  right: -40%;
  opacity: 0.7;
}

@media (max-width: 991px) {
  .main-box .main-first h2 {
    font-size: 24px;
  }

  .main-box .main-first h3 {
    font-size: 18px;
  }
}

.main-box .main-first .main-first-more {
  position: absolute;
  bottom: 10px;
  left: 50%;
}

.main-box .main-first .main-first-more a {
  height: 56px;
  padding: 0 40px;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background: linear-gradient(to right, #22b2fd, #2e93fd, #3b74fd);
}

.main-box .main-first .main-first-more a:after {
  display: inline-block;
  content: "";
  margin-left: 4px;
  width: 24px;
  height: 24px;
  background: url("../images/icon_more_white.png") no-repeat center / cover;
}

@media (max-width: 991px) {
  .main-box .main-first {
    margin: 52px 0 0;
    padding: 50px 0;
  }

  .main-box .main-first .main-first-more {
    margin: 30px 0 0;
  }

  .main-box .main-first .main-first-more a {
    height: 50px;
    padding: 0 30px;
    font-size: 18px;
  }

  .main-box .main-first .main-first-more a:after {
    width: 20px;
    height: 20px;
  }
}

/* 두번째 영역 */

.main-box .main-second {
  position: relative;
  width: 100%;
  min-height: 50px;
}

.main-second .main-second-more {
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.main-second .main-second-more a {
  height: 56px;
  padding: 0 40px;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background: linear-gradient(to right, #22b2fd, #2e93fd, #3b74fd);
}


.main-box .main-second .imageframe {
  width: 70%;
  margin: 0 auto;
}

.main-box .main-second .imageframeint {
  width: 50%;
  margin: 0 auto;
}

.main-box .main-second .integrationlist {
  width: 70%;
  margin: 0 auto;
}

.main-box .main-second .imageframe img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.main-box .main-second .imageframeint img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
  animation: neonyel 4s infinite alternate;
}

.main-box .main-second .main-second-video video {
  width: 70%;
  height: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 20px;
  border-image: linear-gradient(to right, #797979, #8d8d8d) 10;
  animation: neonbl 4s infinite alternate;
}

.main-box .main-second ul {
  width: 100%;
  padding: 6px;
  margin: auto 0;
  display: flex;
  flex-wrap: wrap;
  border-radius: 14px;
  color: white;
  cursor: pointer;
}

.main-box .main-second ul li {
  flex: 1;
  min-width: 0;
}

.main-box .main-second ul li .ac {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 20px;
  font-weight: 600;
  color: #878e98;
}

.main-box .main-second ul li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 20px;
  font-weight: 600;
  color: #878e98;
}

.main-box .main-second ul li img {
  width: 100%;
  aspect-ratio: 3;
  object-fit: contain;
  object-position: center;
  border-radius: 15px;
}


.main-box .main-second ul li a:before {
  display: inline-block;
  content: "";
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background-size: cover;
  background-position: center;
}

.main-box .main-second ul li:nth-of-type(1) a:before {
  background-image: url("../images/icon_main_second_01.png");
}

.main-box .main-second ul li:nth-of-type(2) a:before {
  background-image: url("../images/icon_main_second_02.png");
}

.main-box .main-second ul li:nth-of-type(3) a:before {
  background-image: url("../images/icon_main_second_03.png");
}

.main-box .main-second ul li.active:nth-of-type(1) a:before {
  background-image: url("../images/icon_main_second_on_01.png");
}

.main-box .main-second ul li.active:nth-of-type(2) a:before {
  background-image: url("../images/icon_main_second_on_02.png");
}

.main-box .main-second ul li.active:nth-of-type(3) a:before {
  background-image: url("../images/icon_main_second_on_03.png");
}

.main-box .main-second ul li.active {
  background: #fff;
  border-radius: 12px;
}

.main-box .main-second ul li.active a {
  color: #000;
  font-weight: 600;
}

.main-box .main-second .main-second-image {
  background: #fafaf9;
  padding-top: 30px;
  padding-bottom: 30px;
}

.main-box .main-second .main-second-image-call {
  background: #333;
  padding-top: 30px;
  padding-bottom: 30px;
  border-radius: 30px;
}

.main-box .main-second .main-second-image-call img {
  display: block;
  margin: 0 auto;
  border-radius: 30px;
}

.main-box .main-second .main-second-image img {
  display: block;
  margin: 0 auto;
}

.main-box .main-second .main-second-image video {
  max-width: 1000px;
  width: 100%;
  height: 700px;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  border-image: linear-gradient(to right, #ff00dd, #f5d3ff) 1;
  animation: neonpur 4s infinite alternate;
}

@media (max-width: 991px) {
  .main-box .main-second {
    margin: 75px 0 0;
  }

  .main-box .main-second ul {
    margin: 30px auto 0;
    border-radius: 12px;
  }

  .main-box .main-second ul li {
    flex: none;
    width: 100%;
    margin: 0 0 10px;
  }

  .main-box .main-second ul li:last-of-type {
    margin: 0;
  }

  .main-box .main-second ul li a {
    height: 50px;
    font-size: 18px;
    justify-content: flex-start;
    padding: 0 20px;
  }

  .main-box .main-second .main-second-image {
    padding: 25px 0 0;
    margin: 25px 0 0;
  }
}

/*method 사용가이드*/
.main-box .divide-method {
  display: flex;
  margin-top: 90px;
}

.main-box .divide-method .method-side {
  position: relative;
  width: 15%;
}

.main-box .divide-method .method-side .menuframe {
  position: fixed;
  padding-top: 50px;
  width: 15%;
  height: 100%;
  background-color: #3f3f3f;
}

.main-box .divide-method .method-side .menuframe ul {
  margin: 0;
  padding: 0;
}

.main-box .divide-method .method-side .menuframe ul li {
  position: relative;
}

.main-box .divide-method .method-side .menuframe ul li a {
  text-decoration: none;
  display: block; 
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  font-size: 17px;
  font-weight: 400;
}

.main-box .divide-method .method-side .menuframe ul li a:hover {
  background-color: #0056b3;
}

.main-box .divide-method .method-side .menuframe ul li ul {
  display: none;
  position: static;
  min-width: 100%;
  margin-left: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.main-box .divide-method .method-side .menuframe ul li ul li a {
  padding: 10px;
  font-size: 13px;
  font-weight: 300;
  width: calc(100% - 20px);
}

.main-box .divide-method .method-side .menuframe ul li.open>a {
  background-color: #22b2fd;
}

.main-box .divide-method .method-side .menuframe ul li.open>ul {
  display: block;
}



.main-box .divide-method .main-second-method {
  position: relative;
  width: 85%;
  min-height: 50px;
}

.main-second-method .main-second-method-more {
  margin: 20px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.main-second-method .main-second-method-more a {
  height: 56px;
  padding: 0 40px;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background: linear-gradient(to right, #22b2fd, #2e93fd, #3b74fd);
}


.main-box .divide-method .main-second-method .imageframe {
  width: 70%;
  margin: 0 auto;
}

.main-box .divide-method .main-second-method .imageframeint {
  width: 50%;
  margin: 0 auto;
}

.main-box .divide-method .main-second-method .integrationlist {
  width: 70%;
  margin: 0 auto;
}

.main-box .divide-method .main-second-method .imageframe img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.main-box .divide-method .main-second-method .imageframeint img {
  width: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
  animation: neonyel 4s infinite alternate;
}

.main-box .divide-method .main-second-method .main-second-method-video video {
  width: 70%;
  height: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 20px;
  border-image: linear-gradient(to right, #797979, #8d8d8d) 10;
  animation: neonbl 4s infinite alternate;
}

.main-box .divide-method .main-second-method ul {
  width: 100%;
  padding: 6px;
  margin: auto 0;
  display: flex;
  flex-wrap: wrap;
  border-radius: 14px;
  color: white;
  cursor: pointer;
}

.main-box .divide-method .main-second-method ul li {
  flex: 1;
  min-width: 0;
}

.main-box .divide-method .main-second-method ul li .ac {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 20px;
  font-weight: 600;
  color: #878e98;
}

.main-box .divide-method .main-second-method ul li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 20px;
  font-weight: 600;
  color: #878e98;
}

.main-box .divide-method .main-second-method ul li img {
  width: 100%;
  aspect-ratio: 3;
  object-fit: contain;
  object-position: center;
  border-radius: 15px;
}


.main-box .divide-method .main-second-method ul li a:before {
  display: inline-block;
  content: "";
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background-size: cover;
  background-position: center;
}

.main-box .divide-method .main-second-method ul li:nth-of-type(1) a:before {
  background-image: url("../images/icon_main_second_01.png");
}

.main-box .divide-method .main-second-method ul li:nth-of-type(2) a:before {
  background-image: url("../images/icon_main_second_02.png");
}

.main-box .divide-method .main-second-method ul li:nth-of-type(3) a:before {
  background-image: url("../images/icon_main_second_03.png");
}

.main-box .divide-method .main-second-method ul li.active:nth-of-type(1) a:before {
  background-image: url("../images/icon_main_second_on_01.png");
}

.main-box .divide-method .main-second-method ul li.active:nth-of-type(2) a:before {
  background-image: url("../images/icon_main_second_on_02.png");
}

.main-box .divide-method .main-second-method ul li.active:nth-of-type(3) a:before {
  background-image: url("../images/icon_main_second_on_03.png");
}

.main-box .divide-method .main-second-method ul li.active {
  background: #fff;
  border-radius: 12px;
}

.main-box .divide-method .main-second-method ul li.active a {
  color: #000;
  font-weight: 600;
}

.main-box .divide-method .main-second-method .main-second-method-image {
  background: #fafaf9;
  padding-top: 30px;
  padding-bottom: 30px;
}

.main-box .divide-method .main-second-method .main-second-method-image-call {
  background: #333;
  padding-top: 30px;
  padding-bottom: 30px;
  border-radius: 30px;
}

.main-box .divide-method .main-second-method .main-second-method-image-call img {
  display: block;
  margin: 0 auto;
  border-radius: 30px;
}

.main-box .divide-method .main-second-method .main-second-method-image img {
  display: block;
  margin: 0 auto;
}

.main-box .divide-method .main-second-method .main-second-method-image video {
  max-width: 1000px;
  width: 100%;
  height: 700px;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  border-image: linear-gradient(to right, #ff00dd, #f5d3ff) 1;
  animation: neonpur 4s infinite alternate;
}

@media (max-width: 991px) {
  .main-box .divide-method .main-second-method {
    margin: 75px 0 0;
  }

  .main-box .divide-method .main-second-method ul {
    margin: 30px auto 0;
    border-radius: 12px;
  }

  .main-box .divide-method .main-second-method ul li {
    flex: none;
    width: 100%;
    margin: 0 0 10px;
  }

  .main-box .divide-method .main-second-method ul li:last-of-type {
    margin: 0;
  }

  .main-box .divide-method .main-second-method ul li a {
    height: 50px;
    font-size: 18px;
    justify-content: flex-start;
    padding: 0 20px;
  }

  .main-box .divide-method .main-second-method .main-second-method-image {
    padding: 25px 0 0;
    margin: 25px 0 0;
  }
}


/*kakao연동*/
.main-box .main-integ {
  margin: 100px 0 0;

}

.main-box .main-integ .imageframe {
  width: 70%;
  margin: 0 auto;
}

.main-box .main-integ .imageframeint {
  width: 30%;
  margin: 0 auto;
}

.main-box .main-integ .integrationlist {
  width: 70%;
  margin: 0 auto;
}

.main-box .main-integ .imageframe img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.main-box .main-integ .imageframeint img {
  width: 100%;
  aspect-ratio: 659/197;
  margin: 0 auto;
  object-fit: cover;
  object-position: center;
  border-radius: 30px;
  animation: neonbl 4s infinite alternate;
}

.main-box .main-integ .main-integ-video video {
  width: 70%;
  height: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 20px;
  border-image: linear-gradient(to right, #797979, #8d8d8d) 10;
  animation: neonbl 4s infinite alternate;
}

.main-box .main-integ ul {
  width: 100%;
  padding: 6px;
  margin: auto 0;
  display: flex;
  flex-wrap: wrap;
  border-radius: 14px;
  color: white;
  cursor: pointer;
  align-items: center;
}

.main-box .main-integ ul li {
  min-width: 0;
  margin: 0 auto;
  align-items: center;
}

.main-box .main-integ ul li .ac {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 20px;
  font-weight: 600;
  color: #878e98;
}

.main-box .main-integ ul li .stext {
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
}

.main-box .main-integ ul li .simg {
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}

.main-box .main-integ ul li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 20px;
  font-weight: 600;
  color: #878e98;
}

.main-box .main-integ ul li strong {
  font-size: 20px;
  font-weight: 600;
  color: #e9e9e9;
}

.main-box .main-integ ul li img {
  width: 80%;
  aspect-ratio: 1560/920;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}


.main-box .main-integ ul li a:before {
  display: inline-block;
  content: "";
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background-size: cover;
  background-position: center;
}

.main-box .main-integ ul li.active {
  background: #fff;
  border-radius: 12px;
}

.main-box .main-integ ul li.active a {
  color: #000;
  font-weight: 600;
}

.main-box .main-integ .main-integ-image {
  background: #fafaf9;
  padding-top: 30px;
  padding-bottom: 30px;
}

.main-box .main-integ .main-integ-image img {
  max-width: 592px;
  width: 100%;
  display: block;
  margin: 0 auto;
}

.main-box .main-integ .main-integ-image video {
  max-width: 1000px;
  width: 100%;
  height: 700px;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  border-image: linear-gradient(to right, #ff00dd, #f5d3ff) 1;
  animation: neonpur 4s infinite alternate;
}

@media (max-width: 991px) {
  .main-box .main-integ {
    margin: 75px 0 0;
  }

  .main-box .main-integ ul {
    margin: 30px auto 0;
    border-radius: 12px;
  }

  .main-box .main-integ ul li {
    flex: none;
    width: 100%;
    margin: 0 0 10px;
  }

  .main-box .main-integ ul li:last-of-type {
    margin: 0;
  }

  .main-box .main-integ ul li a {
    height: 50px;
    font-size: 18px;
    justify-content: flex-start;
    padding: 0 20px;
  }

  .main-box .main-integ .main-integ-image {
    padding: 25px 0 0;
    margin: 25px 0 0;
  }
}


.main-box .main-integ-call {
  background-color: #ffffff;
  padding-top: 50px;
  padding-bottom: 50px;
}

.main-box .main-integ-call .imageframe {
  width: 70%;
  margin: 0 auto;
}

.main-box .main-integ-call .imageframeint {
  width: 30%;
  margin: 0 auto;
}

.main-box .main-integ-call .integrationlist {
  width: 70%;
  margin: 0 auto;
}

.main-box .main-integ-call .imageframe img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.main-box .main-integ-call .imageframeint img {
  width: 100%;
  aspect-ratio: 659/197;
  margin: 0 auto;
  object-fit: cover;
  object-position: center;
  border-radius: 30px;
  animation: neonbl 4s infinite alternate;
}

.main-box .main-integ-call .main-integ-call-video video {
  width: 70%;
  height: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 20px;
  border-image: linear-gradient(to right, #797979, #8d8d8d) 10;
  animation: neonbl 4s infinite alternate;
}

.main-box .main-integ-call ul {
  margin: 0 auto;
  /* 가로 중앙 정렬 */
  width: 70%;
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  border-radius: 14px;
  color: white;
  cursor: pointer;
  align-items: center;
}

.main-box .main-integ-call ul:nth-child(2) {
  flex-flow: row-reverse;
  /* 가로 방향 역순 정렬 */
}

.main-box .main-integ-call ul li {
  min-width: 0;
  text-align: center;
}


.main-box .main-integ-call ul li .ac {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 20px;
  font-weight: 600;
  color: #878e98;
}

.main-box .main-integ-call ul li .stext {
  display: flex;
  flex-wrap: wrap;
  height: 56px;
  font-size: 30px;
  font-weight: bold;
  color: #8dd1ff;
  margin: 0 auto;
}

.main-box .main-integ-call ul li .sdtext {
  display: flex;
  flex-wrap: wrap;
  height: 56px;
  font-size: 20px;
  font-weight: bold;
  color: #8dd1ff;
  margin: 0 auto;
}


.main-box .main-integ-call ul li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 20px;
  font-weight: 600;
  color: #878e98;
}

.main-box .main-integ-call ul li strong {
  font-size: 20px;
  font-weight: 600;
  color: #e9e9e9;
}

.main-box .main-integ-call ul li .timg {
  display: flex;
  width: 80px;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}

.main-box .main-integ-call ul li .simg {
  margin: 0 auto;
  width: 80%;
  aspect-ratio: 1560/920;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}


.main-box .main-integ-call ul li a:before {
  display: inline-block;
  content: "";
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background-size: cover;
  background-position: center;
}

.main-box .main-integ-call ul li.active {
  background: #fff;
  border-radius: 12px;
}

.main-box .main-integ-call ul li.active a {
  color: #000;
  font-weight: 600;
}

.main-box .main-integ-call .main-integ-call-image {
  background: #fafaf9;
  padding-top: 30px;
  padding-bottom: 30px;
}

.main-box .main-integ-call .main-integ-call-image img {
  max-width: 592px;
  width: 100%;
  display: block;
  margin: 0 auto;
}

.main-box .main-integ-call .main-integ-call-image video {
  max-width: 1000px;
  width: 100%;
  height: 700px;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  border-image: linear-gradient(to right, #ff00dd, #f5d3ff) 1;
  animation: neonpur 4s infinite alternate;
}

@media (max-width: 991px) {
  .main-box .main-integ-call {
    margin: 75px 0 0;
  }

  .main-box .main-integ-call ul {
    margin: 30px auto 0;
    border-radius: 12px;
  }

  .main-box .main-integ-call ul li {
    flex: none;
    width: 100%;
    margin: 0 0 10px;
  }

  .main-box .main-integ-call ul li:last-of-type {
    margin: 0;
  }

  .main-box .main-integ-call ul li a {
    height: 50px;
    font-size: 18px;
    justify-content: flex-start;
    padding: 0 20px;
  }

  .main-box .main-integ-call .main-integ-call-image {
    padding: 25px 0 0;
    margin: 25px 0 0;
  }
}

/*chatbot*/


.main-box .main-integ-chatbot {
  padding-top: 50px;
  padding-bottom: 50px;
}

.main-box .main-integ-chatbot .imageframe {
  width: 70%;
  margin: 0 auto;
}

.main-box .main-integ-chatbot .imageframeint {
  width: 30%;
  margin: 0 auto;
}

.main-box .main-integ-chatbot .integrationlist {
  width: 70%;
  margin: 0 auto;
}

.main-box .main-integ-chatbot .imageframe img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.main-box .main-integ-chatbot .imageframeint img {
  width: 100%;
  aspect-ratio: 659/197;
  margin: 0 auto;
  object-fit: cover;
  object-position: center;
  border-radius: 30px;
  animation: neonbl 4s infinite alternate;
}

.main-box .main-integ-chatbot .main-integ-chatbot-video video {
  width: 70%;
  height: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 20px;
  border-image: linear-gradient(to right, #797979, #8d8d8d) 10;
  animation: neonbl 4s infinite alternate;
}

.main-box .main-integ-chatbot ul {
  margin: 0 auto;
  /* 가로 중앙 정렬 */
  width: 70%;
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  border-radius: 14px;
  color: white;
  cursor: pointer;
  align-items: center;
}

.main-box .main-integ-chatbot ul:nth-child(2) {
  flex-flow: row-reverse;
  /* 가로 방향 역순 정렬 */
}

.main-box .main-integ-chatbot ul li {
  min-width: 0;
  text-align: center;
}


.main-box .main-integ-chatbot ul li .ac {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 20px;
  font-weight: 600;
  color: #878e98;
}

.main-box .main-integ-chatbot ul li .stext {
  flex-wrap: wrap;
  height: 56px;
  font-size: 30px;
  font-weight: bold;
  color: #f1f9ff;
  margin: 0 auto;
}

.main-box .main-integ-chatbot ul li .sdtext {
  flex-wrap: wrap;
  height: 56px;
  font-size: 20px;
  font-weight: 400;
  color: #e1f2fd;
  margin: 0 auto;
}


.main-box .main-integ-chatbot ul li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 20px;
  font-weight: 600;
  color: #878e98;
}

.main-box .main-integ-chatbot ul li strong {
  font-size: 20px;
  font-weight: 600;
  color: #e9e9e9;
}

.main-box .main-integ-chatbot ul li .timg {
  display: flex;
  width: 80px;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}

.main-box .main-integ-chatbot ul li .simg {
  margin: 0 auto;
  width: 80%;
  aspect-ratio: 1560/920;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}


.main-box .main-integ-chatbot ul li a:before {
  display: inline-block;
  content: "";
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background-size: cover;
  background-position: center;
}

.main-box .main-integ-chatbot ul li.active {
  background: #fff;
  border-radius: 12px;
}

.main-box .main-integ-chatbot ul li.active a {
  color: #000;
  font-weight: 600;
}

.main-box .main-integ-chatbot .main-integ-chatbot-image {
  background: #fafaf9;
  padding-top: 30px;
  padding-bottom: 30px;
}

.main-box .main-integ-chatbot .main-integ-chatbot-image img {
  max-width: 592px;
  width: 100%;
  display: block;
  margin: 0 auto;
}

.main-box .main-integ-chatbot .main-integ-chatbot-image video {
  max-width: 1000px;
  width: 100%;
  height: 700px;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  border-image: linear-gradient(to right, #ff00dd, #f5d3ff) 1;
  animation: neonpur 4s infinite alternate;
}

@media (max-width: 991px) {
  .main-box .main-integ-chatbot {
    margin: 75px 0 0;
  }

  .main-box .main-integ-chatbot ul {
    margin: 30px auto 0;
    border-radius: 12px;
  }

  .main-box .main-integ-chatbot ul li {
    flex: none;
    width: 100%;
    margin: 0 0 10px;
  }

  .main-box .main-integ-chatbot ul li:last-of-type {
    margin: 0;
  }

  .main-box .main-integ-chatbot ul li a {
    height: 50px;
    font-size: 18px;
    justify-content: flex-start;
    padding: 0 20px;
  }

  .main-box .main-integ-chatbot .main-integ-chatbot-image {
    padding: 25px 0 0;
    margin: 25px 0 0;
  }
}


.main-box .main-integ-update {
  background-color: #ffffff;
  padding-top: 50px;
  padding-bottom: 50px;
}

.main-box .main-integ-update .imageframe {
  width: 70%;
  margin: 0 auto;
}

.main-box .main-integ-update .imageframeint {
  width: 30%;
  margin: 0 auto;
}

.main-box .main-integ-update .integrationlist {
  width: 70%;
  margin: 0 auto;
}

.main-box .main-integ-update .imageframe img {
  width: 100%;
  object-fit: cover;
  object-position: center;
}

.main-box .main-integ-update .imageframeint img {
  width: 100%;
  aspect-ratio: 659/197;
  margin: 0 auto;
  object-fit: cover;
  object-position: center;
  border-radius: 30px;
  animation: neonbl 4s infinite alternate;
}

.main-box .main-integ-update .main-integ-update-video video {
  width: 70%;
  height: 100%;
  display: block;
  margin: 0 auto;
  border-radius: 20px;
  border-image: linear-gradient(to right, #797979, #8d8d8d) 10;
  animation: neonbl 4s infinite alternate;
}

.main-box .main-integ-update ul {
  margin: 0 auto;
  /* 가로 중앙 정렬 */
  width: 70%;
  padding: 6px;
  display: flex;
  flex-wrap: wrap;
  border-radius: 14px;
  color: white;
  cursor: pointer;
  align-items: center;
}

.main-box .main-integ-update ul li {

  min-width: 0;
  text-align: center;
}


.main-box .main-integ-update ul li .updatetitle {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 20px;
  font-weight: 600;
  color: #000000;
}

.main-box .main-integ-update ul li .stext {
  display: flex;
  flex-wrap: wrap;
  line-height: 50px;
  font-size: 30px;
  font-weight: bold;
  color: #070707;
  margin: 0 auto;
}

.main-box .main-integ-update ul li .sdtext {
  display: flex;
  flex-wrap: wrap;
  height: 56px;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  margin: 0 auto;
}


.main-box .main-integ-update ul li a {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 56px;
  font-size: 20px;
  font-weight: 600;
  color: #878e98;
}

.main-box .main-integ-update ul li strong {
  font-size: 20px;
  font-weight: 600;
  color: #e9e9e9;
}

.main-box .main-integ-update ul li .timg {
  display: flex;
  width: 50px;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}

.main-box .main-integ-update ul li .simg {
  margin: 0 auto;
  width: 80%;
  aspect-ratio: 1560/920;
  object-fit: cover;
  object-position: center;
  border-radius: 20px;
}


.main-box .main-integ-update ul li a:before {
  display: inline-block;
  content: "";
  width: 30px;
  height: 30px;
  margin-right: 10px;
  background-size: cover;
  background-position: center;
}

.main-box .main-integ-update ul li.active {
  background: #fff;
  border-radius: 12px;
}

.main-box .main-integ-update ul li.active a {
  color: #000;
  font-weight: 600;
}

.main-box .main-integ-update .main-integ-update-image {
  background: #fafaf9;
  padding-top: 30px;
  padding-bottom: 30px;
}

.main-box .main-integ-update .main-integ-update-image img {
  max-width: 592px;
  width: 100%;
  display: block;
  margin: 0 auto;
}

.main-box .main-integ-update .main-integ-update-image video {
  max-width: 1000px;
  width: 100%;
  height: 700px;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  border-image: linear-gradient(to right, #ff00dd, #f5d3ff) 1;
  animation: neonpur 4s infinite alternate;
}

@media (max-width: 991px) {
  .main-box .main-integ-update {
    margin: 75px 0 0;
  }

  .main-box .main-integ-update ul {
    margin: 30px auto 0;
    border-radius: 12px;
  }

  .main-box .main-integ-update ul li {
    flex: none;
    width: 100%;
    margin: 0 0 10px;
  }

  .main-box .main-integ-update ul li:last-of-type {
    margin: 0;
  }

  .main-box .main-integ-update ul li a {
    height: 50px;
    font-size: 18px;
    justify-content: flex-start;
    padding: 0 20px;
  }

  .main-box .main-integ-update .main-integ-update-image {
    padding: 25px 0 0;
    margin: 25px 0 0;
  }
}

/* 세번째 영역 */

.main-box .main-third {
  padding: 80px 0;
}

.main-box .main-third .main-third-logo {
  margin: 60px 0 0;
}

.main-box .main-third .main-third-logo ul {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -20px -50px;
}

.main-box .main-third .main-third-logo ul li {
  width: calc(16.66% - 40px);
  margin: 0 20px 50px;
}

.main-box .main-third .main-third-logo ul li img {
  width: 100%;
}

.main-box .main-third .main-third-review {
  margin: 60px 0 0;
}

.main-box .main-third .main-third-review ul {
  display: flex;
  flex-wrap: wrap;
}

.main-box .main-third .main-third-review ul li {
  flex: 1;
  min-width: 0;
  margin-right: 16px;
  padding: 24px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.03);
}

.main-box .main-third .main-third-review ul li:last-of-type {
  margin: 0;
}

.main-box .main-third .main-third-review ul li p {
  font-size: 20px;
  line-height: 1.3;
}

.main-box .main-third .main-third-review ul li div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 24px 0 0;
}

.main-box .main-third .main-third-review ul li div img {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  object-fit: cover;
}

.main-box .main-third .main-third-review ul li div b {
  margin-left: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.main-box .main-third .main-third-review ul li div span {
  margin-left: 10px;
  font-size: 16px;
  color: #878e98;
}

@media (max-width: 991px) {
  .main-box .main-third {
    padding: 40px 0;
  }

  .main-box .main-third .main-third-logo {
    margin: 30px 0 0;
  }

  .main-box .main-third .main-third-logo ul {
    margin: 0 -10px -30px;
  }

  .main-box .main-third .main-third-logo ul li {
    width: calc(33.33% - 20px);
    margin: 0 10px 30px;
  }

  .main-box .main-third .main-third-review {
    margin: 30px 0 0;
  }

  .main-box .main-third .main-third-review ul {
    margin: 0;
  }

  .main-box .main-third .main-third-review ul li {
    width: 100%;
    flex: none;
    margin-right: 0;
    margin-bottom: 10px;
    padding: 20px 15px;
    border-radius: 10px;
  }

  .main-box .main-third .main-third-review ul li:last-of-type {
    margin: 0;
  }

  .main-box .main-third .main-third-review ul li p {
    font-size: 16px;
    word-break: keep-all;
  }
}

/* 네번째 영역 */

.main-box .main-fourth {
  background: url("../images/bg_main_fourth.png") no-repeat center / cover;
  padding: 100px 0;
}

.main-box .main-fourth p {
  text-align: center;
  font-size: 52px;
  font-weight: 600;
  line-height: 1.4;
  color: #000000;
}

.main-box .main-fourth p b {
  display: block;
  font-size: 52px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: #ff7e5a;
}

@media (max-width: 991px) {
  .main-box .main-fourth {
    padding: 50px 0;
    background-position: right center;
  }

  .main-box .main-fourth p {
    font-size: 25px;
  }

  .main-box .main-fourth p b {
    font-size: 25px;
  }
}

/* 다섯번째 영역 */

.main-box .main-fifth {
  padding: 100px 0;
  background: #616161;
}

.main-box .main-fifth .main-fifth-tab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 50px 0 0;
}

.main-box .main-fifth .main-fifth-tab>div {
  flex: 1;
  min-width: 0;
  margin-right: 60px;
}

.main-box .main-fifth .main-fifth-tab>div:last-of-type {
  margin: 0;
}

.main-box .main-fifth .main-fifth-tab .tab-content img {
  width: 458px;
  height: 786px;
  border-radius: 30px;
}

.main-box .main-fifth .main-fifth-tab .tab p {
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 38px;
  font-size: 18px;
  color: #fff;
  font-weight: 500;
}

.main-box .main-fifth .main-fifth-tab .tab ul li {
  margin: 0 0 10px;
}

.main-box .main-fifth .main-fifth-tab .tab ul li:last-of-type {
  margin: 0;
}

.main-box .main-fifth .main-fifth-tab .tab ul li a {
  height: 80px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 20px;
  padding: 0 20px;
  font-size: 20px;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
}

.main-box .main-fifth .main-fifth-tab .tab ul li a:before {
  display: inline-block;
  content: "";
  width: 30px;
  height: 30px;
  margin-right: 12px;
  background-size: cover;
  background-position: center;
}

.main-box .main-fifth .main-fifth-tab .tab ul li a span {
  margin-left: 15px;
  border-radius: 8px;
  height: 26px;
  background: rgba(160, 121, 250, 0.2);
  color: #a079fa;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.main-box .main-fifth .main-fifth-tab .tab ul li a:hover {
  background: rgba(213, 220, 248, 0.5);
  color: #000;
}

.main-box .main-fifth .main-fifth-tab .tab ul li.active a {
  background: rgba(213, 220, 248, 0.5);
  color: #000;
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab01 a:before {
  background-image: url("../images/chatbotbutton1.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab02 a:before {
  background-image: url("../images/chatbotbutton4.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab03 a:before {
  background-image: url("../images/chatbotbutton3.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab04 a:before {
  background-image: url("../images/chatbotbutton2.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab05 a:before {
  background-image: url("../images/icon_main_fifth_05.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab01.active a:before {
  background-image: url("../images/chatbotbutton1.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab02.active a:before {
  background-image: url("../images/chatbotbutton4.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab03.active a:before {
  background-image: url("../images/chatbotbutton3.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab04.active a:before {
  background-image: url("../images/chatbotbutton2.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab05.active a:before {
  background-image: url("../images/chatbotbutton1.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab01 a:hover:before {
  background-image: url("../images/chatbotbutton1.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab02 a:hover:before {
  background-image: url("../images/chatbotbutton4.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab03 a:hover:before {
  background-image: url("../images/chatbotbutton3.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab04 a:hover:before {
  background-image: url("../images/chatbotbutton2.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab05 a:hover:before {
  background-image: url("../images/chatbotbutton1.png");
}

/*message tab*/

.main-box .main-fifth .main-fifth-tab .tab ul li.tab01-message a:before {
  background-image: url("../images/icon_main_fifth_05.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab02-message a:before {
  background-image: url("../images/icon_main_fifth_02.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab03-message a:before {
  background-image: url("../images/icon_main_fifth_03.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab04-message a:before {
  background-image: url("../images/icon_main_fifth_04.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab05-message a:before {
  background-image: url("../images/icon_main_fifth_05.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab01-message.active a:before {
  background-image: url("../images/chatbotbutton1.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab02-message.active a:before {
  background-image: url("../images/chatbotbutton4.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab03-message.active a:before {
  background-image: url("../images/chatbotbutton3.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab04-message.active a:before {
  background-image: url("../images/chatbotbutton2.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab05-message.active a:before {
  background-image: url("../images/chatbotbutton1.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab01-message a:hover:before {
  background-image: url("../images/chatbotbutton1.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab02-message a:hover:before {
  background-image: url("../images/chatbotbutton4.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab03-message a:hover:before {
  background-image: url("../images/chatbotbutton3.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab04-message a:hover:before {
  background-image: url("../images/chatbotbutton2.png");
}

.main-box .main-fifth .main-fifth-tab .tab ul li.tab05-message a:hover:before {
  background-image: url("../images/chatbotbutton1.png");
}


@media (max-width: 991px) {
  .main-box .main-fifth {
    padding: 50px 0;
  }

  .main-box .main-fifth .main-fifth-tab {
    margin: 30px 0 0;
  }

  .main-box .main-fifth .main-fifth-tab>div {
    flex: none;
    margin-right: 0;
    width: 100%;
    margin-bottom: 30px;
  }

  .main-box .main-fifth .main-fifth-tab>div:last-of-type {
    margin-bottom: 0;
  }

  .main-box .main-fifth .main-fifth-tab .tab p {
    font-size: 16px;
    height: auto;
  }

  .main-box .main-fifth .main-fifth-tab .tab ul li a {
    height: 60px;
    border-radius: 5px;
    padding: 0 15px;
    font-size: 16px;
    background: #efefef;
  }

  .main-box .main-fifth .main-fifth-tab .tab ul li a:before {
    width: 25px;
    height: 25px;
    margin-right: 10px;
  }

  .main-box .main-fifth .main-fifth-tab .tab ul li a span {
    height: 23px;
    font-size: 12px;
    border-radius: 2px;
    margin-left: 10px;
  }
}

/* 여섯번째 영역 */

.main-sixth {
  padding: 100px 0;

}

.main-sixth h2 strong {
  color: #6baeff;
}

.main-sixth .main-sixth-list {
  margin: 50px 0 0;
}

.main-sixth .main-sixth-list ul {
  display: flex;
  flex-wrap: wrap;
}

.main-sixth .main-sixth-list ul li {
  padding: 34px 34px 0;
  border-radius: 20px;
  flex: 1;
  min-width: 0;
  margin-right: 24px;
  background: #fff;
}

.main-sixth .main-sixth-list ul li:last-of-type {
  margin-right: 0;
  background: #bad2f2;
}

.main-sixth .main-sixth-list ul li strong {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: #2688ff;
  margin: 0 0 5px;
}

.main-sixth .main-sixth-list ul li p {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
}

.main-sixth .main-sixth-list ul li img {
  width: 100%;
}

.main-box .main-sixth .main-sixth-video video {
  max-width: 1000px;
  width: 100%;
  height: 700px;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  border-image: linear-gradient(to right, #ff00dd, #f5d3ff) 1;
  animation: neonbu 4s infinite alternate;
}

@media (max-width: 991px) {
  .main-sixth {
    padding: 50px 0;
  }

  .main-sixth .main-sixth-list {
    margin: 30px 0 0;
  }

  .main-sixth .main-sixth-list ul li {
    padding: 25px 15px 0;
    border-radius: 10px;
    margin-right: 0;
    flex: none;
    width: 100%;
  }

  .main-sixth .main-sixth-list ul li:last-of-type {
    margin: 24px 0 0;
  }

  .main-sixth .main-sixth-list ul li strong {
    font-size: 18px;
  }

  .main-sixth .main-sixth-list ul li p {
    font-size: 16px;
  }
}

/* 일곱번째 영역 */

.main-seventh {
  padding: 100px 0;
  background: url("../images/bg_main_seventh.png") no-repeat center / cover;
}

.main-seventh h2 {
  color: #fff;
}

.main-seventh .main-seventh-list {
  margin: 50px 0 0;
}

.main-seventh .main-seventh-list ul {
  display: flex;
  flex-wrap: wrap;
}

.main-seventh .main-seventh-list ul li {
  border-radius: 12px;
  padding: 25px;
  background: linear-gradient(to right, #22b2fd, #2e93fd, #3b74fd);
  flex: 1;
  min-width: 0;
  margin-right: 24px;
}

.main-seventh .main-seventh-list ul li:last-of-type {
  margin: 0;
}

.main-seventh .main-seventh-list ul li:before {
  display: block;
  content: "";
  width: 34px;
  height: 34px;
  margin: 0 0 30px;
  background-size: cover;
  background-position: center;
}

.main-seventh .main-seventh-list ul li strong {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 42px;
  font-weight: 700;
  color: #fff;
}

.main-seventh .main-seventh-list ul li p {
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 600;
  color: #fff;
}

.main-seventh .main-seventh-list ul li small {
  display: block;
  margin: 8px 0 0;
  font-size: 18px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.4);
}

.main-seventh .main-seventh-list ul li:nth-of-type(1):before {
  background-image: url("../images/icon_main_seventh_01.png");
}

.main-seventh .main-seventh-list ul li:nth-of-type(2):before {
  background-image: url("../images/icon_main_seventh_02.png");
}

.main-seventh .main-seventh-list ul li:nth-of-type(3):before {
  background-image: url("../images/icon_main_seventh_03.png");
}

@media (max-width: 991px) {
  .main-seventh {
    padding: 50px 0;
  }

  .main-seventh .main-seventh-list {
    margin: 30px 0 0;
  }

  .main-seventh .main-seventh-list ul li {
    flex: none;
    margin-right: 0;
    width: 100%;
    padding: 20px 15px;
    border-radius: 10px;
    margin: 0 0 14px;
  }

  .main-seventh .main-seventh-list ul li:last-of-type {
    margin: 0;
  }

  .main-seventh .main-seventh-list ul li strong {
    font-size: 30px;
  }

  .main-seventh .main-seventh-list ul li p {
    font-size: 16px;
  }

  .main-seventh .main-seventh-list ul li small {
    font-size: 16px;
  }

  .main-seventh .main-seventh-list ul li:before {
    width: 30px;
    height: 30px;
    margin: 0 0 20px;
  }
}

/* 여덟번째 영역 */

.main-box .main-eighth {
  padding: 100px 0;
}

.main-box .main-eighth p {
  text-align: center;
  font-size: 52px;
  font-weight: 600;
  line-height: 1.4;
}

.main-box .main-eighth p b {
  display: block;
  font-size: 52px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: #ff7e5a;
}

.main-eighth h2 strong {
  color: #6baeff;
}

.main-eighth .main-eighth-list {
  margin: 50px 0 0;
}

.main-eighth .main-eighth-list ul {
  display: flex;
  flex-wrap: wrap;
}

.main-eighth .main-eighth-list ul li {
  padding: 34px 34px 0;
  border-radius: 20px;
  flex: 1;
  min-width: 0;
  margin-right: 24px;
  background: #fff;
}

.main-eighth .main-eighth-list ul li:last-of-type {
  margin-right: 0;
  background: #bad2f2;
}

.main-eighth .main-eighth-list ul li strong {
  display: block;
  font-size: 24px;
  font-weight: 600;
  color: #2688ff;
  margin: 0 0 5px;
}

.main-eighth .main-eighth-list ul li p {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
}

.main-eighth .main-eighth-list ul li img {
  width: 100%;
}

.main-box .main-eighth .main-eighth-video video {
  max-width: 1000px;
  width: 100%;
  height: 700px;
  display: block;
  margin: 0 auto;
  border-radius: 10px;
  border-image: linear-gradient(to right, #ff00dd, #f5d3ff) 1;
  animation: neonyel 4s infinite alternate;
}

@media (max-width: 991px) {
  .main-eighth {
    padding: 50px 0;
  }

  .main-eighth .main-eighth-list {
    margin: 30px 0 0;
  }

  .main-eighth .main-eighth-list ul li {
    padding: 25px 15px 0;
    border-radius: 10px;
    margin-right: 0;
    flex: none;
    width: 100%;
  }

  .main-eighth .main-eighth-list ul li:last-of-type {
    margin: 24px 0 0;
  }

  .main-eighth .main-eighth-list ul li strong {
    font-size: 18px;
  }

  .main-eighth .main-eighth-list ul li p {
    font-size: 16px;
  }
}

/* 아홉번째 영역 */

.main-nineth {
  padding: 100px 0;
}

.main-nineth h2 strong {
  color: #ff6400;
}

.main-nineth .main-nineth-list {
  margin: 50px 0 0;
}

.main-nineth .main-nineth-list ul li {
  margin: 0 0 25px;
  border-radius: 20px;
  background: rgba(255, 224, 204, 0.8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.main-nineth .main-nineth-list ul li:last-of-type {
  margin: 0;
}

.main-nineth .main-nineth-list ul li .list-image {
  width: 786px;
}

.main-nineth .main-nineth-list ul li .list-imageintro {
  width: 786px;
}

.main-nineth .main-nineth-list ul li .list-image img {
  width: 100%;
}

.main-nineth .main-nineth-list ul li .list-imageintro img {
  margin: 0 auto;
  padding: 10px;
  border-radius: 20px;
  width: 90%;
}

.main-nineth .main-nineth-list ul li .list-content {
  flex: 1;
  min-width: 0;
}

.main-nineth .main-nineth-list ul li .list-content strong {
  display: block;
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 8px;
}

.main-nineth .main-nineth-list ul li .list-content p {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: #878e98;
}

.main-nineth .main-nineth-list ul li:last-of-type {
  flex-direction: row-reverse;
}

.main-nineth .main-nineth-list ul li:last-of-type .list-content {
  padding-left: 40px;
}

.main-nineth .main-nineth-text {
  margin: 50px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.main-nineth .main-nineth-text>div {
  border-left: 4px solid #fc9747;
  padding: 20px 80px;
}

.main-nineth .main-nineth-text>div p {
  font-size: 24px;
  line-height: 1.4;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
}

.main-nineth .main-nineth-text>div small {
  display: block;
  margin: 12px 0 0;
  font-size: 20px;
  color: #666;
}

@media (max-width: 1200px) {
  .main-nineth .main-nineth-list ul li .list-image {
    width: 650px;
  }
}

@media (max-width: 1100px) {
  .main-nineth .main-nineth-list ul li .list-image {
    width: 550px;
  }
}

@media (max-width: 991px) {
  .main-nineth {
    padding: 50px 0;
  }

  .main-nineth .main-nineth-list {
    margin: 30px 0 0;
  }

  .main-nineth .main-nineth-list ul li {
    border-radius: 10px;
  }

  .main-nineth .main-nineth-list ul li .list-image {
    width: 100%;
    order: 2;
  }

  .main-nineth .main-nineth-list ul li .list-content {
    flex: none;
    width: 100%;
    padding: 40px 25px 0 10px;
  }

  .main-nineth .main-nineth-list ul li .list-content strong {
    font-size: 20px;
  }

  .main-nineth .main-nineth-list ul li .list-content p {
    font-size: 16px;
  }

  .main-nineth .main-nineth-list ul li:last-of-type .list-content {
    padding-left: 25px;
  }

  .main-nineth .main-nineth-text {
    margin: 30px 0 0;
  }

  .main-nineth .main-nineth-text>div {
    border-left-width: 3px;
    padding: 0 20px;
  }

  .main-nineth .main-nineth-text>div p {
    font-size: 18px;
  }

  .main-nineth .main-nineth-text>div small {
    margin: 10px 0 0;
    font-size: 16px;
  }
}

/* 열번째 영역 */

.main-tenth {
  padding: 100px 0;
  background: #e2efff;
}

.main-tenth h2 strong {
  color: #6baeff;
}

.main-tenth .main-tenth-list {
  margin: 50px 0 0;
}

.main-tenth .main-tenth-list ul {
  display: flex;
  flex-wrap: wrap;
}

.main-tenth .main-tenth-list ul li {
  flex: 1;
  min-width: 0;
  margin-right: 24px;
  border-radius: 20px;
  background: rgba(107, 174, 255, 0.8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.main-tenth .main-tenth-list ul li:first-of-type {
  flex: none;
  width: 100%;
  margin-right: 0;
  margin-bottom: 24px;
}

.main-tenth .main-tenth-list ul li:last-of-type {
  margin-right: 0;
}

.main-tenth .main-tenth-list ul li .list-image {
  width: 786px;
  order: 2;
}

.main-tenth .main-tenth-list ul li .list-image img {
  width: 100%;
}

.main-tenth .main-tenth-list ul li .list-content {
  min-width: 0;
  padding: 34px;
  order: 1;
}

.main-tenth .main-tenth-list ul li .list-content strong {
  display: block;
  font-size: 30px;
  font-weight: 600;
  margin: 0 0 8px;
}

.main-tenth .main-tenth-list ul li .list-content p {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
}

.main-tenth .main-tenth-list ul li:first-of-type .list-image {
  order: 1;
}

.main-tenth .main-tenth-list ul li:first-of-type .list-content {
  padding: 0;
  order: 2;
}

.main-tenth .main-tenth-text {
  margin: 50px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.main-tenth .main-tenth-text>div {
  border-left: 4px solid rgba(107, 174, 255, 0.8);
  padding: 20px 80px;
}

.main-tenth .main-tenth-text>div p {
  font-size: 24px;
  line-height: 1.4;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
}

.main-tenth .main-tenth-text>div small {
  display: block;
  margin: 12px 0 0;
  font-size: 20px;
  color: #666;
}

@media (max-width: 1200px) {
  .main-tenth .main-tenth-list ul li .list-image {
    width: 650px;
  }
}

@media (max-width: 1100px) {
  .main-tenth .main-tenth-list ul li .list-image {
    width: 550px;
  }
}

@media (max-width: 991px) {
  .main-tenth {
    padding: 50px 0;
  }

  .main-tenth .main-tenth-list {
    margin: 30px 0 0;
  }

  .main-tenth .main-tenth-list ul li {
    border-radius: 10px;
    width: 100%;
    flex: none;
    margin-right: 0;
  }

  .main-tenth .main-tenth-list ul li:last-of-type {
    margin-top: 24px;
  }

  .main-tenth .main-tenth-list ul li .list-image {
    width: 100%;
    order: 2;
  }

  .main-tenth .main-tenth-list ul li .list-content {
    flex: none;
    width: 100%;
    padding: 40px 25px 10px;
  }

  .main-tenth .main-tenth-list ul li .list-content strong {
    font-size: 20px;
  }

  .main-tenth .main-tenth-list ul li .list-content p {
    font-size: 16px;
  }

  .main-tenth .main-tenth-list ul li:first-of-type .list-image {
    order: 2;
  }

  .main-tenth .main-tenth-list ul li:first-of-type .list-content {
    order: 1;
    padding: 40px 25px 10px;
  }

  .main-tenth .main-tenth-text {
    margin: 30px 0 0;
  }

  .main-tenth .main-tenth-text>div {
    border-left-width: 3px;
    padding: 0 20px;
  }

  .main-tenth .main-tenth-text>div p {
    font-size: 18px;
  }

  .main-tenth .main-tenth-text>div small {
    margin: 10px 0 0;
    font-size: 16px;
  }
}

/* 열한번째 영역 */

.main-eleventh {
  padding: 100px 0;
}

.main-eleventh .main-eleventh-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.main-eleventh .main-eleventh-top .top-content {
  flex: 1;
  min-width: 0;
  padding-right: 24px;
}

.main-eleventh .main-eleventh-top .top-content h2 {
  text-align: left;
}

.main-eleventh .main-eleventh-top .top-content p {
  margin: 20px 0 0;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
  color: #878e98;
}

.main-eleventh .main-eleventh-top .top-image {
  width: 560px;
}

.main-eleventh .main-eleventh-top .top-image img {
  width: 100%;
}

.main-eleventh .main-eleventh-bottom {
  margin: 50px 0 0;
  display: flex;
  flex-wrap: wrap;
}

.main-eleventh .main-eleventh-bottom img:last-of-type {
  width: 400px;
  margin-left: 24px;
}

.main-eleventh .main-eleventh-bottom img:first-of-type {
  flex: 1;
  min-width: 0;
}

@media (max-width: 1100px) {
  .main-eleventh .main-eleventh-bottom img:last-of-type {
    width: 350px;
  }
}

@media (max-width: 991px) {
  .main-eleventh {
    padding: 50px 0;
  }

  .main-eleventh .main-eleventh-top .top-content {
    flex: none;
    width: 100%;
    padding-right: 0;
  }

  .main-eleventh .main-eleventh-top .top-content p {
    margin: 10px 0 0;
    font-size: 16px;
  }

  .main-eleventh .main-eleventh-top .top-image {
    width: 100%;
    margin: 20px 0 0;
  }

  .main-eleventh .main-eleventh-bottom {
    margin: 20px 0 0;
  }

  .main-eleventh .main-eleventh-bottom img {
    width: 100%;
    flex: none;
    margin-left: 0;
  }

  .main-eleventh .main-eleventh-bottom img:first-of-type {
    flex: none;
  }

  .main-eleventh .main-eleventh-bottom img:last-of-type {
    width: 100%;
    margin: 20px 0 0;
  }
}

/* 열두번째 영역 */

.main-twelfth {
  padding: 100px 0;
  background: #fafaf9;
}

.main-twelfth .main-twelfth-list {
  margin: 50px 0 0;
}

.main-twelfth .main-twelfth-list ul {
  display: flex;
  flex-wrap: wrap;
}

.main-twelfth .main-twelfth-list ul li {
  flex: 1;
  min-width: 0;
  margin-right: 24px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.05);
}

.main-twelfth .main-twelfth-list ul li:last-of-type {
  margin: 0;
}

.main-twelfth .main-twelfth-list ul li .list-image {
  background-size: cover;
  background-position: center;
}

.main-twelfth .main-twelfth-list ul li .list-image:after {
  display: block;
  content: "";
  padding-bottom: 56.5%;
}

.main-twelfth .main-twelfth-list ul li .list-content {
  padding: 20px 24px;
}

.main-twelfth .main-twelfth-list ul li .list-content p {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.main-twelfth .main-twelfth-list ul li .list-content small {
  display: block;
  font-size: 16px;
  color: #878e98;
  margin: 10px 0 0;
}

.main-twelfth .main-twelfth-more {
  margin: 50px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.main-twelfth .main-twelfth-more a {
  height: 56px;
  padding: 0 40px;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background: linear-gradient(to right, #22b2fd, #2e93fd, #3b74fd);
}

.main-twelfth .main-twelfth-more a:after {
  display: inline-block;
  content: "";
  margin-left: 4px;
  width: 24px;
  height: 24px;
  background: url("../images/icon_more_white.png") no-repeat center / cover;
}

@media (max-width: 991px) {
  .main-twelfth {
    padding: 50px 0;
  }

  .main-twelfth .main-twelfth-list {
    margin: 30px 0 0;
  }

  .main-twelfth .main-twelfth-list ul li {
    border-radius: 10px;
    width: 100%;
    flex: none;
    margin-right: 0;
    border-radius: 10px;
    margin-bottom: 20px;
  }

  .main-twelfth .main-twelfth-list ul li:last-of-type {
    margin-bottom: 0;
  }

  .main-twelfth .main-twelfth-list ul li .list-content {
    padding: 15px;
  }

  .main-twelfth .main-twelfth-list ul li .list-content p {
    font-size: 16px;
  }

  .main-twelfth .main-twelfth-list ul li .list-content small {
    font-size: 14px;
  }

  .main-twelfth .main-twelfth-more {
    margin: 30px 0 0;
  }

  .main-twelfth .main-twelfth-more a {
    height: 50px;
    padding: 0 30px;
    font-size: 18px;
  }

  .main-twelfth .main-twelfth-more a:after {
    width: 20px;
    height: 20px;
  }
}

/* 열세번째 영역 */

.main-thirteenth {
  padding: 100px 0;
}

.main-thirteenth .main-thirteenth-list {
  margin: 50px 0 0;
}

.main-thirteenth .main-thirteenth-list ul {
  display: flex;
  flex-wrap: wrap;
}

.main-thirteenth .main-thirteenth-list ul li {
  flex: 1;
  min-width: 0;
  margin-right: 24px;
  padding: 40px 34px;
  border: 1px solid #878e98;
  border-radius: 20px;
}

.main-thirteenth .main-thirteenth-list ul li:last-of-type {
  margin: 0;
}

.main-thirteenth .main-thirteenth-list ul li h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: 30px;
  font-weight: 600;
}

.main-thirteenth .main-thirteenth-list ul li h3:before {
  display: inline-block;
  content: "";
  width: 40px;
  height: 40px;
  background-size: cover;
  background-position: center;
  margin-right: 10px;
}

.main-thirteenth .main-thirteenth-list ul li:first-of-type h3:before {
  background-image: url("../images/icon_main_thirteenth_01.png");
}

.main-thirteenth .main-thirteenth-list ul li:last-of-type h3:before {
  background-image: url("../images/icon_main_thirteenth_02.png");
}

.main-thirteenth .main-thirteenth-list ul li p {
  margin: 10px 0 0;
  font-size: 18px;
  line-height: 1.4;
  color: #333;
}

.main-thirteenth .main-thirteenth-list ul li div {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin: 40px 0 0;
}

.main-thirteenth .main-thirteenth-list ul li div img {
  width: 100px;
  margin-right: 20px;
}

.main-thirteenth .main-thirteenth-list ul li div small {
  font-size: 13px;
  line-height: 1.3;
  color: #999;
}

@media (max-width: 991px) {
  .main-thirteenth {
    padding: 50px 0;
  }

  .main-thirteenth .main-thirteenth-list {
    margin: 30px 0 0;
  }

  .main-thirteenth .main-thirteenth-list ul li {
    flex: none;
    width: 100%;
    border-radius: 10px;
    padding: 30px 20px;
    margin-right: 0;
    margin-bottom: 20px;
  }

  .main-thirteenth .main-thirteenth-list ul li:last-of-type {
    margin-bottom: 0;
  }

  .main-thirteenth .main-thirteenth-list ul li h3 {
    font-size: 18px;
  }

  .main-thirteenth .main-thirteenth-list ul li h3:before {
    width: 24px;
    height: 24px;
    margin-right: 5px;
  }

  .main-thirteenth .main-thirteenth-list ul li p {
    font-size: 16px;
  }

  .main-thirteenth .main-thirteenth-list ul li div img {
    width: 70px;
  }

  .main-thirteenth .main-thirteenth-list ul li div small {
    width: 100%;
    margin: 15px 0 0;
  }
}

/* 열네번째 영역 */

.main-fourteenth {
  padding: 100px 0;
  background: url("../images/bg_main_fourteenth.png") no-repeat center / cover;
}

.main-fourteenth h2 {
  color: #fff;
}

.main-fourteenth .main-fourteenth-list {
  margin: 50px 0 0;
}

.main-fourteenth .main-fourteenth-list ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.main-fourteenth .main-fourteenth-list ul li {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-right: 24px;
}

.main-fourteenth .main-fourteenth-list ul li:last-of-type {
  margin: 0;
}

.main-fourteenth .main-fourteenth-list ul li:before {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  margin-right: 5px;
  background: url("../images/icon_check_white.png") no-repeat center / cover;
}

.main-fourteenth .main-fourteenth-more {
  margin: 50px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.main-fourteenth .main-fourteenth-more a {
  height: 56px;
  padding: 0 40px;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 50px;
  background: linear-gradient(to right, #22b2fd, #2e93fd, #3b74fd);
}

.main-fourteenth .main-fourteenth-more a:after {
  display: inline-block;
  content: "";
  margin-left: 4px;
  width: 24px;
  height: 24px;
  background: url("../images/icon_more_white.png") no-repeat center / cover;
}

@media (max-width: 991px) {
  .main-fourteenth {
    padding: 50px 0;
  }

  .main-fourteenth .main-fourteenth-list {
    margin: 30px 0 0;
  }

  .main-fourteenth .main-fourteenth-list ul li {
    justify-content: center;
    margin-right: 0;
    width: 100%;
    margin-bottom: 15px;
    font-size: 18px;
  }

  .main-fourteenth .main-fourteenth-list ul li:before {
    width: 20px;
    height: 20px;
  }

  .main-fourteenth .main-fourteenth-more {
    margin: 30px 0 0;
  }

  .main-fourteenth .main-fourteenth-more a {
    height: 50px;
    padding: 0 30px;
    font-size: 18px;
  }

  .main-fourteenth .main-fourteenth-more a:after {
    width: 20px;
    height: 20px;
  }
}