html,
body {
  overflow-x: hidden;
}
body.page-workshop {
  overflow-x: visible;
}


body.layout-mobile #block-slide {
  height: calc(100vh - 57px);
}
body.layout-min #block-slide {
  height: calc(100vh - 57px);
}


/* drupal - pc */
body.drupal #header {
  width: calc( 100% - 68px );
}
body.drupal .gnb-search-dd {
  width: calc( 100% - 68px );
  top: 137px;
}

.layout-container {
  padding-top: 137px;
}
#block-slide {
  height: calc( 100vh - 137px);
}

/* drupal - tablet */
body.drupal.layout-tablet .gnb-search-dd {
  width: calc( 100% - 68px );
  top: 57px;
}
body.drupal.layout-tablet #header #block-kace-main-menu > ul:not(.contextual-links) {
  width: calc( 100% - 68px ) !important;
  left: 68px;
}
body.drupal.layout-tablet #header .bottom .mobile {
  width: calc( 100% - 68px );
  left: 68px;
}

body.drupal.layout-tablet[data-toolbar-menu="open"] #header {
  width: calc( 100% - 240px );
}
body.drupal.layout-tablet[data-toolbar-menu="open"] .gnb-search-dd {
  width: calc( 100% - 240px );
}
body.drupal.layout-tablet[data-toolbar-menu="open"] #header .top {
  width: calc( 100% - 240px );
}
body.drupal.layout-tablet[data-toolbar-menu="open"] #header #block-kace-main-menu > ul:not(.contextual-links) {
  width: calc( 100% - 240px );
  left: 240px;
}
body.drupal.layout-tablet[data-toolbar-menu="open"] #header .bottom .mobile {
  width: calc( 100% - 240px );
  left: 240px;
}

body.layout-tablet .layout-container {
  padding-top: 57px;
}
body.layout-tablet #block-slide {
  height: calc( 100vh - 57px);
}

@media all and (max-width: 975px) {
  body.drupal #header {
    width: 100%;
    top: 39px;
  }
  body.drupal .gnb-search-dd {
    width: 100% !important;
    top: 96px !important;
  }
  body.drupal #header .top {
    top: 96px !important;
  }
  body.drupal #header #block-kace-main-menu > ul:not(.contextual-links) {
    width: 100% !important;
    height: calc(100% - 144px) !important;
    top: 144px !important;
    left: 0 !important;
  }
  body.drupal #header .bottom .mobile {
    width: 100% !important;
    left: 0 !important;
  }
}

/* drupal - tablet */
body.drupal.layout-mobile #header {
  width: 100%;
  top: 39px;
}
body.drupal.layout-mobile .gnb-search-dd {
  width: 100%;
  top: 96px;
}
body.drupal.layout-mobile #header .top {
  top: 96px;
}
body.drupal.layout-mobile #header #block-kace-main-menu > ul:not(.contextual-links) {
  width: 100%;
  height: calc(100% - 144px);
  top: 144px;
  left: 0;
}
body.drupal.layout-mobile #header .bottom .mobile {
  width: 100%;
  left: 0;
}

body.layout-mobile .layout-container {
  padding-top: 57px;
}
body.drupal.layout-mobile #block-slide {
  height: calc(100vh - 97px);
}

/* drupal - mobile */
body.drupal.layout-min #header {
  width: 100%;
  top: 39px;
}
body.drupal.layout-min .gnb-search-dd {
  width: 100%;
  top: 96px;
}
body.drupal.layout-min #header .top {
  top: 96px;
}
body.drupal.layout-min #header #block-kace-main-menu > ul:not(.contextual-links) {
  width: 100%;
  height: calc(100% - 144px);
  top: 144px;
  left: 0;
}
body.drupal.layout-min #header .bottom .mobile {
  width: 100%;
  left: 0;
}

body.layout-min .layout-container {
  padding-top: 57px;
}
body.drupal.layout-min #block-slide {
  height: calc(var(--vh, 1vh) * 100 - 97px);
}


