@charset "utf-8";

/* *************************************************************************************
*
* 인트로 메인
* 
* **************************************************************************************/
main .slide-btn img {filter: invert(70%) sepia(10%) saturate(709%) hue-rotate(175deg) brightness(94%) contrast(88%);}
main .slide-btn.prev img {transform: rotate(180deg);}
main .slide-btn.prev {left: 0;}
main .slide-btn.next {right: 0;}
.main_intro {
  background-image: url("/images/site/NGLMS/main/intro_bg.jpg");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.main_intro .content {padding-top:0;}
.main_intro .content:focus-visible {outline: 3px solid #ff0000;outline-offset: 2px;}

/*상단 banner*/
.banner-pop a {display: block; width: 100%; height: 100%; margin: 0 auto; text-align: center;}
.banner-pop a > img {max-width: 100%;}
.banner-pop .mobile {display: none;}

/*고등부,중등부 바로가기*/
.sc-shortcut {margin-top: 5rem;}
.sc-shortcut .shortcut-list {
	display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 3rem;
}
.sc-shortcut .shortcut-list > li {min-width: 0;}
.sc-shortcut .shortcut-list > li > a {
	display: block;
    width: 100%;
    height: 31rem;
    border-radius: var(--border-radius-base);
    overflow: hidden;
    box-shadow: -1.4px 1.4px 12px rgba(0, 0, 0, 0.14);
}
.sc-shortcut .shortcut-list .txt-box {
	height: 15.5rem;
    padding: 2.5rem;
    text-align: left;
    font-size: 3rem;
    font-weight: 700;
    color: #fff;}
.shortcut-list .txt-box .sub-txt {
	padding-top: 0.6rem;
    font-size: 2rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
}
.sc-shortcut .shortcut-list .img-box {
	display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    height: 15.5rem;
    overflow: visible;
}
.sc-shortcut .shortcut-list .img-box img {
	display: block;
    width: auto;
    max-width: none;
    height: 100%;
    margin: 0;
    object-fit: contain;
    object-position: right bottom;
    transform-origin: right bottom;
    transition: transform 0.4s ease;
}
.sc-shortcut .shortcut-list > li.card-high > a {
    background: linear-gradient(
        180deg,
        #203c93 0%,
        #a6daf8 100%
    );
}

.sc-shortcut .shortcut-list > li.card-middle > a {
    background: linear-gradient(
        180deg,
        #1b53bc 0%,
        #a2e0ee 100%
    );
}

.sc-shortcut .shortcut-list > li.card-life > a {
    background: linear-gradient(
        180deg,
        #168a98 0%,
        #8be8db 100%
    );
}

.sc-shortcut .shortcut-list > li.card-info > a {
    background: linear-gradient(
        180deg,
        #5b3e9b 0%,
        #ca96eb 100%
    );
}

/*강남인강과 함께하고 있어요*/
.sc-together {margin-top: 3rem; padding: 6rem 0;}
.sc-together .title {margin-bottom: 3.5rem; display: flex; align-items: center; flex-wrap: wrap;}
.sc-together .title h2 {margin-right: 3rem; font-size: 2.4rem; font-weight: 700; line-height: 1;}
.sc-together .title .color {color: #446ec0;}
.sc-together .title em {display: inline-block; margin-right: 1.5rem; padding: 0.6rem 1.5rem 0.3rem; color: #fff; background-color: #446ec0; border-radius: 3rem;}
.sc-together .title em > span {position: relative; display: inline-block;font-weight: 600;}
/*.sc-together .title em > span::before {content: ''; position: absolute; left: 0; top: 0.6rem; width: 0.6rem; height: 0.6rem; background-color: #446EC0; border-radius: 50%;}*/
.sc-together .title .tag {display: inline-block; padding: 0.8rem 1.2rem 0.6rem; background-color: #1E3B8B; color: #fff; border-radius: 0.5rem;}
.sc-together .title .tag > strong {font-size: 1.8rem; font-weight: 700;}

.sc-together .together-slide-group {position: relative; width: 100%; padding: 0 3.5rem;}
.sc-together .together-slide {width: 100%; height: 100%; padding: 0 0.2rem;}
.sc-together .together-slide .swiper-slide {display: flex; align-items: center; gap: 1rem; height: 4.5rem; padding: 1rem; font-weight: 600; border: 1px solid var(--border-gray-color); border-radius: 5px; background-color: #ffff; }
.sc-together .together-slide .swiper-slide span {display: inline-block; padding: 0.5rem 0.8rem 0.3rem; color: #446EC0; background-color: #DBEAFF; font-size: 1.5rem; font-weight: 500; text-align: center; border-radius: 3rem; line-height: 1;}
.sc-together .together-slide .swiper-slide p {line-height: 1;}
.sc-together .together-slide .swiper-slide:not(:has(span)) {justify-content: center;}
.sc-together .slide_controls .slide_arrow {position:absolute; top:50%; transform:translateY(-50%); width:3.5rem; height:3.5rem; border:1px solid var(--border-gray-color); background-color:#fff; border-radius:50%; z-index: 1; box-shadow: 0 0 18px rgba(0, 0, 0, 0.15);}
.sc-together .slide_controls .slide_arrow.prev {left: -1rem;}
.sc-together .slide_controls .slide_arrow.next {right: -1rem; transform:translateY(-50%) rotate(180deg);}


/*Only PC*/
@media all and (min-width:1200px){
    /* 전체 영역의 크기는 그대로 유지 */
    .sc-shortcut .shortcut-list {
        transition: grid-template-columns 0.35s ease;
    }


    /* 카드 기본 애니메이션 */
    .sc-shortcut .shortcut-list > li {
        min-width: 0;
        transition: transform 0.35s ease;
    }

    .sc-shortcut .shortcut-list > li > a {
        transition: box-shadow 0.35s ease;
    }


    /* =====================================================
       ① 고등부 hover
       고등부가 넓어지고 나머지는 좁아짐
       ===================================================== */

    .sc-shortcut .shortcut-list:has(> li:nth-child(1):hover) {
        grid-template-columns: 2.2fr 0.7fr 0.7fr 0.7fr;
    }


    /* =====================================================
       ② 중등부 hover
       ===================================================== */

    .sc-shortcut .shortcut-list:has(> li:nth-child(2):hover) {
        grid-template-columns: 0.7fr 2.2fr 0.7fr 0.7fr;
    }


    /* =====================================================
       ③ 평생학습 hover
       ===================================================== */

    .sc-shortcut .shortcut-list:has(> li:nth-child(3):hover) {
        grid-template-columns: 0.7fr 0.7fr 2.2fr 0.7fr;
    }


    /* =====================================================
       ④ 입시설명회 hover
       ===================================================== */

    .sc-shortcut .shortcut-list:has(> li:nth-child(4):hover) {
        grid-template-columns: 0.7fr 0.7fr 0.7fr 2.2fr;
    }


    /* -------------------------
       카드가 위로 뜸
       ------------------------- */

    .sc-shortcut .shortcut-list > li:hover {
        transform: translateY(-10px);
    }


    /* -------------------------
       hover 카드 그림자 강화
       ------------------------- */

    .sc-shortcut .shortcut-list > li:hover > a {
        box-shadow: -1.4px 5px 18px rgba(0, 0, 0, 0.25);
    }


    /* =====================================================
       이미지 확대
       ===================================================== */

    .sc-shortcut .shortcut-list > li:hover .img-box img {
        transform: scale(1.23);
    }


    /* -------------------------
       카드 위치에 따른 이미지 확대 기준점
       ------------------------- */

    /* 왼쪽 끝 카드 */
    .sc-shortcut .shortcut-list > li:nth-child(1) .img-box img {
        transform-origin: right bottom;
    }

    /* 가운데 카드 */
    .sc-shortcut .shortcut-list > li:nth-child(2) .img-box img,
    .sc-shortcut .shortcut-list > li:nth-child(3) .img-box img {
        transform-origin: center bottom;
    }

    /* 오른쪽 끝 카드 */
    .sc-shortcut .shortcut-list > li:nth-child(4) .img-box img {
        transform-origin: left bottom;
    }

}

/* *************************************************************************************
*
* 모바일 인트로
* 
* **************************************************************************************/
@media all and (max-width:1200px){
	.sc-shortcut .shortcut-list .img-box {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .sc-shortcut .shortcut-list .img-box > img {
        width: auto;
        max-width: none;
        height: 100%;
    }
    .sc-shortcut .shortcut-list > li a:hover {
    transform: translateY(-10px); transition: .3s; box-shadow: -1.4px 1.4px 12px rgba(0, 0, 0, 0.35)
    }
}

@media all and (max-width:1024px){
    .sc-shortcut .shortcut-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }

    .sc-shortcut .shortcut-list > li {
        width: auto;
    }

    .sc-shortcut .shortcut-list .img-box {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .sc-shortcut .shortcut-list .img-box > img {
        width: auto;
        max-width: none;
        height: 100%;
    }
}

@media all and (max-width:780px){
    .banner-pop .pc {
        display: none;
    }

    .banner-pop .mobile {
        display: block;
    }

    .sc-shortcut .shortcut-list .img-box {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .sc-shortcut .shortcut-list .img-box > img {
        width: auto;
        max-width: none;
        height: 100%;
    }

    .sc-together {
        margin-top: 2rem;
    }

    .sc-together .together-slide .swiper-slide {
        gap: 0.5rem;
    }

    .sc-together .together-slide .swiper-slide span {
        font-size: 1.4rem;
    }

    .sc-together .slide-btn.prev {
        left: -15px;
    }

    .sc-together .slide-btn.next {
        right: -15px;
    }

    .sc-together .slide-btn > img {
        width: 13px;
    }
}

@media all and (max-width:480px){ 
	.sc-shortcut {
        margin-top: 2rem;
    }

    .sc-shortcut .shortcut-list .img-box {
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
    }

    .sc-shortcut .shortcut-list .img-box > img {
        width: auto;
        max-width: none;
        height: 100%;
    }

    .sc-together .title .tag {
        display: none;
    }

    .sc-together .title h2 {
        margin-right: 1.5rem;
        font-size: 1.9rem;
    }
}

/* *************************************************************************************
*
* 중등부, 고등부, 평생학습 메인 공통
* 
* **************************************************************************************/
.sc_title {margin-bottom:2rem; font-size:2.6rem; font-weight:600;}
main .content {padding-bottom: 0;}
main .board-more-btn {position: absolute; right: 0; top: 0; width: 30px; height: 30px; padding: 8px 0; border: 1px solid #28426f; border-radius: 50%; background-color:#28426f; color: #fff; text-align: center;}

/*슬라이드 공통*/
.swiper-slide a:focus-visible {border:2px dashed #0e0852;}
.slide_controls .slide_arrow {position:relative; width:3rem; height:3rem; background-image:url("/images/site/NGLMS/icon/slide_arr.svg"); background-size: 1rem; background-position: center; background-repeat: no-repeat;}
.slide_controls .slide_arrow.next {transform: rotate(180deg);}
.slide_controls .slide_btn {width:3rem; height:3rem; background-position: center; background-repeat: no-repeat;}
.slide_controls .slide_btn.pause {background-image:url("/images/site/NGLMS/icon/slide_pause.svg");} 
.slide_controls .slide_btn.play {display:none; background-image:url("/images/site/NGLMS/icon/slide_play.svg"); background-position: left 1rem center;}
.slide_controls .play_control {display: flex; align-items: center;}
.slide_controls .play_control .pause_icon {display:inline-block; width:2px; height:13px; background-color:#333;}
.slide_controls .play_control .pause_icon + .pause_icon {margin-left:2px;}
.slide_controls .swiper-button-disabled {background-image:url("/images/site/NGLMS/icon/slide_arr_gray.svg");}
/* 20260710 */
.slide_controls button.slide_arrow:not(.swiper-button-disabled):hover,
.slide_controls button.slide_arrow:not(.swiper-button-disabled):focus {outline: 3px solid;outline-offset: 2px;}
/* //20260710 */
.slide_controls .slide_arrow:focus-visible {
    outline: 2px dashed red !important;
    outline-offset: 3px;
}
.slide_controls .slide_btn:focus-visible {
    outline: 2px dashed red !important;
    outline-offset: 3px;
}

/* *************************************************************************************
*
* 중등부, 고등부 메인
* 
* **************************************************************************************/

/*메인 슬라이드*/
.sc_visual {padding:0 0 3.5rem;}
.sc_visual article {border-radius:var(--border-radius-20px); overflow:hidden;}
.sc_visual .swiper-slide > a {position:relative; display:block; width:100%; height:0; padding-top:31.625%; background-color:#f7f7f7;}
.sc_visual .swiper-slide > a > img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; transition: .3s;}
.sc_visual .slide_controls {display:flex; align-items:center; justify-content: space-between; position:absolute; left:0; bottom:0; width:25rem; height:4rem; padding:1rem 1.5rem; background-color:rgba(0, 0, 0, 0.5); color:#fff; border-radius: 0 var(--border-radius-20px) 0 0; z-index:1;}
.sc_visual .slide_arrow {background-image: url("/images/site/NGLMS/icon/slide_arr_w.svg");}
.sc_visual .slide_btn.pause {background-image:url("/images/site/NGLMS/icon/slide_pause_w.svg");} 
.sc_visual .slide_btn.play {display:none; background-image:url("/images/site/NGLMS/icon/slide_play_w.svg");}
.sc_visual .slide_page {width:10rem; display:flex; align-items:center; justify-content: space-between;}
.sc_visual .swiper-pagination {width:100%; display: flex; justify-content: space-between; position: initial; text-align: left; font-size:0;}
.sc_visual .swiper-pagination span {font-size:1.8rem; font-weight:700;}
.sc_visual .guage {position:absolute; left:4rem; top:50%; transform:translateY(-50%); width:5rem; height:2px; background: rgba(255, 255, 255, 0.2); overflow: hidden;}
.sc_visual .guage .bar {display:block; width:0; height:100%; background-color:#fff;}
.sc_visual .autoplay-progress {position:absolute; left:4rem; top:50%; transform:translateY(-50%); width:5rem; height:2px; background: rgba(255, 255, 255, 0.2); overflow: hidden;}
.sc_visual .autoplay-progress svg {--progress: 0; position:absolute; left:0; top:0; width: 100%; height: 2px;}
.sc_visual .autoplay-progress rect {width: 100%; height: 100%; fill: #fff; transform-origin: left; transform: scaleX(var(--progress));}
.sc_visual .slide_controls button:focus-visible {outline-color:#fff;}
.sc_visual .slide_controls .slide_btn.play::after {border-left-color:#fff;}
.sc_visual .btn_control {width:8rem; display:flex; align-items: center; justify-content: space-between; gap:0.5rem;}

/*강남인강 탑5*/
.sc_visual .ranking_area {width:calc(40.17% - 2.5rem); margin-left:2.5rem; padding:2rem; background-color: #fff; border:1px solid var(--border-gray-color);}
.sc_visual .ranking_area h2 {margin-bottom:2rem; text-align:center;}
.sc_visual .ranking_area h2 span {color:#0557b4; font-weight:700;}
.sc_visual .ranking_list {height: calc(100% - 55px); display:flex; flex-direction: column; justify-content: space-between;}
.sc_visual .ranking_list > li {position: relative; counter-increment: number;}
.sc_visual .ranking_list > li::before {content:counter(number); position:absolute; left:0; top:-2px; display:block; color:#333; font-size: 2rem;}
.sc_visual .ranking_list > li > a {display:flex; padding-left:2.5rem; align-items: center;} 
.sc_visual .ranking_list .subjects {display:inline-block; padding:0.4rem 1rem; font-size:1.4rem; line-height:1;  border-radius: var(--border-radius-20px); background-color: #ddd;}
.sc_visual .ranking_list .subjects.english {background-color:#d0f5ff;}
.sc_visual .ranking_list .subjects.math {background-color:#ccf8ed;}
.sc_visual .ranking_list .subjects.korean {background-color:#dce6ff;}
.sc_visual .ranking_list .subjects.social {background-color:#f5ec94;}
.sc_visual .ranking_list .subjects.science {background-color:#c0f0a2;}
.sc_visual .ranking_list p {width:calc(100% - 16rem); margin:0 0.8rem;}
.main_middle .sc_visual .ranking_list p {width:calc(100% - 14rem);}
.sc_visual .ranking_list .teacher {margin-left:auto; color:var(--font-gray); font-size:1.4rem;}

/*추천강좌*/
.sc_recommend {position: relative;}
.sc_recommend::before {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(to right, #3c4457 50%, #216b9c 50%); content: '';}
.sc_recommend .inner {display:flex; align-items: center; height: 10rem;}
.sc_recommend .sc_title {position: relative; display: flex; align-items: center; width:34rem; height: 100%; padding: 0 0 0 17rem; margin-bottom:0; font-size: 2.2rem; color: #fff; font-weight: bold; background-color: #3c4457; background-image:url("/images/site/NGLMS/main/rec_img.png"); background-position: left bottom -1rem; background-repeat: no-repeat;}
.sc_recommend .slide_group {position: relative; display:flex; align-items: center; width:calc(100% - 34rem); height: 100%; background-color: #216b9c; gap: 2rem;}
.sc_recommend .swiper-slide > a {position: relative; display:flex; width:100%; height:100%; padding: 0 3rem; align-items: center; font-size: 1.7rem; color: #fff;}
.sc_recommend .swiper-slide:nth-child(odd) > a::before {position: absolute; right: 0; top: 0; width: 1px; height: 100%; background-color: #fff; opacity: 0.3; content: '';}
.sc_recommend .swiper-slide .teacher {color: #a6d3f1;}
.sc_recommend .date_box {position: relative; width:65px; height:65px; background-color:#fff; border-radius:50%; text-align:center; align-content: center;}
.sc_recommend .date_box span {display:block; font-size:1.5rem;}
.sc_recommend .date_box .today {position:absolute; left:-35px; top:2px; padding:3px 8px; font-size:12px; color:#fff; line-height:1; background-color:var(--bg-danger); border-radius: var(--border-radius-20px);}
.sc_recommend .today .date_box {border:2px solid var(--primary-color);}
.sc_recommend .subject_box {width: 100%;}
.sc_recommend .subject_box > p {font-size:1.7rem;}
.sc_recommend .teacher {color:#555; font-size:1.5rem;}
.sc_recommend .slide_controls {display:flex; gap: 0.5rem;}
.sc_recommend .slide_arrow {background-image: url("/images/site/NGLMS/icon/slide_arr_w.svg");}
.sc_recommend .slide_btn.pause {background-image:url("/images/site/NGLMS/icon/slide_pause_w.svg");}
.sc_recommend .slide_btn.play {display:none; background-image:url("/images/site/NGLMS/icon/slide_play_w.svg");}

/*공지사항*/
.sc_notice {margin-top: 6rem; margin-bottom: 6rem;}
.sc_notice .inner {display: flex;}
.sc_notice .notice_area {position: relative; width: calc(100% - 52.5rem); margin-right: 5rem;}
.sc_notice .board_notice {padding: 2rem 2rem 0; border: 1px solid var(--border-gray-color); border-radius: 2rem;}
.sc_notice .board_notice > li + li {border-top: 1px dotted var(--border-gray-color);}
.sc_notice .board_notice > li > a {display: flex; width: 100%; height: 100%; padding: 1.6rem 0 1.2rem 1rem; align-items: center;}
.sc_notice .board_notice > li > a:hover * {text-decoration: none;}
.sc_notice .board_notice > li:first-child > a {padding: 0 0 1.5rem 0;}
.sc_notice .board_notice > li:first-child .date_box {display: flex; flex-direction: column; justify-content: center; width: 8rem; height: 8rem; margin-right: 2.5rem; color: #3278c3; border: 1px solid #3278c3; border-radius: var(--border-radius-base); text-align: center;}
.sc_notice .board_notice > li:first-child .date_box span {font-size: 1.4rem;}
.sc_notice .board_notice > li:first-child .date_box .day {font-size: 3.2rem; font-weight: 500;}
.sc_notice .board_notice > li:first-child .info_box {width: calc(100% - 12.5rem);}
.sc_notice .board_notice > li:first-child .notice_tit {font-size: 2rem; font-weight: 500;}
.sc_notice .board_notice .label_tag {margin-bottom: 0.5rem;}
.sc_notice .board_notice .new {display: inline-block; height: 2.4rem; padding: 0.4rem 1rem; font-size:1.4rem; border-radius: var(--border-radius-20px); color: #fff; background-color: var(--bg-danger); border-color: var(--bg-danger); line-height:1;}
.sc_notice .board_notice .info_box {width: calc(100% - 11rem);}
.sc_notice .board_notice .notice_tit {position: relative; display: inline-block; width: auto; max-width: 100%; font-size: 1.7rem;}
.sc_notice .board_notice .notice_desc {display: inline-block; margin-top: 1rem; color: var(--font-gray);}
.sc_notice .board_notice .date {margin-left: auto;}

/*이벤트 배너*/
.sc_notice .event_area {position: relative; width:47.5rem;}
.sc_notice .event_slide {border-radius: var(--border-radius-20px);}
.sc_notice .event_area .swiper-slide > a {position:relative; display:block; height:0; width:100%; padding-top:48.424%; overflow: hidden;}
.sc_notice .event_area .swiper-slide > a > img {position:absolute; left:0; top:0; width:100%; height:100%; object-fit:cover; transition: .3s;}
.sc_notice .event_area .slide_controls {position: absolute; top: 0; right: 4rem; display: flex; gap: 0.6rem;}

/*맞춤 검색*/
.sc_custom_search {margin-top: 5rem; margin-bottom: 3.5rem;}
.sc_custom_search .sc_title > strong {color:#295092;}
.sc_custom_search .custom_group {display:flex; padding:2rem; border-radius: var(--border-radius-20px); justify-content: center; background-color: #f4f5f9;}
.sc_custom_search .custom_inner {display:flex; gap:2rem; justify-content: center;}
.sc_custom_search dl {display:flex; align-items:center;}
.sc_custom_search dt {margin-right:1.5rem; font-size:2rem; font-weight:600;}
.sc_custom_search select {width:13rem; height:3rem; padding:0 2rem; color:#000; background-color: transparent; border-bottom: 2px solid #000; line-height: 1;}
.sc_custom_search button {width:10rem; height:3.5rem; margin-left: 2rem; color:#fff; background-color: #333; line-height:1; font-size:2rem; border-radius: 3rem;}

/*강의 슬라이드*/
.sc_edu .slide_controls .slide_arrow {position:absolute; top:50%;}
.sc_edu .edu_slide {padding: 0.2rem;}
.sc_edu .swiper-slide {border-radius: 1rem; overflow:hidden; box-sizing: border-box;}
.sc_edu .swiper-slide > a {display:block; width:100%; height:100%;}
.sc_edu .thumb {position: relative; height: 20rem; padding: 2.5rem; background-color: #f5f3ff; /*background: linear-gradient(to bottom, #BBE5F7 15%, #d9e2e5);*/}
.sc_edu .subject {margin-bottom: 1rem;}
.sc_edu .tag {display: inline-block; height: 2.4rem; line-height: 2.4rem; padding: 0 1.5rem; background-color: #4235a7; color: #fff; border-radius: var(--border-radius-20px); font-size: 1.5rem; font-weight: 500;}
.sc_edu .teacher {position: relative; display: inline-block; margin-bottom: 1rem; padding-bottom: 1rem; font-size: 2.6rem; font-weight: 500; color: #333;}
.sc_edu .teacher::before {position: absolute; left: 0; bottom: 0; width: 4rem; height: 2px; background-color: #4235a7; content: ''; transition: .3s;}
.sc_edu .teacher b {display: inline-block; margin-right: 0.5rem; font-weight: 800;}
.sc_edu .title {display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;}
.sc_edu .title > p {width: calc(100% - 10rem); font-size:1.8rem; line-height:1.4; font-weight: 500; z-index: 1;}
.sc_edu .thumb > img {position: absolute; right: -2rem; bottom: 0; width: 16rem;}

/*한눈에 보기*/
.sc_view {margin: 3rem 0;}
.sc_view .box {display: flex; align-items: center; padding: 0.5rem 0.5rem 0.5rem 2rem; border-radius: 2rem; flex-wrap: wrap;}
.sc_view .sc_title {width: 24rem; margin-bottom: 0; padding: 1.5rem; padding-left: 7rem; font-size: 2.2rem; color: #fff; background-position: left center; background-repeat: no-repeat;}
.sc_view .grade_list {display: flex; justify-content: center; gap: 1rem; width: calc(100% - 24rem); padding: 2rem; background-color: #fff; border-radius: 0 2rem 2rem 2rem; flex-wrap: wrap;}
.sc_view .grade_list > li {max-width: 21rem; flex-grow: 1; border-radius: 0.5rem; border: 1px solid;}
.sc_view .grade_list > li > a {display: block; width: 100%; height: 100%; text-align: center;}
.sc_view .high {background-color: #628bc3;}
.sc_view .high .sc_title {padding-left: 8rem; background-image: url("/images/site/NGLMS/main/grade_high.png");}
.sc_view .high .grade_list > li {border-color: #628bc3;}
.sc_view .middle {background-color: #6366de;}
.sc_view .middle .sc_title {background-image: url("/images/site/NGLMS/main/grade_middle.png");}
.sc_view .middle .grade_list > li {border-color: #6366de;}
.sc_view .learn {background-color: #5971b5;}
.sc_view .learn .sc_title {padding-left: 8rem; background-image: url("/images/site/NGLMS/main/grade_learn.png");}
.sc_view .learn .grade_list > li {border-color: #5971b5;}

/*교재 슬라이드*/
.sc_study_book .swiper-slide > a {display: block; width: 100%; height: 100%;}
.sc_study_book .thumb {position:relative; width:100%; height:0; padding-top:132.68%; border:1px solid var(--border-gray-color);}
.sc_study_book .thumb > img {position:absolute; left:0; top:0; width:100%; height:100%;}
.sc_study_book .title {display: flex; align-items: center; justify-content: center; height:6rem; padding:0.6rem; text-align:center; word-break: keep-all; border:1px solid var(--border-gray-color); border-top: 0;}
.sc_study_book .title span {display: block; width:100%; max-height:4.5rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size:1.7rem; }
.sc_study_book .title p {margin-top: 1rem;}
.sc_study_book .slide_controls .slide_arrow {position:absolute; top: calc(50% - 5rem);}
.sc_study_book .board_back_btn .btn img {vertical-align: middle; margin-left: 0.5rem; margin-bottom: 0.2rem;}

/*강의, 교재 공통*/
.sc_edu .slide_group, .sc_study_book .slide_group {position:relative;}
.sc_edu .slide_controls .slide_arrow, .sc_study_book .slide_controls .slide_arrow {width:4rem; height:4rem; border:1px solid var(--border-gray-color); background-color:#fff; border-radius:50%; z-index: 1;}
.sc_edu .slide_controls .slide_arrow.prev, .sc_study_book .slide_controls .slide_arrow.prev {left:-1rem; transform:translateY(-50%);}
.sc_edu .slide_controls .slide_arrow.next, .sc_study_book .slide_controls .slide_arrow.next {right:-1rem; transform: translateY(-50%) rotate(180deg);}
.sc_edu .slide_controls .swiper-button-lock, .sc_study_book .slide_controls .swiper-button-lock {display: none;}

/*베스트 수강후기*/
.sc_review {padding: 5rem 0; background-color: #f4f5f9;}
.sc_review .inner {position: relative;}
.sc_review .swiper-slide {position: relative; padding: 3rem 1rem 1.5rem;}
.sc_review .swiper-slide::before {position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 5.8rem; height: 5.8rem; background-image: url("/images/site/NGLMS/main/thumb_up.png"); background-size: 5.8rem; background-repeat: no-repeat; content: '';}
.sc_review .swiper-slide > a {display: block; width: 100%; height: 100%; padding: 4rem 2rem 3rem; background-color: #fff; border-radius: 2rem; color: #151b28; text-align: center; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);}
.sc_review .swiper-slide > a > img {margin-bottom: 1.5rem;}
.sc_review .swiper-slide .tit {height: 4.5rem; margin-bottom: 1rem; text-align: center; font-size: 1.9rem; font-weight: bold; word-break: keep-all;}
.sc_review .swiper-slide .desc {height:6.5rem; font-size: 1.7rem; text-align: left;}
.sc_review .slide_controls {position: absolute; right: 15px; top: 0; display: flex; align-items: center; gap: 0.5rem;}

/* *************************************************************************************
*
* 중등부, 고등부 모바일 시작
* 
* **************************************************************************************/

/*Only PC*/
@media all and (min-width:1280px){
    main .board-more-btn:hover > img {transform: rotate(90deg); transition: transform .5s;}
	.sc_visual .swiper-slide > a:hover img, .sc_notice .event_area .swiper-slide > a:hover img {transform: scale(1.1); transition: .5s;}
    .sc_visual .ranking_list > li > a:hover > p {color:#0557b4; font-weight:500; transition: .3s;}
    .sc_notice .board_notice .notice_tit::before {display: block; position: absolute; bottom: 0; left: 0; width: calc(100% + 5px); height: 10px; background-color: #e3e4e6; transform: scaleX(0); transform-origin: right center; content: ''; transition-property: transform; transition-duration: 0.8s; transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1); z-index:-1;}
	.sc_notice .board_notice > li > a:hover .notice_tit::before {transform: scaleX(1); transform-origin: left center;}
	.sc_edu .swiper-slide > a:hover .teacher::before {width: 100%; transition: .3s;}
	.sc_edu .slide_controls .slide_arrow.prev, .sc_study_book .slide_controls .slide_arrow.prev {left: -5rem;}
	.sc_edu .slide_controls .slide_arrow.next, .sc_study_book .slide_controls .slide_arrow.next {right: -5rem;}
	.sc_review .swiper-slide > a:hover {background-color: #fff7d5; transition: .3s;}
}

@media all and (max-width:1024px){
	.sc_visual .ranking_area {width:calc(40% - 1.5rem); margin-left: 1.5rem;}
	
	/*추천 강좌*/
	.sc_recommend .inner {height: 8rem;}
	.sc_recommend .sc_title {width: 25rem; padding: 0 2rem 0 12rem; font-size:1.8rem; background-size: 10rem; background-position: left center;}
	.sc_recommend .slide_group {width:calc(100% - 25rem);}
	.sc_recommend .swiper-slide > a {padding: 0 2rem;}
	
	/*공지사항*/
	.sc_notice .board_notice > li:first-child > a {padding:0 0 1.5rem;}
	.sc_notice .board_notice > li:first-child .date_box {width:8rem; height:8rem; margin-right:1rem;}
	.sc_notice .board_notice > li:first-child .date_box .day {font-size:3rem;}
	.sc_notice .board_notice > li:first-child .info_box {width:calc(100% - 9rem);} 
	.sc_notice .board_notice .notice_desc {margin-top:0.5rem;}
	
	/*맞춤 검색*/
	.sc_custom_search dt label {font-size:0;}
	.sc_custom_search dt label > span {font-size:1.8rem;}

    /*강의 슬라이드*/
	.sc_edu .thumb {height: 16rem; padding: 1.5rem;}
	.sc_edu .teacher {font-size: 2rem;}
    .sc_edu .subject {margin-bottom: 1rem;}
    .sc_edu .title > p {width: calc(100% - 5rem); font-size: 1.6rem;}
    .sc_edu .thumb > img {width: 14rem;}
    .sc_edu .date {padding: 1rem 1.5rem;}

	/*한눈에보기*/
	.sc_view .sc_title {width: 18rem; padding-left: 5.5rem; font-size: 2rem;}
	.sc_view .high .sc_title {padding-left: 7rem; background-size: 5rem;}
	.sc_view .grade_list {width: calc(100% - 18rem);}
}

@media all and (max-width:780px){
    main .content {padding-top: 0;}

	/*메인비주얼*/
	.sc_visual {padding:0; background-color:var(--bg-gray);}
	.sc_visual .inner {padding:0; flex-wrap:wrap;}
	.sc_visual .visual_area {width:100%; margin-bottom:20px; border-radius:0;}
	.sc_visual .ranking_area {width:calc(100% - 30px); margin: 0 auto;}
	.sc_visual .ranking_list > li + li {margin-top:20px;}
	
	/*추천강좌*/
	.sc_recommend .sc_title {width: 13rem; padding: 0; font-size: 1.7rem; background-image: none;}
	.sc_recommend .slide_group {width: calc(100% - 13rem);}
	.sc_recommend .swiper-slide > a {padding: 0 1.5rem;}
	.sc_recommend .swiper-slide > a::before {position: absolute; right: 0; top: 0; width: 1px; height: 100%; background-color: #fff; opacity: 0.3; content: '';}

	/*강의 & 교재 슬라이드*/
	.sc_edu .slide_controls, .sc_study_book .slide_controls {display: none;}

	/*공지사항*/
	.sc_notice .inner {flex-wrap:wrap;}
	.sc_notice .notice_area {width:100%; margin-right:0; margin-bottom:4rem;}
	.sc_notice .event_area {width:100%;}
	
	/*맞춤 검색*/
	.sc_custom_search dt {display:none;}
	.sc_custom_search select {width:11rem;}

	.sc_view .box {padding: 0; background-color: transparent; border: 0;}
	.sc_view .sc_title {width: 100%; margin-bottom: 2rem; padding: 0 !important; font-size: 2.6rem; background-image: none !important; color: inherit;}
	.sc_view .sc_title br {display: none;}
	.sc_view .grade_list {width: 100%; padding: 1.2rem; border-radius: 1rem;}
	.sc_view .grade_list > li {max-width: none; min-width: 12rem; background-color: #fff;}
	.sc_view .high .grade_list {background-color: #628bc3;}
	.sc_view .middle .grade_list {background-color: #6366de;}
}

@media all and (max-width:480px){ 
	/*맞춤 검색*/
	.sc_custom_search {margin-top: 3.5rem;}
	.sc_custom_search .custom_group {flex-direction: column; align-items: center;}
	.sc_custom_search .custom_inner {width:100%; gap:10px;}
	.sc_custom_search dl {width:calc(100% / 3 - 6.666px);}
	.sc_custom_search dd {width:100%;}
	.sc_custom_search select {width:100%; padding: 0 1.2rem;}
	.sc_custom_search button {margin-top:2rem; margin-left:0; font-size:1.6rem;}
	
	/*추천강좌*/
	.sc_recommend .swiper-slide > a::before {content: none !important;}
	.sc_recommend .slide_controls {display: none;}

	/*공지사항*/
	.sc_notice .board_notice > li:first-child .date_box {width: 6.5rem; height: 6.5rem;}
	.sc_notice .board_notice > li:first-child .info_box {width: calc(100% - 7.5rem);}

	/*강의 슬라이드*/
	.sc_edu .thumb > img {width: 12rem;}

	/*교재 슬라이드*/
	.sc_study_book .title {font-size: 1.5rem;}
	.sc_study_book .board_back_btn {margin-top: 2.5rem;}
	
	/*베스트리뷰*/
	.sc_review .swiper-slide .tit {font-size: 1.7rem;}
	.sc_review .swiper-slide {padding: 2rem 0.5rem 1.5rem;}
	.sc_review .swiper-slide > a {padding: 4rem 1.5rem 2rem;}
	.sc_review .swiper-slide > a > img {width: 13rem;}
}