h1 {
	font-weight:bold;
	margin:0 0 5 -5;
}

h2.newsTitle {
	font-size:1.1em;
	font-weight:bold;
	margin:3 0 5 0;
}

.affix {
    top: 0;
    width: 100%;
    z-index: 9999 !important;
}

.affix + .container-fluid {
    padding-top: 70px;
}

body {
    margin: 0;
    font-size: 2rem;
	font-family: 'Gowun Batang', serif;
    display: flex;
    flex: 1;
    min-height: 10vh;
}

@media (prefers-color-scheme: dark) {
	body {
		margin: 0;
		font-size: 2rem;
		font-family: 'Gowun Batang', serif;
		display: flex;
		flex: 1;
		min-height: 10vh;
		background: #000;
		color: #FFF; 
	}
}

.top_title {
	position: absolute;
	text-align:center;
	width:100%;
	background: url(../image/president_pattern_2.jpg);
	background-repeat: repeat;
	background-size: 23rem;
	color:white;
	font-weight:bold;
	font-size:2.5em;
	padding:10 0 210 0;
	margin:50 0 0 0;
}

.top_title_text {
	position: absolute;
	text-align:center;
	width:100%;
	color:white;
	font-weight:bold;
	font-size:2.5em;
	padding:10 0 210 0;
	margin:50 0 0 0;
	cursor:pointer;
	cursor:hand;
	z-index:5000;
}

.time_body {
	position: absolute;
	text-align:center;
	width:100%;
	padding:540 0 0 0;
}

.logo_left {
    width: 15rem;
	height:60rem;
	background: url(../image/president_logo_left.png);
	background-repeat: no-repeat;
	background-size: 15rem;
    background-position: 0px 0px;
    margin: 65 0 0 10;
    position: absolute;
	z-index:100;
}

.logo_right {
    width: 15rem;
	height:60rem;
	background: url(../image/president_logo_right.png);
	background-repeat: no-repeat;
	background-size: 15rem;
    background-position: 0px 0px;
    margin: 65 15 0 0;
    position: absolute;
	right:0;
	z-index:100;
}

.clock-face {
    position: relative;
    width: 100%;
    height: 100%;
    transform: translateY(-3px); /* account for the height of the clock hands */
}

.hand {
    width: 50%;
    height: 6px;
    background: black;
    position: absolute;
    top: 50%;
    transform: rotate(90deg);
    transform-origin: 100%;
    transition: all 0.05s;
    transition-timing-function: cubic-bezier(0.1, 3, 0.6, 1);
	z-index:1;
}

.hand-short {
    width: 30%;
    height: 6px;
    background: blue;
    position: absolute;
    top: 50%;
	left:20%;
    transform: rotate(90deg);
    transform-origin: 100%;
    transition: all 0.05s;
    transition-timing-function: cubic-bezier(0.1, 3, 0.6, 1);
	z-index:5;
}

.hand-red {
    width: 50%;
    height: 3px;
    background: red;
    position: absolute;
    top: 50%;
    transform: rotate(90deg);
    transform-origin: 100%;
    transition: all 0.05s;
    transition-timing-function: cubic-bezier(0.1, 3, 0.6, 1);
	z-index:10;
}

.center {
	text-align:center;
}

.time_body_text1 {
	font-size: 1em;
}

.time_body_count {
	font-size: 2.9em;
	font-weight:bold;
	color: red;
	padding:20 0;
}

@media (prefers-color-scheme: dark) {
	.time_body_count {
		font-size: 2.9em;
		font-weight:bold;
		color: #D9534F;
		padding:20 0;
	}
}

.notice_title {
	font-size: 1.8em;
	font-weight:bold;
	padding:50 0 10 0;
	margin:0 0 0 -4;
}

.notice_title_main {
	font-size: 1.1em;
	font-weight:normal;
	overflow: hidden;
	padding:0 0 0 0;
	margin:0 0 0 0;
}

.notice_context {
	font-size: 1em;
}

.notice_date {
	font-size: 0.8em;
}


.quo_wing {
	text-align:center;
	padding:70 0 0 0;
}

.quo_title {
	font-size: 2em;
	font-weight:bold;
	text-align:center;
	padding:50 0 0 0;
}

.quo_date {
	font-size: 0.8em;
	font-weight:normal;
	text-align:center;
	padding:10 0 0 0;
}

