@import url('layout.css');
@import url('nav.css');
@import url('common.css');

/* ------------------------------------------------------------------ */
/* a. Webfonts and Icon fonts
 ------------------------------------------------------------------ */

@import url("fonts.css");
@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);


/* ------------------------------------------------------------------
/* b. Reset
      Adapted from:
      Normalize.css - https://github.com/necolas/normalize.css/
      HTML5 Doctor Reset - html5doctor.com/html-5-reset-stylesheet/
/* ------------------------------------------------------------------ */


html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent; -webkit-font-smoothing:antialiased;
}
ul, ol { margin:0;}
ul li, ol li { list-style:none;}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block;}
audio, canvas, video { display:inline-block;}
audio:not([controls]) { display:none; height:0;}
[hidden] { display:none;}
code, kbd, pre, samp { font-family:monospace, serif; font-size:1em;}
pre { white-space:pre; white-space:pre-wrap; word-wrap:break-word;}
blockquote, q { quotes:&#8220 “}
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none;}
ins { background-color:#fff8de; color:#000;text-decoration:none;}
mark { padding:5px 10px 0 10px; background-color:#332f25; color:#fff; border-radius:5px}
del { text-decoration:line-through;}
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help;}
table { border-collapse:collapse; border-spacing:0;}

/* ------------------------------------------------------------------ */
/* c. Default and Basic Styles
      Adapted from:
      Skeleton CSS Framework - http://www.getskeleton.com/
      Typeplate Typographic Starter Kit - http://typeplate.com/
/* ------------------------------------------------------------------ */


/*---------------------------------------------------------
1. Basic
------------------------------------------------------- */

*, *:before, *:after { -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;}
html { font-size:62.5%;}
body { background:none; font-family:'NotoSansKR', Arial, Helvetica, sans-serif; font-size:14px; line-height:1.8; color:#666; -webkit-font-smoothing:subpixel-antialiased; font-smoothing:subpixel-antialiased; /* Fix for webkit rendering */ -webkit-text-size-adjust:100%;}

/*---------------------------------------------------------
main : 1673c4     blue
point : f2432f     red
point : 6782b8    blue2
  'notokr', 'NotoSansKR', sans-serif, Gothic A1', 'FontAwesome', "Font Awesome 5 Free"
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 640px) {
}
@media screen and (max-width: 480px) {
}
--------------------------------------------------------------------- */

/*	Blockquotes */
blockquote { margin:30px 0px; padding-left:40px; position:relative;}
blockquote:before {
    content:"\201C"; opacity:0.45; font-size:80px; line-height:0px; margin:0; font-family:arial, sans-serif; position:absolute; top:30px; left:0;
}
blockquote p { font-family:inherit; font-style:italic; padding:0; font-size:18px; line-height:30px;}
blockquote cite { display:block; font-size:12px; font-style:normal; line-height:18px;}
blockquote cite:before { content:"\2014 \0020";}
blockquote cite a, blockquote cite a:visited { color:#8B9798; border:none;}

/* ---------------------------------------------------------------------
/*  Pull Quotes Markup
/*
    <aside class="pull-quote">
		<blockquote>
			<p></p>
		</blockquote>
	 </aside>
/*
/* --------------------------------------------------------------------- */
.pull-quote { position:relative; padding:18px 30px 18px 0px;}
.pull-quote:before, .pull-quote:after { height:1em; opacity:0.45; position:absolute; font-size:80px; font-family:Arial, Sans-Serif;}
.pull-quote:before { content:"\201C"; top:33px; left:0;}
.pull-quote:after { content:'\201D'; bottom:-33px; right:0;}
.pull-quote blockquote { margin:0;}
.pull-quote blockquote:before { content:none;}
/* Abbreviations */
abbr { font-variant:small-caps; text-transform:lowercase; letter-spacing:.5px; color:#fff;}
abbr:hover { cursor:help;}
/* drop cap */
.drop-cap:first-letter {
    float:left; margin:0; padding:8px 5px 0 0; font-size:84px; font-family:/* Copperplate */ inherit; line-height:60px; text-indent:0; background:transparent; color:inherit;
}
hr { border:solid #E3E3E3; border-width:1px 0 0; clear:both; margin:0 0 30px; height:0;}


/*---------------------------------------------------------
3. Links
------------------------------------------------------- */
a, a:visited {
    text-decoration:none; outline:0; color:#666; -webkit-transition:color .3s ease-in-out; -moz-transition:color .3s ease-in-out; -o-transition:color .3s ease-in-out; transition:color .3s ease-in-out;
}
a:hover, a:focus { color:#d02029;}
p a, p a:visited { line-height:inherit;}

/******************************************************************
TEXT SELECTION STYLES
******************************************************************/
/* Safari, Chrome, iPhones, iPads */
::selection {
 background:#6782b8;
 color:#fff;
}
::-moz-selection {
 background:#6782b8;
 color:#fff;
}
::-webkit-selection {
 background:#6782b8;
 color:#fff;
}

/* ---------------------------------------------------------------------
/*  Stats Tab Markup

    <ul class="stats-tabs">
		<li><a href="#">[value]<b>[name]</b></a></li>
	 </ul>

    Extend this object into your markup.
/*
/* --------------------------------------------------------------------- */
.stats-tabs { padding:0; margin:24px 0;}
.stats-tabs li { display:inline-block; margin:0 10px 18px 0; padding:0 10px 0 0; border-right:1px solid #ccc;}
.stats-tabs li:last-child { margin:0; padding:0; border:none;}
.stats-tabs li a { display:inline-block; font-size:22px; font-family:inherit; border:none; color:#313131;}
.stats-tabs li a:hover { color:#332f25;}
.stats-tabs li a b { display:block; margin:6px 0 0 0; font-size:13px; font-family:inherit; color:#8B9798;}


/* definition list */
dl { }
dt { }
dd { }
/* Lining Definition Style Markup */
.lining dt, .lining dd { display:inline; margin:0;}
.lining dt + dt:before, .lining dd + dt:before { content:"\A"; white-space:pre;}
.lining dd + dd:before { content:", ";}
.lining dd:before { content:": "; margin-left:0;}

.lining2 dt, .lining2 dd { display:inline; margin:0; font-size:18px;}
.lining2 dt:after { content:" : "; margin-left:0;}
.lining2 dt + dt:before, .lining2 dd + dt:before { content:"\A"; white-space:pre;}
.lining2 dd + dd:before { content: ", ";}

/* Dictionary Definition Style Markup */
.dictionary-style dt { display:inline; counter-reset:definitions;}
.dictionary-style dt + dt:before { content:", "; margin-left:-0.2em;}
.dictionary-style dd { display:block; counter-increment:definitions;}
.dictionary-style dd:before { content:counter(definitions, decimal) ". ";}

/* Pagination */
.pagination { margin:36px auto; text-align:center;}
.pagination ul li { display:inline-block; margin:0; padding:0;}
.pagination .page-numbers { font:15px/18px 'NanumBarunGothic', sans-serif; display:inline-block; padding:6px 10px; margin-right:3px; margin-bottom:6px; color:#6E757C; background-color:#E6E8EB; -webkit-transition:all 200ms ease-in-out; -moz-transition:all 200ms ease-in-out; -o-transition:all 200ms ease-in-out; -ms-transition:all 200ms ease-in-out; transition:all 200ms ease-in-out; -moz-border-radius:3px; -webkit-border-radius:3px; -khtml-border-radius:3px; border-radius:3px;}
.pagination .page-numbers:hover { background:#838A91; color:#fff;}
.pagination .current, .pagination .current:hover { background-color:#332f25; color:#fff;}
.pagination .inactive, .pagination .inactive:hover { background-color:#E6E8EB; color:#A9ADB2;}
.pagination .prev, .pagination .next { }


/*---------------------------------------------------------
6. Form, Buttons
--------------------------------------------------------- */
input[type="image"] {margin:0 !important;}
input[type="text"], input[type="password"], input[type="file"], textarea {
    font-family:inherit;
    font-size:14px;
    line-height:24px;
    color:#444 ;
    background:#e5e5e5;
    letter-spacing:0;
    padding:5px 5px;
    margin:5px 5px;
    border:none;
    height:34px;
    -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; transition:all .2s ease-in-out; -moz-border-radius:3px; -webkit-border-radius:3px; -khtml-border-radius:3px; border-radius:3px;
}

input[type="text"]:hover, input[type="text"]:focus,
input[type="password"]:hover, input[type="password"]:focus,
textarea:hover, textarea:focus {
    background:#e5e5e5; color:#444;
}

select { font-family:inherit; height:34px; line-height:24px; margin-right:5px; padding:0 10px; border:1px solid #444; cursor:pointer;}
select:focus, select:hover { border-color:#e5e5e5;}

/* Buttons
--------------------------------------------------------------- */
.button, .button:visited,
.button2, .button2:visited,
.button3, .button3:visited, button {
    -webkit-transition:all .2s ease-in-out; -moz-transition:all .2s ease-in-out; -o-transition:all .2s ease-in-out; -ms-transition:all .2s ease-in-out; transition:all .2s ease-in-out;
}
.button.full-width, .button2.full-width, .button3.full-width, button.full-width, input[type="text"].full-width {
    width:100%; padding-left:0 !important; padding-right:0 !important; text-align:center;
}
.button, .button:visited, button {
    font-size:16px;
    line-height:30px;
    background:none;
    display:inline-block;
    text-decoration:none;
    letter-spacing:0;
    color:#fff;
    padding:12px 24px;
    margin-bottom:18px;
    border:1px solid #fff;
    cursor:pointer;
    height:auto;
}
.button a { color:#fff;}
.button:hover a { color:#222;}
.button:hover, button:hover, button:active, button:active { background:#fff; color:#222;}

.button.full-width, button.full-width, input[type="text"].full-width {
    width:100%; padding-left:0 !important; padding-right:0 !important; text-align:center;
}

.button2, .button2:visited {
    font-size:16px;
    line-height:30px;
    background:#d02029;
    display:inline-block;
    text-decoration:none;
    letter-spacing:0;
    color:#222 !important;
    padding:12px 24px;
    margin-bottom:0;
    border:none;
    cursor:pointer;
    height:auto;
}
.button2 a { color:#222;}
.button2:hover a { color:#d02029;}
.button2:hover { background:none; color:#d02029; border:1px solid #d02029;}

.button3, .button3:visited {
    font-size:16px;
    line-height:30px;
    background:#66b395;
    display:inline-block;
    text-decoration:none;
    letter-spacing:0;
    color:#fff !important;
    padding:12px 24px;
    margin-bottom:0;
    border:none;
    cursor:pointer;
    height:auto;
}
.button3 a, .button3 a:hover { color: #fff;}
.button3:hover, .button3:active { background:#332f25; color:#fff;}

/* Fix for odd Mozilla border & padding issues */
button::-moz-focus-inner, input::-moz-focus-inner {
 border:0;
 padding:0;
}



/* Tooltips */
.tooltip {
    display:block;
    position:absolute;
    top:0;
    left:50%;
    padding:0.8rem 1rem;
    border-radius: 3px;
    font-size:0.8rem;
    font-weight: bold;
    background:#000;
    color:#fff;
    opacity:0;
    pointer-events:none;
    text-transform:uppercase;
    -webkit-transform: 
    transform: translate(-50%, -100%);
    -webkit-transition:all 0.3s ease;
    transition:all 0.3s ease;
    z-index:1;
}
.tooltip:after {
    display:block;
    position:absolute;
    bottom:0;
    left:50%;
    width:0;
    height:0;
    content: "";
    border:solid;
    border-top-color:#333;
    border-width:10px 10px 0 10px;
    border-color:transparent;
    -webkit-transform:translate(-50%, 100%);
    transform:translate(-50%, 100%);
}



/* -------------------------------------------------------------------
 * pace.js styles - minimal
 * ------------------------------------------------------------------- */
.pace { -webkit-pointer-events:none; pointer-events:none; -webkit-user-select:none; -moz-user-select:none; user-select:none;}
.pace-inactive { display:none;}
.pace .pace-progress { background:#d02029; position:fixed; z-index:900; top:0; right:100%; width:100%; height:5px;}

/* ===================================================================
 *  preloader
 * ------------------------------------------------------------------- */
#preloader { position:fixed; top:0; left:0; right:0; bottom:0; background:#FFFFFF; z-index:800; height:100%; width:100%;}
.no-js #preloader, .oldie #preloader { display:none;}
#loader { position:absolute; left:50%; top:50%; width:60px; height:60px; margin:-30px 0 0 -30px; padding:0;}
#loader:before { content:""; border-top:8px solid rgba(0, 0, 0, 0.2); border-right:8px solid rgba(0, 0, 0, 0.2); border-bottom:8px solid rgba(0, 0, 0, 0.2); border-left:8px solid #d02029; -webkit-animation:load 1.1s infinite linear; animation:load 1.1s infinite linear; display:block; border-radius:50%; width:60px; height:60px;}
 @-webkit-keyframes load {
     0% {
     -webkit-transform:rotate(0deg);
     transform:rotate(0deg);
    }
     100% {
     -webkit-transform:rotate(360deg);
     transform:rotate(360deg);
    }
    }
     @keyframes load {
     0% {
     -webkit-transform:rotate(0deg);
     transform:rotate(0deg);
    }
     100% {
     -webkit-transform:rotate(360deg);
     transform:rotate(360deg);
    }
}

/* ------------------------------------------------------------------ */
/* e. Others
/* ------------------------------------------------------------------ */

/*  1. Clearing
    (http://nicolasgallagher.com/micro-clearfix-hack/
--------------------------------------------------------------------- */

.cf:before, .cf:after { content:" "; display:block;}
.cf:after { clear:both;}

/*  2. Misc -------------------------------------------------------- */

.remove-bottom { margin-bottom:0 !important;}
.half-bottom { margin-bottom:15px !important;}
.add-bottom { margin-bottom:30px !important;}
.no-border { border:none;}
.text-center { text-align:center !important;}
.text-left { text-align:left !important;}
.text-right { text-align:right !important;}
.pull-left { float:left !important;}
.pull-right { float:right !important;}
.align-center { margin-left:auto !important; margin-right: auto !important; text-align: center !important;}