@charset "UTF-8"; /* CSS Document */
@font-face {
  font-family: "noto";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/notokr-regular.eot");
  src:
    url("/fonts/notokr-regular.eot?#iefix") format("embedded-opentype"),
    url("/fonts/notokr-regular.woff") format("woff"),
    url("/fonts/notokr-regular.ttf") format("truetype");
}

@font-face {
  font-family: "noto";
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/notokr-medium.eot");
  src:
    url("/fonts/notokr-medium.eot?#iefix") format("embedded-opentype"),
    url("/fonts/notokr-medium.woff") format("woff"),
    url("/fonts/notokr-medium.ttf") format("truetype");
}

@font-face {
  font-family: "noto";
  font-style: normal;
  font-weight: 800;
  src: url("/fonts/notokr-bold.eot");
  src:
    url("/fonts/notokr-bold.eot?#iefix") format("embedded-opentype"),
    url("/fonts/notokr-bold.woff") format("woff"),
    url("/fonts/notokr-bold.ttf") format("truetype");
}

/** Montserrat Light **/
@font-face {
  font-family: "Montserrat";
  font-weight: 300;
  font-style: normal;
  src:
    url("/fonts/Montserrat-Light.woff2") format("woff2"),
    url("/fonts/Montserrat-Light.woff") format("woff");
}

/** Montserrat Regular **/
@font-face {
  font-family: "Montserrat";
  font-weight: 400;
  font-style: normal;
  src:
    url("/fonts/Montserrat-Regular.woff2") format("woff2"),
    url("/fonts/Montserrat-Regular.woff") format("woff");
}

/** Montserrat Medium **/
@font-face {
  font-family: "Montserrat";
  font-weight: 500;
  font-style: normal;
  src:
    url("/fonts/Montserrat-Medium.woff2") format("woff2"),
    url("/fonts/Montserrat-Medium.woff") format("woff");
}

/** Montserrat Bold **/
@font-face {
  font-family: "Montserrat";
  font-weight: 700;
  font-style: normal;
  src:
    url("/fonts/Montserrat-Bold.woff2") format("woff2"),
    url("/fonts/Montserrat-Bold.woff") format("woff");
}

