@charset "UTF-8";
/* ==========================================================================
   INUITCSS
   ========================================================================== */
/*!*
 * inuitcss, by @csswizardry
 *
 * github.com/inuitcss | inuitcss.com
 */
/**
 * This is an example inuitcss manifest file. DO NOT MODIFY THIS FILE DIRECTLY.
 * Instead, copy and paste it into your own CSS directory and make additions,
 * extension, and modifications there.
 */
/**
 * CONTENTS
 *
 * SETTINGS
 * Config...............Project-level configuration and feature switches.
 * Global...............Globally-available project settings.
 *
 * TOOLS
 * Functions............A small collection of useful functions.
 * Mixins...............Globally-available mixins.
 * Widths...............A mixin to quickly generate an arbitrary number of width
 *                      classes for use alongside our grid system.
 *
 * GENERIC
 * Box-sizing...........Better default `box-sizing`.
 * Normalize.css........A level playing field using @necolas’ Normalize.css.
 * Reset................A tiny reset to complement Normalize.css.
 * Shared...............Sensibly and tersely share some global commonalities
 *                      (particularly useful when managing vertical rhythm).
 *
 * ELEMENTS
 * Page.................Set up our document’s default `font-size` and
 *                      `line-height`.
 * Headings.............Very minimal (i.e. only font-size information) for
 *                      headings 1 through 6.
 * Images...............Base image styles.
 * Tables...............Simple table styles.
 *
 * OBJECTS
 * Wrapper..............Page constraint object.
 * Layout...............Generic layout module.
 * Media................Image- and text-like content side by side. The
 *                      poster-child of OOCSS.
 * Flag.................Table-layout-based advancement on the Media object.
 * List-bare............Lists with no bullets or indents.
 * List-inline..........A list whose items all site in a line.
 * Box..................Simple boxing abstraction.
 * Block................Image-on-top-of-text object.
 * Ratio................A container for maintaining aspect ratio of content.
 * Crop.................Provide a cropping context for media (images, etc.).
 *
 * COMPONENTS
 * Buttons..............An example button component, and how it fits into the
 *                      inuitcss framework.
 *
 * UTILITIES
 * Clearfix.............Bind our clearfix onto a utility class.
 * Widths...............Simple width helper classes.
 * Headings.............Reassigning our heading styles to helper classes.
 * Spacing..............Nudge bits of the DOM around with these spacing
 *                      classes.
 * Print................Reset-like styles taken from the HTML5 Boilerplate.
 *                      classes..
 * Hide.................Helper classes to hide content
 */
/* ==========================================================================
   #BOX-SIZING
   ========================================================================== */
/**
 * More sensible default box-sizing:
 * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice
 */
html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

/*! normalize.css v4.2.0 | MIT License | github.com/necolas/normalize.css */
/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in IE and iOS.
 */
html {
    font-family: sans-serif;
    /* 1 */
    line-height: 1.15;
    /* 2 */
    -ms-text-size-adjust: 100%;
    /* 3 */
    -webkit-text-size-adjust: 100%;
    /* 3 */
}

/**
 * Remove the margin in all browsers (opinionated).
 */
body {
    margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */
/**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 * 2. Add the correct display in IE.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary {
    /* 1 */
    display: block;
}

/**
 * Add the correct display in IE 9-.
 */
audio,
canvas,
progress,
video {
    display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */
audio:not([controls]) {
    display: none;
    height: 0;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
    vertical-align: baseline;
}

/**
 * Add the correct display in IE 10-.
 * 1. Add the correct display in IE.
 */
template,
[hidden] {
    display: none;
}

/* Links
   ========================================================================== */
/**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */
a {
    background-color: transparent;
    /* 1 */
    -webkit-text-decoration-skip: objects;
    /* 2 */
}

/**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */
a:active,
a:hover {
    outline-width: 0;
}

/* Text-level semantics
   ========================================================================== */
/**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
    border-bottom: none;
    /* 1 */
    text-decoration: underline;
    /* 2 */
    text-decoration: underline dotted;
    /* 2 */
}

/**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */
b,
strong {
    font-weight: inherit;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
    font-weight: bolder;
}

/**
 * Add the correct font style in Android 4.3-.
 */
dfn {
    font-style: italic;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

/**
 * Add the correct background and color in IE 9-.
 */
mark {
    background-color: #ff0;
    color: #000;
}

/**
 * Add the correct font size in all browsers.
 */
small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10-.
 */
img {
    border-style: none;
}

/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
    overflow: hidden;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    /* 1 */
    font-size: 1em;
    /* 2 */
}

/**
 * Add the correct margin in IE 8.
 */
figure {
    margin: 1em 40px;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
    box-sizing: content-box;
    /* 1 */
    height: 0;
    /* 1 */
    overflow: visible;
    /* 2 */
}

/* Forms
   ========================================================================== */
/**
 * 1. Change font properties to `inherit` in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
    font: inherit;
    /* 1 */
    margin: 0;
    /* 2 */
}

/**
 * Restore the font weight unset by the previous rule.
 */
optgroup {
    font-weight: bold;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
    /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
    /* 1 */
    text-transform: none;
}

/**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */
button,
html [type="button"],
[type="reset"],
[type="submit"] {
    -webkit-appearance: button;
    /* 2 */
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Change the border, margin, and padding in all browsers (opinionated).
 */
fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
    box-sizing: border-box;
    /* 1 */
    color: inherit;
    /* 2 */
    display: table;
    /* 1 */
    max-width: 100%;
    /* 1 */
    padding: 0;
    /* 3 */
    white-space: normal;
    /* 1 */
}

/**
 * Remove the default vertical scrollbar in IE.
 */
textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */
[type="checkbox"],
[type="radio"] {
    box-sizing: border-box;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    outline-offset: -2px;
    /* 2 */
}

/**
 * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
 */
[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
    color: inherit;
    opacity: 0.54;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
    -webkit-appearance: button;
    /* 1 */
    font: inherit;
    /* 2 */
}

/* ==========================================================================
   #RESET
   ========================================================================== */
/**
 * A very simple reset that sits on top of Normalize.css.
 */
body,
h1, h2, h3, h4, h5, h6,
p, blockquote, pre,
dl, dd, ol, ul,
fieldset, legend,
figure,
hr {
    margin: 0;
    padding: 0;
}

/**
 * Remove trailing margins from nested lists.
 */
li > ul,
li > ol {
    margin-bottom: 0;
}

/**
 * Remove default table spacing.
 */
table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* ==========================================================================
   #SHARED
   ========================================================================== */
/**
 * Shared declarations for certain elements.
 */
/**
 * Always declare margins in the same direction:
 * csswizardry.com/2012/06/single-direction-margin-declarations
 */
h1, h2, h3, h4, h5, h6,
ul, ol, dl,
blockquote, p, address,
hr,
table,
fieldset, figure,
pre {
    margin-bottom: 24px;
}

ul, ol,
dd {
    margin-left: 24px;
}

/* ==========================================================================
   #PAGE
   ========================================================================== */
/**
 * Simple page-level setup.
 *
 * 1. Set the default `font-size` and `line-height` for the entire project,
 *    sourced from our default variables. The `font-size` is calculated to exist
 *    in ems, the `line-height` is calculated to exist unitlessly.
 * 2. Force scrollbars to always be visible to prevent awkward ‘jumps’ when
 *    navigating between pages that do/do not have enough content to produce
 *    scrollbars naturally.
 * 3. Ensure the page always fills at least the entire height of the viewport.
 */
html {
    font-size: 1em;
    /* [1] */
    line-height: 1.5;
    /* [1] */
    overflow-y: scroll;
    /* [2] */
    min-height: 100%;
    /* [3] */
}

/* ==========================================================================
   #HEADINGS
   ========================================================================== */
/**
 * Simple default styles for headings 1 through 6. Anything more opinionated
 * than simple font-size changes should likely be applied via classes (see:
 * http://csswizardry.com/2016/02/managing-typography-on-large-apps/).
 */
h1 {
    font-size: 36px;
    font-size: 2.25rem;
    line-height: 1.33333;
}

h2 {
    font-size: 30px;
    font-size: 1.875rem;
    line-height: 1.6;
}

h3 {
    font-size: 24px;
    font-size: 1.5rem;
    line-height: 1;
}

h4 {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1.2;
}

h5 {
    font-size: 18px;
    font-size: 1.125rem;
    line-height: 1.33333;
}

h6 {
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
}

/* ==========================================================================
   #IMAGES
   ========================================================================== */
/**
 * 1. Fluid images for responsive purposes.
 * 2. Offset `alt` text from surrounding copy.
 * 3. Setting `vertical-align` removes the whitespace that appears under `img`
 *    elements when they are dropped into a page as-is. Safer alternative to
 *    using `display: block;`.
 */
img {
    max-width: 100%;
    /* [1] */
    font-style: italic;
    /* [2] */
    vertical-align: middle;
    /* [3] */
}

/**
 * 1. If a `width` and/or `height` attribute have been explicitly defined, let’s
 *    not make the image fluid.
 */
img[width],
img[height] {
    /* [1] */
    max-width: none;
}

/* ==========================================================================
 * #TABLES
 * ========================================================================== */
table {
    width: 100%;
    border-collapse: collapse;
}

table thead th {
    vertical-align: bottom;
}

table th, table td {
    padding: 6px;
    vertical-align: top;
}

/* ==========================================================================
 * #common.css
 * ========================================================================== */

.pr {
    position: relative;
}

.pa {
    position: absolute;
}

.pos-topright {
    top: 0;
    right: 0;
}

.mr5 {
    margin-right: 5px;
}

/* ==========================================================================
   #WRAPPERS
   ========================================================================== */
/**
 * Page-level constraining and wrapping elements.
 */
.o-wrapper {
    padding-right: 24px;
    padding-left: 24px;
    margin-right: auto;
    margin-left: auto;
    max-width: 78rem;
}

.o-wrapper:after {
    content: "" !important;
    display: block !important;
    clear: both !important;
}

@media (max-width: 600px) {
    .o-wrapper {
        padding-right: 12px;
        padding-left: 12px;
    }
}

.o-wrapper--wide {
    max-width: 100rem;
}

/* Size variants.
   ========================================================================== */
.o-wrapper--flush {
    padding-right: 0;
    padding-left: 0;
}

.o-wrapper--tiny {
    padding-right: 6px;
    padding-left: 6px;
}

.o-wrapper--small {
    padding-right: 12px;
    padding-left: 12px;
}

.o-wrapper--large {
    padding-right: 36px;
    padding-left: 36px;
}

.o-wrapper--huge {
    padding-right: 48px;
    padding-left: 48px;
}

/* ==========================================================================
   #LAYOUT
   ========================================================================== */
/**
 * Grid-like layout system.
 *
 * The Layout object provides us with a column-style layout system. This file
 * contains the basic structural elements, but classes should be complemented
 * with width Utilities, for example:
 *
 *   <div class="o-layout">
 *     <div class="o-layout__item  u-width-1/2">
 *     </div>
 *     <div class="o-layout__item  u-width-1/2">
 *     </div>
 *   </div>
 *
 * The above will create a two-column structure in which each column will
 * fluidly fill half of the width of the parent. We can have more complex
 * systems:
 *
 *   <div class="o-layout">
 *     <div class="o-layout__item  u-width-1/1  u-width-1/3@medium">
 *     </div>
 *     <div class="o-layout__item  u-width-1/2  u-width-1/3@medium">
 *     </div>
 *     <div class="o-layout__item  u-width-1/2  u-width-1/3@medium">
 *     </div>
 *   </div>
 *
 * The above will create a system in which the first item will be 100% width
 * until we enter our medium breakpoint, when it will become 33.333% width. The
 * second and third items will be 50% of their parent, until they also become
 * 33.333% width at the medium breakpoint.
 *
 * We can also manipulate entire layout systems by adding a series of Modifiers
 * to the `.o-layout` Block. For example:
 *
 *   <div class="o-layout  o-layout--reverse">
 *
 * This will reverse the displayed order of the system so that it runs in the
 * opposite order to our source, effectively flipping the system over.
 *
 *   <div class="o-layout  o-layout--[right|center]">
 *
 * This will cause the system to fill up from either the centre or the right
 * hand side. Default behaviour is to fill up the layout system from the left.
 *
 * There are plenty more options available to us: explore them below.
 */
