@charset "utf-8";

/* //////////////////////////////////////////////////////////////////////////////

	Common Layout

////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 1400px){
/* layout */
.user .top_btn{right:20px;}	
/* header */
.user #header .tmenu_bx{background-position:right 30% bottom;}
.user #header .tmenu_ti{left:20px;}
}

@media screen and (max-width: 1280px){
/* layout */
.user .layout{padding:0 20px;}
/* header */
.user #header h1{left:20px; margin-left:0;}
/*footer*/
.user #footer .relate_site{right:20px;}
}

@media screen and (max-width: 1240px){
/* header */
.user #header .js_menu ul{padding:0 0 0 430px}
.user #header .js_menu ul li ul{padding:20px 25px;}
.user #header .js_menu ul li a{line-height:26px; font-size:20px;}
.user #header .tmenu_ti{font-size:20px;}
.user #header .tmenu_ti span{font-size:16px;}

/* footer */
.user #footer:after{top:44px;}
.user #footer .menu{padding:7px 0; width:auto; text-align:center;}
.user #footer .menu li{float:none; display:inline-block; margin:0 3%; text-align:center;}
.user #footer .relate_site{position:relative; right:auto; top:auto; margin-top:15px;}
.user #footer .relate_site li{width:32.6%; margin-left:1%;}
.user #footer .relate_site li a{padding:0 5%;}
.user #footer .relate_site li a:after{right:5%;}
.user #footer .relate_site li ul li a{padding:8px 5%;}
.user #footer .info{padding:15px 275px 60px 0;}
.user #footer .info img.ft_logo{display: none;}
.user #footer .certifi_mark{top:0; width:170px; margin:15px auto 0 auto;}
.user #footer .certifi_mark img{height:30px;}
}

@media screen and (min-width: 1024px){
/* layout */
body.fixed{position:relative;}
}

@media screen and (max-width: 1023px){
/* layout */	
.user .top_btn{bottom:25px;}
/* mobile menu */
body.fixed #slide_map{opacity:1; -webkit-opacity:1; right:0;} 
.user #slide_map{display:block; width:100%; height:100%; overflow:hidden; opacity:0; -webkit-opacity:0; position:fixed; right:-100%; top:0; box-sizing:border-box; z-index:951;
transition : all 0.5s ease; -webkit-transition : all 0.5s ease;}
.user #slide_map:before{content:""; display:block; width:280px; height:100%; position:absolute; right:0; top:0; z-index:2; background:#fff;}
.user #slide_map:after{content:""; display:block; width:100%; height:100%; position:absolute; left:0; top:0; z-index:1; background:#000; opacity:0.75; -webkit-opacity:0.75;}
.user #slide_map .inner{width:280px; float:right; box-sizing:border-box; height:100%; position:relative; z-index:10;}
.user #slide_map .inner .binds{overflow:auto; height:100%;}
.user #slide_map .inner .binds .toputil{position:relative;}
.user #slide_map .inner .binds .toputil:after{content:""; display:block; clear:both;}
.user #slide_map .inner .binds .home_btn{display:block; text-align:center; background:#909090; color:#fff; line-height:40px; width:50%; height:40px; float:left;}
.user #slide_map .inner .binds .toputil .join{position:relative; background:#f7f7f7;}
.user #slide_map .inner .binds .toputil .join:after{content:""; display:block; clear:both;}
.user #slide_map .inner .binds .toputil .join li{float:left; position:relative; width:50%;}
.user #slide_map .inner .binds .toputil .join li:first-child:after{content:""; position:absolute; top:50%; right:0; display: block; width:1px; height:16px; margin-top:-8px; background-color:#cecece;}
.user #slide_map .inner .binds .toputil .join li a{height:45px; line-height:45px; background:#f7f7f7; border:0; text-align:center; font-size:13px; font-weight:700; color:#63686e; box-sizing:border-box;}
.user #slide_map .inner .binds .toputil .join li a:before,
.user #slide_map .inner .binds .toputil .join li a:after{display:none;}
.user #slide_map .inner .binds .toputil .join li a:hover{background-color:#cecece;}

