@charset "utf-8";

#divTopMenu{position:relative; min-width:860px;  box-sizing: border-box; top:15px;left:50%;-webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); z-index:99999;}

@media all and (max-width:1024px){
	#divTopMenu{display:none;}
}

@media all and (max-width:767px){
	#divTopMenu{display:none;}
}


/*
#headerMenu{position:relative;min-width:860px; top:15px;left:50%;-webkit-transform:translate(-50%, -50%); transform:translate(-50%, -50%); z-index:99999;}
#header {width:100%;height:80px;position:relative;z-index:40;background-color:#fff; border-top: 0px solid #dbdbdb; border-bottom: 0solid #2e343b;}
#headerMenu .inwrap {position:relative; width:100%; margin:0 auto; z-index:42; z-index:99999; }
*/

#divTopMenu .inwrap {position:relative; width:100%; margin:0 auto; z-index:99999;  }

#gnb {position:relative; width:100%; letter-spacing:-0.03em; font-size:16px; border-right: 0px solid #dbdbdb; box-sizing: border-box; z-index:99999;}
#gnb ul, #gnb li, #gnb div, #gnb a {box-sizing:content-box;}
#gnb > ul {max-width:1000px; margin:0 auto 0px; padding:0px 0px 0px 120px; }
#gnb > ul > li {float:left; width:14.2%;  box-sizing: border-box;     font-family: 'GmarketSansMedium', 'Pretendard GOV SemiBold'; }
#gnb > ul > li > a {display:block; height:60px; color:#222;  font-size:18px;  text-decoration:none; text-align:center; line-height:50px;}
#gnb > ul > li:first-child > a {border-left:0px solid #d3d3d3;}
#gnb > ul > li > a:hover {color:#006a75;}

#gnb > ul > li .depth2 > .wrap > .wrap2:before{
content: '';
    position: absolute;
    left: 0;
    top: -1px;
    width: 200px;
    height: 100%;
    background-color: #304991;
    
    }

    
#gnb > ul > li .depth2 {visibility:hidden; position:absolute; width:100%; position:absolute;  left:0; z-index:10; top:60px;  
	border-top:1px solid #d7d7d7; border-bottom:2px solid #304991; box-sizing: border-box; overflow:hidden;
	/*box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);background:url(../../../images/common/menu_bg1.png); */background-color:#fff; }
#gnb > ul > li .depth2:before{content:''; display:block; position:absolute; width:50%; height:100%;background-color:#e7eff9;}



#gnb.open > ul > li.hover .depth2 {visibility:visible;}
#gnb > ul > li .depth2 .bg {display:block; position:absolute;   top:0; left:50%;width:50%; background:#fff;}

#gnb > ul > li .depth2 .gnbTxt {/* 1차메뉴 타이틀 */  display:table-cell; position:relative; float:left;  width:18%; /*width:28%;*/ 
	text-align:left; padding:10px 25px 0px 0px;  font-size:36px; height:100%; 
	min-height:80px; color:#314991; vertical-align:top;  box-sizing: border-box;  }
	
#gnb > ul > li .depth2 .gnbTxt:after {content:''; display:block; position:absolute; 
	width:150px; height:130px;  left:10px; border:0px solid #ef0616;
}

#gnb > ul > li .depth2 .bg_mmu1:after{top:330px; background:url(../../../images/common/mascot4.png) right 0px no-repeat;background-size:120px;}
#gnb > ul > li .depth2 .bg_mmu2:after{top:330px; background:url(../../../images/common/mascot5.png) right 0px no-repeat;background-size:110px;}/* 고객서비스센터 */
#gnb > ul > li .depth2 .bg_mmu3:after{top:150px; background:url(../../../images/common/mascot6.png) right 0px no-repeat;background-size:110px;}/* 열린마당 */
#gnb > ul > li .depth2 .bg_mmu4:after{top:170px; background:url(../../../images/common/mascot2.png) right 0px no-repeat;background-size:120px;}/* 상수도소식 */
#gnb > ul > li .depth2 .bg_mmu5:after{top:330px; background:url(../../../images/common/mascot8.png) right 0px no-repeat;background-size:150px;}/* 상수도수질 */
#gnb > ul > li .depth2 .bg_mmu6:after{top:330px; background:url(../../../images/common/mascot9.png) right 0px no-repeat;background-size:120px;}/* 수돗물사랑 */
#gnb > ul > li .depth2 .bg_mmu7:after{top:280px; background:url(../../../images/common/mascot2.png) right 0px no-repeat;background-size:120px;}/* 행정자료실 */
#gnb > ul > li .depth2 .bg_mmu8:after{top:330px; background:url(../../../images/common/mascot10.png) right 0px no-repeat;background-size:130px;}/* 상수도조직 */



