body { width: 100%; margin: 0 auto; }

* { font-family: "Open Sans", "Nanum Barun Gothic", sans-serif; }

body > nav { height: 74px; background-color: white; border-bottom: 1px solid rgba(0,0,0,0.15); overflow: hidden; padding: 0 15px; }
body > nav > div > a { display: inline-block; text-decoration: none; color: black; }
body > nav > div:first-of-type { font-weight: bold; float: left; }
body > nav > div:first-of-type > a { font-weight: 600; font-size: 24px; line-height: 74px; height: 74px; padding: 0 14px; }
body > nav > div:not(:first-of-type) { float: right; }
body > nav > div:not(:first-of-type) > a { font-size: 16px; transition: all .15s ease-in-out; margin: 24px 4px; padding: 4px 7px; border-radius: 3px; }
body > nav > div:not(:first-of-type) > a:hover { background-color: #eee; }
body > footer { padding: 20px 0; background-color: #765; margin-top: 20px; }
body > footer > p { width: 1000px; margin: 0 auto; font-weight: 300; font-size: 16px; color: white; }
body > footer > p > a { color: white; margin: 0 5px; }

span.footnote { font-size: x-small; vertical-align: super; }



body.index > header { height: 850px; background-color: #eee; overflow: hidden; background-image: url(//vpn.dcmys.kr/images/bg.jpg); background-size: cover; background-position: center; color: white; text-align: center; }
body.index > header > div { margin-top: 330px; }
body.index > header > div > h1 { font-weight: 300; font-size: 60px; margin: 40px 0; }
body.index > header > div > a { color: white; text-decoration: none; padding: 10px 100px; background-color: #09f; border-radius: 5px; transition: all .15s ease-in-out; }
body.index > header > div > a:hover { background-color: #08e; }
body.index > section > div,
body.index > section > ol { text-align: left; width: 1000px; margin: 0 auto; padding: 100px; }
body.index > section > div:after { content: ' '; display: block; clear: both; }
body.index > section > div > h2 { font-weight: 300; font-size: 48px; margin-top: 50px; }
body.index > section > div > img { height: 286px; margin: 0 75px; }
body.index > section:nth-of-type(even) > div > img { float: left; }
body.index > section:nth-of-type(odd) > div > img { float: right; }
body.index > section > ol { font-size: small; }
body.index > article#pricing { text-align: center; padding: 100px; }
body.index > article#pricing > h2 { font-weight: 300; font-size: 48px; }
body.index > article#pricing > section { height: 320px; display: inline-block; vertical-align: top; width: 270px; position: relative; }
body.index > article#pricing > section > p { margin: 0; }
body.index > article#pricing > section > a { text-decoration: none; color: white; background-color: #1a9; padding: 5px 0; border-radius: 3px; display: inline-block; width: 100px; position: absolute; bottom: 0; left: 85px; }
body.index > article#pricing > section > a:hover { background-color: #2ba; }
body.index > article#pricing > section > a.disabled { background-color: #9aa !important; cursor: default; }

body.document p { margin-left: 1em; }
body.document { text-align: center; background-color: #ccc;}
body.document > nav { position: fixed; left: 0; right: 0; z-index: 1; }
body.document > article { background-color: white; width: 960px; display: inline-block; text-align: left; padding: 100px; box-sizing: border-box; box-shadow: 0 0 10px; margin-top: 75px; }
body.document > article:first-child { margin-top: 0; }
body.document > footer { margin-top: 0; }

ol > li > ol { counter-reset: list; }
ol > li > ol > li { list-style: none; position: relative; }
ol > li > ol > li:before { content: "(" counter(list) ") "; counter-increment: list; position: absolute; left: -1.4em; }