@charset "UTF-8";
/*mobile css*/

@media all and (max-width: 1620px) {
  header .inner {
    padding-left: 2vw;
    padding-right: 2vw;
  }
  .inner {
    padding-left: 3%;
    padding-right: 3%;
  }
  footer .inner {
    padding-left: 2vw;
    padding-right: 2vw;
  }
  #sct5 {
    padding-left: 3%;
    padding-right: 3%;
  }
}

@media all and (max-width: 1440px) {
  .sct {
    margin-top: 10%;
  }
  #sct1 article {
    margin-bottom: 5%;
  }
  .mainVisual .swiper-slide .visualTxt div {
    row-gap: 3vw;
  }

  .mainVisual .swiper-slide .visualTxt div h2 {
    font-size: 2.5em;
    line-height: 1.3;
  }
  .mainVisual .swiper-slide .visualTxt div h2 b {
    font-size: 1.2em;
  }

  .mainVisual .swiper-slide .visualTxt div p {
    font-size: 1.1em;
    line-height: 1.4;
  }

  .mainVisual .swiper-pagination {
    bottom: 2vw;
  }

  #sct1 article {
    font-size: 2em;
  }

  #sct1 .overView li dl dt {
    position: absolute;
    top: 2vw;
    left: 2vw;
    font-size: 1.4em;
  }

  #sct1 .overView li dl dd {
    font-size: 3em;
  }
  .sctRowTit h2,
  .sctColumTit h2 {
    font-size: 2.7em;
  }
  .sctRowTit h3,
  .sctColumTit h3 {
    font-size: 2em;
  }

  #sct2 .sctRowTit h3 {
    margin-left: 2vw;
  }
  #sct2 .sctRowTit p {
    font-size: 1.3em;
    width: 40%;
  }

  #sct2 .serviceArea ul li {
    min-height: 40vw;
    padding-top: 3vw;
  }
  #sct2 .serviceArea ul li dl dt {
    font-size: 1.5em;
  }
  #sct2 .serviceArea ul li dl dd {
    font-size: 1.1em;
  }

  #sct3 .tabMenu ul li a {
    font-size: 1.2em;
  }
  .partnerArea {
    min-height: unset;
    height: 20vw;
  }
  #sct4 .sctRowTit {
    column-gap: 2vw;
  }

  .sct5Btn {
    min-width: unset;
    width: 15vw;
    padding: 1.5rem 0;
    font-size: 1.2em;
    border-radius: 1rem;
  }

  .appDown {
    margin-right: 1em;
  }

  footer::before {
    font-size: 15vw;
    bottom: 60%;
  }
}

/* mini desktop */
@media all and (max-width: 1200px) {
  .mainVisual .swiper {
    border-radius: 1em;
  }
  .mainVisual .swiper-slide .visualTxt div h2 {
    font-size: 2em;
  }
  .stepContent {
    padding: 3vw;
  }
  .stepContent p {
    font-size: 1.1em;
  }
  #sct1 .overView li dl dt {
    font-size: 1.2em;
  }
  #sct1 .overView li dl dd {
    font-size: 2em;
  }
  #sct2 .serviceArea ul li {
    border-radius: 1em;
  }
  #sct1 .overView li {
    border-radius: 1em;
  }

  .stepWrap {
    border-radius: 1em;
  }
  .bannerArea {
    border-radius: 1em;
  }
}

/* tablet */
@media all and (max-width: 1080px) {
  .mo {
    display: flex;
  }
  .pc {
    display: none;
  }
  header {
    height: auto;
  }
  header .inner {
    padding: 0;
  }
  header .inner .gnb .mo {
    flex-wrap: wrap;
    justify-content: center;
    width: inherit;
    flex-direction: column;
  }
  header .inner .gnb .mo h1 {
    text-align: center;
    padding-top: 2vw;
    padding-bottom: 1vw;
    border-bottom: 1px solid #ddd;
  }
  header .inner .gnb .mo ul {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    height: auto;
    padding: 1vw 2vw 2vw;
    justify-content: space-evenly;
    align-items: center;
  }
  header .inner .gnb .mo ul a {
    display: block;
    font-weight: 700;
  }
  header .inner .gnb .mo ul > a {
    background: #222222;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    border-radius: 0.5rem;
    padding: 1.5vw;
  }

  .mainVisual {
    padding-left: 3%;
    padding-right: 3%;
  }
  .mainVisual .swiper-slide .visualTxt div h2 {
    font-size: 1.5em;
  }
  .mainVisual .swiper-slide .visualTxt div p {
    font-size: 1em;
  }

  #sct1 article {
    font-size: 1.5em;
  }
  .sctRowTit h2,
  .sctColumTit h2 {
    font-size: 1.7em;
  }
  .sctRowTit h3,
  .sctColumTit h3 {
    font-size: 1.5em;
  }
  #sct2 .sctRowTit p {
    font-size: 1em;
  }
  #sct2 .serviceArea ul li dl dt {
    font-size: 1.2em;
  }
  #sct2 .serviceArea ul li {
    min-height: 35vw;
  }

  #sct3 .tabMenu ul li a {
    font-size: 1.1em;
    width: 10vw;
  }
  .stepContent {
    justify-content: center;
  }

  #sct5 {
    margin-top: 5%;
    margin-bottom: 5%;
  }
  .stepControl {
    display: none;
  }
  .stepContent h4 {
    font-size: 1.2em;
  }

  footer::before {
    display: none;
  }
}

