/* SSN brand layer */
:root {
  --ssn-blue: #0072bc;
  --ssn-blue-deep: #0b4568;
  --ssn-green: #c4d600;
  --ssn-gray: #707372;
  --ssn-ink: #18313f;
  --ssn-line: #dce7ed;
  --ssn-surface: #f4f8fa;
}

html { scroll-behavior: smooth; }

body { color: var(--ssn-ink); }

a:focus, button:focus, input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(0, 114, 188, 0.28);
  outline-offset: 3px;
}

/* Header and service switcher */
.menu_tbg {
  background: linear-gradient(112deg, #0b4568 0%, #006aa9 52%, #0072bc 100%);
}

.menu_tbg::before {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--ssn-green) 0 24%, var(--ssn-blue) 24% 100%);
  z-index: 1;
}

.menu_tbg::after {
  box-shadow: 0 5px 18px rgba(5, 46, 71, 0.28);
}

.menu_btn > span > span { background-color: var(--ssn-blue); }

.menu_tlt li .nav_bg02,
.menu_tlt li .nav_bg03 {
  overflow: hidden;
  border-radius: 30px 30px 0 0;
  box-shadow: 0 -5px 18px rgba(10, 48, 69, 0.08);
}

.menu_tlt li .nav_bg02 { background: linear-gradient(135deg, #0072bc, #0a5e91); }

.menu_tlt li .nav_bg03 { background: linear-gradient(135deg, #c4d600, #a5be00); }

.menu_tlt li .nav_bg02 img,
.menu_tlt li .nav_bg03 img { opacity: 0; }

.menu_tlt li:nth-child(2) a {
  color: #173746;
  text-shadow: none;
}

.logo span.on_01,
.logo span.on_02 { color: var(--ssn-blue); }

.gnb > ul > li > a { color: var(--ssn-ink); }

.gnb > ul > li:hover > a,
.gnb > ul > li:focus-within > a { color: var(--ssn-blue); }

.gnb_menu.on .sub_menu {
  border-top-color: var(--ssn-blue);
  box-shadow: 0 14px 28px rgba(21, 60, 79, 0.08);
}

.gnb .sub_menu li a:hover,
.gnb .sub_menu li a:focus { color: var(--ssn-blue); }

.gnb .sub_menu li a::after { background-color: var(--ssn-green); height: 2px; }

.m_gnb_ul .gnb_menu > a { color: var(--ssn-ink); }

.m_gnb_ul .gnb_menu .sub_menu { background: #f1f8fa; }

.search_box.on {
  background-color: #f2f7f9;
  border: 1px solid rgba(0, 114, 188, 0.25);
}

.search_box.on input { background-color: #f2f7f9; }

/* Footer */
.footer {
  background: linear-gradient(135deg, #183b4d 0%, #102c3b 100%);
  border-top: 4px solid var(--ssn-green);
}

.footer .footer_nav ul li:first-child a { color: var(--ssn-green); }

.footer .footer_nav ul li a:hover,
.footer .fs_site a:hover { color: #ffffff; }

.footer .fs_site span { border-color: rgba(196, 214, 0, 0.55); }

.footer .fs_site .fs_site_list { background-color: #315769; }

/* Shared buttons, controls, badges and tabs */
a.btn.btn_color_1,
input[type='button'].btn.btn_color_1,
input[type='submit'].btn.btn_color_1,
button.btn.btn_color_1,
.maker.color_1,
.mark.color_1,
.bl_marks .bl_mark.color_1,
.marks_box .mark.color_1 { background-color: var(--ssn-blue); border-color: var(--ssn-blue); }

a.btn.btn_color_2,
input[type='button'].btn.btn_color_2,
input[type='submit'].btn.btn_color_2,
button.btn.btn_color_2,
.maker.color_2,
.mark.color_2,
.bl_marks .bl_mark.color_2,
.marks_box .mark.color_2 { background-color: var(--ssn-green); border-color: var(--ssn-green); color: #18313f; }

a.btn.btn_color_3,
input[type='button'].btn.btn_color_3,
input[type='submit'].btn.btn_color_3,
button.btn.btn_color_3,
.maker.color_3,
.mark.color_3 { background-color: var(--ssn-gray); border-color: var(--ssn-gray); }

.btn.btn_color_1:hover,
.btn.btn_color_1:focus { background-color: #005e9d; border-color: #005e9d; }

.btn.btn_color_2:hover,
.btn.btn_color_2:focus { background-color: #aabd00; border-color: #aabd00; color: #18313f; }

.btn.btn_line_color_2 {
  color: var(--ssn-blue);
  border-color: var(--ssn-blue);
}

.btn.btn_line_color_2:hover,
.btn.btn_line_color_2:focus {
  background-color: var(--ssn-blue);
  border-color: var(--ssn-blue);
  color: #fff;
}

.sub_nav_wrap { border-bottom-color: var(--ssn-blue); }

.sub_nav_wrap a:hover,
.sub_nav_wrap a:focus,
.tab_box > .tab li.on a,
.sort_box li.on .sort_btn { color: var(--ssn-blue); }

.tab_box > .tab:before { background-color: var(--ssn-blue); }

.tab_box > .tab li {
  border-color: var(--ssn-blue);
  background-color: var(--ssn-blue);
}

.tab_box > .tab li.on {
  border-color: var(--ssn-blue);
  background-color: #fff;
}

.board_list_st_2 .board_list_item_box > a:hover .board_list_tit { color: var(--ssn-blue); }

.board_list_st_2 .board_list_item .text_box .mark.color_2 { background-color: var(--ssn-green); color: #18313f; }

/* Share portal */
.share .main_visual {
  background: linear-gradient(135deg, #075a88 0%, #0072bc 56%, #168bb8 100%);
}

.share .main_visual::before { opacity: 0.22; mix-blend-mode: screen; }

.share .tc_2 { color: var(--ssn-green); }

.share .main_visual .btn i.icon_arrow_left_w { background-color: var(--ssn-green); }

.share .main_visual .btn:hover { border-color: var(--ssn-green) !important; }

.share .hot_content { background: #fff; }

.share .hot_con_wrap h2 { position: relative; padding-bottom: 1.2rem; }

.share .hot_con_wrap h2::after {
  content: '';
  display: block;
  width: 4.5rem;
  height: 4px;
  margin: 1rem auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--ssn-blue), var(--ssn-green));
}

.share .hot_slide .ht_con {
  border-color: var(--ssn-line);
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(24, 67, 86, 0.06);
}

.share .hot_slide .ht_con:hover {
  border-color: rgba(0, 114, 188, 0.55);
  box-shadow: 0 14px 28px rgba(24, 67, 86, 0.14);
}

.share .icon_hot { background-color: var(--ssn-blue); }

.share .icon_new { background-color: var(--ssn-green); color: #18313f; }

.share .content_search { background: linear-gradient(135deg, #edf5f8 0%, #f8fbfc 100%); }

.share .content_search .cs_tag_box .cs_tag_tit { background-color: var(--ssn-blue); }

.share .content_search .cs_tag_box > *:not(.cs_tag_tit)::before { background-color: var(--ssn-green); }

.share .content_search .cs_btn_box > a:hover,
.share .content_search .cs_btn_box > a:focus { border-color: var(--ssn-blue); }

.share .item_list_box .ilb_tit_box { border-bottom-color: var(--ssn-blue); }

.share .item_list_box .ilb_tit_box .ilb_tit { color: var(--ssn-ink); }

.share .mark.color_1 { background-color: var(--ssn-blue); }

.share .mark.color_2 { background-color: var(--ssn-green); color: #18313f; }

.share .customer_center ul li span {
  background-color: #f2f8fa;
  box-shadow: inset 0 0 0 1px rgba(0, 114, 188, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.share .customer_center ul li a:hover span,
.share .customer_center ul li a:focus span {
  transform: translateY(-6px);
  box-shadow: inset 0 0 0 3px var(--ssn-green), 0 10px 24px rgba(0, 114, 188, 0.14);
}

/* Education portal */
.main_contents:not(.share) .visual_bg::after {
  content: '';
  display: block;
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(0, 65, 105, 0.76), rgba(0, 114, 188, 0.18));
}

.main_contents:not(.share) .visual_bg p { z-index: 10; }

.main_contents:not(.share) .calender_wrap {
  background: linear-gradient(135deg, #0072bc 0%, #075a88 100%);
  border-top: 4px solid var(--ssn-green);
  box-shadow: 0 10px 24px rgba(11, 69, 104, 0.18);
}

.main_contents:not(.share) .course_guide h2,
.main_contents:not(.share) .hot_con_wrap h2 { color: var(--ssn-blue); }

.main_contents:not(.share) .icon_hot { background-color: var(--ssn-blue); }

.main_contents:not(.share) .icon_new { background-color: var(--ssn-green); color: #18313f; }

@media all and (max-width: 1024px) {
  .menu_tlt li .nav_bg02,
  .menu_tlt li .nav_bg03 { border-radius: 22px 22px 0 0; }

  .footer { border-top-width: 3px; }
}