@charset "UTF-8";
/*-------------------------------------------------
title       : 레이아웃 반응형
Author      : ㅈㅁㅈ
Create date : 2020-06-05
-------------------------------------------------*/
@media (max-width: 1885px) { 
#gnb1 > ul > li { width: 13.5rem; max-width: 19%; }
 #gnb1 > ul > li > a { width: 100%; padding: 0; }
}

@media (max-width: 1630px) { 
#header { padding: 0 3rem; }
#header .search .open { right: 12rem; }
#header .search .close { margin-left: 50rem; }
#gnb1 > ul { left: 32rem; right: 32rem; }
#gnb1 > ul::before { display: none; }
.gnb_item { display: none; } 
}
@media (max-width: 1400px) { 
#hnb #searchForm input {width: 16rem;}
}

@media (max-width: 1280px) { 
	#gnb1, #quick .control, #quick .group { display: none; }
  #hnb { margin-right: 5rem; }
  #header .search .open { right: 8rem; }
  #header .search .group { top: 100%; }
  #header .search .close { top: auto; bottom: -4.5rem; width: 5rem; height: 3em; margin-left: 0; -webkit-box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.1); box-shadow: 0.5rem 0.5rem 1rem rgba(0, 0, 0, 0.1); background-color: #fff; text-align: center; line-height: 5rem; -webkit-transform: translateX(-50%); transform: translateX(-50%); }
  #header .search .close::before { left: -0.1rem; }
  #header .search .close:hover::before, #header .search .close:focus::before { left: 0; }
  #quick { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; position: relative; top: auto; left: auto; right: auto; bottom: auto; -webkit-transform: translate(0, 0); transform: translate(0, 0); position: absolute; right: 0; top: 9rem; z-index: 2; width: 100%; }
  #quick .sns { display: table; width: calc(100% + 0px); table-layout: fixed; clear: none; float: none; width: 100%; }
  #quick .sns > * { display: table-cell; padding-right: 0px; vertical-align: middle; }
  #quick .sns li + li { margin: 0; }
  #quick .sns li + li a { border-left: 1px solid #53575f; }
  #quick .sns li + li a::after { display: none; }
  #gnb2 { display: block; }
  #header.search, #header.active { background-color: #1a5598; transition: all 0.2s; }
  #header.search #quick, #header.active #quick { visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }
  #header.search #logo a::before, #header.active #logo a::before { height: 100%; }
  #header.search #hnb .lang a, #header.search #hnb .lang a::before, #header.search .search .open::before, #header.active #hnb .lang a, #header.active #hnb .lang a::before, #header.active .search .open::before { color: #fff; }
  #header.active #gnb2 .control.open { display: none; }
  #header.active #gnb2 .control.close { display: block; }
  #header.active #gnb2 > ul { z-index: 100; visibility: visible; overflow: visible; width: auto; height: auto; opacity: 1; -webkit-transition: opacity 0.2s; transition: opacity 0.2s; }
#header.active #hnb .lang.active {background-color: #1a5598;}
#header.active #hnb #searchForm input {border-bottom-color: #fff; color: #fff;}
#header.active #hnb #searchForm input:-ms-input-placeholder { color: #fff;}
#header.active #hnb #searchForm input::-webkit-input-placeholder { color: #fff; }
#header.active #hnb #searchForm input::-ms-input-placeholder { color: #fff;}
#header.active #hnb #searchForm input::placeholder { color: #fff; }
#header.active #hnb #searchForm .btn_topsearch i {color: #fff;}
}
  
@media (max-width: 1024px) { 
	#footer .mark, #footer .related { display: none; } 
}

@media (max-width: 768px) { 
html {min-width: 360px; overflow-x: auto; }
#header { height: 7rem; }
#header #logo {margin: 1.5rem 0 0 -1rem;}
#header #logo a {width: 11rem; }
#header #logo a::before { background-size: auto 100%; background-position: 0 0; }
#header #logo a .img { max-width: inherit; }
#header .search .open { right: 7rem; top: 2.25rem; }
#hnb {margin-right: 3rem; padding-top: 2rem;}
#gnb2 .control {top: 1.5rem; right: 1rem; width: 4rem; height: 4rem; line-height: 4rem;}
#gnb2 > ul {top: 7rem;}
#quick { top: 7rem; }
.footbanner { display: none; }
#fnb .list  {display: flex; flex-flow: row wrap; padding-top: 1rem;}
#fnb .list > li {display: block; width: 33.33%;}
#fnb .list > li a {display: block; padding: 1rem;}
#siteinfo { padding: 3rem 0; } 
}
@media (max-width: 555px) { 
#fnb .list > li {width: 50%;}
}

@media (max-width: 455px) { 
#siteinfo address::after { display: none; }
#siteinfo address + span { display: block; margin-bottom: 0.5rem; } 
}
@media (max-width: 390px) { 
#hnb #searchForm input { width: 15rem;}
#fnb .list > li {width: 100%;}
#fnb .list > li a {padding: 0.5rem 1rem;}
}
@media (max-width: 370px) { 
#header {min-width: 360px;}	
#hnb .lang {width: 6rem;}	
#hnb .lang a {min-width: 100%;}	
#hnb #searchForm input {width: 14rem; font-size: 1.35rem;}
}