.inr.wide{ max-width: 1720px }
.inr{ position: relative; margin: 0 auto; max-width: 1280px; width: 92%; height: 100% }
.sub_inr {max-width: 1200px; margin: 0 auto; width: 92%; height: 100%}
.cf:after {content: ''; clear: both; display: block;}
#header button{ background: none }

/* header */
.header{ height: 100px }
#header{z-index:99; position:absolute; top: 0; left: 0; width:100%; border-bottom: 1px solid rgba(255, 255, 255, 0.3); transition:0.3s}
#header .inr{ display: flex; align-items: center; }
#header h1{ display: inline-block; position:relative; }
#header h1 a{ display: block; font-size:0 }
#header h1 img{ font-size: 1rem }

#header nav{ flex: 1; flex: 1 1 92%; height: 100% }
#header .gnb{ position:relative; height: 100%; text-align: right; }
#header .gnb > li{display:inline-block; position: relative; height: 100% }
#header .gnb > li > a{ display:flex; align-items: center; height:100%; padding:0 37px; font-size:18px; font-weight:700; color: #fff }
#header .gnb > li:last-child > a{ padding-right: 47px }
#header .gnb > li > .sub_menu{ visibility: hidden; position:absolute; top: 75%; min-width: 120px; left: 50%; transform: translateX(-50%); background:#fff; border:1px solid #ddd; z-index:99; opacity: 0; transition: .3s; }
#header .gnb li:hover .sub_menu{ visibility: visible; top: 100%; opacity: 1; }
#header .gnb .sub_menu li a{ display: block; padding:14px; color:#333; border-top:1px solid #ddd; font-size:14px; text-align:center }
#header .gnb .sub_menu li a:hover{background:#1784c7; color:#fff }
#header .gnb .sub_menu li:first-child a{border-top:0 }

#header .side:last-child{ display: flex; justify-content: flex-end; align-items: center; gap: 30px; margin-right: 2px }
#header .area_lang{ position:relative; font-family: Noto Sans KR , '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif; cursor: pointer }
#header .area_lang summary{ display: flex; align-items: center; gap: 10.5px; list-style: none; font-weight: 500; color: #fff }
#header .area_lang ul{ position: absolute; margin-top: 17px; left: 50%; transform: translateX(-50%); width: 100px; padding: 0 5px 3px; box-sizing: border-box; background: #fff; text-align: center; font-size: 16px }
#header .area_lang li+li{ border-top: 1px solid #ddd }
#header .area_lang a{ display: block; padding: 10px 0; color: #666 }

/* mobile-menu */
.btn_menu{position:relative; z-index:90; width:25px; height:25px; box-sizing: border-box }
.btn_menu span{ display:block; width:100%; height:2px; background:#fff }
.btn_menu span + span{margin-top:6px }

/* 모바일 메뉴 */
.m_gnb{overflow: hidden auto; position:fixed; top:0px; right: 0; transform: translateX(100%); width: 450px; height:100%; background:#fff; transition:all 0.5s ease-out 0s;z-index:999;}
.m_gnb .header{ display: flex; align-items: center; justify-content: flex-end; }
.m_gnb > ul {margin-top: 50px;}
.m_gnb > ul > li {padding:25px 50px;}
.m_gnb > ul > li > a{display:inline-block; position:relative;  font-size: 26px; font-weight: 600; color:#999; transition:all 0.5s ease 0s;}
.m_gnb > ul > li > a:after {transition: all 0.5s; content: ''; opacity: 0; display: block; width: 9px; height: 9px; border-radius: 50%; background: #1784c7; position: absolute; left: -17px; top: -9px;}
.m_gnb > ul > li > a:hover{color: #1784c7;}
.m_gnb > ul > li > a.active {color: #1784c7;}
.m_gnb > ul > li > a:hover:after{opacity: 1;}
.m_gnb > ul > li > a.active:after {opacity: 1;}
.m_gnb > ul > li > a.active:before{transform: translateY(-50%) rotate(180deg);}
.m_gnb > ul > li > ul{display:none;}
.m_gnb > ul > li > ul > li {padding: 15px 0;}
.m_gnb > ul > li > ul > li:first-child {padding-top: 25px;}
.m_gnb > ul > li > ul > li > a{position:relative; font-size:18px; color:#666;}
.m_gnb > ul > li > ul > li > a:hover {color: #222}

.m_gnb .btn_close{opacity: 0; flex: 0 0 25px; display: block; position:relative; margin-right: -100vw; width:25px; height:25px; font-size:0px; transition:0.8s;}
.m_gnb.active{transform: translateX(0);}
.m_gnb.active .btn_close{opacity:1; margin-right: 15px }
.m_gnb .btn_close:before,
.m_gnb .btn_close:after{content: ''; display:block; position:absolute; top:50%; left:0px;  width:100%; height:1px; background:#333; transform: translateY(-50%) rotate(45deg);}
.m_gnb .btn_close:after{ transform: translateY(-50%) rotate(-45deg) }

.area_util_m{padding:20px 20px; background:#598e35 }
.area_util_m span{display:inline-block; width:40px; height:40px; margin-right:6px; background:#111 url(../images/common/icon_call.svg) no-repeat 50%; background-size:15px; border-radius:50%; }
.area_util_m div{display:inline-block; color:#fff }
.area_util_m div a{color:#fff; font-weight:bold; font-size:17px }

.cover{position: fixed; width: 100%; height:100%; left:0; top:0; background:rgba(0, 0, 0, 0.4); z-index:995; visibility: hidden; opacity: 0; transition: .4s; }
.cover.active{visibility: visible; opacity: 1 }

/* footer */
#footer{ padding: 50px 0 45px; background: #111; line-height: 1.933333333; font-family: Noto Sans KR , '맑은 고딕', '돋움', Dotum, '굴림', Gulim, Sans-serif; color: #666 }
#footer .logo{ float: right; margin-bottom: 20px }
#footer .address span{ display: inline-block; margin: 0 8px 3px 0 }
#footer .address span,
#footer .address span a{ color: #666; font-size: 15px }
#footer .address span b{ font-weight: 400; }
#footer .address i{margin-right: 10px; display: inline-block; width: 1px; height: 10px; background: #666;}
#footer .address p{ margin-top: 7px; color: #666; font-size: 15px }
@media (max-width:1279px){
	.header{ height:80px }
	.logo{ height: 21px }
	#header .inr{ justify-content: space-between }
	#header .gnb > li > a{padding:0 25px }
	#header h1{ margin: 0 }
	#header nav{display:none }
}
@media (max-width:767px){
	body,
	p,
	li,
	a{ font-size:14px }
	
	.header{ height:65px }
	.logo{ height: 18px }
	#header .side:last-child{ gap: 20px }
	#header .area_lang summary span{ display: none }

	.m_gnb {width: 100%;}
	.m_gnb > ul > li {text-align: center;}

	#footer .logo{ float: none }
	#footer .address span{ margin-right: 8px }
	#footer .address i{ display: none }
}