@charset "utf-8";

main .img-border {border: 1px solid #d1d1d1;}

.m-inner {max-width: 1510px; margin: 0 auto; position: relative;}
.main-tit {font-size: 7rem; font-family: 'TTSamlipCreamyWhiteR'; margin-bottom: 4rem; }
.main-tab li {cursor: pointer; font-size: 2.6rem; font-weight: 700; padding: 0 2rem; position: relative;}
.main-tab li::before {content:""; position: absolute; top:50%; left:0; transform: translateY(-50%); width:0; height: .9rem; background: #61cc9d; z-index: -1; transition: all 0.2s;}
.main-tab li.on::before {width: 100%;}
.main-deco {position: absolute; z-index: -1;}
.main-deco img {max-height:100%;}

@keyframes main-deco-ani {
    0% {transform: translate(0, 0);}
    50% { transform: translate(-4px, 6px);}
    100% {transform: translate(0, 0);}
}
@keyframes main-deco-ani1 {
    0% {transform: translate(0, 0);}
    50% { transform: translate(5px, -5px);}
    100% {transform: translate(0, 0);}
}

.new {font-family: "Poppins"; font-size: 2rem; font-weight: 700; color: #ef2222;}
@media (max-width:1400px) {
    .main-tit {font-size: 6.5rem;}
}
@media (max-width:800px) {
    .main-tit {font-size: 6rem;}
} 


.tab_box {margin-top: 4rem; padding-bottom: 8rem;}
.tab_box .box {transition: all 0.3s;}
.tab_box .box .img {position: relative; display: flex; border-radius: 2rem; overflow: hidden;}
.tab_box .box .img::before {content:""; position: absolute; top:0; left: 0; width: 100%; height: 100%; background: url(../images/index/eye_icon.png) rgba(97, 204, 157,0.85) center center no-repeat; opacity: 0; transition: all 0.3s;}
.tab_box .box .txt * {font-family: 'Pretendard';}
.tab_box .box .txt {margin-top: 1.5rem; }
.tab_box .box .txt h5 {font-size: max(13px,1.5rem); font-weight: 600; color: #fff; padding: 0.6rem 2rem; border-radius: 3rem; background: #61cc9d; display: inline-block; margin-bottom: 1.3rem;}
.tab_box .box .txt p {font-size: 2rem; font-weight: 600; line-height: -0.05rem;}
.tab_box .box:hover .img::before {opacity: 1;}
.tab_box .box.swiper-slide-active, 
.tab_box .box.swiper-slide-next + .box,
.tab_box .box.swiper-slide-duplicate-active,
.tab_box .box.swiper-slide-duplicate-next + .box { transform: translateY(8rem);}
.tab_pagi {position: absolute; top:4%; right:10rem; align-items: center; justify-content: center;}
.tab_pagi .swiper-pagination {position: static; width: auto; font-size: 2.8rem; font-weight: 600; letter-spacing: -0.1rem; margin: 0 2rem;}
.tab_pagi .swiper-pagination span {font-family: 'Pretendard';}
.tab_pagi .swiper-next {transform: scale(-1,1); cursor: pointer;}
.tab_pagi .swiper-prev {cursor: pointer;}
@media (max-width:1700px) {
    .tab_pagi {right: 4%;}
}
@media (max-width:800px) {
    .tab_pagi {display: none;}
} 

.main01 {background: oklch(0.8723 0.1217 80.01);position: relative; height: clamp(91rem,55vw,90vh); overflow: hidden;}
.main01 .bg-wrap {position: absolute;top:51%;left: 50%;transform: translate(-50%,-50%); width: 100%;}
.main01 #main-bg-mo {display: none;}
.main01 #main-txt {position: absolute;top: 13%;left: 28%;transform: translateX(-50%);width: max(100px,12.3vw);z-index: 2;}
.main01 #main-wifi {position: absolute; top: 17%;right: 23%; width: 12.65vw; z-index: 2; animation: wifi-ani 1.5s .5s forwards; opacity: 0;}
.main01 #main-yout {position: absolute;width: 7vw;bottom: 30%;right: 23.5%; z-index: 2;  animation: yout-ani 1.5s .75s forwards; opacity: 0;}
.main01 .main-txt2 {position: absolute;  top:73%; left: 58%; font-size: max(14px,1.8rem); }

@keyframes wifi-ani {
    0% {opacity: 0;}
    100% { opacity: 1;}
}
@keyframes yout-ani {
    0% {opacity: 0;}
    100% { opacity: 1;}
}
@media (max-width:1400px) {
    .main01 .bg-wrap {width: 120vw; top: 52%;}
}
@media (max-width:1080px) {
    .main01 {height: clamp(65rem,55vw,90vh);}
}
@media (max-width:800px) {
    .main01 {height: auto; }
    .main01 .bg-wrap {width: 100%; position: relative; top: 0; left: 0; transform: none;}
    .main01 #main-bg {display: none;}
    .main01 #main-bg-mo {display: block; position: static;top: 0; left: 0; transform: none; width: 100%;}

    .main01 #main-txt {width: max(130px, 33vw); transform: translateX(-70%);}
    .main01 #main-wifi {width: max(130px, 30vw); transform: translate(70%,60%); top:7%}
    .main01 #main-yout {width: max(80px, 20vw); transform: translate(80%, 160%);}
    .main01 .main-txt2 {display: none;}
}

.main02 {padding-top: 10rem;}
.main02 .inner, .main03 .inner {position: relative;} 
.main02 .main-deco {right: 20%; top: 0; height: 100%; max-width: 20vw; animation: main-deco-ani1 4s infinite ease-in-out;}
@media (max-width:800px) {
    .main02 .main-deco {right: 0;}
}

.main03 {padding: 18rem 0 0;}
.main03 .main-tab li::before {background: #89d4ff;}
.main03 .tab_box .box .txt h5 {background: #00a2ff;}
.main03 .tab_box .box .img::before {background-color: rgba(0,162,255,0.85) ;}
.main03 .main-deco {left: 48%;top: -34%;height: 100%;max-width: 11vw; animation: main-deco-ani 4s infinite ease-in-out;}
@media (max-width:800px) {
    .main03 .main-deco {left: 78%;}
}

div:has(.main_yout) {max-width: 100%;}
.main_yout {background: url(../images/index/main_yout_bg.png) no-repeat center center / contain; overflow: hidden;}
.main_yout .youtube {width: 100%;  padding-bottom: 56.25%; position: relative; transform: scale(.5);}
.main_yout .youtube iframe {position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%);  width: 70%; height: 70%;}
.main_yout h3 {font-family: "Poppins"; font-size: 6.85vw; font-weight: 700; color: #32186c; position: absolute; z-index: 99; }
.main_yout h3.txt1 {left:80%; top:20%;transform: translate(50%,-50%);}
.main_yout h3.txt2 {right:80%; bottom:20%;transform: translate(20%,50%);}
.main_yout .main-deco {right: 15%;top: 0%;height: 100%; max-width: 9vw; animation: main-deco-ani 4s infinite ease-in-out;}

@media (max-width:1920px) {
    .main_yout h3 {font-size: 13.1rem;}
}
@media (max-width:800px) {
    .main_yout {padding: 10rem 0; display: flex; flex-flow: row wrap; justify-content: center; position: relative;}
    .main_yout .youtube {order:3;}
    .main_yout .youtube iframe  {width: 85%; height: 85%;}
    .main_yout h3 {position: static; font-size: 15vw;}
    .main_yout h3.txt1 {transform:none; order:2;}
    .main_yout h3.txt2 {transform:none; order:1; margin-right: 2%;}
    .main_yout .main-deco {right: 2%;}
}

/* .main04 {min-height: 150rem;} */

.main04 .culture {background: #fcefa4; }
.main04 .talk1 {background: #ffb4ce;}
.main04 .talk2 {background: #cda8ff;}
.main04 .edu {background: #a2e2dd;}
.main04 .wave {background: #a8e1ff;}

.main04 .content {padding: 6rem 0; border-top: 1px solid #000; position: sticky; transition: 0.3s; overflow: hidden; top: 0;} 
.main04 .content .inner {display: flex; flex-flow: row wrap; justify-content: space-between;}
.main04 .content .title {width: 20%;}
.main04 .content .txt {padding: 0 2% 0 3%; width: 45%;}
.main04 .content .txt h4 {font-size: 3.6rem; font-weight: 700;}
.main04 .content .txt h4 span {font-family: "pretendard"; font-weight: 500;}
.main04 .content .txt p {font-size: 2.4rem; font-weight: 300; letter-spacing: -0.03rem; margin-top: 2.5rem;}
.main04 .content .img {width: 35%;  text-align: right; border-radius: 1rem; overflow: hidden;}
.main04 .content.wave .txt h4 {padding-left: 1.1em; text-indent: -1.1em;}
.main04 .content.wave .txt h4:not(:last-child) {margin-bottom: 1rem;}
@media (max-width:1400px) {
    .main04 .content .title {width: 20%;}
    .main04 .content .txt {padding: 0 3% 0; width: 50%;}
    .main04 .content .img {width: 30%;}
}
@media (max-width:800px) {
    .main04 .content .title {width: 50%; margin-bottom: 3rem;}
    .main04 .content .title img {max-width: 300px;}
    .main04 .content .txt {padding: 0 3% 0 0; width: 60%;}
    .main04 .content .txt p {margin-top: 2rem;}
    .main04 .content .img {width: 40%;}
}
@media (max-width:500px) {
    .main04 .content {max-height: 100%;}
    .main04 .content .txt {padding:0; width: 100%; margin-bottom: 3rem;}
    .main04 .content .img {width: 100%;}
}