@charset "UTF-8";
/*-------------------------------------------------
title       : 레이아웃 반응형
Author      : ㅈㅁㅈ
Create date : 2020-06-04
-------------------------------------------------*/
@media (max-width:1480px) {
	#gnb1 .submenu .title {width:32rem;}
	#gnb1 .submenu .title::before {width:calc(100% + 4rem + 1px)}
}
@media (max-width: 1380px) {   
	#footer .footer_wrap { padding-left: 0; }
  #footer .logo { display: none; }
  #siteinfo span { display: block; margin: 0 !important; } 
  #gnb1 .submenu > ul > li {width:calc(100% / 3 - 2rem * 2 / 3)}
}
@media (max-width: 1360px) { #gnb1 > ul > li { margin-left: 4rem; } }

@media (max-width: 1280px) { #hnb::before, #hnb li, #gnb1 { display: none; }
  #header { height: 7.5rem; }
  #header::before { display: none; }
  #header::after { height: 1px !important; background-color: #fff; opacity: 0.3; }
  #header .search .control { top: 0; right: 4rem; width: 6rem; height: 7.5rem; line-height: 7.5rem; }
  #header .search .control.close { top: -7.5rem; }
  #header .search .control.open::before { position: relative; top: 0.2rem; }
  #header .search .group { top: 7.5rem; }
  #header .search.active .close { width: 6rem; height: 7.5rem; }
  #logo a { top: 2.5rem; width: 24rem; height: 3rem; }
  #header.active #logo a img {margin-top:-3rem;}
  #logo a::after {background:url("/main/img/layout/logo_m.png") no-repeat center center/ contain;}
  #hnb { z-index: 5; height: 0; margin-bottom: 0; }
  #hnb .hnb2 li { margin: 0; }
  #hnb .lang, #hnb .child { height: 4rem; border: 1px solid #E3E3E3; line-height: 3.8rem; position: fixed; left: 2rem; z-index: 5; width: 11.5rem; color: #fff; text-align: center; transition: all 0.2s; }
  #hnb .lang::before, #hnb .child::before { font-size: 1.9rem; }
  #hnb .lang:hover, #hnb .lang:focus, #hnb .child:hover, #hnb .child:focus { background-color: #e3e3e3; color: #272727; }
  #hnb .lang {bottom : 9.5rem;}
  #hnb .child {bottom : 4.5rem;}
  .time_m { position: fixed; right: 0; bottom: 0; z-index: 5; width: calc(100% - 15.5rem); height: 13rem; padding: 3rem 0; background-color: #EFEFEF; color: #4A4A4A; text-align: center; }
  .time_m > span { font-weight: 400; }
  .time_m p { font-size: 3.6rem; margin-bottom: 0.5rem; font-family: Play; color: #242424; line-height: 1; }
  .time_m p span + span::before { content: ' : '; }
  .time_m p span:last-child { color: #A7A7A7; }
  #gnb2 { display: block; }
  #gnb2 .control { overflow: hidden; position: absolute; right: -0.5rem; top: 2.5rem; z-index: 1; width: 3.2rem; height: 3.2rem; text-align: center; line-height: 3.2rem; }
  #gnb2 .control::before { display: block; width: 100%; height: 100%; font-family: "xeicon"; text-align: center; line-height: inherit; font-size: 3.2rem; }
  #gnb2 .control.open::before { color: #fff; content: ""; }
  #gnb2 .control.close::before { color: #404040; content: ""; }
  #gnb2 .close { display: none; }
  #gnb2 .close::before { transform: rotate(0); transition: all 0.2s; }
  #gnb2 .close:hover::before, #gnb2 .close:focus::before { transform: rotate(180deg) translateY(2px); }
  #gnb2 > ul { visibility: hidden; position: fixed; left: 0; top: 7.5rem; width: 100%; height: calc(100% - 7.5rem); padding-top: 4rem; border-top: 1px solid #ddd; background: linear-gradient(to right, #272727 15.5rem, #fff 15.5rem); }
  #gnb2 > ul > li { width: 15.5rem; text-align: center; }
  #gnb2 > ul > li > a { font-size: 1.8rem; line-height: 3.05556; display: inline-block; position: relative; font-weight: 400; color: #fff; vertical-align: middle; }
  #gnb2 > ul > li > a::after { position: absolute; top: auto; left: 50%; transform: translateX(-50%); bottom: 0.5rem; width: 0; height: 0.4rem; background: linear-gradient(to right, #FF6B33, #FFAF3B); content: ''; opacity: 0; transition: all 0s, width 0.2s; }
  #gnb2 > ul > li.active > a::after { width: calc(100% + 1rem); }
  #gnb2 > ul > li.active .submenu { visibility: visible; margin-left: 0; opacity: 1; transition: all 0.2s; }
  #gnb2 .submenu { overflow-y: auto; visibility: hidden; position: fixed; left: 15.5rem; top: 7.5rem; width: calc(100% - 15.5rem); margin-left: -2rem; height: calc(100% - 20.5rem); padding: 1.5rem 3rem; opacity: 0; transition: all 0s; }
  #gnb2 .submenu > ul > li { text-align: left; }
  #gnb2 .submenu > ul > li > a { font-size: 1.7rem; display: block; position: relative; padding: 1rem 0; font-weight: 400; }
  #gnb2 .submenu > ul > li > a::before { position: absolute; left: -1rem; bottom: 0; width: calc(100% + 2rem); height: 1px; background-color: #ddd; content: ''; }
  #gnb2 .submenu > ul > li:last-child a::before { display: none; }
  #gnb2 .submenu > ul > li div { font-size: 1.5rem; visibility: hidden; height: 0; color: #8B8B8B; opacity: 0; }
  #gnb2 .submenu > ul > li div a::after { display: inline-block; position: relative; top: 1px; font-family: "xeicon"; vertical-align: top; font-size: 1.7rem; content: ''; opacity: 0; transition: all 0.2s; }
  #gnb2 .submenu > ul > li div a:hover, #gnb2 .submenu > ul > li div a:focus { font-weight: 600; color: #ED5A06; }
  #gnb2 .submenu > ul > li div a:hover::after, #gnb2 .submenu > ul > li div a:focus::after { opacity: 1; }
  #gnb2 .submenu > ul > li.active div { visibility: visible; height: auto; padding: 1rem 0; opacity: 1; }
  #header.active { position: fixed; }
  #header.active #hnb .lang { display: block; }
  #header.active #hnb .child { display: block; }
  #header.active #gnb2 .open { display: none; }
  #header.active #gnb2 .close { display: block; }
  #header.active #gnb2 > ul { visibility: visible; }
  #header.active #gnb2 > ul > li > a::after { opacity: 1; }
  #header.active .time_m { display: block; }
}

@media (max-width: 1060px) { 
	#siteinfo { flex-direction: column; align-items: flex-start; }
	.footer_wrap .wa_mark { display: flex; align-self: flex-end;  padding-left: 0; margin-top: -5rem; }
	}
@media (max-width: 1024px) { #footer .related { display: none; }
  #fnb .fnb2 { top: 6.5rem; text-align: right; } 
  }

@media (max-width: 854px) {
	#siteinfo { gap: 3rem; }
	.footer_wrap .wa_mark { display: flex; align-self: flex-start; margin-top: 0; }
}

@media (max-width: 768px) { #footer { padding: 3rem 0 3.5rem; letter-spacing: -0.1rem; }
  #fnb .fnb1 { position: relative; z-index: 0; margin-bottom: 8rem; padding-bottom: 2.5rem; text-align: center; }
  #fnb .fnb1::after { position: absolute; left: 50%; top: 0; z-index: -1; width: 1000%; height: 100%; margin-left: -500%; content: ''; top: auto; bottom: 0; height: 1px; background-color: #ddd; }
  #fnb .fnb1 li + li::before { margin: 0 1rem; }
  #fnb .fnb1 li:nth-child(4)::before { display: block; width: 100%; height: 0; background: none; }
  #fnb .fnb2 { top: 11rem; width: 100%; text-align: center; } 
  #siteinfo { align-items: center; text-align: center; }
  .footer_wrap .wa_mark { display: none; }
  
  }
  
@media (max-width: 369px) {
  #fnb .fnb2 { top: 14rem; }
}