@charset "utf-8";

/* 공통 */
.moreBtn a {
    position: relative;
    display: inline-block;
    text-indent: -999px;
    font-size: 0;
    width: 2.60vw;
    height: 2.60vw;
    border-radius: 18px;
    box-shadow: var(--shadow_s);
    transition: background 0.3s ease;
}

.moreBtn a::before {
    content: '';
    width: 1.15vw;
    height: 1.15vw;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: url(/img/main_morebtn.png) no-repeat;
    background-size: contain;
    transition: 0.3s ease;
}

.moreBtn.green a {
    background-color: #028e3c;
}

.moreBtn.orange a {
    background-color: #ff6f1b;
}

/* main_visual */
#main_visual {
    position: relative;
    width: 100%;
    height: 46.35vw;
    background: #fff9f4;
    overflow: hidden;
}

#main_visual > img {
    width: 100%;
}

/*
#main_visual .main_visual_inner{
     position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
*/
#main_visual .main_visual_inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding-top: 3.13vw;
    text-align: center;
}

#main_visual .main_visual_inner img {
    display: block;
    margin: 0 auto;
}

#main_visual .main_visual_inner .text {
    width: 22.86vw;

}

#main_visual .main_visual_inner .img {
    margin: 34px auto 0;
    width: 50.63vw
}

#main_visual .main_deco_wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#main_visual .main_deco {
    position: absolute;
}

#main_visual .main_deco.circle {
    width: 7.19vw;
    animation-name: scale;


}

#main_visual .main_deco.circle1 {
    top: -3.65vw;
    right: 26.88vw;
    /*    animation-duration: 3s;*/
    animation: scale 3.5s cubic-bezier(0.68, 0, 0.38, 1.41) infinite;
}

#main_visual .main_deco.circle2 {
    top: 7.81vw;
    right: 0.63vw;
    /*    animation-duration: 5s;*/
    animation: scale 5s ease-in-out infinite;

}

#main_visual .main_deco.circle3 {
    bottom: -2.5vw;
    left: 15.63vw;
    /*    animation-duration: 4s;*/
    animation: scale 4.2s cubic-bezier(0.68, 0, 0.38, 1.41) infinite;

}

#main_visual .main_deco.dia {
    width: 3.18vw;
}

#main_visual .main_deco.dia1 {
    top: 17.81vw;
    left: 0.78vw;
    animation: rotate 5s linear infinite;
}

#main_visual .main_deco.dia2 {
    top: 20.63vw;
    right: 22.19vw;
    animation: rotate 3.5s linear infinite;
}

#main_visual .main_deco.dia3 {
    top: -1.5vw;
    left: 19.32vw;
    animation: rotate 4.7s linear infinite;
}

#main_visual .main_deco.zig {
    width: 6.61vw;
}

#main_visual .main_deco.zig1 {
    top: 6.04vw;
    right: 22.6vw;
    animation: zig 3.5s linear infinite;
}

#main_visual .main_deco.zig2 {
    top: 24.43vw;
    left: 19.22vw;
    animation: zig2 4.5s linear infinite;

}

#main_visual .main_deco.zig3 {
    bottom: 7.08vw;
    left: -1.35vw;
    animation: zig 4s linear infinite;

}

#main_visual .main_deco.zig4 {
    bottom: 1.3vw;
    right: 8.07vw;
    animation: zig2 5s linear infinite;

}

#main_visual .main_deco.lime {
    width: 3.65vw;
}

#main_visual .main_deco.lime1 {
    top: 7.03vw;
    left: 26.72vw;
     animation: zig 4s linear infinite;
}

#main_visual .main_deco.lime2 {
    bottom: 6.98vw;
    left: 11.77vw;
    animation: lime2 3.5s linear infinite;
}

#main_visual .main_deco.lime3 {
    bottom: 6.15vw;
    right: 17vw;
    animation: lime3 4.2s linear infinite;
}

#main_visual .main_deco.green {
    width: 6.46vw;
    top: 7.45vw;
    left: 10.21vw;
     animation: zig 4s linear infinite;
}
#main_visual .main_deco.yellow{
    width: 6.3vw;
    bottom: 10.99vw;
    right: 6.04vw;
        animation: yellow 3.7s linear infinite;
} 

@keyframes scale {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.1)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg)
    }


    to {
        transform: rotate(360deg)
    }
}

@keyframes zig {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(15deg)
    }


    to {
        transform: rotate(0deg)
    }
}

