.section{
    overflow: hidden;
    height: 100vh;
}

video{
    position: absolute;
    width: 100%;
    height: auto;
    object-fit: contain;
    top: 0;
    left: 0;
    z-index: -1;
}


/* section0 */
#master-container-scroller {
    width: 700px;
    height: 110px;
    overflow: hidden;
    position: relative;
    font-size: 22px;
    line-height: 38px;
    font-family: 'Pretendard-Bold', sans-serif;
    margin-top: 50px;
    margin-bottom: -6px;
}

#master-container-scroller span.m_left{
    margin-left: 30px;
}

#master-container-scroller span.og{
    color: #f26522;
}


#master-container-scroller .master-container-scroller_item {
    display: block;
    padding-bottom: -6px;
    /* animation: scroll 20s 6s cubic-bezier(0.645, 0, 0, 1) infinite; */
}

@keyframes scroll {
      0% {
          transform: translateY(0px)
      }
      50%{
          transform: translateY(-85px)
      }
      100% {
          transform: translateY(-160px)
       }
}

.line1{
    width: 0;
    height: 1px;
    background-color: #d7d7d7;
    position: absolute;
    top: 65%;
    left: 0;
    transform: translateY(-50%);
}

#section0.sec_on .line1{
    animation-name: full_1;
    animation-duration: 3.5s;
    /* animation-delay: .5s; */
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes full_1{
    0%{
        width: 0%;
    }

    100%{
        width: 100%;
    }
}

.line2_box{
    width: 1500px;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 30%;
    transform: rotate(130deg);
}

.line2{
    width: 0%;
    height: 1px;
    background-color: #d7d7d7;
}

#section0.sec_on .line2{
    animation-name: full_2;
    animation-duration: 3.5s;
    /* animation-delay: .3s; */
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes full_2{
    0%{
        width: 0%;
    }

    100%{
        width: 100%;
    }
}

#section0 .center02{
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    position: relative;
    z-index: 9;
    margin-bottom: 5%;
}

.s_text1{
    position: relative;
    font-size: 50px;
    font-family: 'Pretendard-Light', sans-serif;
    /* margin-top: 50px; */
    display: inline-block;
}

.s_text1_inner>span{
    font-size: 70px;
    font-family: 'Pretendard-Bold', sans-serif;
    display: block;
}

/* .s_text1_inner>p{
    font-size: 35px;
    font-family: 'twayair', sans-serif;
    margin-bottom: 15px;
} */

.s_text1_inner>p{
    font-size: 24px;
    font-family: 'Pretendard-SemiBold', sans-serif;
    margin-bottom: 15px;
    position: relative;
}

/* .s_text1_inner>p::after{
  content: "";
  width: 30px;
  height: 30px;
  background: linear-gradient(#FDE213, #f26522);
  opacity: 0.7;
  position: absolute;
  left: -5px;
  top: -10px;
  border-radius: 50%;
  z-index: -1;
  animation: circle 6s linear infinite;
}

.s_text1_inner>p>span{
    font-size: 26px;
    font-family: 'Pretendard-Bold', sans-serif;
    margin-left: 5px;
    position: relative;
}

.s_text1_inner>p>span::after{
    content: "";
    position: absolute;
    z-index: -1;
    bottom: -4px;
    left: -5px;
    width: 0;
    height: 20px;
    background-color: #fff6d7;
    animation-name: full_4;
    animation-duration: 0.9s;
    animation-delay: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes full_4{
    0%{
        width: 0%;
    }

    100%{
        width: 125px;
    }
} */

.circle_check,
.circle_text{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 200px;
}

.circle_check{
    bottom: -25px;
    left: 173px;
}

.circle_text{
    bottom: 85px;
    /* right: -150px; */
    left: -100px;
    z-index: -1;
}

.circle_text i{
    position: absolute;
    font-size: 50px;
    color: rgba(189, 189, 189, 0.3);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

#section0.sec_on .circle_text img{
    animation: circle 10s linear infinite;
    opacity: 0.6;
}

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

.line3{
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: -10px;
    width: 0;
    height: 40px;
    background-color: #ffeb87;
}

#section0.sec_on .line3{
    animation-name: full_3;
    animation-duration: 1.3s;
    animation-delay: 1s;
    animation-timing-function: ease-out;
    animation-fill-mode: forwards;
}

@keyframes full_3{
    0%{
        width: 0%;
    }

    100%{
        width: 305px;
    }
}

.s_text2{
    font-size: 18px;
    font-family: 'Pretendard-SemiBold', sans-serif;
    line-height: 35px;
    margin-top: 50px;
}

.m_s_text2{
    display: none;
}

/* .s_text2 span.t_blue{
    color: #0a87de;
} */

.s_text2 span.mar_left{
    margin-left: 13px !important;
}

.s_text2 span.orange_t{
    color: #f26522;
    font-size: 24px;
    font-family: 'Pretendard-Bold', sans-serif;
    margin-left: 0;
    margin-bottom: 5px;
    display: block;
}

.s_text3{
    color: #f26522;
    font-size: 24px;
    font-family: 'Pretendard-Bold', sans-serif;
}

.s_text4{
    width: 100%;
    position: absolute;
    background-color: rgba(0, 0, 0, 0.4);
    bottom: 0;
    left: 0;
    text-align: center;
    padding: 15px 0;
    font-family: 'Pretendard-Light', sans-serif;
    font-size: 16px;
    color: #fff;
}

.s_text4 span{
    margin-left: 30px;
}

.square{
    width: 180px;
    height: 180px;
    position: absolute;
    bottom: 7%;
    right: 60px;
    z-index: 9;
}

.m_square{
    display: none;
    cursor: pointer;
}

