@charset "UTF-8";

/*-------------------------------------------------
title       : 레이아웃 반응형
Author      : 양다혜
Create date : 2020-10-30
-------------------------------------------------*/
@media (max-width: 1919px) { 
	#gnb_info{ left: -41rem; }
}

@media (max-width: 17699px) { 
	#gnb_info strong{ padding-left: 10rem; }
}

@media (max-width: 1730px) { 	
.topbanner .open { display: none; }
#footer .btn-top { left: auto; right: 1rem; margin-left: 0; } 
}

@media(max-width: 1599px){
#gnb_info{ display:  none }
#logo { width: 24rem; }
#header.active #gnb1:before {height: 45rem;}
#gnb1 {width: calc(100% - 58rem);}
#gnb1 > ul > li { padding-bottom: 2.7rem; }
#gnb1 > ul > li > a{ font-size: 1.7rem; }
#gnb1 > ul .submenu { padding: 3rem 1rem; }
#header.active #gnb1 > ul .submenu {height: 36.4rem; }
#gnb1 > ul > li.active .submenu > ul > li > a { padding-left: 1rem; line-height: 2; }
#gnb1 > ul > li .submenu > ul > li > a {font-size: 1.4rem;}
#gnb2 .control {right: 1.5rem;}
.location{ right: 2rem; }
#footer .btn_top{ left: auto; right: 4rem; margin-left: 0; }
#snb{ margin-right: 4rem; }
}

@media (max-width: 1350px) {
#hnb .total_search input[type="text"] {width: 15rem;}	
#hnb .total_search ::-webkit-input-placeholder {font-size: 1.5rem;}
#gnb1 {width: calc(100% - 56rem); padding: 1.5rem 3rem 0;}
}
@media (max-width: 1279px) {
#gnb2.active > ul{ width: 100%; }
#gnb2 > ul{ left: 0; margin-left: 0; }
#gnb2 > ul > *{ padding-top: 8rem; }

#snb{ display: none; }
#contents{ float: none; width:  100%; }
#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: #484c58; }
#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; }
.footbanner { padding: 1.5rem 4rem; }

#footer .btn-top { bottom: 25rem; }
#footer .mark { display: none; }
#footer .related { bottom: 0; left: -1rem; z-index: 2; width: calc(100% + 2rem + 1px); }
#footer .related .group { width: 100%; height: 4.5rem; margin: 0 1px 0 0; border: 0 none; background-color: #969ca1; color: #fff; line-height: 4.5rem; }
#footer .related .list { margin-bottom: 0; }
#fnb { margin-bottom: 2rem; }
#fnb .fnb2 { width: 100%; }
#siteinfo { padding-left: 0; }
#siteinfo .logo { display: inline-block; position: static; margin-bottom: 1rem; } 

.location{ top: 0.2rem; right: 0; }
#quick .open{ top: 9.5rem; }
.contents_util .util .btn.print{ display: none; }
.contents_util .util{ float: right; }
}

@media (max-width: 1024px) {
#gnb2 > ul::before{ top: 0; left: 0; transform: translate(0); -webkit-transform: translate(0); width: 200%; margin-left: 0; background-color: #fff; }
#gnb2 > ul { top: 8.3rem; width: 100%; max-width: inherit; margin: 0 -1rem; border-top: 1px solid #ddd; color: #333; }
#gnb2 > ul > li { float: none; width: 100%; height: auto; margin: 0; padding: 0; text-align: left; border: 0; }
#gnb2 > ul > li > a { position: relative; margin-bottom: 0; padding: 1.5rem 4rem; color: #333; }
#gnb2 > ul > li.active > a{ color: #e60921; }
#gnb2 > ul > li > a:before{ display: none; }
#gnb2 > ul > li > a::after { position: absolute; top: auto; left: auto; right: auto; font-family: "xeicon"; right: 3.5rem; content: '\e9c5'; }
#gnb2 > ul > li.active > a::after{ content: '\e9c1'; color: #333; }
#gnb2 > ul > li.active .submenu { visibility: visible; overflow: visible; width: auto; padding: 0 4rem; height: auto; opacity: 1; }
#gnb2 .submenu { visibility: hidden; overflow: hidden; width: 0; height: 0; opacity: 0; }
#gnb2 .submenu ul { padding: 1.5rem 0; }
#gnb2 .submenu a { display: block; border-radius: 0; color: #333; font-weight: 500; padding-left: 0; font-size: 2rem; }
#gnb2 .submenu > ul > li > a{ margin-top:0; padding-left: 0; font-size: 2rem; }
#gnb2 .submenu div, 
#gnb2 .submenu .lnb-detail{ display: none; }
#gnb2 > ul > li.active .submenu div, 
#gnb2 > ul > li.active .submenu .lnb-detail{ display: block; padding-left: 0; margin-top: 0; }
#gnb2 > ul > li.active .submenu div a, 
#gnb2 > ul > li.active .submenu .lnb-detail a{ position: relative; font-size: 1.8rem; color: #666; padding-left: 1.5rem; }
#gnb2 > ul > li.active .submenu div a:before, 
#gnb2 > ul > li.active .submenu .lnb-detail abefore{ position: absolute; top: 1.3rem; left: 0; content: ""; display: inline-block; width: .8rem; height: 0.1rem; background-color: #666; }

#gnb2 .submenu > ul > li > a:before{ display: none; }
#gnb2 .control.close::after { background-color: #333; } 
.contents_util .util .share .item { right: auto; top: auto; z-index: 1; }	
.web_acc {display: none;}

#footer .fside_menu {width: calc(100% - 25rem);}	
.fside_menu {margin-bottom: 2rem;}
.fside_menu li {width: 33.33%; }
.fside_menu > li:nth-child(4)::before {display: none;}
.flogo {margin-top: 3rem;}
}
@media (max-width: 800px) {
#footer .copyright {margin-bottom: 2rem; line-height: 1.5;}
}
@media (max-width: 680px) {
#footer .float_wrap {flex-direction: column;}	
#footer .fside_menu {width: 100%;}	
.fside_menu li {margin: 0 -1px -1px 0;}
.fside_menu li + li::before {display: none;}
.fside_menu li a {display: block; height: 100%; padding: 1.7rem 1rem; border: 1px solid #ddd; text-align: center;}
.faddress address {display: block; margin-bottom: .4rem;}
.faddress > .tel {margin-right: 2rem;}
}
@media (max-width: 520px) {
#header {height: 14rem;}
.header_wrap {padding-top: 7.5rem;}
.header_wrap::before {position: absolute; top: 0; left: 50%; width: 200%; height: 5.1rem; background-color: #F8F7F6; transform: translateX(-50%); content: '';}
#logo {margin-bottom: 0;}
#hnb {position: absolute; top: 0;  right: 0; width: 28rem; margin-right: 0; }
#hnb .total_search input[type="text"] {width: auto; padding: 1.1rem 1rem; background-color: transparent;}
}
@media (max-width: 480px) {
.related_site {width: 100%;}
.related_site .label {padding-top: 1.2rem; padding-bottom: 1.3rem;}
}
@media (max-width: 395px) {
.fside_menu li {width: 50%;}	
	
}