@charset "UTF-8";
/*---------------------------------------*/
/*--------   Table of contents   --------*/
/*
0.  _reset.scss         : 초기화
0.  incommon.scss       : @use "theme"; @use "mixin"; 공통 scss 
0.  cl.scss             : ClassLink's scss
1.  login.scss          : 로그인, 회원가입 관련
2.  mypage.scss         : 마이페이지=내정보(공통)
3.  myhome.scss         : 마이홈-학생,선생님,프랜차이즈,CL
4.  ac_manage.scss      : 학원관리-3.관리-(1)운영관리-선생님관리,학생관리,반관리,시험관리
5.  ac_preparation.scss : 학원관리-1.수업준비:자료실,레슨,커리큘럼,강좌
6.  ac_manage2.scss     : 학원관리-3.관리-출결관리,프랜차이즈가입관리,결제관리,공지사항
7.  ac_class.scss       : 학원관리-2.수업-(1)강의코스:강의계획서,과제함,노트함
8.  ac_class2.scss      : 학원관리-2.수업-(2)학습함:질문함,리포트
9.  ac_building.scss    : 학원관리-건물관리:자료실,패키지,건물SET,빌딩
10. ac_building.scss    : 학원관리-건물관리:자료실,패키지,건물SET,빌딩
11. fr_manage.scss      : 프랜차이즈관리-관리:가맹관리,결제관리,운영관리,공지사항
12. fr_class.scss       : 프랜차이즈관리-수업:자료실,레슨,커리큘럼
13. fr_building.scss    : 프랜차이즈관리-건물:자료실,패키지,건물SET
14. cl_manage.scss      : CL관리자-관리:FC이용현황, 교육기관이용현황, 결제 관리, 공지사항
15. cl_building.scss    : CL관리자-건물:프랜차이즈, 지역축제
16. std_class.scss      : 학생사용자-수업:시간표,질문함,필기함,리포트
17. std_class2.scss     : 학생사용자-강의코스:강의계획서,과제함,노트함
18. std_manage.scss     : 학생사용자-관리:시험결과,출결,공지사항,다운로드
19. app_student.scss    : app 하이브리드화면
100.main.scss           : 메인 홈페이지 - 메인페이지
-----------------------------------------*/
@import url("../plugins/bootstrap/bootstrap.min.css");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap");
/*---------------------------------------*/
/*--------   0. reset.scss   ------------*/
/*---------------------------------------*/
/* 
http://meyerweb.com/eric/tools/css/reset/ 
v2.0 | 20110126
License: none (public domain)
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
  font-size: 100px;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*---------------------------------------*/
/*--------   theme.scss   ---------------*/
/*---------------------------------------*/
/* All */
html,
body {
  height: 100%;
  font-family: "Noto Sans KR", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
  color: #454545;
  letter-spacing: -0.5px;
}

ul,
ol {
  margin-bottom: 0;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
  width: 10px;
}

::-webkit-scrollbar:horizontal {
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: #D1D3D4;
  border-radius: 10px;
  border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #ffffff;
}

/* icons */
.icons_home {
  display: inline-block;
  width: 24px;
  height: 22px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_home.svg");
}

.icons_user {
  display: inline-block;
  width: 22px;
  height: 22px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_user.svg");
}

.icons_new {
  display: inline-block;
  width: 24px;
  height: 12px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_new.svg");
}

.icons_mobilemu {
  display: inline-block;
  width: 24px;
  height: 18px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icon_mobilemu.svg");
}

.icons_arrow_up {
  display: inline-block;
  width: 16px;
  height: 16px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_arrow.svg");
}

.icons_arrow_dn {
  display: inline-block;
  width: 16px;
  height: 16px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_arrow.svg");
  transform: rotate(180deg);
}

.icons_arrow_r {
  display: inline-block;
  width: 16px;
  height: 16px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_arrow.svg");
  transform: rotate(90deg);
}

.icons_arrow_l {
  display: inline-block;
  width: 16px;
  height: 16px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_arrow.svg");
  transform: rotate(270deg);
}

.icons_arrow2_l {
  display: inline-block;
  width: 26px;
  height: 26px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_arrow2.svg");
}

.icons_close {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_close.svg");
}

.icons_plus {
  display: inline-block;
  width: 14px;
  height: 14px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_plus.svg");
}

.icons_link {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_link.svg");
}

.icons_unlink {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_unlink.svg");
}

.icons_play {
  display: inline-block;
  width: 24px;
  height: 26px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_play.svg");
}

.icons_sound {
  display: inline-block;
  width: 26px;
  height: 24px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_sound.svg");
}

.icons_fullscreen {
  display: inline-block;
  width: 24px;
  height: 24px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_fullscreen.svg");
}

.icons_fullscreenzoom {
  display: inline-block;
  width: 24px;
  height: 24px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_fullscreenzoom.svg");
}

.icons_people {
  display: inline-block;
  width: 22px;
  height: 22px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_people.svg");
}

.icons_person {
  display: inline-block;
  width: 18px;
  height: 22px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_person.svg");
}

.icons_download {
  display: inline-block;
  width: 18px;
  height: 22px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_download.svg");
}

.icons_information {
  display: inline-block;
  width: 22px;
  height: 22px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_information.svg");
}

.icons_clock {
  display: inline-block;
  width: 22px;
  height: 22px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_clock.svg");
}

.icons_memjoin {
  display: inline-block;
  width: 22px;
  height: 22px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_memjoin.svg");
}

.icons_login {
  display: inline-block;
  width: 22px;
  height: 22px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_login.svg");
}

.icons_mu_on {
  display: inline-block;
  width: 4px;
  height: 16px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_mu_on.svg");
}

.icons_mu_off {
  display: inline-block;
  width: 4px;
  height: 16px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_mu_off.svg");
}
.icons_mu_off:hover, .icons_mu_off:focus, .icons_mu_off:active {
  background-image: url(../images/icons/icon_mu_on.svg);
  cursor: pointer;
}

.icons_refresh, .btn-refresh {
  display: inline-block;
  width: 30px;
  height: 28px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_refresh.svg");
}

.icons_refresh_hover, .btn-refresh:hover {
  display: inline-block;
  width: 30px;
  height: 28px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_refresh_hover.svg");
}

.icons_calendar_on {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_calendar_on.svg");
}

.icons_calendar_off {
  display: inline-block;
  width: 40px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_calendar_off.svg");
}
.icons_calendar_off:hover, .icons_calendar_off:focus, .icons_calendar_off:active {
  background-image: url(../images/icons/icon_calendar_on.svg);
  cursor: pointer;
}

.icons_search_on {
  display: inline-block;
  width: 22px;
  height: 22px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_search_on.svg");
}

.icons_search_off {
  display: inline-block;
  width: 22px;
  height: 22px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_search_off.svg");
}
.icons_search_off:hover, .icons_search_off:focus, .icons_search_off:active {
  background-image: url(../images/icons/icon_search_on.svg);
  cursor: pointer;
}

.icons_eye_on {
  display: inline-block;
  width: 20px;
  height: 14px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_eye_on.svg");
}

.icons_eye_off {
  display: inline-block;
  width: 20px;
  height: 14px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_eye_off.svg");
}

.icons_camera {
  display: inline-block;
  width: 28px;
  height: 28px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_camera.svg");
}

.icons_camera_gray {
  display: inline-block;
  width: 28px;
  height: 28px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_camera_gray.svg");
}

.icons_bell_on {
  display: inline-block;
  width: 28px;
  height: 33px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_bell_on.svg");
  background-size: 28px 27px;
  background-position: 0 100%;
}
.icons_bell_on.newlabel {
  background-size: 16px 16px, 28px 27px;
  background-position: 100% 0, 0 100%;
  background-image: url("../images/icons/icon_new_label.svg"), url("../images/icons/icon_bell_on.svg");
}

.icons_bell_off {
  display: inline-block;
  width: 28px;
  height: 33px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_bell_off.svg");
  background-size: 28px 27px;
  background-position: 0 100%;
}
.icons_bell_off.newlabel {
  background-size: 16px 16px, 28px 27px;
  background-position: 100% 0, 0 100%;
  background-image: url("../images/icons/icon_new_label.svg"), url("../images/icons/icon_bell_off.svg");
}
.icons_bell_off.newlabel:focus, .icons_bell_off.newlabel:hover {
  background-image: url("../images/icons/icon_new_label.svg"), url("../images/icons/icon_bell_on.svg");
}
.icons_bell_off:focus, .icons_bell_off:hover {
  background-image: url("../images/icons/icon_bell_on.svg");
}

.icons_move_on {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_move_on.svg");
}

.icons_move_off {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_move_off.svg");
}
.icons_move_off:hover, .icons_move_off:focus, .icons_move_off:active {
  background-image: url("../images/icons/icon_move_on.svg");
  cursor: pointer;
}

.icons_pencil_on {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_pencil_on.svg");
}

.icons_pencil_off {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_pencil_off.svg");
}
.icons_pencil_off:hover, .icons_pencil_off:focus, .icons_pencil_off:active {
  background-image: url(../images/icons/icon_pencil_on.svg);
  cursor: pointer;
}

.icons_zoom_on {
  display: inline-block;
  width: 18px;
  height: 18px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_zoom_on.svg");
}

.icons_zoom_off {
  display: inline-block;
  width: 18px;
  height: 18px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_zoom_off.svg");
}
.icons_zoom_off:hover, .icons_zoom_off:focus, .icons_zoom_off:active {
  background-image: url(../images/icons/icon_zoom_on.svg);
  cursor: pointer;
}

.icons_arrow_circle_up_off, .icons_arrow_circle_r_off, .icons_arrow_circle_l_off, .icons_arrow_circle_dn_off {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  border-radius: 50%;
  background-color: #FFFFFF;
  background-image: url("../images/icons/icon_arrow_light1.svg");
  background-size: 16px auto;
  box-shadow: 0px 2px 3px 3px rgba(0, 0, 0, 0.07);
}

.icons_arrow_circle_up_on, .icons_arrow_circle_r_on, .icons_arrow_circle_l_on, .icons_arrow_circle_dn_on {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  border-radius: 50%;
  background-color: #7391FA;
  background-image: url("../images/icons/icon_arrow_white.svg");
  background-size: 16px auto;
  box-shadow: 0px 2px 3px 3px rgba(0, 0, 0, 0.07);
}

.icons_arrow_circle_dn_off {
  transform: rotate(180deg);
  box-shadow: 0px -2px 3px 3px rgba(0, 0, 0, 0.07);
}

.icons_arrow_circle_dn_on {
  transform: rotate(180deg);
  box-shadow: 0px -2px 3px 3px rgba(0, 0, 0, 0.07);
}

.icons_arrow_circle_l_off {
  transform: rotate(-90deg);
  box-shadow: -2px 0px 3px 3px rgba(0, 0, 0, 0.07);
}

.icons_arrow_circle_l_on {
  transform: rotate(-90deg);
  box-shadow: -2px 0px 3px 3px rgba(0, 0, 0, 0.07);
}

.icons_arrow_circle_r_off {
  transform: rotate(90deg);
  box-shadow: 2px 0px 3px 3px rgba(0, 0, 0, 0.07);
}

.icons_arrow_circle_r_on {
  transform: rotate(90deg);
  box-shadow: 2px 0px 3px 3px rgba(0, 0, 0, 0.07);
}

.icons_arrow_square_dn {
  display: inline-block;
  width: 38px;
  height: 38px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_arrow_square_dn.svg");
}

.icons_arrow_square_l {
  display: inline-block;
  width: 38px;
  height: 38px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_arrow_square_dn.svg");
  transform: rotate(90deg);
}

.icons_arrow_square_r {
  display: inline-block;
  width: 38px;
  height: 38px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_arrow_square_dn.svg");
  transform: rotate(-90deg);
}

.icons_plus_circle_on {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_plus_circle_on.svg");
}

.icons_plus_circle_off {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_plus_circle_off.svg");
}
.icons_plus_circle_off:hover, .icons_plus_circle_off:focus, .icons_plus_circle_off:active {
  background-image: url(../images/icons/icon_plus_circle_on.svg);
  cursor: pointer;
}

.icons_minus_circle_on {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_minus_circle_on.svg");
}

.icons_minus_circle_off {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_minus_circle_off.svg");
}

.icons_minus_circle_alph {
  display: inline-block;
  width: 32px;
  height: 32px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_minus_circle_alph.svg");
}

.icons_x_circle_on {
  display: inline-block;
  width: 16px;
  height: 16px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_x_circle_on.svg");
}

.icons_x_circle_off {
  display: inline-block;
  width: 16px;
  height: 16px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_x_circle_off.svg");
}

.icons_plus_circle {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_plus_circle.svg");
}

.icons_thumbnail {
  display: inline-block;
  width: 78px;
  height: 78px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_thumbnail.svg");
}

.icons_thumbnail_blue {
  display: inline-block;
  width: 78px;
  height: 78px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_thumbnail_blue.svg");
}

.icons_parentstd {
  display: inline-block;
  width: 29px;
  height: 23px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_parentstd.png");
}

.icons_parent {
  display: inline-block;
  width: 25.3px;
  height: 22px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_parent.svg");
}

.icons_franchise {
  display: inline-block;
  width: 20px;
  height: 18px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_franchise.svg");
}

.icons_printer {
  display: inline-block;
  width: 24px;
  height: 22px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_printer.svg");
}

.icons_check_circle {
  display: inline-block;
  width: 18px;
  height: 18px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_check_circle.svg");
}

.icons_check_circle_gray {
  display: inline-block;
  width: 18px;
  height: 18px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_check_circle_gray.svg");
}

.icon_company {
  display: inline-block;
  width: 127px;
  height: 125px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icon_company.png);
}
@media (max-width: 1199.98px) {
  .icon_company {
    width: 107px;
    height: 105px;
  }
}

.icon_target {
  display: inline-block;
  width: 127px;
  height: 125px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icon_target.png);
}

.icon_purpose {
  display: inline-block;
  width: 127px;
  height: 125px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icon_purpose.png);
}

/* btns */
.btn:focus,
.btn:active {
  box-shadow: none;
}

.btn_crud_point {
  align-items: center;
  min-width: 70px;
  height: 40px;
  padding: 7px 24px;
  gap: 10px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 400;
  background: #7391FA;
  color: #FFFFFF;
  font-weight: 500;
}
.btn_crud_point:hover, .btn_crud_point:focus, .btn_crud_point:active {
  background: #2C51D7;
  color: #FFFFFF;
  font-weight: 500;
}
.btn_crud_point.disabled {
  cursor: default;
  box-shadow: none;
  background: #FDFDFD;
  color: #D1D3D4;
  border: 0.4px solid #E6E7E8;
  font-weight: 400;
}

.btn_crud_default {
  align-items: center;
  min-width: 70px;
  height: 40px;
  padding: 7px 24px;
  gap: 10px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 400;
  background: #F9F9FC;
  border: 0.4px solid #D1D3D4;
  color: #454545;
}
.btn_crud_default:hover, .btn_crud_default:focus, .btn_crud_default:active {
  background: #E6E7E8;
  border-color: #A7A9AC;
  color: #454545;
}
.btn_crud_default.disabled {
  cursor: default;
  box-shadow: none;
  background: #FDFDFD;
  color: #D1D3D4;
  border: 0.4px solid #E6E7E8;
  font-weight: 400;
}

.btn_crud_danger {
  align-items: center;
  min-width: 70px;
  height: 40px;
  padding: 7px 24px;
  gap: 10px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 400;
  background: #FFFBFB;
  border: 0.4px solid #FB5353;
  color: #FB5353;
}
.btn_crud_danger:hover, .btn_crud_danger:focus, .btn_crud_danger:active {
  background: #FB5353;
  border: 0.4px solid #FB5353;
  color: #FFFFFF;
}
.btn_crud_danger.disabled {
  cursor: default;
  box-shadow: none;
  background: #FDFDFD;
  color: #D1D3D4;
  border: 0.4px solid #E6E7E8;
  font-weight: 400;
}

.btn_filter {
  align-items: center;
  min-width: 70px;
  height: 40px;
  padding: 7px 24px;
  gap: 10px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 400;
  background: #F9F9FC;
  border: 0.4px solid #D1D3D4;
  color: #454545;
  padding: 8px 10px;
}
.btn_filter::after {
  display: inline-block;
  content: "";
  width: 18px;
  height: 12px;
  top: 0;
  right: 0;
  margin-left: 10px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icons/icon_arrow_dn.svg);
}
.btn_filter.active::after {
  background-image: url(../images/icons/icon_arrow.svg);
}
.btn_filter.disabled {
  cursor: default;
  box-shadow: none;
  background: #FDFDFD;
  color: #D1D3D4;
  border: 0.4px solid #E6E7E8;
  font-weight: 400;
}

.btn_activated {
  align-items: center;
  min-width: 70px;
  height: 40px;
  padding: 7px 24px;
  gap: 10px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 400;
  min-width: unset;
  font-size: 14px;
  background: #FFFFFF;
  border: 0.4px solid #D1D3D4;
  color: #A7A9AC;
}
.btn_activated:hover, .btn_activated:focus, .btn_activated:active, .btn_activated.active {
  background: #F9F9FB;
  border: 0.4px solid #7391FA;
  color: #7391FA;
}

.btn_choice {
  align-items: center;
  min-width: 70px;
  height: 40px;
  padding: 7px 24px;
  gap: 10px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 400;
  min-width: unset;
  font-size: 14px;
  background: #FFFFFF;
  border: 0.4px solid #D1D3D4;
  color: #A7A9AC;
}
.btn_choice:hover, .btn_choice:focus, .btn_choice:active, .btn_choice.active {
  background: #F9F9FB;
  border: 0.4px solid #4FCED0;
  color: #4FCED0;
}

.btn_nav_myhome {
  text-align: center;
  min-width: 90px;
  height: 32px;
  border: 1px solid #A7A9AC;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #A7A9AC;
  vertical-align: middle;
  line-height: 18px;
}
.btn_nav_myhome:hover {
  color: #A7A9AC;
}
.btn_nav_myhome::before {
  display: inline-block;
  content: "";
  margin-right: 4px;
  margin-bottom: -2px;
  width: 16px;
  height: 16px;
  background: url("../images/icons/icon_home.svg") no-repeat center;
  background-size: contain;
}
.btn_nav_myhome.active, .btn_nav_myhome:hover, .btn_nav_myhome:focus {
  border-color: #7391FA;
  color: #7391FA;
}
.btn_nav_myhome.active::before, .btn_nav_myhome:hover::before, .btn_nav_myhome:focus::before {
  background: url("../images/icons/icon_home_active.svg") no-repeat center;
  background-size: contain;
}

.btn_nav_user {
  text-align: center;
  min-width: 90px;
  height: 32px;
  border: 1px solid #A7A9AC;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #A7A9AC;
  vertical-align: middle;
  line-height: 18px;
}
.btn_nav_user:hover {
  color: #A7A9AC;
}
.btn_nav_user::before {
  display: inline-block;
  content: "";
  margin-right: 4px;
  margin-bottom: -2px;
  width: 18px;
  height: 18px;
  background: url("../images/icons/icon_user.svg") no-repeat center;
  background-size: contain;
}
.btn_nav_user.active, .btn_nav_user:hover, .btn_nav_user:focus {
  border-color: #7391FA;
  color: #7391FA;
}
.btn_nav_user.active::before, .btn_nav_user:hover::before, .btn_nav_user:focus::before {
  background: url("../images/icons/icon_user_active.svg") no-repeat center;
  background-size: contain;
}
.btn_nav_user::before {
  margin-bottom: -4px;
}

