.wrapper{width:1500px; margin:0 auto;}
.inr{width:1000px; margin:0 auto;}


/* header */
#header {z-index:99; position:fixed; width:100%; height:100px; transition:0.3s; background: #fff; /*box-shadow: rgba(0,0,0,0.1) 0 0 20px;*/ box-sizing: border-box; border-bottom: 1px solid #eee;}
#header .inr{position:relative; width: 1820px; height: 100px; display: flex; justify-content: space-between; align-items: center; margin: 0 auto;}
/*#header h1 a{display:block; width:328px; height:40px; background:url(../images/common/logo_w.svg) no-repeat 50% 0; background-size:100%; font-size:0;}*/
#header .inr .logo .dark img{display: none;}
#header .inr .gnb{position:relative; display: flex; width: 1000px;}
#header .inr .gnb > li{position: relative; display: flex; width: 25%; align-items: center; justify-content: center;}
#header .inr .gnb > li > a{display:block; color:#444; font-size:18px; font-weight:600; text-align: center; line-height: 1.3; padding: 20px 0; text-transform: uppercase;}
#header .inr .gnb > li > .sub_menu{display:none; position:absolute; left:0; top:80px; width:100% !important; background:#fff; border:1px solid #ddd; z-index:99;}
#header .inr .gnb li:hover .sub_menu{display:block; background:#fff; top:80px; width:100%; animation: submenu 0.3s 1 linear;}
#header .inr .gnb .sub_menu{animation: submenu 0.3s 1 linear; transition: ease all .2s;}
#header .inr .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 .inr .gnb .sub_menu li a em {}
#header .inr .gnb .sub_menu li a:hover{background:#e60212; color:#fff;}
#header .inr .gnb .sub_menu li:first-child a{border-top:0;}

#header .area_util{position:absolute; right:0; top:25px;}
#header .area_util span{display:inline-block; width:40px; height:40px; margin-right:6px; background:#111 url(../images/common/icon_call.svg) no-repeat 50% / 15px; border-radius:50%; }
#header .area_util div{display:inline-block; color:#fff;}
#header .area_util div a{color:#fff; font-weight:bold; font-size:20px;}