#section0.sec_on .square{
    animation: ping-pong 1s ease-in-out infinite;
}

@keyframes ping-pong {
    0% {
        bottom: 7%;
    }

    50% {
        bottom: 5%;
    }

    100% {
        bottom: 7%;
    }
}

.square>img{
    position: absolute;
    width: 100%;
    height: 100%;
    transition: 0.5s;
}

.square>img:nth-child(1) {
    animation: circle 6s linear infinite;
}

.square>img:nth-child(2) {
    animation: circle 4s linear infinite;
    animation-direction: reverse;
}

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

.square_text{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.square_text p{
    font-size: 18px;
    color: #fff;
    font-family: 'Pretendard-Medium', sans-serif;
    margin-top: 8px;
}

.square_text p span{
    display: block;
    font-size: 24px;
    margin-top: 3px;
    font-weight: bold;
}

.solar-system {
  width: 950px;
  height: 950px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -36.5%;
  right: -15%;
}

.orbit {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #e1e1e1;
  border-radius: 50%;
}

.earth-orbit {
  width: 950px;
  height: 950px;
  animation: spin 10s linear 0s infinite;
}

.venus-orbit {
  width: 600px;
  height: 600px;
  animation: spin 7s linear 0s infinite;
}

.planet {
    position: absolute;
    bottom: -12.5px;
    left: 50%;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: -webkit-linear-gradient(#FDE213, #f26522);
    background: -o-linear-gradient(#FDE213, #f26522);
    background: linear-gradient(#FDE213, #f26522);
}

.venus{
    background-color: #b7b7b7;
    background: -webkit-linear-gradient(#eee, #777);
    background: -o-linear-gradient(#eee, #777);
    background: linear-gradient(#eee, #777);
}

.leo {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

@keyframes spin {
  from {
    transform: rotate(0);
  }
  to{
    transform: rotate(359deg);
  }
}

@keyframes spin3D {
  from {
    transform: rotate3d(.5,.5,.5, 360deg);
  }
  to{
    transform: rotate3d(0deg);
  }
}


/* section1 */
#section1{
    background-color: #f4efea;
}

#section1 .fp-tableCell>img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
}

#section1.sec_on .fp-tableCell>img{
    opacity: 0;
    transition: 1s .5s;
}

#section1 .center02{
    height: 100%;
    overflow: hidden;
}

.title-box{
    width: 100%;
    height: 100%;
}

.wave {
    opacity: 0;
    position: absolute;
    background-color: #fff;
    box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.08);
    border-radius: 100%;
  }

#section1.sec_on .wave.-one{
    -webkit-animation: drift 800ms 1s linear forwards;
    animation: drift 800ms 1s linear forwards;
}

#section1.sec_on .wave.-two{
    -webkit-animation: drift 1200ms 1.2s linear forwards;
    animation: drift 1200ms 1.2s linear forwards;
}

#section1.sec_on .wave.-three{
    -webkit-animation: drift 1500ms 1.4s linear forwards;
    animation: drift 1500ms 1.4s linear forwards;
}

#section1.sec_on .wave.-four{
    -webkit-animation: drift 2000ms 1.5s linear forwards;
    animation: drift 2000ms 1.5s linear forwards;
}

.wave.-one {
    width: 250px;
    height: 250px;
    background-color: #fffbf7;
}

.wave.-two {
    width: 480px;
    height: 480px;
    background-color: #fffbf7;
}

.wave.-three {
    width: 700px;
    height: 700px;
    background-color: #f7f3ef;
}

.wave.-four {
    width: 250px;
    height: 250px;
    background-color: #fff;
}

@keyframes drift {
    0% {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(0,0);
            opacity: 0;
        }
    100% {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(2,2);
            opacity: 1;
    }
}

.text-box{
    /* width: 200px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 38px;
    color: #222;
    font-family: 'Pretendard-SemiBold', sans-serif;
    line-height: 60px;
    border-bottom: 4px solid #222;
    letter-spacing: 4px;
    opacity: 0;
    margin-top: -30px; */

    width: 600px;
    height: 600px;
    position: absolute;
    left: 50%;
    top: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
}

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

img.note{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  z-index: 1;
}

.white_loca{
  position: absolute;
  width: 370px;
  height: 232px;
  background-color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-top: 16px;
  margin-left: 16px;
  z-index: 2;
  overflow: scroll;
}

.white_loca img{
  width: 100%;
}

img.phone{
  width: 25%;
  position: absolute;
  top: 46%;
  left: 3%;
  z-index: 3;
}

#section1.sec_on .text-box{
    /* animation: text_opa 2s 2s forwards; */
    animation: text_opa 3s 1s forwards;
}

@keyframes text_opa {
    0%{
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
  }

.text-box span{
    letter-spacing: 15.5px;
    margin-right: -15px;
}

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

.mp{
    border-radius: 100px;
    background-color: #fff;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, 0.15);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    cursor: pointer;
    transition-duration: .5s;
}

/* .mp img{
    width: 6%;
}

.mp_09 img{
    width: 50%;
} */

.mp_03 img,
.mp_04 img,
.mp_05 img{
  width: 75%;
}

#section1.sec_on .mp{
    /* animation: posi 2s 2s forwards; */
    animation: posi 1s 1s forwards;
}

@keyframes posi{
    0%{
        margin: 0;
        opacity: 0;
    }

    100%{
        opacity: 1;
    }
}

.mp:hover{
    transform: translate(-50%, -50%) scale(1.3);
}

.mp_01{
    width: 160px;
    height: 160px;
    margin-top: -300px;
    margin-left: -350px;
}