.btn_nav_bell {
  text-align: center;
  min-width: 90px;
  height: 32px;
  border: 1px solid #A7A9AC;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #A7A9AC;
  vertical-align: middle;
  line-height: 18px;
}
.btn_nav_bell:hover {
  color: #A7A9AC;
}
.btn_nav_bell::before {
  display: inline-block;
  content: "";
  margin-right: 4px;
  margin-bottom: -2px;
  width: 16px;
  height: 16px;
  background: url("../images/icons/icon_bell_off.svg") no-repeat center;
  background-size: contain;
}
.btn_nav_bell.active, .btn_nav_bell:hover, .btn_nav_bell:focus {
  border-color: #7391FA;
  color: #7391FA;
}
.btn_nav_bell.active::before, .btn_nav_bell:hover::before, .btn_nav_bell:focus::before {
  background: url("../images/icons/icon_bell_on.svg") no-repeat center;
  background-size: contain;
}

.icons_bell_on {
  display: inline-block;
  width: 28px;
  height: 33px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_bell_on.svg");
  background-size: 28px 27px;
  background-position: 0 100%;
}
.icons_bell_on.newlabel {
  background-size: 16px 16px, 28px 27px;
  background-position: 100% 0, 0 100%;
  background-image: url("../images/icons/icon_new_label.svg"), url("../images/icons/icon_bell_on.svg");
}

.btn_memjoin {
  text-align: center;
  min-width: 90px;
  height: 32px;
  border: 1px solid #A7A9AC;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #A7A9AC;
  vertical-align: middle;
  line-height: 18px;
}
.btn_memjoin:hover {
  color: #A7A9AC;
}
.btn_memjoin::before {
  display: inline-block;
  content: "";
  margin-right: 4px;
  margin-bottom: -2px;
  width: 16px;
  height: 16px;
  background: url("../images/icons/icon_memjoin.svg") no-repeat center;
  background-size: contain;
}
.btn_memjoin.active, .btn_memjoin:hover, .btn_memjoin:focus {
  border-color: #7391FA;
  color: #7391FA;
}
.btn_memjoin.active::before, .btn_memjoin:hover::before, .btn_memjoin:focus::before {
  background: url("../images/icons/icon_memjoin.svg") no-repeat center;
  background-size: contain;
}

.btn_login {
  text-align: center;
  min-width: 90px;
  height: 32px;
  border: 1px solid #A7A9AC;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #A7A9AC;
  vertical-align: middle;
  line-height: 18px;
}
.btn_login:hover {
  color: #A7A9AC;
}
.btn_login::before {
  display: inline-block;
  content: "";
  margin-right: 4px;
  margin-bottom: -2px;
  width: 16px;
  height: 16px;
  background: url("../images/icons/icon_login.svg") no-repeat center;
  background-size: contain;
}
.btn_login.active, .btn_login:hover, .btn_login:focus {
  border-color: #7391FA;
  color: #7391FA;
}
.btn_login.active::before, .btn_login:hover::before, .btn_login:focus::before {
  background: url("../images/icons/.svg") no-repeat center;
  background-size: contain;
}

.btn_registration {
  text-align: center;
  min-width: 140px;
  height: 40px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 400;
  color: #FFFFFF;
  vertical-align: middle;
  line-height: 23px;
  background-color: #7391FA;
}
.btn_registration:hover, .btn_registration:active {
  color: #FFFFFF;
  background-color: #2C51D7;
}
.btn_registration.active {
  background-color: #2C51D7;
}

.btn_regi_studentsall {
  text-align: center;
  min-width: 140px;
  height: 40px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 400;
  color: #FFFFFF;
  vertical-align: middle;
  line-height: 23px;
  background-color: #7391FA;
}
.btn_regi_studentsall:hover, .btn_regi_studentsall:active {
  color: #FFFFFF;
  background-color: #2C51D7;
}
.btn_regi_studentsall.active {
  background-color: #2C51D7;
}
.btn_regi_studentsall::before {
  display: inline-block;
  content: "";
  margin-bottom: -4px;
  margin-right: 10px;
  width: 22px;
  height: 22px;
  background: url(../images/icons/icon_people_white.svg) no-repeat center;
  background-size: contain;
}

.btn_regi_student {
  text-align: center;
  min-width: 140px;
  height: 40px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 400;
  color: #FFFFFF;
  vertical-align: middle;
  line-height: 23px;
  background-color: #7391FA;
}
.btn_regi_student:hover, .btn_regi_student:active {
  color: #FFFFFF;
  background-color: #2C51D7;
}
.btn_regi_student.active {
  background-color: #2C51D7;
}
.btn_regi_student::before {
  display: inline-block;
  content: "";
  margin-bottom: -4px;
  margin-right: 10px;
  width: 18px;
  height: 22px;
  background: url(../images/icons/icon_person_white.svg) no-repeat center;
  background-size: contain;
}

.btn_regi_franchise {
  text-align: center;
  min-width: 140px;
  height: 40px;
  border-radius: 5px;
  font-size: 16px;
  font-weight: 400;
  color: #FFFFFF;
  vertical-align: middle;
  line-height: 23px;
  background-color: #7391FA;
}
.btn_regi_franchise:hover, .btn_regi_franchise:active {
  color: #FFFFFF;
  background-color: #2C51D7;
}
.btn_regi_franchise.active {
  background-color: #2C51D7;
}
.btn_regi_franchise::before {
  display: inline-block;
  content: "";
  margin-bottom: -6px;
  margin-right: 10px;
  width: 18px;
  height: 22px;
  background: url(../images/icons/icon_franchise.svg) no-repeat center;
  background-size: contain;
}

.btn_favorite_notice {
  margin: 10px;
  display: inline-block;
  width: 230px;
  height: 230px;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background-repeat: no-repeat;
  background-size: 260px, 260px;
  background-position: -15px -15px;
  background-image: url("../images/icons/btn_favorite_notice.svg");
  box-shadow: 2px 2px 10px 5px rgba(0, 0, 0, 0.2);
}
.btn_favorite_notice:hover {
  background-repeat: no-repeat;
  background-size: 260px, 260px;
  background-position: -15px -15px;
  background-image: url("../images/icons/btn_favorite_notice_hover.svg");
}

.btn_favorite_franchise {
  margin: 10px;
  display: inline-block;
  width: 230px;
  height: 230px;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background-repeat: no-repeat;
  background-size: 260px, 260px;
  background-position: -15px -15px;
  background-image: url("../images/icons/btn_favorite_franchise.svg");
  box-shadow: 2px 2px 10px 5px rgba(0, 0, 0, 0.2);
}
.btn_favorite_franchise:hover {
  background-repeat: no-repeat;
  background-size: 260px, 260px;
  background-position: -15px -15px;
  background-image: url("../images/icons/btn_favorite_franchise_hover.svg");
}

.btn_favorite_pay {
  margin: 10px;
  display: inline-block;
  width: 230px;
  height: 230px;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background-repeat: no-repeat;
  background-size: 260px, 260px;
  background-position: -15px -15px;
  background-image: url("../images/icons/btn_favorite_pay.svg");
  box-shadow: 2px 2px 10px 5px rgba(0, 0, 0, 0.2);
}
.btn_favorite_pay:hover {
  background-repeat: no-repeat;
  background-size: 260px, 260px;
  background-position: -15px -15px;
  background-image: url("../images/icons/btn_favorite_pay_hover.svg");
}

.btn_favorite_class {
  margin: 10px;
  display: inline-block;
  width: 230px;
  height: 230px;
  padding: 0;
  border: 0;
  border-radius: 30px;
  background-repeat: no-repeat;
  background-size: 260px, 260px;
  background-position: -15px -15px;
  background-image: url("../images/icons/btn_favorite_class.svg");
  box-shadow: 2px 2px 10px 5px rgba(0, 0, 0, 0.2);
}
.btn_favorite_class:hover {
  background-repeat: no-repeat;
  background-size: 260px, 260px;
  background-position: -15px -15px;
  background-image: url("../images/icons/btn_favorite_class_hover.svg");
}

.btn_status_head {
  margin: 10px;
  display: inline-block;
  width: 127px;
  height: 127px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background-repeat: no-repeat;
  background-size: 157px, 157px;
  background-position: -15px -15px;
  background-image: url("../images/icons/btn_status_head.svg");
  box-shadow: 2px 2px 10px 5px rgba(0, 0, 0, 0.2);
}

.btn_status_student {
  margin: 10px;
  display: inline-block;
  width: 127px;
  height: 127px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background-repeat: no-repeat;
  background-size: 157px, 157px;
  background-position: -15px -15px;
  background-image: url("../images/icons/btn_status_student.svg");
  box-shadow: 2px 2px 10px 5px rgba(0, 0, 0, 0.2);
}

.btn_status_franchise_director {
  margin: 10px;
  display: inline-block;
  width: 127px;
  height: 127px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background-repeat: no-repeat;
  background-size: 157px, 157px;
  background-position: -15px -15px;
  background-image: url("../images/icons/btn_status_franchise_director.svg");
  box-shadow: 2px 2px 10px 5px rgba(0, 0, 0, 0.2);
}

.btn_status_franchise_administrator {
  margin: 10px;
  display: inline-block;
  width: 127px;
  height: 127px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background-repeat: no-repeat;
  background-size: 157px, 157px;
  background-position: -15px -15px;
  background-image: url("../images/icons/btn_status_franchise_administrator.svg");
  box-shadow: 2px 2px 10px 5px rgba(0, 0, 0, 0.2);
}

.btn_status_teacher {
  margin: 10px;
  display: inline-block;
  width: 127px;
  height: 127px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background-repeat: no-repeat;
  background-size: 157px, 157px;
  background-position: -15px -15px;
  background-image: url("../images/icons/btn_status_teacher.svg");
  box-shadow: 2px 2px 10px 5px rgba(0, 0, 0, 0.2);
}

.btn_gotop {
  display: inline-block;
  width: 70px;
  height: 70px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/btn_gotop.svg");
  border-radius: 50%;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}

.btn_arrow_square2_r {
  display: inline-block;
  width: 55px;
  height: 55px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_arrow_square2_right.svg");
}

.btn_arrow_square2_l {
  display: inline-block;
  width: 55px;
  height: 55px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_arrow_square2_right.svg");
  transform: rotate(180deg);
}

/* Form Elements */
.form-group label {
  margin-right: 5px;
  line-height: 39px;
  vertical-align: middle;
  font-size: 14px !important;
  font-weight: 400;
}

.form-control.is-valid,
.was-validated .form-control:valid {
  background: none;
  border-color: rgba(115, 145, 250, 0.5);
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
  border-color: rgba(115, 145, 250, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(115, 145, 250, 0.5);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
  background: none;
  border-color: rgba(251, 83, 83, 0.5);
}

.form-control {
  height: 39px;
  padding: 10px;
  font-size: 14px;
  border-radius: 5px;
  border-color: rgba(167, 169, 172, 0.4);
  border-width: 0.4px;
}
.form-control::-moz-placeholder {
  color: #D1D3D4;
}
.form-control::placeholder {
  color: #D1D3D4;
}
.form-control:focus {
  color: #454545;
  box-shadow: none;
  border-color: #7391FA;
  border-width: 1px;
}
.form-control.xs-input {
  padding: 1px 8px;
  width: auto;
  min-width: 100px;
  height: 20px;
  font-size: 12px;
  line-height: 17px;
}

.form-inline {
  width: auto;
  display: inline-block;
  vertical-align: middle;
}

.input-group.input-search {
  position: relative;
  display: inline-block;
}
.input-group.input-search .form-control {
  display: block;
  flex: none;
  float: left;
  width: -moz-fit-content;
  width: fit-content;
  width: 100%;
  border-top-right-radius: 5px !important;
  border-bottom-right-radius: 5px !important;
  padding-right: 40px;
}
.input-group.input-search .form-control:focus + .input-group-append .icons_search_off {
  background-image: url(../images/icons/icon_search_on.svg);
}
.input-group.input-search .input-group-append {
  z-index: 10;
  position: absolute;
  display: block;
  top: 0;
  right: 0;
  height: 39px;
  padding: 8px;
}
.input-group.input-search .input-group-append .btn {
  float: left;
}
.input-group.input-search .input-group-append .btn.icons_x_circle_off {
  margin-top: 2px;
  margin-right: 2px;
  padding: 8px;
}

.dropdown .dropdown-toggle {
  color: #454545;
  font-size: 16px;
  box-shadow: none;
  border-radius: 5px;
  border-color: rgba(167, 169, 172, 0.4);
  background: #fff;
}
.dropdown .dropdown-toggle::after {
  border: none;
  display: inline-block;
  width: 16px;
  height: 16px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_arrow.svg");
  transform: rotate(180deg);
}
.dropdown.show .dropdown-toggle::after {
  border: none;
  display: inline-block;
  width: 16px;
  height: 16px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url("../images/icons/icon_arrow.svg");
  transform: rotate(0deg);
}
.dropdown:not(.form-inline) .btn,
.dropdown:not(.form-inline) .dropdown-menu {
  width: 100%;
}
.dropdown .dropdown-item {
  font-size: 16px;
}

.custom-control-input {
  display: none;
}

/* .custom-control-label::before,
.custom-control-label::after {
	margin-top: -0.2rem;
	// left: -28px;
	// left: -2rem;
	width: 20px;
	height: 20px;
	border-radius: 2px;
	border-color: rgba(0, 0, 0, 0.2);
}
 */
.custom-control-input:checked ~ .custom-control-label::before {
  color: #fff;
  border-color: #7391FA;
  background-color: #7391FA;
}

.custom-control-label {
  line-height: normal;
  font-size: 14px;
}

.custom-checkbox .custom-control-input:checked ~ .custom-control-label::after {
  background-size: 67%;
}

.custom-sm .custom-control-label::before,
.custom-sm .custom-control-label::after {
  margin-top: 0;
  left: -20px;
  width: 15px;
  height: 15px;
  border-radius: 2px;
  border-color: rgba(0, 0, 0, 0.2);
}
.custom-sm .form-check-label {
  font-size: 12px;
  color: #454545;
}
.custom-sm .form-check-input {
  top: 2px;
}

/* Navs */
.nav_dapth01 {
  margin-bottom: -1px;
  justify-content: center !important;
  display: flex;
  width: -moz-max-content;
  width: max-content;
}
.nav_dapth01 .nav-link {
  padding: 20px 50px;
  color: #303033;
  font-size: 16px;
  font-weight: 400;
  line-height: 16px;
}
.nav_dapth01 .nav-link.active {
  background-color: #FFFFFF;
  color: #6857D1;
  font-weight: 500;
  border-bottom: 1px solid #6857D1;
}
.nav_dapth01 .nav-link:hover {
  color: #6857D1;
}

.nav_dapth02 {
  justify-content: center !important;
}
.nav_dapth02 .nav-link {
  margin: 0 20px;
  padding: 8px 30px;
  color: #303033;
  font-size: 16px;
  font-weight: 400;
  line-height: 23px;
}
.nav_dapth02 .nav-link.active, .nav_dapth02 .nav-link:hover, .nav_dapth02 .nav-link:focus, .nav_dapth02 .nav-link:active {
  color: #6857D1;
  font-weight: 500;
}

.nav-tabs.depth03 {
  border-bottom: none;
  margin-bottom: -1px;
}
.nav-tabs.depth03 .nav-link,
.nav-tabs.depth03 .nav-link:hover {
  padding: 12px 40px;
  min-width: 158px;
  border-width: 0.4px 0.4px 0px 0.4px;
  border-style: solid;
  border-color: rgba(167, 169, 172, 0.4);
  border-radius: 5px 5px 0px 0px;
  background-color: #FDFDFD;
  color: #454545;
  text-align: center;
}
@media (max-width: 991.98px) {
  .nav-tabs.depth03 .nav-link,
  .nav-tabs.depth03 .nav-link:hover {
    padding: 8px 16px;
    min-width: auto;
  }
}
.nav-tabs.depth03 .nav-link.active,
.nav-tabs.depth03 .nav-item.show .nav-link {
  padding: 9px 40px 10px;
  color: #2C51D7;
  border-radius: 7px 7px 0px 0px;
  border-width: 4px;
  border-color: #2C51D7;
  border-bottom: 4px solid #FFFFFF;
  background-color: #FFFFFF;
}
@media (max-width: 991.98px) {
  .nav-tabs.depth03 .nav-link.active,
  .nav-tabs.depth03 .nav-item.show .nav-link {
    padding: 5px 16px 6px;
  }
}

.tab-content.depth03 {
  padding: 30px 24px;
  background: #FFFFFF;
  border: 0.4px solid rgba(167, 169, 172, 0.4);
  border-radius: 0px 5px 5px 5px;
}

/* ModalPopup */
.modal .modal-header {
  font-size: 16px;
  font-weight: 500;
  background: #FDFDFD;
}
.modal .close {
  opacity: 1;
  padding: 12px 20px 15px;
}
.modal .modal-footer {
  border: none;
  justify-content: center;
  padding-bottom: 30px;
}
.modal .modal-body {
  text-align: center;
  padding-top: 35px;
}
.modal .modal-body .text_type01 {
  font-size: 16px;
  font-weight: 400;
}
.modal .modal-body .text_type02 {
  font-size: 14px;
  font-weight: 400;
}
.modal .modal-sm .modal-body {
  padding-bottom: 25px;
}
@media (min-width: 576px) {
  .modal .modal-sm {
    max-width: 420px;
  }
}
@media (max-width: 767.98px) {
  .modal .modal-sm {
    font-size: 14px;
  }
  .modal .modal-sm .modal-title {
    display: none;
  }
  .modal .modal-sm .modal-header {
    border-bottom: none;
  }
  .modal .modal-sm .modal-body {
    padding-top: 10px;
  }
}
.modal .modal-sm.s2 .modal-title {
  display: none;
}
.modal .modal-sm.s2 .modal-header {
  border-bottom: none;
}
.modal .modal-sm.s2 .modal-body {
  padding-top: 10px;
}

/* toast */
.toast {
  position: fixed;
  z-index: 3000;
  top: 40%;
  left: 45%;
  border: none;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}
.toast .toast-body {
  border: none;
  border-radius: 5px;
  background-color: #A7A9AC;
  padding: 5px 25px 6px;
}
.toast .message {
  font-size: 12px;
  color: #fff;
}

/*---------------------------------------*/
/*--------   0.incommon.scss   ----------*/
/*---------------------------------------*/
/* CSS-Common */
.inline_block {
  display: inline-block;
}

.form-group.form-inline {
  margin-bottom: 0;
}

.hide {
  display: none;
}

.input_file .file_input_textbox {
  float: left;
  width: calc(100% - 115px);
  height: 39px;
  padding: 10px;
  font-size: 14px;
  border-radius: 5px;
  border-color: rgba(167, 169, 172, 0.4);
  border-style: solid;
  border-width: 0.4px;
  outline: none;
  box-shadow: none;
  margin-right: 5px;
}
.input_file .file_input_div {
  position: relative;
  overflow: hidden;
}
.input_file .file_input_img_btn {
  padding: 0 0 0 5px;
}
.input_file .file_input_hidden {
  font-size: 29px;
  position: absolute;
  right: 0px;
  top: 0px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: alpha(opacity=0);
  cursor: pointer;
}

.front_button {
  width: calc(100% - 90px);
}

.form-group .btn {
  padding: 0.375rem 0.75rem;
}

.explainType01 {
  padding: 15px 30px;
  margin-top: 10px;
  margin-bottom: 10px;
  background-color: #F9F9FB;
  border-radius: 5px;
  text-align: left;
  font-size: 12px;
}

.form_ruletext {
  margin-top: -12px;
  font-size: 10.5px;
  color: #A7A9AC;
  text-align: left;
}

.invalid_text {
  margin-top: -12px;
  font-size: 10.5px;
  color: #FB5353;
  text-align: left;
}

.valid_text {
  margin-top: -12px;
  font-size: 10.5px;
  color: #7391FA;
  text-align: left;
}

.pretxt_area {
  white-space: pre-wrap;
  text-align: initial;
}

.divid {
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 12px;
  padding-left: 5px;
  margin-right: 5px;
  border-right: 1px solid #454545;
}

i.btn {
  padding: 0;
  border: none;
}

.calendar_date_bluebox {
  border: 0.4px solid rgba(167, 169, 172, 0.4);
  border-radius: 5px;
  background-color: #E7EDFF;
  border-color: #E7EDFF;
  font-size: 14px;
  height: 39px;
  padding: 10px;
  margin-right: 5px;
  width: 170px;
}

.nothing_txt {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
  color: #A7A9AC;
  flex-direction: column;
  min-height: 300px;
}
.nothing_txt .txt {
  line-height: 20px;
  margin-bottom: 15px;
}
.nothing_txt .btn_area .btn:first-child {
  margin-right: 10px;
}

.page_nodata {
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  vertical-align: middle;
  font-size: 14px;
  color: #A7A9AC;
  flex-direction: column;
  min-height: 300px;
}
.page_nodata .btn {
  margin-top: 10px;
}
.page_nodata .btn + .btn {
  margin-left: 10px;
}

.cal_symbol {
  position: relative;
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  text-align: center;
  vertical-align: middle;
  background-color: #E7EDFF;
  font-size: 27px;
  line-height: 25px;
  font-weight: 400;
  color: #454545;
}
.cal_symbol.cross {
  transform: rotate(45deg);
}

/* Layout-Common - nav */
.nav_top_wrap {
  border-bottom: 1px solid #E6E7E8;
}

.nav_top {
  position: relative;
  height: 56px;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  padding: 0 20px;
}
.nav_top .logo_area {
  line-height: 56px;
  padding: 0 15px;
}
.nav_top .logo_area img {
  vertical-align: middle;
  height: 36px;
}
.nav_top .nav_area {
  line-height: 56px;
}
.nav_top .function_area {
  line-height: 56px;
}
.nav_top .function_area .btn-refresh {
  margin-right: 10px;
}
.nav_top .mobile_navbtn_area {
  width: 26px;
  line-height: 60px;
}
.nav_top .mobile_navbtn_area .icons_mobilemu,
.nav_top .mobile_navbtn_area .icons_close {
  width: 22px;
  height: 25px;
}

.nav_sub {
  position: relative;
  height: 65px;
  padding: 14px 0 10px;
}

.nav_mobile .nav_top {
  height: 60px;
  min-width: unset;
  position: fixed;
  height: 60px;
  background-color: #fff;
  width: 100%;
  z-index: 100;
  border-bottom: 1px solid #E6E7E8;
}
.nav_mobile .logo_area,
.nav_mobile .title_area {
  line-height: 60px;
  font-size: 18px;
  font-weight: 700;
}
.nav_mobile .mobilemu_open {
  z-index: 2000;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0px;
  margin-left: -1300px;
  background-color: #FFFFFF;
}
.nav_mobile .mobilemu_open li > a {
  text-decoration: none;
}
.nav_mobile .mobilemu_open .momu_dapth00 {
  position: absolute;
  top: 0px;
  left: 65px;
}
.nav_mobile .mobilemu_open .momu_dapth00 .line {
  width: 130%;
  height: 0px;
  border: 0.4px solid #D1D3D4;
  margin-top: 30px;
  margin-left: -25px;
}
.nav_mobile .mobilemu_open .momu_dapth00 .btn_nav_login.active::before,
.nav_mobile .mobilemu_open .momu_dapth00 .btn_nav_login:hover::before,
.nav_mobile .mobilemu_open .momu_dapth00 .btn_nav_login:focus::before {
  background: url(../images/icons/icon_login.svg) no-repeat center;
  background-size: contain;
}
.nav_mobile .mobilemu_open .momu_dapth00 .btn_nav_login::before {
  display: inline-block;
  content: "";
  margin-right: 4px;
  margin-bottom: -2px;
  background: url(../images/icons/icon_login.svg) no-repeat center;
  background-size: contain;
}
.nav_mobile .mobilemu_open .momu_dapth00 .btn_nav_login::before {
  width: 24px;
  height: 24px;
  line-height: normal;
  vertical-align: middle;
  margin-top: -7px;
}
.nav_mobile .mobilemu_open .momu_dapth00 .btn_nav_login {
  text-align: center;
  min-width: 90px;
  height: 32px;
  border: 1px solid #A7A9AC;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #A7A9AC;
  vertical-align: middle;
  line-height: 18px;
}
.nav_mobile .mobilemu_open .momu_dapth00 .function_area button {
  text-align: left;
  border: none;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  margin: 5px 0;
}
.nav_mobile .mobilemu_open .momu_dapth00 .btn_nav_join.active::before,
.nav_mobile .mobilemu_open .momu_dapth00 .btn_nav_join:hover::before,
.nav_mobile .mobilemu_open .momu_dapth00 .btn_nav_join:focus::before {
  background: url(../images/icons/icon_memjoin.svg) no-repeat center;
  background-size: contain;
}
.nav_mobile .mobilemu_open .momu_dapth00 .btn_nav_join::before {
  display: inline-block;
  content: "";
  margin-right: 4px;
  margin-bottom: -2px;
  background: url(../images/icons/icon_memjoin.svg) no-repeat center;
  background-size: contain;
}
.nav_mobile .mobilemu_open .momu_dapth00 .btn_nav_join::before {
  width: 24px;
  height: 24px;
  line-height: normal;
  vertical-align: middle;
  margin-top: -7px;
}
.nav_mobile .mobilemu_open .momu_dapth00 .btn_nav_join {
  text-align: center;
  min-width: 90px;
  height: 32px;
  border: 1px solid #A7A9AC;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #A7A9AC;
  vertical-align: middle;
  line-height: 18px;
}
.nav_mobile .mobilemu_open .momu_dapth00 .function_area button {
  text-align: left;
  border: none;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  margin: 5px 0;
}
.nav_mobile .mobilemu_open .momu_dapth01 {
  padding: 0px 150px;
  margin-top: 90px;
  margin-left: -180px;
}
.nav_mobile .mobilemu_open .momu_dapth01 li {
  position: relative;
  padding: 10px 0;
  font-weight: 500;
}
.nav_mobile .mobilemu_open .momu_dapth01 li a {
  display: inline-block;
  width: 100%;
  color: #303033;
  text-align: left;
}
.nav_mobile .mobilemu_open .momu_dapth01 li a > i {
  position: absolute;
  top: 13px;
  right: -160px;
}
.nav_mobile .mobilemu_open .momu_dapth01 > li > a.changed > i {
  background-image: url("../images/icons/icon_arrow.svg");
  transform: rotate(360deg);
}
.nav_mobile .mobilemu_open .momu_dapth02 {
  padding-left: 15px;
}
.nav_mobile .mobilemu_open .momu_dapth02.hide {
  display: none;
}
.nav_mobile .mobilemu_open .momu_dapth02 li {
  padding: 10px 0;
}
.nav_mobile .mobilemu_open .momu_dapth02 li a {
  font-weight: 400;
  font-size: 14px;
  color: #454545;
}
.nav_mobile .mobilemu_open .momu_dapth03 {
  padding-left: 15px;
}
.nav_mobile .mobilemu_open .momu_dapth03 li {
  padding: 2px 0;
}
.nav_mobile .mobilemu_open .momu_dapth03 li a {
  font-weight: 400;
  font-size: 12px;
  color: #A7A9AC;
}
.nav_mobile .mobilemu_open .function_area {
  margin-top: 30px;
  margin-left: -39px;
}
.nav_mobile .mobilemu_open .function_area button {
  text-align: left;
  border: none;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  margin: 5px 0;
}
.nav_mobile .mobilemu_open .function_area .btn_nav_myhome::before,
.nav_mobile .mobilemu_open .function_area .btn_nav_user::before,
.nav_mobile .mobilemu_open .function_area .btn_nav_bell::before {
  width: 24px;
  height: 24px;
  line-height: normal;
  vertical-align: middle;
  margin-top: -7px;
}
.nav_mobile .mobilemu_open .member_area {
  padding: 20px 60px;
  border-top: 1px solid rgba(167, 169, 172, 0.4);
}
.nav_mobile .mobilemu_open .member_area button {
  text-align: left;
  border: none;
  font-size: 14px;
  font-weight: 500;
  line-height: normal;
  margin: 2px 0;
}
.nav_mobile .mobilemu_open .member_area .btn_login::before,
.nav_mobile .mobilemu_open .member_area .btn_memjoin::before {
  width: 16px;
  height: 16px;
  line-height: normal;
  vertical-align: middle;
  margin-top: -7px;
  margin-right: 8px;
}
.nav_mobile .mu_cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: none;
}