@media all and (max-width: 1024px) {
  #sct1 .overView li {
    flex: 1 1 33%;
    aspect-ratio: unset;
    min-height: 25vw;
  }
  #sct2 .serviceArea ul li:not(:hover) {
    flex-basis: 35%;
  }
  #sct2 .serviceArea ul li:hover {
    flex-basis: 55%;
  }

  .partnerTrack li {
    width: 25%;
    height: auto;
    aspect-ratio: 260/90;
  }
}

@media all and (max-width: 900px) {
  .mainVisual .swiper {
    aspect-ratio: unset;
  }
  .mainVisual .swiper-slide {
    flex-direction: column-reverse;
  }
  .mainVisual .swiper-slide .visualTxt {
    width: 45%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    height: auto;
    padding: 3vw;
    border-radius: 0 2vw 2vw 0;
  }

  .mainVisual .swiper-slide figure {
    width: inherit;
    height: auto;
    aspect-ratio: 1.2/1;
    overflow: hidden;
  }
  .mainVisual .swiper-pagination {
    left: unset;
    right: 8%;
    width: max-content;
    transform: translateX(0%);
  }

  footer .inner .leftArea {
    row-gap: 1em;
  }
  footer .inner {
    row-gap: 2em;
  }
}

/* big mobile */
@media all and (max-width: 768px) {
  body {
    font-size: 1.5rem;
  }
  .mainVisual .swiper-slide figure {
    aspect-ratio: 1/1;
  }
  .mainVisual .swiper-slide .visualTxt {
    width: 100%;
    bottom: 0;
    top: unset;
    transform: translateY(0%);
  }
  .mainVisual .swiper-slide .visualTxt div {
    width: 100%;
  }
  .mainVisual .swiper-slide .visualTxt div h2 {
    font-size: 1.2em;
  }
  #sct3 .tabMenu ul li a {
    width: auto;
    padding: 1em;
  }
  .sctColumTit {
    left: 2vw;
    top: 2vw;
  }
  .buttonArea {
    right: 2vw;
    bottom: 2vw;
  }
  .partnerArea {
    height: auto;
    padding: 85px 0;
  }
  .bannerArea {
    aspect-ratio: 3/1.5;
  }
  .sct5Btn {
    width: auto;
    padding: 1.2rem 2rem;
  }
}

@media all and (max-width: 650px) {
  body {
    font-size: 1.5rem;
  }
  #sct2 .sctRowTit {
    flex-direction: column;
    row-gap: 1em;
  }
  #sct2 .sctRowTit p {
    margin-left: unset;
    width: 56%;
    text-align: center;
    word-break: keep-all;
  }
  .stepWrap {
    flex-direction: column;
    gap: 1em;
  }
  footer .inner .leftArea {
    flex-direction: column;
  }
  footer .inner .leftArea ul {
    margin-left: 0;
    gap: 3em;
  }
  footer .inner {
    flex-direction: column;
    justify-content: unset;
  }
  #popupForm form {
    width: 90%;
    aspect-ratio: unset;
    padding: 3vw;
  }
}

/* middle mobile */
@media all and (max-width: 550px) {
  * {
    word-break: keep-all;
  }
  #sct2 .serviceArea ul li {
    flex-basis: 100%;
    padding-bottom: 3vw;
  }
  #sct2 .serviceArea ul li:not(:hover) {
    flex-basis: 100%;
  }
  #sct2 .serviceArea ul li:hover {
    flex-basis: 100%;
  }
  #sct2 .serviceArea ul li dl dd {
    min-height: unset;
  }
  #sct3 .sctRowTit {
    flex-direction: column;
    row-gap: 1em;
  }
  #sct4 .sctRowTit {
    flex-direction: column;
    row-gap: 1em;
  }
  .sctColumTit {
    left: 4vw;
    top: 4vw;
  }
  .buttonArea {
    right: 4vw;
    bottom: 4vw;
  }
  footer .inner .leftArea h2 {
    text-align: center;
  }
}

/* mobile */
@media all and (max-width: 480px) {
  .mainVisual .swiper-slide .visualTxt {
    width: 45%;
    bottom: 10%;
  }
  .mainVisual .swiper-slide .visualTxt div h2 {
    font-size: 1em;
  }
  .mainVisual .swiper-slide .visualTxt div p {
    font-size: 0.9em;
  }

  #sct1 .overView li {
    flex: 1 1 48%;
  }
  footer .inner .leftArea {
    justify-content: center;
    align-items: center;
    text-align: center;
  }
  footer .inner .leftArea ul {
    gap: 1em;
  }
  footer .inner .rightArea {
    text-align: center;
  }
}

@media all and (max-width: 450px) {
  body {
    font-size: 1.3rem;
  }

  .mainVisual .swiper-slide .visualTxt {
    width: 55%;
    bottom: 10%;
  }
  #sct1 .overView li dl dt {
    top: 3vw;
    left: 3vw;
  }

  #sct1 .overView li {
    flex: 1 1 100%;
    min-height: 30vw;
  }
}

/* mini mobile */
@media all and (max-width: 360px) {
  .mainVisual .swiper-slide .visualTxt {
    width: 100%;
    bottom: unset;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
  }
  .mainVisual .swiper-slide .visualTxt div aside a {
    min-width: unset;
    width: calc(50% - 2vw);
  }
  .mainVisual .swiper-pagination {
    right: 33.333%;
  }
}

/* minimum mobile */
@media all and (max-width: 330px) {
  body {
    font-size: 1.3rem;
  }
}