@keyframes zig2 {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(-25deg)
    }


    to {
        transform: rotate(0deg)
    }
}
@keyframes lime2 {
    0% {
        transform: rotate(208deg)
    }

    50% {
        transform: rotate(220deg)
    }


    to {
        transform: rotate(208deg)
    }
}
@keyframes lime3 {
    0% {
        transform: rotate(-105deg)
    }

    50% {
        transform: rotate(-115deg)
    }


    to {
        transform: rotate(-105deg)
    }
}

@keyframes yellow {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(25deg)
    }


    to {
        transform: rotate(0deg)
    }
}


/* section 공통 */
.main_section .inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
}
.main_section .img_box {
    display: flex;
}
.main_section .img_box img {
    width: 100%;
}

.main_section .text_wrap h3 {
    font-size: 5.54vw;
    line-height: 4.65vw;
    letter-spacing: -0.085em;
    font-weight: 300;
    color: #cbcbcb;
}


.main_section .text_wrap.green h3 span {
    color: #028e3c;
}

.main_section .text_wrap.orange h3 span {
    color: #ff6f1b;
}

.main_section .text_wrap strong {
    display: block;
    font-size: 1.39vw;
    font-weight: 600;
    color: var(--dark);
    margin: 1.56vw 0 0.78vw;
}

.main_section .text_wrap p {
    margin-bottom: 0.5vw;
    font-size: 1.04vw;
    font-weight: 500;
    color: var(--dark);
    line-height: 1.6vw;
}

/* moment */
#section_wrap01 {
    position: relative;
    padding: 6.51vw 0 0;
}

#section_wrap01::before {
    content: '';
    position: absolute;
    top: 19vw;
    left: 0;
    background: var(--white);
    width: 79.9vw;
    height: 50.7vw;
    box-shadow: 3px 3px 57px rgba(0, 0, 0, 0.06);
}

#moment {
    position: relative;
    padding-bottom: 7.55vw;
}

#moment::before {
    content: '';
    position: absolute;
    top: -3.13vw;
    left: 8.85vw;
    width: 36.56vw;
    height: 36.56vw;
    background: url(/img/main_moment_shape.png) no-repeat;
    background-size: contain;
}

#moment .inner {
    justify-content: flex-start;
    padding-left: 15.63vw;
    gap: 5.47vw;

}

#moment .inner .img_box {
    position: relative;
    width: 36.41vw; height: 18.54vw;
    border-radius: 69px;
    box-shadow: var(--shadow);
    overflow: hidden;
}
#moment .inner .img_box img {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    width: fit-content; height: 100%
}
/* education */
#education {
    position: relative;
    padding: 12.97vw 0 11.72vw;
}

#education::before {
    content: '';
    position: absolute;
    top: 9.11vw;
    right: 0;
    width: 34.53vw;
    height: 41.77vw;
    background: url(/img/main_education_shape.png) no-repeat;
    background-size: contain;
}

#education .inner {
    gap: 4.79vw;
    justify-content: end;
    padding-right: 8.02vw;

}

#education .inner .img_box {
    width: 47.6vw;
    border-radius: 80px;
    box-shadow: var(--shadow);
    overflow: hidden;
}


/* teachers */
#section_wrap02 {
    position: relative;
    padding: 0.57vw 0 0;
}

#section_wrap02::before {
    content: '';
    position: absolute;
    top: 25.98vw;
    right: 0;
    background: var(--white);
    width: 69.84vw;
    height: 55vw;
    box-shadow: 3px 3px 57px rgba(0, 0, 0, 0.07);
}

#teachers {
    position: relative;
    padding-bottom: 13.02vw;
}

#teachers::before {
    content: '';
    position: absolute;
    top: 5.42vw;
    left: 12.76vw;
    width: 41.25vw;
    height: 31.88vw;
    background: #028e3c;
    border-radius: 69px;
    box-shadow: 2px 2px 9px rgba(0, 0, 0, 0.26);
}

#teachers .inner {
    justify-content: flex-start;
    padding-left: 16.33vw;
    gap: 3.49vw;

}

#teachers .inner .img_box {
    width: 41.25vw;
    border-radius: 69px;
    box-shadow: var(--shadow);
    overflow: hidden;
}


/* parents */
#parents {
    position: relative;
    padding: 3.8vw 0 8.33vw;
}

