@charset "euc-kr";
/* bg url: https://image.megagong.net/m/2026/ */

/* settings */
:root {
    --color-primary: #f00;
}
.wrap_content {font-family: 'Noto Sans Kr', sans-serif; text-align: center; line-height: 1.4;}
.wrap_content .label_wrap {display: flex; gap: 4px;}
.wrap_content .label_wrap .label {font-size: 12px; letter-spacing: normal; line-height: 1; padding: 2px 8px 3px; border-radius: 5px; color: #FFF; background: #FC8600;}
.wrap_content .label_wrap .label.online {background: #0082FF;}
.wrap_content .select_wrap {position: relative; display: flex; justify-content: flex-start; align-items: center; gap: 10px; margin-bottom: 20px;}
.wrap_content .select_base {font-weight: 700; padding: 0 20px; background-color: #FFF; background-color: #FFF; border-radius: 36px; border: 1px solid #E4E4EB; background-image: url(https://image.megagong.net/common/ico_select_arrow.svg); background-size: 10px 10px; background-repeat: no-repeat; background-position: calc(100% - 20px) 50%; appearance: none; cursor: pointer;}
.wrap_content .select_base option {font-size: 14px;}

.sobangcampus .wrap_content .label_wrap .label.online {background: #ED3333;}

/* S: component */
.drawer-wrap {position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: none; justify-content: center; align-items: flex-end; z-index: 10;}
.drawer-wrap .drawer-backdrop {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: -1;}
.drawer-wrap .drawer-base {position: relative; width: 100%; background-color: #FFF; border-radius: 16px 16px 0 0; padding: 15px 20px 30px;}
.drawer-wrap .drawer-base .drawer-close {position: absolute; top: 8px; right: 8px; width: 24px; height: 24px; background-image: url(https://image.megagong.net/common/ico_x.svg);}
.drawer-wrap .drawer-base .drawer-tit {font-weight: 700; font-size: 16px; color: #1A1A1A; text-align: left; margin-bottom: 4px; margin-top: 14px;}
.drawer-wrap .drawer-base .drawer-tit:first-child {margin-top: 0;}
.drawer-wrap .drawer-base .drawer-list {display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 10px 4px;}
.drawer-wrap .drawer-base .drawer-list li a {display: block; font-weight: 500; font-size: 13px; color: #777; border-radius: 50px; background: #F2F2F2; padding: 10px 20px; line-height: 1;}
.drawer-wrap .drawer-base .drawer-list li.on a {color: #FFF; background: #111;}
.drawer-wrap .drawer-base .btn-base {display: block; margin-top: 30px;}
.drawer-wrap .drawer-base .btn-base a {display: block; font-size: 15px; padding: 17px 10px;}
.drawer-wrap .drawer-base .btn-base.red a {color: #FFF; background: #ED3333;}

.sobangcampus .teacher_home_wrap .drawer-wrap .drawer-base .drawer-tit {display: none;}
/* E: component */

/* S: ¹ÝÀÀÇü µõµå Æ˾÷ c\share\teacher\teacher_list.asp */
.select_pop {display: none;}
.select_pop {position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 101;}
.select_pop .dim_area {position: absolute; width: 100%; height: 100%; top: 0; left: 0; background: #000; opacity: 0.3;}
.select_pop .content_area {position: absolute; width: 100%; height: auto; bottom: 0; left: 0; background: #FFF;}
/* E: ¹ÝÀÀÇü µõµå Æ˾÷ c\share\teacher\teacher_list.asp */

/* S: »ó´Ü ¹è³Ê c\share\teacher\banner_top.asp */
.banner_top {padding: 55px 0 90px; background-color: #0C1A6B; background-image: url(https://image.megagong.net/c/common/teacher/banner_top_bg_gongssel.png); background-position: 50% 100%; background-size: auto 100%; background-repeat: no-repeat; text-align: center; line-height: 1.4;}
.banner_top .inner {width: 1080px; margin: 0 auto;}
.banner_top .title {position: relative; display: flex; justify-content: center; align-items: flex-start; gap: 15px; font-weight: 800; color: #FFF;}
.banner_top .title::before,
.banner_top .title::after {content: ''; display: block; width: 30px; height: 18px; background-image: url(https://image.megagong.net/c/common/teacher/banner_top_quotes.png); background-size: contain; background-repeat: no-repeat;}
.banner_top .title::after {transform: rotateZ(180deg);}
.banner_top .sub_text {color: #BBD8FF; margin-top: 15px;}
.banner_top .sub_text .tx_white {color: #FFF;}

.sobangcampus .banner_top {background-color: #882100; background-image: url(https://image.megagong.net/c/common/teacher/banner_top_bg_sobangcampus.png);}
.sobangcampus .banner_top .sub_text {color: #FFB8AC;}
/* E: »ó´Ü ¹è³Ê c\share\teacher\banner_top.asp */

/* S: ¼±»ý´ÔȨ ¸ÞÀÎ c\gongssel\teacher\index.asp, c\sobang\teacher\index.asp */
.teacher_list_wrap {padding: 80px 0 150px;}
.teacher_list_wrap * {box-sizing: border-box;}
.teacher_list_wrap .group_tab {margin-bottom: 25px;}
.teacher_list_wrap .group_tab li a {font-size: 18px; color: #777;}
.teacher_list_wrap .group_tab li.on a {font-weight: 700;}
.teacher_list_wrap .subject_tab {margin-bottom: 25px;}
.teacher_list_wrap .subject_tab li a {font-weight: 500; font-size: 15px; color: #777; background: #F2F2F2; padding: 13px 40px;}
.teacher_list_wrap .subject_tab li.on a {font-weight: 700;}
.teacher_list_wrap .select_btn {text-align: left; padding: 10px 20px; line-height: 1; margin-bottom: 20px;}
.teacher_list_wrap .teacher_list {display: flex; gap: 20px; flex-wrap: wrap;}
.teacher_list_wrap .teacher_list .item {width: 255px; aspect-ratio: 255 / 340;}
.teacher_list_wrap .teacher_list .item a {position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; text-align: left; padding: 20px; border-radius: 5px; background: #F8F8F8; color: #FFF; z-index: 0; overflow: hidden;}
.teacher_list_wrap .teacher_list .item a::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 130px; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, #000 100%); pointer-events: none; z-index: -1;}
.teacher_list_wrap .teacher_list .item:hover a {background: linear-gradient(180deg, rgba(93, 176, 255, 0.00) 0%, #5DB0FF 100%), #F8F8F8;}
.teacher_list_wrap .teacher_list .item .teacher_title {font-weight: 700; font-size: 16px; line-height: 1.3; margin-top: 10px; margin-bottom: 5px;}
.teacher_list_wrap .teacher_list .item .teacher_info {font-size: 13px;}
.teacher_list_wrap .teacher_list .item .teacher_img {position: absolute; width: 110%; left: -5%; bottom: -12px; z-index: -2;}

/* .sobangcampus .teacher_list_wrap .group_tab {display: none;} */
.sobangcampus .teacher_list_wrap .teacher_list .item:hover a {background: linear-gradient(180deg, rgba(255, 93, 93, 0.00) 0%, #FF5D5D 100%), #F8F8F8;}
.sobangcampus .teacher_list_wrap .teacher_list .item .label.online {background: #ED3333;}
/* E: ¼±»ý´ÔȨ ¸ÞÀÎ c\gongssel\teacher\index.asp, c\sobang\teacher\index.asp */

/* S: ¼±»ý´ÔȨ »ó¼¼ c\gongssel\teacher\home.asp, c\sobang\teacher\home.asp */
.teacher_home_wrap {padding: 20px 0 150px;}
.teacher_home_wrap .select_base_wrap {position: relative;}
.teacher_home_wrap .select_base_wrap .ico_arrow {position: absolute; top: calc(50% - 5px); right: 20px; width: 10px; height: 10px; background-image: url(https://image.megagong.net/common/ico_select_arrow.svg); background-size: auto; background-repeat: no-repeat;}
.teacher_home_wrap .select_base {display: flex; justify-content: flex-start; align-items: center; width: 160px; height: 36px; font-weight: 700; font-size: 16px; padding: 0 20px; box-sizing: border-box; background: none;}
.teacher_home_wrap .select_base_wrap .select_base.on ~ .ico_arrow {transform: rotateX(180deg);}
.teacher_home_wrap .subject_group_box {display: none; position: absolute; bottom: -10px; left: 0; transform: translateY(100%); width: 100%; border-radius: 5px; border: 1px solid #DADADA; background: #FFF; padding: 20px; box-sizing: border-box; z-index: 1;}
.teacher_home_wrap .subject_group_list {display: flex; flex-direction: column; gap: 10px; font-weight: 400; font-size: 13px;}
.teacher_home_wrap .subject_group_list > li {display: flex; justify-content: flex-start; align-items: center; gap: 8px;}
.teacher_home_wrap .subject_group_list .subject {flex-basis: 110px; flex-shrink: 0; font-weight: 700; color: #999; text-align: left;}
.teacher_home_wrap .subject_group_list .subject_list {flex: 1; display: flex; justify-content: flex-start; align-items: center; gap: 8px;}
.teacher_home_wrap .subject_group_list .subject_list li a {display: block; color: #111; padding: 7px 20px 8px; border-radius: 30px; border: 1px solid #E4E4EB; background: #FFF; line-height: 1;}
.teacher_home_wrap .subject_group_list .subject_list li a.on {font-weight: 700; color: #0082FF; border-color: #0082FF;}
.teacher_home_wrap .tea_tab_list {position: relative; overflow: hidden; font-weight: 400; font-size: 14px; line-height: 1;}
.teacher_home_wrap .tea_tab_list .swiper-slide {width: auto;}
.teacher_home_wrap .tea_tab_list .swiper-slide a {display: block; padding: 11px 20px; color: #777; border-radius: 50px; background: #F2F2F2;}
.teacher_home_wrap .tea_tab_list .swiper-slide.on a {font-weight: 500; color: #FFF; background: #0082FF;}
.teacher_info_wrap {position: relative; display: flex; justify-content: flex-start; align-items: center; gap: 64px; background: #F4FAFF; overflow: hidden; padding: 10px 0 0 104px; text-align: left; margin-bottom: 60px;}
.teacher_info_wrap .teacher_img {margin-bottom: -103px;}
.teacher_info_wrap .teacher_info {color: #0082FF; line-height: 1.2;}
.teacher_info_wrap .teacher_info .title {display: inline-block; margin: 5px 0 30px;}
.teacher_info_wrap .teacher_info .btn-base-wrap {justify-content: flex-start; gap: 6px; margin-top: 15px;}
.teacher_info_wrap .teacher_info .btn-base {flex: 0;}
.teacher_info_wrap .teacher_info .btn-base a {width: 90px; font-size: 12px; padding: 7px 20px; border-radius: 40px; border: 1px solid #E4E4EB; background: #FFF;}
.teacher_info_wrap .teacher_info .tiny_txt {position: absolute; right: 35px; bottom: 25px; font-size: 11px; color: #111; opacity: 0.4;}
.tec_curriculum .char_zone,
.tec_curriculum .char_zone + .tiny_txt {display: none;}
.teacher_home_wrap .grade_wrap {margin-top: 30px;}
.teacher_home_wrap .grade_wrap ul {display: flex; justify-content: flex-start; align-items: center; gap: 7px; margin-bottom: 20px;}
.teacher_home_wrap .grade_wrap ul li a {display: block; font-size: 14px; color: #B3B3B3; border-radius: 40px; border: 1px solid #ECECEC; background: #F8F8F8; padding: 4px 20px 6px;}
.teacher_home_wrap .grade_wrap ul li.on a {color: #0082FF; border-color: #0082FF; background-color: #FFF;}
.teacher_home_wrap .tec_curriculum .tab_wrap .tab_btn {margin-bottom:20px;display: flex;flex-direction: row;flex-wrap: wrap;}
.teacher_home_wrap .tec_curriculum .tab_wrap .tab_btn li { flex: 1;}
.teacher_home_wrap .tec_curriculum .tab_wrap .tab_btn li a{display: flex;justify-content: center;align-items: center;font-size: 16px;padding: 15px 0;background: #eaeaea;}
.teacher_home_wrap .tec_curriculum .tab_wrap .tab_btn li.on a {background: #0082FF; color: #fff;}

.sobangcampus .teacher_home_wrap .subject_group_list .subject {display: none;}
.sobangcampus .teacher_home_wrap .subject_group_list .subject_list li a.on {color: #ED3333; border-color: #ED3333;}
.sobangcampus .teacher_home_wrap .tea_tab_list .swiper-slide.on a {background: #ED3333;}
.sobangcampus .teacher_info_wrap {background: #FFF0F1;}
.sobangcampus .teacher_info_wrap .teacher_info {color: #ED3333;}
/* E: ¼±»ý´ÔȨ »ó¼¼ c\gongssel\teacher\home.asp, c\sobang\teacher\home.asp */

@media screen and (max-width: 1200px) {
    .wrap_content .select_wrap {gap: 0; padding-right: 3%; margin-right: -3%;}

    /* S: »ó´Ü ¹è³Ê c\share\teacher\banner_top.asp */
    .banner_top .inner {width: 96%;}
    /* E: »ó´Ü ¹è³Ê c\share\teacher\banner_top.asp */

    /* S: ¼±»ý´ÔȨ ¸ÞÀÎ c\gongssel\teacher\index.asp, c\sobang\teacher\index.asp */
    .teacher_list_wrap {padding: 30px 0;}
    .teacher_list_wrap .group_tab,
    .teacher_list_wrap .subject_tab {display: none;}
    .teacher_list_wrap .teacher_list {gap: 10px;}
    .teacher_list_wrap .teacher_list .item {width: calc(25% - 7.5px);}
    /* E: ¼±»ý´ÔȨ ¸ÞÀÎ c\gongssel\teacher\index.asp, c\sobang\teacher\index.asp */

    /* S: ¼±»ý´ÔȨ »ó¼¼ c\gongssel\teacher\home.asp, c\sobang\teacher\home.asp */
    .teacher_home_wrap {padding: 30px 0;}
    .teacher_home_wrap .tea_tab_list {padding-left: 10px;}
    .teacher_home_wrap .tea_tab_list::before {content: ''; position: absolute; top: 0; left: 0; width: 10px; height: 100px; background: linear-gradient(270deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%); z-index: 3;}
    .teacher_info_wrap {flex-direction: column; gap: 16px; padding: 20px 10px; text-align: center; margin-bottom: 30px;}
    .teacher_info_wrap .teacher_img {width: 150px; height: 150px; overflow: hidden; border-radius: 50%; background: #FFF; margin-bottom: 0;}
    .teacher_info_wrap .teacher_info .label_wrap {justify-content: center;}
    .teacher_info_wrap .teacher_info .title {margin: 10px auto;}
    .teacher_info_wrap .teacher_info .btn-base-wrap {justify-content: center; margin-top: 10px;}
    .teacher_info_wrap .teacher_info .btn-base a {width: auto;}
    /* E: ¼±»ý´ÔȨ »ó¼¼ c\gongssel\teacher\home.asp, c\sobang\teacher\home.asp */
}
@media screen and (max-width: 992px) {
    /* S: ¼±»ý´ÔȨ ¸ÞÀÎ c\gongssel\teacher\index.asp, c\sobang\teacher\index.asp */
    .teacher_list_wrap .teacher_list .item a {padding: 13px;}
    .teacher_list_wrap .teacher_list .item .teacher_title {word-break: break-all;}
    .teacher_list_wrap .teacher_list .item .teacher_title br {display: none;}
    /* E: ¼±»ý´ÔȨ ¸ÞÀÎ c\gongssel\teacher\index.asp, c\sobang\teacher\index.asp */
}
@media screen and (max-width: 768px) {
    .wrap_content .label_wrap .label {font-size: 11px; padding: 1px 6px 2px; border-radius: 3.75px;}

    /* S: »ó´Ü ¹è³Ê c\share\teacher\banner_top.asp */
    .banner_top {padding: 30px 0;}
    .banner_top .title {gap: 5px;}
    .banner_top .title::before,
    .banner_top .title::after {width: 24px; height: 14.5px;}
    /* E: »ó´Ü ¹è³Ê c\share\teacher\banner_top.asp */

    /* S: ¼±»ý´ÔȨ ¸ÞÀÎ c\gongssel\teacher\index.asp, c\sobang\teacher\index.asp */
    .teacher_list_wrap .teacher_list .item {width: calc(33.333% - 6.666px);}
    .teacher_list_wrap .teacher_list .item a::before {height: 97px;}
    .teacher_list_wrap .teacher_list .item .teacher_title {font-size: 14px; margin-top: 6px; margin-bottom: 4px;}
    .teacher_list_wrap .teacher_list .item .teacher_info {font-size: 11px;}
    /* E: ¼±»ý´ÔȨ ¸ÞÀÎ c\gongssel\teacher\index.asp, c\sobang\teacher\index.asp */

    /* S: ¼±»ý´ÔȨ »ó¼¼ c\gongssel\teacher\home.asp, c\sobang\teacher\home.asp */
    .teacher_home_wrap .select_base {width: 145px; height: 33px; font-size: 13px;}
    .teacher_home_wrap .tea_tab_list {font-size: 13px;}
    .teacher_home_wrap .tea_tab_list .swiper-slide a {padding: 10px 20px;}
    /* E: ¼±»ý´ÔȨ »ó¼¼ c\gongssel\teacher\home.asp, c\sobang\teacher\home.asp */
}
@media screen and (max-width: 576px) {
    .teacher_list_wrap .teacher_list .item {width: calc(50% - 5px);}
}