/*공통*/

* {margin:0; padding:0; box-sizing: border-box; }
ul, li {list-style: none; font-weight: 600;}
a {text-decoration: none;}
img {vertical-align: top; 
    /* max-width: 100%; height: auto; */}

/* 개인 */
.top_title_head{
    font-size: 2em;
    color: #565751;
    font-family: 'Sandoll Gyeokdonggulim'; 
    font-style: normal;
    font-weight: 400;
    word-break: keep-all;
}

.top_title_head_s{
    font-size: 1.5em;
    color: #565751;
    font-family: 'Sandoll Gyeokdonggulim'; 
    font-style: normal;
    font-weight: 400;
    word-break: keep-all;
}

.top_title_font{
    font-size: 1.1em;
    color: rgb(126, 126, 126);
    font-weight: 600;
    word-break: keep-all;
    word-spacing: -1px;
}

.top_title_font_s{
    font-size: 2vmax;
    color: rgb(126, 126, 126);
    font-weight: 600;
    word-break: keep-all;
    word-spacing: -1px;
}

.middle{
    margin-top: 4em;
    margin-bottom: 6em;
}

.middle_center{
    display: flex;
    justify-content: center;
}

.middle_img{
    max-width: 30vw;
    z-index: 2;
}

.middle_img_planet{
    z-index: 3;
    border-radius: 1.5em;
    position: relative;
    padding: 4% 6% 4% 6%;
    left: -2%;
}

.middle_img_border{
    z-index: 2;
    background-color: white;
    box-shadow: 0px 6px 5px rgb(230, 230, 230);
    margin-top: -5em;
    width: 85%;
    border-radius: 1.2em;
}

.middle_img_planet::after{
    content: "";
    z-index: 4;
    width: 5%;
    height: 8.5%;
    border-radius: 50%;
    border: 0.15em solid rgba(233, 233, 233, 0.753);
    position: absolute;
    right: 0%;
    top: 45%;
}

