@charset "utf-8";

/* main visual */
.main-visual {
  width: 100%;
  height: 100%;
  position: relative;
}
.main-visual .visual-slider {
}
.main-visual .visual-slider li {
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;
  text-align: center;
}
.main-visual .visual-slider li .mi-txt {
  width: 100%;
  padding: 0 24px;
  color: #fff;
}
.main-visual .visual-slider li .mi-txt h3 {
  font-weight: 800;
  font-size: 3em;
  white-space: pre-line;
  letter-spacing: -0.06em;
  line-height: 1.2;
}
.main-visual .visual-slider li .mi-txt p {
  font-size: 1.583em;
  white-space: pre-line;
  letter-spacing: -0.06em;
  line-height: 1.4;
  margin-top: 48px;
}
.main-visual .visual-slider li .mi-txt a {
  display: inline-block;
  padding: 16px 20px;
  margin-top: 72px;
  background-color: #59b4d5;
  color: #fff;
  font-weight: 600;
  font-size: 0.833em;
}
.main-visual .visual-slider li .mi-txt a:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  width: 96px;
  height: 1px;
  margin-right: 32px;
  background-color: currentColor;
}
.main-visual .visual-slider li .mi-txt a:hover {
  background-color: #ffd307;
  color: #000;
}

.main-visual .slick-dots {
  width: 100%;
  height: auto;
  position: absolute;
  bottom: 4em;
  left: 0;
  text-align: center;
}
.main-visual .slick-dots li {
  display: inline-block;
  font-size: 0;
  margin: 0 4px;
}
.main-visual .slick-dots li button {
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background-color: rgba(255, 255, 255, 0.3);
}
.main-visual .slick-dots .slick-active button {
  background-color: #fff;
}

.main-visual .visual-slider li.vis-1 {
  background-image: url("/image/main/bg_visual1.jpg");
}
.main-visual .visual-slider li.vis-2 {
  background-image: url("/image/main/bg_visual2.jpg");
}
.main-visual .visual-slider li.vis-3 {
  background-image: url("/image/main/bg_visual3.jpg");
}

@media screen and (max-width: 667px) {
  .main-visual .visual-slider li .mi-txt {
  }
  .main-visual .visual-slider li .mi-txt h3 {
    font-size: 2em;
    letter-spacing: -0.04em;
  }
  .main-visual .visual-slider li .mi-txt p {
    font-size: 1.2em;
    white-space: normal;
    margin-top: 24px;
  }
  .main-visual .visual-slider li .mi-txt a {
    font-size: 1em;
    margin-top: 32px;
  }
  .main-visual .visual-slider li .mi-txt a:before {
    width: 24px;
    margin-right: 8px;
  }
}

