@charset "utf-8";

.main_visual {position: relative; padding: 0 39px; margin: 0 0 50px;}
.main_visual .slider-wrap {opacity: 0; visibility: hidden; transition: opacity 1s ease; -webkit-transition: opacity 1s ease;}
.main_visual .slider-wrap.slick-initialized {visibility: visible; opacity: 1;}

.main_visual .slick-slide {margin: 0 8px;}
.main_visual .slick-slide img {width: 100%; aspect-ratio: 210 / 297; object-fit: cover; border-radius: 25px;}

.ctrl_button {position: absolute; right: -43px; top: -5px;}
.ctrl_button .play,
.ctrl_button .pause {width: 10px; height: 12px; background-repeat: no-repeat; background-position: center; font-size: 0; display: block; cursor: pointer;}
.ctrl_button .play {background-image: url(../../img/main/ico_restart.png); display: none;}
.ctrl_button .pause {background-image: url(../../img/main/ico_pause.png); display: none;}
.ctrl_button .pause.on {display: block;}
.ctrl_button .play.on {display: block;}

.main_visual .prev_btn,
.main_visual .next_btn {position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 54px; background-repeat: no-repeat; background-position: center; background-size: 40px 54px; margin: 0; font-size: 0; cursor: pointer;}
.main_visual .prev_btn {background-image: url(../../img/main/visual_prev.png); left: 53px; right: auto;}
.main_visual .next_btn {background-image: url(../../img/main/visual_next.png); right: 53px; left: auto;}