.quo_context {
	font-size: 1em;
	font-weight:normal;
	text-align:center;
	padding:20 0 0 0;
}

.quo_ref_url {
	font-size: 0.8em;
	font-weight:normal;
	text-align:center;
	margin:10 0 20 0;
}


.chro_bar_1 {
	background: url(../image/chro_bar_01.png);
	background-repeat: repeat-y;
	background-size: 50px;
    background-position: 3px 0px;
	min-width:50px;
}

.chro_bar_1_Y {
	background: url(../image/chro_bar_01_Y.png);
	background-repeat: repeat-y;
	background-size: 50px;
    background-position: 3px 0px;
	min-width:50px;
}

.chro_bar_2 {
	background: url(../image/chro_bar_02.png);
	background-repeat: repeat-y;
	background-size: 50px;
    background-position: 3px 0px;
}

@media (prefers-color-scheme: dark) {
	.chro_bar_1 {
		background: url(../image/chro_bar_01_dark.png);
		background-repeat: repeat-y;
		background-size: 50px;
		background-position: 3px 0px;
		min-width:50px;
	}

	.chro_bar_1_Y {
		background: url(../image/chro_bar_01_Y_dark.png);
		background-repeat: repeat-y;
		background-size: 50px;
		background-position: 3px 0px;
		min-width:50px;
	}

	.chro_bar_2 {
		background: url(../image/chro_bar_02_dark.png);
		background-repeat: repeat-y;
		background-size: 50px;
		background-position: 3px 0px;
	}
}

.chro_title1 {
	font-size: 1.5em;
	font-weight:bold;
	color: black;
	margin:0 0 5 0;
}

@media (prefers-color-scheme: dark) {
	.chro_title1 {
		font-size: 1.5em;
		font-weight:bold;
		color: white;
		margin:0 0 5 0;
	}
}

.chro_title2 {
	font-size: 1.5em;
	font-weight:bold;
	color: #FA6123;
	margin:0 0 5 0;
}

.chro_title3 {
	font-size: 1.5em;
	font-weight:bold;
	color: #0176D3;
	margin:0 0 5 0;
}

.chro_title4 {
	font-size: 3.5em;
	font-weight:bold;
	color: #3F3F3F;
	margin:0 0 0 0;
}

.chro_title5 {
	font-size: 3.5em;
	font-weight:bold;
	color: #3F3F3F;
	margin:0 0 -30 -40;
}

.chro_title_date {
	font-size: 1.3em;
	font-weight:bold;
	color: gray;
}

.chro_context {
	font-size: 1.1em;
	color: black;
}

@media (prefers-color-scheme: dark) {
	.chro_context {
		font-size: 1.1em;
		color: white;
	}
}

.chro_ref_url {
	font-size: 0.8em;
	font-weight:bold;
	color: #0176D3;
}

.chro_padding {
	height:30px;
}

.left { text-align:left; }
.right { text-align:right; }
.center { text-align:center; }
.justify { text-align:justify; }

.bold { font-weight:bold; }

img {
  max-width: 100%;
  height: auto;
}

A.no-line:link {text-decoration:none;font-weight:bold;}
A.no-line:visited {text-decoration:none;font-weight:bold;}
A.no-line:hover {text-decoration:none;font-weight:bold;}

A:link {font-weight:bold;}
A:visited {font-weight:bold;}
A:hover {font-weight:bold;}

