@charset "utf-8";

/***********************************
mVisualGuide
***********************************/
#wrapArticle .mVisualGuide {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1;
	height: 80px;
	background-color: rgba(51,78,111,0.8);
}
/***********************************
visual
***********************************/
	#mVisualWrap,
	#mVisualWrap .bx-wrapper,
	#mVisualWrap .mVisual,
	#mVisualWrap .mVisual li,
	#mVisualWrap .mVisual li .resWrap,
	#mVisualWrap .mVisualRelative{
		height: 807px;
	}
	#mVisualWrap {
		overflow: hidden;
		position: relative;
		background-color: #194357;
	}
	#mVisualWrap .mVisual {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 0;
	}
	#mVisualWrap .mVisualRelative {
		position: relative;
		margin: auto;
		z-index: 2;
	}
	#mVisualWrap .bx-wrapper {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1;
	}
	
	#mVisualWrap .mVisual li {
		background-position: center top;
		background-repeat: no-repeat;
		width: 100% !important;
	}
	#mVisualWrap .mVisual li .resWrap{
		position: relative;
		margin: 0 auto;
	}
	#mVisualWrap .mVisual li.mv01 {
		background-image: url("../images/main/mv01.jpg");
	}
	#mVisualWrap .mVisual li.mv02 {
		background-image: url("../images/main/mv02.jpg");
	}
	#mVisualWrap .mVisual li.mv03 {
		background-image: url("../images/main/mv03.jpg");
	}
	#mVisualWrap .mVisual li.mv04 {
		background-image: url("../images/main/mv04.jpg");
	}
	#mVisualWrap .mVisual li.mv05 {
		background-image: url("../images/main/mv05.jpg");
	}
	#mVisualWrap .mVisual li.mv06 {
		background-image: url("../images/main/mv06.jpg");
	}
	#mVisualWrap .mVisual li .resWrap img.text {
		position: absolute;
		bottom: 180px;
		left: 40px;
	}
	#mVisualWrap .mVisual li .resWrap img.map {
		position: absolute;
		bottom: 180px;
		right: 40px;
	}
	#mVisualWrap .bx-controls {
		width: 1200px;
		margin: 0 auto;
		position: relative;
	}
	#mVisualWrap .bx-pager {
		position: absolute;
		left: 20px;
		bottom: 27px;
		height: 30px;
		z-index: 9990;
	}
	#mVisualWrap .bx-pager div {
		float: left;
		margin: 5px 3px 0;
	}
	#mVisualWrap .bx-pager div a {
		background: url("../images/main/mVisual_btn.png") right top no-repeat;
		width: 20px;
		height: 20px;
		display: block;
		text-indent: -5000px;
	}
	#mVisualWrap .bx-pager div a.active {
		background-position: left top;
	}

	#mVisualWrap .bx-controls-direction{
		width: 1280px;
		margin: 0 auto;
		position: relative;
		border: 1px blue solid;
	}
	#mVisualWrap .bx-controls-auto {
		position: absolute;
		bottom: 8px;
		left: 178px;
		width: 60px;
		z-index: 99999;
		display: none;
	}
	#mVisualWrap .bx-controls-auto a{
		height: 26px;
		width: 26px;
		float: left;
		margin-right: 1px;
		text-indent: -5000px;
		background: url("../images/main/ar_auto.png") no-repeat;
	}
	#mVisualWrap .bx-controls-auto a.bx-start{
		background-position: 0 0;
	}
	#mVisualWrap .bx-controls-auto a.bx-stop{
		background-position: -26px 0;
	}
	#mVisualWrap .bx-controls-auto a.active{
		display: none;
	}
/***********************************
visual pager / prev / next
***********************************/
	#mVisualWrap #mvPager{
		position: absolute;
		bottom: 12px;
		left: 0;
	}
	#mVisualWrap #mvPager ._list ,
	#mVisualWrap #mvPager #mvPrev,
	#mVisualWrap #mvPager #mvNext{
		display: inline-block;
		*zoom: 1;
		_display: inline;
	}
	#mVisualWrap #mvPager ._list a{
		float: left;
		padding: 0 10px;
		background: url("../images/main/mvPagerGab.png") no-repeat left 50%;
	}
	#mVisualWrap #mvPager ._list a:first-child{
		background: none;
	}
	#mVisualWrap #mvPager ._list a img{
		opacity: 0.4;
		filter: alpha(opacity=40); /* For IE8 and earlier */
	}
	#mVisualWrap #mvPager ._list a.active img{
		opacity: 1;
		filter: alpha(opacity=100); /* For IE8 and earlier */
	}
	#mVisualWrap #mvPager #mvPrev a,
	#mVisualWrap #mvPager #mvNext a{
		float: left;
		width: 8px;
		height: 41px;
		text-indent: -5000px;
	}
	#mVisualWrap #mvPager #mvPrev a{
		background: url("../images/main/ar_before.png") right 50% no-repeat;
		margin-right: 0.5em;
	}
	#mVisualWrap #mvPager #mvNext a{
		background: url("../images/main/ar_next.png") right 50% no-repeat;
		margin-left: 0.5em;
	}
