@charset "utf-8";
#skipnav {margin: 0; padding:0; }
#skipnav a {display:block;overflow:hidden;position:absolute;left:0;top:-10000px;}
#skipnav a.res_web_view {display:none;}
#skipnav a:hover,#skipnav a:focus,#skipnav a:active {padding:15px 0;background-color:#004b9d;color:#fff;font-size:120%;width:100%;text-align:center;top:0px;z-index:500;}
#wrap{ text-align: center;}
#header,#main_contents,.foot_box{ max-width: 1096px; margin: 0 auto; text-align: left; position: relative;}
#header_wrap{ background: url(../../images/mns/contents/topbg.gif) top repeat-x; height: 95px; box-shadow:0 2px 10px rgba(180,180,180,0.3);}
#header{padding-top: 15px; }
.logo{ width: 269px; position: absolute; left: 0; top: 27px; z-index:10;}
.logo img{ width: 100%;}
#nav{ width: 1096px; margin: 0 auto;}
.menuicon,.menuclose,.nav_top{ display: none;}
.divmap{ max-width: 1096px; margin: 0 auto; position:relative;}
.mapgo{ display:block; position: absolute; top:-68px; right: 0; text-indent: -9999px; overflow: hidden;  width: 25px; height: 19px; padding: 10px; }
.mapgo:before{content:''; background: url(../../images/mns/contents/nav_icon.png) no-repeat; background-size: 25px; width: 25px; height: 19px; position: absolute; left: 50%; top: 50%; margin-left: -10px; margin-top: -8px;}
#nav > ul{ text-align: right; box-sizing: border-box; padding-right: 120px;}
#nav > ul > li{ font-size: 20px; font-weight: bold; display: inline-block;padding: 0 33px;height: 80px; box-sizing: border-box;}
#nav > ul > li.menu5{ padding-right: 0;}
#nav > ul > li:first-child{ padding-left: 0;}
#nav > ul > li > a{ color: #333; letter-spacing: -0.05em;  padding: 20px 0 30px; display: inline-block;}
#nav ul li div { position:absolute; left:0px; top:94px; width:100%; height:50px; z-index:1000; border-top: 1px solid #bbb; border-bottom: 1px solid #bbb;  background: #fbfbfb; display: none;}
#nav ul li.on div{ display:block;}
#nav ul li div ul{ width: 1096px; margin: 0 auto; box-sizing: border-box; }
#nav ul li a{ position: relative;}
#nav > ul > li > a:after{ content:''; display:block; position:absolute; z-index: 1001; bottom:-1px; left:50%; width:0; height:4px; background:#124e86; transition:all .2s ease;}
#nav > ul > li:hover > a:after,
#nav > ul > li.on > a:after{left:1%; width:98%;}
#nav ul li div > ul > li > ul { display:none;}
#nav ul li.menu1 div ul {padding-left:400px;} 
#nav ul li.menu2 div ul {padding-left:570px;} 
#nav ul li.menu4 div ul {padding-left:730px;}  
#nav ul li.menu5 div ul {padding-left:900px;} 
#nav ul li div ul li { float:left; padding:0 13px 0 15px; line-height: 50px; position: relative;}
#nav ul li div ul li:before{ content: ''; position: absolute; left: 0; top: 17px; width: 1px; height: 15px; display: inline-block; background-color: #ddd;}
#nav ul li div ul li:first-child:before{ display: none;}
#nav ul li div ul li:first-child{ padding-left: 0;}
#nav ul li div ul li:last-child{ padding-right: 0;}
#nav ul li div ul li a:hover{ font-weight: 600;color: #124e86; text-decoration:underline;}
#nav ul li div ul li a{ height: 50px; display: block;}
#nav > ul > li > div li{ font-size: 16px; color: #333; font-weight: 500; float: left;}
.main_img { position: relative; overflow: hidden; float: left; width: 817px; height: 340px; margin-right: 20px; }
.main_img img{ max-width: 100%; width: 100%; height: 340px; }
.gridbox{ width: 259px; height: 160px; background-image: url(../../images/mns/contents/gridbox_ch_bg.png); background-position:180px 92px; background-repeat: no-repeat; background-color: #2c9cdd; float: left; position: relative; margin-bottom: 20px;  }
.gridbox a{color: #fff; padding: 30px; display: block; width: 100%; height: 160px; box-sizing: border-box;}
.gridbox h2{ color: #fff; font-size: 22px; font-weight: bold; display: block; margin-bottom: 10px;  }
.gridbox p{ font-size: 14px; color: rgba(255,255,255,0.8); }
.gridbox span,
.main_facebook .title span{ display:block; position: absolute; top:0; right: 0; text-indent: -9999px; overflow: hidden;  width: 40px; height: 40px; }
.gridbox span:before,
.main_facebook .title span:before{content:''; background-image: url(../../images/mns/contents/gridbox_more.png); background-position: center; background-repeat: no-repeat; background-color:#2278aa;width: 20px; height: 20px;padding: 10px; position: absolute; left: 0; top: 0;}
.main_facebook .title span:before{background-color: #253a73;}
.gridbox.cal{background-image: url(../../images/mns/contents/gridbox_ca_bg.png); background-color: #2761ae;}
.gridbox.cal span:before{ background-color: #1e4b86; }
.gridbox.pic{background-image: url(../../images/mns/contents/gridbox_pic_bg.png); background-color: #31a53f;}
.gridbox.pic span:before{ background-color: #267f30; }
.gridlist > li{ float: left; width: 259px; height: 160px; position: relative; margin-bottom: 20px; margin-left: 20px; }
.gridlist.mov > li:first-child{ margin-left: 0; }
.gridlist > li > div{height: 160px; overflow: hidden;background-color: #eee;}
.gridlist > li > div span{ overflow: hidden; position: relative; padding-top: 160px; width: 100%; display: block; }
.gridlist > li > div span .img {max-width: 100%; width: 100%; min-height: 100%; position: absolute; left: 0; top: 0;}
.gridlist > li > div span .play{ position: absolute; left: 50%; top: 50%; margin-top: -40px; margin-left: -24px;}
.gridlist > li > div:before{ content: ''; display: block; position: absolute; left: 0; top: 0; width: 35px; height: 35px; background-image: url(../../images/mns/contents/gridbox_pic_icon.png); background-repeat: no-repeat; background-position: center; background-color: rgba(43,198,62,0.8); z-index: 2; }
.gridlist.mov > li > div:before{background-image: url(../../images/mns/contents/gridbox_mov_icon.png);background-color: rgba(230,37,37,0.8) }
.gridlist > li > div:after{ content: ''; display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 35px; background: rgba(0,0,0,0.5);  }
.gridlist > li > div a{ display: block; height: 160px; width: 100%; box-sizing: border-box; }
.gridlist > li > div strong {width: 100%; padding: 0 10px 0 15px; line-height: 35px; height: 35px; box-sizing: border-box;position:absolute; left:0px; bottom:0;display:block; font-size:14px; color:#fff; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; z-index: 2; }
.main_facebook{ width: 537px; height: 160px; padding-left: 190px; position: relative; float: left; margin-left: 20px; box-sizing: border-box; border: 2px solid #304c95;  }
.main_facebook .title{  width: 166px; height: 160px; background: url(../../images/mns/contents/gridbox_fb_bg.png) 120px bottom no-repeat #304c95; color: #fff; box-sizing: border-box; padding-top: 60px; text-align: center; font-size: 24px; font-weight: bold; position: absolute; left: -2px; top: -2px; }
.main_facebook > div{ padding: 23px 25px 23px 0; box-sizing: border-box; }
.main_facebook .more{ text-indent: -9999px; overflow: hidden; background-image: url(../../images/mns/contents/gridbox_fb_icon.png); background-repeat: no-repeat; background-position:center; background-color: #304c95; position: absolute; right: 0px; top: 0; display: block; width: 35px; height: 35px;}
.main_facebook div span{ overflow: hidden; position: relative; padding-top: 110px; margin-top: 3px; width: 170px; display: block; background-color: #eee; float: left; }
.main_facebook div span .img {max-width: 100%; min-height: 100%; position: absolute; left: 0; top: 0;width: 100%;}
.main_facebook div .cont{ float: left; margin-left: 18px; width: 120px; }
.main_facebook div .cont strong{ width: 100%; height: 107px; margin-bottom: 10px; overflow:hidden; font-size:15px; font-weight: 600; color:#333; line-height:1.4; overflow: hidden; text-overflow: ellipsis;  display:block; display:-webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; word-wrap:break-word;}
.main_facebook div .cont p{ width: 100%; height: 60px;overflow:hidden; font-size:14px;color:#666; line-height:1.4; overflow: hidden; text-overflow: ellipsis;  display:block; display:-webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; word-wrap:break-word;}
.main_facebook .prebox > div{ box-sizing: border-box; background: url(../../images/mns/contents/fb_preimg.jpg) left top no-repeat; padding-top: 35px; padding-left: 200px; color: #333; font-size: 18px; width: 310px; height: 130px; margin-top: -5px;  line-height: 1.4;}

/* 푸터 */
#footer { width: 100%; background: #2c3045; padding: 41px 0; }
#footer .inner { max-width: 1200px; margin: 0 auto; overflow: hidden; }
#footer .inner .info { float: left; margin-left: 100px; }
#footer .inner .info .addr { color: #9d9faa; font-size: 15px; margin-bottom: 5px; }
/* 220809 웹접근성을 위해 글자 색상을 주소 색상과 맞춤 
#footer .inner .info .copyright { color: #70727f; font-size: 15px; } */
#footer .inner .info .copyright { color: #9d9faa; font-size: 15px; }

#footer .inner .f-logo { float: left; padding: 3px; }

@media screen and (max-width: 1200px) {

	#nav { width: 1069px; }
	

	/* 푸터 */
	#footer .inner { padding: 0 10px; }
}

.foot_box{padding-left: 259px; position: relative; box-sizing: border-box;}
.foot_box > img{  position: absolute; left: 0; top: -2px;}
.foot_box p{ font-size: 16px; line-height: 1.6; color: #e4e5e6;}
.foot_box p.copy{ font-size: 15px; color: #c0c1c2; }
.topbtn { position: fixed; bottom: 0; width: 100%; z-index: 100; text-align:center; display: none;}
.topbtn p {max-width: 1096px;margin: 0 auto;position: relative;}
.topbtn p a {display: inline-block; position: absolute;bottom: 20px; right: -50px;}
/* 레이어팝업 */
.lyr_pop { background:#fff; z-index:1000; text-align:left; border:1px solid #184990; box-sizing:border-box; font-size:15px; box-shadow: 2px 2px 5px rgba(0,0,0,0.2);}
.lyr_pop  p{ margin: 0; }
.lyr_pop .lp_top {position:relative; background:#184990; padding:5px 25px 8px 20px;}
.lyr_pop .lp_top strong {color:#fff; font-size:15px;}
.lyr_pop .lp_top .lp_close{position: absolute;top:5px;right:5px;display:block;width:25px;height:25px;text-align:center;}
.lyr_pop .lp_body {padding:20px; box-sizing: border-box;}
.lyr_pop .lp_body > p{margin:10px 0;font-size:14px;}
.lyr_pop .lp_body > p:first-child{margin:0 0 10px 0;}
.lyr_pop .lp_body > .tit {display:block; margin-bottom:30px; border-bottom:1px solid #ccc; padding-bottom:15px; font-size:18px; color:#406bb3;}
.lyr_pop .lp_body img{max-width:100%;}
.lyr_pop .lp_bottom {background:#dadada; padding:5px 10px; box-sizing:border-box; text-align:right;}
.lyr_pop .lp_bottom > div {display:inline-block;}
.lyr_pop .lp_bottom > div label {color:#000; padding-right: 5px; font-size: 13px;}
.lp_body.img{ padding: 0; overflow-y: auto!important;}
.lyr_pop .lp_body.img > p:first-child{margin:0;}
.lyr_pop .lp_bottom input{ vertical-align: middle; }
@media screen and (max-width:1200px){
	.lyr_pop {left:0 !important;}
}
@media screen and (max-width: 1096px) {
	#header,#main_contents,.foot_box{ max-width: 748px;position: relative;}
	#header_wrap{ border-top: 3px solid #2485dd; border-bottom: 1px solid #ccc; background: #fff; height: 69px;}
/* 	#main_contents_wrap{width: 748px; margin: 20px auto 25px;} */
	.main_img{ margin-right: 0; width: 100%; height: auto; margin-bottom: 15px; float: none; }
	.main_img img{ height: 311px; }
	.gridbox{ width: calc(100% / 3 - 10px); margin-left: 14px; margin-bottom: 15px; background-position: 88% 80%; }
	.gridbox.chat{ margin-left: 0; }
	.gridlist > li{width: calc(100% / 3 - 10px); margin-left: 14px; margin-bottom: 15px;}
	.gridlist > li:first-child{margin-left: 0; }
	.main_facebook{width: calc(100% / 3 - 10px); margin-left: 14px; padding: 47px 5px 14px 14px;}
	.main_facebook .title{ width: 100%; height: 35px; background: #304c95; padding: 0 0 0 15px; font-size: 17px; text-align: left; line-height: 35px; }
	.main_facebook .title span{ display: none; }
	.main_facebook .more{ top: -2px; right: -2px; background-color: #203670; }
	.main_facebook > div{ padding: 0; }
	.main_facebook div span{ width: 97px;padding-top: 83px; }
	.main_facebook div span .img{max-width: inherit; height: 100%; width: auto;}
	.main_facebook div .cont{  margin-left: 12px; width: 105px; }
	.main_facebook div .cont strong{ font-size: 14px; width: 100%; line-height: 1.3; margin-bottom: 4px;  height: 93px; -webkit-line-clamp: 5;}
	.main_facebook div .cont p{ font-size: 13px; height: 39px; -webkit-line-clamp: 2; display: none;}
	.main_facebook .prebox{ text-align: center; padding: 0; }
	.main_facebook .prebox > div{ padding: 20px 0 0 115px; background-size: 100px; background-position: left center;  width: 220px; font-size: 15px; height: 85px; text-align: left; margin: 0 auto; }
	.logo{ width: 269px; top: 12px; left: 10px;}	
	.top_menu{ top: 0;}
	.mapgo{ display: none; }
	.top_menu > ul{ display: none;}
	.nav_wrap{ max-width: 748px; margin: 0 auto;}
	.menuicon{ display:block; text-indent: -9999px; overflow: hidden;  width: 25px; height: 19px; padding: 10px; float: right; position: relative; }
	.menuicon:before{content:''; background: url(../../images/mns/contents/nav_icon.png) no-repeat; background-size: 25px; width: 25px; height: 19px; position: absolute; left: 50%; top: 50%; margin-left: -10px; margin-top: -8px;}
	.nav_top{ display: block; background-color: #fff; height: 50px; color: #666;}
	.nav_top ul{  position: absolute; left: 5px; top: 14px;}
	.nav_top ul li{ display: inline-block; padding: 0 8px 0 11px; position: relative; vertical-align: middle;}
	.nav_top ul li:before{ content: ''; position: absolute; left: 0; top: 3px; width: 1px; height: 12px; display: inline-block; background-color: #ddd;}
	.nav_top ul li a{ color: #666;}
	.nav_top ul li:first-child:before{ display: none;}
	.menuclose{ display: block;position: absolute; top: 0px; right: 0px; text-indent: -9999px; overflow: hidden;  width: 30px; height: 30px; z-index: 1000;   padding: 10px;  }
	.menuclose:before{content:''; background: url(../../images/mns/contents/closemenu.png) center 50% no-repeat; width: 19px; height: 20px; position: absolute; left: 50%; top: 50%; margin-left: -10px; margin-top: -10px;}
	.navbg { background-color: rgba(0,0,0,.7); opacity: .7;filter: alpha(opacity=70); position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 800; min-height: 100%; border: none;}
	#nav{ background: #fff; position: absolute; right: 0; top: 0; z-index: 1000; width: 240px; height: 100%; overflow-y: auto; display:none; }	
	#nav > ul{ padding-right: 0; }
	#nav > ul > li{ display: block; width: 100%; text-align: left; padding: 0; height: auto; font-size: 16px;} 
	#nav > ul > li.menu5{border-bottom: 1px solid #ddd;}
	#nav > ul > li > a{ color: #fff; font-weight:600; padding: 12px 0 12px 15px; display: block;background:url(../../images/mns/contents/nav_bgt.png) 93% 50% no-repeat #124e86; border-bottom: 1px solid rgba(255,255,255,0.2); background-size: 12px;transition: all 0.3s ease-in-out;}
	#nav > ul > li.on > a{ font-weight:bold;background-image:url(../../images/mns/contents/nav_bgt_on.png); background-color: #2485dd;}
	#nav ul li div{ display: none; position: relative; top: auto; left: auto; min-height:inherit; height:inherit; margin: 0;background:#f7f8f9; border-top: 1px solid #f7f8f9; border-bottom: none; }
	#nav ul li div ul{ position: relative; top: auto; left: auto; min-height:inherit; height: auto; border-left: none; padding: 0; margin: 0; width: auto; overflow: hidden;}
	#nav ul li div > ul > li.on > a{ color:#333; font-weight:bold; background:url(../../images/mns/contents/leftmbg_arr.png) 93% 50% no-repeat #fff; background-size:6px; padding-right:40px;}
	#nav ul li div > ul > li >ul > li.on{ font-weight:500;}
	#nav ul li div > ul > li >ul > li.on a{ color:#4078b6; text-decoration:underline;}
	#nav ul li.menu1 div ul,#nav ul li.menu2 div ul ,#nav ul li.menu3 div ul ,#nav ul li.menu4 div ul ,#nav ul li.menu5 div ul  {padding-left:0px;} 
	#nav ul li div ul li{margin: 0; padding: 0; text-align: left; font-size: 15px; display: block; border-top: 1px solid #ddd; width: 100%; background: none; line-height: 1.2; }
	#nav ul li div ul li:first-child{ border-top: none;}
	#nav ul li div > ul > li:before{ display: none;}
	#nav ul li div ul li a{ display: block;  padding:12px 10px 12px 20px; height: auto;}
	#nav ul li div > ul > li > ul{display:block; background:#fff; padding:5px 0; border-top:1px solid #ddd;}
	#nav ul li div > ul > li > ul li{ border:none; position:relative;}
	#nav ul li div > ul > li > ul li a{ padding:6px 10px 6px 35px; font-size:95%;}
	#nav > ul > li > a:after{ display: none;}
	.foot_box ul + p{ display: block;}
	.foot_box ul + p +p.call{ margin-left: 0;}
	.foot_box > img{ left:10px; width: 160px;}
	.foot_box{ padding-left: 200px; }
	.foot_box p{ font-size: 14px; }
	.foot_box p.copy{ font-size: 13px;}
	.topbtn p a {bottom: 5px; right: 5px;}
}

@media screen and (max-width: 767px) {
	#header,#main_contents,.foot_box,.nav_wrap,#main_contents_wrap{ width: 100%; }
	#header{padding-top: 6px;}
	#header_wrap{ height: 55px; }
	.menuicon{ margin-right: 10px; }
	.logo{ width: 200px;  top: 11px; left: 10px;}
/* 	#main_contents_wrap{ padding: 10px 10px 20px; box-sizing: border-box; margin: 0;} */
	.main_img{ margin-bottom: 10px; }
	.main_img img{ height: auto; }
	.gridbox{width: calc(50% - 5px); height: 120px; margin-left: 10px; background-size: 40px;}
	.gridbox h2{ font-size: 18px; }
	.gridbox p{ font-size: 13px; }
	.gridbox a{ padding: 20px 20px; height: 120px; }
	.gridbox span{ width: 35px; height: 35px; }
	.gridbox span:before{ width: 15px; height: 15px; }
	.gridbox.pic{ margin-left: 0; }
	.gridlist > li{width: calc(50% - 5px); height: 120px; margin-left: 10px;}
	.gridlist > li:first-child{margin-left: 10px;}
	.gridlist > li:nth-child(2){margin-left: 0;}
	.gridlist > li > div span{ padding-top: 120px; }
	.gridlist > li > div,.gridlist > li > div a{ height: 120px; }
	.gridlist.mov > li:nth-child(2){ margin-left: 10px; }
	.gridlist > li > div strong{ height: 30px; line-height: 30px; font-size: 13px; }
	.gridlist > li > div:after{ height: 30px; }
	.gridlist > li > div span .play{ width: 35px; height: 35px;margin-top: -30px;margin-left: -17px; }
	.main_facebook{ width: 100%; margin-left: 0; padding: 50px 15px 15px; }
	.main_facebook > div{ padding-left: 135px; box-sizing: border-box; }
	.main_facebook div .cont{ width: auto; }	
	.main_facebook div .cont strong{height: 83px; }
	.main_facebook div .cont p{line-height: 1.4; height: 39px; display: block;  display:-webkit-box;}
	.main_facebook div span{ position: absolute; left: 16px; top: 50px;height: 83px;width: 128px;padding-top: 0;}
	.main_facebook div span .img {max-width: inherit;height: auto;width: 100%;}
	/* 푸터 */
	#footer { padding: 25px 0; }
	#footer .inner .f-logo { float: none; text-align: center; margin-bottom: 20px; }
	#footer .inner .info { float: none; text-align: center; margin-left: 0; }
	
	.foot_box{ padding-left: 0;}
	.foot_box .call{ margin-left: 0; margin-right: 15px;}
	.foot_box p{ font-size: 11px;}
	.foot_box ul{ font-size: 12px; margin-bottom: 10px;}
	.foot_box > img{ display: none;}
	
}