@charset "utf-8";

/* popup: 기존 팝업 레이아웃 설정 문제 보완 */
#popup {
  top: 0;
  height: auto;
  max-height: calc(100% - 100px);
  margin: 50px auto;
}

/* buttons */
.btn_md {
  display: inline-block;
  padding: 0 20px;
  height: 44px;
  line-height: 42px;
  font-size: 18px;
}
.btn_disabled {
  background-color: #f7f7f7;
  border: 0;
  color: #666;
}
.btn_orange {
  background-color: #ff4e00;
  border: 0;
  color: #fff;
}
.btn_round {
  border-radius: 25px;
}
.btn_wrap {
  margin-top: 22px;
}
.btn_wrap.align_right {
  text-align: right;
}

/* 페이지 공통 */
.ellipsis {
  display: block;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.text_right {
  text-align: right;
}
.page_inner {
  width: 1200px;
  margin: 0 auto;
  padding: 0 100px;
}
.page_intro {
  width: 1200px;
  margin: 73px auto 0;
  letter-spacing: -0.4px;
  text-align: center;
}
.page_intro .page_title {
  font-size: 54px;
  font-weight: bold;
}
.page_intro .page_title b.point {
  color: #ff4e00;
}
.page_intro .page_sub_title {
  margin-top: 30px;
  font-size: 32px;
  line-height: 47px;
}

/* =====================================
=============== curation ===============
======================================== */
.curation_visual {
  width: 100%;
  min-width: 1200px;
  margin-top: 84px;
}

.news_section {
  min-width: 1200px;
  padding: 91px 0 88px;
  background-color: #333;
}
.news_section h1 {
  margin: 0;
  font-family: "Roboto";
  font-size: 54px;
  font-weight: bold;
  color: #fff;
}
.news_section h1 > span {
  display: inline-block;
  margin: 13px 0 13px 15px;
  padding: 4px 0 6px 15px;
  border-left: 1px solid #cdcdcd;
  font-size: 26px;
  font-family: "Noto Sans KR";
  font-weight: 500;
  vertical-align: top;
}
.news_section .news_list {
  margin-top: 25px;
  background-color: #2c2c2c;
}

.news_section .news_list:after {
  display: block;
  content: "";
  clear: both;
}
.news_section .news_list > li {
  float: left;
  width: 50%;
}
.news_section .news_list > li > a {
  display: block;
  padding: 24px 25px 15px;
  border: 1px solid #484848;
}
.news_section .news_list > li > a:hover {
  border-color: #34efd5;
}
.news_section .news_list .news_rank {
  font-size: 20px;
  color: #34efd5;
}
.news_section .news_list .news_rank .number {
  font-size: 24px;
  font-family: "Robots";
  vertical-align: top;
  line-height: 27px;
}
.news_section .news_list .news_info {
  margin-left: 20px;
  font-size: 20px;
  color: #c8c8c8;
}
.news_section .news_list .news_title {
  margin-top: 9px;
  padding-top: 12px;
  border-top: 1px solid #484848;
  font-size: 26px;
  color: #fff;
}

.board_section {
  padding: 106px 0 105px;
}
.board_section .tab_menu {
  border-bottom: 1px solid #333;
  overflow: hidden;
}
.board_section .tab_menu > li {
  float: left;
  width: 16.666%;
}
.board_section .tab_menu .tab {
  position: relative;
  display: block;
  width: 100%;
  border: 1px solid #cdcdcd;
  border-bottom: 0;
  font-size: 20px;
  color: #999;
  line-height: 60px;
  text-align: center;
}
.board_section .tab_menu > li + li .tab {
  border-left: 0;
  background-color: #fff;
}
.board_section .tab_menu .tab.active {
  background-color: #ff5a12;
  border: 0;
  font-weight: 500;
  line-height: 61px;
  color: #fff;
}
.board_section .tab_menu .tab.active::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border: 1px solid #333;
  border-bottom: 0;
}