/***********************************
timer
***********************************/
	
	#wrapArticle #timer {
		position:absolute;
		z-index:21;
	}
	#wrapArticle #timer .timer .ymd,
	#wrapArticle #timer .timer .hms,
	#wrapArticle #timer .timer .space{
		background-repeat: no-repeat;
		height: 24px;
		float: left;
	}
	#wrapArticle #timer .timer .ymd{
		background-image:url("../images/main/timerYMD.png");
		width: 15px;
	}
		#wrapArticle #timer .timer .ymd.time_0{background-position: 0 0;}
		#wrapArticle #timer .timer .ymd.time_1{background-position: -15px 0;}
		#wrapArticle #timer .timer .ymd.time_2{background-position: -30px 0;}
		#wrapArticle #timer .timer .ymd.time_3{background-position: -45px 0;}
		#wrapArticle #timer .timer .ymd.time_4{background-position: -60px 0;}
		#wrapArticle #timer .timer .ymd.time_5{background-position: -75px 0;}
		#wrapArticle #timer .timer .ymd.time_6{background-position: -90px 0;}
		#wrapArticle #timer .timer .ymd.time_7{background-position: -105px 0;}
		#wrapArticle #timer .timer .ymd.time_8{background-position: -120px 0;}
		#wrapArticle #timer .timer .ymd.time_9{background-position: -135px 0;}
		#wrapArticle #timer .timer .ymd.time_AM{background-position: -150px 0; width: 30px;}
		#wrapArticle #timer .timer .ymd.time_PM{background-position: -180px 0; width: 30px;}
		#wrapArticle #timer .timer .ymd.colon{background-position: -210px 0; width: 5px;}
	#wrapArticle #timer .timer .hms{
		background-image:url("../images/main/timerHMS.png");
		width: 20px;
	}
		#wrapArticle #timer .timer .hms.time_0{background-position: 0 0;}
		#wrapArticle #timer .timer .hms.time_1{background-position: -20px 0;}
		#wrapArticle #timer .timer .hms.time_2{background-position: -40px 0;}
		#wrapArticle #timer .timer .hms.time_3{background-position: -60px 0;}
		#wrapArticle #timer .timer .hms.time_4{background-position: -80px 0;}
		#wrapArticle #timer .timer .hms.time_5{background-position: -100px 0;}
		#wrapArticle #timer .timer .hms.time_6{background-position: -120px 0;}
		#wrapArticle #timer .timer .hms.time_7{background-position: -140px 0;}
		#wrapArticle #timer .timer .hms.time_8{background-position: -160px 0;}
		#wrapArticle #timer .timer .hms.time_9{background-position: -180px 0;}
		#wrapArticle #timer .timer .hms.colon{background-position: -200px 0; width: 8px;}
	#wrapArticle #timer .timer .space{
		width: 5px;
	}


	#wrapArticle #timer .timer .now	{display:block; width:0; height:0; overflow:hidden;}
/***********************************
visualNews
***********************************/
	#wrapArticle #visualNews{
		position: absolute;
		bottom: 90px;
		left: 0;
		width: 100%;
		z-index: 10;
	}
	#wrapArticle #visualNews .visualNewsUl{
		position: relative;
		width: 1200px;
		margin: 0 auto;
	}
	#wrapArticle #visualNews .visualNewsUl li{
		float: left;
		width: 20%;
		min-height: 72px;
		height: auto !important;
		_height: 72px;
		position: relative;
	}
	#wrapArticle #visualNews .visualNewsUl li .visualNews{
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: rgba(18, 54, 98, 0.8);
	}
	#wrapArticle #visualNews .visualNewsUl li .visualNews .relative{
		position: relative;
	}
	/*#wrapArticle #visualNews .visualNewsUl li._1st .visualNews{
		background-color: rgba(18, 54, 98, 0.8);
	}*/
	#wrapArticle #visualNews .visualNewsUl li._2nd .visualNews{
		background-color: rgba(0, 87, 147, 0.8);
	}
	#wrapArticle #visualNews .visualNewsUl li._3rd .visualNews{
		background-color: rgba(36, 131, 200, 0.8);
	}
	#wrapArticle #visualNews .visualNewsUl li._last .visualNews{
		background-color: rgba(44, 173, 221, 0.8);
	}
	#wrapArticle #visualNews .visualNewsUl li .visualNews .newsToggle{
		position: absolute;
		width: 100%;
		height: 72px;
		border: 0;
		top: 0;
		left: 0;
		overflow: hidden;
		cursor: pointer;
		background-color: transparent;
	}
	#wrapArticle #visualNews .visualNewsUl li .visualNews .newsToggle > span{
		background-color: rgba(0, 0, 0, 0.3);
		background-repeat: no-repeat;
		background-position: 50% 50%;
		border-radius: 3px;
		position: absolute;
		top: 2px;
		left: 2px;
		width: 26px;
		height: 18px;
		overflow: hidden;
		text-indent: -5000px;
	}
	#wrapArticle #visualNews .visualNewsUl li .visualNews .newsToggle.newsOpen > span{
		background-image: url("../images/main/visualNewsToggleUp.png");
	}
	#wrapArticle #visualNews .visualNewsUl li .visualNews .newsToggle.newsClose > span{
		background-image: url("../images/main/visualNewsToggleDown.png");
	}
	#wrapArticle #visualNews .visualNewsUl li .visualNews .newsToggle.newsClose {
		display: none;
	}
	#wrapArticle #visualNews .visualNewsUl li .visualNews .newsWrap{
		margin: 0 15px;
		padding-top: 14px;
		display: block;
	}
	#wrapArticle #visualNews .visualNewsUl li .visualNews .newsWrap .title{
		display: block;
		color: #fff;
		font-size: 1.1em;
		line-height: 1.5;
		margin-left: 25px;
		margin-bottom: 14px;
		height: 44px;
		overflow: hidden;
	}
	#wrapArticle #visualNews .visualNewsUl li .visualNews .newsWrap .newsPic{
		display: none;
		text-align: center;
		padding-bottom: 15px;
	}
	#wrapArticle #visualNews .visualNewsUl li .visualNews .newsWrap .newsPic img{
		display: block;
		width: 100%;
		height: 142px;
	}