/* Layout-Common - content */
#content {
  background-color: #F9F9FB;
  padding: 20px 25px 30px;
  height: calc(100% - 130px);
}
@media (max-width: 991.98px) {
  #content {
    padding-bottom: 0;
  }
}

.content_area {
  max-width: 1228px;
  height: auto;
  margin: 0 auto;
}

/* Layout-Common - depth03content */
.web_only .header,
.web_only .content,
.web_only .nav_top {
  min-width: 992px;
  overflow-x: auto;
}
@media (max-width: 991.98px) {
  .web_only #content {
    padding: 20px 25px 30px;
  }
}
.web_only.modal-open .modal {
  overflow-x: auto;
}

.tab-content.depth03 > .tab-pane,
.modal .modal-body > .tab-pane {
  min-height: 400px;
}
.tab-content.depth03 .search_section,
.modal .modal-body .search_section {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}
.tab-content.depth03 .search_section .left_area,
.tab-content.depth03 .search_section .right_area,
.modal .modal-body .search_section .left_area,
.modal .modal-body .search_section .right_area {
  align-items: center;
}
.tab-content.depth03 .search_section .right_area,
.modal .modal-body .search_section .right_area {
  margin-left: auto;
}
.tab-content.depth03 .search_section .info_txt,
.modal .modal-body .search_section .info_txt {
  display: inline-block;
  margin-left: 5px;
  padding-top: 2px;
  font-weight: 400;
  font-size: 16px;
  vertical-align: middle;
}
.tab-content.depth03 .search_section .info_box,
.modal .modal-body .search_section .info_box {
  display: inline-block;
  padding: 0 20px;
  border: 0.4px solid rgba(167, 169, 172, 0.4);
  border-radius: 5px;
  font-weight: 400;
  font-size: 16px;
  line-height: 40px;
  vertical-align: middle;
}
.tab-content.depth03 .search_section .input-search input[type=text]::-moz-placeholder, .modal .modal-body .search_section .input-search input[type=text]::-moz-placeholder {
  font-size: 16px;
  color: rgba(167, 169, 172, 0.7);
}
.tab-content.depth03 .search_section .input-search input[type=text]::placeholder,
.modal .modal-body .search_section .input-search input[type=text]::placeholder {
  font-size: 16px;
  color: rgba(167, 169, 172, 0.7);
}
.tab-content.depth03 .table_section,
.modal .modal-body .table_section {
  position: relative;
  height: auto;
  text-align: center;
}
.tab-content.depth03 .table_section .table thead th,
.modal .modal-body .table_section .table thead th {
  font-weight: 400;
  font-size: 14px;
  padding-top: 25px;
  padding-bottom: 25px;
  border-top: none;
  border-bottom: 1px solid #D1D3D4;
  color: #454545;
}
.tab-content.depth03 .table_section .table tbody td,
.modal .modal-body .table_section .table tbody td {
  font-weight: 400;
  font-size: 16px;
  border-top: none;
  color: #454545;
}
.tab-content.depth03 .more_mu,
.modal .modal-body .more_mu {
  width: 30px;
  position: relative;
}
.tab-content.depth03 .more_mu .more_list,
.modal .modal-body .more_mu .more_list {
  position: absolute;
  right: 10px;
  top: 25px;
  font-weight: 400;
  font-size: 16px;
  border-radius: 5px;
  border: 0.4px solid rgba(167, 169, 172, 0.4);
  background: #fff;
  z-index: 2;
}
.tab-content.depth03 .more_mu .more_list li,
.modal .modal-body .more_mu .more_list li {
  padding: 5px 20px;
  min-width: 117px;
  text-align: left;
  border-top: 0.4px solid #D1D3D4;
}
.tab-content.depth03 .more_mu .more_list li:first-child,
.modal .modal-body .more_mu .more_list li:first-child {
  border-top: none;
}
.tab-content.depth03 .pagination_section,
.modal .modal-body .pagination_section {
  position: relative;
  display: flex;
  justify-content: center;
}

.pagination .page-link {
  width: 39px;
  height: 39px;
  margin: 10px 1px;
  border: 1px solid rgba(167, 169, 172, 0.4);
  border-radius: 5px;
  background: #F9F9FB;
  font-weight: 500;
  font-size: 16px;
  color: #A7A9AC;
  text-align: center;
}
.pagination .page-link.active {
  background: #E6E7E8;
  color: #454545;
}
.pagination .page-link > span.previous {
  display: block;
  width: 100%;
  height: 100%;
  background: url("../images/icons/arrow_left.svg") no-repeat center center;
}
.pagination .page-link > span.next {
  display: block;
  width: 100%;
  height: 100%;
  background: url("../images/icons/arrow_left.svg") no-repeat center center;
  transform: rotate(180deg);
}

/* Layout-Common - 2단 분리 컨텐츠 영역 */
.divide_section {
  position: relative;
  height: auto;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.divide_section .divide_area {
  width: 50%;
}

/* Layout-Common - 일반 탭 컨텐츠 */
.nav-tabs:not(.depth03) .nav-link {
  color: #454545;
  font-size: 14px;
}
.nav-tabs:not(.depth03) .nav-link:not(.active) {
  isolation: isolate;
  border-color: #e9ecef #e9ecef #dee2e6;
}

.nav-tabs:not(.depth03) + .tab-content {
  border: 0.4px solid rgba(167, 169, 172, 0.4);
  border-radius: 5px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: none;
  padding: 30px 15px;
  overflow-y: auto;
}

/* 검색결과 & 테이블 타입01 : thead,tbody분류 tbody스크롤방식 */
.search_result {
  border-radius: 5px;
  border: 1px solid rgba(167, 169, 172, 0.4);
}
.search_result .table {
  font-size: 14px;
  margin-bottom: 0;
}
.search_result .table th,
.search_result .table td {
  padding: 4px 8px;
  vertical-align: middle;
}
.search_result .table thead {
  background-color: #F9F9FB;
  border-bottom: 1px solid rgba(167, 169, 172, 0.2);
}
.search_result .table thead th:first-child {
  border-top-left-radius: 5px;
}
.search_result .table thead th:last-child {
  border-top-right-radius: 5px;
}
.search_result .table th {
  font-size: 14px;
  padding: 4px 0.75rem;
  color: #A7A9AC;
}
.search_result .table td.id {
  text-align: left;
}
.search_result .table td.id span {
  display: inline-block;
  width: 130px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 360px) {
  .search_result .table td.id span {
    width: 90px;
  }
}
.search_result .table .custom-control {
  vertical-align: middle;
  margin-top: 6px;
}
.search_result .table tr:last-child {
  border-radius: 5px;
}
.search_result .tbl_overflow {
  display: block;
  height: 80px;
  overflow-y: auto;
}

/* 알림창 */
.alert_cover {
  display: none;
}
@media (max-width: 575.98px) {
  .alert_cover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    z-index: 900;
  }
}

.alert_pops {
  display: none;
  position: absolute;
  z-index: 900;
  top: 68px;
  right: 4px;
  width: 420px;
}
@media (min-width: 1200px) {
  .alert_pops {
    right: calc(50% - 614px);
  }
}
@media (max-width: 575.98px) {
  .alert_pops {
    position: absolute;
    top: 5px;
    right: 5;
    width: calc(100% - 10px);
    margin: 0 auto;
  }
}
.alert_pops .alert_none {
  font-size: 14px;
  text-align: center;
  margin: 150px 0;
}
.alert_pops .title {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid rgba(167, 169, 172, 0.4);
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  border-bottom: 0;
  padding: 5px 13px;
}
.alert_pops .title .tit {
  flex: auto;
  font-weight: 500;
}
.alert_pops .title .del_area {
  flex: auto;
  text-align: right;
  margin-left: auto;
}
.alert_pops .title .del_area .btn {
  position: relative;
  font-size: 14px;
  color: #A7A9AC;
}
.alert_pops .title .del_area .btn:first-child::after {
  position: absolute;
  top: 6px;
  right: -5px;
  content: "|";
  font-size: 13px;
  color: #D1D3D4;
}
.alert_pops .title .del_area .icons_close {
  display: none;
}
@media (max-width: 991.98px) {
  .alert_pops .title .del_area .icons_close {
    display: inline-block;
  }
}
.alert_pops .cnts {
  position: relative;
  background: #F9F9FB;
  border: 1px solid rgba(167, 169, 172, 0.4);
  padding: 13px 20px;
}
.alert_pops .btn_area {
  position: relative;
  display: block;
  padding: 20px 0;
  background: #7391FA;
  border: 1px solid rgba(167, 169, 172, 0.4);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border-top: 0;
  text-align: center;
  text-decoration: none;
  color: #fff;
}
.alert_pops .btn_area i {
  vertical-align: middle;
  margin-top: -4px;
  margin-right: 5px;
}