@keyframes rotate_image {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes rotate_image2 {
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes text_ani {
  0% {
    trabsfirn: trabskateY(0);
  }

  100% {
    transform: translateY(-30px);
  }
}

.milestones.bg-light {
  background-color: #fff !important;
}

.text-primary {
  color: #4367dd !important;
}
.bg-primary {
  background: #4367dd !important;
}
.p-xxxl {
  padding-top: 10rem;
  padding-bottom: 10rem;
}
.p-xxl {
  padding-top: 7.5rem;
  padding-bottom: 7.5rem;
}
.p-xl {
  padding-top: 4rem;
  padding-bottom: 4rem;
}
.sr-only {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  border: 0;
  clip: rect(0, 0, 0, 0);
}
/*부트스트랩 스타일 상쇄*/

.row {
  margin-top: 0;
}
.row > * {
  margin-top: 0;
}
.gx-5.row,
.g-5.row {
  margin-left: -1.5rem;
  margin-right: -1.5rem;
}
.gx-5.row > *,
.g-5.row > * {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}
.g-0 {
  margin: 0;
}
.gx-0.row,
.g-0 {
  margin-left: 0;
  margin-right: 0;
}
.gx-0.row > *,
.g-0.row > * {
  padding-left: 0rem;
  padding-right: 0rem;
}
.g-0 > * {
  padding: 0;
  margin: 0;
}
.gx-4.row,
.g-4.row {
  margin-left: -0.75rem;
  margin-right: -0.75rem;
}
.gx-4.row > *,
.g-4.row > * {
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.gy-4.row,
.g-4.row {
  margin-top: -0.75rem;
  margin-bottom: -0.75rem;
}
.gy-4.row > *,
.g-y.row > * {
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
}

@media screen and (min-width: 992px) {
  .g-lg-5.row,
  .gx-lg-5.row {
    margin-left: -1.5rem;
    margin-right: -1.5rem;
  }
  .g-lg-5.row > *,
  .gx-lg-5.row > * {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
}

@media screen and (max-width: 1199px) {
  .p-xxl {
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
  }
  .p-xxxl {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .p-xl {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}

* {
  padding: 0;
  margin: 0;
}
html {
  width: 100%;
  height: 100%;
  font-size: 16px;
  color: #191919;
}
body {
  min-width: 320px;
  font-size: 1rem;
  font-family: "Montserrat", "noto", "Nanum Gothic", "Helvetica", sans-serif;
  position: relative;
  height: 100%;
}
body.noscroll {
  overflow: hidden;
  height: 100%;
}
dl,
ol,
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
  color: #444;
}
p,
span,
ul,
li,
ol,
dl,
address,
table,
tr,
td,
input,
select,
button,
a {
  margin: 0;
  padding: 0;
  letter-spacing: -0.03em;
}
img,
button {
  outline: none;
}
.skip_nav a {
  position: absolute;
  top: -30px;
  left: 0;
  background: #000;
  height: 30px;
  line-height: 30px;
  color: #fff;
  font-size: 12px;
  padding: 0 6px;
}
.skip_nav a:focus,
.skip_nav a:active {
  top: 0;
}

.wrap {
  width: 100%;
  overflow: hidden;
}
.point {
  font-family: "Montserrat";
}

/*다음지도 스타일*/
.root_daum_roughmap .wrap_controllers,
.root_daum_roughmap .cont {
  display: none;
}
.root_daum_roughmap .wrap_map {
  height: 480px !important;
  border: 1px solid #ddd;
}
.os_mac.root_daum_roughmap {
  height: 480px !important;
}
.root_daum_roughmap .map_border {
  display: none;
}

/*modal 스타일*/
.modal-text {
  /* padding:1.5rem; */
  margin-top: 1.5rem;
  border: 1px solid #2b5abb;
}
.modal-text h4 {
  background-repeat: no-repeat;
  font-size: 1.125rem;
  font-weight: 600;
  padding: 1rem;
  color: #ffffff;
  background-color: #2b5abb; /* padding-left: 1.5rem; */
  background-size: 1.125rem;
  background-position: left top;
}
.modal-text p,
.modal-text ul li {
  line-height: 1.8;
}
.modal-text ul,
.modal-text p {
  margin: 1rem;
}
.list-style01 li,
.modal-text ul li,
.modal-text p {
  padding-left: 1rem;
  position: relative; /* margin: 1rem; */
}
.list-style01 li::before,
.modal-text ul li::before,
.modal-text p::before {
  display: inline-block;
  content: "";
  width: 4px;
  height: 2px;
  position: absolute;
  background: #000;
  top: 0.5rem;
  transform: translate(0, 100%); /* margin-top: -2px; */
  left: 3px;
}
.modal-info {
  padding: 1.5rem;
}
.modal-info strong {
  margin-bottom: 0.5rem;
  display: inline-block;
}

.modal-info ol li {
  padding-left: 1rem;
  position: relative;
  margin-bottom: 0.2rem;
}
.modal-info ol li > p {
  margin-bottom: 0.25rem;
}
.modal-info ol li span.num {
  position: absolute;
  left: 0;
  border-radius: 50px;
  top: 1px;
  font-size: 0.875rem;
  display: inline-flex;
}
.modal-info > ol > li {
  margin-bottom: 0.5rem;
  padding-left: 1.5rem;
}
.modal-info p {
  margin-bottom: 1rem; /* margin-top:0.5rem; */
  text-align: justify;
}
.modal-info ul {
  margin-top: 0.5rem;
}
.modal-info > ol > li > span.num {
  background: #eeeeee;
  color: #666666;
  height: 16px;
  top: 3px;
  width: 1rem;
  line-height: 0;
  height: 1rem;
  font-family: "noto";
  justify-content: center;
  align-items: center; /* text-align: center; */
  border: 1px solid #666; /* padding:0 0.5rem; */
}
.modal-info ol li.nonum {
  padding-left: 0;
}
header {
  position: fixed;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255 255 255 / 16%);
}
header .header-menu > ul li a {
  font-weight: 500;
  color: #ffffff; /* text-transform: uppercase; */
  font-size: 1.125rem;
  padding: 0rem 3.5rem;
}
header .header-menu ul li {
  display: flex;
  align-items: center;
}
header .header-menu > ul > li > a {
  position: relative;
}
header .header-menu > ul > li > a:hover {
  color: #4367dd;
}
header .header-menu > ul > li > a > span::after {
  width: 0;
  transition: 0.3s;
  content: "";
  height: 2px;
  display: block;
  background: #4367dd;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
header .header-menu > ul > li > a:hover > span::after {
  width: 100%;
}
header .header-menu > ul > li > a > span {
  position: relative;
}

header .ham-menu span {
  width: 30px;
  height: 2px;
  background: #fff;
  border-radius: 10px;
  margin: 4px 0;
}
header .ham-menu {
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  height: 100%;
  flex-direction: column;
  z-index: 99999;
}
header .ham-menu:hover > span {
  background: #a8c4ff;
}
header .ham-menu a span {
  transform: rotateZ(0) translate(0, 0);
  transition: transform 0.5s;
}
header .ham-menu > span:nth-child(2) {
  width: 70%;
}
header.on {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
}
header.on ul li a {
  color: #191919;
}
header.on {
  box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.1);
}
header.on .ham-menu span {
  background: #5e5e5e;
}
header.on .ham-menu.white span {
  background: #fff;
}
header .ham-menu a {
  display: flex;
  width: 30px;
  align-items: center;
  height: 100%;
  flex-direction: column;
  justify-content: center; /* background: #ddd; */
  transition: 0.7s;
}
header .ham-menu.on span:nth-child(2) {
  display: none !important;
}
header .ham-menu.on span:first-child {
  transform: rotateZ(135deg) translate(1px, 0);
  trasition: transform 0.3s;
}
header .ham-menu.on span:last-child {
  transform: rotateZ(-135deg) translate(1px, 0);
  trasition: transform 0.5s;
}
header .ham-menu.on {
  margin-right: 0;
}
header .ham-menu.on span {
  margin: 0;
  transition: transform 0.5s;
}
.main {
  height: calc(var(--vh, 1vh) * 100);
  width: 100%;
  overflow: hidden;
  position: relative;
}
/*.main video { height: auto; position: absolute; left: 0; right: 0; width: 100%; bottom: 0; top: 0; } */

.main .video-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  height: inherit;
  width: inherit;
  position: inherit;
  overflow: inherit;
  background: #010102;
  mix-blend-mode: multiply;
}
.main .video-wrap * {
  animation-name: vedio;
  animation-duration: 2s;
  animation-iteration-count: running;
}
@keyframes vedio {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.main .video-wrap video {
  position: absolute;
}
.main .video-wrap video:not(:nth-child(1)) {
  mix-blend-mode: screen;
}
.main .video-wrap video:nth-child(1) {
  min-width: 100vw;
  width: auto;
  min-height: inherit;
  filter: blur(30px);
}
.main .video-wrap video:nth-child(2) {
  width: 110vmin;
  top: 1vmin;
  left: calc(-32vmin + 6%);
}
.main .video-wrap video:nth-child(3) {
  width: 40vmin;
  right: -80px;
  bottom: 40vmin;
}
.main .video-wrap video:nth-child(4) {
  width: 60vmin;
  right: 15vmin;
  bottom: 0;
}
.main .video-wrap video:nth-child(5) {
  width: 110vmin;
  right: -42vmin;
  bottom: -20vmin;
  filter: blur(5px);
}

.main .main-text {
  position: absolute;
  left: 0;
  color: #fff;
  right: 0;
  text-align: center;
  top: 30%;
}
.main .main-text p {
  line-height: 1.2;
  color: #fff; /* text-align: left; */
  font-size: 5.4rem;
  letter-spacing: -0.06em;
  margin-bottom: 3rem;
  font-weight: 600;
}
.main .main-text span {
  display: block;
  margin-bottom: 3rem;
}
section h2 {
  margin-bottom: 2rem;
  font-size: 3.375rem;
  font-weight: 600;
  letter-spacing: -0.04em;
}
.spin-img {
  width: 64.375rem;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  overflow: hidden;
}
.spin-img img {
  animation: rotate_image 110s linear infinite;
  transform-origin: 60% 40%; /* width: 100%; */
}
.spin-img.left {
  right: inherit;
  left: -20%;
}
.spin-img.left img {
  animation: rotate_image2 110s linear infinite;
  transform-origin: 40% 60%;
}
.txt-wrap {
  z-index: 1;
}
header .header-menu {
  height: 80px;
  padding: 0 5rem;
}
header .header-menu > ul {
  position: relative; /* margin-left: 2rem; */ /* width: 100%; */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  z-index: 999;
}
header .header-menu > ul > li {
  position: relative; /* flex: 1; */
  white-space: nowrap; /* padding: 0 1.5rem; */
}
header .header-menu > ul > li > ul {
  overflow: hidden;
  padding: 0;
  transition: opacity 0.2s ease-out 0s;
  position: absolute;
  top: 3.5rem;
  border-radius: 14px;
  left: 0;
  width: 0; /* background: #4367dd; */ /* height: 0; */
  opacity: 0; /* display: none; */ /* box-shadow: 2px 3px 18px #0000002b; */
}
header .header-menu > ul > li > ul > li {
  display: block;
}

/* 언어 선택 select 스타일 */
#lang-select,
::picker(select) {
  appearance: base-select;
}

#lang-select::picker(select) {
  border-radius: 8px;
  border: none;
  padding: 0.75rem 0;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}

header.on #lang-select::picker(select) {
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
  border: 1px solid #f4f4f4;
}

select::picker-icon {
  display: none;
}

select option::checkmark {
  display: none;
}

header .header-menu select.form-select {
  background-color: transparent;
  color: #fff;
  border: none;
  z-index: 9999;
  background-image: url("../images/arrow_white.svg");
}
header .header-menu select.form-select:open {
  border: 1px solid #fff;
}

header .header-menu .form-select option {
  background: #fff;
  display: flex;
  justify-content: center;
}

header .header-menu .form-select option:checked {
  background-color: #f4f4f4;
  font-weight: 500;
}
header .header-menu .form-select option:hover {
  background-color: #f4f4f4;
}

header.on .header-menu select.form-select {
  color: #191919;
  background-image: url("../images/arrow_black.svg");
}
header.on .header-menu select.form-select:open {
  border: 1px solid #a1a1a1;
}
header.on .header-menu .form-select option {
  display: flex;
  justify-content: center;
}
/* end */

header .header-menu .logo-wrap {
  display: inline-block;
  width: 10rem;
  z-index: 9999;
  height: 1.563rem;
  background-image: url(/images/logotype-white.svg);
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: -12px; /* transition: .7s; */
}
header.on .header-menu .logo-wrap {
  background-image: url(/images/logotype-dark.svg);
  background-repeat: no-repeat;
  display: inline-block;
}
header .header-menu > ul > li > ul {
  padding: 1rem;
  width: 100%;
  height: auto;
}

.menu-bg {
  opacity: 0;
  height: 0;
  left: 0;
  right: 0;
  width: auto;
  backdrop-filter: blur(8px);
  background: rgb(255 255 255 / 95%);
  position: fixed;
  left: 0;
  top: 0;
  transition: opacity 0.2s ease-out;
}
.menu-bg.drop {
  opacity: 1;
  transition: height 0.3s ease-out;
}

header .header-menu > ul > li > ul.depth02 {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s;
}
header .header-menu > ul > li.show > ul.depth02 {
  visibility: visible;
  display: block;
  opacity: 1;
  transition: opacity 0.3s;
  transition-delay: 0.2s;
}
header .header-menu > ul > li > ul > li a {
  padding: 0.5rem 0;
  display: block;
  text-align: center;
  font-size: 0.875rem;
  color: #000;
  transition: 0.3s;
}
header .header-menu > ul > li > ul > li:hover a,
header .header-menu > ul > li > ul > li:focus a {
  font-weight: 600;
  text-decoration: underline;
}
header .logo {
  width: 12rem;
}

header .btn {
  margin-left: auto;
  border: 2px solid #ffffff;
  border-radius: 50px;
  color: #ffffff;
  z-index: 9999;
  padding: 4px 14px;
  transition: 0.7s;
}
header.on .btn {
  color: #4367dd;
  border: 2px solid #4367dd;
}
header.on .btn:hover,
header.on .btn:focus {
  color: #ffffff;
  background: #4367dd;
}
/*.sub header {
  position: relative;
}*/

@media screen and (max-width: 1979px) {
  .main video {
    width: auto;
  }
}

@media screen and (max-width: 1549px) {
  header .header-menu > ul > li > ul {
    top: 3.5rem;
  }
  .menu-bg.drop {
    top: 0rem;
  }
}

@media screen and (max-width: 1365px) {
  .main video {
    width: inherit;
    position: relative;
  }
  section.main {
    width: auto;
  }
}

@media screen and (max-width: 1199px) {
  .menu-bg.drop {
    /* top:74px; */
  }
}

@media screen and (max-width: 991px) {
  .menu-bg {
    visibility: hidden;
  }
}

@media screen and (max-width: 565px) {
  header .btn {
    display: none;
  }
}
.vision.section .top-text h3,
.card-slide-wrap .top-text h3 {
  font-weight: 700;
  line-height: 1.5;
  font-size: 3rem;
  letter-spacing: -0.05em;
  font-family: "noto";
}
.vision.section .top-text h3 span,
.card-slide-wrap .top-text h3 span {
  position: relative;
}
.vision.section .top-text h3 span::before {
  z-index: -1;
  width: 100%;
  content: "";
  height: 13px;
  background: #faffa5;
  position: absolute;
  display: block;
  left: 0;
  bottom: 0;
}
.vision {
  height: 100vh;
  display: flex;
  align-items: center;
  background: #f9f9f9;
}
.vision-wrap {
  padding: 5rem 0.5rem;
}
.vision-wrap img {
  width: 110px;
}
.vision-wrap > div > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  letter-spacing: -0.05em;
}
.vision-wrap > div h3 {
  font-size: 2.2rem;
  text-align: center;
  font-weight: 700;
  margin-top: 0.75rem;
  margin-bottom: 0.75rem;
  line-height: 3.5rem;
}
.vision-wrap > div p {
  font-size: 1rem;
  text-align: center; /* color: #fff; */
  margin: 0;
  line-height: 1.6;
}

.service {
  height: 100vh;
  width: 100%;
}
.service-wrap {
  height: 100%;
  width: 100%;
}
.service-wrap > div > div > img {
  transition: 0.4s; /* height: 100%; */
  width: 100%;
  opacity: 0.1;
  position: absolute; /* z-index: -1; */
  top: 0;
  bottom: 0;
  right: 0;
  left: 50%;
  transform: translateX(-50%);
}

.service-wrap > div > div {
  transition: 0.5s;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  overflow: hidden;
  position: relative;
}
.service-wrap > div > div.service01 {
  background: #709af3;
}
.service-wrap > div > div.service02 {
  background: #4367dd;
}
.service-wrap > div > div.service03 {
  background: #013398;
}
.service-wrap > div > div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.service-wrap > div > div:hover {
  background: rgba(0, 0, 0, 0.6);
}
.service-wrap > div > div:hover > img {
  transform: scale(1.1) translateX(-50%);
  opacity: 0.4;
}
.service-wrap > div .text-wrap:hover {
  animation: text-ani 30s linear;
}
.service-wrap > div .txt-wrap {
  color: #fff;
}
.service-wrap > div .txt-wrap h3 {
  transition: 0.4s;
  font-size: 4rem;
  font-weight: 700;
  letter-spacing: -0.05em;
  margin-bottom: 2rem;
}
.service-wrap > div .txt-wrap p {
  transition: 0.4s;
  line-height: 1.8;
  font-weight: 400;
  opacity: 0;
  margin-bottom: 2rem;
}
.service-wrap > div .txt-wrap span {
  transition: 0.4s;
  margin-bottom: 2rem; /* font-size: 1.125rem; */
  display: inline-block;
  color: #ffc107;
  font-weight: 600;
}
.service-wrap > div > div:hover h3,
.service-wrap > div > div:hover p,
.service-wrap > div > div:hover span {
  transform: translateY(-20px);
  opacity: 1;
}
.btn.btn-more {
  /* outline-color: rgba(255, 255, 255, .5); */ /* outline-offset: 0px; */
  transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1);
  font-weight: 200;
  box-shadow: 0 0 2px rgb(255 255 255);
  border: 2px solid #fff;
  position: relative;
  background-color: transparent;
  color: #fff;
  border-radius: 30px;
  transition-duration: inherit !important;
  transition-delay: unset !important;
  font-family: "Montserrat", "noto";
  font-size: 1rem;
  display: inline-flex;
  padding: 0.5rem 1.25rem;
  align-items: center;
}
.btn.btn-more::after,
.btn.btn-more.dark:hover::after {
  transition: 500ms;
  filter: none;
  width: 20px;
  height: 20px;
  content: "";
  display: inline-block;
  background: url(/images/chevron-right.svg);
  margin-left: 0.25rem;
}
.btn.btn-more:hover:after,
.btn.btn-more.dark::after {
  filter: brightness(0);
}
.btn.btn-more.dark:hover {
  box-shadow: none;
  text-shadow: none;
  color: #fff;
  background: #2650bf;
  border: 2px solid #2650bf;
}
.btn-more:hover {
  transition-delay: 0 !important;
  font-weight: 600;
  color: #2650bf;
  background: #fff;
  border: 2px solid #fff;
  box-shadow:
    inset 0 0 20px rgba(255, 255, 255, 0.5),
    0 0 20px rgba(255, 255, 255, 0.2);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px;
  text-shadow: 1px 1px 2px #ffffff;
}
.btn.btn-more.dark {
  border: 2px solid #050505;
  position: relative;
  background-color: transparent;
  color: #000;
  border-radius: 30px;
  font-family: "Montserrat"; /* font-size: 1.125rem; */
  display: inline-flex;
  padding: 0.5rem 1.25rem;
  align-items: center;
}
.btn.btn-more:hover {
  border: 2px solid #fff;
  box-shadow:
    inset 0 0 20px rgb(255 255 255 / 30%),
    0 0 20px rgb(255 255 255 / 20%);
  outline-color: rgba(255, 255, 255, 0);
  outline-offset: 15px; /* text-shadow: 1px 1px 2px #929292; */
}

@media screen and (max-width: 1365px) {
  .vision {
    height: auto;
  }
}
@media screen and (max-width: 1199px) {
  section.vision,
  section.service,
  section {
    height: auto;
  }
  .main .main-text p {
    font-size: 4.5rem;
  }
  header .header-menu > ul li a {
    font-size: 1rem;
    padding: 0rem 3rem;
  }
  header .header-menu {
    height: 74px;
    padding: 0 1rem;
  }
  .service-wrap > div .txt-wrap p {
    margin-bottom: 2rem;
    font-size: 0.875rem;
    line-height: 1.6;
  }
  .service-wrap > div > div {
    padding: 5rem 1.5rem;
  }
  .service-wrap > div .txt-wrap h3,
  .card-slide-wrap .top-text h3 {
    font-size: 2rem;
    margin-bottom: 0.625rem;
  }
  .service-wrap > div > div:hover h3,
  .service-wrap > div > div:hover p,
  .service-wrap > div > div:hover span {
    transform: inherit;
  }
  section h2 {
    margin-bottom: 1rem;
    font-size: 2.75rem;
  }
}

