@charset "UTF-8";
@import "./font.css";
@import "./animation.css";

* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  font-family: "Noto Sans KR", sans-serif;
  color: #333;
  font-weight: 400;
  background: #1E1E1E;
  margin: 0 auto;
  height: calc(var(--vh, 1vh) * 100);
}

.wrap {
  position: relative;
  overflow: hidden;
}

.how_slide_blind {
  opacity: 0;
}

.top_logo {
  position: fixed;
  top: 5.555%;
  left: 3.17%;
  z-index: 9990;
}

.menu_top_logo {
  position: absolute;
  top: 5.555%;
  left: 3.17%;
  z-index: 9990;
}

.copyright {
  position: fixed;
  bottom: 5.555vh;
  left: 3.17%;
  z-index: 999;
  font-family: 'Exo 2', sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  color: #fff;
}

.right_txt {
  font-family: 'Exo 2', sans-serif;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  position: absolute;
  top: calc(50vh - 92px);
  right: 6rem;
  z-index: 99;
}

.go_top {
  position: fixed;
  bottom: 5.555%;
  right: 3.17%;
  z-index: 999;
}

.fp-viewing-0 .go_top {
  display: none;
}

.btn_menu {
  position: fixed;
  top: 5.555%;
  right: 3.17%;
  z-index: 999;
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  padding: 5px 4px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  cursor: pointer;
}

.btn_menu em {
  position: absolute;
  top: -8px;
  left: -10px;
  display: block;
  width: 14px;
  height: 14px;
  background: #CB8BDA;
  border: 1px solid #BD6CCF;
  border-radius: 50%;
  -webkit-animation: alertBounce 2s ease infinite;
          animation: alertBounce 2s ease infinite;
}


.btn_menu .menu_line {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  -webkit-transform-origin: left top;
          transform-origin: left top;
}

.btn_menu .line1 {
  -webkit-animation: menu-line1 1.3s linear infinite;
          animation: menu-line1 1.3s linear infinite;
}

.btn_menu .line2 {
  -webkit-animation: menu-line2 1.3s linear infinite;
          animation: menu-line2 1.3s linear infinite;
}

.btn_menu .line3 {
  -webkit-animation: menu-line3 1.3s linear infinite;
          animation: menu-line3 1.3s linear infinite;
}

.bk .copyright, .bk .right_txt, .bk .page_name_fixed, .bk .section7 .link_facebook, .section7 .bk .link_facebook {
  color: #282828;
}

.bk .btn_menu {
  border-color: #282828;
}

.bk .menu_line, .bk .section .page_name::after,
.bk .page_name_fixed span::after,
.bk .section7 .link_facebook span::after,
.section7 .bk .link_facebook span::after {
  background: #282828;
}

.menu_layer {
  width: 100%;
  height: 100%;
  background: #fff;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9999;
  -webkit-transition: all ease 1s;
  transition: all ease 1s;
  -webkit-transform: translate(100%, 0);
          transform: translate(100%, 0);
  -ms-touch-action: pan-x;
      touch-action: pan-x;
}

.menu_layer .menu_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
  padding: 6rem;
}

.menu_layer .menu_top_logo, .menu_layer .page_name, .menu_layer .copyright, .menu_layer .right_txt {
  color: #282828;
  font-weight: 700;
  position: absolute;
}

.menu_layer .copyright {
  font-weight: 600;
}

.menu_layer .btn_menu_close {
  position: absolute;
  top: 5.555%;
  right: 3.17%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: all ease .5s;
  transition: all ease .5s;
  cursor: pointer;
}

.menu_layer .btn_menu_close.rotate {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.menu_layer .btn_menu_close:hover {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

.menu_layer .gnb li {
  margin: 3rem 0;
}

.menu_layer .gnb li.menu_recruit a {
  position: relative;
}

.menu_layer .gnb li.menu_recruit em {
  position: absolute;
  top: 10%;
  right: -15px;
  display: block;
  width: 30px;
  height: 30px;
  background: #CB8BDA;
  border: 1px solid #BD6CCF;
  border-radius: 50%;
  -webkit-animation: alertBounce 2s ease infinite;
          animation: alertBounce 2s ease infinite;
  -webkit-box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1);
          box-shadow: 4px 4px 6px rgba(0, 0, 0, 0.1);
}

.menu_layer .gnb a {
  display: inline-block;
  font-family: 'Exo 2', sans-serif;
  font-weight: 600;
  font-size: 15rem;
  color: #282828;
  -webkit-transition: all ease 0.7s;
  transition: all ease 0.7s;
  position: relative;
  left: 0;
}

.menu_layer .gnb a:hover {
  left: 2rem;
}


/* 십자모양들 좌상단이 1번 우하단이 8번으로 설정하고
 각페이지마다 display:none으로 표시가림 */
.plus {
  opacity: 0.4;
  z-index: 99999;
}

.plus1 {
  position: absolute;
  top: 26.851%;
  left: 2.604%;
}

.plus2 {
  position: absolute;
  top: 26.851%;
  left: 26.09375%;
}

.plus3 {
  position: absolute;
  top: 26.851%;
  left: 49.53125%;
}

.plus4 {
  position: absolute;
  top: 26.851%;
  left: 72.99875%;
}

.plus5 {
  display: none;
  position: absolute;
  bottom: 4.629%;
  left: 2.604%;
}

.plus6 {
  position: absolute;
  bottom: 4.629%;
  left: 26.09375%;
}

.plus7 {
  position: absolute;
  bottom: 4.629%;
  left: 49.53125%;
}

.plus8 {
  position: absolute;
  bottom: 4.629%;
  left: 72.99875%;
}

/* //십자모양들 */
#fullpage {
  width: 100%;
  height: 100%;
}

.fp-tableCell {
  display: block;
  position: relative;
}

.page_name {
  /* 왼쪽아래 페이지이름  */
  font-family: 'Exo 2', sans-serif;
  font-size: 2rem;
  text-decoration: underline;
  position: absolute;
  bottom: 8.333%;
  left: 3.17%;
  z-index: 9999;
  font-weight: 700;
}

.page_name_fixed, .section7 .link_facebook {
  /* 왼쪽아래 페이지이름  */
  font-family: 'Exo 2', sans-serif;
  font-size: 2rem;
  color: #fff;
  text-decoration: underline;
  position: fixed;
  bottom: 8.333%;
  left: 3.17%;
  z-index: 9999;
  font-weight: 700;
}

.page_name_fixed span, .section7 .link_facebook span {
  position: relative;
}

.page_name_fixed span::after, .section7 .link_facebook span::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  -webkit-transform-origin: left center;
          transform-origin: left center;
}

