*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 100%;
}

html {
	width: 100%;
	height: 100%;
  word-break: break-all;
}

body {
	top: 0;
	left: 0;
	margin: 0; 
	padding: 0;
	width: 100%;
	height: 100%;
	font-size: 11pt;
	text-decoration: none;
	color: black;
	background-color: white;
	font-family: "Gothic A1", "Noto Sans KR", Sans, Sans-serif;
	word-break: keep-all;
	line-height: 1.8;
	position: absolute;
}

.logo {
	position: fixed;
	width: 100px;
	top: 0;
	right: 0;
	text-align: center;
}

.logo img {
	width: 100px;
	right: 0;
}

.frames {
	position: fixed;
	width: 100px;
	font-size: 3em;
	top: 90px;
	right: 0;
	text-align: center;
}

::-webkit-scrollbar {
  width: 12px; /* 스크롤바의 너비 설정 */
}

::-webkit-scrollbar-thumb {
  background-color: transparent; /* 스크롤바 썸의 색상을 투명하게 설정 */
}

::-webkit-scrollbar-track {
  background-color: transparent; /* 트랙의 색상을 투명하게 설정 */
}


h5 { font-size: 1em; line-height: 1.5;}

.box {
	width: 80%;
	z-index: 8888;
}

.card { 
	margin: 0.3em; 
	padding: 0.3em; 
	cursor: pointer; 
	display: inline-block; 
	font-family: "Gothic A1", "Noto Sans KR";
	text-align: left;
	line-height: 1;
	font-size: 1em;
}

.remote {
	background-color: transparent;
	z-index: 9999;
}

/*ui*/
	.more-on-abs {
		position: fixed;
		left: 0;
		bottom: 0;
		margin: 0;
		padding: 0;    
		background-color: blue;
		color: white;
		cursor: pointer;
	}

	.more-on-abs_esc {
		position: fixed;
		bottom: 0.5em;
		left: 0.5em;
	}

	.abs-intro {
	font-size: 0.8em;
	}

	.more-on-abs_contents {
		font-size: 1em;
		background-color: cyan;
		position: fixed;
		display: none;
		left: 0;
		bottom: 0;
		max-width: 20%;
		height: 100%;
		overflow-y: auto;
		padding: 0.5em;
	}


	button {
		cursor: pointer;
		font-size: 1em;
		margin-left: 10px;
	}

	.buttons {
		z-index: 9999;
		position: fixed;
		right: 0;
		bottom: 0;
	}



/*archive*/

.box-archive {
	position: absolute;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	box-shadow: inset 0 0 35px 5px cyan, inset 0 2px 1px 1px cyan, inset 0 -2px 1px cyan;
  overflow-y: auto;
}

.back-numbers {
	max-width: 100%;
	z-index: 7777;
	cursor: default;
	font-size: 1em;
	background-color: transparent;
	padding: 3em;
}


summary {
	cursor: pointer;
	padding: 0;
}

.index_archive {
	position: fixed;
	right: 0.5em;
	bottom: 0.5em;
}


/*텍스트*/
.board {
  width: 50%;
  height: 100%;
  margin: 0;
  padding: 1em;
  font-size: 1em;
  cursor: default;
  position: fixed;
  overflow-y: scroll;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


.board_frames {
  width: 70%;
  height: 90%;
  cursor: default;
  margin: 0 auto;
  padding: 2em;
  background-color: white;
  overflow-y: scroll;
  border: 5px outset;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}


p {margin-bottom: 0.8em}

/*제목*/ h1 { font-style: bold; font-size: 1.5em; margin: 0 auto; }
/*저자명*/ h2 { font-style: none; font-weight: normal; font-size: 1em; margin-bottom: 1.5em; }
/*소개, 인용*/ h3 { font-weight: normal; padding-left: 2em; margin-top: 1.5em; margin-bottom: 1.5em; color: gray; }
/*소제목*/ h4 { font-weight: bold; margin-top: 1.5em; }
/*각주 번호*/ sup { font-size: 0.5em; font-weight: bold; color: green; text-decoration: none; }

/*이미지*/
figure {
	overflow-x: none;
	max-width: 55em;
	text-align: center;
	margin-top: 2em;
	margin-bottom: 1em;
}

figure img {
	width: 80%;
	margin: 0 auto;
	display: block;
}

figcaption {
	font-size: 0.8em;
	text-align: center;
}



/*링크*/
a {
	color: black;
	text-decoration: none;
}
a:link {
	color: black;
	text-decoration: none;
}
a:visited {
	color: black;
	text-decoration: none;
}


button:link {
	color: black;
	text-decoration: none;
}

button:visited {
	color: black;
	text-decoration: none;
}


.footnote_number {
	color: orange;
	text-decoration: underline;
	font-size: 1em;
}

.footnote_number a {
	color: orange;
	text-decoration: underline;
}

.footnote_number a:link {
	color: orange;
	text-decoration: underline;
}

.footnote_number a:visited {
	color: orange;
	text-decoration: underline;
}

.card a:link {
	color: black;
	text-decoration: none;
}

.card a:visited {
	color: black;
	text-decoration: none;
}

.board a:link {
	color: black;
	text-decoration: none;
}








@media screen and (max-width: 900px) {
.current_issue {
	max-width: 90%;
}

.options_contents {
	max-width: 90%;
}

body {
	font-size: 0.8em;
}

.back-numbers {
	max-width: 90%;
}

.board {
	width: 80%;
}

/*이미지*/
figure {
	overflow-x: none;
	max-width: 100%;
	text-align: center;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

figcaption {
	font-size: 0.8em;
	text-align: center;
}

.board_frames {
  width: 90%;
  margin: 0 auto;
  padding: 2em;
  font-size: 1em;
  cursor: default;
  background-color: white;
  border: 5px outset;
  z-index: 7777;
}

.logo {
	width: 60px;
	top: 0;
	right: 0;
	z-index: 10000;
}

.frames {
	width: 60px;
	font-size: 2.5em;
	top: 50px;
	right: 0;
	z-index: 10000;
}

.logo img {
	width: 60px;
	z-index: 12000;
}


@media screen and (max-width: 500px) {
.current_issue {
	max-width: 80%;
}

.options_contents {
	max-width: 80%;
}

.back-numbers {
	max-width: 90%;
}

.board {
	width: 85%;
}

}