@import "./common.css";

.wrap { position: relative; }

/* header : 시작 */
.header .top { height: 2rem; background-color: var(--gray-color); }
.header .top > .layout { height: 100%; }
.header .top .link_wrap { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; height: 100%; }
.header .top .link_wrap > li { position: relative; }
.header .top .link_wrap > li > a { font-size: 0.7rem; text-decoration: none; }
.header .top .link_wrap > li + li > a { margin-left: 0.5rem; padding-left: 0.5rem; border-left: 1px solid var(--gray-color2); }
.header .top .link_wrap > li > a:hover { text-decoration: underline; }
.header .bottom { display: flex; justify-content: space-between; align-items: center; height: 4.5rem; background-color: var(--white-color); }
.header .bottom > .layout { display: flex; align-items: center; position: relative; height: 100%; }
.header .logo a { display: block; }
.header .logo img { width: 210px; max-height: 48px; object-fit: contain; }
.header .right { display: flex; gap: 0.5rem; position: absolute; top: 1.2rem; right: 0; }
.header .btn_gnb_open { display: none; width: 2rem; height: 2rem; border: 1px solid var(--gray-color3); font-size: 1rem; }
.header .search_wrap .inner { display: flex; }
.header .search_wrap .input { width: 9rem; height: 2rem; padding: 0 2rem 0 0.5rem; border: 1px solid var(--gray-color3); border-right: 0; }
.header .search_wrap .btn_search_submit { position: absolute; top: 0; right: 0; width: 2rem; height: 2rem; font-size: 1rem; }
.header .search_wrap .btn_search_open { display: block; width: 2rem; height: 2rem; border: 1px solid var(--gray-color3); font-size: 1rem; }
.header .search_wrap .submit_area { display: none; position: relative; }
.header .search_wrap .submit_area.active { display: block; }
/* header : 종료 */

/* gnb : 시작 */
.gnb { position: absolute; top: 0; left: 16rem; height: 100%; }
.gnb .depth1 { display: flex; flex-wrap: wrap; height: 100%; }
.gnb .depth1 > li { height: 100%; }
.gnb .depth1 > li > a { display: flex; align-items: center; height: 100%; padding: 0 3rem; font-size: 0.95rem; text-decoration: none; }
.gnb .depth1 > li > a:hover { color: var(--main-color); }

.gnb_m { display: none; position: fixed; top: 0; left: -100%; z-index: 99999; width: 15rem; height: 100%; background-color: var(--white-color); box-shadow: rgba(0, 0, 0, 0.15) 8px 0px 15px 0px; }
.gnb_m .logo { display: block; padding: 0.7rem; background-color: var(--gray-color); }
.gnb_m .logo img { width: 150px; max-height: 34px; object-fit: contain; }
.gnb_m .depth1 > li > a { display: block; padding: 0.8rem 1rem; font-size: 0.95rem; text-decoration: none; transition: all 0.2s ease; }
.gnb_m .depth1 > li > a:hover { background-color: var(--main-color); color: var(--white-color); }
/* gnb : 종료 */

/* footer : 시작 */
.footer { border-top: 1px solid var(--gray-color4); font-size: 0.75rem; }
.footer > .layout { padding: 2rem 0 3rem 0; }
.footer a { text-decoration: none; }
.footer .logo { display: inline-block; }
.footer .logo img { width: 190px; max-height: 42px; object-fit: contain; }
.footer .link_wrap { display: flex; flex-wrap: wrap; margin: 1rem 0; }
.footer .link_wrap > li { position: relative; }
.footer .link_wrap > li + li > a { margin-left: 0.7rem; padding-left: 0.7rem; border-left: 1px solid var(--gray-color2); }
.footer .link_wrap > li > a:hover { text-decoration: underline; }
.footer .info { color: var(--gray-color5); }
.footer .info p { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.25rem; }
.footer .info .copyright { margin-top: 1rem; margin-bottom: 0; font-size: 0.7rem; color: var(--gray-color5); }
/* footer : 종료 */

/* 레이아웃 컨테이너 : 시작 */
.layout { width: var(--layout-width); margin: 0 auto; }
.container { border-top: 1px solid var(--gray-color6); background-color: var(--gray-color); }
.container .section:last-child .layout { padding-bottom: 1.75rem; }
.container.sub .section > .layout { padding-top: 3.25rem; padding-bottom: 3.5rem; background-color: var(--white-color); }
.container.sub .section > .layout > .inner { width: 1100px; margin: 0 auto; }
/* 레이아웃 컨테이너 : 종료 */

@media (max-width: 1280px) {

  /* gnb : 시작 */
  .gnb { left: 15rem; }
  /* gnb : 종료 */

  /* 레이아웃 컨테이너 : 시작 */
  .layout { width: 95%; }
  /* 레이아웃 컨테이너 : 종료 */
}

@media (max-width: 1200px) {

  /* header : 시작 */
  .header .bottom { height: 4rem; }
  .header .logo a img { height: 38px; }
  .header .right { top: 1rem; }
  .header .btn_gnb_open { display: block; }
  /* header : 종료 */

  /* gnb : 시작 */
  .gnb { display: none; }
  .gnb_m { display: block; }
  /* gnb : 종료 */

  /* footer : 시작 */
  .footer .logo img { height: 38px; }
  /* footer : 종료 */

  /* 레이아웃 컨테이너 : 시작 */
  .container.sub .section > .layout > .inner { width: 95%; }
  /* 레이아웃 컨테이너 : 종료 */
}

@media (max-width: 600px) {

  /* header : 시작 */
  .header .bottom { height: 3.5rem; }
  .header .logo a img { height: 32px; }
  .header .right { top: 0.75rem; }
  /* header : 종료 */

  /* footer : 시작 */
  .footer .logo img { height: 32px; }
  .footer .link_wrap { gap: 0.3rem; }
  .footer .link_wrap > li { width: calc(50% - 0.3rem); }
  .footer .link_wrap > li + li > a { margin-left: 0; padding-left: 0; border-left: 0; }
  /* footer : 종료 */
}

@media (max-width: 380px) {

  /* gnb : 시작 */
  .gnb_m { width: 11.5rem }
  .gnb_m .depth1 > li > a { font-size: 16px; }
  /* gnb : 종료 */

  /* footer : 시작 */
  .footer .info p { gap: 0.35rem; }
  /* footer : 종료 */
}