.math .frac {
	display: inline-block;
	vertical-align: middle;
	text-align: center;
}
.math .frac > * {
	display: block;
}
.math .frac > *:nth-child(1) {
	border-bottom: solid thin;
}
.comment {
	display: block;
	font-size: small;
}
.comment.inline {
	display: inline;
}
.comment::before {
	content: "(";
}
.comment::after {
	content: ")";
}
.math {
	font-family: 'Crimson Text', serif;
	font-size: large;
	letter-spacing: 0.1em;
}
div.math {
	margin: auto;
	width: fit-content;
}
.book-title::before {
	content: "⟨";
}
.book-title::after {
	content: "⟩";
}
.preface,.conclusion {
	border: solid thin;
	color: grey;
}
.article {
	background: whitesmoke;
}
.preface,.conclusion,.article {
	margin: 4px auto;
	max-width: 800px;
	padding: 30px;
}
.example,.slide-show {
	background: ivory;
	border: solid thin lightpink;
	margin: 4px;
	padding: 5px;
}
.slide-show::before {
	content: '클릭해서 넘기기';
	color: grey;
	font-size: small;
}
body {
	background: azure;
	margin: 0;
}
.contents {
	background: white;
	padding: 5px;
}
.footer {
	font-size: small;
	text-align: center;
	border-top: solid thin;
	padding: 10px;
}
.not-ready {
	text-decoration: line-through;
	color: grey;
}
.not-ready::after {
	content: "(준비중)";
}
h1 {
	text-align: center;
}
img {
	max-width: 400px;
}
.img-container {
	text-align: center;
}
.img-container img {
	width: 100%;
}
.hl {
	color: grey;
}
.hl1 {
	color: red;
}
.slide-number {
	display: block;
	text-align: center;
	font-size: small;
}
table {
	width: 100%;
	max-width: 400px;
	border-collapse: collapse;
	margin: auto;
}
td,th {
	border: solid grey thin;
}
th {
	background: yellow;
}
.gallery {
	width: 47%;
	display: inline-block;
	text-align: center;
	font-size: xx-large;
	background: white;
	box-shadow: 4px 4px lightblue;
    margin: 4px;
    padding: 4px;
    vertical-align: middle;
}
@media only screen and (max-width: 500px) {
  .gallery {
    width: 100%;
  }
}
.math .group {
	display: inline-block;
	vertical-align: middle;
	border-left: thin solid;
	padding-left: 4px;
	border-radius: 4px;
}
.math .overline {
	border-top: solid thin;
}
.math .sqrt {
	display: inline-flex;
	position: relative;
	left: -20px;
}
.math .sqrt::before {
    content: "\0221A";
    font-size: 30px;
    position: relative;
    left: 18px;
}
.math .sqrt > * {
	border-top: solid 2px;
    display: flex;
    position: relative;
    top: 8px;
}