@charset "utf-8";

/*****************************************
				Header
*****************************************/
#header {
	min-height: 100vh;
	padding: 0;
	overflow: visible;
	position: relative;
}
#logoTitle {
	width: 445px;
	height: 512px;
	margin: 0;
	float: none;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -256px 0 0 -222px;
	z-index: 1000;
}
#logoTitle a {
	background: url(../img/contents/logo_big.png) 0 0 no-repeat;
}
#dialImage {
	background: url(../img/contents/channel.png) 0 0 no-repeat;
	width: 120px;
	height: 120px;
	white-space: nowrap;
	overflow: hidden;
	text-indent: 100%;
	position: absolute;
	right: 50%;
	bottom: -62px;
	margin: 0 -458px 0 0;
	z-index: 2000;
}
/*****************************************
		Directory Information
*****************************************/
#emergencyBoxInner {
	height: 298px;
}
#emergencyBoxInner iframe {
	height: 298px;
}
/*****************************************
				Tools
*****************************************/
#tools {
	background: #FFF;
	width: 590px;
	margin: 0;
	float: none;
	border-radius: 50px;
	position: absolute;
	top: 5vh;
	right: 6%;
	z-index: 1000;
	transition: 0.3s;
	overflow: visible;
}
#tools.close {
	width: 43px;
	overflow: hidden;
}
#toolsInner {
	height: 27px;
	padding: 8px 0;
	position: relative;
}
#foreigners {
	margin: 0;
	position: absolute;
	top: 8px;
	right: 50px;
	transition: 0.5s;
}
#colorChanger {
	width: 170px;
	margin: 0;
	position: absolute;
	top: 8px;
	right: 195px;
	transition: 0.5s;
}
#sizeChanger {
	width: 170px;
	margin: 0;
	position: absolute;
	top: 8px;
	right: 385px;
	transition: 0.5s;
}
#tools.close #foreigners,
#tools.close #colorChanger,
#tools.close #sizeChanger {
	opacity: 0;
}
/*****************************************
			Foreigners
*****************************************/
#btn_shrink {
	display: inline-block;
	margin: 0 10px 0 0;
	background: url(../img/contents/icon_close.png) 50% 50% no-repeat;
	width: 24px;
	height: 27px;
	white-space: nowrap;
	overflow: hidden;
	text-indent: 100%;
	position: relative;
	cursor: pointer;
}
#btn_shrink.close {
	background: url(../img/contents/icon_menu.png) 50% 50% no-repeat;
}
/*****************************************
			Button Menu Box
*****************************************/
#btnMenuBox {
	top: 50vh;
	margin-top: -64px;
}
.navtype #cboxClose {
	top: 50vh;
	margin-top: -64px;
}
/*****************************************
			Main Visual Slider
*****************************************/
#mainVisual {
	width: 100%;
	position: relative;
}
#mainVisualBox {
	width: 100%;
}
#mainVisual .bx-viewport {
	height: 100vh !important;
}
#mainVisual .slide {
	width: 96% !important;
	height: 96vh !important;
	margin: 2vh 2% 0 2%;
	overflow: hidden;
	position: relative;
	border-radius: 7.5vw;
}
#mainVisual .slide img {
	min-width: 100%;
	min-height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
#mainVisual .iframe {
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
#mainVisual .iframe iframe {
	box-sizing: border-box;
	width: 177vh;
	height: 54.25vw;
	min-width: 100%;
	min-height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