#parents::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 54.43vw;
    height: 49.01vw;
    background: url(/img/main_parents_shape.png) no-repeat;
    background-size: contain;
}

#parents .inner {
    flex-flow: column;
    align-items: baseline;
    gap: 1.51vw;
    padding-left: 18.54vw;
}

#parents .inner .img_box_wrap {
    display: flex;
    gap: 1.25vw;
}

/*
#parents .inner:has(.text_wrap) {
    padding-left: 18.49vw;
}
#parents .inner:has(.img_box) {
    padding-left: 18.49vw;
}
*/
#parents .img_box {
    width: 55.42vw;
    border: 13px solid #ff6f1b;
}


.main_deco {
    position: absolute;
}

.deco01 {
    top: 4.38vw;
    left: 4.79vw;
    width: 8.28vw;
}

.deco02 {
    top: 1.56vw;
    right: 23.96vw;
    width: 5.73vw;
}

.deco03 {
    bottom: 0.1vw;
    right: 17.97vw;
    width: 13.13vw
}

.deco04 {
    top: 16vw;
    right: 10.73vw;
    width: 6.93vw
}

.deco05 {
    top: 25.16vw;
    left: 0;
    width: 6.93vw
}

.deco06 {
    top: 3.33vw;
    left: 55.94vw;
    width: 5.78vw
}

svg {
    position: absolute;
    width: 100%;
    height: auto;
}

#linePath {
    fill: none;
    stroke: #000;
    stroke-width: 2;
    stroke-dasharray: 0;
    stroke-dashoffset: 240%;
    /*    animation: draw 3s linear forwards;*/
}

#linePath2 {
    fill: none;
    stroke: #000;
    stroke-width: 2;
    stroke-dasharray: 0;
    stroke-dashoffset: 214%;
}

#linePath3 {
    fill: none;
    stroke: #000;
    stroke-width: 2;
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
}

#linePath4 {
    fill: none;
    stroke: #000;
    stroke-width: 2;
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
}

#linePath5 {
    fill: none;
    stroke: #000;
    stroke-width: 2;
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
}

#moment svg {
    position: absolute;
    right: 0;
    bottom: -5.5vw;
    width: 78vw;
}

#education .edu_svg1 {
    top: 1.41vw;
    right: 0;
    width: 25.26vw;
}

#education .edu_svg2 {
    bottom: 4.95vw;
    left: 0;
    width: 59.79vw;
}

#teachers svg {
    bottom: 7.81vw;
    left: 0
}

#parents svg {
    top: 13.13vw;
    right: 0;
    width: 25.26vw;
}



@keyframes draw {
    from {
        stroke-dashoffset: 240%;
    }

    to {
        stroke-dashoffset: 0%;
    }
}

@keyframes draw2 {
    from {
        stroke-dashoffset: 214%;
    }

    to {
        stroke-dashoffset: 0%;
    }
}

@keyframes draw3 {
    from {
        stroke-dashoffset: -193%;
    }

    to {
        stroke-dashoffset: 0%;
    }
}

@keyframes draw4 {
    from {
        stroke-dashoffset: 220%;
    }

    to {
        stroke-dashoffset: 0%;
    }
}

@keyframes draw5 {
    from {
        stroke-dashoffset: -180%;
    }

    to {
        stroke-dashoffset: 0%;
    }
}

@keyframes draw6 {
    from {
        stroke-dashoffset: -180%;
    }

    to {
        stroke-dashoffset: 0%;
    }
}




#linePath {
    stroke-dashoffset: 240%;

}

#moment.on #linePath {
    stroke-dashoffset: 0%;
    animation: draw 2s linear forwards;
}

#linePath2 {
    stroke-dashoffset: 214%;
}

section.on #linePath2 {
    stroke-dashoffset: 0%;
    animation: draw2 1s linear forwards;
}

#linePath3 {
    stroke-dashoffset: -193%;
}

section.on #linePath3 {
    stroke-dashoffset: 0%;
    animation: draw3 2s linear forwards 0.5s;
}


#linePath4 {
    stroke-dashoffset: 220%;
}

section.on #linePath4 {
    stroke-dashoffset: 0%;
    animation: draw4 1.5s linear forwards;
}


#linePath5 {
    stroke-dashoffset: -193%;
}

section.on #linePath5 {
    stroke-dashoffset: 0%;
    animation: draw5 2s linear forwards 0.5s;
}

