@charset "UTF-8";
@import url("header_m.css");
/* 헤더 공통 */
body .page {
  overflow: hidden;
}

/**/
#header .header_wrap {
  position: relative;
  z-index: 1000;
  height: auto;
}
#header .header_wrap.header_wrap_main {
  position: absolute;
  width: 100%;
}

.content-inside {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 8px 0;
}

/* top 배너 */
.header-top-banner {
  overflow: hidden;
  height: 70px;
  background: #242424;
}
.header-top-banner a {
  display: block;
}
.header-top-banner a span {
  display: block;
  position: relative;
}
.header-top-banner a span img {
  display: block;
  margin: 0 auto;
}
.header-top-banner .top-banner_btn-close {
  position: absolute;
  top: 28px;
  right: 184px;
  width: 16px;
  height: 16px;
  line-height: 16px;
}
.header-top-banner .top-banner_btn-close span {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 99;
  width: 100%;
  height: 1px;
  background-color: #fff;
}
.header-top-banner .top-banner_btn-close .line-01 {
  transform: rotate(135deg) translateX(0%);
}
.header-top-banner .top-banner_btn-close .line-02 {
  transform: rotate(45deg) translateX(0%);
}

/* 상단 etc */
.top-menu-etc {
  background: #f4f7f9;
  height: 45px;
}
.top-menu-etc .content-inside {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0 16px;
  padding: 0;
  height: 45px;
  line-height: 45px;
}
.top-menu-etc .content-inside .menu-etc_left {
  display: flex;
  gap: 0 18px;
}
.top-menu-etc .content-inside .menu-etc_left li {
  position: relative;
  vertical-align: middle;
}
.top-menu-etc .content-inside .menu-etc_left li.on a {
  font-weight: 700;
}
.top-menu-etc .content-inside .menu-etc_left li.on a::after {
  content: "";
  position: absolute;
  top: 0;
  right: -6px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #fa6432;
}
.top-menu-etc .content-inside .menu-etc_left li a {
  display: block;
  font-size: 13px;
  color: #333;
  line-height: 20px;
  font-family: "Pretendard";
}
.top-menu-etc .content-inside .menu-etc_right {
  display: flex;
  gap: 0 6px;
}
.top-menu-etc .content-inside .menu-etc_right li {
  position: relative;
  vertical-align: middle;
  width: 72px;
  height: 27px;
  border-radius: 13.5px;
  border: 1px solid #dbdbdb;
}
.top-menu-etc .content-inside .menu-etc_right li a {
  display: block;
  line-height: 27px;
  font-size: 12px;
  color: #333;
  font-family: "Pretendard";
  text-align: center;
}
.top-menu-etc .content-inside .menu-etc_right li:last-child {
  border-color: transparent;
  background: #fa6432;
}
.top-menu-etc .content-inside .menu-etc_right li:last-child a {
  color: #fff;
}
.top-menu-etc .content-inside .menu-etc_right li:first-child::before {
  content: none;
}
/* logo, gnb wrap */
.gnb-wrap {
  display: flex;
  border-bottom: 1px solid #f1f3f5;
}
@media (min-width: 1023px) {
  .gnb-wrap.gnb-wrap_black {
    border-bottom: 1px solid rgba(241, 243, 245, 0.15);
  }
}
.gnb-wrap .content-inside {
  height: 80px;
  padding: 0;
  line-height: 80px;
}
.gnb-wrap .content_nav {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0 54px;
  font-family: "Pretendard" !important;
}
.gnb-wrap .nav_evt {
  opacity: 0;
  position: absolute !important;
  top: 110px;
  left: 0;
  z-index: 10;
}
.gnb-wrap #btnOpenMobileGnb {
  display: none;
}
.gnb-wrap .logo {
  display: block;
  width: 150px;
  height: 25px;
  background: url("/front/imgs/common/logo_header_2023.svg") no-repeat left;
  background-size: cover;
}

/* 기존 common.less에 있는 globalWrap 코드 삭제함*/
#globalWrap {
  position: absolute;
  bottom: 6px;
  right: 0;
  z-index: 5;
}
#globalWrap .global-utils {
  display: block;
  height: 54px;
  font-size: 0;
}
#globalWrap .global-utils li {
  display: inline-block;
  line-height: 24px;
  vertical-align: top;
}
#globalWrap .global-utils li a {
  display: block;
  font-size: 13px;
  color: #202020;
  letter-spacing: -0.01em;
}
#globalWrap .global-utils li a > * {
  display: inline-block;
  line-height: 20px;
  vertical-align: top;
  font-family: Arial;
}
#globalWrap .global-utils li a::before {
  display: block;
  content: "";
  width: 28px;
  height: 28px;
  margin: 0 auto 2px;
  background-size: contain;
}
#globalWrap .global-utils li + li {
  margin-left: 30px;
}
#globalWrap .global-utils li + li::before {
  display: inline-block;
  content: "";
  position: absolute;
  top: 36px;
  left: -15px;
  width: 1px;
  height: 8px;
  background: #C4C4C4;
}
#globalWrap .global-utils li:first-child a::before {
  background: url("/front/imgs/common/ico_2021_library.svg") no-repeat center;
}
#globalWrap .global-utils li:last-child a::before {
  background: url("/front/imgs/common/ico_2021_faq.svg") no-repeat center;
}