.alert_box {
  position: relative;
  background: #fff;
  border: 1px solid rgba(167, 169, 172, 0.4);
  border-radius: 5px;
  padding: 9px 30px 13px 13px;
  margin-bottom: 10px;
}
.alert_box label.type01 {
  display: inline-block;
  margin-right: 5px;
  border-radius: 25px;
  background: #333;
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  padding: 2px 12px 3px;
  background-color: #2C51D7;
}
.alert_box label.type02 {
  display: inline-block;
  margin-right: 5px;
  border-radius: 25px;
  background: #333;
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  padding: 2px 12px 3px;
  background-color: #4FCED0;
}
.alert_box label.type03 {
  display: inline-block;
  margin-right: 5px;
  border-radius: 25px;
  background: #333;
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  padding: 2px 12px 3px;
  background-color: #7391FA;
}
.alert_box label.type_read {
  display: inline-block;
  margin-right: 5px;
  border-radius: 25px;
  background: #333;
  font-size: 14px;
  color: #fff;
  font-weight: 500;
  padding: 2px 12px 3px;
  background-color: #D1D3D4;
}
.alert_box .btn_del {
  position: absolute;
  right: 2px;
  top: calc(50% - 10px);
  width: 22px;
  height: 22px;
}
.alert_box .tit {
  display: inline-block;
  vertical-align: middle;
  margin-top: -3px;
  font-size: 14px;
  width: 72%;
  height: 25px;
  line-height: 25px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.alert_box .tit_read {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #A7A9AC;
}
.alert_box .info_area {
  position: relative;
  display: flex;
  padding-top: 7px;
  font-size: 12px;
}
@media (max-width: 767.98px) {
  .alert_box .info_area {
    display: block;
  }
}
.alert_box .info_area .teacher {
  position: relative;
  flex: auto;
}
.alert_box .info_area .teacher .cat {
  position: relative;
  vertical-align: middle;
}
.alert_box .info_area .teacher .cat::before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin: -2px 2px 0 2px;
  width: 1px;
  height: 13px;
  border-right: 1px solid #A7A9AC;
}
.alert_box .info_area .teacher .cat:first-child::before {
  display: none;
}
.alert_box .info_area .teacher .cat:nth-child(2) {
  display: inline-block;
  width: 85px;
  height: 17px;
  line-height: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alert_box .info_area .teacher .cat:nth-child(3) {
  display: inline-block;
  width: 55px;
  height: 17px;
  line-height: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alert_box .info_area .teacher .cat:nth-child(4) {
  display: inline-block;
  width: 92px;
  height: 17px;
  line-height: 17px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.alert_box .info_area .date {
  margin-left: auto;
  padding-top: 2px;
  color: #A7A9AC;
}
.alert_box .cat_read {
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  color: #A7A9AC;
}

/* 알림-클래스 링크 */
.alert_cl_wrap {
  position: relative;
  height: auto;
  overflow: hidden;
  padding-left: 50px;
  text-align: left;
  background-image: url("../images/icons/line_v.svg");
  background-repeat: repeat-y;
  background-position: 25px 0;
}
.alert_cl_wrap .alert_cl {
  position: relative;
  height: auto;
  margin-bottom: 40px;
}
.alert_cl_wrap .title {
  position: relative;
  font-weight: 500;
  padding-bottom: 20px;
}
.alert_cl_wrap .title i {
  position: absolute;
  top: 2px;
  left: -34px;
}

/* goTop 버튼 */
.btn_gotop {
  position: fixed;
  bottom: 80px;
  right: 10px;
  z-index: 9999;
}
@media (max-width: 575.98px) {
  .btn_gotop {
    position: fixed;
    bottom: 80px;
    right: 10px;
    z-index: 9999;
  }
}

/* 정보뷰영역 공통 관련 */
.info_area {
  text-align: left;
}
.info_area .form-group.row {
  margin-bottom: 1px;
}
.info_area .form-group.row .btn {
  font-size: 14px;
}
.info_area .form-group.row .exp_txt,
.info_area .form-group.row .exp_text {
  position: absolute;
  padding-left: 15px;
  left: 0;
  width: 100%;
  font-size: 12px;
  color: #A7A9AC;
}
.info_area .form-group.row > label {
  position: relative;
  padding-top: 3px;
  padding-bottom: 3px;
  margin-right: 0;
  font-weight: 500;
  line-height: 40px;
  letter-spacing: -0.5px;
}
.info_area .form-group.row > label .exp_txt,
.info_area .form-group.row > label .exp_text {
  top: 20px;
}
.info_area .form-group.row > label + div {
  position: relative;
  vertical-align: middle;
  padding-top: 3px;
  padding-bottom: 3px;
  font-size: 14px;
  font-weight: 400;
  line-height: normal;
  line-height: 40px;
}
.info_area .form-group.row > label + div .group {
  position: relative;
  height: auto;
  display: flex;
  flex-direction: column;
}
.info_area .form-group.row > label + div .btn + .btn {
  margin-left: 5px;
}
.info_area .form-group.row > label + div .exp_txt,
.info_area .form-group.row > label + div .exp_text {
  line-height: initial;
  bottom: -5px;
}
.info_area .form-group.row > label + div .form_calendar {
  width: calc(100% - 45px);
}
.info_area .form-group.row > label + div .form_calendar + .btn {
  margin-top: -2px;
}
.info_area .form-group.row .btn + .dropdown .dropdown-toggle {
  height: 40px;
  margin-top: -5px;
}
.info_area .form-control {
  display: inline-block;
}
.info_area .custom-control,
.info_area .form-check {
  height: 24px;
  line-height: 24px;
}
.info_area .custom-control-label,
.info_area .form-check-label {
  height: 24px;
  line-height: 22px;
  font-size: 12px;
  color: #454545;
}
.info_area .form-check-input {
  top: 2px;
}
.info_area .dropdown-item {
  font-size: 16px -2px;
}

/* 프로필 사진 */
.profile_photo {
  position: relative;
  width: 110px;
  height: 110px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sample_profile_photo.jpg);
  border-radius: 50%;
  border: 0.4px solid rgba(167, 169, 172, 0.4);
}
@media (max-width: 991.98px) {
  .profile_photo {
    margin: 0 auto;
  }
}
.profile_photo span {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.profile_photo .icons_camera {
  position: absolute;
  bottom: 0;
  right: 0;
}

/* 모달 관련 */
.modal-title > .info_txt {
  margin-left: 10px;
  font-size: 14px;
  font-weight: 400;
  color: #A7A9AC;
}

.modal-body .sub_title {
  margin-top: 15px;
  text-align: left;
  font-weight: 500;
  color: #303033;
}

.modal-body .image_view {
  position: relative;
  height: auto;
  overflow: hidden;
}
.modal-body .image_view img {
  max-width: 100%;
  height: auto;
}

/* modal backdrop fix */
.modal.double {
  z-index: 1052 !important;
}

.modal-backdrop + .modal-backdrop {
  z-index: 1051 !important;
}

#modalMyinfo02 .explainType02 a,
#modalMyinfo03 .explainType02 a,
#modalMyinfo04 .explainType02 a {
  cursor: pointer;
  text-decoration: none;
}
#modalMyinfo02 .explainType02 a i,
#modalMyinfo03 .explainType02 a i,
#modalMyinfo04 .explainType02 a i {
  margin-top: -4px;
}

/* swiper */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper-slide {
  text-align: center;
  /* Center slide text vertically */
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.swiper-button-next,
.swiper-button-prev {
  width: 30px;
  height: 30px;
}

.swiper-button-next {
  right: 2px;
}

.swiper-button-prev {
  left: 2px;
}

.swiper_vertical .swiper-button-prev {
  top: 24px;
  left: calc(50% - 14px);
  width: auto;
  height: 30px;
  align-items: flex-start;
}

.swiper_vertical .swiper-button-next {
  top: unset;
  bottom: 4px;
  right: calc(50% - 18px);
  width: auto;
  height: 30px;
  align-items: flex-end;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  border-radius: 50%;
  background-color: #FFFFFF;
  background-image: url(../images/icons/icon_arrow_light1.svg);
  background-size: 16px auto;
  box-shadow: 0px 2px 3px 3px rgba(0, 0, 0, 0.07);
  content: "";
}

.swiper_vertical .swiper-button-prev:after {
  transform: rotate(0deg);
}

.swiper_vertical .swiper-button-next:after {
  transform: rotate(180deg);
  box-shadow: 0px -2px 3px 3px rgba(0, 0, 0, 0.07);
}

.swiper-button-prev:after {
  transform: rotate(270deg);
  box-shadow: -2px 0px 3px 3px rgba(0, 0, 0, 0.07);
}

.swiper-button-next:after {
  transform: rotate(90deg);
  box-shadow: 2px 0px 3px 3px rgba(0, 0, 0, 0.07);
}

.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0;
  cursor: auto;
  pointer-events: none;
}

/* 캘린더 type01 : 학생관리-출결팝업에 사용 */
.calendar_type01 {
  position: relative;
}
.calendar_type01 .search_section,
.calendar_type01 .move_calendar,
.calendar_type01 .search_area {
  display: flex;
  align-items: center;
}
.calendar_type01 .search_area .right_area {
  width: 52%;
  display: flex;
}
.calendar_type01 .search_area .right_area .input-search {
  width: 180px;
}
.calendar_type01 .search_section {
  margin-top: 20px;
  margin-bottom: 20px;
}
.calendar_type01 .search_section .move_calendar {
  margin-right: auto;
}
.calendar_type01 .search_section .move_calendar .date_info {
  margin: 0 20px;
}
.calendar_type01 .calendar_section {
  position: relative;
  height: 568px;
  overflow-y: auto;
}
.calendar_type01 .calendar_section .calendar_area {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 0.4px solid rgba(167, 169, 172, 0.3);
}
.calendar_type01 .calendar_section .calendar_area .tit_time {
  background-color: #F9F9FC;
  font-size: 14px;
  border-right: 0.4px solid rgba(167, 169, 172, 0.3);
}
@media (max-width: 767.98px) {
  .calendar_type01 .calendar_section .calendar_area .tit_time {
    font-size: 10px;
  }
}
.calendar_type01 .calendar_section .calendar_area .tit_time .tit_week {
  border-right: none;
}
.calendar_type01 .calendar_section .calendar_area .tit_time .tit_week > span {
  visibility: hidden;
}
.calendar_type01 .calendar_section .calendar_area .tit_time .half-hour {
  border: none;
  width: 53px;
  padding: 0 10px;
}
@media (max-width: 767.98px) {
  .calendar_type01 .calendar_section .calendar_area .tit_time .half-hour {
    width: 18px;
    padding: 0 3px;
  }
}
.calendar_type01 .calendar_section .calendar_area .tit_time .half-hour .time {
  position: absolute;
  top: -0.5rem;
}
.calendar_type01 .calendar_section .calendar_area .weeks {
  flex-grow: 1;
}
.calendar_type01 .calendar_section .calendar_area .tit_week {
  text-align: center;
  padding: 10px 0 7px;
  font-size: 14px;
  background-color: #F9F9FC;
  border-right: 0.4px solid rgba(167, 169, 172, 0.3);
}
@media (max-width: 767.98px) {
  .calendar_type01 .calendar_section .calendar_area .tit_week {
    padding: 5px 0 3px;
    font-size: 10px;
  }
}
.calendar_type01 .calendar_section .calendar_area .sun > .tit_week {
  color: #FB5353;
}
.calendar_type01 .calendar_section .calendar_area .sat > .tit_week {
  color: #2C51D7;
}
.calendar_type01 .calendar_section .calendar_area .half-hour {
  position: relative;
  height: 30px;
  border-top: 0.4px solid rgba(167, 169, 172, 0.1);
  border-right: 0.4px solid rgba(167, 169, 172, 0.3);
}
.calendar_type01 .calendar_section .calendar_area .half-hour.lined {
  border-top: 2px solid rgba(167, 169, 172, 0.2);
}
.calendar_type01 .calendar_section .calendar_area .curriculum_box {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  color: #fff;
  border-radius: 5px;
  width: 134.58px;
}
@media (max-width: 1199.98px) {
  .calendar_type01 .calendar_section .calendar_area .curriculum_box {
    width: 86px;
  }
}
@media (max-width: 991.98px) {
  .calendar_type01 .calendar_section .calendar_area .curriculum_box {
    width: 43.14px;
  }
}
.calendar_type01 .calendar_section .calendar_area .curriculum_box.color_light1 {
  background-color: #7391FA;
}
.calendar_type01 .calendar_section .calendar_area .curriculum_box.color_emerald {
  background-color: #4FCED0;
}
.calendar_type01 .calendar_section .calendar_area .curriculum_box.color_light2 {
  background-color: #AFECED;
  color: #454545;
}
.calendar_type01 .calendar_section .calendar_area .curriculum_box .academe {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 5px;
}
.calendar_type01 .calendar_section .calendar_area .curriculum_box .enter,
.calendar_type01 .calendar_section .calendar_area .curriculum_box .leave {
  font-size: 10px;
  letter-spacing: 0.5px;
  margin-bottom: 3px;
}
.calendar_type01 .calendar_section .calendar_area .curriculum_box .enter label,
.calendar_type01 .calendar_section .calendar_area .curriculum_box .leave label {
  font-weight: 400;
  color: #454545;
  border-radius: 5px;
  background-color: #D1DBFF;
  padding: 0 2px;
}
.calendar_type01 .calendar_section .calendar_area .weeks.today .tit_week {
  background-color: #D1DBFF;
}
.calendar_type01 .calendar_section .calendar_area .weeks.today .half-hour {
  background-color: #E7EDFF;
}
.calendar_type01 .data_prev {
  position: absolute;
  left: -45px;
  top: 45%;
}
.calendar_type01 .data_next {
  position: absolute;
  right: -45px;
  top: 45%;
}

@media (max-width: 767.98px) {
  .web_only .calendar_type01 .calendar_section .calendar_area .tit_time {
    font-size: 14px;
  }
}
@media (max-width: 767.98px) {
  .web_only .calendar_type01 .calendar_section .calendar_area .tit_time .half-hour {
    width: 53px;
    padding: 0 10px;
  }
  .web_only .calendar_type01 .calendar_section .calendar_area .tit_time .half-hour .time span {
    display: initial;
  }
}
@media (max-width: 767.98px) {
  .web_only .calendar_type01 .calendar_section .calendar_area .tit_week {
    padding: 10px 0 7px;
    font-size: 14px;
  }
}
@media (max-width: 1199.98px) {
  .web_only .calendar_type01 .calendar_section .calendar_area .curriculum_box {
    width: 108px;
  }
}
.web_only .calendar_type01 .data_prev {
  position: absolute;
  left: -45px;
  top: 45%;
}
.web_only .calendar_type01 .data_next {
  position: absolute;
  right: -45px;
  top: 45%;
}

/* 캘린더 type02(테이블 형식 타입) : 강좌 강좌만들기4 팝업  */
.calendar_type02 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  margin-bottom: 15px;
  height: auto;
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .calendar_type02 {
    padding: 13px;
    height: auto;
  }
}
.calendar_type02 .calendar .move_calendar {
  text-align: left;
  margin-bottom: 10px;
}
.calendar_type02 .calendar .move_calendar .date_info {
  margin: 0 20px;
}
.calendar_type02 .calendar .calendar_data {
  border: 0.4px solid rgba(167, 169, 172, 0.4);
  border-radius: 5px;
  overflow: hidden;
}
.calendar_type02 .calendar .calendar_table {
  width: 100%;
}
.calendar_type02 .calendar .calendar_table .week_tit th {
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
  padding: 6px 0;
  border-bottom: 0.4px solid rgba(167, 169, 172, 0.4);
  background-color: rgba(167, 169, 172, 0.1);
}
.calendar_type02 .calendar .calendar_table .week_tit th .sun {
  color: #FB5353;
}
.calendar_type02 .calendar .calendar_table .week_tit th.sun {
  color: #FB5353;
}
.calendar_type02 .calendar .calendar_table .week_tit th.sat {
  color: #2C51D7;
}
.calendar_type02 .calendar .calendar_table .week .calendar-day {
  position: relative;
  width: 14.28%;
  height: 90px;
  padding: 5px 0;
  color: #454545;
  font-weight: 400;
  font-size: 16px;
}
.calendar_type02 .calendar .calendar_table .week .calendar-day .daynum {
  display: inline-block;
  width: 27px;
  height: 27px;
  cursor: pointer;
}
.calendar_type02 .calendar .calendar_table .week .calendar-day.today .daynum {
  display: inline-block;
  line-height: 27px;
  border-radius: 50%;
  background-color: #D1DBFF;
}
.calendar_type02 .calendar .calendar_table .week .calendar-day.active .daynum {
  display: inline-block;
  line-height: 27px;
  border-radius: 50%;
  background-color: #AFECED;
}
.calendar_type02 .calendar .calendar_table .week .calendar-day.sun {
  color: #FB5353;
}
.calendar_type02 .calendar .calendar_table .week .calendar-day.sat {
  color: #2C51D7;
}
.calendar_type02 .calendar .calendar_table .week .calendar-day:nth-child(even) {
  background-color: #F9F9FC;
}
.calendar_type02 .calendar .calendar_table .week .calendar-day.calendar-other-month {
  color: #A7A9AC;
  background-color: #fff !important;
}
.calendar_type02 .calendar .calendar_table .week .calendar-day .over_num {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 5px;
  right: 5px;
  border-radius: 50%;
  background-color: #E6E7E8;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  padding: unset;
}
.calendar_type02 .calendar .calendar_table .week .calendar-day .curi_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 18px;
  border-radius: 5px;
  background-color: #7391FA;
  padding: 2px 4px;
  margin-bottom: 2px;
}
.calendar_type02 .calendar .calendar_table .week .calendar-day .curi_box .tit {
  width: 80px;
  font-size: 10px;
  line-height: 18px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 991.98px) {
  .calendar_type02 .calendar .calendar_table .week .calendar-day .curi_box .tit {
    width: 60px;
  }
}
.calendar_type02 .calendar .calendar_table .week .calendar-day .curi_box .btn_del {
  width: 16px;
  height: 16px;
  padding: unset;
}
.calendar_type02 .calendar .calendar_table .week .calendar-day .curi_box_select {
  background-color: #4FCED0;
}
.calendar_type02 .schedule {
  background: #FFFFFF;
  border-radius: 10px;
  margin-top: 10px;
  padding: 5px 15px;
}
.calendar_type02 .schedule .date {
  font-size: 14px;
  font-weight: 700;
}
.calendar_type02 .schedule .list_area {
  margin-top: 10px;
  height: 95px;
  overflow-y: auto;
  overflow-x: hidden;
}
.calendar_type02 .schedule .list_area li {
  text-align: left;
  display: flex;
  font-size: 14px;
  padding: 10px 0;
  border-top: 1px solid #E6E7E8;
}
.calendar_type02 .schedule .list_area li .time {
  padding: 0 10px;
}
.calendar_type02 .schedule .list_area li .lesson_info {
  width: calc(100% - 50px);
}
.calendar_type02 .schedule .list_area li .subject {
  display: block;
  width: 100%;
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar_type02 .schedule .list_area li .lesson {
  font-size: 12px;
  color: #A7A9AC;
}
.calendar_type02 .schedule .list_area li .lesson .divid {
  border-color: #A7A9AC;
}

/* 캘린더 type03 : 출결관리-반출결 캘린더  */
.calendar_type03 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  margin-bottom: 15px;
  height: auto;
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .calendar_type03 {
    padding: 13px;
    height: auto;
  }
}
.calendar_type03 .calendar .move_calendar {
  text-align: left;
  margin-bottom: 10px;
}
.calendar_type03 .calendar .move_calendar .date_info {
  margin: 0 20px;
}
.calendar_type03 .calendar .calendar_data {
  overflow: hidden;
}
.calendar_type03 .calendar .calendar_table {
  width: 100%;
}
.calendar_type03 .calendar .calendar_table .week_tit th {
  font-weight: 500;
  height: 60px;
  line-height: 60px;
  vertical-align: middle;
  padding: 6px 0;
}
.calendar_type03 .calendar .calendar_table .week_tit th.sun {
  color: #FB5353;
}
.calendar_type03 .calendar .calendar_table .week_tit th.sat {
  color: #2C51D7;
}
.calendar_type03 .calendar .calendar_table .week .calendar-day {
  position: relative;
  width: 14.28%;
  height: 60px;
  line-height: 60px;
  vertical-align: middle;
  padding: 5px 0;
  color: #454545;
  font-weight: 400;
  font-size: 16px;
}
.calendar_type03 .calendar .calendar_table .week .calendar-day .daynum {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  line-height: 50px;
  vertical-align: middle;
  border-radius: 50%;
  cursor: pointer;
}
.calendar_type03 .calendar .calendar_table .week .calendar-day .daynum.attend::before {
  position: absolute;
  content: "";
  width: 8px;
  height: 8px;
  top: 10px;
  right: 10px;
  background: #7391FA;
  border-radius: 50%;
}
.calendar_type03 .calendar .calendar_table .week .calendar-day.today .daynum {
  display: inline-block;
  background-color: #E6E7E8;
}
.calendar_type03 .calendar .calendar_table .week .calendar-day.active .daynum {
  display: inline-block;
  color: #ffffff;
  background-color: #7391FA;
}
.calendar_type03 .calendar .calendar_table .week .calendar-day.active .daynum.attend::before {
  background-color: #ffffff;
}
.calendar_type03 .calendar .calendar_table .week .calendar-day.sun {
  color: #FB5353;
}
.calendar_type03 .calendar .calendar_table .week .calendar-day.sat {
  color: #2C51D7;
}
.calendar_type03 .calendar .calendar_table .week .calendar-day.calendar-other-month {
  color: #A7A9AC;
  background-color: #fff !important;
}
.calendar_type03 .calendar .calendar_table .week .calendar-day .over_num {
  position: absolute;
  width: 24px;
  height: 24px;
  top: 5px;
  right: 5px;
  border-radius: 50%;
  background-color: #E6E7E8;
  font-size: 12px;
  line-height: 24px;
  text-align: center;
  padding: unset;
}
.calendar_type03 .calendar .calendar_table .week .calendar-day .curi_box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 18px;
  border-radius: 5px;
  background-color: #7391FA;
  padding: 2px 4px;
  margin-bottom: 2px;
}
.calendar_type03 .calendar .calendar_table .week .calendar-day .curi_box .tit {
  width: 80px;
  font-size: 10px;
  line-height: 18px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 991.98px) {
  .calendar_type03 .calendar .calendar_table .week .calendar-day .curi_box .tit {
    width: 60px;
  }
}
.calendar_type03 .calendar .calendar_table .week .calendar-day .curi_box .btn_del {
  width: 16px;
  height: 16px;
  padding: unset;
}
.calendar_type03 .schedule {
  background: #FFFFFF;
  border-radius: 10px;
  margin-top: 10px;
  padding: 5px 15px;
}
.calendar_type03 .schedule .date {
  font-size: 14px;
  font-weight: 700;
}
.calendar_type03 .schedule .list_area {
  margin-top: 10px;
  height: 95px;
  overflow-y: auto;
  overflow-x: hidden;
}
.calendar_type03 .schedule .list_area li {
  text-align: left;
  display: flex;
  font-size: 14px;
  padding: 10px 0;
  border-top: 1px solid #E6E7E8;
}
.calendar_type03 .schedule .list_area li .time {
  padding: 0 10px;
}
.calendar_type03 .schedule .list_area li .lesson_info {
  width: calc(100% - 50px);
}
.calendar_type03 .schedule .list_area li .subject {
  display: block;
  width: 100%;
  height: 20px;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.calendar_type03 .schedule .list_area li .lesson {
  font-size: 12px;
  color: #A7A9AC;
}
.calendar_type03 .schedule .list_area li .lesson .divid {
  border-color: #A7A9AC;
}

/* IE 9+10 속성 */
/* 미디어쿼리 ******************************************************/
/* Extra small devices (portrait phones, less than 576px) *********/
/* No media query for `xs` since this is the default in Bootstrap */
/* Small devices (landscape phones, ≥576px and up) ~sm*/
@media (min-width: 576px) {
  .mobile_only {
    display: block;
  }
}
/* Medium devices (tablets, ≥768px and up) ~md*/
/* Large devices (desktops, ≥992px and up) ~lg*/
@media (min-width: 992px) {
  .nav_mobile {
    display: none;
  }
  .web_only .nav_web {
    display: block;
  }
  .mobile_only {
    display: none;
  }
}
/* Extra large devices (large desktops, ≥1200px and up) ~xl*/
@media (max-width: 1272px) {
  .nav_web {
    display: none;
  }
  .main_mb {
    display: block;
  }
}
@media (max-width: 1199.98px) {
  .web_only .modal-xl {
    max-width: 950px;
    width: 950px;
  }
  .mobile_only {
    display: none;
  }
  .web_only .modal-lg {
    max-width: 800px;
    width: 800px;
  }
}
@media (max-width: 991.98px) {
  .nav_web {
    display: none;
  }
  .web_only .nav_web {
    display: block;
  }
  .web_only .nav_mobile {
    display: none;
  }
  /* .mobile_only {
  	display: none;
  } */
  .lgW100 {
    display: block;
    width: 100%;
  }
}
/* mobile only */
@media (max-width: 767.98px) {
  .sm_hidden {
    display: none;
  }
  .mdW100 {
    display: block;
    width: 100%;
  }
  .web_only02 {
    display: none;
  }
  .mobile_only {
    display: block;
  }
}
/* Extra small devices (portrait phones, less than 576px) ≤xs*/
/* 학생 모바일 반응형 모바일 네비 */
.nav-item02 {
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-bottom: 0.4px solid rgba(167, 169, 172, 0.4);
  height: 60px;
}

a {
  color: #303033;
  text-decoration: none;
  background-color: transparent;
  text-align: center;
}

body {
  margin: 0;
  font-family: "Noto Sans KR", sans-serif;
  background: #fff;
}

.logo-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #fff;
  width: 100%;
}