@media screen and (max-width: 1199px) {
  .vision-wrap > div {
    margin-bottom: 2rem;
  }
  .vision-wrap img {
    width: 90px;
  }
  .vision-wrap {
    padding: 3rem 0 0 0;
  }
}

@media screen and (max-width: 1023px) {
  .vision-wrap {
    padding: 2rem 0 0 0;
  }

  .vision-wrap > div > div {
    /* flex-direction:row; */
    display: -ms-grid;
    display: grid;
    grid-template-columns: 90px auto;
    grid-template-rows: auto auto;
    grid-column-gap: 1.25rem;
  }
  .vision-wrap img {
    width: 90px;
    grid-row: 1 / 3;
  }
  .vision-wrap > div h3 {
    margin: 0;
    text-align: left;
  }
  .vision-wrap > div p {
    text-align: left;
  }
}

@media screen and (max-width: 991px) {
  .vision-wrap {
    padding: 1rem 0 0 0;
  }
  .vision-wrap > div > div {
    /* flex-direction:row; */
    display: -ms-grid;
    display: grid;
    grid-template-columns: 75px auto;
    grid-template-rows: auto auto;
    grid-column-gap: 1rem;
  }
  .vision-wrap img {
    width: 75px;
    grid-row: 1 / 3;
  }
  .vision-wrap > div h3 {
    font-size: 1.875rem;
  }
  .vision-wrap > div p {
    text-align: left;
    font-size: 0.875rem;
  }
  .vision-wrap > div p br {
    display: none;
  }
  .logo {
    width: 160px;
  }
  .vision.section .top-text h3 {
    font-size: 2rem;
  }
  .vision.section .top-text h3 span::before {
    display: none;
  }
}

@media screen and (max-width: 564px) {
  .vision-wrap > div p {
    font-size: 13px;
  }
}

@media (min-width: 1200px) and (max-width: 1739px) {
  .service-wrap > div > div > img {
    height: 100%;
    width: auto;
  }
}
@media (max-width: 991px) {
  .service-wrap > div .txt-wrap h3 {
    font-size: 2.25rem;
    margin-bottom: 1rem;
  }
  .service-wrap > div .txt-wrap p {
    opacity: 1;
    margin-bottom: 2rem;
  }
}
@media (max-width: 767px) {
  .service-wrap > div .txt-wrap h3 {
    font-size: 2rem;
  }
}

.tab-list .slide-wrap {
  max-width: 1320px;
  display: flex; /* padding: 0px 60px; */
}
.tab-list .slide-wrap > div {
  align-items: center;
  display: flex;
  align-items: center;
}
.tab-list .slide-wrap button {
  background: none;
  border: 0;
  white-space: nowrap;
  font-size: 1.25rem;
  padding: 1rem 2rem;
  color: #bdbdbd;
  border-radius: 30px;
  transition: 0.2s;
}
.tab-list .slide-wrap .swiper-slide.swiper-slide-thumb-active button {
  border: 0;
  background: #4367dd;
  color: #fff;
  border-radius: 30px;
  padding: 1rem 2rem;
  box-shadow: 0px 7px 8px rgb(0 0 0 / 15%);
}
.tab-list .tab-content h2 {
  font-size: 3rem;
  letter-spacing: -0.04em;
}
.tab-list .left-cont p.count {
  font-size: 1.25rem;
  color: rgba(0, 0, 0, 0.2);
}
.tab-list .left-cont p span {
  font-size: 1.5rem;
  color: #000;
  font-weight: 600;
}
.tab-list .right-cont {
  margin: 2rem 0;
  width: 75%; /* height:0; */
  overflow: hidden;
  box-shadow: 5px 7px 16px #c1c1c1;
  padding-bottom: 75%;
  margin-left: auto;
  border-radius: 500px;
  position: relative;
}
.tab-list .right-cont img {
  position: absolute;
  bottom: 0;
  top: 0;
  max-width: inherit;
  height: 100%;
  display: block;
}
.tab-list .swiper-wrap {
  position: relative;
  padding: 0 60px;
}
.tab-list .swiper::before {
  z-index: 9;
  position: absolute;
  right: 0;
  width: 40px;
  bottom: 0;
  height: auto;
  top: 0;
  display: block;
  content: "";
  background: linear-gradient(-90deg, white, transparent);
}
.tab-list .swiper::after {
  z-index: 9;
  position: absolute;
  left: 0;
  width: 40px;
  height: auto;
  bottom: 0;
  top: 0;
  display: block;
  content: "";
  background: linear-gradient(90deg, white, transparent);
}
.tab-list .swiper-button-next:after {
  content: "";
  background: url(/images/arrow-right.svg) #fff;
  width: 40px;
  height: 40px;
}
.tab-list .swiper-button-next {
  right: 0;
  width: 40px;
  height: auto;
  bottom: 0;
  margin-top: 0;
  background: #fff;
  top: 0;
}
.tab-list .swiper-button-prev:after {
  content: "";
  background: url(/images/arrow-left.svg) #fff;
  width: 40px;
  height: 40px;
}
.tab-list .swiper-button-prev {
  background: #fff;
  left: 0;
  width: 40px;
  top: 0;
  bottom: 0;
  height: auto;
  margin-top: 0;
}
.tab-list #slide-content {
  overflow: hidden;
}
.slide-content {
  margin-top: 2.5rem;
}

@media screen and (min-width: 768px) {
  .tab-list .slide-list-wrap {
    width: auto !important;
  }
}

@media screen and (max-width: 1399px) {
  .tab-list .slide-wrap {
    max-width: 1240px;
  }
}

@media screen and (max-width: 1023px) {
  .tab-list .slide-wrap button {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
  }
}

@media screen and (max-width: 767px) {
  .tab-list .right-cont {
    width: 60%;
    padding-bottom: 60%;
  }
  .tab-list .right-cont {
    margin: 3rem auto 1rem;
  }
  .tab-list .left-cont {
    text-align: center;
  }
  .tab-list .slide-wrap {
    margin-right: 0;
    margin-left: 0;
  }
  .tab-list .swiper::before,
  .tab-list .swiper::after {
    display: none;
  }
  .slide-content {
    margin-top: 0rem;
  }
  .tab-list .slide-wrap button.on {
    padding: 0.75rem 1.5rem;
  }
  .tab-list .slide-wrap button {
    margin: auto;
  }
  .tab-list .swiper-wrap {
    position: relative;
    padding: 0 30px;
  }
  #swiper-next,
  #swiper-prev {
    display: none;
  }
}

@media screen and (max-width: 319px) {
  .tab-list .slide-wrap .swiper-slide-active button {
    font-size: 12px;
  }
}

.contact {
  background: #f9fafd;
}
.contact .contact-info {
  margin-top: 3rem;
}
.contact .contact-info li {
  font-size: 1.75rem;
  font-weight: 700;
  color: #4367dd;
  margin-bottom: 0.5rem;
}
.contact .contact-info li span {
  color: #8f8f8f;
  display: block;
  font-size: 1rem;
}
.contact input[type="text"] {
  margin-top: 10px;
  border: 0;
  border-bottom: 2px solid #dedede;
  background: none;
  height: 50px;
  border-radius: 0;
}
.contact .form-inline {
  margin-top: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
}
.contact .btn.w-100 {
  background: #4367dd;
  border-radius: 50px;
  border: 0;
  height: 3.125rem;
}
.contact .btn.w-100:hover,
.contact .btn.w-100:focus {
  background: #5976d8;
}
.contact input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.5rem;
}
.recruit {
  /* background-size: cover; */
  background-position: center;
  background: url(/images/slide-wrap-bg.jpg); /* background-color: #709af3; */
  background-size: cover;
  background-attachment: fixed;
}
.recruit h2 {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}
.recruit .txt-box {
  color: #fff;
}

@media screen and (max-width: 1199px) {
  .contact .contact-info {
    margin-top: 1rem;
  }
  .contact .contact-info li {
    font-size: 1.5rem;
  }
  .contact input[type="text"] {
    background: none;
    height: 45px;
  }
}
@media screen and (max-width: 991px) {
  .contact h2 {
    font-size: 2rem;
  }
  .contact .row.p-xxl {
    padding: 2.5rem 0;
  }
}
footer {
  background: #303030;
}
footer .footer-wrap {
  padding: 2rem 0;
  display: flex;
  align-items: flex-start;
}
footer .footer-wrap .footer-info {
  color: #cccccc;
  font-size: 13px; /* font-size: 0.75rem; */
  padding-left: 4.688rem;
  padding-top: 0.625rem;
}
footer .footer-wrap .footer-info ul {
  display: flex; /* gap:1rem; */
  margin-bottom: 1.25rem;
}

footer .footer-wrap .footer-info ul li {
  font-size: 14px;
}
footer .footer-wrap .footer-info ul li a {
  padding: 0 0.625rem;
  position: relative;
  color: #ddd;
}
footer .footer-wrap .footer-info ul li a:after {
  display: block;
  width: 3px;
  height: 3px;
  background: #ddd;
  content: "";
  position: absolute;
  top: 50%;
  left: -1px;
  margin-top: -1.5px;
}
footer .footer-wrap .footer-info ul li:first-child a:after {
  display: none;
}
footer .footer-wrap .footer-info ul li:first-child a {
  padding-left: 0;
}
footer .footer-wrap .footer-info ul li:first-child::after {
  display: none;
}
footer .footer-wrap .footer-info .copy {
  color: rgb(255 255 255 / 65%);
  font-size: 0.75rem;
}
footer .footer-wrap .footer-info p span:first-child {
  padding-right: 1.25rem;
  position: relative;
}
footer .footer-wrap .footer-info p span:first-child::after {
  width: 2px;
  height: 11px;
  content: "";
  position: absolute;
  right: 0.625rem;
  top: 0.156rem;
  background: #ddd;
}
footer .footer-wrap address {
  line-height: 1.6;
  margin-top: 0.188rem;
  margin-bottom: 1rem;
}
footer .footer-btn {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap; /* gap: 0.625rem; */
  justify-content: center;
}
footer .footer-btn a {
  line-height: 21px;
  display: inline-flex;
  align-items: center; /* grid-gap: 4px; */
  margin-bottom: 0.25rem;
  border: 1px solid #ddd; /* margin-right: 1rem; */
  border-radius: 50px;
  padding: 0.625rem 1.25rem;
  font-weight: 400;
  color: #dbdbdb;
  border: 1px solid #c6c6c6;
}

footer .footer-btn a:hover,
footer .footer-btn a:focus {
  color: #709af3;
  background: #fff;
}
footer .footer-btn a.btn-mail::before {
  background-position: center;
  display: inline-block;
  content: "";
  width: 1rem;
  height: 1rem;
  background: url(/images/mail-icon.svg);
  background-size: cover;
  margin-right: 4px;
}
footer .footer-btn a.btn-mail:hover::before,
footer .footer-btn a.btn-company:hover::before,
footer .footer-btn a.btn-mail:focus::before,
footer .footer-btn a.btn-company:focus::before {
  filter: invert(55%) sepia(37%) saturate(841%) hue-rotate(187deg) brightness(103%) contrast(91%);
}
footer .footer-btn a.btn-company::before {
  background-position: center;
  display: inline-block;
  content: "";
  width: 1rem;
  height: 1rem;
  background: url(/images/down-icon.svg);
  margin-right: 4px;
  background-size: cover;
}
footer .top-btn {
  z-index: 999999;
  position: absolute;
  right: 0;
  width: 70px; /* bottom: 184px; */
  height: 70px;
  display: flex;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50px;
  font-size: 0.938rem;
  justify-content: center;
  flex-direction: column;
  right: 1rem;
  color: #666;
  align-items: center;
  font-weight: 600;
  padding-bottom: 7px;
  margin-top: -20px;
  box-shadow: 1px 1px 8px #00000014;
}