@media (min-width: 1024px) {
  #gnbLogo {
    z-index: 99;
    position: absolute;
    left: 0;
  }
}
@media (min-width: 1024px) {
  #header .header_wrap {
    height: 126px;
  }
  .page_index.noti_on .gnb-wrap.fixed,
  .page_index .gnb-wrap.gnb-wrap_black.fixed {
    margin-top: 0;
    border-bottom: 1px solid #ededed;
  }
  .page_index .gnb-wrap.fixed #gnbWrapper.gnbWrapper_black #gnb > li > a {
    color: #000;
  }
  .gnb-wrap.fixed {
    display: block;
    position: fixed;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 901;
    background: #fff;
    border-bottom: 1px solid #ededed;
  }
}
#gnbWrapper {
  position: relative;
  z-index: 5;
  width: 100%;
  height: 80px;
}
@media (min-width: 1024px) {
  #gnbWrapper.on #gnb {
    z-index: 10;
    height: 385px;
  }
}
#gnbWrapper.on::after {
  content: "";
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 0;
  width: 1000%;
  height: 305px;
  border-top: 1px solid #f2f2f2;
  border-bottom: 1px solid #f2f2f2;
  background: #fff;
}
#gnbWrapper #gnb {
  display: flex;
  border-collapse: collapse;
  justify-content: flex-start;
  gap: 0 70px;
  width: 100%;
  padding-left: 204px;
}
#gnbWrapper #gnb > li {
  position: static;
  vertical-align: top;
  text-align: center;
}
#gnbWrapper #gnb > li > a {
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: #000;
}
#gnbWrapper #gnb > li > a > span {
  display: inline-block;
  position: relative;
}
#gnbWrapper #gnb > li > a > span::before {
  display: block;
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 0;
  height: 3px;
  background: none repeat scroll 0 0 transparent;
  background: #ff6833;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
}
#gnbWrapper #gnb > li > a > span:hover::before {
  left: 0;
  width: 100%;
}
#gnbWrapper #gnb > li > a > span:focus, #gnbWrapper #gnb > li > a > span:hover {
  text-decoration: none;
}
#gnbWrapper #gnb > li > ul {
  display: none;
  position: absolute;
  top: 80px;
  left: auto;
  z-index: 1;
  width: 60%;
  height: 305px;
  padding: 30px 0 45px;
}
#gnbWrapper #gnb > li > ul > li {
  display: block;
  flex: initial;
  margin: 0 70px 20px 0;
  text-align: left;
  line-height: 1;
  letter-spacing: -0.4px;
}
#gnbWrapper #gnb > li > ul > li a {
  display: inline-block;
  font-size: 16px;
  font-weight: 500;
  color: #000;
}
#gnbWrapper #gnb > li > ul > li a:hover, #gnbWrapper #gnb > li > ul > li.on a {
  font-weight: 500;
  color: #ff6833;
}
#gnbWrapper #gnb > li.on > a > span::before {
  left: 0;
  width: 100%;
}
#gnbWrapper #gnb a.active ~ ul {
  display: block;
}
#gnbWrapper #gnb a.active ~ ul > li a + ul {
  display: none;
}
#gnbWrapper.gnbWrapper_black #gnb > li > a {
  color: #000;
}

.page_index .gnb-wrap.gnb-wrap_black {
  border: none;
}
.page_index #gnbWrapper.gnbWrapper_black #gnb > li > a {
  color: #fff;
}

#depth2LocationWrap .inner {
  width: 1200px;
}

#depth2LocationWrap.fixed {
  display: none;
}

#depth3LocationWrap .inner {
  max-width: 1200px;
  margin: 0 auto;
}
#depth3LocationWrap .sub_nav {
  margin-bottom: 0;
}
#depth3LocationWrap #depth3Location > li.on > ul > li.on > ul > li a {
  padding: 0 30px;
  line-height: 40px;
  font-size: 16px;
  font-weight: 600;
  font-family: "Pretendard";
  color: #999999;
  border: none;
  background: #f2f2f2;
}
#depth3LocationWrap #depth3Location > li.on > ul > li.on > ul > li.on a {
  color: #fff;
  background: #ff6833;
}

#mobileGnbType2Wrap {
  display: none;
}

.quickFloatingBanner {
  z-index: 999;
  position: fixed;
  top: 30%;
  right: 45px;
}
.quickFloatingBanner .btn_wrap a {
  display: block;
  width: 120px;
  height: 40px;
  line-height: 39px;
  text-align: center;
  font-family: "Pretendard";
  color: #000;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.28px;
  border-radius: 20px;
  border: 1px solid #f2f2f2;
  background: #fff;
}
.quickFloatingBanner .btn_wrap a:last-child {
  margin-top: 10px;
}
.quickFloatingBanner .btn_wrap .btn_tit {
  line-height: 1;
  color: #fff;
  font-size: 16px;
  letter-spacing: -0.32px;
}
.quickFloatingBanner .btn_wrap .btn_data, .quickFloatingBanner .btn_wrap .btn_manual {
  height: 120px;
  line-height: normal;
  padding-top: 33px;
  border-radius: 50%;
  border: none;
  background: #fa6432;
}
.quickFloatingBanner .btn_wrap .btn_data span, .quickFloatingBanner .btn_wrap .btn_manual span {
  display: block;
  padding-top: 10px;
  line-height: 1.2;
  font-family: "Pretendard";
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.26px;
  color: #ffd6c9;
}
.quickFloatingBanner .btn_wrap .btn_manual {
  margin: 10px 0 20px;
  background: #0abe5a;
}
.quickFloatingBanner .btn_wrap .btn_manual span {
  color: #a0fac8;
}