.logo {
  height: 40px;
}

.menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1101;
}

.menu-btn span {
  display: block;
  width: 28px;
  height: 4px;
  margin: 4px 0;
  background: #222;
  border-radius: 2px;
  transition: 0.3s;
}

.side-menu {
  position: fixed;
  top: 0;
  right: -440px;
  width: 370px;
  height: 100vh;
  background: #fff;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.08);
  z-index: 1200;
  transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-y: auto;
}

.side-menu.open {
  right: 0;
}

.side-menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.close-btn {
  font-size: 36px;
  background: none;
  border: none;
  color: #222;
  cursor: pointer;
  line-height: 1;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 32px 0 0 0;
}

.menu-list li {
  font-size: 20px;
  color: #2346a0;
  padding: 24px 32px;
  cursor: pointer;
  transition: background 0.2s;
  margin: 0px 20px;
  border-radius: 12px;
}

.menu-list li:hover {
  background: #4E96FF;
  color: #fff;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.2);
  z-index: 1100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

.overlay.show {
  opacity: 1;
  pointer-events: auto;
}

.container {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  /*   padding: 32px 0 0 0; */
  padding: 32px 0px 0px 100px;
  min-height: 100vh;
}

.pc-sidebar {
  width: 275px;
  background: #e6f0ff;
  border-radius: 18px;
  margin-right: 32px;
  padding: 18px 0 18px 0;
  box-shadow: 0 2px 8px rgba(35, 70, 160, 0.06);
  height: -moz-fit-content;
  height: fit-content;
}

.pc-menu-list {
  list-style: none;
  padding: 0 0 0 0;
  margin: 0;
}

.pc-menu-title {
  font-weight: 700;
  color: #2346a0;
  background: #d0e3ff;
  padding: 14px 20px;
  border-radius: 12px;
  margin-bottom: 8px;
  font-size: 1.08rem;
}

.pc-menu-title .active {
  color: #fff;
  background-color: #4E96FF;
}

.pc-menu-list li {
  color: #2346a0;
  background: #f3f7ff;
  padding: 13px 20px;
  border-radius: 12px;
  margin: 0 10px 8px 10px;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s;
}

.pc-menu-list li:hover,
.pc-menu-list .active {
  background: #4E96FF;
  color: #fff !important;
  text-decoration: none !important;
}

.pc-menu-list li:hover a:-webkit-any-link,
.pc-menu-list .active a:-webkit-any-link {
  color: #fff !important;
  cursor: pointer;
  text-decoration: none;
}

a:-webkit-any-link {
  cursor: pointer;
  text-decoration: none;
  color: #2346a0;
}

.main-content {
  flex: 1;
  max-width: 700px;
  margin: 0;
  padding: 0 16px 40px 0;
  min-height: 100vh;
}

.main-title {
  color: #2346a0;
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 8px;
  margin-top: 0;
}

.main-desc {
  color: #e53935;
  font-size: 1.1rem;
  margin-bottom: 24px;
}

.manual-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.manual-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f3f7ff;
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 18px;
  font-size: 1.15rem;
  box-shadow: 0 2px 8px rgba(35, 70, 160, 0.03);
}

.manual-item span {
  font-weight: 500;
  color: #222;
}

.pdf-link {
  color: #2346a0;
  font-weight: 700;
  text-decoration: none;
  font-size: 1.1rem;
  transition: color 0.2s;
}

.pdf-link:hover {
  color: #1a2e6c;
  text-decoration: underline;
}

header,
.logo-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (min-width: 901px) {
  header,
  .logo-area,
  .menu-btn {
    display: none !important;
  }
}
@media (max-width: 900px) {
  header,
  .logo-area,
  .menu-btn {
    display: flex;
  }
}
@media (max-width: 400px) {
  .side-menu {
    width: 88vw;
    min-width: 0;
    overflow-y: auto;
  }
  .menu-list li {
    font-size: 1.2rem;
    padding: 18px 16px;
    margin: 0px 24px;
  }
}
@media (max-width: 600px) {
  .main-content {
    max-width: 100vw;
    margin: 24px 0 0 0;
    padding: 0 8px 24px 8px;
  }
  .main-title {
    font-size: 1.3rem;
    margin: 15px 20px;
  }
  .manual-item {
    font-size: 1rem;
    padding: 14px 10px;
    margin-bottom: 12px;
    margin: 11px 16px;
    border-radius: 8px;
  }
  .pdf-link {
    font-size: 1rem;
  }
}
@media (max-width: 900px) {
  .container {
    flex-direction: column;
    padding: 0;
  }
  .pc-sidebar {
    display: none;
  }
  .main-content {
    max-width: 100vw;
    padding: 0 8px 24px 8px;
  }
}
.dash {
  display: inline-block;
  width: 100%;
  height: 2243px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/dash.png);
}

@media (max-width: 900px) {
  .dash {
    max-width: 100vw;
    height: 1483px;
  }
}
.video-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-top: 30px;
  margin-bottom: 30px;
}

.video-card {
  background: #f3f6fd;
  border-radius: 14px;
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.04);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #2346a0;
  margin-bottom: 12px;
}

.ytp-cued-thumbnail-overlay-image {
  background-size: cover;
  -moz-background-size: cover;
  -webkit-background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 100%;
  height: 100%;
  position: absolute;
}

.video-embed {
  width: 100%;
  max-width: 750px;
  height: 350px;
  /* 적절한 비율(16:9)에 맞춘 높이 */
  border: none;
  border-radius: 10px;
}

@media (max-width: 900px) {
  .video-embed {
    max-width: 100vw;
    height: 200px;
  }
}
/* install_pc.html */
.pdf_install0 {
  display: inline-block;
  width: 100%;
  height: 1000px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/pdf_install0.png);
}

@media (max-width: 900px) {
  .pdf_install0 {
    max-width: 100vw;
    height: 510px;
  }
}
.pdf_install1 {
  display: inline-block;
  width: 100%;
  height: 1000px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/pdf_install1.png);
}

@media (max-width: 900px) {
  .pdf_install1 {
    max-width: 100vw;
    height: 510px;
  }
}
.pdf_install2 {
  display: inline-block;
  width: 100%;
  height: 1000px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/pdf_install2.png);
}

@media (max-width: 900px) {
  .pdf_install2 {
    max-width: 100vw;
    height: 510px;
  }
}
.pdf_install3 {
  display: inline-block;
  width: 100%;
  height: 1000px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/pdf_install3.png);
}

@media (max-width: 900px) {
  .pdf_install3 {
    max-width: 100vw;
    height: 510px;
  }
}
.pdf_install4 {
  display: inline-block;
  width: 100%;
  height: 1000px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/pdf_install4.png);
}

@media (max-width: 900px) {
  .pdf_install4 {
    max-width: 100vw;
    height: 510px;
  }
}
.pdf_install5 {
  display: inline-block;
  width: 100%;
  height: 1000px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/pdf_install5.png);
}

@media (max-width: 900px) {
  .pdf_install5 {
    max-width: 100vw;
    height: 510px;
  }
}
.pdf_install6 {
  display: inline-block;
  width: 100%;
  height: 1000px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/pdf_install6.png);
}

@media (max-width: 900px) {
  .pdf_install6 {
    max-width: 100vw;
    height: 510px;
  }
}
.pdf_install7 {
  display: inline-block;
  width: 100%;
  height: 1000px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/pdf_install7.png);
}

@media (max-width: 900px) {
  .pdf_install7 {
    max-width: 100vw;
    height: 510px;
  }
}
.pdf_install8 {
  display: inline-block;
  width: 100%;
  height: 1000px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/pdf_install8.png);
}

@media (max-width: 900px) {
  .pdf_install8 {
    max-width: 100vw;
    height: 510px;
  }
}
.pdf_install9 {
  display: inline-block;
  width: 100%;
  height: 1000px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/pdf_install9.png);
}

@media (max-width: 900px) {
  .pdf_install9 {
    max-width: 100vw;
    height: 510px;
  }
}
.tutorial1 {
  display: inline-block;
  width: 100%;
  height: 1000px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/tutorial1.png);
}

@media (max-width: 900px) {
  .tutorial1 {
    max-width: 100vw;
    height: 510px;
  }
}
.tutorial2 {
  display: inline-block;
  width: 100%;
  height: 1000px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/tutorial2.png);
}

@media (max-width: 900px) {
  .tutorial2 {
    max-width: 100vw;
    height: 510px;
  }
}
.tutorial3 {
  display: inline-block;
  width: 100%;
  height: 1000px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/tutorial3.png);
}

@media (max-width: 900px) {
  .tutorial3 {
    max-width: 100vw;
    height: 510px;
  }
}
.pdf_catalog1 {
  display: inline-block;
  width: 100%;
  height: 1000px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/pdf_catalog1.png);
}

@media (max-width: 900px) {
  .pdf_catalog1 {
    max-width: 100vw;
    height: 510px;
  }
}
.pdf_catalog2 {
  display: inline-block;
  width: 100%;
  height: 1000px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/pdf_catalog2.png);
}

@media (max-width: 900px) {
  .pdf_catalog2 {
    max-width: 100vw;
    height: 510px;
  }
}
.pdf_catalog3 {
  display: inline-block;
  width: 100%;
  height: 1000px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/pdf_catalog3.png);
}

@media (max-width: 900px) {
  .pdf_catalog3 {
    max-width: 100vw;
    height: 510px;
  }
}
.pdf_catalog4 {
  display: inline-block;
  width: 100%;
  height: 1000px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/pdf_catalog4.png);
}

@media (max-width: 900px) {
  .pdf_catalog4 {
    max-width: 100vw;
    height: 510px;
  }
}
.icon_1 {
  display: inline-block;
  width: 34px;
  height: 34px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/icon_1.png);
  margin-right: 5px;
}

.icon_2 {
  display: inline-block;
  width: 34px;
  height: 34px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/icon_2.png);
  margin-right: 5px;
}

.icon_3 {
  display: inline-block;
  width: 34px;
  height: 34px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/icon_3.png);
  margin-right: 5px;
}

.icon_dashboard {
  display: inline-block;
  width: 34px;
  height: 34px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/icon_dashboard.png);
  margin-right: 5px;
}

.icon_game {
  display: inline-block;
  width: 34px;
  height: 34px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/icon_game.png);
  margin-right: 5px;
}

.icon_info {
  display: inline-block;
  width: 34px;
  height: 34px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/icon_info.png);
  margin-right: 5px;
}

.icon_m {
  display: inline-block;
  width: 34px;
  height: 34px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/icon_m.png);
  margin-right: 5px;
}

.icon_pc {
  display: inline-block;
  width: 34px;
  height: 34px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/icon_pc.png);
  margin-right: 5px;
}

.icon_people {
  display: inline-block;
  width: 34px;
  height: 34px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/icon_people.png);
  margin-right: 5px;
}

.icon_pro {
  display: inline-block;
  width: 34px;
  height: 34px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/icon_pro.png);
  margin-right: 5px;
}

.icon_tutorial {
  display: inline-block;
  width: 34px;
  height: 34px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/icon_tutorial.png);
  margin-right: 5px;
}

.icon_0 {
  display: inline-block;
  width: 34px;
  height: 34px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/icon_0.png);
  margin-right: 5px;
}

.icon_book {
  display: inline-block;
  width: 34px;
  height: 34px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/icon_book.png);
  margin-right: 5px;
}

.icon_video {
  display: inline-block;
  width: 34px;
  height: 34px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/icon_video.png);
  margin-right: 5px;
}

.icon_download {
  display: inline-block;
  width: 34px;
  height: 34px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../pdf/icon_download.png);
  margin-right: 5px;
}

/* activity.html */
.activity .step-title {
  margin-bottom: 20px;
}

.activity .table-scroll {
  width: 300px;
}

.activity .table-scroll img {
  min-width: 300px !important;
  max-width: 70% !important;
}

/* manual.html */
.manual body {
  font-family: "Noto Sans KR", Arial, sans-serif;
  background: #f7f9fb;
  margin: 0;
  padding: 0;
  color: #222;
}

.manual .main-content {
  max-width: 700px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.07);
  padding: 32px 28px;
}

.manual h1 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 18px;
  font-weight: 700;
}

.manual .desc {
  text-align: left;
  color: #666;
  margin-bottom: 24px;
}

.manual .steps {
  list-style: decimal inside;
  padding-left: 0;
  margin-bottom: 24px;
}

.manual .steps li {
  margin-bottom: 12px;
  font-size: 1.08rem;
}

.manual .step-title {
  font-weight: 400;
}

.manual .download-btn {
  display: block;
  margin: 12px 0 0 0;
  background: #2ec4f1;
  color: #fff;
  border: none;
  border-radius: 40px;
  padding: 12px 24px;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.manual .download-btn:hover {
  background: #1d7d9b;
}

.manual .info-box {
  display: flex;
  align-items: flex-start;
  background: #f1f7fd;
  border-left: 10px solid #2ec4f1;
  border-radius: 10px;
  padding: 18px 18px 18px 16px;
  margin-bottom: 18px;
  gap: 16px;
  font-size: 1rem;
}

.manual a:-webkit-any-link {
  cursor: pointer;
  text-decoration: none;
  color: #fff;
}

.manual .info-box-n {
  display: flex;
  align-items: flex-start;
  background: #F9F9FC;
  border-radius: 10px;
  padding: 18px 18px 18px 16px;
  margin-bottom: 18px;
  font-size: 1rem;
  flex-flow: column;
}

.manual .info-num {
  font-size: 1.3rem;
  font-weight: 700;
  color: #2ec4f1;
  margin-right: 8px;
  min-width: 28px;
}

.manual .example {
  color: #666;
  font-size: 0.98em;
  margin-left: 2px;
}

.manual .red {
  color: #e74c3c !important;
  font-weight: 600;
}

.manual .blue {
  color: #2ec4f1 !important;
  font-weight: 600;
}

.manual .info-list {
  margin: 8px 0 0 0;
  padding-left: 18px;
  font-size: 0.98em;
}

.manual .info-list li {
  margin-bottom: 2px;
}

.manual .table-section {
  margin: 32px 0 24px 0;
}

.manual .table-title {
  font-weight: 600;
  margin-bottom: 6px;
  font-size: 1.05em;
}

.manual .table-scroll {
  overflow-x: auto;
  background: #f7f9fb;
  border: 1px solid #e0e6ef;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 18px;
}

.manual .table-scroll img {
  min-width: 500px;
  max-width: 100%;
  display: block;
}

@media (max-width: 768px) {
  .manual .container {
    max-width: 98vw;
    padding: 2vw 2vw;
  }
  .manual h1 {
    font-size: 1.3rem;
  }
  .manual .steps li,
  .manual .info-box,
  .manual .table-title {
    font-size: 0.98rem;
  }
  .manual .info-num {
    font-size: 1.1rem;
    min-width: 22px;
  }
  .manual .download-btn {
    font-size: 1rem;
    padding: 10px 0;
    width: 100%;
  }
  .manual .table-scroll img {
    min-width: 320px;
  }
} 
/*---------------------------------------*/
/*--------   100. main.scss   -----------*/
/*---------------------------------------*/
#popupZone {
  height: 119px;
}
#popupZone .w1280 {
  background: #E7EDFF;
  display: flex;
  justify-content: center;
  height: 118px;
}
@media (max-width: 991.98px) {
  #popupZone .w1280 {
    display: none;
  }
}
#popupZone .closeBox {
  display: flex;
  justify-content: center;
  align-items: center;
}
#popupZone .today_check {
  font-size: 14px;
}
#popupZone .banner_main {
  display: inline-block;
  width: 1280px;
  height: 118px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/banner_main.png);
  overflow: hidden;
  box-sizing: border-box;
}
#popupZone .pop_close {
  width: 7px;
  height: 9px;
  border: 0;
  text-indent: -5000px;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icons/icon_close.svg);
  margin-left: 2px;
}
#popupZone.off {
  height: 0;
  transition: all 0.5s;
}
#popupZone.off .w1280 {
  display: none;
}

.nav_web .nav_area {
  width: 890px;
  margin: auto;
}

.btn_nav_myhome_main {
  background: #7391FA;
  color: #fff;
  text-align: center;
  min-width: 130px;
  height: 32px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 400;
  vertical-align: middle;
  line-height: 18px;
}
.btn_nav_myhome_main:hover, .btn_nav_myhome_main:focus, .btn_nav_myhome_main:active {
  background: #4FCED0;
  color: #fff;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 400;
  vertical-align: middle;
  line-height: 18px;
  display: inline-block;
  content: "";
  background-size: contain;
}

.btn_nav_myhome_main::before {
  display: inline-block;
  content: "";
  margin-right: 4px;
  margin-bottom: -2px;
  width: 16px;
  height: 16px;
  background: url(../images/icon_home_off.png) no-repeat center;
  background-size: contain;
}

