/*******************************************************************************
                                    학교 순위
********************************************************************************/
.school-ranking * {
    box-sizing: border-box;
}
.school-ranking .area-pages-top.full-bg {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/school-ranking/school-ranking-bg-221013.jpg") no-repeat center center ;
    background-size: cover;
}
.school-ranking-section-width {
    width: 1080px;
    margin: 0 auto;
    padding: 4rem 0;
}

.uk-school-ranking-img1 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/school-ranking/school-ranking-img01-240823.png") no-repeat center center ;
    background-size: cover;
}
.uk-school-ranking-img2 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/school-ranking/school-ranking-img02-230922.jpg") no-repeat center center ;
    background-size: cover;
}
.usa-school-ranking-img1 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/school-ranking/school-ranking-img03-221013.jpg") no-repeat center center ;
    background-size: cover;
}
.usa-school-ranking-img2 {
    background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/school-ranking/school-ranking-img04-221013.jpg") no-repeat center center ;
    background-size: cover;
}
.school-ranking-section-top {
    background: #F8FAEC;
}
.school-ranking-section-top .school-ranking-section-width {
    padding: 4rem 0 3rem;
}
@media screen and (max-width: 1200px) {
    .school-ranking-section-width {
        width: 100%;
        padding: 4rem 1.5rem;
    }
    .school-ranking-section-top .school-ranking-section-width {
        padding: 4rem 1.5rem 3rem;
    }
}
/*******************************************************************************
                                    top
********************************************************************************/
.school-ranking-section-top-text-wrap {
    position: relative;
}
.school-ranking-section-top-text-box {
    width: calc(100% - 16.5rem - 1.5rem);
}
.school-ranking-section-top-text-title {
    font-size: 2rem;
    margin-bottom: 1.5rem;
}
.school-ranking-section-top-text {
    color: #666666;
    font-size: .8rem;
    margin-bottom: 1.2rem;
}
.school-ranking-section-top-text:last-child {
    margin-bottom: 0;
}
.school-ranking-section-top-text-imgBox {
    width: 16.5rem;
    height: 16.5rem;
    position: absolute;
    right: 0;
    top: 0;
}
.school-ranking-section-top-text-imgBox > strong {
    position: absolute;
    right: 0;
    bottom: 100%;
    background: #1EC95B;
    width: 3rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-border-radius: 3rem 3rem 0 0;
    -moz-border-radius: 3rem 3rem 0 0;
    border-radius: 3rem 3rem 0 0;
    color: #fff;
    font-size: 1.1rem;
}
.school-ranking-section-top-text-imgBox > span {
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-block;
    width: 100%;
    padding: .8rem;
    font-size: .9rem;
    color: #FFFFFF;
    background: rgba(0,0,0, 0.5);
    text-align: center;
    font-weight: 700;
}
.school-ranking-section-top-text-height0 {
    height: 0;
}
.school-ranking-section-top-text-height1 {
    height: 1.2rem;
    margin-bottom: 1.2rem;
}
.school-ranking-section-top-text-height2 {
    height: 2.4rem;
    margin-bottom: 1.2rem;
}
.school-ranking-section-top-text-height3 {
    height: 3.6rem;
    margin-bottom: 1.2rem;
}
.school-ranking-section-top-text-height1:last-child,
.school-ranking-section-top-text-height2:last-child,
.school-ranking-section-top-text-height3:last-child{
    margin-bottom: 0;
}
@media screen and (max-width: 1200px) {
    .school-ranking-section-top-text-box {
        width: 100%;
        margin-bottom:calc(1rem + 7.5vw);
    }
    .school-ranking-section-top-text-imgBox {
        position: relative;
        width: 100%;
        height: calc(10rem + 20vw);
    }
    .uk-school-ranking-img1 {
        background: url("https://s3.ap-northeast-2.amazonaws.com/img.edmuhak.com/uhak/r/v1/pages/school-ranking/school-ranking-img01-m-240823.png") no-repeat center center;
        background-size: cover;
    }
    .school-ranking-section-top-text-height0,
    .school-ranking-section-top-text-height1,
    .school-ranking-section-top-text-height2,
    .school-ranking-section-top-text-height3 {
        height: 0;
    }
    .school-ranking-section-top-text-title {
        font-size: calc(1rem + 2.5vw);
    }
    .school-ranking-section-top-text {
        font-size: calc(1rem + 0.3vw);
    }
    .school-ranking-section-top-text-imgBox > strong {
        width: calc(1rem + 7.5vw);
        height: calc(1rem + 7.5vw);
        font-size: calc(1rem + 1.5vw);
    }
    .school-ranking-section-top-text-imgBox > span {
        font-size: calc(1rem + 1.5vw);
    }
}
/*******************************************************************************
                                    bottom
********************************************************************************/
.school-ranking-section-bottom-title {
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
    font-weight: 400;
}
.school-ranking-section-bottom-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    margin-bottom: 1rem;
}
.school-ranking-section-bottom-table th,
.school-ranking-section-bottom-table td {
    padding: .7rem 1rem;
}
.school-ranking-section-bottom-table th {
    background: #F8F8F8;
    font-size: .9rem;
    color: #1EC95B;
    border-top: 1px solid #C5C5C5;
    border-bottom: 1px solid #C5C5C5;
}
.school-ranking-section-bottom-table  th > span {
    color: #333;
}
.school-ranking-section-bottom-table td {
    border-bottom: 1px solid #C5C5C5;
    border-right: 1px solid #C5C5C5;
    background: #EFF1F6;
    color: #333;
    font-size: .8rem;
}
.school-ranking-section-bottom-table td:nth-last-child(-n + 2) {
    background: #fff;
    color: #666666;
    text-align: left;
}
.school-ranking-section-bottom-table td:last-child {
    border-right: none;
}
.school-ranking-section-bottom-text {
    color: #666;
    font-size: .7rem;
}
.school-ranking-section-bottom-text a {
    display: inline-block;
    word-break: break-all;
}
.school-ranking-section-bottom-text::before {
    content: '*';
}
.school-ranking-section-bottom .video-wrap {
    margin-top: 4rem;
}
@media screen and (max-width: 1200px) {
    .school-ranking-section-bottom-title {
        font-size: calc(1rem + 2.5vw);
    }
    .school-ranking-section-bottom-table th,
    .school-ranking-section-bottom-table td {
        padding: 1rem .31rem;
    }
    .school-ranking-section-bottom-table th {
        font-size: 1rem;
    }
    .school-ranking-section-bottom-table td {
        font-size: 1rem;
    }
    .school-ranking-section-bottom-text {
        font-size: calc(1rem + 0.3vw);
    }
}
/*******************************************************************************
                                    link
********************************************************************************/
.school-ranking-section-link {
    text-align: center;
}
.school-ranking-section-link .school-ranking-section-width {
    padding-top: 0;
}
.school-ranking-section-link-title {
    font-size: 2rem;
    color: #333;
    margin-bottom: 1rem;
}
.school-ranking-section-link-text {
    text-align: left;
    color: #666;
    font-size: .8rem;
    margin-bottom: 3rem;
}
.school-ranking-section-anchor {
    text-align: center;
}
.school-ranking-section-link-btn {
    display: inline-block;
    padding: .6rem 5rem;
    color: #fff;
    font-size: .9rem;
    background: #1EC95B;
}
@media screen and (max-width: 1200px) {
    .school-ranking-section-link-title {
        font-size: calc(1rem + 2.5vw);
        text-align: left;
    }
    .school-ranking-section-link-text {
        font-size: calc(1rem + 0.3vw);
    }
    .school-ranking-section-link-btn {
        width: 100%;
        padding:1rem 0 ;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        font-size: calc(1rem + 1.5vw);
    }
}