#gnb .hide_at_gnb,
#mobileGnbType2Wrap .hide_at_gnb {
  display: none !important;
}

#gnbClone .hide_at_gnb {
  display: none !important;
}

.btnMobileMy {
  display: none;
}

#lnb > ul {
  margin-bottom: 120px;
}

/* [ @pc ] 1023이상 ~ */
@media (min-width: 1023px) {
  /* gnb wrap hover on 클래스 추가 */
  .gnb-wrap.on {
    background: #fff;
  }
  .gnb-wrap.on #gnb > li > a {
    color: #202020 !important;
  }
  .gnb-wrap.on .nav_evt {
    opacity: 1;
  }
}
/* [ @~ta ] 1023이하 - 태블릿 세로 이하▼ 화면*/
@media (max-width: 1023px) {
  .page_index #gnbLogo {
    border: none;
  }
  .page_index .gnb-wrap #btnOpenMobileGnb span {
    background: #fff;
  }
  .page_index.noti_on #header .header_wrap.header_wrap_main {
    margin-top: 80px;
  }
  #header {
    height: auto;
    border-bottom: 0 !important;
  }
  #header .header_wrap.header_wrap_main {
    margin-top: 0;
  }
  .top-menu-etc {
    display: none;
  }
  .content-inside {
    width: 100%;
  }
  .gnb-wrap .content-inside {
    height: auto;
  }
  .gnb-wrap #btnOpenMobileGnb {
    z-index: 50;
    display: block;
    position: absolute;
    top: 40px;
    right: 40px;
    width: 58px;
    height: 39px;
    display: flex;
    align-items: center;
    flex-flow: wrap;
    row-gap: 11px;
    cursor: pointer;
  }
  .gnb-wrap #btnOpenMobileGnb span {
    width: 100%;
    height: 5px;
    transition: transform 0.3s;
    background: #000;
  }
  .gnb-wrap #btnOpenMobileGnb.open span {
    position: absolute;
  }
  .gnb-wrap #btnOpenMobileGnb.open span:nth-child(1) {
    transform: rotate(45deg);
  }
  .gnb-wrap #btnOpenMobileGnb.open span:nth-child(2) {
    display: none;
  }
  .gnb-wrap #btnOpenMobileGnb.open span:nth-child(3) {
    transform: rotate(-45deg);
  }
  .gnb-wrap .content_nav {
    align-items: flex-start;
    flex-direction: column;
  }
  .gnb-wrap .logo {
    width: 236px;
    height: 39px;
    margin-top: 10px;
    background: url("/front/imgs/common/logo_header_2023.svg") no-repeat center;
    background-size: 236px;
  }
  #gnbLogo {
    width: 100%;
    height: 120px;
    padding: 30px 40px;
    border-bottom: 1px solid #ededed;
  }
  #gnbWrapper.on::after {
    display: none;
  }
  #globalWrap {
    display: none;
  }
  #gnbWrapper {
    display: block;
    overflow-y: hidden;
    overflow-x: scroll;
    width: 100%;
    height: 100px;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  #gnbWrapper.gnbWrapper_black {
    border-top: none;
  }
  #gnbWrapper.gnbWrapper_black #gnb {
    display: none;
  }
  #gnbWrapper.fixed {
    display: block;
    position: fixed;
    top: -1px;
    left: 0;
    z-index: 901;
    background: #fff;
    border-bottom: 1px solid #ededed;
  }
  #gnbWrapper.fixed #gnb {
    display: flex;
  }
  #gnbWrapper.fixed #gnb > li > a span {
    color: #202020;
  }
  #gnbWrapper #gnb {
    display: flex;
    width: 100%;
    line-height: 1;
    text-align: left;
    white-space: nowrap;
  }
  #gnbWrapper #gnb > li > a {
    height: 100%;
    padding: 0;
    line-height: 100px;
    font-size: 30px;
  }
  #gnbWrapper #gnb > li > a > span::before, #gnbWrapper #gnb > li > a > span:hover::before {
    display: none;
  }
  #gnbWrapper #gnb > li:first-child {
    padding-left: 40px;
  }
  #gnbWrapper #gnb > li.on {
    display: block;
  }
  #gnbWrapper #gnb > li.on > a > span::before {
    display: block;
    bottom: 1px;
    width: 100%;
    height: 3px;
  }
  #gnbWrapper #gnb > li:first-child > a::after {
    vertical-align: 13px;
  }
  #gnbWrapper::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera*/
  }
  #depth2LocationWrap {
    display: block;
    width: 100%;
    height: 101px;
    padding: 0;
    margin-bottom: 20px;
    box-sizing: border-box;
    font-weight: 300;
    border-color: #ededed;
    background-color: #fff;
  }
  #depth2LocationWrap > .inner {
    width: auto;
  }
  #depth2LocationWrap #depth2Current {
    display: none;
  }
  #depth2LocationWrap #depth2Location {
    display: block;
    overflow-y: hidden;
    overflow-x: scroll;
    position: static;
    width: 100%;
    padding: 0;
    font-family: Pretendard;
    font-weight: 300;
    border: 0;
    background: transparent;
    text-align: left;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
  }
  #depth2LocationWrap #depth2Location ul {
    text-align: left;
    white-space: nowrap;
    padding: 0;
  }
  #depth2LocationWrap #depth2Location ul > li {
    display: inline-block;
    margin-left: 50px;
  }
  #depth2LocationWrap #depth2Location ul > li:first-child {
    margin-left: 0;
  }
  #depth2LocationWrap #depth2Location ul > li > a {
    display: inline-block;
    padding: 0;
    line-height: 100px;
    font-size: 30px;
    font-weight: 500;
    color: #000;
    background: #fff;
  }
  #depth2LocationWrap #depth2Location ul > li.on > a {
    font-weight: 700;
    color: #ff6833;
  }
  #depth2LocationWrap #depth2Location ul > li:first-child {
    margin-left: 40px;
  }
  #depth2LocationWrap #depth2Location ul > li:last-child {
    padding-right: 40px;
  }
  #depth2LocationWrap #depth2Location::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera*/
  }
  #depth2LocationWrap.fixed {
    display: block;
    position: fixed;
    top: 100px;
    z-index: 901;
  }
  #depth2LocationWrap.fixed #depth2Location {
    padding-top: 20px !important;
  }
  #depth3LocationWrap .inner {
    max-width: 720px;
    padding: 0 40px;
    margin: 0 auto;
  }
  #depth3LocationWrap .sub_nav {
    margin-bottom: 0;
  }
  #depth3LocationWrap #depth3Location > li.on > ul > li.on > ul {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
  }
  #depth3LocationWrap #depth3Location > li.on > ul > li.on > ul > li + li {
    margin-left: 0;
  }
  #depth3LocationWrap #depth3Location > li.on > ul > li.on > ul > li a {
    width: 203px;
    padding: 0;
    line-height: 74px;
    font-size: 28px;
    font-weight: 700;
    border: none;
    border-radius: 37px;
    background: #f2f2f2;
  }
  #depth3LocationWrap #depth3Location > li.on > ul > li.on > ul > li.on a {
    color: #fff;
    background: #ff6833;
  }
  #depth3LocationWrap #depth3Location > li.on > ul > li.on > ul > li:first-child:nth-last-child(1) a,
  #depth3LocationWrap #depth3Location > li.on > ul > li.on > ul > li:first-child:nth-last-child(1) ~ li a {
    width: auto;
    padding: 0 53px;
  }
  #depth3LocationWrap #depth3Location > li.on > ul > li.on > ul > li:first-child:nth-last-child(2) a,
  #depth3LocationWrap #depth3Location > li.on > ul > li.on > ul > li:first-child:nth-last-child(2) ~ li a {
    width: auto;
    padding: 0 53px;
  }
  #mobileGnbType2Wrap {
    position: fixed;
    top: 0;
    left: -720px;
    z-index: 9999;
    width: 720px;
    height: 100%;
    opacity: 0;
    box-sizing: border-box;
    transition: all 300ms cubic-bezier(0.215, 0.61, 0.355, 1);
    background: #fff;
  }
  #mobileGnbType2Wrap.open {
    display: block;
    left: 0;
    opacity: 1;
  }
  #mobileGnbType2Wrap.open + #mobileGnbType2Dim {
    display: block;
  }
  #mobileGnbType2Wrap.open #btnMobileGnbType2Close span {
    position: absolute;
  }
  #mobileGnbType2Wrap.open #btnMobileGnbType2Close span:nth-child(1) {
    transform: rotate(45deg);
  }
  #mobileGnbType2Wrap.open #btnMobileGnbType2Close span:nth-child(2) {
    display: none;
  }
  #mobileGnbType2Wrap.open #btnMobileGnbType2Close span:nth-child(3) {
    transform: rotate(-45deg);
  }
  #mobileGnbType2Wrap .logo_area {
    display: flex;
    justify-content: space-between;
    height: 120px;
    padding: 30px 40px;
    border-bottom: 1px solid #dbdbdb;
  }
  #mobileGnbType2Wrap .logo_area .mlogo {
    width: 236px;
    height: 39px;
    margin-top: 10px;
    background: url("/front/imgs/common/logo_header_2023.svg") no-repeat center;
    background-size: 236px;
  }
  #mobileGnbType2Wrap .logo_area .login_area {
    margin-right: 90px;
  }
  #mobileGnbType2Wrap .logo_area .login_area > li > a {
    width: 170px;
    height: 60px;
    font-size: 28px;
    font-weight: 700;
    font-family: "Pretendard";
    color: #fff;
    line-height: 60px;
    text-align: center;
    letter-spacing: -1.12px;
    border-radius: 30px;
    background: #fa6432;
  }
  #mobileGnbType2Wrap .logo_area #btnMobileGnbType2Close {
    z-index: 50;
    display: block;
    position: absolute;
    top: 40px;
    right: 40px;
    width: 58px;
    height: 39px;
    display: flex;
    align-items: center;
    flex-flow: wrap;
    row-gap: 11px;
    cursor: pointer;
  }
  #mobileGnbType2Wrap .logo_area #btnMobileGnbType2Close span {
    width: 100%;
    height: 5px;
    transition: transform 0.3s;
    background: #000;
  }
  #mobileGnbType2Wrap .free_area {
    padding: 48px 40px;
    background: #f4f7f9;
  }
  #mobileGnbType2Wrap .free_area .btn_navFree span {
    display: inline-block;
    font-size: 32px;
    font-weight: 600;
    font-family: "Pretendard";
    line-height: 1.3;
    letter-spacing: -1.28px;
    background: url("https://xcdn.home-learn.com/front_site/edu/homepage/2025/main/imgs/ico_arrow_bg.png") no-repeat;
    background-position: calc(100% - 70px) calc(100% - 4px);
  }
  #mobileGnbType2Wrap .free_area .btn_navFree b {
    color: #fa6432;
    font-weight: 600;
  }
  #mobileGnbType2Wrap .gnb_area {
    overflow: auto;
    height: 100%;
    padding-bottom: 94px;
  }
  #mobileGnbType2Wrap .gnb_area #mobileGnbType2 {
    display: flex;
    flex-wrap: wrap;
    gap: 70px 0;
    padding: 70px 80px 73px;
    border-bottom: 10px solid #f4f7f9;
  }
  #mobileGnbType2Wrap .gnb_area #mobileGnbType2 > li {
    width: 50%;
    height: auto;
    background-color: #fff;
  }
  #mobileGnbType2Wrap .gnb_area #mobileGnbType2 > li.hide_at_mobile_gnb {
    display: none;
  }
  #mobileGnbType2Wrap .gnb_area #mobileGnbType2 > li > a {
    width: 100%;
  }
  #mobileGnbType2Wrap .gnb_area #mobileGnbType2 > li > a > span {
    font-size: 38px;
    font-weight: 700;
    font-family: "Pretendard";
    line-height: 1;
    letter-spacing: -1.52px;
  }
  #mobileGnbType2Wrap .gnb_area #mobileGnbType2 > li > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px 0;
    margin-top: 50px;
  }
  #mobileGnbType2Wrap .gnb_area #mobileGnbType2 > li > ul > li {
    width: 100%;
  }
  #mobileGnbType2Wrap .gnb_area #mobileGnbType2 > li > ul > li.on > a > span {
    color: #ff6833;
    font-weight: 700;
  }
  #mobileGnbType2Wrap .gnb_area #mobileGnbType2 > li > ul > li > a > span {
    font-size: 30px;
    font-weight: 500;
    font-family: "Pretendard";
    color: #333;
    line-height: 1;
    letter-spacing: -1.2px;
  }
  #mobileGnbType2Wrap .gnb_area #mobileGnbType2 > li > ul > li > ul {
    display: none !important;
  }
  #mobileGnbType2Wrap .gnb_area #mobileGnbType2 > li .self_link {
    display: none !important;
  }
  #mobileGnbType2Wrap .gnb_area .btn_navNews {
    display: block;
    width: calc(100% - 80px);
    height: 90px;
    padding: 0 40px;
    margin: 50px auto 40px;
    font-size: 30px;
    font-weight: 700;
    font-family: "Pretendard";
    color: #fff;
    line-height: 90px;
    border-radius: 20px;
    background: url("https://xcdn.home-learn.com/front_site/edu/homepage/2025/main/imgs/ico_arrow_bg2.png") no-repeat #fa6432;
    background-position: calc(100% - 40px);
  }
  #mobileGnbType2Wrap .gnb_area .sns_area {
    padding: 0 27px 0;
    margin-bottom: 40px;
  }
  #mobileGnbType2Wrap .gnb_area .sns_tit {
    margin-bottom: 40px;
    font-size: 30px;
    font-weight: 600;
    font-family: "Pretendard";
    line-height: 1;
    letter-spacing: -1.2px;
    text-align: center;
  }
  #mobileGnbType2Wrap .gnb_area .sns_btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 20px;
  }
  #mobileGnbType2Wrap .gnb_area .sns_btn a {
    display: block;
    width: 70px;
    height: 70px;
    background: url("https://xcdn.home-learn.com/front_site/edu/homepage/2025/main/imgs/ico_sns.png") no-repeat;
    background-position: left;
    background-size: auto;
    font-size: 0;
  }
  #mobileGnbType2Wrap .gnb_area .sns_btn a:nth-child(2) {
    background-position: -90px;
  }
  #mobileGnbType2Wrap .gnb_area .sns_btn a:nth-child(3) {
    background-position: -180px;
  }
  #mobileGnbType2Wrap .gnb_area .sns_btn a:nth-child(4) {
    background-position: -270px;
  }
  #mobileGnbType2Wrap .gnb_area .login_foot_area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0 40px;
  }
  #mobileGnbType2Wrap .gnb_area .login_foot_area a {
    font-size: 27px;
    font-weight: 500;
    font-family: "Pretendard";
    color: #999;
    line-height: 1;
    letter-spacing: -1.12px;
  }
  #mobileGnbType2Wrap .gnb_area .login_foot_item:last-child::after {
    content: "";
    position: absolute;
    left: -20px;
    top: 10%;
    width: 2px;
    height: 80%;
    background: #999;
  }
  #mobileGnbType2Wrap .button_area {
    position: fixed;
    bottom: 0;
    min-width: 480px;
    padding: 21px 46px 26px 46px;
    background-color: #f1f3f5;
    box-shadow: 0 -2px 10px 0 rgba(0, 0, 0, 0.15);
  }
  #mobileGnbType2Wrap .button_area > ul {
    display: flex;
    justify-content: space-between;
  }
  #mobileGnbType2Wrap .button_area > ul > li > a {
    display: flex;
    flex-direction: column;
  }
  #mobileGnbType2Wrap .button_area > ul > li > a::before {
    display: inline-block;
    content: "";
    width: 60px;
    height: 60px;
  }
  #mobileGnbType2Wrap .button_area > ul > li > a > span {
    margin-top: 13px;
    text-align: center;
    font-size: 16px;
    color: #202020;
  }
  #mobileGnbType2Wrap .button_area > ul > li:nth-child(1) > a::before {
    background: url("/front/imgs/common/icon_btn_free.svg") no-repeat center;
    background-size: contain;
  }
  #mobileGnbType2Wrap .button_area > ul > li:nth-child(2) > a::before {
    background: url("/front/imgs/common/icon_btn_pay.svg") no-repeat center;
    background-size: contain;
  }
  #mobileGnbType2Wrap .button_area > ul > li:nth-child(3) > a::before {
    background: url("/front/imgs/common/icon_btn_faq.svg") no-repeat center;
    background-size: contain;
  }
  #mobileGnbType2Wrap .button_area > ul > li:nth-child(4) > a::before {
    background: url("/front/imgs/common/icon_btn_newsroom.svg") no-repeat center;
    background-size: contain;
  }
  #mobileGnbType2Dim {
    display: none;
    z-index: 9998;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
  }
  .btn_familyNav {
    position: absolute;
    top: 45px;
    left: 295px;
    width: 36px;
    height: 36px;
    transition: 0.3s all;
    background: url("/front/imgs/common/btn_familyNav.png") no-repeat;
    background-size: cover;
  }
  .btn_familyNav.open {
    left: 295px;
  }
  .btn_familyNav.on {
    transform: rotate(180deg);
  }
  #mobileFamilyWrap {
    z-index: 9999 !important;
    position: fixed;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    display: flex !important;
    align-items: flex-end;
    visibility: hidden;
    transition: opacity 0.3s, visibility 0.3s;
  }
  #mobileFamilyWrap.on {
    opacity: 1;
    visibility: visible;
  }
  #mobileFamilyWrap.on .inner {
    transform: translateY(0);
  }
  #mobileFamilyWrap .familyLayer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  #mobileFamilyWrap .inner {
    width: 100%;
    max-width: 720px;
    transform: translateY(100%);
    padding: 55px 45px;
    margin: 0 auto;
    border-radius: 30px 30px 0 0;
    background: #fff;
    transition: all 0.3s;
  }
  #mobileFamilyWrap .btn_family {
    display: block;
    padding-left: 224px;
    background: url("/front/imgs/common/img_logo_little.png") no-repeat left, url("/front/imgs/common/btn_familyNav_arrow.png") no-repeat right;
    background-size: 184px, auto;
  }
  #mobileFamilyWrap .btn_family:last-child {
    padding-top: 36px;
    margin-top: 36px;
    border-top: 1px solid #dbdbdb;
    background: url("/front/imgs/common/img_logo_mid.svg") no-repeat left 40px, url("/front/imgs/common/btn_familyNav_arrow.png") no-repeat right 55px;
    background-size: 186px, auto;
  }
  #mobileFamilyWrap .btn_family h3 {
    padding-bottom: 5px;
    line-height: 1;
    font-size: 34px;
    font-family: "Pretendard";
    font-weight: 700;
  }
  #mobileFamilyWrap .btn_family span {
    display: block;
    line-height: 1;
    font-size: 24px;
    font-family: "Pretendard";
    font-weight: 500;
  }
}
/* [ @~mo ] 767이하 - 핸드폰 세로 이하▼ 화면*/
@media (max-width: 767px) {
  .page_index.noti_on #header .header_wrap.header_wrap_main {
    margin-top: 11.11vw;
  }
  .gnb-wrap #btnOpenMobileGnb {
    top: 5.56vw;
    right: 5.56vw;
    width: 8.06vw;
    height: 5.42vw;
    row-gap: 1.53vw;
  }
  .gnb-wrap #btnOpenMobileGnb span {
    height: 0.69vw;
  }
  .gnb-wrap .logo {
    width: 32.78vw;
    height: 5.42vw;
    margin-top: 1.39vw;
    background: url("/front/imgs/common/logo_header_2023.svg") no-repeat center;
    background-size: 32.78vw;
  }
  #gnbLogo {
    height: 16.67vw;
    padding: 4.17vw 5.56vw;
  }
  #gnbWrapper {
    height: 13.89vw;
  }
  #gnbWrapper #gnb {
    gap: 0 9.72vw;
  }
  #gnbWrapper #gnb > li > a {
    line-height: 13.89vw;
    font-size: 4.17vw;
  }
  #gnbWrapper #gnb > li:first-child {
    padding-left: 5.56vw;
  }
  #gnbWrapper #gnb > li:first-child > a::after {
    vertical-align: 1.81vw;
  }
  #depth2LocationWrap {
    height: 13.89vw;
  }
  #depth2LocationWrap #depth2Location ul > li {
    margin-left: 6.94vw;
  }
  #depth2LocationWrap #depth2Location ul > li > a {
    line-height: calc(13.89vw - 2px);
    font-size: 4.17vw;
  }
  #depth2LocationWrap #depth2Location ul > li:last-child {
    padding-right: 5.56vw;
  }
  #depth2LocationWrap.fixed {
    top: 13.7vw;
  }
  #depth2LocationWrap.fixed #depth2Location {
    padding-top: 2.78vw !important;
  }
  #depth3LocationWrap .inner {
    padding: 0 5.56vw;
  }
  #depth3LocationWrap #depth3Location > li.on > ul > li.on > ul {
    gap: 2.08vw;
  }
  #depth3LocationWrap #depth3Location > li.on > ul > li.on > ul > li {
    width: calc((100% - 4.16vw) / 3);
  }
  #depth3LocationWrap #depth3Location > li.on > ul > li.on > ul > li a {
    width: 100%;
    line-height: 10.28vw;
    font-size: 3.89vw;
    border-radius: 5.14vw;
  }
  #depth3LocationWrap #depth3Location > li.on > ul > li.on > ul > li:first-child:nth-last-child(1),
  #depth3LocationWrap #depth3Location > li.on > ul > li.on > ul > li:first-child:nth-last-child(1) ~ li {
    width: auto;
  }
  #depth3LocationWrap #depth3Location > li.on > ul > li.on > ul > li:first-child:nth-last-child(1) a,
  #depth3LocationWrap #depth3Location > li.on > ul > li.on > ul > li:first-child:nth-last-child(1) ~ li a {
    width: auto;
    padding: 0 7.36vw;
  }
  #depth3LocationWrap #depth3Location > li.on > ul > li.on > ul > li:first-child:nth-last-child(2),
  #depth3LocationWrap #depth3Location > li.on > ul > li.on > ul > li:first-child:nth-last-child(2) ~ li {
    width: auto;
  }
  #depth3LocationWrap #depth3Location > li.on > ul > li.on > ul > li:first-child:nth-last-child(2) a,
  #depth3LocationWrap #depth3Location > li.on > ul > li.on > ul > li:first-child:nth-last-child(2) ~ li a {
    width: auto;
    padding: 0 7.36vw;
  }
  #mobileGnbType2Wrap {
    width: 100vw;
  }
  #mobileGnbType2Wrap .logo_area {
    height: 16.67vw;
    padding: 4.17vw 5.56vw;
  }
  #mobileGnbType2Wrap .logo_area .mlogo {
    width: 32.78vw;
    height: 5.42vw;
    margin-top: 1.39vw;
    background: url("/front/imgs/common/logo_header_2023.svg") no-repeat center;
    background-size: 32.78vw;
  }
  #mobileGnbType2Wrap .logo_area .login_area {
    margin-right: 12.5vw;
  }
  #mobileGnbType2Wrap .logo_area .login_area > li > a {
    width: 23.61vw;
    height: 8.33vw;
    line-height: 8.33vw;
    font-size: 3.89vw;
    letter-spacing: -0.16vw;
    border-radius: 4.17vw;
  }
  #mobileGnbType2Wrap .logo_area #btnMobileGnbType2Close {
    top: 5.56vw;
    right: 5.56vw;
    width: 8.06vw;
    height: 5.42vw;
    row-gap: 1.53vw;
  }
  #mobileGnbType2Wrap .logo_area #btnMobileGnbType2Close span {
    height: 0.69vw;
  }
  #mobileGnbType2Wrap .free_area {
    padding: 6.67vw 5.56vw;
  }
  #mobileGnbType2Wrap .free_area .btn_navFree span {
    font-size: 4.44vw;
    letter-spacing: -0.18vw;
    background: url("https://xcdn.home-learn.com/front_site/edu/homepage/2025/main/imgs/ico_arrow_bg.png") no-repeat;
    background-size: 4.31vw;
    background-position: calc(100% - 9.72vw) calc(100% - 0.9vw);
  }
  #mobileGnbType2Wrap .gnb_area {
    padding-bottom: 13.06vw;
  }
  #mobileGnbType2Wrap .gnb_area #mobileGnbType2 {
    gap: 9.72vw 0;
    padding: 9.72vw 11.11vw 10.14vw;
    border-bottom: 1.39vw solid #f4f7f9;
  }
  #mobileGnbType2Wrap .gnb_area #mobileGnbType2 > li > a > span {
    font-size: 5.28vw;
    letter-spacing: -0.21vw;
  }
  #mobileGnbType2Wrap .gnb_area #mobileGnbType2 > li > ul {
    gap: 5.56vw 0;
    margin-top: 6.94vw;
  }
  #mobileGnbType2Wrap .gnb_area #mobileGnbType2 > li > ul > li > a > span {
    font-size: 4.17vw;
    letter-spacing: -0.17vw;
  }
  #mobileGnbType2Wrap .gnb_area .btn_navNews {
    width: calc(100% - 11.11vw);
    height: 12.5vw;
    padding: 0 5.56vw;
    margin: 6.94vw auto 5.56vw;
    line-height: 12.5vw;
    font-size: 4.17vw;
    border-radius: 2.78vw;
    background: url("https://xcdn.home-learn.com/front_site/edu/homepage/2025/main/imgs/ico_arrow_bg2.png") no-repeat #fa6432;
    background-position: calc(100% - 5.56vw);
  }
  #mobileGnbType2Wrap .gnb_area .sns_area {
    padding: 0 3.75vw 0;
    margin-bottom: 5.56vw;
  }
  #mobileGnbType2Wrap .gnb_area .sns_tit {
    margin-bottom: 5.56vw;
    font-size: 4.17vw;
    letter-spacing: -0.17vw;
  }
  #mobileGnbType2Wrap .gnb_area .sns_btn {
    gap: 0 2.78vw;
  }
  #mobileGnbType2Wrap .gnb_area .sns_btn a {
    width: 9.72vw;
    height: 9.72vw;
    background: url("https://xcdn.home-learn.com/front_site/edu/homepage/2025/main/imgs/ico_sns.png") no-repeat;
    background-size: cover;
  }
  #mobileGnbType2Wrap .gnb_area .sns_btn a:nth-child(2) {
    background-position: -12.5vw;
  }
  #mobileGnbType2Wrap .gnb_area .sns_btn a:nth-child(3) {
    background-position: -25vw;
  }
  #mobileGnbType2Wrap .gnb_area .sns_btn a:nth-child(4) {
    background-position: -37.5vw;
  }
  #mobileGnbType2Wrap .gnb_area .login_foot_area {
    gap: 0 5.56vw;
  }
  #mobileGnbType2Wrap .gnb_area .login_foot_area a {
    font-size: 3.75vw;
    letter-spacing: -0.16vw;
  }
  #mobileGnbType2Wrap .gnb_area .login_foot_item:last-child::after {
    left: -2.78vw;
    top: 10%;
    width: 0.28vw;
  }
  #mobileGnbType2Wrap .button_area {
    min-width: 66.67vw;
    padding: 2.92vw 6.39vw 3.61vw 6.39vw;
    box-shadow: 0 -0.28vw 1.39vw 0 rgba(0, 0, 0, 0.15);
  }
  #mobileGnbType2Wrap .button_area > ul > li > a::before {
    width: 8.33vw;
    height: 8.33vw;
  }
  #mobileGnbType2Wrap .button_area > ul > li > a > span {
    margin-top: 1.81vw;
    font-size: 2.22vw;
  }
  .btn_familyNav {
    top: 6.25vw;
    left: 40.97vw;
    width: 5vw;
    height: 5vw;
  }
  .btn_familyNav.open {
    left: 40.97vw;
  }
  #mobileFamilyWrap .inner {
    max-width: 100vw;
    padding: 7.64vw 6.25vw;
    border-radius: 4.17vw 4.17vw 0 0;
  }
  #mobileFamilyWrap .btn_family {
    padding-left: 31.11vw;
    background: url("/front/imgs/common/img_logo_little.png") no-repeat left, url("/front/imgs/common/btn_familyNav_arrow.png") no-repeat right;
    background-size: 25.56vw, auto;
  }
  #mobileFamilyWrap .btn_family:last-child {
    padding-top: 5vw;
    margin-top: 5vw;
    background: url("/front/imgs/common/img_logo_mid.svg") no-repeat left 5.56vw, url("/front/imgs/common/btn_familyNav_arrow.png") no-repeat right 7.64vw;
    background-size: 25.83vw, auto;
  }
  #mobileFamilyWrap .btn_family h3 {
    padding-bottom: 0.69vw;
    font-size: 4.72vw;
  }
  #mobileFamilyWrap .btn_family span {
    font-size: 3.33vw;
  }
}
.page_index .quick_video {
  display: none;
  overflow: hidden;
  width: 0;
  height: 0;
}