/***********************************
banner
***********************************/
	#wrapArticle #bannerZone{
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 40;
	}
	#wrapArticle #bannerZone a,
	#wrapArticle #bannerZone img{
		display: block;
	}
/***********************************
layout
***********************************/
	.mainWrap .mainDiv{
		padding: 30px 0;
	}
	.mainWrap .mainDiv.divOdd{
		background-color: #eceef2;
	}
	.mainWrap .mainDiv .resWrap{
		position: relative;
		width: 1200px;
	}
	.mainWrap .mainDiv .resWrap:before,
	.mainWrap .mainDiv .resWrap:after{
		content: "";
		display: block;
		clear: both;
	}
/***********************************
지금해군은, 오늘의 뉴스
***********************************/
	.nNews{
		position: relative;
		width: 609px;
		height: 408px;
		float: left;
	}
	.nNews h2{
		position: absolute;
		color: #fff;
		font-size: 13px;
		line-height: 2.4;
		padding: 0 1em;
		font-weight: normal;
	}
	.nNews .nNpic{
		height: 220px;
	}
	.nNews .nNpic img{
		width: 100%;
		height: 100%;
	}
	.nNews .nNcontent{
		border-width: 0 1px 1px;
		border-style: solid;
		border-color: #ddd;
		padding-bottom: 15px;
	}
	.nNews .nNcontent .nNdata{
		margin: 0 20px;
		height: 146px;
		overflow: hidden;
		margin-bottom: 20px;
	}
	.nNews .nNcontent .nNdata h3{
		padding-top: 20px;
		font-size: 1.4em;
		margin-bottom: 15px;
		line-height: 1.3;
		overflow: hidden;
		max-height: 48px;
		display: block;
	}
	.nNews .nNcontent .nNdata .contt{
		font-size: 1.1em;
		line-height: 1.6;
		height: 84px;
		overflow: hidden;
	}
	.nNews .nNcontent .nNetc{
		overflow: hidden;
		position: relative;
		margin: 0 20px;
	}
	.nNews .nNcontent .nNetc dl,
	.nNews .nNcontent .nNetc dl dt,
	.nNews .nNcontent .nNetc dl dd{
		float: left;
		height: 20px;
		line-height: 20px;
		color: #888;
		font-size: 0.94em;
	}
	.nNews .nNcontent .nNetc dl dt{
		text-indent: -5000px;
	}
	.nNews .nNcontent .nNetc dl.date {
		margin-right: 10px;
	}
	.nNews .nNcontent .nNetc dl.date dt{
		width: 19px;
		background: url("../images/common/iconDate.png") no-repeat 0 50%;
	}
	.nNews .nNcontent .nNetc dl.hit dt{
		width: 22px;
		background: url("../images/common/iconHit.png") no-repeat 0 50%;
	}
	#nToday{
		margin-right: 30px;
	}
	#nNow h2{
		background-color: #267fbc;
	}
	#nToday h2{
		background-color: #3a589b;
	}

/***********************************
공지사항/보도자료
***********************************/
	#nvRecent{
		position: absolute;
		top: 0;
		right: 0;
		width: 560px;
		height: 410px;
		border: 1px #ddd solid;
	}

	#nvRecent .nvRecentUl{
		position: relative;
		min-height: 360px;
		height: auto !important;
		_height: 360px;
	}
	.nvRecentUl .nvRecentLi{
	}
	.nvRecentUl .nvRecentLi .nvRecentTab{
		float: left;
		width: 50%;
		height: 50px;
		line-height: 50px;
		border: 0;
		font-size: 1.2em;
		background-color: #eee;
		cursor: pointer;
		color: #333;
	}
	.nvRecentUl .nvRecentLi .nvRecentInnerUl{
		position: absolute;
		top: 50px;
		left: 0;
		display: none;
		width: 100%;
		padding-top: 0.5em;
	}
	.nvRecentUl .nvRecentLi .nvRecentInnerUl .nvRecentInnerLi{
		margin: 0 1em;
		background: url("../images/main/recentBullet.gif") no-repeat 0 12px;
	}
	.nvRecentUl .nvRecentLi .nvRecentInnerUl .nvRecentInnerLi .nvRecentAnchor,
	.nvRecentUl .nvRecentLi .nvRecentInnerUl .nvRecentInnerLi .nvRecentInfo{
		display: block;
		position: relative;
		overflow: hidden;
	}
	.nvRecentUl .nvRecentLi .nvRecentInnerUl .nvRecentInnerLi .nvRecentInfo .nvRecentTitle,
	.nvRecentUl .nvRecentLi .nvRecentInnerUl .nvRecentInnerLi .nvRecentInfo dt,
	.nvRecentUl .nvRecentLi .nvRecentInnerUl .nvRecentInnerLi .nvRecentInfo dd{
		line-height: 2.5;
	}
	.nvRecentUl .nvRecentLi .nvRecentInnerUl .nvRecentInnerLi .nvRecentInfo .nvRecentTitle{
		display: block;
		font-weight: normal !important;
		font-size: 1em;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-right: 80px;
		padding-left: 10px;
		color: #666;

	}
	.nvRecentUl .nvRecentLi .nvRecentInnerUl .nvRecentInnerLi .nvRecentInfo .nvRecentTitle .newArtcl{
		width: 11px;
		height: 11px;
		overflow: hidden;
		text-indent: -5000px;
		display: inline-block;
		zoom: 1;
		_display: inline;
		background-position: 0 0;
	}
	.nvRecentUl .nvRecentLi .nvRecentInnerUl .nvRecentInnerLi .nvRecentInfo dl{
		position: absolute;
		top: 0;
		right: 0;
	}
	.nvRecentUl .nvRecentLi .nvRecentInnerUl .nvRecentInnerLi .nvRecentInfo dt,
	.nvRecentUl .nvRecentLi .nvRecentInnerUl .nvRecentInnerLi .nvRecentInfo dd{
		display: inline-block;
		zoom: 1;
		_display: inline;
		color: #777;
	}
	.nvRecentUl .nvRecentLi .nvRecentInnerUl .nvRecentInnerLi .nvRecentInfo dt{
		display: none;
	}
	.nvRecentUl .nvRecentLi .nvRecentInnerUl .nvRecentInnerLi:first-child{
		margin-top: 1em;
		margin-bottom: 1em;
		border-bottom: 1px #eee solid;
		background: none;
	}
	.nvRecentUl .nvRecentLi .nvRecentInnerUl .nvRecentInnerLi:first-child .nvRecentInfo .nvRecentTitle{
		padding-left: 0;
		font-size: 1.3em;
		color: #333;
	}
	.nvRecentUl .nvRecentLi .nvRecentInnerUl .nvRecentInnerLi:first-child .nvRecentInfo .nvRecentContent{
		color: #777;
		margin-bottom: 20px;
		line-height: 1.5;
		overflow: hidden;
	}


	/*active items*/
	.nvRecentUl .nvRecentLi.active .nvRecentInnerUl{
		display: block;
	}
	.nvRecentUl .nvRecentLi.active .nvRecentTab{
		color: #fff;
		background-color: #4e6d8a;
	}
	.nvRecentUl .nvRecentLi .nvRecentInnerUl .nvRecentInnerLi .nvRecentAnchor:hover .nvRecentTitle strong,
	.nvRecentUl .nvRecentLi .nvRecentInnerUl .nvRecentInnerLi .nvRecentAnchor:hover .nvRecentContent{
		color: #7190C6;
	}

