html, body {
    font-family: 'Spoqa Han Sans Neo', 'sans-serif';
    background-color: #fdfdfd;
    font-size: 16px;
    -webkit-text-size-adjust : none;
    -ms-text-size-adjust : none;
    -moz-text-size-adjust : none;
}

h1 {
    font-size: 26px;
    margin-bottom: 36px;
}

h2 {
    scroll-margin-top: 60px;
    margin-top: 60px;
    margin-bottom: 19px;
}

h3 {
    scroll-margin-top: 40px;
    margin-top: 40px;
    margin-bottom: 19px;
}

.content > div > h3 {
    margin-top: 19px;
    margin-bottom: 19px;
}

.semititle {
    margin-top: 60px;
}

a {
    color: black;
    text-decoration: none;
}

mark {
    background-color: #f6e199;
}

.content p {
    margin-top: 36px;
    margin-bottom: 36px;
    line-height: 1.6;
    word-break: keep-all;
}

h2+p, h3+p {
    margin-top: 0px !important;
}

#info-flex-wrap {
    display: flex;
    margin-bottom: 20px;
    flex-wrap: flex-start;
}

#info-flex-wrap img {
    margin: 0px 20px;
}

#info-flex-wrap p {
    margin: 0px;
}

.content .info {
    background-color: #e3e6fc;
    padding: 1px 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 4px #ccc;
    margin-top: 60px;
}

.content .warn {
    background-color: #fceec7;
    padding: 1px 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 4px #ccc;
    margin-top: 60px;
}

.content .study {
    background-color: #e7fbe4;
    padding: 1px 20px;
    border-radius: 5px;
    box-shadow: 0px 0px 4px #ccc;
    margin-top: 60px;
}

.content .alert {
    background-color: #fceec7;
    padding: 1px 10px;
    border-radius: 5px;
    box-shadow: 0px 0px 4px #ccc;
    margin: 20px 0px;
}

.content .alert p {
    margin: 10px;
}

.content .info p, .content .warn p, .content .study p{
    margin-bottom: 20px;
}

.content a {
    color: #445cd5;
}

.content a:hover {
    text-decoration: underline;
}

.content .grid-image {
    margin: auto 0px;
    width: 100%;
    white-space: nowrap;
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: #555 #eee;
    text-align: center;
}

.content .grid-image img {
    margin: 0px;
    display: inline-block;
    text-align: center;
}

.content img {
    max-width: 100%;
    display: block;
    margin: 0 auto;
}

.content video {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}

.content .desc {
    display: block;
    text-align: center;
    margin-top: 10px;
    margin-bottom: 30px;
    font-size: smaller;
    color: #000;
}

.content code {
    margin: 0 2px;
    padding: 0px 5px;
    box-shadow: 0px 0px 1px #888;
    background-color: #f8f8f8;
    border-radius: 3px;
    font-family: Consolas, Menlo, monospace, 'Spoqa Han Sans Neo', 'Malgun Gothic';
    font-size: 14px;
}

.content pre code {
    display: block;
    padding: 10px 20px;
    white-space: normal;
    font-size: medium;
}

.content pre code .inline-code {
    display: inline;
    padding: 0px 5px;
}

.content codebox code {
    display: block;
    padding: 10px 20px;
    margin: 16px 0;
    white-space: nowrap;
    overflow-x: auto;
    text-overflow: ellipsis;
    scrollbar-width: thin;
    scrollbar-color: #555 #eee;
    font-size: medium;
}

.content codebox code table tr td:nth-child(2n-1){
    vertical-align: top;
}

.content codebox code table {
    border-collapse: collapse;
}

.content codebox code table tr td:nth-child(2n+0) {
    word-break: break-all;
    padding-left: 8px;
    line-height: 1;
}

.content codebox code table tr td:nth-child(2n-1) {
    border-right: 2px solid black;
    padding-right: 10px;
    text-align: right;
    -webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
    line-height: 1;
}

.content samp {
    margin: 0 2px;
    padding: 1px 5px 0px 5px;
    white-space: nowrap;
    background-color: #f0f0f0;
    border-radius: 3px;
    font-family: Consolas, Menlo, monospace, 'Spoqa Han Sans Neo', 'Malgun Gothic';
    font-size: 14px;
}

