@font-face {
    font-family: 'GothicA1-Light';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2205@1.0/GothicA1-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

.bg{
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
/* m13_01 */

.m13_01 .layer01{
    position: relative;
    width: 1920px;
    height: 677px;
    background-image: url("/img/sub/m13_01/layer01.png");
}

.m13_01 .layer01Titlebox{
    position: absolute;
    right: 19%;
    bottom: 35%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.m13_01 .layer01Titlebox div {
    opacity: 0;
    transform: translateY(0px); /* 요소를 화면 위쪽으로 이동 */
    transition: opacity 0.7s ease, transform 0.7s ease; /* 0.5초 동안 애니메이션 */
}

.m13_01 .fade-down02 {
    opacity: 1 !important;
    transform: translateY(40px) !important; /* 요소가 원래 위치로 내려오면서 나타남 */
}

.m13_01 .layer01-title01{
    width: 463px;
    height: 39px;
    background-image: url("/img/sub/m13_01/layer01-title01.png");
}

.m13_01 .layer01-title02{
    width: 320px;
    height: 61px;
    background-image: url("/img/sub/m13_01/layer01-title02.png");
    margin-top: 50px;
}

.m13_01 .layer01-title03{
    width: 499px;
    height: 173px;
    background-image: url("/img/sub/m13_01/layer01-title03.png");
    margin-right: -112px;
    margin-top: -87px;
}

.m13_01 .layer02{
    position: relative;
    width: 1920px;
    height: 580px;
    background-image: url("/img/sub/m13_01/layer02.png");
    margin-top: -2px;
}

.layer02{
    padding-top: 178px;
    padding-left: 436px;
}

.layer02 h2{
    font-size: 40px;
    font-weight: 300;
    color: #fff;
}

.layer02 h2 span{
    font-size: 46px;
    line-height: 76px;
    font-weight: 500;
    color: #fff;
}

.layer02 p{
    font-size: 18px;
    color: #fff;
    line-height: 25px;
    font-weight: 300;
    margin-top: 36px;
}

.layer03{
    background-color: #dbdfe8;
    padding: 60px 0;
}

.layer03-01{
    text-align: center;
}

.layer03 h2{
    font-size: 30px;
    line-height: 50px;
    font-weight: 300;
    color: #000;
    text-align: center;
}

.layer03 h2 span{
    font-size: 50px;
    font-weight: 600;
    color: #001b92;
}

.layer03-01 p{
    position: relative;
    display: inline-block;
    margin: 0 auto;
    font-weight: 500;
    font-size: 20px;
    line-height: 28px;
    text-align: center;
    margin-top: 30px;
    z-index: 2;
}

.layer03-01 p:after{
    position: absolute;
    content: "";
    display: block;
    left: 104px;
    bottom: 1px;
    width: 582px;
    height: 25px;
    background-color: #6dffa4;
    z-index: -1;
}

.layer03-02{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.layer03-02-01{
    margin-right: 30px;
}

.layer03-02-01,
.layer03-02-02{
    border-radius: 20px;
}

.layer03-02 p{
    text-align: center;
    font-size: 19px;
    margin-top: 10px;
}

.layer03-03{
    text-align: center;
}

.layer03-03 ul{
    width: 703px;
    margin: 0 auto;
    margin-top: 40px;
}

.layer03-03 ul li{
    width: 100%;
    display: block;
    padding: 15px 30px;
    background-color: #002d78;
    border-radius: 50px;
    color: #fff;
    font-size: 19px;
    margin-top: 10px;
    text-align: left !important;
}


.layer03-03 ul li span{
    font-weight: 600;
    color: #4cff90;
    display: inline-block;
    margin-right: 10px;
    font-size: 23px;
}


.m13_01 .layer04{
    position: relative;
    width: 1920px;
    height: 757px;
    display: flex;
    align-items: center;
    padding-left: 340px;
    background-image: url("/img/sub/m13_01/layer04.png");
    margin-top: -2px;
}



.layer04 h2{
    font-size: 45px;
    line-height: 68px;
    font-weight: 300;
    color: #fff;
    margin-top: -48px;
}

.layer04 h2 span{
    font-size: 70px;
    line-height: 76px;
    font-weight: 500;
    color: #fff;
}

.layer04-text{
    width: 444px;
    height: 97px;
    background-image: url("/img/sub/m13_01/layer04-text.png");
    margin-top: 40px;
}

.layer04 p{
    font-size: 37px;
    line-height: 50px;
    color: #fff;
    font-weight: 300;
    margin-top: 60px;
}


.layer04-right{
    display: flex;
    align-items: center;
    margin-left: 110px;
}

.layer04-right01{
    position: relative;
    width: 437px;
    height: 567px;
    background-image: url("/img/sub/m13_01/layer04-right01.png");
    margin-right: 17px;
}

.layer04-right02{
    width: 437px;
    height: 567px;
    background-image: url("/img/sub/m13_01/layer04-right02.png");
}

.layer04-right01-01{
    position: absolute;
    width: 78px;
    height: 29px;
    top: 208px;
    right: 40px;
    background-image: url("/img/sub/m13_01/layer04-right01-01.png");
}

.layer04-right01-02{
    position: absolute;
    width: 87px;
    height: 30px;
    top: 288px;
    left: 114px;
    background-image: url("/img/sub/m13_01/layer04-right01-02.png");
}

.layer04-right01-03{
    position: absolute;
    width: 76px;
    height: 29px;
    right: 105px;
    top: 450px;
    background-image: url("/img/sub/m13_01/layer04-right01-03.png");
}

.layer05{
    padding: 64px 0;
    background-color: #c9d2e1;
}

.layer05-01-imgbox,
.layer05-02-imgbox,
.layer05-03-imgbox,
.layer05-04-imgbox{
    position: relative;
}

.layer05-01-imgbox:after {
    content: "";
    display: block;
    position: absolute;
    width: 6px;
    height: 12px;
    top: 83px;
    right: 33px;
    background-image: url("/img/sub/m13_01/layer05-01-blink.png");
    /* 애니메이션을 기본적으로 제거 */
    animation: none;
}

.layer05-01-imgbox.animate:after {
    /* animate 클래스가 추가될 때만 애니메이션 실행 */
    animation: blink-animation  0.8s steps(1) ;
}

.layer05-02-imgbox:after {
    content: "";
    display: block;
    position: absolute;
    width: 74px;
    height: 42px;
    top: 72px;
    right: 30px;
    background-image: url("/img/sub/m13_01/layer05-02-blink.png");
    animation: none;
}

.layer05-02-imgbox.animate:after {
    animation: blink-animation  0.8s steps(1) ;
}

.layer05-03-imgbox:after {
    content: "";
    display: block;
    position: absolute;
    width: 35px;
    height: 27px;
    top: 100px;
    right: 35px;
    background-image: url("/img/sub/m13_01/layer05-03-blink.png");
    animation: none;
}

.layer05-03-imgbox.animate:after {
    animation: blink-animation  0.8s steps(1) ;
}

.layer05-04-imgbox:after {
    content: "";
    display: block;
    position: absolute;
    width: 97px;
    height: 35px;
    top: 76px;
    right: 17px;
    background-image: url("/img/sub/m13_01/layer05-04-blink.png");
    animation: none;
}

.layer05-04-imgbox.animate:after {
    animation: blink-animation 0.8s steps(1) ;
}

@keyframes blink-animation {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.layer05 h2{
    text-align: center;
    font-size: 52px;
    font-weight: 600;
    color: #001b92;
}

.layer05-02{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 84px;
}

.layer05-02 > div{
    margin-right: 28px;
}

.layer05-02 > div:last-child{
    margin-right: 0;
}

.layer05-white{
    display: flex;
    width: 250px;
    height: 100px;
    background-color: #fff;
    padding-left: 8px;
    padding-top: 10px;
}

.layer05-white > p{
    font-size: 19px;
    line-height: 26px;
}

.layer05-white > p:nth-child(1){
    margin-right: 5px;
}

.layer05-02 > div {
    opacity: 0;
    transform: translateY(0px); 
    transition: opacity 0.7s ease, transform 0.7s ease; 
}

.layer05-02 > div.fade-down03 {
    opacity: 1 !important;
    transform: translateY(-40px) !important; 
}


.m13_01 .layer06{
    position: relative;
    width: 1920px;
    height: 581px;
    background-image: url("/img/sub/m13_01/layer06.png");
    margin-top: -2px;
    padding: 90px 0;
    padding-left: 390px;
}


.layer06-text{
    width: 364px;
    height: 54px;
    background-image: url("/img/sub/m13_01/layer06-text.png");
}

.layer06 h2{
    font-size: 71px;
    font-weight: 400;
    margin-left: -4px;
    color: #fff;
    margin-top: 20px;
}

.layer06-left-p{
    font-size: 30px;
    line-height: 42px;
    font-weight: 300;
    color: #fff;
    margin-top: 80px !important;
}

.layer06-green{
    position: absolute;
    bottom: 100px;
    right: 276px;
}

.layer06-green p{
    width: 262px;
    font-size: 22px;
    line-height: 33px;
    color: #00ff60;
    padding: 12px 18px;
    border: 1px solid #00ff60;
    border-radius: 14px;
}

.layer06-green p:nth-child(2){
    margin-top: 20px;
}

.layer06-01{
    position: absolute;
    right: 768px;
    bottom: 173px;
    width: 214px;
    height: 29px;
    background-image: url("/img/sub/m13_01/layer06-01.png");
}

.layer07{
    background-color: #dddddd;
    padding: 67px 0;
    text-align: center;
}

.layer07 h2{
    font-size: 30px;
    line-height: 50px;
    font-weight: 400;
    color: #000;
    text-align: center;
}

.layer07 h2 span{
    font-size: 50px;
    font-weight: 600;
    color: #001b92;
}

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

.layer07-gif > div{
    margin-right: 30px;
}

.layer07-gif img{
    border-radius: 30px;
}

.layer07-gif-p{
    text-align: center;
    font-size: 19px;
    margin-top: 10px !important;
}

.layer07 h3{
    display: inline-block;
    position: relative;
    font-size: 30px;
    margin-top: 54px;
    z-index: 3;
}

.layer07 h3::before{
    content: "";
    display: block;
    position: absolute;
    left: 0;
    bottom: -7px;
    width: 100%;
    height: 1px;
    background-color: #000;
}

.layer07 h3:after{
    position: absolute;
    content: "";
    display: block;
    width: 175px;
    height: 30px;
    background-color: #00ff60;
    z-index: -1;
    right: 171px;
    bottom: 0px;
}

.layer07-p{
    margin-top: 30px !important;
    font-size: 20px;
    line-height: 28px;
}

.layer08{
    padding: 60px 0;
    background-color: #697582;
}

.layer08 h2{
    font-size: 30px;
    line-height: 50px;
    font-weight: 400;
    color: #fff;
    text-align: center;
}

.layer08 h2 span{
    font-size: 50px;
    font-weight: 600;
    color: #fff;
}

.layer08-div01{
    display: flex;
    justify-content: center;
    margin-top: 45px;
}

.layer08-div01 > div:nth-child(1),
.layer08-div02 > div:nth-child(1){
    margin-right: 15px;
}

.layer08-div02{
    display: flex;
    justify-content: center;
    margin-top: 15px;
}

#imageContainer{
    width: 347px !important;
    height: 179px !important;
    background-image: url('/img/sub/m13_01/layer08-bottom01-01.png');
    background-size: cover;
    background-position: center;
    transition: background-image 1.5s ease-in-out;
}

#imageContainer02{
    width: 347px !important;
    height: 179px !important;
    background-image: url('/img/sub/m13_01/layer08-bottom02-01.png');
    background-size: cover;
    background-position: center;
    transition: background-image 1.5s ease-in-out;
}

.layer09{
    padding: 70px 0;
    background-color: #c9d2e1;
}

.layer09-02 > div {
    opacity: 0;
    transform: translateY(0px); /* 요소를 화면 위쪽으로 이동 */
    transition: opacity 0.7s ease, transform 0.7s ease; /* 0.5초 동안 애니메이션 */
}

.layer09-02 > div.fade-down09 {
    opacity: 1 !important;
    transform: translateY(-40px) !important; /* 요소가 원래 위치로 내려오면서 나타남 */
}

.layer09 h2{
    text-align: center;
}

.layer09 h2 span{
    font-size: 50px;
    font-weight: 600;
    color: #001b92;
}

.layer09-white{
    display: flex;
    width: 279px;
    height: 100px;
    background-color: #fff;
    padding-left: 8px;
    padding-top: 10px;
}

.layer09-white > p{
    font-size: 19px;
    line-height: 26px;
}

.layer09-white > p:nth-child(1){
    margin-right: 5px;
}

.layer09-02{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 84px;
}

.layer09-02-up{
    margin-right: 15px;
}

.layer09-02-up:last-child{
    margin-right: 0;
}


.layer09-01-imgbox,
.layer09-02-imgbox,
.layer09-03-imgbox{
    position: relative;
}


.layer09-01-imgbox:after{
    content: "";
    display: block;
    position: absolute;
    width: 100px;
    height: 48px;
    top: 152px;
    left: 70px;
    background-image: url("/img/sub/m13_01/layer09-01-blink.png");
    animation: none;
}

.layer09-01-imgbox.animate:after {
    /* animate 클래스가 추가될 때만 애니메이션 실행 */
    animation: blink-animation  0.8s steps(1) ;
}


.layer09-02-imgbox:after{
    content: "";
    display: block;
    position: absolute;
    width: 71px;
    height: 44px;
    top: 154px;
    left: 98px;
    background-image: url("/img/sub/m13_01/layer09-02-blink.png");
    animation: none;
}

.layer09-02-imgbox.animate:after {
    /* animate 클래스가 추가될 때만 애니메이션 실행 */
    animation: blink-animation  0.8s steps(1) ;
}



.layer09-03-imgbox:after{
    content: "";
    display: block;
    position: absolute;
    width: 51px;
    height: 80px;
    top: 101px;
    left: 94px;
    background-image: url("/img/sub/m13_01/layer09-03-blink.png");
    animation: none;
}

.layer09-03-imgbox.animate:after {
    /* animate 클래스가 추가될 때만 애니메이션 실행 */
    animation: blink-animation  0.8s steps(1) ;
}




.layer09-03-imgbox:before{
    content: "";
    display: block;
    position: absolute;
    width: 116px;
    height: 78px;
    top: 150px;
    left: 4px;
    z-index: 3;
    background-image: url("/img/sub/m13_01/layer09-03-before.png");
}

.layer10{
    padding: 60px 0;
    background-color: #4a649e;
    text-align: center;
}

.layer10 h2{
    position: relative;
    display: inline-block;
    font-size: 30px;
    line-height: 50px;
    font-weight: 400;
    color: #fff;
    text-align: center;
    z-index: 2;
}

.layer10 h2 span{
    font-size: 50px;
    font-weight: 600;
    color: #fff;
}

.layer10 h2:after{
    content: "";
    display: block;
    position: absolute;
    bottom: 2px;
    right: 32px;
    width: 189px;
    height: 56px;
    background-color: #0cff00;
    z-index: -1;
}

.layer10-p01{
    font-size: 20px;
    line-height: 28px;
    color: #fff;
    margin-top: 30px !important;
}

.layer10-p01 span{
    display: inline-block;
    position: relative;
    z-index: 2;
}

.layer10-p01 span:after{
    content: "";
    display: block;
    position: absolute;
    left: -2px;
    bottom: 1px;
    width: 455px;
    height: 23px;
    background-color: #0cff00;
    z-index: -1;
}

.layer10-01{
    margin: 30px 0;
}

.layer10 ul{
    width: 407px;
    margin: 0 auto;
}

.layer10 ul li{
    width: 100%;
    background-color: #fff;
    border-radius: 50px;
    padding: 9px 0 10px;
    font-size: 22px;
    margin-top: 10px;
}

.layer10 ul li:nth-child(1){
    margin-top: 0;
}



.layer11{
    position: relative;
    width: 1920px;
    max-width: 1920px;
    overflow: hidden;
    height: 1446px;
    background-image: url("/img/sub/m13_01/layer11.jpg");
    margin-top: -2px;
}

.layer11face{
    position: absolute;
    width: 1180px;
    height: 1117px;
    top: -47px;
    left: 198px;
    background-image: url("/img/sub/m13_01/layer11face.png");
    z-index: 3;
}


.layer11-textbg {
    margin-top: 50px;
    width: 100%;
    height: 195px;
    background-image: url("/img/sub/m13_01/layer11-textbg.png");
    background-repeat: repeat-x; /* 배경을 수평 방향으로 반복 */
    background-size: 3135px 195px; /* 이미지 크기를 지정 */
    animation: slidebg 13s linear infinite; /* 10초 동안 반복되는 애니메이션 */
    position: relative;
    overflow: hidden; /* 부모 요소를 넘어가는 부분을 숨김 */
}

@keyframes slidebg {
    0% {
        background-position: 0 0; /* 처음에 배경의 시작 위치 */
    }
    100% {
        background-position: -3135px 0; /* 끝날 때 배경이 왼쪽으로 이동 */
    }
}


.layer11bottom{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 510px;
    background-color: rgba(0, 43, 112, 0.6);
    z-index: 10;
    padding: 70px 60px;
}

.layer11bottom h3{
    font-size: 50px;
    text-align: center;
    color: #fff;
    
}

.layer11-02{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 84px;
}

.layer11-02-up{
    margin-right: 30px;
}

.layer11-02-up:last-child{
    margin-right: 0;
}


.layer11-white{
    display: flex;
    width: 250px;
    height: 83px;
    background-color: #fff;
    padding-left: 12px;
    padding-top: 8px;
}

.layer11-white > p{
    font-size: 19px;
    line-height: 26px;
}

.layer11-bar01{
    position: absolute;
    left: 38.2%;
    top: 42%;
    width: 433px;
    height: 10px;
    background-image: url("/img/sub/m13_01/layer11-bar01.png");
    z-index: 10;
}

.layer11-bar02{
    position: absolute;
    left: 38.2%;
    top: 46.4%;
    width: 432px;
    height: 9px;
    background-image: url("/img/sub/m13_01/layer11-bar02.png");
    z-index: 10;
}

.layer11-bar03{
    position: absolute;
    left: 38.2%;
    top: 54.5%;
    width: 433px;
    height: 9px;
    background-image: url("/img/sub/m13_01/layer11-bar03.png");
    z-index: 10;
}



.layer11-01-imgbox,
.layer11-02-imgbox,
.layer11-03-imgbox,
.layer11-04-imgbox{
    position: relative;
}


.layer11-01-imgbox:after{
    content: "";
    display: block;
    position: absolute;
    width: 93px;
    height: 35px;
    top: 141px;
    left: 77px;
    background-image: url("/img/sub/m13_01/layer11-01-blink.png");
    /* animation: blink-animation 1s steps(1) infinite; */
}

.layer11-02-imgbox:after{
    content: "";
    display: block;
    position: absolute;
    width: 18px;
    height: 33px;
    top: 158px;
    left: 116px;
    background-image: url("/img/sub/m13_01/layer11-02-blink.png");
    /* animation: blink-animation 1s steps(1) infinite; */
}

.layer11-03-imgbox:after{
    content: "";
    display: block;
    position: absolute;
    width: 195px;
    height: 54px;
    top: 104px;
    left: 31px;
    background-image: url("/img/sub/m13_01/layer11-03-blink.png");
    /* animation: blink-animation 1s steps(1) infinite; */
}


.layer11-04-imgbox:after{
    content: "";
    display: block;
    position: absolute;
    width: 208px;
    height: 70px;
    top: 98px;
    left: 24px;
    background-image: url("/img/sub/m13_01/layer11-04-blink.png");
    /* animation: blink-animation 1s steps(1) infinite; */
}


.layer11-02 > div {
    opacity: 0;
    transform: translateY(0px); /* 요소를 화면 위쪽으로 이동 */
    transition: opacity 0.7s ease, transform 0.7s ease; /* 0.5초 동안 애니메이션 */
}

.layer11-02 > div.fade-down11 {
    opacity: 1 !important;
    transform: translateY(-40px) !important; /* 요소가 원래 위치로 내려오면서 나타남 */
}


.layer12{
    position: relative;
    padding: 60px 0;
    padding-left: 402px;
    width: 1920px;
    height: 689px;
    background-color: #c9d2e1;
}

.layer12 > .layer12-txtbox{
    text-align: center;
    width: 640px;
}

.layer12title{
    width: 403px;
    height: 55px;
    margin: 0 auto;
    background-image: url("/img/sub/m13_01/layer12title.png");
}

.layer12 h2{
    font-size: 50px;
    color: #001b92;
}

.layer12 h2 span{
    font-size: 50px;
    font-weight: 600;
    color: #001b92;
}

.layer12backgreen{
    display: inline-block;
    position: relative;
    z-index: 4;
    margin-top: 15px;
}

.layer12backgreen:after {
    content: "";
    display: block;
    position: absolute;
    right: -9px;
    top: 0;
    width: 250px;
    height: 56px;
    background-color: #0cff00;
    z-index: -1;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.layer12mask {
    position: absolute;
    width: 750px;
    height: 786px;
    right: 18%; 
    bottom: -11%;
    background-image: url("/img/sub/m13_01/layer12mask.png");
    transition: transform 14s ease; /* 부드럽게 기울어지는 효과 */
}

.tilted {
    transform: rotate(-30deg); /* 오른쪽으로 10도 기울임 */
}

.layer12teacher{
    position: absolute;
    width: 657px;
    height: 664px;
    right: 200px;
    bottom: 0;
    background-image: url("/img/sub/m13_01/layer1teacher.png");
}

.fade-in:after {
    opacity: 1;
}

.layer12-p01{
    font-size: 30px;
    line-height: 40px;
    font-weight: 500;
    margin-top: 40px !important;
}

.layer12-p02{
    font-size: 20px;
    line-height: 28px;
    font-weight: 400;
    margin-top: 30px !important;
}

.layer12 ul{
    width: 281px;
    margin: 0 auto;
    margin-top: 50px;
}

.layer12 ul li {
    width: 100%;
    background-color: #fff;
    padding: 15px 0;
    border-radius: 50px;
    font-size: 19px;
    margin-top: 10px;
    font-weight: 500;
    opacity: 0; /* 처음에 안보이게 설정 */
    transform: translateY(20px); /* 약간 아래쪽으로 이동 */
    transition: opacity 0.8s ease, transform 0.8s ease; /* 애니메이션 효과 */
}

.layer12 ul li:nth-child(1) {
    margin-top: 0;
}

.layer12 ul li.visible {
    opacity: 1; /* 보이게 설정 */
    transform: translateY(0); /* 제자리로 이동 */
}


.layer13{
    width: 1920px;
    height: 478px;
    padding-left: 1014px;
    padding-top: 116px;
    background-image: url("/img/sub/m13_01/layer13.png");
}

.l13-subtitle{
    width: 252px;
    height: 15px;
    background-image: url("/img/sub/m13_01/l13-subtitle.png");
}

.layer13 h2{
    font-size: 52px;
    color: #fff;
    margin-top: 20px;
}

.layer13 h2 span{
    font-weight: 600;
}

.layer13 p{
    font-size: 20px;
    line-height: 28px;
    margin-top: 60px;
    color: #fff;
}

.layer14{
    display: flex;
}

.layer14 > div{
    width: 384px;
    height: 328px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.layer14-01{
    background-image: url("/img/sub/m13_01/layer14-01.png");
}

.layer14-02{
    background-image: url("/img/sub/m13_01/layer14-02.png");
}

.layer14-03{
    background-image: url("/img/sub/m13_01/layer14-03.png");
}

.layer14-04{
    background-image: url("/img/sub/m13_01/layer14-04.png");
}

.layer14-05{
    background-image: url("/img/sub/m13_01/layer14-05.png");
}

.layer14 > div p{
    font-size: 23px;
    line-height: 32px;
    color: #fff;
}







/* 모바일 */
/* --------------------------------------------------- */
@media (max-width:990px){
    .bg{
        position: relative;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .re-h2{
        font-size: 0.938rem;
        line-height: 28px;
        font-weight: 300;
        text-align: center;
    }
    .re-h2 span{
        font-size: 1.688rem;
        font-weight: 600;
    }
    
    .mobile-layer01Box{
        width: 100%;
        aspect-ratio: 720/859;
        height: 100%;
    }
    
    .mobile-layer01{
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("/img/sub/m13_01/mobile/mobile-layer01.png");
    }
    
    
    .layer01-text01{
        position: absolute;
        right: 2.4%;
        top: 33%;
        display: block;
        width: 126px;
        height: 22px;
        background-image: url("/img/sub/m13_01/mobile/layer01-text01.png");
    }
    
    .layer01-text02{
        position: absolute;
        right: 6.8%;
        top: 40.5%;
        display: block;
        width: 111px;
        height: 47px;
        background-image: url("/img/sub/m13_01/mobile/layer01-text02.png");
    }
    
    .layer01-text03{
        position: absolute;
        left: 19%;
        bottom: 17%;
        display: block;
        width: 243px;
        height: 70px;
        background-image: url("/img/sub/m13_01/mobile/layer01-text03.png");
    }
    
    .fade-down02 {
        opacity: 1 !important;
        transform: translateY(40px) !important; /* 요소가 원래 위치로 내려오면서 나타남 */
    }
    
    .mobile-layer01 div {
        opacity: 0;
        transform: translateY(0px); /* 요소를 화면 위쪽으로 이동 */
        transition: opacity 0.7s ease, transform 0.7s ease; /* 0.5초 동안 애니메이션 */
    }
    
    /* 2 */
    .mobile-layer02Box{
        width: 100%;
        aspect-ratio: 720/680;
        height: 100%;
    }
    
    .mobile-layer02{
        text-align: center;
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("/img/sub/m13_01/mobile/mobile-layer02.png");
    }
    
    .layer02-contbox{
        width: 100%;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 6%;
    }
    
    .mobile-layer02 h2{
        text-align: center;
        line-height: 30px;
        font-size: 1.2rem;
        color: #fff;
        font-weight: 300;
    }
    
    
    .mobile-layer02 h2 span{
        font-size: 1.613rem;
        font-weight: 600;
    }
    
    .mobile-layer02 p{
        font-weight: 300;
        font-size: 0.688rem;
        color: #fff;
        line-height: 15px;
        margin-top: 10px;
    }
    
    
    /* 3 */
    .mobile-layer03Box{
        background-color: #dbe0e8;
        padding: 20px 0;
    }
    
    .mobile-layer03Box h2 {
        text-align: center;
        line-height: 28px;
    }

    .mobile-layer03Box h2 span{
        color: #001b92;
        font-weight: 600;
    }

    .mobile-layer03Box p{
        position: relative;
        text-align: center;
        font-size: 0.688rem;
        font-weight: 500;
        line-height: 15px;
        margin-top: 8px;
    }

    .mobile-layer03Box p span{
        position: relative;
        display: inline-block;     
        z-index: 3;
    }
    .mobile-layer03Box p span:after{
        content: "";
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        background-color: #6dffa4;
        width: 100%;
        height: 14px;
        z-index: -1;
    }

    .mobile-layer03-gifbox{
        width: 90%;
        margin: 25px auto 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-layer03-gifbox > div:nth-child(1){
        margin-right: 2px;
    }

    .mobile-layer03-gifbox img{
        border-radius: 10px;
    }

    .mobile-layer03Box ul li{
        width: 94%;
        margin:  8px auto;
        padding: 10px 10px;
        background-color: #002d78;
        border-radius: 50px;
        color: #fff;
        font-size: 0.642rem;
    }

    .mobile-layer03Box ul li span{
        color: #4cff90;
    }


    /* 4 */
    .mobile-layer04Box{
        width: 100%;
        aspect-ratio: 720/931;
        height: 100%;
    }

    .mobile-layer04{
        text-align: center;
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("/img/sub/m13_01/mobile/mobile-layer04.png");
        padding: 20px 0;
    }

    .mobile-layer04 h2{
        color: #fff;
        font-weight: 300;
    }
    .mobile-layer04 h2 span{
        font-weight: 600;
    }

    .mobile-layer04Title{
        width: 222px;
        height: 49px;
        background-image: url("/img/sub/m13_01/mobile/mobile-layer04Title.png");
        margin: 10px auto 0;
    }

    .mobile-layer04 p{
        font-size: 0.75rem;
        color: #fff;
        font-weight: 300;
        margin-top: 20px;
    }

    .mobile-layer04-face{
        position: relative;
        width: 277px;
        height: 253px;
        margin:  25px auto 0;
        background-image: url("/img/sub/m13_01/mobile/mobile-layer04-face.png");
    }

    .mobile-layer04-face-01{
        position: absolute;
        right: 73px;
        top: 61px;
        width: 39px;
        height: 15px;
        background-image: url("/img/sub/m13_01/mobile/mobile-layer04-face-01.png");
    }

    .mobile-layer04-face-02{
        position: absolute;
        left: 37px;
        top: 129px;
        width: 45px;
        height: 15px;
        background-image: url("/img/sub/m13_01/mobile/mobile-layer04-face-02.png");
    }

    .mobile-layer04-face-03{
        position: absolute;
        left: 112px;
        bottom: 26px;
        width: 39px;
        height: 15px;
        background-image: url("/img/sub/m13_01/mobile/mobile-layer04-face-03.png");
    }


    /* 5 */
    .mobile-layer05Box{
        background-color: #c9d2e1;
        padding: 30px 15px;
        color: #001b92;
    }

    .mobile-layer05Box img{
        width: 100%;
    }

    .mobile-layer05Box-topBox{
        margin-top: 20px;
    }

    .mobile-layer05Box-top01{
        display: flex;
        margin-top: 10px;
    }

    .mobile-layer05Box-top01 > div{
        width: 50%;
    }

    .mobile-layer05Box-top01 > div:nth-child(1){
        margin-right: 10px;
    }

    .mobile-layer05Box-top01 > div p{
        background-color: #fff;
        font-size: 0.56rem;
        line-height: 13px;
        padding: 5px;
        font-weight: 500;
        color: #000;
        min-height: 42px;
    }

    /* 6 */
    .mobile-layer06Box{
        position: relative;
        width: 100%;
        aspect-ratio: 720/724;
        height: 100%;
    }

    .mobile-layer06{
        text-align: center;
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("/img/sub/m13_01/mobile/mobile-layer06.png");
        padding: 20px 0;
    }

    .mobile-layer06 .layer-con{
        position: absolute;
        right: 5%;
        bottom: 10%;
        text-align: center;
    }

    .mobile-layer06Title{
        margin: 0 auto;
        width: 150px;
        height: 21px;
        background-image: url("/img/sub/m13_01/mobile/mobile-layer06Title.png");
    }

    .mobile-layer06 h2{
        font-size: 1.8rem;
        color: #fff;
        font-weight: 600;
        margin-top: 10px;
    }

    .mobile-layer06-subtitle{
        text-align: center;
        color: #fff;
        font-weight: 400;
        font-size: 0.68rem;
        line-height: 17px;
        margin-top: 20px !important;
    }

    .layer06-greenbox{
        margin-top: 40px;
    }

    .layer06-greenbox p{
        margin: 10px auto;
        width: 127px;
        text-align: left;
        line-height: 16px;
        padding: 8px;
        border-radius: 8px;
        border: 1px solid #06ff00;
        color: #06ff00;
        font-size: 0.75rem;
    }

    .layer06-arrow{
        position: absolute;
        left: 10%;
        bottom: 31%;
        width: 65px;
        height: 64px;
        background-image: url("/img/sub/m13_01/mobile/layer06-arrow.png");
    }


    /* 7 */
    .mobile-layer07Box{
        background-color: #dddddd;
        padding: 30px 0;
    }

    .mobile-layer07Box h2{
        font-weight: 500;
    }

    .mobile-layer07Box h2 span{
        color: #001b92;
    }

    .mobile-layer07-gifbox{
        width: 90%;
        margin: 25px auto 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .mobile-layer07-gifbox p{
        font-weight: 500;
        margin-top: 5px;
    }

    .mobile-layer07-gifbox > div:nth-child(1){
        margin-right: 5px;
    }

    .mobile-layer07-gifbox img{
        border-radius: 10px;
    }

    .mobile-layer07-big{
        text-align: center;
        font-size: 1.363rem;
        line-height: 28px;
    }

    .mobile-layer07-big span{
        position: relative;
        font-weight: 600;
        display: inline-block;
        z-index: 3;
    }

    .mobile-layer07-big span:after{
        content: "";
        display: block;
        position: absolute;
        left: -1px;
        bottom: 1px;
        width: 126px;
        height: 26px;
        background-color: #00ff60;
        z-index: -1;
    }

    .mobile-layer07-sm{
        text-align: center;
        font-weight: 500;
        font-size: 0.688rem;
        line-height: 15px;
        margin-top: 10px !important;
    }

    .mobile-layer07-sm span{
        position: relative;
        display: inline-block;
    }

    .mobile-layer07-sm span:after{
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 0.6px;
        background-color: #000;
        bottom: -1px;
        left: 0;
    }

    /* 8 */
    .mobile-layer08Box{
        background-color: #697582;
        padding: 30px 0;
    }

    .mobile-layer08Box h2{
        color: #fff;
    }

    .mobile-layer08Box-imgbox{
        margin-top: 20px;
    }


    .mobile-layer08-div01{
        width: 90%;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }

    .mobile-layer08-div01 > div:nth-child(1){
        margin-right: 5px;
    }

    .mobile-layer08-div02{
        width: 90%;
        display: flex;
        justify-content: center;
        margin: 0 auto;
        margin-top: 5px;
    }

    .mobile-layer08-div02 > div:nth-child(1){
        margin-right: 5px;
    }

    #mobile-imageContainer{
        width: 100% !important;
        height: 90px !important;
        background-image: url('/img/sub/m13_01/mobile/mobile-layer08-bottom01-01.png');
        background-size: cover;
        background-position: center;
        transition: background-image 1.5s ease-in-out;
        border-radius: 8px;
    }
    
    #mobile-imageContainer02{
        width: 100% !important;
        height: 90px !important;
        background-image: url('/img/sub/m13_01/mobile/mobile-layer08-bottom02-01.png');
        background-size: cover;
        background-position: center;
        transition: background-image 1.5s ease-in-out;
        border-radius: 8px;
    }


    /* 9 */
    .mobile-layer09Box{
        background-color: #c9d2e1;
        padding: 30px 0;
    }

    .mobile-layer09Box h2{
        color: #001b92;
    }

    .mobile-layer09Box-top01{
        width: 90%;
        margin: 0 auto;
        display: flex;
        margin-top: 10px;
    }

    .mobile-layer09Box-top01 img{
        width: 100%;
    }

    .mobile-layer09Box-top01 > div{
        width: calc(100%/3);
        margin-right: 5px;
    }

    .mobile-layer09Box-top01 > div:last-child{
        margin-right: 00px;
    }

    .mobile-layer09Box-top01 p{
        background-color: #fff;
        font-size: 0.52rem;
        line-height: 12px;
        padding: 5px;
        font-weight: 500;
        color: #000;
        height: 50px;
    }


    /* 10 */
    .mobile-layer10Box{
        background-color: #4a649d;
        padding: 30px 0;
    }

    .mobile-layer10Box h2{
        color: #fff;
    }

    .mobile-layer10Box h2 span{
        position: relative;
        display: inline-block;
        z-index: 3;
    }

    .mobile-layer10Box h2 span:after{
        content: "";
        display: block;
        position: absolute;
        bottom: -3px;
        right: -4px;
        width: 99px;
        height: 31px;
        background-color: #0cff00;
        z-index: -1;
    }

    .mobile-layer10Box .layer10-p01{
        text-align: center;
        font-size: 0.668rem;
        line-height: 16px;
        font-weight: 300;
    }

    .mobile-layer10Box .layer10-p01 span{
        position: relative;
        display: inline-block;
        z-index: 3;
    }

    .mobile-layer10Box .layer10-p01 span:after{
        content: "";
        display: block;
        position: absolute;
        left: -2px;
        bottom: 1px;
        width: 244px;
        height: 14px;
        background-color: #0cff00;
        z-index: -1;
    }

    .layer10-01{
        margin: 20px 0;
    }


    .mobile-layer10Box ul{
        width: 60%;
        margin: 0 auto;
    }
    
    .mobile-layer10Box ul li{
        text-align: center;
        width: 100%;
        background-color: #fff;
        border-radius: 50px;
        padding: 9px 0 10px;
        font-size: 0.74rem;
        margin-top: 10px;
        font-weight: 500;
    }
    
    .mobile-layer10Box ul li:nth-child(1){
        margin-top: 0;
    }


    /* 11 */
    .mobile-layer11Box{
        position: relative;
        width: 100%;
        background-color: #e3e6ed;
    }

    .mobile-layer11{
        position: relative;
        width: 100%;
        height: 100%;
    }

    .mobile-layer11face{
        position: relative;
        z-index: 3;
    }

    .greenbarbox{
        position: absolute;
        left: 13.7%;
        top: 28%;
        width: 160px;
        height: 400px;
    }

    .greenbar{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 1px;
        height: 84px;
        background-color: #0cff00;
        z-index: 4;
    }

    .layer11-green02{
        position: absolute;
        top: 7%;
    }

    .layer11-green03{
        position: absolute;
        top: 20%;
    }

    .mobile-layer11Content{
        position: absolute;
        right: 3%;
        bottom: 58%;
        width: 180px;
        height: 245px;
        background-image: url("/img/sub/m13_01/mobile/mobile-layer11Content.png");
        z-index: 4;
    }


    .layer11-textbg {
        position: absolute;
        z-index: 2;
        top: 20px;
        margin-top: 0 !important;
        width: 100%;
        height: 75px !important;
        background-image: url("/img/sub/m13_01/layer11-textbg.png");
        background-repeat: repeat-x; /* 배경을 수평 방향으로 반복 */
        background-size: 700px 75px; /* 이미지 크기를 지정 */
        animation: slidebg 10s linear infinite; /* 10초 동안 반복되는 애니메이션 */
        overflow: hidden; /* 부모 요소를 넘어가는 부분을 숨김 */
    }
    
    @keyframes slidebg {
        0% {
            background-position: 0 0; /* 처음에 배경의 시작 위치 */
        }
        100% {
            background-position: -700px 0; /* 끝날 때 배경이 왼쪽으로 이동 */
        }
    }


    .mobile-layer11Box-topBox{
        width: 90%;
        margin: 20px auto 0;
    }

    .mobile-layer11Box-top01{
        display: flex;
        margin-top: 10px;
    }

    .mobile-layer11Box-top01 > div{
        width: 50%;
    }

    .mobile-layer11Box-top01 > div:nth-child(1){
        margin-right: 10px;
    }

    .mobile-layer11Box-top01 > div p{
        background-color: #fff;
        font-size: 0.75rem;
        line-height: 17px;
        padding: 5px;
        font-weight: 500;
        color: #000;
        min-height: 42px;
        text-align: center;
    }

    .layer11-bottomContent{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: rgba(0, 43, 112, 0.6);
        z-index: 10;
        padding: 30px 0;
    }

    .layer11-bottomContent h2{
        color: #fff;
    }


    /* 12 */
    .mobile-layer12Box{
        position: relative;
        background-color: #c9d2e1;
        text-align: center;
        padding-top: 25px;
    }

    .mobile-layer12Title{
        margin: 0 auto;
        width: 206px;
        height: 28px;
        background-image: url("/img/sub/m13_01/mobile/mobile-layer12Title.png");
    }

    .mobile-layer12Box h2{
        color: #001b92;
        margin-top: 5px;
    }

    .layer12title-span{
        position: relative;
        display: inline-block;
        z-index: 3;
    }

    .layer12title-span:after{
        content: "";
        display: block;
        position: absolute;
        bottom: -3px;
        right: -4px;
        width: 132px;
        height: 31px;
        background-color: #0cff00;
        z-index: -1;
    }

    .layer12Title-p{
        font-weight: 500;
        font-size: 0.938rem;
        line-height: 20px;
        margin-top: 10px !important;
    }

    .layer12TeacherBox{
        display: flex;
        justify-content: right;
        margin-top: 15px;
    }

    .layer12Title-teacher{
        width: 302px;
        height: 365px;
        background-image: url("/img/sub/m13_01/mobile/layer12Title-teacher.png"); 
    }


    .mobilelayer12mask {
        position: absolute;
        width: 408px;
        height: 428px;
        right: 8%; 
        bottom: 1%;
        background-image: url("/img/sub/m13_01/layer12mask.png");
        transition: transform 14s ease; /* 부드럽게 기울어지는 효과 */
    }
    
    .mobiletilted {
        transform: rotate(-30deg); /* 오른쪽으로 10도 기울임 */
    }

    .layer12-txt-p{
        text-align: left;
        position: absolute;
        left: 12%;
        bottom: 25%;
        font-size: 0.70rem;
        line-height: 15px;
        font-weight: 500;
        color: #000;
    }

    .layer12-ul{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 4%;
        width: 70%;
        margin: 0 auto;
    }

    .layer12-ul li{
        color: #fff;
        font-size: 0.7rem;
        padding: 8px 0;
        background-color: #002d78;
        border-radius: 50px;
        margin-top: 5px;
    }


    /* 13 */
    .mobile-layer13Box{
        position: relative;
        padding-top: 30px;
        text-align: center;
        background-color: #4d7eb3;
    }

    .layer13Box-title{
        margin: 0 auto;
        width: 160px;
        height: 9px;
        background-image: url("/img/sub/m13_01/mobile/layer13Box-title.png");
    }

    .mobile-layer13Box h2{
        margin-top: 10px;
    }

    .mobile-layer13Box h2 span{
        color: #fff;
    }

    .layer13Box-sub-p{
        color: #fff;
        line-height: 18px;
        font-weight: 300;
        margin-top: 14px !important;
    }

    .layer13-modelflex{
        width: 90%;
        margin: 0 auto;
        display: flex;
        align-content: center;
        margin-top: 20px;
    }

    .layer13-modelflex > div:nth-child(1){
        margin-right: 8px;
    }

    .layer13Box-bottom-flex-ul{
        margin-top: 26px;
    }

    .layer13Box-bottom-flex{
        display: flex;
        align-items: center;
        background-color: #83a6cd;
    }

    .layer13Box-bottom-flex.grbg{
        background-color: #27384e;
    }

    .layer13Box-bottom-flex > div{
        width: 50%;
    }



    .layer13Box-bottom-flex p{
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        text-align: center;
        height: 100%;
        font-size: 0.76rem;
        line-height: 18px;
    }

}