.page_name_fixed.active span::after, .section7 .active.link_facebook span::after {
  -webkit-transition: all ease .7s;
  transition: all ease .7s;
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.section {
  overflow: hidden;
  width: 100%;
  height: 100%;
  position: relative;
}

/* section1 - 메인 */
.section1 {
  background: #1E1E1E;
}

.section1 .section_inner {
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background: url("../img/bg_stars.png") repeat-y center;
  background-size: cover;
  -webkit-animation: bg-star 0.7s ease-in;
          animation: bg-star 0.7s ease-in;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 0;
          animation-delay: 0;
  position: relative;
}

.section1 .downloads {
  /* 오른쪽아래 다운로드 숫자 */
  font-family: 'Exo 2', sans-serif;
  color: #fff;
  position: absolute;
  bottom: 5.555%;
  right: 3.17%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

.section1 .downloads_txt {
  font-size: 1.2rem;
  letter-spacing: 0.2rem;
  text-align: right;
}

.section1 .downloads .counting {
  font-size: 5.9rem;
  font-weight: 700;
  padding-left: 6rem;
  padding-bottom: 1rem;
  position: relative;
}

.section1 .downloads .counting .count_num {
  font-size: 8rem;
  letter-spacing: 0rem;
}

.section1 .downloads .counting small {
  margin-left: 1rem;
}

.section1 .logo {
  /* 메인 정가운데 로고 */
  width: 56.6rem;
  margin: 0 auto;
}

.section1 .logo img {
  width: 100%;
}

.section1 .logo_txt {
  font-family: 'Exo 2', sans-serif;
  color: #fff;
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-align: center;
  margin-top: 4.629vh;
  /* //logo_txt */
}

.section1 .logo_txt span {
  position: relative;
}

.section1 .logo_txt span::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: center;
          transform-origin: center;
}

.section1.fp-completely .logo_txt span::after {
  -webkit-animation: block-disapper 0.5s ease;
          animation: block-disapper 0.5s ease;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}


/* //section1 */
/* section2 */
.section2 {
  width: 100%;
  height: 100%;
  background: #1E1E1E;
  position: relative;
}

.section2 .section_inner {
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
}

.section2 .para_txt {
  position: absolute;
  top: 43.611%;
  left: 3.17%;
  z-index: 9;
  font-size: 2rem;
  font-weight: 100;
  line-height: 3.4rem;
  color: #fff;
  -webkit-transition: all ease .7s;
  transition: all ease .7s;
}

.section2 .para_txt hr {
  border-color: transparent;
  margin: 1.5rem 0;
}

.section2 .para_txt span {
  position: relative;
}

.section2 .para_txt span::after {
  content: '';
  display: block;
  width: 100%;
  height: 90%;
  background: #fff;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transition: all ease .7s;
  transition: all ease .7s;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

.section2 .pattern_box {
  position: absolute;
  top: 27.777%;
  right: 6.979%;
  width: 43.02%;
  height: 58.333%;
  background-size: cover;
}

.section2 .pattern_box p {
  position: relative;
  width: 101%;
  height: 16.666%;
}

.section2 .pattern_box p:nth-child(1) {
  background: url("../img/dot_pattern01.png") no-repeat left;
  background-size: auto 100%;
}

.section2 .pattern_box p:nth-child(2) {
  background: url("../img/dot_pattern02.png") no-repeat left;
  background-size: auto 100%;
}

.section2 .pattern_box p:nth-child(3) {
  background: url("../img/dot_pattern03.png") no-repeat left;
  background-size: auto 100%;
}

.section2 .pattern_box p:nth-child(4) {
  background: url("../img/dot_pattern04.png") no-repeat left;
  background-size: auto 100%;
}

.section2 .pattern_box p:nth-child(5) {
  background: url("../img/dot_pattern05.png") no-repeat left;
  background-size: auto 100%;
}

.section2 .pattern_box p:nth-child(6) {
  background: url("../img/dot_pattern06.png") no-repeat left;
  background-size: auto 100%;
}

.section2 .pattern_box span {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background: #1E1E1E;
  -webkit-transition: all ease .7s;
  transition: all ease .7s;
}

.section2 .pattern_box p:nth-child(2n) span {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}

.section2 .pattern_box p:nth-child(2n-1) span {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}

.section2.fp-completely .para_txt {
  -webkit-transition-delay: .7s;
          transition-delay: .7s;
  top: 34.444%;
}

.section2.fp-completely .para_txt span::after {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.section2.fp-completely .pattern_box span {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

/* //section2 - reign */
@media screen and (min-width: 850px) and (max-height: 840px) {
  .section2 .para_txt {
    font-size: 18px;
    line-height: 3.2rem;
  }
  .section2 .para_txt hr {
    margin: 0.5rem 0;
  }
}

/* section3 - who */
.section3 {
  background: #3BD4AE;
  position: relative;
}

.section3 .mission {
  font-family: 'Exo 2', sans-serif;
  font-size: 5.6rem;
  font-weight: 700;
  position: absolute;
  top: 36.111%;
  left: 3.125%;
  -webkit-transition: all ease .7s;
  transition: all ease .7s;
}

.section3 .para_txt {
  position: absolute;
  top: 56.296%;
  left: 3.125%;
  z-index: 9;
  font-size: 2.2rem;
  font-weight: 100;
  line-height: 3.6rem;
  letter-spacing: 0.05rem;
  color: #282828;
  -webkit-transition: all ease .7s;
  transition: all ease .7s;
}

.section3 .para_txt hr {
  border-color: transparent;
  margin: 1.5rem 0;
}

.section3 .para_txt span {
  position: relative;
}

.section3 .para_txt span::after {
  content: '';
  display: block;
  width: 100%;
  height: 90%;
  background: #282828;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transition: all ease .7s;
  transition: all ease .7s;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

.section3 .step_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  height: 79.814%;
  padding-left: 1.25vw;
  position: absolute;
  top: 14.537%;
  right: 10.416%;
  z-index: 9;
  border-left: 1px solid #282828;
  font-family: 'Exo 2', sans-serif;
}

.section3 .step_container::before, .section3 .step_container::after {
  content: '';
  width: 3px;
  height: 3px;
  background: #282828;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: -2px;
}

.section3 .step_container::after {
  top: auto;
  bottom: 0;
}

.section3 .step_container .step_num {
  font-size: 1.4rem;
  font-weight: 600;
}

.section3 .step_container .step_name {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  position: relative;
  margin-top: 0.4rem;
}

.section3 .step_container .step_name::after {
  content: '';
  width: 100%;
  height: 100%;
  background: #282828;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: left top;
          transform-origin: left top;
  -webkit-transition: all ease .7s;
  transition: all ease .7s;
}

.section3 .planet_container {
  position: absolute;
  top: 16.018%;
  right: 20.291%;
}

.section3 .planet_inner {
  position: relative;
}

.section3 .planet_bg {
  height: 75.833vh;
}

.section3 .planet_bg svg {
  height: 100%;
}

.section3 #planet6 {
  opacity: 0;
  -webkit-animation: planetHide 0.1s linear 2.6s forwards;
          animation: planetHide 0.1s linear 2.6s forwards;
}

.section3 #planet7 {
  opacity: 0;
  -webkit-animation: planetHide 0.1s linear 5.6s forwards;
          animation: planetHide 0.1s linear 5.6s forwards;
}


.section3.fp-completely .mission {
  top: 31.574%;
  -webkit-transition-delay: .7s;
          transition-delay: .7s;
  z-index: 9;
}

.section3.fp-completely .para_txt {
  -webkit-transition-delay: .7s;
          transition-delay: .7s;
  top: 47.037%;
  z-index: 9;
}

.section3.fp-completely .para_txt span::after {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.section3.fp-completely .step_name::after {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.section3 .plus3, .section3 .plus4, .section3 .plus5, .section3 .plus7, .section3 .plus8 {
  display: none;
}

/* //section3 - who */
/* section4 - history */
.section4 {
  background: #fff;
  overflow: hidden;
}

.section4_bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
}

.section4_bg .circle {
  display: block;
  border-radius: 50%;
  -webkit-transform-origin: center;
          transform-origin: center;
  position: absolute;
  z-index: -1;
}

.section4_bg .circle.circle1 {
  width: 18.5rem;
  height: 18.5rem;
  background: #5FD0DF;
  left: 2.604vw;
  top: -7.037vh;
  -webkit-animation: circleAni 4s linear infinite;
          animation: circleAni 4s linear infinite;
}

.section4_bg .circle.circle2 {
  width: 38.4rem;
  height: 38.4rem;
  background: #74E0C1;
  left: 12.317vw;
  top: 28.75vh;
  -webkit-animation: circleAni2 4s ease-in-out infinite;
          animation: circleAni2 4s ease-in-out infinite;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.section4_bg .circle.circle3 {
  width: 59.7rem;
  height: 59.7rem;
  background: #F4436C;
  right: -8.802vw;
  bottom: -29.444vh;
  -webkit-animation: circleAni3 6s ease-in-out infinite;
          animation: circleAni3 6s ease-in-out infinite;
}

.section4_inner {
  height: calc(var(--vh, 1vh) * 100);
  padding-top: 35.555vh;
}

.section4 .history_num {
  font-family: 'Exo 2', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 5rem;
}

.section4 .history_slide_container {
  width: 93.75vw;
  margin: 0 auto;
}

.section4 .history_slide_container .swiper-container {
  overflow: visible;
}

.section4 .history_slide_container .swiper-slide {
  width: 46.875vw !important;
}

.section4 .history_slide_container .swiper-button-next::after, .section4 .history_slide_container .swiper-button-prev::after {
  display: none;
}

.section4 .history_slide_container .swiper-button-prev {
  width: 24px;
  height: 24px;
  top: 21.018vh;
  left: auto;
  right: 5.572vw;
  outline: none;
}

.section4 .history_slide_container .swiper-button-next {
  width: 24px;
  height: 24px;
  top: 21.018vh;
  left: auto;
  right: 3.125vw;
  outline: none;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.section4 .history_slide_container .swiper-button-prev.swiper-button-disabled, .section4 .history_slide_container .swiper-button-next.swiper-button-disabled {
  opacity: 1;
}

.section4 .para_txt {
  font-size: 4.4rem;
  font-weight: 400;
}

.section4 .para_txt p {
  margin-bottom: 2.4rem;
}

.section4 .para_txt strong {
  font-weight: 600;
}

.section4 .para_txt span {
  position: relative;
}

.section4 .para_txt span::after {
  content: '';
  display: block;
  width: 100%;
  height: 90%;
  background: #282828;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transition: all ease .7s;
  transition: all ease .7s;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

.section4.fp-completely .para_txt {
  -webkit-transition-delay: .7s;
          transition-delay: .7s;
  top: 47.037%;
}

.section4.fp-completely .para_txt span::after {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.section4.fp-completely .step_name::after {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}


/* //section4 - history */
/* section5 - service */
.section5 {
  background: #D0C3FB;
}

.section5 .guide_line {
  position: absolute;
  overflow: hidden;
}

.section5 .guide_line1 {
  bottom: 0;
  left: 26.09375vw;
}

.section5 .guide_line2 {
  bottom: 0;
  left: 49.53125vw;
}

.section5 .guide_line3 {
  bottom: 0;
  left: 72.96875vw;
}

.section5 .plus1, .section5 .plus2, .section5 .plus3, .section5 .plus4 {
  display: none;
}

.section5 .line_container {
  opacity: 0.2;
}

.section5 .line_container .line1 {
  position: absolute;
  left: 2.604%;
  top: 0;
  z-index: 9999;
}

.section5 .line_container .line2 {
  position: absolute;
  left: 26.09375%;
  top: 0;
  z-index: 9999;
}

.section5 .line_container .line3 {
  position: absolute;
  left: 49.53125%;
  top: 0;
  z-index: 9999;
}

.section5 .line_container .line4 {
  position: absolute;
  left: 72.99875%;
  top: 0;
  z-index: 9999;
}

.section5 .service_container {
  padding-left: 4vw;
  padding-top: 26.851vh;
}

.section5 .service_container ul {
  width: 88.541vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.section5 .service {
  width: 20.588%;
  height: 22.5vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  position: relative;
}

.section5 .service:last-child .service_info {
  opacity: 0.8;
}

.section5 .service:nth-child(n+5) {
  margin-top: 9.629vh;
}

.section5 .service_info {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.section5 .service_name {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.2rem;
  color: #282828;
}

.section5 .service_name small {
  display: block;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
}

.section5 .service .service_txt {
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 0.1rem;
  color: #282828;
  text-align: right;
}

.section5 .service .service_txt span::after {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}

.section5 .service_char {
  width: 36%;
  position: absolute;
  left: 0;
}

.section5 .service_char svg {
  width: 100%;
  height: auto;
}

.section5 .service_char img {
  width: 100%;
}

.section5 .service_char .char_inner {
  position: relative;
}

.section5 .service_char .char_blind {
  -webkit-transition: all ease .7s;
  transition: all ease .7s;
}

.section5 .service_char.char1 {
  bottom: 15%;
}

.section5 .service_char.char1 .char_inner {
  -webkit-animation: charBody 2s ease infinite;
          animation: charBody 2s ease infinite;
}

.section5 .service_char.char1 #f {
  -webkit-animation: charFace 2s linear infinite;
          animation: charFace 2s linear infinite;
}

.section5 .service_char.char2 {
  bottom: 15%;
}

.section5 .service_char.char2 .char_inner {
  -webkit-animation: charBody2 2s ease infinite;
          animation: charBody2 2s ease infinite;
}

.section5 .service_char.char2 #rotate {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: charRotate 2s linear infinite;
          animation: charRotate 2s linear infinite;
}

.section5 .service_char.char3 {
  bottom: 15%;
  width: 32%;
}

.section5 .service_char.char3 .char_inner {
  -webkit-animation: charBody 2s ease infinite;
          animation: charBody 2s ease infinite;
}

.section5 .service_char.char3 #f {
  -webkit-animation: charFace2 2s linear infinite;
          animation: charFace2 2s linear infinite;
}

.section5 .service_char.char4 {
  bottom: 15%;
  width: 32%;
}

.section5 .service_char.char4 .char_inner {
  -webkit-animation: charBody2 2s ease infinite;
          animation: charBody2 2s ease infinite;
}

.section5 .service_char.char4 #f {
  -webkit-animation: charFace3 2s linear infinite;
          animation: charFace3 2s linear infinite;
}

.section5 .service_char.char5 {
  bottom: 15%;
}

.section5 .service_char.char5 .char_inner {
  -webkit-animation: charBody2 2s ease infinite;
          animation: charBody2 2s ease infinite;
}

.section5 .service_char.char5 #f {
  -webkit-animation: charFace2 2s linear infinite;
          animation: charFace2 2s linear infinite;
}

.section5 .service_char.char6 {
  bottom: 12%;
  width: 38%;
}

.section5 .service_char.char6 .char_inner {
  -webkit-animation: charBody 2s ease infinite;
          animation: charBody 2s ease infinite;
}

.section5 .service_char.char6 #rotate2 {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: charRotate 2s linear infinite;
          animation: charRotate 2s linear infinite;
}

.section5 .service_char.char7 {
  bottom: 12%;
  width: 40%;
}

.section5 .service_char.char7 .char_inner {
  -webkit-animation: charBody2 2s ease infinite;
          animation: charBody2 2s ease infinite;
}

.section5 .service_char.char7 #m {
  -webkit-animation: charMouse 2s linear infinite;
          animation: charMouse 2s linear infinite;
}

.section5 .service_char.loading {
  bottom: 2rem;
}

.section5 .service_char.loading #loading {
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-animation: charRotate2 4s linear infinite;
          animation: charRotate2 4s linear infinite;
}

.section5 .service_num {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: auto;
}

.section5 .service_num .para_txt {
  width: 64.444%;
  text-align: right;
  border-bottom: 1px solid rgba(40, 40, 40, 0.5);
  margin-left: auto;
  position: relative;
}

.section5 .service_num .para_txt::after {
  content: '';
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #282828;
  position: absolute;
  bottom: -2px;
  left: -1.5px;
}

.section5 .service_num .para_txt span {
  font-size: 1.3rem;
  margin-bottom: 4px;
}

.section5 .service_num .para_txt span::after {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}

.section5 .para_txt {
  margin-bottom: 3px;
  line-height: 1;
}

.section5 .para_txt span {
  display: inline-block;
  position: relative;
}

.section5 .para_txt span::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: #282828;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: left center;
          transform-origin: left center;
  -webkit-transition: all ease .7s;
  transition: all ease .7s;
  -webkit-transform: scaleX(1);
          transform: scaleX(1);
}

