@charset "UTF-8";

/*-------------------------------------------------
title       : 반응형 레이아웃 정의
Author      : 
Create date : 2020-03-27
-------------------------------------------------*/
@media (max-width: 1440px) {
 #header .util .menu .sitemap { width: 3rem;}
  #gnb > li { width: 8rem; } 


  } /* 6rem -> 8rem */

@media (max-width: 1375px) {
  #footer .request .group { right: -100%; width: calc(100% - 6.5rem); }
  #footer .request.active .control { position: fixed; right: calc(100% - 6.5rem); }
  .go-top { left: auto; right: 0; margin-left: 0; }
  #siteinfo address { display: block; }
  #siteinfo address + span { margin-left: 0; } 
}



@media (max-width: 1024px) { 
  html { font-size: 18px; }
  #header { height: 5rem; padding: 0; border-bottom: 1px solid #e8e8e8; line-height: 5rem; }
  #header .logo a { left: 1rem; }
  #header .logo img { position: relative; top: -0.2rem; height: 3rem; }
  #header .util { padding-right: 0; }
  #header .util .menu .sitemap { width: 5rem; height: 5rem; }
  #header .util .menu .recruit { width: 3.5rem; height: 3.5rem; padding: 0.8rem; line-height: 1.2; }
  #gnb { visibility: hidden; overflow: hidden; height: 0; opacity: 0; -webkit-transition: all 0s; transition: all 0s; }
  #header.active .util .menu .sitemap::before { color: #fff; }
  #header.active > nav { top: calc(5rem - 1px); border-top: 1px solid #ddd; background-color: #fff; }
  #header.active #gnb { visibility: visible; display: block; height: auto; top: 0; width: 100%; padding: 2rem; opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); }
  #header.active #gnb > li { display: block; overflow: hidden; width: 100%; height: 3rem; padding: 0; } /* height: 2 > 3rem. */
  #header.active #gnb > li > a { position: relative; font-size: 1.5rem; color: #516468; line-height: 3.5rem; } /*font-size:1.25 > 2rem  큰메뉴*/ 
  #header.active #gnb > li > a::before { position: absolute; right: 0; top: 50%; font-size: 1.5rem; color: #000; content: '\002b'; -webkit-transform: translateY(-50%); transform: translateY(-50%); }
  #header.active #gnb > li + li { border-top: 1px solid #ddd; }
  #header.active #gnb > li.active { height: auto; }
  #header.active #gnb > li.active > a { color: #ff0000; }
  #header.active #gnb > li.active > a::before { content: '\2212'; }
  #header.active #gnb div { visibility: hidden !important; overflow: hidden; height: 0 !important; -webkit-transition: all 0.3s; transition: all 0.3s; }
  #header.active #gnb .active > div { visibility: visible !important; height: auto !important; }
  #header.active #gnb .active > div.depth2 { padding: 0.5rem 0 1rem !important; }
  #header.active #gnb .active > div.depth3 { margin: 0.5rem 0; }
  #header.active #gnb .depth2 { width: 100%; padding: 0 !important; }
  #header.active #gnb .depth2::before { display: none; }
  #header.active #gnb .depth2 a { color: #333; line-height: 1.8;  font-size: 1.25rem;}
  #header.active #gnb .depth3 { margin: 0; }
  #header.active #gnb .depth3 li + li { margin-top: 0; }
  .go-top { display: none; }
  #footer .request .control { width: 3.5rem; height: 3.5rem; padding: 0.8rem; border-bottom: 1px solid #3c3c3c; line-height: 1.2; }
  #footer .request .control::before { margin-bottom: 0.5rem; line-height: 2rem !important; }
  #siteinfo { margin-top: 0.5rem; padding: 0; background: none; text-align: center; }
  #siteinfo .customer { display: none; }
  #siteinfo .copyright { margin-top: 0.5rem; padding: 0.5rem 0; border-top: 1px solid #3c3c3c; }
  #fnb { height: 2.5rem; line-height: 2.5rem; }
  #fnb .menu { border-right: 0 none; }
  #fnb .sns { margin-right: 0; }
  #fnb .sns a { width: 1.3rem; margin: 0; background: none; }
  #fnb .sns a::before { color: #fff; } 
}

@media (max-width: 768px) { 
  html { font-size: 16px; }
  #footer .request .group { width: calc(100% - 3rem); padding: 2rem 3rem; }
  #footer .request.active .control { right: calc(100% - 3rem); width: 2rem; height: 2rem; margin-right: 0.5rem; padding: 0; }
  #footer .request.active .control::before { font-size: 1.5rem; }
  #fnb .menu { padding: 0 1rem; }
  #fnb .menu a + a::before { margin: 0 0.5rem; }
  #fnb .sns .label { margin-right: 0.5rem; } 
}

@media (max-width: 480px) { 
  html { font-size: 18px; }
  #header { height: 10rem; padding: 0; border-bottom: 5px solid #ff0000; line-height: 3.5rem; }
  #header .logo a { left: 1rem; }
  #header .logo img { position: relative; top: -0.2rem; height: 6rem; }
  #header .util { padding-right: 0; }
  #header .util .menu .sitemap { width: 7rem; height: 7rem; }
  #header .util .menu .recruit { width: 3.5rem; height: 3.5rem; padding: 0.8rem; line-height: 1.2; }

  #footer .request .item h2 { font-size: 2rem; }
  #footer .request textarea.form-textbox { height: 5rem; padding-top: 1rem; }
  #footer .request .form-textbox, #footer .request .form-select { height: 3rem; line-height: 3rem; }
  #fnb .menu { padding: 0 0 0 0.5rem; }
  #fnb .menu a + a::before { position: relative; top: -2px; margin: 0 0.25rem 0 0.2rem; }

  #siteinfo span:nth-child(5) { display: block; margin-left: 0; }





   }


/*-------------------------------------------------
title       : 반응형 서브 정의
-------------------------------------------------*/
@media (max-width: 1375px) { #snb .snb-title { height: 12rem; line-height: 12rem; } }

@media (max-width: 1024px) { #main { padding-top: 3.5rem; }
  #contents { margin: 2rem auto; }
  #snb .snb-title { height: 10rem; line-height: 10rem; }
  #snb nav { height: 3rem; line-height: 3rem; }
  #snb nav a { margin: -1px 0.5rem 0; padding: 0 0.5rem; } }

@media (max-width: 768px) { #contents { margin: 1rem auto; } }