#gnb > ul > li.mnu1 .depth2 .gnbTxt:after {background-position:50% 0;border: 2px solid #000bf2; }
#gnb > ul > li.mnu2 .depth2 .gnbTxt:after {background-position:50% -120px;}
#gnb > ul > li.mnu3 .depth2 .gnbTxt:after {background-position:50% -240px;}
#gnb > ul > li.mnu4 .depth2 .gnbTxt:after {background-position:50% -360px; }
#gnb > ul > li.mnu5 .depth2 .gnbTxt:after {background-position:50% -480px;}

#gnb > ul > li .depth2 .gnbTxt h2 {padding-bottom:0px; font-size:30px; margin:30px 0px 0px 0px; font-family:'Pretendard GOV ExtraBold'; letter-spacing:-0.7px;  border-top:0px solid #d7d7d7; }
#gnb > ul > li .depth2 .gnbTxt h2:after{/*content:''; display:block; position:absolute; top:25px; left:0px; width:50px; height:2px;  background:#304b8e;*/}
#gnb > ul > li .depth2 .gnbTxt > p {font-size:16px; line-height:1.3; border: 2px solid #000bf2; }
#gnb > ul > li .depth2 > .wrap {display:table; width:100%; /*max-width:1400px;*/ margin:0 auto;  
	/* background:url(../../../images/common/mascot2.png) 0px 0px no-repeat; background-size:100px; */ box-sizing: border-box; 
	background-color:#e7eff9; }


#gnb > ul > li .depth2 > .wrap > .wrap2 {/* 2차메뉴 */ position:relative; float:right; width:82%;  min-height:300px;  font-family:'Pretendard GOV'; background-color:#fff;  box-sizing: border-box;}

#gnb > ul > li .depth2mmu4 > .wrap > .wrap2:after{content:''; display:block; position:absolute; 
	width:380px; height:130px; bottom:5%; right:0%;
	background:url(../../../images/common/signature11.png) 0px 0px no-repeat; background-size:373px;
	}


#gnb > ul > li .depth2 > .wrap > .wrap2 > ul{display:block; overflow:hidden;}

#gnb > ul > li .depth2 > .wrap > .wrap2 > ul > li {position:relative; float:left; width:100%; border-bottom: 1px solid rgba(0, 0, 0, .1); /**/}
#gnb > ul > li .depth2 > .wrap > .wrap2 > ul > li > a {line-height:50px;  float: left; display: block; /* display:table-cell; left:0;top:0;*/width:200px;height:100%;text-align:center;color:#fff;}
#gnb > ul > li .depth2 > .wrap > .wrap2 > ul > li > a.blank:after {display:inline-block; width:14px; height:14px; margin-left:5px; background:url(../../../images/common/blank.gif) 0px 5px no-repeat; color:#fff;  content:'';}

#gnb > ul > li .depth2 > .wrap > .wrap2 > ul > li.mmu1H > a {}
#gnb > ul > li .depth2 > .wrap > .wrap2 > ul > li.mmu2H > a {} 
#gnb > ul > li .depth2 > .wrap > .wrap2 > ul > li.mmu3H > a {}
#gnb > ul > li .depth2 > .wrap > .wrap2 > ul > li.mmu4H > a {}
#gnb > ul > li .depth2 > .wrap > .wrap2 > ul > li.mmu5H > a {}
#gnb > ul > li .depth2 > .wrap > .wrap2 > ul > li.mmu6H > a {}
#gnb > ul > li .depth2 > .wrap > .wrap2 > ul > li.mmu7H > a {}



#gnb > ul > li .depth2 > .wrap > .wrap2 > ul > li > a:focus {
	outline:2px dotted rgba(0,0,0,0.5) !important; border: 1px solid rgba(255,255,255,0.8);
	outline-offset:-2px;
}


