/** @format */

/* 태블릿 768 ~ 1200 */
@media all and (max-width: 1200px) {


  /* html,
  body,
  section,
  article {
    min-width: 100%;
  } */

  /* ------------------ layout.css ------------------ */
  /* header */
  /* PC 메뉴 컨테이너 */
  .nav_bar_container {
    display: none;
  }

  /* 헤더 전체 bar */
  .nav_bar {
    width: 100%;
  }

  .nav_bar_before {
    width: 100%;
    max-width: 100vw;
  }

  /* 모바일 메뉴 오픈 버튼 구역 */
  .nav_bar_open_mobile {
    position: absolute;
    display: flex;
    justify-content: flex-end;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-right: 5vw;
    right: 0;
    width: 36px;
    height: 99px;
    cursor: pointer;
  }

  /* 모바일 메뉴 오픈 버튼 */
  .nav_bar_open_mobile_button {
    display: block;
    width: 36px;
    height: 3px;
    border-radius: 5px;
    background-color: #828282;
    transition: all 0.2s ease-in-out;
  }

  .nav_bar_open_mobile_button::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 3px;
    border-radius: 5px;
    background-color: #828282;
    display: block;
    transition: all 0.2s ease-in-out;
    transform: translateY(-13.5px);
  }

  .nav_bar_open_mobile_button::after {
    position: absolute;
    content: "";
    width: 100%;
    height: 3px;
    border-radius: 5px;
    background-color: #828282;
    display: block;
    transition: all 0.2s ease-in-out;
    transform: translateY(13.5px);
  }

  .nav_bar_drop .nav_bar_open_mobile_button,
  .nav_bar_drop .nav_bar_open_mobile_button::before,
  .nav_bar_drop .nav_bar_open_mobile_button::after {
    background-color: #ffffff !important;
  }

  .nav_bar_open_mobile.open>div {
    background-color: transparent !important;
  }

  .nav_bar_open_mobile.open>div::before {
    transform: translateY(0px) rotate(45deg);
  }

  .nav_bar_open_mobile.open>div::after {
    transform: translateY(0px) rotate(-45deg);
  }

  /* 모바일 메뉴 */
  .nav_bar_container_mobile {
    display: block;
    visibility: hidden;
    position: absolute;
    padding-top: 2vw;
    top: 100px;
    right: -550px;
    width: 70vw;
    max-width: 550px;
    height: calc(100vh - 100px);
    background-color: #ffffff;
    z-index: 999;
    transition: all 0.2s ease-in-out;
  }

  .nav_bar_mobile_before {
    display: none;
    position: fixed;
    top: 100px;
    left: 0;
    width: 100vw;
    height: calc(100vh - 100px);
    background-color: #000000;
    opacity: 0.7;
    z-index: 999;
  }

  /* 클릭시 메뉴 나타남 */
  .menu_before_show {
    display: block;
    -webkit-animation: fadeIn 0.3s ease-in-out;
    animation: fadeIn 0.3s ease-in-out;
  }

  .menu_show {
    visibility: visible;
    right: 0;
  }

  .mobile_menu_wrapper {
    color: #ce8e46;
  }

  .mobile_menu_wrapper a {
    text-decoration: none;
  }

  /* 큰 메뉴 래퍼 */
  .mobile_menu {
    width: 100%;
    border-bottom: 1px solid #f1f1f1;
  }

  /* 큰 메뉴 */
  .collapse_menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    margin-left: 10%;
    width: 90%;
    height: 9vh;
    /* font-size: 14px; */
    font-size: 2.1vh;
    letter-spacing: normal;
    color: #9b9b9b;
    text-align: left;
    cursor: pointer;
  }

  .collapse_menu:hover {
    font-weight: bold;
  }

  /* 큰 메뉴 안에 메뉴 텍스트 Title(영문) */
  .collapse_menu span {
    display: block;
    width: 80%;
    /* font-size: 25px; */
    font-size: 3.6vh;
    line-height: 1;
    letter-spacing: normal;
    color: #ce8e46;
    opacity: 0.99;
  }

  /* 큰 메뉴 안에 화살표 래퍼 */
  .collapse_menu>div {
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 20%;
  }

  /* 큰 메뉴에 들어있는 화살표 */
  .mobile_menu_arrow_img {
    margin: 0 auto;
    width: 3vw;
    max-width: 20px;
    height: 1.5vw;
    max-height: 10px;
    background-image: url("../img/collabo/faq_arrow_down.png");
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    transition: all 0.3s;
  }

  .selected .mobile_menu_arrow_img {
    transform: rotate(-180deg);
  }

  /* 펼쳐진 세부메뉴 래퍼 */
  .mobile_menu_detail {
    border-bottom: 1px solid #f1f1f1;
  }

  #mobile_menu_detail_2,
  #mobile_menu_detail_4 {
    display: none;
  }

  /* 펼쳐진 세부 메뉴 */
  .mobile_menu_detail_inner {
    display: flex;
    flex-direction: column;
    margin-top: 1vw;
    margin-bottom: 1vw;
    width: 90%;
    height: auto;
    /* max-height: 225px; */
    margin-left: 10%;
    text-align: left;
  }

  .mobile_menu_detail_inner a {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 4vh;
    /* max-height: 75px; */
    font-size: 2.3vh;
    line-height: normal;
    color: #000000;
    text-decoration: none;
  }

  .mobile_menu_detail_inner a:hover {
    font-weight: bold;
  }

  .nav_sns_m {
    position: absolute;
    margin-left: 10%;
    bottom: 2.5vw;
    right: 0;
    width: 90%;
    font-size: 3.6vh;
    color: #aeaeae;
  }

  .nav_sns_m a {
    text-decoration: none;
  }

  .nav_sns_m div {
    width: 100%;
    text-align: left;
  }

  .nav_sns_m_imgbox {
    margin-top: 1.5vw;
  }

  .nav_sns_m_imgbox img {
    width: 5vh;
    height: 5vh;
  }

  /* 로고 */
  .nav_brand {
    margin-right: 0px;
  }

  /* sns버튼 왼쪽 고정 */
  .nav_sns {
    display: none !important;
  }

  /* footer */
  footer,
  .footer_inner {
    box-sizing: border-box;
    width: 100%;
    min-width: 100%;
  }

}