.mp_02{
    width: 200px;
    height: 200px;
    margin-top: -250px;
    margin-left: 200px;
}

.mp_03{
    width: 150px;
    height: 150px;
    margin-top: -200px;
    margin-left: 450px;
}

.mp_04{
    width: 100px;
    height: 100px;
    margin-top: 200px;
    margin-left: 340px;
}

.mp_05{
    width: 130px;
    height: 130px;
    margin-top: 300px;
    margin-left: 470px;
}

.mp_06{
    width: 140px;
    height: 140px;
    margin-top: 280px;
    margin-left: -450px;
}

.mp_07{
    width: 100px;
    height: 100px;
    margin-top: 200px;
    margin-left: -150px;
}

.mp_08{
    width: 100px;
    height: 100px;
    margin-top: 180px;
    margin-left: -580px;
}

.mp_09{
    width: 200px;
    height: 200px;
    margin-top: -50px;
    margin-left: -500px;
}

.wrapper_text{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 24px;
    line-height: 35px;
    color: #222;
    font-family: 'Pretendard-SemiBold', sans-serif;
    opacity: 0;
    /* margin-top: 290px; */
    margin-top: 310px;
    text-align: center;
}

#section1.sec_on .wrapper_text{
    animation: text_opa 2s 2s forwards;
}

.wrapper {
    padding: 1.5rem 0;
    filter: url('#goo');
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    margin-top: 340px;
}

#section1.sec_on .wrapper{
    /* animation: text_opa 2s 2s forwards; */
    animation: text_opa 2s 2s forwards;
}

.button {
    background: #f26522;
    color: #fff;
    border-radius: 50px;
    position: relative;
    height: 40px;
    width: 140px;
    font-size: 14px;
    font-family: 'Pretendard-Thin', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
}

.button span{
    margin-left: 20px;
}

.button:before,
.button:after {
    width: 40px;
    height: 20px;
    position: absolute;
    content: "";
    display: inline-block;
    background: #f26522;
    border-radius: 100%;
    transition: transform .5s ease;
    transform: scale(0);
    z-index: -1;
}

.button:before {
    top: -25%;
    left: 20%;
}

.button:after {
    bottom: -25%;
    right: 20%;
}

.button:hover:before,
.button:hover:after {
    transform: none;
}

.m_wrapper{
    display: none;
}


/* section4 */
.main_bg {
  background-image: url(../images/main_bg_5.jpg);
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main_content_title {
  font-size: 20px;
  color:#fff;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-weight: bold;
}

.content_pic{
  width: 100%;
  display: inline-block;
}

.content_box_1 {
  float: left;
  width: 23.1%;
  height: 260px;
  margin-right: 2.2%;
  background-position: center center;
  margin-top: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  background-color: #fff;
  padding: 20px;
  box-sizing: border-box;
}

.content_box_1:nth-child(4n){
  margin-right: 0;
}

.box_title{
  font-size:20px;
  font-weight: bold;
  color:#111;
  text-align: center;
}

.box_title br{
  display: none;
}

.img_box_second{
  position: relative;
  text-align: center;
  padding: 7% 0;
}

.box_content{
  font-size:14px;
  color:#111;
  text-align: center;
  word-break: keep-all;
}


.img_box_second > img:first-child{
  display: inline-block;
}

.img_box_second > .hover_img{
  display: none;
}

.content_box_1:hover .img_box_second .hover_img{
  display: inline-block;
}

.content_box_1:hover .img_box_second img:first-child{
  display: none;
}

.content_box_1:first-child{
  background-color:#ff5f11;
}

.content_box_1:first-child .box_content, .content_box_1:first-child .box_title{
  color:#fff;
}

.content_box_1:last-child{
  background-color:#81bbe3;
}

.content_box_1:last-child:hover{
  background-color:#0a4e8f;
}

.content_box_1:last-child .box_content, .content_box_1:last-child .box_title{
  color:#111;
}

.content_box_1:hover{
  background-color:#f89b24;
}

.content_box_1:hover .box_content,.content_box_1:hover .box_title{
  color:#fff
}

.content_box_1{
  position: relative;
}

.content_box_1:hover > .main_line_top{
  position: absolute;
  border: 0;
  left: 0;
  top: 0;
  border-top: 3px solid #e1e1e1;
  width: 100%;
  transition-duration: 0.5s;
}

.main_line_top{
  position: absolute;
  border-top: 3px solid #e1e1e1;
  transition-duration: 0.5s;
  left:-100%;
  top:0;
}

.content_box_1:hover > .main_line_right{
  position: absolute;
  border: 0;
  right: 0;
  top: 0;
  border-right: 3px solid #e1e1e1;
  height: 100%;
  width: 100%;
  transition-duration: 0.5s;
}

.main_line_right{
  position: absolute;
  border-right: 3px solid #e1e1e1;
  transition-duration: 0.5s;
  height: 100%;
  top:-100%;
  right: 0;
  transition-duration: 0.5s;
}

.content_box_1:hover > .main_line_bottom{
  position: absolute;
  right: 0;
  bottom: 0;
  border-bottom: 3px solid #e1e1e1;
  height: 100%;
  width: 100%;
  transition-duration: 0.5s;
}

.main_line_bottom{
  position: absolute;
  right: -100%;
  bottom: 0;
  border-bottom: 3px solid #e1e1e1;
  transition-duration: 0.5s;
}

.content_box_1:hover > .main_line_left{
  position: absolute;
  left: 0;
  bottom: 0;
  border-left: 3px solid #e1e1e1;
  height: 100%;
  width: 100%;
  transition-duration: 0.5s;
}

.main_line_left{
  position: absolute;
  left: 0;
  bottom: -100%;
  border-left: 3px solid #e1e1e1;
  transition-duration: 0.5s;
}

.bottom_t{
  color:#fff;
  margin-top:30px;
  font-size:24px;
  text-align: center;
}

.bottom_t br{
  display: none;
}


/* section4 */
#section3 .fp-tableCell{
    position: absolute;
}

