*{margin: 0; padding: 0;}
img{width: 100%;}
a{text-transform: none; color: black; text-decoration: none;}
p,a,h1,h2,h3,div{font-family: 'Pretendard';}
.pup{color: #6440B3;}
h2{color: #333;}
.mob_box{display: none;}
.filter{background-color:rgba(0, 0, 0, 0.541); position: absolute; width: 100% ; height: 100%; transition: 0.5s all;}
.b_menu{display: none;}
.mob_view{display: none;}
header{width: 100%;max-width: 1920px; transform: translateX(-50%);    left: 50%;height: auto; background-color: transparent; position: absolute; top: 0; z-index: 999999999; overflow: hidden;}
.unset{overflow: unset;}
header .h_inner{width: 100%; max-width: 77%; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-end;}
header .h_inner .logo_box{ padding: 2.5rem 0 1.3rem;}

header .h_inner .menu_box{font-size: 20px; font-weight: 300; display: flex; }
header .h_inner .menu_box .menu{color: white;}
header .h_inner .menu_box .menu_on{font-weight: 500}
header .h_inner .menu_box .s2_msc{padding: 2rem 2rem;}
header .h_inner .mob_box{display: none;}

footer{background-color: black; padding: 5rem 0; width: 100%; max-width: 1920px; margin: 0 auto;}
footer .f_inner{width: 100%; max-width: 77%; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem;}
footer .f_inner .logo img{width: initial;}
footer .f_inner .text_box{color: white; font-family: 'Pretendard'; line-height: 1.5; font-size: 20px;}

.m1{width: 100%; max-width: 1920px;  overflow: hidden; margin: 0 auto; height: auto; position: relative; display: flex; align-items: center;}
.m1 .swiper-wrapper{position: relative;}
.m1 .bg_box{width: 100%;margin: 0 auto;}
.m1 .bg_box img{width: initial;}
.s2_msc{display: flex; flex-direction: column; position: relative;}
.s2_menu{transition: 0.5s all; background-color: rgba(255, 255, 255, 0.829); width: 168px; opacity: 0;  display: flex;flex-direction: column;position: absolute;left: 50%;transform: translateX(-50%);top: 89px;}
.s2_menu a{color: #333; text-align: center; padding: 0.8rem 0;}
.s2_menu .a_on{color: #6440B3;}
.s2_on{opacity: 1; transition: 0.5s all;}
.m1 .text_box{width: 100%; max-width: 75%; margin: 0 auto; position: absolute; left: 50%; top: 50%; transform: translateX(-50%)translateY(-50%);} 
.m1 .text_box p{color: white; font-size: 60px; text-align: center; letter-spacing: -2px;}
.m1 .text_box h1{color: white; font-size: 110px; font-weight: 700; letter-spacing: -2px;}
.m1 .swiper-fade .swiper-slide .bg_box img{scale: 1; transition: 5s all;}
.m1 .swiper-fade .swiper-slide-active .bg_box img{scale: 1.1;transition: 5s all;}
.m1 .swiper-pagination {
  background-color: transparent;
  width: 10% !important;
  height: auto;
  bottom: var(--swiper-pagination-bottom, 440px) !important;
  display: grid;
  margin: 0 auto; 
  gap: 2rem;
  padding: 30px 50px;
}
.m1 .swiper-pagination-bullet {
  width: 5px;
  height: 5px;
  background-color: #fff;
  opacity: 0.5;
}
.m1 .swiper-pagination-bullet-active {
  display: flex;
  justify-content: center;
  margin: 0;
  align-items: center; 
  background-color: #fff;
  position: relative;
  opacity: 1;
}
.m1 .swiper-pagination-bullet-active::before{
  content: '';
  width: 5px;
  height: 5px;
  scale: 3;
  position: absolute;
  transform: translate(-20%,-21%);
  left: 50%;
  top: 50%;
  border-radius: 20px;
  border: 1px solid #fff;
  display: block;
}


.m2{width: 100%; padding: 7.5rem 0; display: flex; align-items: center;}
.m2 .flex_box{width: 100%; max-width: 75%; display: flex; margin: 0 auto; align-items: center; justify-content: flex-start; gap: 6rem;}
.m2 .flex_box h2{font-size: 70px; color: #6440B3; line-height: 1.25;}
.m2 .flex_box p{font-size: 40px; color: #333;letter-spacing: -1.5px; line-height: 1.35;}

.m2 .right .text_box h1{font-size: 45px; padding-bottom: 2rem;}
.m2 .right .text_box p{font-size: 25px; padding-bottom: 2rem;}
.m2 .right .text_box a img{width: initial;}
.sec2 .flex_box{justify-content: center;}

.sec3{width: 100%; padding:5rem 0 10rem ;}
.sec3 .flex_box{width: 100%; max-width: 77%; display: flex; margin: 0 auto; justify-content: center; gap: 8rem;}
.sec3 .flex_box .text_box{display: grid;}
.sec3 .flex_box .text_box h1{font-size: 45px; letter-spacing:-0.5px;}
.sec3 .flex_box .text_box p{font-size: 25px; letter-spacing:-0.5px; line-height: 1.5;}


.m3 h1{text-align: center; font-size: 45px;}


.m3 .swiper2{padding-top: 5rem;}
.m3{width: 100%; background-color: #f4f4f4; padding: 5rem 0;}
.m3 .flex_box{display: flex; width: 100%; max-width: 75%; margin: 0 auto; align-items: center; justify-content: space-between;}
.m3 .flex_box .text_box h2{font-size: 45px; display:  flex;}
.m3 .flex_box .text_box h2 .pup{color: #6440B3;}
.m3 .flex_box .text_box{width: 40%;}
.m3 .flex_box .img_box{width: 60%;}
.m3 .flex_box .line_box{padding: 0.5rem 1rem; margin-top: 1rem; display: inline-block; font-size: 25px; border-radius: 2rem; border: 1px solid #6440B3; color: #6440B3;}
.m3 .flex_box .line_box:hover{background-color: #6440B3; color: white !important; transition: all 0.2s;}

.m3 .swiper-slide{filter: grayscale(0); transition: 0.5s all; position: relative;}
.m3 .swiper-slide-active{filter: grayscale(0); transition: 0.5s all;}
.m3 .swiper-slide-active .filter{opacity: 0; transition: 0.5s all;}
.m3 .swiper-slide .img_box{display: flex;}
.m3 .swiper-slide .text_box{background-color: white; padding: 2rem 0;}
.m3 .swiper-slide .text_box p{font-size: 30px; text-align: center; line-height: 1.5;}
.m3 .swiper-slide .text_box .pup{color: #6440B3; font-size: 20px; text-align: center; }
.m3 .flex_box p{font-size: 30px; line-height: 1.6; margin-top: 1.2rem; font-weight: 100; letter-spacing: -2px; color: #666666;}
.m3 .swiper-button-prev, .swiper-container-rtl .swiper-button-next{left: 22.5%; background-image: unset; color: #333; scale: 0.7;}
.m3 .swiper-button-next, .swiper-container-rtl .swiper-button-prev{right: 22.5%; background-image: unset; color: #333; scale: 0.7;}
.m3 .swiper-pagination2{display: flex; justify-content: center; padding: 5rem 0 0; gap: 1rem;}
.m3 .swiper-pagination-bullet{background-color: #333; opacity: 1;}
.m3 .swiper-pagination-bullet-active{background-color: #6440B3;}
.m3bg{background-image: url(../img/main/m3_bg.png); width: 100%; max-width: 1920px; margin: 0 auto; padding: 10rem 0 5rem; background-repeat: no-repeat; background-size: cover; background-color: unset;}




.m4{width: 100%;  padding: 5rem 0;}
.m4 .flex_box{display: flex; width: 100%; max-width: 75%; margin: 0 auto; align-items: center; justify-content: space-between;}
.m4 .flex_box .text_box h2{font-size: 50px; display:  flex;}
.m4 .flex_box .text_box h2 span{color: #6440B3;}
.m4 .flex_box .text_box{width: 40%;margin-left: 6rem;}
.m4 .flex_box .img_box{width: 60%;}
.m4 .flex_box .line_box{padding: 0.5rem 1rem; margin-top: 1rem; display: inline-block; font-size: 25px; border-radius: 2rem; border: 1px solid #6440B3; color: #6440B3;}
.m4 .flex_box .line_box:hover{background-color: #6440B3; color: white !important; transition: all 0.2s;}
.m4 .flex_box p{font-size: 30px; line-height: 1.6; margin-top: 1.2rem; font-weight: 100; letter-spacing: -2px; color: #666666;}

.m4_2 {width: 100%; max-width: 1920px; overflow: hidden; padding: 10rem 0; margin: 0 auto;}
.m4_2 .flex_box .text_box{margin: 0; font-size: 50px; color: #333; width: 100%; font-weight: 700;}
.m4_2 .flex_box{ align-items: flex-start; padding-left: 11.9%; max-width: 100%;}
.m4_2 .flex_box .img_box{width: 100%;}
.m4_2 .left{width: 15%; position: relative;}
.m4_2 .right{width: 85%;}

.m4_2 .swiper-slide .text_box {padding: 1rem 0 0 1.5rem; width: 90%;}
.m4_2 .swiper-slide .text_box h3{font-size: 30px; letter-spacing: -1px;}
.m4_2 .swiper-slide .text_box p{font-size: 20px; letter-spacing: -1px; font-weight: 100; color: #808080;}
.m4_2 .swiper-slide .text_box span{font-size: 15px; font-weight: 100; color: #808080;}

.m4_2 .swiper-button-next, .m4_2 .swiper-button-prev{margin-top: 40px;}
.m4_2 .swiper-button-prev, .m4_2 .swiper-container-rtl .swiper-button-next{left: 0; color: #333; background-image: unset;}
.m4_2 .swiper-button-next, .m4_2 .swiper-container-rtl .swiper-button-prev{right: 0; left: 90px; color: #333; background-image: unset;}
.m4_2 .swiper-button-next:after, .m4_2 .swiper-button-prev:after{scale: 0.75;}


.sec5{width: 100%; max-width: 1920px; margin: 0 auto; padding: 5rem 0 0;}
.sec5 h1{text-align: center; font-size: 45px; color: #333; padding: 5rem 0;}
.sec5 .flex_box{width: 100%; max-width: 75%; display: flex; margin: 0 auto; gap: 3rem; align-items: center;}
.sec5 .flex_box .text_box{display: grid; gap: 2.5rem;}
.sec5 .flex_box .text_box h2{font-size: 40px;letter-spacing: -1px; color:#333;line-height: 1.5;}
.sec5 .flex_box .text_box p{font-size: 25px;letter-spacing: -1px; color:#333; line-height: 1.5;}

.m5{width: 100%; background-color: #f4f4f4; padding: 5rem 0;}
.m5 .flex_box{display: flex; width: 100%; max-width: 75%; margin: 0 auto; align-items: center; justify-content: space-between;}
.m5 .flex_box .text_box h2{font-size: 50px; display: flex;}
.m5 .flex_box .text_box{width: 40%;}
.m5 .flex_box .img_box{width: 60%;}
.m5 .flex_box .text_box h2 .pup{color: #6440B3;}
.m5 .flex_box .line_box{padding: 0.5rem 1rem; margin-top: 1rem; display: inline-block; font-size: 25px; border-radius: 2rem; border: 1px solid #6440B3; color: #6440B3;}
.m5 .flex_box .line_box:hover{background-color: #6440B3; color: white !important; transition: all 0.2s;}
.m5 .flex_box p{font-size: 30px; line-height: 1.6; margin-top: 1.2rem; font-weight: 100; letter-spacing: -2px; color: #666666;}

.m6{width: 100%; max-width: 1920px; margin: 0 auto;}
.m6 .flex_box{display: flex; width: 100%; max-width: 75%; margin: 0 auto; gap: 7rem; padding: 5rem 0;}
.m6 .flex_box .notice{width: 50%;}
.m6 .flex_box .notice h3{font-size: 50px;  margin: 0 auto;}
.m6 .flex_box .notice .notice_wrap{ margin: 2rem auto 0; border-top: 2px solid black; border-bottom: 2px solid black;}
.m6 .flex_box .notice .notice_wrap .notice_box{gap: 1.5rem; align-items: center; border-bottom: 1px solid #d9d9d9; display: flex; padding: 1.5rem 0;}
.m6 .flex_box .notice .notice_wrap .notice_box p{width: 80%; font-size: 18px;}
.m6 .flex_box .notice .notice_wrap .notice_box span{width: 15%; text-align: center; display: flex; align-items: center; justify-content:  center;}
.m6 .flex_box .notice .notice_wrap .notice_box span span{padding: 0.5rem 0.2rem; width: 100%; display: block; border: 1px solid #6440B3; border-radius: 2rem;}
.m6 .flex_box .event{width: 50%;}
.m6 .flex_box .event h3{font-size: 50px;}
.m6 .flex_box .event .event_box{width: 100%; margin-top: 2rem;}

.m6 .flex_box .event .event_box .swiper2 .swiper-slide a{display: flex;}
.m6 .flex_box .event .event_box .swiper2 .swiper-slide a img{width: 100%;}

.m7{width: 100%; max-width: 1920px; overflow: hidden; position: relative; display: flex; align-items: center; margin: 0 auto;}
.bg{display: flex;}
.bg img{width: initial;}
.m7 .text_box{width: 100%; max-width: 77%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.m7 .text_box h3{color: white; font-size: 70px;overflow: hidden; min-width: fit-content;}
.m7 .text_box .yellow span{position: relative;}
.m7 .text_box .yellow span::after{content: ''; width: 100%; height: 25px; background-color: #6440B3; display: inline-block; position: absolute; left: 0%; bottom: 3px; z-index: -1;}

.m7 .text_box a img{width: initial; padding-top: 2rem;}
@media screen and (max-width:1350px) {
  .m1 .text_box h1{font-size: 7vw;}
  .m1 .text_box p{font-size: 3vw;}
  .m2 .flex_box h2{font-size: 4vw;}
  .m2 .flex_box p{font-size: 2.5vw;}
  .m3 .flex_box .text_box h2{font-size: 3vw;}
  .m3 .flex_box .line_box{font-size: 1.8vw;}
  .m3 .flex_box p{font-size: 2vw;}
  .m4 .flex_box .text_box h2{font-size: 3vw;}
  .m4 .flex_box .line_box{font-size: 1.8vw;}
  .m4 .flex_box p{font-size: 2vw;}
  .m4 .flex_box .text_box{margin-right: 0;}
  .m5 .flex_box .text_box h2{font-size: 3vw;}
  .m5 .flex_box .line_box{font-size: 1.8vw;}
  .m5 .flex_box p{font-size: 2vw;}
  .m7 .text_box h3{font-size: 5vw;}
  header .h_inner .menu_box .menu{font-size: 18px;}
  .s2_menu{top: 85px;}

}

@media screen and (max-width:900px) {
  .m1 .text_box p{font-size: 5vw;}
  header{transition: 0.5s all;height: 115px;}
  .on_bg_black{background-color: #000000e8; transition: 0.5s all; position: fixed; height: 100vh;}
  header .h_inner{max-width: 95%; height: 115px; overflow: hidden; flex-direction: column; align-items: center;}
  header .h_inner_on{overflow: unset;}
  .m1 .bg_box img{width: initial;}
  footer .f_inner .text_box{font-size: 15px;}
  header .h_inner .menu_box{width: 100%;    justify-content: space-around; }
  header .h_inner .menu_box .s2_msc{padding: 2rem 0; width: 100%; text-align: center;}
  .m3 .swiper-button-prev, .swiper-container-rtl .swiper-button-next{left: 10.5%;}
  .m3 .swiper-button-next, .swiper-container-rtl .swiper-button-prev{right: 10.5%; }
  .m4_2 .right{padding-top: 6rem;}

  .sec2 .flex_box{max-width: 90%; gap: 3rem;}
  .sec2 .flex_box .right .text_box{min-width: fit-content;}
  .sec2 .flex_box .right{min-width: fit-content;}
  .m4_2 .swiper-button-next, .m4_2 .swiper-button-prev{margin-top: 55px;}
  .m4 .flex_box .text_box{padding-left: 0;}
  .m2 .right .text_box p{font-size: 18px;}
  .m2 .right .text_box h1{font-size: 28px;}
  .sec3 .flex_box{flex-direction: column-reverse; gap: 2rem; max-width: 90%;}
  .sec3 .flex_box .text_box h1{font-size: 28px;}
  .sec3 .flex_box .text_box p{font-size: 16px;}
  .sec3 .flex_box .text_box{gap: 2rem; text-align: center;}

  .m7 .text_box{max-width: 90%;}
  .sec5 .flex_box .text_box{width: 100%; text-align: center;}
  .sec5 h1{font-size: 30px;}
  .sec5 .flex_box{flex-direction: column; max-width: 90%;}
  .sec5 .flex_box .text_box h2{font-size: 25px;}
  .sec5 .flex_box .text_box p{font-size: 18px;}
  .m4_2 .flex_box{gap: 3rem; padding-left: 5.9%;}
  header .h_inner .menu_box{opacity: 0; display: none;}
  header .h_inner .mob_box{display: block; opacity: 0; transition: 0.5s all;}
  header .h_inner .mob_on{opacity: 1; transition: 0.5s all;}
  .s2_on{position: relative; transition: 0.5s all;}
  .s2_menu{top: 20px; position: relative;}
  header .h_inner .menu_box .hover{height: 9px; transition: 0.5s all; overflow: hidden;}
  header .h_inner .menu_box .hover_on{height: 170px; transition: 0.5s all;}
  .b_menu{display: block; width: 25px; height: auto; display: grid; gap: 0.3rem; position: absolute; right: 7%; top: 65px;}
  .b_menu span{width: 100%; height: 3px; background-color: white; border-radius: 0.5rem;}
}

@media screen and (max-width:500px) {
  .m4_2 .flex_box{padding-left: 10.5%;}
  .m1 .swiper-pagination{background-color: transparent;width: 10% !important;height: auto;bottom: var(--swiper-pagination-bottom, 320px) !important;display: grid;margin: 0 auto;gap: 2rem;padding: 15px 15px;}
  .m1 .bg_box{height: 100vh;}
  .m1 .text_box p{padding-top: 0; font-size: 1.5rem;}
  .m1 .text_box h1{font-size: 2.5rem;}
  
  .m2 .flex_box{flex-direction: column; gap: 2rem;text-align: center; width: 80%;}
  .m2 .flex_box h2{font-size: 2rem;}
  .m2 .flex_box p{font-size: 1rem;}
  .m2{padding: 3.5rem 0;}
  .m4_2 .flex_box{gap: 0;}
  .m3 .flex_box{flex-direction: column-reverse; max-width: 90%;}
  .m3 .flex_box .text_box{width: 100%; padding-top: 1rem;}
  .m3 .flex_box .img_box{width: 100%;}
  .m3 .flex_box .text_box h2{font-size: 2rem;}
  .m3 .flex_box p{font-size: 1rem;}
  .m3 .flex_box .line_box{font-size: 1rem;}
  .m3 .swiper-button-prev, .swiper-container-rtl .swiper-button-next{left: 7.5%; top: 50%; transform: translateY(100%);}
  .m3 .swiper-button-next, .swiper-container-rtl .swiper-button-prev{right: 7.5%; top: 50%; transform: translateY(100%);}
  .sec3 .flex_box .text_box h1{font-size: 26px;}
  .sec3 .flex_box{max-width: 85%;}

  .sec3 .flex_box .text_box p{font-size: 13px;}

  .m4 .flex_box{flex-direction: column; max-width: 90%;}
  .m4 .flex_box .text_box{width: 100%; padding-top: 1rem; margin-left: 0;}
  .m4 .flex_box .img_box{width: 100%;}
  .m4 .flex_box .text_box h2{font-size: 2rem;}
  .m4 .flex_box p{font-size: 1rem;}
  .m4 .flex_box .line_box{font-size: 1rem;}

  .m2 .right .text_box h1{font-size: 26px;}
  .m2 .right .text_box p{font-size: 16px;}
  .m5 .flex_box{flex-direction: column-reverse; max-width: 90%;}
  .m5 .flex_box .text_box{width: 100%; padding-top: 1rem;}
  .m5 .flex_box .img_box{width: 100%;}
  .m5 .flex_box .text_box h2{font-size: 2rem;}
  .m5 .flex_box p{font-size: 1rem;}
  .m5 .flex_box .line_box{font-size: 1rem;}

  .sec5 .flex_box .text_box p{font-size: 15px;}
  .sec5 h1{width: 70%; margin: 0 auto;}

  .m7 .text_box h3{font-size: 2rem; width: 70%;}
  footer .f_inner{align-items: center;}
  .m7 .text_box a{width: 8rem; display: block;}
  .m7 .text_box a img{width: 100%;}
  .mob_view{display: block;}
  .m4_2 .swiper-slide .text_box p{font-size: 1rem;}
}