@media screen and (max-width: 1549px) {
  html {
    font-size: 14px;
  }
}

@media screen and (max-width: 1199px) {
  footer .footer-wrap img {
    order: 3;
    width: 8rem;
    padding-bottom: 0.625rem;
  }
  footer .footer-wrap {
    align-items: center;
    flex-direction: column;
    text-align: center;
    row-gap: 1rem;
  }
  footer .footer-wrap .footer-info {
    padding-left: 0;
    padding-top: 0.25rem;
    order: 2;
  }
  footer .footer-wrap .footer-info ul {
    justify-content: center;
    padding-top: 0.625rem;
    margin-bottom: 0.625rem;
    flex-wrap: wrap;
  }
  footer .footer-btn {
    margin: auto;
  }
}

@media screen and (max-width: 991px) {
  .tab-list .slide-content h2 {
    font-size: 2.25rem;
    letter-spacing: -0.04em;
    order: 2;
  }
}

@media screen and (max-width: 767px) {
  section h2 {
    margin-bottom: 1rem;
    font-size: 2rem;
  }

  .service-wrap > div > div {
    padding: 3rem 1.5rem;
  }
}

@media screen and (max-width: 564px) {
  .tab-list .slide-content h2 {
    font-size: 1.875rem;
  }
  .main .main-text p {
    font-size: 3rem;
  }
  .main .main-text {
    top: 50%;
    transform: translateY(-50%) !important;
  }
  footer .top-btn {
    width: 60px;
    height: 60px;
    right: 0;
    margin-top: -40px;
  }
}

@media screen and (max-width: 319px) {
  .tab-list .tab-content h2 {
    font-size: 1.75rem;
  }
  .contact .contact-info li {
    font-size: 1.125rem;
  }
  .main .main-text p {
    font-size: 1.25rem;
  }
  .recruit .txt-box {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.menu-wrap.hide {
  position: fixed;
  background: rgba(36, 38, 43, 0.97);
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  right: 0;
  overflow: hidden;
  opacity: 1;
  transition:
    height 0.5s,
    opacity 1s,
    top 0.7s;
  top: -100vh;
}
.menu-wrap.show {
  width: 100%;
  opacity: 1;
  height: 100vh;
  left: 0;
  bottom: 0;
  top: 0;
  width: 100vw;
  z-index: 999;
  transition:
    top 1s,
    height 0.7s,
    opacity 2s;
}
.menu-wrap .txt-wrap {
  opacity: 0;
  transition: opacity 0.2s ease-out 0s;
  color: #fff;
  font-size: 3rem;
}
.menu-wrap.show .txt-wrap {
  opacity: 1;
  transition: opacity 1s ease-in-out 0s;
}
.menu-wrap > .menu {
  height: 100vh;
  opacity: 0; /* transition: opacity 0.1ms; */
}
.menu-wrap.show > .menu {
  opacity: 1;
  z-index: 999;
  transition: opacity 1s ease-in-out 0.5s;
}
.menu-wrap.show .menu-item ul.show {
  flex: 1;
}
.menu-wrap .side-menu {
  height: 100%;
}
.menu-wrap .side-menu #myGroup {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 80px;
}
.menu-wrap .side-menu #myGroup .menu-group {
  /* width:100%; */
  display: flex;
  flex: 1;
  border-bottom: 1px solid rgba(255, 225, 225, 0.15); /* flex-direction: column; */
}

.menu-wrap .menu-item h2 a,
.menu-wrap .menu-item ul > li a {
  color: #fff;
}
.menu-wrap.show .menu-item ul > li {
  /* margin-bottom: 1rem; */
  font-size: 1.125rem;
  text-align: left;
  margin-right: 3rem;
}
.menu-wrap.show .menu-bottom {
  margin-top: 3rem;
}
.menu-wrap.show .menu-item {
  display: flex;
  align-items: center; /* padding-bottom: 1rem; */
}

.menu-wrap .menu-item h2 {
  font-weight: 600;
  font-size: 2vw;
  margin-left: 5vw;
  width: 18vw;
  margin-bottom: 0;
}
.menu-wrap .menu-item h2 > a {
  position: relative;
  letter-spacing: -0.05em;
}
.menu-wrap .menu-item h2 > a::before {
  content: "";
  width: 0;
  transition: 0.2s;
  background: #ffffff;
  height: 4px;
  display: block;
  position: absolute;
  left: 0;
  bottom: -2px;
}
.menu-wrap .menu-item h2 > a:hover::before {
  width: 100%;
}
.menu-wrap.show .menu-item.select > h2 > a::before {
  width: 100%;
}
.menu-wrap.show .menu-item ul > li a {
  transition: 0.3s;
  width: 100%;
  opacity: 0.75;
}
.menu-wrap.show .menu-item ul > li a:hover {
  color: #fff;
  font-weight: 600;
  opacity: 1;
}
.menu-wrap.show .menu-item > ul {
  text-align: center;
  display: flex;
  opacity: 0;
  height: 0;
  overflow: hidden;
}
.menu-wrap.show .menu-item.select ul {
  opacity: 1;
  height: auto;
  transition: opacity ease-out 0.3s;
  -webkit-transition: opacity ease-out 0.3s;
  will-change: auto;
}

@media screen and (max-width: 1199px) {
  .menu-wrap .menu-item h2 {
    font-size: 2rem;
  }
}

@media screen and (min-width: 992px) {
  .menu-wrap.show .menu-item > ul {
    height: auto;
    opacity: 1;
  }
  .menu-wrap .side-menu #myGroup .menu-group:first-child {
    border-top: 1px solid rgba(255, 225, 225, 0.3);
  }
  .menu-wrap .side-menu #myGroup .menu-group:first-child:hover {
    background: url(/images/sub-top-visual01.jpg);
    background-size: cover;
    background-position: center;
  }
  .menu-wrap .side-menu #myGroup .menu-group:nth-child(2):hover {
    background: url(/images/sub-top-visual07.jpg);
    background-size: cover;
    background-position: center;
  }
  .menu-wrap .side-menu #myGroup .menu-group:nth-child(3):hover {
    background: url(/images/sub-top-visual06.jpg);
    background-size: cover;
    background-position: center;
  }
  .menu-wrap .side-menu #myGroup .menu-group:nth-child(4):hover {
    background: url(/images/sub-top-visual08.jpg);
    background-size: cover;
    background-position: center;
  }
  .menu-wrap .side-menu #myGroup .menu-group:nth-child(5):hover {
    background: url(/images/sub-top-visual09.jpg);
    background-size: cover;
    background-position: center;
  }
}
@media screen and (max-width: 991px) {
  .menu-wrap.show .txt-wrap {
    font-size: 2rem;
  }
  .menu-wrap.show .menu-item h2 {
    padding: 0;
    width: 100%;
    margin-left: 0;
    padding-left: 0;
    font-size: 1.875rem;
  }
  .menu-wrap.show .menu-item h2 > a {
    padding: 1.5rem 0 1.5rem 1.5rem;
    display: block;
  }
  .menu-wrap.show .menu-item h2::after {
    display: none;
    width: 2rem;
    height: 2rem;
    content: "";
    background: url(/images/chevron-down.svg) no-repeat;
    background-size: cover;
  }
  .menu-wrap.show .menu-item {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }
  .menu-wrap.show .menu-bottom {
    margin-top: 1rem;
  }
  .menu-wrap.show .menu-item ul {
    flex-direction: column;
    padding-left: 2rem; /* display: none; */
  }
  .menu-wrap.show .menu-item ul > li a {
    padding-bottom: 1rem;
    font-size: 1rem;
  }
  .menu-wrap .side-menu #myGroup .menu-group {
    flex: 0;
    align-items: center;
  }
  .menu-wrap.show .menu-item.select ul {
    padding-bottom: 0.5rem;
    width: 100%;
    margin-top: 1.5rem;
  }
}

/*sub layout*/
.top-title-wrap {
  /*padding-top: 7.5rem;*/
  padding-bottom: 5.5rem;
  text-align: center;
  padding-top: 12.5rem; /*200px*/
}
.top-title-wrap nav {
  font-weight: 600;
  color: #e1e1e1;
  font-family: "noto";
  display: block; /* overflow: visible; */
  font-weight: 700;
}
/*.top-title-wrap nav::before { content:''; display: inline-block; width:1rem; */ /* left: -40px; */ /*opacity: 0.6; height:1rem; background: url(/images/home-icon.svg) no-repeat; */ /* position:absolute; */ /* filter: invert(65%) sepia(1%) saturate(2090%) hue-rotate(53deg) brightness(96%) contrast(79%); */ /* }*/
.top-title-wrap h1 {
  font-weight: 700;
  color: #ffffff;
  line-height: 1.4;
  font-size: 4rem;
  text-transform: uppercase;
}
.sub-img-wrap {
  height: 27.5rem;
  padding: 0;
  background-size: 100%;
  top: 0;
  position: absolute;
  z-index: -1;
  background-attachment: fixed;
  background-position: center top;
  background-repeat: no-repeat;
}

@media screen and (max-width: 1199px) {
  .top-title-wrap h1 {
    font-size: 3rem;
  }
  .top-title-wrap {
    padding-top: 8.125rem;
    padding-bottom: 3.5rem;
  }
  .sub-img-wrap {
    height: 18rem;
    background-position: top center;
  }
}

.sub-txt-box {
  font-size: 2.25rem;
  font-weight: 700;
}
.sub-txt-box span {
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.8;
  display: inline-block;
  margin-top: 1rem;
}
.greeting {
  letter-spacing: 0em;
}
.title-wrap h2 {
  font-size: 3.5rem;
  font-weight: 700; /* text-align: left !important; */
}
.title-wrap span {
  font-size: 1.125rem;
}
.title-wrap p {
  font-size: 0.875rem;
  opacity: 0.8;
  line-height: 1.6;
}
.sub-vision-wrap h3.text-primary.point {
  margin-bottom: 0;
}
.sub-vision .box {
  display: -ms-grid;
  display: grid;
  grid-column-gap: 1rem;
  grid-template-columns: 5rem auto;
  grid-template-rows: auto auto;
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 4px 9px 14px rgba(0, 0, 0, 0.09);
  align-items: center;
}
.sub-vision .box p {
  color: #444;
}
.sub-vision .box h3 {
  color: #2650bf;
  font-weight: 800;
  font-size: 2rem;
}
.sub-vision .box img {
  width: 5rem;
  grid-row: 1/3 span;
}

@media screen and (max-width: 1399px) {
  .sub-txt-box {
    font-size: 2rem;
  }
}

@media screen and (max-width: 1199px) {
  .sub-txt-box {
    margin-bottom: 2rem;
  }
  .sub-txt-box br {
    display: none;
  }
  .title-wrap h2 {
    font-size: 3rem;
  }
  .sub-img-wrap {
    height: 18.5rem;
    background-position: center top;
  }
  .sub-location .office-location {
    flex-wrap: wrap;
  }

  .sub-location .office-location > div {
    flex: 0 1 100%;
  }
}

@media screen and (max-width: 1023px) {
  .top-title-wrap h1 {
    font-size: 2.5rem;
  }
  .top-title-wrap {
    padding-top: 7.125rem;
    padding-bottom: 1.5rem;
  }
  .sub-img-wrap {
    height: 17rem;
    background-position: center top;
  }
  .sub-txt-box {
    font-size: 1.75rem;
  }
}

@media screen and (max-width: 991px) {
  .sub-txt-box {
    font-size: 1.5rem;
  }
  .sub-img-wrap {
    height: 14.45rem;
    background-position: top center;
    background-attachment: unset;
  }
  .sub-location .office-location .info {
    margin-top: 0;
    height: auto !important;
  }
}

