body {background: #ddd}

a {text-decoration: none; font-weight: 600; color: #d03a26}
a:hover {color: #26b2d0}


#container {max-width: 100%; margin: 0 auto}

#header {width: 100%; height: 400px; overflow: hidden; background: url('./images/background_pc.jpg') 0 0 no-repeat; background-size: cover; position: relative}


  #logo {line-height: 390px; height: 400px; background: rgba(0, 0, 0, 0.4)} 
    #logo h1 {margin: 0; text-align: center}
    #logo a {color: #fff; font-size: 2em; font-weight: 800; font-family: 'Ubuntu', 'Nanum Gothic', sans-serif}
    #logo a:hover {color: #FFD44E}
    
    #logo.active {height: 80px; line-height: 75px; background: #333; width: 100%; position: fixed; top: -100; z-index: 1}
    #logo.active > h1 {height: 80px; font-size: 1.2em}

  #menu {float: right; margin: 0 30px 0 0; position: absolute; right: 20px; top: initial; bottom: 10px}
    #menu ul {margin: 0; padding: 0 }
    #menu li {display: inline-block; margin: 5px}
      #menu a{color: #FFF6EE; font-size: 2em; font-family: 'Ubuntu', 'Nanum Gothic', sans-serif}
      #menu a:hover {color: #FFD44E}

      #menu.active {float: right; position: fixed; top:0; bottom: initial; z-index: 1}
      #menu.active a {font-size: 1.5em}

#wrap {margin: 0 auto; max-width: 1220px}
	#aside {float: left; width: 336px; margin: 10px 0; padding:15px}
		
		#aside nav {padding: 15px; background: #832a1c; font-family: 'Nanum Gothic', serif; border-radius: 0px}
		#aside a {color: #fff; font-weight: 600}
		#aside a:hover {color: #FFD44E}
		
	#aside h2{color: #fff; font-weight: 600; font-size: 1.8em; margin: 0 0 20px 0; padding: 0 0 5px 0; border-bottom: 2px solid #b34a2c; font-family: 'Ubuntu', 'Nanum Gothic',  sans-serif}
			#aside ul {margin: 0px; padding: 0; list-style:none}
			#aside li {margin: 2px 0}
				#aside nav > div > ul > li > a {font-size: 20px}
				#aside nav > div > ul > li > ul {padding: 0 0 0 10px}
				#aside nav > div > ul > li > ul > li {margin: 10px 0 0 0}
				#aside nav > div > ul > li > ul > li > a {font-size: 18px}
				#aside nav > div > ul > li > ul > li > ul {padding: 0 0 0 20px}
				
  #section {float: right; width: 70%; max-width: 800px; margin: 25px 0 ; padding: 20px 20px; font-family: 'Nanum Gothic', serif; background: #fefefe; color: #333; border-radius: 0px}
    #article {word-break: break-word; line-height: 24px}
    #article h2 {padding: 0 0 10px 0; margin: 15px 0; font-size: 1.8em; border-bottom: 2px solid #aaa; font-family: 'Ubuntu', sans-serif}
		#article h3 {font-size: 1.3em}
    #article img {max-width: 800px;}

#footer {clear: both; color: #FFF6EE; padding: 10px; background: #832a1c; font-family: 'Nanum Gothic', serif}
		#footer a{color: #FFF6EE; font-family: 'Ubuntu', 'Nanum Gothic', sans-serif}
		#footer a:hover {color: #FFD44E}
	#footer > div {text-align: center}
	#footer > nav {text-align: center}

	#footer nav > div {display: inline-block; margin: 40px 10px 10px 10px; width: 15%; vertical-align: top; background: rgba(255, 255, 255, 0.2); border-radius: 5px}
	#footer dl {padding: 10px 10px; margin: 0}
	#footer dt {text-align: left; font-weight: 800; margin: 0 0 5px 0; padding: 0 0 5px 0; border-bottom: 1px solid #ccc}
	#footer dd {text-align: left; margin: 0}

#ad1 {margin: 0 auto 25px auto; width: 336px; background: #832a1c}
#ad2 {margin: 25px auto; width: 728px; background: #832a1c}

/*
@media (min-width: 805px) and (max-width: 1024px) {
#aside {float: left; width: 220px; margin: 10px 0; padding:15px}
#ad1, #ad2 {display: none}
} 
*/

/* @media (min-width: 0px) and (max-width: 804px) { */

@media (min-width: 0px) and (max-width: 1279px) {
#logo > h1 {font-size: 1.5em}
#logo.active > h1 {font-size: 0.8em; text-align: left; margin: 0 0 0 10px}
#menu.active {margin: 0; right: 0}
#menu li {font-size: 0.8em}

#aside {float: none; width: 100%; margin: 10px 0; padding: 0}
#section {float: none; width: 100%; max-width: 100%; margin: 0; padding: 0}
#article {width: 98%; padding: 1%}
#article .imageblock, #article img {max-width: 100%}
#footer nav {display: none}
#ad1, #ad2 {display: block; width: 300px; margin: 10px auto; text-align: center}
}
/* 티스토리 스킨 */


.search {text-align: center}
.search input {width: 90%; padding: 10px 2%; border: 3px solid #3f2e24; border-radius: 5px; margin: 10px 0; box-sizing: border-box; font-size: 16px}
.search .submit {display: none;}

textarea {width: 98%; height: 120px; background: #fff; border: 1px solid #832a1c}

.commentWrite > p:last-child, .guestWrite > p:last-child {text-align: center}
.commentWrite input {border: 1px solid #832a1c; padding: 5px 10px; border-radius: 3px}

input[type=submit] {background: #832a1c; padding: 10px 20px; border: none; border-radius: 5px; color: #fff; font-family: 'Ubuntu', 'Nanum Gothic', sans-serif; font-weight: 600}

.paging {text-align: center}
.paging > a {background: #832a1c; color: #fff; width: 30px; height: 30px; line-height: 30px; display: inline-block; border-radius: 3px}
.paging a:hover {background: #fff; color: #832a1c;}

.paging a > span {background: #832a1c; color: #fff; width: 30px; height: 30px; line-height: 30px; display: inline-block; border-radius: 3px}
.paging a > span:hover {background: #fff; color: #832a1c;}
.paging a > .selected {background: #fff; color: #832a1c; font-weight: 600; border: 1px solid #832a1c}

.commentList > ol {margin: 15px 0; padding: 0; list-style: none}
.commentList > ol > li {border-radius: 5px; opacity: 0.4; margin: 10px}
.commentList > ol > li:hover {opacity: 1}
.commentList > ol > li > div {padding: 10px; border: 2px solid #832a1c; border-radius: 5px}

.commentList > ol ul {margin: 15px 0; padding: 0; list-style: none}
.commentList > ol ul > li {margin: 10px 0 0 0}
.commentList > ol ul > li > div {padding: 10px; border: 2px solid #3f2e24; border-radius: 5px}


.guestList > ol {margin: 15px 0; padding: 0; list-style: none}
.guestList> ol > li {border-radius: 5px; opacity: 0.4; margin: 10px}
.guestList> ol > li:hover {opacity: 1}
.guestList> ol > li > div {padding: 10px; border: 2px solid #832a1c; border-radius: 5px}

.guestList> ol ul {margin: 15px 0; padding: 0; list-style: none}
.guestList > ol ul > li {margin: 10px 0 0 0}
.guestList> ol ul > li > div {padding: 10px; border: 2px solid #3f2e24; border-radius: 5px}

.download {text-align: center}
.download a {display: inline-block; border: 3px solid #3f2e24; padding: 15px 20px; border-radius: 5px; background: #FFF6EE}
.download a:hover {border-color: #EF4089}

.article {margin: 30px 0 0 0}
.author {font-weight: 600; font-size: 1em}