/* Default/mandatory classes.
   ========================================================================== */
/**
 * 1. Allows us to use the layout object on any type of element.
 * 2. We need to defensively reset any box-model properties.
 * 3. Use the negative margin trick for multi-row grids:
 *    http://csswizardry.com/2011/08/building-better-grid-systems/
 */
.o-layout {
    display: block;
    /* [1] */
    margin: 0;
    /* [2] */
    padding: 0;
    /* [2] */
    list-style: none;
    /* [1] */
    margin-left: -24px;
    /* [3] */
    font-size: 0;
}

/**
 * 1. Allows us to manipulate grids vertically, with text-level properties,
 *    etc.
 * 2. Default item alignment is with the tops of each other, like most
 *    traditional grid/layout systems.
 * 3. By default, all layout items are full-width (mobile first).
 * 4. Gutters provided by left padding:
 *    http://csswizardry.com/2011/08/building-better-grid-systems/
 */
.o-layout__item {
    display: inline-block;
    /* [1] */
    vertical-align: top;
    /* [2] */
    width: 100%;
    /* [3] */
    padding-left: 24px;
    /* [4] */
    font-size: 16px;
    font-size: 1rem;
}

/* Gutter size modifiers.
   ========================================================================== */
/**
 * Tiny gutters between items.
 */
.o-layout--tiny {
    margin-left: -6px;
}

.o-layout--tiny > .o-layout__item {
    padding-left: 6px;
}

/**
 * Small gutters between items.
 */
.o-layout--small {
    margin-left: -12px;
}

.o-layout--small > .o-layout__item {
    padding-left: 12px;
}

/**
 * Large gutters between items.
 */
.o-layout--large {
    margin-left: -36px;
}

.o-layout--large > .o-layout__item {
    padding-left: 36px;
}

/**
 * Huge gutters between items.
 */
.o-layout--huge {
    margin-left: -48px;
}

.o-layout--huge > .o-layout__item {
    padding-left: 48px;
}

/**
 * No gutters between items.
 */
.o-layout--flush {
    margin-left: 0;
}

.o-layout--flush > .o-layout__item {
    padding-left: 0;
}

/* Vertical alignment modifiers.
   ========================================================================== */
/**
 * Align all grid items to the middles of each other.
 *
 * Input:
 *
 *   1 2 3 4 5
 *   1 2 - 4 5
 *   1 2 - 4 5
 *   - 2 - - 5
 *   - 2 - - 5
 *
 * Output:
 *
 *   - 2 - - 5
 *   1 2 - 4 5
 *   1 2 3 4 5
 *   1 2 - 4 5
 *   - 2 - - 5
 */
.o-layout--middle > .o-layout__item {
    vertical-align: middle;
}

/**
 * Align all grid items to the bottoms of each other.
 *
 * Input:
 *
 *   1 2 3 4 5
 *   1 2 - 4 5
 *   1 2 - 4 5
 *   - 2 - - 5
 *   - 2 - - 5
 *
 * Output:
 *
 *   - 2 - - 5
 *   - 2 - - 5
 *   1 2 - 4 5
 *   1 2 - 4 5
 *   1 2 3 4 5
 */
.o-layout--bottom > .o-layout__item {
    vertical-align: bottom;
}

/* Fill order modifiers.
   ========================================================================== */
/**
 * Fill up the layout system from the centre.
 *
 * Input:
 *
 *   1 2 3 - -
 *
 * Output:
 *
 *   - 1 2 3 -
 */
.o-layout--center {
    text-align: center;
}

.o-layout--center > .o-layout__item {
    text-align: left;
}

/**
 * Fill up the layout system from the right-hand side.
 *
 * Input:
 *
 *   1 2 3 - -
 *
 * Output:
 *
 *   - - 1 2 3
 */
.o-layout--right {
    text-align: right;
}

.o-layout--right > .o-layout__item {
    text-align: left;
}

/**
 * Reverse the rendered order of the grid system.
 *
 * Input:
 *
 *   1 2 3 4 5
 *
 * Output:
 *
 *   5 4 3 2 1
 */
.o-layout--reverse {
    direction: rtl;
}

.o-layout--reverse > .o-layout__item {
    direction: ltr;
    text-align: left;
}

.o-layout--flex {
    display: flex;
}

/* ==========================================================================
   #MEDIA
   ========================================================================== */
/**
 * Place any image- and text-like content side-by-side, as per:
 * http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code
 */
.o-media {
    display: block;
}

.o-media:after {
    content: "" !important;
    display: block !important;
    clear: both !important;
}

.o-media__img {
    float: left;
    margin-right: 24px;
}

.o-media__img > img {
    display: block;
}

.o-media__body {
    overflow: hidden;
    display: block;
}

.o-media__body,
.o-media__body > :last-child {
    margin-bottom: 0;
}

/* Size variants
   ========================================================================== */
/**
 * Modify the amount of space between our image and our text. We also have
 * reversible options for all available sizes.
 */
.o-media--tiny > .o-media__img {
    margin-right: 6px;
}

.o-media--tiny.o-media--reverse > .o-media__img {
    margin-right: 0;
    margin-left: 6px;
}

.o-media--small > .o-media__img {
    margin-right: 12px;
}

.o-media--small.o-media--reverse > .o-media__img {
    margin-right: 0;
    margin-left: 12px;
}

.o-media--large > .o-media__img {
    margin-right: 36px;
}

.o-media--large.o-media--reverse > .o-media__img {
    margin-right: 0;
    margin-left: 36px;
}

.o-media--huge > .o-media__img {
    margin-right: 48px;
}

.o-media--huge.o-media--reverse > .o-media__img {
    margin-right: 0;
    margin-left: 48px;
}

/* Reversed media objects
   ========================================================================== */
.o-media--reverse > .o-media__img {
    float: right;
    margin-right: 0;
    margin-left: 24px;
}

/* Gutterless media objects
   ========================================================================== */
.o-media--flush > .o-media__img {
    margin-right: 0;
    margin-left: 0;
}

/* responsive media objects
   ========================================================================= */