@media screen and (max-width: 767px) {
  .top-title-wrap {
    padding-top: 6.125rem;
    padding-bottom: 1.7rem;
  }
  .title-wrap h2 {
    font-size: 2.5rem;
  }
  .sub-img-wrap {
    height: 14rem;
    background-size: cover;
  }
}

@media screen and (max-width: 564px) {
  .sub-vision .box {
    display: block;
    text-align: center;
  }
  .sub-vision .box img {
    display: none;
  }
}

/*sub-history*/
.nav-wrap {
  margin-top: 2rem;
  flex: 1;
  justify-content: center;
}
.nav-wrap .nav {
  /* grid-gap: 0.5rem; */
  width: 100%;
}
.nav-wrap ul {
  margin-bottom: 2.5rem;
}
.nav-wrap ul > li {
  margin-right: 0.25rem;
  margin-bottom: 0.25rem;
}
.nav-wrap ul > li.nav-item button {
  border: 0;
  background: none;
  color: #999999;
  border-radius: 50px; /* font-size: 1rem; */
  background: #f1f1f1; /* padding:0; */
}
/*.sub-history .nav-wrap ul > li.nav-item button.active::after { display:block; height:3px; content:''; background:#4367d0; position:absolute; left:0; right:0; } */
.nav-wrap ul > li.nav-item button.active {
  position: relative;
  color: #4367dd;
  font-weight: 600; /* margin: auto; */
  background: #4367dd26;
}
.sub-history .history-list {
  position: relative;
  padding-left: 3rem;
}
.sub-history .history-list::before {
  content: "";
  width: 2px;
  position: fixed;
  left: 0.755rem;
  top: 0;
  height: 100%;
  background: #ddd;
  display: block;
}
.sub-history .history-item h3::before,
.sub-history .history-item h3.current::after {
  display: block;
  width: 12px;
  height: 12px;
  content: "";
  position: absolute;
  background: #999;
  border-radius: 50%;
  top: 50%;
  margin-top: -6px;
  left: -2.25rem;
  margin-left: -5px;
}
.sub-history .history-item h3.current::after {
  background: #4367dd;
}
.sub-history .title-wrap p {
  font-size: 1.75rem;
  letter-spacing: -0.06em;
  font-weight: 700;
}

@keyframes loader2-1 {
  0% {
    transform: scale(1);
    opacity: 0;
  }

  25% {
    transform: scale(1.1);
    opacity: 0.1;
  }

  50% {
    transform: scale(1.3);
    opacity: 0.15;
  }

  75% {
    transform: scale(1.5);
    opacity: 0.2;
  }

  100% {
    transform: scale(2);
    opacity: 0.1;
  }
}

.sub-history .history-item {
  margin-bottom: 3rem;
  padding-right: 1rem;
}
.sub-history .history-item h3.current::before,
.sub-history .history-item h3.current::after {
  animation: 1s infinite ease-in-out;
}
.sub-history .history-item h3.current::before {
  background: #4367dd;
  animation-name: loader2-1;
  opacity: 0;
}
.sub-history .history-item > h3 {
  font-size: 2.5rem;
  font-weight: 700;
  color: #999;
  margin-bottom: 1.5rem;
  position: relative;
}
.sub-history .history-item > h3.current {
  color: #4367dd;
}
.sub-history .history-item > ul {
  margin-left: 1rem;
}
.sub-history .history-item > ul > li {
  display: flex;
  color: #444;
  padding-left: 2.75rem;
  position: relative;
  flex-direction: column;
  margin-bottom: 0.5rem; /* font-size: 1.125rem; */
}
.sub-history .history-item > ul > li > span {
  position: absolute;
  left: 0;
  font-weight: 700;
}
.sub-history .history-item > ul > li > p {
  margin-bottom: 0.5rem;
}
.loader-2:before {
  border: 1px solid #333;
  top: -1px;
  left: -1px;
  opacity: 0;
  animation-name: loader2-1;
}

@media screen and (min-width: 992px) {
  .sub-history .tab-content .tab-pane {
    height: 860px;
    overflow: hidden;
  }
  .sub-history .swiper {
    height: 100%;
  }
  .sub-history .history-list {
    height: auto;
    overflow-y: scroll;
  }
}

@media screen and (max-width: 992px) {
  .benefit-wrap div:has(.benefit-box) {
    width: 100% !important;
  }

  .benefit-wrap div:has(.benefit-box):nth-child(odd) {
    padding-right: 0 !important;
  }
  .benefit-wrap div:has(.benefit-box):nth-child(even) {
    padding-left: 0 !important;
  }
  .benefit-box {
    gap: 2.5rem !important;
  }
}

@media screen and (max-width: 767px) {
  .nav-wrap ul > li.nav-item {
    flex: 1;
    width: 100%;
    margin-bottom: 0.5rem;
  }
  .nav-wrap ul > li.nav-item button {
    width: 100%;
    white-space: nowrap;
  }
  .sub-history .history-item > ul {
    margin-left: 0;
  }
  .sub-history .history-item > ul > li {
    padding: 0;
  }
  .sub-history .history-item > ul > li > span {
    position: relative;
    display: block;
    margin-bottom: 0.25rem;
  }
  .sub-history .title-wrap p {
    font-size: 1.75rem;
    letter-spacing: -0.06em;
    font-weight: 700;
  }
  .sub-history .history-list {
    padding-left: 2.5rem;
  }
  .sub-history .history-list::before {
    content: "";
    width: 1px;
    position: fixed;
    left: 1.56rem;
  }
  .sub-history .history-item h3::before,
  .sub-history .history-item h3.current::after {
    left: -1.05rem;
  }
  .sub-history .history-item > h3 {
    font-size: 2rem;
  }
  .nav-wrap ul > li {
    margin-right: 0rem;
  }
}

@media screen and (min-width: 1200px) {
  .history-list::-webkit-scrollbar {
    width: 2px;
  }
  .history-list::-webkit-scrollbar-track {
    background-color: #dfdfdf;
  }
  .history-list::-webkit-scrollbar-thumb {
    background: #4367dd;
    border-radius: 4px;
  }
}

/*.team-list .img-title { position:relative; background: #4878e3; } 
.team-list .img-title img { opacity: 0.15; } 
.team-list .img-title h3 { z-index: 1; position: absolute; left: 2rem; font-size: 2.45rem; top:2.5rem; color: #ffffff !important; } 
.team-list .img-title h3::after { display:block; height:3px; content:''; right: 0; left: 0; position:absolute; background:#fff; } */

.team-list > .row {
  border: 1px solid #191919;
  border-width: 1px 0;
  padding: 2rem 0;
}
.team-list .row h3 {
  /* text-align:center; */
  font-size: 0.8135rem;
  font-weight: 500;
}
.team-list .row h3 strong {
  /* text-align:center; */
  display: block;
  font-size: 2rem;
  color: #191919;
  margin-top: 0.25rem;
}
.team-list > .row .member-box {
  box-shadow: 8px 8px 1px rgb(0 0 0); /* background:#f6f6f6; */
  padding: 1.5rem;
  border-radius: 13px;
  border: 1px solid #2f3a50;
  margin-bottom: 1.5rem;
}
.team-list > .row .member-box h4 span {
  font-size: 0.875rem;
  display: block;
  font-weight: 500;
  margin-top: 0.25rem;
}
.team-list > .row .member-box h4 {
  font-weight: 600;
  font-size: 1.25rem;
}
.team-list > .row .member-box p {
  font-size: 1.5rem;
  text-align: right;
}

.sub-content .vision-text .vision-txt-box {
  margin-bottom: 1.25rem;
  font-size: 0.875rem;
}
.sub-content .vision-text h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #4367dd;
}

.sub-vision-wrap img {
  width: 4rem;
  grid-row: 1/3;
}
/*.sub-vision-wrap > div > div {
  background: #fff;
  padding: 2rem;
  border-radius: 14px;
  margin-bottom: 1.5rem;
  grid-column-gap: 1rem;
  display: -ms-grid;
  display: grid;
  grid-template-columns: 4rem auto;
  grid-template-rows: auto max-content;
  align-items: center;
  box-shadow: 8px 8px 1px rgb(0 0 0);
  border: 1px solid #000000;
  height: 8rem;
}*/
.sub-vision-wrap > div > div {
  background: #fff;
  padding: 2rem;
  border-radius: 14px;
  margin-bottom: 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: center;
  box-shadow: 8px 8px 1px rgb(0 0 0);
  border: 1px solid #000000;
  height: 8rem;
  line-height: 8rem;
}
.sub-vision-wrap > div > div h3 {
  font-weight: 700;
}
.sub-vision-wrap > div > div p {
  font-size: 0.875rem;
}

@media screen and (max-width: 1199px) {
  .sub-vision-wrap > div > div p br {
    display: none;
  }
  .txt-wrap p.emply-title {
    height: 3rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .txt-wrap p.emply-con {
    height: 2rem;
  }
  .join-company .flow-item.flow05 {
    height: auto !important;
  }
}

.ci-text > h4 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #4367dd;
}

.sub-ci h3,
.sub-location h3,
h3.small-title {
  margin-bottom: 2rem;
  display: inline-block;
  position: relative;
  font-size: 1.75rem;
  font-weight: 600;
  color: #013398;
}
.sub-ci h3::after,
.sub-location h3::after,
h3.small-title::after {
  width: auto;
  content: "";
  left: 0;
  right: 0;
  display: block;
  height: 3px;
  background: #013398;
}

.sub-ci .color-box {
  padding: 1.5rem;
  margin-bottom: 1rem;
  border-radius: 14px;
  color: #fff;
}
.sub-ci .color-box.color01 {
  background-color: #709af3;
}
.sub-ci .color-box.color02 {
  background-color: #4367dd;
}
.sub-ci .color-box.color03 {
  background-color: #013398;
}
.sub-ci .color-box.color04 {
  background-color: #0f10c7;
}
.sub-ci .color-box.color05 {
  background-color: #0a0a79;
}
.sub-ci .color-box.color06 {
  background-color: #3e4246;
}
.sub-ci .color-box.color08 {
  background-color: #aaaaaa;
}
.sub-ci h5 {
  font-weight: 700;
  font-size: 1.125rem;
}
.sub-ci .color-box ul li {
  font-weight: 400;
}

.sub-ci .btn-wrap a.btn {
  line-height: 21px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 0.25rem;
  border: 1px solid #ddd;
  border-radius: 50px;
  padding: 0.625rem 1.25rem;
  font-weight: 400;
  color: #444;
  border: 1px solid #c6c6c6;
}
.sub-ci .btn-wrap a.btn-download::before {
  background-position: center;
  display: inline-block;
  content: "";
  width: 1rem;
  height: 1rem;
  background: url(/images/down-icon.svg);
  background-size: cover;
}

.sub-location .office-location {
  display: flex;
  gap: 2rem;
}

.sub-location .office-location > div {
  width: 50%;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}
.sub-location .office-location > div > div {
  padding: 0;
}

.sub-location .map {
  position: relative;
  margin-bottom: 3.5rem;
}
/*.sub-location .info {
  position: absolute;
  width: auto;
  padding: 2rem;
  right: 0;
  background: #f8f9fa;
  bottom: 0rem; 
  z-index: 9;
  left: 55%;
}*/
.sub-location .office-location .info {
  padding: 0.875rem;
  height: 5rem;
  background-color: #ebebeb;
}
.sub-location .info ul li {
  margin-bottom: 0.25rem;
  margin-top: 0.25rem;
}

