/*공통*/

* {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: 3vmax;
    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;
}

.point_info{
    background-color: rgb(233, 98, 121);    
    padding: 0.5% 1% 0.5% 1%;
    margin: 0 auto;
    margin-top: 7vmin;
    margin-bottom: 7vmin;
    display: table;
}

.point_info_s{
    background-color: rgb(233, 98, 121);    
    padding: 0.5% 1% 0.5% 1%;
    margin: 0 auto;
    margin-top: 7vmin;
    margin-bottom: 7vmin;
    display: table;
    width: auto;
}

.point_info_text{
    color: white;
    font-size: clamp(0.9rem, 0.8200000000000001rem + 0.4vw, 1.3rem);
    display: table-cell;
    vertical-align: middle;
}

.point_info_text_s{
    color: white;
    font-size: clamp(0.9rem, 0.8200000000000001rem + 0.4vw, 1.3rem);
    display: table-cell;
    vertical-align: middle;
}

.point_info_text_s_sch{
    color: white;
    font-size: clamp(0.9rem, 1.8200000000000001rem + 0.4vw, 1.3rem);
    display: table-cell;
    vertical-align: middle;
}

.img_map{
    position: relative;
    margin: 0 auto;
    margin-right: 15%;
    width: 65%;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin-bottom: 5em;
}

.img_map_s{
    position: relative;
    margin: 0 auto;
    width: 75%;
    display: flex;
    justify-content: start;
    flex-wrap: wrap;
    margin-bottom: 5em;
    gap: 0em 0em;
}

.img_map img{
    width: 80%;
    height: 110px;
    margin-left: 30px;
}

.img_map_s img{
    width: 90%;
    min-height: 5em;
}

.img_map > div{    
    width: 30%;
    margin-bottom: 2em;
}

.img_map_s > div{    
    width: 50%;
    margin-bottom: 3vw;
}

.img_map_text{
    white-space: nowrap;
}

.img_map_text_s{
    white-space: nowrap;
    position: relative;
    margin-bottom: 2em;
    /* margin-right: 15%; */
}

.img_map_lv{
    background-color: rgb(246, 170, 0);
    border: 7px solid rgb(246, 170, 0);
    border-radius: 50%;
    color: white;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    width: 35px;
    position: relative;
    right: -15%;
    top: 0px;
}

.img_map_lv_s{
    background-color: rgb(246, 170, 0);
    border: 7px solid rgb(246, 170, 0);
    border-radius: 50%;
    color: white;
    font-weight: 600;
    text-align: center;
    font-size: 2.3vmin;
    display: inline-block;
    width: 35px;
    position: absolute;
    left: 20%;
    top: 0px;
}

.img_map_pts{
    background-color: rgb(234, 99, 121);
    border: 3px solid rgb(234, 99, 121);
    border-radius: 15px;
    color: white;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    width: calc(7em + 2vmax);
    height: 25px;
    padding-left: 23px;
    position: relative;
    z-index: -1;
    top: 0px;
    line-height: 18px;
}

.img_map_pts_s{
    background-color: rgb(234, 99, 121);
    border: 3px solid rgb(234, 99, 121);
    border-radius: 15px;
    color: white;
    font-weight: 600;
    text-align: center;
    display: inline-block;
    font-size: 2.3vmin;
    width: 70%;
    height: 25px;
    padding-left: 23px;
    padding-top:1%;
    padding-bottom:9%;
    position: absolute;
    z-index: -1;
    top: 5px;
    line-height: 2vmin;
    right: 10%;
}

.line_1{
    position: absolute;
    display: inline-block;
    border: 14px solid rgb(209, 230, 233);
    width: 60%;
    z-index: -1;
    top: 5%;
    left: 20%;
}

.line_1_s{
    position: absolute;
    display: inline-block;
    border: 14px solid rgb(209, 230, 233);
    width: 60%;
    z-index: -1;
    top: 3vw;
    left: 20%;
}

.line_2{
    position: absolute;
    display: inline-block;
    border: 28px solid rgb(209, 230, 233);
    border-left: 20px solid white;
    border-radius: 0px 150px 150px 0px;
    width: 100px;
    height: 170px;
    z-index: -1;
    top: 3%;
    right: 4%;
}

