/* 
font-family: 'Do Hyeon', sans-serif;
font-family: 'Jua', sans-serif;
font-family: 'Noto Sans KR', sans-serif;*/
#header button{display: none;}
#header .headerin h1 a img.logoimg_m{display: none;}
/* pattern */
.learn a{font-size: 1.7vw; font-family: 'Jua', sans-serif; border: 3.5px solid #008037; border-radius: 40px; padding: 1vw 3vw; color: #008037; transition: .3s;}
.learn a:hover{color: #fff; background-color: #008037;}
.han{font-family: 'Do Hyeon', sans-serif; font-size: 2.4vw; font-weight: bold;}
.title{font-size: 3vw; font-weight: bold;padding-bottom: 50px;}
.title span{color: #008037;}
.contents{padding-top: 83px;}
.main p {font-size: 1.4vw;line-height: 1.8;font-weight: bold;}
.jua{font-family: 'Jua', sans-serif;}
/* .mainvisual */

.main{position: relative;}
.program .main, .literacy .main, .parents .main, .teacher .main, .join .main{ height: 38vw;}
.program .main .container, .literacy .main .container, .parents .main .container, .teacher .main .container, .join .main .container{margin: auto; height: 100%; padding: 0; display: flex; flex-direction: column; justify-content: center;}

.main img{}
.main .main_txt{position: absolute; top: 50%; left: 10%; transform: translateY(-50%);}
.main .main_txt h2{font-size: 2.5vw; color: #fff; margin-bottom: 3vw;}
.main .main_txt h2 span{font-size: 3.5vw;}
.main .main_txt .learn a{ color: #064C25; border-color: #064C25;}
.main .main_txt .learn a:hover{color: #fff; background-color: #064C25;}

/* content1 */
.content1{}
.content1 .container{}
.content1 ul{display: flex; justify-content: space-around;}
.content1 ul li{width: 25%; text-align: center;}
.content1.ani ul li:nth-child(1){opacity: 0; animation: fadein 2.5s 0s forwards;}
.content1.ani ul li:nth-child(2){opacity: 0; animation: fadein 2.5s 1s forwards;}
.content1.ani ul li:nth-child(3){opacity: 0; animation: fadein 2.5s 2s forwards;}
@keyframes fadein{
    0%{opacity: 0;}
    100%{opacity: 1;}
}

.content1 ul li .imgs{position: relative; overflow: hidden; border-radius: 50%; box-shadow: 0 0 10px rgba(0,0,0,0.25);}
.content1 ul li div img{}
.content1 ul li div img.bg{}
.content1 ul li h4{ padding: 30px 0 10px;}
.content1 ul li p{font-size: 1.5vw;}
/* school */
.content1 ul li .school_img{}
.content1 ul li .school_img .bus{position: absolute; width: 35%; bottom: 20%; left: -31%;}
.content1.ani ul li .school_img .bus{animation: vibrate 0.3s ease-in-out infinite, bus 10s cubic-bezier(0.59, 0, 0.42, 1.01) infinite;}
@keyframes vibrate {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
      40% {transform: translateY(-2px);}
      60% {transform: translateY(-1px);}
}
@keyframes bus{
    0%{left: -31%;}
    15%{left: 35%;}
    30%{left: 35%;}
    50%{left: 100%;}
    100%{left: 100%;}
}
/* book */
.content1 ul li .book_img .b_img{position: absolute; left: 50%; transform: translateX(-50%); display: none;}
.content1.ani ul li .book_img .b_img{display: block;}
.content1.ani ul li .book_img .b1{bottom: 100%; width: 57%; animation: drop1 .8s 1s ease-out forwards; }
.content1.ani ul li .book_img .b2{bottom: 100%; width: 44%; animation: drop2 .7s 1.3s ease-out forwards; }
.content1.ani ul li .book_img .b3{bottom: 100%;width: 50%; animation: drop3 .6s 1.5s ease-out forwards; }
.content1.ani ul li .book_img .b4{bottom: 100%; width: 40%; animation: drop4 .7s 1.8s ease-out forwards; }

@keyframes drop1{
    0% {bottom: 100%;}
    100% {bottom: 10%;}
}
@keyframes drop2{
    0% {bottom: 100%;}
    100% {bottom: 45.5%;}
}
@keyframes drop3{
    0% {bottom: 100%;}
    100% {bottom: 65.5%;}
}
@keyframes drop4{
    0% {bottom: 100%;}
    100% {bottom: 74.5%;}
}

/* content2 */
.content2{background-color: #fff2de;}
.content2 .con_box{display: flex; justify-content: space-between;align-items: center;}
.content2 .con_box .left{width: 50%; text-align: center; min-width: 378px;}
.content2 .con_box .left img{width: 80%;}
.content2 .con_box .left h4{padding: 50px 0 20px;}
.content2 .con_box .left p{font-size: 1.5vw; width: 100%; margin: 0 auto;}
.content2 .con_box .right{width: 40%; overflow: hidden; height: 48vw;display: flex; justify-content: space-between;}
.content2 .con_box .right .slider{width: 30%;}
.content2 .con_box .right .slider .slide{animation: slideshow 40s linear infinite;}
.content2 .con_box .right .slider:nth-child(2) .slide{animation: slideshow2 40s linear infinite;}
.content2 .con_box .right .slider .slide img{border-radius: 20px; overflow: hidden; box-shadow: 2px 2px 10px rgba(0,0,0,0.25); opacity: 0.6; transition: .3s;margin: .5vw 0;}
.content2 .con_box .right .slider .slide img:hover{opacity: 1;}
@keyframes slideshow {
    0% { transform: translateY(0);}
    100% { transform: translateY(-100%);}
}
@keyframes slideshow2 {
    0% { transform: translateY(-100%);}
    100% { transform: translateY(0);}
}


/* content3 */
.content3{}
.content3 .top{display: flex; justify-content: space-between;align-items: center;}
.content3 .top .title{}
.content3 .bottom{display: flex; align-items: center; justify-content: space-between;}
.content3 .bottom .left{width: 40%; position: relative;}
.content3 .bottom .left img{}
.content3 .bottom .left img.graph{width: 100%; position: absolute; top: 0%;left: 0%;transform: scale(0); opacity: 0;}
.content3.ani3 .bottom .left img.graph{animation: graph1 2s .3s forwards;}
@keyframes graph1{
    0%{transform: scale(0); opacity: 0;}
    100%{transform: scale(1); opacity: 1;}
}
.content3 .bottom .right{width: 52%;}
.content3 .bottom .right h4{padding-bottom: 20px;}
.content3 .bottom .right p{font-size: 1.7vw;}

/* content4 */
.content4{background-color: #fff9f9;}
.content4 .top{display: flex; justify-content: space-between;align-items: center;}
.content4 .top .title{padding-bottom: 4vw;}
.content4 .bottom{padding-top: 50px;}
.content4 .bottom>li{}
.content4 .bottom>li.second{padding: 2vw 0;}
.content4 .bottom>li ul{display: flex; justify-content: space-evenly; align-items: center;}
.content4 .bottom>li ul li{ text-align: center; opacity: 0; font-size: 1.4vw;}
.content4 .bottom>li ul li:nth-child(2n-1){width: 25%;}
.content4 .bottom>li ul li:nth-child(2n){width: 4%;}
.content4 .bottom>li.second .arrow img{width: 16%;}
.content4.ani2 .bottom>li ul li{animation: fadein 3s forwards;}
.content4 .bottom>li ul li span{display: block;}
.content4.ani2 .bottom>li ul li.arrow img{}
.content4.ani2 .bottom>li ul li.p_img img{width: 55%;}
.content4.ani2 .bottom>li.first ul li:nth-child(1){}
.content4.ani2 .bottom>li.first ul li:nth-child(2){animation-delay: .3s;}
.content4.ani2 .bottom>li.first ul li:nth-child(3){animation-delay: .6s;}
.content4.ani2 .bottom>li.first ul li:nth-child(4){animation-delay: .9s;}
.content4.ani2 .bottom>li.first ul li:nth-child(5){animation-delay: 1.2s;}
.content4.ani2 .bottom>li.second ul li:nth-child(5){animation-delay: 1.5s;}
.content4.ani2 .bottom>li.third ul li:nth-child(5){animation-delay: 1.8s;}
.content4.ani2 .bottom>li.third ul li:nth-child(4){animation-delay: 2.1s;}
.content4.ani2 .bottom>li.third ul li:nth-child(3){animation-delay: 2.4s;}
.content4.ani2 .bottom>li.third ul li:nth-child(2){animation-delay: 2.7s;}
.content4.ani2 .bottom>li.third ul li:nth-child(1){animation-delay: 3s;}
.content4 .bottom>li ul li.p_img{}
.content4 .bottom>li ul li.p_img .han{font-size: 2.2vw;padding-top: 20px;}
.content4 .bottom>li ul li.arrow i{width: 30%;}

/* content5 */
.content5{width: calc(100vw - 17px);overflow-x: hidden; padding: 100px 0;}
.content5 .title{width: 85%; margin: 0 auto;}
.content5 .slider1{display: flex; flex-wrap: nowrap; padding-bottom: 15px;}
.content5 .slider1 .slide{display: flex; animation: c3_slideshow 40s linear infinite; padding: 2vw 0;}
.content5 .slider1 .slide img{width: calc(100vw / 5);padding: 0 0.5vw;}
.content5 .slider2{display: flex; flex-wrap: nowrap; }
.content5 .slider2 .slide{display: flex; animation: c3_slideshow2 40s linear infinite;}
.content5 .slider2 .slide img{width: calc(100vw / 5); padding: 0 0.5vw;;}

@keyframes c3_slideshow {
    0% { transform: translateX(0);}
    100% { transform: translateX(-100%);}
}
@keyframes c3_slideshow2 {
    0% { transform: translateX(-100%);}
    100% { transform: translateX(0);}
}

.donation{background-color: #fff0fe;}
.donation p{font-size: 1.4vw; width: 70%; font-weight: 600;}
.donation p span{display: block;}
.donation .donation_img{width: 30%;position: absolute;right: 0; top: 50%; transform: translateY(-50%);}
/* content6 */
.content6{position: relative; background-color: #eff9ff;}
.content6 img{}
.content6 img.w_768{display: none;}
.content6 img.w_510{display: none;}
.content6{padding: 100px 0 0;}
.content6 .top{display: flex; width: 85%; margin: 0 auto 2vw; justify-content: space-between; align-items: center;}
.content6 .top .learn{}
.content6 .top .learn:hover{}
.content6 .bottom{width: 38%; position: absolute; top: 38%; right: 0%;}
.content6 .bottom ul{padding: 0.5vw 0;}
.content6 .bottom ul li.mini_title{font-size: 30px; font-weight: bold;}
.content6 .bottom ul li{font-size: 1.4vw; padding: 0.2vw 0;}


/* program */
/* program */
.program .main{background: url(../img/program_bg.png) no-repeat; background-size: cover; color: #fff;}
.program .main .title{}


/* process */
.process{}
.process .container{padding: 150px 0;}
.process ul{background: url(../img/line.png) no-repeat center;background-size: contain;}
.process ul li{display: flex; justify-content: space-between; align-items: center;padding: 3vw 0;}
.process ul li:nth-child(2){flex-direction: row-reverse;}
.process ul li .p_img{width: 30%;}
.process ul li .p_img img{}
.process ul li .text{width: 67%;}
.process ul li .text h4{padding-bottom: 2vw;}
.process ul li .text p{font-size: 1.6vw; line-height: 1.7;}
.process ul li .text p.top{margin-bottom: 2vw;}
.process ul li .text p span{font-weight: bold;}
.process ul li .text p span.block{display: block;}

/* process2 */
.process2{background: url(../img/process_bg.png) repeat #FFF5EA;}
.process2 .title{}
.process2 .bottom{}
.process2 .bottom>li{}
.process2 .bottom>li.second{padding: 2vw 0;}
.process2 .bottom>li ul{display: flex; justify-content: space-evenly; align-items: center;}
.process2 .bottom>li ul li{text-align: center; opacity: 0;}
.process2 .bottom>li ul li:nth-child(2n-1){width: 30%; }
.process2 .bottom>li ul li:nth-child(2n){width: 5%; }
.process2.ani .bottom>li ul li{animation: fadein 3s forwards;}
.process2.ani .bottom>li.first ul li:nth-child(1){}
.process2.ani .bottom>li.first ul li:nth-child(2){animation-delay: .5s;}
.process2.ani .bottom>li.first ul li:nth-child(3){animation-delay: 1s;}
.process2.ani .bottom>li.second ul li:nth-child(1){animation-delay: 3.5s;}
.process2.ani .bottom>li.second ul li:nth-child(3){animation-delay: 1.5s;}
.process2.ani .bottom>li.third ul li:nth-child(1){animation-delay: 3s;}
.process2.ani .bottom>li.third ul li:nth-child(2){animation-delay: 2.5s;}
.process2.ani .bottom>li.third ul li:nth-child(3){animation-delay: 2s;}
.process2 .bottom>li ul li.p_img img{width: 70%;}
.process2 .bottom>li ul li.imgs img{width: 100%;}
.process2 .bottom>li ul li.p_img .han{font-size: 2vw;padding-top: 20px;}
.process2.ani .bottom>li.second ul li img{width: 17%;}
/* .process2 .bottom>li ul li.arrow img{width: 30%;} */

.process2 .phonics{width: 80%; margin: 0 auto; padding-top: 7vw;}
.process2 .phonics .top{position: relative;text-align: center;}
.process2 .phonics .top img{width: 95%;}
.process2 .phonics .top .tit_txt{position: absolute; top: 50%; left: 52%; transform: translate(-50%, -50%); text-align: center; width: 100%; font-size: 1.5vw;}
.process2 .phonics .top .jua{font-size: 2.5vw;}
.process2 .phonics .top .jua span{color: #008037;}
.process2 .phonics .bottom{padding-top: 50px;}
.process2 .phonics .bottom ul{display: flex; justify-content: space-between;}
.process2 .phonics .bottom ul li{position: relative; width: 22%;}
.process2 .phonics .bottom ul li .card{}
.process2 .phonics .bottom ul li .con{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;width: 100%;}
.process2 .phonics .bottom ul li .con img{width: 70%;}
.process2 .phonics .bottom ul li .con p{font-weight: bold; font-size: 1.5vw;padding-top: 1.5vw;}

/* process3 */
.process3{}
.process3 .faq_img{position: absolute;}
.process3 .container{padding: 8vw 0 50px;}
.process3 .faq{}
.process3 .faq .title{text-align: center; padding-bottom: 0;}
.process3 .faq ul{}
.process3 .faq ul li{display: flex; justify-content: space-around; align-items: end; padding: 4.5vw 0 2vw; border-bottom: 1px solid #E2E2E2; position: relative;}
.process3 .faq ul li:last-child{border: none;}
.process3 .faq ul li .question{width: 47%; position: relative; font-weight: bold;}
.process3 .faq ul li .question .num{font-size: 5vw; color: #DEF0E0;}
.process3 .faq ul li .question .question_txt{position: absolute; bottom: 7%; left: 10%; font-size: 1.8vw;}
.process3 .faq ul li .answer{width: 45%; padding-bottom: .5vw; font-size: 1.6vw;}
.process3 .faq .faq_img{position: absolute;}
.process3 .faq .faq_img1{bottom: 0%; right: 5%;width: 5vw;}
.process3 .faq .faq_img2{bottom: 0%; left: 0.5%;width: 5vw;}
.process3 .faq .faq_img3{bottom: 0%; right: 1%;width: 5vw;}
.process3 .faq .faq_img4{top: 35%; left: 36%;width: 5vw;}
.process3 .faq .faq_img5{bottom: 0%; right: 15%;width: 8vw; display: flex;align-items: flex-end;}
.process3 .faq .faq_img5 img:nth-child(1){width: 40%;}
.process3 .faq .faq_img5 img:nth-child(2){width: 60%;}
.process3 .faq .faq_img6{bottom: 0%; right: 0%;width: 5vw;}
.process3 .faq .faq_img7{bottom: 0%; left: 0%;width: 6vw;}
.process3 .faq .faq_img8{bottom: 0%; right: -2%;width: 4vw;}
.process3 .faq .faq_img9{bottom: 0%; right: 53%;width: 5vw;}
.process3 .faq .faq_img10{top: 25%; left: 0%;width: 5vw; transform: rotate(-10deg);}


/* literacy */
.literacy .main{background: url(../img/literacy_bg2.png) no-repeat; background-size: cover; color: #fff;}

.literacy .l_content1{ }
.literacy .l_content1 ul{display: flex; justify-content: space-between;}
.literacy .l_content1 ul li{width: 23%; text-align: center;}
.literacy .l_content1 ul li img{}
.literacy .l_content1 ul li h4{font-size: 2vw; padding: 15px 0 5px;}
.literacy .l_content1 ul li p{font-size: 1.35vw;}

.l_content2{background-color: #feffe0; position: relative;}
.l_content2 .title{}
.l_content2 .top{text-align: center;}
.l_content2 .top h4{font-size: 2.2vw; font-weight: bold; padding: 2vw 0;}
.l_content2 .top>div{display: flex; justify-content: space-around; padding-top: 2vw;}
.l_content2 .top .graph_wrap{position: relative; width: 40%;}
.l_content2 .top .graph_wrap .box{}
.l_content2 .top .graph_wrap .graph{}
.l_content2 .top .graph1 .box{position: relative; z-index: 1;}
.l_content2 .top .graph_wrap .graph{position: absolute;top: 0;width: 100%;}
.l_content2 .top .graph_wrap h4{width: 100%;}
.l_content2 .top .graph_wrap .height{}
.l_content2 .top .graph_wrap .scale{transform: scale(0);}
.l_content2 .top .graph_wrap .height::after{position: absolute; width: 100%; height: 100%; background-color: #FEFFE0; content: ''; top: 0; left: 0; }

.l_content2 .top .before.ani .graph_wrap .height::after{animation: graph 2s .3s forwards;}
.l_content2 .top .after.ani .graph_wrap .height::after{animation: graph 2s .3s forwards;}
@keyframes graph{
    0%{height: 100%;}
    100%{height: 0%;}
}
.l_content2 .top .before.ani .graph_wrap .scale{animation: graph1 2s .3s forwards;}
.l_content2 .top .after.ani .graph_wrap .scale{animation: graph1 2s .3s forwards;}


.l_content2 .bottom{display: flex;flex-wrap: wrap; justify-content: space-between;}
.l_content2 .bottom li{position: relative; width: 21%; padding-bottom: 21%; background-color: #fff;margin: 20px 0; border-radius: 50%;}
.l_content2 .bottom li:nth-child(1){background: url(../img/circle1.png) no-repeat;background-size: cover;}
.l_content2 .bottom li:nth-child(2){background: url(../img/circle2.png) no-repeat;background-size: cover;}
.l_content2 .bottom li:nth-child(3){background: url(../img/circle3.png) no-repeat;background-size: cover;}
.l_content2 .bottom li:nth-child(4){background: url(../img/circle4.png) no-repeat;background-size: cover;}
.l_content2 .bottom li:nth-child(5){background: url(../img/circle5.png) no-repeat;background-size: cover;}
.l_content2 .bottom li:nth-child(6){background: url(../img/circle6.png) no-repeat;background-size: cover;}
.l_content2 .bottom li:nth-child(7){background: url(../img/circle7.png) no-repeat;background-size: cover;}
.l_content2 .bottom li:nth-child(8){background: url(../img/circle8.png) no-repeat;background-size: cover;}
.l_content2 .bottom li div{position: absolute; top: 50%;left: 50%;transform: translate(-50%, -50%); text-align: center; width: 80%; }
.l_content2 .bottom li .minititle{font-size: 1.5vw;padding-bottom: 10px;}
.l_content2 .bottom li .txt{font-size: 20px; font-size: 1.2vw;}
.l_content2 .arrow{position: absolute; top: 100%; z-index: 1;}
.l_content2_bottom{background-color: #FFFBC7;}
.l_content2.l_content2_bottom .top>div{padding-top: 4vw;}
.l_content2_bottom .top .graph_wrap .height::after{position: absolute; width: 100%; height: 100%; background-color: #FFFBC7; content: ''; top: 0; left: 0; }
.l_content2_top .container{padding-bottom: 0;}
.l_content2_top .name{position: absolute; bottom: 5vw; right: 0; font-size: 1.1vw;}

/* parents */
.parents .main{background: url(../img/parents.jpg ) no-repeat; background-size: cover;}
.parents .main h2{}
.parents .main h2 .miniti{display: block; font-size: 2vw; padding-left: 10px;}
.parents .main p{width: 60%;}
.parents .contents{}
.parents .content li{width: 80%; margin: 0 auto; padding-bottom: 3.5vw;}
.parents .content li:last-child{padding-bottom: 0;}
.parents .content li h3{font-size: 2.5vw; font-weight: bold; color: #008037;}
.parents .content li h3 .num{font-size: 4.5vw; color: #D9D9D9; margin-left: -2.5%; position: relative; z-index: -1;}
.parents .content li .in{display: flex; gap: 7vw;align-items: center; padding: 10px 4% 0;}
.parents .content li .in .imgs{width: 30%;}
.parents .content li .in .txt{width: 48%;}
.parents .content li .in .txt h4{font-size: 2vw; font-weight: bold; padding-bottom: 10px;}
.parents .content li .in .txt p{font-size: 1.4vw;}

.parents .content li:nth-child(2n) {text-align: end;}
.parents .content li:nth-child(2n) .in{flex-direction: row-reverse;}

.parents .last{background-color: #FFF3EA;}
.parents .last .container{}
.parents .last .container h2{}
.parents .last .container .last_img{width: 60%; margin: 0 auto;}
.parents .last .container .last_img img{}

/* teacher */
.teacher .main{background: url(../img/teacher.jpg ) no-repeat; background-size: cover;}
.teacher .main h2{}
.teacher .main h2 .miniti{display: block; font-size: 2vw; padding-left: 10px;}
.teacher .main p{width: 60%;}
.teacher .contents{}
.teacher .content li{width: 80%; margin: 0 auto; padding-bottom: 3.5vw;}
.teacher .content li:last-child{padding-bottom: 0;}
.teacher .content li h3{font-size: 2.5vw; font-weight: bold; color: #008037;}
.teacher .content li h3 .num{font-size: 4.5vw; color: #D9D9D9; margin-left: -2.5%; position: relative; z-index: -1;}
.teacher .content li .in{display: flex; gap: 7vw;align-items: center;padding-top: 10px;}
.teacher .content li .in .imgs{width: 30%;}
.teacher .content li .in .txt{width: 48%;}
.teacher .content li .in .txt h4{font-size: 2vw; font-weight: bold; padding-bottom: 10px;}
.teacher .content li .in .txt h4 span{display: block;}
.teacher .content li .in .txt p{font-size: 1.2vw;}

.teacher .content li:nth-child(2n){text-align: end;}
.teacher .content li:nth-child(2n) .in{flex-direction: row-reverse;}

.teacher .last{background-color: #FFFBE3;}
.teacher .last .container{}
.teacher .last .container h2{}
.teacher .last .container .last_img{width: 60%; margin: 0 auto;}
.teacher .last .container .last_img img{}
.teacher .last .container p{text-align: center; font-size: 2vw; padding-top: 3vw;}

/* join */
.join .main{background: url(../img/join.png) no-repeat; background-size: cover;}
.join .main .container{}
.join .main p{width: 52%;}
.join .contents{background-color: #FAFAFA;}
.join .content>li{padding-bottom: 5vw;}
.join .content li:last-child{padding-bottom: 0;}
.join .content li .in{display: flex; align-items: center;justify-content: space-evenly;}
.join .content li .in .imgs{width: 30%;}
.join .content li .in .txt{width: 41%;}
.join .content li .in .txt .title{font-size: 2vw; padding-bottom: 20px; text-align: start;}
.join .content li .in .txt ul{}
.join .content li .in .txt ul li{display: flex; align-items: center; padding: .3vw 0;}
.join .content li .in .txt ul li:last-child{padding-bottom: 0;}
.join .content li .in .txt ul li img{width: 1.4vw; padding-right: .5vw;}
.join .content li .in .txt ul li p{font-size: 1.3vw;}

.join .content>li:nth-child(2n) .in{flex-direction: row-reverse;}


/* 반응형 */
@media (max-width:1024px){
    .container{width: 90%; padding: 80px 0;}
    .title{font-size: 3.5vw; padding-bottom: 40px;}
    .han{font-size: 22px;}
    .learn a{font-size: 2.2vw;}
    .contents{padding-top: 71px;}
    #header .headerin h1 a img{width: 200px;}
    #header .headerin ul{font-size: 15px;}
    #footer .container{padding: 40px 0; font-size: 16px;}
    .footer_left .f_menu{padding: 10px 0;}
    .footer_left .f_menu ul{gap: 20px;}
    .footer_left .company ul li{padding: 0;}
    .footer_left .logo{width: 33%;}
    .footer_right{width: 13%;}
    .main .main_txt{left: 5%;}
    .content1 ul li{width: 31%;}
    .content1 ul li .imgs{width: 80%; margin: 0 auto;}
    .content1 ul li p{font-size: 16px;}
    .content2 .con_box .left p{font-size: 16px;}
    .content2 .con_box .left h4{padding: 30px 0 10px;}
    .content2 .con_box .right{height: 57vw;}
    .content3 .bottom{justify-content: space-between;}
    .content3 .bottom .left{width: 45%;}
    .content3 .bottom .right{width: 53%;}
    .content3 .bottom .right p{font-size: 2vw;}
    .content4 .bottom>li ul li:nth-child(2n-1){width: 30%;}
    .content4 .bottom>li.second{}
    .content4 .bottom>li.second .arrow img{width: 13%;}
    .content4 .bottom>li ul li{font-size: 1.7vw;}
    .content5{padding: 80px 0;}
    .content5 .title{width: 90%;}
    .content5 .slider1 .slide img{width: calc(100vw / 3.5); padding: 0 5px;}
    .content5 .slider2 .slide img{width: calc(100vw / 3.5); padding: 0 5px;}
    .content5 .slider1{padding-bottom: 0;}
    .content5 .slider1 .slide{padding: 0.5vw 0;}
    .content6{padding: 80px 0 0;}
    .content6 .top{width: 90%;}
    .content6 .bottom{width: 41%; right: 2%;}
    .content6 .bottom ul li{font-size: 15px;padding: 0.1vw 0;}
    .content6 .bottom ul li.mini_title{font-size: 22px;}
    .donation p{font-size: 1.6vw;}

    /* 프로그램 */
    .program .main{background-size: 110%; }
    .program .main .title, .literacy .main .title, .join .main .title{padding-bottom: 2.5vw;}
    .main p{font-size: 1.8vw;}
    .process .container{padding: 80px 0;}
    .process ul li .p_img{width: 25%;}
    .process ul li .text{width: 72%;}
    .process ul li .text p{font-size: 1.8vw; }
    .process2 .bottom>li ul li.p_img .han{font-size: 3vw;}
    .process2 .bottom>li.second{padding: 4vw 0;}
    .process2 .bottom>li.first .p_img{width: 33%;}
    .process2 .bottom>li.third .p_img{width: 33%;}
    .process2 .bottom>li ul li.arrow img{width: 40%;}
    .process2 .bottom>li ul li:nth-child(2n){width: 13%;}
    .process2 .phonics{width: 85%;}
    .process2 .phonics .top img{width: 100%;}
    .process2 .phonics .top .jua{font-size: 3vw;}
    .process2 .phonics .top .tit_txt{font-size: 1.8vw;}
    .process2 .phonics .bottom{padding-top: 4vw;}
    .process2 .phonics .bottom ul li{width: 23%;}
    .process2 .phonics .bottom ul li .con img{width: 80%;}
    .process2 .phonics .bottom ul li .con p{font-size: 1.9vw;}
    .process3 .faq ul li{justify-content: space-between;}
    .process3 .faq ul li .question .num{font-size: 6vw;}
    .process3 .faq ul li .question .question_txt{width: 100%; font-size: 2.1vw;left: 5%;}
    .process3 .faq ul li .answer{font-size: 1.7vw; width: 49%;}
    .process3 .faq .faq_img1{right: 1%;}
    .process3 .faq .faq_img2{left: -3.5%;}
    .process3 .faq .faq_img3{right: -3%;}
    .process3 .faq .faq_img7{left: -4%;}
    .process3 .faq .faq_img8{right: -3%;}
    .process3 .faq .title{font-size: 5vw;}
    .process3 .container{padding-bottom: 30px;}

    /* 리터러시 */
    .literacy .l_content1 ul{flex-wrap: wrap; justify-content: space-around;}
    .literacy .l_content1 ul li{width: 39%; padding-bottom: 3vw;}
    .literacy .l_content1 ul li h4{font-size: 3.2vw;}
    .literacy .l_content1 ul li p{font-size: 1.9vw;}
    .l_content2 .top img{width: 90%;}
    .l_content2 .bottom{justify-content: space-around;}
    .l_content2 .bottom li{width: 28%;padding-bottom: 28%;}
    .l_content2 .bottom li .minititle{font-size:2.2vw;}
    .l_content2 .bottom li .txt{font-size: 1.7vw;}
    .l_content2 .top>div{justify-content: space-between;}
    .l_content2 .top img{width: 100%;}
    .l_content2 .top .graph_wrap{width: 48%;}
    .l_content2 .container{}
    .l_content2_top .name{font-size: 1.5vw;}


    /* 가맹안내 */
    .join .content li .in{justify-content: space-around;}
    .join .content li .in .imgs{width: 40%;}
    .join .content li .in .txt{width: 50%;}
    .join .content li .in .txt .title{font-size: 2.5vw; padding-bottom: 10px;}
    .join .content li .in .txt ul li img{width: 2vw;}
    .join .content li .in .txt ul li p{font-size: 1.7vw;}

    /* parents */
    .parents .content li{width: 90%;}
    .parents .content li .in{padding: 10px 0 0; justify-content: space-around; gap: 0;}
    .parents .content li .in .imgs{width: 35%;}
    .parents .content li .in .txt{width: 55%;}
    .parents .content li .in .txt h4{font-size: 2.5vw;}
    .parents .content li .in .txt p{font-size: 2vw;}
    .parents .content li h3{font-size: 3.5vw;}
    .parents .content li h3 .num{font-size: 5.5vw;}

    /* teacher */
    .teacher .content li{width: 90%;}
    .teacher .content li .in{padding: 10px 0 0; justify-content: space-around; gap: 0;}
    .teacher .content li .in .imgs{width: 35%;}
    .teacher .content li .in .txt{width: 55%;}
    .teacher .content li .in .txt h4{font-size: 2.5vw;}
    .teacher .content li .in .txt p{font-size: 2vw;}
    .teacher .content li h3{font-size: 3.5vw;}
    .teacher .content li h3 .num{font-size: 5.5vw;}
}
@media (max-width:768px){
    .container{width: 90%; padding: 50px 0;}
    .title{padding-bottom: 4.5vw; font-size: 4.5vw;}
    .learn a{padding: 1.1vw 5vw; font-size: 2.5vw;}
    .learn{position: absolute;}
    .contents{padding-top: 61px;}
    #header button{display: block; font-size: 21px;}
    #header button i.close{display: none;}
    #header .container{padding: 15px 0;}
    #header .headerin ul{display: block;padding-top: 0;}
    #header .headerin .menu{position: absolute; background-color: #fff; right: -1000px; top: 45.5px; width: 60%; height: 100vh; z-index: 1;  border-top: 1px solid #eee; box-sizing: border-box; transition: .5s; font-size: 16px;}
    #header .headerin .menu.menuopen{right: -37px; width: 45%;}
    #header .headerin .menu::before{content: ''; background-color: rgba(0,0,0,0.25);width: 1000%; height: 100%; position: absolute; right: 100%; top: -1px;display: none;}
    #header .headerin .menu.menuopen::before{display: block;}
    #header .headerin .menu li a{padding: 15px 20px; display: block;}
    #header .sub_menu{position: relative; width: 100%; box-shadow: none;}
    #header .sub_menu li{text-align: start; padding: 0 0 0 5%;}
    #header .headerin .sub_menu li a{padding: 5px 20px; font-size: 15px;}

    .main .main_txt {top: 44%; left: 5%;}
    .main .main_txt h2{font-size: 3.2vw;}
    .main_slide .learn a{padding: 0.7vw 2.5vw; font-size: 16px;}
    .main_slide .slide .text h2{font-size: 25px;}
    .content1 ul{flex-wrap: wrap; gap: 5vw;}
    .content1 ul li{width: 100%; display: flex; justify-content: space-around; align-items: center;}
    .content1 ul li .imgs{width: 35%; margin: 0;}
    .content1 ul li .imgs img{width: 100%;}
    .content1 ul li h4{padding: 0 0 10px;}
    .content1 ul li .txt{width: 50%; text-align: center;}
    .content1 ul li.book{flex-direction: row-reverse}
    .content2 .con_box{flex-wrap: wrap;}
    .content2 .con_box .left{width: 100%;}
    .content2 .con_box .left img{width: 80%;}
    .content2 .con_box .left p{font-size: 15px; width: 70%;}
    .content2 .con_box .right{width: 100%; height: auto; flex-direction: column; padding: 4vw 0; gap: 2vw;}
    .content2 .con_box .right .slider{width: 100%; display: flex;}
    .content2 .con_box .right .slider .slide{display: flex; gap: 2vw; align-items: center;}
    .content2 .con_box .right .slider .slide img{width: auto; height: 25vw;}
    .content2 .con_box .right .slider3{display: none;}
    .content2 .con_box .right .slider .slide{padding-right: 2vw;}
    @keyframes slideshow {
        0% { transform: translateX(0);}
        100% { transform: translateX(-100%);}
    }
    @keyframes slideshow2 {
        0% { transform: translateX(-100%);}
        100% { transform: translateX(0);}
    }
    .content3 .top{flex-wrap: wrap;}
    .content3 .top .title{width: 100%;}
    .content3 .bottom{flex-wrap: wrap; justify-content: center;}
    .content3 .bottom .left{width: 80%;}
    .content3 .bottom .right{width: 100%; text-align: center;}
    .content3 .bottom .right h4{padding: 30px 0 10px;}
    .content3 .learn, .content4 .learn{bottom: 8vw; left: 34.5%;}
    .content3 .container, .content4 .container{padding: 50px 0 120px;}

    .content4 .bottom{padding-top: 20px;}
    .content4 .bottom>li ul{justify-content: space-around;}
    .content4 .bottom>li ul li{width: 20%; font-size: 2.6vw;}
    .content4 .bottom>li ul li span{display: inline;}
    .content4 .bottom>li ul li.p_img .han{font-size: 3.5vw;}
    .content4 .bottom>li ul li:nth-child(2n){width: 5%;}
    .content4 .bottom>li.second .arrow img{width: 16.5%;}

    .content6{padding: 50px 0 0;}
    .content6 .top{margin-bottom: 0;}
    .content6 img{display: none;}
    .content6 img.w_768{display: block;}
    .content6 .bottom{width: 50%; top: 45%;}
    .content6 .bottom ul li{font-size: 2.3vw;}
    .content6 .bottom ul li.mini_title{font-size: 2.7vw;}
    .content6 .top .learn{position: relative;}

    #footer .container{font-size: 14px;padding: 25px 0;}
    .footer_left .logo{width: 42%;}
    .footer_right{width: 17%;}

    /* process */
    .main p{font-size: 2.3vw; line-height: 1.5;}
    .program .main .title{padding-bottom: 2vw;}
    .process .container{padding: 50px 0;}
    .process ul{background: none;}
    .process ul li{flex-direction: column; text-align: center; gap: 2vw;}
    .process ul li:nth-child(2){flex-direction: column;}
    .process ul li .text{width: 100%;}
    .process ul li .text h4{padding-bottom: 1vw;}
    .process ul li .text h4.han{font-size: 3.7vw;}
    .process ul li .text p{font-size: 2.5vw;}
    .process ul li .p_img{width: 40%;}
    .process2 .title{font-size: 4.2vw;}
    .process2 .phonics{padding-top: 10vw;}
    .process2 .bottom>li.first .p_img,.process2.ani .bottom>li.third .p_img{width: 45%;}
    .process2 .bottom>li ul li.p_img .han{font-size: 3.5vw;}
    .process2 .bottom>li ul li.p_img img{width: 90%;}
    .process2 .phonics{width: 97%;}
    .process2 .phonics .top .jua{font-size: 3.5vw;}
    .process2 .phonics .top .tit_txt{font-size: 2.5vw;}
    .process2 .phonics .bottom ul li{width: 24%;}
    .process2 .phonics .bottom ul li .con p{font-size: 2.4vw;}
    .process3 .faq .title{font-size: 6vw;}
    .process3 .faq ul li{flex-direction: column; align-items: center;padding: 4.5vw 0 3vw;}
    .process3 .faq ul li .question{width: 100%;}
    .process3 .faq ul li .answer{width: 87%; padding-left: 10%;}
    .process3 .faq ul li .question .num{font-size: 8vw;}
    .process3 .faq ul li .question .question_txt{left: 9%; font-size: 3.5vw; }
    .process3 .faq ul li .answer{font-size: 3vw;}
    .process3 .container{padding-bottom: 10px;}
    .process3 .faq .faq_img1{width: 10vw; right: 4%;}
    .process3 .faq .faq_img2{width: 10vw;}
    .process3 .faq .faq_img3{width: 10vw; right: 2%;}
    .process3 .faq .faq_img4{width: 10vw; top: 20%; left: 62%;}
    .process3 .faq .faq_img5{width: 15vw; right: 6%;}
    .process3 .faq .faq_img6{width: 10vw; right: 90%;}
    .process3 .faq .faq_img7{width: 10vw; left: 90%;}
    .process3 .faq .faq_img8{width: 8vw; right: 90%;}
    .process3 .faq .faq_img9{width: 10vw; right: -2%;}
    .process3 .faq .faq_img10{width: 10vw; top: 5%; left: -4%;}


    /* 리터러시 */
    .literacy .l_content1 ul li{width: 45%;}
    .literacy .l_content1 ul li h4{font-size: 3.6vw;}
    .literacy .l_content1 ul li p{font-size: 2.5vw;}
    .l_content2 .title{font-size: 4.4vw;}
    .l_content2 .top img{width: 100%;}
    .l_content2 .bottom li{width: 32%; padding-bottom: 32%; margin: 10px 0;}
    .l_content2 .bottom li div{width: 85%;}
    .l_content2 .bottom li .minititle{font-size: 2.6vw; padding-bottom:3px;}
    .l_content2 .bottom li .txt{font-size: 2.4vw;}
    .content5{padding: 50px 0;}
    .donation .donation_img{position: relative;top: 0; transform: translateY(0); width: 50%; margin: 0 auto; padding-bottom: 3%;}
    .donation p{font-size: 2.3vw; text-align: center; width: 100%;}
    .content5 .slider1 .slide img{width: calc(100vw / 2.5); padding: 0;}
    .content5 .slider2 .slide img{width: calc(100vw / 2.5); padding: 0;}
    .l_content2.l_content2_bottom .top>div{padding-top: 2vw;}
    .l_content2_top .name{font-size: 2vw;}
    .l_content2 .top h4{font-size: 3.2vw;}

    /* 가맹안내 */
    .join .main p{width: 58%;}
    .join .content li .in{justify-content: space-between;}
    .join .content li .in .txt{width: 55%;}
    .join .content li .in .txt .title{padding-bottom: 5px; font-size: 3vw;}
    .join .content li .in .txt ul li img{width: 2.3vw;}
    .join .content li .in .txt ul li p{font-size: 2.3vw;}
    .join .content li .in .imgs{word-wrap: 42%;}

    /* parents */
    .parents .content li{width: 100%;}
    .parents .content li .in{justify-content: space-between;}
    .parents .content li .in .txt{width: 57%;}
    .parents .content li .in .txt h4{font-size: 3.5vw;}
    .parents .content li .in .txt p{font-size: 2.7vw;}
    .parents .content li .in .txt p span{display: block;}
    .parents .content li h3{font-size: 4.5vw;}
    .parents .content li h3 .num{font-size: 6.5vw;}
    .parents .content li{padding-bottom: 6vw;}
    .parents .main h2 .miniti{font-size: 2.5vw;}

    /* teacher */
    .teacher .content li{width: 100%;}
    .teacher .content li .in{justify-content: space-between;}
    .teacher .content li .in .txt{width: 57%;}
    .teacher .content li .in .txt h4{font-size: 3.5vw;}
    .teacher .content li .in .txt p{font-size: 2.7vw;}
    .teacher .content li .in .txt p span{display: block;}
    .teacher .content li h3{font-size: 4.5vw;}
    .teacher .content li h3 .num{font-size: 6.5vw;}
    .teacher .content li{padding-bottom: 6vw;}
    .teacher .main h2 .miniti{font-size: 2.5vw;}
}
@media (max-width: 510px){
    .container{padding: 30px 0;}
    .contents{padding-top: 58px;}
    .han{font-size: 5.5vw;}
    .learn a{font-size: 3vw; border: 2px solid #008037;}
    .title{font-size: 5vw; padding-bottom: 2vw;}

    #header .headerin h1{width: 110px;}
    #header .headerin h1 a .logoimg{}
    #header button{font-size: 16px;}
    #header .headerin .menu{top: 46px; font-size: 15px;}
    #header .headerin .menu.menuopen{width: 70%;}
    #header .headerin .menu li a{padding: 10px 20px;}
    #header .headerin .sub_menu li a{padding: 5px 20px; font-size: 14px;}

    .content1 ul li{justify-content: space-between;}
    .content1 ul li .imgs{width: 38%;}
    .content1 ul li .txt{width: 55%;}
    .content1 ul li p,.content3 .bottom .right p{font-size: 3.2vw;}

    .content2 .con_box .left{min-width: 100%;}
    .content2 .con_box .left p{width: 90%; font-size: 3.2vw;}

    .content3 .container, .content4 .container{padding: 30px 0 80px;}
    .content3 .learn, .content4 .learn{bottom: 7vw;}
    .content3 .bottom .right{min-width: 100%;}
    .content4 .bottom>li ul li.p_img .han{font-size: 3.5vw;}
    .content4 .bottom>li ul li{font-size: 2.6vw;}
    .content6{padding: 30px 0 30px;}
    .content6 img.w_768{display: none;}
    .content6 img.w_510{display: block;}
    .content6 .bottom ul li.mini_title{font-size: 3vw;}
    .content6 .bottom ul li{font-size: 2.8vw;}
    .content6 .bottom{left: 5%; width: 80%; z-index: 1;top: 42%;}
    .content6 .top .title{padding-bottom: 3vw;}
    .content6 img.w_510{position: relative; bottom: -40px;}
    .content6 .top .learn a{padding: 1vw 4vw 0.7vw;}

    .footer_left .top{display: block;}
    .footer_left .logo{width: 45%;}
    .footer_right{width: 20%; padding: 10px 0 5px;}
    #footer .container{font-size: 12px;}

    .main p{font-size: 2.9vw;}
    .process2 .title{font-size: 5vw;}
    .process ul li{padding: 0 0 6vw 0;}
    .process ul li .text h4.han{font-size: 4.8vw;}
    .process ul li .text p{font-size: 3.3vw; width: 95%; margin: 0 auto;}
    .process ul li .text p span.block{display: inline;}
    .process ul li .p_img{width: 55%; margin-bottom: 10px;}
    .process3 .container{padding-bottom: 0px;}
    .program .main .container{width: 95%;}
    .program .main p{font-size: 2.4vw;font-weight: 500;}


    /* 리터러시 */
    .literacy .l_content1 ul li{width: 80%; padding-bottom: 50px;}
    .literacy .l_content1 ul li img{width: 70%;}
    .literacy .l_content1 ul li h4{font-size: 4.8vw;}
    .literacy .l_content1 ul li p{font-size: 3.5vw;}
    .l_content2 .bottom li{width: 45%; padding-bottom: 45%;}
    .l_content2 .bottom li .minititle{font-size: 3.5vw;}
    .l_content2 .bottom li .txt{font-size: 2.9vw;}
    .content5{padding: 30px 0;}
    .donation p{font-size: 3.3vw;}
    .main .main_txt h2{font-size: 3.6vw;}
    .main .main_txt .learn a{font-size: 3vw;}
    .l_content2 .top>div{flex-direction: column; align-items: center; gap: 5vw;}
    .l_content2 .top .graph_wrap{width: 85%;}
    .l_content2 .top h4{font-size: 4vw; padding: 3.5vw 0;}
    .l_content2_top .name{bottom: 10vw; font-size: 3vw;}

    /* 가맹안내 */
    .join .main p{width: 71%;}
    .join .content li .in{flex-direction: column;}
    .join .content>li{padding-bottom: 8vw;}
    .join .content>li:nth-child(2n) .in{flex-direction: column;}
    .join .content li .in .imgs{width: 80%;}
    .join .content li .in .txt{width: 76%;}
    .join .content li .in .txt .title{font-size: 4.5vw; text-align: center;}
    .join .content li .in .txt ul li img{width: 3.5vw;}
    .join .content li .in .txt ul li p{font-size: 3.5vw; padding-left: 1.5vw;}


    /* parents */
    .parents .content li{padding-bottom: 8vw;}
    .parents .content li .in{flex-direction: column; align-items: center;}
    .parents .content li:nth-child(2n) .in{flex-direction: column; align-items: center;}
    .parents .content li .in .imgs{padding-bottom: 3vw;}
    .parents .content li .in .txt{text-align: center;width: 80%;}
    .parents .content li:nth-child(2n){text-align: start;}
    .parents .content li .in .txt p{font-size: 3.3vw;}
    .parents .last .container h2{font-size: 4.0vw;}
    .parents .main h2 .miniti{font-size: 3vw;}
    .parents .main p{width: 100%;}
    .parents .content li .in .txt h4{font-size: 4.5vw; padding-bottom: 5px;}
    .parents .content li .in .imgs{width: 60%;}
    .parents .content li h3{font-size: 6.5vw;}
    .parents .content li h3 .num{font-size: 9.5vw;}

    /* parents */
    .teacher .content li{padding-bottom: 8vw;}
    .teacher .content li .in{flex-direction: column; align-items: center;}
    .teacher .content li:nth-child(2n) .in{flex-direction: column; align-items: center;}
    .teacher .content li .in .imgs{padding-bottom: 3vw;}
    .teacher .content li .in .txt{text-align: center;width: 80%;}
    .teacher .content li:nth-child(2n){text-align: start;}
    .teacher .content li .in .txt p{font-size: 3.3vw;}
    .teacher .last .container h2{font-size: 4.0vw;}
    .teacher .main h2 .miniti{font-size: 3vw;}
    .teacher .main p{width: 100%;}
    .teacher .content li .in .txt h4{font-size: 4.5vw; padding-bottom: 5px;}
    .teacher .content li .in .imgs{width: 60%;}
    .teacher .content li h3{font-size: 6.5vw;}
    .teacher .content li h3 .num{font-size: 9.5vw;}
}
@media (max-width: 380px){}