@charset "UTF-8";
/*-------------------------------------------------
title       : 설정
Author      : 플랜아이 moni
Create date : 2025-07-11
Last revision : 
-------------------------------------------------*/
/*-------------------------------------------------
title       : main 반응형
Author      : 플랜아이 moni
Create date : 2025-07-29
Last revision : 2025-07-16
-------------------------------------------------*/
@media (max-width: 1600px) {
  .section3 .group1 .txt_box {
    padding: 3.2rem 4rem;
    margin-top: -8rem;
  }
  .section3 .group1 .txt1 {
    font-size: 3.8rem;
    margin-bottom: 3rem;
  }
  .section3 .group1 .txt2 span {
    font-size: 1.8rem;
  }
  .section3 .group1 .txt3 {
    font-size: 1.7rem;
    line-height: 2.5rem;
    min-height: 7.5rem;
  }
}
@media (max-width: 1400px) {
  .section2 .group2 {
    height: 92.7rem;
  }
  .section2 .video_box {
    width: 92rem;
    height: 52rem;
    top: 1.2rem;
  }
  .section2 .stand {
    width: 135rem;
  }
  .section2 .text {
    width: 77rem;
    bottom: 16rem;
  }
  .section5 .type_list {
    gap: 4rem;
  }
  .section5 .type_list > li {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 calc(33.33% - 2.7rem);
            flex: 1 1 calc(33.33% - 2.7rem);
    max-width: calc(33.33% - 2.7rem);
  }
}
@media (max-width: 1280px) {
  #header .header_wrap {
    max-width: calc(100% - 8rem);
    padding-top: 5rem;
  }
  #visual .txt1 {
    font-size: 5.8rem;
    margin-bottom: 1.4rem;
  }
  #visual .txt2 {
    font-size: 2.6rem;
    line-height: 1.6;
  }
  #logo img {
    width: 8rem;
  }
  .section1 .txt1 {
    font-size: 2.8vw;
  }
  .section2 {
    padding: 14rem 0 0;
  }
  .section2 .txt1 {
    font-size: 5rem;
  }
  .section3 {
    padding: 14rem 0;
  }
  .section3 .group1 {
    padding-top: 8rem;
    gap: 4rem 3.5rem;
  }
  .section3 .group1 .txt1 {
    font-size: 3rem;
  }
  .section3 .group1 .txt2 span {
    padding: 0.8rem 1.6rem;
  }
  .section3 .group1 .txt3 br {
    display: none;
  }
  .why_swiper .swiper-slide .txt_box {
    height: 100%;
    padding: 0 6rem;
  }
  .why_swiper .swiper-slide .img_box {
    height: 100%;
  }
  .why_swiper .swiper-slide .img_box img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .why_swiper .txt2 {
    font-size: 3.8rem;
  }
  .why_swiper .txt3 {
    font-size: 1.8rem;
  }
  .section4 {
    padding: 12rem 0;
  }
  .section5 {
    padding: 12rem 0;
  }
  .section5 .tabs {
    margin-top: 6rem;
  }
  .section5 .tabs .automatic {
    margin: 0 auto 6rem;
  }
  .section6 {
    padding: 12rem 0;
  }
  .section6 .list {
    margin-top: 6rem;
  }
  .section6 .list .item {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 calc(33.33% - 3.33rem);
            flex: 1 1 calc(33.33% - 3.33rem);
    max-width: calc(33.33% - 3.33rem);
  }
  .section6 .list .txt1 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
  }
  .section6 .list .txt2 {
    font-size: 1.8rem;
  }
}
@media (max-width: 1024px) {
  .section3 .group1 {
    gap: 2rem 2rem;
  }
  .section3 .group1 .item {
    background: #000;
  }
  .section3 .group1 .txt_box {
    margin-top: -3rem;
  }
  .why_swiper {
    padding: 0 2rem 10rem;
  }
  .why_swiper .swiper-slide .txt_box {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 60%;
            flex: 1 1 60%;
  }
  .why_swiper .swiper-slide .img_box {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 40%;
            flex: 1 1 40%;
  }
  .section5 .tabs .automatic button {
    font-size: 2rem;
  }
  .section5 .type_list .title {
    font-size: 2.4rem;
  }
  .section5 .type_list .box1 {
    padding: 2.4rem 1.4rem;
  }
  .section5 .type_list .box1 .txt1 {
    font-size: 2rem;
  }
  .section5 .type_list .box1 .txt2 {
    font-size: 2.8rem;
  }
  .section5 .type_list .box1 .txt3 {
    font-size: 1.6rem;
    margin-top: 1rem;
  }
  .section5 .list1 {
    padding: 2.8rem 1.4rem;
  }
  .section6 .list {
    gap: 5rem;
  }
  .section6 .list .item::before {
    width: 0rem;
    right: 0rem;
  }
  .section6 .list .item::after {
    right: -5.2rem;
  }
  .section6 .list .txt2 {
    font-size: 1.7rem;
  }
  .section6 .list.active .item1::before {
    width: 5rem;
    right: -5.2rem;
    -webkit-transition: all 0.3s 0.3s;
    transition: all 0.3s 0.3s;
  }
  .section6 .list.active .item1::after {
    opacity: 1;
    right: -7.2rem;
    -webkit-transition: all 0.3s 0.5s;
    transition: all 0.3s 0.5s;
  }
  .section6 .list.active .item2::before {
    width: 5rem;
    right: -5.2rem;
    -webkit-transition: all 0.3s 1.1s;
    transition: all 0.3s 1.1s;
  }
  .section6 .list.active .item2::after {
    opacity: 1;
    right: -7.2rem;
    -webkit-transition: all 0.3s 1.3s;
    transition: all 0.3s 1.3s;
  }
}
@media (max-width: 900px) {
  .section2 .group2 {
    height: 75.5rem;
  }
  .section2 .stand {
    width: 110rem;
  }
  .section2 .video_box {
    width: 75rem;
    height: 42.2rem;
    top: 1rem;
  }
  .section2 .text {
    width: 58rem;
    bottom: 14rem;
  }
  .section6 .list .txt1 {
    font-size: 2.3rem;
  }
}
@media (max-width: 768px) {
  #header .header_wrap {
    max-width: calc(100% - 5rem);
    padding-top: 4rem;
  }
  #visual {
    height: 86rem;
  }
  #visual .video_box {
    height: 86rem;
  }
  #visual .txt_box {
    max-width: calc(100% - 5rem);
    padding-top: 24rem;
  }
  #visual .txt1 {
    font-size: 4.5rem;
    margin-bottom: 1.4rem;
  }
  #visual .txt2 {
    font-size: 2.2rem;
  }
  #logo img {
    width: 6rem;
  }
  .section1 .txt1 {
    font-size: 3.2vw;
  }
  .section1 .txt1 .br1 {
    display: none;
  }
  .section1 .txt1 .br2 {
    display: block;
  }
  .section2 .txt1 {
    font-size: 4rem;
  }
  .section2 .group2 {
    height: 54.8rem;
  }
  .section2 .video_box {
    width: 54.4rem;
    height: 30.8rem;
    top: 0.6rem;
  }
  .section2 .stand {
    width: 80rem;
  }
  .section2 .text {
    width: 42rem;
    bottom: 10rem;
  }
  .section2 .tabs .automatic button {
    font-size: 1.8rem;
  }
  .section2 .tabs .automatic button + button {
    margin-left: 4rem;
  }
  .section2 .tabs .automatic button + button::before {
    left: -2.2rem;
    top: calc(50% - 0.2rem);
  }
  .title_item .txt1 {
    font-size: 3.8rem;
  }
  .title_item .txt2 {
    font-size: 1.8rem;
  }
  .section3 .group1 .item {
    max-width: 100%;
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
    background: transparent;
  }
  .why_swiper .swiper-slide .txt_box {
    padding: 0 4rem;
  }
  .why_swiper .txt1 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
  }
  .why_swiper .txt2 {
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
  }
  .section5 .type_list {
    display: block;
  }
  .section5 .type_list > li {
    max-width: 100%;
  }
  .section5 .type_list > li + li {
    margin-top: 4rem;
  }
  .section5 .tabs .automatic button {
    font-size: 1.8rem;
    letter-spacing: -0.05rem;
  }
  .section6 .list {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  .section6 .list .item {
    width: 30rem;
    max-width: 100%;
  }
  .section6 .list .item::before {
    right: initial;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 2px;
    height: 0rem;
    top: initial;
    bottom: 0rem;
  }
  .section6 .list .item::after {
    width: 0;
    height: 0;
    border: 2rem solid transparent;
    border-top: 1.3rem solid #fff;
    border-right: 1rem solid transparent;
    border-left: 1rem solid transparent;
    right: initial;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    top: initial;
    bottom: -5.2rem;
  }
  .section6 .list.active .item1::before {
    width: 2px;
    height: 5rem;
    bottom: -5.2rem;
    -webkit-transition: all 0.3s 0.3s;
    transition: all 0.3s 0.3s;
  }
  .section6 .list.active .item1::after {
    opacity: 1;
    bottom: -7.2rem;
    -webkit-transition: all 0.3s 0.5s;
    transition: all 0.3s 0.5s;
  }
  .section6 .list.active .item2::before {
    width: 2px;
    height: 5rem;
    bottom: -5.2rem;
    -webkit-transition: all 0.3s 1.1s;
    transition: all 0.3s 1.1s;
  }
  .section6 .list.active .item2::after {
    opacity: 1;
    bottom: -7.2rem;
    -webkit-transition: all 0.3s 1.3s;
    transition: all 0.3s 1.3s;
  }
  .section7 {
    height: 66rem;
  }
  .section7 .video_box {
    height: 66rem;
  }
  #footer .inner {
    display: block;
  }
  #footer .group1 {
    margin-bottom: 3rem;
  }
}
@media (max-width: 600px) {
  .section2 .tabs .automatic button {
    max-width: calc(33% - 5rem);
  }
}
@media (max-width: 500px) {
  #visual {
    height: 70rem;
  }
  #visual .video_box {
    height: 70rem;
  }
  #visual .txt_box {
    padding-top: 20rem;
  }
  #visual .txt1 {
    font-size: 7vw;
  }
  #visual .txt2 {
    font-size: 3.6vw;
  }
  .section1 .txt1 {
    font-size: 3.6vw;
  }
  .section2 .txt1 {
    font-size: 8vw;
  }
  .section2 .group2 {
    height: 41.2rem;
  }
  .section2 .video_box {
    width: 41rem;
    height: 23rem;
    top: 0.4rem;
  }
  .section2 .stand {
    width: 60rem;
  }
  .section2 .text {
    width: 33rem;
    bottom: 7rem;
  }
  .why_swiper {
    height: 77rem;
    width: calc(100% + 4rem);
    margin-left: -2rem;
    padding: 0 2rem 8rem;
  }
  .why_swiper .swiper-slide {
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
    height: 58rem;
  }
  .why_swiper .swiper-slide .txt_box {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 30rem;
            flex: 0 0 30rem;
    height: 30rem;
  }
  .why_swiper .swiper-slide .img_box {
    height: 28rem;
    -webkit-box-flex: 0;
        -ms-flex: 0 0 28rem;
            flex: 0 0 28rem;
  }
  .section5 .tabs .automatic button {
    height: 11rem;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  .section5 .tabs .automatic button img {
    margin-right: 0;
    margin-bottom: 0.5rem;
  }
}
@media (max-width: 350px) {
  .why_swiper {
    height: 74rem;
  }
}
@media (max-width: 300px) {
  .section2 .group2 {
    height: 34.2rem;
  }
  .section2 .video_box {
    width: 34rem;
    height: 19rem;
  }
  .section2 .stand {
    width: 50rem;
  }
  .section2 .text {
    width: 27rem;
    bottom: 6rem;
  }
}