@charset "UTF-8";
/* 초기화 */
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }

body { font-size: 15px; font-family: 'Nanum Barun Gothic','Arial'; min-height: 100%; font-weight: 200; }

h1, h2, h3, h4, h5, h6, strong { font-weight: 300; }

h1, h2, h3, h4, h5, h6, form, fieldset, p, dl, dt, dd, ul, li { margin: 0; padding: 0; border: 0; font-family: inherit; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; margin: 0; padding: 0; }

ul, li { list-style: none; }

legend { font-size: 0; height: 0; }

label, input, button, select, img { display: inline-block; vertical-align: middle; font-size: 15px; transition: 0.3s; font-family: inherit; }

label { cursor: pointer; }

input[type='submit'], input[type='button'], input[type='reset'], button { cursor: pointer; padding: 0 10px; letter-spacing: -1px; font-weight: bold; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); font-family: inherit; }

input[type="text"], input[type="password"], input[type="number"], input[type="email"] { height: 40px; font-size: 15px; padding: 5px 10px; border: 1px solid #bebebe; transition: 0.3s; font-family: inherit; box-sizing: border-box; }
input[type="text"]:focus, input[type="password"]:focus, input[type="number"]:focus, input[type="email"]:focus { padding: 5px 20px; background: #eff; }

select { padding: 5px; box-sizing: border-box; font-family: inherit; }

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
a[class*="btn"] { display: inline-block; text-align: center; text-decoration: none; }

img { max-width: 100%; max-height: 100%; border: 0; margin: 0; padding: 0; }

textarea { padding: 5px; box-sizing: border-box; font-size: 15px; border: 1px solid #bebebe; transition: .3s; font-family: inherit; }
textarea:focus { background: #eff; padding: 5px 10px; }

h1 { font-size: 25px; color: #fc3634; }

/* layout */
.wrap { width: 800px; height: 800px; margin: 0 auto; position: relative; overflow: hidden; border: 1px solid #eee; }
.wrap .arrow { position: absolute; right: 20px; bottom: 20px; z-index: 20; }
.wrap .arrow a { float: left; width: 40px; height: 40px; line-height: 40px; background: rgba(102, 102, 102, 0.5); color: #FFF; font-size: 20px; text-decoration: none; text-align: center; margin-left: 5px; opacity: .5; transition: .3s; }
.wrap .arrow a:hover { opacity: 1; }
.wrap .main, .wrap .sub { position: absolute; left: 0; top: 0; right: 0; bottom: 0; display: none; }
.wrap .main.active, .wrap .sub.active { display: block; }

.main { background: #04121b; }
.main > div { height: 100%; }
.main .img_wrap { height: 100%; }

.sub .page { display: none; height: 100%; }
.sub .page > div { height: 100%; }
.sub .page.active { display: block; }
.sub .page .bg { height: 100%; }
.sub .page .intro-title { position: absolute; left: 0; top: 25%; }
.sub .page .intro-title img { width: 66.6666%; }
.sub .page .intro-desc { position: absolute; left: 13%; top: 50%; font-size: 13px; line-height: 160%; }
.sub .page .title, .sub .page .desc, .sub .page .graph, .sub .page .point { position: absolute; right: 0; text-align: right; display: inline-block; }
.sub .page .title img, .sub .page .desc img, .sub .page .graph img, .sub .page .point img { display: inline-block; width: 66.6666666667%; }
.sub .page .title.title img, .sub .page .desc.title img, .sub .page .graph.title img, .sub .page .point.title img { width: 69.6666666667%; }
.sub .page.sub03 .title { bottom: 74%; }
.sub .page.sub03 .desc { bottom: 55%; }
.sub .page.sub03 .graph { bottom: 40%; }
.sub .page.sub03 .point { bottom: 20%; }
.sub .page.sub04 .title { bottom: 74%; }
.sub .page.sub04 .desc { bottom: 55%; }
.sub .page.sub04 .graph { bottom: 40%; }
.sub .page.sub04 .point { bottom: 20%; }
.sub .page.sub05 .title { bottom: 74%; }
.sub .page.sub05 .desc { bottom: 55%; }
.sub .page.sub05 .graph { bottom: 40%; }
.sub .page.sub05 .point { bottom: 20%; }
.sub .page.sub06 .title { bottom: 74%; }
.sub .page.sub06 .desc { bottom: 55%; }
.sub .page.sub06 .graph { bottom: 40%; }
.sub .page.sub06 .point { bottom: 20%; }
.sub .page.sub07 .title { bottom: 74%; }
.sub .page.sub07 .desc { bottom: 55%; }
.sub .page.sub07 .graph { bottom: 40%; }
.sub .page.sub07 .point { bottom: 20%; }
.sub .page.sub08 .title { bottom: 74%; }
.sub .page.sub08 .desc { bottom: 55%; }
.sub .page.sub08 .graph { bottom: 40%; }
.sub .page.sub08 .point { bottom: 20%; }
.sub .page.sub09 .title { bottom: 74%; }
.sub .page.sub09 .desc { bottom: 65%; }
.sub .page.sub09 .graph { bottom: 50%; }
.sub .page.sub09 .point { bottom: 30%; }

/* animation */
.animation { opacity: 1; transform: inherit; transition: 1s; }
.animation.animationBefore { opacity: 0; transform: scale(0); transition: 0s; }
.animation.animationBefore.top2btm { transform: translateY(-100px); }
.animation.animationBefore.btm2top { transform: translateY(100px); }
.animation.animationBefore.left2right { transform: translateX(-100px); }
.animation.animationBefore.right2left { transform: translateX(100px); }
.animation.animationBefore.big2small { transform: scale(2, 2); }
.animation.animationBefore.default { transform: inherit; }
.animation.animationBefore.type2 { transition: 1s; }

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