@charset "utf-8";

html, body{
	width: 100%;
	height: 100%;
	margin:0;
	padding:0;
}
body{

}
/***********************************
common
***********************************/
	#wrap{
		position: relative;
	}
	.resWrap{
		margin: 0 auto;
		position: relative;
	}
	.aLink{
		display: block;
	}
/***********************************
header
***********************************/
	#wrapHeader{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 180px;
		z-index: 2;
		background: url("../images/@layout/bgWrapHeader.png") left top;
	}
	#utillWrap{
		height: 25px;
		background-color: rgba(0,0,0,.55);
		border-bottom: 1px #777 solid;
	}
	#utillUl{
		float: right;
		height: 25px;
		overflow: hidden;
	}
	#utillUl li{
		float: left;
	}
	#utillUl li a,
	#utillUl li button{
		background-color: transparent;
		border-width: 0 0 0 1px;
		border-style: solid;
		border-color: #777;
		height: 25px;
		line-height: 25px;
		color: #fff;
		cursor: pointer;
	}
	#utillUl li a{
		display: block;
		padding: 0 1em;
	}
	#utillUl li #utilAllMenu.allMenu{
		width: auto;
		text-align: left;
		padding: 0 50px 0 25px;
		border-width: 0 1px 0 1px;
		line-height: 23px;
		background-color: #37387f;
		background-image: url("../images/common/utilAllmenu.gif");
		background-position: 100px 50%;
		background-repeat: no-repeat;
	}
	#utillUl li #utilAllMenu.allMenu.on{
		background-image: url("../images/common/utilAllmenuClose.gif");
	}
	#utillUl li button{
		padding: 0;
		text-align: center;
		float: left;
		width: 44px;
	}
	#wrapHeader #header h1 {
		position: absolute;
		top: 10px;
		left: 0;
		background: url("../images/common/logo.png") left top no-repeat;
		width: 167px;
		height: 56px;
		text-indent: -5000px;
	}
	#wrapHeader #header h1 a {
		display: block;
		height: 56px;
	}
	#wrapHeader #header #gnb {
		top: 12px;
		height: 59px;
		z-index: 2;
	}
	#wrapHeader #header #gnb ,
	#wrapHeader #header #gnbSubWrap {
	}
	#wrapHeader #header #gnb {
		position: absolute;
		top: 12px;
		height: 59px;
		z-index: 2;
		right: 0;
		width: 980px;
	}
	#wrapHeader #header #gnbSubWrap {
		position: absolute;
		top: 71px;
		right: 67px;
		width: 873px;
		height: 300px;
		z-index: 1;
		display: none;
		background: url("../images/common/gnbSubWrap.png") no-repeat right bottom #494949;
		border-bottom: 2px rgba(178,178,178,0.3) solid;
	}
	#wrapHeader #header #mobileAllMenu {
		display: none;
	}