.line_2_s{
    position: absolute;
    display: inline-block;
    border: 28px solid rgb(209, 230, 233);
    border-left: 20px solid white;
    border-radius: 0px 150px 150px 0px;
    width: 100px;
    height: calc(7em + 1.4vw);
    z-index: -2;
    top: 3vw;
    right: -15%;
}

@media (min-width: 768px){
    .line_2_s{
        height: 11em !important;
    }

    .line_3_s{
        top: 14.5em !important;
    }

    .line_4_s{
        height: 10em !important;
        top: 31% !important;
    }

    .line_5_s{
        top: 26.5em !important
    }

    .line_7_s{
        top: 38.1em !important;
    }

    .line_6_s{
        height: 10em !important;
        top : 26em !important;
    }
}

@media (max-width: 500px){
    .img_map_s img{
        width: 90%;
        height: 50px;        
    }

    .img_map_lv_s{
        top: 3px;
        width: 20%;
    }

    .img_map_pts_s{
        line-height: 3.5vmin;
        width: 75%;
        right: 5%;
    }

    .line_2_s{
        height: 6em !important;
    }

    .line_3_s{
        top: 28% !important;
    }

    .line_4_s{
        height: 6em !important;
    }

    .line_5_s{
        top: 54% !important
    }

    .line_6_s{
        height: 6em !important;
        top : 54% !important;
    }

    .line_7_s{
        top: 79% !important;
    }

    
}

.line_3{
    position: absolute;
    display: inline-block;
    border: 14px solid rgb(209, 230, 233);
    width: 60%;
    z-index: -1;
    top: 38%;
    left: 20%;
}

.line_3_s{
    position: absolute;
    display: inline-block;
    border: 14px solid rgb(209, 230, 233);
    width: 60%;
    z-index: -1;
    top: 28%;
    left: 20%;
}

.line_4{
    position: absolute;
    display: inline-block;
    border: 28px solid rgb(209, 230, 233);
    border-right: 20px solid white;
    border-radius: 150px 0px 0px 150px;
    width: 100px;
    height: 150px;
    z-index: -2;
    top: 38%;
    left: -3%;
}

.line_4_s{
    position: absolute;
    display: inline-block;
    border: 28px solid rgb(209, 230, 233);
    border-right: 20px solid white;
    border-radius: 150px 0px 0px 150px;
    width: 100px;
    height: 120px;
    z-index: -2;
    top: 28%;
    left: -15%;
}

.line_5{
    position: absolute;
    display: inline-block;
    border: 14px solid rgb(209, 230, 233);
    width: 20%;
    z-index: -1;
    top: 70%;
    left: 20%;
}

.line_5_s{
    position: absolute;
    display: inline-block;
    border: 14px solid rgb(209, 230, 233);
    width: 50%;
    z-index: -1;
    top: 53%;
    left: 20%;
}

.line_6_s{
    position: absolute;
    display: inline-block;
    border: 28px solid rgb(209, 230, 233);
    border-left: 20px solid white;
    border-radius: 0px 150px 150px 0px;
    width: 30%;
    height: 20%;
    z-index: -2;
    top: 53%;
    right: -15%;
}

.line_7_s{
    position: absolute;
    display: inline-block;
    border: 14px solid rgb(209, 230, 233);
    width: 50%;
    z-index: -1;
    top: 78%;
    left: 20%;
}



.middle{
    margin-bottom: 5em;
}

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

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

.middle_img_level{
    z-index: 3;
    border-radius: 1.5em;
    position: relative;
    padding: 3%;
}

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

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

.point_text_font{
    font-size: clamp(0.9rem, 0.82rem + 0.4vw, 1.3rem);
    font-weight: 600;
    color:rgb(179, 123, 128);
    word-spacing: -1px;
    word-break: keep-all;
}

.point_text_font_s{
    font-size: clamp(0.7rem, 0.72rem + 0.4vw, 1.3rem);
    font-weight: 600;
    color:rgb(125, 71, 71);
    word-spacing: -1px;
    word-break: keep-all;
}

