@charset "UTF-8";

@media (max-width: 1730px) { .topbanner .open { display: none; }
  #gnb1 > ul > li { margin: 0 3rem; }
  #gnb1 > ul .submenu .desc { padding-left: 5rem; } }

@media (max-width: 1584px) { #logo { margin-left: 3rem; }
  #hnb .hnb1 { margin-left: -1rem; }
  #hnb .hnb2 { margin-right: -1rem; }
  #gnb1 > ul { width: calc(100% - 54rem); }
  #gnb1 > ul > li { margin: 0 1.5rem; }
  #gnb1 > ul > li > a {
      font-size: 1.6rem;
  }

  .translated-ltr #gnb1 > ul > li { margin: 0 1.5rem;    max-width: 100px;
  }

  #gnb1 > ul .submenu .desc { width: 20%; }
  #gnb1 > ul .submenu .desc > * { max-width: 23rem; }
  #gnb1 > ul .submenu > ul { width: 80%; }
  #gnb2 .control { right: 3rem; } }

@media (max-width: 1480px) {  
 .translated-ltr #gnb1 > ul > li { margin: 0 1.2rem;   max-width: 80px;}
  }

@media (max-width: 1310px) {  
 .translated-ltr #gnb1 > ul > li { margin: 0 1rem;   }
  }


@media (max-width: 1210px) {  
 .translated-ltr #gnb1 > ul > li { margin: 0 0.5rem;   max-width: 74px; }
  .translated-ltr #gnb1 > ul > li > a { font-size: 1.2rem;}
  }


@media (max-width: 1280px) { #gnb1 > ul > li { margin: 0 1rem; } }


@media (max-width: 1100px) { #gnb1 > ul { display: none; }
  #header .search .form { margin: 10rem 0; }
  #header .search .close { top: 2rem; right: 1rem; -webkit-transform: translate(0); transform: translate(0); }
  #wrap.active { height: 100vh; overflow: hidden; }
  #hnb .hnb1 .label { display: block; }
  #hnb .hnb1 .list { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: absolute; left: -1px; top: 100%; width: 100%; background: #767676; }
  #hnb .hnb1 .list li { width: 100%; border: 0 none; }
  #hnb .hnb1 .list a { padding-left: 2rem; text-align: left; }
  #hnb .hnb1.active .list { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; }
  #hnb .hnb2 a { padding: 0 1.5rem; }
  #gnb1 { display: none; }
  #gnb2 .control.close { color: #fff; top: 2rem; }
  #gnb2 .control.close::before { background-color: #fff; color: #000; }
  #gnb2 > ul { width: 40rem !important; height: calc(100vh - 8rem) !important; left: inherit; right: 0; -webkit-transform: translateX(0); transform: translateX(0); padding: 0 3rem 5rem; margin-top: 0; background-color: #fff; top: 8rem; overflow: hidden !important; overflow-y: auto !important; }
  #gnb2 > ul::before { top: -10rem; width: 100%; height: 10rem; right: 0; left: inherit; background-color: #fff; display: none; }
  #gnb2 > ul > li { float: none; width: 100%; margin: 0; padding: 0 0; text-align: left; }
  #gnb2 > ul > li::after, #gnb2 > ul > li::before { display: none !important; }
  #gnb2 > ul > li > a { position: relative; margin-bottom: 0; padding: 1.5rem 3rem 1.5rem 0; color: #333; border-bottom: 1px solid #EBECF0; }
  #gnb2 > ul > li > a::before { display: none; }
  #gnb2 > ul > li > a::after { position: absolute; top: auto; left: auto; right: auto; font-family: "xeicon"; right: 1rem; content: ''; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); color: #DCDCDC; font-size: 2rem; }
  #gnb2 > ul > li.active { border-bottom: 1px solid #EBECF0; }
  #gnb2 > ul > li.active > a::after { color: #222; -webkit-transform: rotate(180deg); transform: rotate(180deg); top: calc(50% - 1rem); }
  #gnb2 > ul > li.active .submenu { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; }
  #gnb2 .submenu { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; border-top: 1px solid #4e4e4e; }
  #gnb2 .submenu > ul { padding: 3rem 1rem; }
  #gnb2 .submenu > ul > li > a { font-size: 2rem; }
  #gnb2 .submenu > ul > li > a::before { background-color: #333; }
  #gnb2 .submenu a { display: block; border-radius: 0; color: #555; }
  #gnb2 .submenu div { margin-bottom: 2rem; }
  #gnb2 .submenu div a:hover, #gnb2 .submenu div a:focus { color: #555; }
  #gnb2.active { position: relative; z-index: 100; top: 0; }
  #gnb2.active::before { content: ''; width: 40rem; height: 8rem; position: absolute; right: 0; top: 0; background-color: #fff; }
  #gnb2.active::after { content: ''; width: calc(100% + 6rem); height: 100vh; position: absolute; left: -3rem; top: 0; background-color: rgba(0, 0, 0, 0.5); z-index: -1; }
  #footer { padding: 2rem 0 13rem; text-align: center; }
  #footer .btn-top { bottom: 25rem; }
  #footer .mark { display: none; }
  #footer .related { bottom: 3rem; left: 0rem; z-index: 2; width: 100%; }
  #footer .related .group { width: 100%; margin: 0 1px 0 0; border: 0 none; color: #fff; line-height: 4.5rem; }
  #footer .related .list { margin-bottom: 0; }
  #fnb { margin-bottom: 2rem; }
  #fnb .fnb2 { width: 100%; }
  #fnb .fnb1 { margin-bottom: 2rem; float: none; text-align: center; }
  #siteinfo { padding-left: 0; padding-right: 0; padding-bottom: 10rem;}
  #siteinfo .logo { display: inline-block; position: static; margin-bottom: 2rem; }
  #siteinfo address, #siteinfo .tel { display: block; }
  #siteinfo .tel { padding-left: 0; }
  #siteinfo .tel::before { display: none; }
  #siteinfo .copyright { display: block; text-align: center; } 
  #siteinfo .webwatch{right: 50%; transform: translateX(50%); bottom: 0; top: initial;}

}

@media (max-width: 768px) { 
#logo { width: 17rem; margin: 1.6rem 0 0 1.5rem; }
#gnb2 .control.open { right: 1.5rem; }
#header .search .control.open { right: 5.5rem; }
#hnb { right: 10rem; font-size:1.8rem; top: 3rem } 
#fnb .fnb1 li { margin: 0 1rem;}
}

@media (max-width: 500px) { 
#wrap.active #hnb { display: block; z-index: 101; }
#wrap.active #hnb li, #wrap.active #hnb li + li { color: #333; }
#gnb2 > ul { width: 100% !important; padding: 0 2rem 5rem; }
#gnb2.active::before { width: 100%; }
#gnb2 .control.close { right: 2rem; }
#fnb .fnb1 li { margin: 0 1rem;}
#footer { max-width: calc(100% - 3rem);}
}