/***********************************
대한민국해군모집/바로가기
***********************************/
	.oddttl{
		line-height: 2.6;
		font-size: 1.3em;
		background: url("../images/main/OddTitle.gif") no-repeat 0 0;
	}
	#recruit{
		float: left;
		width: 609px;
	}
	#recruit .recruitUl .recruitLi{
		float: left;
		width: 203px;
		height: 175px;
		background-repeat: no-repeat;
		background-position: 50% 12px;
	}
	#recruit .recruitUl .recruitLi#recruit01{
		background-image: url("../images/main/recruit01.png");
		background-color: #123662;
	}
	#recruit .recruitUl .recruitLi#recruit02{
		background-image: url("../images/main/recruit02.png");
		background-color: #005793;
	}
	#recruit .recruitUl .recruitLi#recruit03{
		background-image: url("../images/main/recruit03.png");
		background-color: #00a5e2;
	}
	#recruit .recruitUl .recruitLi .aBox{
		display: block;
		text-align: center;
		color: #fff;
		font-size: 1.2em;
		padding-top: 130px;
	}
	#recruit .recruitUl .recruitLi .aBox a{
		color: #fff;
	}
	#directGo{
		position: absolute;
		top: 0;
		right: 0;
		width: 560px;
	}
	#directGo ._relative{
		position: relative;
		border: 1px #ddd solid;
		background-color: #fff;
	}
	#directGo .directGoUl {
		overflow: hidden;
		text-align:center;
	}
	#directGo .directGoUl .directGoLi {
		margin-top: 30px;
		display: inline-block;
		*zoom: 1;
		height: 130px;
		overflow: hidden;
		text-align: center;
		background-color: #fff;
		background-repeat: no-repeat;
		background-position: 50% 0;
		_display: inline;
	}
	#directGo .directGoUl .directGoLi a{
		display: block;
		padding-top: 90px;
	}
	#directGo .directGoUl .directGoLi#directGo01{
		background-image: url("../images/main/directGo01.png");
	}
	#directGo .directGoUl .directGoLi#directGo02{
		background-image: url("../images/main/directGo02.png");
	}
	#directGo .directGoUl .directGoLi#directGo03{
		background-image: url("../images/main/directGo03.png");
	}
	#directGo .directGoUl .directGoLi#directGo04{
		background-image: url("../images/main/directGo04.png");
	}
	#directGo .directGoUl .directGoLi#directGo05{
		background-image: url("../images/main/directGo05.png");
	}
	#directGo .directGoUl .directGoLi#directGo06{
		background-image: url("../images/main/directGo06.png");
	}
	#directGo .bx-controls{
		display: none;
	}
/***********************************
pr
***********************************/
	#pr {
		float: left;
		margin-right: 30px;
		width: 228px;
		border: 1px #ddd solid;
	}
	#pr .prUl .prLi .aLink{
		height: 115px;
		background-position: 150px 50%;
		background-repeat: no-repeat;
	}
	#pr .prUl .prLi .aLink#pr01{
		border-bottom: 1px #ddd solid;
		background-image: url("../images/main/pr01.png");
	}
	#pr .prUl .prLi .aLink#pr02{
		border-bottom: 1px #ddd solid;
		background-image: url("../images/main/pr02.png");
	}
	#pr .prUl .prLi .aLink#pr03{
		background-image: url("../images/main/pr03.png");
	}
	#pr .prUl .prLi .aLink span,
	#pr .prUl .prLi .aLink strong{
		display: block;
		margin-left: 15px;
	}
	#pr .prUl .prLi .aLink span{
		padding-top: 40px;
	}
	#pr .prUl .prLi .aLink strong{
		font-size: 1.4em;
		line-height: 1.6;
	}
	#pr .prUl .prLi .aLink strong em{
		color: #3d9bc5;
	}