.devel-box {
  position: relative;
  margin-bottom: 1.5rem;
  padding: 0 2rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 14px;
  box-shadow: 5px 8px 18px #0000001c;
  height: 17rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.devel-box img {
  width: 4rem;
  height: 3.875rem;
  padding-bottom: 1.5rem;
}
.devel-box p {
  font-size: 1.125rem;
  font-weight: 600;
  height: 4rem;
  /*margin-top: 1.875rem;*/
  margin-bottom: 0.5rem;
}
.devel-box span {
  font-size: 0.875rem;
  /*margin-top: 0.875rem;*/
  display: inline-block;
  height: 4rem;
}

.flow-box {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: auto;
  justify-content: center;
  background: #fdfdfd;
  padding: 2rem 0rem;
  margin-top: 3rem;
  box-shadow: 3px 4px 7px rgb(0 0 0 / 15%);
  border-radius: 24px;
  margin-bottom: 2rem;
  /*height: 15rem;*/
}
.flow-box span {
  display: inline-block;
  margin-bottom: 1.5rem;
  color: #000000;
  background: #fff;
  font-size: 0.875rem;
  box-shadow: 2px 2px 0px;
  font-weight: 700;
  padding: 3px 5px;
  border: 1px solid #000000;
  border-radius: 4px;
}
.flow-box p {
  letter-spacing: -0.08em;
  font-weight: 600;
  margin-top: 1.25rem;
  display: inline-block;
  padding: 0;
  text-align: center;
  /*height: 3rem;*/
}
.en .flow-box p {
  height: 3rem;
}
.flow-box::before {
  width: 2px;
  height: 3rem;
  background: url(/images/dot-bg.png);
  content: "";
  display: block;
  position: absolute;
  top: -3rem;
  left: 50%;
  margin-left: -1px;
}

.flow-box::after {
  left: 50%;
  border-radius: 20px;
  display: block;
  width: 10px;
  height: 10px;
  content: "";
  margin-left: -5px;
  margin-top: -5px;
  background: #709af3;
  position: absolute;
  top: -3rem;
}
.flow-wrap {
  position: relative;
}
.flow-wrap::before {
  content: "";
  height: 2px;
  width: 100%;
  position: absolute;
  background: #ddd;
}
.flow-box img {
  width: 56px;
}

@media (max-width: 1200px) {
  .en .flow-box p {
    height: 4rem;
  }
}

@media (max-width: 991px) {
  .flow-box {
    background: none;
    border: 0;
    padding: 0;
    box-shadow: none;
  }
  .flow-box img {
    width: 40px;
  }
  .sub-location .info {
    left: 0;
    position: relative;
    padding: 0;
    margin-top: 2rem;
  }
}

@media (max-width: 767px) {
  .flow-box p {
    height: 3rem;
  }
  .devel-box p {
    height: auto;
  }
}
@media (max-width: 530px) {
  .flow-box p {
    height: 4rem;
  }
}
/* product */
.service-content-box ul {
  margin-top: 2rem;
  flex-wrap: wrap;
}
.service-content-box ul li {
  font-weight: 600;
  margin-right: 1.25rem;
  position: relative;
}
/*.service-content-box ul li:nth-child(1) {
  padding-left: 0.625rem;
}*/
.service-content-box.imported-car ul li:nth-child(4) {
  padding-left: 0.625rem;
}
.service-content-box ul li::before {
  background: #bdbdbd;
  left: -0.625rem;
  top: 4px;
  position: absolute;
  content: "";
  display: block;
  width: 1px;
  height: 14px;
}

.service-content-box ul li:nth-child(1)::before {
  /*background: #bdbdbd;
  left: 0;
  top: 4px;
  position: absolute;
  content: "";
  display: block;
  width: 1px;
  height: 14px;*/
  display: none;
}
.en .service-content-box.imported-car ul li:nth-child(3) {
  margin-right: 0.625rem;
}
.en .service-content-box.imported-car ul li:nth-child(3)::before,
.service-content-box.imported-car ul li:nth-child(4)::before,
.en .service-content-box.vehicle-maintenance ul li:nth-child(3)::before {
  left: 0;
}
/*.service-content-box ul li:last-child::after {
  background: #bdbdbd;
  right: -0.625rem;
  top: 4px;
  position: absolute;
  content: "";
  display: block;
  width: 1px;
  height: 14px;
}*/
.service-content-box ul li.management-consulting {
  position: relative;
}
.service-content-box ul li.management-consulting:nth-child(1)::after {
  right: -0.625rem;
  top: 4px;
  position: absolute;
  content: "";
  display: block;
  width: 1px;
  height: 14px;
}
.en .service-content-box.web-product ul li.mobile-app::before,
.en .service-content-box ul li.tablet-app::before,
.service-content-box ul li.mobile-app::after,
.service-content-box ul li.tablet-app::after {
  left: 0;
}
.service-content-box ul li.mobile-app,
.service-content-box ul li.tablet-app {
  padding-left: 0.625rem;
}

.service-content-box ul > li:first-child::after {
  display: none;
}
.service-content-box h4 {
  font-weight: 600;
  letter-spacing: -0.07em;
  font-size: 2.4rem;
}
.service-content-box p {
  line-height: 1.8;
}
.product-bg {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  opacity: 0.1;
}
.solution-wrap {
  display: flex;
  justify-content: center;
  margin: auto;
  flex-direction: column;
  max-width: 660px;
}
.solution-wrap > div {
  background: #fff;
  padding: 2.5rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.solution-wrap > div > div span {
  color: #4367dd;
  font-size: 1rem;
  text-transform: uppercase;
  font-weight: 700;
  display: block;
  letter-spacing: -0.05em;
}
.solution-wrap > div > div strong {
  font-size: 2rem;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 1.5rem;
}
.solution-wrap > div > p {
  position: relative;
  font-size: 1rem;
  letter-spacing: -0.04em;
  margin-top: 1.5rem;
  line-height: 1.8;
}
.solution-wrap > div > p::before {
  position: absolute;
  top: 1px;
  content: "";
  display: none;
  width: 2px;
  height: 78px;
  background: url(/images/dot-bg.png);
}

/* 영문 Product */
.en .service-content-box.imported-car ul li:nth-child(3),
.en .service-content-box.vehicle-maintenance ul li:nth-child(3) {
  padding-left: 0.625rem;
}
.en .service-content-box.imported-car ul li:nth-child(3)::after,
.en .service-content-box.vehicle-maintenance ul li:nth-child(3)::after {
  left: 0;
}

@media (max-width: 1199px) {
  .solution-wrap > div > div {
    padding: 0 18px;
  }

  .service-content-box ul li:nth-child(3) {
    padding-left: 0.625rem;
    margin-right: 0.625rem;
  }
  .service-content-box ul li:nth-child(3)::before {
    left: 0;
  }

  .service-content-box.vehicle-maintenance ul li:nth-child(2),
  .service-content-box.factory ul li:nth-child(2) {
    margin-right: 0.625rem;
  }
  .service-content-box.vehicle-maintenance ul li:nth-child(4) {
    padding-left: 0.625rem;
  }
  .service-content-box.vehicle-maintenance ul li:nth-child(4)::before {
    left: 0;
  }
  /* 영문 consulting */
  .en .service-content-box.ict-consulting ul li:nth-child(2) {
    padding-left: 0.625rem;
  }
  .en .service-content-box.ict-consulting ul li:nth-child(2)::before {
    left: 0;
  }

  /* 영문 product */
  .en .service-content-box.imported-car ul li:nth-child(2),
  .en .service-content-box.vehicle-maintenance ul li:nth-child(2) {
    padding-left: 0.625rem;
  }
  .en .service-content-box.imported-car ul li:nth-child(2)::before,
  .en .service-content-box.vehicle-maintenance ul li:nth-child(2)::before {
    left: 0;
  }

  .kr .service-content-box.web-product ul li:nth-child(3),
  .kr .service-content-box.web-product ul li:nth-child(4),
  .kr .service-content-box.app ul li:nth-child(3),
  .kr .service-content-box.app ul li:nth-child(4) {
    margin-right: 1.25rem;
    left: -0.625rem;
  }
}

@media (max-width: 991px) {
  .solution-wrap {
    flex-wrap: wrap;
    width: 90%;
  }
  .solution-wrap > div > p {
    text-align: left;
    margin: 0 0 0 2rem;
    font-size: 0.875rem;
    text-align: justify;
  }
  .solution-wrap > div > div span {
    font-size: 1rem;
  }
  .solution-wrap > div > div p {
    font-size: 0.875rem;
    margin-top: 1rem;
  }
  .product-bg {
    height: 100%;
    width: auto;
  }
  .service-content-box ul {
    margin-top: 1rem;
  }
  .service-content-box h4 {
    font-size: 1.5rem;
  }
  /* 영문 product */
  .en .service-content-box.imported-car ul li:nth-child(2) {
    padding-left: 0rem;
  }
  .en .service-content-box.imported-car ul li:nth-child(2)::before {
    left: -0.625rem;
  }

  /* 영문  */
  .en .service-content-box.app-product ul li:nth-child(2) {
    padding-left: 0.625rem;
  }
  .en .service-content-box.app-product ul li:nth-child(2)::before {
    left: 0;
  }
}

@media (max-width: 767px) {
  .solution-wrap > div {
    padding: 2rem 0;
    gap: 1rem;
  }
  .solution-wrap > div br {
    display: none;
  }
  /* 영문 consulting */
  .en .service-content-box.ict-consulting ul li:nth-child(2) {
    padding-left: 0;
  }
  .en .service-content-box.ict-consulting ul li:nth-child(2)::before {
    left: -0.625rem;
  }
  /* 영문 product */
  .en .service-content-box.vehicle-maintenance ul li:nth-child(2) {
    padding-left: 0;
  }
  .en .service-content-box.vehicle-maintenance ul li:nth-child(2)::before {
    left: -0.625rem;
  }

  /* 영문 product-development */
  .en .service-content-box.app-product ul li:nth-child(2),
  .en .service-content-box.app-product ul li:nth-child(3) {
    padding-left: 0;
  }
  .en .service-content-box.app-product ul li:nth-child(2)::before,
  .en .service-content-box.app-product ul li:nth-child(3)::before {
    left: -0.625rem;
  }

  .kr .service-content-box.web-product ul li:nth-child(3),
  .kr .service-content-box.app ul li:nth-child(3) {
    padding-left: 0.625rem;
  }
  .kr .service-content-box.web-product ul li:nth-child(3)::before,
  .kr .service-content-box.app ul li:nth-child(3)::before {
    left: 0rem;
  }
}

@media (max-width: 564px) {
  .solution-wrap > div {
    padding: 0;
  }
  .solution-wrap img {
    display: none; /* width: 10rem; */
  }
  .solution-wrap > div {
    flex-direction: column;
    margin: 0 0 2rem 0;
    text-align: center;
  }
  .solution-wrap > div > p {
    text-align: left;
    margin: 0 0 2rem 0;
    font-size: 0.875rem;
    text-align: center;
  }
  .solution-wrap > div > div strong {
    font-size: 1.5rem;
    margin-bottom: 0;
  }
}

@media (max-width: 530px) {
  /* 영문 consulting */
  .en .service-content-box.ict-consulting ul li:nth-child(2) {
    padding-left: 0.625rem;
  }
  .en .service-content-box.ict-consulting ul li:nth-child(2)::before {
    left: 0;
  }
  /* 영문 product */
  .en .service-content-box.vehicle-maintenance ul li:nth-child(2) {
    padding-left: 0.625rem;
  }
  .en .service-content-box.vehicle-maintenance ul li:nth-child(2)::before {
    left: 0rem;
  }
}

@media (max-width: 500px) {
  /* 영문 product-development */
  .en .service-content-box.app-product ul li:nth-child(3) {
    padding-left: 0.625rem;
  }
  .en .service-content-box.app-product ul li:nth-child(3)::before {
    left: 0;
  }
}

.status-wrap {
  display: flex;
  margin-top: 8rem;
}
.status-wrap .status-item {
  flex: 0 0 25%;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  justify-content: center;
}
.status-wrap .status-item .status-right span {
  font-size: 1.25rem;
}
.status-wrap .status-item .status-right p span.num {
  font-size: 3rem;
  font-weight: 700;
  color: #709af3;
}
.status-wrap .status-item .status-right p span {
  font-size: 2rem;
  font-weight: 500;
  color: #101010;
}
.status-wrap .status-item img {
  width: 80px;
}

@media (max-width: 480px) {
  /* 영문 product */
  .en .service-content-box.imported-car ul li:nth-child(2) {
    padding-left: 0.625rem;
  }
  .en .service-content-box.imported-car ul li:nth-child(2)::before {
    left: 0;
  }
}

@media (max-width: 1199px) {
  .status-wrap {
    flex-wrap: wrap;
    margin-top: 4rem;
  }
  .status-wrap .status-item {
    flex: 0 0 50%;
    margin-bottom: 2rem;
  }
}

@media (max-width: 767px) {
  .status-wrap {
    padding: 0 3rem;
  }
  .status-wrap .status-item {
    text-align: center;
  }
  .status-wrap .status-item img {
    display: none;
  }
  .status-wrap .status-item .status-right span {
    font-size: 1rem;
  }
  .status-wrap .status-item .status-right p span.num {
    font-size: 2rem;
  }
  .status-wrap .status-item .status-right p span {
    font-size: 1.25rem;
  }
}
.work-bg {
  position: relative;
}
.work-bg img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  width: auto;
  max-width: 100%; /* height: 101%; */
  opacity: 0.4;
  filter: blur(3px);
}
.wanted-wrap .wanted-item {
  text-align: center;
}
.wanted-wrap .wanted-item > div {
  margin-top: 1rem;
}
.wanted-wrap .wanted-item > div > span {
  font-size: 1.85rem;
  font-weight: 600;
  color: #4367dd;
}
.wanted-wrap .wanted-item > div > p {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  color: #8b8b8b;
}
.wanted-wrap .wanted-item img {
  height: 10rem;
}
.wanted-wrap .wanted-item {
  box-shadow: 2px 7px 20px #ddd;
  background: #fff;
  border-radius: 16px;
  height: 100%;
  padding: 4rem;
}
.wanted-wrap .wanted-item > p {
  word-break: keep-all;
}
.wanted-item br {
  display: none;
}
.wanted-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: #303030;
}
.wanted-title span {
  display: block;
  color: #4367dd;
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}
.wanted-text {
  display: flex;
  align-items: stretch;
  margin-top: 2.5rem;
  font-size: 1.125rem;
  line-height: 1.8;
  color: #444;
}