@media (max-width: 400px) {
    .o-media--responsive\@sm .o-media__img {
        float: none;
        margin-right: 0;
        margin-left: 0;
        margin-bottom: 24px;
    }

    .o-media--responsive\@sm .o-media__img > img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ==========================================================================
   #LIST-BARE
   ========================================================================== */
/**
 * Strip list-like appearance from lists by removing their bullets, and any
 * indentation.
 */
.o-list-bare, .sub-nav {
    list-style: none;
    margin-left: 0;
}

/* ==========================================================================
   #LIST-INLINE
   ========================================================================== */
/**
 * The list-inline object simply displays a list of items in one line.
 */
.o-list-inline {
    margin-left: 0;
    list-style: none;
}

.o-list-inline__item {
    display: inline-block;
}

/* Delimited list.
   ========================================================================== */
/**
 * By default, applying this class will comma separate your list items. You can
 * change the delimiter by predefining the following variable:
 */
.o-list-inline--delimited {
    font-size: 0;
}

.o-list-inline--delimited > .o-list-inline__item {
    font-size: 16px;
    font-size: 1rem;
}

.o-list-inline--delimited > .o-list-inline__item + .o-list-inline__item:before {
    content: ", ";
}

/* ==========================================================================
   #BOX
   ========================================================================== */
/**
 * The box object simply boxes off content. Extend with cosmetic styles in the
 * Components layer.
 *
 * 1. So we can apply the `.o-box` class to naturally-inline elements.
 */
.o-box {
    display: block;
    /* [1] */
    padding: 24px;
}

.o-box:after {
    content: "" !important;
    display: block !important;
    clear: both !important;
}

.o-box > :last-child {
    margin-bottom: 0;
}

/* Size variants
   ========================================================================== */
.o-box--flush {
    padding: 0;
}

.o-box--tiny {
    padding: 6px;
}

.o-box--small {
    padding: 12px;
}

.o-box--large {
    padding: 36px;
}

.o-box--huge {
    padding: 48px;
}

/* For IE8 */
.ie8 .o-box .u-list-square {
    margin-bottom: 0;
}

/* ==========================================================================
   #BLOCK
   ========================================================================== */
/**
 * Stacked image-with-text object. A simple abstraction to cover a very commonly
 * occurring design pattern.
 */

.o-block {
    display: block;
    text-align: center;
}

.o-block__img {
    margin-bottom: 24px;
    /* Size variants.
     ====================================================================== */
}

.o-block--flush > .o-block__img {
    margin-bottom: 0;
}

.o-block--tiny > .o-block__img {
    margin-bottom: 6px;
}

.o-block--small > .o-block__img {
    margin-bottom: 12px;
}

.o-block--large > .o-block__img {
    margin-bottom: 36px;
}

.o-block--huge > .o-block__img {
    margin-bottom: 48px;
}

.o-block__body {
    display: block;
}

/* Alignment variants.
   ========================================================================== */
.o-block--right {
    text-align: right;
}

.o-block--left {
    text-align: left;
}

/* ==========================================================================
   #RATIO
   ========================================================================== */
/**
 * Create ratio-bound content blocks, to keep media (e.g. images, videos) in
 * their correct aspect ratios.
 *
 * http://alistapart.com/article/creating-intrinsic-ratios-for-video
 */
/**
 * 1. Default cropping is a 1:1 ratio (i.e. a perfect square).
 */
.o-ratio {
    overflow: hidden;
    position: relative;
    display: block;
}

.o-ratio:before {
    content: "";
    display: block;
    width: 100%;
    padding-bottom: 100%;
    /* [1] */
}

.o-ratio__content,
.o-ratio > iframe,
.o-ratio > embed,
.o-ratio > object {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

/* Ratio variants.
   ========================================================================== */
/**
 * Generate a series of ratio classes to be used like so:
 *
 *   <div class="o-ratio  o-ratio--16:9">
 *
 */
.o-ratio--5\:3:before {
    padding-bottom: 60%;
}

/* ==========================================================================
   #CROP
   ========================================================================== */
/**
 * Provide a cropping container in order to display media (usually images)
 * cropped to certain ratios.
 *
 * 1. Set up a positioning context in which the image can sit.
 * 2. This is the crucial part: where the cropping happens.
 */
.o-crop {
    position: relative;
    /* [1] */
    display: block;
    overflow: hidden;
    /* [2] */
}

/**
 * Apply this class to the content (usually `img`) that needs cropping.
 *
 * 1. Image’s default positioning is top-left in the cropping box.
 * 2. Make sure the media doesn’t stop itself too soon.
 */
.o-crop__content {
    position: absolute;
    top: 0;
    /* [1] */
    left: 0;
    /* [1] */
    max-width: none;
    /* [2] */
}

/**
 * We can position the media in different locations within the cropping area.
 */
.o-crop__content--right {
    right: 0;
    left: auto;
}

.o-crop__content--bottom {
    top: auto;
    bottom: 0;
}

.o-crop__content--center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Crop-ratio variants.
   ========================================================================== */
/**
 * Generate a series of crop classes to be used like so:
 *
 *   <div class="o-crop  o-crop--16:9">
 *
 */
.o-crop--2\:1 {
    padding-bottom: 50%;
}

.o-crop--4\:3 {
    padding-bottom: 75%;
}

.o-crop--16\:9 {
    padding-bottom: 56.25%;
}

/* ==========================================================================
 * #BUTTONS
 * ========================================================================== */
/**
 * This is an example component. Extend inuitcss by building your own components
 * that make up your UI. Component classes are prefixed with a `c-`. */
/**
 * 1. Allow us to style box model properties.
 * 2. Line different sized buttons up a little nicer.
 * 3. Make buttons inherit font styles (often necessary when styling `input`s as
 *    buttons).
 * 4. Reset/normalize some styles.
 * 5. Force all button-styled elements to appear clickable.
 * 6. Fixes odd inner spacing in IE7. */
.c-btn {
    display: inline-block;
    /* [1] */
    vertical-align: middle;
    /* [2] */
    font: inherit;
    /* [3] */
    text-align: center;
    /* [4] */
    margin: 0;
    /* [4] */
    cursor: pointer;
    /* [5] */
    overflow: visible;
    /* [6] */
    padding: 0 0.5em;
    transition: 0.33333s;
    border: 1px solid #adb5bd;
    background-color: transparent;
    position: relative;
}

.c-btn, .c-btn:hover, .c-btn:active, .c-btn:focus {
    text-decoration: none;
}

/* Style variants
 * ========================================================================== */
.c-btn--default {
    background-color: #eee;
}

.c-btn--default:hover, .c-btn--default:focus {
    background-color: #ddd;
}

.c-btn--primary {
    background-color: #D81F36;
    border: 1px solid #D81F36;
    color: #fff;
}

.c-btn--primary:hover, .c-btn--primary:focus {
    background-color: #ab192c;
}

.c-btn--danger {
    background-color: #ffc9c9;
    border: 1px solid #ffa8a8;
    color: #c92a2a;
}

.c-btn--danger:hover, .c-btn--danger:focus {
    background-color: #ffa8a8;
}

.c-btn--dark {
    background-color: #555;
    border: 1px solid #555;
    color: #fff;
}

.c-btn--dark:hover, .c-btn--dark:focus {
    background-color: #444;
    border: 1px solid #444;
}

.c-btn--muted {
    background-color: #aaa;
    border: 1px solid #aaa;
    color: #fff;
}

.c-btn--muted:hover, .c-btn--muted:focus {
    background-color: #999;
    border: 1px solid #999;
}

.c-btn--download {
    border: 1px solid #344b9d;
    color: #344b9d;
    padding: 8px 48px 8px 10px;
    background: transparent url("/images/icon-download-02.png") no-repeat right center;
}

.c-btn--ghost {
    border: 1px solid currentColor;
}

.c-btn--ghost, .c-btn--ghost:hover, .c-btn--ghost:active, .c-btn--ghost:focus {
    background: none;
}

/* Size variants
 * ==========================================================================
 *
 * 버튼 사이즈가 아닌 버튼의 너비, 텍스트 크기 등은 u-12/12나 u-h2 같은 유틸리티 클래스를 이용하세요. */
.c-btn--size-small {
    padding: 0 0.375rem;
    line-height: 1rem !important;
}

.c-btn--size-medium {
    padding: 4px 40px;
}

.c-btn--size-large {
    padding: 1.5rem 2.25rem;
    line-height: 1.5rem !important;
}

/* ==========================================================================
   #CLEARFIX
   ========================================================================== */
/**
 * Attach our clearfix mixin to a utility class.
 */
.u-clearfix:after {
    content: "" !important;
    display: block !important;
    clear: both !important;
}

/* ==========================================================================
 * #WIDTHS
 * ========================================================================== */
/**
 * A series of width helper classes that you can use to size things like grid
 * systems. Classes can take a fraction-like format (e.g. `.u-2/3`) or a spoken-
 * word format (e.g. `.u-2-of-3`). Use these in your markup:
 *
 * <div class="u-7/12">
 *
 * The following will generate a 12 and a 16 column grid system. */
.u-1\/12 {
    flex-basis: 8.33333% !important;
    width: 8.33333% !important;
    max-width: 8.33333% !important;
}

/**
 * 1. Defensively reset any leftover or conflicting `left`/`right` values.
 */
.u-2\/12 {
    flex-basis: 16.66667% !important;
    width: 16.66667% !important;
    max-width: 16.66667% !important;
}

/**
 * 1. Defensively reset any leftover or conflicting `left`/`right` values.
 */
.u-3\/12 {
    flex-basis: 25% !important;
    width: 25% !important;
    max-width: 25% !important;
}

/**
 * 1. Defensively reset any leftover or conflicting `left`/`right` values.
 */
.u-4\/12 {
    flex-basis: 33.33333% !important;
    width: 33.33333% !important;
    max-width: 33.33333% !important;
}

/**
 * 1. Defensively reset any leftover or conflicting `left`/`right` values.
 */
.u-5\/12 {
    flex-basis: 41.66667% !important;
    width: 41.66667% !important;
    max-width: 41.66667% !important;
}

/**
 * 1. Defensively reset any leftover or conflicting `left`/`right` values.
 */
.u-6\/12 {
    flex-basis: 50% !important;
    width: 50% !important;
    max-width: 50% !important;
}

/**
 * 1. Defensively reset any leftover or conflicting `left`/`right` values.
 */
.u-7\/12 {
    flex-basis: 58.33333% !important;
    width: 58.33333% !important;
    max-width: 58.33333% !important;
}

/**
 * 1. Defensively reset any leftover or conflicting `left`/`right` values.
 */
.u-8\/12 {
    flex-basis: 66.66667% !important;
    width: 66.66667% !important;
    max-width: 66.66667% !important;
}

/**
 * 1. Defensively reset any leftover or conflicting `left`/`right` values.
 */
.u-9\/12 {
    flex-basis: 75% !important;
    width: 75% !important;
    max-width: 75% !important;
}

/**
 * 1. Defensively reset any leftover or conflicting `left`/`right` values.
 */
.u-10\/12 {
    flex-basis: 83.33333% !important;
    width: 83.33333% !important;
    max-width: 83.33333% !important;
}

/**
 * 1. Defensively reset any leftover or conflicting `left`/`right` values.
 */
.u-11\/12 {
    flex-basis: 91.66667% !important;
    width: 91.66667% !important;
    max-width: 91.66667% !important;
}

/**
 * 1. Defensively reset any leftover or conflicting `left`/`right` values.
 */
.u-12\/12 {
    flex-basis: 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}

/**
 * 1. Defensively reset any leftover or conflicting `left`/`right` values.
 */
/**
 * Create a 12 and a 16 column grid system on screens over 1200px wide, and give
 * them a Responsive Suffix of `@lg`, e.g.:
 *
 * <div class="u-3/12@lg"> */
@media screen and (max-width: 1400px) {
    .u-1\/12\@wide {
        flex-basis: 8.33333% !important;
        width: 8.33333% !important;
        max-width: 8.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-2\/12\@wide {
        flex-basis: 16.66667% !important;
        width: 16.66667% !important;
        max-width: 16.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-3\/12\@wide {
        flex-basis: 25% !important;
        width: 25% !important;
        max-width: 25% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-4\/12\@wide {
        flex-basis: 33.33333% !important;
        width: 33.33333% !important;
        max-width: 33.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-5\/12\@wide {
        flex-basis: 41.66667% !important;
        width: 41.66667% !important;
        max-width: 41.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-6\/12\@wide {
        flex-basis: 50% !important;
        width: 50% !important;
        max-width: 50% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-7\/12\@wide {
        flex-basis: 58.33333% !important;
        width: 58.33333% !important;
        max-width: 58.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-8\/12\@wide {
        flex-basis: 66.66667% !important;
        width: 66.66667% !important;
        max-width: 66.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-9\/12\@wide {
        flex-basis: 75% !important;
        width: 75% !important;
        max-width: 75% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-10\/12\@wide {
        flex-basis: 83.33333% !important;
        width: 83.33333% !important;
        max-width: 83.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-11\/12\@wide {
        flex-basis: 91.66667% !important;
        width: 91.66667% !important;
        max-width: 91.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-12\/12\@wide {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
}

@media screen and (max-width: 1000px) {
    .u-1\/12\@xlg {
        flex-basis: 8.33333% !important;
        width: 8.33333% !important;
        max-width: 8.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-2\/12\@xlg {
        flex-basis: 16.66667% !important;
        width: 16.66667% !important;
        max-width: 16.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-3\/12\@xlg {
        flex-basis: 25% !important;
        width: 25% !important;
        max-width: 25% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-4\/12\@xlg {
        flex-basis: 33.33333% !important;
        width: 33.33333% !important;
        max-width: 33.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-5\/12\@xlg {
        flex-basis: 41.66667% !important;
        width: 41.66667% !important;
        max-width: 41.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-6\/12\@xlg {
        flex-basis: 50% !important;
        width: 50% !important;
        max-width: 50% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-7\/12\@xlg {
        flex-basis: 58.33333% !important;
        width: 58.33333% !important;
        max-width: 58.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-8\/12\@xlg {
        flex-basis: 66.66667% !important;
        width: 66.66667% !important;
        max-width: 66.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-9\/12\@xlg {
        flex-basis: 75% !important;
        width: 75% !important;
        max-width: 75% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-10\/12\@xlg {
        flex-basis: 83.33333% !important;
        width: 83.33333% !important;
        max-width: 83.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-11\/12\@xlg {
        flex-basis: 91.66667% !important;
        width: 91.66667% !important;
        max-width: 91.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-12\/12\@xlg {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
}

@media screen and (max-width: 850px) {
    .u-1\/12\@lg {
        flex-basis: 8.33333% !important;
        width: 8.33333% !important;
        max-width: 8.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-2\/12\@lg {
        flex-basis: 16.66667% !important;
        width: 16.66667% !important;
        max-width: 16.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-3\/12\@lg {
        flex-basis: 25% !important;
        width: 25% !important;
        max-width: 25% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-4\/12\@lg {
        flex-basis: 33.33333% !important;
        width: 33.33333% !important;
        max-width: 33.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-5\/12\@lg {
        flex-basis: 41.66667% !important;
        width: 41.66667% !important;
        max-width: 41.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-6\/12\@lg {
        flex-basis: 50% !important;
        width: 50% !important;
        max-width: 50% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-7\/12\@lg {
        flex-basis: 58.33333% !important;
        width: 58.33333% !important;
        max-width: 58.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-8\/12\@lg {
        flex-basis: 66.66667% !important;
        width: 66.66667% !important;
        max-width: 66.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-9\/12\@lg {
        flex-basis: 75% !important;
        width: 75% !important;
        max-width: 75% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-10\/12\@lg {
        flex-basis: 83.33333% !important;
        width: 83.33333% !important;
        max-width: 83.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-11\/12\@lg {
        flex-basis: 91.66667% !important;
        width: 91.66667% !important;
        max-width: 91.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-12\/12\@lg {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
}

@media screen and (max-width: 600px) {
    .u-1\/12\@md {
        flex-basis: 8.33333% !important;
        width: 8.33333% !important;
        max-width: 8.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-2\/12\@md {
        flex-basis: 16.66667% !important;
        width: 16.66667% !important;
        max-width: 16.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-3\/12\@md {
        flex-basis: 25% !important;
        width: 25% !important;
        max-width: 25% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-4\/12\@md {
        flex-basis: 33.33333% !important;
        width: 33.33333% !important;
        max-width: 33.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-5\/12\@md {
        flex-basis: 41.66667% !important;
        width: 41.66667% !important;
        max-width: 41.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-6\/12\@md {
        flex-basis: 50% !important;
        width: 50% !important;
        max-width: 50% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-7\/12\@md {
        flex-basis: 58.33333% !important;
        width: 58.33333% !important;
        max-width: 58.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-8\/12\@md {
        flex-basis: 66.66667% !important;
        width: 66.66667% !important;
        max-width: 66.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-9\/12\@md {
        flex-basis: 75% !important;
        width: 75% !important;
        max-width: 75% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-10\/12\@md {
        flex-basis: 83.33333% !important;
        width: 83.33333% !important;
        max-width: 83.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-11\/12\@md {
        flex-basis: 91.66667% !important;
        width: 91.66667% !important;
        max-width: 91.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-12\/12\@md {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
}

@media screen and (max-width: 400px) {
    .u-1\/12\@sm {
        flex-basis: 8.33333% !important;
        width: 8.33333% !important;
        max-width: 8.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-2\/12\@sm {
        flex-basis: 16.66667% !important;
        width: 16.66667% !important;
        max-width: 16.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-3\/12\@sm {
        flex-basis: 25% !important;
        width: 25% !important;
        max-width: 25% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-4\/12\@sm {
        flex-basis: 33.33333% !important;
        width: 33.33333% !important;
        max-width: 33.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-5\/12\@sm {
        flex-basis: 41.66667% !important;
        width: 41.66667% !important;
        max-width: 41.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-6\/12\@sm {
        flex-basis: 50% !important;
        width: 50% !important;
        max-width: 50% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-7\/12\@sm {
        flex-basis: 58.33333% !important;
        width: 58.33333% !important;
        max-width: 58.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-8\/12\@sm {
        flex-basis: 66.66667% !important;
        width: 66.66667% !important;
        max-width: 66.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-9\/12\@sm {
        flex-basis: 75% !important;
        width: 75% !important;
        max-width: 75% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-10\/12\@sm {
        flex-basis: 83.33333% !important;
        width: 83.33333% !important;
        max-width: 83.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-11\/12\@sm {
        flex-basis: 91.66667% !important;
        width: 91.66667% !important;
        max-width: 91.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-12\/12\@sm {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
}

@media screen and (max-width: 320px) {
    .u-1\/12\@tiny {
        flex-basis: 8.33333% !important;
        width: 8.33333% !important;
        max-width: 8.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-2\/12\@tiny {
        flex-basis: 16.66667% !important;
        width: 16.66667% !important;
        max-width: 16.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-3\/12\@tiny {
        flex-basis: 25% !important;
        width: 25% !important;
        max-width: 25% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-4\/12\@tiny {
        flex-basis: 33.33333% !important;
        width: 33.33333% !important;
        max-width: 33.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-5\/12\@tiny {
        flex-basis: 41.66667% !important;
        width: 41.66667% !important;
        max-width: 41.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-6\/12\@tiny {
        flex-basis: 50% !important;
        width: 50% !important;
        max-width: 50% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-7\/12\@tiny {
        flex-basis: 58.33333% !important;
        width: 58.33333% !important;
        max-width: 58.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-8\/12\@tiny {
        flex-basis: 66.66667% !important;
        width: 66.66667% !important;
        max-width: 66.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-9\/12\@tiny {
        flex-basis: 75% !important;
        width: 75% !important;
        max-width: 75% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-10\/12\@tiny {
        flex-basis: 83.33333% !important;
        width: 83.33333% !important;
        max-width: 83.33333% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-11\/12\@tiny {
        flex-basis: 91.66667% !important;
        width: 91.66667% !important;
        max-width: 91.66667% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
    .u-12\/12\@tiny {
        flex-basis: 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /**
   * 1. Defensively reset any leftover or conflicting `left`/`right` values.
   */
}

/* ==========================================================================
   #HEADINGS
   ========================================================================== */
/**
 * Redefine all of our basic heading styles against utility classes so as to
 * allow for double stranded heading hierarchy, e.g. we semantically need an H2,
 * but we want it to be sized like an H1:
 *
 *   <h2 class="u-h1"></h2>
 *
 */
.u-h1 {
    font-size: 36px !important;
    font-size: 2.25rem !important;
}

.u-h2 {
    font-size: 30px !important;
    font-size: 1.875rem !important;
}

.u-h3 {
    font-size: 24px !important;
    font-size: 1.5rem !important;
}

.u-h4 {
    font-size: 20px !important;
    font-size: 1.25rem !important;
}

.u-h5 {
    font-size: 18px !important;
    font-size: 1.125rem !important;
}

.u-h6 {
    font-size: 16px !important;
    font-size: 1rem !important;
}

/* ==========================================================================
   #SPACING
   ========================================================================== */
/**
 * Utility classes to put specific spacing values onto elements. The below loop
 * will generate us a suite of classes like:
 *
 *   .u-margin-top {}
 *   .u-padding-left-large {}
 *   .u-margin-right-small {}
 *   .u-padding {}
 *   .u-padding-right-none {}
 */
.u-padding {
    padding: 24px !important;
}

.u-padding-tiny {
    padding: 6px !important;
}

.u-padding-small {
    padding: 12px !important;
}

.u-padding-large {
    padding: 36px !important;
}

.u-padding-huge {
    padding: 48px !important;
}

.u-padding-none {
    padding: 0 !important;
}

.u-padding-top {
    padding-top: 24px !important;
}

.u-padding-top-tiny {
    padding-top: 6px !important;
}

.u-padding-top-small {
    padding-top: 12px !important;
}

.u-padding-top-large {
    padding-top: 36px !important;
}

.u-padding-top-huge {
    padding-top: 48px !important;
}

.u-padding-top-none {
    padding-top: 0 !important;
}

.u-padding-right {
    padding-right: 24px !important;
}

.u-padding-right-tiny {
    padding-right: 6px !important;
}

.u-padding-right-small {
    padding-right: 12px !important;
}

.u-padding-right-large {
    padding-right: 36px !important;
}

.u-padding-right-huge {
    padding-right: 48px !important;
}

.u-padding-right-none {
    padding-right: 0 !important;
}

.u-padding-bottom {
    padding-bottom: 24px !important;
}

.u-padding-bottom-tiny {
    padding-bottom: 6px !important;
}

.u-padding-bottom-small {
    padding-bottom: 12px !important;
}

.u-padding-bottom-large {
    padding-bottom: 36px !important;
}

.u-padding-bottom-huge {
    padding-bottom: 48px !important;
}

.u-padding-bottom-none {
    padding-bottom: 0 !important;
}

.u-padding-left {
    padding-left: 24px !important;
}

.u-padding-left-tiny {
    padding-left: 6px !important;
}

.u-padding-left-small {
    padding-left: 12px !important;
}

.u-padding-left-large {
    padding-left: 36px !important;
}

.u-padding-left-huge {
    padding-left: 48px !important;
}

.u-padding-left-none {
    padding-left: 0 !important;
}

.u-margin {
    margin: 24px !important;
}

.u-margin-tiny {
    margin: 6px !important;
}

.u-margin-small {
    margin: 12px !important;
}

.u-margin-large {
    margin: 36px !important;
}

.u-margin-huge {
    margin: 48px !important;
}

.u-margin-none {
    margin: 0 !important;
}

.u-margin-top {
    margin-top: 24px !important;
}

.u-margin-top-tiny {
    margin-top: 6px !important;
}

.u-margin-top-small {
    margin-top: 12px !important;
}

.u-margin-top-large {
    margin-top: 36px !important;
}

.u-margin-top-huge {
    margin-top: 48px !important;
}

.u-margin-top-none {
    margin-top: 0 !important;
}

.u-margin-right {
    margin-right: 24px !important;
}

.u-margin-right-tiny {
    margin-right: 6px !important;
}

.u-margin-right-small {
    margin-right: 12px !important;
}

.u-margin-right-large {
    margin-right: 36px !important;
}

.u-margin-right-huge {
    margin-right: 48px !important;
}

.u-margin-right-none {
    margin-right: 0 !important;
}

.u-margin-bottom {
    margin-bottom: 24px !important;
}

.u-margin-bottom-tiny {
    margin-bottom: 6px !important;
}

.u-margin-bottom-small {
    margin-bottom: 12px !important;
}

.u-margin-bottom-large {
    margin-bottom: 36px !important;
}

.u-margin-bottom-huge {
    margin-bottom: 48px !important;
}

.u-margin-bottom-none {
    margin-bottom: 0 !important;
}

.u-margin-left {
    margin-left: 24px !important;
}

.u-margin-left-tiny {
    margin-left: 6px !important;
}

.u-margin-left-small {
    margin-left: 12px !important;
}

.u-margin-left-large {
    margin-left: 36px !important;
}

.u-margin-left-huge {
    margin-left: 48px !important;
}

.u-margin-left-none {
    margin-left: 0 !important;
}

@media (max-width: 1000px) {
    .u-margin-bottom\@xlg {
        margin-bottom: 24px !important;
    }
}

@media (max-width: 600px) {
    .u-margin-bottom\@md {
        margin-bottom: 24px !important;
    }
}

@media (max-width: 400px) {
    .u-margin-bottom-small\@sm {
        margin-bottom: 12px !important;
    }

    .u-margin-right-small\@sm {
        margin-right: 12px !important;
    }
}

/* ==========================================================================
   #PRINT
   ========================================================================== */
/**
 * Very crude, reset-like styles taken from the HTML5 Boilerplate:
 * https://github.com/h5bp/html5-boilerplate/blob/5.3.0/dist/doc/css.md#print-styles
 * https://github.com/h5bp/html5-boilerplate/blob/master/dist/css/main.css#L205-L282
 */
@media print {
    /**
   * 1. Black prints faster: http://www.sanbeiji.com/archives/953
   */
    *,
    *:before,
    *:after,
    *:first-letter,
    *:first-line {
        background: transparent !important;
        color: #000 !important;
        /* [1] */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    /**
   * Don't show links that are fragment identifiers, or use the `javascript:`
   * pseudo protocol.
   */
    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    /**
   * Printing Tables: http://css-discuss.incutio.com/wiki/Printing_Tables
   */
    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

/* ==========================================================================
   #HIDE
   ========================================================================== */
/**
 * Hide only visually, but have it available for screen readers:
 * http://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 */
.u-hidden-visually {
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
}

/**
 * Hide visually and from screen readers.
 */
.u-hidden {
    display: none !important;
}

@media (max-width: 1400px) {
    .u-hidden\@wide {
        display: none !important;
    }
}

@media (max-width: 600px) {
    .u-hidden\@md {
        display: none !important;
    }
}

@media (max-width: 400px) {
    .u-hidden\@sm {
        display: none !important;
    }
}

@media (min-width: 37.5625em) {
    .u-hidden-over-md {
        display: none !important;
    }
}

.ie8 .u-hidden-over-md {
    display: none;
}

@media (max-width: 600px) {
    .u-hidden-under-md {
        display: none !important;
    }
}

@font-face {
    font-family: "NanumBarunGothic-webfont";
    font-style: normal;
    font-weight: 400;
    src: url("/css/font/NanumBarunGothic.subset.eot") format("eot");
    src: url("/css/font/NanumBarunGothic.subset.eot?#iefix") format("embedded-opentype"), url("/css/font/NanumBarunGothic.subset.woff2") format("woff2"), url("/css/font/NanumBarunGothic.subset.woff") format("woff"), url("/css/font/NanumBarunGothic.subset.ttf") format("truetype");
}

body {
    font-family: "NanumBarunGothic", "NanumBarunGothic-webfont", "Malgun Gothic", sans-serif;
    font-size: 16px;
    font-size: 1rem;
    line-height: 1.5;
    word-break: keep-all;
    color: #444;
    background-color: white;
}

h1, h2, h3, h4, h5, h6 {
    word-break: keep-all;
}

address {
    font-style: normal;
}

fieldset {
    border: none;
    border-bottom: 1px solid #dcdcdc;
    padding-bottom: 24px;
    margin-bottom: 24px;
}

legend {
    font-weight: bold;
}

small {
    font-size: 0.875em;
}

small small:after {
    color: red;
    content: " ← small 중첩 금지. u-text-* 클래스 사용.";
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: underline;
}

button,
input,
optgroup,
select,
textarea {
    box-sizing: border-box;
    font-family: inherit;
    border-width: 1px;
    vertical-align: middle;
    border-radius: 0;
    padding-top: 0;
    padding-bottom: 0;
    line-height: inherit;
    min-height: 2.625rem;
}

input[type=text], input[type=password], input[type=search], input[type=number], input[type=email], input[type=url], input[type=tel], input[type=date], input[type=datetime-local] {
    max-width: 100%;
    border: 1px solid #dedcdf;
    padding-left: 0.1em;
    -webkit-appearance: none;
}

textarea {
    max-width: 100%;
    border: 1px solid #dedcdf;
    padding-left: 0.1em;
    -webkit-appearance: none;
}

select, optgroup {
    max-width: 100%;
    border: 1px solid #dedcdf;
    background-color: #eee;
    min-height: 2.625rem;
}

select::-ms-expand {
    max-width: 100%;
    border: 1px solid #dedcdf;
    background-color: #eee;
    min-height: 2.625rem;
}

button, input[type=submit], input[type=button], input[type=reset] {
    cursor: pointer;
}

input[type=checkbox], input[type=radio] {
    min-height: 0 !important;
}

/**
 * 이걸 붙인 아이템들 사이에 쉼표를 찍는다.
 * 닫는 태크를 콘텐트 바로 뒤에 공백 없이 붙여야 한다.
 * <span class="c-comma-delimiter">가</span> <span class="c-comma-delimiter">나</span>
 * <span class="c-comma-delimiter">다</span> <span class="c-comma-delimiter">라</span> */
.c-comma-delimiter {
    display: inline-block;
}

.c-comma-delimiter:after {
    content: ",";
}

.c-comma-delimiter:last-child:after {
    content: "";
}

.c-close {
    float: right;
    font-size: 24px;
    font-weight: normal;
    line-height: 1;
    color: #000;
    opacity: 0.5;
    filter: alpha(opacity=50);
}

.c-close:hover, .c-close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: 0.9;
    filter: alpha(opacity=90);
}

button.c-close {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
}

.c-grid-item-type-1 {
    display: block;
    border-top: 1px solid #596c78;
}

.c-grid-item-type-1:hover {
    text-decoration: none;
    background-color: #f1f3f5;
}

.c-image-box {
    margin-right: auto;
    margin-left: auto;
}

.c-image-box__img {
    display: block;
}

.c-image-box__text {
    margin-bottom: 0;
}

.c-image-box__text:after {
    content: "" !important;
    display: block !important;
    clear: both !important;
}

.c-image-box__text--bordered {
    padding: 6px;
    border: 1px solid #ced4da;
    background-color: #ffffff;
}

.c-sub-typo {
    color: white;
    background-color: #D81F36;
    padding: 3px 13px 2px;
    display: inline-block;
}

.c-separator {
    border: none;
    border-bottom-width: 1px;
    clear: both;
}

.c-separator:after {
    content: "" !important;
    display: block !important;
    clear: both !important;
}

.c-separator--default {
    border-bottom-color: #dedcdf;
    border-bottom-style: solid;
}

.c-separator--primary {
    border-bottom-color: #D81F36;
    border-bottom-style: solid;
    border-bottom-width: 3px;
}

.c-separator--secondary {
    border-bottom-color: #6f8695;
    border-bottom-style: dotted;
}

.c-alert {
    padding: 12px;
    margin-bottom: 24px;
    border: 1px solid transparent;
    border-radius: 6px;
}

.c-alert h4 {
    margin-top: 0;
    color: inherit;
}

.c-alert > p,
.c-alert > ul {
    margin-bottom: 6px;
}

.c-alert :last-child {
    margin-bottom: 0;
}

.c-alert--dismissible {
    padding-right: 44px;
}

.c-alert--dismissible .c-alert__close {
    position: relative;
    top: -2px;
    right: -21px;
    color: inherit;
}

.c-alert--success {
    background-color: #dff0d8;
    border-color: #d6e9c6;
    color: #3c763d;
}

.c-alert--success hr {
    border-top-color: #c9e2b3;
}

.c-alert--success .c-alert__link {
    color: #2b542c;
}

.c-alert--info {
    background-color: #d9edf7;
    border-color: #bce8f1;
    color: #31708f;
}

.c-alert--info hr {
    border-top-color: #a6e1ec;
}

.c-alert--info .c-alert__link {
    color: #245269;
}

.c-alert--warning {
    background-color: #fcf8e3;
    border-color: #faebcc;
    color: #8a6d3b;
}

.c-alert--warning hr {
    border-top-color: #f7e1b5;
}

.c-alert--warning .c-alert__link {
    color: #66512c;
}

.c-alert--danger {
    background-color: #f2dede;
    border-color: #ebccd1;
    color: #a94442;
}

.c-alert--danger hr {
    border-top-color: #e4b9c0;
}

.c-alert--danger .c-alert__link {
    color: #843534;
}

.c-basic-table thead {
    border-top: 2px solid #D81F36;
}

.c-basic-table thead th, .c-basic-table tbody th {
    background-color: #fbfbfb;
    text-align: center;
    font-weight: normal;
}

.c-basic-table th, .c-basic-table td {
    border: 1px solid #dedcdf;
    vertical-align: top;
    padding: 15px;
}

.c-basic-table--middle th, .c-basic-table--middle td {
    vertical-align: middle;
}

.c-board-table thead th {
    border-top: 3px solid #333;
    border-bottom: 1px solid #333;
}

.c-board-table tbody td {
    border-bottom: 1px solid #dedcdf;
}

.c-board-table th {
    padding: 12px;
}

.c-board-table td {
    padding: 20px;
}

@media (max-width: 400px) {
    .c-board-table thead {
        display: none;
    }

    .c-board-table tbody td {
        border-bottom: 1px solid #dedcdf;
    }

    .c-board-table th, .c-board-table td {
        padding: 6px;
    }
}

.c-basic-list {
    border-top: 3px solid #344b9d;
}

.c-basic-list > li {
    padding: 12px;
    border-bottom: 1px solid #dee2e6;
}

@media (max-width: 400px) {
    .c-basic-list > li {
        padding: 6px;
    }
}

.c-basic-list > li:hover {
    text-decoration: none;
    background-color: #f1f3f5;
}

.c-basic-list > li a {
    color: inherit;
    text-decoration: none;
}

.c-basic-list__thumbnail {
    width: 120px;
}

@media (max-width: 400px) {
    .c-basic-list__thumbnail {
        width: 75px;
    }
}

.c-history-table thead th, .c-history-table tbody th {
    text-align: left;
    padding-left: 0px;
    padding-right: 60px;
}

.c-history-table th, .c-history-table td {
    border-bottom: 1px solid #dedcdf;
    vertical-align: top;
    padding-top: 15px;
    padding-bottom: 15px;
}

.c-history-table td {
    padding-top: 20px;
}

@media (max-width: 400px) {
    .c-history-table thead th, .c-history-table tbody th {
        padding-right: 15px;
    }
}

.c-family-group {
    position: relative;
    height: 220px;
}

.c-family-group .c-family-group__circle {
    background: url("/images/bg-subsidiary-entity-2.png") 0 0 no-repeat;
    width: 220px;
    height: 220px;
    text-align: center;
    display: inline-block;
}

.c-family-group .c-family-group__circle img {
    display: inline-block;
    margin-top: 50px;
}

.c-family-group .c-family-group__circle .c-family-group__circle-title {
    font-size: 24px;
    color: #D81F36;
}

.c-family-group .c-family-group__deco {
    background: url("/images/bg-subsidiary-entity-2.png") -220px center no-repeat;
    width: 36px;
    height: 10px;
    position: absolute;
    top: 105px;
    left: 220px;
}

.c-family-group .c-family-group__box {
    background-color: #eee;
    border-radius: 15px;
    padding: 20px;
    width: 160px;
    margin-left: 28px;
    margin-top: -20px;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}

@media (max-width: 600px) {
    .c-family-group {
        font-size: 14px;
        height: 128px;
    }

    .c-family-group .c-family-group__circle {
        background: url("/images/bg-subsidiary-entity-2.png") 0 0 no-repeat;
        background-size: 100%;
        width: 150px;
        height: 128px;
        padding-right: 20px;
    }

    .c-family-group .c-family-group__circle img {
        margin-top: 18px;
        width: 25%;
    }

    .c-family-group .c-family-group__circle .c-family-group__circle-title {
        font-size: 16px;
    }

    .c-family-group .c-family-group__deco {
        background: url("/images/bg-subsidiary-entity-2.png") -230px center no-repeat;
        width: 26px;
        height: 10px;
        position: absolute;
        top: 59px;
        left: 126px;
    }

    .c-family-group .c-family-group__box {
        padding: 10px;
        width: 110px;
        margin-left: -6px;
        margin-top: -30px;
        font-size: 11px;
    }
}

.c-form-table th, .c-form-table td {
    padding: 6px;
}

.c-form-table th {
    width: 20%;
    white-space: nowrap;
    text-align: right;
    vertical-align: top;
}

.c-form-table label + label {
    white-space: nowrap;
}

.c-form-table label + label {
    margin-left: 6px;
}

@media (max-width: 600px) {
    .c-form-table {
        display: block;
    }

    .c-form-table > thead, .c-form-table > tbody {
        display: block;
        width: 100%;
    }

    .c-form-table > thead > tr, .c-form-table > tbody > tr {
        display: block;
        width: 100%;
    }

    .c-form-table > thead > tr > td, .c-form-table > thead > tr > th, .c-form-table > tbody > tr > td, .c-form-table > tbody > tr > th {
        display: block;
        width: 100%;
        padding: 0;
    }

    .c-form-table > thead > tr > th, .c-form-table > tbody > tr > th {
        text-align: left;
        margin-bottom: 6px;
    }

    .c-form-table > thead > tr > td, .c-form-table > tbody > tr > td {
        margin-bottom: 12px;
    }
}

.c-stock-table {
    border-top: 2px solid #000000;
}

.c-stock-table thead th, .c-stock-table tbody th {
    background-color: #faf8fb;
}

.c-stock-table th, .c-stock-table td {
    border: 1px solid #dedcdf;
    text-align: center;
    vertical-align: middle;
    padding: 15px;
}

.c-hamburger-icon {
    font-size: 0;
}

.c-hamburger-icon:before, .c-hamburger-icon .c-hamburger-icon__center-line {
    display: block;
    content: " ";
    width: 1.875rem;
    border-top: 2px solid white;
    line-height: 0.5;
    padding-bottom: 9px;
}

.c-hamburger-icon .c-hamburger-icon__center-line {
    border-bottom: 2px solid white;
}

.c-horizontal-content {
    font-size: 0;
}

.c-horizontal-content__title, .c-horizontal-content__body, .c-horizontal-content__meta {
    display: inline-block;
    line-height: 60px;
    font-size: 14px;
    margin: 0;
    vertical-align: top;
}

.c-horizontal-content__title {
    width: 12.5%;
    background-color: #596c78;
    color: white;
    text-align: center;
}

.c-horizontal-content__body {
    width: 87.5%;
    padding-left: 24px;
    padding-right: 24px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c-horizontal-content__body--has-meta {
    width: 67.5%;
}

@media (min-width: 53.1875em) and (max-width: 87.5525em) {
    .c-horizontal-content__body--has-meta {
        width: 57.5%;
    }
}

.c-horizontal-content__meta {
    width: 20%;
    padding-right: 24px;
    padding-left: 24px;
    text-align: right;
    white-space: nowrap;
}

@media (min-width: 53.1875em) and (max-width: 87.5525em) {
    .c-horizontal-content__meta {
        width: 30%;
    }
}

@media (max-width: 600px) {
    .c-horizontal-content--basic-line-height-on-md {
        padding-top: 24px;
        padding-bottom: 24px;
    }

    .c-horizontal-content--basic-line-height-on-md .c-horizontal-content__body, .c-horizontal-content--basic-line-height-on-md .c-horizontal-content__meta {
        line-height: 24px;
    }

    .c-horizontal-content__title {
        display: none;
    }

    .c-horizontal-content__body {
        font-weight: bold;
    }

    .c-horizontal-content__body, .c-horizontal-content__meta {
        width: 100%;
        text-align: left;
    }
}

.c-breadcrumb {
    float: right;
    margin-top: -3.3em;
}

@media (max-width: 600px) {
    .c-breadcrumb {
        float: none;
        text-align: center;
        padding-top: 0;
        margin-bottom: 24px;
        margin-top: 0;
    }
}

.c-breadcrumb__list {
    display: inline-block;
    list-style: none;
    margin: 0;
    color: #727272;
}

.c-breadcrumb__item {
    display: inline-block;
}

.c-breadcrumb__item:after {
    content: "▶";
    vertical-align: middle;
    padding: 0 6px;
    font-size: 10px;
}

.c-breadcrumb__item:last-child:after {
    content: none;
}

.c-hero-title {
    text-align: center;
    padding: 24px;
    border: 4px solid #dedcdf;
    border-radius: 45px;
}

.c-hero-title--primary {
    border-color: #D81F36;
}

.c-tab {
    margin-left: 0;
    width: 100%;
    display: flex;
    list-style: none;
    text-align: center;
    margin-bottom: 36px;
    word-break: break-all;
    word-wrap: break-word;
   }
@media (max-width: 600px) {
    .c-tab {
        display: block;
    }
}

.c-tab > li {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
    background-color: #aaa;

}

.c-tab > li:not(:last-child) {
    border-right: 1px solid white;
}

@media (max-width: 600px) {
    .c-tab > li {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid white;
    }
}

.c-tab__item {
    display: block;
    padding: 12px;
    color: white;
    height: 100%;
}

.c-tab__item:hover, .c-tab__item.is-active {
    text-decoration: none;
    background-color: #D81F36;
}

.ie .c-tab {
    width: 100%;
    display: table;
    table-layout: fixed;
}

.ie .c-tab > li {
    display: table-cell;
}

.o-hover-caption {
    position: relative;
}

.o-hover-caption__caption {
    position: absolute;
    bottom: 1.5em;
    right: 1.5em;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid white;
}

.o-title {
    margin-bottom: 24px;
}

.o-title h1, .o-title h2, .o-title p {
    margin: 0;
}

.o-title--one-line h1, .o-title--one-line h2, .o-title--one-line p {
    display: inline;
}

.o-title--content {
    padding-right: 12.75em;
}

.o-list-inline--bar-delimited > .o-list-inline__item + .o-list-inline__item:before {
    content: "|";
}

.o-list-inline--padded-link a {
    padding: 6px;
    display: inline-block;
}

/**
 * 그리드 아이템의 너비 지정을 위해서는 width 유틸리티를 사용해야 한다.
 * <div class="o-flex-grid  o-flex-grid--guttered">
 *   <div class="o-flex-grid__item  u-3/12">
 *     <div class="o-flex-grid__bg  o-flex-grid__bg--gray">
 *     </div>
 *   </div>
 * </div>
 *
 * 예제 http://codepen.io/mytory/pen/eBLaVw */
.o-flex-grid {
    display: flex;
    flex-wrap: wrap;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.o-flex-grid__item {
    margin: 0 0 24px 0;
}

.o-flex-grid__bg {
    display: block;
    width: 100%;
    height: 100%;
}

.o-flex-grid--guttered {
    margin-left: -24px;
}

.o-flex-grid--guttered .o-flex-grid__item {
    padding-left: 24px;
}

.o-flex-grid__bg--default {
    background-color: #495057;
    color: #ffffff;
}

.o-flex-grid__bg--hover.o-flex-grid__bg--default:hover {
    background-color: #343a40;
}

.o-flex-grid__bg--hover.o-flex-grid__bg--secondary:hover {
    background-color: #e9ecef;
}

.ie .o-flex-grid {
    font-size: 0;
}

.ie .o-flex-grid__item {
    font-size: 16px;
    display: inline-block;
    vertical-align: top;
}


.o-flex-grid.patents .info-text{word-break:break-all;}


/**
 * 폼을 구성할 때 input과 button을 딱 붙이는 경우가 있다.
 * 그 때 사용하는 객체
 * 각 아이템의 높이는 기본적으로 맞추지만, 어긋나는 것은 알아서 맞춰 줘야 한다. */
.o-tight-fitting {
    font-size: 0;
}

.o-tight-fitting__item {
    font-size: 16px;
    line-height: 1.8;
    padding-top: 0;
    padding-bottom: 0;
    vertical-align: middle;
}

.o-tight-fitting__item + .o-tight-fitting__item {
    border-left: none;
}

.o-two-line {
    height: 3em;
    overflow: hidden;
}

.o-table-responsive {
    overflow-x: auto;
    min-height: 0.01%;
}

@media screen and (max-width: 600px) {
    .o-table-responsive {
        max-width: 100%;
        width: 100%;
        overflow-y: hidden;
        -ms-overflow-style: -ms-autohiding-scrollbar;
        -webkit-overflow-scrolling: touch;
    }

    .o-table-responsive caption {
        padding: 12px;
    }

    .o-table-responsive table th, .o-table-responsive table td {
        white-space: ;
    }
}

.o-middle-text {
    position: relative;
    top: 50%;
    text-align: center;
    margin-top: -0.7em;
}

.o-circle {
    border-radius: 50%;
    width: 100%;
    height: 100%;
}

.o-circle--primary {
    border: 6px solid #D81F36;
}

.o-circle--secondary {
    background-color: #344b9d;
}

.o-middle-fake-table {
    display: table;
}

.o-middle-fake-table__td {
    display: table-cell;
    vertical-align: middle;
}

.s-color-link a {
    color: #596c78;
}

.s-sub-page {
    line-height: 1.8;
    padding-bottom: 100px;
}

.s-sub-page h1, .s-sub-page h2, .s-sub-page h3, .s-sub-page h4, .s-sub-page h5, .s-sub-page h6 {
    font-weight: normal;
}

@media (max-width: 600px) {
    .s-sub-page h1 {
        text-align: center;
        margin-bottom: 0;
        font-size: 1.5rem;
    }
}

.s-sub-page h2 {
    margin-top: 48px;
    color: #D81F36;
    font-size: 1.5rem;
}

@media (max-width: 600px) {
    .s-sub-page h2 {
        font-size: 1.25rem;
    }
}

.s-sub-page h3 {
    line-height: 1.5;
}

.u-button-like-text {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: inherit;
    color: inherit;
    border: none !important;
}

.u-inline {
    display: inline;
}

.u-inline-block {
    display: inline-block !important;
}

.u-inline-block.logo-kbi__group{
    display: block;
    width: 50%;
}

@media screen and (max-width: 768px) {
    .u-inline-block.logo-kbi__group{
        width: 70%;
    }
}


.u-block {
    display: block;
}

.u-center-block {
    margin-left: auto;
    margin-right: auto;
    display: block;
}

.u-pull-left {
    float: left;
}

.u-pull-right {
    float: right;
}

.u-icon-size {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    line-height: 1;
}

.u-icon-height {
    width: auto;
    height: 1.5rem;
    display: inline-block;
    line-height: 1;
}

.u-vertical-middle {
    vertical-align: middle;
}

.u-vertical-top {
    vertical-align: top;
}

.u-vertical-bottom {
    vertical-align: bottom;
}

.u-basic-border {
    border: 1px solid #dedcdf;
}

.u-background-hover-effect:hover {
    text-decoration: none;
    background-color: #f1f3f5;
}

.u-list-square {
    list-style-type: square;
}

.u-color-primary {
    color: #D81F36;
}

.u-color-inherit {
    color: inherit;
}

.u-color-muted {
    color: #777;
}

.u-color-white {
    color: #ffffff;
}

.u-color-light {
    color: #c7ccd0;
}

.u-color-black {
    color: #000000;
}

.u-color-up {
    color: #ff0305;
}

.u-color-down {
    color: #0068ff;
}

.u-bg-primary {
    background-color: #D81F36;
}

.u-bg-primary-highlight {
    background-color: #D81F36;
}

.u-bg-secondary {
    background-color: #596c78;
}

.u-bg-secondary-shadow {
    background-color: #475660;
}

.u-bg-inherit {
    background-color: inherit;
}

.u-bg-muted {
    background-color: #eee;
}

.u-bg-light {
    background-color: #fbfbfb;
}

.u-bg-white {
    background-color: #ffffff;
}

.u-bg-black {
    background-color: #000000;
}

.u-bg-gray{
	background-color:#bbb;
}

.u-text-right {
    text-align: right !important;
}

.u-text-center {
    text-align: center !important;
}

.u-text-left {
    text-align: left !important;
}

@media (max-width: $ dongkook-break-sm) {
    .u-text-center\@sm {
        text-align: center !important;
    }
}

@media (max-width: $ dongkook-break-tiny) {
    .u-text-center\@tiny {
        text-align: center !important;
    }
}

@media (max-width: $ dongkook-break-sm) {
    .u-text-right\@sm {
        text-align: right !important;
    }
}

@media (max-width: $ dongkook-break-tiny) {
    .u-text-right\@tiny {
        text-align: right !important;
    }
}

@media (max-width: $ dongkook-break-sm) {
    .u-text-left\@sm {
        text-align: left !important;
    }
}

@media (max-width: $ dongkook-break-tiny) {
    .u-text-left\@tiny {
        text-align: left !important;
    }
}

.u-text-basic-size {
    font-size: 16px !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
}

.u-text-small {
    font-size: 14px !important;
    font-size: 0.875rem !important;
}

.u-text-tiny {
    font-size: 12px !important;
    font-size: 0.75rem !important;
}

.u-text-micro {
    font-size: 10px !important;
    font-size: 0.625rem !important;
}

.u-text-no-deco:link, .u-text-no-deco:visited, .u-text-no-deco:hover, .u-text-no-deco:active {
    text-decoration: none;
}

.u-text-bold {
    font-weight: bold;
}

.u-text-normal-weight {
    font-weight: normal;
}

.u-text-nowrap {
    white-space: nowrap;
}

.u-text-keep-words {
    word-break: keep-all;
}

.u-text-ellipsis, .main-news-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.u-text-high-space {
    line-height: 2.2;
}

.u-text-outdent {
    text-indent: -2.7em;
    margin-left: 2.7em;
}

.u-input-small {
    width: 100px;
}

.u-basic-line-height {
    line-height: 24px;
}

.u-flat-line-height {
    line-height: 1;
}

.site-header {
    line-height: 70px;
}

.logo {
    width: 265px;
    display: block;
}

@media (max-width: 600px) {
    .logo {
        margin-left: auto;
        margin-right: auto;
    }
}

.language-selector-wrapper {
    display: inline-block;
    position: relative;
    width: 4.5em;
}

.language-selector-wrapper:after {
    content: "▼";
    position: absolute;
    top: 0;
    right: 0em;
    font-size: 0.5em;
}

.language-selector-label {
    position: absolute;
    color: white;
    top: 0;
    left: 0;
}

.language-selector {
    background-color: transparent;
    border: none;
    color: white;
    padding: 0;
    display: inline;
    width: 100%;
    height: 100%;
    min-height: 0;
    opacity: 0;
    filter: alpha(opacity=0);
}

.language-selector option {
    color: black;
}

.site-footer {
    word-break: keep-all;
}

@media (max-width: 1500px) {
    .site-footer {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 600px) {
    .site-footer {
        text-align: center;
    }
}

.family-site-wrapper {
    margin-top: 0.5em;
    display: inline-block;
    position: relative;
    background-color: white;
    border: 1px solid #dedcdf;
    width: 150px;
    height: 28px;
    line-height: 28px;
    float: right;
}

.family-site-wrapper:after {
    content: "▼";
    position: absolute;
    top: 0;
    right: 0.5em;
    font-size: 0.5em;
	color:#444;
}

@media (max-width: 600px) {
    .family-site-wrapper {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

.family-site-label {
    text-align: left;
    padding-left: 0.5em;
    position: absolute;
    width: 80%;
    height: 100%;
    top: 0;
    left: 0;
}

.family-site {
    width: 100%;
    height: 100%;
    min-height: 0;
    background-color: transparent;
    border: none;
    color: white;
    padding: 0;
    display: inline;
    opacity: 0;
    filter: alpha(opacity=0);
}

.family-site option {
    color: black;
}

.focus-list {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 6px;
    padding-right: 6px;
    white-space: nowrap;
    overflow: hidden;
}

.focus-list-button-wrapper {
    display: none;
}

.focus-list-narrow .focus-list {
    display: none;
    overflow: visible;
    position: absolute;
    background-color: #344b9d;
    width: 100%;
    white-space: normal;
    z-index: 1;
}

.focus-list-narrow .focus-list-button-wrapper {
    display: block;
}

.pagination {
    margin-left: 0;
    list-style-type: none;
    text-align: center;
}

.pagination a, .pagination strong {
    display: inline-block;
    padding: 6px 0.5em 6px 0.8em;
}

.pagination a:hover {
    text-decoration: none;
    background-color: #dee2e6;
}

.pagination .pagination-arrow {
    border: 1px solid #dedcdf;
}

.pagination strong {
    font-weight: normal;
    border: 1px solid #344b9d;
    color: #344b9d;
}

.wide-nav {
    text-align: center;
}

@media (max-width: 850px) {
    .wide-nav {
        font-size: 14px;
    }
}

@media (max-width: 600px) {
    .wide-nav {
        display: none;
    }
}

.wide-nav__item {
    position: relative;
    transition: background-color 0.4s;
}

.wide-nav__item:hover {
    color: white;
    background-color: #596c78;
}

.wide-nav__item:after {
    display: block;
    content: " ";
    margin-top: -2px;
    border-bottom: 2px solid white;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}

.wide-nav__a {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
    line-height: 3.875rem;
    display: inline-block;
}

.wide-nav__a:hover {
    text-decoration: none;
}

@media (max-width: 1000px) {
    .wide-nav__a {
        padding-left: 2.1875rem;
        padding-right: 2.1875rem;
    }
}

@media (max-width: 767px) {
    .wide-nav__a {
        padding-left: 1.875rem;
        padding-right: 1.875rem;
    }
}

@media (max-width: 700px) {
    .wide-nav__a {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
}

.wide-nav__sub {
    position: absolute;
    display: none;
    width: 100%;
    max-width: 100%;
    left: 0;
    margin: 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
    list-style: none;
    word-break: keep-all;
    z-index: 1;
}

.wide-nav__sub a {
    display: block;
    padding: 0.4375rem;
    text-decoration: none;
}

.wide-nav__sub a:hover {
    background-color: #475660;
}

.narrow-nav {
    font-size: 16px;
    font-weight: bold;
}

.narrow-nav-header {
    padding-right: 21px;
    padding-left: 21px;
    border-bottom: 1px solid #596c78;
    line-height: 70px;
}

.narrow-nav__a {
    display: block;
    padding: 0 20px;
    line-height: 62px;
    border-bottom: 1px solid #596c78;
}

.narrow-nav__a:hover {
    text-decoration: none;
    background-color: #283945;
}

.narrow-nav__sub {
    font-size: 14px;
    list-style-type: square;
    background-color: #283945;
    margin: 0;
    padding: 1em 1em 1em 2.5em;
    display: none;
}

.narrow-nav-mask {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1;
}

.sub-nav {
    border-top: 1px solid #dedcdf;
}

.sub-nav-a {
    display: block;
    padding: 12px;
    border-bottom: 1px solid #dedcdf;
}

.sub-nav-a:hover, .sub-nav-a:active, .sub-nav-a--active {
    background-color: #D81F36;
    color: white;
    text-decoration: none;
}

.main-right {
    height: 100%;
}

.main-right-title {
    font-size: 24px;
    font-weight: normal;
    margin-bottom: 0;
}

@media (min-width: 53.1875em) and (max-width: 87.5525em) {
    .main-right-title {
        font-size: 20px;
    }
}

.main-top-right, .main-bottom-right {
    height: 100%;
    overflow: hidden;
}

.main-right-tile-height {
    height: 50%;
}

@media (max-width: 600px) {
    .main-right-tile-height {
        height: auto;
    }
}

.main-products-wrapper {
    overflow: hidden;
    border-top: 1px solid #dedcdf;
    text-align: center;
    background-color: #fff;
}

.main-products-img {
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 53.1875em) and (max-width: 93.8025em) {
    .main-products-img {
        width: 75% !important;
    }
}

@media (min-width: 53.1875em) and (max-width: 62.5525em) {
    .main-products-description {
        font-size: 12px;
    }
}

@media (max-width: 600px) {
    .main-notice {
        border-bottom: 1px solid #dedcdf;
    }
}

@media (max-width: 600px) {
    .main-right-ratio {
        overflow: visible;
        position: static;
        display: block;
    }

    .main-right-ratio:before {
        content: none;
    }

    .main-right-ratio .o-ratio__content {
        position: static;
    }
}

.main-box {
    position: relative;
    padding: 36px 40px;
}

@media (max-width: 1400px) {
    .main-box {
        padding: 24px;
    }
}

.main-box-more-button {
    position: absolute;
    right: 40px;
    top: 36px;
    background-image: url("/images/button-plus-sign.png");
    width: 19px;
    height: 19px;
    text-indent: -9999px;
    overflow: hidden;
}

@media (max-width: 1400px) {
    .main-box-more-button {
        right: 24px;
        top: 24px;
    }
}

.main-news-item:not(:last-of-type) {
    margin-bottom: 24px;
}

@media (min-width: 53.1875em) and (max-width: 87.5525em) {
    .main-news-item:not(:last-of-type) {
        margin-bottom: 12px;
    }
}

.main-news-title {
    font-size: 16px;
    margin-bottom: 12px;
}

@media (min-width: 53.1875em) and (max-width: 87.5525em) {
    .main-news-title {
        max-height: 3em;
        white-space: normal;
    }
}

@media (min-width: 53.1875em) and (max-width: 87.5525em) {
    .main-news-description {
        display: none;
    }
}

@media (min-width: 53.1875em) and (max-width: 62.5525em) {
    .main-news-date {
        display: none;
    }
}

.main-tile-button {
    word-break: keep-all;
    padding: 36px 6px;
    text-align: center;
    height: 50%;
}

@media (min-width: 53.1875em) and (max-width: 87.5525em) {
    .main-tile-button {
        padding: 12px 6px;
    }
}

@media (max-width: 600px) {
    .main-tile-button {
        padding: 24px;
        height: auto;
    }

    .main-tile-button:after {
        content: "" !important;
        display: block !important;
        clear: both !important;
    }
}

.main-tile-button-description {
    margin-bottom: 12px;
    font-size: 14px;
    color: #c7ccd0;
}

@media (min-width: 62.5625em) and (max-width: 87.5525em) {
    .main-tile-button-description {
        font-size: 12px;
    }
}

@media (min-width: 53.1875em) and (max-width: 62.5525em) {
    .main-tile-button-description {
        display: none;
    }
}

@media (min-width: 53.1875em) and (max-width: 93.8025em) {
    .main-tile-button-body {
        font-size: 12px;
    }
}

@media (max-width: 600px) {
    .main-tile-button-body {
        text-align: left;
        float: left;
    }
}

@media (min-width: 53.1875em) and (max-width: 93.8025em) {
    .main-tile-button-img {
        width: 20%;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (min-width: 53.1875em) and (max-width: 62.5525em) {
    .main-tile-button-img {
        margin-top: 12px;
    }
}

@media (max-width: 600px) {
    .main-tile-button-img {
        float: right;
    }
}

.sub-wrapper {
    display: flex;
}

@media (max-width: 767px) {
    .sub-wrapper {
        padding-left: 12px;
        padding-right: 12px;
    }
}

.sub-nav-wrapper {
    flex: 0 0 200px;
    max-width: 200px;
    padding-right: 40px;
}

@media (max-width: 767px) {
    .sub-nav-wrapper {
        display: none;
    }
}

.sub-content {
    flex-grow: 1;
    max-width: 1000px;
    border-left: 1px solid #dedcdf;
    padding-left: 50px;
    position: relative;
}

@media (max-width: 767px) {
    .sub-content {
        border: none;
        padding-left: 0;
    }
}

@media (max-width: 600px) {
    .sub-content {
        width: 100%;
    }
}

.ie .sub-wrapper {
    position: relative;
}

.ie .sub-content {
    max-width: 1000px;
    margin-left: 200px;
}

.ie .sub-nav-wrapper {
    width: 200px;
    position: absolute;
    left: 0;
    top: 0;
}

.hanja-hero {
    font-size: 3.5rem;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
    color: #D81F36;
}

@media (max-width: 600px) {
    .hanja-hero {
        width: 120px;
        height: 120px;
        line-height: 120px;
        font-size: 3rem;
    }
}

@media (max-width: 400px) {
    .hanja-hero {
        width: 70px;
        height: 70px;
        line-height: 70px;
        font-size: 1.5rem;
    }
}

.hire-circle {
    width: 150px;
    height: 150px;
    display: inline-block;
}

@media (max-width: 400px) {
    .hire-circle {
        width: 100px;
        height: 100px;
    }
}

.hire-circle-text {
    font-size: 20px;
}

@media (max-width: 400px) {
    .hire-circle-text {
        font-size: 16px;
    }
}

.hire-arrow {
    display: inline-block;
    position: relative;
    top: -70px;
}

@media (max-width: 400px) {
    .hire-arrow {
        top: -45px;
    }
}

.brochure-number {
    width: 55px;
    height: 55px;
    line-height: 55px;
    text-align: center;
    color: white;
}

.main-slider {
    position: relative;
    max-height: 800px;
    overflow: hidden;
}

@media (max-width: 1400px) {
    .main-slider {
        font-size: 14px;
        font-size: 0.875rem;
        line-height: 1.71429;
    }
}

@media (max-width: 850px) {
    .main-slider {
        font-size: 16px;
        font-size: 1rem;
        line-height: 1.5;
    }
}

@media (max-width: 400px) {
    .main-slider {
        font-size: 14px;
        font-size: 0.875rem;
        line-height: 1.71429;
    }
}

@media (max-width: 600px) {
    .main-slider:before {
        padding-bottom: 116.66667%;
    }
}

.main-slider .bx-wrapper, .main-slider .bx-viewport {
    height: 100% !important;
}

.main-slider__slide {
    background-repeat: no-repeat;
    background-size: cover;
    background-color: black;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    word-break: keep-all;
    padding-bottom: 81px;
}

@media (max-width: 1400px) {
    .main-slider__slide {
        padding-bottom: 61px;
    }
}


.main-slider__slide-inner {
    padding-left: 11.25%;
    padding-right: 23.75%;
    position:absolute;;
    left:50%;top:50%;transform:translate(-50%, -50%);
    width:100%;
}


@media (max-width: 600px) {
    .main-slider__slide-inner {
        padding-left: 8.88889%;
        padding-right: 8.88889%;
    }
}

.main-slider__title {
    font-size: 61px;
    font-size: 3.8125rem;
    line-height: 1.18033;
}

@media (max-width: 1400px) {
    .main-slider__title {
        font-size: 40px;
        font-size: 2.5rem;
        line-height: 1.2;
    }
}

@media (max-width: 1000px) {
    .main-slider__title {
        font-size: 36px;
        font-size: 2.25rem;
        line-height: 1.33333;
    }
}

@media (max-width: 850px) {
    .main-slider__title {
        font-size: 50px;
        font-size: 3.125rem;
        line-height: 1.44;
    }
}

@media (max-width: 600px) {
    .main-slider__title {
        font-size: 36px;
        font-size: 2.25rem;
        line-height: 1.33333;
    }
}

@media (max-width: 400px) {
    .main-slider__title {
        font-size: 28px;
        font-size: 1.75rem;
        line-height: 1.71429;
    }
}

.main-slider-button {
    text-align: center;
    font-size: 0;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.main-slider-button__button {
    font-size: 16px;
    margin: 0;
    width: 33.33333%;
    background-color: transparent;
    color: white;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-right: 1px solid rgba(255, 255, 255, 0.3);
    padding: 18px 0;
}

.main-slider-button__button:last-child {
    border-right: 0;
}

@media (max-width: 1400px) {
    .main-slider-button__button {
        padding: 13px 0;
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    .main-slider-button__button {
        padding: 13px 0;
        font-size: 12px;
    }
}

.main-slider-button__button.is-active {
    background-color: rgba(0, 0, 0, 0.7);
}

.ie8 .main-slider-button__button {
    background-color: transparent;
    border: 1px solid #5a5a5c;
}

.ie .main-slider__slide-inner {
    margin-top: 30%;
}

.main-investment-wrapper {
    background-image: url("/images/bg-investment-infomation.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position-y: 50%;
    position: relative;
}

@media (min-width: 53.1875em) and (max-width: 87.5525em) {
    .main-investment-mask {
        height: 100%;
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
    }
}

@media (max-width: 600px) {
    .main-investment-mask {
        background-color: rgba(0, 0, 0, 0.7);
        color: white;
    }
}

.main-investment-content {
    margin-bottom: 0;
}

@media (max-width: 500px) {
    .main-investment-content {
        padding-right: 48px;
        padding-left: 48px;
    }
}

.main-investment-button {
    position: absolute;
    right: 24px;
    bottom: 24px;
    width: 51px;
    height: 51px;
}

@media (min-width: 53.1875em) and (max-width: 62.5525em) {
    .main-investment-button {
        display: none;
    }
}

@media (max-width: 600px) {
    .main-investment-button {
        bottom: 50%;
        margin-bottom: -25px;
    }
}

/** VARIABLES
 *=================================== */
/** RESET AND LAYOUT
 *=================================== */
.bx-wrapper {
    position: relative;
    padding: 0;
    *zoom: 1;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
}

.bx-wrapper img {
    max-width: 100%;
    display: block;
}

.bxslider {
    margin: 0;
    padding: 0;
}

ul.bxslider {
    list-style: none;
}

.bx-viewport {
    /*fix other elements on the page moving (on Chrome) */
    -webkit-transform: translatez(0);
}

/** THEME
 *=================================== */
.bx-wrapper {
    background: #fff;
}

.bx-wrapper .bx-pager, .bx-wrapper .bx-controls-auto {
    position: absolute;
    bottom: -30px;
    width: 100%;
}

.bx-wrapper .bx-loading {
    min-height: 50px;
    background: url("/images/bx_loader.gif") center center no-repeat #ffffff;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
}

.bx-wrapper .bx-pager {
    text-align: center;
    font-size: 0.85em;
    font-weight: bold;
    color: #666;
    padding-top: 20px;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    text-indent: -9999px;
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    outline: 0;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    border: 2px solid #596c78;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover, .bx-wrapper .bx-pager.bx-default-pager a.active, .bx-wrapper .bx-pager.bx-default-pager a:focus {
    background: #596c78;
}

.bx-wrapper .bx-pager-item, .bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display: inline-block;
    vertical-align: bottom;
    *zoom: 1;
    *display: inline;
}

.bx-wrapper .bx-pager-item {
    font-size: 0;
    line-height: 0;
}

.bx-wrapper .bx-prev {
    left: 10px;
    background: url("/images/controls.png") no-repeat 0 -32px;
}

.bx-wrapper .bx-prev:hover, .bx-wrapper .bx-prev:focus {
    background-position: 0 0;
}

.bx-wrapper .bx-next {
    right: 10px;
    background: url("/images/controls.png") no-repeat -43px -32px;
}

.bx-wrapper .bx-next:hover, .bx-wrapper .bx-next:focus {
    background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
    display: none;
}

.bx-wrapper .bx-controls-auto {
    text-align: center;
}

.bx-wrapper .bx-controls-auto .bx-start {
    display: block;
    text-indent: -9999px;
    width: 10px;
    height: 11px;
    outline: 0;
    background: url("/images/controls.png") -86px -11px no-repeat;
    margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover, .bx-wrapper .bx-controls-auto .bx-start.active, .bx-wrapper .bx-controls-auto .bx-start:focus {
    background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
    display: block;
    text-indent: -9999px;
    width: 9px;
    height: 11px;
    outline: 0;
    background: url("/images/controls.png") -86px -44px no-repeat;
    margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover, .bx-wrapper .bx-controls-auto .bx-stop.active, .bx-wrapper .bx-controls-auto .bx-stop:focus {
    background-position: -86px -33px;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
    text-align: left;
    width: 80%;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
    right: 0;
    width: 35px;
}

.bx-wrapper .bx-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #666;
    background: rgba(80, 80, 80, 0.75);
    width: 100%;
}

.bx-wrapper .bx-caption span {
    color: #fff;
    font-family: Arial;
    display: block;
    font-size: 0.85em;
    padding: 10px;
}

/* LOADER */
/* PAGER */
/* DIRECTION CONTROLS (NEXT / PREV) */
/* AUTO CONTROLS (START / STOP) */
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
/* IMAGE CAPTIONS */
/*!
 * Slidebars - A jQuery Framework for Off-Canvas Menus and Sidebars
 * Version: 2.0.2
 * Url: http://www.adchsm.com/slidebars/
 * Author: Adam Charles Smith
 * Author url: http://www.adchsm.com/
 * License: MIT
 * License url: http://www.adchsm.com/slidebars/license/ */
/**
 * Box Model, Html & Body */
html, body, [canvas=container], [off-canvas] {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/**
 * Canvas */
[canvas] {
    z-index: 1;
}

[canvas=container] {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    position: relative;
    background-color: white;
    /* Basic background color, overwrite this in your own css. */
    -webkit-overflow-scrolling: touch;
    /* Enables momentum scrolling on iOS devices, may be removed by setting to 'auto' in your own CSS. */
}

[canvas=container]:before, [canvas=container]:after {
    clear: both;
    content: "";
    display: table;
}

/**
 * Off-Canavs */
[off-canvas] {
    display: none;
    position: fixed;
    overflow: hidden;
    overflow-y: auto;
    background-color: #364a57;
    /* Basic background color, overwrite this in your own css. */
    color: white;
    /* Basic colors, overwrite this in your own css. */
    -webkit-overflow-scrolling: touch;
    /* Enables momentum scrolling on iOS devices, may be removed by setting to 'auto' in your own CSS. */
}

[off-canvas*=top] {
    width: 100%;
    height: 240px;
    top: 0;
}

[off-canvas*=right] {
    width: 240px;
    height: 100%;
    top: 0;
    right: 0;
}

[off-canvas*=bottom] {
    width: 100%;
    height: 240px;
    bottom: 0;
}

[off-canvas*=left] {
    width: 240px;
    height: 100%;
    top: 0;
    left: 0;
}

[off-canvas*=reveal] {
    z-index: 0;
}

[off-canvas*=push] {
    z-index: 1;
}

[off-canvas*=overlay] {
    z-index: 9999;
}

[off-canvas*=shift] {
    z-index: 0;
}

/**
 * Animation */
[canvas], [off-canvas] {
    -webkit-transform: translate(0px, 0px);
    -ms-transform: translate(0px, 0px);
    transform: translate(0px, 0px);
    -webkit-transition: -webkit-transform 300ms;
    transition: transform 300ms;
    -webkit-backface-visibility: hidden;
    /* Prevents flickering, may be removed if experiencing problems with fixed background images in Chrome. */
}

[off-canvas*=shift][off-canvas*=top] {
    -webkit-transform: translate(0px, 50%);
    transform: translate(0px, 50%);
}

[off-canvas*=shift][off-canvas*=right] {
    -webkit-transform: translate(-50%, 0px);
    transform: translate(-50%, 0px);
}

[off-canvas*=shift][off-canvas*=bottom] {
    -webkit-transform: translate(0px, -50%);
    transform: translate(0px, -50%);
}

[off-canvas*=shift][off-canvas*=left] {
    -webkit-transform: translate(50%, 0px);
    transform: translate(50%, 0px);
}

/**
 * Print */
@media print {
    [canvas] {
        -webkit-transform: translate(0px, 0px) !important;
        -ms-transform: translate(0px, 0px) !important;
        transform: translate(0px, 0px) !important;
    }

    [off-canvas] {
        display: none !important;
    }
}

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

.cf:after {
    content: '';
    display: block;
    clear: both;
}

.fl {
    float: left;
}

.blind {
    visibility: hidden;
    width: 0;
    height: 0;
    font-size: 0;
}

/*global 탭*/
.mtabs {
    width: 100%;
    margin: 10px 0;
}

.mtabs a {
    display: block;
    text-align: center;
    font-size: 1rem;
    padding: 5px 0;
    word-break: break-all;
    line-height: 1.2em;
}

.mtabs a.on {
    border: 0;
    color: #022a5e;
}

.mtabs li {
    width: 12.5%;
    list-style: none;
}

/*global 탭 바*/
.tabs_bar {
    position: relative;
    width: 100%;
    border-bottom: 1px solid #e3e3e3;
}

.tabs_bar .bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 12.5%;
    height: 2px;
    background-color: #142d55;
}

/*global box들*/
.mtbox {
    padding: 45px 0;
}

.mtbox .gb_company h2 {
    margin-bottom: 20px;
    margin-top: 0;
!important;
}

.mtbox .gb_company table {
    margin-bottom: 20px;
}

/*global 테이블*/
.tb_info {
    width: 100%;
    box-sizing: border-box;
}

.tb_info tbody tr th.first,
.tb_info tbody tr td.first {
    border-top: 1px solid #222;
}

.tb_info tbody tr th,
.tb_info tbody tr td {
    padding: 11.5px 0;
    border: 1px solid #e3e3e3;
    line-height: 1.4em;
    font-size: 1rem;
}

.tb_info tbody tr th {
    background-color: #D81F36;
    color: #fff;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.4em;
    vertical-align: middle;
}

.tb_info tbody tr td {
    padding-left: 5%;
    padding-right: 5%;
    color: #555;
}

.tb_info.type02 tbody tr th.first,
.tb_info.type02 tbody tr td.first {
    border-top: 1px solid #555;
}

.length02 {
    width: 25%;
}

@media screen and (max-width: 768px) {

    .mtabs a {
        font-size: 13px;
    }

    .tb_info tbody tr td {
        font-size: 13px;
    }

    .tb_info tbody tr th {
        font-size: 13px;
    }

}

/*전장품*/

/*기업정보*/

.vision img {
    border: 1px solid #ddd;
}


/* o-arrow-top */
.o-arrow-top {
    position: relative;
}
.o-arrow-top:before {
    content: "▲";
    font-size: 10px;
    color: #344b9d;
    position: absolute;
    left: 50%;
    margin-left: -5px;
    margin-top: -5px;
}

/* c-enlarge-container */
.c-enlarge {
    position: relative;
}

.c-enlarge__button {
    position: absolute;
    right: 0;
    bottom: 0;
}

/* c-mask */
.c-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    z-index: 1;
    left: 0;
    top: 0;
}

/* c-enlarge-layer */
.c-enlarge-layer {
    position: fixed;
    max-width: 100%;
    max-height: 100%;
    left: 50%;
    top: 50%;
    z-index: 2;
}
/*제품>전장품>core*/
.core {
background-color:#f2f1f2;
padding:10px 15px;
margin-top:10px;
}
.product-core{margin-bottom:0 !important;}

.c-tab li a{line-height:1.2em; letter-spacing:-1px;}
.o-arrow-top:before{top:0;}
/* .c-tab.type01 {display:table;}
.c-tab.type01 li{display:table-cell;vertical-align:middle; width:16.6666%; padding:0;}
.c-tab.type01 li .c-tab__item{ line-height:1.2em; vertical-align:middle; text-align:center;}
.c-tab.type01 li:hover{background-color:#344b9d;} */

button{outline: none;}

.c-top-button {
    position: absolute;
    right: -120px;
    bottom: 100px;
    width: 60px;
    height: 60px;
}

@media screen and (max-width: 1500px) {
    .c-top-button {
        right: 0;
        bottom: 40px;
    }
}

.cf:after{clear:both; display:block; content:'';}

.client-imgs{
    width: 25%;
    height: 80px;
    line-height: 80px;
    float: left;
    border: 1px solid #e3e3e3;
    background-color: #fff;
    vertical-align: middle;
}

@media screen and (max-width: 850px){
	.client-imgs {height: 60px;  line-height: 60px;}
}
@media screen and (max-width: 930px){
	.client-imgs {height: 40px; line-height: 40px;}
}
@media screen and (max-width: 1100px){
	.client-imgs {height: 50px; line-height: 50px;}
}
@media screen and (max-width: 1300px){
	.client-imgs { height: 60px; line-height: 60px;}
}