/***********************************
gallery
***********************************/
	#gallery{
		float: left;
		margin-right: 30px;
		width: 298px;
		height: 349px;
		border: 1px #ddd solid;
		position: relative;
		overflow: hidden;
	}
	#gallery h2,
	#gallery .galleryUl{
		margin: 0 20px;
	}
	#gallery h2{
		padding-top: 5px;
		font-size: 1.4em;
		line-height: 2.5;
		border-bottom: 1px #ddd solid;
	}
	#gallery .galleryUl .galleryLi {
		padding-top: 16px;
	}
	#gallery .galleryUl .galleryLi .aLink{
		position: relative;
		overflow: hidden;
	}
	#gallery .galleryUl .galleryLi .aLink .galpic{
		float: left;
		width: 112px;
		height: 74px;
		border: 1px #ddd solid;
	}
	#gallery .galleryUl .galleryLi .aLink .galpic img{
		width: 100%;
		height: 100%;
	}
	#gallery .galleryUl .galleryLi .aLink .galcontent{
		margin-left: 125px;
		padding-top: 15px;
	}
	#gallery .galleryUl .galleryLi .aLink .galcontent h3{
		font-size: 1em;
	}
	#gallery .galleryUl .galleryLi .aLink .galcontent dl dt{
		display: none;
	}
	#gallery .galleryUl .galleryLi .aLink .galcontent dl dd{
		font-size: 0.94em;
		color: #777;
	}
	#gallery .more{
		overflow: hidden;
		text-indent: -5000px;
		position: absolute;
		top: 20px;
		right: 20px;
		border: 1px #ddd solid;
		width: 10px;
		height: 10px;
		background: url("../images/main/galMore.gif") #fff no-repeat 50% 50%;
	}
/***********************************
SNS
***********************************/
	#nvSns{
		float: left;
		margin-right: 30px;
		width: 289px;
		height: 349px;
		border: 1px #ddd solid;
		overflow: hidden;
	}

	#nvSns .nvSnsUl{
		position: relative;
		min-height: 300px;
		height: auto !important;
		_height: 360px;
	}
	.snsBtn{
		overflow: hidden;
	}
	.nvSnsBtn{
		float: left;
		width: 33.3%;
		background-color: #cdcdcd;
	}
	.nvSnsBtn .nvGab{
		border-left: 1px #fff solid;
		display: block;
	}
	.nvSnsBtn.fb .nvGab{
		border: 0;
	}
	.nvSnsTab{
		display: block;
		width: 50px;
		height: 50px;
		border: 0;
		margin: 0 auto;
		background-image: url("../images/main/sns.gif");
		background-repeat: no-repeat;
		cursor: pointer;
		color: #fff;
		text-indent: -5000px;
	}
	.nvSnsTab.fb{
		background-position: 0px -50px;
	}
	.nvSnsTab.is{
		background-position: -50px -50px;
	}
	.nvSnsTab.yt{
		background-position: -100px -50px;
	}
	.nvSnsUl .nvSnsLi .nvSnsInnerUl{
		position: absolute;
		top: 0;
		left: 0;
		display: none;
		width: 100%;
		padding-top: 0.5em;
	}
	.nvSnsUl .nvSnsLi .nvSnsInnerUl a.navyBlog{
		display: block;
		width: 100%;
		height: 290px;
		text-indent: -5000px;
		background: url("../images/naver_logo.gif") no-repeat 50% 50%;
	}
	.nvSnsUl .nvSnsLi .nvSnsInnerUl a.navyInstar{
		display: block;
		width: 100%;
		height: 290px;
		text-indent: -5000px;
		background: url("../images/instagram_logo.gif") no-repeat 50% 50%;
	}
	.nvSnsUl #facebook.nvSnsLi .nvSnsInnerUl .aLink{
		margin: 15px;
	}
	.nvSnsUl #facebook.nvSnsLi .nvSnsInnerUl .aLink .content{
		margin-bottom: 0.5em;
	}
	.nvSnsUl #facebook.nvSnsLi .nvSnsInnerUl .aLink .pic{
		margin-bottom: 1em;
	}
	.nvSnsUl #facebook.nvSnsLi .nvSnsInnerUl .aLink .pic img{
		display: block;
		width: 100%;
	}
	.nvSnsUl #facebook.nvSnsLi .nvSnsInnerUl .aLink .etc{
		overflow: hidden;
		position: relative;
	}
	.nvSnsUl #facebook.nvSnsLi .nvSnsInnerUl .aLink .etc dl,
	.nvSnsUl #facebook.nvSnsLi .nvSnsInnerUl .aLink .etc dl dt,
	.nvSnsUl #facebook.nvSnsLi .nvSnsInnerUl .aLink .etc dl dd{
		float: left;
		height: 20px;
		line-height: 20px;
		color: #888;
		font-size: 0.94em;
	}
	.nvSnsUl #facebook.nvSnsLi .nvSnsInnerUl .aLink .etc dl dt{
		text-indent: -5000px;
	}
	.nvSnsUl #facebook.nvSnsLi .nvSnsInnerUl .aLink .etc .date {
		margin-right: 10px;
	}
	.nvSnsUl #facebook.nvSnsLi .nvSnsInnerUl .aLink .etc .date dt{
		width: 19px;
		background: url("../images/common/iconDate.png") no-repeat 0 50%;
	}
	.nvSnsUl #facebook.nvSnsLi .nvSnsInnerUl .aLink .etc .recommend dt{
		width: 17px;
		background: url("../images/common/iconRecommend.png") no-repeat 0 50%;
	}


	/*active items*/
	.nvSnsUl .nvSnsLi.active .nvSnsInnerUl{
		display: block;
	}
	.nvSnsTab.fb{
		background-position: 0 -50px;
	}
	.nvSnsTab.is{
		background-position: -50px -50px;
	}
	.nvSnsTab.yt{
		background-position: -100px -50px;
	}
	.nvSnsBtn.fb.active{
		background-color: #3a589b;
	}
	.nvSnsBtn.is.active{
		background-color: #cc0066;
	}
	.nvSnsBtn.yt.active{
		background-color: #ce3525;
	}
	.nvSnsBtn.fb.active .nvSnsTab{
		background-position: 0 0;
	}
	.nvSnsBtn.is.active .nvSnsTab{
		background-position: -50px 0;
	}
	.nvSnsBtn.yt.active .nvSnsTab{
		background-position: -100px 0;
	}
	/*face book*/
	.nvSnsUl .nvSnsLi.active .nvSnsInnerUl .fb_iframe_widget,
	.nvSnsUl .nvSnsLi.active .nvSnsInnerUl .fb_iframe_widget span{
		display: block;
		width: 100% !important;
		text-align: center;
	}
	.nvSnsUl .nvSnsLi.active .nvSnsInnerUl .fb_iframe_widget iframe{
		position: static !important;
		display: inline-block;
		*zoom: 1;
		_display: inline;
	}
	#instaPics {  
		overflow: hidden;  
	}  
	.sns-box {  
		position: relative;  
		margin-bottom: 30px;
	}  
	#instaPics .image-layer {  
		padding: 10px 10px 0 10px;
	}  
	.image-layer img {  
		width: 100%;  
		border: 1px solid #ddd;  
	}  
	#instaPics .caption-layer {
		position: relative;
		background: rgba(255,255,255,0.8);  
		height: 90px;  
		width: 100%;  
		padding: 20px 10px 10px 10px;  
		box-sizing: border-box;  
		font-size: 1em;  
		color: #333;
		overflow: hidden;
	}  
	.insta-likes {  
		position: absolute;
		top: 0px;
		right: 10px;
		display: block;
		text-align: right;
	}
	#youtbPics {  
		overflow: hidden;  
	}
	#youtbPics .image-layer {  
		padding: 10px;
	}
	#youtbPics .caption-layer {
		position: relative;
		background: rgba(255,255,255,0.8);  
		height: 90px;  
		width: 100%;  
		padding: 10px;  
		box-sizing: border-box;  
		font-size: 1em;  
		color: #333;
		overflow: hidden;
	}