/*
#mainVisual .iframe {
	margin: 0 0 25px 0;
    padding-top: 56.25%;
    width: auto;
    height: 0;
    position: relative;
	text-align: center;
}
#mainVisual .iframe iframe {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}
*/
#mainVisual .bx-controls {
	background: #EEE;
	height: 42px;
	margin: 0 -500px 0 0;
	border-radius: 42px;
	position: absolute;
	right: 50%;
	bottom: -50px;
	z-index: 2000;
}
#mainVisual .bx-pager {
	display: inline-block;
	margin: 0 0 0 15px;
}
#mainVisual .bx-pager-item {
	min-width: 10px;
	height: 30px;
	margin: 5px 8px 0 8px;
	text-align: center;
	display: inline-block;
	vertical-align: top;
	letter-spacing: normal;
}
#mainVisual .bx-pager-link {
	display: block;
	background: url(../img/contents/pager_off.png) 50% 100% no-repeat;
	width: 100%;
	height: 100%;
	color: #00395F;
	font-size: 87.5%;
	text-decoration: none;
}
#mainVisual .bx-pager-link.active,
#mainVisual .bx-pager-link:hover {
	background: url(../img/contents/pager_on.png) 50% 100% no-repeat;
}
#mainVisual .bx-controls-auto {
	width: 30px;
	height: 30px;
	display: block;
	float: right;
	margin: 6px 6px 0 130px;
}
#mainVisual .bx-stop,
#mainVisual .bx-start {
	background: url(../img/contents/btn_move.png) 0 0 no-repeat;
	width: 30px;
	height: 30px;
	display: block;
	text-indent: 110%;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: top;
}
#mainVisual .bx-stop:hover {
	background-position: 0 -30px;
}
#mainVisual .bx-start {
	background-position: -30px 0;
}
#mainVisual .bx-start:hover {
	background-position: -30px -30px;
}
#mainVisual .bx-prev {
	display: none;
}
#mainVisual .bx-next {
	background: url(../img/contents/channel.png) 0 0 no-repeat;
	width: 120px;
	height: 120px;
	white-space: nowrap;
	overflow: hidden;
	text-indent: 100%;
	position: absolute;
	right: 44px;
	bottom: -12px;
	z-index: 2000;
	outline: none;
	transition: 0.2s;
}
#mainVisual .bx-next:active {
	transform: rotate(45deg);
}
/*****************************************
				Wrapper
*****************************************/
#wrapper {
	padding: 8px 0 0 0;
}
/*****************************************
				Main
*****************************************/
#main {
    padding: 75px 0 50px 0;
}
/*****************************************
				Main Block
*****************************************/
#mainBlock {
	width: 1000px;
	margin: 0 auto 20px auto;
	overflow: hidden;
}
/*****************************************
				  News
*****************************************/
#news {
	margin: 50px auto;
}
/*
#news {
	background: url(../img/contents/dot_green.png) 0 100% repeat-x;
	width: 1000px;
	margin: 30px auto;
	overflow: hidden;
	position: relative;
}
#news h2 {
	background: #C4D7C9;
	height: 42px;
	line-height: 42px;
	border-radius: 42px;
	margin: 0 0 8px 0;
	padding: 0 0 0 22px;
	font-size: 135%;
	font-weight: bold;
	letter-spacing: 0.2em;
	color: #003B5D;
	overflow: hidden;
}
#newsContents {
	height: 214px;
	overflow: auto;
	position: relative;
}
#news dl {
	background: url(../img/contents/circle_arw_darkblue_line.png) 98% 50% no-repeat, url(../img/contents/dot_green.png) 0 0 repeat-x;
	padding: 15px 65px 15px 10px;
	overflow: hidden;
	font-size: 87.5%;
	margin: 0;
	border: none;
}
#news dl:first-child {
	background: url(../img/contents/circle_arw_darkblue_line.png) 98% 50% no-repeat;
}
#news dl dt {
	width: 175px;
	color: #655;
	float: left;
}
#news dl dd {
	margin: 0 0 0 175px;
}
#news dl dd a {
	color: #003B5D;
}
#news dl dd a:hover {
	color: #D00;
}
#btn_newsList {
	display: block;
	background: url(../img/contents/icon_list.png) 20px 50% no-repeat;
	background-color: #FFF;
	width: 5em;
	line-height: 34px;
	padding: 0 20px 0 46px;
	border-radius: 34px;
	color: #007E98;
	font-size: 87.5%;
	font-weight: bold;
	text-decoration: none;
	position: absolute;
	top: 4px;
	right: 4px;
}
#btn_newsList:hover {
	background-color: #FFC;
}
*/
/*****************************************
			 Recommend Banner
*****************************************/
#recommendArea {
	width: 1000px;
	min-height: 234px;
	margin: 0 auto;
}
#recommendBanner {
	width: 750px;
	margin: 0 auto;
	position: relative;
}
#recommendBanner span,
#recommendBanner a {
	font-size: 100% !important;
}
#recommendBanner .bx-viewport {
	width: 750px !important;
}
#recommendBanner h3 {
	background: url(../img/contents/banner_bubble.png) 0 0 no-repeat;
	width: 381px;
	height: 132px;
	margin: 0 auto 10px auto;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}
