@charset "utf-8";

/*****************************************
				Header Top
*****************************************/
#headerTop {
	min-width: 1100px;
	min-height: 100%;
/*	height: 100%;	*/
	height: 100vh;
	position: relative;
	overflow: hidden;
}
#headerInner {
	width: 222px;
	min-width: 222px;
	height: 100vh;
	background: #FFF;
	padding: 10px 0 0 0;
	float: left;
	box-sizing: border-box;
	position: relative;
	z-index: 1900;
}
#logoTitle {
	margin: 0 0 20px 0;
	width: 222px;
	height: 208px;
	float: none;
	z-index: 1100;
}
#logoTitle a {
	display: block;
	width: 100%;
	height: 100%;
	background: url(../img/contents/logo_title_top.png) 50% 0 no-repeat;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}
#logoTitle a:hover {
	background-position: 50% 0;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}
#headerTopContents {
	height: 100vh;
	margin: 0 0 0 222px;
}
/*****************************************
			Main Visual Slider
*****************************************/
#mainVisual {}
#mainVisual .slide {
	height: 100vh;
	position: relative;
}
#mainVisual .slide img {
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#mainVisual .bx-controls {
	background: #FFF;
	width: 100%;
	padding: 10px 0 10px 222px;
	position: absolute;
	left: 0;
	bottom: 0;
	overflow: hidden;
	z-index: 900;
	text-align: center;
	box-sizing: border-box;
}
#mainVisual .bx-pager {
	display: inline-block;
	height: 13px;
	text-align: center;
	z-index: 900;
	position: relative;
	vertical-align: top;
}
#mainVisual .bx-pager-item {
	width: 13px;
	height: 13px;
	margin: 6px 10px 0 10px;
	text-align: center;
	display: inline-block;
	/display: inline;
	/zoom: 1;
	vertical-align: top;
	letter-spacing: normal;
}
#mainVisual .bx-pager-link {
	background: url(../img/contents/pager.png) 0 0 no-repeat;
	width: 13px;
	height: 13px;
	display: block;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}
#mainVisual .bx-pager-link.active,
#mainVisual .bx-pager-link:hover { background-position: -13px 0; }
#mainVisual .bx-controls-auto {
	width: 42px;
	height: 25px;
	margin: 0 10px;
	display: inline-block;
	z-index: 900;
	vertical-align: top;
}
#mainVisual .bx-start,
#mainVisual .bx-stop {
	background: url(../img/contents/btn_slider.png) 0 0 no-repeat;
	width: 42px;
	height: 25px;
	display: block;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: top;
}
#mainVisual .bx-start { background-position: -42px 0; }
#mainVisual .bx-start:hover { background-position: -42px -25px; }
#mainVisual .bx-stop { background-position: 0 0; }
#mainVisual .bx-stop:hover { background-position: 0 -25px; }
/*****************************************
				Search
*****************************************/
#headerNav {
	width: 100%;
	min-width: 1010px;
	height: 40px;
	margin: 5px 0 0 0;
	float: none;
	position: relative;
	z-index: 1000;
}
#headerNav ul {
	float: right;
}
#searchBoxTop {
	width: 370px;
	height: 36px;
	float: left;
}
#searchBoxTop #search {
	background: #FFF;
	width: 340px;
	height: 32px;
	padding: 0 12px;
	line-height: 32px;
	border: solid 2px #82CBD1;
	border-radius: 20px;
}
#searchBoxTop #field_search {
	background: none;
	width: 304px;
	line-height: 32px;
	height: 32px;
	border: none;
	float: left;
	_display: inline;
}
#searchBoxTop #btn_search {
	height: 32px;
}
/*****************************************
			Category Navigation
*****************************************/
#categoryNavTop {
	width: 216px;
	margin: 0 auto;
	float: none;
	position: relative;
	z-index: 100;
}
#categoryNavTop ul {
	list-style: none;
	width: 216px;
	height: auto;
	margin: 0 auto;
	position: relative;
}
#categoryNavTop ul li {
	background: #EBEBEB;
	width: 216px;
	height: 66px;
	margin: 0 0 3px 0;
	float: none;
}
#categoryNavTop ul li:hover {
	background: url(../img/contents/bar_green.png) 0 100% repeat-x #F8F8F8;
}
#categoryNavTop ul li a {
	display: block;
	width: 100%;
	height: 100%;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}
