@charset "UTF-8";
/*-------------------------------------------------
title       : 레이아웃 반응형
Author      : ㅈㅁㅈ
Create date : 2020-11-26
-------------------------------------------------*/
@media (max-width: 1700px) { #logo a { left: 2rem; }
  #gnb1 > ul > li { margin: 0 2rem; }
  #gnb1 .desc { width: 30rem; padding-left: 9rem; background-position: 75% center; }
  #gnb1 .submenu > ul { width: 120rem; max-width: calc(100% - 28rem); }
  #gnb1 .submenu > ul > li, #gnb2 .submenu > ul > li { padding-left: 2.5rem; }
  #gnb2 .group .topmenu_all > li { padding-left: 25rem; }
  #gnb2 .group .topmenu_all > li::before { left: 25rem; }
  #gnb2 .group .topmenu_all > li > a { left: 8rem; } }

@media (max-width: 1150px) { #header .search .close { right: 0 !important; top: 9rem; width: 100% !important; height: 0; line-height: 10.5rem; }
  #header .search .close::before { content: ''; }
  #header .search.active .close { top: 0; z-index: 5; height: 9.1rem; }
  #header .search.active .group { padding-top: 1.5rem; }
  #gnb1 { display: none; }
  #gnb2::before, #gnb2::after { display: none; }
  #gnb2 .group { max-height: calc(100% - 8.9rem); }
  #gnb2 .group::after { position: fixed; right: auto; left: 0; bottom: 0; width: 30rem; height: 100%; background: none #262F68; }
  #gnb2 .group .topmenu_all > li { max-width: 100%; padding-left: 0; }
  #gnb2 .group .topmenu_all > li::before { display: none; }
  #gnb2 .group .topmenu_all > li > a {position: static;display: block;width: 30rem;padding: 2rem;border-bottom: 1px solid #4F5472;font-weight: 500;color: #fff;letter-spacing: -0.2rem;font-size: 2rem;}
  #gnb2 .group .topmenu_all > li.active > a { background-color: #E10F21; }
  #gnb2 .group .topmenu_all > li.active .submenu { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; overflow: hidden; overflow-y: auto; width: calc(100% - 35rem); }
  #gnb2 .group .submenu { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: fixed; left: 35rem; top: 9rem; z-index: 1; max-width: inherit; max-height: calc(100% - 9rem); }
  #gnb2 .group .submenu > ul { margin-top: -1rem; display: block; width: 100%; margin-top: 0; padding: 1rem 0 3rem; }
  #gnb2 .group .submenu > ul > * { display: block; clear: none; float: none; width: 100%; margin: 0; }
  #gnb2 .group .submenu > ul > * + * { margin-top: 1rem; }
  #gnb2 .lnb7, #gnb2 .lnb8 { display: block; }
  #header.active #gnb2 .group { height: 100%; padding: 0; }
  #footer { padding: 4rem 0 6rem; background-size: auto 25rem; background-position-x: 70%; text-align: center; }
  .fnb1 { text-align: center; }
  .fnb2 { position: static; padding: 3rem 0; text-align: center; }
  #siteinfo { margin: 0; padding-bottom: 7rem; }
  #siteinfo .logo { position: absolute; top: auto; left: 50%; transform: translateX(-50%); bottom: 0; }
  #siteinfo .webwatch { left: 50%; bottom: -1.2rem; height: 5rem; margin-left: -19.5rem; }
  #siteinfo .webwatch img { height: 100%; }
  .btn_top { display: block; } 
}

@media (max-width: 767px) { 
	#footer { text-align: left; } 
}

@media (max-width: 580px) { #header { height: 7rem; line-height: 7rem; }
  #header .search .control { right: 7rem; width: 7rem; }
  #header .search.active .close { height: 8.1rem; }
  #logo a { width: 23rem; }
  #hnb { display: none; }
  #gnb2 .control { width: 7rem; }
  #gnb2 .group { top: 7rem; max-height: calc(100% - 7rem); }
  #gnb2 .group::before { height: 7.6rem; }
  #gnb2 .group::after { width: 14rem; }
  #gnb2 .group .topmenu_all > li > a { font-size: 1.8rem; width: 14rem; padding: 2rem 1.5rem; }
  #gnb2 .group .topmenu_all > li.active .submenu { width: calc(100% - 16rem); }
  #gnb2 .group .submenu { left: 16rem; width: calc(100% - 16rem); }
  #header.active #hnb { right: 100%; }
  #main { padding-top: 7rem; }
  #footer { padding: 4rem 0 12rem; }
  #siteinfo .copyright { margin-top: 2rem; }
  #siteinfo .webwatch { bottom: -7.5rem; margin-left: -2.5rem; } 
}
  
@media (max-width: 380px) {
html {min-width: 360px; overflow-x: auto;}
}