.quick_video {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 100%;
  width: auto;
  height: 539px;
  z-index: 9999;
  transition: all 0.5s;
}
.quick_video.stop {
  position: absolute;
  top: auto;
  bottom: 620px;
  transform: none;
}
.quick_video.on {
  width: 250px;
}

.quick_video .video_wrap {
  width: 250px;
  height: 444px;
  touch-action: manipulation;
  aspect-ratio: 9/16;
  overflow: hidden;
}
.quick_video .video_wrap iframe {
  width: 100%;
  height: 100%;
}

.quick_video .video_banner {
  width: 100%;
  height: 75px;
  margin-top: 20px;
}
.quick_video .video_banner img {
  width: 100%;
  height: 100%;
}

.quick_video .video_btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 114px;
}

.quick_video .video_wrap, .quick_video .video_banner {
  display: none;
}

.quick_video.on .video_btn {
  right: 250px;
}
.quick_video.on .video_wrap, .quick_video.on .video_banner {
  display: block;
}

@media (min-width: 1024px) and (max-width: 1450px) {
  .quick_video .video_btn {
    display: block;
  }
  .quick_video .video_wrap, .quick_video .video_banner {
    display: none;
  }
  .quick_video.on .video_btn {
    right: 250px;
  }
  .quick_video.on .video_wrap, .quick_video.on .video_banner {
    display: block;
  }
}