/* service */
.service {
  width: 100%;
  max-width: 1440px;
  height: auto;
  padding: 4em 20px 5.333em;
  margin: 0 auto;
  text-align: center;
}
.service > h3 {
  font-weight: 800;
  font-size: 1.792em;
  letter-spacing: -0.06em;
}
.service > p {
  font-size: 1.042em;
  margin-top: 1rem;
}
.service ul {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.service ul li {
}
.service ul li a {
  display: block;
  width: 100%;
  height: 100%;
}
.service ul li a i {
  display: block;
}
.service ul li a mark {
  display: block;
  width: 100%;
  line-height: 1.2;
}
.service ul li a em {
  display: block;
  width: 100%;
  line-height: 1.2;
}

.service .quick-1 {
  margin-top: 3em;
}
.service .quick-1 li {
  width: 33.33%;
  height: 100%;
  padding: 0 10px;
  color: #fff;
}
.service .quick-1 li div {
  width: 100%;
  height: 100%;
  padding: 1em;
  min-height: 16.458em;
  display: table;
}
.service .quick-1 li div a {
  display: table-cell;
  vertical-align: middle;
}
.service .quick-1 li div a mark {
  font-weight: 800;
  font-size: 1.417em;
}
.service .quick-1 li div a em {
  font-size: 0.792em;
  margin-top: 16px;
}
.service .quick-1 li:nth-child(1) div {
  background-color: #23425c;
}
.service .quick-1 li:nth-child(2) div {
  background-color: #034eb2;
}
.service .quick-1 li:nth-child(3) div {
  background-color: #0c2136;
}
/* hover */
.service .quick-1 li div:hover {
  border: 2em solid;
  color: #000;
  background-color: #fff;
}
.service .quick-1 li:nth-child(1) div:hover {
  border-color: #23425c;
}
.service .quick-1 li:nth-child(2) div:hover {
  border-color: #034eb2;
}
.service .quick-1 li:nth-child(3) div:hover {
  border-color: #0c2136;
}

.service .quick-2 {
  margin-top: 5.333em;
}
.service .quick-2 li {
  width: 20%;
}
.service .quick-2 li i {
  width: 2.667em;
  height: 2.667em;
  margin: 0 auto 1.333em;
  background-size: 100%;
}
.service .quick-2 li mark {
}
.service .quick-2 li em {
  font-weight: 800;
  font-size: 0.667em;
  margin-top: 1em;
}
.service .quick-2 li:nth-child(1) i {
  background-image: url("/image/main/ico_ser1.png");
}
.service .quick-2 li:nth-child(2) i {
  background-image: url("/image/main/ico_ser2.png");
}
.service .quick-2 li:nth-child(3) i {
  background-image: url("/image/main/ico_ser3.png");
}
.service .quick-2 li:nth-child(4) i {
  background-image: url("/image/main/ico_ser4.png");
}
.service .quick-2 li:nth-child(5) i {
  background-image: url("/image/main/ico_ser5.png");
}
.service .quick-2 li a:hover mark {
  font-weight: 800;
  color: #06546d;
}

@media screen and (max-width: 1194px) {
  /* hover */
  .service .quick-1 li div:hover {
    border: 1em solid;
  }
}
@media screen and (max-width: 926px) {
  .service .quick-2 {
    justify-content: flex-start;
  }
  .service .quick-2 li {
    width: 48%;
    margin: 1%;
  }
  .service .quick-2 li a {
    padding: 16px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #dddcdc;
  }
  .service .quick-2 li i {
    margin: 0;
  }
  .service .quick-2 li em {
    display: none;
  }
}
@media screen and (max-width: 667px) {
  .service {
    padding-bottom: 3em;
  }
  .service .quick-1 li {
    width: 100%;
    padding: 8px 0;
  }
  .service .quick-1 li div {
    min-height: 200px;
  }
  .service .quick-1 li div a mark {
    font-size: 24px;
  }
  .service .quick-1 li div a em {
    font-size: 16px;
  }
  .service .quick-1 li div:hover {
    border-width: 24px;
  }

  .service .quick-2 {
    margin-top: 3em;
  }
  .service .quick-2 li {
    width: 100%;
  }
  .service .quick-2 li i {
    width: 32px;
    height: 32px;
  }
}

/* form kml */
.frm-kml {
  width: 100%;
  height: auto;
  padding: 5.333em 0;
  background: url("/image/main/bg_frm.jpg") top center / cover no-repeat;
  color: #fff;
  text-align: center;
}
.frm-kml .inner {
  width: 100%;
  max-width: 1440px;
  height: auto;
  margin: 0 auto;
  font-size: 0.833em;
}
.frm-kml .inner > h3 {
  font-weight: 600;
  font-size: 1.7em;
}
.frm-kml .inner > p {
  font-size: 1em;
  margin-top: 20px;
}
.frm-kml .inner ul {
  width: 100%;
  max-width: 1280px;
  height: auto;
  margin: 2em auto 0;
  display: flex;
  flex-wrap: wrap;
}
.frm-kml .inner ul li {
  width: 33.33%;
  padding: 0 10px;
  margin: 16px 0;
}
.frm-kml .inner ul li.w100 {
  width: 66%;
}
.frm-kml .inner ul li.w50 {
  width: 50%;
}
/* 내용 클래스명 추가 */
.frm-kml .inner ul li.contents {
  width: 100%;
}
.frm-kml .inner ul li label {
  display: block;
  padding-bottom: 8px;
  font-weight: 600;
  text-align: left;
}
.frm-kml .inner ul li input {
  display: block;
  width: 100%;
  padding: 10px 16px;
  min-height: 48px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: none;
}
.frm-kml .inner ul li textarea {
  display: block;
  width: 100%;
  height: 10em;
  padding: 1.2em;
  font-size: 0.909em;
  padding: 10px 16px;
  min-height: 48px;
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
  outline: none;
  resize: none;
  border-radius: 0;
}
.frm-kml .inner ul li span {
  display: block;
  width: 100%;
  text-align: left;
  padding-top: 16px;
  font-size: 0.9em;
  line-height: 1.3;
}
.frm-kml .inner ul li input[type="file"] {
  width: 100%;
}
.frm-kml .inner ul li input:focus {
  background-color: rgba(255, 255, 255, 1);
  color: #000;
}
.frm-kml .inner ul li textarea:focus {
  background-color: rgba(255, 255, 255, 1);
  color: #000;
}
.frm-kml .inner .agree_ok {
  width: 100%;
  max-width: 1280px;
  height: auto;
  padding: 0 10px;
  margin: 16px auto 0;
  text-align: left;
}
.frm-kml .inner button[type="submit"],
.frm-kml .inner .bt-more {
  display: inline-block;
  width: 17.5em;
  height: 3.7em;
  line-height: 3.7em;
  margin-top: 1.6em;
  font-weight: 600;
  background-color: #fff;
  color: #000;
}
.frm-kml .inner button[type="submit"] .i-arrow,
.frm-kml .inner .bt-more .i-arrow {
  display: inline-block;
  vertical-align: middle;
  margin: -4px 0 0 24px;
}
.frm-kml .inner button[type="button"],
.frm-kml .inner .bt-more {
  display: inline-block;
  width: 17.5em;
  height: 3.7em;
  line-height: 3.7em;
  margin-top: 1.6em;
  font-weight: 600;
  background-color: #fff;
  color: #000;
}
.frm-kml .inner button[type="button"] .i-arrow,
.frm-kml .inner .bt-more .i-arrow {
  display: inline-block;
  vertical-align: middle;
  margin: -4px 0 0 24px;
}
.frm-kml .inner .bt-more {
  display: none;
}

@media screen and (max-width: 926px) {
  .frm-kml .inner .frm-wrap {
    display: none;
  }
  .frm-kml .inner .bt-more {
    display: inline-block;
  }
}
@media screen and (max-width: 667px) {
  .frm-kml {
    padding: 3em 0;
  }
}

/* about */
.about-kml {
  width: 100%;
  max-width: 1440px;
  height: auto;
  padding: 5.333em 20px;
  margin: 0 auto;
  text-align: center;
}
.about-kml h3 {
  font-weight: 800;
  font-size: 2em;
  letter-spacing: -0.04em;
  line-height: 1.4;
  white-space: pre-line;
}
.about-kml h3 mark {
  display: inline-block;
  position: relative;
}
.about-kml h3 mark:after {
  content: "";
  display: block;
  width: 100%;
  height: 0.5em;
  background-color: #59b4d5;
  position: absolute;
  bottom: 0.292em;
  left: 0;
  z-index: -1;
}
.about-kml p {
  margin-top: 0.842em;
  font-size: 1.167em;
  line-height: 1.2;
  white-space: pre-line;
}
.about-kml ul {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 4em;
}
.about-kml ul li {
  width: 24%;
  padding: 0 10px;
  border-radius: 20px;
  font-weight: 600;
}
.about-kml ul li a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 48px 0;
  color: #fff;
}
.about-kml ul li:nth-child(1) {
  background: url("/image/main/bg_q1.jpg") center / cover no-repeat;
}
.about-kml ul li:nth-child(2) {
  background: url("/image/main/bg_q2.jpg") left center / cover no-repeat;
}
.about-kml ul li:nth-child(3) {
  background: url("/image/main/bg_q3.jpg") left center / cover no-repeat;
}
.about-kml ul li:nth-child(4) {
  background: url("/image/main/bg_q4.jpg") left center / cover no-repeat;
}

@media screen and (max-width: 667px) {
  .about-kml {
    padding: 3em 20px;
  }
  .about-kml h3 {
    font-size: 1.8em;
  }
  .about-kml p {
    font-size: 1em;
  }
  .about-kml ul {
    margin-top: 36px;
  }
  .about-kml ul li {
    width: 48%;
    padding: 0 10px;
    margin: 8px 0;
  }
}