@import url('https://fonts.googleapis.com/css?family=Noto+Sans+KR|Noto+Serif+KR');

body {font-family: 'Noto Sans KR', sans-serif;}
#wrapper {margin: 0 auto; width: 1024px;}

#header {display: flex;}
#desc {width: 80%; margin: auto;}
#desc a {text-decoration: none; color: #000000;}
#header-image {margin: auto;}
#header-image img {width: 200px;}
#header {padding: 75px 0 25px 0; border-bottom: 1px solid #ebeaea;}
#header h1 a {font-family: 'Noto Serif KR'; font-size: 26px; line-height: 55px; font-weight: 700; color: #000; text-decoration: none; margin: 0;}
#header p {color: #ada8a8; line-height: 35px;}

#index {text-align: center;} /* border: 1px dotted #ebeaea; */
#index p {line-height: 35px;}
#index a {text-decoration: none; color: #CE3822;}
.section-title {text-align: center; color: #000;}
#content {margin-top: 50px;}

#nav {height: 30px;}
#nav ul li {list-style: none; float:left; line-height: 30px; vertical-align: middle; text-align: center;}
#nav a {text-decoration: none; color: #000000; display: block; width: 180px;}

.post h2 {background-color: #fff9f0; font-size: 21px; font-weight: 500; line-height: 34px; padding: 10px 10px 10px 15px; border-radius: 5px;}
.post h3, h4 {margin-top: 75px; font-weight: normal;}
.post h3 {font-size: 18px; line-height: 18px; border-left: 5px solid #FCA404;  padding-left: 14px;}
.post p, ul, ol, form, input, .naver-blog-search {font-size: 15px; line-height: 35px;}
.post ul, ol {padding-left: 20px;}
.post a {text-decoration: none; color: #000000;}
.post {padding-bottom: 75px; border-bottom: 1px solid #ebeaea; margin-top: 75px;}
.post:last-child {border-bottom-width: 0px;}
.post img {width: 20%; margin: 20px 20px; vertical-align: middle;}

.practice a {text-decoration: none;}

.reference {margin-left: 20px; list-style-type: square;}
.reference a {color: black;}
.reference a:hover {text-decoration: underline;}

#navigation {margin: 25px 0 65px 0; color: #ada8a8;}
#navigation a {color: #CE3822; text-decoration: none;}
#nav-previous {display: inline-block;}
#nav-next {display: inline-block; float: right;}

#footer {padding-top: 35px; margin-bottom: 85px; border-top: 1px solid #ebeaea;}
#footer-desc {float: center; width: 15%; margin: 0; color: #ada8a8; font-size: 15px; line-height: 27px;}
#footer-nav {float: center; width: 60%; text-align: left;}
#footer-nav ul {margin-top: 0; line-height: 27px;}
#footer-nav li  {display: inline-block; margin: 0 0 0 20px;}
#footer-nav li a {text-decoration: none; color: #CE3822;}

form {text-align: center;}
.related-search input[type=text] {line-height: 0; }


@media (max-width: 860px) {
    #header {display: block; padding: 75px 20px 40px 20px; border-bottom: 1px solid #ebeaea;}
    #header h1, #header p {text-align: center;}
    #header-image {margin: 0; width: 100%; text-align: center;}
    #wrapper {width: 100%;}
    #header, #content, #footer {margin-left: 20px; margin-right: 20px;}
    .post p, ul, ol {font-size: 15px; line-height: 32px;}
    .post h3 {line-height: 30px;}
    #navigation {padding: 25px;}
    #footer-desc, #footer-nav {text-align: center; width: 100%;}
    #footer-nav ul {margin-top: 15px; padding: 0;}
    #footer-nav li:nth-child(1) {margin-left: 0;}
}