.wanted-box {
  background: #f7f7f7;
  padding: 2.5rem;
}

@media (max-width: 1329px) {
  .work-bg img {
    height: 100%;
    width: auto;
  }
}
@media (max-width: 1199px) {
  .wanted-wrap .wanted-item {
    padding: 3rem;
  }
  .wanted-wrap .wanted-item img {
    height: 6rem;
  }
  .wanted-wrap .wanted-item > div > span {
    font-size: 1.5rem;
  }
}

@media (max-width: 767px) and (min-width: 480px) {
  .wanted-wrap .wanted-item {
    display: -ms-grid;
    display: grid;
    grid-template-columns: max-content max-content;
    grid-template-rows: max-content auto;
    align-items: center;
    grid-column-gap: 1.5rem;
    padding: 2.5rem !important;
    text-align: left;
  }
  .wanted-wrap .wanted-item img {
    grid-area: span 2;
  }

  .wanted-text {
    word-break: keep-all;
    text-align: justify;
  }
  .wanted-text br {
    display: none;
  }
  .wanted-wrap .wanted-item > div {
    margin-top: 0;
  }
  .wanted-wrap .wanted-item > div > p {
    margin-bottom: 0;
  }
}

.benefit-wrap {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1rem;
}

.benefit-wrap div:has(.benefit-box) {
  width: 50%;
  /*height: 10rem;*/
}
.benefit-wrap div:has(.benefit-box):nth-child(odd) {
  padding-right: 0.5rem;
}
.benefit-wrap div:has(.benefit-box):nth-child(even) {
  padding-left: 0.5rem;
}

.benefit-box {
  overflow: hidden;
  background: #fff;
  padding: 2.25rem;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  border-radius: 1.5rem;
  box-shadow: 2px 2px 18px #ddd;
}
.benefit-box.bf01,
.benefit-box.bf02 {
  height: 13.5rem;
}

.benefit-box .benefit-list {
  display: flex;
  flex-direction: column;
  align-items: start;
  flex: 1;
}
.benefit-box .benefit-list ul {
  list-style: disc;
  padding-left: 1rem;
}
.benefit-box h4 {
  color: #4367dd;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0;
}
.benefit-box ul li {
  margin: 0.25rem 0;
  font-size: 14px;
}
.benefit-box img {
  width: 5rem;
  height: 5.6rem;
}

@media (max-width: 1199px) {
  .benefit-box h4 {
    font-size: 1.25rem;
  }
}

@media (max-width: 991px) {
  /*.benefit-box img {
    height: 45px;
  }*/
  .benefit-box {
    min-height: inherit;
  }
  .work-bg img {
    opacity: 0.2;
  }
}

.recruit-item {
  position: relative;
  padding: 2.5rem;
  box-shadow: 2px 7px 20px #ddd;
  border-radius: 24px;
  height: 100%;
}
.recruit-item p > span::before {
  content: "";
  width: 1rem;
  height: 1rem;
  display: inline-block;
  background: url(/images/calendar.svg);
  background-size: 1rem;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0.5;
  margin-right: 0.125rem;
}
.recruit-item p {
  display: flex;
  align-items: center;
}
.recruit-item p > span {
  display: flex;
  align-items: center; /* line-height: 21px; */
  font-size: 1rem;
  font-weight: 600;
  color: #a6a6a6;
  margin-right: 0.5rem;
}
.recruit-item h3 {
  line-height: 1.4;
}
.recruit-item .spec-wrap .spec-box {
  margin-bottom: 0.25rem;
  border-radius: 4px;
  display: inline-block;
  font-size: 0.8125rem;
  padding: 4px 6px;
  background: #e9edf4;
  color: #3d3d3d;
}
.recruit-item h3 {
  font-size: 1.5rem;
  color: #4367dd;
  word-break: keep-all;
  font-weight: 700;
}
.recruit-item h4 {
  font-size: 1rem;
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.recruit-item::after {
  opacity: 0;
  transition: 2s;
  display: block;
}
.recruit-item:hover::after {
  transition: 2s;
  border-radius: 24px;
  opacity: 1;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  content: "";
  position: absolute;
  border: 5px solid #4367dd;
  box-sizing: border-box;
}

.emply-flow {
  display: flex;
  gap: 1rem;
}
.flow-steps {
  display: flex;
  gap: 1rem;
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 2rem;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
}
.flow-item {
  gap: 1.25rem;
  display: flex;
  flex: 0 1 20%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 2rem;
  /*height: 11.5rem;*/
  position: relative;
}
.flow-item:nth-child(1) {
  flex: 0 1 25%;
}
.flow-item::after {
  left: -0.5rem;
  top: 50%;
  margin-top: -0.5rem;
  display: block;
  content: "";
  width: 1rem;
  height: 1rem;
  position: absolute;
  background: url(/images/flow-arrow-grey.svg) no-repeat;
  background-size: cover;
  z-index: 1;
}
.flow-item strong {
  display: block;
}
/*.flow-item img {
  height: 3.5rem;
}*/
.flow-item .txt-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.txt-wrap p.emply-title {
  margin: 0.5rem 0;
  color: #fff;
  background: #709af3;
  font-size: 0.875rem;
  display: inline-block;
  padding: 0 0.75rem;
  border-radius: 2rem;
  line-height: 1.375rem;
}
.flow-item .emply-title {
  width: fit-content;
  align-self: center;
}
.flow-item .txt-wrap p {
  font-size: 0.875rem;
}
br.flow {
  display: none;
}
.join-company {
  width: 15.25rem;
  padding: 2rem 1.5rem;
  background: #e4ecff;
  border-radius: 2rem;
}
.join-company .flow-item.flow05 {
  border: 0;
  position: relative;
  display: flex;
  height: 11.5rem;
}
.join-company .flow-item.flow05::after {
  left: -3.5rem;
  z-index: 1;
  top: 50%;
  margin-top: -1.5rem;
  display: block;
  content: "";
  width: 3rem;
  height: 3rem;
  position: absolute;
  background: url(/images/flow-arrow.svg) no-repeat;
  background-size: cover;
}
.flow-item:first-child::after {
  display: none;
}
@media (max-width: 991px) {
  .emply-flow {
    flex-wrap: wrap;
    flex-direction: column;
  }
  .flow-steps {
    padding: 2rem 0;
  }
  .emply-flow .join-company {
    width: inherit;
    padding: 2rem 1.5rem;
  }
  .join-company .flow-item.flow05::after {
    left: 50%;
    top: -2.75rem;
    transform: translateX(-50%) rotate(90deg);
  }
  .flow-steps .flow-item {
    height: 16rem !important;
  }
  .join-company .flow-item.flow05 {
    height: 16rem !important;
  }
  br.flow {
    display: block;
  }
}

@media (max-width: 575px) {
  .emply-flow {
  }
  .flow-steps {
    flex-wrap: wrap;
    flex-direction: column;
    gap: 4rem;
  }
  .flow-item::after {
    display: none;
  }
  .txt-wrap p.emply-title {
    height: auto !important;
    line-height: 1.5rem;
  }
  br.flow {
    display: none;
  }
}

@media (max-width: 379px) {
  .flow-item {
    flex: 0 0 100%;
    padding: 1rem;
  }
}

.qna-subtext {
  font-size: 1.875rem;
  line-height: 1.6;
  letter-spacing: -0.07em;
}

@media (max-width: 991px) {
  .qna-subtext {
    font-size: 1rem;
    text-align: center;
    font-weight: 400;
  }
  .qna-subtext br {
    display: none;
  }
}

.logo-box {
  border-radius: 1rem;
  position: relative;
  padding: 2rem 2rem 4rem 2rem;
  background: #fff;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.logo-box p {
  position: absolute;
  bottom: 0;
  padding: 1.5rem 0;
}

.status-table {
  background: #fff;
  font-size: 1.125rem;
  vertical-align: middle;
  border-top: 3px solid #000000;
}
.status-table td,
.status-table th {
  padding: 1rem;
}
.status-table th {
  background: #f2f2f2;
  white-space: nowrap;
}

@media (max-width: 991px) {
  .status-table {
    font-size: 1rem;
  }
}

.section.card-slide-wrap {
  height: 100vh;
  position: relative; /* background: url(/images/slide-wrap-bg.jpg); */ /* background-size:cover; */
  display: flex;
  background: #000;
  overflow: hidden;
  background-attachment: fixed;
  align-items: center;
}
.section.card-slide-wrap video {
  position: absolute;
  opacity: 0.3;
  left: 0;
  right: 0;
  top: 0;
  filter: blur(5px);
  bottom: 0;
  width: 100vw;
}
.section.card-slide-wrap .container {
  overflow: hidden;
}
.card-slide-wrap .top-text h3 {
  color: #fff;
}

.card-slide-wrap .card-item {
  height: 21rem;
  color: #fff;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.card-slide-wrap .card-item::after {
  right: -1rem;
  top: 10px;
  bottom: 10px;
  content: "";
  width: 1px;
  height: auto;
  position: absolute;
  background: #fff;
  display: block;
}
.card-slide-wrap .card-item img {
  height: 3.5rem;
  margin-bottom: 2rem;
  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(133deg) brightness(104%) contrast(101%);
}
.card-slide-wrap .card-item h4 {
  font-size: 1.25rem;
  margin-bottom: 1rem;
  font-weight: 700;
}
.card-slide-wrap .card-item p {
  font-size: 0.875rem;
}

.slide-btn-wrap {
  width: 100%;
  position: relative;
  height: 20px;
  display: flex;
  display: none; /* flex: 0; */
  gap: 1.25rem;
  margin-bottom: 1.5rem;
  align-items: center;
  justify-content: center;
}
#slide-next,
#slide-prev {
  position: relative;
  display: inline-block;
  right: inherit;
  width: 40px;
  left: inherit;
  height: 100%;
  margin: 0;
  background: none;
  top: inherit;
}
#slide-next::after {
  content: "";
  background: url(/images/slide-next.png);
  width: 40px;
  height: 20px;
  display: block;
  background-size: 100%;
}
#slide-prev::after {
  content: "";
  background: url(/images/slide-prev.png);
  width: 40px;
  height: 20px;
  display: block;
  background-size: 100%;
}