/* mobile-menu */
.mobile_header{background:#008790; color:#333; text-align:center; padding:35px 0 10px 0;}
.btn_menu{position:relative; z-index:1; width:32px; height:40px;}
.btn_menu span{width: 32px; height: 2px; margin: 0 auto; background-color: #333; display: block; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;}
.btn_menu span:nth-child(1){margin-top:10px;}
.btn_menu span:nth-child(2){margin-top:7px;}
.btn_menu span:nth-child(3){margin-top:7px;}

/*닫기 > 메뉴*/
/*
.btn_menu:active span:nth-child(1) {animation : menubar1 .75s forwards; margin-top:0;}
.btn_menu:active span:nth-child(2) {transition : all .25s; opacity : 1;}
.btn_menu:active span:nth-child(3) {animation : menubar2 .75s forwards;}
*/

/*메뉴 > 닫기*/
.btn_menu:active span:nth-child(1) {animation :close-menubar1 0.75s forwards;}
.btn_menu:active span:nth-child(2) {opacity : 0;}
.btn_menu:active span:nth-child(3) {animation : close-menubar3 .75s forwards; width:100%;}

/*
.btn_close:before,
.btn_close:after{content: ''; display:block; position:absolute; top:50%; left:50%;  width:100%; height:3px; background:#333; border-radius:2px;}
.btn_close:before{transform:translate(-50%,-50%) rotate(45deg);}
.btn_close:after{transform:translate(-50%,-50%) rotate(-45deg);}
*/


.menu_top p{margin-top:10px; color:#949494;}
#header .m_gnb_top h1{float:none; padding:20px; }
.m_area_util{margin-top:40px;overflow:hidden;  padding:20px; box-sizing:border-box; background:#4c4c4c;}
.m_area_util a{display:inline-block; width: 49%; height:31px; box-sizing: border-box; padding:5px 0; margin:2px 0px; border:1px solid #fff; vertical-align:middle; color:#fff; text-align:center; font-size:14px;}
/*.m_gnb{overflow-y:auto; position:fixed; top:0px; right:-100%; width:280px; height:100%; background:#fff; transition:all 0.5s ease-out 0s;z-index:999;}*/
.m_gnb{overflow-y:auto; position:fixed; top:0; right:-100%; width:100%; height:100%; background:#fff; transition:all 0.5s ease-out 0s; z-index:1;}
.m_gnb > ul{display: none;}
.m_gnb > ul > li > a{display:block; position:relative; padding:15px 25px; border-bottom: 1px solid #eaeaea; color:#4c4c4c; transition:all 0.3s ease 0s; font-weight: 600; font-size: 18px;}
.m_gnb > ul > li > a.open:before{content:''; display:block; position:absolute; top:45%; right:25px; 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{color: #222; font-weight: 700;}
.m_gnb > ul > li > a.active:before{transform:rotate(180deg);}
.m_gnb > ul > li > ul{display:none; background:#f6f7f8; }
.m_gnb > ul > li > ul > li{border-bottom:1px solid #dedede;}
.m_gnb > ul > li > ul > li > a{position:relative; display:block; padding:25px 25px; font-size:16px; color:#333; }

.m_gnb .all_menu nav{width:100%;}
.m_gnb .all_menu nav .pc_gnb{display:flex;margin:auto;width:85%;flex-wrap:nowrap;justify-content:space-between; padding-top: 15em;}
.m_gnb .all_menu nav .pc_gnb > li{display: flex; flex-direction: column;}
.m_gnb .all_menu nav .pc_gnb > li > a{display:block; margin-bottom:25px; font-size:1.5em; color:#111; font-weight:bold; line-height: 1.2em;}
.m_gnb .all_menu nav .pc_gnb > li > a > em {color: #ddd; font-size: 18px; text-transform: uppercase; font-weight: 600;}
.m_gnb .all_menu nav .pc_gnb > li > ul{}
.m_gnb .m_sub_menu li:has(.koweb_online_counsel){ display: none; }
/*.m_gnb .all_menu nav .pc_gnb > li > ul > li+li{margin-top:12rem;}*/
.m_gnb .all_menu nav .pc_gnb > li > ul > li > a{font-size: 16px; color: #a0a0a0; font-weight: 500; transition: 0.3s ease; line-height: 1.8em;}
.m_gnb .all_menu nav .pc_gnb > li > ul > li > a:hover{color: #e60212;}



.m_gnb .btn_close{opacity: 0; display: block; position:absolute; top:40px; width:30px; height:30px; font-size:0px; transition:0.8s;}
.m_gnb.active{right:0px;}
.m_gnb.active .btn_close{opacity:1; right:45px;}
.m_gnb_top{box-sizing:border-box; background:#00469b;}
.m_gnb_top p{background:#ddd;}
.m_gnb .btn_close:before{content: ''; display:block; position:absolute; top:9px; left:0px;  width:100%; height:2px; background:#333; transform:rotate(45deg);}
.m_gnb .btn_close:after{content: ''; display:block; position:absolute; top:9px; left:0px; width:100%; height:2px; background:#333; bottom: 9px; transform:rotate(-45deg);}

.area_util_m{padding:20px 20px; margin-top:100px; 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% / 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.6); z-index:0; display:none;}
.cover.active{display:block;}


/* footer */
.footer {background: #fff;}
.footer .f_top {padding: 20px 0; border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}
.footer .f_top .inr {width: 1500px; margin: 0 auto;}
.footer .f_top .align {display: flex; justify-content: space-between;}
.footer .f_top div em {font-weight: 600; margin-right: 15px;}
.footer .f_top div span {font-weight: 500; color: #222;}

.footer .f_btm {padding: 50px 0; text-align: center; margin: 0 auto;}
.footer .f_btm .f_logo {position: relative; display: block; width: 75px; margin: 0 auto; padding-bottom: 30px;}
.footer .f_btm .f_logo img {width: 100%;}	
.footer .f_btm .info address {position: relative; display: flex; flex-wrap: wrap; max-width: 650px; margin: 0 auto; justify-content: center; padding-bottom: 40px;}
.footer .f_btm .info span {color: #777; margin: 0 10px;}
.footer .f_btm .info em {font-weight: 600; color: #444;}
.footer .f_btm p {font-size: 15px; color: #868686;}

.footer .btn_top_box {display: block; position:fixed; bottom: 20px; right:20px; width:60px; height:60px; background:#e50213; border-radius: 10px 10px 0 10px; z-index: 9; box-shadow: rgba(0,0,0,0.3) 5px 5px 10px; opacity: 0;}
.footer .btn_top_box .btn_top {display:flex; justify-content: center; align-items: center; flex-direction: column; width:100%; height:100%;}
.footer .btn_top_box .btn_top a {display:block; width:100%; height:100%;}
.footer .btn_top_box .btn_top span {display:block; font-size:14px; color:#fff; line-height:1em; font-weight: 600;}




/* quick */
#quick {position: fixed; top: 50%; right: 10px; transform: translateY(-50%); z-index: 9;}
#quick ul {width: 110px; height: 290px; border-radius: 15px 15px 0 17px; background: #fff; box-shadow: rgba(0,0,0,0.2) 0 10px 20px; font-size: 16px; text-align: center;}
#quick ul li {position: relative; display: block; padding: 18px 0 15px; transition: all 0.3s ease;}
#quick ul li:nth-child(1) {padding-top:30px;}
#quick ul li:nth-child(1):after {content: none;}
#quick ul li:after {content: ''; position: absolute; left: 50%; top: 0; display: block; width: 4px; height: 4px; border-radius: 2px; background: #d9d9d9; transform: translateX(-50%);}
#quick ul li i {position: relative; display: block; padding-bottom: 7px;}
#quick ul li i img {height: 30px;}
#quick ul li em {line-height: 1.2em; font-weight: 500; transition: all .4s; color: #777;}
#quick ul li em:hover {font-weight: 600; color: #222;}
#quick ul .scrollTop {position: fixed; bottom: -1px; width: 100%; background: #b72322; color: #fff; font-weight: 700; border-radius: 0 0 0 15px; padding: 15px 0; cursor: pointer; transition: all .4s;}
#quick ul .scrollTop:hover {background: #e60212;}




@media screen and (max-width:1840px){
	#header .head_top .inr, #header .head_wrap .inr {width: 95%;}
}


@media screen and (max-width:1580px){
	#header .inr .gnb > li > a {font-size: 17px;}
}
@media screen and (max-width:1380px){
	#header h1 img {height: 60px;}
	.footer .f_top .inr {width: 95%;}

}

@media all and (max-width:1280px){
	#header h1 img {height: 50px;}
	#header .inr .gnb {width: 860px;}
	#header .inr .gnb > li > a {font-size: 16px;}


	.wrapper{width:96%;}
	
	
	#quick {display: none;}
	.footer .btn_top_box {opacity: 1;}
}
@media screen and (max-width:1200px){
	#header {height: 80px;}
	#header .inr {height: 80px; width: 96%;}
	
	#header .hd_nav {display: none;}
	
	.footer .f_btm {padding: 40px 0;}
	
}

@media all and (max-width:1080px){
	#header .area_util,
	#header .gnb{display:none;}
	.btn_menu{display:block;}
	#header{height:80px; background:#fff;}
	#header h1{top:20px;}
	
	
	.m_gnb .all_menu nav .pc_gnb {flex-direction: column; padding: 10em 0;}
	.m_gnb .all_menu nav .pc_gnb > li {flex-direction: row; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px dashed #eee;}
	.m_gnb .all_menu nav .pc_gnb > li:last-child {margin-bottom: 0; padding-bottom: 0; border-bottom: none;}
	.m_gnb .all_menu nav .pc_gnb > li > a {font-size: 1.3em; margin-bottom: 10px; width: 30%;}
	

}

@media all and (max-width:767px){
	body,
	p,
	li,
	a{font-size:14px;}
	
	#header nav {display: none;}
	.m_gnb > ul {display: block; margin-top: 80px;}
}

@media all and (max-width:680px){
	.footer .f_top {padding: 15px 0;}
	.footer .f_btm {padding: 20px 0; width: 95%;}
	
	
}

@media all and (max-width:500px){
	#header {height:65px;}
	#header .inr {height:65px;}
	#header h1 a {width:250px; height:31px;}
	#header h1 img {height: 35px;}
	
	.footer .f_top {padding: 10px 0;}
	.footer .f_top .align {align-items: center; flex-direction: column;}
	.footer .f_btm .f_logo {padding-bottom: 15px; width: 50px;}
	.footer .f_btm .info address {padding-bottom: 10px;}
	.footer .f_btm p {font-size: 13px;}
/*	.btn_menu{top:10px;}*/
}

@media all and (max-width:375px){
	.footer .f_top .align {align-items: flex-start; font-size: 13px;}
	.footer .f_btm .f_logo {display: none;}
	.footer .f_btm .info address {justify-content: flex-start; font-size: 13px;}
	.footer .f_btm .info span {margin: 0 10px 0 0;}
	.footer .f_btm p {text-align: left; font-size: 12px;}
	
}



/* 다크모드 */
/*
@media (prefers-color-scheme: dark) {
	#header .inr .logo .light img {display: none;}
	#header .inr .logo .dark img {display: block;}
	.btn_menu span {background-color: #fff;}
}
*/



@keyframes rotate_image {
    100% { -webkit-transform: translate(-50%, -50%) rotate(360deg);}
}

@keyframes close-menubar1 {
    0% {transform:translateY(0) rotate(0);} 
    50% {transform:translateY(3px) rotate(0);} 
    100% {transform:translateY(11px) rotate(45deg);}
}

@keyframes close-menubar3 {
    0% {transform : translateY(0) rotate(0);} 
    50% {transform : translateY(-7px) rotate(0);} 
    100% {transform : translateY(-7px) rotate(-45deg);}
}
@keyframes menubar1 {
    0% {transform : translateY(8.5px) rotate(45deg);} 
    50% {transform : translateY(8.5px) rotate(0);} 
    100% {transform : translateY(0) rotate(0);}
}
@keyframes menubar2 {
    0% {transform : translateY(-9px) rotate(-45deg);} 
    50% {transform : translateY(-9px) rotate(0);} 
    100% {transform : translateY(0) rotate(0);}
}