.user #slide_map .inner .binds ul{width:100%;}
.user #slide_map .inner .binds ul li a{position:relative; display:block; text-decoration:none; background:#fff; border-top:1px solid #d9d9d9;}
.user #slide_map .inner .binds ul li:first-child a{border-top:0;}
.user #slide_map .inner .binds ul li a:before,
.user #slide_map .inner .binds ul li a:after{content:""; display:block; width:24px; height:24px; box-sizing:border-box; position:absolute; right:20px; top:50%; margin-top:-13px;}
.user #slide_map .inner .binds ul li a:before{z-index:2; background:url(../../images/area/layout/mobile_gnb_depth1_bul.png) no-repeat center 50%;}
.user #slide_map .inner .binds ul li a:after{background:#fff; border:1px solid #dedede; z-index:1;}
.user #slide_map .inner .binds ul li a span{display:block; font-size:17px; line-height:21px; padding:15px 20px 13px 20px; color:#343434; font-weight:700;}

.user #slide_map .inner .binds ul li a.on{background:#009d85; border-top:1px solid #009d85; color:#fff;}
.user #slide_map .inner .binds ul li:first-child a.on{border-top:0;}
.user #slide_map .inner .binds ul li a.on span{color:#fff;}
.user #slide_map .inner .binds ul li a.on:before{background:url(../../images/area/layout/mobile_gnb_depth1_bul_on.png) no-repeat center 50%; transform:rotate(90deg); -webkit-transform:rotate(90deg);}
.user #slide_map .inner .binds ul li a.on:after{background:#007b61; border:1px solid #80bdb0;}

.user #slide_map .inner .binds ul li ul{display: none; background:#efefef;}
.user #slide_map .inner .binds ul li ul li a{background:none !important; border-top:1px solid #e3e3e3 !important;}
.user #slide_map .inner .binds ul li ul li:first-child a{border-top:0 !important;}
.user #slide_map .inner .binds ul li ul li a:before{display:none;}
.user #slide_map .inner .binds ul li ul li a:after{left:20px; top:16px; width:3px; height:3px; margin-top:1px; background:#009d85; border:none;  transform:rotate(0deg); -webkit-transform:rotate(0deg);}
.user #slide_map .inner .binds ul li ul li a span{line-height:18px; padding:10px 10px 10px 30px; font-size:14px; color:#6b6b6b;}

.user #slide_map .inner .binds ul li ul li a.on span{text-decoration:underline; color:#2c8d76;}
.user #slide_map .inner .binds ul li ul li a.on:after{background:#2c8d76; transform:rotate(0deg); -webkit-transform:rotate(0deg);}
.user #slide_map .inner .close{display:block; position:absolute; left:-45px; top:0; width:45px; height:45px; background:#1f1f1f url(../../images/area/layout/mob_close_ico.png) no-repeat center 50%; overflow:hidden; text-indent:-9999px;}
/* header */
.user #header{position:relative; left:auto; top:auto; padding-top:0; height:75px; z-index:201;}
.user #header h1{top:18px;}
.user #header #global .site_link,
.user #header .js_menu{display:none;}
.user #header #global .allmenu_btn{display: block; top:27px;}
.user #header .js_menu #blind:after{display:none;}
.user #header .js_menu ul{max-width:96%; padding-left:70px; padding-right:70px;}
.user #header .js_menu ul li .tmenu_ti{display:none !important;}
.user #header .js_menu ul li a{padding:25px 0;}
.user #header .js_menu ul li:first-child ul{border-left:1px solid #eee;}
/* visual */ 
#sub.user #visual{padding-top:0; height:160px;}
#sub.user #visual h2{padding-top:60px; font-size:35px;}
/* container */
#sub.user #container #content{padding:40px 0;}
#sub.user #container #txt{min-height:10px;}
#txt h3{margin:0 0 40px 0; font-size:26px; line-height:32px;}
#sub #container #remote{margin:0;}
#sub #container #remote .js_menu.select .home,
#sub #container #remote .gongu_btn,
#sub #container #remote .print_btn,
#sub #container .gongu_btn .sharebox a{width:53px;}
#sub #container #remote .js_menu.select .home,
#sub #container #remote .js_menu.select .js_menu_select,
#sub #container #remote .gongu_btn,
#sub #container #remote .print_btn,
#sub #container #remote .js_menu.select .js_menu_select ul li,
#sub #container .gongu_btn .sharebox a{height:53px;}
#sub #container #remote .gongu_btn{right:53px;}
#sub #container #remote .js_menu.select .js_menu_select strong a{line-height:53px;}
#sub #container #remote .js_menu.select .js_menu_select ul,
#sub #container .gongu_btn .sharebox{top:53px;}
}

@media screen and (max-width: 840px){
/* footer */
.user #footer .menu li{margin:0 2%;}
}