.btn_nav_myhome_main.active::before,
.btn_nav_myhome_main:hover::before,
.btn_nav_myhome_main:focus::before {
  background: url(../images/icon_home_off.png) no-repeat center;
  background-size: contain;
}

#main_content .header-movie video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}
@media (min-width: 1200px) {
  #main_content .header-movie video {
    width: 100%;
    height: auto;
  }
}
#main_content .header-movie {
  width: 100%;
  height: calc(var(--vh, 1vh) * 85);
  overflow: hidden;
  position: relative;
}
@media (min-width: 769px) {
  #main_content .header-movie {
    height: 540px;
  }
}
#main_content .content_area {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  overflow-x: hidden;
}
#main_content .main_content_area {
  padding: 0px 0px;
}
#main_content #classworld {
  margin-bottom: 200px;
}
@media (max-width: 575.98px) {
  #main_content #classworld {
    margin-bottom: 0px;
  }
}
#main_content #extraact {
  margin-bottom: 180px;
}
@media (max-width: 575.98px) {
  #main_content #extraact {
    margin-bottom: 0px;
  }
}
#main_content .main01 {
  justify-content: center;
  margin: 100px 0px;
}
#main_content .main01_1 {
  margin-bottom: 10px;
}
#main_content .main01_left {
  padding: 0px 10px;
}
#main_content .main01_img {
  display: inline-block;
  width: 485px;
  height: 368px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/main01_img.png);
}
#main_content .main_tit04 {
  font-weight: 500;
  font-size: 25px;
  line-height: 36px;
  text-align: center;
}
#main_content .main_tit {
  font-weight: 700;
  font-size: 55px;
  line-height: 80px;
  margin-bottom: 10px;
  text-align: center;
}
#main_content .main_tit_color {
  font-weight: 700;
  font-size: 38px;
  line-height: 55px;
  text-align: center;
  color: #6857D1;
  margin-bottom: 90px;
  margin-top: 50px;
}
@media (max-width: 575.98px) {
  #main_content .main_tit_color {
    font-size: 30px;
    padding: 0 50px;
    line-height: 45px;
    margin-bottom: 50px;
  }
}
#main_content .font_bold {
  font-weight: 700;
  font-size: 38px;
  padding-top: 80px;
  text-align: center;
  margin-bottom: 20px;
}
#main_content .logo_ClassLink {
  width: 338px;
  height: 71px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/logo_ClassLink.png);
  margin: 200px auto 80px;
  display: flex;
}
#main_content .main02_1 {
  justify-content: center;
  gap: 30px;
}
#main_content .cl_img01 {
  display: inline-block;
  width: 468px;
  height: 340px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/cl_img01.png);
  margin-left: 80px;
}
#main_content .cl_img02 {
  display: inline-block;
  width: 420px;
  height: 203px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/cl_img02.png);
  margin-right: 10px;
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
#main_content .cl_img03 {
  display: inline-block;
  width: 420px;
  height: 203px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/cl_img03.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
#main_content .cl_img04 {
  display: inline-block;
  width: 420px;
  height: 203px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/cl_img04.png);
  margin-right: 10px;
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
#main_content .cl_img05 {
  display: inline-block;
  width: 420px;
  height: 203px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/cl_img05.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
#main_content .cl_img06 {
  display: inline-block;
  width: 485px;
  height: 368px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/cl_img06.png);
}
#main_content .cl_img07 {
  display: inline-block;
  width: 342px;
  height: 342px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/cl_img07.png);
}
#main_content .cl_img08 {
  display: inline-block;
  width: 342px;
  height: 342px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/cl_img08.png);
}
#main_content .cl_img09 {
  display: inline-block;
  width: 342px;
  height: 342px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/cl_img09.png);
}
#main_content .cl_img10 {
  display: inline-block;
  width: 1089px;
  height: 428px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/cl_img10.png);
}
#main_content .cl_img11 {
  display: inline-block;
  width: 192px;
  height: 192px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/cl_img11.png);
}
#main_content .cl_img12 {
  display: inline-block;
  width: 192px;
  height: 192px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/cl_img12.png);
}
#main_content .cl_img13 {
  display: inline-block;
  width: 192px;
  height: 192px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/cl_img13.png);
}
#main_content .cl_img14 {
  display: inline-block;
  width: 192px;
  height: 192px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/cl_img14.png);
}
#main_content .cl_img15 {
  display: inline-block;
  width: 192px;
  height: 192px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/cl_img15.png);
}
#main_content p {
  text-align: center;
  line-height: 30px;
}
#main_content .main02_bg {
  z-index: -10;
  width: 100%;
  height: 740px;
  background: #F7F0FF;
  padding-top: 20px;
}
#main_content .main02_cnt {
  margin-bottom: 60px;
}
#main_content .main02_2 {
  display: flex;
  flex-flow: row;
  gap: 10px;
  justify-content: center;
  margin-top: 70px;
  margin-bottom: 30px;
}
#main_content .main02_3 {
  display: flex;
  flex-flow: row;
  gap: 10px;
  justify-content: center;
}
#main_content .main_title {
  font-weight: 700;
  font-size: 18px;
  line-height: 26px;
  display: flex;
  align-items: center;
}
#main_content .main_title01 {
  text-align: center;
  margin-bottom: 50px;
  margin-top: 30px;
  font-weight: 600;
  font-size: 22px;
  line-height: 32px;
}
@media (max-width: 575.98px) {
  #main_content .main_title01 {
    padding: 0 20px;
    margin-bottom: 60px;
    margin-top: 0px;
    font-size: 18px;
  }
}
#main_content .main_circle {
  width: 82px;
  height: 82px;
  background: #7879F1;
  border-radius: 50px;
  position: absolute;
  top: -45px;
  left: 125px;
  display: flex;
  justify-content: center;
  align-items: center;
}
#main_content .circle_num {
  font-weight: 500;
  font-size: 40px;
  align-items: center;
  color: #FFFFFF;
}
#main_content .main02_card {
  width: 328px;
  height: 336px;
  position: relative;
  background: #FFFFFF;
  box-shadow: 6px 11px 16px 3px rgba(0, 0, 0, 0.06);
  border-radius: 15px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
#main_content .main_body {
  font-weight: 400;
  font-size: 24px;
  line-height: 41px;
}
#main_content .main_body02 {
  font-weight: 400;
  font-size: 20px;
  line-height: 39px;
  text-align: center;
}
@media (max-width: 575.98px) {
  #main_content .main_body02 {
    font-size: 14px;
    padding: 0px 33px 40px;
    line-height: 30px;
  }
}
#main_content .blue_bold {
  font-weight: 700;
  font-size: 20px;
  line-height: 41px;
  color: #6857D1;
}
#main_content .main03 {
  margin-top: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
#main_content .main_con {
  font-weight: 400;
  font-size: 20px;
  line-height: 35px;
  text-align: center;
  margin: 20px 0px;
  padding: 0 350px;
}
#main_content .slick-list {
  margin: 40px 0;
}
#main_content .slick-prev {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  border-radius: 50%;
  background-color: #FFFFFF;
  background-image: url(../images/icons/icon_arrow_light1.svg);
  background-size: 16px auto;
  transform: rotate(-90deg);
  box-shadow: -2px 0px 3px 3px rgba(0, 0, 0, 0.07);
  position: absolute;
  top: 43%;
  left: 31.9%;
  z-index: 100;
}
#main_content .slick-next {
  display: inline-block;
  width: 30px;
  height: 30px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  border-radius: 50%;
  background-color: #FFFFFF;
  background-image: url(../images/icons/icon_arrow_light1.svg);
  background-size: 16px auto;
  transform: rotate(90deg);
  box-shadow: 2px 0px 3px 3px rgba(0, 0, 0, 0.07);
  position: absolute;
  top: 43%;
  right: 32.4%;
}
#main_content .slick-arrow {
  border: none;
  text-indent: -9999px;
  overflow: hidden;
}
#main_content .slick-dots {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}
#main_content .slick-dots li {
  float: left;
  list-style: none;
  border: none;
  margin: 0 5px;
  width: 9px;
  height: 9px;
}
#main_content .slick-dots li button {
  background: url(../images/icon_slider_circle_off.png) no-repeat 0 0;
  text-indent: -9999px;
  overflow: hidden;
  border: none;
}
#main_content .slick-dots .slick-active button {
  background: url(../images/icon_slider_circle_on.png) no-repeat 0 0;
}
#main_content .main_tit02 {
  font-weight: 500;
  font-size: 33px;
  line-height: 48px;
  text-align: center;
  margin-bottom: 10px;
  padding-top: 80px;
}
#main_content .main_tit03 {
  font-weight: 700;
  font-size: 33px;
  line-height: 48px;
  margin-bottom: 10px;
  text-align: left;
}
#main_content .main_con02 {
  font-weight: 400;
  font-size: 20px;
  line-height: 35px;
  margin-top: 10px;
  margin-bottom: 20px;
}
#main_content .main_con03 {
  font-weight: 400;
  font-size: 20px;
  line-height: 35px;
  margin-top: 10px;
  text-align: center;
}
#main_content .gradient_bar01 {
  width: 563px;
  height: 13px;
  background: linear-gradient(90deg, #2C51D7 0%, #4FCED0 100%);
  border-radius: 50px;
  margin: 0 auto;
}
#main_content .main04 {
  margin-top: 60px;
  width: 100%;
  height: 1650px;
  background: #F7F0FF;
}
#main_content .main04_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
}
#main_content .main04_2 {
  display: flex;
  flex-flow: column;
  align-items: center;
  margin-top: 80px;
}
#main_content .main04_img_set {
  margin-top: 40px;
  display: flex;
  gap: 25px;
}
#main_content .main04_3 {
  margin-top: 100px;
  display: flex;
  flex-flow: column;
  align-items: center;
}
#main_content .main05 {
  margin-top: 60px;
}
#main_content .main05_img_set {
  display: flex;
  gap: 30px;
  justify-content: center;
  margin: 60px 0px 140px 0px;
}
#main_content .main05_img1 {
  display: inline-block;
  width: 192px;
  height: 192px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/main05_img1.png);
}
#main_content .main05_img2 {
  display: inline-block;
  width: 192px;
  height: 192px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/main05_img2.png);
}
#main_content .main05_img3 {
  display: inline-block;
  width: 192px;
  height: 192px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/main05_img3.png);
}
#main_content .main05_img4 {
  display: inline-block;
  width: 192px;
  height: 192px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/main05_img4.png);
}
#main_content .main05_img5 {
  display: inline-block;
  width: 192px;
  height: 192px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/main05_img5.png);
}
#main_content .main06 {
  margin-top: 100px;
  margin-bottom: 120px;
}
#main_content .main_table_question {
  margin-top: 20px;
  box-shadow: 0 0 0 1px #D1D3D4;
  border-radius: 5px;
  width: 75%;
  margin: 0 auto;
  display: flex;
  margin-bottom: 10px;
}
#main_content .main_table_question tbody {
  width: 100%;
}
#main_content .main_table_question #btnExpand01,
#main_content .main_table_question #btnExpand02,
#main_content .main_table_question #btnExpand03,
#main_content .main_table_question #btnExpand04 {
  cursor: pointer;
}
#main_content .main_table_question .tr_expand {
  border-top: 0.4px solid rgb(167, 169, 172);
  display: flex;
  padding: 20px 20px;
}
@media (max-width: 1272px) {
  #main_content .main_table_question .tr_expand {
    width: 68%;
  }
}
@media (max-width: 1199.98px) {
  #main_content .main_table_question .tr_expand {
    width: 57%;
  }
}
@media (max-width: 767.98px) {
  #main_content .main_table_question .tr_expand {
    width: 40%;
  }
}
@media (max-width: 575.98px) {
  #main_content .main_table_question .tr_expand {
    width: 100%;
  }
}
#main_content .main_table_question .main_notice02 {
  width: 95%;
}
#main_content .main_table_question .main_notice_tit02 {
  font-weight: 700;
  font-size: 16px;
  text-align: left;
  display: inline-block;
  width: 95%;
  line-height: 26px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: 20px;
}
@media (max-width: 1220px) {
  #main_content .main_table_question .main_notice_tit02 {
    width: 100%;
  }
}
@media (max-width: 1199.98px) {
  #main_content .main_table_question .main_notice_tit02 {
    width: 100%;
  }
}
@media (max-width: 767.98px) {
  #main_content .main_table_question .main_notice_tit02 {
    width: 100%;
  }
}
@media (max-width: 575.98px) {
  #main_content .main_table_question .main_notice_tit02 {
    width: 100%;
  }
}
#main_content .main_table_question .main_notice_tit03 {
  font-weight: 400;
  font-size: 14px;
  line-height: 55px;
  text-align: right;
  color: #A7A9AC;
  margin-right: 10px;
}
#main_content .icons_arrow_dn {
  display: inline-block;
  width: 16px;
  height: 16px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icons/icon_arrow.svg);
  transform: rotate(180deg);
}
#main_content .icons_arrow_dn:hover, #main_content .icons_arrow_dn:focus, #main_content .icons_arrow_dn:active {
  transform: rotate(0);
}
@media (max-width: 575.98px) {
  #main_content .input-search {
    width: 100%;
  }
}
#main_content .main_tit_sec {
  display: flex;
  width: 75%;
  justify-content: center;
  align-items: center;
  margin: 10px auto;
}
#main_content .main_more {
  margin-left: auto;
  font-weight: 500;
  font-size: 24px;
  line-height: 35px;
  text-align: center;
  color: #7391FA;
  cursor: pointer;
}
#main_content .main_notice_cnt {
  border-bottom: 1px solid #D1D3D4;
  width: 75%;
  margin: 0 auto;
  padding: 20px 30px;
  display: flex;
  cursor: pointer;
  text-decoration: none;
}
#main_content .main_notice_tit01 {
  font-weight: 500;
  font-size: 24px;
  line-height: 35px;
  align-items: center;
  color: #A7A9AC;
  margin-right: 20px;
  width: 10%;
  margin-left: -11px;
}
#main_content .main_notice_tit02 {
  font-weight: 500;
  font-size: 24px;
  line-height: 35px;
  align-items: center;
  color: #454545;
}
#main_content .main_notice_tit03 {
  font-weight: 400;
  font-size: 20px;
  line-height: 29px;
  text-align: right;
  color: #A7A9AC;
  margin-left: auto;
}
#main_content .icons_plus_circle_on {
  margin-right: 5px;
  margin-top: -4px;
}
#main_content .gradient_bar02 {
  width: 815px;
  height: 13px;
  background: linear-gradient(90deg, #2C51D7 0%, #4FCED0 100%);
  border-radius: 50px;
  margin: 0 auto;
}
#main_content .btn_gotop {
  position: fixed;
  bottom: 80px;
  right: 10px;
  z-index: 9999;
}
@media (max-width: 1199.98px) {
  #main_content .main02_card {
    width: 267px;
    height: 350px;
    border-radius: 30px;
    padding: 36px 40px;
  }
  #main_content .main_body {
    font-size: 20px;
    line-height: 36px;
  }
  #main_content .main_con {
    font-size: 20px;
    line-height: 36px;
  }
  #main_content .blue_bold {
    font-size: 20px;
    line-height: 36px;
  }
  #main_content .main_circle {
    left: 94px;
  }
  #main_content .main04_img1 {
    width: 415px;
  }
  #main_content .main_con02 {
    font-size: 20px;
    line-height: 36px;
  }
  #main_content .main04_img2,
  #main_content .main04_img3,
  #main_content .main04_img4 {
    width: 270px;
  }
  #main_content .main04_img5 {
    width: 86%;
    margin-top: 0px;
  }
  #main_content .main04 {
    height: 1950px;
  }
  #main_content .main05_img1,
  #main_content .main05_img2,
  #main_content .main05_img3,
  #main_content .main05_img4,
  #main_content .main05_img5 {
    width: 162px;
    height: 162px;
  }
  #main_content .main05_img_set {
    gap: 20px;
  }
  #main_content .main_con {
    padding: 0 160px;
  }
}
@media (max-width: 575.98px) {
  #main_content .header-movie video {
    width: 220%;
    height: 150%;
  }
  #main_content .main01 {
    margin: 0px 0px;
  }
  #main_content .main01_left {
    padding: 0px 0px;
  }
  #main_content .main_tit04 {
    font-size: 18px;
    line-height: 30px;
  }
  #main_content .font_bold {
    font-size: 20px;
    line-height: 36px;
  }
  #main_content .gradient_bar01 {
    width: 100%;
  }
  #main_content .main_tit {
    font-size: 25px;
    line-height: 38px;
  }
  #main_content .main01_img {
    width: 90%;
  }
  #main_content .main02_img {
    width: 90%;
    height: 228px;
    margin: 0 auto;
  }
  #main_content .main_body {
    font-size: 16px;
    line-height: 30px;
  }
  #main_content .blue_bold {
    font-size: 16px;
    line-height: 30px;
  }
  #main_content .main_con {
    font-size: 16px;
    line-height: 30px;
    padding: 0 40px;
  }
  #main_content .main02_card {
    width: 70%;
    height: 290px;
    padding: 0px 0px;
  }
  #main_content .main_circle {
    width: 52px;
    height: 52px;
    left: 135px;
    top: -25px;
  }
  #main_content .main02_1 {
    gap: 40px;
    width: 107%;
  }
  #main_content .circle_num {
    font-size: 26px;
  }
  #main_content .main02_bg {
    padding-top: 40px;
    height: 1210px;
  }
  #main_content .main_tit02 {
    font-size: 20px;
    line-height: 26px;
  }
  #main_content .main_tit {
    font-size: 25px;
    line-height: 38px;
    padding: 35px 10px;
  }
  #main_content .gradient_bar01 {
    width: 90%;
  }
  #main_content .gradient_bar02 {
    width: 90%;
    height: 13px;
    background: linear-gradient(90deg, #2C51D7 0%, #4FCED0 100%);
    border-radius: 50px;
    margin: 0 auto;
  }
  #main_content .main01_1 {
    margin-bottom: 10px;
    padding: 0px 20px;
  }
  #main_content p {
    text-align: center;
  }
  #main_content .main04_1 {
    display: flex;
    flex-flow: column;
  }
  #main_content .main_tit03 {
    font-size: 22px;
    line-height: 48px;
    text-align: center;
  }
  #main_content .main_con02 {
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    margin: 0 15px;
  }
  #main_content .main04_img1 {
    width: 90%;
  }
  #main_content .main04_img_set {
    margin-top: 40px;
    display: flex;
    flex-flow: column;
  }
  #main_content .main04_2 {
    margin-top: 0px;
  }
  #main_content .main05_img_set {
    display: flex;
    gap: 20px;
    justify-content: center;
    margin: 60px 0;
    flex-flow: wrap;
  }
  #main_content .main_more {
    font-size: 18px;
  }
  #main_content .main_tit03 {
    margin-bottom: 0px;
  }
  #main_content .main_notice_tit01 {
    font-size: 14px;
  }
  #main_content .main_notice_tit02 {
    font-size: 14px;
    width: 68%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  #main_content .main_notice_tit03 {
    font-size: 12px;
  }
  #main_content .main_notice_cnt {
    width: 100%;
    align-items: center;
  }
  #main_content .main06 {
    margin-bottom: 60px;
  }
  #main_content .icons_plus_circle_on {
    width: 18px;
    height: 18px;
  }
  #main_content .footer_bg02 {
    width: 100%;
    height: 60px;
    background: #2C51D7;
  }
  #main_content .main_tit_sec {
    width: 86%;
  }
  #main_content .main03_slider {
    width: 220%;
    left: -223px;
  }
}

/* footer */
footer .edunwork_logo_white {
  width: 169px;
  height: 62px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/edunwork_logo_white.png);
}
@media (max-width: 575.98px) {
  footer .edunwork_logo_white {
    margin-top: 10px;
    margin-left: 48px;
  }
}

.logo_hb_white {
  width: 130px;
  height: 41px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/logo_hb_white.png);
}
@media (max-width: 575.98px) {
  .logo_hb_white {
    margin-left: 48px;
    margin-top: -12px;
  }
}