.level_master{
    background-color: rgb(241, 242, 247);
    margin: 0 auto;
    width: 85%;
    display: flex;
    justify-content: space-between;
    border-radius: 1.5em;
    padding : 5%;
    margin-bottom: 6em;
}

.level_master_s{
    background-color: rgb(241, 242, 247);
    margin: 0 auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    border-radius: 1.5em;
    padding : 10%;
    margin-bottom: 6em;
    flex-wrap: wrap;
    gap: 4vmin 0vw;
}

.level_master_group{
    width: 31.5%;
    background-color: white;
    padding: 2%;
    border-radius: 1.5em;
    box-shadow: 1px 1px 5px rgb(230, 230, 230), -1px 0px 5px rgb(230, 230, 230);
}

.level_master_group_s{
    width: 48%;
    background-color: white;
    padding: 3%;
    border-radius: 1.5em;
    box-shadow: 1px 1px 5px rgb(230, 230, 230), -1px 0px 5px rgb(230, 230, 230);
}

.level_master_bg{
    display: flex; 
    justify-content: center; 
    background-color: rgb(241, 242, 247);
    border-radius: 0.5em;
}

.level_master_img img{
    width: calc(6em + 1vw);
    padding: 10%
}

.level_master_img_s img{
    width: 15vmin;
    padding: 10%
}

.level_master p{
    text-align: left;
    margin-top: 0.5em;
    margin-bottom: 0;
    font-size: 0.9em;
}

.level_master_s p{
    text-align: left;
    margin-top: 0.5em;
    margin-bottom: 0;
    font-size: clamp(0.7rem, 0.6599999999999999rem + 0.2000000000000001vw, 0.9rem);
}

.level_master_title{
    font-weight: 700;
    font-size: 1.1em;
}

.level_master_title_s{
    font-weight: 700;
    font-size: 1em;
}

.level_master_text{
    font-size: 0.8em;
    color: rgba(136, 136, 136, 0.664);
    font-weight: 500;
}

.level_master_text_s{
    font-size: 0.8em;
    color: rgba(136, 136, 136, 0.664);
    font-weight: 500;
}

.level_master_print{
    font-size: 0.8em;
    color: rgba(50, 146, 255);
    font-weight: 500;
}

.level_master_print_s{
    font-size: 0.8em;
    color: rgba(50, 146, 255);
    font-weight: 500;
}

.middle_award{
    width: 70%;
    margin: 0 auto;
    margin-bottom: 5em;
}

.middle_award_s{
    width: 90%;
    margin: 0 auto;
    margin-bottom: 5em;
}

.readingunit{
    width: 60%;
    margin-left: 7%;
    margin-bottom: 5em;
}

.readingunit_s{
    width: 90%;
    margin-left: 7%;
    margin-bottom: 10%;
}

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

.readingunit_text_s{
    text-align: left;
    color: rgb(126, 126, 126);
    font-weight: 600;
    word-break: keep-all;
    word-spacing: -1px;
    font-size: clamp(0.8rem, 0.76rem + 0.8vw, 1.3rem);
}

.readingunit_list{
    background-color: rgb(241, 242, 247);
    display: flex;   
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 5%;
    width: 88%;
    margin: 0 auto;
    border-radius: 1.5em;
    gap: 1.5em 0em;
    margin-bottom: 6em;
}

.readingunit_list_s{
    background-color: rgb(241, 242, 247);
    display: flex;   
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 5%;
    width: 88%;
    margin: 0 auto;
    border-radius: 1.5em;
    gap: 0.5em 0em;
    margin-bottom: 6em;
}

.readingunit_list div{
    width: 32.5%;
}

.readingunit_list_s div{
    width: 49%;
}

.readingunit_list::after{
    display: block;
    content: "";
    width: 32.5%;
}

.readingunit_display{
    background-color: rgb(241, 242, 247);
    display: flex;   
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
    padding: 5%;
    width: 88%;
    margin: 0 auto;
    border-radius: 1.5em;
    gap: 1.5em 0em;
    margin-bottom: 4em;
}