@media screen and (max-width: 740px){
/* layout */	
.js_mobile_check{display:block;}
/* visual */ 
#sub.user #visual{height:140px;}
#sub.user #visual h2{padding-top:52px; font-size:30px;}
/* container */
#sub.user #container #content{padding:30px 0;}
/* footer */
.user #footer:after{top:55px;}
.user #footer .menu li a{height:20px; line-height:20px;}
.user #footer .menu li a span{display:block;}
}

@media screen and (max-width: 640px){
/* layout */
.user .top_btn{right:3%; width:38px; height:38px; line-height:38px; font-size:13px;}
/* header */
#sub.user #header{border-bottom:1px solid #000;}
.user #header h1{top:22px; width:190px;}
/* visual */ 
#sub.user #visual{display:none;}
/* container */
#sub.user #container #txt{font-size:14px;}
#txt h3{font-size:23px; line-height:30px; margin:0 0 20px 0;}
#sub #container #remote .js_menu.select .home,
#sub #container #remote .gongu_btn,
#sub #container .gongu_btn .sharebox a{width:45px;}
#sub #container #remote .js_menu.select .home,
#sub #container #remote .js_menu.select .js_menu_select,
#sub #container #remote .gongu_btn,
#sub #container #remote .js_menu.select .js_menu_select ul li,
#sub #container .gongu_btn .sharebox a{height:45px;}
#sub #container #remote .js_menu.select .js_menu_select strong a{line-height:45px;}
#sub #container #remote .js_menu.select .js_menu_select ul,
#sub #container .gongu_btn .sharebox{top:45px;}
#sub #container #remote .print_btn{display: none;}
#sub #container #remote .gongu_btn{right:0;}
#sub #container #remote .js_menu.select .js_menu_select{width:145px;}
#sub #container #remote .js_menu.select .js_menu_select strong a{font-size:15px;}
#sub #container #remote .js_menu.select .js_menu_select,
#sub #container #remote .js_menu.select .js_menu_select ul li a{padding:0 10px;}
#sub #container #remote .js_menu.select .js_menu_select strong a:after{width:12px; height:12px; margin-top:-6px;}
/* footer */
.user #footer .menu{padding:7px 5%;}
.user #footer .menu li a{font-size:14px;}
.user #footer .relate_site li a{font-size:13px;}
.user #footer address, .user #footer .copyright{font-size:13px; text-align:center;}
.user #footer .info{padding:15px 0 60px 0;}
.user #footer .certifi_mark{position:static;}
}

@media screen and (max-width: 480px){
/* visual */ 
#sub.user #visual{height:105px;}
/* container */
#sub.user #container #content{padding:25px 0;}
/* footer */
.user #footer .menu{padding:7px 0;}
}

@media screen and (max-width: 400px){
/* visual */ 
#sub.user #visual{height:95px;}
/* container */
#sub #container #remote .js_menu.select .js_menu_select{width:116px;}
/* footer */
.user #footer:after{top:56px;}
.user #footer .menu{padding:10px 0;}
.user #footer .menu li a{height:auto; line-height:18px; font-size:12px;}
.user #footer .menu li a span{display:block; line-height:18px;}
.user #footer .relate_site li{width:100%; margin-bottom:5px; margin-left:0 !important;}
}