/*

#linePath6 {
 stroke-dashoffset: -193%;
}
section.on #linePath6 {
     stroke-dashoffset: 0%;
    animation: draw6 2s linear forwards 0.5s;
}
*/




/* animation */
#main_visual .main_visual_inner .text {
    opacity: 0;
    transition: opacity 0.7s ease-in-out 0.5s;
}

#main_visual.on .main_visual_inner .text {
    opacity: 1;
}

#main_visual .main_visual_inner .img {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s ease-in-out 0.3s, transform 1s ease-in-out 0.3s;
}

#main_visual.on .main_visual_inner .img {
    opacity: 1;
    transform: translateY(0);
}

section .img_box {
    opacity: 0;
    transition: opacity 0.3s ease;
}

section.on .img_box {
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

section .text_wrap.green h3 {
    position: relative;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.3s, transform 0.3s;
}

section.on .text_wrap.green h3 {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out;
}

section .text_wrap.green strong {
    position: relative;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.3s, transform 0.3s;
}

section.on .text_wrap.green strong {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.7s ease-in-out 0.3s, transform 0.7s ease-in-out 0.3s;
}

section .text_wrap.green p {
    position: relative;
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.3s, transform 0.3s;
}

section.on .text_wrap.green p {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.7s ease-in-out 0.6s, transform 0.7s ease-in-out 0.6s;
}

section .moreBtn {
    opacity: 0;
    transition: opacity 0.3s;
}

section.on .moreBtn {
    opacity: 1;
    transition: opacity 0.7s ease-in-out 0.9s;
}

section .text_wrap.orange h3 {
    position: relative;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.3s, transform 0.3s;
}

section.on .text_wrap.orange h3 {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.7s ease-in-out, transform 0.7s ease-in-out;
}

section .text_wrap.orange strong {
    position: relative;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.3s, transform 0.3s;
}

section.on .text_wrap.orange strong {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.7s ease-in-out 0.3s, transform 0.7s ease-in-out 0.3s;
}

section .text_wrap.orange p {
    position: relative;
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.3s, transform 0.3s;
}

section.on .text_wrap.orange p {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.7s ease-in-out 0.6s, transform 0.7s ease-in-out 0.6s;
}

.main_deco {
    opacity: 0;
    transition: 0.3s;
}

section.on .main_deco {
    opacity: 1;
    transition: 1.2s ease-in-out 0.3s;

}

section.on .deco01 {
    animation: sway1 3.5s ease-in-out infinite;
    transform-origin: center;
}

section.on .deco02 {
    animation: sway2 3.8s ease-in-out infinite;
    transform-origin: center;
}

section.on .deco03 {
    animation: sway3 4.5s ease-in-out infinite;
    transform-origin: center;
}

section.on .deco04 {
    animation: sway1 5s ease-in-out infinite;
    transform-origin: center;
}

section.on .deco05 {
    animation: sway4 3.8s ease-in-out infinite;
    transform-origin: center;
}

section.on .deco06 {
    animation: sway2 4.2s ease-in-out infinite;
    transform-origin: center;
}

#moment::before {
    left: 0;
    opacity: 0;
    transition: left 0.3s ease, opacity 0.3s ease;
}

#moment.on::before {
    left: 8.85vw;
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.29, 0.14, 0.43, 1.44), left 0.5s cubic-bezier(0.29, 0.14, 0.43, 1.44);
}

#moment .img_box {
    opacity: 0;
    transition: opacity 0.3s ease;
    transform: translateX(-40px);
}

#moment.on .img_box {
    opacity: 1;
    transition: transform 0.9s cubic-bezier(0.29, 0.14, 0.43, 1.44), opacity .9s ease-in-out;
    transform: translateX(0px);
}

#education {
    overflow: hidden
}

#education::before {
    right: -12vw;
    opacity: 0;
    transition: left 0.3s ease, opacity 0.3s ease;
}

#education.on::before {
    right: 0;
    opacity: 1;
    transition: opacity 0.7s cubic-bezier(0.29, 0.14, 0.43, 1.44), right 0.7s cubic-bezier(0.29, 0.14, 0.43, 1.44);
}

#education .img_box {
    opacity: 0;
    transition: opacity 0.3s ease;
    transform: translateX(40px);
}

#education.on .img_box {
    opacity: 1;
    transition: transform 0.9s cubic-bezier(0.29, 0.14, 0.43, 1.44), opacity .9s ease-in-out;
    transform: translateX(0px);
}