#categoryNavTop ul li#category01 a { background: url(../img/contents/gnavtop01.png) 50% 50% no-repeat; }
#categoryNavTop ul li#category02 a { background: url(../img/contents/gnavtop02.png) 50% 50% no-repeat; }
#categoryNavTop ul li#category03 a { background: url(../img/contents/gnavtop03.png) 50% 50% no-repeat; }
#categoryNavTop ul li#category04 a { background: url(../img/contents/gnavtop04.png) 50% 50% no-repeat; }
/* Drop Down */
.categoryNavDropDown {
	background-image: none;
	width: 216px;
	padding: 0 0 0 6px;
	position: absolute;
	top: 0;
	left: 216px;
}
.categoryNavDropDown ul {
	width: 212px !important;
	padding: 0 2px 2px 2px !important;
	letter-spacing: normal;
}
.categoryNavDropDown ul li {
	display: block !important;
	width: 212px !important;
	height: 60px !important;
	margin: 2px 0 0 0 !important;
}
.categoryNavDropDown ul li:hover {
	background: #F5F5F5 !important;
}
.categoryNavDropDown ul li a {
	width: 187px !important;
}
/*****************************************
				Main Block
*****************************************/
#mainBlock01 {
	width: 100%;
	min-height: 100vh;
	position: relative;
}
/*
#mainBlockInner {
	width: 100%;
	height: 100vh;
	min-height: 642px;
	position: relative;
}
*/
#mainBlockInner {
	width: 100%;
	margin: 0 0 60px 0;
	position: relative;
}
#mainBlock02 {
	width: 100%;
	height: 100vh;
	min-height: 642px;
	position: relative;
}
.btn_down {
	background: url(../img/contents/btn_scroll.png) 0 0 no-repeat;
	width: 60px;
	height: 60px;
	display: block;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	position: absolute;
	bottom: 10px;
	left: 10px;
	margin: 0;
	z-index: 2000;
}
.btn_down:hover { background-position: -60px 0; }
/*****************************************
				About
*****************************************/
#aboutBlock {
	width: 100%;
	overflow: hidden;
	position: relative;
}
/*
#about {
	width: 80%;
	max-width: 1000px;
	margin: 0 auto;
	position: relative;
}
#aboutBlock {
	width: 1000px;
	height: 582px;
	position: absolute;
	top: 100px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	z-index: 1;
}
*/
#about {
	width: 1000px;
	height: 582px;
	margin: 50px auto;
	position: relative;
}
#about img {
	width: 100%;
	height: auto;
}
#aboutDetail {
	background: url(../img/contents/btn_more.png) 0 0 no-repeat;
	width: 169px;
	height: 36px;
	display: block;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	position: absolute;
	bottom: 12%;
	left: 15%;
	z-index: 1300;
}
#aboutDetail:hover { background-position: 0 -36px; }
/*
#aboutBlock {
	background: url(../img/contents/bg.png) 50% 100px no-repeat;
	height: 599px;
	padding: 100px 0;
}
#about {
	width: 1000px;
	margin: 0 auto;
	overflow: hidden;
}
#about h2 {
	background: url(../img/contents/about_title.png) 0 0 no-repeat;
	width: 285px;
	height: 30px;
	display: block;
	margin: 0 auto;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}
#aboutText {
	background: url(../img/contents/text.png) 0 0 no-repeat;
	width: 409px;
	height: 366px;
	margin: 74px 0 0 100px;
	display: block;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}
#aboutDetail {
	background: url(../img/contents/btn_more.png) 0 0 no-repeat;
	width: 169px;
	height: 36px;
	margin: 66px 0 0 103px;
	display: block;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}
#aboutDetail:hover { background-position: 0 -36px; }
*/
/*****************************************
				News Block
*****************************************/
#newsBlock {
	width: 1000px;
	margin: 0 auto 90px auto;
	padding: 50px 0 0 0;
	overflow: hidden;
}
#newsBlock h2 {
	background: url(../img/contents/news_title.png) 0 0 no-repeat;
	width: 144px;
	height: 30px;
	margin: 0 auto 44px auto;
	display: block;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}
