div, article, section, aside {box-sizing: border-box;}

#wrapper {
  width: 800px;
  margin: 0 auto;
}

body {
  font: 12px "맑은 고딕", "돋움";
  color: #424242;
}

a {
  text-decoration: none;
  color: #ffab91;
}

a:hover {
  color: #aaa;
  transition: 0.2s;
}

span.bar {
  margin-left: 15px;
  display: inline-block;
  width: 1px;
  height: 10px;
  background: #ddd;
}

ul li {
  list-style-type: none;
}

header {
  height: 105px;
  border-bottom: 1px solid #ccc;
  position:relative; /* .utility 부모 선언, position:absolute; */
}

.utility { position:absolute; right:26px; top:8px; }

.utility a {
  font-size:11px;
  text-decoration: none;
  color: #aaa;
}

.utility a:hover {
  color: #ffab91;
  transition: 0.2s;
}

header h1 {
  float: left;
  perspective:200px; /* 아래소스 로고 이미지 회전시, 원근감(깊이) 효과 */
}

header h1 img:hover {
   transform:rotateX(30deg); /* 메인 로고 이미지 30도 회전 */
   transition:2s;
}
header h1 img{
   transition:2s;
}

header h2 {
  background: #424242;
  font-weight: normal;
  font-size: 14px;
  padding: 3px;
  float: right;
  display: inline-block;
  color: #fff;
  border-radius:6px;
}

.sub_title {
	background:url("https://t1.daumcdn.net/cfile/tistory/13384F4A4E587D5844") no-repeat left 9px;
	padding: 0 0 0 20px;
	font-size:20px;
	color:#fff;
	text-shadow:2px 2px 3px #383D3B;
}

nav ul {
  width: 700px;
  padding-top: 50px;
  text-align: center;
}

nav ul li {
  clear: both;
  font-weight: bold;
  font-size: 14px;
  display: inline-block;
  padding: 0px 10px 0px 0px;
}

section {
  width: 620px;
  float: left;
}

article {
  margin:0px;
  padding: 10px 15px;
  line-height: 1.7em;
}

aside {
  width: 160px;
  margin: 10px;
  height: 450px;
  float: right;
  padding: 0 10px;
  background:#eee url('../images/logo.png') no-repeat center 380px;
  background-size: 90px 60px;
  border-radius:10px;
}

aside h4 {
  font-size: 14px;
  letter-spacing: 0.2em;
  font-variant: small-caps;
  text-align: center;
}

aside p {
  line-height: 1em;
}

footer {
  clear:both;
  background:#424242;
  border-radius:10px;
  position:relative; /* .draft 부모 선언, position:absolute; */
}

footer p {
  text-align: center;
  line-height: 1.5em;
  color:#fff;
  padding:10px;
}

.draft { position:absolute; right:10px; bottom:10px; } /* 또 다른(첫 번째), Pet UI 디자인 시안 */

.draft a {
  font-size:11px;
  text-decoration: none;
  color: #aaa;
}

.draft a:hover {
  color: #ffab91;
  transition: 0.2s;
}

/*//////////////////////////////////////////////////////
///  [윤샘컴교실]  http://edyoon.tistory.com  ///
////////////////////////////////////////////////////*/