#teachers::before {
    left: 0;
    opacity: 0;
    transition: left 0.3s ease, opacity 0.3s ease;
}

#teachers.on::before {
    left: 8.85vw;
    opacity: 1;
    transition: opacity 0.5s cubic-bezier(0.29, 0.14, 0.43, 1.44), left 0.5s cubic-bezier(0.29, 0.14, 0.43, 1.44);
}

#teachers .img_box {
    opacity: 0;
    transition: opacity 0.3s ease;
    transform: translateX(-40px);
}

#teachers.on .img_box {
    opacity: 1;
    transition: transform 0.9s cubic-bezier(0.29, 0.14, 0.43, 1.44), opacity .9s ease-in-out;
    transform: translateX(0px);
}

@keyframes sway1 {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(-5deg);
    }

    75% {
        transform: rotate(5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes sway2 {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-5deg);
    }

    50% {
        transform: rotate(5deg);
    }

    75% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes sway3 {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(-3deg);
    }

    50% {
        transform: rotate(3deg);
    }

    75% {
        transform: rotate(-3deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

@keyframes sway4 {
    0% {
        transform: translateY(0);
    }

    25% {
        transform: translateY(-5px);
    }

    50% {
        transform: translateY(5px);
    }

    75% {
        transform: translateY(-5px);
    }

    100% {
        transform: translateY(0);
    }
}





/* media query*/

/*---- hover ----*/
@media screen and (min-width: 1025px) {
    .moreBtn.green a:hover {
        background-color: #007f35;
    }

    .moreBtn.orange a:hover {
        background-color: #ef5a04;
    }

    .moreBtn a:hover::before {
        transform: translate(-50%, -50%) rotate(90deg);
    }


}

@media screen and (max-width: 1024px) {
    #main_visual {
        height: 94.46vw;
    }
    #main_visual .main_visual_inner {
        padding-top: 7.69vw;
    
    }

    #main_visual .main_visual_inner .text {
        width: 45.54vw;
    }

    #main_visual .main_visual_inner .img {
        margin: 3.85vw auto 0;
        width: 85.54vw;
    }

    #main_visual .main_deco.circle{
        width: 14.46vw
    }
    #main_visual .main_deco.circle1{
        top: -7.85vw;
        right: 18.62vw;
    }
    #main_visual .main_deco.circle2{
        top: 22.77vw;
        right: -4.46vw;
    }
    #main_visual .main_deco.circle3{
        bottom: -6.77vw;
        left: 19.54vw
    }
    #main_visual .main_deco.dia{
        width: 6.46vw;
    }
    #main_visual .main_deco.dia1{
        top: 36vw;
        left: 6.46vw;
    }
    #main_visual .main_deco.dia2{
        display: none
    }
    #main_visual .main_deco.dia3{
        top: -3.5vw;
    }
    #main_visual .main_deco.dia4{
        bottom: -1vw;
        right: 10.62vw;
        animation: rotate 5s linear infinite;
    }
    #main_visual .main_deco.zig{
        width: 13.23vw;
    }
    
    #main_visual .main_deco.zig1 {
        top: 15.85vw;
        right: 15.69vw;
    }

    #main_visual .main_deco.zig2 {
        top: 26.46vw;
        left: 9.69vw;

    }

    #main_visual .main_deco.zig3 {
        bottom: 7.38vw;
        left: -1.35vw;

    }

    #main_visual .main_deco.zig4 {
        bottom: 2.92vw;
        right: 22.62vw;

    }
    
    #main_visual .main_deco.lime {
        width: 6.46vw;
    }

    #main_visual .main_deco.lime1 {
        top: 9.69vw;
        left: 22.62vw;
    }

    #main_visual .main_deco.lime2 {
        bottom:29.23vw;
        left:-2vw;
    }

    #main_visual .main_deco.lime3 {
       display: none
    }

    #main_visual .main_deco.green {
        width: 7.85vw;
        top: 12vw;
        left: 6vw;
    }
    #main_visual .main_deco.yellow{
        width: 12.62vw;
        bottom: 27.23vw;
        right: 3.08vw;
} 

    
    
    
    
    #section_wrap01 {
        padding: 8vw 0 0
    }

    #section_wrap01::before {
        top: 27vw;
        height: 50vw;
        width: 91.54VW;
    }

    #moment .inner .img_box {
        width: 55.69vw; height: 32vw;
        border-radius: 6.15vw;
    }

    #moment .inner {
        padding-left: 7.38vw;
        gap: 3.85vw;
    }

    #moment.on::before {
        left: 4.5%;
        width: 48.46vw;
        height: 48.46vw;
    }

    .main_section .text_wrap h3 {
        font-size: 7.31vw;
        line-height: 6.14vw;
    }

    .main_section .text_wrap strong {
        font-size: 2.87vw;
        margin: 1.38vw 0 3.08vw;
    }

    .main_section .text_wrap p {
        font-size: 2.46vw;
        line-height: 3.69vw;
        margin-bottom: 0.77vw;
    }

    .moreBtn a {
        width: 4.77vw;
        height: 4.77vw;
        border-radius: 1.54vw;
        font-size: inherit;
    }

    .moreBtn a::before {
        width: 2.31vw;
        height: 2.31vw;
    }

    #moment {
        padding-bottom: 13.38vw;
    }

    #moment svg {
        bottom: -3vw;
        width: 104.08vw;
        right: -16vw;
    }

    .deco01 {
        width: 9.54vw;
        top: 7.69vw;
        left: 0;
    }


    #education {
        padding: 24.31vw 0 16.46vw;
        z-index: 1;
    }

    #education .inner .img_box {
        width: 55.69vw;
        border-radius: 6.15vw;
    }

    #education .inner {
        gap: 3.85vw;
        padding-right: 3.85vw;
    }

    #education::before {
        width: 47.54vw;
        height: 55.85vw;
        top: 13.08vw;
    }

    #education.on::before {
        right: -6vw
    }

    #education .edu_svg1 {
        top: 0;
        width: 35.26vw;
    }

    .deco02 {
        top: 8.92vw;
        right: 34.46vw;
        width: 9.54vw;
    }

    #education .edu_svg2 {
        /*        bottom: 5.95vw;*/
        bottom: 6vw;
        left: -19vw;
        width: 81.79vw;
    }

    .deco03 {
        bottom: 2vw;
        right: 14.31vw;
        width: 19.08vw;
    }

    #section_wrap02 {
        padding: 11.69vw 0 0vw;
    }

    #teachers .inner .img_box {
        width: 55.69vw;
        height: 39.54vw;
        border-radius: 6.15vw;
    }

    #teachers .inner {
        padding-left: 7.38vw;
        gap: 3.85vw;
    }

    #teachers::before {
        width: 55.69vw;
        height: 39.54vw;
        top: 5.85vw;
        border-radius: 6.15vw;
    }

    #teachers.on::before {
        left: 3.08vw;
    }

    #teachers svg {
        bottom: 1.15vw;
        width: 140vw;
        right: -6vw;
        left: auto;
    }

    .deco05 {
        top: auto;
        bottom: 0;
        width: 8.31vw;
    }

    #parents {
        padding: 7.38vw 0 31.54vw;
    }

    #parents::before {
        top: 3.08vw;
        background: url(/img/mobile/main_parents_shape.png) no-repeat;
        background-size: contain;
        width: 62.62vw;
        height: 66.77vw;
    }

    #parents .inner {
        padding-left: 7.08vw;
        gap: 2vw;
    }

    #parents .inner .img_box_wrap {
        gap: 1.69vw;
    }

    #parents .img_box {
        width: 74.15vw;
        border: 6px solid #ff6f1b;
    }

    #section_wrap02::before {
        width: 72.15vw;
        height: 58.46vw;
        top: -26.62vw;
    }

    .deco04 {
        width: 9.69vw;
        right: -1vw;
        top: -7.54vw;
    }

    #parents svg {
        width: 35.26vw;
        right: auto;
        left: -4vw;
        top: auto;
        bottom: 20.62vw;
    }

    @keyframes draw3 {
        from {
            stroke-dashoffset: 224%;
        }

        to {
            stroke-dashoffset: 394%;
        }
    }

    @keyframes draw4 {
        from {
            stroke-dashoffset: 235%;
        }

        to {
            stroke-dashoffset: 450%;
        }
    }

    @keyframes draw5 {
        from {
            stroke-dashoffset: 173%;
        }

        to {
            stroke-dashoffset: 0%;
        }
    }

    .deco06 {
        width: 9.69vw;
        top: 6.31vw;
        left: 46.92vw;
    }

    body {
        overflow: hidden;
    }

    #section_wrap01::before,
    #section_wrap02::before {
        box-shadow: 3px 3px 24px rgba(0, 0, 0, 0.06)
    }

}