@charset "UTF-8";
/* 
file:  layout.css
author:  Lee Eo-jin
css order:  id > tag & class > class > tag
css selector order:  type > layout > class > others
css property order:  (top,  right,  bottom,  left)
*/
/* 
file: variables.scss
author: Lee Eo-jin
*/
/* 
width
*/
/* 
spacing
*/
/* 
typography
*/
/* 
colors
*/
/* 
default
*/
body {
  -webkit-font-smoothing: antialiased;
  margin: 0;
  color: #232323;
  font-size: 10px;
  font-family: "Apple SD Gothic Neo", AppleSDGothicNeo, "Noto Sans KR", NanumGothic, "Malgun Gothic", "맑은 고딕", 돋움, dotum, arial, sans-serif;
  line-height: 1.82;
  word-break: keep-all;
  word-spacing: .03em; }

h1,
h4,
h5,
h6 {
  font-weight: 400; }

h1 {
  font-size: 4.2em;
  line-height: 0.7;
  letter-spacing: -0.012em; }

h2 {
  font-size: 2.8em;
  line-height: 1.34; }

h3 {
  font-size: 2em;
  line-height: 0.7; }

ul,
ol {
  margin: 2.2em 0; }

ul {
  padding: 0;
  list-style: none; }

ol {
  padding: 0 0 1.8em 1.8em; }

p,
li,
span {
  font-size: 1.75em;
  line-height: 1.82; }

a {
  color: #232323;
  text-decoration: none;
  border-bottom: 2px solid #4d4ddd;
  transition: color 0.3s linear; }
  a:hover, a:active {
    color: #4d4ddd; }

/* 
header
*/
#home {
  font-weight: 700;
  font-size: 1.75em;
  color: #ffffff;
  border: none;
  padding-left: 1.12em; }

/* 
main
*/
code {
  position: relative;
  top: -6px;
  left: -105px;
  right: 0;
  bottom: 0;
  font-family: consolas, "맑은 고딕", "Malgun Gothic", monospace;
  font-size: 1.46em;
  line-height: 1.6;
  color: #dddddd; }

.ex {
  color: #232323; }

/* 
navigation
*/
nav > ul > li a {
  border: none; }

.menu-top > a {
  font-weight: 700; }

/* 
footer
*/
footer > p {
  color: #767676;
  font-size: 1.46em;
  line-height: 1.82;
  padding: 0 1.8em; }

/* 
header
*/
header {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 11;
  height: 44px;
  padding-right: 200px;
  background-color: #4d4ddd;
  box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.3); }

.header-wrapper {
  max-width: 760px;
  margin: 6px auto; }

/*
main, footer
*/
.main-content,
footer {
  max-width: 760px;
  min-width: 380px;
  margin: 44px auto; }

.main-wrapper {
  margin-right: 200px;
  padding-right: 4.5em; }

article {
  padding: 9em 4em;
  border-bottom: 1.8px solid #dddddd; }

section {
  padding-top: 6em; }

pre {
  display: block;
  overflow: auto hidden;
  margin-bottom: 3em;
  border-left: 6px solid #767676;
  background-color: #30303f; }

.ex {
  margin: 3em 0;
  padding: 3em;
  border-radius: 1.6em;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1); }

/*
navigation
*/
nav {
  position: fixed;
  top: 44px;
  right: 0;
  bottom: 0;
  left: auto;
  overflow-y: auto;
  z-index: 1;
  width: 200px;
  padding: 3em 0 3em 44px;
  background-color: #f0f6ff; }

.menu-top {
  margin-top: 1.12em; }

/*# sourceMappingURL=layout.css.map */