ul.sec3_ul{
    width: 100%;
    height: 100%;
    display: inline-block;
}

ul.sec3_ul li{
    width: 25%;
    height: 100%;
    float: left;
    border-right: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    overflow: hidden;
}

ul.sec3_ul li:last-child{
    border-right: 0;
}

ul.sec3_ul li:hover .li_num{
    color: #ffdabf;
}

ul.sec3_ul li:hover .img_wrap img{
    transform: rotateY(180deg);
    transition: transform 500ms;
}

.li_num{
    font-size: 150px;
    color: #e7e7e7;
    opacity: .5;
    font-family: 'Pretendard-Black', sans-serif;
    margin-left: 70%;
    transition: color .5s;
}

.img_text{
    margin-top: 20px;
}

.img_wrap{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transform: rotateY(180deg);
    transition: transform .5s;
}

/*
.img_wrap img{
    transform: rotateY(0);
    transition: transform .5s;
}

#section3.sec_on ul.sec3_ul li .img_wrap{
    transform: rotateY(0);
}

#section3.sec_on ul.sec3_ul li:first-child .img_wrap{
    transition: transform 500ms .5s;
}

#section3.sec_on ul.sec3_ul li:nth-child(2) .img_wrap{
    transition: transform 500ms 1s;
}

#section3.sec_on ul.sec3_ul li:nth-child(3) .img_wrap{
    transition: transform 500ms 1.5s;
}

#section3.sec_on ul.sec3_ul li:last-child .img_wrap{
    transition: transform 500ms 2s;
}
*/

@keyframes rotateZOnce {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

#section3.sec_on .img_wrap img.spin {
  animation: rotateZOnce 0.5s ease-in-out forwards;
}

.img_text p{
    font-size: 18px;
    color: #111;
    line-height: 30px;
    font-family: 'Pretendard-Regular', sans-serif;
    margin-top: 20px;
}

.img_text p span{
    font-family: 'Pretendard-Bold', sans-serif;
}

.sec04_title{
    font-size: 20px;
    color: #111;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: -17%;
}

.sec04_context{
    font-size: 24px;
    color: #111;
    font-family: 'Pretendard-SemiBold', serif;
    text-align: center;
    line-height: 35px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 19%;
}

.sec04_context span{
    position: relative;
    z-index: 1;
}

#section3.sec_on .sec04_context span:after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 15px;
  width: 0;
  opacity: 0;
  background-color: rgba(255, 235, 135, 0.7);;
  animation: underline 1s .5s ease-in-out forwards;
  z-index: -1;
}

@keyframes underline {
    0%{
        width: 0;
        opacity: 0;
    }

    100%{
        width: 100%;
        opacity: 1;
    }
}


/* section5 */
#section4{
    background-image: url(../images/sec4_bg.jpg);
    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: cover;
}

#section4 .fp-tableCell{
    vertical-align: bottom;
}

.partners{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding-top: 80px;
    box-sizing: border-box;
}

.partners .center{
    text-align: center;
}

.partners .center>span{
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    display: block;
    font-family: 'Pretendard-Regular', sans-serif;
    margin-bottom: 10px;
}

.partners .center>p{
    font-size: 38px;
    color: #111;
    font-family: 'Pretendard-SemiBold', sans-serif;
    display: inline-block;
    border-bottom: 3px solid #111;
}

.partners_box{
    width: 100%;
    display: inline-block;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
}

.partner_logo{
    height: 95px;
    float: left;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.main_banner{
    width: 100%;
    height: 30vh;
    background-image: url(../images/banner_bg.jpg);
    background-position: 0 center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.main_banner2{
    width: 100%;
    height: 30vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.main_banner2 .center{
    text-align: center;
}

/*.main_banner2 .center>span{*/
/*    font-size: 20px;*/
/*    line-height: 30px;*/
/*    text-align: center;*/
/*    display: block;*/
/*    font-family: 'Pretendard-Regular', sans-serif;*/
/*    margin-bottom: 10px;*/
/*}*/

/*.main_banner2 .center>p{*/
/*    font-size: 38px;*/
/*    color: #111;*/
/*    font-family: 'Pretendard-SemiBold', sans-serif;*/
/*    display: inline-block;*/
/*    border-bottom: 1px solid #111;*/
/*}*/

/*.main_banner2 .center>p>span{*/

/*    color: #ff6b24;*/
/*}*/


.main_banner2 .center>span{
  font-size: 20px;
  line-height: 30px;
  text-align: center;
  display: block;
  font-family: 'Pretendard-Regular', sans-serif;
  margin-bottom: 10px;
}

.main_banner2 .center>p{
  font-size: 38px;
  color: #111;
  font-family: 'Pretendard-SemiBold', sans-serif;
  display: inline-block;
  border-bottom: 1px solid #ffffff;

  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
  position: relative;
}

.main_banner2 .center>p>span{
  color: #ff6b24;
}

/* 밑줄 애니메이션 효과 */
.main_banner2 .center>p::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 0;
  height: 2.5px;
  background: #ff6b24;
  transition: width 0.6s ease 0.3s;
}

/* 섹션 진입 시 활성화되는 클래스 */
.main_banner2.active .center>p {
  opacity: 1;
  transform: translateY(0);
}

.main_banner2.active .center>p::after {
  width: 100%;
}
.main_banner .center{
    text-align: center;
}

.main_banner .center>span{
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    display: block;
    font-family: 'Pretendard-Regular', sans-serif;
    margin-bottom: 10px;
    color: #fff;
}

/* .main_banner .center>p{
    font-size: 38px;
    color: #fff;
    font-family: 'Pretendard-SemiBold', sans-serif;
    display: inline-block;
    border-bottom: 1px solid #fff;
} */

.text_btn{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30px;
}

.text_btn p{
  font-size: 38px;
  color: #fff;
  font-family: 'Pretendard-SemiBold', sans-serif;
  display: inline-block;
  border-bottom: 1px solid #fff;
}

.text_btn a{
  width: 180px;
  height: 60px;
  background-color: #f26522;
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 20px;
  font-family: 'Pretendard-Medium', sans-serif;
  /* margin-top: 30px; */
  margin-left: 30px;
}

p.typing-txt{
    display: none;
}

.typing {
    display: inline-block;
    color: #fff;
    font-size: 32px;
    font-family: 'Pretendard-Medium', sans-serif;
}

.blink2 {
    animation: blink 0.5s infinite;
    font-size: 28px;
    color: #fff;
    font-family: 'Pretendard-Bold', sans-serif;
}

@keyframes blink {
    to {
        opacity: 0;
    }
}
/*
.main_banner a{
    width: 180px;
    height: 60px;
    background-color: #f26522;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 18px;
    font-family: 'Pretendard-Medium', sans-serif;
    margin-top: 30px;
} */
#section5{
  height: auto !important;
}

#section5 .fp-tableCell{
  overflow-y: auto;
  max-height: 100%;
  display: block;
}