/***********************************
event
***********************************/
	#event{
		position: absolute;
		right: 0;
		width: 289px;
		height: 348px;
		border: 1px #ddd solid;
		overflow: hidden;
	}
	#event .eventWrap{
		position: relative;
	}
	#event .eventWrap h2{
		position: absolute;
		color: #fff;
		font-size: 13px;
		line-height: 2.4;
		padding: 0 1em;
		font-weight: normal;
		background-color: #267fbc;
		z-index: 100;
	}
	#event .eventUl > li a{
		display: block;
	}
	#event .eventUl > li a img{
		width: 289px;
		height: 348px;
		display: block;
	}
	#event .bx-controls{
		position: absolute;
		bottom: 17px;
		left: 0;
		width: 100%;
		z-index: 100;
		text-align: center;
	}
	#event .bx-controls div{
		display: inline-block;
		*zoom: 1;
		_display: inline;
	}

	#event .bx-controls .bx-pager .bx-pager-item a,
	#event .bx-controls .bx-controls-auto .bx-controls-auto-item a{
		background-image: url("../images/main/eventHandler.png");
		height: 12px;
		display: inline-block;
		*zoom: 1;
		_display: inline;
		margin: 0 2px;
		overflow: hidden;
		text-indent: -5000px;
	}

	#event .bx-controls .bx-pager .bx-pager-item .active{
		width: 39px;
		background-position: 0 0;
	}
	#event .bx-controls .bx-pager .bx-pager-item a{
		width: 12px;
		background-position: -39px 0;
	}
	#event .bx-controls .bx-controls-direction{
		display: none;
	}
	#event .bx-controls .bx-controls-auto .bx-controls-auto-item a{
		width: 12px;
	}
	#event .bx-controls .bx-controls-auto .bx-controls-auto-item .bx-start{
		background-position: -63px 0;
	}
	#event .bx-controls .bx-controls-auto .bx-controls-auto-item .bx-stop{
		background-position: -51px 0;
	}
	#event .bx-controls .bx-controls-auto .bx-controls-auto-item .active{
		display: none;
	}