#recommendBanner ul {
	list-style: none;
}
#recommendBanner ul li {
	display: flex;
	width: 230px;
	height: 90px;
	padding: 0 10px;
	float: left;
	position: relative;
}
#recommendBanner ul li a {
	display: flex;
	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	width: 210px;
	height: 90px;
	padding: 0 10px;
	background: #F8F2E9;
	color: #079;
	font-weight: bold;
	text-decoration: none;
	position: relative;
	border-radius: 8px;
	word-break: break-all;
}
#recommendBanner ul li a:hover {
	background: #079;
	color: #FFF;
}
/*
#recommendBanner ul li img {
	max-width: 100%;
	height: auto;
}
#recommendBanner ul li img:hover {
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	opacity: 0.7;
}
*/
#recommendBanner .bx-controls {
	width: 100%;
	margin: 30px 0 0 0;
	text-align: center;
}
#recommendBanner .bx-pager {
	display: inline-block;
	height: 8px;
	padding: 8px 0 0 0;
	vertical-align: top;
	z-index: 300;
}
#recommendBanner .bx-pager-item {
	width: 8px;
	height: 8px;
	margin: 0 10px;
	text-align: center;
	display: inline-block;
	vertical-align: top;
	letter-spacing: normal;
}
#recommendBanner .bx-pager-link {
	background: #BBB;
	width: 8px;
	height: 8px;
	display: block;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	color: #000;
	border-radius: 8px;
}
#recommendBanner .bx-pager-link.active,
#recommendBanner .bx-pager-link:hover {
	background: #079;
	color: #FFF;
}
#recommendBanner .bx-prev,
#recommendBanner .bx-next {
	display: block;
	width: 70px;
	height: 70px;
	background: url(../img/contents/slider_arw.png) 0 0 no-repeat;
	text-indent: 110%;
	overflow: hidden;
	white-space: nowrap;
	position: absolute;
	top: 153px;
	z-index: 3000;
}
#recommendBanner .bx-prev {
	background-position: 0 0;
	left: 50%;
	margin: 0 0 0 -455px;
}
#recommendBanner .bx-prev:hover {
	background-position: 0 -70px;
}
#recommendBanner .bx-next {
	background-position: -70px 0;
	right: 50%;
	margin: 0 -455px 0 0;
}
#recommendBanner .bx-next:hover {
	background-position: -70px -70px;
}
#recommendBanner .bx-controls-auto {
	width: 42px;
	height: 26px;
	margin: 0 10px;
	display: inline-block;
	vertical-align: top;
}
#recommendBanner .bx-start,
#recommendBanner .bx-stop {
	width: 42px;
	height: 22px;
	display: block;
	border: 2px solid #079;
	border-radius: 4px;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	vertical-align: top;
	color: #000;
}
#recommendBanner .bx-start {
	background: url(../img/contents/m_start.png) 50% 50% no-repeat #FFF;
}
#recommendBanner .bx-start:hover {
	background: url(../img/contents/m_start_w.png) 50% 50% no-repeat #079;
}
#recommendBanner .bx-stop {
	background: url(../img/contents/m_stop.png) 50% 50% no-repeat #FFF;
}
#recommendBanner .bx-stop:hover {
	background: url(../img/contents/m_stop_w.png) 50% 50% no-repeat #079;
}
/*****************************************
				Footer
*****************************************/
#footer {
	height: auto;
	margin: 0;
	border: none;
}
/*****************************************
			   Copy Right
*****************************************/
#copyright {
	padding: 0 0 20px 0;
}
/*****************************************
		Critical Information
*****************************************/
#critical {
	background: #FFF;
	width: 900px;
	padding: 45px;
	border: solid 5px #CF0814;
	border-radius: 8px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin: -250px 0 0 -500px;
	z-index: 3000;
}
#critical h1 {
	background: url(../img/critical/icon_critical.png) 14px 100% no-repeat;
	background-color: #CF0814;
	line-height: 40px;
	padding: 0 0 0 88px;
	color: #FFF;
	font-size: 143%;
	font-weight: bold;
	border-radius: 40px;
}
#critical .content {
	height: 330px;
	padding: 15px 10px;
	overflow: auto;
}
#critical .content h2 {
	margin: 0 0 5px 0;
	padding: 5px 0 5px 12px;
	font-size: 129%;
	font-weight: bold;
	color: #173364;
	border: solid 4px #CF0814;
	line-height: 1.21;
}
#critical .content h3 {
	margin: 15px 0 5px 0;
	padding: 5px;
	font-size: 114%;
	font-weight: bold;
	color: #173364;
	border: solid 2px #CF0814;
	border-left: solid 5px #CF0814;
	line-height: 1.21;
}
#critical .content h4 {
	margin: 15px 0 5px 0;
	padding: 5px;
	font-size: 107%;
	font-weight: bold;
	color: #173364;
	border: double 4px #CF0814;
	line-height: 1.21;
}
#critical .content h5 {
	margin: 15px 0 5px 0;
	padding: 5px;
	font-weight: bold;
	color: #173364;
	border: dotted 1px #CCC;
	border-left: double 5px #CF0814;
	line-height: 1.21;
}
#critical .content h6 {
	margin: 15px 0 5px 0;
	padding: 5px 7px;
	font-weight: bold;
	color: #173364;
	border: dotted 1px #CCC;
	border-left: solid 3px #CF0814;
	line-height: 1.21;
}
#critical .content p,
#critical .content ul,
#critical .content ol,
#critical .content table {
	margin: 0 0 10px 0;
}
#critical .content ul,
#critical .content ol {
	padding: 0 0 0 2.5em;
}
#critical .content table th,
#critical .content table td {
	padding: 5px;
	border: solid 1px #999;
}
#critical .content table.table_layout th,
#critical .content table.table_layout td {
	border: none;
	padding: 0;
}
#criticalList {
	height: 360px;
	overflow: auto;
}
#criticalList dl {
	padding: 14px 50px 16px 5px;
	background: url(../img/critical/list_arw_critical.png) 98% 50% no-repeat, url(../img/critical/dot_line_gold.png) 0 100% repeat-x;
	overflow: hidden;
}
#criticalList dl dt {
	width: 13.5em;
	color: #665B55;
	float: left;
}
#criticalList dl dd {
	margin: 0 0 0 13.5em;
	color: #003C5C;
}
#criticalList dl dd a {
	color: #003C5C;
}
#criticalList .i_new,
#criticalList .i_ess,
#criticalList .i_urg {
	margin: 3px 0 0 0.5em;
}
#noCritical {
	padding: 5px 8px;
}
/*****************************************
			Corona Box
*****************************************/
#coronaBox {
	margin: 0 auto 15px auto;
	max-width: 1360px;
	border: solid 5px #F33;
	box-sizing: border-box;
	position: relative;
	z-index: 100;
}
#coronaBox h2 {
	padding: 5px 8px 8px 8px;
	background: #F33;
	text-align: center;
}
#coronaBox h2 a {
	color: #FFF;
	font-size: 135%;
	font-weight: bold;
}
#coronaBox h2 a:hover {
	color: #FF9;
}
#coronaBoxInner {
	padding: 7px 12px;
	background: #FFF;
}
#coronaTopics {
	margin: 0 0 5px 0;
	overflow: hidden;
}
#coronaTopics a {
	display: block;
	margin: 0 10px 0 0;
	padding: 5px 0;
	width: 48%;
	background: #12724C;
	text-align: center;
	color: #FFF;
	font-weight: bold;
	float: left;
}
#coronaTopics a:hover {
	color: #F0E85C;
}
#coronaBoxInner ul {
	letter-spacing: -0.4em;
	text-align: center;
}
#coronaBoxInner ul li {
	margin: 5px 5px 5px 0;
	display: inline-block;
	vertical-align: top;
	white-space: nowrap;
	letter-spacing: normal;
}
#coronaBoxInner ul li a {
	display: inline-block;
	padding: 5px 8px;
	background: #FFFDDC;
	color: #000;
	font-size: 114%;
	font-weight: bold;
}
#coronaBoxInner ul li a:hover {
	color: #C03;
}
/*****************************************
		Typhoon19 Banner
*****************************************/
#typhoon19Box {
	margin: 0 auto 15px auto;
	max-width: 1360px;
	border: solid 5px #B20000;
	box-sizing: border-box;
	position: relative;
	z-index: 100;
}
#typhoon19Box h2 {
	padding: 5px 8px 8px 8px;
	background: #B20000;
	text-align: center;
}
#typhoon19Box h2 a {
	color: #FFF;
	font-size: 135%;
	font-weight: bold;
}
#typhoon19Box h2 a:hover {
	color: #FF9;
}
#typhoon19BoxInner {
	padding: 7px 12px;
	background: #FFF;
}
#typhoon19Topics {
	margin: 0 0 5px 0;
	overflow: hidden;
}
#typhoon19Topics a {
	display: block;
	margin: 0 10px 0 0;
	padding: 5px 0;
	width: 48%;
	background: #12724C;
	text-align: center;
	color: #FFF;
	font-weight: bold;
	float: left;
}
#typhoon19Topics a:hover {
	color: #F0E85C;
}
#typhoon19BoxInner ul {
	letter-spacing: -0.4em;
	text-align: center;
}
#typhoon19BoxInner ul li {
	margin: 5px 5px 5px 0;
	display: inline-block;
	vertical-align: top;
	white-space: nowrap;
	letter-spacing: normal;
}
#typhoon19BoxInner ul li a {
	display: inline-block;
	padding: 5px 8px;
	background: #FFFDDC;
	color: #000;
	font-size: 114%;
	font-weight: bold;
}
#typhoon19BoxInner ul li a:hover {
	color: #C03;
}