@charset "UTF-8";

/**** header ****/
header {float:left; position:fixed; top:0; left:0; width:250px; height:100vh; background:#292e3e; box-shadow:5px 5px 10px rgba(0,0,0,.2); z-index:102;}
.head {padding:25px; background:#fff;}
.layout_right {float:right; width:calc(100% - 250px);}

/* gnb */
.search_wrap {position:relative; margin:20px 0 0;}
.search_wrap input {display:block; width:100%; height:45px; line-height:45px; padding:0 0 0 10px; color:#999; border:3px solid #1b1464;}
.search_wrap button {position:absolute; top:0px; right:0; width:45px; height:45px; background:url("/uljujm/images/layout/i_search.png") no-repeat center #1b1464; text-indent:-9999px;}

/* gnb sub 타이틀영역 */
#gnb.pc {width:100%; z-index:110; overflow:hidden;}
#gnb.pc .gnb_in .dep1,
#gnb.pc .sub_nav_con .dep2>li {border-bottom:1px solid rgba(255,255,255,.1);}
#gnb.pc .sub_nav_con .dep2>li:first-child {border-top:1px solid rgba(255,255,255,.1);}
#gnb.pc .gnb_in .dep1>a {display:block; padding:15px 10px 15px 25px; color:#fff; font-size:16px;}
#gnb.pc .gnb_in .dep1>a:hover {background:#101523; color:#8ec53e;}
#gnb.pc .gnb_in .dep1.on .sub_nav_con {display:block; z-index:300;}

#gnb.pc .sub_nav_con {position:absolute; width:0; height:100%; top:0; left:250px; background:#141a2b; overflow:hidden; box-shadow:inset 2px -10px 5px rgba(0,0,0,0.5); z-index:0;}
#gnb.pc .sub_nav_con .dep2 {display:none; width:200px; margin-top:133px;}
#gnb.pc .sub_nav_con .dep2>li>a {display:block; padding:10px 10px 10px 25px; color:#fff; font-weight:300;}
#gnb.pc .sub_nav_con .dep2>li>a:hover {background:#0e4788;}
/* #gnb.pc .sub_nav_con .dep2>li.add_icon {border:10px solid #f0c;} */

#gnb.pc .sub_nav_con .dep3 {padding:0 10px 20px;}
#gnb.pc .sub_nav_con .dep3>li {padding-left:30px; background:url(/uljujm/images/layout/dash_s.jpg) no-repeat 20px 11px;}
#gnb.pc .sub_nav_con .dep3>li>a {color:#9cbadc; font-size:12px;}
#gnb.pc .sub_nav_con .dep3>li>a:hover {text-decoration:underline;}



/* 우측 전체메뉴 토글 */
#allNav {position:fixed;  top:20px; right:20px; z-index:110; cursor:pointer;}

.toggle_box {display:inline-block; position:relative; width:70px; height:70px; background:#1b1464;}
.toggle {position:absolute; top:50%; transform:translate(0,-50%); width:100%;}
.stick {display:block; margin:0 10px 10px auto; height:4px; width:70%; border-radius:50px; background:#fff; transition: all 0.3s ease-in-out;}
.stick:first-child {width:50%;}
.stick:last-child {width:30%; margin-bottom:0;}
.toggle:hover .stick {width:70%;}
.stickOpen{position:absolute; top:50%; left:50%; transition: all 0.3s ease-in-out;}
.stick_1.stickOpen {width:70%; transform:translate(-50%,-50%) rotate(-45deg);}
.stick_2.stickOpen {opacity:0;}
.stick_3.stickOpen {width:70%; transform:translate(-50%,-50%) rotate(45deg);}

.allNav_wrap {position:fixed; top:0; right:-100%; width:100%; height:100%; background:rgba(30,49,84,0.9); z-index:105; padding:30px;}
.allNav_wrap h1 {margin:2% auto 5%; text-align:center; color:#fff;}
.allNav_wrap .gnb_in>li {float:left; width:16.66%;}
.allNav_wrap .gnb_in a {color:#fff; font-weight:300; display:block;}
.allNav_wrap .gnb_in a:hover {color:#38fdff;}
.allNav_wrap .gnb_in>li>a {display:block; width:80%; font-size:20px; border-bottom:1px solid rgba(255,255,255,0.4); border-top:1px solid rgba(255,255,255,0.8); padding:20px 0; margin:30px 0;}
.allNav_wrap .gnb_in>li>a:hover {border-bottom:1px solid #38fdff;}
.allNav_wrap .gnb_in .dep2>li {margin-bottom:8px; padding-left:10px; font-size:16px; background:url(/uljujm/images/layout/bul_round_w.png) no-repeat 0 10px;}
.allNav_wrap .gnb_in .dep3 {padding-top:10px;}
.allNav_wrap .gnb_in .dep3>li {margin-bottom:5px; padding-left:13px; font-size:14px; background:url(/uljujm/images/layout/dash_s.jpg) no-repeat 0 10px;}
.allNav_wrap .gnb_in .dep3>li>a {color:#9cbadc;}
.allNav_wrap .gnb_in .dep3>li>a:hover {color:#38bdff;}

/* 모바일 서치 */
.allNav_wrap .m_search {display:none;}


/* 울주군청 사이트 바로가기 */
.link_ulju {position:fixed; bottom:30px; left:20px; width:200px; background:#009e4e;}
.link_ulju i {display:inline-block; width:18px; height:18px; margin-right:8px; background:url(/uljujm/images/layout/link_ulju_site.png) no-repeat 0 center; vertical-align:sub;}
.link_ulju a {display:block; padding:0 20px; height:45px; line-height:45px; color:#fff; font-weight:300; font-size:14px; text-align:center;}
.link_ulju:hover {background:#006a34;}

/* footer */
footer {padding:50px 0 30px; background:#292e3e; color:#ddd; font-weight:300;}
footer .fnb,
footer address {opacity:.8;}
footer .fnb a {color:#fff;}
footer .fnb a::after {display:inline-block; content:"|"; margin:0 10px; color:#fff;}
footer .fnb a:last-child::after {content:"";}
footer .fnb a:hover {color:#fbf6bb;}
footer .fnb a.privacy {color:#38fdff; font-weight:400;}
footer .fnb a:hover.privacy {color:#fffd38;}
footer address span {display:inline-block; margin-right:30px; line-height:2;}
footer address small {display:block;}
footer address p {margin-top:20px; color:#fbf6bb;}

/* btn_go_top */
#gotop {z-index:888; position:fixed; width:40px; height:40px; border-radius:50%; bottom:100px; right:40px; opacity:0; background:url(/uljujm/images/layout/sub_select_up.png) no-repeat 50% #fff; border:1px solid #ddd; cursor:pointer;}

/* 관련기관 */
.site_wrap {background:#14171f;}
.site_wrap>a {display:block; padding:12px 40px 12px 20px; color:rgba(255,255,255,.4); background-repeat:no-repeat; background-position:90% center; background-image:url(/uljujm/images/layout/icon_siteLink.png);}
.site_wrap>a.on,
.site_wrap>a:hover,
.site_wrap>a:focus {color:#38fdff; background-image:url(/uljujm/images/layout/icon_siteLink_on.png);}
.site_wrap>a>span {display:inline-block; text-indent:-9999px;}
.site_wrap>ul {display:none; position:absolute; bottom:41px; background:#fff; width:100%; z-index:100; overflow:auto; margin-left:-1px; border:1px solid #ddd; border-bottom:0;}
.site_wrap>ul>li {border-bottom:1px solid #ddd; padding:8px 0;}
.site_wrap>ul>li> a {display:block; padding-left:20px; color:#666; font-size:14px; font-weight:400;}
.site_wrap>ul>li> a:hover{color:#3a7eff;}


/* 서브 상단 배경 */
.sub_bgTop {width:100%; height:290px; background-position:bottom; background-repeat:no-repeat;}
.sub_bgTop .sub_tit {padding-top:130px; color:#fff;}
.sub_bgTop .sub_tit>h3 {font-size:42px; font-weight:500;}
.sub_bgTop .sub_tit>p {margin-top:10px; font-size:16px; font-weight:300;}

.sub_bgTop {background-image:url(/uljujm/images/layout/bg_subTop.jpg);}


/**** LNB ****/
.lnb {position:absolute; top:260px; width:calc(100% - 250px); z-index:100;}
.lnb .container {background:#fff; border:1px solid #ddd;}
.lnb .container>* {position:relative; float:left; height:60px;}
.lnb .container div>p {cursor:pointer; color:#000;}
.lnb .container .home {width:60px; background:url(/uljujm/images/layout/sub_home.png) no-repeat center #292e3e; text-indent:-9999px;}
.lnb .container .onmenu {
	display:block; height:60px; padding:18px 70px 18px 20px; font-size:16px; font-weight:400; color:#333;
	background:url(/uljujm/images/layout/sub_select.png) no-repeat 90% center; border:1px solid #ddd; border-top:0; border-bottom:0;
}
.lnb .container .dep2 .onmenu {background-position:93% center;}
.lnb .container .dep1 {min-width:210px;}
.lnb .container .dep2 {min-width:260px; margin-left:-1px;}
.lnb .container>.dep3 {margin-left:-1px;}
.lnb .container ul {display:none; width:100%; padding:0; margin:0;}
.lnb .container ul li a {display:block; padding:10px 15px; border:1px solid rgba(0,0,0,.1); border-bottom:0; background:#fff; font-weight:400; font-size:14px; color:#666;}
.lnb .container ul li:last-child a {border:1px solid rgba(0,0,0,.1);}
.lnb .container ul li a:hover {color:#000; background-color:#f8f8f8;}
.lnb .container ul li.on a {color:#fff; background-color:#404e93; border-color:transparent;}
.lnb .container div .lastDep {color:#404e93; border-bottom:2px solid #404e93;}
.lnb .container div:hover p {color:#404e93;}
.lnb .container div.on .onmenu {background:url(/uljujm/images/layout/sub_select_up.png) no-repeat 90% center;}

.lnb.fixOn {position:fixed !important; z-index:101 !important; width:calc(100% - 250px); top:0 !important; margin-top:0; background:#fff; box-shadow:0 5px 10px rgba(0,0,0,.1);}

/*** 서브퀵메뉴 ***/
.sub_quick {position:absolute; top:50%; right:0; transform:translate(0,-50%); text-align:center; letter-spacing:-1px; background:#fff; z-index:101; box-shadow:-5px 5px 10px rgba(0,0,0,.2);}
.sub_quick ul {position:relative; display:block;}
.sub_quick ul li {display:block; padding:20px 8px; -webkit-filter: grayscale(100%); filter: gray; background-position:right bottom; background-repeat:no-repeat;}
.sub_quick ul li:hover {-webkit-filter: grayscale(0%); filter: none;}
.sub_quick ul li a {display:block; color:#fff; font-weight:300;}
.sub_quick ul li i {display:inline-block; width:30px; height:30px; margin-bottom:3px; background-size:30px; background-repeat:no-repeat; background-position:center;}
.sub_quick ul li a i.sb_quick_map {background-image:url(/uljujm/images/layout/sb_quick_map.png);}
.sub_quick ul li a i.sb_quick_dic {background-image:url(/uljujm/images/layout/sb_quick_dic.png);}
.sub_quick ul li a i.sb_quick_story {background-image:url(/uljujm/images/layout/sb_quick_story.png);}
.sub_quick ul li a i.sb_quick_guide {background-image:url(/uljujm/images/layout/sb_quick_guide.png);}
.sub_quick ul li a i.sb_quick_mystory {background-image:url(/uljujm/images/layout/sb_quick_mystory.png);}
.sub_quick ul li a i.sb_quick_view {background-image:url(/uljujm/images/layout/sb_quick_view.png);}
.sub_quick ul li a p {line-height:1.2;}

.sub_quick ul li:nth-child(1) {background-image:url(/uljujm/images/layout/bg_sb_quick_map.jpg);}
.sub_quick ul li:nth-child(2) {background-image:url(/uljujm/images/layout/bg_sb_quick_dic.jpg);}
.sub_quick ul li:nth-child(3) {background-image:url(/uljujm/images/layout/bg_sb_quick_story.jpg);}
.sub_quick ul li:nth-child(4) {background-image:url(/uljujm/images/layout/bg_sb_quick_guide.jpg);}
.sub_quick ul li:nth-child(5) {background-image:url(/uljujm/images/layout/bg_sb_quick_mystory.jpg);}
.sub_quick ul li:nth-child(6) {background-image:url(/uljujm/images/layout/bg_sb_quick_view.jpg);}

/* *** 컨텐츠 *** */
#content_wrap.sub {padding-top:100px; padding-bottom:50px; border-bottom:1px solid #eee;}


/* ************************ 서브퀵메뉴 중간분기 ************************ */
@media screen and (max-width: 1599px) and (min-width: 1200px) {

	/* *** 컨텐츠 *** */
	#content_wrap.sub .container {width:calc(100% - 180px); margin-left:50px;}
}




/* ************************ 태블릿 이하(~1199) ************************ */
@media screen and (max-width: 1199px) {
	header {float:none; position:fixed; width:100%; height:73px;}
	.head {padding:12px;}
	.head h1 {display:inline-block;}

	.layout_right {width:100%;}

	/* 우측 전체메뉴 토글 */
	.gnbCover {display:none; z-index:99; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5);}
	#allNav {top:0; right:0;}
	.allNav_wrap {width:90%;}
	.toggle_box {width:73px; height:73px; background:#1b1464;}
	.toggle {width:80%;}

	.allNav_wrap {padding:0; background:#fff; overflow-y:scroll;}
	.allNav_wrap h1 {margin:0; background:#1b1464; height:73px; text-indent:-9999px;}
	.allNav_wrap .container {width:100%;}
	.allNav_wrap .gnb_in a {color:#333; font-size:14px; font-weight:400;}
	.allNav_wrap .gnb_in a:hover {color:#1b1464;}
	.allNav_wrap .gnb_in>li {float:none; width:100%;}
	.allNav_wrap .gnb_in>li>a {width:100%; margin-bottom:0; padding:12px 20px; font-size:16px; border-bottom:1px solid #eee; border-top:0; margin:0;}
	.allNav_wrap .gnb_in>li>a:hover {border-bottom:1px solid #eee;}
	.allNav_wrap .gnb_in .dep2,
	.allNav_wrap .gnb_in .dep3 {display:none;}
	.allNav_wrap .gnb_in .dep2>li {margin-bottom:0; padding-left:0;}
	.allNav_wrap .gnb_in .dep2>li>a {display:block; padding:10px 30px; background:#f9f9f9; color:#555; border-bottom:1px solid #e6e6e6;}
	.allNav_wrap .gnb_in .dep3 {padding:10px 0;}
	.allNav_wrap .gnb_in .dep3>li {margin-bottom:0; padding-left:40px; background:url(/uljujm/images/layout/dash_s.jpg) no-repeat 30px 12px;}

	/* 모바일 서치 */
	.head .search_wrap {display:none;}
	.allNav_wrap .m_search {display:block; width:95%; margin:10px auto;}
	.allNav_wrap .search_wrap {margin:0;}

	/* 서브 상단 배경 */
	.sub_bgTop {margin-bottom:70px;}
	.sub_bgTop .sub_tit {padding-top:150px;}

	/* *** 컨텐츠 *** */
	#content_wrap.sub {padding-top:0;}

	/* 울주군청 바로가기 */
	.link_ulju a {display:none;}

}


/* ************************ 모바일 (0~767) ************************ */
@media screen and (max-width: 767px) {

	/* 우측 전체메뉴 토글 */
	.allNav_wrap .container {padding:0;}
	.allNav_wrap .m_search {width:90%;}

	/* 관련기관 */
	.site_wrap {margin-top:20px;}

	/* 서브 상단 배경 */
	.sub_bgTop {height:170px; margin-bottom:30px;}
	.sub_bgTop .sub_tit {padding-top:105px;}
	.sub_bgTop .sub_tit>h3 {font-size:28px;}
	.sub_bgTop .sub_tit>p {margin-top:5px;}

	address span a {color:#fff;}

}