/***********************************
responsive
***********************************/
@media only screen and (min-width: 240px) and (max-width: 370px){
	#mVisualWrap #mvPager ._relative{
		padding-top: 14px;
	}
	#mVisualWrap #mvPager ._list {
		zoom: 0.7;
		margin-top: 22px !important;
	}
	#wrapArticle #timer {
		display: none;
	}
}
@media only screen and (min-width: 240px) and (max-width: 480px){
	#wrapArticle #visualNews .visualNewsUl,
	#mVisualWrap #mvPager ._relative,
	#wrapArticle #mBann ._relative,
	.mainWrap .mainDiv .resWrap{
		min-width: 240px;
		width: auto !important;
		_width: 240px;
	}
	#wrapArticle #mBann{
		height: 50px;
		bottom: 0;
	}
	#wrapArticle #timer {
		right: auto;
		left: 10px;
		bottom: 9px;
		-ms-zoom: 0.6;
		-ms-transform-origin: 0 0;
		-moz-transform: scale(0.6);
		-moz-transform-origin: 0 0;
		-o-transform: scale(0.6);
		-o-transform-origin: 0 0;
		-webkit-transform: scale(0.6);
		-webkit-transform-origin: 0 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.6, M12=0, M21=0, M22=0.6, SizingMethod='auto expand')";
	}
	#wrapArticle #bannerZone {
		right: 0;
	}
	#wrapArticle #bannerZone img{
		height: 45px;
	}
	#mVisualWrap #mvPager{
		bottom: 50px;
		height: 50px;
		border-bottom: 1px #5e7187 solid;
		background-color: rgba(51,78,111,0.8);
		width: 100%;
		text-align: center;
	}
	#mVisualWrap #mvPager ._list{
		margin-top: 10px;
	}
	#mVisualWrap #mvPager #mvPrev,
	#mVisualWrap #mvPager #mvNext {
		display: none;
	}
	#mVisualWrap #mvPager ._list a img{
		height: 30px;
	}
	#mVisualWrap #mvPager ._relative{
		padding-top: 10px;
		text-align: center;
	}
	#mVisualWrap,
	#mVisualWrap .mVisualRelative,
	#mVisualWrap .bx-wrapper,
	#mVisualWrap .mVisual li,
	#mVisualWrap .mVisual li .resWrap{
		height: 550px;
	}
	#mVisualWrap .mVisual li {
		background-size: auto 550px;
	}
	#mVisualWrap .mVisual li .resWrap img.text {
		bottom: 216px;
		max-width: 80%;
		width: auto !important;
		_width: 80%;
	}
	#mVisualWrap .mVisual li .resWrap img.map{
		display: none;
	}
	#wrapArticle #visualNews {
		bottom: 111px;
	}
	#wrapArticle #visualNews .visualNewsUl li {
		width: 50%;
		min-height: 48px;
		height: auto !important;
		_height: 48px;
	}
	#wrapArticle #visualNews .visualNewsUl li .visualNews .newsToggle{
		height: 48px;
	}
	#wrapArticle #visualNews .visualNewsUl li .visualNews .newsWrap .title {
		color: #fff;
		font-size: 0.9em;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		height: 20px;
	}
	#wrapArticle #bannerZone {
		padding-right: 1em;
	}
	#wrapArticle #bannerZone img{
		height: 45px;
	}
	#wrapArticle .mVisualGuide {
		height: 50px;
	}
	.mainWrap .mainDiv .resWrap{
		margin: 0 1em;
	}
	#nNow,
	#nToday,
	#recruit,
	#pr,
	#gallery,
	#nvSns {
		width: auto;
		float:none;
		margin: 0;
	}
	#instaPics .caption-layer {
		height: 60px;
	}
	#youtbPics .caption-layer {
		height: 50px;
		padding-top: 0px;
	}
	#nvRecent,
	#directGo,
	#event{
		position: relative;
		width: auto;
	}

	.nvRecentUl .nvRecentLi .nvRecentInnerUl .nvRecentInnerLi:first-child .nvRecentInfo .nvRecentContent{
		height: 75px;
	}

	#recruit {
		margin-bottom: 30px;
	}
	#recruit .recruitUl .recruitLi{
		float: none;
		width: 100%;
	}
	#directGo .bx-viewport {
		height: auto !important;
	}
	#directGo ._relative{
		height: auto;
	}
	#directGo .directGoUl {
		height: auto;
		padding-bottom: 30px;
	}
	#directGo #directPrev,
	#directGo #directNext{
		display: none;
	}
	#directGo .directGoUl .directGoLi {
		width: 84px !important;
	}

	#pr,
	#gallery,
	#nvSns {
		margin-bottom: 10px;
	}

	#pr .prUl .prLi .aLink {
		background-position: 80% 50%;
	}
	#event {
	}
	#event .eventUl > li,
	#event .eventUl > li a,
	#event .eventUl > li a img {
		width: 100%;
	}
}
@media only screen and (min-width: 240px) and (max-width: 620px){
	#mVisualWrap .mVisual li .resWrap img.map {
		display: none;
	}
}
@media only screen and (min-width: 481px) and (max-width: 768px){
	#mVisualWrap .mVisualRelative,
	#wrapArticle #visualNews .visualNewsUl,
	.mainWrap .mainDiv .resWrap{
		width: 768px;
	}
	#wrapArticle #mBann{
		height: 60px;
		bottom: 10px;
	}
	#wrapArticle #timer {
		right: auto;
		left: 20px;
		bottom: 17px;
		-ms-zoom: 0.8;
		-ms-transform-origin: 0 0;
		-moz-transform: scale(0.8);
		-moz-transform-origin: 0 0;
		-o-transform: scale(0.8);
		-o-transform-origin: 0 0;
		-webkit-transform: scale(0.8);
		-webkit-transform-origin: 0 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8, M12=0, M21=0, M22=0.8, SizingMethod='auto expand')";
	}
	#wrapArticle #bannerZone {
		right: 10px;
	}
	#wrapArticle #bannerZone img{
		height: 50px;
	}
	#mVisualWrap #mvPager{
		bottom: 60px;
		height: 60px;
		border-bottom: 1px #5e7187 solid;
		background-color: rgba(51,78,111,0.8);
		width: 100%;
		text-align: center;
	}
	#mVisualWrap #mvPager ._list{
		margin-top: 10px;
	}
	#mVisualWrap,
	#mVisualWrap .mVisualRelative,
	#mVisualWrap .bx-wrapper,
	#mVisualWrap .mVisual li,
	#mVisualWrap .mVisual li .resWrap{
		height: 674px;
	}
	#mVisualWrap .mVisual li {
		background-size: auto 674px;
	}
	#mVisualWrap .mVisual li .resWrap img.text {
		bottom: 295px;
		height: 70px;
	}
	#mVisualWrap .mVisual li .resWrap img.map {
		bottom: 300px;
	}
	#wrapArticle #visualNews {
		bottom: 121px;
	}
	#wrapArticle #visualNews .visualNewsUl li {
		width: 50%;
	}
	#wrapArticle .mVisualGuide {
		height: 60px;
	}
	.nNews{
		width: 372px;
	}
	#nNow {
		margin-right: 20px;
	}
	#nvRecent {
		width: 310px;
		height: 414px;
	}
	.nvRecentUl .nvRecentLi .nvRecentInnerUl .nvRecentInnerLi:first-child .nvRecentInfo .nvRecentContent {
		max-height: 107px;
		height: auto !important;
	}
	#recruit .recruitUl .recruitLi {
		width: 124px;
		height: 270px;
	}
	#recruit .recruitUl .recruitLi#recruit01,
	#recruit .recruitUl .recruitLi#recruit02,
	#recruit .recruitUl .recruitLi#recruit03{
		background-size: 100px auto;
		background-position: 50% 60px;
		letter-spacing: -0.1em;
	}
	#recruit .recruitUl .recruitLi .aBox {
		font-size: 1.1em;
		padding-top: 170px;
	}
	#directGo ,
	#directGo ._relative {
		width: 380px;
	}
	#directGo ._relative{
		height: 270px;
	}
	#directGo ._relative .directResp{
		overflow-y: auto;
	}
	#directGo ._relative #directPrev,
	#directGo ._relative #directNext{
		position: absolute;
		top: 50px;
		display: none;
	}
	#directGo .directGoUl .directGoLi {
		width: 100px !important;
		margin-top: 15px;
	}
	#pr {
		float: none;
		width: 100%;
		margin-right: 0;
		margin-bottom: 15px;
	}
	#pr:before,
	#pr:after {
		content: "";
		clear: both;
		display: block;
	}
	#pr .prUl .prLi {
		float: left;
		width: 33.3%;
	}
	#pr .prUl .prLi .aLink#pr01,
	#pr .prUl .prLi .aLink#pr02{
		border-bottom: 0;
		border-right: 1px #ddd solid;
	}
	#event {
		bottom: 0;
	}
	#gallery {
		width: 225px;
		margin-right: 10px;
	}
	#gallery .galleryUl .galleryLi .aLink .galpic {
		width: 85px;
		height: 70px;
	}
	#gallery .galleryUl .galleryLi .aLink .galcontent {
		margin-left: 97px;
		padding-top: 5px;
	}
	#nvSns {
		width: 229px;
	}
	#instaPics .caption-layer {
		height: 130px;
	}
	#youtbPics .caption-layer {
		height: 120px;
	}
}
@media only screen and (min-width: 769px) and (max-width: 1044px){
	#mVisualWrap .mVisualRelative,
	#wrapArticle #visualNews .visualNewsUl,
	.mainWrap .mainDiv .resWrap{
		width: 1024px;
	}
	#wrapArticle #visualNews .visualNewsUl li .visualNews .newsWrap {
		margin: 0 10px;
	}
	#nNow {
		margin-left: 40px;
		margin-right: 20px;
	}
	.nNews{
		width: 507px;
	}
	#nvRecent{
		width: 460px;
	}
	#recruit{
		margin-left: 40px;
	}
	#recruit .recruitUl .recruitLi {
		width: 155px;
	}
	#directGo {
		width: 500px;
	}
	#directGo .bx-viewport {
		height: 175px !important;
	}
	#directGo ._relative{
		height: 175px;
	}
	#directGo #directPrev,
	#directGo #directNext{
		display: none;
	}
	#directGo .directGoUl .directGoLi {
		width: 76px !important;
	}
	#pr{
		margin-left: 40px;
		margin-right: 10px;
		width: 204px;
	}
	#pr .prUl .prLi .aLink{
		background-position: 125px 50%;
	}
	#pr .prUl .prLi .aLink span,
	#pr .prUl .prLi .aLink strong{
		margin-left: 10px;
	}
	#pr .prUl .prLi .aLink strong {
		font-size: 1.3em;
	}
	#gallery {
		width: 226px;
		margin-right: 10px;
	}
	#gallery .galleryUl .galleryLi .aLink .galpic {
		width: 90px;
		height: 74px;
	}
	#gallery .galleryUl .galleryLi .aLink .galcontent {
		margin-left: 102px;
		padding-top: 5px;
	}
	#nvSns {
		width: 228px;
		margin-right: 10px;
	}
	#instaPics .caption-layer {
		height: 130px;
	}
	#youtbPics .caption-layer {
		height: 120px;
	}
	#event {
		top: 0;
	}
	#timer{
		-ms-zoom: 0.8;
		-ms-transform-origin: 0 0;
		-moz-transform: scale(0.8);
		-moz-transform-origin: 0 0;
		-o-transform: scale(0.8);
		-o-transform-origin: 0 0;
		-webkit-transform: scale(0.8);
		-webkit-transform-origin: 0 0;
		-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.8, M12=0, M21=0, M22=0.8, SizingMethod='auto expand')";
		bottom: 25px;
		right: 220px;
	}
}
@media only screen and (min-width: 1045px){
	#event {
		top: 0;
	}
	#directGo .bx-viewport {
		height: 175px !important;
	}
	#directGo ._relative{
		height: 175px;
	}
	#directGo #directPrev,
	#directGo #directNext{
		display: none;
	}
	#directGo .directGoUl .directGoLi {
		width: 84px !important;
	}
	#timer {
		bottom:28px;
		right: 290px;
	}
	#mVisualWrap .mVisualRelative {
		width: 1200px;
	}
}