#headerwrap {position: fixed; width: 100%; top: 0; z-index: 10;}

/* top */
.top_util_wrap{
	width: 100%;
	border-bottom: 1px solid #e8e8e838;
	background: #063931;
}
.top_util{
	width: 1200px; height:40px;
	margin:0 auto;
	font-size: 13px;
	line-height: 3;
	}
.top_util ul{
	float: right;
	}
.top_util ul li{
	float: left;
	padding: 0 12px;
	}
.top_util ul li a{
	color: #fff;
	}
.top{
	width: 100%; height:100px;
	border-bottom: 1px solid #ececec41;
	background: #0A463D;
	}
#nav{
	width:1200px; height:100px;
	margin:0 auto;
	}
.logo{
	float:left;
	padding: 28px 0 0 0;
	width:268px;
	}
.logo img { 
	width:100%; 
	}
.main { 
	float:right; 
	width:72%; height:100px;
	line-height: 2;
	}
.main li { 
	float:left;
	/* padding: 28px 26px;  */
	/* width:auto; */
	width:16%;
	text-align:center; 
	line-height: 100px;
	}
.main li:last-child { 
	/* padding: 28px 0px 28px 28px; */
	width: 20%;
	}
.main li a { 
	display:block;
	font-size:20px;
	color: #fff;
	font-weight: bold;
	}
.main li a { 
	display:block;
	font-size:20px;
	color: #fff;
	font-weight: bold;
	position: relative;
	}
.main li a::before { 
	content: "";
	display: block;
	position: absolute;
	width: 0px;
	height: 4px;
	background: #069E88;
	transition: all 0.2s cubic-bezier(0.7, 0, 0.3, 1);
	bottom: 1px;
	left: 50%;
	}
.main li:hover a::before { 
	width: 60px;
    margin-left: -30px;
	}

/* 좌측 컨텐츠 및 서브메뉴 */
#top_webgnb{width:100%; min-width:680px; border-bottom:1px solid #dddddd; position: absolute; z-index: 999; background: #fff;}
#top_contents{width:1200px;margin:0 auto;height:220px;padding-top:20px;}
#gnb{float:right; width:72%; line-height:180%; color:#444; font-size:11pt; background: #fff;text-align: center;}
#gnb ul {float:left;width: 138.23px;}
#gnb .gnb_tid {width: 172.8px;}
#gnb .gnb_tid ul {width: 172.8px;}
#gnb ul li a{color:#444444;font-size:15px;font-weight:normal;padding: 5px 0px;display: inline-block;}
#gnb ul li a:hover{color:#069E88;}


/* 모바일 메뉴 */
#mobile_header {width: 100%;  position: relative; z-index: 1000; background: #ffffff; border-bottom: 1px solid #ececec41; padding: 15px 20px; height: 70px; display: none;}
.mobile_logo {float: left;}
.mobile_logo a {display: block;margin-top: 4px;}
.mobile_logo img {width: 200px;}
.ham_btn {float: right;}
.ham_btn a {display: block; width: 30px; height: 22px; position: relative; margin-top: 9px;}
.ham_btn i {display: block; width: 30px; height: 3px; background: #fff; position: absolute;}
.ham_btn i:nth-of-type(1) {top: 0;}
.ham_btn i:nth-of-type(2) {top: 50%; transform: translateY(-50%);}
.ham_btn i:nth-of-type(3) {bottom: 0;}

.mo_top_util {background: #063931;}
.mo_top_util ul li {display: inline-block; padding-left: 15px;}
.mo_top_util ul li a {display: inline-block; padding: 24px 10px; color: #fff;}

nav {width: 100%; height: 100vh; border: 1px solid #ccc; background-color: rgba(255, 255, 255); position: absolute; left: -100%; top: 0;}

.close  {position: absolute; width: 30px; height: 30px;  top: 35px; right: 30px; cursor: pointer; z-index: 999;}
.close i {display: block; width: 30px; height: 2px; background: #fff; position: absolute;}
.close i:nth-of-type(1) {transform: rotate(45deg);}
.close i:nth-of-type(2) {transform: rotate(-45deg);}

*{box-sizing: border-box; }
.que:first-child{border-top: 1px solid black;}
.que{position: relative;padding: 17px 20px;cursor: pointer; font-size: 14px;border-bottom: 1px solid #dddddd;}
.que::before{display: inline-block;content: ''; width: 3px; height: 3px; background: #656565; margin: 3px 5px;}
.que.on > span{ font-weight: bold;color: #069E88; }
.anw { display: none; overflow: hidden; font-size: 14px; background-color: #EBF9F7; padding: 10px 30px;} 
.anw li:hover a {color: #0b0757;}
.anw a {display: block; padding: 5px 0;}

.arrow-wrap { position: absolute; top:50%; right: 30px; transform: translate(0, -50%);}
.que .arrow-top { display: none; transition: all .3s;}
.que .arrow-bottom { display: block;transform: rotate(-90deg);}
.que.on .arrow-bottom { display: none; transition: all .3s;}
.que.on .arrow-top { display: block; ;transform: rotate(90deg);}




@media all and (max-width:1200px) {
	#header {display: none;}
    #mobile_header {display: block; background: #063931;}
}