/***********************************
Article
***********************************/
	#wrapArticle{
		position: relative;
		z-index: 1;
	}
	#wrap_subVisual{
		background-color: #194357;
		background-repeat: no-repeat;
		background-position: 50% 0;
		height: 346px;
	}
	#wrap_subVisual.subVisual01{
		background-image: url("../images/common/subVisual01.jpg");
	}
	#wrap_subVisual.subVisual02{
		background-image: url("../images/common/subVisual02.jpg");
	}
	#wrap_subVisual.subVisual03{
		background-image: url("../images/common/subVisual03.jpg");
	}
	#wrap_subVisual.subVisual04{
		background-image: url("../images/common/subVisual04.jpg");
	}
	#wrap_subVisual.subVisual05{
		background-image: url("../images/common/subVisual05.jpg");
	}
	#wrap_subVisual.subVisual06{
		background-image: url("../images/common/subVisual06.jpg");
	}
	#wrap_subVisual.subVisual07{
		background-image: url("../images/common/subVisual07.jpg");
	}
	#wrap_subVisual.subVisual08{
		background-image: url("../images/common/subVisual08.jpg");
	}
	#wrap_subVisual.subVisual09{
		background-image: url("../images/common/subVisual09.jpg");
	}
	#wrap_subVisual .resWrap{
		height: 100%;
	}
	#wrap_subVisual .resWrap #visualTitle{
		position: absolute;
		width: 392px;
		height: 139px;
		bottom: 15px;
		left: -9px;
		background: url("../images/@layout/bgVisualTitle.png") no-repeat 50% 0;
	}
	#wrap_subVisual .resWrap #visualTitle strong,
	#wrap_subVisual .resWrap #visualTitle em{
		display: block;
		margin-left: 35px;
	}
	#wrap_subVisual .resWrap #visualTitle strong{
		color: #79dbff;
		padding-top: 30px;
		font-size: 2em;
		line-height: 2;
	}
	#wrap_subVisual .resWrap #visualTitle em{
		color: #fff;
		font-size: 1.2em;
		letter-spacing: 6px;
	}
	#wrap_submenu{
		border-width: 1px 0;
		border-style: solid;
		border-color: #e1e2e6;
		background-color: #fff;
		position: relative;
		z-index: 3;
	}
	#wrap_submenu.FsubMenu {
		position: fixed!important;
		z-index: 1;
		top: 0;
		width: 100%;
		background-color: rgba(73,73,73,0.9)
	}
	#wrap_ContentBox{
		border-width: 0 1px;
		border-style: solid;
		border-color: #e1e2e6;
		margin: auto;
		padding-bottom: 100px;
		position: relative;
	}
	#wrap_ContentBox #mbsEditor{
		position: absolute;
		top: 0;
		left: 0;
		padding: 5px;
		border: 1px solid #DCDCDC;
		width: 40px;
		text-align: center;
	}
	#wrap_ContentBox #wrap_subContentBox{
		margin: 0 44px;
	}
/***********************************
Footer
***********************************/
	#wrapFooter {
		position: relative;
		z-index: 2;
		background-color: #494949;
		height: 170px;
	}
	#wrapFooter #footer #footMlist{
		border-bottom: 1px #777 solid;
		height: 60px;
		overflow: hidden;
	}
	#wrapFooter #footer #footMlist li{
		float: left;
	}
	#wrapFooter #footer #footMlist li a{
		float: left;
		padding: 0 10px;
		line-height: 60px;
		color: #fff;
		background: url("../images/common/footMlistLiGab.gif") right 50% no-repeat;
	}
	#wrapFooter #footer #footMlist li a:hover{
		color: #f8ebbc;
	}
	#wrapFooter #footer #footMlist li:first-child a{
		padding: 0 10px 0 0;
	}
	#wrapFooter #footer #footJumpMenu{
		position: absolute;
		top: 15px;
		right: 0;
	}
	#wrapFooter #footer #footJumpMenu h2{
		display: none;
	}
	#wrapFooter #footer #footJumpMenu .jumpMenu{
		float: left;
		margin-left: 1em;
		height: 30px;
	}
	#wrapFooter #footer #footJumpMenu select{
		float: left;
		height: 30px;
		background-color: #494949;
		border: 1px #999 solid;
		color: #999;
		margin-right: 4px;
	}
	#wrapFooter #footer #footJumpMenu button{
		float: left;
		height: 30px;
		line-height: 30px;
		background-color: #999;
		color: #fff;
		border: 0;
		padding: 0 10px;
	}
	#wrapFooter #footer #footCopyright{
		padding: 20px 0;
		color: #c8c8c8;
	}