.content .inline-samp {
    margin: auto;
    padding: auto;
    background-color: transparent;
    border-radius: 0px;
}

.content .white {
    background-color: #f8f8f8;
    box-shadow: 0px 0px 1px #888;
}

.content kbd {
    margin: 0 2px;
    padding: 0px 5px;
    white-space: nowrap;
    box-shadow: 0px 0px 2px #888;
    background-color: #f8f8f8;
    border-radius: 3px;
    font-family: Consolas, Menlo, monospace, 'Spoqa Han Sans Neo', 'Malgun Gothic';
    font-size: 14px;
}

.content .table-basic {
    width: 100%;
    border: 2px solid #00c896;
    border-collapse: collapse;
}

.content .table-basic th {
    border: 1px solid #00c896;
    background-color: #00c896;
    color: white;
    padding: 5px 0px;
}

.content .table-basic td {
    padding: 5px 10px 5px 10px;
    border-right: 1px solid #00c896;
}

.content .table-basic tr:nth-child(2n+0) {
    background-color: #f5faf9;
}

.content .table-basic tr:nth-child(2n-1) {
    background-color: #ffffff;
}

.content .table-wrap {
    width: 100%;
    overflow-x: auto;
    table-layout : fixed;
    text-overflow: ellipsis;
    white-space: nowrap;
    scrollbar-width: thin;
    scrollbar-color: #555 #eee;
}

.content .file-box {
    position: relative;
    max-width: 300px;
    height: 90px;
    border: 1px solid #eee;
    box-shadow: 0px 0px 4px #ccc;
    margin: 20px auto 20px auto;
    overflow: hidden;
    z-index: 1;
}

.content .file-box .file-title {
    text-indent: 20px;
    line-height: 33px;
    background-color: #333;
    color: white;
 }
 
.content .file-box .file-desc {
    text-indent: 20px;
    line-height: 57px;
}

.content .file-box a {
    color: black;
    text-decoration: none;
}

.content .file-box .file-desc::before {
    left: 0;
    top: 30px;
    width: 100%;
    height: 0;
    border-bottom-left-radius: 45%;
    border-bottom-right-radius: 45%;
    background: #eee;
    z-index: -1;
    position: absolute;
    transition: 0.8s ease;
    content: "";
}

.content .file-box .file-desc:hover::before {
    height: 200%;
}

.content details .file-box .file-desc {
    background: #fff;
}
.content details .file-box .file-desc:hover {
    text-decoration: underline;
}

.content .half {
    width: 70%;
    margin-bottom: 30px;
}

.content .mini-question {
    margin-bottom: 3px;
}

.content .mini-question-answer {
    margin: 0px 2px 16px 2px;
    border-radius: 3px;
    box-shadow: 0px 0px 2px #888;
    background-color: #667766;
    color:white;
}

.content .mini-question-answer summary {
    padding: 10px 20px;
}

.content .mini-question-answer summary:hover {
    background-color: #556655;
}

.content .mini-question-answer[open] summary {
    border-bottom: 1px solid #ddd;
}

.content .mini-question-answer-text {
    display: block;
    padding: 10px 20px;
    background-color: #f8f8f8;
    color: black;
}

.content ul li::marker {
    color: #667766;
    line-height: 1.8rem;
}

.content blockquote {
    margin: 0px 0px 1.75em 0px;
    position: relative;
    padding: 20px 20px;
    background: #f0f0f0;
    color: #282828;
}

.content blockquote p {
    padding: 0;
    margin: 0px 0px;
} 

.content .half-box {
    display: block;
    max-width: 300px;
    background-color: #6A6A6A;
    text-align: center;
    margin: 10px auto 30px auto;
    padding: 10px;
    font-size: smaller;
    color: #fff;
}

.content .half-box p {
    margin-bottom: 19px;
}

@media screen and (max-width: 1023px) {
    .content p {
        word-break: break-all;
    }
}

@media screen and (max-width: 867px) {
    .content p {
        word-break: break-all;
    }

    .content .grid-image {
        display: block;
        text-align: center;
    }

    .content .grid-image img{
        display: inline-block;
        max-width: 80%;
        margin: 0 auto;
    }

    .content img{
        height: auto;
    }

    #info-flex-wrap img {
        display: none;
    }
}