.dodo_abc{
    background-color: rgb(192, 201, 240);
    position:relative; 
    top:-30px;
    border-radius: 1.5em 1.5em 0em 0em;
    height:180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dodo_abc_font{
    font-size: clamp(0.9rem, 0.82rem + 0.4vw, 1.3rem);
    font-weight: 600;
    color:rgb(75, 99, 184);
    word-spacing: -1px;
    word-break: keep-all;
}

/* 알파벳 */

.middle_alpha{
    padding: 4vmax;
    background-color: rgb(224, 231, 249);
}

.alpha_head{
    display: flex;
    margin-bottom: 7.5vmin;
    justify-content: space-between;
}

.alpha_head_s{
    display: flex;
    margin-top: 5vmin;
    margin-bottom: 9vmin;
    justify-content: space-between;
}

.alpha_img{
    width: 32.5%;
}

.alpha_img img, .alpha_body img{
    height: 200px;
}

.alpha_guide{
    text-align: left;
    margin-left: 2em;
    color:rgb(126,126,126);
    width: 68%;
}

.alpha_guide_s{
    text-align: left;
    color:rgb(126,126,126);
    font-size: clamp(0.8rem, 0.57rem + 1.1vw, 1.5rem);
    letter-spacing: -1px;
}

.alpha_guide_title{
    color: rgb(23, 101, 251);
    font-size: clamp(1.3rem, 1.2rem + 0.5vw, 1.8rem);
    font-family: 'Sandoll Gyeokdonggulim'; 
    font-style: normal;
    font-weight: 400;
    word-break: keep-all;
}

.alpha_guide_title_s{
    color: rgb(23, 101, 251);
    font-size: clamp(1.1rem, 0.7500000000000001rem + 1.7499999999999998vw, 1.8rem);
    font-family: 'Sandoll Gyeokdonggulim'; 
    font-style: normal;
    font-weight: 400;
    word-break: keep-all;
}

.alpha_guide_font{
    font-weight: 600;
    color: #565751;
    font-size: clamp(0.85rem, 0.82rem + 0.15000000000000002vw, 1rem);
    margin: 0px;
}

.alpha_guide_font_s{
    font-weight: 600;
    color: #565751;
    font-size: clamp(0.75rem, 0.475rem + 1.3750000000000002vw, 1.3rem);
    margin: 0px;
}

.alpha_body img{
    width: 31%;
}

.alpha_body_s img{
    width: 47%;
}

.alpha_body{
    display: flex;
    justify-content: space-between;
    gap: 1.5em;
    flex-wrap: wrap;
}

.alpha_body_s{
    display: flex;
    justify-content: space-between;
    gap: 1em 0em;
    flex-wrap: wrap;
}

/* 파닉스 */

.middle_phonics{
    padding: 4vmax 4vmax 0vmax 4vmax;
    background-color: rgb(196, 210, 243);
}

.middle_phonics_2{
    padding: 0vmax 4vmax 4vmax 4vmax;
    background-color: rgb(196, 210, 243);
}


.phonics_head{
    display: flex;
    justify-content: space-between;
    padding-bottom: 7.5vmin;
}

.phonics_head_s{
    display: flex;
    margin-top: 5vmin;
    padding-bottom: 6vw;
    justify-content: space-between;
}

.phonics_head div{
    width: 31%;
}

.phonics_img{
    width: 35%;
}

.phonics_img img, .phonics_body img{
    height: 200px;
}

.phonics_guide{
    text-align: left;
}

.phonics_guide_s{
    text-align: left;
    color:rgb(126,126,126);
    font-size: clamp(0.8rem, 0.57rem + 1.1vw, 1.5rem);
    letter-spacing: -1px;
}

.phonics_guide_title{
    color: rgb(23, 101, 251);
    font-size: clamp(1.3rem, 1.2rem + 0.5vw, 1.8rem);
    font-family: 'Sandoll Gyeokdonggulim'; 
    font-style: normal;
    font-weight: 400;
    word-break: keep-all;
}

.phonics_guide_title_s{
    color: rgb(23, 101, 251);
    font-size: clamp(1.1rem, 0.7500000000000001rem + 1.7499999999999998vw, 1.8rem);
    font-family: 'Sandoll Gyeokdonggulim'; 
    font-style: normal;
    font-weight: 400;
    word-break: keep-all;
}

.phonics_guide_font{
    font-weight: 600;
    color: #565751;
    margin: 0px;
    font-size: clamp(0.85rem, 0.82rem + 0.15000000000000002vw, 1rem);
}

.phonics_guide_font_s{
    font-weight: 600;
    color: #565751;
    font-size: clamp(0.75rem, 0.455rem + 1.3250000000000002vw, 1.3rem);
    margin: 0px;
}

.phonics_body img{
    width: 31%;
}

.phonics_body_s img{
    width: 47%;
}

.phonics_body{
    display: flex;
    justify-content: space-between;
    gap: 1.5em;
    flex-wrap: wrap;
}

.phonics_body_s{
    display: flex;
    justify-content: space-between;
    gap: 1em 0em;
    flex-wrap: wrap;
}

/* 사이트 워드 */

.middle_sight{
    padding: 4vmax 0em 0em 4vmax;
    background-color: rgb(224, 231, 249);
}

.middle_sight_2{
    padding: 0em 4vmax 4vmax 4vmax;
    background-color: rgb(224, 231, 249);
}

.sight_head{
    display: flex;
    padding-bottom: 7.5vmin;
    justify-content: space-between;
}

.sight_head_s{
    display: flex;
    margin-top: 5vmin;
    padding-bottom: 6vw;
    justify-content: space-between;
}

.sight_img{
    width: calc(31% - 1.2vw);   
}

.sight_img img{
    height: 200px;
}

.sight_guide{
    text-align: left;     
    margin-right: 1vw;
    width: calc(31.5% + 1.5vw) !important;
}

.sight_guide_s{
    text-align: left;
    color:rgb(126,126,126);
    font-size: clamp(0.8rem, 0.57rem + 1.1vw, 1.5rem);
    letter-spacing: -1px;
}

.sight_guide_title{
    color: rgb(23, 101, 251);
    font-size: clamp(1.3rem, 1.2rem + 0.5vw, 1.8rem);
    font-family: 'Sandoll Gyeokdonggulim'; 
    font-style: normal;
    font-weight: 400;
    word-break: keep-all;
    margin-bottom: 0.4em;
}

.sight_guide_title_s{
    color: rgb(23, 101, 251);
    font-size: clamp(1.1rem, 0.7500000000000001rem + 1.7499999999999998vw, 1.8rem);
    font-family: 'Sandoll Gyeokdonggulim'; 
    font-style: normal;
    font-weight: 400;
    word-break: keep-all;
}

.sight_guide_font{
    font-weight: 600;
    color: #565751;
    letter-spacing: -1px;
    font-size: clamp(0.8rem, 0.75rem + 0.25vw, 1.05rem);
}

.sight_guide_font_s{
    font-weight: 600;
    color: #565751;
    font-size: clamp(0.75rem, 0.455rem + 1.3250000000000002vw, 1.3rem);
    margin: 0px;
}

.sight_body img{
    width: 31%;
    height: 200px;
}

.sight_body_s img{
    width: 47%;
}

.sight_body{
    display: flex;
    justify-content: space-between;
    gap: 1.5em;
    flex-wrap: wrap;
}

.sight_body_s{
    display: flex;
    justify-content: space-between;
    gap: 1em 0em;
    flex-wrap: wrap;
}

/* 송 앤 챈트 */

.middle_songchant{
    padding: 4vmax;
    background-color: rgb(196, 210, 243);
}

.songchant_head{
    display: flex;
    margin-bottom: 4.5em;
    justify-content: space-between;
}

.songchant_head_s{
    display: flex;
    margin-top: 5vmin;
    margin-bottom: 9vmin;
    justify-content: space-between;
}

.songchant_img{
    width: 31%;
}

.songchant_img img, .songchant_body img{
    height: 200px;
}

.songchant_guide{
    text-align: left;
    margin-left: 2em;
    flex-grow: 2;
    align-self: flex-end;
}

.songchant_guide_s{
    text-align: left;
    color:rgb(126,126,126);
    font-size: clamp(0.8rem, 0.57rem + 1.1vw, 1.5rem);
    letter-spacing: -1px;
}

.songchant_guide_title{
    color: rgb(23, 101, 251);
    font-size: 1.8em;
    font-family: 'Sandoll Gyeokdonggulim'; 
    font-style: normal;
    font-weight: 400;
    word-break: keep-all;
}

.songchant_guide_title_s{
    color: rgb(23, 101, 251);
    font-size: clamp(1.1rem, 0.7500000000000001rem + 1.7499999999999998vw, 1.8rem);
    font-family: 'Sandoll Gyeokdonggulim'; 
    font-style: normal;
    font-weight: 400;
    word-break: keep-all;
}

.songchant_guide_font{
    font-weight: 600;
    color: #565751;
    margin-bottom: 2em;
}

.songchant_guide_font_s{
    font-weight: 600;
    color: #565751;
    font-size: clamp(0.75rem, 0.475rem + 1.3750000000000002vw, 1.3rem);
    margin: 0px;
}

.songchant_body img{
    width: 31%;
}

.songchant_body_s img{
    width: 47%;
}

.songchant_body{
    display: flex;
    justify-content: space-between;
    gap: 1.5em;
    flex-wrap: wrap;
}

.songchant_body_s{
    display: flex;
    justify-content: space-between;
    gap: 1em 0em;
    flex-wrap: wrap;
}

/* 게임 */

.middle_game{
    padding: 4vmax;
    background-color: rgb(224, 231, 249);
}

.game_head{
    display: flex;
    margin-bottom: 4.5em;
    justify-content: space-between;
}

.game_head_s{
    display: flex;
    margin-top: 5vmin;
    margin-bottom: 9vmin;
    justify-content: space-between;
}

.game_img{
    width: 31%;
}

.game_img img, .game_body img{
    height: 200px;
}

.game_guide{
    text-align: left;
    margin-left: 2em;
    flex-grow: 2;
    align-self: center;
}

.game_guide_s{
    text-align: left;
    color:rgb(126,126,126);
    font-size: clamp(0.8rem, 0.57rem + 1.1vw, 1.5rem);
    letter-spacing: -1px;
}

.game_guide_title{
    color: rgb(23, 101, 251);
    font-size: 1.8em;
    font-family: 'Sandoll Gyeokdonggulim'; 
    font-style: normal;
    font-weight: 400;
    word-break: keep-all;
}

.game_guide_title_s{
    color: rgb(23, 101, 251);
    font-size: clamp(1.1rem, 0.7500000000000001rem + 1.7499999999999998vw, 1.8rem);
    font-family: 'Sandoll Gyeokdonggulim'; 
    font-style: normal;
    font-weight: 400;
    word-break: keep-all;
}

.game_guide_font{
    font-weight: 600;
    color: #565751;
    margin-bottom: 2em;
}

.game_guide_font_s{
    font-weight: 600;
    color: #565751;
    font-size: clamp(0.75rem, 0.475rem + 1.3750000000000002vw, 1.3rem);
    margin: 0px;
}

.game_body img{
    width: 31%;
}

.game_body_s img{
    width: 47%;
}

.game_body{
    display: flex;
    justify-content: space-between;
    gap: 1.5em;
    flex-wrap: wrap;
}

.game_body::after{
    display: block;
    content: "";
    width: 31%;
}

.game_body_s{
    display: flex;
    justify-content: space-between;
    gap: 1em 0em;
    flex-wrap: wrap;
}

@media (max-width: 500px){
    .middle_img{
        position: relative;
        top: -10px;
    }

    .top_title_head_s{
        font-size: 5vw;
    }
}

/* 학교 */
.prek_sch{
    background-color: rgb(192, 201, 240);
    position:relative; 
    top:-30px;
    border-radius: 1.5em 1.5em 0em 0em;
    height:180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.prek_font_sch{
    font-size: clamp(0.9rem, 0.82rem + 0.4vw, 1.3rem);
    font-weight: 600;
    color:rgb(75, 99, 184);
    word-spacing: -1px;
    word-break: keep-all;
}

.middle_img_sch{
    max-width: calc(10em + 3vw);
    z-index: 2;
}

.middle_img_border_sch{
    z-index: 2;
    background-color: white;
    box-shadow: 0px 6px 5px rgb(230, 230, 230);
    margin-top: -5em;
    width: 85%;
    border-radius: 1.2em;
}

.middle_img_bg_sch{
    background-color: rgb(241, 242, 246);
    margin: 5% 9% 5% 5%;
}

.middle_img_prek_sch{
    z-index: 3;
    border-radius: 1.5em;
    position: relative;
    margin: 0 auto;
    padding: 4% 6% 4% 6%;
    width: 85%;
}

.middle_img_prek_sch::after{
    content: "";
    z-index: 4;
    width: 8%;
    height: 12.5%;
    border-radius: 50%;
    border: 0.15em solid rgba(233, 233, 233, 0.753);
    position: absolute;
    right: -19%;
    top: 45%;
}

.bottom_level_sch{
    padding: 4vmax;
    background-color: rgb(224, 231, 249);
}

.bottom_level_2_sch{
    padding: 4vmax;
    background-color: rgb(196, 209, 243);
}


.bottom_level_alp_sch{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 4em;
}

.bottom_level_alp_s_sch{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 4em;
}

.bottom_level_alp_title_sch{
    color: rgb(23, 101, 251);
    font-size: clamp(1rem, 0.84rem + 0.8vw, 1.8rem);
    font-family: 'Sandoll Gyeokdonggulim'; 
    font-style: normal;
    font-weight: 400;
    word-break: keep-all;
    text-align: left;
    margin-left: 1%;
}

.bottom_level_alp_title_s_sch{
    color: rgb(23, 101, 251);
    font-size: clamp(1rem, 0.9rem + 2vw, 1.9rem);
    font-family: 'Sandoll Gyeokdonggulim'; 
    font-style: normal;
    font-weight: 400;
    word-break: keep-all;
    text-align: left;
}


.bottom_level_alp_text_sch{    
    text-align: left;
    display: flex;
    align-items: center;
    font-weight: 600;
    color:rgb(126,126,126);
    margin-left: 3%;
    letter-spacing: -0.5px;
    font-size: clamp(0.7rem, 0.6299999999999999rem + 0.3500000000000001vw, 1.05rem);
}

.bottom_level_alp_text_s_sch{    
    text-align: left;
    display: flex;
    align-items: center;
    font-weight: 600;
    color:rgb(126,126,126);
    letter-spacing: -0.5px;
    font-size: clamp(0.8rem, 0.6rem + 1vw, 1.5rem);
    margin-bottom: 1.5em;
}

.bottom_level_alp_img_sch{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.bottom_level_alp_img_s_sch{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5em 0em;
}

.bottom_level_alp_img_sch img
{
    width: 31.5%;
}

.bottom_level_alp_img_s_sch img
{
    width: 48%;
}

.bottom_level_1_sch{
    padding: 4vmax;
    background-color: rgb(196, 209, 243);
}

.bottom_level_1_s_sch{
    padding: 4vmax;
    background-color: rgb(224, 231, 249);
}

.bottom_level_1_alp_img_sch{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1em 0em;
}

.bottom_level_1_alp_img_s_sch{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1em 0em;
}

.bottom_level_1_alp_img_sch img
{
    width: 32%;
}

.bottom_level_1_alp_img_s_sch img
{
    width: 48.5%;
}