@charset "utf-8";

body {font-size:16px;margin:0;padding:0;font-family: SCDream, "에스코어드림", Dotum, "돋움", sans-serif;color:#444;font-weight:400;}
input, select, button{font-family: SCDream, "에스코어드림", Dotum, "돋움", sans-serif;font-size: 16px;}

#skip{top:0;right:0;position:absolute;width:100%;height:15px;text-align:center}
#skip li a{display:block;left:-10000px;position:absolute;top:0;width:100%;text-align:center;z-index:0;height:1px}
#skip li a:hover, #skip li a:focus, #skip li a:active {background:#363636;position:absolute;top:0px;left:0;z-index:5;color:#fff;width:100%;height:25px;padding:5px 0 0 0}

.blind{display:block;overflow:hidden;position:absolute;top:0;left:-5000px;font-size:1.8em}
.hide{display:none !important;margin:0;padding:0}

.new_win{display: inline-block;width: 9px;height: 0;padding:9px 0 0;margin-left: 4px;overflow: hidden;background: url("/images/new_mayor/main/new_win.gif") no-repeat;vertical-align: baseline;}

header{position: relative;height: 70px;}
header h1{padding: 18px 0 0 20px;}
header h1 a{display: block;height: 33px;line-height: 38px;padding-left: 52px;background: url("/images/new_mayor/main/logo.png") no-repeat;font-family: GmarketSans;font-size: 18px;font-weight: 400;color: #333;vertical-align: middle;}
header h1 a strong{vertical-align: baseline;}
.gnb{position: absolute;top: 15px;right: 50px;}
.gnb ul{overflow: hidden;}
.gnb li{float: left;}
.gnb li a{display: block;width: 40px;height: 0;padding: 40px 0 0;overflow: hidden;background: url("/images/new_mayor/main/main_ico.png") no-repeat center 0;}
.gnb .allmenu{display: none;}
.gnb .allmenu a{background-position: center -40px;}
.head>button{display: block;position: absolute;top: 15px;right: 10px;width: 40px;height: 0;padding:40px 0 0;overflow: hidden;background: url("/images/new_mayor/main/main_ico.png") no-repeat center -40px;}
.menu{display: none;position: fixed;top: 0;bottom: 0;left: 0;right: 0;background: #fff;z-index: 99;}
.menu.on{display: block;}
.menu h2{padding: 17px 20px;font-family: GmarketSans;font-size: 20px;color: #fff;background: #2276dd;}
.menu>ul>li>a{display: block;position: relative;padding: 17px 20px;font-family: GmarketSans;font-size: 20px;color: #1763c0;}
.menu>ul>li>a:after{display: block;position: absolute;top: 20px;right: 20px;width: 20px;height: 20px;content: "";background: url("/images/new_mayor/main/main_ico.png") no-repeat center -160px;}
.depth_box{padding: 0 20px 20px;background: #e5f0f7;}
.depth_boxcon>ul>li>a{display: block;padding: 14px 0;color: #333;}
.depth_boxcon li ul{padding: 20px;background: #fff;}
.depth_boxcon li li a{position: relative;padding-left: 10px;font-size: 14px;color: #444;}
.depth_boxcon li li a:after{display: block;position: absolute;top: 8px;left: 0;width: 6px;height: 6px;border-radius: 100%;background: #2276dd;content: "";}
.menu button{display: block;position: absolute;top: 0;right: 0;width: 60px;height: 0;padding: 60px 0 0;background: url("/images/new_mayor/main/main_ico.png") no-repeat center -80px;overflow: hidden;}

footer{position: relative;background: #464646;}
footer ul{padding: 20px;background: #383838;}
footer li{margin: 4px 0;}
footer li a{display: block;font-size: 16px;color: #fff;}
footer li a strong{color: #7cb7ff;font-weight: 500;}
footer li a:hover, footer li a:focus{text-decoration: underline;}
footer div{padding: 20px 20px 40px; color: #e4e4e4;}
footer div address{font-style: normal;margin-bottom: 20px;}
footer .top{position: absolute;top: -40px;right: 20px;width: 80px;}
footer .top a{display: block;padding: 42px 0 20px;background: url("/images/new_mayor/main/main_ico.png") no-repeat center -745px #2276dd;text-align: center;color: #fff;font-family: GmarketSans;font-size: 14px;font-weight: 600;border-radius: 100%;}
footer .top a:hover, footer .top a:focus{background-color: #009da3;}

.s_title{position: relative;padding: 30px 20px 90px;background: #f0f7f8;}
.s_title h3{margin: 0 0 10px 0;font-family: GmarketSans;font-size: 28px;font-weight: normal;color: #333;text-align: center;}
.local ul{font-size: 0;text-align: center;}
.local li{display: inline-block;}
.local li:after{display: inline-block;content: "";width: 1px;height: 10px;margin: 7px 14px;background: #cfdce4;vertical-align: top;}
.local li:last-child:after{display:none}
.local li a{font-size: 16px;color: #555;}
.local li:first-child a{display: inline-block;width: 12px;height: 0;padding: 12px 0 0;margin-top: 4px;overflow: hidden;background: url("/images/new_mayor/sub/sub_ico.png") no-repeat -14px -14px;}
.local li:last-child a{color: #1763c0;}
.stit_sns{position: absolute;bottom: 30px;right: 20px;}
.stit_sns ul{float: left;}
.stit_sns li{float: left;margin: 0 0 0 5px;}
.stit_sns li a{display: block;width: 40px;height: 0;padding: 40px 0 0;overflow: hidden;background: url("/images/new_mayor/sub/sub_ico.png") no-repeat #fff;border-radius: 100%;}
.stit_sns li.face a{background-position: center -80px;}
.stit_sns li.twi a{background-position: center -120px;}
.stit_sns button{width: 40px;height: 0;padding: 40px 0 0;margin: 0 0 0 5px;overflow: hidden;background: url("/images/new_mayor/sub/sub_ico.png") no-repeat center -40px #fff;border-radius: 100%;}
.s_left{display: none;}
.s_con{padding: 50px 20px;}
.scon_bottom{padding: 0 20px 60px;}
.license{margin: 20px 0;padding: 20px;text-align: center;border: 1px solid #ddd;word-break: keep-all;}
.license em{font-style: normal;font-weight: 600;}
.license strong{color: #1763c0;}
.research{padding: 20px;border: 1px solid #ddd;border-bottom: none;}
.research span{display: block;font-weight: 600;margin: 0 0 20px 0;}
.research input{vertical-align: middle;}
.research label{margin: 0 20px 0 0;vertical-align: middle;}
.research input[type=submit]{width: 100%;height: 40px;color: #fff;background: #1763c0;margin: 10px 0 0;}
.manager{padding: 20px;border: 1px solid #ddd;background: #f7f9fa;}
.manager p{margin: 10px 0 0;}

.s_title .local{display: none;}
.s_top{border-bottom: 1px solid #e5f0f7;background: #fff;z-index: 9;}
.s_top.fix{position: fixed;top: 0;width: 100%;}
.s_top>ul:after{display: block;clear: both;content: "";}
.s_top>ul>li{position: relative;float: left;width: calc((100% - 45px)/2);}
.s_top>ul>li button{display: block;width: 100%;height: 45px;padding: 0 24px 0 8px;text-align: left;background: #fff;border-right: 1px solid #e5f0f7;color: #333;}
.s_top>ul>li button:hover, .s_top>ul>li button:focus, .s_top>ul>li.on button{color: #2276dd;}
.s_top>ul>li button:after{display: block;position: absolute;top: 17px;right: 10px;width: 8px;height: 8px;content: "";border-left: 1px solid #009da3;border-bottom: 1px solid #009da3;transform: rotate(-45deg);}
.s_top>ul>li.on button:after{transform: rotate(135deg);top: 23px;}
.s_top li.home{width: auto;}
.s_top li.home a{display: block;width: 45px;height: 0;padding: 45px 0 0 0;overflow: hidden;background: url("/images/new_mayor/sub/home.png") no-repeat center center #2276dd;}
.s_top li ul{display: none;position: absolute;width: 100%;background: #f7f9fa;box-shadow: 0 5px 10px rgb(0,0,0,.1);z-index:9;}
.s_top li.on ul{display: block;}
.s_top li li{border-top: 1px solid #e5f0f7;}
.s_top li li a{display: block;padding: 10px;font-size: 15px;box-sizing: border-box;color: #444;}
.s_top li li a:hover, .s_top li li a:focus{text-decoration: underline;color: #1763c0;}
.s_top li li.on a{background: #2276dd;color: #fff;}


/* Tablet */
@media all and (min-width:768px) {
footer ul{overflow: hidden;}
footer li{float: left;margin: 0 20px 0 0;}

.s_title{padding: 50px 20px 90px;}
.s_title h3{font-size: 36px;}
.license{padding: 30px;margin: 20px 0 10px;overflow: hidden;text-align: left;}
.license span{float: left;width: 230px;}
.license p{float: left;width: calc(100% - 230px);margin: 0;}
.research{padding: 30px;}
.research input[type=submit]{width: 100px;height: 30px;margin: 0;}
.manager{padding: 20px 30px;}
.manager ul{overflow: hidden;}
.manager li{float: left;margin: 0 20px 0 0;}
	
.s_top>ul>li{width: auto;min-width: 200px}
.s_top li.home{min-width: auto;}
}

/* Desktop */
@media all and (min-width:1023px) {
header{height: 140px;box-sizing: border-box;}
header h1{padding: 35px 0 35px 20px;}
header h1 a{font-size: 20px;}
.gnb{top: 30px;right: 0;}
.gnb .allmenu{display: block;}
.head>button{display: none;}
.menu{display: block;background: none;position: static;}
.menu h2{position: absolute;top: -9999px;left: -9999px;}
.menu>ul{text-align: center;}
.menu>ul>li{display: inline-block;position: relative;}
.menu>ul>li>a{padding: 0 20px;line-height: 30px;color: #333;}
.menu>ul>li>a:hover, .menu>ul>li>a:focus{color: #2276dd;}
.menu>ul>li>a:after{display: none;}
.depth_box{position: absolute;left: 50%;transform: translateX(-50%);width: 160px;padding: 12px;text-align: left;z-index: 9;box-shadow: 0 5px 10px rgba(0,0,0,.1);}
.depth_box a:hover, .depth_box a:focus{text-decoration: underline;}
.depth_boxcon>ul>li>a{padding: 0 0 10px;}
.depth_boxcon li ul{padding: 12px;}

footer .top{top: 20px;}

.sub_container{background: url("/images/new_mayor/sub/sub_bg.png") repeat-x center top;}
.s_content{margin: 0 0 40px;}
.s_content:after{display: block;clear: both;content: "";}
.s_title{padding: 50px 0 70px;margin: 0 0 40px;background: none;}
.s_left{display: block;float: left;width: 260px;}
.s_left p{height: 100px;padding: 60px 0 0;font-family: GmarketSans;font-size: 30px;font-weight: 400;color: #fff;background: #0e85d9;text-align: center;}
.s_left>ul>li{border-bottom: 1px solid #ddd;}
.s_left>ul>li>a{display: block;position: relative;padding: 15px 50px 15px 20px;font-size: 18px;}
.s_left>ul>li>a:after{display: block;position: absolute;top: 50%;right: 20px;width: 20px;height: 20px;content: "";background: url("/images/new_mayor/main/main_ico.png") no-repeat center -160px;transform: translateY(-50%);}
.s_left>ul>li.on>a{font-weight: 500;color: #1763c0;border-bottom: 1px solid #2276dd;}
.s_left ul ul{display: none; padding: 20px;background: #f7f9fa;}
.s_left ul .on ul{display: block;}
.s_left li li{margin: 10px 0;}
.s_left li li a{position: relative;padding: 0 0 0 15px;font-size: 15px;color: #555;}
.s_left li li a:before{display: block;position: absolute;top: 10px;left: 0;width: 7px;height: 2px;background: #aaa;content: "";}
.s_left li li.on a{color: #000;text-decoration: underline;}
.s_left li li.on a:before{background: #333;}
.s_right{float: right;width: calc(100% - 320px);}
.s_con{padding: 50px 0;}
.scon_bottom{padding: 0;}
.manager{position: relative;}
.manager p{position: absolute;top: 20px;right: 30px;margin: 0;}
	
.s_title{height: 200px;margin-bottom: 0;box-sizing: border-box;}
.s_title .local{display: block;}
.s_top li.home a{width: 50px;padding-top: 50px;}
.s_top>ul>li button{height: 50px;padding: 0 30px 0 12px;}
.s_top>ul>li button:after{top: 20px;right: 16px;}
.s_top>ul>li.on button:after{top: 26px;}
}


@media all and (min-width:1440px) {
header{height: 100px;margin: 0 100px;}
header h1{float: left;padding-left: 0;}
.menu{float: right;padding: 38px 80px 0 0;}
footer ul{padding: 20px 100px;}
footer div{padding: 20px 100px;}
footer .top{right: 100px;}
	
.s_content{width: 1400px;margin: 0 auto 40px;}
.s_top.fix{left: 0;}
.s_top>ul{border-right: 1px solid #e5f0f7;}
.s_top.fix>ul{width: 1400px;margin: 0 auto;}
}