.section5.fp-completely .para_txt {
  -webkit-transition-delay: .7s;
          transition-delay: .7s;
}

.section5.fp-completely .para_txt span::after {
  -webkit-transform: scaleX(0);
          transform: scaleX(0);
}

.section5.fp-completely .char_blind {
  opacity: 0;
}

/* //section5 - service */
/* section6 - how we are */
.section6 {
  background: #fff;
  overflow: hidden;
}

.section6_inner {
  min-height: 100%;
  height: calc(var(--vh, 1vh) * 100);
  padding-bottom: 5.8vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.section6 .how_slide_container {
  margin-top: auto;
}

.section6 .swiper-container {
  width: 93.75vw;
  height: 100%;
  margin: 0 auto;
  overflow: visible;
}

.section6 .swiper-wrapper {
  margin-left: 3.17vw;
}

.section6 .swiper-slide {
  width: 23.475vw;
  height: 66.1vh;
}

.section6 .slide_content {
  position: relative;
  width: 100%;
  height: 100%;
  -webkit-transition: all ease 0.7s;
  transition: all ease 0.7s;
}

.section6 .swiper-button-next::after, .section6 .swiper-button-prev::after {
  display: none;
}

.section6 .swiper-button-prev {
  width: 24px;
  height: 24px;
  top: 21.018vh;
  left: auto;
  right: 5.572vw;
  outline: none;
}

.section6 .swiper-button-next {
  width: 24px;
  height: 24px;
  top: 21.018vh;
  left: auto;
  right: 3.125vw;
  outline: none;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}

.section6 .swiper-button-prev.swiper-button-disabled, .section6 .swiper-button-next.swiper-button-disabled {
  opacity: 1;
}

.section6 .how_num {
  font-family: 'Exo 2', sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.2rem;
  padding-top: 3.703vh;
}

.section6 .how_pic {
  width: 81%;
  height: 0;
  padding-top: 36.277%;
  overflow: hidden;
  position: absolute;
  top: 7vh;
  left: 0;
  z-index: 9;
  -webkit-transition: all ease 0.7s;
  transition: all ease 0.7s;
  cursor: pointer;
}

/* how we are 슬라이드 이미지 */
.section6 .how_pic1 {
  background: url("../img/how01.png") no-repeat center;
  background-size: cover;
}

.section6 .how_pic2 {
  background: url("../img/how02.png") no-repeat center;
  background-size: cover;
}

.section6 .how_pic3 {
  background: url("../img/how03.png") no-repeat center;
  background-size: cover;
}

.section6 .how_pic4 {
  background: url("../img/how04.png") no-repeat center;
  background-size: cover;
}

.section6 .how_pic_inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.section6 .how_pic img {
  width: 100%;
  height: initial;
  position: absolute;
  left: 50%;
  top: 0;
  -webkit-transform: translateX(-50%) scale(1);
          transform: translateX(-50%) scale(1);
  -webkit-transition: all ease 0.7s;
  transition: all ease 0.7s;
  -webkit-transform-origin: center top;
          transform-origin: center top;
}

.section6 .how_ttl, .section6 .how_ttl2 {
  font-family: 'Exo 2', sans-serif;
  font-size: 3.6rem;
  font-weight: 700;
  letter-spacing: 0rem;
  position: absolute;
  top: 40.5%;
  z-index: 10;
  -webkit-transition: all ease 0.7s;
  transition: all ease 0.7s;
}

.section6 .how_txt {
  width: 80%;
  font-size: 1.4rem;
  letter-spacing: 0.05rem;
  line-height: 2.6rem;
  position: absolute;
  top: 49.638%;
  z-index: 1;
}

.section6 .how_txt span {
  position: relative;
  display: inline-block;
}

.section6 .how_txt span::after {
  content: '';
  display: block;
  width: 100%;
  height: 90%;
  background: #282828;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform-origin: left center;
          transform-origin: left center;
}

.section6.fp-completely .how_txt span::after {
  -webkit-animation: block-disapper 0.5s ease;
          animation: block-disapper 0.5s ease;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.section6 .we .how_ttl2, .section6 .we .how_txt {
  position: static;
}

.section6 .we .how_ttl2 {
  margin: 2vh 0;
}

.section6 .we .we_ttl2 {
  margin-top: 4vh;
}

.section6 .link_ci {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 150px;
  height: 50px;
  background: #282828;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.1em;
  border-radius: 34px;
  margin-top: 3vh;
}

.section6 .line_container {
  opacity: 0.1;
}

.section6 .line_container .line1 {
  position: absolute;
  left: 2.604%;
  top: 0;
  z-index: 9999;
}

.section6 .line_container .line2 {
  position: absolute;
  left: 26.09375%;
  top: 0;
  z-index: 9999;
}

.section6 .line_container .line3 {
  position: absolute;
  left: 49.53125%;
  top: 0;
  z-index: 9999;
}

.section6 .line_container .line4 {
  position: absolute;
  left: 72.99875%;
  top: 0;
  z-index: 9999;
}

/* //section6 - how we are */
/* section6 반응형 스타일  */
@media screen and (min-width: 1025px) {
  .section6 {
    /* pc에서만 hover */
    /* //hover */
  }
  .section6 .swiper-slide.img_touch {
    z-index: 99999;
    -webkit-box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.16);
            box-shadow: 10px 10px 10px -4px rgba(0, 0, 0, 0.16);
  }
  .section6 .swiper-slide.img_touch .how_pic {
    padding-top: 100%;
  }
  .section6 .swiper-slide.img_touch img {
    -webkit-transform: translateX(-50%) scale(2);
            transform: translateX(-50%) scale(2);
  }
  .section6 .swiper-slide.img_touch .how_ttl {
    top: 80%;
  }
  .section6 .swiper-slide.img_touch .how_txt {
    -webkit-transition-delay: 0.7s;
            transition-delay: 0.7s;
  }
}

@media screen and (max-width: 1800px) and (min-width: 1350px) {
  .section6 .line_container .line2 {
    left: 33.75%;
  }
  .section6 .line_container .line3 {
    left: 65.072%;
  }
  .section6 .line_container .line4 {
    display: none;
  }
  .section6 .plus_container .plus2, .section6 .plus_container .plus6 {
    left: 33.75%;
  }
  .section6 .plus_container .plus3, .section6 .plus_container .plus7 {
    left: 65.072%;
  }
  .section6 .plus_container .plus4, .section6 .plus_container .plus8 {
    display: none;
  }
  .section6_inner {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .section6 .how_slide_container {
    margin-top: 0;
    padding-top: 14vh;
  }
  .section6 .how_pic {
    width: 400px;
    padding-top: 206px;
  }
  .section6 .how_ttl {
    top: 47.5%;
  }
  .section6 .how_txt {
    top: 55.638%;
  }
  .section6 .swiper-slide.img_touch .how_pic {
    padding-top: 100%;
  }
}

@media screen and (max-width: 1350px) {
  .section6 .line_container {
    display: none;
  }
  .section6 .plus_container .plus1 {
    top: 14.285vh;
  }
  .section6 .plus_container .plus2 {
    top: 14.285vh;
    left: auto;
    right: 3.17vw;
  }
  .section6 .plus_container .plus3, .section6 .plus_container .plus4, .section6 .plus_container .plus5, .section6 .plus_container .plus6, .section6 .plus_container .plus7, .section6 .plus_container .plus8 {
    display: none;
  }
  .section6 .swiper-button-prev, .section6 .swiper-button-next {
    display: none;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1350px) {
  .how_slide_blind {
    opacity: 1;
  }
  .section6_inner {
    padding-bottom: 10vh;
  }
  .section6 .how_pic {
    padding-top: 160px;
  }
  .section6 .swiper-slide.img_touch .how_pic {
    padding-top: 80%;
  }
}

@media screen and (min-width: 769px) and (max-width: 1025px) {
  .how_slide_blind {
    opacity: 1;
  }
  .section6_inner {
    padding-bottom: 0;
  }
  .section6 .how_slide_container {
    margin-top: 20vh;
  }
  .section6 .how_ttl {
    font-size: 3vw;
    top: 42.5%;
    position: relative;
    top: auto;
    margin: 2vh 0;
  }
  .section6 .how_txt {
    font-size: 1.5vw;
    line-height: 1.75em;
    top: calc(228px + 6vh);
  }
  .section6 .how_pic {
    width: 350px;
    padding-top: 165px;
    position: relative;
    top: auto;
    margin-top: 2vh;
  }
  .section6 .swiper-button-prev, .section6 .swiper-button-next {
    display: none;
  }
  .section6 .swiper-wrapper {
    margin-left: 4.830vw;
  }
  .section6 .swiper-container {
    width: 90.338vw;
  }
  .section6 .swiper-slide.img_touch .how_ttl {
    -webkit-animation: howTitlePosition 0.3s linear 0.1s forwards;
            animation: howTitlePosition 0.3s linear 0.1s forwards;
  }
  .section6 .swiper-slide.img_touch .how_pic {
    height: calc(100% - 12vh);
  }
}

@media screen and (min-width: 415px) and (max-width: 768px) {
  .how_slide_blind {
    opacity: 1;
  }
  .section6 .swiper-container {
    width: 90vw;
  }
  .section6 .how_num {
    font-size: 14px;
  }
  .section6 .how_ttl {
    font-size: 40px;
    position: relative;
    top: auto;
    margin: 2vh 0;
  }
  .section6 .how_ttl2 {
    font-size: 40px;
  }
  .section6 .how_txt {
    font-size: 16px;
    top: calc(250px + 6vh);
  }
  .section6 .how_pic {
    width: 80%;
    padding-top: 165px;
    position: relative;
    top: auto;
    margin-top: 2vh;
  }
  .swiper-slide.img_touch .how_ttl {
    top: auto;
    -webkit-animation: howTitlePosition 0.3s linear 0.1s forwards;
            animation: howTitlePosition 0.3s linear 0.1s forwards;
  }
  .swiper-slide.img_touch .how_pic {
    height: calc(100% - 16vh);
  }
}

@media screen and (max-width: 415px) {
  .how_slide_blind {
    opacity: 1;
  }
  .section6 .swiper-container {
    width: 90vw;
    margin-top: 15.5vh;
  }
  .section6_inner {
    padding-bottom: 10vh;
  }
  .section6 .swiper-wrapper {
    margin-left: 4.830vw;
  }
  .section6 .how_num {
    font-size: 14px;
    padding-top: 2.5vh;
  }
  .section6 .how_pic {
    position: relative;
    top: auto;
    margin-top: 2vh;
    min-width: 310px;
    min-height: 132px;
  }
  .section6 .how_ttl {
    font-size: 6.4rem;
    position: relative;
    top: auto;
    margin: 2vh 0;
  }
  .section6 .how_ttl2 {
    font-size: 6.4rem;
  }
  .section6 .how_ttl2 + .how_txt {
    width: 82%;
  }
  .section6 .how_txt {
    font-size: 12px;
    line-height: 1.75em;
    letter-spacing: 0;
    top: calc(198px + 6vh);
  }
  .swiper-slide.img_touch .how_ttl {
    -webkit-animation: howTitlePosition 0.3s linear 0.1s forwards;
            animation: howTitlePosition 0.3s linear 0.1s forwards;
  }
  .swiper-slide.img_touch .how_pic {
    height: calc(100% - 14vh);
  }
}



/* 높이값 반응 */
/* //section6 반응형 스타일  */
/* section7 - footer */
.section7 {
  background: #1E1E1E;
  color: #fff;
  position: relative;
}

.section7 .plus1, .section7 .plus2 {
  display: none;
}

.section7 .line_container {
  opacity: 0.2;
}

.section7 .line_container .line1 {
  position: absolute;
  left: 2.604%;
  top: 0;
  z-index: 9999;
}

.section7 .line_container .line2 {
  position: absolute;
  left: 26.09375%;
  top: 0;
  z-index: 9999;
}

.section7 .line_container .line3 {
  position: absolute;
  left: 49.53125%;
  top: 0;
  z-index: 9999;
}

.section7 .line_container .line4 {
  position: absolute;
  left: 72.99875%;
  top: 0;
  z-index: 9999;
}

.section7 .address {
  position: absolute;
  top: 65vh;
  left: 50vw;
  z-index: 3;
  color: #fff;
}

.section7 .contact {
  position: absolute;
  top: 65vh;
  left: 73.437vw;
  z-index: 3;
  color: #fff;
}

.section7 .ft_info_ttl {
  font-family: 'Exo 2', sans-serif;
  font-size: 1.9rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  letter-spacing: 0.3rem;
}

.section7 .ft_info_ttl a {
  font-family: 'Exo 2', sans-serif;
  font-size: 1.9rem;
  font-weight: 600;
  margin-bottom: 0.6rem;
  letter-spacing: 0.3rem;
  color: #fff;
  text-decoration: underline;
}

.section7 .ft_info_detail {
  font-size: 1.6rem;
  letter-spacing: 0.1rem;
  line-height: 1.75em;
  margin-bottom: 4rem;
  letter-spacing: 0.2rem;
  cursor: pointer;
}

.section7 .ft_info_detail:last-child {
  margin-bottom: 0;
}

.section7 .ft_info_detail .anchor_emailpop {
  text-decoration: underline;
  color: #fff;
}

.section7 .ft_info_detail span {
  position: relative;
}

.section7 .ft_info_detail span::after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  -webkit-transform-origin: left top;
          transform-origin: left top;
}

.section7 .link_facebook {
  position: absolute;
}

.section7.fp-completely .ft_info_detail span::after {
  -webkit-animation: block-disapper 0.5s ease;
          animation: block-disapper 0.5s ease;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

/* //section7 - footer */
@media screen and (max-width: 1400px) {
  .section7 .ft_info_detail {
    font-size: 1.4rem;
  }
}

/* 이메일 팝업 */
.email_poplayer {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999999999999;
  background: rgba(0, 0, 0, 0.9);
  display: none;
}

.email_poplayer .email_inner {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.email_poplayer .btn_email_popclose {
  position: absolute;
  top: 5.555%;
  right: 3.17%;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: all ease .5s;
  transition: all ease .5s;
  cursor: pointer;
}

.email_poplayer .btn_email_popclose.rotate {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

.email_poplayer .btn_email_popclose:hover {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}

.email_poplayer .email_contbox {
  width: 90%;
  max-width: 450px;
  background: #fff;
}

.email_poplayer .email_contbox .email_cont {
  padding: 4rem 4rem 8rem 4rem;
}

.email_poplayer .email_contbox .email_cont small {
  display: block;
  font-family: 'Exo 2', sans-serif;
  font-size: 14px;
  letter-spacing: 0.2rem;
  font-weight: 500;
  padding-left: 22px;
  background: url("../img/icon_mail.png") no-repeat left center;
  background-size: 18px;
}

.email_poplayer .email_contbox .email_cont .pop_ttl {
  font-family: 'Exo 2', sans-serif;
  font-size: 3.6rem;
  font-weight: 700;
  letter-spacing: 0.05rem;
  margin: 2.4rem 0 2.8rem;
}

.email_poplayer .email_contbox .email_cont p {
  font-size: 14px;
  color: #282828;
  letter-spacing: 0.05rem;
}

.email_poplayer .email_contbox .email_cont p span {
  color: #CB8BDA;
  text-decoration: underline;
}

.email_poplayer .email_contbox .btn_send_email {
  width: 100%;
  height: 6.8rem;
  background: #1E1E1E;
  color: #fff;
}

.email_poplayer .email_contbox .btn_send_email a {
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-family: 'Exo 2', sans-serif;
  font-size: 16px;
  letter-spacing: 0.1rem;
  font-weight: 600;
  color: #fff;
}

/* //이메일 팝업 */
/* 글씨 블랙 박스 애니메이션 */
@-webkit-keyframes block-disapper {
  0% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
@keyframes block-disapper {
  0% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  100% {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}

/********************** 반응형 ***********************/
/* 태블릿 사이즈 */
@media screen and (max-width: 1300px) {
  .section3 .planet_container {
    right: 12%;
  }
  .section4 .para_txt {
    font-size: 3.4rem;
  }
  .section7 .ft_info_detail {
    font-size: 1.2rem;
  }
}

@media screen and (max-width: 1025px) {
  html {
    font-size: 50%;
  }
  .menu_layer .plus1 {
    top: 14.285vh;
    left: 2.536vw;
  }
  .menu_layer .plus2 {
    top: 14.285vh;
    left: auto;
    right: 2.536vw;
  }
  .menu_layer .plus3, .menu_layer .plus4, .menu_layer .plus5, .menu_layer .plus6, .menu_layer .plus7, .menu_layer .plus8 {
    display: none;
  }
  .section5 .plus1 {
    display: block;
    top: 14.285vh;
    left: 2.536vw;
  }
  .section5 .plus2 {
    display: block;
    top: 14.285vh;
    left: auto;
    right: 2.536vw;
  }
  .section5 .plus3, .section5 .plus4, .section5 .plus5, .section5 .plus6, .section5 .plus7, .section5 .plus8 {
    display: none;
  }
  .section5 .line_container {
    display: none;
  }
  .section5 .service_container ul {
    height: initial;
    margin-bottom: 3vh;
  }
  .section5 .service {
    width: 30%;
    height: initial;
    margin-top: initial !important;
    margin-bottom: 10vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top: 0%;
  }
  .section5 .service .service_container {
    padding-top: 22vh;
    padding-bottom: 10vh;
  }
  .section5 .service .service_num {
    display: none;
  }
  .section5 .service .service_info {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    margin-top: 3vh;
  }
  .section5 .service .service:nth-child(n+5) {
    margin-top: 0;
  }
  .section5 .service_char {
    width: 70%;
    text-align: center;
    position: initial;
  }
  .section5 .service_char.char1 {
    top: 6rem;
    width: 40%;
  }
  .section5 .service_char.char2 {
    top: 6rem;
    width: 40%;
  }
  .section5 .service_char.char3 {
    top: 6rem;
    width: 40%;
  }
  .section5 .service_char.char4 {
    top: 6rem;
    width: 40%;
  }
  .section5 .service_char.char5 {
    top: 6rem;
    width: 45%;
  }
  .section5 .service_char.char6 {
    top: 6rem;
    width: 45%;
  }
  .section5 .service_char.char7 {
    top: 6rem;
    width: 40%;
  }
  .section5 .service_char.loading {
    top: 6rem;
    width: 40%;
  }
  .section5 .service_name {
    width: 100%;
    font-size: 2.6rem;
  }
  .section5 .service_name small {
    font-size: 2.2rem;
    margin-top: 1rem;
  }
  .section5 .service .service_txt {
    width: 100%;
    text-align: center;
    margin-top: 1.6rem;
    font-size: 2rem;
  }
  .section5 .service_num .para_txt span {
    font-size: 1.8rem;
  }
  .section7 .line_container {
    display: none;
  }
  .section7 .plus1, .section7 .plus2 {
    display: block;
  }
  .section7 .ft_info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    height: 100%;
    padding-bottom: 15vh;
    padding-left: 4vw;
  }
  .section7 .address {
    position: initial;
    margin-top: auto;
    margin-bottom: 4vh;
  }
  .section7 .contact {
    position: initial;
  }
  .section7 .ft_info_ttl {
    font-size: 19px;
  }
  .section7 .ft_info_detail {
    font-size: 14px;
  }
}

/* 태블릿-모바일 중간 */
@media screen and (max-width: 790px) {
  .right_txt {
    right: 4.83vw;
  }
  .top_logo, .menu_top_logo {
    left: 4.830vw;
    top: 4.464vh;
  }
  .btn_menu {
    right: 4.830vw;
    top: 4.464vh;
  }
  .copyright {
    left: 4.830vw;
    bottom: 4.464vh;
  }
  .go_top {
    right: 4.830vw;
    bottom: 4.464vh;
  }
  .page_name {
    left: 4.83vw;
  }
  .email_poplayer .btn_email_popclose {
    right: 4.830vw;
    top: 4.464vh;
  }
  .menu_layer .menu_inner {
    padding: 4.830vw;
  }
  .menu_layer .gnb li.menu_recruit em {
    top: 0;
    right: -10px;
    width: 20px;
    height: 20px;
  }
  .menu_layer .gnb a {
    font-size: 12vw;
  }
  .menu_layer .btn_menu_close {
    right: 4.830vw;
    top: 4.464vh;
  }
  .page_name_fixed, .section7 .link_facebook {
    left: 4.83vw;
    font-size: 17px;
  }
  .section1 .logo {
    width: 50vw;
  }
  .section1 .logo_txt {
    font-size: 3vw;
    margin-top: 2rem;
  }
  .section1 .plus1 {
    top: 14.285%;
  }
  .section1 .plus2 {
    top: 14.285%;
    left: auto;
    right: 2.536vw;
  }
  .section1 .plus3, .section1 .plus4, .section1 .plus5, .section1 .plus6, .section1 .plus7, .section1 .plus8 {
    display: none;
  }
  .section1 .downloads {
    bottom: 4.464vh;
  }
  .section1 .downloads .counting .count_num {
    font-size: 6rem;
  }
  .section2 .pattern_box::after {
    content: '';
    display: block;
    width: 102%;
    height: 100%;
    background: rgba(30, 30, 30, 0.8);
    position: absolute;
    top: 0;
    left: 0;
  }
  .section2 .para_txt {
    left: 4.83vw;
  }
  .menu_layer .plus1, .section2 .plus1, .section3 .plus1, .section4 .plus1, .section5 .plus1, .section6 .plus1, .section7 .plus1 {
    top: 14.285vh;
    left: 2.2vw;
  }
  .menu_layer .plus2, .section2 .plus2, .section3 .plus2, .section4 .plus2, .section5 .plus2, .section6 .plus2, .section7 .plus2 {
    top: 14.285vh;
    left: auto;
    right: 2.536vw;
  }
  .menu_layer .plus3, .menu_layer .plus4, .menu_layer .plus5, .menu_layer .plus6, .menu_layer .plus7, .menu_layer .plus8, .section2 .plus3, .section2 .plus4, .section2 .plus5, .section2 .plus6, .section2 .plus7, .section2 .plus8, .section3 .plus3, .section3 .plus4, .section3 .plus5, .section3 .plus6, .section3 .plus7, .section3 .plus8, .section4 .plus3, .section4 .plus4, .section4 .plus5, .section4 .plus6, .section4 .plus7, .section4 .plus8, .section5 .plus3, .section5 .plus4, .section5 .plus5, .section5 .plus6, .section5 .plus7, .section5 .plus8, .section6 .plus3, .section6 .plus4, .section6 .plus5, .section6 .plus6, .section6 .plus7, .section6 .plus8, .section7 .plus3, .section7 .plus4, .section7 .plus5, .section7 .plus6, .section7 .plus7, .section7 .plus8 {
    display: none;
  }
  .section3 .fp-scroller {
    min-height: 100%;
    padding: 4.83vw 4.83vw 9.59vh 4.83vw;
  }
  .section3 .mission {
    top: 24.33vh;
    left: 4.83vw;
    font-size: 6rem;
  }
  .section3 .para_txt {
    top: 41.642vh;
    left: 4.83vw;
    font-size: 2rem;
    line-height: 3.4rem;
  }
  .section3 .step_container {
    margin-top: 48.455vh;
    height: 52.566vh;
    margin-bottom: 6vh;
    position: relative;
    top: auto;
    left: auto;
    right: auto;
  }
  .section3 .step_container .step_num {
    font-size: 2.4rem;
  }
  .section3 .step_container .step_name {
    font-size: 2.6rem;
  }
  .section3 .planet_container {
    top: 52.455vh;
    right: -12.814vw;
    z-index: -1;
    width: 85.338vw;
  }
  .section3 .planet_container svg {
    width: 100%;
    height: auto;
  }
  .section3.fp-completely .mission {
    top: 18.75vh;
  }
  .section3.fp-completely .para_txt {
    top: 33.482vh;
  }
  .section4_bg .circle.circle2 {
    left: -20%;
    width: 50vw;
    height: 50vw;
  }
  .section4_bg .circle.circle3 {
    width: 100vw;
    height: 100vw;
    left: 50%;
    top: 75.446%;
  }
  .section4_inner {
    padding-top: 27.901vh;
  }
  .section4 .history_slide_container {
    width: 90.579vw;
  }
  .section4 .history_slide_container .swiper-slide {
    width: 90.579vw !important;
  }
  .section4 .history_slide_container .swiper-slide .para_txt {
    font-size: 4rem;
  }
  .section4 .history_slide_container .swiper-button-prev,
  .section4 .history_slide_container .swiper-button-next {
    display: none;
  }
  .section5 .plus1, .section5 .plus2 {
    display: block;
  }
  .section5 .line_container {
    display: none;
  }
  .section5 .service_container {
    padding-top: 20vh;
  }
  .section5 .service_container ul {
    height: initial;
    margin-bottom: 3vh;
  }
  .section5 .service {
    width: 46.588%;
    height: initial;
    margin-top: initial !important;
    margin-bottom: 10vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding-top: 0%;
  }
  .section5 .service .service_container {
    padding-top: 22vh;
    padding-bottom: 10vh;
  }
  .section5 .service .service_num {
    display: none;
  }
  .section5 .service .service_info {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    text-align: center;
    margin-top: 3vh;
  }
  .section5 .service .service:nth-child(n+5) {
    margin-top: 0;
  }
  .section5 .service_char {
    width: 70%;
    text-align: center;
    position: initial;
  }
  .section5 .service_char.char1 {
    width: 50%;
  }
  .section5 .service_char.char2 {
    width: 50%;
  }
  .section5 .service_char.char3 {
    width: 46%;
  }
  .section5 .service_char.char4 {
    width: 47%;
  }
  .section5 .service_char.char5 {
    width: 58%;
  }
  .section5 .service_char.char6 {
    width: 60%;
  }
  .section5 .service_char.char7 {
    width: 56%;
  }
  .section5 .service_char.loading {
    width: 50%;
  }
  .section5 .service_name {
    width: 100%;
    font-size: 2.6rem;
  }
  .section5 .service_name small {
    font-size: 2.2rem;
    margin-top: 1rem;
  }
  .section5 .service .service_txt {
    width: 100%;
    text-align: center;
    margin-top: 1.6rem;
    font-size: 2rem;
  }
  .section5 .service_num .para_txt span {
    font-size: 1.8rem;
  }
}

/* 모바일사이즈 */
@media screen and (max-width: 415px) {
  html {
    font-size: 31.25%;
  }
  .page_name, .page_name_fixed, .section7 .link_facebook {
    font-size: 17px;
    left: 4.83vw;
    bottom: 7.696%;
  }
  .menu_layer .menu_inner {
    padding: 4.830vw;
  }
  .menu_layer .gnb li.menu_recruit em {
    top: 0;
    right: auto;
    left: 100%;
    width: 20px;
    height: 20px;
  }
  .menu_layer .gnb a {
    font-size: 14vw;
  }
  .right_txt {
    top: calc((var(--vh, 1vh) * 50) - 74px);
  }
  .right_txt img {
    width: 8px;
  }
  .section1 .logo {
    width: 44.444vw;
    min-width: 180px;
  }
  .section1 .logo_txt {
    font-size: 2.6rem;
    margin-top: 2rem;
  }
  .section1 .downloads .counting {
    padding-left: 4rem;
  }
  .section1 .downloads .counting .count_num {
    font-size: 8rem;
  }
  .section2 .pattern_box {
    width: 100%;
    height: 50%;
    top: 16%;
    left: 0;
    right: 0;
    background-position: right top;
    background-size: auto 100%;
    background-repeat: repeat-x;
  }
  .section2 .para_txt {
    top: 40.611%;
    font-size: 3.4vw;
    line-height: 1.95em;
    left: 4.83%;
  }
  .section2 .para_txt hr {
    display: none;
  }
  .section3 .mission {
    font-size: 8rem;
  }
  .section3 .para_txt {
    font-size: 3.4vw;
    line-height: 1.75em;
    top: 38.642vh;
  }
  .section3 .step_container {
    padding-left: 3.3vw;
  }
  .section4 .history_slide_container .swiper-slide .para_txt {
    font-size: 4rem;
  }
  .section4 .history_slide_container .swiper-slide .para_txt p {
    margin-bottom: 1.4rem;
  }
  .section4 .history_num {
    margin-bottom: 3rem;
  }
  .section5 .service_container {
    margin-bottom: 10vh;
  }
  .section5 .service {
    margin-bottom: 4vh;
  }
  .section5 .service_char {
    width: 50%;
  }
  .section5 .service_char svg {
    height: 100%;
  }
  .section5 .service_char.char1 {
    width: 50%;
  }
  .section5 .service_char.char2 {
    width: 50%;
  }
  .section5 .service_char.char3 {
    width: 46%;
  }
  .section5 .service_char.char4 {
    width: 47%;
  }
  .section5 .service_char.char5 {
    width: 58%;
  }
  .section5 .service_char.char6 {
    width: 60%;
  }
  .section5 .service_char.char7 {
    width: 56%;
  }
  .section6 .swiper-slide:hover {
    -webkit-box-shadow: none;
            box-shadow: none;
  }
  .section7 .ft_info_ttl {
    font-weight: 700;
  }
  .section7 .ft_info_detail {
    letter-spacing: 0.05em;
  }
  .email_poplayer .email_contbox .email_cont {
    padding: 10% 6% 15% 6%;
  }
  .email_poplayer .email_contbox .email_cont .pop_ttl {
    font-size: 6rem;
  }
}

/*POP*/
.main_popup {
  position: fixed;
  z-index: 1005;
  -webkit-box-shadow: 0px 13px 40px -6px #061626;
  box-shadow: 0px 13px 40px -6px #061626;
  top: 100px;
  left: 200px;
  display: none;
}
.main_popup button {
  border: 0;
  background: none;
  cursor:pointer;
}
.main_popup.on {
  display: block;
  background-color: #fff;
}
.main_popup .img_wrap {
  max-width: 320px;
  display:flex;
  flex-direction: column;
  justify-content:center;
  align-items:center;
  font-size: 14px;
  padding: 20px 10px 10px;
  word-break: break-all;
  line-height: 1.5;
}
@media screen and (max-width: 415px) {
  .main_popup {
    top: 80px;
    left: 15px;
  }
  .main_popup .img_wrap {
    /*width: 90%;*/
    /*max-width: 90%;*/
  }
}
.main_popup .popup_title {
  font-weight: bold;
  line-height: 2;
  font-size: 15px;
  color: #ff0000;
}
.main_popup .btn_close {
  width: 32px;
  height: 32px;
  position: absolute;
  top: 12px;
  right: 12px;
  font-size: 0;
  border: 0;
  background: none;
}
.main_popup .btn_close:before {
  content: "";
  width: 2px;
  height: 32px;
  background-color: #333;
  position: absolute;
  top: 0;
  left: 15px;
  transform: rotate(45deg);
}
.main_popup .btn_close:after {
  content: "";
  width: 32px;
  height: 2px;
  background-color: #333;
  position: absolute;
  top: 15px;
  left: 0;
  transform: rotate(45deg);
}

.main_popup .btn_today_close {
  width: 100%;
  height: 45px;
  background-color: #333;
  text-align: center;
  color: #fff;
  font-size: 14px;
  display: block;
}
.main_popup .btn_today_close span {
  display: block;
  line-height: 40px;
  vertical-align: bottom;
  opacity: 0.8;
}

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