.footer_bg {
  width: 100%;
  height: 315px;
  background: #6857D1;
  display: flex;
  justify-content: center;
}
@media (max-width: 575.98px) {
  .footer_bg {
    height: 338px;
  }
}

.footer_con {
  display: flex;
  align-items: center;
}
@media (max-width: 575.98px) {
  .footer_con {
    margin-top: 58px;
  }
}

.footer_tit01,
.footer_tit02 {
  font-weight: 700;
  font-size: 16px;
  line-height: 26px;
  color: #FFFFFF;
}

.footer_cnt,
.footer_cnt02 {
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  display: flex;
  align-items: center;
  color: #FFFFFF;
}

.footer_cnt03 {
  font-weight: 700;
  color: #FFFFFF;
}

.footer_cnt02 {
  cursor: pointer;
  margin-top: 10px;
}
@media (max-width: 575.98px) {
  .footer_cnt02 {
    font-size: 13px;
    line-height: 24px;
  }
}

.footer01 {
  display: flex;
}

.footer_left {
  width: 35%;
  margin-bottom: 125px;
  margin-right: 10px;
}

.footer_right {
  width: 100%;
}

@media (max-width: 1199.98px) {
  .footer_right {
    width: 80%;
  }
}
@media (min-width: 1322px) {
  .footer_right {
    width: 90%;
  }
}
@media (max-width: 575.98px) {
  .footer_bg02 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .footer_left {
    width: 11%;
    margin-bottom: 306px;
    margin-left: 20px;
  }
  .footer_tit01,
  .footer_tit02 {
    font-weight: 700;
    font-size: 13px;
    line-height: 24px;
    color: #FFFFFF;
    margin-bottom: 10px;
  }
  .footer_tit01 {
    margin-bottom: 0px;
  }
  .footer_tit02 {
    margin-bottom: 21px;
  }
  .footer_cnt {
    font-size: 13px;
    line-height: 24px;
  }
  .footer_cnt04 {
    padding-right: 105px;
  }
}
.web_only_main {
  /* 서브페이지 - metaverse.html */
  /* 서브페이지 - english_castle.html */
  /* 서브페이지 - phonics_ai.html */
  /* 서브페이지 - hwband.html */
  /* 서브페이지 - checkbada.html */
  /* 서브페이지 - gama.html */
  /* 서브페이지 - nurse.html */
  /* 서브페이지 - landscaping.html */
  /* 서브페이지 - 09_customer.html */
  /* 서브페이지 - main_고객센터_이용약관.html */
  /* 서브페이지 - main_고객센터_문의.html */
}
.web_only_main .pagination {
  justify-content: center;
}
.web_only_main .content_area {
  padding: 30px 24px;
  background: #FFFFFF;
  border-radius: 0px 5px 5px 5px;
  margin: 0px auto;
  margin-top: 0px;
}
@media (max-width: 1272px) {
  .web_only_main .content_area {
    margin-top: 60px;
  }
}
@media (max-width: 575.98px) {
  .web_only_main .content_area {
    padding: 0px 0px;
    border: none;
    margin-top: 60px;
  }
  .web_only_main .content {
    background-color: #fff !important;
    padding: 20px 25px 30px;
  }
}
.web_only_main .nav_web {
  position: absolute;
  z-index: 1000;
  width: 100%;
}
.web_only_main .nav_web.floatMu {
  position: fixed !important;
  top: 0;
  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.15);
}
.web_only_main .nav_top_wrap {
  background: #fff;
}
.web_only_main .nav_mobile.main_mb {
  position: absolute;
  z-index: 1000;
  width: 100%;
}
.web_only_main .nav_mobile.main_mb.floatMu {
  position: fixed !important;
  top: 0;
  box-shadow: 1px 2px 8px rgba(0, 0, 0, 0.15);
}
@media (max-width: 991.9px) {
  .web_only_main .nav_mobile.main_mb {
    top: 0px;
  }
}
.web_only_main .nav_mobile.main_mb .nav_top {
  position: relative;
}
.web_only_main .nav_sub {
  background: #fff;
  transition: all 0.2s;
}
.web_only_main .nav_sub.smallH {
  height: auto;
  padding: 6px 0 5px;
}
.web_only_main .btn_freestart {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 40px;
  gap: 10px;
  width: 100%;
  height: 59px;
  background: #7391FA;
  border-radius: 0px;
}
.web_only_main .btn_freestart .freestart_font {
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  color: #FFFFFF;
}
.web_only_main .btn_freestart .icon_home_w {
  display: inline-block;
  width: 20px;
  height: 18px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icon_home_w.png);
}
@media (max-width: 575.98px) {
  .web_only_main .btn_freestart {
    position: fixed;
    bottom: -1px;
    right: 0px;
    z-index: 9999;
  }
}
@media (min-width: 576px) {
  .web_only_main .btn_freestart {
    display: none !important;
  }
}
.web_only_main .meta_main02_bg {
  width: 100%;
  height: 860px;
  background: #F7F0FF;
  padding-top: 20px;
}
.web_only_main .english_castle .logo_english {
  width: 164px;
  height: 75px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/logo_english.png);
  margin: 200px auto 80px;
  display: flex;
}
.web_only_main .english_castle .eng_img01 {
  width: 388px;
  height: 392px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/eng_img01.png);
  margin: 50px auto -10px;
  display: flex;
}
.web_only_main .english_castle .eng_main02_bg {
  width: 100%;
  height: 1090px;
  background: #F7F0FF;
  padding-top: 20px;
}
.web_only_main .english_castle .card_title {
  font-weight: 700;
  font-size: 26px;
  line-height: 38px;
  display: flex;
  align-items: center;
  color: #5D5FEF;
}
.web_only_main .english_castle .card_line {
  border: 1px solid #A5A6F6;
  width: 100%;
}
.web_only_main .english_castle .main02_card {
  padding: 0 40px;
  margin-top: 80px;
}
.web_only_main .english_castle .font_bold_s {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: -60px;
  text-align: center;
  margin-top: -80px;
}
.web_only_main .english_castle .eng_img02 {
  width: 410px;
  height: 226px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/eng_img02.png);
  margin: 0px auto -10px;
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
  margin-right: 20px;
}
.web_only_main .english_castle .eng_img03 {
  width: 410px;
  height: 226px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/eng_img03.png);
  margin: 0px auto -10px;
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
.web_only_main .english_castle .eng_img04 {
  width: 410px;
  height: 226px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/eng_img04.png);
  margin: 0px auto -10px;
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
  margin-right: 20px;
}
.web_only_main .english_castle .eng_img05 {
  width: 410px;
  height: 226px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/eng_img05.png);
  margin: 0px auto -10px;
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
.web_only_main .english_castle .main03 {
  flex-flow: column;
}
.web_only_main .english_castle .img_set {
  display: flex;
}
.web_only_main .english_castle .circle_small {
  width: 50px;
  height: 50px;
  background: #A5A6F6;
  border-radius: 50px;
  display: flex;
  justify-content: center;
}
.web_only_main .english_castle .circle_num_small {
  font-weight: 500;
  font-size: 30px;
  line-height: 43px;
  display: flex;
  align-items: center;
  color: #FFFFFF;
  justify-content: center;
}
.web_only_main .english_castle .eng_sen_text {
  font-weight: 400;
  font-size: 25px;
  line-height: 36px;
}
.web_only_main .english_castle .eng_sen {
  display: flex;
  align-items: center;
  gap: 20px;
}
.web_only_main .english_castle .img_set_set {
  display: flex;
  flex-flow: column;
  gap: 30px;
  margin-top: 30px;
}
.web_only_main .english_castle .eng_sen_set {
  display: flex;
  flex-flow: column;
  gap: 10px;
  margin-top: 60px;
}
.web_only_main .english_castle .card_set {
  display: flex;
  gap: 30px;
  margin-top: 80px;
}
.web_only_main .english_castle .main04 {
  height: 1040px !important;
}
.web_only_main .english_castle .main04_1 {
  flex-flow: column;
}
.web_only_main .english_castle .main04_card {
  width: 328px;
  height: 266px;
  position: relative;
  background: #FFFFFF;
  box-shadow: 6px 11px 16px 3px rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 2px solid #A5A6F6;
  padding: 0 30px;
}
.web_only_main .english_castle .main_circle_purple {
  width: 70px;
  height: 70px;
  background: #A5A6F6;
  border-radius: 50px;
  position: absolute;
  top: -45px;
  left: 125px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.web_only_main .english_castle .icon_edu {
  width: 127px;
  height: 116px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icon_edu.png);
}
.web_only_main .english_castle .icon_conversation {
  width: 127px;
  height: 116px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icon_conversation.png);
}
.web_only_main .english_castle .icon_battle {
  width: 127px;
  height: 116px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icon_battle.png);
}
.web_only_main .english_castle .icon_3d {
  width: 127px;
  height: 116px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icon_3d.png);
}
.web_only_main .english_castle .icon_3d_conversation {
  width: 127px;
  height: 116px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icon_3d_conversation.png);
}
.web_only_main .english_castle .icon_vr {
  width: 127px;
  height: 116px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icon_vr.png);
}
.web_only_main .english_castle .main05_card {
  width: 270px;
  height: 270px;
  position: relative;
  background: #F7F0FF;
  box-shadow: 6px 11px 16px 3px rgba(0, 0, 0, 0.06);
  border-radius: 15px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.web_only_main .english_castle .main05_card .text {
  margin-top: 30px;
  font-weight: 400;
  font-size: 25px;
  line-height: 36px;
}
.web_only_main .english_castle .main05_card_set {
  display: flex;
  gap: 30px;
  justify-content: center;
}
.web_only_main .english_castle .main05_card_set_set {
  display: flex;
  margin-top: 140px;
  justify-content: center;
  flex-flow: column;
  gap: 30px;
}
.web_only_main .english_castle .font_bold_s_under {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: -60px;
  text-align: center;
  margin-top: 0px;
}
.web_only_main .english_castle .main06 {
  display: flex;
  justify-content: center;
}
.web_only_main .english_castle .purple_bold {
  font-weight: 700;
  font-size: 20px;
  line-height: 29px;
  color: #5D5FEF;
}
.web_only_main .english_castle .main06_card {
  width: 854px;
  height: 161px;
  position: relative;
  background: #F7F0FF;
  box-shadow: 6px 11px 16px 3px rgba(0, 0, 0, 0.06);
  border-radius: 20px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  gap: 10px;
  margin-top: 10px;
  margin-bottom: 50px;
  padding: 0 30px;
}
.web_only_main .english_castle .main06_card .text {
  font-weight: 700;
  font-size: 20px;
  line-height: 29px;
  text-align: left;
}
.web_only_main .english_castle .main06_card_set .question {
  font-weight: 700;
  font-size: 36px;
  line-height: 52px;
  display: flex;
  align-items: center;
  text-align: center;
  color: #A7A9AC;
}
.web_only_main .english_castle .main06_card_set .question_text {
  display: flex;
  align-items: center;
  gap: 10px;
}
.web_only_main .phonics_ai .logo_ai {
  width: 142px;
  height: 96px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/logo_ai.png);
  margin: 200px auto 80px;
  display: flex;
}
.web_only_main .phonics_ai .ai_img01 {
  width: 512px;
  height: 388px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/ai_img01.png);
  margin: 50px auto -10px;
  display: flex;
}
.web_only_main .phonics_ai .ai_main02_bg {
  background: #F7F0FF;
  height: 720px;
}
.web_only_main .phonics_ai .main02_set {
  display: flex;
  gap: 20px;
}
.web_only_main .phonics_ai .card_title {
  font-weight: 700;
  font-size: 26px;
  line-height: 38px;
  display: flex;
  align-items: center;
  color: #5D5FEF;
}
.web_only_main .phonics_ai .card_line {
  border: 0.4px solid #A5A6F6;
  width: 90%;
}
.web_only_main .phonics_ai .main02_card {
  padding: 0 40px;
  width: 348px !important;
  height: 435px !important;
  margin-top: 50px;
}
.web_only_main .phonics_ai .ai_img02 {
  width: 158px;
  height: 337px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/ai_img02.png);
}
.web_only_main .phonics_ai .main02_1 {
  position: relative;
}
.web_only_main .phonics_ai .ai_img02 {
  position: absolute;
  top: -162px;
  left: 390px;
}
.web_only_main .phonics_ai .ai_img03 {
  width: 1255px;
  height: 126px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/ai_img03.png);
}
.web_only_main .phonics_ai .main03 {
  flex-flow: column;
}
.web_only_main .phonics_ai .font_bold_s {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: -60px;
  text-align: center;
  margin-top: -80px;
}
.web_only_main .phonics_ai .ai_img04 {
  width: 410px;
  height: 226px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/ai_img04.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
.web_only_main .phonics_ai .ai_img05 {
  width: 312px;
  height: 172px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/ai_img05.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
.web_only_main .phonics_ai .ai_img06 {
  width: 312px;
  height: 172px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/ai_img06.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
.web_only_main .phonics_ai .ai_img07 {
  width: 312px;
  height: 172px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/ai_img07.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
.web_only_main .phonics_ai .img_set {
  display: flex;
  justify-content: center;
  margin: 40px 0px;
  gap: 20px;
}
.web_only_main .phonics_ai .ai_body {
  font-weight: 700;
  font-size: 26px;
  line-height: 38px;
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.web_only_main .phonics_ai .ai_img08 {
  width: 410px;
  height: 226px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/ai_img08.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
.web_only_main .phonics_ai .ai_img09 {
  width: 410px;
  height: 226px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/ai_img09.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
.web_only_main .phonics_ai .ai_img10 {
  width: 410px;
  height: 226px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/ai_img10.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
.web_only_main .phonics_ai .ai_img11 {
  width: 410px;
  height: 226px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/ai_img11.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
.web_only_main .phonics_ai .ai_main03_bg {
  background: #F7F0FF;
  width: 100%;
  padding: 70px 0px;
}
.web_only_main .phonics_ai .ai_img12 {
  width: 312px;
  height: 172px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/ai_img12.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
.web_only_main .phonics_ai .ai_img13 {
  width: 312px;
  height: 172px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/ai_img13.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
.web_only_main .phonics_ai .ai_img14 {
  width: 312px;
  height: 172px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/ai_img14.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
.web_only_main .phonics_ai .ai_img15 {
  width: 410px;
  height: 226px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/ai_img15.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 30px;
}
.web_only_main .phonics_ai .ai_img16 {
  width: 245px;
  height: 319px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../images/ai_img16.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.web_only_main .phonics_ai .ai_text {
  width: 245px;
  height: 64px;
  background: #A5A6F6;
  border-radius: 32px;
  font-weight: 700;
  font-size: 25px;
  line-height: 36px;
  display: flex;
  align-items: center;
  color: #FFFFFF;
  justify-content: center;
}
.web_only_main .phonics_ai .arrow_right_circle {
  display: inline-block;
  width: 31px;
  height: 31px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/arrow_right_circle.png);
  margin-right: 10px;
}
.web_only_main .phonics_ai .ai_text {
  margin-top: 20px;
  margin-bottom: 10px;
}
.web_only_main .phonics_ai .ai_set_text {
  font-weight: 400;
  font-size: 25px;
  line-height: 43px;
}
.web_only_main .phonics_ai .ai_set {
  margin-right: 30px;
}
.web_only_main .phonics_ai .main04_1 {
  padding-top: 110px;
  align-items: flex-start !important;
}
.web_only_main .phonics_ai .main04 {
  height: 780px !important;
}
.web_only_main .phonics_ai .ai_img17 {
  width: 245px;
  height: 319px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../images/ai_img17.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.web_only_main .phonics_ai .ai_img18 {
  width: 245px;
  height: 319px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../images/ai_img18.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.web_only_main .phonics_ai .ai_set_text {
  display: flex;
  width: 100%;
}
.web_only_main .phonics_ai .left_area {
  width: 15%;
}
.web_only_main .phonics_ai .right_area {
  width: 80%;
}
.web_only_main .phonics_ai .location {
  margin-top: 52px;
}
.web_only_main .hwband .logo_hwband {
  width: 176px;
  height: 49px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/logo_hwband.png);
  margin: 200px auto 80px;
  display: flex;
}
.web_only_main .hwband .hb_img01 {
  width: 512px;
  height: 388px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/hb_img01.png);
  margin: 50px auto -10px;
  display: flex;
}
.web_only_main .hwband .hb_main02_bg {
  background: #F7F0FF;
}
.web_only_main .hwband .hb_main02_bg .main02_card {
  width: 964px !important;
  height: 496px !important;
  margin-bottom: 40px;
}
.web_only_main .hwband .hb_card_title {
  font-weight: 400;
  font-size: 30px;
  line-height: 43px;
  display: flex;
  align-items: center;
  text-align: center;
  color: #6857D1;
}
.web_only_main .hwband .hb_card_title_bold {
  font-weight: 700;
  font-size: 30px;
  line-height: 43px;
  display: flex;
  align-items: center;
  text-align: center;
  color: #6857D1;
}
.web_only_main .hwband .hb_img02 {
  width: 780px;
  height: 286px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/hb_img02.png);
  margin: 50px auto -10px;
  display: flex;
}
.web_only_main .hwband .hb_img03 {
  width: 780px;
  height: 286px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/hb_img03.png);
  margin: 50px auto -10px;
  display: flex;
}
.web_only_main .hwband .hb_img04 {
  width: 780px;
  height: 286px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/hb_img04.png);
  margin: 50px auto -10px;
  display: flex;
}
.web_only_main .hwband .hb_img05 {
  width: 780px;
  height: 286px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/hb_img05.png);
  margin: 50px auto -10px;
  display: flex;
}
.web_only_main .hwband .main03 {
  flex-flow: column;
}
.web_only_main .hwband .hb_img06 {
  width: 297px;
  height: 270px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/hb_img06.png);
  display: flex;
}
.web_only_main .hwband .hb_img07 {
  width: 302px;
  height: 270px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/hb_img07.png);
  display: flex;
}
.web_only_main .hwband .img_set_set {
  display: flex;
  align-items: center;
  gap: 20px;
}
.web_only_main .hwband .hb_body {
  font-weight: 400;
  font-size: 20px;
  line-height: 41px;
}
.web_only_main .hwband .main03_bg {
  background: #FFFFFF;
  border: 2px solid #A5A6F6;
  border-radius: 20px;
  width: 60%;
  padding: 60px 80px;
  margin-bottom: 100px;
}
.web_only_main .checkbada .logo_checkbada {
  width: 333px;
  height: 90px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/logo_checkbada.png);
  margin: 200px auto 80px;
  display: flex;
}
.web_only_main .checkbada .cb_img01 {
  width: 512px;
  height: 388px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/cb_img01.png);
  margin: 50px auto -10px;
  display: flex;
}
.web_only_main .checkbada .cb_img02 {
  width: 671px;
  height: 225px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/cb_img02.png);
  display: flex;
}
.web_only_main .checkbada .main02_card {
  width: 820px !important;
  height: 816px !important;
  margin-top: 40px;
  padding-top: 60px;
  padding-bottom: 30px;
}
.web_only_main .checkbada .main02_bg {
  height: 1680px !important;
}
.web_only_main .checkbada .circle_small {
  display: inline-block;
  width: 60px;
  height: 60px;
  background: #A5A6F6;
  border-radius: 30px;
}
.web_only_main .checkbada .circle_num_small {
  font-weight: 500;
  font-size: 40px;
  line-height: 58px;
  display: flex;
  align-items: center;
  color: #FFFFFF;
  justify-content: center;
}
.web_only_main .checkbada .cb_text {
  font-weight: 700;
  font-size: 25px;
  line-height: 36px;
  display: flex;
  align-items: center;
  text-align: center;
  color: #6857D1;
}
.web_only_main .checkbada .circle_text {
  display: flex;
  gap: 10px;
}
.web_only_main .checkbada .circle_text_set {
  display: flex;
  gap: 130px;
  margin-left: 50px;
}
.web_only_main .checkbada .cb_img03 {
  width: 671px;
  height: 225px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/cb_img03.png);
  display: flex;
}
.web_only_main .checkbada .card_line {
  border: 0.4px solid #A5A6F6;
  width: 80%;
  margin-top: 20px;
  margin-bottom: 20px;
}
.web_only_main .checkbada .card_font_bold {
  font-weight: 700;
  font-size: 30px;
  line-height: 51px;
  display: flex;
  align-items: center;
  text-align: center;
  color: #6857D1;
}
.web_only_main .checkbada .cb_img04 {
  width: 644px;
  height: 237px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/cb_img04.png);
  display: flex;
}
.web_only_main .checkbada .main02_card_01 {
  position: relative;
  background: #FFFFFF;
  box-shadow: 6px 11px 16px 3px rgba(0, 0, 0, 0.06);
  border-radius: 15px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 820px !important;
  margin-top: 40px;
  padding-top: 60px;
  padding-bottom: 30px;
}
.web_only_main .checkbada .icon_skillup {
  width: 142px;
  height: 142px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icon_skillup.png);
}
.web_only_main .checkbada .icon_careup {
  width: 142px;
  height: 142px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icon_careup.png);
}
.web_only_main .checkbada .icon_dreamup {
  width: 142px;
  height: 142px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icon_dreamup.png);
}
.web_only_main .checkbada .main03_card {
  background: #F7F0FF;
  box-shadow: 5px 11px 24px rgba(0, 0, 0, 0.25);
  border-radius: 20px;
  width: 60%;
  padding: 90px 70px;
}
.web_only_main .checkbada .main03_bg {
  display: flex;
  justify-content: center;
  margin-top: 70px;
  margin-bottom: 130px;
}
.web_only_main .checkbada .cb_text_cs {
  width: 245px;
  height: 64px;
  background: #A5A6F6;
  border-radius: 32px;
  font-weight: 700;
  font-size: 30px;
  line-height: 43px;
  display: flex;
  align-items: center;
  color: #FFFFFF;
  justify-content: center;
  margin-top: 50px;
  margin-bottom: 20px;
}
.web_only_main .checkbada .cb_text_purple {
  font-weight: 400;
  font-size: 25px;
  line-height: 36px;
  display: flex;
  align-items: center;
  text-align: center;
  color: #6857D1;
}
.web_only_main .checkbada .img_set {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
.web_only_main .checkbada .img_set_set {
  display: flex;
  gap: 50px;
  justify-content: center;
}
.web_only_main .gama .gama_img01 {
  width: 203px;
  height: 420px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/gama_img01.png);
  margin: 50px auto -10px;
  display: flex;
  margin-bottom: 30px;
}
.web_only_main .gama .main01 {
  padding-top: 120px;
}
.web_only_main .gama .gama_img02 {
  width: 420px;
  height: 203px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/gama_img02.png);
}
.web_only_main .gama .main02_1 {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
  gap: 50px !important;
}
.web_only_main .gama .gama_body {
  font-weight: 500;
  font-size: 20px;
  line-height: 29px;
  display: flex;
  align-items: center;
  text-align: center;
}
.web_only_main .gama .gama_img03 {
  width: 420px;
  height: 203px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/gama_img03.png);
}
.web_only_main .gama .gama_img04 {
  width: 420px;
  height: 203px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/gama_img04.png);
}
.web_only_main .gama .gama_img05 {
  width: 420px;
  height: 203px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/gama_img05.png);
}
.web_only_main .gama .gama_img06 {
  width: 420px;
  height: 203px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/gama_img06.png);
}
.web_only_main .gama .gama_img07 {
  width: 420px;
  height: 203px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/gama_img07.png);
}
.web_only_main .gama .gama_img08 {
  width: 420px;
  height: 203px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/gama_img08.png);
}
.web_only_main .gama .img_set {
  display: flex;
  gap: 40px;
}
.web_only_main .gama .img_set_set {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 40px;
  margin-top: 70px;
  margin-bottom: 100px;
}
.web_only_main .nurse .gh_img01 {
  width: 430px;
  height: 431px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/gh_img01.png);
  margin: 50px auto -10px;
  display: flex;
  margin-bottom: 30px;
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.web_only_main .nurse .main01 {
  padding-top: 120px;
}
.web_only_main .nurse .gh_img02 {
  width: 321px;
  height: 321px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/gh_img02.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.web_only_main .nurse .gh_img03 {
  width: 321px;
  height: 321px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/gh_img03.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.web_only_main .nurse .gh_img04 {
  width: 321px;
  height: 321px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/gh_img04.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.web_only_main .nurse .gh_img05 {
  width: 321px;
  height: 321px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/gh_img05.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.web_only_main .nurse .gh_img06 {
  width: 321px;
  height: 321px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/gh_img06.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.web_only_main .nurse .gh_img07 {
  width: 321px;
  height: 321px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/gh_img07.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.web_only_main .nurse .gh_img08 {
  width: 321px;
  height: 321px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/gh_img08.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.web_only_main .nurse .gh_img09 {
  width: 321px;
  height: 321px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/gh_img09.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.web_only_main .nurse .img_set {
  display: flex;
  gap: 40px;
}
.web_only_main .nurse .img_set_set {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 40px;
  margin-top: 70px;
  margin-bottom: 100px;
}
.web_only_main .nurse .main_bg {
  width: 100%;
  background: #F7F0FF;
  padding-top: 20px;
  padding-bottom: 80px;
}
.web_only_main .landscaping .jk_img01 {
  width: 430px;
  height: 431px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/jk_img01.png);
  margin: 50px auto -10px;
  display: flex;
  margin-bottom: 30px;
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.web_only_main .landscaping .main01 {
  padding-top: 120px;
}
.web_only_main .landscaping .jk_img02 {
  width: 321px;
  height: 321px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/jk_img02.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.web_only_main .landscaping .jk_img03 {
  width: 321px;
  height: 321px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/jk_img03.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.web_only_main .landscaping .jk_img04 {
  width: 321px;
  height: 321px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/jk_img04.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.web_only_main .landscaping .jk_img05 {
  width: 321px;
  height: 321px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/jk_img05.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.web_only_main .landscaping .jk_img06 {
  width: 321px;
  height: 321px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/jk_img06.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.web_only_main .landscaping .jk_img07 {
  width: 321px;
  height: 321px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/jk_img07.png);
  box-shadow: 6px 7px 20px 0px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}
.web_only_main .landscaping .main_bg {
  width: 100%;
  background: #F7F0FF;
  padding-top: 20px;
  padding-bottom: 80px;
}
.web_only_main .landscaping .img_set {
  display: flex;
  gap: 40px;
}
.web_only_main .landscaping .img_set_set {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 40px;
  margin-top: 70px;
  margin-bottom: 100px;
}
.web_only_main .customer .main02_set {
  display: flex;
  gap: 30px;
  margin-top: 60px;
  justify-content: center;
}
.web_only_main .customer .icon_customer {
  width: 142px;
  height: 142px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icon_customer.png);
}
.web_only_main .customer .custom_tit {
  font-weight: 700;
  font-size: 24px;
  line-height: 35px;
}
.web_only_main .customer .custom_time {
  font-weight: 400;
  font-size: 18px;
  line-height: 26px;
  text-align: center;
}
.web_only_main .customer .custom_num {
  font-weight: 700;
  font-size: 26px;
  line-height: 38px;
  color: #6857D1;
  margin-top: 30px;
}
.web_only_main .customer .main_card {
  width: 25%;
  position: relative;
  background: #FFFFFF;
  box-shadow: 4px 7px 20px 4px rgba(0, 0, 0, 0.16);
  border-radius: 15px;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 90px 0px;
}
.web_only_main .customer .icon_regi {
  width: 142px;
  height: 142px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icon_regi.png);
}
.web_only_main .customer .custom_btn {
  width: 270px;
  height: 78px;
  background: #A5A6F6;
  border-radius: 10px;
  font-weight: 700;
  font-size: 24px;
  line-height: 35px;
  display: flex;
  align-items: center;
  text-align: center;
  color: #FFFFFF;
  justify-content: center;
  margin-top: 30px;
}
.web_only_main .customer .custom_btn:hover, .web_only_main .customer .custom_btn:focus, .web_only_main .customer .custom_btn:active {
  background: #6857D1;
  cursor: pointer;
}
.web_only_main .customer .main01 {
  margin-top: 160px !important;
}
.web_only_main .customer a {
  text-decoration-line: none;
}
.web_only_main .termsofuse .termsofuse_font {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  color: #A7A9AC;
  margin-bottom: 20px;
}
.web_only_main .termsofuse .termsofuse_form {
  width: 100%;
  border: 0.4px solid #A7A9AC;
  border-radius: 5px;
  margin: 0 auto;
  padding: 30px 40px;
  margin-top: 70px;
}
@media (max-width: 575.98px) {
  .web_only_main .termsofuse .termsofuse_form {
    padding: 30px 20px;
  }
}
.web_only_main .termsofuse .termsofuse_form_font {
  font-weight: 400;
  font-size: 16px;
  line-height: 23px;
}
.web_only_main .inquiry .form_section {
  width: 50%;
  margin: 0 auto;
}
.web_only_main .inquiry .title_type {
  font-weight: 700;
  font-size: 24px;
  line-height: 35px;
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}
.web_only_main .inquiry .explain_text {
  font-weight: 400;
  font-size: 12px;
  line-height: 17px;
  color: #A7A9AC;
  margin-top: 5px;
}
.web_only_main .inquiry .write_area {
  height: 155px;
  background: #FFFFFF;
  border: 0.4px solid rgba(167, 169, 172, 0.4);
  border-radius: 5px;
}
.web_only_main .inquiry .write_area_text {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  display: flex;
  align-items: center;
  color: #D1D3D4;
  margin-left: 10px;
  margin-top: 10px;
}
.web_only_main .inquiry .personal_info {
  margin-top: 30px;
  margin-bottom: 10px;
}
.web_only_main .inquiry .table-borderless {
  height: 85px;
  border-radius: 5px;
  box-shadow: 0 0 0 0.4px #A7A9AC;
}
.web_only_main .inquiry .table-borderless thead {
  background: #F9F9FC;
  border-radius: 5px 5px 0px 0px;
  font-weight: 500;
  font-size: 14px;
  line-height: 20px;
}
.web_only_main .inquiry .table-borderless td {
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
}
.web_only_main .inquiry .attach_file {
  padding: 0 0;
}
.web_only_main .inquiry .btn_submit {
  display: flex;
  margin: 0 auto;
  margin-top: 60px;
}
@media (max-width: 575.98px) {
  .web_only_main .inquiry .form_section {
    width: 100%;
  }
  .web_only_main .inquiry thead {
    float: left;
  }
  .web_only_main .inquiry thead tr,
  .web_only_main .inquiry thead tr th {
    display: block;
    border-bottom: 0.4px solid #A7A9AC;
  }
  .web_only_main .inquiry thead tr:last-child,
  .web_only_main .inquiry thead tr th:last-child {
    border-bottom: none;
  }
  .web_only_main .inquiry tbody {
    display: block;
    overflow-x: hidden;
    white-space: nowrap;
  }
  .web_only_main .inquiry tr {
    display: inline-block;
  }
  .web_only_main .inquiry td {
    display: block;
    border-bottom: 0.4px solid #A7A9AC;
    min-width: 230%;
  }
  .web_only_main .inquiry td:last-child {
    border-bottom: none;
  }
}

.icons_close {
  display: inline-block;
  width: 20px;
  height: 20px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icon_close.svg);
}

/* .footbnr_wrap {
	.bx {
		position: absolute;
		bottom: -100%;
		left: 0;
		-webkit-animation: footbnr_set .4s forwards cubic-bezier(0, 0, 0.2, 1) .4s;
		-moz-animation: footbnr_set .4s forwards cubic-bezier(0, 0, 0.2, 1) .4s;
		-o-animation: footbnr_set .4s forwards cubic-bezier(0, 0, 0.2, 1) .4s;
		animation: footbnr_set .4s forwards cubic-bezier(0, 0, 0.2, 1) .4s;
		width: 100%;
		max-height: 100%;
		overflow-y: auto;

		.close_banner_today {
			position: absolute;
			top: 2px;
			padding: 5px 0 2px;
			font-size: 16px;
			line-height: 19px;
			color: #fff;
			left: 20px;
			padding-left: 34px;
		}
	}

	.img_wrap {
		position: relative;
		margin-top: 40px;
		padding: 25px 0 28px;
		border-radius: 17px 17px 0 0;
		background: #fff;
		overflow: hidden;

		.img {
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			height: auto;
			padding: 0 5px;
			position: relative;

			a {
				position: relative;
				display: block;
				height: 0;
				padding-bottom: 75%;
				border-radius: 6px;
				background: #f5f5f5 url(../svg/img_dft.svg?v=1673574939902) 50% 50% no-repeat;
				background-size: 74px;
			}
		}

		.swipe_img {
			padding-right: 46px;
			-webkit-transform: translate3d(23px, 0px, 0px);
			-moz-transform: translate3d(23px, 0px, 0px);
			transform: translate3d(23px, 0px, 0px);
			position: relative;
			display: -webkit-box;
			display: -webkit-flex;
			display: -moz-box;
			display: -ms-flexbox;
			display: flex;

			.swipe_img>* {
				width: 100%;
				-webkit-flex-shrink: 0;
				-ms-flex-negative: 0;
				flex-shrink: 0;
			}
		}

	}
} */
/* sejong_hangul.html */
.sejong_hangul .sh_img01 {
  width: 164px;
  height: 113px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img01.png);
  margin: 200px auto 80px;
  display: flex;
}
.sejong_hangul .sh_img02 {
  width: 392px;
  height: 396px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img02.png);
  margin: 30px auto 30px;
}
.sejong_hangul .font_sec {
  font-weight: 400;
  font-size: 32px;
}
.sejong_hangul .font_bold {
  padding-top: 60px !important;
}
.sejong_hangul .sh_img03 {
  width: 532px;
  height: 333px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img03.png);
  margin-right: 20px;
}
.sejong_hangul .sh_img04 {
  width: 532px;
  height: 333px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img04.png);
}
.sejong_hangul .sh_img05 {
  width: 532px;
  height: 333px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img05.png);
  margin-right: 20px;
}
.sejong_hangul .sh_img06 {
  width: 532px;
  height: 333px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img06.png);
}
.sejong_hangul .sh_img07 {
  width: 100%;
  height: 120px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img07.png);
}
.sejong_hangul .img_set {
  width: 90%;
  justify-content: center;
  align-items: center;
}
.sejong_hangul .img_set_set {
  justify-content: center;
  align-items: center;
  margin-top: 0 !important;
}
.sejong_hangul .sh_img08 {
  width: 100%;
  height: 287px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img08.png);
}
.sejong_hangul .sh_img09 {
  width: 100%;
  height: 287px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img09.png);
}
.sejong_hangul .sh_img10 {
  width: 100%;
  height: 287px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img10.png);
}
.sejong_hangul .sh_img_step01 {
  width: 283px;
  height: 53px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img_step01.png);
  margin-top: 40px;
}
.sejong_hangul .sh_img_step02 {
  width: 283px;
  height: 53px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img_step02.png);
  margin-top: 40px;
}
.sejong_hangul .sh_img_step03 {
  width: 283px;
  height: 53px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img_step03.png);
  margin-top: 40px;
}
.sejong_hangul .sh_img_step02-1 {
  width: 283px;
  height: 53px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img_step02-1.png);
  margin-top: 40px;
}
.sejong_hangul .sh_img_step02-2 {
  width: 283px;
  height: 53px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img_step02-2.png);
  margin-top: 40px;
}
.sejong_hangul .sh_img_step02-3 {
  width: 283px;
  height: 53px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img_step02-3.png);
  margin-top: 40px;
}
.sejong_hangul .sh_img_step03-1 {
  width: 283px;
  height: 53px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img_step03-1.png);
  margin-top: 40px;
}
.sejong_hangul .sh_img_step03-2 {
  width: 283px;
  height: 53px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img_step03-2.png);
  margin-top: 40px;
}
.sejong_hangul .sh_img_step03-3 {
  width: 283px;
  height: 53px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img_step03-3.png);
  margin-top: 40px;
}
.sejong_hangul .sh_img_step04 {
  width: 283px;
  height: 53px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img_step04.png);
  margin-top: 40px;
}
.sejong_hangul .sh_img11-1 {
  width: 100%;
  height: 287px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img11-1.png);
}
.sejong_hangul .sh_img11-2 {
  width: 100%;
  height: 287px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img11-2.png);
}
.sejong_hangul .sh_img11-3 {
  width: 100%;
  height: 287px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img11-3.png);
}
.sejong_hangul .sh_img12-1 {
  width: 100%;
  height: 287px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img12-1.png);
}
.sejong_hangul .sh_img12-2 {
  width: 100%;
  height: 287px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img12-2.png);
}
.sejong_hangul .sh_img12-3 {
  width: 100%;
  height: 287px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img12-3.png);
}
.sejong_hangul .sh_img13 {
  width: 100%;
  height: 287px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/sh_img13.png);
  margin-bottom: 190px;
}
.sejong_hangul .img_step {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
  gap: 10px;
}
.sejong_hangul .step_intro {
  padding-top: 140px;
}
.sejong_hangul .main04_1_1 {
  height: 1420px !important;
  margin-top: 60px;
  width: 100%;
  background: #F7F0FF;
}
.sejong_hangul .img_all {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 90px;
}
.sejong_hangul .img_all .img_left {
  width: 45%;
}
.sejong_hangul .img_all .img_right {
  width: 45%;
}