A.blackblue:link {text-decoration:none;color:black;font-weight:bold;}
A.blackblue:visited {text-decoration:none;color:black;font-weight:bold;}
A.blackblue:hover {text-decoration:none;color:#018BDF;font-weight:bold;}

@media (prefers-color-scheme: dark) {
	A.blackblue:link {text-decoration:none;color:#fff;font-weight:bold;}
	A.blackblue:visited {text-decoration:none;color:#fff;font-weight:bold;}
	A.blackblue:hover {text-decoration:none;color:#018BDF;font-weight:bold;}
}

A.white:link {text-decoration:none;color:white;font-weight:bold;}
A.white:visited {text-decoration:none;color:white;font-weight:bold;}
A.white:hover {text-decoration:none;color:orange;font-weight:bold;}

.roll_pc {
	position:absolute;
	top:150px;
	left:8%;
	width:400px;
	height:150px;
	margin:0 auto;
	background-color:transperent;
	padding:0;
	border-radius:30px;
	overflow:hidden;
	z-index:500;
}

.btnFace {
	position:absolute;
	top:295px;
	left:15px;
	margin:5px;
	padding:5px;
	font-size:1em;
	background-color:transperent;
	overflow:hidden;
	z-index:10000;
}

.btnDark {
	position:absolute;
	top:295px;
	right:15px;
	margin:5px;
	padding:5px;
	font-size:1em;
	background-color:transperent;
	overflow:hidden;
	z-index:10000;
}

.roll_pc ul {
	position:absolute;
	margin:0px;
	padding:0;
	list-style:none;
}
.roll_pc ul li {
	float:left;
	width:400px;
	height:150px;
	text-align:center;
	display:flex;
	align-items:center;
	font-size:1.1em;
	margin:0;
	padding:10;
}

.BTN_awful {
	width:400px;
	font-size:0.8em;
	font-weight:bold;
	text-align:center;
	padding:4 0 3 0;
	border:1px solid gray;
	border-radius:8px;
	cursor:pointer;
	cursor:hand;
}


.BTN_awful_bad {
	width:400px;
	font-size:0.8em;
	font-weight:bold;
	text-align:center;
	padding:4 0 3 0;
	color:#CC0000;
	border:1px solid #CC0000;
	border-radius:8px;
	cursor:pointer;
	cursor:hand;
}

.BTN_awful_good {
	width:400px;
	font-size:0.8em;
	font-weight:bold;
	text-align:center;
	padding:4 0 3 0;
	color:#337AB7;
	border:1px solid #337AB7;
	border-radius:8px;
	cursor:pointer;
	cursor:hand;
}

A.news_title:link {font-size: 1.1em;font-weight:bold;color:gray;}
A.news_title:visited {font-size: 1.1em;font-weight:bold;color:gray;}
A.news_title:hover {font-size: 1.1em;font-weight:bold;color:gray;}

A.news_title_left:link {font-size: 1.1em;font-weight:bold;color: #B70101;}
A.news_title_left:visited {font-size: 1.1em;font-weight:bold;color: #B70101;}
A.news_title_left:hover {font-size: 1.1em;font-weight:bold;color: #B70101;}

@media (prefers-color-scheme: dark) {
	A.news_title_left:link {font-size: 1.1em;font-weight:bold;color: #D9534F;}
	A.news_title_left:visited {font-size: 1.1em;font-weight:bold;color: #D9534F;}
	A.news_title_left:hover {font-size: 1.1em;font-weight:bold;color: #D9534F;}
}

A.news_title_right:link {font-size: 1.1em;font-weight:bold;color: #337AB7;}
A.news_title_right:visited {font-size: 1.1em;font-weight:bold;color: #337AB7;}
A.news_title_right:hover {font-size: 1.1em;font-weight:bold;color: #337AB7;}

.news_btnBad {
	font-size:0.7em;
	font-weight:bold;
	color:#ffffff;
	background-color:#B70101;
	border:1px solid #B70101;
	border-radius:8px;
	padding:0 10 1 10;
	cursor:pointer;
	cursor:hand;
}

.news_btnGood {
	font-size:0.7em;
	font-weight:bold;
	color:#ffffff;
	background-color:#337AB7;
	border:1px solid #337AB7;
	border-radius:8px;
	padding:0 10 1 10;
	cursor:pointer;
	cursor:hand;
}

.news_comment {
	font-size: 0.9em;
	font-weight:bold;
}

.main_date {
	font-size: 0.9em;
	font-weight:normal;
	color: black;
	padding:0 0 0 0;
	margin:0 0 0 -3;
}

.main_title {
	font-size: 1.1em;
	font-weight:normal;
	color: black;
	padding:0 0 0 0;
	margin:5 0 -2 -5;
}

@media (prefers-color-scheme: dark) {
	.main_title {
		font-size: 1.1em;
		font-weight:normal;
		color: white;
		padding:0 0 0 0;
		margin:5 0 -2 -5;
	}
}

.badgePrimary {
	font-size:0.8em;font-weight:bold;color:#ffffff;background-color:#337AB7;border-radius:8px;padding:1 8;margin:0 0 0 10;
}

.badgeDanger {
	font-size:0.8em;font-weight:bold;color:#ffffff;background-color:#D9534F;border-radius:8px;padding:1 8;margin:0 0 0 10;
}

.badgeGray {
	font-size:0.8em;font-weight:bold;color:#ffffff;background-color:gray;border-radius:8px;padding:1 8;margin:0 0 0 10;
}

.badgeOrange {
	font-size:0.8em;font-weight:bold;color:#ffffff;background-color:orange;border-radius:8px;padding:1 8;margin:0 0 0 10;
}

.badgeDate {
	font-size:0.8em;color:black;background-color:#E8EAED;border-radius:8px;padding:1 8;margin:0 0 0 -6;
}

.badgeTextUrlCopy {
	font-size:0.7em;color:black;font-weight:bold;background-color:#E8EAED;border:silver 1px solid;border-radius:8px;padding:0 8 0 8;margin:5 0 0 0;
}

.contra_date {
	font-size: 0.9em;
	font-weight:normal;
	color: black;
	text-align:center;
	padding:0 0 0 0;
	margin:0 0 0 -3;
}

@media (prefers-color-scheme: dark) {
	.contra_date {
		font-size: 0.9em;
		font-weight:normal;
		color: #fff;
		padding:0 0 0 0;
		margin:0 0 0 -3;
	}
}

.contra_title {
	text-align:center;
	padding:0 0 0 0;
	margin:0 0 0 -3;
}

.contra_h_left {
	color:red;font-size:1.8em;font-weight:bold;padding:0 20 0 10;
}

.contra_h_right {
	color:red;font-size:1.8em;font-weight:bold;padding:0 10 0 20;
}

.contra_vs {
	font-size: 0.9em;
	font-weight:bold;
	color:#D9534F;
	text-align:center;
	padding:0 0 0 0;
	margin:0 0 0 -3;
}


A.contra_title:link {font-size: 1.1em;font-weight:bold;color:red;}
A.contra_title:visited {font-size: 1.1em;font-weight:bold;color:red;}
A.contra_title:hover {font-size: 1.1em;font-weight:bold;color:red;}

.gramContainer {
	width:100%;
	border:0px black solid;
	margin:0 auto;
}

.gramHover {
	position: relative;
	border-radius:20px;
	width: 100%;
}

.gramImage {
	width:100%;
	margin:20 0 5 0;
	border-radius:15px;
	filter:drop-shadow(0px 0px 4px gray);
	display: block;
	transition: all 0.2s linear;
}

.gramHover:hover .gramInfo {
	opacity: 0.7;
}

.gramInfo {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	opacity: 0;
	border-radius:15px;
	transition: .5s ease;
	background-color: rgb(0,0,0);
	cursor:pointer;
	cursor:hand;
}

.gram_divBad {
	position: absolute;
	top: 10;
	left: 7;
	font-size:0.6em;
	font-weight:bold;
	color:#B70101;
	opacity: 0.8;
	line-height:150%;
	z-index:100;
}

.gramTitle {
	font-size:0.9em;
	font-weight:bold;
	text-align:center;
}

.gramDate {
	font-size:0.6em;
	text-align:center;
}

.gramText {
	color: white;
	font-size:0.8em;
	font-weight:bold;
	position: absolute;
	width:200px;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	text-align: center;
}

.modal-title { font-size:0.9em;font-weight:bold; }
.modal-author { font-size:0.7em; }
.modal-context { font-size:0.8em;text-align:justify;margin:15 0 0 0; }
.modal-gramImage { margin:0 0 10 0; }

.gramImage2 img {
  transition: all 0.2s linear;
}
.gramImage2:hover img {
  transform: scale(1.05);
}
.gramImage2 {
	overflow:hidden;padding:7 0;font-weight:bold;text-align:center;white-space:nowrap;line-height:160%;
}
.gramImage3 {
	width:90%;
	border-radius:10px;
	object-fit:cover;
}

.gramImage4 {
 	width:100%;
	border-radius:10px;
	object-fit:cover;
	margin:10 0 5 0;
	border-radius:15px;
	filter:drop-shadow(0px 0px 4px gray);
	display: block;
	transition: all 0.2s linear;
}

.gramImage5:hover img {
  transform: scale(1.05);
}

.credit_context {
	font-size: 0.9em;
	color: black;
	text-align:justify;
	margin:12 0 0 0;
}

@media (prefers-color-scheme: dark) {
	.credit_context {
		font-size: 0.9em;
		color: white;
		text-align:justify;
		margin:12 0 0 0;
	}
}

.credit_btnBad {
	font-size:1.0em;
	font-weight:bold;
	color:#ffffff;
	background-color:#B70101;
	border:1px solid #B70101;
	border-radius:13px;
	padding:3 10;
	cursor:pointer;
	cursor:hand;
}

.credit_divBad {
	font-size:0.7em;
	font-weight:bold;
	color:#B70101;
	line-height:180%;
	margin:10 0 10 0;
	cursor:pointer;
	cursor:hand;
}

.credit_title {
	font-size: 1.5em;
	font-weight:bold;
	color: black;
	margin:4 0 19 0;
}

@media (prefers-color-scheme: dark) {
	.credit_btnBad {
		font-size:1.0em;
		font-weight:bold;
		color:#ffffff;
		background-color:#D9534F;
		border:1px solid #D9534F;
		border-radius:13px;
		padding:3 10;
		cursor:pointer;
		cursor:hand;
	}

	.credit_divBad {
		font-size:0.7em;
		font-weight:bold;
		color:#D9534F;
		line-height:180%;
		margin:10 0 10 0;
		cursor:pointer;
		cursor:hand;
	}

	.credit_title {
		font-size: 1.5em;
		font-weight:bold;
		color: white;
		margin:4 0 19 0;
	}
}

.paraImage {
	width:100%;
	margin:5 0 5 0;
	border-radius:15px;
	filter:drop-shadow(0px 0px 4px gray);
	display: block;
	transition: all 0.2s linear;
}

#scrollBtn {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: none;
	background-color: #555;
	color: white;
	font-size:0.8em;
	font-weight:bold;
	padding: 7 9 7 7;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	z-index:10000;
}

#scrollBtn:hover {
  background-color: #666;
}

#loader {
  position: fixed;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.floating-box {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  padding: 15 20 10 20;
  font-size: 0.8em;
  line-height: 200%;
  font-weight: bold;
  text-align: center;
  display: inline-block;
}

.text-wrapper {
  display: flex;
  align-items: center;
}

.text-wrapper img {
  margin-right: 5px;
}

.timeline_btnBad {
	font-size:0.8em;
	font-weight:bold;
	color:#ffffff;
	background-color:#B70101;
	border:1px solid #B70101;
	border-radius:8px;
	padding:0 10 1 10;
	margin:2 0 0 0;
}

.timeline_btnGood {
	font-size:0.8em;
	font-weight:bold;
	color:#ffffff;
	background-color:#337AB7;
	border:1px solid #337AB7;
	border-radius:8px;
	padding:0 10 1 10;
	margin:2 0 0 0;
}

.timeline_chro {
	font-size:0.8em;
	font-weight:bold;
	color:#ffffff;
	background-color:orange;
	border:1px solid orange;
	border-radius:8px;
	padding:0 10 1 10;
	margin:2 0 0 0;
}

.timeline_para {
	font-size:0.8em;
	font-weight:bold;
	color:#ffffff;
	background-color:#5CB85C;
	border:1px solid #5CB85C;
	border-radius:8px;
	padding:0 10 1 10;
	margin:2 0 0 0;
}

.timeline_quo {
	font-size:0.8em;
	font-weight:bold;
	color:#ffffff;
	background-color:gray;
	border:1px solid gray;
	border-radius:8px;
	padding:0 10 1 10;
	margin:2 0 0 0;
}

.timeline_gram_container {
	display: flex;
	flex-wrap: wrap;
}

.timeline_gram_box {
	width: 200px;
	height: 220px;
	margin: 20 20 0 0;
	text-align: center;
}

.middle {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.donate_box {
	display: flex;
	align-items: center;
	border: 2px solid #0083FF;
	border-radius: 15px;
	width:220px;
	height:40px;
	padding:5px;
	text-align:center;
}

.donate_box img {
	margin-left: 10px;
	margin-right: auto;
	width: 35px;
	height: 35px;
}

.donate_box:hover {
    background-color: #F0F0F0;
    border-color: black;
}

.donate_text {
	margin-left: auto;
	margin-right: 20px;
	font-weight:bold;
}