.progress_wrap {margin: 0 auto 90px; width: 456px; height: 4px; background: #ccc; position: relative;}
.progress_wrap .progress {background-color: #c90915; height: 4px; position: absolute; left: 0; top: 0;}
.tc_slide {margin-top: 30px;}

.pagingInfo .current {font-size: 16px; font-weight: 500; color: #666; position: absolute; left: -20px; top: -10px;}
.pagingInfo .total {font-size: 16px; font-weight: 500; color: #666; position: absolute; right: -20px; top: -10px;}

.grade_list {width: 1440px; margin: 0 auto 75px;}
.grade_list ul {font-size: 0; display: flex;}
.grade_list ul li {display: inline-block; width: 16.66%; vertical-align: middle; margin-right: 9px;}
.grade_list ul li:last-child {margin-right: 0;}
.grade_list ul li:hover a {border: 1px solid #c90915;}
.grade_list ul li:hover strong {color: #c90915;}

.grade_list ul li a {display: block; min-height: 170px; border-radius: 15px; border: 1px solid #ccc; padding: 15px 20px; box-sizing: border-box; background-repeat: no-repeat; background-position: right 20px bottom 15px;}
.grade_list ul li a .top {font-size: 0;}
.grade_list ul li a .top strong {font-size: 20px; display: block;}
.grade_list ul li a .top strong img {vertical-align: middle;}
.grade_list ul li a .top p {font-size: 15px; color: #666;}
.grade_list ul li a .top p .inline {display: block;}

.grade_list ul li.middle_01 a {background-image: url(../../img/main/ico_middle_01.png); background-size: 32px 34px;}
.grade_list ul li.middle_01:hover a {background-image: url(../../img/main/ico_middle_01_over.png); background-size: 32px 34px;}
.grade_list ul li.middle_02 a {background-image: url(../../img/main/ico_middle_02.png); background-size: 31px 32px;}
.grade_list ul li.middle_02:hover a {background-image: url(../../img/main/ico_middle_02_over.png); background-size: 31px 32px;}
.grade_list ul li.middle_03 a {background-image: url(../../img/main/ico_middle_03.png); background-size: 32px 33px;}
.grade_list ul li.middle_03:hover a {background-image: url(../../img/main/ico_middle_03_over.png); background-size: 32px 33px;}
.grade_list ul li.high_01 a {background-image: url(../../img/main/ico_high_01.png); background-size: 32px 34px;}
.grade_list ul li.high_01:hover a {background-image: url(../../img/main/ico_high_01_over.png); background-size: 32px 34px;}
.grade_list ul li.high_02 a {background-image: url(../../img/main/ico_high_02.png); background-size: 32px 34px;}
.grade_list ul li.high_02:hover a {background-image: url(../../img/main/ico_high_02_over.png); background-size: 32px 34px;}
.grade_list ul li.high_03 a {background-image: url(../../img/main/ico_high_03.png); background-size: 35px;}
.grade_list ul li.high_03:hover a {background-image: url(../../img/main/ico_high_03_over.png); background-size: 35px;}

.school_list_area {width: 1440px; margin: 0 auto 60px; position: relative;}
.school_list_area h3 {font-size: 26px;}
.school_list_area h3 span {font-size: 16px; font-weight: 500; display: inline-block; margin-left: 30px; color: #666;}

.school_list_area .test_chk {position: absolute; right: 0; top: 5px;}
.school_list_area .test_chk ul {font-size: 0;}
.school_list_area .test_chk ul li {position: relative; display: inline-block; font-size: 16px; font-weight: 500; margin-right: 56px; padding-left: 16px; color: #666;}
.school_list_area .test_chk ul li:last-child {margin-right: 0;}
.school_list_area .test_chk ul li strong {font-weight: 600;}
.school_list_area .test_chk ul li.midterm_exam:after,
.school_list_area .test_chk ul li.final_exam:after,
.school_list_area .test_chk ul li.special_class:after {content: ''; width: 8px; height: 8px; position: absolute; left: 0; top: 8px; border-radius: 50%;}
.school_list_area .test_chk ul li.midterm_exam:after {background: #c90915;}
.school_list_area .test_chk ul li.final_exam:after {background: #4ba6e0;}
.school_list_area .test_chk ul li.special_class:after {background: #4d9700;}

.school_list_area .school_list {text-align: center; margin: 0 0 30px;}
.school_list_area .school_list:last-child {margin-bottom: 0;}
.school_list_area .school_list .tit {position: relative; display: inline-block; margin: 0 0 20px;}
.school_list_area .school_list .tit span {font-size: 16px; font-weight: 500; color: #333; border-radius: 16px; background: #eaeaea; display: inline-block; padding: 0 30px 0 20px; line-height: 32px;}
.school_list_area .school_list .tit strong {font-size: 20px; width: 45px; line-height: 45px; display: inline-block; background: #c90915; border-radius: 50%; text-align: center; color: #fff; position: absolute; right: -20px; top: -7px;}
.school_list_area .school_list .tit strong.highschool {background: #ff9900;}

.school_list_area .school_list ul {font-size: 0; border-bottom: 1px solid #fff;}
.school_list_area .school_list ul:last-child {border-bottom: 0;}
.school_list_area .school_list ul li {display: inline-block; width: 10%; position: relative; padding: 13px 0; border-right: 1px solid #fff; box-sizing: border-box;}
.school_list_area .school_list ul li:after {content: ''; width: 5px; height: 5px; border-radius: 50%; position: absolute; left: 10px; top: 10px;}
.school_list_area .school_list ul li span {font-size: 16px; font-weight: 600; color: #333;}
.school_list_area .school_list ul li.midterm_exam {background: #f6e8e8;}
.school_list_area .school_list ul li.final_exam {background: #e9f7fb;}
.school_list_area .school_list ul li.special_class {background: #eaf6e8;}
.school_list_area .school_list ul li.midterm_exam:after {background: #e51818;}
.school_list_area .school_list ul li.final_exam:after {background: #4ba6e0;}
.school_list_area .school_list ul li.special_class:after {background: #4d9700;}
.school_list_area .school_list ul li.empty {background: #f4f4f4;}

.teacher_list_area {width: 1440px; margin: 0 auto; position: relative; display: flex;}
.teacher_list_area .half {width: 50%; padding: 0 5px 0 0; box-sizing: border-box; margin-bottom: 60px;}
.teacher_list_area .half:last-child {padding: 0 0 0 13px;}
.teacher_list_area .half h3 {display: inline-block; font-size: 26px; margin-right: 20px;}
.teacher_list_area .half h3 span {font-size: 16px; font-weight: 500; display: inline-block; margin-left: 20px; color: #666;}

.teacher_list_area .video_tab {display: inline-block;}
.teacher_list_area .video_tab ul {font-size: 0;}
.teacher_list_area .video_tab ul li {display: inline-block; font-size: 16px; font-weight: 500; position: relative; margin-right: 25px; padding: 2px 0; cursor: pointer;}
.teacher_list_area .video_tab ul li:last-child {margin-right: 0;}
.teacher_list_area .video_tab ul li.on {font-weight: bold; color: #c90c0c;}
.teacher_list_area .video_tab ul li.on:after {content: ''; width: 100%; height: 3px; background: #c90c0c; position: absolute; top: 0; left: 0;}

.teacher_cont {margin: 35px 0 0;}
.teacher_cont .teacher_list {}
.teacher_cont .teacher_list .slick-arrow {display: none !important;}

.teacher_cont .teacher_list ul.teacher_slide {}
.teacher_cont .teacher_list ul.teacher_slide .slick-track > li {}
.teacher_cont .teacher_list ul.teacher_slide .slick-track > li .inner_ul {display: flex; flex-wrap: wrap; gap: 8px;}
.teacher_cont .teacher_list ul.teacher_slide .slick-track > li .inner_ul > li {width: calc(25% - 8px); position: relative;}
.teacher_cont .teacher_list ul.teacher_slide .slick-track > li .inner_ul > li .img_box {font-size: 0; aspect-ratio: 196 / 241; overflow: hidden;}
.teacher_cont .teacher_list ul.teacher_slide .slick-track > li .inner_ul > li .img_box img {width: 100%; height: 100%; border-radius: 12px; object-fit: cover;}
.teacher_cont .teacher_list ul.teacher_slide .slick-track > li .inner_ul > li span {font-size: 13px; font-weight: bold; color: #fff; display: inline-block; background: rgba(204, 0, 0, .7); border-radius: 12px; padding: 2px 15px; position: absolute; right: 6px; bottom: 5px;}

.teacher_list_area .video_area {margin: 35px 0 0;}
.teacher_list_area .video_area iframe {width: 100%; height: 425px; border-radius: 15px;}

.academy_area {margin: 0 0 65px;}
.academy_area .top {width: 1440px; margin: 0 auto;}
.academy_area h3 {display: inline-block; font-size: 26px;}
.academy_area h3 span {font-size: 16px; font-weight: 500; display: inline-block; margin-left: 20px; margin-right: 20px; color: #666;}

.aca_tab {display: inline-block; margin-left: 35px;}
.aca_tab ul {font-size: 0;}
.aca_tab ul li {display: inline-block; font-size: 16px; font-weight: 500; position: relative; margin-right: 25px; padding: 2px 0; cursor: pointer;}
.aca_tab ul li:last-child {margin-right: 0;}
.aca_tab ul li.on {font-weight: bold; color: #c90c0c;}
.aca_tab ul li.on:after {content: ''; width: 100%; height: 3px; background: #c90c0c; position: absolute; top: 0; left: 0;}
.aca_tab .mobile-br {display: none;}

.aca_cont {background: #f2f6f9; position: relative; padding: 98px 0 55px; margin: 30px 0 0; font-size: 0;}
.aca_cont .aca_box {width: 1440px; margin: 0 auto;}
.aca_cont .detail_view {position: absolute; left: 50%; top: 0; transform: translateX(-50%);}
.aca_cont .detail_view a {display: block; font-size: 22px; font-weight: bold; color: #fff; background: #c90c0c; width: 430px; line-height: 50px; text-align: center; border-radius: 0 0 24px 24px;}
.aca_cont .half {display: inline-block; width: 50%; vertical-align: top; padding: 0 26px 0 0; box-sizing: border-box;}
.aca_cont .half:last-child {padding: 0 0 0 26px;}
.aca_cont .half .aca_pic {position: relative;}
.aca_cont .half .aca_pic .slick-slide {margin-right: 20px;}
.aca_cont .half .aca_pic .slick-slide img {width: 100%;}
.aca_cont .aca_slider {position: relative;}
.aca_cont .aca_slider .slick-arrow {width: 51px; height: 51px; font-size: 0; position: absolute; top: 50%; transform: translateY(-50%); z-index: 1;}
.aca_cont .aca_slider .slick-prev {background: url(../../img/main/ico_aca_prev.png) no-repeat center/51px; left: -26px; cursor: pointer;}
.aca_cont .aca_slider .slick-next {background: url(../../img/main/ico_aca_next.png) no-repeat center/51px; right: 0; cursor: pointer;}
.aca_cont .aca_slider img {width: 100%; height: 327px; object-fit: cover; border-radius: 16px;}

.main_notice {width: 1440px; margin: 0 auto; font-size: 0;}
.main_notice .half {display: inline-block; width: 50%; vertical-align: top; padding: 0 24px 0 0; box-sizing: border-box;}
.main_notice .half:last-child {padding: 0 0 0 24px;}
.main_notice .half h3 {font-size: 26px; position: relative;}
.main_notice .half h3 a {display: block; position: absolute; right: 0; top: 0;}
.main_notice .half h3 a span {display: inline-block; font-size: 14px; font-weight: 500; padding-right: 25px; background: url(../../img/main/ico_notice_plus.png) no-repeat right center;}
.main_notice .half h3 a:hover span {color: #c90c0c; background: url(../../img/main/ico_notice_plus_on.png) no-repeat right center;}

.notice_list {margin: 30px 0 0;}
.notice_list li {border-bottom: 1px solid #ccc; padding: 16px 0;}
.notice_list li a {font-size: 16px; display: flex; justify-content: space-between;}
.notice_list li a strong {color: #c90c0c; width: 10%;}
.notice_list li a span {font-weight: 500; text-align: left; width: 75%;}
.notice_list li a span.date {color: #999; width: 15%; text-align: right;}

.notice_link {font-size: 14px;}
.notice_link ul {}
.notice_link ul li {margin-bottom: 13px;}
.notice_link ul li:last-child {margin-bottom: 0;}
.notice_link ul li a {display: block; border: 1px solid #ccc; border-radius: 15px; position: relative; padding: 32px 44px;}
.notice_link ul li a strong,
.notice_link ul li a p {display: inline-block; vertical-align: middle;}
.notice_link ul li a strong {font-size: 24px;}
.notice_link ul li a p {font-size: 16px; font-weight: 500; color: #666; margin-left: 37px;}
.notice_link ul li a p .inline {display: block;}
.notice_link ul li a > span {font-size: 14px; font-weight: 500; display: inline-block; padding-right: 25px; background: url(../../img/main/ico_notice_plus.png) no-repeat right center; position: absolute; right: 15px; bottom: 10px;}

.notice_link ul li:hover a {border: 1px solid #c90c0c;}
.notice_link ul li:hover a strong {color: #c90c0c;}
.notice_link ul li:hover a > span {color: #c90c0c; background: url(../../img/main/ico_notice_plus_on.png) no-repeat right center;}

@media screen and (max-width: 1440px) {
    .main_visual {padding: 0 15px;}
    .main_visual .prev_btn {left: 15px;}
    .main_visual .next_btn {right: 15px;}
    .progress_wrap {width: 30%; margin-bottom: 50px;}

    .grade_list {width: 100%; padding: 0 15px; box-sizing: border-box; margin-bottom: 50px;}

    .school_list_area {width: 100%; padding: 0 15px; box-sizing: border-box; margin-bottom: 50px;}
    .school_list_area h3 {margin: 0 0 15px;}
    .school_list_area .test_chk {right: 15px; top: 11px;}
    .school_list_area .test_chk ul li {margin-right: 20px;}

    .teacher_list_area {width: 100%; padding: 0 15px; box-sizing: border-box; display: block; margin-bottom: 50px;}
    .teacher_list_area .half {width: 100%; padding: 0;}
    .teacher_list_area .half:last-child {padding: 0;}
    .teacher_list_area .video_area {margin: 10px 0 0;}
    .tc_slide {margin-bottom: 50px;}

    .academy_area .top {width: 100%; padding: 0 15px; box-sizing: border-box;}
    .aca_tab {margin: 10px 0 0;}
    .aca_cont .aca_box {width: 100%;}
    .aca_cont .half {width: 100%; padding: 0 10px; box-sizing: border-box; margin-bottom: 20px;}
    .aca_cont .half:last-child {margin-bottom: 0; padding: 0 15px;}
    .aca_cont .half .aca_pic .slick-slide {margin: 0; padding: 0 10px;}
    .aca_cont .half .slick-prev {left: 0;}
    .aca_cont .half .slick-next {right: 0;}

    .main_notice {width: 100%; padding: 0 15px; box-sizing: border-box;}
    .main_notice .half {width: 100%; padding: 0; margin-bottom: 20px;}
    .main_notice .half:last-child {padding: 0; margin-bottom: 0;}
    .notice_list {margin: 10px 0 0;}
}

@media screen and (max-width: 1100px) {
    .grade_list {padding: 0 10px;}
    .grade_list ul {display: block; font-size: 0;}
    .grade_list ul li {display: inline-block; width: calc(33.33% - 10px); vertical-align: top; margin: 0; border: 0; padding: 5px;}

    .school_list_area .test_chk {position: static; text-align: left; margin: 0 0 30px;}
    .school_list_area .school_list {margin: 0 0 50px;}
    .school_list_area .school_list ul li {width: 20%;}

    .aca_cont .aca_slider img {height: 290px; object-fit: cover; border-radius: 16px;}

}

@media screen and (max-width: 650px) {
    .notice_link ul li a {padding: 20px;}
    .notice_link ul li a p {display: none;}
    .notice_link ul li a strong {display: block; font-size: 20px;}

    .school_list_area h3 span,
    .teacher_list_area .half h3 span,
    .academy_area h3 span {display: block; margin-left: 0;}

    .aca_cont .aca_slider img {height: 260px; object-fit: cover; border-radius: 16px;}
}

@media screen and (max-width: 550px) {
    .main_visual {margin: 0 0 20px;}
    .main_visual .slick-slide {margin: 0 4px;}
    .pagingInfo .current,
    .pagingInfo .total {font-size: 14px; top: -8px;}

    .grade_list ul li {width: calc(50% - 10px);}
    .grade_list ul li a {min-height: 130px; padding: 10px 15px;}

    .grade_list ul li.middle_01 a {background-size: 26px auto;}
    .grade_list ul li.middle_01:hover a {background-size: 26px auto;}
    .grade_list ul li.middle_02 a {background-size: 25px auto;}
    .grade_list ul li.middle_02:hover a {background-size: 25px auto;}
    .grade_list ul li.middle_03 a {background-size: 26px auto;}
    .grade_list ul li.middle_03:hover a {background-size: 26px auto;}
    .grade_list ul li.high_01 a {background-size: 26px auto;}
    .grade_list ul li.high_01:hover a {background-size: 26px auto;}
    .grade_list ul li.high_02 a {background-size: 26px auto;}
    .grade_list ul li.high_02:hover a {background-size: 26px auto;}
    .grade_list ul li.high_03 a {background-size: 29px;}
    .grade_list ul li.high_03:hover a {background-size: 29px;}


    .grade_list ul li a .top strong {font-size: 18px; margin: 0 0 5px;}
    .grade_list ul li a .top p {font-size: 13px; word-break: keep-all;}
    .grade_list ul li a .top p .inline {display: inline;}

    .school_list_area h3 {font-size: 22px; margin: 0 0 5px;}
    .school_list_area h3 span {display: block; margin: 10px 0 0; font-size: 14px;}
    .school_list_area .test_chk ul li {font-size: 14px;}

    .school_list_area .school_list {margin: 0 0 30px;}
    .school_list_area .school_list .tit span {font-size: 14px;}
    .school_list_area .school_list .tit strong {font-size: 16px; width: 35px; line-height: 35px; right: -11px; top: -2px;}
    .school_list_area .school_list ul li span {font-size: 13px;}

    .teacher_list_area .half h3 {font-size: 22px;}
    .teacher_list_area .half h3 span {font-size: 14px;}
    .teacher_list_area .teacher_tab {display: block; margin: 10px 0 0;}
    .teacher_list_area .teacher_tab ul li {font-size: 14px; margin-right: 10px;}
    .teacher_cont {margin: 15px 0 0;}
    .teacher_cont .teacher_list ul.teacher_slide .slick-track > li .inner_ul > li span {font-size: 12px; padding: 2px 5px; font-weight: 500;}
    .teacher_list_area .video_area iframe {height: 300px;}

    .academy_area h3 {font-size: 22px;}
    .academy_area h3 span {font-size: 14px;}
    .aca_tab {margin-left: 0; display: block; width: 100%;}
    .aca_tab ul {display: flex; flex-wrap: wrap; gap: 10px 0;}
    .aca_tab ul li {font-size: 14px; margin-right: 0; width: calc(25% - 7.5px); text-align: center;}
    .aca_tab ul li:not(:nth-child(4n)) {margin-right: 10px;}
    .aca_tab .mobile-br {display: inline;}

    .aca_cont {padding: 70px 0 50px;}
    .aca_cont .detail_view {width: 80%;}
    .aca_cont .detail_view a {width: 100%; font-size: 18px; line-height: 40px;}
    .aca_cont .half {padding: 0 10px;}

    .main_notice .half h3 {font-size: 22px; padding-right: 70px;}
    .main_notice .half h3 a span {font-size: 12px;}
    .notice_list li {padding: 10px 0;}
    .notice_list li a {display: block; font-size: 0;}
    .notice_list li a strong {display: block; width: 100%; font-size: 13px;}
    .notice_list li a span {display: inline-block; width: 80%; vertical-align: middle; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; word-break: break-all;}
    .notice_list li a span.date {width: 20%;}

    .notice_link ul li a {padding: 10px 20px;}
    .notice_link ul li a span {bottom: auto; top: 14px;}
    .notice_link ul li a p .inline {display: inline;}

    .aca_cont .aca_slider img {height: 230px; object-fit: cover; border-radius: 16px;}
}