/*****************************************
				Topics
*****************************************/
#topics {
	width: 240px;
	height: 340px;
	float: left;
	position: relative;
}
#topicsContents { position: relative; }
.topicsBox {
	width: 240px;
	height: 340px;
	position: relative;
}
.topicsImage {
	width: 240px;
	height: 170px;
	margin: 0 0 25px 0;
	overflow: hidden;
}
.topicsImage img {
	display: block;
	width: 240px;
	height: auto;
}
.topicsBox dl {}
.topicsBox dl dt {
	display: inline-block;
	background: #C1E4E9;
	line-height: 22px;
	margin: 0 0 12px 14px;
	padding: 0 8px;
	color: #000;
}
.topicsBox dl dd {
	display: block;
	height: 100px;
	padding: 0 14px;
	overflow: hidden;
}
.topicsDetail {
	display: block;
	width: 100%;
	height: 100%;
	text-indent: 110%;
	overflow: hidden;
	white-space: nowrap;
	position: absolute;
	top: 0;
	left: 0;
}
.topicsDetail:hover { background: url(../img/contents/dot_white33.png) 0 0 repeat; }
#topics .bx-pager {
	width: 240px;
	height: 7px;
	position: absolute;
	top: 178px;
	left: 0;
	text-align: center;
	z-index: 1200;
}
#topics .bx-pager-item {
	width: 7px;
	height: 7px;
	margin: 0 5px;
	text-align: center;
	display: inline-block;
	/display: inline;
	/zoom: 1;
}
#topics .bx-pager-link {
	background: url(../img/contents/pager_topics.png) 0 0 no-repeat;
	width: 7px;
	height: 7px;
	display: block;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}
#topics .bx-pager-link.active,
#topics .bx-pager-link:hover { background-position: -7px 0;}
#topics .bx-controls-auto {
	width: 23px;
	height: 22px;
	display: block;
	position: absolute;
	top: 2px;
	right: 2px;
	z-index: 900;
}
#topics .bx-start,
#topics .bx-stop {
	background: url(../img/contents/btn_topics.png) 0 0 no-repeat;
	width: 23px;
	height: 22px;
	display: block;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}
#topics .bx-start { background-position: -23px 0; }
#topics .bx-start:hover { background-position: -23px -22px; }
#topics .bx-stop { background-position: 0 0; }
#topics .bx-stop:hover { background-position: 0 -22px; }
/*****************************************
				News
*****************************************/
#news {
	width: 746px;
	position: relative;
	float: right;
}
#news .tab {
	height: 53px;
	padding: 0;
	list-style: none;
	overflow: hidden;
	_zoom: 1;
}
#news .tab li {
	width: 149px;
	height: 53px;
	margin: 0 6px 0 0;
	float: left;
	_display: inline;
}
#news .tab li a {
	background: url(../img/contents/tab.png) 0 0 no-repeat;
	width: 100%;
	height: 100%;
	display: block;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}