/* ----- title ----- */
#block-kace-page-title {
  padding: 96px 0 60px;
  font-weight: bold;
  font-size: 40px;
  line-height: 48px;
  text-align: center;
  color: #343a40;
}

.subpage-title {
  font-family: Poppins;
  font-style: normal;
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
  margin-bottom: 8px;
}

body.page-about #block-kace-page-title,
body.page-greetings #block-kace-page-title,
body.page-vision #block-kace-page-title,
body.page-organization #block-kace-page-title,
body.page-contact #block-kace-page-title {
  padding: 72px 0 72px;
  background: url("../../img/page-title-about.png") no-repeat 50% 50%;
  background-size: cover;
}

body.page-parent-leadership #block-kace-page-title,
body.page-humanities-education #block-kace-page-title,
body.page-teenage-leadership #block-kace-page-title,
body.page-school-safety-leadership #block-kace-page-title,
body.page-library-friendship #block-kace-page-title,
body.page-citizen-leadership #block-kace-page-title,
body.page-social-corp #block-kace-page-title {
  padding: 72px 0 72px;
  background: url("../../img/page-title-business.png") no-repeat 50% 50%;
  background-size: cover;
}

body.page-program-union #block-kace-page-title,
body.page-program-branch #block-kace-page-title,
body.page-request-consulting #block-kace-page-title,
body.page-program-lifelong #block-kace-page-title {
  padding: 72px 0 72px;
  background: url("../../img/page-title-education.png") no-repeat 50% 50%;
  background-size: cover;
}

body.page-be-member #block-kace-page-title,
body.page-learning-club #block-kace-page-title {
  padding: 72px 0 72px;
  background: url("../../img/page-title-club.png") no-repeat 50% 50%;
  background-size: cover;
}

body.page-notice #block-kace-page-title,
body.page-sosig #block-kace-page-title,
body.page-newsletter #block-kace-page-title {
  padding: 72px 0 72px;
  background: url("../../img/page-title-community.png") no-repeat 50% 50%;
  background-size: cover;
}


#block-sub-menu {
  margin-bottom: 96px;
  position: relative;
}
#block-sub-menu::after {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #dee2e6;
  position: absolute;
  bottom: 0;
  transform: translateY(50%);
}
#block-sub-menu ul:not(.contextual-links) {
  max-width: 1216px;
  width: 100%;
  margin: auto;
  display: flex;
  align-content: stretch;
  justify-content: center;
}
@media all and (max-width: 1216px) {
  #block-sub-menu {
    margin-bottom: 52px;
  }
}
@media all and (max-width: 767px) {
  #block-sub-menu ul:not(.contextual-links) {
    justify-content: flex-start;
  }
  #block-sub-menu {
    margin-bottom: 40px;
  }
}

#block-sub-menu ul li {
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
}
#block-sub-menu ul li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 16px;
  background-color: #dee2e6;
  position: absolute;
  right: 0;
}
#block-sub-menu ul li a {
  width: 100%;
  display: flex;
  padding: 16px;
  justify-content: center;
  text-align: center;
  align-items: center;
  font-weight: bold;
  font-size: 16px;
  line-height: 1.2;
  color: #868e96;
  word-break: keep-all;
  transition: all 0.4s;
}
#block-sub-menu ul li a:hover {
  color: #1a7ec0;
  transition: all 0.4s;
}
#block-sub-menu ul li a.is-active {
  color: #1a7ec0;
}
#block-sub-menu ul li a.is-active::after {
  content: "";
  width: 100%;
  height: 2px;
  background-color: #1a7ec0;
  position: absolute;
  left: 0;
  bottom: -1px;
  z-index: 1;
}

@media all and (max-width: 767px) {
  #block-kace-page-title {
    padding: 72px 0 48px;
  }
  #block-sub-menu ul {
    overflow-y: hidden;
    overflow-x: auto;
    white-space: nowrap;
    justify-content: flex-start;
  }
  #block-sub-menu ul::-webkit-scrollbar {
    display: none;
  }
}

body.hidden {
  visibility: hidden;
}