.section5_box{
  width: 100%;
  background-color: yellow;
}

























/* mobile */
@media screen and (max-width: 767px){

  video{
      width: auto;
      height: 100vh;
      left: initial;
      right: -110%;
      object-fit: cover;
  }

  /* section0 */
  #master-container-scroller {
      width: 100%;
      height: 80px;
      font-size: 4vw;
      line-height: 28px;
      margin-top: 30px;
  }

  #master-container-scroller span.m_left{
      margin-left: 15px;
  }

  @keyframes scroll {
        0% {
            transform: translateY(0px)
        }
        50%{
            transform: translateY(-55px)
        }
        100% {
            transform: translateY(-112px)
         }
  }

  #section0 .fp-tableCell{
      vertical-align: bottom;
  }

  #section0 .center02 {
      justify-content: flex-end;
      margin-bottom: 80%;
  }

  .line1{
      display: none;
  }

  .line2_box{
      display: none;
  }

  .s_text1{
      font-size: 9vw;
      margin-top: 0;
      line-height: 13vw;
  }

  .s_text1_inner>p{
      font-size: 20px;
      margin-bottom: 0;
      margin-left: 3px;
  }

  .s_text1_inner>span{
      font-size: 15vw;
  }

  .s_text2{
      display: none;
  }

  .m_s_text2{
      display: block;
      font-size: 3vw;
      line-height: 6vw;
      margin: 10% 0 45%;
  }

  .m_s_text2 span {
      margin-left: 5px;
  }

  .m_s_text2 span.orange_t{
      font-size: 3.7vw;
  }

  .m_square{
      width: 80px;
      height: 80px;
      bottom: 3%;
      right: 20px;
      display: block;
  }

  .pc_square{
      display: none;
  }

  .square_text img{
      width: 10px;
  }

  .square_text p{
      font-size: 10px;
      margin-top: 5px;
  }

  .square_text p span{
      font-size: 12px;
  }

  .line3{
      left: 0;
      height: 15px;
  }

  @keyframes full_3{
      0%{
          width: 0%;
      }

      100%{
          width: 100%;
      }
  }

  .circle_text{
      width: 100px;
      height: 100px;
      bottom: inherit;
      top: -40px;
      right: inherit;
      left: 80px;
      z-index: -1;
  }

  .circle_text img{
      width: 100%;
  }

  .circle_text i{
      font-size: 30px;
  }

  .solar-system {
    width: 450px;
    height: 450px;
    top: -150px;
    right: -170px;
  }

  .earth-orbit {
    width: 450px;
    height: 450px;
  }

  .venus-orbit {
    width: 280px;
    height: 280px;
  }

  .planet {
      bottom: -7.5px;
      width: 15px;
      height: 15px;
  }


  /* section1 */
  #section1 .fp-tableCell>img{
    display: none;
  }

  .wave.-one {
      width: 120px;
      height: 120px;
  }

  .wave.-two {
      width: 200px;
      height: 200px;
  }

  .wave.-three {
      width: 280px;
      height: 280px;
  }

  .wave.-four {
      width: 120px;
      height: 120px;
  }

  #section1.sec_on .wave.-one{
      -webkit-animation: drift 300ms .5s linear forwards;
      animation: drift 300ms .5s linear forwards;
  }

  #section1.sec_on .wave.-two{
      -webkit-animation: drift 600ms .5s linear forwards;
      animation: drift 600ms .5s linear forwards;
  }

  #section1.sec_on .wave.-three{
      -webkit-animation: drift 900ms .5s linear forwards;
      animation: drift 900ms .5s linear forwards;
  }

  #section1.sec_on .wave.-four{
      -webkit-animation: drift 1000ms 1s linear forwards;
      animation: drift 1000ms 1s linear forwards;
  }

  .text-box{
      /* width: 110px;
      font-size: 20px;
      line-height: 38px;
      border-bottom: 2px solid #000;
      letter-spacing: 3px;
      margin-top: -30px; */

      width: 270px;
      height: 270px;
  }

  .white_loca{
    width: 165px;
    height: 105px;
    margin-top: 7px;
    margin-left: 7px;
  }

  .text-box span{
      letter-spacing: 9.5px;
      margin-right: -9px;
  }

  .wrapper {
      display: none;
  }

  .m_wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin-top: 250px;
      opacity: 0;
      display: block;
  }

  #section1.sec_on .m_wrapper{
      animation: text_opa 2s 2s forwards;
  }

  @keyframes text_opa {
      0%{
          opacity: 0;
      }

      100%{
          opacity: 1;
      }
    }

  .m_wrapper a{
    background: #f26522;
    color: #fff;
    border-radius: 50px;
    position: relative;
    font-family: 'Pretendard-Thin', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 100px;
    font-size: 12px;
  }

  .m_wrapper a span{
    margin-left: 5px;
  }

  .mp img{
      width: 65%;
  }

  .mp_01{
      width: 100px;
      height: 100px;
      margin-top: -160px;
      margin-left: -30%;
  }

  .mp_02{
      width: 90px;
      height: 90px;
      margin-top: -120px;
      margin-left: 35%;
  }

  .mp_03{
      display: none;
  }

  .mp_04{
      width: 60px;
      height: 60px;
      margin-top: 90px;
      margin-left: 30%;
  }

  .mp_05{
      display: none;
  }

  .mp_06{
      width: 75px;
      height: 75px;
      margin-top: 130px;
      margin-left: -60px;
  }

  .mp_07{
      width: 50px;
      height: 50px;
      margin-top: 60px;
      margin-left: -35%;
  }

  .mp_08{
      display: none;
  }

  .mp_09{
      display: none;
  }

  .wrapper_text{
      width: 100%;
      font-size: 4vw;
      line-height: 6vw;
      margin-top: 210px;
      text-align: center;
      bottom: initial;
      top: 50%;
      transform: translate(-50%, -50%);
      letter-spacing: -0.5px;
  }


  /* section4 */
  .main_content_title {
    font-size: 20px;
  }

  .content_box_1 {
    width: 49%;
    height: 120px;
    margin-right: 2%;
    padding: 10px 5px;
  }

  .content_box_1:nth-child(4n){
    margin-right: 2%;
  }

  .content_box_1:nth-child(2n){
    margin-right: 0;
  }

  .img_box_second{
    display: none;
  }

  .box_title{
    font-size: 4vw;
    word-break: keep-all;
  }

  .box_title br{
    display: block;
  }

  .box_content{
    font-size: 10px;
    letter-spacing: -0.5px;
    margin-top: 5px;
    word-break: keep-all;
  }

