@charset "utf-8";

body { background:#e7e7e7; }
.wrap { width:100%; background:#fff; }
#top { position:relative; height:170px; border-bottom:1px solid #0089d1; z-index:100; }
#top .skipnav { position:absolute; top:0; left:0; display:block; height:1px; overflow:hidden; z-index:9999; }
#top .skipnav:hover, #top .skipnav:focus, #top .skipnav:active {width:auto; height:auto; color:#333; font-weight:bold;}


#top .guidance_service { position:absolute; left:115px; top:17px; width:85px; height:12px; font-weight:600;}

#top #search form { position:relative; border:4px solid #0089d0 }
#top #search .submit { position:absolute; right:-4px; top:-4px; }
#top #search .top_search { float:left; width:23%; }
#top #search .top_search p { padding:0px 20px; line-height:36px; height:36px; font-size:14px; font-weight:600; background:url(/open_content/main/images/search_bar.gif) no-repeat; background-position:right center; }
#top #search .top_search label { padding:0px 20px; line-height:36px; height:36px; font-size:14px; font-weight:600; background:url(/open_content/main/images/search_bar.gif) no-repeat; background-position:right center; }
#top #search .top_search ul { clear:both; position:absolute; padding-bottom:7px; left:-4px; top:36px; background:#fff; border:4px solid #0089d0; border-top:none; z-index:999; }
#top #search .top_search ul li { padding:1px 25px 1px 15px; font-size:14px; font-weight:600; }
#top #search p.search_txt { float:left; margin-left:2%; width:62%; /*background:#ff00cc;*/ }
#top #search p.search_txt input { width:100%; font-size:14px; border:none; height:34px; line-height:34px; ime-mode:active; }

#footer { position:relative; padding-bottom:15px; background:#f4f4f4; }
#footer div.footer_link { position:relative; margin-bottom:10px; padding:20px 40px; font-size:14px; border-top:1px solid #dadada; border-bottom:1px solid #dadada; background:#eee; }
#footer div.footer_link > ul:after { display:block; content:""; clear:both;}
#footer div.footer_link > ul li { float:left; padding:0 7px; background:url('/open_content/main/images/bar.gif') no-repeat left 4px; }
#footer div.footer_link > ul li:first-child { padding-left:0; background:none; }
#footer div.footer_link > ul li.pim a { font-weight:bold; color:#186dcd; }
#footer div.footer_link .relation_select { position:absolute; right:47px; top:10px; width:195px; border:1px solid #eaeaea; background:#fff; }
#footer div.footer_link .relation_select h3 { padding:12px; }
#footer div.footer_link .relation_select h3 a { width:168px; height:12px; background:url('/open_content/main/images/relation_select.gif') no-repeat; }
#footer div.footer_link .relation_select div { display:none; position:absolute; bottom:-1px; left:-1px; width:195px; border:1px solid #eaeaea; background:#fff; }
#footer div.footer_link .relation_select div ul { padding:12px; }
#footer div.footer_link .relation_select div > a { display:block; text-align:center; padding:9px 0; border-top:1px solid #eaeaea; }

#footer div.footer_con { position:relative; padding:30px 20px; }
#footer div.footer_con>img.logo { position:absolute; top:20px; left:40px; }
#footer address, #footer div.footer_con > p { padding-left:145px; }
#footer div.footer_con .webmark { position:absolute; top:19px; right:362px; }
#footer div.footer_con .webmark > li { display:inline; vertical-align:middle; margin-left:13px; }
#footer div.footer_con .webmark > li img { vertical-align:middle; }
#footer div.footer_con .seoul_ad { position:absolute; top:0; right:47px; }

#footer .newsletter_btn {display:inline-block; margin-top:20px; padding:8px 20px; color:#fff; font-size:15px; border-radius:17px; background:#555;}

/*서울소식*/
#top #seoul-common-gnb #seoul-gnb-plugin { border-bottom:1px solid #afafaf; background:#f4f4f4; }
#top #seoul-common-gnb .seoul-gnb-holder { max-width:none; padding:0 40px; }
#top #seoul-common-gnb #seoul-gnb-plugin .seoul-gnb-menu { right:35px; }

#top .popular {position:absolute; top:70px; left:885px; padding:4px 13px 4px 10px; border-radius:0 20px 20px 0; background:#0069b0; box-shadow:inset 3px 0 2px rgba(0,92,139,0.2);}
#top .popular li {margin:0;}
#top .popular li a {color:#fff; font-size:12px; font-weight:700;}

/* .view_contents img {display:none !important;} */

/*1024*768*/
@media all and (min-width:1025px) { 
/*
.wrap { max-width:1280px; margin:0 auto; overflow:hidden; }
#top h1 .mblogo { display:none; }
*/
}

/*PC*/
@media all and (min-width:801px) { 
.wrap {width:1280px; margin:0 auto; overflow:hidden; box-shadow:5px 0 10px 0 #dedede; }
#top h1 { position:absolute; left:40px; top:81px; }
#top h1 .mblogo { display:none; }
#top #search { position:absolute; left:50%; top:70px; margin-left:-268px; width:430px;  }
#top #search .submit { right:-87px }
#top #gnb { position:absolute; right:40px; top:67px; }
#top #gnb li { float:left; }
#top #gnb li a { display:block; height:18px; font-weight:700; padding:0 7px; background:url('/open_content/main/images/main/sp.gif') no-repeat right 8px; }
#top #gnb li.eng a { background:none; }
/*#top #gnb li a { display:block; height:12px; text-indent:100%; white-space:nowrap; overflow:hidden; font-size:0; background:url('/open_content/main/images/gnb.gif') no-repeat; }
#top #gnb li.mypage a { width:60px; background-position:0px 0; }
#top #gnb li.logout a { width:55px; background-position:-60px 0; }
#top #gnb li.login a { width:40px; background-position:-120px 0; }
#top #gnb li.join a { width:55px; background-position:-160px 0; }
#top #gnb li.eng a { width:57px; background-position:-215px 0; }
#top #gnb li.sitemap a { width:50px; background-position:-280px 0; }*/
#top #nav>ul { /* overflow:hidden; padding-top:75px; margin-left:330px;  */ position:absolute; top:120px; left:330px;}
#top #nav>ul:after {display:block; content:""; clear:both;}
#top #nav>ul>li { float:left; margin-left:40px; }
#top #nav>ul>li>a>span { display:block; width:73px; height:31px; text-indent:100%; white-space:nowrap; overflow:hidden; background:url('/open_content/main/images/nav.gif') no-repeat; }
#top #nav .menu2>a>span{ background-position:-100px 0; }
#top #nav .menu3>a>span { background-position:-200px 0; }
#top #nav .menu4>a>span { background-position:-300px 0; }
#top #nav .menu5>a>span { background-position:-400px 0; }
#top #nav .menu6>a>span { background-position:-500px 0; }
#top #nav .menu7>a>span { /* width:148px;  */background-position:-600px 0; }
#top #nav .menu8>a>span { background-position:0px -70px; }
#top #nav>ul>li>a { display:block; padding-bottom:14px; }
#top #nav>ul>li>a:hover, #top #nav>ul>li>a:active { border-bottom:6px solid #0075b2; }
#top #nav>ul>li.menu1>a:hover, #top #nav>ul>li.menu1>a:active { border-bottom:6px solid #3565c7; }
#top #nav>ul>li.menu2>a:hover, #top #nav>ul>li.menu2>a:active { border-bottom:6px solid #6755a4; }
#top #nav>ul>li.menu3>a:hover, #top #nav>ul>li.menu3>a:active { border-bottom:6px solid #377a46; }
#top #nav>ul>li.menu4>a:hover, #top #nav>ul>li.menu4>a:active { border-bottom:6px solid #149a91; }
#top #nav>ul>li.menu8>a:hover, #top #nav>ul>li.menu8>a:active { border-bottom:6px solid #377a46; }
#top #nav .menu1>a:hover>span, #top #nav .menu1>a:active>span { background-position:0 -31px; }
#top #nav .menu2>a:hover>span, #top #nav .menu2>a:active>span { background-position:-100px -31px; }
#top #nav .menu3>a:hover>span, #top #nav .menu3>a:active>span { background-position:-200px -31px; }
#top #nav .menu4>a:hover>span, #top #nav .menu4>a:active>span { background-position:-300px -31px; }
#top #nav .menu5>a:hover>span, #top #nav .menu5>a:active>span { background-position:-400px -31px; }
#top #nav .menu6>a:hover>span, #top #nav .menu6>a:active>span { background-position:-500px -31px; }
#top #nav .menu7>a:hover>span, #top #nav .menu7>a:active>span { background-position:-600px -31px; }
#top #nav .submenu { display:none; position:absolute; left:-330px; top:50px; right:-46px; background:#0075b2 url('/open_content/main/images/subnav_bg.png') no-repeat 105% bottom; }
#top #nav #submenu1 { background:#3565c7 url('/open_content/main/images/subnav_bg.png') no-repeat 105% bottom; }
#top #nav #submenu2 { background:#6755a4 url('/open_content/main/images/subnav_bg.png') no-repeat 105% bottom; }
#top #nav #submenu3 { background:#377a46 url('/open_content/main/images/subnav_bg.png') no-repeat 105% bottom; }
#top #nav #submenu4 { background:#149a91 url('/open_content/main/images/subnav_bg.png') no-repeat 105% bottom; }
#top #nav #submenu8 { background:#377a46 url('/open_content/main/images/subnav_bg.png') no-repeat 105% bottom; }
#top #nav .submenu ul { padding:20px 0 30px;  text-align:center; }
#top #nav .submenu ul li { display:inline-block; width:105px; margin-left:40px; }
#top #nav .submenu#submenu5 ul li {margin-left:20px;}
#top #nav .submenu#submenu6 ul li {margin-left:3px;}
#top #nav .submenu a { display:block; text-indent:100%; white-space:nowrap; overflow:hidden; width:105px; height:100px; }
#top #nav #submenu1 a { background:url('/open_content/main/images/submenu1.gif') no-repeat; }
#top #nav #submenu2 a { background:url('/open_content/main/images/submenu2.gif') no-repeat; }
#top #nav #submenu3 a { background:url('/open_content/main/images/submenu3.gif') no-repeat; }
#top #nav #submenu4 a { background:url('/open_content/main/images/submenu4.gif') no-repeat; }
#top #nav #submenu5 a { background:url('/open_content/main/images/submenu5.gif?v3') no-repeat; }
#top #nav #submenu6 a { background:url('/open_content/main/images/submenu6.gif?v4') no-repeat; }
#top #nav #submenu7 a { background:url('/open_content/main/images/submenu7.gif?v3') no-repeat; }
#top #nav #submenu8 a { background:url('/open_content/main/images/submenu3.gif') no-repeat; }

#top #nav .submenu#submenu4 a { width:150px; text-indent:200%; }

#top #nav .submenu .sm1 a { background-position:0 0 !important; }
#top #nav .submenu .sm2 a { background-position:0 -100px !important; }
#top #nav .submenu .sm3 a { background-position:0 -200px !important; }
#top #nav .submenu .sm4 a { background-position:0 -300px !important; }
#top #nav .submenu .sm5 a { background-position:0 -400px !important; }
#top #nav .submenu .sm6 a { background-position:0 -500px !important; }
#top #nav .submenu .sm7 a { background-position:0 -600px !important; }
#top #nav .submenu .sm8 a { background-position:0 -700px !important; }
#top #nav .submenu .sm9 a { background-position:0 -800px !important; }
#top #nav .submenu .sm10 a { background-position:0 -900px !important; }
#top #nav .submenu .sm11 a { background-position:0 -1000px !important; }
#top #nav .submenu .sm12 a { background-position:0 -1100px !important; }
#top #nav .submenu .sm13 a { background-position:0 -1200px !important; }
#top #nav #submenu5>ul>li:first-child { margin-left:0; }
}


/*1024x768이하*/
@media all and (max-width:1025px) { 
/*
#top h1 .pclogo { display:none; }
#top #nav>ul { margin-left:200px; }
#top #nav>ul>li { margin-left:25px; }
#top #nav .submenu ul li { margin-left:20px; }
#top .popular {display:none;}

#footer div.footer_link { padding-right:225px; }
#footer div.footer_con .webmark { position:static; text-align:right; margin-top:50px; }
*/
}

/*TABLET*/
@media all and (max-width:800px) { 
/*max-width:1025px under css copy*/
#top h1 .pclogo { display:none; }
#top #nav>ul { margin-left:200px; }
#top #nav>ul>li { margin-left:25px; }
#top #nav .submenu ul li { margin-left:20px; }
#top .popular {display:none;}
#footer div.footer_link { padding-right:225px; }
#footer div.footer_con .webmark { position:static; text-align:right; margin-top:50px; }

/**/
#top { height:80px; border-bottom:0; }
#top h1 {text-align:center; }
#top #search div, #top #nav>ul, #top .skipnav, #top .guidance_service, #top #gnb, #footer>img, #footer>ul, /*#footer address,*/ #footer .relation_select, #footer .copy_seoul, #footer .wa { display:none; }
#top #search div { position:absolute; left:0; top:109px; padding:20px 0; width:100%; border-top:1px solid #dbdbdb; border-bottom:1px solid #dbdbdb; background:#fff; }
#top #search form { width:90%; margin:0 auto; }
#top #search h2 a { position:absolute; right:0; top:55px; display:block; text-indent:100%; white-space:nowrap; overflow:hidden; width:68px; height:55px; background:url('/open_content/main/images/search_toggle.gif') no-repeat; }
#top #nav h2 a { position:absolute; left:0; top:55px; display:block; text-indent:100%; white-space:nowrap; overflow:hidden; width:65px; height:55px; background:url('/open_content/main/images/nav_toggle.gif') no-repeat; }
#top #nav>ul { margin-top:10px; margin-left:0; }
#top #nav>ul>li { margin-left:0; border-bottom:1px solid #f4f4f4; background:#008ad2; }
#top #nav>ul>li>a { display:block; padding:15px 20px; font-size:14px; color:#fff; font-weight:600; }
#top #nav .submenu { padding:20px; background:#f4f4f4; }
#top #nav .submenu li { padding-left:8px; margin-bottom:5px; background:url('/open_content/main/images/dotblet.gif') no-repeat left 8px; }
#top #nav .submenu li a[target=_blank] { padding-right:20px; background:url('/open_content/main/images/icon_window.gif') no-repeat right top; }


#footer div.footer_link { /* display:none; */ padding:20px;}
#footer div.footer_link > ul {text-align:center; font-size:0;}
#footer div.footer_link > ul li {float:none; display:inline-block; margin:2px; padding:0; margin-left:7px; padding-right:10px; background:url('/open_content/main/images/bar.gif') no-repeat right 4px;}
#footer div.footer_link > ul li:first-child {background:url('/open_content/main/images/bar.gif') no-repeat right 4px;}
#footer div.footer_link > ul li:last-child {background:none;}
#footer div.footer_link > ul li a {font-size:14px;}

#footer div.footer_con { padding:10px 10px 30px; }
#footer div.footer_con > img.logo { display:none; }
#footer div.footer_con .webmark { display:none; }
#footer address, #footer div.footer_con > p { padding-left:0; text-align:center; }
#footer div.footer_con .seoul_ad { position:static; margin-top:10px; }
#footer div.footer_con .seoul_ad img { width:100%; height:auto; }
}

/*focus ring style*/
*:focus-visible{outline:2px dashed #4f37ff; box-shadow:-4px -4px 0 #fff, 4px 4px 0 #fff, -4px 4px 0 #ffff, 4px -4px 0 #fff, 0 -4px 0 #fff, 0 4px 0 #fff, 4px 0 0 #fff, -4px 0 0 #fff; z-index:999999999;}
input[type=text]:focus-visible,
textarea:focus-visible{outline:2px solid #e63f76;}