@media screen and (max-width: 1199px) {
  .section.card-slide-wrap {
    height: auto;
  }
  .card-slide-wrap {
    padding: 0 3rem;
  }
  .card-slide-wrap .card-item {
    height: auto;
  }
  .slide-btn-wrap {
    display: flex;
  }
}
.vision .container {
  z-index: 1;
}
.offer-wrap {
  margin-top: 4rem;
}
.offer-box img {
  width: 3rem;
}
.offer-box {
  height: 100%;
  display: flex;
  align-items: flex-start;
  flex-direction: column;
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgb(0, 0, 0, 0.13);
  padding: 4rem 3rem 5rem 3rem;
  gap: 1rem;
}
.offer-box span {
  font-size: 1rem;
  margin: 0.5rem 0;
  opacity: 0.6;
}
.offer-box h4 {
  font-weight: 600;
  color: #4367dd;
  font-size: 2.375rem;
  /*margin-bottom: 2rem;*/
  word-break: break-all;
}
.offer-box p {
  font-size: 0.875rem;
  /*margin-bottom: 3rem;*/
  height: 5rem;
}
.offer-box a {
  /* border: 1px solid #000; */
  display: inline-block;
  align-items: start; /* padding: 0.5rem 1.5rem; */
  border-radius: 3rem;
  align-items: center;
  display: flex; /* padding-left: 2rem; */
  transition: 0.3s;
}
.offer-box a::after {
  transition: 500ms;
  width: 20px;
  height: 20px;
  content: "";
  display: inline-block;
  background: url(/images/chevron-right.svg);
  margin-left: 0.25rem;
  filter: invert(0%) sepia(2%) saturate(2217%) hue-rotate(338deg) brightness(15%) contrast(81%);
}
.offer-box a:hover {
  padding-left: 0.5rem;
  font-weight: 600;
}
.offer-box a:hover::after {
  filter: invert(37%) sepia(36%) saturate(3000%) hue-rotate(194deg) brightness(60%) contrast(92%);
}
@media screen and (max-width: 1199px) {
  .offer-box h4 {
    font-size: 2rem;
  }
  .offer-box {
    padding: 2rem;
  }
  .offer-box p {
    margin-bottom: 1rem;
  }
  .offer-box p br {
    display: none;
  }
}

@media screen and (max-width: 991px) {
  .offer-box h4 {
    font-size: 1.75rem;
    letter-spacing: -0.08rem;
  }
  .offer-box span {
    margin-top: 1rem;
  }
}

@media screen and (max-width: 767px) {
  .offer-box {
    margin-bottom: 1.25rem;
    height: auto;
  }
  .offer-box p {
    height: auto;
  }
}

.org-wrap {
  position: relative;
  padding: 4rem 2rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/*.org-wrap::after{height: 30rem; width:1px; content:'';background: #ebebeb; display:block; position:absolute;top: 4rem;z-index: 0;} */
.org-wrap::after {
  height: 22rem;
  width: 1px;
  content: "";
  background: #ebebeb;
  display: block;
  position: absolute;
  top: 4rem; /* bottom: 4rem; */
  z-index: 0;
}
.org-wrap .depth01 span {
  font-size: 1.25rem;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #3f51b5;
  border-radius: 300px;
  color: #fff;
  width: 140px;
  border: 7px solid #5573be;
  height: 140px;
}
.org-wrap span {
  box-shadow: 3px 1px 11px rgb(0 0 0 / 13%);
  display: block;
  text-align: center;
  padding: 1.5rem;
}
.org-wrap .depth03,
.org-wrap .depth04 {
  display: flex;
  width: 60%;
  align-items: flex-start;
}
.org-wrap > div {
  z-index: 1;
  position: relative;
}
.org-wrap .depth02,
.org-wrap .depth03 {
  margin-top: 5rem;
  font-weight: 500;
}
.org-wrap .depth02 span {
  background: #2d345f;
  padding: 1rem 2.5rem;
  border-radius: 4px;
  font-size: 1.125rem;
  color: #fff;
}
.org-wrap .depth03 > span,
.org-wrap .depth03 > div > span {
  flex: 1;
  margin: 0 1rem;
  padding: 1rem 1.5rem;
  border-radius: 4px;
  background: #f2f9ff;
  letter-spacing: -0.02em;
  z-index: 20;
  justify-content: center;
}
.org-wrap .depth03 > span:first-child::after {
  height: 2rem;
  width: 1px;
  content: "";
  background: #ebebeb;
  display: block;
  position: absolute;
  top: -2rem;
  left: 50%;
  margin-left: -1px;
  z-index: -1;
}
.org-wrap > div > span {
  position: relative;
}
.org-wrap .depth03 > span,
.org-wrap .depth03 > div {
  width: 33.333%;
  justify-content: center;
  display: flex;
  flex-direction: column;
}
.org-wrap .depth03 > span:last-child::before {
  height: 10rem;
}
/*.org-wrap .depth03::before{height: 14rem;width: 1px; content:'';background: #ebebeb; display:block; position:absolute;top: -2rem;right: 16.5%;z-index: -1;} */
.org-wrap .depth03::before {
  height: 3rem;
  width: 1px;
  content: "";
  background: #ebebeb;
  display: block;
  position: absolute;
  top: -2rem;
  right: 16.5%;
  z-index: -1;
}
.org-wrap .depth03::after {
  height: 1px;
  width: 67%;
  content: "";
  background: #ebebeb;
  display: block;
  position: absolute;
  top: -2rem;
  left: 16.5%;
  right: 0;
  z-index: 0;
}
.org-wrap .depth04 > span {
  width: 100%;
  flex: 1;
  padding: 1rem 1.5rem;
  background: #fff;
  justify-content: center;
  position: relative;
}
.org-wrap .depth04 > span {
  margin-bottom: 1rem;
}
.org-wrap .depth04 {
  padding-top: 2rem;
  flex-direction: column;
  width: auto;
  margin: 0 1rem;
  flex: 1;
}
.org-wrap .depth05 {
  padding-left: 40%;
  width: 60%;
  display: flex;
  justify-content: flex-end;
  padding-top: 1rem;
}
.org-wrap .depth05 > span {
  width: 100%;
  margin: 0 1rem;
  padding: 1rem 1.5rem;
  background: #fff;
  font-weight: 500;
}

@media (max-width: 1199px) {
  .org-wrap .depth03 {
    width: 80%;
  }
}

@media (max-width: 991px) {
  .org-wrap .depth03 {
    width: 100%;
  }
  .content-wrap .container {
    flex-direction: column;
  }
  .content-wrap .container .tit {
    padding-bottom: 0;
  }
  .content-wrap .container {
    width: auto !important;
  }
  .content-wrap .container > div:last-child {
    width: auto !important;
  }
  .vision-sub .title-wrap {
    margin-bottom: 2rem !important;
  }
}
@media (max-width: 767px) {
  .org-wrap {
    padding: 3rem 1rem;
  }
  .org-wrap .depth03 {
    margin-top: 3rem;
  }
  .wanted-item br {
    display: block;
  }
}

@media (max-width: 575px) {
  .org-wrap .depth02 {
    width: 100%;
  }
  .org-wrap .depth03 {
    flex-direction: column;
    align-items: flex-end;
    padding-left: 4rem;
    justify-content: flex-end;
  }
  .org-wrap .depth03 > span,
  .org-wrap .depth03 > div,
  .org-wrap .depth03 > div > span {
    width: 100%;
    margin: 0; /* position: relative; */
  }
  .org-wrap .depth03 > span,
  .org-wrap .depth03 > div {
    margin-bottom: 1rem;
    position: relative;
  }
  .org-wrap::after {
    height: 15rem;
  }

  .org-wrap .depth03::before {
    left: 1.5rem;
    height: 102%;
    top: -3rem;
  }

  .org-wrap .depth04 {
    margin: 0;
  }
  .org-wrap .depth03 > span::before,
  .org-wrap .depth03 > div > span::before {
    content: "";
    position: absolute;
    left: -2.5rem;
    height: 1px;
    width: 2.5rem;
    top: 1.75rem;
    display: block;
    background: #ddd;
    margin-top: -0.5px;
  }

  .org-wrap .depth04 {
    margin-left: 2rem;
  }
  .org-wrap .depth04 > span::before {
    content: "";
    position: absolute;
    left: -3rem;
    height: 1px;
    width: 3rem;
    top: 50%;
    display: block;
    background: #ddd;
    margin-top: -0.5px;
  }
  .org-wrap .depth03 > div > span::after {
    content: "";
    position: absolute;
    left: -1.05rem;
    bottom: 2.7rem;
    width: 1px; /* height: 75%; */
    top: 1.75rem;
    display: block;
    background: #ddd;
    margin-top: -0.5px;
  }
  .org-wrap .depth03 > span:first-child::after {
    display: none;
  }
  .org-wrap .depth03::after {
    display: none;
  }
  /* 회사소개, 사업소개 */
  .content-wrap .container .content-box .sub-tit p::before {
    top: -2rem !important;
    left: 0rem !important;
  }
}

/* 회사소개, 사업소개 */
.content-wrap .container {
  display: flex;
  width: 84rem;
}

.content-wrap .container > div:first-child {
  width: 26rem;
}
.content-wrap .container > div:last-child {
  width: 58rem;
}
.content-wrap .container .tit {
  font-size: 2.1875rem;
  color: #a8a8a8;
  font-weight: 700;
}
.content-wrap .container .content-box {
  display: flex;
  flex-direction: column;
}
.content-wrap .container .content-box .sub-tit,
.content-wrap .container .content-box .content {
  width: 100%;
}
.content-wrap .container .content-box .sub-tit p {
  position: relative;
  line-height: 1.3;
}

.content-wrap .container .content-box .sub-tit p::before {
  content: url("../images/double_quotation_mark.svg");
  position: absolute;
  left: -2.5rem;
  top: -0.875rem;
}

.content-wrap .container .content-box .content {
  line-height: 1.5rem;
  padding-top: 1.5rem;
}

/* 개인정보처리방침, 이메일무단수집거부 모달 */
.modal-body {
  overflow-y: scroll;
  max-height: 600px;
}

.modal.show .modal-dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

@media (max-width: 991px) {
  .modal-dialog {
    width: 700px;
  }
  .modal-body {
    max-height: 450px;
  }
}

@media (max-width: 768px) {
  .modal-dialog {
    width: 500px;
  }
}

@media (max-width: 576px) {
  .modal-dialog {
    width: 380px;
  }
  .modal-body {
    max-height: 400px;
  }
}

@media (max-width: 430px) {
  .modal-dialog {
    width: 360px;
  }
}

/* contact us 개인정보처리방침 */
.privacy-modal {
  font-weight: 500;
}
.privacy-modal.ko {
  font-weight: 600;
}
.privacy-modal:hover {
  text-decoration: underline;
}