#news .tab li.nav01 a { background-position: 0 0; }
#news .tab li.nav02 a { background-position: -149px 0; }
#news .tab li.nav03 a { background-position: -298px 0; }
#news .tab li.nav01 a.active,
#news .tab li.nav01 a:hover { background-position: 0 -53px; }
#news .tab li.nav02 a.active,
#news .tab li.nav02 a:hover { background-position: -149px -53px; }
#news .tab li.nav03 a.active,
#news .tab li.nav03 a:hover { background-position: -298px -53px; }
#news .area {
	background: url(../img/contents/dot_gray.png) 0 100% repeat-x;
	border-top: 3px solid #C1E4E9;
	padding: 0 0 2px 0;
	overflow: hidden;
}
.newsContentsInner {
	height: 282px;
	overflow: auto;
	position: relative;
}
.newsContentsInner dl {
	background: url(../img/contents/dot_gray.png) 0 100% repeat-x;
	padding: 10px 10px 12px 10px;
	overflow: hidden;
}
.newsContentsInner dl:last-child { background: none; }
.newsContentsInner dl dt {
	width: 9em;
	color: #666;
	float: left;
}
.newsContentsInner dl dd {
	margin: 0 0 0 9em;
}
.newsContentsInner dl dd a {
	color: #000;
}
.newsContentsInner dl dd a:hover {
	color: #D00;
}
.btn_newslist {
	background: url(../img/contents/btn_newslist.png) 0 0 no-repeat;
	width: 144px;
	height: 38px;
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	position: absolute;
	top: 7px;
	right: 0;
}
.btn_newslist:hover { background-position: 0 -38px; }
.btn_rss {
	background: url(../img/contents/btn_rss.png) 0 0 no-repeat;
	width: 38px;
	height: 38px;
	display: block;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	position: absolute;
	top: 7px;
	right: 154px;
}
.btn_rss:hover { background-position: -38px 0; }
/*****************************************
				Banner
*****************************************/
#govBanner {
	width: 100%;
	margin: 45px 0 0 0;
	background: #F3F3F3;
}
/*
#govBanner {
	width: 100%;
	background: #F3F3F3;
	position: absolute;
	bottom: 0;
	left: 0;
}
*/
#govBannerInner {
	width: 1000px;
	margin: 0 auto;
	overflow: hidden;
}
#govBanner ul {
	width: 1025px;
	padding: 22px 0 0 0;
	list-style: none;
	overflow: hidden;
}
#govBanner ul li {
	width: 180px;
	height: 50px;
	overflow: hidden;
	text-align: center;
	margin: 0 25px 20px 0;
	float: left;
}
#govBanner ul li img {
	max-width: 100%;
	height: auto;
}
/*****************************************
				SNS Block
*****************************************/
#snsBlock {
	width: 1000px;
	margin: 0 auto;
	overflow: hidden;
}
#snsLeft {
	width: 450px;
	float: left;
}
#snsRight {
	width: 450px;
	float: right;
	border: solid 1px #ccc;
	padding: 1px;
}
#btnTwitter {
	display: block;
	background: url(../img/contents/btn_twitter.png) 50% 50% no-repeat;
	width: 446px;
	height: 38px;
	margin: 10px 0 0 0;
	border: 2px solid #1EA1F3;
	text-indent: 110%;
	white-space: nowrap;
	overflow: hidden;
}
#btnTwitter:hover {
	background-color: #FFC;
}
/*****************************************
				Face Book
*****************************************/
#facebookArea {
	width: 448px;
	height: 450px;
	border: 1px solid #EBEDF0;
	overflow: hidden;
}
/*****************************************
			Instagram Area
*****************************************/
#instagramArea {}
#instagramArea h2 {
	background: url(../img/contents/btn_instagram.png) 0 0 no-repeat;
	width: 224px;
	height: 38px;
	margin: 6px auto 8px auto;
	text-indent: 110%;
	white-space: nowrap;
	overflow: hidden;
}
#instagramInner {
	width: 450px;
	overflow: hidden;
}
.instagramItem {
	width: 150px;
	height: 150px;
	float: left;
	position: relative;
	overflow: hidden;
}
.instagramItem a {
	display: block;
	width: 300px;
	height: 300px;	
	position: relative;
	overflow: hidden;
}
.instagramItem a img {
	width: auto;
	height: 100%;
	position: absolute;
	top: 25%;
	left: 25%;
 	transform: translate(-50%, -50%);
}