/* //////////////////////////////////////////////////////////////////////////////

	Main Content

////////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 1140px){
	#sec01 .box1,
	#sec01 .centers .ct_wrap,
	#sec01 .intro{padding:28px 20px;}

	#main.user #visual .vi_wrap{padding:40px 10%;}
	#main.user #visual .vi_wrap .txts{width:85%;}
	#main.user #visual .vi_wrap .txts img{width:100%;}
	#main.user #visual .vi_wrap em{margin-top:15px;}

	#sec03 .mapbx .info{padding:30px 20px;}
}

@media screen and (max-width: 1023px) and (min-width:941px){
	#sec01 .centers ul li a{padding:0 10px 0 43px;}
	#sec01 .intro ul li a{padding:8px 10px;}
	#sec03 .mapbx .info ul li a{padding:12px 20px 12px 10px;}
	#sec03 .mapbx .info em{font-size:25px;}

}

@media screen and (max-width: 940px){
	#main.user #container #content{padding:40px 0;}
	#main.user #visual{width:46%;}
	#sec01 .box1,
	#sec01 .centers .ct_wrap,
	#sec01 .intro{padding:28px 30px;}
	#sec01{width:54%;}
	#sec01 .box1 ul li{width:50%;}
	#sec01 .box1 ul li:nth-child(2){padding:0 0 0 8px;}
	#sec01 .box1 ul li:nth-child(3){display: none;}
	#sec01 .box2{overflow: visible; position:relative;}
	#sec01 .centers{width:100%; padding-right:0;}
	#sec01 .intro{position:absolute; top:248px; right:0; width:66%; height:280px;}
	#sec01 .intro ul li a{padding:18px 15px;}
	#sec02{width:62%;}
	#sec03{width:100%; padding-left:0;}
	#sec03 .mapbx .map_api{width:65%;}
	#sec03 .mapbx .info{width:35%; padding:40px 28px;}
}

@media screen and (max-width: 740px){
	#main.user #container #content{padding:30px 0;}
	#main.user #visual{width:50%; height:531px; padding-right:10px;}
	#main.user #visual .vi_wrap em{width:auto; height:24px; line-height:24px; margin-top:12px; font-size:12px;}
	#main.user #container .titles{line-height:22px; padding-bottom:12px; font-size:18px;}
	#sec01{width:50%; height:auto;}
	#sec01 .box1,
	#sec01 .centers .ct_wrap,
	#sec01 .intro{padding:22px 20px;}
	#sec01 .box1{height:268px;}
	#sec01 .box1 ul li{width:100%;}
	#sec01 .box1 .more_btn{top:25px; right:20px;}
	#sec01 .box2{height:auto; padding-top:10px;}
	#sec01 .centers{height:auto;}  
	#sec01 .centers ul li{width:100%;}
	#sec01 .centers ul li:nth-child(odd){padding-right:0;}
	#sec01 .centers ul li a{height:40px;}
	#sec01 .intro{top:273px; width:69%; height:220px;}

	#sec02{width:64%; margin-top:10px;}
	#sec02 .popupzone .inner{height:220px;}
	#sec02 .popupzone .move{height:183px;}
	#sec02 .popupzone .control,
	#sec02 .popupzone .control .count,
	#sec02 .popupzone .control a[class*="btn_"],
	#sec02 .popupzone a.btn_more{height:37px;}
	#sec02 .popupzone .control .count{line-height:37px;}
	
	#sec03{margin-top:10px;}
	#sec03 .mapbx .info{padding:30px 20px;}
	#sec03 .mapbx .info em{font-size:25px;}
}

@media screen and (max-width: 740px) and (min-width:641px){
	#sec01 .box1 ul li{padding:0 !important;}
	#sec01 .box1 ul li:nth-child(2){display: none;}
	#sec01 .intro ul li a{padding:12px 15px;}
}

@media screen and (max-width: 640px){
	#main.user #container #visual, #sec01, #sec02, #sec03{float: none;}
	#main.user #visual{width:100%; height:360px; padding-right:0; margin-bottom:10px;}

	#main.user #visual.seoul_vi{background-color:#1c4b7f;}
	#main.user #visual.seoul_vi .vi_wrap{background-position:right bottom -50px;}
	#main.user #visual.busan_vi{background-color:#214f81;}
	#main.user #visual.busan_vi .vi_wrap{background-position:right bottom -40px;}
	#main.user #visual.chungbuk_vi{background-color:#21539a;}
	#main.user #visual.chungbuk_vi .vi_wrap{background-position:right bottom -25px;}
	#main.user #visual.daegu_vi{background-color:#184e89;}
	#main.user #visual.daegu_vi .vi_wrap{background-position:right bottom -20px;}
	#main.user #visual.daejeon_vi{background-color:#113360;}
	#main.user #visual.daejeon_vi .vi_wrap{background-position:right bottom -55px;}
	#main.user #visual.gangwon_vi{background-color:#0a5196;}
	#main.user #visual.gangwon_vi .vi_wrap{background-position:right bottom -80px;}
	#main.user #visual.gwangju_vi{background-color:#1e5ea3;}
	#main.user #visual.gwangju_vi .vi_wrap{background-position:right bottom -95px;}
	#main.user #visual.gyeonggi_vi{background-color:#10569b;}
	#main.user #visual.gyeonggi_vi .vi_wrap{background-position:right bottom -85px;}
	#main.user #visual.gyeongnam_vi{background-color:#0c4a8e;}
	#main.user #visual.gyeongnam_vi .vi_wrap{background-position:right bottom -85px;}
	#main.user #visual.incheon_vi{background-color:#295f9b;}
	#main.user #visual.incheon_vi .vi_wrap{background-position:right bottom -85px;}
	#main.user #visual.jeju_vi{background-color:#13599e;}
	#main.user #visual.jeju_vi .vi_wrap{background-position:right bottom -15px;}
	#main.user #visual.jeonbuk_vi{background-color:#16609d;}
	#main.user #visual.jeonbuk_vi .vi_wrap{background-position:right bottom -50px;}

	#main.user #visual .vi_wrap{padding:35px 8%;}
	#main.user #visual .vi_wrap .txts{width:230px;}

	#sec01{width:100%;}
	#sec01 .box1{height:auto;}
	#sec01 .box1 ul li{width:50%;}
	#sec01 .box2{height:auto;}
	#sec01 .centers ul li{margin-bottom:3px;}
	#sec01 .intro{position:static; top:auto; right:auto; width:100%; height:auto;}
	#sec01 .intro ul li{margin-bottom:3px;}

	#sec02{width:100%;}
	#sec02 .popupzone .inner{height:205px;}
	#sec02 .popupzone .move{height:165px;}
	#sec02 .popupzone .control,
	#sec02 .popupzone .control .count,
	#sec02 .popupzone .control a[class*="btn_"],
	#sec02 .popupzone a.btn_more{height:40px;}
	#sec02 .popupzone .control .count{line-height:40px;}
	#sec02 .popupzone .move ul li img {margin:0 auto;}
	
	#sec03{height:auto;}
	#main.user #container #sec03 .titles{padding-bottom:7px;}
	#sec03 .mapbx #map,
	#sec03 .mapbx #map .root_daum_roughmap .wrap_map{height:240px;}
	#sec03 .mapbx .map_api{width:100%;}
	#sec03 .mapbx .info{width:100%; padding:22px 20px;}
	#sec03 .mapbx .info em{padding-bottom:12px;}
}

@media screen and (max-width: 640px) and (min-width:481px){
	#sec01 .centers{width:55%; padding-right:10px;}
	#sec01 .centers ul li a{padding:0 10px 0 38px; background-position:left 12px center;}
	#sec01 .intro{width:45%;}
	#sec01 .intro ul li a{padding:18px 10px;}

	#sec03 .mapbx .info ul{overflow: hidden;}
	#sec03 .mapbx .info ul li{float:left; width:50%; margin-bottom:0 !important; box-sizing:border-box;}
	#sec03 .mapbx .info ul li:first-child{padding-right:10px;}
	#sec03 .mapbx .info ul li a{padding:15px 20px 15px 10px;}
}

@media screen and (max-width: 480px){
	#main.user #visual{height:320px;}

	#main.user #visual.seoul_vi .vi_wrap{background-position:right bottom -30px;}
	#main.user #visual.busan_vi .vi_wrap{background-position:right bottom -10px;}
	#main.user #visual.chungbuk_vi .vi_wrap{background-position:right bottom -13px;}
	#main.user #visual.daegu_vi .vi_wrap{background-position:right bottom -10px;}
	#main.user #visual.daejeon_vi .vi_wrap{background-position:right bottom -25px;}
	#main.user #visual.gangwon_vi .vi_wrap{background-position:right bottom -25px;}
	#main.user #visual.gwangju_vi .vi_wrap{background-position:right bottom -40px;}
	#main.user #visual.gyeonggi_vi .vi_wrap{background-position:right bottom -25px;}
	#main.user #visual.gyeongnam_vi .vi_wrap{background-position:right bottom -30px;}
	#main.user #visual.incheon_vi .vi_wrap{background-position:right bottom -50px;}
	#main.user #visual.jeonbuk_vi .vi_wrap{background-position:right bottom -35px;}

	#main.user #visual .vi_wrap .txts{width:205px;}

	#sec01 .intro{margin-top:10px;}
	#sec01 .intro ul li a{padding:15px;}

	#sec03 .mapbx #map,
	#sec03 .mapbx #map .root_daum_roughmap .wrap_map{height:180px;}
	#sec03 .mapbx .info ul li a{padding:12px 25px 12px 15px;}
}

@media screen and (max-width: 400px){
	#sec02 .popupzone .inner{height:185px;}
	#sec02 .popupzone .move{height:145px;}
}
	
@media screen and (max-width: 380px){
	#main.user #visual{height:260px;}

	#sec01 .box1 ul li{width:100%; padding:0 !important;}
	#sec01 .box1 ul li:nth-child(2){display: none;}
}