/* edu_activity.html */
.edu_activity .edu_acti {
  position: relative;
  max-width: 1280px;
  margin: 80px auto 0;
  padding-top: 443%;
  /* 이미지의 세로:가로 비율 계산 (예: 177% = 1000px / 563px) */
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
  background-image: url(../images/edu_acti.jpg);
  margin-top: 80px;
}
@media (max-width: 767px) {
  .edu_activity .edu_acti {
    background-size: cover;
    padding-top: 938%;
  }
}
.edu_activity .btn-wrap {
  width: 450px;
  margin: 0 auto; /* 가운데 정렬 */
}
@media (max-width: 767px) {
  .edu_activity .btn-wrap {
    width: 360px;
  }
}
.edu_activity .btn-go {
  display: block;
  width: 100%;
  padding: 12px 0;
  background-color: #7391FA;
  color: #fff;
  text-align: center;
  font-size: 20px;
  border-radius: 6px;
  text-decoration: none;
  margin-bottom: 60px;
}
@media (max-width: 767px) {
  .edu_activity .btn-go {
    font-size: 14px;
  }
}

/* VR-mirror.html */
.VR-mirror .VR-mirror-img {
  position: relative;
  max-width: 1280px;
  margin: 80px auto 0;
  padding-top: 200%;
  background-repeat: no-repeat;
  background-position: top;
  background-size: contain;
  background-image: url(../images/VR-mirror-img.jpg);
  margin-top: 80px;
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .VR-mirror .VR-mirror-img {
    background-size: cover;
    padding-top: 388%;
  }
}
.VR-mirror .btn-wrap {
  width: 450px;
  margin: 0 auto; /* 가운데 정렬 */
}
@media (max-width: 767px) {
  .VR-mirror .btn-wrap {
    width: 360px;
  }
}
.VR-mirror .btn-go {
  display: block;
  width: 100%;
  padding: 12px 0;
  background-color: #7391FA;
  color: #fff;
  text-align: center;
  font-size: 20px;
  border-radius: 6px;
  text-decoration: none;
  margin-bottom: 60px;
}
@media (max-width: 767px) {
  .VR-mirror .btn-go {
    font-size: 14px;
  }
}
.VR-mirror .icon_download {
  width: 17px;
  height: 22px;
  text-align: center;
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url(../images/icon_download.png);
  margin-bottom: 5px;
}/*# sourceMappingURL=common.css.map */