#gnb > ul > li .depth2 ul.depth3 {/* 3차메뉴 */ /* font-size:0;*/position:relative;min-height:30px; line-height:22px; margin-left:200px; padding:5px 20px 5px 20px;  }
#gnb > ul > li .depth2 ul.depth3 > li {position:relative;display:inline-block;  height:100%;box-sizing: border-box; padding:15px 30px 15px 10px;/* background: url(../../../images/common/dot_mmenu_off.gif) no-repeat left 12px;*/ }
#gnb > ul > li .depth2 ul.depth3 > li::before {
    position:absolute;
    top: 23px;
    left: 0px;
    width: 3px;
    height: 3px;
    background-color: #5f51a6;
    border-radius: 50%;
    content: '';
}


#gnb > ul > li .depth2 ul.depth3 > li a {position:relative; display:block;   color:#222;  -webkit-box-sizing: border-box; box-sizing: border-box;}
#gnb > ul > li .depth2 ul.depth3 > li a.blank:after {display:inline-block; width:15px; height:15px;   margin-left:4px; background:url(../../../images/common/blank.gif) no-repeat; content:''; vertical-align:top;}



/*
#gnb > ul > li .depth2 ul.depth3 > li.depth3mmu2{margin:55px 0px 55px 0px;  background:none; }
#gnb > ul > li .depth2 ul.depth3 > li.depth3mmu3{margin:65px 0.5% 65px 0.5%; width:18.5%;text-align:center;  padding:3px 5px 3px 5px; border:1px solid rgba(0,0,0,.2); -webkit-box-sizing:border-box; box-sizing:border-box;background:none; }
#gnb > ul > li .depth2 ul.depth3 > li.depth3mmu4{margin:5px 0.5% 5px 0.5%; width:15.6%; letter-spacing:-0.07em; border: 0px solid rgba(0,0,0,.2);    box-sizing: border-box;}
#gnb > ul > li .depth2 ul.depth3 > li.depth3mmu5{margin:10px 0.5% 10px 0.5%; width:18.5%; text-align:center; height:50px;  padding:12px 5px 0px 5px; border: 1px solid rgba(0,0,0,.2);vertical-align:middle;background:none; box-sizing: border-box;}
#gnb > ul > li .depth2 ul.depth3 > li.depth3mmu6{padding-right:20px; margin-right:35px; box-sizing: border-box; }
*/


/*
#gnb > ul > li.mmu1 .depth2 ul.depth3 {min-height:100px; }
#gnb > ul > li.mmu2 .depth2 ul.depth3 {min-height:100px;}
#gnb > ul > li.mmu3 .depth2 ul.depth3 {min-height:100px;}
#gnb > ul > li.mmu3 .depth2 .short ul.depth3 {}
#gnb > ul > li.mmu4 .depth2 ul.depth3 {}
#gnb > ul > li.mmu4 .depth2 .short ul.depth3 {}
#gnb > ul > li.mmu5 .depth2 ul.depth3 {}
#gnb > ul > li.mmu6 .depth2 ul.depth3 {min-height:100px;}
#gnb > ul > li.mmu6 > a{}
#gnb > ul > li.mmu7 .depth2 ul.depth3 {min-height:100px;}
*/

#gnb > ul > li .depth2 .btn_close {display:block; position:absolute; left:50%; bottom:0px; width:70px; height:50px; margin-left:700px; }
#gnb > ul > li .depth2 .btn_close button{cursor:pointer;padding:0 !important;margin:0; }


	
	
@media screen and (max-width:1480px){
	 #gnb > ul {max-width:740px;padding:0px 0px 0px 150px;  }
	
} 


@media screen and (max-width:1280px){
	 #gnb > ul {max-width:700px; padding:0px 0px 0px 170px;}
	/* #gnb > ul > li .depth2 ul.depth3 > li.depth3mmu4{ margin:5px 0.5% 5px 0.5%; width:24%; letter-spacing:-0.07em;} 현재의울산 */
	/*#gnb > ul > li .depth2 ul.depth3 > li.depth3mmu5{margin:10px 0.5% 10px 0.5%; width:24%;padding:12px 5px 0px 5px;} 미래의 울산 */

} 

@media screen and (max-width:1150px){
	 #gnb > ul {max-width:620px}
	 #gnb > ul > li > a { font-size:16px; }
	
	 
} 

@media screen and (max-width:1024px){
	 #gnb > ul {}
	 #divTopMenu{position:relative; min-width:620px;} 
	 
}