/*
  .box_content br.m_none{
      display: none;
  }
*/

  .bottom_t{
    margin-top:5px;
    font-size: 14px;
    word-break: keep-all;
  }

  .bottom_t br{
    display: block;
  }


  /* section4 */
  ul.sec3_ul{
      padding: 30% 0 23%;
      box-sizing: border-box;
  }

  ul.sec3_ul li{
      width: 100%;
      height: 23%;
      float: none;
      border-right: 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }

  ul.sec3_ul li:last-child{
      border-bottom: 0;
      height: 31%;
  }

  ul.sec3_ul li:hover .li_num{
      color: #e7e7e7;
  }

  ul.sec3_ul li:hover .img_wrap img{
      transform: rotateY(0);
  }

  .li_num{
      font-size: 50px;
      margin-left: 60%;
      margin-bottom: -40px;
  }

  .img_wrap img{
      width: 30px;
  }

  .img_text{
      width: 77%;
      margin-top: 0;
  }

  .img_text p{
      font-size: 12px;
      line-height: 20px;
      margin-top: 0;
  }

  .img_text p br.m_none{
      display: none;
  }

  .sec04_title{
      width: 100%;
      text-align: center;
      font-size: 20px;
      /* top: 0; */
      margin-top: -38vh;
  }

  .sec04_context{
      width: 100%;
      text-align: center;
      font-size: 14px;
      line-height: 20px;
      top: initial;
      transform: translateX(-50%);
      margin-top: 0;
      bottom: 5%;
  }

  #section3.sec_on .sec04_context span:after{
      height: 7px;
  }


  /* section4 */
  .partners{
      padding-top: 20%;
  }

  .partners p{
      font-size: 20px;
      border-bottom: 2px solid #111;
  }

  .partners_box{
      padding: 5px 0;
  }

  .partner_logo{
      height: auto;
  }

  .partner_logo img{
      width: 100%;
  }

  .main_banner{
      height: 20vh;
  }
  .main_banner2{
      height: 20vh;
  }

  .typing {
      font-size: 4.5vw;
  }

  .blink2 {
      animation: blink 0.5s infinite;
      font-size: 4vw;
      color: #fff;
      font-family: 'Pretendard-Bold', sans-serif;
  }

  /* .main_banner a{
      width: 100px;
      height: 35px;
      font-size: 12px;
      margin-top: 20px;
  } */

  .main_banner2 .center>span{
      font-size: 3.5vw;
      line-height: 5vw;
      text-align: center;
      display: block;
      font-family: 'Pretendard-Regular', sans-serif;
      margin-bottom: 10px;
      letter-spacing: -0.5px;
  }

  .main_banner2 .center>p{
      font-size: 18px;
      color: #111;
      font-family: 'Pretendard-SemiBold', sans-serif;
      display: inline-block;
      border-bottom: 1px solid #fff;
  }

  .main_banner .center>span{
      font-size: 12px;
      line-height: 20px;
      text-align: center;
      display: block;
      font-family: 'Pretendard-Regular', sans-serif;
      margin-bottom: 10px;
      color: #fff;
  }

  .main_banner .center>p{
      font-size: 18px;
      color: #fff;
      font-family: 'Pretendard-SemiBold', sans-serif;
      display: inline-block;
      border-bottom: 1px solid #fff;
  }

  .text_btn{
      flex-direction: column;
      margin-top: 10px;
  }

  .text_btn p{
    font-size: 18px;
  }

  .text_btn a{
    width: 100px;
    height: 30px;
    font-size: 14px;
    margin-top: 10px;
    margin-left: 0;
  }

}