.board_utils {
  margin-top: 20px;
}
.board_utils:after {
  content: "";
  display: block;
  clear: both;
}
.board_utils .option_buttons {
  float: left;
}
.board_utils .option_buttons .selectWrapper + .selectWrapper {
  margin-left: 5px;
}
.board_utils .option_buttons .selectWrapper {
  border-radius: 36px;
  display: inline-block;
  overflow: hidden;
}
.board_utils .option_buttons .selectWrapper select {
  outline: none;
  text-align: center;
  text-align-last: center;
  text-align: center;
  -ms-text-align-last: center;
  -moz-text-align-last: center;
  -webkit-appearance: none;
  appearance: none;
}
.board_utils .board_title {
  margin-right: 10px;
  font-size: 48px;
  font-weight: 500;
  line-height: 34px;
  vertical-align: top;
}
.board_utils button + .button {
  margin-left: 5px;
}
.board_utils .search_area {
  float: right;
  display: flex;
}
.board_utils .search_area .keyword {
  position: relative;
  width: 324px;
  margin-left: 10px;
}
.board_utils .search_area .keyword input[type="text"] {
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 1px solid #ccc;
}
.board_utils .search_area .keyword button {
  z-index: 1;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
}
.board_utils .search_area .btn_link {
  border: 0;
  background-color: #ff4e00;
}

.borad_view {
  width: 100%;
  margin-top: 20px;
  border-top: 2px solid #333;
  border-bottom: 1px solid #cdcdcd;
  table-layout: fixed;
}

.borad_view thead tr th {
  position: relative;
  padding: 17px 0 18px;
  background-color: #f7f7f7;
  color: #333333;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
}
.borad_view thead tr th + th:after {
  content: "";
  position: absolute;
  left: 0;
  top: 20px;
  width: 1px;
  height: 16px;
  background-color: #cdcdcd;
}
.borad_view tbody td {
  padding: 26px 5px;
  border: 0;
  border-top: 1px solid #cdcdcd;
  font-size: 16px;
  text-align: center;
}
.borad_view tbody .label_orange {
  color: #ff4e00;
}
.borad_view tbody .label_green {
  color: #009984;
}
.borad_view tbody td .comment {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 8px;
  background-color: #04d2c8;
  border-radius: 50%;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}
.borad_view tbody td .font_eng {
  font-family: "Roboto";
  font-size: 18px;
}
.borad_view.orange_point thead tr th {
  background-color: #ff4e00;
  color: #fff;
}
.borad_view.orange_point thead tr th + th:after {
  background-color: #d24000;
}
.btn_wrap + .borad_view {
  margin-top: 58px;
}

.board_write {
  width: 100%;
  border-top: 2px solid #333;
}
.board_write tbody tr th,
.board_write tbody tr td {
  border-bottom: 1px solid #cdcdcd;
}
.board_write tbody tr th {
  padding: 28px 20px;
  background-color: #f7f7f7;
  font-size: 18px;
  font-weight: normal;
  text-align: left;
}
.board_write tbody tr td {
  padding: 20px;
}
.board_write .input_area {
  font-size: 18px;
}
.board_write .input_area input[type="text"] {
  width: 100%;
  height: 44px;
  padding: 0 10px;
  border: 1px solid #cdcdcd;
}
.board_write .input_area input[type="file"] {
  margin-top: 6px;
}
.board_write .input_area textarea {
  width: 100%;
  height: 300px;
  padding: 0;
  border: 0;
}

.share_buttons {
  margin-top: 24px;
  font-size: 0;
  text-align: right;
}
.share_buttons button {
  border: 0;
  background-color: transparent;
}
.share_buttons button + button {
  margin-left: 10px;
}
.share_buttons + .board_write {
  margin-top: 90px;
}

.calendar_wrap {
  margin-top: 82px;
}
.calendar_wrap table {
  border-top: 2px solid #4199cb;
}
.calendar_wrap table tr .calendar_week--weekend {
  color: #f82424;
}
.calendar_wrap table thead tr th {
  padding: 9px 17px;
  font-size: 26px;
  font-weight: bold;
  background-color: #ddeff9;
}
.calendar_wrap table thead tr th > span {
  margin-left: 8px;
  font-family: "Roboto";
  font-size: 18px;
  font-weight: 500;
}
.calendar_wrap table tbody tr td {
  height: 152px;
  padding: 12px 17px;
  background-color: #fbfbfb;
  border-color: #cdcdcd;
  vertical-align: top;
}
.calendar_wrap table tbody tr td:first-child {
  border-left: 0;
}
.calendar_wrap table tbody tr td:last-child {
  border-right: 0;
}
.calendar_wrap table tbody tr:first-child td {
  border-top: 0;
}
.calendar_wrap table tbody tr:last-child td {
  border-bottom: 0;
}
.calendar_wrap table tbody tr td .calendar_day {
  margin-bottom: 12px;
  font-family: "Roboto";
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
}
.calendar_wrap table tbody tr td .calendar_schedule {
  display: block;
  padding: 7px;
  border-left-width: 2px;
  border-left-style: solid;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  font-size: 16px;
  line-height: 18px;
  letter-spacing: -0.75px;
}
.calendar_wrap table tbody tr td .calendar_schedule + .calendar_schedule {
  margin-top: 5px;
}
.calendar_wrap table tbody tr td .calendar_schedule.point_red {
  border-color: #ff4e00;
  background-color: #ffe7dd;
}
.calendar_wrap table tbody tr td .calendar_schedule.point_blue {
  border-color: #4581fe;
  background-color: #d5e3ff;
}
.calendar_wrap table tbody tr td .calendar_day + .calendar_schedule {
  margin-top: 9px;
}
.check_area .check {
  position: relative;
  display: inline-block;
  min-width: 95px;
  margin-right: 20px;
  padding-left: 42px;
  padding-top: 2px;
  font-size: 18px;
  font-weight: 400;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.check_area .check input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}