/***********************************
responsive
***********************************/
@media only screen and (min-width: 260px) and (max-width: 480px){
		body,
		#wrap,
		.resWrap, 
		#wrap_ContentBox{
			max-width: 480px;
			width: auto !important;
			min-width: 240px;
		}
		#utillUl li._zoom {
			display: none;
		}
		#wrapHeader #header #gnb {
			display: none;
		}
		#wrapHeader #header #mobileAllMenu {
			display: block;
			position: absolute;
			right: 20px;
			top: 12px;
			width: 55px;
			height: 55px;
			border: 0;
			text-indent: -5000px;
			z-index: 1000;
			background: url("../images/common/tablet/allMenu.png") left top no-repeat;
		}
		#wrapHeader #header #mobileAllMenu.on {
			background: url("../images/common/tablet/allMenuOff.png") left top no-repeat;
		}
		#wrap_submenu{
			background-color: #f7f7f7;
			height: 10px;
		}
		#wrap_submenu.FsubMenu{
			display: none;
		}
		#wrap_submenu .resWrap{
			display: none;
		}
		#wrap_subVisual .resWrap #visualTitle {
			width: 100%;
			height: 139px;
			bottom: 15px;
			left: 0;
			background: url("../images/@layout/mobile/bgVisualTitle.png");
			background-repeat: no-repeat;
			background-position: 50% 0;
			background-size: 100% 139px;
		}
		#wrap_subVisual .resWrap #visualTitle strong, 
		#wrap_subVisual .resWrap #visualTitle em{
			text-align: center;
			margin-left: 0;
		}
		#wrap_ContentBox #wrap_subContentBox{
			margin: 0 20px;
			overflow: hidden
		}
		#wrapFooter {
			height: auto;
		}
		#wrapFooter #footer #footMlist li a {
			line-height: 40px;
		}
		#wrapFooter #footer #footJumpMenu{
			display: none;
		}
		#wrapFooter #footer #footMlist{
			height: auto;
		}
		#wrapFooter #footer #footMlist li:first-child a {
			padding: 0 10px;
		}
		#wrapFooter #footer #footCopyright {
			text-align: center;
		}
}
@media only screen and (min-width: 481px) and (max-width: 768px){
		.resWrap,
		#wrapHeader,
		#wrapArticle,
		#wrapFooter,
		#wrap_ContentBox{
			min-width: 768px;
			width: auto !important;
			_width: 768px;
		}
		#utillUl li._zoom {
			display: none;
		}
		#wrapHeader #header #gnb {
			display: none;
		}
		#wrapHeader #header .allMenu {
			right: 20px;
			width: 55px;
			height: 55px;
			top: 12px;
			background: url("../images/common/tablet/allMenu.png") left top no-repeat;
			z-index: 2000;
		}
		#wrapHeader #header .allMenu.on {
			background: url("../images/common/tablet/allMenuOff.png") left top no-repeat;
		}
		#wrap_submenu{
			background-color: #f7f7f7;
			height: 10px;
		}
		#wrap_submenu.FsubMenu{
			display: none;
		}
		#wrap_submenu .resWrap{
			display: none;
		}
		#wrap_subVisual {
			overflow: hidden;
		}
		#wrap_subVisual .resWrap #visualTitle {
			width: 100% !important;
			height: 139px;
			bottom: 15px;
			left: 0;
			background-image: url("../images/@layout/tablet/bgVisualTitle.png");
			background-repeat: no-repeat;
			background-position: 50% 0;
			background-size: 98% 139px;
		}
		#wrap_subVisual .resWrap #visualTitle strong, 
		#wrap_subVisual .resWrap #visualTitle em{
			text-align: center;
			margin-left: 0;
		}
		#wrap_ContentBox #wrap_subContentBox{
			margin: 0 20px;
			overflow: hidden;
		}
		#wrapFooter #footer #footMlist li:first-child a {
			padding: 0 10px;
		}
		#wrapFooter #footer #footJumpMenu {
			display: none;
		}
		#wrapFooter #footer #footCopyright{
			padding-left: 10px;
		}
}
@media only screen and (min-width: 769px) and (max-width: 1044px){
		.resWrap, 
		#wrap_ContentBox{
			width: 1024px;
		}
		#wrapHeader #header #gnbSubWrap {
			right: 66px;
		}
		#wrapFooter #footer #footMlist ul{
			margin-left: 40px;
		}
		#wrapFooter #footer #footCopyright {
			padding-left: 40px;
		}
}
@media only screen and (min-width: 1045px){
	.resWrap{
		width: 1280px;
	}
	#wrap_ContentBox{
		width: 1280px;
	}
	#wrapFooter #footer.resWrap{
		width: 1200px;
	}
}