/* tablet */
@media screen and (min-width: 768px) and (max-width: 1024px){

  video{
      width: auto;
      height: 100vh;
      left: initial;
      right: -35%;
      object-fit: cover;
  }

  /* section0 */
  #section0 .fp-tableCell{
      vertical-align: bottom;
  }

  #section0 .center02 {
      justify-content: flex-end;
      margin-bottom: 50%;
  }

  .line1{
      display: none;
  }

  .line2_box{
      display: none;
  }

  .s_text1{
      font-size: 50px;
      margin-top: 0;
      line-height: 65px;
  }

  .s_text1_inner>p{
      font-size: 30px;
      margin-bottom: 0;
      margin-left: 3px;
  }

  .s_text2{
      font-size: 20px;
      line-height: 33px;
      margin: 10% 0 20%;
  }

  .m_square{
      width: 100px;
      height: 100px;
      right: 30px;
      display: block;
  }

  .pc_square{
      display: none;
  }

  .square_text img{
      width: 15px;
  }

  .square_text p{
      font-size: 10px;
      margin-top: 5px;
  }

  .square_text p span{
      font-size: 14px;
  }

  .line3{
      left: 0;
      height: 20px;
  }

  @keyframes full_3{
      0%{
          width: 0%;
      }

      100%{
          width: 100%;
      }
  }

  .circle_text{
      bottom: inherit;
      top: -100px;
      right: inherit;
      left: 120px;
      z-index: -1;
  }

  .circle_text img{
      width: 100%;
  }

  .circle_text i{
      font-size: 50px;
  }

  .solar-system {
    width: 700px;
    height: 700px;
    top: -200px;
    right: -230px;
  }

  .earth-orbit {
    width: 700px;
    height: 700px;
  }

  .venus-orbit {
    width: 400px;
    height: 400px;
  }


  /* section1 */
  .wave.-one {
      width: 200px;
      height: 200px;
  }

  .wave.-two {
      width: 300px;
      height: 300px;
  }

  .wave.-three {
      width: 400px;
      height: 400px;
  }

  .wave.-four {
      width: 200px;
      height: 200px;
  }

  .text-box{
      /* width: 110px;
      font-size: 20px;
      line-height: 38px;
      border-bottom: 2px solid #000;
      letter-spacing: 3px;
      margin-top: -30px; */

      width: 450px;
      height: 450px;
  }

  .white_loca{
    width: 276px;
    height: 171px;
    margin-top: 14px;
    margin-left: 12px;
  }

  .text-box span{
      letter-spacing: 9.5px;
      margin-right: -9px;
  }

  .wrapper {
      display: none;
  }

  .m_wrapper {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      margin-top: 55%;
      opacity: 0;
      display: block;
  }

  #section1.sec_on .m_wrapper{
      animation: text_opa 2s 2s forwards;
  }

  @keyframes text_opa {
      0%{
          opacity: 0;
      }

      100%{
          opacity: 1;
      }
    }

  .m_wrapper a{
    background: #f26522;
    color: #fff;
    border-radius: 50px;
    position: relative;
    font-family: 'Pretendard-Thin', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 100px;
    font-size: 12px;
  }

  .m_wrapper a span{
    margin-left: 5px;
  }

  .mp img{
      width: 65%;
  }

  .mp_01{
      width: 130px;
      height: 130px;
      margin-top: -200px;
      margin-left: -100px;
  }

  .mp_02{
      width: 100px;
      height: 100px;
      margin-top: -150px;
      margin-left: 150px;
  }

  .mp_03{
      width: 120px;
      height: 120px;
      margin-top: 0;
      margin-left: 300px;
  }

  .mp_04{
      width: 100px;
      height: 100px;
      margin-top: 100px;
      margin-left: 150px;
  }

  .mp_05{
      width: 130px;
      height: 130px;
      margin-top: 250px;
      margin-left: 150px;
  }

  .mp_06{
      width: 100px;
      height: 100px;
      margin-top: 180px;
      margin-left: -100px;
  }

  .mp_07{
      width: 80px;
      height: 80px;
      margin-top: 60px;
      margin-left: -110px;
  }

  .mp_08{
      width: 120px;
      height: 120px;
      margin-top: 100px;
      margin-left: -280px;
  }

  .mp_09{
      width: 140px;
      height: 140px;
      margin-top: -100px;
      margin-left: -280px;
  }

  .wrapper_text{
      width: 100%;
      font-size: 3.5vw;
      line-height: 5vw;
      margin-top: 48%;
      text-align: center;
      bottom: initial;
      top: 50%;
      transform: translate(-50%, -50%);
  }


  /* section4 */
  .content_box_1 {
    width: 49%;
    height: 150px;
    margin-right: 2%;
  }

  .content_box_1:nth-child(4n){
    margin-right: 2%;
  }

  .content_box_1:nth-child(2n){
    margin-right: 0;
  }

  .img_box_second{
    display: none;
  }

  .box_content{
    margin-top: 10px;
    word-break: keep-all;
  }

