:root{
    --color-point : #4885e3;
    --color-darkblue : #20509b;
}

.inr{ position: relative; margin: 0 auto; max-width: 1400px; width: calc( 100% - 40px) }
.board.inr{ position: relative; margin: 0 auto; max-width: 1200px; width: calc( 100% - 40px) }
#header button{ background: none }
#header .inr,
#footer .inr{ max-width: 1760px }

/* header */
#header{z-index:99; position:absolute; left:0; top:0;  width:100%; height:100px; transition:0.3s}
#header .inr{ display: flex; justify-content: space-between; align-items: center; height: 100% }
#header h1{ display: inline-block; position:relative }
#header h1 a {display:block; font-size:0;}
#header h1 a img {width:100%;}
#header h1 a img.white{display:none;}

#header .gnb{position:relative }
#header .gnb > li{position: relative; display:inline-block;}
#header .gnb > li > a{display:block; line-height:100px; height:100px; padding:0 2vw; font-size:19px; font-weight:500;}
#header .gnb > li > .sub_menu{ visibility: hidden; position:absolute; top: 75%; left:0; width:100%; 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 0; color:#333; border-top:1px solid #ddd; font-size:14px; text-align:center; transition:0.4s;}
#header .gnb .sub_menu li a:hover{background:#262525; color:#fff;}
#header .gnb .sub_menu li:first-child a{border-top:0;}
#header .gnb li:nth-child(3) .sub_menu{ left: 50%; transform: translateX( -50% ); width: 154px }

/* mobile-menu */
#header .button_wrap{ width: 210px }
.btn_menu{ display: flex; justify-content: center; align-items: center; position:relative; z-index:90; box-sizing: border-box; font-size: 1em; font-weight: 500; float: right }
.btn_menu div{ position: relative; margin-left: 12px; height: 15px }
.btn_menu span{display:block; width:25px; height:1px; background:#333; text-align:center;}
.btn_menu span:nth-child(2),
.btn_menu span:nth-child(3){margin-top: 6px }

@media all and (max-width:1280px){
	#header .gnb > li > a{ padding:0 2vw; }
	#header .button_wrap{ width: auto }
}
@media all and (max-width:1080px){
	#header{ height:80px;}
	#header .gnb > li > a{padding:0 25px;}
	#header h1{ margin: 0 }
	#header h1 a img{ width: 85% }
	#header .gnb{display:none }
	#header .button_wrap{ width: auto }
}
@media all and (max-width:500px){
	#header{ height:65px }
	#header h1 a img{ width: 60% }
}

/* 모바일 메뉴 */
.m_gnb{overflow-y:auto; position:fixed; padding-top: 100px; top:0px; right:-100%; width:280px; height:100%; background:#fff; transition:all 0.5s ease-out 0s;z-index:999;}
.m_gnb > ul > li > a{display:block; position:relative; padding:15px 25px; border-bottom: 1px solid #eaeaea; color:#424242; transition:all 0.3s ease 0s;}
.m_gnb > ul > li > a.open:before{content:''; display:block; position:absolute; top:25px; right:10px; width:11px; height:7px; background:url(../images/common/menu_button.svg) no-repeat 50% 0; transition:all 0.4s ease 0s; background-size:100%;}
.m_gnb > ul > li > a.active{}
.m_gnb > ul > li > a.active:before{transform:rotate(180deg);}
.m_gnb > ul > li > ul{display:none; background:#efefef }
.m_gnb > ul > li > ul > li{border-bottom:1px solid #dedede;}
.m_gnb > ul > li > ul > li > a{position:relative; display:block; padding:17px 25px; font-size:14px; color:#333 }

.m_gnb .btn_close{opacity: 0; display: block; position:absolute; top:30px; right:-100%; width:24px; height:23px; font-size:0px; transition:0.8s;}
.m_gnb.active{right:0px;}
.m_gnb.active .btn_close{opacity:1; right:15px;}
.m_gnb_top{box-sizing:border-box; background:#00469b;}
.m_gnb_top p{background:#ddd;}
.m_gnb > ul{}
.m_gnb .btn_close:before{content: ''; display:block; position:absolute; top:9px; left:0px;  width:100%; height:1px; background:#333; transform:rotate(45deg);}
.m_gnb .btn_close:after{content: ''; display:block; position:absolute; top:9px; left:0px; width:100%; height:1px; background:#333; bottom: 9px; transform: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{ padding: 47px 0 75px; background: #262525 }
#footer .logo_footer{ margin: 0 136px 40px 0 }
#footer .footer_info{ display: inline-block }
#footer .customer{ display: flex; flex-wrap: wrap; margin-bottom: 28px; font-size: 0 }
#footer .customer li{ margin: 0 30px 5px 0 }
#footer .customer a{ display: inline-block; position: relative; color: #ffffffb3; font-size: 15px }
#footer .address{ margin-top: -3px }
#footer address span{ display: inline-block; margin-right: 20px }
#footer address span b{ font-weight: 400 }
#footer address span,
#footer address span a,
#footer .address p{ color: #ffffff80; font-size: 14px; line-height: 1.857 }
#footer .address p span{ text-transform: uppercase }
.btn_top{ position: absolute; top: -68px; right: 0;  width: 70px; height: 70px; background: url(../images/common/icon_btn_top.png) no-repeat 50%, var(--color-darkblue);}

@media screen and (max-width:1240px){
	#footer .inr{ width: calc( 100% - 40px) }
}
@media screen and (max-width:1080px){
	#footer .logo_footer{ margin-right: 0 }
}
@media (max-width: 767px) {
	.btn_top{ top: -58px; width: 50px; height: 50px }
}

@media screen and (max-width:500px){
	#footer .customer{ margin-bottom: 20px }
	#footer .address p{ margin-top: 15px }

}