.readingunit_display_s{
    background-color: rgb(241, 242, 247);
    display: flex;   
    justify-content: space-between;
    align-items: end;
    flex-wrap: wrap;
    padding: 10%;
    width: 88%;
    margin: 0 auto;
    border-radius: 1.5em;
    gap: 1.5em 0em;
    margin-bottom: 4em;
}

.readingunit_display1{
    width: 26%;
}

.readingunit_display1_s{
    width: 40%;
}

.readingunit_display2{
    width: 39%;
}

.readingunit_display2_s{
    width: 56%;
}

.readingunit_display3{
    width: 33%;
}

.readingunit_display3_s{
    width: 50%;
}


/* 학교 */
.lvup_table{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 80%;
    margin: 0 auto;
    margin-bottom: 7em;
}

.lvup_point{
    width: 9%;
    display: flex;
    flex-direction: column;
}

.lvup_point_s{
    width: 20%;
    display: flex;
    flex-direction: column;
}


.table_level{
    background-color: rgb(158, 147, 147);
    padding: 10%;
}

.table_level1{
    background-color: rgb(193, 179, 179);
    padding: 10%;
}

.table_level p, .table_level1 p{
    color: white;
    margin: 0;
    font-size: 1.1em;
    font-weight: 600;
}

.table_point p, .table_point1 p{
    margin: 0 auto;
    font-size: 1.1em;
    font-weight: 600;
}

.table_point{
    padding: 10%;
    color: rgb(158, 147, 147);
    font-weight: 600;
    line-height: 1em;
    word-break: keep-all;
    flex-grow: 1;
}

.table_point1{
    padding: 10%;
    color: rgb(158, 147, 147);
    font-weight: 600;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
}

.point_text_sch{
    background-color: rgb(241, 199, 199);
    position:relative; 
    top:-30px;
    border-radius: 1.5em 1.5em 0em 0em;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.point_text_sch_s{
    background-color: rgb(241, 199, 199);
    position:relative; 
    top:-30px;
    border-radius: 1.5em 1.5em 0em 0em;
    height: 40vmin;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.point_text_font_sch{
    font-size: clamp(0.9rem, 0.82rem + 0.4vw, 1.3rem);
    font-weight: 600;
    color:rgb(179, 123, 128);
    word-spacing: -1px;
    word-break: keep-all;
}

.point_text_font_s_sch{
    font-size: clamp(0.5rem, 0.62rem + 0.8vw, 2rem);
    font-weight: 600;
    color:rgb(125, 71, 71);
    word-spacing: -1px;
    word-break: keep-all;
    margin-top: 5vmin;
}

.point_info_sch{
    background-color: rgb(233, 98, 121);    
    padding: 0.5% 1% 0.5% 1%;
    margin: 0 auto;
    margin-top: 1vmin;
    margin-bottom: 7vmin;
    display: table;
}

.point_info_s_sch{
    background-color: rgb(233, 98, 121);    
    padding: 0.5% 1% 0.5% 1%;
    margin: 0 auto;
    margin-top: 1vmin;
    margin-bottom: 7vmin;
    display: table;
    width: auto !important;
}

.middle_center_sch{
    display: flex;
    justify-content: center;
    margin-top: -5vmin;
}

.middle_award_sch{
    width: 70%;
    margin: 0 auto;
    margin-bottom: 7em;
}

.middle_award_s_sch{
    width: 90%;
    margin: 0 auto;
    margin-bottom: 7em;
}

.readingunit_sch{
    width: 80%;
    margin: 0 auto;
    margin-bottom: 3em;
}

.readingunit_s_sch{
    width: 100% !important;
    margin-bottom: 5%;
}

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

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

@media (max-width:500px){
    .point_info_text_s_sch{
        font-size: 1em;
    }

    .table_level p, .table_level1 p {
        font-size: 0.8em;    
    }

    .table_point p, .table_point1 p {
        font-size: 0.8em !important;    
    }

    .point_text_font_s_sch{
        margin-top: 2.5em;
    }
}

@media (min-width:600px) and (max-width:990px){
    .point_text_sch_s{
        height: 14em;
    }
}