/*
  .box_content br{
      display: none;
  }
*/

  .bottom_t{
    margin-top:20px;
    font-size:20px;
  }


  /* section4 */
  ul.sec3_ul li{
      width: 50%;
      height: 55%;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      justify-content: flex-end;
      padding-bottom: 7%;
  }

  ul.sec3_ul li:nth-child(2),
  ul.sec3_ul li:last-child{
      border-right: 0;
  }

  ul.sec3_ul li:nth-child(3),
  ul.sec3_ul li:last-child{
      border-bottom: 0;
      height: 45%;
  }

  ul.sec3_ul li:hover .li_num{
      color: #e7e7e7;
  }

  ul.sec3_ul li:hover .img_wrap img{
      transform: rotateY(0);
  }

  .li_num{
      font-size: 100px;
      margin-left: 75%;
  }

  .img_text{
      margin-top: -10px;
  }

  .img_text p{
      font-size: 16px;
      line-height: 25px;
      margin-top: 10px;
  }

  .sec04_title{
      font-size: 20px;
      margin-top: -48%;
  }

  .sec04_context{
      font-size: 20px;
      line-height: 30px;
      margin-top: 6.5%;
  }

  #section3.sec_on .sec04_context span:after{
    height: 10px;
  }


  /* section4 */
  .partners{
      /* padding-top: 20%; */
  }

  .partners p{
      font-size: 30px;
      border-bottom: 2px solid #111;
  }

  .partners_box{
      padding: 20px 0;
  }

  .partner_logo{
      height: auto;
  }

  .partner_logo img{
      width: 100%;
  }

  .main_banner{
      height: 30vh;
  }

  .main_banner2{
      height: 30vh;
  }

  .typing {
      font-size: 30px;
  }

  .blink2 {
      animation: blink 0.5s infinite;
      font-size: 30px;
      color: #fff;
      font-family: 'Pretendard-Bold', sans-serif;
  }

  /* .main_banner a{
      width: 100px;
      height: 35px;
      font-size: 12px;
      margin-top: 20px;
  } */

  .main_banner2 .center>span{
      font-size: 18px;
      line-height: 24px;
      text-align: center;
      display: block;
      font-family: 'Pretendard-Regular', sans-serif;
      margin-bottom: 10px;
  }

  .main_banner2 .center>p{
      font-size: 26px;
      color: #111;
      font-family: 'Pretendard-SemiBold', sans-serif;
      display: inline-block;
      border-bottom: 1px solid #fff;
  }

  .main_banner .center>span{
      font-size: 18px;
      line-height: 24px;
      text-align: center;
      display: block;
      font-family: 'Pretendard-Regular', sans-serif;
      margin-bottom: 10px;
      color: #fff;
  }

  .main_banner .center>p{
      font-size: 26px;
      color: #fff;
      font-family: 'Pretendard-SemiBold', sans-serif;
      display: inline-block;
      border-bottom: 1px solid #fff;
  }

  .text_btn{
      flex-direction: column;
      margin-top: 20px;
  }

  .text_btn p{
    font-size: 24px;
  }

  .text_btn a{
    width: 120px;
    height: 50px;
    font-size: 16px;
    margin-top: 20px;
    margin-left: 0;
  }



}

















/* pc */
@media screen and (min-width: 1025px) and (max-width: 1400px){

  .solar-system {
    top: -54%;
    right: -35%;
  }

  video{
      height: 100vh;
      object-fit: cover;
  }

  .circle_text{
      bottom: 20px;
      left: 60px;
  }

  #section0 .center02{
      margin-bottom: 10%;
  }


  /* section1 */
  .wave.-one {
      width: 200px;
      height: 200px;
  }

  .wave.-two {
      width: 380px;
      height: 380px;
  }

  .wave.-three {
      width: 550px;
      height: 550px;
  }

  .wave.-four {
      width: 200px;
      height: 200px;
  }

  .mp img{
      width: 68%;
  }

  .mp_01{
      width: 100px;
      height: 100px;
      margin-top: -200px;
      margin-left: -250px;
  }

  .mp_02{
      width: 150px;
      height: 150px;
      margin-top: -250px;
      margin-left: 200px;
  }

  .mp_03{
      width: 100px;
      height: 100px;
      margin-top: -100px;
      margin-left: 400px;
  }

  .mp_04{
      width: 80px;
      height: 80px;
      margin-top: 100px;
      margin-left: 300px;
  }

  .mp_05{
      width: 100px;
      height: 100px;
      margin-top: 250px;
      margin-left: 300px;
  }

  .mp_06{
      width: 90px;
      height: 90px;
      margin-top: 280px;
      margin-left: -350px;
  }

  .mp_07{
      width: 80px;
      height: 80px;
      margin-top: 180px;
      margin-left: -180px;
  }

  .mp_08{
      width: 80px;
      height: 80px;
      margin-top: 180px;
      margin-left: -480px;
  }

  .mp_09{
      width: 150px;
      height: 150px;
      margin-top: -50px;
      margin-left: -450px;
  }

  .wrapper_text{
      font-size: 20px;
      line-height: 30px;
      margin-top: 270px;
  }


  /* section4 */
  .content_box_1 {
    height: 230px;
    padding: 10px;
  }

  .box_title{
    font-size:16px;
  }

  .img_box_second img{
    width: 25%;
  }

  .bottom_t{
    margin-top:20px;
    font-size: 18px;
  }


  /* section4 */
  .li_num{
      font-size: 100px;
  }

  .img_text p{
      font-size: 16px;
      line-height: 25px;
      margin-top: 10px;
  }

  .sec04_title{
      margin-top: -20%;
  }

  .sec04_context{
      font-size: 18px;
      line-height: 30px;
      margin-top: 20%;
  }


  /* setion4 */
  .partners_box{
      padding: 10px;
  }

  .main_banner{
      height: 25vh;
  }

  .main_banner2{
      height: 25vh;
  }


}