.check_area .check_mark {
  position: absolute;
  top: 0;
  left: 0;
  height: 32px;
  width: 32px;
  background-color: #fff;
  border: 1px solid #cdcdcd;
  border-radius: 4px;
}
.check_area .check input[type="radio"]:checked ~ .check_mark {
  border-color: transparent;
  background-color: #ff4e00;
}
.check_area .check_mark:after {
  content: "";
  position: absolute;
  display: none;
}
.check_area .check .check_mark:after {
  left: 11px;
  top: 5px;
  width: 9px;
  height: 15px;
  border: solid #cdcdcd;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.check_area .check input[type="checkbox"] ~ .check_mark:after,
.check_area .check input[type="radio"] ~ .check_mark:after {
  display: block;
}
.check_area .check input[type="checkbox"]:checked ~ .check_mark:after,
.check_area .check input[type="radio"]:checked ~ .check_mark:after {
  border-color: #fff;
}

.custom-select {
  position: relative;
  display: inline-block;
}
.custom-select + .custom-select {
  margin-left: 10px;
}
.custom-select select {
  display: none;
}
.custom-select .select-selected:after {
  position: absolute;
  content: "";
  right: 15px;
  top: 14px;
  width: 10px;
  height: 10px;
  border: solid #cdcdcd;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.custom-select .select-selected.select-arrow-active {
  border-color: #ff4e00;
  border-bottom-color: transparent;
}
.custom-select .select-selected.select-arrow-active:after {
  top: 18px;
  border-color: #ff4e00;
  transform: rotate(225deg);
}
.custom-select .select-selected {
  color: #999;
  border: 1px solid #cdcdcd;
}
.select-items div,
.custom-select .select-selected {
  padding: 8px 16px;
  background-color: #fff;
  font-size: 18px;
  line-height: 26px;
  cursor: pointer;
  user-select: none;
}
.custom-select .select-items {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99;
  border: 1px solid #ff4e00;
  border-top: 0;
}
.custom-select .select-hide {
  display: none;
}
.custom-select .select-items div:hover,
.custom-select .same-as-selected {
  font-weight: 500;
  color: #ff4e00;
}

.video_list {
  margin: -5px;
  margin-top: 86px;
  overflow: hidden;
}
.video_list li {
  float: left;
  width: 50%;
  padding: 5px;
}
.video_list li .video {
  position: relative;
  height: 281px;
  background-color: #cdcdcd;
}
.video_list li .video .video_label {
  position: absolute;
  left: 0;
  top: 0;
  width: 178px;
  font-size: 26px;
  line-height: 63px;
  font-weight: 500;
  background-color: #333;
  color: #fff;
  opacity: 0.9;
  text-align: center;
}

/* =====================================
=============== fusion ===============
======================================== */

.fusion_section {
  min-width: 1200px;
  color: #fff;
}
.fusion_section .section_title {
  font-size: 68px;
  font-weight: 400;
  line-height: 86px;
}
.fusion_section .section_title .point_blue {
  color: #9cfbff;
}
.fusion_section .section_title .point_purple {
  color: #ecc3fc;
}
.fusion_section .section_desc_01 {
  font-size: 32px;
  line-height: 46px;
}
.fusion_section .section_desc_02 {
  font-size: 26px;
  line-height: 44px;
}
.fusion_section .section_desc_03 {
  font-size: 45px;
  line-height: 64px;
  color: #333333;
}
.fusion_section .metaverse_vod {
  margin-top: 74px;
  text-align: center;
}
.fusion_section .metaverse_vod iframe {
  border: 0;
}

.fusion_section.metaverse {
  margin-top: 81px;
  padding: 167px 0 152px;
  background: url("../images/metaverse/metabus_bg.jpg") 0 0 / cover;
}
.fusion_section.ai {
  padding: 187px 0 152px;
  background: url("../images/metaverse/ai_bg.jpg") 0 0 / cover;
}

.fusion_section .item_list {
  margin-top: 101px;
  overflow: hidden;
}
.fusion_section .item_list li {
  float: left;
  width: 50%;
}
.btn_apply {
  display: block;
  max-width: 458px;
  height: 100px;
  line-height: 98px;
  margin: 50px auto 0;
  background-color: #3d7aff;
  font-size: 32px;
  font-weight: bold;
  color: #fff;
  text-align: center;
  border-radius: 46px;
}

.post_wrap .post_title {
  margin-top: 32px;
  padding: 17px 10px 18px;
  background-color: #ffe1d4;
  font-size: 18px;
  text-align: center;
}
.post_wrap .post_info {
  padding: 15px 10px;
  font-size: 16px;
  overflow: hidden;
}
.post_wrap .post_info .post_date {
  float: left;
}
.post_wrap .post_info .post_view {
  float: right;
}
.post_wrap .post_info .post_info--data {
  font-family: "Roboto";
  font-size: 18px;
}
.post_wrap .post_desc {
  min-height: 263px;
  padding: 15px 20px;
  border-top: 1px solid #cdcdcd;
  border-bottom: 1px solid #cdcdcd;
  font-size: 16px;
  line-height: 22px;
}
.post_wrap .post_desc + .btn_wrap {
  margin-top: 18px;
}

/* ONTACT_서비스 > 대치.목동 학원가_Live > 센터소개 팝업 */
.center_content {
  text-align: center;
  color: #000;
}
.center_content .btn_link {
  display: block;
  width: 396px;
  height: 54px;
  margin: 45px auto 0;
  font-size: 24px;
  font-weight: bold;
  line-height: 52px;
  color: #fff;
  box-shadow: 0px 3px 6px #00000075;
}
.center_content .title {
  margin-top: 20px;
  font-size: 32px;
  font-weight: bold;
}
.center_content .title img {
  margin-right: 16px;
  vertical-align: text-top;
}
.center_content .sub_title {
  margin-top: 16px;
  font-size: 32px;
  line-height: 37px;
}
.center_content .center_lecture {
  width: 672px;
  margin: 36px auto 16px;
  padding: 26px 88px 36px;
  background-color: #f2f2f2;
}
.center_content .center_lecture .lecture_title {
  font-size: 24px;
}
.center_content .center_lecture .lecture_title img {
  margin-right: 16px;
  vertical-align: middle;
}
.center_content .center_lecture .lecture_list {
  margin-top: 16px;
}
.center_content .center_lecture .lecture_list li {
  background-color: #fff;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 5px;
}
.center_content .center_lecture .lecture_list li + li {
  margin-top: 12px;
}
.center_content .center_lecture .lecture_list li a {
  display: block;
  padding: 11px 10px;
  font-size: 16px;
}

/* 공부습관 > [의무자습]관리 */
.list_view {
  margin-top: 32px;
  text-align: center;
}
.list_view .list_head {
  background: #4c83f7;
  border-radius: 10px;
  box-shadow: 0px 3px 6px #00000029;
}
.list_view .list_head:after {
  content: "";
  display: block;
  clear: both;
}
.list_view .list_head > li {
  float: left;
  color: #fff;
  padding: 22px 5px;
  font-size: 20px;
}
.list_view .list_body > li {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 8px;
  background: #ffffff 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 6px #00000029;
  border-radius: 5px;
  overflow: hidden;
}
.list_view .list_body > li .list_item {
  position: relative;
  display: block;
  float: left;
  padding: 28px 4px;
  font-size: 20px;
}
.list_view .list_body > li .list_item .item_img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 88px;
  height: 88px;
  /* margin: -30px 0 0 -44px; */
  margin: -44px 0 0 -44px;

  object-fit: cover;
}
.list_view .list_body > li .list_item .tbl_link {
  text-decoration: underline;
}

/* 학부모 아카데미 */
.video_list + .section_title_line {
  margin-top: 47px;
}