/* ---------------------------------------------------- */
/* -------------------- 1216px 이하 -------------------- */
@media all and (max-width: 1216px) {
  .inner {
    width: 90%;
  }
  .mobile {
    display: none;
  }


  /* ------------------------------------------------------------- */
  /* -------------------- HEADER -------------------- */
  #header .bottom .inner {
    height: 56px;
    justify-content: space-between;
  }
  #header .bottom .inner > div {
    width: auto;
  }

  /* ----- LOGO ----- */
  #header #block-kace-branding {
    height: 24px;
  }

  /* ----- SEARCH ----- */
  #header .bottom .gnb-search {
    width: 24px;
    height: 24px;
    margin-right: 16px;
  }
  body.search-open .gnb-search-dd .info {
    right: 5%;
  }

  /* ----- MOBILE MENU ----- */
  .gnb-menu {
    width: 20px;
    height: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
  }
  .gnb-menu .line1,
  .gnb-menu .line2,
  .gnb-menu .line3 {
    width: 100%;
    height: 2px;
    background-color: #1a7ec0;
    border-radius: 4px;
    transition: all 0.4s;
  }

  /* ----- MENU OPEN ----- */
  body.menu-open .gnb-search {
    display: none;
  }
  body.menu-open .gnb-menu .line1 {
    transform: rotate(45deg) translate(6px,5px);
    transition: all 0.4s;
  }
  body.menu-open .gnb-menu .line2 {
    opacity: 0;
    transition: all 0.4s;
  }
  body.menu-open .gnb-menu .line3 {
    transform: rotate(-45deg) translate(6px,-6px);
    transition: all 0.4s;
  }

  /* --- top --- */
  #header .top {
    transform: translateY(-300px);
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s;
    display: block;
    position: fixed;
    top: 57px;
    width: 100%;
    background-color: #f0f4f8;
    border-bottom: 1px solid #dee2e6;
  }
  body.menu-open #header .top {
    transform: translateY(0px);
    visibility: visible;
    opacity: 1;
    transition: transform 0.4s;
  }

  #header .top a {
    color: #495057;
  }
  #header .top ul:not(.contextual-links) {
    height: 48px;
    justify-content: center;
  }
  #header .top ul li:not(:last-child)::after {
    content: "";
    width: 1px;
    height: 16px;
    background-color: #dee2e6;
    opacity: 1;
    margin: 0 32px;
  }

  /* --- primary menu --- */
  #header #block-kace-main-menu > ul:not(.contextual-links) {
    transform: translateY(-300px);
    visibility: hidden;
    opacity: 0;
    transition: all 0.4s;
    display: block;
    position: fixed;
    top: 105px;
    left: 0;
    width: 100%;
    height: calc(100vh - 105px);
    background: #fff;
  }
  body.menu-open #header #block-kace-main-menu > ul:not(.contextual-links) {
    transform: translateY(0px);
    visibility: visible;
    opacity: 1;
    transition: all 0.4s;
    overflow: auto;
    width: 100vw;
    padding-bottom: 72px;
  }
  #header #block-kace-main-menu > ul > li {
    display: block;
    height: auto;
    margin-right: 0;
    cursor: pointer;
  }
  #header #block-kace-main-menu > ul > li > a {
    display: block;
    width: 100%;
    border-bottom: 1px solid #dee2e6;
    padding: 16px 5%;
    position: relative;
  }
  #header #block-kace-main-menu > ul > li > a::after {
    content: "";
    width: 18px;
    height: 24px;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%);
    background: url('/themes/custom/kace/img/down.svg') no-repeat 50% 50%;
  }
  #header #block-kace-main-menu > ul > li.open > a::after {
    content: "";
    width: 18px;
    height: 24px;
    position: absolute;
    top: 50%;
    right: 5%;
    transform: translateY(-50%) rotate(180deg);
    background: url('/themes/custom/kace/img/down.svg') no-repeat 50% 50%;
  }

  #header #block-kace-main-menu > ul > li > ul {
    position: initial;
    height: 0;
    width: 100%;
    transform: translateX(0);
    padding: 0 5%;
    box-shadow: none;
    text-align: left;
  }
  #header #block-kace-main-menu > ul > li.open > ul {
    visibility: visible;
    opacity: 1;
    height: 100%;
    border-bottom: 1px solid #dee2e6;
    padding: 24px 5%;
  }
  #header #block-kace-main-menu > ul > li > ul > li:not(:last-child) {
    margin-bottom: 16px;
  }
  #header #block-kace-main-menu > ul > li > ul > li > a {
    font-size: 16px;
    line-height: 24px;
  }

  /* --- 지도자 실무자 --- */
  #header .top ul:not(.contextual-links) li:nth-child(2)::after {
    display: none;
  }
  #header .top ul:not(.contextual-links) li:nth-child(n+3):nth-child(-n+4) {
    display: none;
  }

  #header .bottom .mobile ul li:nth-child(n+1):nth-child(-n+2) {
    display: none;
  }

  body.menu-open #header .bottom .mobile {
    /*display: block !important;*/
    width: 100% !important;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s;
    transition-delay: 0.2s;
  }
  #header .bottom .mobile {
    opacity: 0;
    visibility: hidden;
    /*display: none !important;*/
    border-top: 1px solid #dee2e6;
    position: fixed;
    bottom: 0;
    left: 0;
    height: auto !important;
    width: 100% !important;
    background: #fff;
    padding: 24px 5%;
  }
  #header .bottom .mobile ul {
    display: flex;
    align-items: center;
  }
  #header .bottom .mobile ul li:nth-child(3)::after {
    content: "";
    display: inline-block;
    width: 1px;
    height: 16px;
    background-color: #dee2e6;
    margin: 0 16px;
  }
  #header .bottom .mobile a {
    font-size: 14px;
    line-height: 24px;
    color: #464343;
  }
  #header .bottom .mobile .contextual-region .contextual .contextual-links {
    display: none;
  }

  /* -------------------- FOOTER -------------------- */
  #footer {
    border-top: 1px solid #c6c6c5;
    padding: 32px 0 56px;
  }
  #footer .logo {
    height: 24px;
    width: auto;
    display: inline-block;
  }
  #footer .logo img {
    width: auto;
    height: 100%;
    object-fit: contain;
  }
  #footer address span {
    margin-right: 16px;
    word-break: keep-all;
  }


  /* -------------------- SIDE -------------------- */


  /* -------------------- FOOTER -------------------- */


  /* ------------------------------- 마이페이지 ------------------------------ */
  #block-account-sub-menu {
    margin: 0 auto 72px;
  }

  /* ------------------------------- 기관소개 ------------------------------ */
  /* -------------------- KACE 연합 -------------------- */
  #about section:not(:last-child) {
    margin-bottom: 72px;
  }

  #about section:nth-child(1) img {
    max-width: 60%;
    margin-top: 48px;
  }
  #about section:nth-child(1) h2 .mobile {
    display: block;
  }

  #about section:nth-child(2) .img {
    height: 240px;
  }
  #about section:nth-child(2) .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #about section:nth-child(2) .grid_2-1 p {
    width: 100%;
  }

  /* -------------------- 회장 인사말 -------------------- */
  .greetings {
    grid-template-columns: 1fr;
    grid-gap: 0;
  }
  .greetings section:nth-child(1) {
    grid-row-start: 2;
    text-align: right;
  }
  .greetings section:nth-child(1) img {
    max-width: 200px;
    height: auto;
  }

  .greetings section:nth-child(2) {
    margin-top: 0;
  }
  .greetings section:nth-child(2) h2 {
    width: calc(100% - 56px);
    margin: 0 auto;
    text-align: center;
  }
  .greetings section:nth-child(2) > p {
    margin: 48px 0;
    text-align: center;
  }

  .greetings section:nth-child(3) {
    grid-column-start: 1;
  }

  /* -------------------- 비전과 사명 -------------------- */
  #vision h2 {
    margin-bottom: 48px;
  }
  #vision section {
    grid-template-columns: 1fr;
    padding: 48px 0;
  }

  #vision section:nth-child(4) h3 {
    display: block;
  }
  #vision section:nth-child(4) h3 span.mobile {
    display: inline;
  }
  #vision section:nth-child(4) dl {
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 24px 16px;
  }

  /* -------------------- 조직도 -------------------- */
  #organization h2 {
    margin-bottom: 48px;
  }

  /* -------------------- 오시는 길 -------------------- */
  #contact .root_daum_roughmap {
    height: 400px;
  }

  /* ------------------------------- 주요사업 ------------------------------ */
  /* -------------------- 공통 -------------------- */
  .business {
    margin-top: 72px;
  }
  .business h3 {
    margin-bottom: 32px;
  }
  .business section:not(:last-child) {
    margin-bottom: 72px;
  }


  /* ------------------------------- 교육신청 ------------------------------ */
  /* -------------------- 교육의뢰 -------------------- */
  .request-title {
    margin-bottom: 72px;
  }

  .request .grid {
    grid-template-columns: 1fr 1fr;
    grid-gap: 16px;
  }
  .request section:not(:last-child) {
    margin-bottom: 48px;
  }
  .request p br.pc {
    display: none;
  }

  .request .grid_2 {
    grid-template-columns: 1fr;
  }

  /* -------------------- 연합프로그램 -------------------- */

  /* -------------------- 평생교욱사 실습신청 -------------------- */
  body.page-node-type-life-program article form input[type="text"],
  body.page-node-type-life-program article form input[type="email"] {
    width: 100%;
  }
  body.page-node-type-life-program article form #edit-gender,
  body.page-node-type-life-program article form input[type=date] {
    width: 50%;
  }


  /* ------------------------------- 회원·학습동아리 ------------------------------ */
  /* -------------------- CMS 회원신청 -------------------- */
  #cms .title {
    padding-bottom: 72px;
  }
  #cms .grid_2 {
    grid-template-columns: 1fr;
  }
  #cms .grid_2 > div {
    text-align: center;
  }
  #cms .grid_2 > div p:last-child br:last-child {
    display: none;
  }
  #cms section .btn-blue {
    margin: 24px 0 32px;
  }

  /* -------------------- 학습동아리 -------------------- */
  #learning-club .title {
    padding-bottom: 72px;
  }
  #learning-club .grid_2 {
    grid-template-columns: 1fr;
  }
  #learning-club .grid_2 > div {
    text-align: center;
  }
  #learning-club section .btn-blue {
    margin: 24px 0 32px;
  }


  /* ------------------------------- 커뮤니티 ------------------------------ */
  /* -------------------- 공지사항 -------------------- */

  /* -------------------- 활동소식 -------------------- */


  /* ------------------------------- 지도자 네트워크 ------------------------------ */
  /* -------------------- 증명서 신청 -------------------- */
  #request-certificate .title {
    padding-bottom: 72px;
  }
  #request-certificate .grid_2 {
    grid-template-columns: 1fr;
  }
  #request-certificate .grid_2 > div {
    text-align: center;
  }
  #request-certificate .grid_2 > div .pc {
    display: none;
  }
  #request-certificate section .btn-blue {
    margin-top: 32px;
  }

  /* ------------------------------- 실무자 네트워크 ------------------------------ */
  /* -------------------- 수료번호 -------------------- */
  #staff-numbering header .title-line {
    margin-bottom: 36px;
  }
  #staff-numbering .box4 {
    margin-bottom: 56px;
  }

  #staff-numbering header form {
    flex-direction: column;
    align-items: flex-start;
    position: relative;
  }

  #staff-numbering header form .left {
    position: absolute;
    top: 0;
    height: 40px;
    display: flex;
    align-items: center;
    z-index: 1;
  }

  #staff-numbering header form .right {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 8px;
  }
  #staff-numbering form .right .select-wrap {
    grid-row: 2/3;
  }
  #staff-numbering form .right .search-wrap {
    width: 100%;
    grid-column: 3/5;
  }
  #staff-numbering form .right .search input[type="text"] {
    width: calc(100% - 40px);
  }

  #staff-numbering .popup-wrap .popup .bottom dl {
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-gap: 16px;
  }

  /* -------------------- 수료번호 신청 폼 -------------------- */
  #branch-numbering-form #wrapper-numbering-type .fieldset-wrapper {
    grid-template-columns: 1fr 1fr;
  }
  #branch-numbering-form .form-item-year .select-wrap,
  #branch-numbering-form .js-form-type-date,
  #branch-numbering-form input[type="number"] {
    width: 50%;
  }
  #branch-numbering-form div[id*="ajax-"] .filebox {
    width: 100%;
  }

  /* -------------------- 워크숍 신청 -------------------- */


  /* ------------------------------- 지역협의회 ------------------------------ */
  /* -------------------- header -------------------- */
  .page-branch #header .inner a.home {
    height: 72px;
    color: #1a7ec0;
    font-weight: bold;
    position: fixed;
    bottom: 0;
    right: 5%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s;
  }
  body.menu-open .page-branch #header .inner a.home {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s;
    transition-delay: 0.2s;
  }

  /* -------------------- 메인 -------------------- */
  #block-program-branch #block-teaser,
  #block-sosig-branch #block-teaser {
    padding: 96px 0;
  }
  #block-branch-articles {
    padding: 96px 0;
    margin-bottom: -96px;
  }
  #block-branch-articles .inner {
    grid-template-columns: 1fr;
    grid-gap: 96px;
  }
  #block-branch-articles .photo-gallery li {
    grid-template-columns: 1fr 2fr;
  }

  /* -------------------- 협의회 소개 -------------------- */
  /* ---------- 인사말 --------- */
  #assets h3 {
    margin-bottom: 72px;
  }

  /* ---------- 조직도 --------- */
  #organization .scroll {
    overflow: scroll;
    display: grid;
    grid-template-columns: 240px 240px 240px 240px;
    grid-gap: 24px;
    margin-left: -5vw;
    margin-right: -5vw;
    padding-left: 5vw;
    padding-right: 5vw;
  }
  #organization .scroll::-webkit-scrollbar {
    display: none;
  }
  #organization .scroll::before {
    width: calc(240px*3 + 24px*3);
    left: 120px;
    margin-left: 5vw;
  }
  #organization .scroll::after {
    width: calc(240px*3 + 24px*3);
    left: 120px;
    margin-left: 5vw;
  }
  #organization .scroll .box {
    width: 240px;
  }

  #organization .scroll2 {
    overflow-y: hidden;
    overflow-x: scroll;
    display: grid;
    grid-template-columns: 240px 240px 504px 240px 240px;
    grid-gap: 24px;
  }
  #organization .scroll2::-webkit-scrollbar {
    display: none;
  }
  #organization .scroll2::before {
    width: calc(240px*5 + 24px*5);
    left: 120px;
  }
  #organization .scroll2::after {
    width: calc(240px*5 + 24px*5);
    left: 120px;
  }
  #organization .scroll2 .box {
    width: 240px;
  }
  #organization .scroll2 .flex {
    grid-template-columns: 240px 240px;
  }

  #organization .scroll2 .wrap {
    grid-template-rows: 114px 1fr 1fr;
  }
  #organization .scroll2 .cols_2 .middle {
    height: auto;
  }
  #organization .scroll2 .cols_2 .middle .box {
    padding: 16px;
  }

  /* ---------- 주요사업 --------- */
  #business section {
    grid-template-columns: 1fr 1fr;
  }

  /* ------------------------------------------------------------- */
  /* -------------------- 검색결과 -------------------- */
  body.page-search article {
    grid-template-columns: 1fr 2fr;
  }

}