/* 여기까지 max 1200 */

/* 모바일 767 이하 */
@media all and (max-width: 767px) {
  /* article의 기본크기.. index.js 에서 설정되어있음.. */
  /* article {
    height: calc(100vh - 15vw);
  } */

  /* ----------nav_bar의 높이를 결정하는 height---------- */
  /* 1. fixed nav_bar 뒤에 relaive로 존재하는 before */
  /* 2. 모바일 메뉴 오픈 버튼 wrapper height */
  /* 3. nav_bar 로고 wrapper height */
  .nav_bar_before,
  .nav_bar_open_mobile,
  .nav_brand {
    /* height: 80px; */
    height: 15vw;
  }

  /* 모바일 메뉴창 */
  .nav_bar_container_mobile,
  .nav_bar_mobile_before {
    top: 15vw;
    height: calc(100vh - 15vw);
  }

  /* 모바일 메뉴 오픈 버튼 구역 */
  .nav_bar_open_mobile {
    margin-right: 5vw;
    width: 6vw;
  }

  /* 모바일 메뉴 버튼의 크기 */
  .nav_bar_open_mobile_button {
    width: 6vw;
    height: 0.5vw;
    border-radius: 1vw;
  }

  .nav_bar_open_mobile_button::before,
  .nav_bar_open_mobile_button::after {
    width: 100%;
    height: 0.5vw;
    border-radius: 1vw;
  }

  .nav_bar_open_mobile_button::before {
    transform: translateY(-2.25vw);
  }

  .nav_bar_open_mobile_button::after {
    transform: translateY(2.25vw);
  }

  /* nav_bar */
  .nav_sns {
    display: none !important;
  }

  .nav_brand {
    position: relative;
    margin-left: 0;
    margin-right: 0;
    min-height: 0px;
    left: 0;
    max-height: 80%;
    /* width: 100vw; */
  }

  .nav_brand a {
    margin: 0 auto;
    width: 100%;
    max-height: 80%;
  }

  .nav_brand img {
    margin-left: 0vw;
    width: auto;
    height: 11vw;
  }

  /* 모바일 메뉴 창 */
  .collapse_menu {
    height: 15vw;
    max-height: 75px;
    font-size: 2.4vw;
    letter-spacing: -0.2vw;
  }

  .collapse_menu span {
    font-size: 4vw;
  }

  .mobile_menu_detail_inner {
    margin-top: 3vw;
    margin-bottom: 3vw;
    width: 90%;
    margin-left: 10%;
  }

  .mobile_menu_detail_inner a {
    display: flex;
    align-items: center;
    height: 5.5vw;
    max-height: 50px;
    font-size: 2.7vw;
    line-height: normal;
  }

  .nav_sns_m {
    font-size: 4vw;
    bottom: 3vw;
  }

  .nav_sns_m_imgbox {
    margin-top: 3vw;
  }

  .nav_sns_m img {
    width: 6vw;
    height: 6vw;
    margin-right: 2vw;
  }


}

/* 모바일 479 이하 */
@media all and (max-width: 479px) {
  .collapse_menu {
    height: 15vw;
    max-height: 100px;
    font-size: 3.2vw;
    letter-spacing: -0.2vw;
  }

  .collapse_menu span {
    font-size: 5.3vw;
  }

  .mobile_menu_detail_inner {
    margin-top: 4vw;
    margin-bottom: 4vw;
    width: 90%;
    margin-left: 10%;
  }

  .mobile_menu_detail_inner a {
    display: flex;
    align-items: center;
    height: 8vw;
    max-height: 50px;
    font-size: 3.5vw;
    line-height: normal;
  }

  .nav_sns_m {
    font-size: 5.3vw;
    bottom: 10vw;
  }

  .nav_sns_m_imgbox {
    margin-top: 3vw;
  }

  .nav_sns_m img {
    width: 8vw;
    height: 8vw;
    margin-right: 2vw;
  }
}