/*
Theme Name: Spacious
Theme URI: http://themegrill.com/themes/spacious
Author: ThemeGrill
Author URI: http://themegrill.com
Description: Spacious is an incredibly spacious multipurpose responsive theme coded & designed with a lot of care and love. You can use it for your business, portfolio, blogging or any type of site. It has 4 page layouts, 2 page templates, 4 blog display types, 13 widgets areas, 5 custom widgets focusing on business template, awesome slider, primary color option to match your logo & website, boxed & wide layout, light & dark color skin, translation ready and many more. You can get free support in http://themegrill.com/support-forum/ and check the demo at http://demo.themegrill.com/spacious/.
Version: 1.4.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: one-column, two-columns, right-sidebar, left-sidebar, flexible-header, custom-header, custom-background, custom-menu, custom-colors, sticky-post, threaded-comments, translation-ready, featured-images, theme-options, footer-widgets, blog, e-commerce
Text Domain: spacious

Resetting and rebuilding styles have been helped along thanks to the fine work of
Eric Meyer http://meyerweb.com/eric/tools/css/reset/index.html
along with Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
and Blueprint http://www.blueprintcss.org/
*/

/* =Reset
-------------------------------------------------------------- */

/*
    폰트 추가
 */

@font-face {
    font-family: 'NanumBarunGothic';
    src: url(./fonts/NanumBarunGothic.woff) format('woff');
}

@font-face {
    font-family: 'NanumBarunGothicLight';
    src: url(./fonts/NanumBarunGothicLight.woff) format('woff');
}
@font-face {
    font-family: 'NanumBarunGothicUltraLight';
    src: url(./fonts/NanumBarunGothicUltraLight.woff) format('woff');
}
@font-face {
    font-family: 'NanumGothic';
    src: url(./fonts/NanumGothic.woff) format('woff');
}
@font-face {
    font-family: 'NanumGothicBold';
    src: url(./fonts/NanumGothicBold.woff) format('woff');
}
@font-face {
    font-family: 'AvantGardeITCTTDemi';
    src:url(./fonts/AvantGardeITCTTDemi.woff) format('woff'),
    url(./fonts/AvantGardeITCTTDemi.ttf) format('truetype');
}
@font-face {
    font-family: 'AvantGardeMdITCTTBold';
    src:url(./fonts/AvantGardeITCTTDemi.woff) format('woff'),
    url(./fonts/AvantGardeMdITCTTBold.ttf) format('truetype');
}
@font-face {
    font-family: 'HYGothic_C1_100';
    src:url(./fonts/HYGothic_C1_100.woff) format('woff'),
    url(./fonts/HYGothic_C1_100.ttf) format('truetype');
}
@font-face {
    font-family: 'HYGothic_C1_400';
    src:url(./fonts/HYGothic_C1_400.woff) format('woff'),
    url(./fonts/HYGothic_C1_400.ttf) format('truetype');
}
@font-face {
    font-family: 'HYGothic_C1_500';
    src:url(./fonts/HYGothic_C1_500.woff) format('woff'),
    url(./fonts/HYGothic_C1_500.ttf) format('truetype');
}
@font-face {
    font-family: 'HYGothic_C1_700';
    src:url(./fonts/HYGothic_C1_700.woff) format('woff'),
    url(./fonts/HYGothic_C1_700.ttf) format('truetype');
}
@font-face {
    font-family: 'HYGothic_C1_800';
    src:url(./fonts/HYGothic_C1_800.woff) format('woff'),
    url(./fonts/HYGothic_C1_800.ttf) format('truetype');
}


@font-face {
    font-family: 'HYSalon-Bold';
    src:url(./fonts/HYSalon-Bold.woff) format('woff'),
    url(./fonts/HYSalon-Bold.ttf) format('truetype');
}
@font-face {
    font-family: 'H2TBRB';
    src:url(./fonts/H2tbrB.woff) format('woff'),
    url(./fonts/H2TBRB.ttf) format('truetype');
}
@font-face {
    font-family: 'H2MJRL';
    src:url(./fonts/H2mjrL.woff) format('woff'),
    url(./fonts/H2MJRL.ttf) format('truetype');
}
@font-face {
    font-family: 'H2MKRB';
    src:url(./fonts/H2mkrB.woff) format('woff'),
    url(./fonts/H2MKRB.ttf) format('truetype');
}
@font-face {
    font-family: 'HYBongja';
    src:url(./fonts/HYBongja-Medium.woff) format('woff'),
    url(./fonts/HYBongja-Medium.ttf) format('truetype');
}
@font-face {
    font-family: 'HYToe';
    src:url(./fonts/HYToe-Medium.woff) format('woff'),
    url(./fonts/HYToe-Medium.ttf) format('truetype');
}
@font-face {
    font-family: 'HangultuelGothic';
    src: url(./fonts/HangultuelGothic.ttf) format('truetype');
}
@font-face {
    font-family: 'MDotum';
    src:url(./fonts/MDotum.woff) format('woff'),
    url(./fonts/MDotum.ttf) format('truetype');
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    border: 0;
    font: inherit;
    font-size: 100%;
    font-style: inherit;
    font-weight: inherit;
    margin: 0;
    outline: 0;
    padding: 0;
    vertical-align: baseline;
}
html {
    overflow-y: scroll; /* Keeps page centred in all browsers regardless of content height */
    -webkit-text-size-adjust: 100%; /* Prevents iOS text size adjust after orientation change, without disabling user zoom */
    -ms-text-size-adjust: 100%; /* www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ */
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section {
    display: block;
}
ol, ul {
    list-style: none;
}
table { /* tables still need 'cellspacing="0"' in the markup */
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0 0 1.5em;
    width: 100%;
}
th {
    font-weight: bold;
}
th, td {
    border: 1px solid #EAEAEA;
    padding: 6px 10px;
}
caption, th, td {
    text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
}
blockquote, q {
    quotes: "" "";
}
a:focus {
    outline: thin dotted;
}
a:hover,
a:active { /* Improves readability when focused and also mouse hovered in all browsers people.opera.com/patrickl/experiments/keyboard/test */
    outline: 0;
}
a img {
    border: 0;
}
a img:hover {
    opacity: 0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */
    box-shadow: #000 0 0 0;
}
embed, iframe, object {
    max-width: 100%;
}
button::-moz-focus-inner {
    border: 0;
    padding: 0;
    margin: 0;
}

/* =GLOBAL
----------------------------------------------- */
body,
button,
input,
select,
textarea {
    color: #666666;
    font: 16px 'Lato', sans-serif;
    line-height: 20px;
    word-wrap: break-word;
}
body {
    background: #eaeaea;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
    padding-bottom: 18px;
    color: #222222;
    font-weight: normal;
    font-family: 'Lato', sans-serif;
}
h1 { font-size: 30px; line-height: 36px; }
h2 { font-size: 28px; line-height: 34px; }
h3 { font-size: 26px; line-height: 32px; }
h4 { font-size: 24px; line-height: 30px; }
h5 { font-size: 22px; line-height: 28px; }
h6 { font-size: 19px; line-height: 25px; }
hr {
    border-color: #EAEAEA;
    border-style: solid none none;
    border-width: 1px 0 0;
    height: 0;
    margin: 30px 0;
}

/* =TEXT ELEMENTS
----------------------------------------------- */
p {
    line-height: 24px;
    margin-bottom: 15px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
}
strong {
    font-weight: bold;
}
cite, em, i {
    font-style: italic;
}
pre {
    background-color: #fff;
    margin-bottom: 20px;
    overflow: auto;
    padding: 20px;
    border: 1px solid #EAEAEA;
}
pre, code, kbd, var, samp, tt {
    font-family:"Courier 10 Pitch",Courier,monospace;
    font-size: 14px;
    line-height: 19px;
    white-space: pre-wrap;
}
abbr, acronym, dfn {
    border-bottom: 1px dotted #666666;
    cursor: help;
}
address {
    display: block;
    font-style: italic;
    margin: 0 0 15px;
}
ins {
    background: #F8F8F8;
}
table {
    margin: 0 0 1.5em;
    width: 100%;
}

/* =SUPERCRIPT AND SUBSCRIPT
----------------------------------------------- */
sup, sub {
    font-size: 10px;
    height: 0;
    line-height: 1;
    position: relative;
    vertical-align: baseline;
}
sup {
    bottom: 1ex;
}
sub {
    top: .5ex;
}

dl {
    margin-bottom: 24px;
    font-size: 16px;
}
dt {
    font-weight: bold;
    margin-bottom: 5px;
}
dd {
    margin-bottom: 24px;
}

ul,
ol {
    list-style: none;
}
ol {
    list-style: decimal;
}
li > ul,
li > ol {
    margin: 0 0 0 10px;
}

/* =BLOCKQUOTE
----------------------------------------------- */
blockquote {
    font-style: italic;
    font-weight: normal;
    padding: 20px;
    border: 1px solid #EAEAEA;
    border-left: 3px solid #0FBE7C;
    margin-bottom: 20px;
}
blockquote em, blockquote i, blockquote cite {
    font-style: normal;
}
blockquote cite {
    color: #666666;
    font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 300;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

/* =FORMS
----------------------------------------------- */
input, textarea {
    -webkit-border-radius: 0px;
}
input[type="text"],
input[type="email"],
input[type="search"],
input[type="password"],
textarea {
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
input[type="text"],
input[type="email"],
input[type="password"],
textarea {
    padding: 1%;
    border: 1px solid #EAEAEA;
    line-height: 20px;
    width: 98%;
    margin: 0 0 30px;
    background-color: #F8F8F8;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
textarea:focus {
    border: 1px solid #EAEAEA;
}
input.s {
    width: 60%;
    padding: 4px 10px;
    height: 22px;
    color: #666666;
    background-color: #FFFFFF;
    margin: 0;
    border: 1px solid #EAEAEA;
}
input.s:focus {
    padding-left: 10px;
    border-color: #EAEAEA;
    text-indent: 0;
}
.spacious-button,
input[type="reset"],
input[type="button"],
input[type="submit"],
button {
    color: #FFFFFF;
    display:inline-block;
    margin-bottom: 30px;
    padding: 5px 25px;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
    background-color: #0FBE7C;
    border: 0px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    font-size: 16px;
}
.spacious-button:hover,
input[type="reset"]:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover {
    -webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.6);
    box-shadow:0 0 2px rgba(0, 0, 0, 0.6);
}
.previous a,
.next a {
    color: #666666;
    padding: 5px 25px;
    cursor: pointer;
    border: 1px solid #EAEAEA;
    font-size: 16px;
}
.previous a:hover,
.next a:hover {
    color: #0FBE7C;
}
input[type="reset"]:active,
input[type="button"]:active,
input[type="submit"]:active {
    -webkit-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
}

/* =LINKS
----------------------------------------------- */
a {
    color: #0FBE7C;
    text-decoration: none;
}
a:focus, a:active, a:hover {
    text-decoration: none;
}

/* =IMAGES
----------------------------------------------- */
figure {
    margin: 0;
    text-align: center;
}
img {
    max-width:100%;
    height:auto;
    vertical-align:top;
    margin-bottom: 18px;
}
.entry-content img, .comment-content img, .widget img {
    max-width: 100%; /* Fluid images for posts, comments, and widgets */
}
img[class*="align"],
img[class*="wp-image-"],
img[class*="attachment-"] {

}
img.size-full, img.size-large {
    max-width: 100%;
    height: auto;
}
.entry-content img.wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}
img.alignleft, img.alignright, img.aligncenter {
    margin-bottom: 1.625em;
}
p img {

}
img#wpstats {
    display: none;
}

/* =CLEARFIX
----------------------------------------------- */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}
.clearfix {
    display: inline-block;
}
* html .clearfix {
    height:1%;
}
.clearfix {
    display: block;
}
.tg-after-three-blocks-clearfix {
    clear: both;
}

/* =ALIGNMENT
----------------------------------------------- */
.alignleft {
    display: inline;
    float: left;
    margin-right: 30px;
}
.alignright {
    display: inline;
    float: right;
    margin-left: 30px;
}
.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/*****************************************************************/
/*****************************************************************/

/* =BODY
----------------------------------------------- */
body {
    padding-top: 30px;
    padding-bottom: 30px;
}
#page {
    max-width: 1268px;
    margin: 0 auto;
    background-color: #FFFFFF;
    box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
.wide-978, .wide-1218 {
    padding-top: 0;
    padding-bottom: 0;
}
.wide-1218 #page {
    max-width: 100%;
}
.narrow-978 #page {
    max-width: 1038px;
}
.wide-978 #page {
    max-width: 100%;
}
.wide-978 #page {
    padding-top: 0;
    padding-bottom: 0;
}
.inner-wrap {
    margin: 0 auto;
    max-width: 1218px;
}
.wide-1218 .inner-wrap {
    max-width: 1218px;
}
.narrow-978 .inner-wrap {
    max-width: 978px;
}
.wide-978 .inner-wrap {
    max-width: 978px;
}

/* =HEADER
----------------------------------------------- */
#masthead {
}
#header-meta {
    background-color: #F8F8F8;
    border-bottom: 1px solid #EAEAEA;
}
#header-text-nav-container {
    border-bottom: 1px solid #EAEAEA;
}
#header-text-nav-wrap {
    padding-top: 15px;
    padding-bottom: 15px;
}
#header-left-section {
    float: left;
    margin-right: 25px;
}
#header-logo-image {
    float: left;
    padding: 0 20px 0 0;
    max-width: 100%;
}
#header-logo-image img {
    margin-bottom: 0px;
}
#header-text {
    float: left;
    padding: 10px 20px 0 0;
}
#site-title a {
    color: #444444;
    font-size: 36px;
}
h1#site-title {
    padding-bottom: 5px;
}
h3#site-title {
    font-size: 30px;
    line-height: 36px;
    margin-bottom: 0;
    padding-bottom: 5px;
}
#site-title a:hover {
    color: #0FBE7C;
}
#site-description {
    line-height: 24px;
    font-size: 16px;
    padding-bottom: 0;
    color: #666666;
}
#header-right-section {
    float: right;
}
#header-right-sidebar {
    overflow: hidden;
}
#header-right-section .widget {
    text-align: right;
    padding-top: 10px;
}
#header-right-section .widget h3 {
    padding-bottom: 5px;
}

.header-image {
    margin-bottom: 0;
    border-bottom: 1px solid #EAEAEA;
    width: 100%;
}

/* =SEARCH WIDGET
----------------------------------------------- */
#masthead .search-wrap input.s {
    width: 130px;
}
.search-wrap button {
    border-radius: 0;
    line-height: 32px;
    margin-bottom: 0;
    margin-left: -6px;
    padding: 0;
}
.search-icon:before {
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font: normal 18px/1 'Genericons';
    content: '\f400';
    vertical-align: middle;
    padding: 0 7px;
}


/* =NAVIGATION
----------------------------------------------- */
nav li > ul,
nav li > ol {
    margin: 0;
    list-style: none;
}
.main-navigation {
    float: right;
    padding-top: 5px;
}
.main-navigation li {
    float: left;
    position: relative;
    padding: 0 0 0 25px;
    font-family: 'Lato', sans-serif;
}
.main-navigation ul li a {
    font-size: 16px;
}
.main-navigation li.default-menu,
li.default-menu {
    display: none;
}
.main-navigation a {
    color: #444444;
    display: block;
    float: left;
    padding: 16px 0 0;
    height: 30px;
}
.main-navigation a:hover,
.main-navigation ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor a,
.main-navigation ul li.current-menu-ancestor a,
.main-navigation ul li.current_page_item a,
.main-navigation ul li:hover > a {
    color: #0FBE7C;
}

/* =DROP DOWN
----------------------------------------------- */
.main-navigation ul li ul,
.main-navigation ul li:hover ul ul,
.main-navigation ul ul li:hover ul ul,
.main-navigation ul ul ul li:hover ul ul,
.main-navigation ul ul ul ul li:hover ul ul {
    display:none;
    z-index: 9999;
}
.main-navigation ul li:hover ul,
.main-navigation ul ul li:hover ul,
.main-navigation ul ul ul li:hover ul,
.main-navigation ul ul ul ul li:hover ul,
.main-navigation ul ul ul ul ul li:hover ul {
    display:block;
}
.main-navigation ul li ul {
    position: absolute;
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
    border-top: 1px solid #0FBE7C;
    top: 45px;
    left: 25px;
    width: 150px;
}
.main-navigation ul li ul li {
    float: none;
    border-bottom: 1px solid #EAEAEA;
    padding: 0;
}
.main-navigation ul li ul li a,
.main-navigation ul li.current-menu-item ul li a,
.main-navigation ul li ul li.current-menu-item a,
.main-navigation ul li.current_page_ancestor ul li a,
.main-navigation ul li.current-menu-ancestor ul li a,
.main-navigation ul li.current_page_item ul li a {
    float: none;
    line-height: 21px;
    font-size: 13px;
    font-weight: normal;
    height: 100%;
    padding: 6px 10px;
    color: #666666;
}
.main-navigation ul li ul li a:hover, .main-navigation ul li ul li:hover > a, .main-navigation ul li.current-menu-item ul li a:hover {
    background: none repeat scroll 0 0 rgba(255, 255, 255, 1);
    color: #0FBE7C;
}
.main-navigation ul li ul li ul {
    left: 150px;
    top: -1px;
}
.main-navigation select {
    display: none;
}

/* =SMALL MENU
----------------------------------------------- */
.menu-toggle {
    display: none;
    cursor: pointer;
}
.site-header .menu-toggle {
    background: #3A3A3A;
    color: #fff;
    font-size: 20px;
    font-weight: 300;
    padding: 5px 22px;
    margin: 0;
    text-align: center;
}
.site-header .menu-toggle:hover {
    background: #0FBE7C;
}
.site-header .menu-toggle:before {
    content: '\2261';
    margin-right: 10px;
}
.main-small-navigation {
    float: none;
    padding-top: 0;
    background-color: #000000;
    margin-top: 5px;
}
.main-small-navigation ul {
    margin: 0;
    list-style: none;
}
.main-small-navigation a {
    display: block;
    color: #FFFFFF;
    padding: 10px 40px;
    text-decoration: none;
}
.main-small-navigation li {
    background: #3A3A3A;
}
.main-small-navigation li:hover {
    background: #0FBE7C;
}
.main-small-navigation ul ul a {
    padding-left: 60px;
}
.main-small-navigation ul ul ul a {
    padding-left: 80px;
}
.main-small-navigation ul > .current_page_item,
.main-small-navigation ul > .current-menu-item {
    background: #0FBE7C;
}

/* =SECONDARY MENUS
----------------------------------------------- */
.small-menu {
    float: right;
}
.small-menu li {
    float: left;
    position: relative;
    font-family: 'Lato', sans-serif;
}
.small-menu li.default-menu,
li.default-menu {
    display: none;
}
.small-menu a {
    color: #666666;
    display: block;
    float: left;
    font-size: 10px;
    height: 21px;
    padding: 5px 0 0 16px;
    font-size: 12px;
}
.small-menu a:hover,
.small-menu ul li.current-menu-item a,
.small-menu ul li.current_page_ancestor a,
.small-menu ul li.current-menu-ancestor a,
.small-menu ul li.current_page_item a,
.small-menu ul li:hover > a {
    color: #0FBE7C;
}

/* =FEATURED SLIDER
----------------------------------------------- */
#featured-slider {
    border-bottom: 1px solid #EAEAEA;
}
#featured-slider,
#featured-slider .slider-cycle {
    position: relative;
}
#featured-slider .slides{
    width: 100%;
}
.wide-978 #featured-slider .slider-cycle,
.wide-1218 #featured-slider .slider-cycle {
    max-width: 1600px;
    margin: 0 auto;
}
#featured-slider .displayblock {
    display: block;
}
#featured-slider .displaynone {
    display: none;
}
.ie8 #featured-slider .entry-container {
    top: 25%;
}
#featured-slider .entry-container {
    top: 50%;
    -ms-transform: translateY(-50%); /* IE 9 */
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    position: absolute;
    left: 5%;
    max-width: 40%;
}
.wide-978 #featured-slider .entry-container {
    left: 13.8%;
}
.wide-1218 #featured-slider .entry-container {
    left: 4.9%;
}
#featured-slider .entry-description-container {
    background-color: #555555;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 10px 15px;
    padding: 1rem 1.5rem;
}
#featured-slider img {
    margin-bottom: 0px;
}
#featured-slider .slider-title-head {
    display: inline-block;
    left: 0;
    margin-bottom: 5px;
    margin-bottom: 0.5rem;
}
#featured-slider .entry-title {
    padding: 0;
}
.slider-title-head .entry-title a {
    color: #FFFFFF;
    text-decoration: none;
}
#featured-slider .entry-title span {
    color: #FFFFFF;
    display: block;
    font-size: 26px;
}
#featured-slider .entry-content {
    color: #FFFFFF;
    padding-top: 5px;
    padding-top: 0.5rem;
}
#featured-slider .entry-content p {
    margin: 0;
    padding: 0;
}
#featured-slider .slider-read-more-button {
    background-color: #0FBE7C;
    color: #FFFFFF;
    text-align: center;
    font-family: 'Lato',sans-serif;
    padding: 10px 15px;
    padding: 1rem 1.5rem;
    float: left;
    margin-top: 15px;
    font-size: 20px;
}
#featured-slider .slider-read-more-button:hover {
    background-color: #666666;
}

/* =SLIDER CONTROLLERS
----------------------------------------------- */
#controllers {
    text-align:center;
    line-height:0;
    position: absolute;
    width: 100%;
    bottom: 15px;
    z-index: 999;
}
#controllers a {
    width: 18px;
    height: 6px;
    margin: 0 4px;
    overflow:hidden;
    display:inline-block;
    background-color: #FFFFFF;
    color: #FFFFFF;
}
#controllers a:hover, #controllers a.active {
    background-color: #0FBE7C;
    color: #0FBE7C;
}

/* =PAGE HEADER TITLE
----------------------------------------------- */
.header-post-title-container {
    border-bottom: 1px solid #EAEAEA;
    padding: 20px 0;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.05) inset;
}
.header-post-title-container .post-title-wrapper {
    float: left;
    max-width: 100%;
    padding-right: 30px;
}
.header-post-title-class {
    font-size: 22px;
    padding-bottom: 0;
    line-height: 36px;
}

/* =BREADCRUMB NAVXT PLUGIN SUPPORT
----------------------------------------------- */
.breadcrumb {
    float: right;
    text-align: right;
    margin-top: 8px;
    margin-bottom: 2px;
    font-size: 12px;
}
.breadcrumb {
    color: #666666;
}
.breadcrumb a {
    color: #666666;
}
.breadcrumb a:hover {
    color: #0FBE7C;
}

/* =CONTENT
----------------------------------------------- */
.sticky {
}
.extra-hatom-entry-title {
    display: none;
}
#main {
    padding: 40px 0 10px 0;
}
.widget_service_block {
    margin-bottom: 30px;
    padding-top: 30px;
}
.widget_service_block .widget-title {
    font-size: 22px;
    padding-bottom: 10px;
}
.widget_service_block p {
    padding-bottom: 0;
}
.widget_service_block .more-link-wrap {
    text-align: center;
}
.widget_service_block a.more-link:hover, .widget_featured_single_post a.read-more:hover {
    text-decoration: underline;
}
.widget-title a {
    color: #444444;
}
.tg-one-half .widget-title a:hover,
.tg-one-third .widget-title a:hover,
.tg-one-fourth .widget-title a:hover {
    color: #0FBE7C;
}
.tg-one-half p,
.tg-one-third p,
.tg-one-fourth p {
    text-align: center;
}
.tg-one-half .service-image,
.tg-one-third .service-image,
.tg-one-fourth .service-image {
    text-align: center;
}
.tg-one-half .widget-title,
.tg-one-third .widget-title,
.tg-one-fourth .widget-title {
    text-align: center;
}
.tg-one-third {
    float: left;
    width: 28.407225%;
    margin: 0 2.46305419%;
    padding: 0px 0px 30px;
}
.tg-one-fourth {
    float: left;
    /*width: 23.1527094%;*/
    width: 12.1527094%;
    margin: 0 2.46305419% 0 0;
    padding: 0px 0px 30px;
}
.tg-one-fourth-last {
    margin: 0px;
}
.tg-one-half {
    float: left;
    width: 48.7684729%;
    margin: 0 2.46305419% 0 0;
    padding: 0px 0px 30px;
}
.tg-one-half-last {
    float: right;
    margin: 0px;
}
.widget_recent_work {
    margin-bottom: 20px;
}
.widget_recent_work img {
    margin-bottom: 0px;
}
.widget_recent_work .tg-one-half .widget-title,
.widget_recent_work .tg-one-third .widget-title,
.widget_recent_work .tg-one-fourth .widget-title {
    font-size: 22px;
    padding-bottom: 8px;
    text-align: left;
}
.widget_recent_work .tg-one-half p,
.widget_recent_work .tg-one-third p,
.widget_recent_work .tg-one-fourth p {
    text-align: left;
}
.widget_recent_work .tg-one-half .service-image,
.widget_recent_work .tg-one-third .service-image,
.widget_recent_work .tg-one-fourth .service-image {
    text-align: center;
    padding-bottom: 0;
}
.widget_featured_single_post {
    padding-bottom: 30px;
}
.widget_featured_single_post .widget-title {
    font-size: 22px;
}
.widget_featured_single_post .widget-title,
.widget_featured_single_post p,
.widget_featured_single_post .service-image {
    text-align: left;
}
.widget_featured_single_post .service-image {
    padding-bottom: 0px;
}
.widget_featured_post {
    margin-bottom: 20px;
}
.widget_featured_post .main-title {
    font-size: 24px;
    padding-bottom: 8px;
}
.container-featured-widget-head {
    padding-top: 10px;
    padding-bottom: 15px;
}
.widget_featured_post .tg-one-half .widget-title,
.widget_featured_post .tg-one-third .widget-title,
.widget_featured_post .tg-one-fourth .widget-title {
    text-align: left;
    font-size: 20px;
    padding-bottom: 8px;
    line-height: 22px;
}
.widget_featured_post .tg-one-half p,
.widget_featured_post .tg-one-third p,
.widget_featured_post .tg-one-fourth p {
    text-align: left;
}
.widget_featured_post .meta {
    font-size: 12px;
    padding: 3px;
    font-family: 'Lato', sans-serif;
}
.wide-978 .widget_featured_post .meta,
.narrow-978 .widget_featured_post .meta {
    font-size: 11px;
}

/* =META
----------------------------------------------- */
.meta {
    border-bottom: 1px dashed #EAEAEA;
    border-top: 1px dashed #EAEAEA;
    padding: 5px;
    font-size: 15px;
}
.meta li:first-child {
    border-left: 0 none;
    padding-left: 0 !important;
}
.meta li {
    border-left: 1px solid #EAEAEA;
    float: left;
    padding: 0 6px 0 6px !important;
    border-bottom: none !important;
}
.meta li:last-child {
    float: right;
    border-left: 0 none;
    padding-right: 0px !important;
}
.main-title {
    text-align: center;
    text-transform: uppercase;
}
.main-description {
    text-align: center;
}

/* =NAVIGATION
----------------------------------------------- */
.default-wp-page .previous {
    float: left;
    margin-bottom: 30px;
}
.default-wp-page .next {
    float: right;
    margin-bottom: 30px;
}
.wp-pagenavi {
    text-align: center;
}
#content .wp-pagenavi .page {
    padding-bottom: 3px;
}

/* =PAGINATION
----------------------------------------------- */
.pagination {
    margin: 15px 0;
}
.pagination span {
    padding: 2px 5px;
    border: 1px solid #EAEAEA;
    background-color: #0FBE7C;
    color: #FFFFFF;
}
.pagination a span {
    background-color: #FFFFFF;
    color: #666666;
}
.pagination a span:hover {
    color: #0FBE7C;
    border-color: #0FBE7C;
    text-decoration: none;
}

/* =TESTIMONIAL WIDGET
----------------------------------------------- */
.widget_testimonial {
    margin-bottom: 30px;
}
.widget_testimonial .widget-title {
    font-size: 22px;
    text-align: left;
}
.widget_testimonial .testimonial-icon:before {
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font: normal 22px/1 'Genericons';
    vertical-align: top;
    content: '\f106';
    width: 25px;
    height: 19px;
    float: left;
    margin-right: 3.06%;
    color: #0FBE7C;
    transform: rotate(180deg);
}
.widget_testimonial .testimonial-post {
    padding: 20px;
    border-width: 2px 1px 1px 1px;
    border-style: solid dashed dashed dashed;
    border-color: #0FBE7C #EAEAEA #EAEAEA #EAEAEA;
    font-style: italic;
    margin-bottom: 15px;
    display: block;
    overflow: hidden;
}
.widget_testimonial .testimonial-post p {
    margin-bottom: 0px;
}
.widget_testimonial .testimonial-author {
    text-align: right;
    clear: both;
    font-family: 'Lato', sans-serif;
    font-size: 12px;
}
.widget_testimonial .testimonial-author span {
    font-size: 16px;
    color: #666666;
}

/* =CALL TO ACTION WIDGET
----------------------------------------------- */
.widget_call_to_action {
    margin-bottom: 60px;
}
.call-to-action-content-wrapper {
    border-width: 1px 1px 1px 3px;
    border-style: dashed dashed dashed solid;
    border-color: #EAEAEA #EAEAEA #EAEAEA #0FBE7C;
    padding: 20px 3.85878489% 20px 3.69458128%;
    background-color: #F8F8F8;
}
.call-to-action-content {
    width: 69.5187166%;
    float: left;
}
.call-to-action-content h3 {
    padding-bottom: 0;
    font-size: 24px;
}
.call-to-action-content p {
    padding-bottom: 0;
    margin-bottom: 0;
}
.call-to-action-button {
    float: right;
    background-color: #0FBE7C;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    color: #FFFFFF;
    font-size: 22px;
    line-height: 40px;
    text-align: center;
    font-family: 'Lato',sans-serif;
    padding: 5px 3.28407225%;
    margin-top: 4px;
}
.call-to-action-button:hover {
    -webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.6);
    box-shadow:0 0 2px rgba(0, 0, 0, 0.6);
}

/* =MEDIA
----------------------------------------------- */
.wp-caption {
    border: 1px solid #ccc;
    margin-bottom: 1.5rem;
    max-width: 100%;
}
.wp-caption img[class*="wp-image-"] {
    display: block;
    margin: 1.2% auto 0;
    max-width: 98%;
}
.wp-caption-text {
    text-align: center;
}
.wp-caption .wp-caption-text {
    margin: 0.8075rem 0;
}
.gallery-caption {
}

/* =WORDPRESS GALLERY SUPPORT
----------------------------------------------- */
.gallery {
    margin: 0 auto 15px;
}
.gallery-item {
    display: inline-block;
    padding: 15px 2%;
    text-align: center;
    vertical-align: top;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.gallery-columns-3 .gallery-item,
.gallery-columns-4 .gallery-item,
.gallery-columns-5 .gallery-item {
    padding: 15px 1%;
}
.gallery-columns-6 .gallery-item,
.gallery-columns-7 .gallery-item,
.gallery-columns-8 .gallery-item,
.gallery-columns-9 .gallery-item {
    padding: 10px 0.5%;
}
.gallery-columns-2 .gallery-item { width:50%; }
.gallery-columns-3 .gallery-item { width:33.33%; }
.gallery-columns-4 .gallery-item { width:25%; }
.gallery-columns-5 .gallery-item { width:20%; }
.gallery-columns-6 .gallery-item { width:16.66%; }
.gallery-columns-7 .gallery-item { width:14.28%; }
.gallery-columns-8 .gallery-item { width:12.5%; }
.gallery-columns-9 .gallery-item { width:11.11%; }
.gallery-icon img {
    margin: 0 auto;
}
.gallery .gallery-caption {
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
}

/* =COMMENTS
----------------------------------------------- */
#comments {
    background-color: #FFFFFF;
}
.comment-content a {
    word-wrap: break-word;
}
.bypostauthor {
}
#comments h1,
#comments h2,
#comments h3,
#comments h4,
#comments h5,
#comments h6 {
    margin-bottom: 1rem;
}
#comments h2.comments-title,
#comments h3.comments-title  {
    margin-bottom: 10px;
    font-size: 28px;
}
.avatar {
    border-radius: 50%;
    float: left;
}
.comments-area article header {
    margin: 0 0 10px;
    overflow: hidden;
    position: relative;
}
.comments-area .comment-edit-link,
.comments-area .comment-permalink,
.comments-area .comment-date-time,
.comments-area .comment-author-link {
    display: block;
    margin-left: 100px;
    color: #999999;
}
#content .comments-area article header cite a:hover,
#content .comments-area a.comment-edit-link:hover,
#content .comments-area a.comment-permalink:hover {
    color: #0FBE7C;
}
.comments-area .comment-author-link a {
    color: #999999;
}
.comments-area .comment-author-link a:hover {
    color: #0FBE7C;
}
.comments-area .comment-author-link span {
    margin-left: 10px;
    padding: 0 5px;
    background-color: #0FBE7C;
    color: #FFFFFF;
    border-radius: 3px;
}
.comments-area article header .comment-author-link:before,
.comments-area article header .comment-edit-link:before,
.comments-area article header .comment-permalink:before,
.comments-area article header .comment-date-time:before {
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font: normal 22px/1 'Genericons';
    vertical-align: top;
}
.comments-area article header .comment-author-link:before { content: '\f304'; }
.comments-area article header .comment-edit-link:before { content: '\f411'; }
.comments-area article header .comment-permalink:before { content: '\f107'; }
.comments-area article header .comment-date-time:before { content: '\f307'; }
.comment-content {
    padding: 2rem;
    background-color: #F8F8F8;
    border: 1px solid #EAEAEA;
}
.comment {
    margin-bottom: 20px;
}
.comment ul, .comment ol {
    margin: 0 0 20px 20px;
}
.comment ul {
    list-style: square outside none;
}
.comment .comment-reply-link {
    float: right;
    color: #999999;
}
.comment .comment-reply-link:hover {
    color: #0FBE7C;
}
.comment .comment-reply-link:before {
    content: '\f412';
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font: normal 22px/1 'Genericons';
    vertical-align: top;
}
.comment-list {
    margin-bottom: 34px;
    margin-bottom: 3.4rem;
}
.comment-list .children {
    margin-left: 20px;
}
.comment-list, .comment-list .children {
    list-style-type: none;
    padding: 0;
}
.screen-reader-text { display: none; }
.nav-previous,
.nav-next {
    margin-bottom: 15px;
}
.nav-previous a,
.nav-next a {
    color: #666666;
    padding: 5px 25px;
    cursor: pointer;
    border: 1px solid #EAEAEA;
    font-size: 16px;
}
.nav-previous a:hover,
.nav-next a:hover {
    color: #0FBE7C;
}

/* =COMMENT FORM
----------------------------------------------- */
#respond {
}
#respond h3#reply-title {
    line-height: 1.5;
}
#respond h3#reply-title #cancel-comment-reply-link {
    margin-left: 10px;
    margin-left: 1rem;
    font-weight: normal;
    font-size: 16px;
    font-size: 1.6rem;
}
#respond form {
    margin: 24px 0;
    margin: 2.4rem 0;
}
#respond form p {
    margin: 11px 0;
    margin: 1.1rem 0;
}
#respond form p.logged-in-as {
    margin-bottom: 16px;
    margin-bottom: 1.6rem;
}
#respond form label {
    display: block;
    line-height: 1.5;
}
#respond form input[type="text"],
#respond form textarea {
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 16px;
    line-height: 1.5;
    padding: 10px;
    width: 100%;
}
#respond form p.form-allowed-tags {
    margin: 0;
    font-size: 15px;
    font-size: 1.5rem;
    line-height: 1.5;
    color: #5e5e5e;
}
.required {
    color: red;
}

/* =WIDGETS
----------------------------------------------- */
#secondary .widget ul li, #colophon .widget ul li {
    line-height: 1.5;
    border-bottom: 1px solid #EAEAEA;
    padding: 5px 0;
}
#colophon .widget ul li {
    border-bottom: 1px solid #444444;
}
#secondary .widget ul li li, #colophon .widget ul li li {
    border-bottom: none;
}
#secondary .widget ul ul, #colophon .widget ul ul {
    padding-left: 10px;
}
.widget select {
    border: 1px solid #DDDDDD;
    color: #666666;
    padding: 2px;
    width: 60%;
}
#secondary h3.widget-title {
    font-size: 22px;
    line-height: 32px;
    padding-bottom: 15px;
}
#secondary .widget, .error-404 .widget {
    margin-bottom: 35px;
    font-size: 16px;
}
#secondary a:hover {
    text-decoration: underline;
}
.error-404 {
    padding-bottom: 20px;
    text-align: center;
}
.error-404 .page-title {
    font-size: 30px;
    line-height: 36px;
}
.error-404 input.s {
    width: 50%;
}

/* =CALENDAR WIDGET
----------------------------------------------- */
#wp-calendar {
}
#wp-calendar th,
#wp-calendar td,
#wp-calendar caption {
    text-align: left;
    padding-bottom: 10px;
}
#wp-calendar #today {
    color: #0FBE7C;
}
#wp-calendar caption {
    text-align: center;
}
#wp-calendar #next {
    padding-right: 35px;
    text-align: right;
}
.widget_calendar #wp-calendar th {
    font-weight: 600;
}
.widget-title span {
    border-bottom: 2px solid #0FBE7C;
    padding-bottom: 5px;
}
#colophon #wp-calendar th,
#colophon #wp-calendar td {
    border: 1px solid #444444;
    padding: 3px 2px 3px 8px;
}
.widget th, .widget td {
    padding: 1px 1px 1px 2px;
}

/* =FOOTER WIDGET AREA
----------------------------------------------- */
.footer-widgets-wrapper {
    background-color: #333333;
    border-top: 1px solid #EAEAEA;
}
.footer-widgets-area {
    padding-top: 30px;
    padding-bottom: 10px;
    color: #999999;
}
.footer-widgets-area .tg-one-fourth .widget-title {
    text-align: left;
}
.footer-widgets-area h3.widget-title {
    color: #D5D5D5;
}
.footer-widgets-area .tg-one-fourth p {
    text-align: left;
    color: #999999;
}
.footer-widgets-area a {
    color: #D5D5D5 !important;
}
.footer-widgets-area a:hover {
    color: #0FBE7C !important;
}
#colophon .widget {
    padding-bottom: 25px;
}
#colophon .widget-title {
    font-size: 22px;
    line-height: 32px;
}
#colophon, #colophon p {
    font-size: 14px;
    line-height: 18px;
}

/* =FOOTER SOCKET AREA
----------------------------------------------- */
.footer-socket-wrapper {
    padding: 10px 0px;
    background-color: #F8F8F8;
    border-top: 1px solid #EAEAEA;
}
.footer-socket-area {
    width: 100%;
}
.footer-socket-wrapper .copyright {
    color: #666666;
    max-width: 50%;
    float: left;
    font-size: 12px;
}
.footer-socket-wrapper .copyright a {
    color: #666666;
}
.footer-socket-wrapper .copyright a:hover {
    color: #0FBE7C;
}
.footer-socket-wrapper .small-menu {
    float: right;
}
.footer-socket-wrapper .small-menu a {
    padding-top: 0;
}
.footer-socket-wrapper .small-menu ul li ul {
    top: 21px;
}

/* =SCROLL UP
----------------------------------------------- */
a#scroll-up {
    bottom: 20px;
    position: fixed;
    right: 20px;
    display: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font: normal 26px/1 'Genericons';
    vertical-align: top;
    color: #FFFFFF;
    background-color: #0FBE7C;
    opacity: 0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
    border-radius: 3px;
    padding: 6px;
}
a#scroll-up:before {
    content: '\f432';
}
a#scroll-up:hover {
    opacity: 1;
    filter:alpha(opacity=100); /* For IE8 and earlier */
}

/* =READ MORE LINK
----------------------------------------------- */
.read-more, .more-link {
    font-size: 14px;
    color: #0FBE7C;
    font-family: 'Lato', sans-serif;
}

/* =PRIMARY AND SECONDARY CONTENT AREA
----------------------------------------------- */
#primary {
    float: left;
    width: 61.5763547%;
}
#secondary {
    float: right;
    width: 34.4827586%;
}
.wide-978 #primary, .narrow-978 #primary {
    width: 65.5763547%;
}
.wide-978 #secondary, .narrow-978 #secondary {
    width: 30.4827586%;
}

/* =LEFT SIDEBAR CONTENT LAYOUT
-------------------------------------------------------------- */
.left-sidebar #primary {
    float: right;
}
.left-sidebar #secondary {
    float: left;
}

/* =NO SIDEBAR CONTENT LAYOUT
-------------------------------------------------------------- */
.no-sidebar #primary {
    float: none;
    margin: 0 auto;
}
.no-sidebar-full-width #primary {
    width: 100%;
}
.no-sidebar #secondary,
.no-sidebar-full-width #secondary {
    display: none;
}

/* =POST CONTENT
----------------------------------------------- */
#content .post, #content .page {
    padding-bottom: 45px;
}
.single #content .post {
    padding-bottom: 25px;
}
.post .entry-title, .page .entry-title {
    font-size: 26px;
    line-height: 32px;
}
.post .entry-title a, .page .entry-title a {
    color: #444444;
}
.post .entry-title a:hover, .page .entry-title a:hover {
    color: #0FBE7C;
}
.post .entry-content {
    margin-bottom: 10px;
}
.entry-content ul {
    list-style: square;
}
.entry-content ul,
.entry-content ol {
    padding: 0 0 0 35px;
    margin-bottom: 30px;
}
.entry-content li > ul,
.entry-content li > ol {
    margin-bottom: 0;
}
.post .entry-content a:hover {
    text-decoration: underline;
}
.blog-medium .post .post-featured-image {
    float: left;
    width: 36%;
    text-align: left;
    padding-right: 4%;
}
.blog-alternate-medium #primary article:nth-child(odd) figure {
    float: left;
    padding-right: 4%;
}
.blog-alternate-medium #primary article:nth-child(even) figure {
    float: right;
    padding-left: 4%;
}
.post .entry-meta {
    border: 1px solid #EAEAEA;
    font-size: 14px;
    color: #666666;
    font-family: 'Lato', sans-serif;
    margin: 0 0 20px;
}
.post .entry-meta .by-author,
.post .entry-meta .date,
.post .entry-meta .category,
.post .entry-meta .comments,
.post .entry-meta .edit-link {
    padding: 5px 10px;
}
.post .entry-meta .read-more-link {
    padding: 5px 10px;
    background-color: #0FBE7C;
    float: right;
    border-right: none;
}
.post .entry-meta .read-more-link:hover {
    -webkit-box-shadow:0 0 2px rgba(0, 0, 0, 0.6);
    -moz-box-shadow:0 0 2px rgba(0, 0, 0, 0.6);
    box-shadow:0 0 2px rgba(0, 0, 0, 0.6);
}
.post .entry-meta a, .type-page .entry-meta a {
    color: #666666;
}
.post .entry-meta a.read-more {
    color: #FFFFFF;
}
.post .entry-meta a.read-more:hover {
    color: #FFFFFF;
}
.post .entry-meta a:hover, .type-page .entry-meta a:hover {
    color: #0FBE7C;
}
.post .entry-meta span {
    float: left;
    padding: 0 6px 0 6px;
}
.post .entry-meta span:first-child {
    border-left: none;
}
.post .entry-meta .by-author:before,
.post .entry-meta .date:before,
.post .entry-meta .category:before,
.post .entry-meta .comments:before,
.post .entry-meta .edit-link:before {
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font: normal 18px/1 'Genericons';
    vertical-align: top;
}
.post .entry-meta .by-author:before { content: '\f304'; }
.post .entry-meta .date:before { content: '\f307'; }
.post .entry-meta .category:before { content: '\f301'; }
.post .entry-meta .comments:before { content: '\f300'; }
.post .entry-meta .edit-link:before { 	content: '\f411'; }
.single #content .tags {
    margin: 30px 0;
}
.single #content .tags a {
    border: 1px solid #EAEAEA;
    padding: 3px 5px;
    border-radius: 3px;
    color: #666666;
}
.single #content .tags a:hover {
    color: #0FBE7C;
    text-decoration: none;
}

/* =RESPONSIVE STRUCTURE
----------------------------------------------- */
@media screen and (min-width: 1500px) {
    .wide-978 #featured-slider .entry-container {
        left: 17.6%;
    }
    .wide-1218 #featured-slider .entry-container {
        left: 9.6%;
    }
}
@media screen and (min-width: 1650px) {
    .wide-978 #featured-slider .entry-container {
        left: 19.45%;
    }
    .wide-1218 #featured-slider .entry-container {
        left: 11.9%;
    }
}
@media screen and (max-width: 1308px) {
    #page {
        width: 97%;
    }
    .wide-1218 #page, .wide-978 #page {
        width: 100%;
    }
    .inner-wrap {
        width: 94%;
    }
}
@media screen and (max-width: 1078px) {
    body {
        padding: 15px 0;
    }
    #featured-slider .entry-container {
        max-width: 60%;
    }
    .call-to-action-content {
        float: none;
        width: 100%;
        margin-bottom: 10px;
        text-align: center;
    }
    .call-to-action-button {
        width: 93%;
    }
    .footer-socket-wrapper .copyright {
        float: none;
        max-width: 100%;
        text-align: center;
        margin-bottom: 5px;
    }
    .footer-socket-wrapper .small-menu {
        float: none;
        text-align: center;
    }
    .footer-socket-wrapper .small-menu li {
        float: none;
        display: inline;
    }
    .footer-socket-wrapper .small-menu a {
        float: none;
        display: inline;
        padding: 5px 5px 0;
    }
    .small-menu li.default-menu, li.default-menu {
        display: none;
    }
    .tg-one-half, .tg-one-third, .tg-one-fourth {
        float: left;
        width: 46.7684729%;
    }
    .widget_service_block .tg-one-third {
        float: left;
        margin: 0 2.46305%;
        padding: 0 0 30px;
        width: 28.4072%;
    }
    .tg-one-half-last, .tg-one-fourth-last {
        float: right;
    }
    .tg-service-left { float: left; margin: 0; }
    .tg-service-right { float: right; margin: 0; }
    .tg-column-1, .tg-column-3 {
        float: left;
        width: 46.7684729%;
    }
    .tg-column-2, .tg-column-4 {
        float: right;
        margin-right: 0;
    }
    .tg-after-two-blocks-clearfix {
        clear: both;;
    }
    .tg-after-three-blocks-clearfix {
        clear: none;
    }
}
@media screen and (max-width: 768px) {
    #primary, #secondary, .wide-978 #primary, .narrow-978 #primary {
        float: none;
        width: 100%;
        margin: 0;
    }
    #header-left-section {
        float: none;
        max-width: 100%;
        margin-right: 0px;
    }
    #header-logo-image {
        float: none;
        text-align: center;
        margin-bottom: 10px;
        padding-right: 0;
    }
    #header-text {
        float: none;
        text-align: center;
        padding: 0;
        margin-bottom: 10px;
    }
    #site-description {
        padding-bottom: 5px;
    }
    #header-right-section {
        float: none;
        max-width: 100%;
    }
    #header-right-section .widget {
        padding: 0 0 10px 0;
        float: none;
        text-align: center;
    }
    .menu-toggle,
    .main-navigation.toggled .nav-menu {
        display: block;
    }
    .main-navigation ul {
        display: none;
    }
    .main-navigation {
        float: none;
    }
    #featured-slider .entry-container { max-width: 70%; }
    #featured-slider .entry-description-container { padding: 5px 10px; padding: 0.5rem 1rem; }
    #featured-slider .slider-title-head { margin-bottom: 0; }
    #featured-slider .entry-title span { font-size: 18px; line-height: 1.4; }
    #featured-slider .entry-content p { font-size: 14px; line-height: 1.4; }
    #featured-slider .slider-read-more-button { font-size: 14px; padding: 5px 10px; padding: 0.5rem 1rem; }
}
@media screen and (max-width: 767px) {
    .tg-one-half, .tg-one-third, .tg-one-fourth {
        float: none;
        width: 100%;
        margin: 0;
    }
    .widget_service_block .tg-one-third {
        float: none;
        width: 100%;
        margin: 0;
    }
    .tg-column-1, .tg-column-2, .tg-column-3, .tg-column-4 {
        float: none;
    }
    #primary, #secondary {
        float: none;
        width: 100%;
        margin: 0;
    }
    .wide-978 #primary, .narrow-978 #primary, .wide-978 #secondary, .narrow-978 #secondary {
        width: 100%;
    }
}
@media screen and (max-width: 600px) {
    #featured-slider .entry-description-container { padding: 3px 6px; padding: 0.3rem 0.6rem; }
    #featured-slider .entry-title span { font-size: 14px; }
    #featured-slider .entry-content p { font-size: 10px; }
    #featured-slider .slider-read-more-button { margin-top: 5px; font-size: 10px; padding: 3px 6px; padding: 0.3rem 0.6rem; }
    #controllers { bottom: 5px; }
    #controllers a { height: 4px; margin: 0 3px; width: 12px; }
    .gallery-columns-4 .gallery-item,
    .gallery-columns-5 .gallery-item,
    .gallery-columns-6 .gallery-item,
    .gallery-columns-7 .gallery-item,
    .gallery-columns-8 .gallery-item,
    .gallery-columns-9 .gallery-item {
        width:25%;
    }
}
@media only screen and (max-width: 420px) {
    #page {
        width: 97%;
    }
    .inner-wrap {
        width: 95%;
    }
    #featured-slider .entry-content, #featured-slider .slider-read-more-button { display: none; }
    .gallery-columns-4 .gallery-item,
    .gallery-columns-5 .gallery-item,
    .gallery-columns-6 .gallery-item,
    .gallery-columns-7 .gallery-item,
    .gallery-columns-8 .gallery-item,
    .gallery-columns-9 .gallery-item {
        width:33.33%;
    }
}

/* Remove the updated class from entry meta */
.date .updated {
    display: none;
}

/* 킹콩보드 */
.kingkongboard-copyrights {
    display: none;
}





























/*------------------------------------- custom css ------------------------------------*/
/*
    공통
 */

body {
    padding-top: 0;
    padding-bottom: 0;
    background-color: transparent;
}
#page {
    max-width: 1280px;
    box-shadow: none;
}

#koreaFont {}

/*.hfeed.site * {
    font-family: NanumGothic, sans-serif;
    letter-spacing: -2px;
}*/
.hfeed * {
    font-family: NanumGothic, sans-serif;
    letter-spacing: 0;
    word-break: keep-all;
}
.hfeed button,
.hfeed a {
    letter-spacing: 1px;
}

#content .page {
    padding-bottom: 0;
}
.inner-wrap {
    max-width: 1280px;
}
@media screen and (max-width: 1308px) {
    .inner-wrap {
        width: inherit;
    }
}
.btn {
    width: 178px;
    height: 47px;
    border-radius: 20px;
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.8);
    font-size: 18px;
    line-height: 20px;
    text-align: center;
    margin-bottom: 0;
    letter-spacing: 0;
}
.bg-yellow {
    background-color: #ffb400;
}

/**
    header
 */
#header-text-nav-wrap {
    padding: 39px 10%;
}
#header-left-section {
    margin-right: 0;
    width: 26.7%;
}
@media screen and (max-width: 768px) {
    #header-left-section {
        width: 100%;
    }
}
#header-logo-image {
    padding: 0;
    line-height: 36px;
    height: 36px;
}
#header-logo-image img {
    margin-bottom: 0;
    vertical-align: middle;
}
#header-right-section {
    float: left;
    width: 73.3%;
}
#header-right-section .um-header {
    border-bottom: none;
}
@media screen and (max-width: 768px) {
    #header-right-section {
        width: 100%;
    }
}
#site-navigation {
    float: left;
    width: 70%;
    padding-top: 0;
}
@media screen and (max-width: 768px) {
    #site-navigation {
        width: 100%;
    }
}
.main-navigation ul li {
    padding-left: 0;
    padding-right: 13.5%;
    height: 38px;
    line-height: 38px;
}

.main-navigation ul li:last-child {
    padding-right: 0;
}
.main-navigation ul li a {
    padding: 0;
    font-family: NanumBarunGothicUltraLight, sans-serif;
    color:  #414040;
    font-size: 22px;
    letter-spacing: 1px;
}
.main-navigation ul li.current_page_item a{
    color:  #414040 !important;
    padding-bottom: 10px;
    border-bottom: 2px solid #ffb400;

}
.main-navigation ul li ul {
    position: absolute;
    background: none repeat scroll 0 0 rgba(255, 255, 255, 0.8);
    border-top: 1px solid #0FBE7C;
    top: 36px;
    left: 0;
    width: 150px;
}


#header-right-sidebar2 {
    float: right;
}
#header-right-section .widget {
    padding-top: 0;
    width: 118px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #b4b3b3;
    border-radius: 20px;
    text-align: left;
}
@media screen and (max-width: 768px) {
    #header-right-section .widget {
        padding: 0;
        margin-top: 10px;
    }
}
#header-right-section .widget a {
    margin: 0 30px 0 20px;
    color: #414040;
}
#header-right-section .widget img {
    margin-bottom: 2px;
    vertical-align: inherit;
}

/*
    상단 메뉴
 */
.header-post-title-container {
    border: none;
    padding: 29px 0;
    box-shadow: none;
    background-color: #eeeeee;;
}
.header-post-title-container .post-title-wrapper {
    float: none;
    max-width: 100%;
    padding-right: 0;
}
.header-post-title-container .post-title-wrapper ul {
    text-align: center;
}
.header-post-title-container .post-title-wrapper ul li{
    display: inline-block;
}
.header-post-title-container .post-title-wrapper ul li+li{
    margin-left: 30px;
}
.header-post-title-container .post-title-wrapper ul li a {
    font-family: NanumBarunGothicUltraLight, sans-serif;
    color:  #414040;
    font-size: 17px;
    letter-spacing: 1px;
}
.header-post-title-container .post-title-wrapper ul .current_page_item a{
    font-family: NanumBarunGothic, sans-serif;
    color:  #414040;
    font-size: 17px;
    padding-bottom: 10px;
    border-bottom: 2px solid #ffb400;
}


/*
    슬라이드 버튼
 */
#controllers {
    bottom: 25px;
}
#controllers a {
    border-radius: 50%;
    width: 10px;
    height: 10px;
}
/*
    이미지 박스
 */
#main {
    padding: 0;
}
.panel-grid {
    margin: 0 !important;
}
.panel-grid-cell {
    padding: 0 !important;
}
.panel-grid .sow-image-container .so-widget-image {
    margin-bottom: 0;
}

/*
    공지사항
 */
.panel-grid:nth-child(2){
    padding: 63px 54px 55px;
}
.panel-grid-cell .widget-title {
    font-family: NanumBarunGothic, sans-serif;
    color:  #3a4554;
    font-size: 26px;
    padding-bottom: 32px;
}
.notice {
    display: inline-block;
}
.notice .notice-list {
    width: 50%;
    padding-right: 8% !important;
    float: left !important;
    box-sizing: border-box;
}
.notice .notice-list + .notice-list {
    padding-left: 4% !important;
    border-left: 1px solid #e3e3e3;
}
.notice .notice-list .title {
    font-family: NanumGothic, sans-serif;
    font-size: 20px;
    margin-bottom: 13px;
}
.notice .notice-list .title a {
    color:  #3a4554;
}

.notice .notice-list .date {
    font-family: NanumGothicBold, sans-serif;
    color:  #2c69c5;
    font-size: 13px;
    font-weight: bold;
    margin-bottom: 19px;
}
.notice .notice-list .date span + span:before{
    content: "\2758";
    padding: 0 10px;
}

.notice .notice-list .desc {
    font-family: NanumGothic, sans-serif;
    color:  #3a4554;
    font-size: 15px;
}
@media (max-width: 780px) {
    .notice .notice-list {
        display: block !important;
        width: 100% !important;
        padding: 0 0 4% 0 !important;
    }
    .notice .notice-list + .notice-list {
        padding: 4% 0 0 0 !important;
        border-left: none;
        border-top: 1px solid #e3e3e3;
    }
}


/*
    이미지 박스2
 */
.panel-grid:nth-child(3) .panel-grid-cell {
    display: inline-block;
    margin: 50px 0 !important;
}
@media (max-width: 780px) {
    .panel-grid:nth-child(3) .panel-grid-cell {
        width: 100% !important;
    }
}

/*
    하단 메뉴
 */
.footer-widgets-wrapper {
    background-color: #FFFFFF;
    border-top: 1px solid #EAEAEA;
}
.footer-widgets-wrapper .inner-wrap {
    padding: 0 63px;
}
.footer-widgets-area {
    padding: 42px 0;
}
#colophon .widget-title {
    line-height: inherit;
    padding-bottom: 25px;
}
.widget-title span {
    font-family: NanumBarunGothic, sans-serif;
    color:  #414040;
    font-size: 16px;
    border-bottom: none !important;
    padding-bottom: 0;
    letter-spacing: 1px;
}
#colophon .widget {
    padding-bottom: 0;
}
#colophon .widget ul li {
    font-family: NanumBarunGothic, sans-serif;
    /*color:  rgba(162, 162, 162, 0.8);*/
    color: #a2a2a2;
    font-size: 14px;
    border-bottom: none !important;
    padding: 0 0 10px;
}
.tg-one-fourth {
    margin: 0 1.5% 0 0;
}

/*
    고객센터 & 결제계좌
 */
.tg-after-tree-blocks-clearfix {
    float: right;
    padding-right: 43px;
}
.tg-after-tree-blocks-clearfix ul li {
    padding: 0 !important;
    line-height: 1 !important;
}
.tg-after-tree-blocks-clearfix ul+ul {
    padding-top: 25px;
}
.tg-after-tree-blocks-clearfix ul li:nth-child(1) {
    color: #414040 !important;
    font-size: 16px !important;
    padding-bottom: 11px !important;
}
.tg-after-tree-blocks-clearfix ul li:nth-child(2) {
    color: #737272 !important;
    font-size: 18px !important;
    padding-bottom: 11px !important;
}
.tg-after-tree-blocks-clearfix ul li:nth-child(3) {
    color: rgba(162, 162, 162, 0.8) !important;
    font-size: 13px !important;
    letter-spacing: 1px;
}
.tg-one-fourth {
    padding: 0;
}
@media screen and (max-width: 1078px) {
    .tg-after-tree-blocks-clearfix {
        width: 46.7684729%;
        padding-right: 0;
        margin: 0 1.5% 0 0;
    }
}

/*
    copyright & sns 링크
 */

.footer-socket-wrapper {
    padding: 0;
    background-color: #FFFFFF;
}
.footer-socket-wrapper .textwidget  {
    width: 100%;
    display: inline-block;
}
.footer-socket-wrapper .inner-wrap {
    padding: 23px 64px 40px;
}
.footer-socket-wrapper .copy-right {
    width: 70%;
    float: left;
}
.footer-socket-wrapper .copy-right .link {
    margin-bottom: 13px;
}
.footer-socket-wrapper .copy-right .link li{
    display: inline-block;
    font-family: NanumBarunGothic, sans-serif;
    color:  #4a4a4a;
    font-size: 13px;
    margin-right: 10px;
    padding: 0 !important;
    letter-spacing: 0;
}
.footer-socket-wrapper .copy-right .address {
    margin-bottom: 14px;
}
.footer-socket-wrapper .copy-right .address li {
    display: inline-block;
    margin-right: 10px;
    padding: 0 !important;
    letter-spacing: 0;
}
.footer-socket-wrapper .copy-right p {
    font-family: NanumBarunGothic, sans-serif;
    letter-spacing: normal;
    color:  rgba(162, 162, 162, 0.8);
    font-size: 12px !important;
    line-height: normal !important;
    margin-bottom: 0;
}
.footer-socket-wrapper .sns-link {
    width: 30%;
    float: left;
    margin-top: 7px;
    padding-right: 64px;
    box-sizing: border-box;
    text-align: right;
}
.footer-socket-wrapper .sns-link img {
    margin-left: 15px;
}
.footer-socket-wrapper .sns-link a {
    cursor: pointer;
}
.footer-socket-wrapper .sns-link a:hover img{
    opacity: 1;
}

/*
	폰트등록 가이드
 */
.reg-guide .guide {
    width: 100%;
    box-sizing: border-box;
    display: inline-block;
    padding: 43px 127px 45px;
}
.reg-guide .guide h1{
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 28px;
    line-height: normal;
    padding-bottom: 29px;
    letter-spacing: 1px;
}
.reg-guide .guide p{
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.8);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 20px;
}
.reg-guide .guide p:last-child{
    margin-bottom: 0;
}
.reg-guide .guide-pictures {
    width: 100%;
    box-sizing: border-box;
    background-color: #eeeeee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 69px 127px 79px;
}
.reg-guide .guide-pictures ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.reg-guide .guide-pictures ul li {
    text-align: center;
}

.reg-guide .guide-pictures ul li img {
    margin: 0;
}

.reg-guide .guide-pictures ul li figure {
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-end;
}
.reg-guide .guide-pictures ul li figure img {
    align-self: center;
}
.reg-guide .guide-pictures ul li figure p{
    margin-bottom: 0;
}

.reg-guide .guide-pictures ul li figcaption {
    font-family: HYGothic_C1_500, sans-serif;
    color:  #414040;
    font-size: 14px;
    margin-top: 15px;
}
.reg-guide .guide-pictures .picture {
    width: 280px;
    height: 272px;
    box-sizing: border-box;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #d4cec9;
}

.reg-guide .guide-pictures .picture li {
    display: flex;
    justify-content: space-between;
}
.reg-guide .guide-pictures .picture1 {
    padding: 39px 40px 43px;
}
.reg-guide .guide-pictures .picture1 li:first-child {
    justify-content: center;
}
.reg-guide .guide-pictures .picture2 {
    padding: 50px 35px 43px 27px;
    background-color: #fecb00;
}
.reg-guide .guide-pictures .picture2 li:first-child {
    justify-content: center;
}
.reg-guide .guide-pictures .picture3 {
    padding: 29px 55px 43px 45px;
}
.reg-guide .guide-pictures .picture3 li:first-child {
    padding-left: 15px;
}
.reg-guide .guide-pictures .flow {

}
.reg-guide .guide-pictures .flow li{
    font-family: HYGothic_C1_500, sans-serif;
    color:  #414040;
    font-size: 14px;
    text-align: center;
    padding: 9px 0;
    line-height: 1.2;
}

.reg-guide .step {
    width: 100%;
    box-sizing: border-box;
    display: inline-block;
    padding: 45px 127px 0;
}
.reg-guide .step h1 {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 28px;
    line-height: normal;
    padding-bottom: 29px;
    letter-spacing: 1px;
}
.reg-guide .step>p {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.8);
    font-size: 15px;
    line-height: 20px;
    margin-bottom: 44px;
}
.reg-guide .step .step-list {
    display: flex;
}
.reg-guide .step .step-order {
    flex-grow: 1;
    flex-basis: 0;
    list-style: none;
    padding: 0;
    margin: 0;
}
.reg-guide .step .step-order li {
    margin-bottom: 27px;
}
.reg-guide .step .step-order .title-group{
    display: flex;
    border-radius: 16px;
    background-color:  #e5e3e1;
    height: 98px;
}


.reg-guide .step .step-order .title-group>p {
    margin-bottom: 0;
}

.reg-guide .step .step-order .title-group .title-addon {
    width: 94px;
    height: 98px;
    line-height: 98px;
    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;
    background-color: #bba68c;
    text-align: center;
}

.reg-guide .step .step-order .title-group .title-addon img {
    vertical-align: middle;
    margin-bottom: 0;
}

.reg-guide .step .step-order .title-group .title-addon+div {
    line-height: 98px;
    height: 98px;
    font-family: HYGothic_C1_500, sans-serif;
    color:  #414040;
    font-size: 25px;
    padding-left: 47px;
}
.reg-guide .step .step-order li>p {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.8);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 0;
}
.reg-guide .step .step-order dl{
    margin-bottom: 0;
}
.reg-guide .step .step-order dl dt{
    font-family: NanumGothicBold, sans-serif;
    color:  rgba(58, 69, 84, 0.8);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 13px;
}
.reg-guide .step .step-order dl dd{
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.8);
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 23px;
}

.reg-guide .step .flow {
    width: 92px;
    box-sizing: border-box;
    padding: 39px 20px 0;
    align-self: baseline;
}
.reg-guide .step .flow img {
    margin: 0;
}

.reg-guide .step-btn-box {
    clear: both;
    width: 100%;
    padding: 50px 0;
    text-align: center;
}

.reg-guide .step-btn-box a {
    font-family: HYGothic_C1_800, sans-serif;
    font-size: 28px;
    color:  #ffffff;
    display: inline-block;
    width: 274px;
    height: 75px;
    line-height: 75px;
    background-color: #4e4846;
    border-radius: 38px;
}
.reg-guide .step-btn-box a:hover {
    background-color: #FECB00;
}

/*
    폰트 검색 가이드
 */
.search-guide {
    padding: 43px 128px 44px;
}
.search-guide input {
    display: none;
}
.search-guide p {
    margin-bottom: 0;
}
.search-guide .title h1 {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 28px;
    letter-spacing: 1px;
}
.search-guide .title p {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 15px;
}

.search-guide label {
    margin: 26px 13px 13px 0;
    cursor: pointer;
    display: inline-block;
    width: 104px;
    height: 35px;
    line-height: 35px;
    border: 1px solid #afaeae;
    box-sizing: border-box;
    text-align: center;
    border-radius: 20px;
}
.search-guide input:checked+label {
    background-color:  #c7b68e;
    border: none;
}
#use:checked ~ .use-info {
    display: block;
}
#use:checked ~ .design-info {
    display: none;
}
#use:checked ~ .spec-info {
    display: none;
}
#design:checked ~ .use-info {
    display: none;
}
#design:checked ~ .design-info {
    display: block;
}
#design:checked ~ .spec-info {
    display: none;
}
#spec:checked ~ .use-info {
    display: none;
}
#spec:checked ~ .design-info {
    display: none;
}
#spec:checked ~ .spec-info {
    display: block;
}

.search-guide .use-info {
    display: block;
    border-top: 1px solid #cacac9;
}
.search-guide .use-info ul {
    padding: 50px 59px 0;
    margin: 0;
    list-style: none;
}
.search-guide .use-info ul li {
    display: flex;
    margin-bottom: 24px;
}
.search-guide .use-info ul li>*{}

.search-guide .use-info ul li div {
    border-radius: 50%;
    background-color: #cee0de;
    flex-basis: 144px;
    height: 144px;
    line-height: 144px;
    text-align: center;
    vertical-align: top;
    box-sizing: border-box;
}
.search-guide .use-info ul li:nth-child(1) div {
    background-color: #e0dbd0;
}
.search-guide .use-info ul li:nth-child(2) div {
    background-color: #d5dec0;
}
.search-guide .use-info ul li div img {
    margin: 0;
    vertical-align: middle;
}
.search-guide .use-info ul li div p {
    margin-top: 33%;
    font-family: NanumGothic, sans-serif;
    letter-spacing: 0;
    color:  #ffffff;
    font-size: 25px;
}
.search-guide .use-info ul li dl {
    width: 83.8%;
    padding: 24px 0 0 54px;
    box-sizing: border-box;
    margin: 0;
}
.search-guide .use-info ul li dt {
    margin: 0 0 17px 0;
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 25px;
    font-weight: 400;
    letter-spacing: 1px;
}
.search-guide .use-info ul li dd {
    margin: 0;
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 15px;
    line-height: 1.7;
}

.search-guide .design-info {
    display: none;
    border-top: 1px solid #cacac9;
}
.search-guide .design-info h2 {
    padding: 48px 0 0;
    font-family: NanumBarunGothicLight, sans-serif;
    color: #414040;
    font-size: 25px;
    letter-spacing: 1px;
}
.search-guide .design-info>div:nth-child(1) h2{
    padding-top: 31px;
}
.search-guide .design-info>div:nth-child(2) h2{
    padding-top: 53px;
}
.search-guide .design-info>div:nth-child(4) h2{
    padding-bottom: 24px;
    border-bottom: 1px solid #e4e4e4;
}

.search-guide .design-info ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.search-guide .design-info ul h3 {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 20px;
    line-height: 1.2;
    padding: 30px 0 15px;
    border-bottom: 1px solid #e4e4e4;
    letter-spacing: 1px;
}
.search-guide .design-info ul h3:before {
    content: '\25CF';
    color: #c7b68e;
    font-size: 9px;
    position: relative;
    top: -3px;
    margin-right: 7px;
}
.search-guide .design-info ul li ul li{
    height: 95px;
    line-height: 95px;
    box-sizing: border-box;
    border-bottom: 1px solid #e4e4e4;
}
.search-guide .design-info ul li ul li span {
    width: 22.5%;
    display: inline-block;
    text-align: right;
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 18px;
    padding-right: 26px;
    box-sizing: border-box;
    letter-spacing: 1px;
}
.search-guide .design-info ul li ul li img {
    margin: 0;
    vertical-align: middle;
    max-width: 77.5%;
}

.search-guide .spec-info {
    display: none;
    border-top: 1px solid #cacac9;
}
.search-guide .spec-info>div {
    padding: 34px 0 40px;
    border-bottom: 1px solid #e4e4e4;
}
.search-guide .spec-info h2 {
    display: inline-block;
    width: 34%;
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 25px;
    padding: 0;
    vertical-align: top;
    letter-spacing: 1px;
}
.search-guide .spec-info dl {
    display: inline-block;
    width: 65%;
    margin: 0;
}
.search-guide .spec-info dl *{
    letter-spacing: 0;
}

.search-guide .spec-info dt {
    display: inline-block;
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 14px;
    width: 16%;
    vertical-align: top;
    margin: 0;
}
.search-guide .spec-info dd {
    display: inline-block;
    width: 83%;
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 14px;
    margin-bottom: 26px;
}
.search-guide .spec-info dd:last-child {
    margin-bottom: 0;
}
.search-guide .spec-info dd span {
    display: inline-block;
    vertical-align: top;
}
.search-guide .spec-info dd p {
    display: inline-block;
}
.search-guide .spec-info dd ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: inline-block;
}
.search-guide .spec-info dd img {
    margin: 0;
}
.search-guide .spec-info dd a {
    color: rgba(58, 69, 84, 0.7);
}

/*
    폰트 제작 스토리
 */
.story {
    padding: 43px 128px 0;
}
.story h1 {
    font-family: NanumBarunGothicLight, sans-serif !important;
    color:  #414040;
    font-size: 28px;
    line-height: 1.2;
    letter-spacing: 1px;
}
.story h1+p {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 15px;
    margin-bottom: 45px;
}
.story h2 {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 22px;
    padding: 0;
    letter-spacing: 1px;
}
.story>div {
    border-top: 1px solid #dddddd;
    margin-top: 23px;
}
.story .guide {
    margin-bottom: 77px;
}
.story .guide ul {
    display: flex;
    list-style: none;
    padding: 24px 0 0 0;
    margin: 0;
    width: 100%;
}
.story .guide ul>li {
    display: flex;
    width: 20%;
    flex-direction: column;
}
.story .guide ul>li+li {
    padding-left: 1%;
}
.story .guide ul>li>div {
    display: flex;
    flex-basis: 60px;
    align-items: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #b9ab9a;
    font-family: NanumBarunGothic, sans-serif;
    color: #ffffff;
    font-size: 17px;
    width: 100%;
    padding-left: 22px;
    box-sizing: border-box;
    letter-spacing: 1px;
}
.story .guide ul>li>div span {
    font-family: AvantGardeITCTTDemi, NanumGothic, sans-serif;
    color: #ffffff;
    font-size: 22px;
    margin-right: 12px;
    vertical-align: middle;
}
.story .guide ul>li>ul {
    flex-grow: 1;
    box-sizing: border-box;
    padding: 23px 20px 0 19px;
    background-color: #eeeeee;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    display: flex;
    flex-direction: column;
}

.story .guide ul>li>ul>li {
    width: 100%;
    font-family: NanumBarunGothic, sans-serif;
    color: #5a5a5a;
    /*font-size: 15px;*/
    font-size: 14px;
    margin-bottom: 12px;
    padding-left: 10px;
    box-sizing: border-box;
    position: relative;
    letter-spacing: 1px;
    line-height: 1.2;
}
.story .guide ul>li>ul li:before {
    content: '\2022';
    color: #b9ab9a;
    position: absolute;
    left: -5px;
}
.story .desc {
    padding-top: 46px;
}
.story .desc h3 {
    display: inline-block;
    width: 34%;
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 20px;
    padding: 0;
    vertical-align: top;
    letter-spacing: 1px;
}
.story .desc dl {
    display: inline-block;
    width: 65%;
    margin: 0;
}
.story .desc dl *{
    line-height: 1.5;
}
.story .desc dt {
    font-family: NanumGothicBold, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 16px;
    margin-bottom: 15px;
}
.story .desc dd {
    font-family: NanumGothic, sans-serif;
    color:  #656566;
    font-size: 15px;
    margin-bottom: 32px;
    letter-spacing: 0;
    line-height: 1.7;
}

/*
    한글마을 소개
 */
.introduce .bg {
    width: 100%;
    height: 425px;
    line-height: 425px;
    font-family: H2TBRB, sans-serif;
    color:  #ffffff;
    font-size: 50px;
    text-align: center;
    background-image: url(/wp-content/uploads/2017/01/introduce-bg.png);
    background-size: cover;
}
.introduce .contents {
    padding: 61px 128px;
    display: flex;
    justify-content: space-between;
}
.introduce .contents div {
    flex-basis: 170px;
    box-sizing: border-box;
    vertical-align: top;
}

.introduce .contents div p {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 20px;
    letter-spacing: 1px;
    margin: 0 0 30px 0;
}

.introduce .contents dl {
    flex-basis: 672px;
    margin: 0;
}

.introduce .contents dt {
    font-family: NanumGothicBold, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 18px;
    margin-bottom: 14px;
}
.introduce .contents dd {
    margin: 0;
}
.introduce .contents dd p{
    font-family: NanumGothic, sans-serif;
    color:  #656566;
    font-size: 15px;
    margin-bottom: 20px;
    letter-spacing: 0;
    line-height: 1.7;
}
/*
	공지사항 - 리스트
 */
#notice_board {
    padding: 43px 128px;
}
#notice_board>pre{
    display: none;
}
#notice_board>h2 {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 28px;
    margin: 0;
    padding-bottom: 17px;
    letter-spacing: 1px;
}
#notice_board>p {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 15px;
}
#notice_form_board_search {
    display: none;
}

#notice_board_box {
    margin-top: 44px;
}

.board-list table.table-list {
    border-top: solid 1px #cccccc !important;
}

#notice_board_body tr {
    height: 63px;
}
#notice_board_body td {
    font-family: NanumGothic, sans-serif;
    font-size: 17px;
}
#notice_board_body td.mb-hide-mobile {
    font-size: 15px;
}
#notice_board_body td.text-left span span {
    display: inline-block;
    width: 60px;
    text-align: center;
    margin-right: 50px;
    color:  #fd3652;
    font-size: 17px;
}
#notice_board_body td.text-left .icon-new,
#notice_board_body td.text-left .icon-file{
    margin: 0;
}
#notice_board_body td.text-left .icon-new:after {
    content: 'NEW';
    display: inline-block;
    background-color:  #ffc600;
    border-radius: 10px;
    position: relative;
    width: 43px;
    height: 25px;
    line-height: 25px;
    font-family: RixHeadEB, NanumGothic, sans-serif;
    color:  #ffffff;
    font-size: 12px;
    margin: 0;
}

#notice_board_body td a {
    outline: none;
}

#notice_pagination_box {
    padding: 42px 0 !important;
}
#notice_pagination_box .pagination-large{
    padding: 0 !important;
}
#notice_pagination_box table .btn-page {
    font-family: NanumGothic, sans-serif;
    color:  #111011;
    font-size: 20px;
}
#notice_pagination_box table .btn-page.active {
    font-family: NanumGothicBold, sans-serif;
}
#notice_pagination_box table .page_arrow img{
    display: none !important;
}
#notice_pagination_box table a {
    display: inline-block;
    background: none;
}
#notice_pagination_box table .page_arrow a:after {
    font-size: 20px;
    position: relative;
    top: 1px;
}
#notice_pagination_box table .btn-start:after {
    content: '\276C\2002\276C';
}

#notice_pagination_box table .btn-prev:after {
    content: '\276C';
}
#notice_pagination_box table .btn-next:after {
    content: '\276D';
}

#notice_pagination_box table .btn-end:after {
    content: '\276D\2002\276D';
}
/**
    공지사항 - 게시물 보기
 */

#notice_form_board_view .top {
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
    padding: 33px 24px 28px;
}
#notice_form_board_view .title {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 20px;
    margin-bottom: 11px;
}
#notice_form_board_view .date,
#notice_form_board_view .category {
    display: inline-block;
    font-family: NanumGothicBold, sans-serif;
    color:  #fe633f;
    font-size: 13px;
    float: none;
    padding: 0;
    overflow: inherit;
}
#notice_form_board_view .category:before {
    content: "\2758";
    padding: 0 10px;
}
#notice_form_board_view .content {
    padding: 28px 0;
    text-align: center;
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 16px;
    border-bottom: 1px solid #cccccc;
}
#notice_btn_box {
    padding-top: 26px;
}
#notice_form_board_view .view-btn button{
    background-color: #ffb400 !important;
    width: 178px !important;
    height: 47px !important;
    border-radius: 20px;
    box-sizing: border-box;
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 18px;
    letter-spacing: 10px;
    border: none;
    outline: none;
}
#notice_form_board_view .view-btn button span {
    letter-spacing: 20px;
    margin-left: 20px;
}

/*
	회원정보
 */
#post-269{
    padding: 43px 129px;
}
#post-269 h1{
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 28px;
    letter-spacing: 1px;
}
#post-269 h1+p {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 15px;
    margin-bottom: 24px;
}
#post-269 form {
    border-top: 1px solid #cccccc;
}
#post-269 form .um-account-main {
    width: 100%;
    padding: 0;
}
#post-269 form .um-account-main .um-field {
    padding: 0;
    border-bottom: 1px solid #cccccc;
}
#post-269 form .um-account-main .um-field .um-field-label {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
    width: 29.4%;
    padding-left: 23px;
    box-sizing: border-box;
}
#post-269 form .um-account-main .um-field .um-field-label label {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 15px !important;
    font-weight: 400;
}
#post-269 form .um-account-main .um-field .um-field-area {
    display: inline-block;
    vertical-align: middle;
    width: 70.6%;
    padding: 13px 0;
}
#post-269 form .um-account-main .um-field .um-field-area input {
    border: 1px solid #cccccc !important;
    background-color: #f5f5f5;
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 13px !important;
    border-radius: 0;
}
#post-269 form .um-account-main .um-field-radio {
}
#post-269 form .um-account-main .um-field .um-field-area .um-field-half {
    width: auto;
}
#post-269 form .um-account-main .um-field .um-field-area .um-field-half.right{
    float: left;
    margin-left: 32px;
}
#post-269 form .um-account-main .um-field .um-field-area .um-field-radio-option {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7) !important;
    font-size: 15px;
}

#post-269 form .um-account-main .um-field .um-field-area .um-icon-android-radio-button-off:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: #cccccc;
    width: 23px;
    height: 23px;
}
#post-269 form .um-account-main .um-field .um-field-area .um-icon-android-radio-button-on:before {
    content: url(/wp-content/uploads/2017/01/icon-radio.png);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: #ffb400;
    width: 23px;
    height: 23px;
    line-height: 15px;
    padding-left: 5px;
    box-sizing: border-box;
}

#post-269 form .um-account-main .um-col-alt-b {
    padding-top: 0;
}
#post-269 form .um-account-main .um-col-alt {
    margin: 0;
}
#post-269 form .um-account-main .um-col-alt .um-left{
    width: 100%;
    text-align: center;
    padding: 32px 0;
}
#post-269 form .um-account-main .um-col-alt .um-left input{
    background-color: #ffb400;
    width: 178px;
    height: 47px !important;
    padding: 0 !important;
    border-radius: 30px !important;
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 18px;
}

/*
    약관 동의
 */
#pl-187 {
    padding: 63px 129px 0;
}
#pl-187 h1{
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 28px;
    margin-bottom: 17px;
    padding: 0;
    letter-spacing: 1px;
}
#pl-187 h1+p {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 13px;
    margin: 0;
    padding: 0;
}
#pl-187 .panel-grid-cell .so-panel {
    margin-bottom: 0 !important;
}
#pl-187 .terms pre{
    border: 1px solid #cccccc;
    margin: 25px 0 0;
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 13px;
    background-color: #f5f5f6;
    padding: 28px;
    max-height: 253px;
    overflow-y: scroll;
}
#pl-187 .terms pre strong {
    font-family: NanumGothicBold, sans-serif;
}
#pl-187 .terms input {
    display: none;
}
#pl-187 .terms label {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 18px;
    margin: 24px 0 0 52px;
    display: inline-block;
    position: relative;
    cursor: pointer;
}

#pl-187 .terms label:before {
    content: url(/wp-content/uploads/2017/02/icon-check-large.png);
    position: absolute;
    vertical-align: middle;
    top: -8px;
    left: -52px;
    border-radius: 50%;
    background-color: #cccccc;
    width: 37px;
    height: 37px;
    padding: 9px;
    box-sizing: border-box;
}
#pl-187 .terms input:checked+label:before {
    background-color: #ffb400;
}
#pl-187 .btn-group {
    padding: 30px 0;
    text-align: center;
}
#pl-187 .btn-group button {
    background-color: #ffb400;
    width: 178px;
    height: 47px;
    display: inline-block;
    border-radius: 20px;
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 18px;
    cursor: not-allowed;
}


/*
    회원가입
 */

/*
	회원가입
 */
#post-101{
    padding: 43px 129px;
}
#post-101 h1{
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 28px;
    letter-spacing: 1px;
}
#post-101 h1+p {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 13px;
    margin-bottom: 24px;
}
#post-101 form {
    border-top: 1px solid #cccccc;
}
#post-101 form .um-col-1 {
    width: 100%;
    padding: 0;
}
#post-101 form .um-col-1 .um-field {
    padding: 0;
    border-bottom: 1px solid #cccccc;
}
#post-101 form .um-col-1 .um-field .um-field-label {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
    width: 29.4%;
    padding-left: 23px;
    box-sizing: border-box;
}
#post-101 form .um-col-1 .um-field .um-field-label label {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 15px !important;
    font-weight: 400;
}
#post-101 form .um-col-1 .um-field .um-field-area {
    display: inline-block;
    vertical-align: middle;
    width: 70.6%;
    padding: 13px 0;
}
#post-101 form .um-col-1 .um-field .um-field-area input {
    border: 1px solid #cccccc !important;
    background-color: #f5f5f5;
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 13px !important;
    border-radius: 0;
}
#post-101 form .um-col-1 .um-field-radio {
}
#post-101 form .um-col-1 .um-field .um-field-area .um-field-half {
    width: initial;
}
#post-101 form .um-col-1 .um-field .um-field-area .um-field-half.right{
    float: left;
    margin-left: 32px;
}
#post-101 form .um-col-1 .um-field .um-field-area .um-field-radio-option {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7) !important;
    font-size: 15px;
}

#post-101 form .um-col-1 .um-field .um-field-area .um-icon-android-radio-button-off:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: #cccccc;
    width: 23px;
    height: 23px;
}
#post-101 form .um-col-1 .um-field .um-field-area .um-icon-android-radio-button-on:before {
    content: url(/wp-content/uploads/2017/01/icon-radio.png);
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
    background-color: #ffb400;
    width: 23px;
    height: 23px;
    line-height: 15px;
    padding-left: 5px;
    box-sizing: border-box;
}

#post-101 form .um-col-1 .um-col-alt-b {
    padding-top: 0;
}
#post-101 form .um-col-1 .um-col-alt {
    margin: 0;
}
#post-101 form .um-col-1 .um-col-alt .um-left{
    width: 100%;
    text-align: center;
    padding: 32px 0;
}
#post-101 form .um-col-1 .um-col-alt .um-left input{
    background-color: #ffb400;
    width: 178px;
    height: 47px !important;
    padding: 0 !important;
    border-radius: 30px !important;
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 18px;
}

#post-101 form .um-button {
    background-color: #ffb400;
    width: 178px !important;
    height: 47px !important;
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 18px;
    border-radius: 25px !important;
    min-width: inherit !important;
    padding: 0 !important;
}

/*
    가입완료
 */
.signed-up {
    padding: 63px 129px;
}
.signed-up h1 {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 28px;
    margin-bottom: 17px;
    padding: 0;
    letter-spacing: 1px;
}
.signed-up h1+p{
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 13px;
    margin-bottom: 25px;
    padding: 0;
}
.signed-up .content {
    border-top: 1px solid #cccccc;
    text-align: center;
}
.signed-up .content .info{
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 28px;
    padding: 0;
    margin: 67px 0 26px;
    line-height: 1.2;
    letter-spacing: 1px;
}
.signed-up .content .desc{
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 14px;
}
.signed-up .content .img-box {
    list-style: none;
    padding: 0;
    margin: 57px 0 0;
    display: flex;
    height: 287px;
}
.signed-up .content .img-box li {
    flex-grow: 1;
}
.signed-up .content .img-box li.reg {
    padding-top: 33px;
    background-color: #e1cda6;
    color: #7f6e4e;
}
.signed-up .content .img-box li.product {
    padding-top: 46px;
    background-color: #bba06b;
    color:  #65512b;
}
.signed-up .content .img-box li.mypage {
    padding-top: 49px;
    background-color: #95afca;
    color:  #3c4a59;
}

.signed-up .content .img-box li img {
    margin: 0;
}
.signed-up .content .img-box li h2 {
    margin: 35px 0 0;
    padding: 0;
    font-family: NanumBarunGothic, sans-serif;
    color:  #343435;
    font-size: 26px;
    line-height: 1;
    letter-spacing: 1px;
}
.signed-up .content .img-box li p {
    margin: 16px 0;
    font-family: NanumGothic, sans-serif;
    font-size: 15px;
    line-height: 1.2;
}

.signed-up .content .img-box li button {
    margin: 0;
    width: 96px;
    height: 28px;
    border-radius: 15px;
    font-family: NanumGothic, sans-serif;
    color:  #ffffff;
    font-size: 13px;
    padding: 0;
    text-align: center;
}
.signed-up .content .img-box li.reg button{
    background-color:  #9c8860;
}
.signed-up .content .img-box li.product button{
    background-color:  #755921;
}
.signed-up .content .img-box li.mypage button{
    background-color:  #425b74;
}

.signed-up .content .img-box li button span {
    margin-right: 6px;

}
.signed-up .content .img-box li button img {
    vertical-align: middle;
}
/*
    한글마을 매니저
 */

.manager {
    padding: 43px 128px 50px;
}

.manager h1 {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 28px;
    letter-spacing: 1px;
}
.manager h1+p{
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 15px;
    margin: 0;
}
.manager .main-img {
    margin: 39px 0 49px;
}
.manager .contents {
    display: flex;
    justify-content: space-between;
}
.manager .contents>div{
    width: 49%;
}
.manager .contents h2 {
    font-family: NanumBarunGothicUltraLight, sans-serif;
    color:  #fe9601;
    font-size: 20px;
    padding-bottom: 20px;
    letter-spacing: 1px;
}
.manager .contents ul {
    list-style: none;
    margin: 0;
    padding: 33px 0;
    border-top: 1px solid #c3c3c3;
}
.manager .contents ul li {
    display: flex;
    align-items: center;
    margin-bottom: 17px;
}
.manager .contents ul li:last-child {
    margin-bottom: 0;
}
.manager .contents ul li:nth-child(1) .badge{
    background-color:  #ddd5c9;
}
.manager .contents ul li:nth-child(2) .badge{
    background-color:  #daddc9;
}
.manager .contents ul li:nth-child(3) .badge{
    background-color:  #c9ddd8;
}
.manager .contents ul li:nth-child(4) .badge{
    background-color:  #d2c9dd;
}
.manager .contents ul li p {
    font-family: NanumBarunGothic, sans-serif;
    color:  #414040;
    font-size: 16px;
    margin: 0;
    letter-spacing: 1px;
}

.manager .contents .badge {
    font-family: NanumBarunGothicUltraLight, sans-serif;
    color:  #414040;
    font-size: 25px;
    border-radius: 50%;
    width: 81px;
    height: 81px;
    line-height: 81px;
    text-align: center;
    margin-right: 35px;
    letter-spacing: 1px;
}
.manager .contents .icon {
    border-radius: 50%;
    background-color:  #fdbf19;
    width: 81px;
    height: 81px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 35px;
}
.manager .contents .icon img {
    margin: 0;
}
.manager .btn-group {
    margin-top: 50px;
    display: flex;
    text-align: center;
    justify-content: center;
}
.manager .btn-group a {
    background-color: #4e4846;
    width: 274px;
    height: 75px;
    line-height: 75px;
    font-family: HYGothic_C1_800, sans-serif;
    color:  #ffffff;
    font-size: 24px;
    border-radius: 38px;
}
.manager .btn-group a:hover {
    background-color: #FECB00;
}
/*
    패스워드 초기화
 */
#post-109 .entry-content{
    background-color: #efefef;
    padding: 75px 0 80px;
}
#post-109 form {
    width: 488px !important;
    border-top: 3px solid #ffb500;
    background-color: #FFFFFF;
    padding: 30px;
    box-sizing: border-box;
    text-align: left !important;
}
#post-109 form .um-field-block {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 13px;
}

#post-109 form .um-field-area {
}
#post-109 form .um-field-area .um-form-field {
    border-radius: 0;
    border: 1px solid #b1b0b0 !important;
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 13px !important;
}
#post-109 form .um-button {
    background-color: #bca16b;
    border-radius: 0 !important;
    font-family: NanumGothic, sans-serif;
    color:  #ffffff;
    font-size: 20px;
    padding: 15px 0 !important;
    width: 100% !important;
}

/*
    한글틀 개발 개요
 */
.hangulteul {
    padding: 43px 128px;
}

.hangulteul .title {
    display: flex;
    justify-content: space-between;
}

.hangulteul h1 {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 28px;
    padding: 0;
    margin-bottom: 42px;
    letter-spacing: 1px;
}

.hangulteul a {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 16px;
    letter-spacing: 1px;
}
.hangulteul a img {
    margin: 0 0 0 8px;
}

.hangulteul .row {
    display: flex;
    justify-content: space-between;
}
.hangulteul .col-6 {
    width: 48%;
}
.hangulteul .summary {
    width: 100%;
}
.hangulteul .summary span {
    border-radius: 50%;
    background-color:  #fe9601;
    width: 24px;
    height: 24px;
    line-height: 24px;
    display: inline-block;
    color:  #ffffff;
    font-size: 16px;
    text-align: center;
}

.hangulteul .summary p {
    margin: 0;
}

.hangulteul .summary h2 {
    font-family: NanumBarunGothicUltraLight, sans-serif;
    color:  #fe9601;
    font-size: 20px;
    line-height: 1.2;
    padding-top: 12px;
    letter-spacing: 1px;
}
.hangulteul .summary ul {
    list-style: none;
    padding: 20px 0 67px;
    margin: 0;
    border-top: 1px solid #c3c3c3;
}

.hangulteul .summary ul li {
    font-family: NanumBarunGothic, sans-serif;
    color:  #414040;
    font-size: 16px;
    position: relative;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.hangulteul .summary ul li:before {
    display: inline-block;
    content: '';
    border-radius: 50%;
    background-color:  #fe9601;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    position: relative;
    top: -3px;
}

.hangulteul .summary ul li>ul {
    border: 0;
    margin: 10px 0 27px 10px;
    padding: 0;
}

.hangulteul .summary ul li>ul li:before {
    content: '';
    display: none;
}

.hangulteul .summary+.summary {
    margin-top: 35px;
}
.hangulteul .summary table {
    margin: 0;
}

.hangulteul .summary table th,
.hangulteul .summary table td {
    border-left: none;
    border-right: none;
    border-top: 1px solid #c3c3c3;
    border-bottom: 1px solid #c3c3c3;
    font-family: NanumBarunGothic, sans-serif;
    color:  #414040;
    letter-spacing: 1px;
}
.hangulteul .summary table th {
    background-color: #fff5e6;
    padding: 23px 0;
    font-size: 16px;
}

.hangulteul .summary table td {
    padding: 20px 0;
    font-size: 18px;
}

.hangulteul .summary dl {
    border-top: 1px solid #c3c3c3;
    padding: 20px 0;
}

.hangulteul .summary dt {
    clear: both;
    float: left;
    width: 20%;
    font-family: NanumBarunGothic, sans-serif;
    color:  #414040;
    font-size: 15px;
    letter-spacing: 1px;
}
.hangulteul .summary dd {
    float: left;
    width: 80%;
    margin-bottom: 20px;
    font-family: NanumBarunGothic, sans-serif;
    color:  #414040;
    font-size: 15px;
    letter-spacing: 1px;
}

.hangulteul .summary dd p:last-child a{
    word-break: break-all;
}

.hangulteul .summary .concept {
    border-top: 1px solid #c3c3c3;
    text-align: center;
    padding: 56px 0 83px;
}

.hangulteul .summary .concept h3 {
    font-family: HangultuelGothic, sans-serif;
    color:  #fe9601;
    font-size: 35px;
    padding-bottom: 62px;
}

.hangulteul .summary .concept>p {
    font-family: NanumBarunGothic, sans-serif;
    color:  #414040;
    font-size: 16px;
    letter-spacing: 1px;
}


.hangulteul .summary .concept .text-group {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 46px;
}

.hangulteul .summary .concept .text-group .before {
    position: relative;
    line-height: 1;
    z-index: 1;
}

.hangulteul .summary .concept .text-group .before b{
    position: relative;
    font-family: MDotum, sans-serif;
    color:  #5b5b5b;
    font-size: 148px;
    font-weight: normal;
    left: 30px;
}

.hangulteul .summary .concept .text-group .before b:nth-child(1) {
    left: 0;
}

.hangulteul .summary .concept .text-group .before span {
    position: absolute;
    border-radius: 50%;
    background-color:  #ffa2a2;
    width: 35px;
    height: 35px;
    z-index: -1;
}

.hangulteul .summary .concept .text-group .before .point1 {
    top: 115px;
    left: 15px;
}
.hangulteul .summary .concept .text-group .before .point2 {
    top: 40px;
    left: 162px;
}
.hangulteul .summary .concept .text-group .before .point3 {
    top: 65px;
    left: 290px;
}


.hangulteul .summary .concept .text-group img {
    margin: 0 32px 0 45px;
}

.hangulteul .summary .concept .text-group .after {
    font-family: HangultuelGothic, sans-serif;
    color:  #414040;
    font-size: 148px;
    line-height: 1;
}

.hangulteul .summary .concept .img-group {
    border: 1px solid #c4c4c4;
    margin: 78px 25px 29px;
    padding: 41px 66px 26px;
}

.hangulteul .summary .concept .img-group>div {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.hangulteul .summary .concept .img-group>div:first-child {
    margin-bottom: 30px;
}

.hangulteul .summary .concept .img-group .img-box {
    display: flex;
    align-items: flex-end;
    position: relative;
}

.hangulteul .summary .concept .img-group img {
    margin: 0;
}
.hangulteul .summary .concept .img-group span {
    position: absolute;
    font-family: NanumBarunGothicBold, sans-serif;
    font-size: 16px;
    border-radius: 0;
    background-color: transparent;
    width: inherit;
    height: inherit;
    left: 0;
    bottom: 9px;
    letter-spacing: 1px;
}
.hangulteul .summary .concept .img-group span.oes1 {
    color:  #9c40d6;
}
.hangulteul .summary .concept .img-group span.oes2 {
    color:  #008711;
}
.hangulteul .summary .concept .img-group .img2 {
    font-family: NanumBarunGothic, sans-serif;
    color:  #008711;
    font-size: 16px;
    text-align: left;
    margin-left: 20px;
    letter-spacing: 1px;
}


.hangulteul .jumbotron {
    margin: 0 auto;
    padding: 106px 0 63px;
}

.hangulteul .jumbotron .v-sign {
    width: 574px;
    height: 100px;
    text-align: center;
    position: relative;
}

.hangulteul .jumbotron .v-sign p {
    font-family: NanumBarunGothicUltraLight, sans-serif;
    color:  #fe9601;
    font-size: 40px;
    margin: 0;
    position: relative;
    top: -15px;
    z-index: 1;
    letter-spacing: 1px;
}
.hangulteul .jumbotron .v-sign:before {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    top: 0;
    border-top: 100px solid #a9a9a9;
    border-left: 287px solid transparent;
    border-right: 287px solid transparent;
}

.hangulteul .jumbotron .v-sign:after {
    content: '';
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    top: -1px;
    border-top: 100px solid #ffffff;
    border-left: 287px solid transparent;
    border-right: 287px solid transparent;
}

.hangulteul .btn-group {
    text-align: center;
    margin-top: 58px;
}
.hangulteul .btn-group a {
    display: inline-block;
    background-color: #4e4846;
    width: 274px;
    height: 75px;
    line-height: 75px;
    font-family: HYGothic_C1_800, sans-serif;
    color: #ffffff;
    font-size: 24px;
    border-radius: 38px;
}

.hangulteul .btn-group a:hover {
    background-color: #FECB00;
}

/*
    모달
 */
.purchase-modal {
    position: absolute;
    top: 200px;
    left: 370px;
    right: 370px;
    bottom: 500px;
}
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.4);
}

.purchase-modal .modal-content {
    background-color: #fefefe;
    padding: 20px;
    margin: 0 auto;
    border: 1px solid #888;
    width: 600px;
    box-sizing: border-box;
}

.purchase-modal .modal-content .title {
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.purchase-modal .modal-content .title h2 {
    font-size: 24px;
    line-height: 1.2;
    padding: 0;
}
.purchase-modal .modal-content .title button {
    margin: 0;
    padding: 0 10px;
    align-self: center;
    background-color: dimgray;
}
.purchase-modal .modal-content .btn-group {
    margin-top: 20px;
    text-align: center;
}
.purchase-modal .modal-content .btn-group a {
    display: inline-block;
    border-radius: 5px;
    border: 1px solid transparent;
    box-sizing: border-box;
    width: 101px;
    height: 35px;
    line-height: 35px;
    font-family: NanumBarunGothic, sans-serif;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    background-color: #fe5858;
    color: #ffffff;
    letter-spacing: 2px;
}
.purchase-modal .modal-content .btn-group a.finished {
    background-color: #feba01;
}

.purchase-modal .modal-content pre {
    height: 170px;
    margin: 0;
    font-size: 11px;
}
.purchase-modal .modal-content div.finished {
    height: 170px;
    padding: 20px;
}
.purchase-modal .modal-content div.finished p {
    width: 100%;
    margin: 30px 0 0 ;
    font-size: 18px;
    text-align: center;
}
.purchase-modal .modal-content div.finished p a {
    color: #fe5858;
}

.video-modal {
    position: absolute;
    z-index: 1;
    /*padding-top: 50px;*/
    top: 50px;
    left: 100px;
    right: 100px;
    /*overflow: auto;*/
}

.video-modal .modal-content {
    margin: auto;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 1280px;
    max-height: 1280px;
    background-color: white;
}

.video-modal .modal-content .close {
    position: absolute;
    top: -25px;
    right: -50px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}

/*
    폰트 검색
 */
.font-search {
    padding: 0 128px;
}

.font-search .search-content {
    display: flex;
}

.font-search .search-list {
    flex-basis: 71%;
    display: flex;
    position: relative;
    flex-direction: column;
}
.font-search .search-list p {
    margin-bottom: 0;
}
.font-search .search-list button {
    margin-bottom: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.font-search .search-list .filter-group {
    padding: 18px 0;
    border-bottom: 1px solid #c5c5c5;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.font-search .search-list .filter-group .keyword {
    display: none;
}
.font-search .search-list .filter-group .page{
    flex-basis: 100%;
    display: inline-flex;
}
.font-search .search-list .filter-group .keyword input{
    border: 1px solid #feba01;
    margin: 0;
    width: inherit;
    flex-grow: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.font-search .search-list .filter-group .keyword button img{
    margin: 0;
}
.font-search .search-list .filter-group .page {
    justify-content: space-between;
    align-items: center;
}
/*
.search-list .filter-group input:checked+label {
    background-color: #ffb400;
    border: none;
    color:  #414040;
}
.search-list .filter-group label {
    width: 104px;
    height: 35px;
    line-height: 35px;
    border: 1px solid #afaeae;
    border-radius: 20px;
    box-sizing: border-box;
    cursor: pointer;
    text-align: center;
    font-family: NanumBarunGothic, sans-serif;
    color:  #868585;
    font-size: 15px;
    margin-right: 10px;
    letter-spacing: 1px;
}
*/


.font-search .search-list .filter-group p {
    margin-left: 15px;
    font-family: NanumBarunGothic, sans-serif;
    color:  #868585;
    font-size: 15px;
    letter-spacing: 1px;
}
.font-search .search-list .filter-group strong {
    margin-left: 2px;
    letter-spacing: -1px;
}

.font-search .search-list .filter-group select{
    border: 1px solid #cccccc;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 8px;
    font-family: NanumBarunGothic, sans-serif;
    color:  #4f4e4e;
    font-size: 14px;
    margin-right: 18px;
    letter-spacing: 1px;
}

.font-search .search-list .default {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
}

.font-search .search-list .spinner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 100%;
    display: flex;
    justify-content: center;
}
.font-search .search-list .spinner img {
    margin: 0;
    align-self: center;
}

.font-search .search-list ul{
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
}
.font-search .search-list ul li {
    clear: both;
    display: flex;
    margin-right: 10px;
    border-bottom: 1px solid #c5c5c5;
}
.font-search .search-list ul li .title-group {
    float: left;
    width: 95%;
}
.font-search .search-list ul li .title {
    padding: 16px 0;
    position: relative;
}
.font-search .search-list ul li .title p,
.font-search .search-list ul li .title input {
    font-size: 36px;
    line-height: 36px;
    margin: 0;
    padding: 10px 0;
    border: none;
    background-color: #ffffff;
    outline: none;
}

.font-search .search-list ul li .title input[type=text]::-ms-clear {
    display:none;
}

.font-search .search-list ul li .title .clear {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 25px;
    cursor: pointer;
    align-items: center;
}

.font-search .search-list ul li .title input:focus+.clear{
    display: flex;
}

.font-search .search-list ul li .title .clear:active,
.font-search .search-list ul li .title .clear:hover {
    display: flex;
}

.font-search .search-list ul li .basket-group {
    float: right;
    align-self: center;
}

.font-search .search-list ul li .basket-group span {
    cursor: pointer;
}

.font-search .search-list ul li .button-group {
    display: inline-block;
    width: 32%;
    vertical-align: middle;
    text-align: right;
}
.font-search .search-list ul li .button-group .btn{
    border-radius: 5px;
    border: 1px solid transparent;
    box-sizing: border-box;
    width: 101px;
    height: 35px;
    line-height: 35px;
    display: inline-block;
    font-family: NanumBarunGothic, sans-serif;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    letter-spacing: 1px;
}
.font-search .search-list ul li .button-group .btn img {
    vertical-align: middle;
    margin: 0 7px 3px 0;
}

/*.search-list ul li .button-group .btn.detail {
    border: 1px solid #cccccc;
    background-color:  #ffffff;
    color:  #4f4e4e;
}*/

.font-search .search-list ul li .button-group .btn.buy {
    background-color: #fe5858;
    color: #ffffff;;
}

.font-search .search-list ul li .button-group .btn+.btn {
    margin-left: 8px;
}
.font-search .search-list ul li .desc {
    font-family: NanumBarunGothicBold, sans-serif;
    color:  #868585;
    font-size: 13px;
    display: flex;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.font-search .search-list ul li .desc:hover {
    color: #FFB400;
}
.font-search .search-list ul li .desc span+span:before {
    content: '/';
    margin: 0 5px;
}
.font-search .search-list ul li .btn{
    border-radius: 5px;
    box-sizing: border-box;
    width: 101px;
    height: 35px;
    line-height: 35px;
    display: inline-block;
    font-family: NanumBarunGothic, sans-serif;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    letter-spacing: 1px;
    border: 1px solid #cccccc;
    background-color:  #ffffff;
    color:  #4f4e4e;
}

.font-search .search-list ul li .btn img {
    vertical-align: middle;
    margin: 0 7px 3px 0;
}

.font-search .search-list ul li .btn.detail {
    margin: 0 10px 10px;
}

.font-search .search-list ul li .desc .btn {
    margin-left: 10px;
}

.font-search .search-form {
    flex-basis: 29%;
    background-color: #514d49;
    box-sizing: border-box;
}
.font-search .search-form ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.font-search .search-form input[type='checkbox'] {
    display: none;
}
.font-search .search-form ul li {
    display: inline-block;
}

.font-search .search-form .header {
    width: 100%;
    padding: 26px 28px;
    box-sizing: border-box;
    border-bottom: 1px solid #433e3a;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.font-search .search-form .header h1{
    font-family: NanumBarunGothic, sans-serif;
    color:  #ffffff;
    font-size: 15px;
    padding: 0;
    line-height: 1.2;
    letter-spacing: 1px;
}
.font-search .search-form .header select{
    border: 1px solid #cccccc;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 8px;
    font-family: NanumBarunGothic, sans-serif;
    color:  #4f4e4e;
    font-size: 14px;
    letter-spacing: 1px;
}

.font-search .search-form .header span {
    font-family: NanumBarunGothic, sans-serif;
    color:  #ffffff;
    font-size: 13px;
    float: right;
    background-color: transparent;
    letter-spacing: 1px;
}
.font-search .search-form div>label {
    font-family: NanumBarunGothic, sans-serif;
    color:  #ffffff;
    font-size: 12px;
    margin-bottom: 17px;
    display: inline-block;
    width: 100%;
    line-height: 1;
    letter-spacing: 1px;
}
.font-search .search-form .keyword-group {
    padding: 21px 27px 30px;
    border-bottom: 1px solid #433e3a;
}
.font-search .search-form .keyword-group div {
    display: flex;
}
.font-search .search-form .keyword-group input {
    border-radius: 5px 0 0 5px;
    margin: 0;
    flex-grow: 1;
    background-color: #2f2c29;
    border: 1px solid #191715;
    box-sizing: border-box;
    padding: 8px 10px;
    font-family: NanumBarunGothic, sans-serif;
    color:  #ffffff;
    font-size: 16px;
    width: 0;
    letter-spacing: 1px;
}
.font-search .search-form .keyword-group button {
    margin: 0;
    border-radius: 0 5px 5px 0;
    padding: 9px 11px 8px;
    box-sizing: border-box;
}
.font-search .search-form .keyword-group button img {
    max-width: none;
    margin: 0;
}
.font-search .search-form .design-group {
    padding: 25px 0 0 28px;
    border-bottom: 1px solid #433e3a;
}
.font-search .search-form .design-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.font-search .search-form .design-group ul li {
    width: 68px;
    box-sizing: border-box;
    margin: 0 20px 12px 0;
}
.font-search .search-form .design-group ul li label {
    cursor: pointer;
    display: inline-block;
    text-align: center;
}
.font-search .search-form .design-group ul li span {
    display: inline-block;
    background-color: transparent;
    font-family: NanumBarunGothic, sans-serif;
    color:  #7d7c7c;
    font-size: 12px;
    letter-spacing: 1px;
}
.font-search .search-form .design-group ul li span.btn {
    border: 1px solid #191715;
    box-sizing: border-box;
    background-color: #2f2c29;
    border-radius: 5px;
    width: 68px;
    height: 52px;
    line-height: 52px;
    color:  #ffffff;
    font-size: 25px;
}

#design_1:checked ~ label span.btn,
#design_2:checked ~ label span.btn,
#design_3:checked ~ label span.btn,
#design_4:checked ~ label span.btn,
#design_5:checked ~ label span.btn {
    border: 1px solid #ffffff;
}

#design_1 ~ label span.btn {
    font-family: H2MJRL, sans-serif;
}
#design_2 ~ label span.btn {
    font-family: Gungsuh, sans-serif;
}
#design_3 ~ label span.btn {
    font-family: H2MKRB, sans-serif;
}
#design_4 ~ label span.btn {
    font-family: HYToe, sans-serif;
}
#design_5 ~ label span.btn {
    font-family: HYBongja, sans-serif;
}


.font-search .search-form .etc-groups {
    padding: 22px 27px 25px;
    border-bottom: 1px solid #433e3a;
}
.font-search .search-form .etc-groups .use-group {
    display: inline-block;
}
.font-search .search-form .etc-groups .weight-group {
    display: inline-block;
}
.font-search .search-form .etc-groups .use-group>label,
.font-search .search-form .etc-groups .weight-group>label{
    font-family: NanumBarunGothic, sans-serif;
    color:  #ffffff;
    font-size: 12px;
    margin-bottom: 17px;
    display: inline-block;
    width: 100%;
    line-height: 1;
    letter-spacing: 1px;
}
.font-search .search-form .etc-groups ul li label {
    cursor: pointer;
    display: inline-block;
    text-align: center;
    width: 100%;
}
.font-search .search-form .etc-groups ul li label span {
    background-color: transparent;
    font-family: NanumBarunGothic, sans-serif;
    color:  #7d7c7c;
    font-size: 12px;
    letter-spacing: 1px;
}
.font-search .search-form .etc-groups ul li .btn {
    display: inline-block;
    border: 1px solid #191715;
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    line-height: 48px;
    border-radius: 0;
    font-family: HYGothic_C1_400, sans-serif;
    font-size: 25px;
    background-color:  #2f2c29;
    color:  #8c8a89;
}
.font-search .search-form .etc-groups ul li:first-child .btn {
    border-radius: 5px 0 0 5px;
}
.font-search .search-form .etc-groups ul li:last-child .btn {
    border-radius: 0 5px 5px 0;
}
.font-search .search-form .etc-groups ul li .btn img {
    vertical-align: middle;
    margin: 0;
}

.font-search .search-form .etc-groups ul li .btn img+span {
    vertical-align: middle;
    font-size: 18px;
}
.font-search .search-form .use-group {
    padding-right: 12px;
    box-sizing: border-box;
}
.font-search .search-form .use-group ul li {
    width: 58px;
}

.font-search .search-form .weight-group ul li {
    width: 38px;
}

#use_1:checked ~ label span.btn,
#use_2:checked ~ label span.btn,
#weight_1:checked ~ label span.btn,
#weight_2:checked ~ label span.btn,
#weight_3:checked ~ label span.btn {
    border: 1px solid #ffffff;
}
#weight_1 ~ label span.btn {
    font-family: HYGothic_C1_100, sans-serif;
}
#weight_2 ~ label span.btn {
    font-family: HYGothic_C1_500, sans-serif;
}
#weight_3 ~ label span.btn {
    font-family: HYGothic_C1_800, sans-serif;
}

.font-search .search-form .company-group {
    /*padding: 28px;
    border-bottom: 1px solid #433e3a;*/
}

.font-search .search-form .company-group select {
    width: 100%;
    border: 1px solid #191715;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #2f2c29;
    height: 38px;
    font-family: NanumBarunGothic, sans-serif;
    color:  #8c8a89;
    font-size: 14px;
    padding-left: 15px;
    letter-spacing: 1px;
}
.font-search .search-form .writing-group {
    /*padding: 29px;*/
}

.font-search .search-form .writing-group input {
    display: inline-block;
    border-radius: 5px 0 0 5px;
    margin: 0;
    width: 83%;
    background-color: #2f2c29;
    border: 1px solid #191715;
    box-sizing: border-box;
    padding: 8px 10px;
    font-family: NanumBarunGothic, sans-serif;
    color: rgba(173, 173, 173, 0.5);
    font-size: 12px;
    vertical-align: middle;
    letter-spacing: 1px;
}

.font-search .search-form .writing-group button {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
    border-radius: 0 5px 5px 0;
    padding: 9px 11px 8px;
}

.font-search .search-form .writing-group button img {
    margin: 0;
    vertical-align: middle;
}

.font-search .search-pagination .pagination-mobile {
    display: none;
    flex-wrap: wrap;
}
.font-search .search-pagination .pagination-mobile a {
    flex-basis: 100%;
    margin: 5px 0;
    background-color: #feba01;
    color: #ffffff;
    padding: 10px;
    border-radius: 5px;
}
.font-search .search-pagination .pagination-mobile a.disabled {
    cursor: not-allowed;
}
/**
    Pagination Custom Start
 */
.font-search .search-pagination {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.font-search .search-pagination .total-page {
    font-family: NanumBarunGothic, sans-serif;
    color:  #9e9e9e;
    font-size: 12px;
    text-align: left;
    letter-spacing: 1px;
    margin-right: 10%;
}
.font-search .search-pagination .pagination-box {
    display: inline-block;
    padding: 24px 0 45px;
}

.font-search .search-pagination .pagination {
    margin: 0;
    padding: 0;
    list-style: none;
}
.font-search .search-pagination .pagination li {
    display: inline-block;
    text-align: center;
    margin-right: 6px;
}
.font-search .search-pagination .pagination li a {
    font-family: NanumBarunGothic, sans-serif;
    border-radius: 5px;
    background-color:  #ceccc8;
    display: inline-block;
    width: 41px;
    height: 41px;
    line-height: 41px;
    color:  #5b5a5a;
    font-size: 16px;
    vertical-align: middle;
    letter-spacing: 1px;
}
.font-search .search-pagination .pagination li.active a {
    background-color:  #ffb400;
    color: #ffffff;
}
.font-search .search-pagination .pagination li.disabled a {
    cursor: not-allowed;
}
/*
    Pagination Custom End
 */

.font-search .search-list .search-box {
    border-radius: 5px;
    background-color:  #eeeeee;
    height: 64px;
    display: flex;
    align-items: center;
    padding: 13px 29px 14px;
}
.font-search .search-list .search-box .select {
    flex-basis: 127px;
    text-align: center;
    margin-right: 10px;
}
.font-search .search-list .search-box .input {
    flex-grow: 1;
}
.font-search .search-list .search-box .input input{
    border: 1px solid #cccccc;
    box-sizing: border-box;
    background-color: #f5f5f5;
    width: 90%;
    height: 38px;
    margin: 0;
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 12px;
    padding-left: 13px;
}
.font-search .search-list .search-box .range {
    font-family: NanumBarunGothic, sans-serif;
    color:  #4f4e4e;
    flex-basis: 148px;
    display: flex;
    align-items: center;
    letter-spacing: 1px;
}
.font-search .search-list .search-box .range .min-label {
    margin-right: 11px;
    font-size: 14px;
}
.font-search .search-list .search-box .range .max-label {
    margin-left: 11px;
    font-size: 25px;
}

.font-search .search-list .search-box .sort {
    display: none;
}

/*
    react-select Custom Start
 */
.font-search .search-list .Select {
    text-align: left;
}
.font-search .search-list .Select-control,
.font-search .search-list .is-open>.Select-control,
.font-search .search-list .Select-option,
.font-search .search-list .Select-menu-outer {
    background-color: #fdb201;
}
.font-search .search-list .Select-arrow {
    border-color: #fff transparent transparent;
    width: 12px;
}
.font-search .search-list .Select-arrow-zone:hover > .Select-arrow {
    border-top-color: #ffffff;
}
.font-search .search-list .is-open .Select-arrow {
    border-bottom-color: #ffffff;
}
.font-search .search-list .Select-value {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 15px;
}
.font-search .search-list .Select-menu-outer {
    border-radius: 5px;
    margin-top: 3px;
}
.font-search .search-list .Select-option {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 15px;
}
.font-search .search-list .Select-option.is-focused {
    background-color: #eb9c01;
}
/*
    react-select Custom End
 */

/*
    react-input-range Custom start
 */
.font-search .search-list .input-range {
    padding: 0 11px;
    width: inherit;
    flex-grow: 1;
}
.font-search .search-list .input-range .input-range__label--min,
.font-search .search-list .input-range .input-range__label--max{
    display: none;
}
.font-search .search-list .input-range .input-range__label--value {
    display: block;
}
.font-search .search-list .input-range .input-range__track--active,
.font-search .search-list .input-range .input-range__track {
    background: #a4a4a4;
    height: 5px;
}
.font-search .search-list .input-range .input-range__slider {
    background-color: #fdb201;
    border-color: #fdb201;
}
/*
    react-input-range Custom end
 */

/*
    snackbar start
 */
#snackbar {
    width: 400px;
    position: fixed;
    z-index: 2;
    transform: translateX(-400px);

    opacity: 0;
    visibility: hidden;
    bottom: -52px;
    transition: opacity 0.5s, visibility 0.5s, bottom 0.5s;
}
#snackbar.show {
    opacity: 1;
    visibility: visible;
    bottom: 0;
    transition: opacity 0.5s, visibility 0.5s, bottom 0.5s;
}

#snackbar .header {
    position: relative;
    background-color: #333;
    padding: 16px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#snackbar .header h1 {
    padding: 0;
    color: #fff;
    font-size: 17px;
    flex-grow: 1;
}
#snackbar .header span {
}
#snackbar ul {
    clear: both;
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column-reverse;
    background-color: white;
    overflow-y: scroll;
    max-height: 0;
    transition: max-height 0.5s ease;
}

#snackbar ul.show {
    max-height: 500px;
    transition: max-height 0.5s ease;
}

#snackbar ul li {
    width: 100%;
    box-sizing: border-box;
    border: none;
    margin: 0;
    padding: 10px;
    align-items: center;
}
#snackbar ul li span {
    margin-left: 10px;
    cursor: pointer;
}

/*
    snackbar end
 */

/**
    overlay start
 */
#overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    z-index: -1;
    opacity: 0;
    transition: background-color 0.5s, opacity 0.5s, z-index 0.5s;
}
#overlay.show {
    opacity: 1;
    z-index: 1;
    background-color: rgba(0,0,0,0.5);
    transition: background-color 0.5s, opacity 0.5s, z-index 0.5s;
}
/**
    overlay end
 */
/*
    폰트검색 끝
 */
/*
    폰트 상세 보기 시작
 */
.font-detail {
    padding: 36px 128px 0;
}
.font-detail h2{
    font-family: NanumBarunGothic, sans-serif;
    color:  #fe9601;
    font-size: 17px;
    padding: 0;
    line-height: 1.2;
    margin-bottom: 10px;
    letter-spacing: 1px;
}
.font-detail .header .title-group .desc{
    font-family: NanumBarunGothicBold, sans-serif;
    color:  #868585;
    font-size: 13px;
    letter-spacing: 1px;
}
.font-detail .header .title-group .desc span+span:before {
    content: '/';
    margin: 0 5px;
}
.font-detail .header .title-group .title {
    padding: 20px 0;
    display: flex;
    border-bottom: 1px solid #cccccc;
}
.font-detail .header .title-group .title p {
    flex-grow: 1;
    font-size: 36px;
    line-height: 36px;
    margin: 0;
}
.font-detail .header .title-group .title .btn {
    flex-basis: 100px;
    border-radius: 5px;
    border: 1px solid transparent;
    box-sizing: border-box;
    width: 101px;
    height: 35px;
    line-height: 35px;
    font-family: NanumBarunGothic, sans-serif;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    background-color: #fe5858;
    color:  #ffffff;
    letter-spacing: 1px;
}
.font-detail .header .title-group .title .btn img {
    vertical-align: middle;
    margin: 0 7px 3px 0;
}

.font-detail .contents {
    display: flex;
    justify-content: space-between;
    padding: 26px 0 0;
}
.font-detail .section {
    width: 74%;
}
.font-detail .article {
    margin-bottom: 30px;
}

.font-detail .article:last-child {
    margin: 0;
}

.font-detail ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.font-detail .size ul li {
    padding: 10px 10px 10px 0;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.font-detail .size ul li:nth-child(1) {
    font-size: 28px;
}
.font-detail .size ul li:nth-child(2) {
    font-size: 24px;
}
.font-detail .size ul li:nth-child(3) {
    font-size: 20px;
}

.font-detail .size ul li .badge {
    width: 44px;
    display: inline-block;
    line-height: 27px;
    background-color: #cccccc;
    border-radius: 5px;
    vertical-align: middle;
    text-align: center;
    font-family: NanumBarunGothic, sans-serif;
    color:  #525251;
    font-size: 15px;
    margin-right: 15px;
    letter-spacing: 1px;
}
.font-detail .info p.desc {
    margin: 20px 0 30px;
    font-family: NanumBarunGothic, sans-serif;
    color:  #414040;
    font-size: 14px;
    letter-spacing: 1px;
}

.font-detail .info ul li {
    font-family: NanumBarunGothic, sans-serif;
    color:  #414040;
    font-size: 13px;
    letter-spacing: 1px;
}
.font-detail .info ul li span {
    display: inline-block;
    width: 130px;
    margin-right: 30px;
    color:  #7e7e7e;
}

.font-detail .font-list .search-box {
    border-radius: 5px;
    background-color:  #eeeeee;
    height: 64px;
    display: flex;
    align-items: center;
    padding: 13px 29px 14px;
}
.font-detail .font-list .search-box .select {
    flex-basis: 127px;
    text-align: center;
    margin-right: 10px;
}
/*
    react-select Custom Start
 */
.font-detail .Select {
    text-align: left;
}
.font-detail .Select-control,
.font-detail .is-open>.Select-control,
.font-detail .Select-option,
.font-detail .Select-menu-outer {
    background-color: #fdb201;
}
.font-detail .Select-arrow {
    border-color: #fff transparent transparent;
    width: 12px;
}
.font-detail .Select-arrow-zone:hover > .Select-arrow {
    border-top-color: #ffffff;
}
.font-detail .is-open .Select-arrow {
    border-bottom-color: #ffffff;
}
.font-detail .Select-value {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 15px;
}
.font-detail .Select-menu-outer {
    border-radius: 5px;
    margin-top: 3px;
}
.font-detail .Select-option {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 15px;
}
.font-detail .Select-option.is-focused {
    background-color: #eb9c01;
}
/*
    react-select Custom End
 */

.font-detail .font-list .search-box .input {
    flex-grow: 1;
}
.font-detail .font-list .search-box .input input{
    border: 1px solid #cccccc;
    box-sizing: border-box;
    background-color: #f5f5f5;
    width: 230px;
    height: 38px;
    margin: 0;
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 12px;
    padding-left: 13px;
}
.font-detail .font-list .search-box .range {
    font-family: NanumBarunGothic, sans-serif;
    color:  #4f4e4e;
    flex-basis: 148px;
    display: flex;
    align-items: center;
    letter-spacing: 1px;
}
.font-detail .font-list .search-box .range .min-label {
    margin-right: 11px;
    font-size: 14px;
}
.font-detail .font-list .search-box .range .max-label {
    margin-left: 11px;
    font-size: 25px;
}
/*
    react-input-range Custom start
 */
.font-detail .input-range {
    padding: 0 11px;
    width: inherit;
    flex-grow: 1;
}
.font-detail .input-range .input-range__label--min,
.font-detail .input-range .input-range__label--max{
    display: none;
}
.font-detail .input-range .input-range__label--value {
    display: block;
}
.font-detail .input-range .input-range__track--active,
.font-detail .input-range .input-range__track {
    background: #a4a4a4;
    height: 5px;
}
.font-detail .input-range .input-range__slider {
    background-color: #fdb201;
    border-color: #fdb201;
}
/*
    react-input-range Custom end
 */


.font-detail .font-list ul li{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #cccccc;
}
.font-detail .font-list .title-group{
    flex-grow: 1;
}
.font-detail .font-list .title-group .title {
    padding: 36px 26px 26px;
}
.font-detail .font-list .title-group .title p {
    font-size: 32px;
    margin: 0;
}
.font-detail .font-list .title-group .desc {
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    outline: none;
    font-family: NanumBarunGothicBold, sans-serif;
    color:  #868585;
    font-size: 13px;
    padding: 0 23px 21px;
    letter-spacing: 1px;
}
.font-detail .font-list .title-group .desc:hover {
    color: #FFB400;
}
.font-detail .font-list .title-group .desc span+span:before{
    content: '/';
    margin: 0 5px;
}

.font-detail .font-list .button-group{
    flex-basis: 100px;
}
.font-detail .font-list .button-group .btn{
    border-radius: 5px;
    border: 1px solid transparent;
    box-sizing: border-box;
    width: 101px;
    height: 35px;
    line-height: 35px;
    display: inline-block;
    font-family: NanumBarunGothic, sans-serif;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    letter-spacing: 1px;
}
.font-detail .font-list .button-group .btn.detail {
    border: 1px solid #cccccc;
    background-color:  #ffffff;
    color:  #4f4e4e;
}
.font-detail .font-list .button-group .btn.detail img {
    vertical-align: middle;
    margin: 0 7px 3px 0;
}

.font-detail .font-list .list-btn-group {
    text-align: center;
    padding: 30px 0 14px;
}
.font-detail .font-list .list-btn-group .btn{
    background-color: #a29e97;
    border-radius: 20px;
    width: 178px;
    height: 47px;
    font-family: NanumGothic, sans-serif;
    color:  #ffffff;
    font-size: 18px;
    margin: 0;
    display: inline-block;
    line-height: 47px;
}

.font-detail .aside {
    width: 24%;
}
.font-detail .package .panel{
    border: 1px solid #cccccc;
    border-radius: 10px;
    margin-bottom: 10px;
    box-sizing: border-box;
}
.font-detail .package .panel .body{
    height: 121px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}
.font-detail .package .panel .body p{
    width: 200px;
    height: 50px;
    line-height: 50px;
    font-size: 36px;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
}
.font-detail .package .panel .footer{
    height: 53px;
    display: flex;
    align-items: center;
    background-color: #eeeeee;
    padding: 0 19px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.font-detail .package .panel .footer .badge{
    background-color:  #feb404;
    border-radius: 5px;
    flex-basis: 21px;
    height: 21px;
    font-family: Dinbla, sans-serif;
    color:  #ffffff;
    font-size: 15px;
    text-align: center;
}
.font-detail .package .panel .footer .company{
    font-family: NanumBarunGothicUltraLight, sans-serif;
    color:  #1f1f1f;
    font-size: 15px;
    padding-left: 7px;
    flex-grow: 1;
    letter-spacing: 1px;

}
.font-detail .package .panel .footer .list-count {
    font-family: NanumBarunGothicUltraLight, sans-serif;
    color:  #1f1f1f;
    font-size: 15px;
    letter-spacing: 1px;
}
.font-detail .package .price {
    border-radius: 10px;
    background-color:  #fe5858;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    font-family: NanumBarunGothicBold, sans-serif;
    color:  #ffffff;
    font-size: 20px;
    margin-bottom: 30px;
    cursor: pointer;
    letter-spacing: 1px;
}
.font-detail .package .price .desc {
    font-size: 14px;
}
.font-detail .package .font-list h3 {
    font-family: NanumBarunGothic, sans-serif;
    color:  #545352;
    font-size: 14px;
    line-height: 1.2;
    padding: 0;
    margin: 0;
    letter-spacing: 1px;
}
.font-detail .package .font-list ul{
    border-radius: 10px;
    background-color: transparent;
    margin: 16px 0;
    border: 1px solid #cccccc;
    padding: 22px 21px 16px;
}
.font-detail .package .font-list ul li {
    border: none;
    margin-bottom: 5px;
}
.font-detail .package .font-list ul li.active {
    text-decoration: underline;
    font-weight: bold;
}

.font-detail .package .font-list ul li a {
    font-family: NanumBarunGothicBold, sans-serif;
    color:  #353434;
    font-size: 14px;
    letter-spacing: 1px;
}

/*
    폰트 상세 보기 끝
 */


/*
    한글틀 상용
 */
.commercial {
    padding: 43px 128px 59px;
}
.commercial>div {
    width: 100%;
    display: inline-block;
}
.commercial .title h1 {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 28px;
    line-height: normal;
    padding-bottom: 27px;
    letter-spacing: 1px;
}
.commercial .title p {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.8);
    font-size: 15px;
    margin-bottom: 0;
}
.commercial .title p span{
    position: relative;
    z-index: 0;
}
.commercial .title p span:after {
    position: absolute;
    content: '';
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 210px;
    height: 5px;
    background-color: #dfd9d1;
    z-index: -1;

}

.commercial .embed {
    margin: 33px 0 52px;
    cursor: pointer;
    position: relative;
}
.commercial .embed img {
    margin: 0;
}
.commercial .embed video {
    width: 100%;
    height: 522px;
}

.commercial .embed .play-btn {
    position: absolute;
    top: 25%;
    left: 0;
    right: 0;
    margin: 0 auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.commercial .embed:hover .play-btn {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s, visibility 0.5s;
}


.commercial .guide+.title{
    margin-top: 43px;
}
.commercial .guide h2 {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 22px;
    padding-bottom: 23px;
    border-bottom: 1px solid #dddddd;
    letter-spacing: 1px;
}
.commercial .guide ul {
    display: flex;
    list-style: none;
    padding: 24px 0 0 0;
    margin: 0;
}
.commercial .guide ul>li {
    display: flex;
    width: 20%;
    flex-direction: column;
}
.commercial .guide ul>li+li {
    padding-left: 1%;
}
.commercial .guide ul>li>div, .commercial .guide ul>li>ul {
    width: 100%;
    padding-left: 22px;
    box-sizing: border-box;
}
.commercial .guide ul>li>div {
    height: 59px;
    line-height: 59px;
    text-align: left;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #b9ab9a;
    font-family: NanumBarunGothic, sans-serif;
    color:  #ffffff;
    font-size: 17px;
    letter-spacing: 1px;
}
.commercial .guide ul>li>div span {
    font-family: AvantGardeITCTTDemi, NanumGothic, sans-serif;
    color:  #ffffff;
    font-size: 22px;
    margin-right: 12px;
    vertical-align: middle;
}

.commercial .guide ul>li>ul {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 23px 20px 0 19px;
    background-color: #eeeeee;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

.commercial .guide ul>li>ul>li {
    width: 100%;
    font-family: NanumBarunGothic, sans-serif;
    color:  #5a5a5a;
    /*font-size: 15px;*/
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 12px;
    padding-left: 10px;
    box-sizing: border-box;
    letter-spacing: 1px;
    position: relative;
}
.commercial .guide ul li>ul li:before {
    content: '\2022';
    color: #b9ab9a;
    position: absolute;
    left: -5px;
}
.commercial .guide ul li>ul li.label {
    padding: 0;
    margin-left: 39px;
    background-color:  #b9ab9a;
    width: 78px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 20px;
    font-family: NanumBarunGothic, sans-serif;
    color:  #ffffff;
    font-size: 13px;
    letter-spacing: 1px;
}
.commercial .guide ul li>ul li.label:before {
    content: '';
}

.commercial .contents  {
    margin-top: 66px;
    display: flex;
}
.commercial .contents>div{
    flex-basis: 50%;
    width: 50%;
}
.commercial .contents .download .content-group{
    background-color:  #b9ab9a;
}
.commercial .contents .play .content-group{
    background-color:  #ffc001;
}
.commercial .contents .purchase .content-group{
    background-color:  #fd5656;
}
.commercial .contents .content-group{
    height: 136px;
    display: flex;
    align-items: center;
    padding-left: 28px;
    box-sizing: border-box;
    margin-bottom: 18px;
}
.commercial .contents .content-group *{
    display: inline-block;
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 22px;
    vertical-align: middle;
    letter-spacing: 1px;
}
.commercial .contents .content-group img {
    margin-bottom: 0;
    vertical-align: middle;
}
.commercial .contents .content-group .heading{
    width: 168px;
    height: 61px;
    box-sizing: border-box;
    text-align: center;
    border: 3px solid #FFFFFF;
    font-family: HYGothic_C1_700, sans-serif;
    color:  #ffffff;
    font-size: 14px;
    position: relative;
    padding-top: 18px;
}
.commercial .contents .content-group .heading span {
    font-family: HYSalon-Bold, sans-serif;
    color:  #ffffff;
    font-size: 27px;
    display: inline;
    vertical-align: middle;
    margin-right: 9px;
}
.commercial .contents .content-group .heading img {
    margin-bottom: 0;
    position: absolute;
    top: -14px;
    left: 152px;
}

.commercial .contents .content-group .text{
    padding: 0 21px;
}
.commercial .contents .content-group>p img {
    vertical-align: initial;
}
/*.commercial .contents .content-group+p {
    font-family: NanumBarunGothic, sans-serif;
    color:  #5a5a5a;
    font-size: 15px;
    line-height: normal;
    letter-spacing: 1px;
}*/

.commercial .contents p {
    margin-bottom: 0;
    font-family: NanumBarunGothic, sans-serif;
    color:  #5a5a5a;
    font-size: 15px;
    line-height: normal;
    padding-left: 30px;
    letter-spacing: 1px;
}

.commercial .contents .purchase .heading {
    width: 147px;
}


/*
    한글틀 공개용
 */
.public {
    padding: 43px 128px 63px;
}
.public>div {
    width: 100%;
    display: inline-block;
}
.public .title h1 {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 28px;
    line-height: normal;
    padding-bottom: 27px;
    letter-spacing: 1px;
}
.public .title h1 .label {
    display: inline-block;
    background-color:  #ffb400;
    width: 45px;
    height: 20px;
    font-family: AvantGardeMdITCTTBold, NanumGothic, sans-serif;
    color:  #493e35;
    font-size: 15px;
    text-align: center;
    vertical-align: top;
    margin-left: 5px;
    padding-top: 3px;
    letter-spacing: -1px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.public .title p {
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.8);
    font-size: 15px;
    margin-bottom: 0;
}
.public .title p span{
    position: relative;
    z-index: 0;
}
.public .title p span:after {
    position: absolute;
    content: '';
    margin: 0 auto;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100px;
    height: 5px;
    background-color: #dfd9d1;
    z-index: -1;
}
.public .embed {
    margin: 33px 0 52px;
    cursor: pointer;
    position: relative;
}

.public .embed img {
    margin: 0;
}
.public .embed .play-btn {
    position: absolute;
    top: 25%;
    left: 0;
    right: 0;
    margin: 0 auto;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0.3s;
}

.public .embed:hover .play-btn {
    visibility: visible;
    opacity: 1;
    transition: opacity 0.5s, visibility 0.5s;
}

.public .embed video {
    width: 100%;
    height: 522px;
}
.public .guide h2 {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 22px;
    padding-bottom: 23px;
    border-bottom: 1px solid #dddddd;
    letter-spacing: 1px;
}
.public .guide ul {
    display: flex;
    list-style: none;
    padding: 24px 0 0 0;
    margin: 0;
}
.public .guide ul>li {
    width: 20%;
    display: flex;
    flex-direction: column;
}
.public .guide ul>li+li {
    padding-left: 1%;
}
.public .guide ul>li>div, .public .guide ul>li>ul {
    width: 100%;
    padding-left: 22px;
    box-sizing: border-box;
}
.public .guide ul>li>div {
    height: 59px;
    line-height: 59px;
    text-align: left;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    background-color: #b9ab9a;
    font-family: NanumBarunGothic, sans-serif;
    color:  #ffffff;
    font-size: 17px;
    letter-spacing: 1px;
}
.public .guide ul>li>div span {
    font-family: AvantGardeITCTTDemi, NanumGothic, sans-serif;
    color:  #ffffff;
    font-size: 22px;
    margin-right: 12px;
    vertical-align: middle;
}

.public .guide ul>li>ul {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    padding: 23px 20px 0 19px;
    background-color: #eeeeee;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.public .guide ul li>ul li {
    float: none;
    width: 100%;
    font-family: NanumBarunGothic, sans-serif;
    color:  #5a5a5a;
    /*font-size: 15px;*/
    font-size: 14px;
    margin-bottom: 12px;
    padding-left: 10px;
    box-sizing: border-box;
    position: relative;
    letter-spacing: 1px;
}
.public .guide ul li>ul li:before {
    content: '\2022';
    color: #b9ab9a;
    position: absolute;
    left: -5px;
}

.public .contents  {
    display: flex;
    margin-top: 66px;
}
.public .contents>div{
    width: 50%;
    flex-basis: 50%;
}
.public .contents .download .content-group{
    background-color:  #b9ab9a;
}
.public .contents .play .content-group{
    background-color:  #ffc001;
}
.public .contents .content-group{
    height: 136px;
    display: flex;
    align-items: center;
    padding-left: 41px;
    box-sizing: border-box;
    margin-bottom: 18px;
}
.public .contents .content-group div{
    display: inline-block;
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 22px;
    vertical-align: middle;
    letter-spacing: 1px;
}
.public .contents .content-group img {
    margin-bottom: 0;
    vertical-align: middle;
}
.public .contents .content-group .heading{
    width: 168px;
    height: 61px;
    box-sizing: border-box;
    text-align: center;
    border: 2px solid #FFFFFF;
    font-family: HYGothic_C1_700, sans-serif;
    color:  #ffffff;
    font-size: 14px;
    position: relative;
    padding-top: 18px;
}
.public .contents .content-group .heading span {
    font-family: HYSalon-Bold, sans-serif;
    color:  #ffffff;
    font-size: 27px;
    display: inline;
    vertical-align: middle;
    margin-right: 9px;
}
.public .contents .content-group .heading img {
    margin-bottom: 0;
    position: absolute;
    top: -14px;
    left: 152px;
}

.public .contents .content-group .text{
    padding: 0 22px;
}

.public .contents .content-group>p {
    display: inline-block;
    vertical-align: middle;
    text-align: right;
}
.public .contents .content-group>p img {
    vertical-align: initial;
}
.public .contents .content-group+p {
    font-family: NanumBarunGothic, sans-serif;
    color:  #5a5a5a;
    font-size: 15px;
    line-height: normal;
    letter-spacing: 1px;
}

.public .contents p {
    font-size: 15px;
    padding-left: 35px;
    margin-bottom: 0;
}

/*
    폰트 관리
 */
.font-manage {
    padding: 43px 130px;
}
.font-manage h1 {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 28px;
    padding-bottom: 18px;
    letter-spacing: 1px;
}
.font-manage h1+p {
    font-family: NanumGothic, sans-serif;
    color:  #3a4554;
    font-size: 13px;
    padding-bottom: 0;
}
.font-manage .sort-box {
    padding: 0 0 19px;
    text-align: right;
    border-bottom: 1px solid #cdcdcd;
}
.font-manage .sort-box select {
    border-radius: 5px;
    box-sizing: border-box;
    background-color:  #ffffff;
    width: 75px;
    height: 35px;
    border: 1px solid #cccccc;
    font-family: NanumBarunGothic, sans-serif;
    color:  #4f4e4e;
    font-size: 14px;
    padding-left: 10px;
    letter-spacing: 1px;
}

.font-manage .font-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.font-manage .font-list li{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #cccccc;
}

.font-manage .font-list .title-group{
    flex-grow: 1;
}
.font-manage .font-list .title-group .title {
    padding: 36px 26px 26px;
}
.font-manage .font-list .title-group .title p {
    font-size: 32px;
    margin: 0;
}
.font-manage .font-list .title-group .desc {
    font-family: NanumBarunGothicBold, sans-serif;
    color:  #868585;
    font-size: 13px;
    padding: 0 23px 21px;
    letter-spacing: 1px;
}
.font-manage .font-list .desc span+span:before{
    content: '/';
    margin: 0 5px;
}

.font-manage .font-list .btn-group{
    display: flex;
    justify-content: space-between;
}
.font-manage .font-list .btn-group .btn{
    border-radius: 5px;
    border: 1px solid transparent;
    box-sizing: border-box;
    width: 101px;
    height: 35px;
    line-height: 35px;
    display: inline-block;
    font-family: NanumBarunGothic, sans-serif;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    letter-spacing: 1px;
}
.font-manage .font-list .btn-group .btn.detail {
    border: 1px solid #cccccc;
    background-color:  #ffffff;
    color:  #4f4e4e;
}
.font-manage .font-list .btn-group .btn.detail img {
    vertical-align: middle;
    margin: 0 7px 3px 0;
}
.font-manage .font-list .btn-group .btn.modify {
    border: 1px solid transparent;
    background-color: #a99786;
    color: #ffffff;
}
/*
    Pagination Custom Start
 */
.search-pagination {
    display: flex;
    justify-content: center;
    width: 100%;
}
.search-pagination .pagination-box {
    padding: 26px 0;
}

.search-pagination .pagination {
    margin: 0;
    padding: 0;
    list-style: none;
}
.search-pagination .pagination li {
    display: inline-block;
    text-align: center;
    margin-right: 6px;
}
.search-pagination .pagination li a {
    font-family: NanumBarunGothic, sans-serif;
    border-radius: 5px;
    background-color:  #ceccc8;
    display: inline-block;
    width: 41px;
    height: 41px;
    line-height: 41px;
    color:  #5b5a5a;
    font-size: 16px;
    vertical-align: middle;
    letter-spacing: 1px;
}
.search-pagination .pagination li.active a {
    background-color:  #ffb400;
    color: #ffffff;
}
.search-pagination .pagination li.disabled a {
    cursor: not-allowed;
}
/*
    Pagination Custom End
 */

.font-manage .btn-box {
    text-align: right;
}
.font-manage .btn-box a {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 178px;
    height: 28px;
    line-height: 28px;
    font-family: NanumGothic, sans-serif;
    color: #6A6A6A;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #F0F0F0 !important;
    text-align: center;
}

/*
    폰트 등록
 */
.font-reg {
    padding: 44px 127px;
}
.font-reg h1 {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 28px;
    padding-bottom: 18px;
    letter-spacing: 1px;
}
.font-reg h1+p {
    font-family: NanumGothic, sans-serif;
    color:  #3a4554;
    font-size: 13px;
    padding-bottom: 40px;
}
.font-reg h2 {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #fe9601;
    font-size: 20px;
    padding-bottom: 15px;
    line-height: 1.2;
    letter-spacing: 1px;
}
.font-reg form {
    border-top: 1px solid #cccccc;
}
.font-reg .form-group {
    border-bottom: 1px solid #cccccc;
    padding: 13px 0;
}
.font-reg .form-group>label {
    display: inline-block;
    width: 28.8%;
    vertical-align: middle;
    padding-left: 22px;
    font-family: NanumGothic, sans-serif;
    color:  #3a4554;
    font-size: 15px;
    box-sizing: border-box;
}
.font-reg .form-group>label.required:after {
    content: '\25C6';
    font-size: 9px;
    color: #ffb400;
    position: relative;
    top: -2px;
    margin-left: 7px;
}
.font-reg .form-group>div {
    display: inline-block;
    width: 71%;
    vertical-align: middle;
}
.font-reg .form-group>div input{
    padding: 0 0 0 14px;
    margin: 0;
}
.font-reg .form-group>div input[type="text"] {
    height: 38px;
    box-sizing: border-box;
    border: 1px solid #cccccc;
    border-radius: 0;
    background-color: #f5f5f5;
    width: 100%;
}


.font-reg .form-group>div label {
    display: inline-block;
    padding-left: 33px;
    margin-right: 2%;
    box-sizing: border-box;
    font-family: NanumGothic, sans-serif;
    color:  #3a4554;
    font-size: 15px;
    height: 38px;
    line-height: 38px;
    cursor: pointer;
    position: relative;
}
.font-reg .form-group>div label:last-child {
    margin-right:0;
}

.font-reg .form-group>div input[type='checkbox'],
.font-reg .form-group>div input[type='radio'] {
    display: none;
}
.font-reg .form-group>div input[type='radio']+label:before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    border-radius: 50%;
    background-color: #cccccc;
    width: 23px;
    height: 23px;
}
.font-reg .form-group>div input[type='radio']:checked+label:before {
    content: url(/wp-content/uploads/2017/01/icon-radio.png);
    position: absolute;
    top: 7px;
    left: 0;
    border-radius: 50%;
    background-color: #ffb400;
    width: 23px;
    height: 23px;
    line-height: 23px;
    padding-left: 5px;
    box-sizing: border-box;
}

.font-reg .form-group>div input[type='checkbox']+label:before {
    content: '';
    position: absolute;
    top: 9px;
    left: 0;
    background-color: #cccccc;
    width: 20px;
    height: 20px;
}

.font-reg .form-group>div input[type='checkbox']:checked+label:before {
    content: url(/wp-content/uploads/2017/01/icon-radio.png);
    position: absolute;
    top: 9px;
    left: 0;
    background-color: #ffb400;
    width: 20px;
    height: 20px;
    line-height: 20px;
    padding-left: 3px;
    box-sizing: border-box;
}
.font-reg .form-group>div input[type="file"] {
    padding: 6px 0;
}
.font-reg .btn-group {
    text-align: center;
    padding: 33px 0 45px;
}
.font-reg .btn-group button {
    padding: 0;
    margin: 0;
    background-color:  #ffb400;
    width: 178px;
    height: 47px;
    line-height: 47px;
    font-family: NanumGothic, sans-serif;
    color:  #3a4554;
    font-size: 18px;
    border-radius: 20px;
}
.font-reg .btn-group button:disabled {
    cursor: not-allowed;
}
.font-reg .btn-group button+button {
    margin-left: 20px;
}
.font-reg .desc p {
    font-family: NanumGothic, sans-serif;
    color:  #4e5052;
    font-size: 14px;
    margin: 0;
}
.font-reg .error {
    display: block;
    color: #fd5656;
    margin: 5px 0 0;
    padding: 0;
    border: none;
    font-size: 14px;
    line-height: inherit;
}

.font-reg .form-group .form-inline {
    float: left;
    width: 32%;
    margin-right: 2%;
}
.font-reg .form-group .form-inline:last-child {
    margin-right: 0;
}

/*
    react-select custom css
 */
.font-reg .Select {
    font-family: NanumGothic, sans-serif;
    color:  #3a4554;
    font-size: 15px;
}

.font-reg .Select:last-child {
    margin: 0;
}

.font-reg .Select-control,
.font-reg .is-open>.Select-control,
.font-reg .Select-menu-outer {
    border: 1px solid #cccccc;
    box-sizing: border-box;
    background-color: #f5f5f5;
    border-radius: 0;
}
.font-reg .Select-menu-outer .option {
    background-color: #f5f5f5;
}
.font-reg .Select-control .Select-input input {
    padding: 8px 0 12px;
}
.font-reg .Select-placeholder {
    font-family: NanumGothic, sans-serif;
    color: #9fa3aa;
    font-size: 13px;
}
.font-reg .Select-value .Select-value-label {
    font-family: NanumGothic, sans-serif;
    color:  #3a4554 !important;
    font-size: 15px;
}

/*
    패키지 관리
 */
.package-manage {
    padding: 43px 128px;
}
.package-manage h1 {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 28px;
    padding-bottom: 18px;
    letter-spacing: 1px;
}
.package-manage h1+p {
    font-family: NanumGothic, sans-serif;
    color:  #3a4554;
    font-size: 13px;
    padding-bottom: 0;
}
.package-manage .sort-box {
    padding: 0 0 19px;
    text-align: right;
    border-bottom: 1px solid #cdcdcd;
}
.package-manage .sort-box select {
    border-radius: 5px;
    box-sizing: border-box;
    background-color:  #ffffff;
    width: 75px;
    height: 35px;
    border: 1px solid #cccccc;
    font-family: NanumBarunGothic, sans-serif;
    color:  #4f4e4e;
    font-size: 14px;
    padding-left: 10px;
    letter-spacing: 1px;
}
.package-manage .package-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.package-manage .package-list li{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #cccccc;
}

.package-manage .package-list .title-group{
    flex-grow: 1;
}
.package-manage .package-list .title-group .title {
    padding: 36px 26px 26px;
}
.package-manage .package-list .title-group .title p {
    font-size: 32px;
    margin: 0;
}
.package-manage .package-list .title-group .desc {
    font-family: NanumBarunGothicBold, sans-serif;
    color:  #868585;
    font-size: 13px;
    padding: 0 23px 21px;
    letter-spacing: 1px;
}
.package-manage .package-list .desc span+span:before{
    content: '/';
    margin: 0 5px;
}

.package-manage .package-list .btn-group{
    display: flex;
    justify-content: space-between;
}
.package-manage .package-list .btn-group .btn{
    border-radius: 5px;
    border: 1px solid transparent;
    box-sizing: border-box;
    width: 101px;
    height: 35px;
    line-height: 35px;
    display: inline-block;
    font-family: NanumBarunGothic, sans-serif;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    letter-spacing: 1px;
}
.package-manage .package-list .btn-group .btn.detail {
    border: 1px solid #cccccc;
    background-color:  #ffffff;
    color:  #4f4e4e;
}
.package-manage .package-list .btn-group .btn.detail img {
    vertical-align: middle;
    margin: 0 7px 3px 0;
}
.package-manage .package-list .btn-group .btn.modify {
    border: 1px solid transparent;
    background-color: #a99786;
    color: #ffffff;
}


/*.package-manage .package-list li{
    flex-basis: 32%;
    border: 1px solid #cccccc;
    box-sizing: border-box;
    border-radius: 10px;
    margin: 0 2% 20px 0;
}
.package-manage .package-list li:nth-child(3n) {
    margin-right: 0;
}
.package-manage .package-list li .panel .header{
    text-align: center;
    font-size: 32px;
    padding: 50px 0;
}
.package-manage .package-list li .panel .content{
    display: flex;
    align-content: center;
    padding: 15px 19px;
    font-family: NanumBarunGothicUltraLight, sans-serif;
    color:  #1f1f1f;
    font-size: 15px;
    background-color: #efefef;
    border-bottom: 1px solid #dedede;
    letter-spacing: 1px;
}
.package-manage .package-list li .panel .content .badge{
    background-color:  #feb404;
    width: 21px;
    height: 21px;
    font-family: Dinbla, sans-serif;
    color:  #ffffff;
    font-size: 15px;
    text-align: center;
    border-radius: 5px;
    margin-right: 7px;
}
.package-manage .package-list li .panel .content .company{
    flex-grow: 1;
}
.package-manage .package-list li .panel .footer{
    display: flex;
    align-content: center;
    padding: 19px 20px;
    background-color: #efefef;
}
.package-manage .package-list li .panel .status{
    font-family: NanumBarunGothicUltraLight, sans-serif;
    color:  #fe1f1f;
    font-size: 15px;
    margin-right: 11px;
    letter-spacing: 1px;
}
.package-manage .package-list li .panel .date{
    font-family: NanumBarunGothicUltraLight, sans-serif;
    color:  #1f1f1f;
    font-size: 13px;
    flex-grow: 1;
    letter-spacing: 1px;
}
.package-manage .package-list li .panel .price{
    font-family: NanumBarunGothic, sans-serif;
    color:  #1f1f1f;
    font-size: 15px;
    letter-spacing: 1px;
}*/

.search-pagination {
    display: flex;
    justify-content: center;
    width: 100%;
}
.search-pagination .pagination-box {
    padding: 26px 0;
}

.package-manage .btn-box {
    text-align: right;
}
.package-manage .btn-box a {
    display: inline-block;
    padding: 0;
    margin: 0;
    width: 178px;
    height: 28px;
    line-height: 28px;
    font-family: NanumGothic, sans-serif;
    color: #6A6A6A;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 3px;
    background-color: #F0F0F0 !important;
    text-align: center;
}
/*
    패키지 등록
 */
.package-reg {
    padding: 44px 127px;
}
.package-reg h1 {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 28px;
    padding-bottom: 18px;
    letter-spacing: 1px;
}
.package-reg h1+p {
    font-family: NanumGothic, sans-serif;
    color:  #3a4554;
    font-size: 13px;
    padding-bottom: 36px;
    line-height: 1.2;
    margin: 0;
}
.package-reg h2 {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #fe9601;
    font-size: 20px;
    padding-bottom: 15px;
    line-height: 1.2;
    letter-spacing: 1px;
}
.package-reg form {
    border-top: 1px solid #cccccc;
}
.package-reg .form-group {
    border-bottom: 1px solid #cccccc;
    padding: 13px 0;
}
.package-reg .form-group>label {
    display: inline-block;
    width: 28.8%;
    vertical-align: middle;
    padding-left: 22px;
    font-family: NanumGothic, sans-serif;
    color:  #3a4554;
    font-size: 15px;
    box-sizing: border-box;
}
.package-reg .form-group>label.required:after {
    content: '\25C6';
    font-size: 9px;
    color: #ffb400;
    position: relative;
    top: -2px;
    margin-left: 7px;
}
.package-reg .form-group>div {
    display: inline-block;
    width: 71%;
    vertical-align: middle;
}
.package-reg .form-group>div input{
    padding: 0 0 0 14px;
    margin: 0;
}
.package-reg .form-group>div input[type="text"] {
    height: 38px;
    box-sizing: border-box;
    border: 1px solid #cccccc;
    border-radius: 0;
    background-color: #f5f5f5;
    width: 100%;
}


.package-reg .form-group>div label {
    display: inline-block;
    width: 32%;
    padding-left: 33px;
    margin-right: 2%;
    box-sizing: border-box;
    font-family: NanumGothic, sans-serif;
    color:  #3a4554;
    font-size: 15px;
    height: 38px;
    line-height: 38px;
    cursor: pointer;
    position: relative;
}
.package-reg .form-group>div label:last-child {
    margin-right:0;
}

.package-reg .form-group>div input[type='checkbox'],
.package-reg .form-group>div input[type='radio'] {
    display: none;
}
.package-reg .form-group>div input[type='radio']+label:before {
    content: '';
    position: absolute;
    top: 7px;
    left: 0;
    border-radius: 50%;
    background-color: #cccccc;
    width: 23px;
    height: 23px;
}
.package-reg .form-group>div input[type='radio']:checked+label:before {
    content: url(/wp-content/uploads/2017/01/icon-radio.png);
    position: absolute;
    top: 7px;
    left: 0;
    border-radius: 50%;
    background-color: #ffb400;
    width: 23px;
    height: 23px;
    line-height: 23px;
    padding-left: 5px;
    box-sizing: border-box;
}

.package-reg .form-group>div input[type='checkbox']+label:before {
    content: '';
    position: absolute;
    top: 9px;
    left: 0;
    background-color: #cccccc;
    width: 20px;
    height: 20px;
}

.package-reg .form-group>div input[type='checkbox']:checked+label:before {
    content: url(/wp-content/uploads/2017/01/icon-radio.png);
    position: absolute;
    top: 9px;
    left: 0;
    background-color: #ffb400;
    width: 20px;
    height: 20px;
    line-height: 20px;
    padding-left: 3px;
    box-sizing: border-box;
}
.package-reg .form-group>div input[type="file"] {
    padding: 6px 0;
}
.package-reg .form-group>div ul {
    list-style: none;
    margin: 0;
    padding: 0;
}



.package-reg .form-group .add-btn {
    background-color: #ffb400;
    width: 140px;
    height: 37px;
    font-family: NanumGothic, sans-serif;
    color: rgba(58, 69, 84, 0.7);
    font-size: 15px;
    margin: 0;
    padding: 0;
    display: inline-block;
    line-height: 37px;
    border-radius: 20px;
}
.package-reg .btn-group {
    text-align: center;
    padding: 33px 0 45px;
}
.package-reg .btn-group button {
    padding: 0;
    margin: 0;
    background-color:  #ffb400;
    width: 178px;
    height: 47px;
    line-height: 47px;
    font-family: NanumGothic, sans-serif;
    color:  #3a4554;
    font-size: 18px;
    border-radius: 20px;
}
.package-reg .btn-group button+button {
    margin-left: 20px;
}
.package-reg .btn-group button:disabled {
    cursor: not-allowed;
}
.package-reg .desc p {
    font-family: NanumGothic, sans-serif;
    color:  #4e5052;
    font-size: 14px;
    margin: 0;
}
.package-reg .error {
    display: block;
    color: #fd5656;
    margin: 5px 0 0;
    padding: 0;
    border: none;
    font-size: 14px;
    line-height: inherit;
}

.package-reg .form-group .form-inline {
    float: left;
    width: 32%;
    margin-right: 2%;
}
.package-reg .form-group .form-inline:last-child {
    margin-right: 0;
}

/*
    구매 목록
 */
.purchase-list {
    padding: 43px 128px;
}
.purchase-list h1 {
    font-family: NanumBarunGothicLight, sans-serif;
    color:  #414040;
    font-size: 28px;
    padding-bottom: 18px;
    letter-spacing: 1px;
}
.purchase-list h1+p {
    font-family: NanumGothic, sans-serif;
    color:  #3a4554;
    font-size: 15px;
    margin-bottom: 30px;
}
.purchase-list table {
    margin: 0;
}
.purchase-list table td {
    border: none;
    padding: 0;
    text-align: center;
    font-family: NanumGothic, sans-serif;
    color:  rgba(58, 69, 84, 0.7);
    font-size: 13px;
}
.purchase-list table thead{
    border-top: 1px solid #cccccc;
    border-bottom: 1px solid #cccccc;
}
.purchase-list table thead td {
    padding: 16px 0;
}
.purchase-list table tbody td {
    height: 94px;
    border-bottom: 1px solid #cccccc;
    vertical-align: middle;
    font-size: 15px;
}
.purchase-list table tbody td a {
    border-radius: 5px;
    border: 1px solid #cccccc;
    box-sizing: border-box;
    display: inline-block;
    width: 143px;
    height: 35px;
    line-height: 35px;
    font-family: NanumBarunGothic, sans-serif;
    color:  #4f4e4e;
    font-size: 14px;
    letter-spacing: 1px;
}

/*
    Pagination Custom Start
 */
.search-pagination {
    display: flex;
    justify-content: center;
    width: 100%;
}
.search-pagination .pagination-box {
    padding: 26px 0;
}

.search-pagination .pagination {
    margin: 0;
    padding: 0;
    list-style: none;
}
.search-pagination .pagination li {
    display: inline-block;
    text-align: center;
    margin-right: 6px;
}
.search-pagination .pagination li a {
    font-family: NanumBarunGothic, sans-serif;
    border-radius: 5px;
    background-color:  #ceccc8;
    display: inline-block;
    width: 41px;
    height: 41px;
    line-height: 41px;
    color:  #5b5a5a;
    font-size: 16px;
    vertical-align: middle;
    letter-spacing: 1px;
}
.search-pagination .pagination li.active a {
    background-color:  #ffb400;
    color: #ffffff;
}
.search-pagination .pagination li.disabled a {
    cursor: not-allowed;
}
/*
    Pagination Custom End
 */


@media screen and (max-width: 768px) {
    /*
        공통
     */
    #page {
        width: 98%;
    }
    #header-text-nav-wrap {
        padding: 0;
        width: 100%;
    }
    #header-right-sidebar2 {
        display: none;
    }

    /*
        폰트 제작 스토리
     */
    .story {
        padding: 43px 0 0;
    }
    .story .guide ul {
        display: flex;
        flex-direction: column;
    }
    .story .guide ul>li {
        flex-grow: 1;
        width: auto;
    }
    .story .guide ul>li+li {
        padding: 10px 0 0;
    }
    /*
        공개용 한글틀
     */
    .public {
        padding: 43px 0 63px;
    }
    .public .embed .play-btn {
        top: 33%;
        width: 20%;
    }
    .public .guide ul {
        display: flex;
        flex-direction: column;
    }
    .public .guide ul>li {
        flex-grow: 1;
        width: auto;
    }
    .public .guide ul>li+li {
        padding: 10px 0 0;
    }
    .public .contents {
        flex-wrap: wrap;
    }
    .public .contents>div {
        width: 100%;
        flex-basis: 100%;
    }
    .public .contents .download {
        margin-bottom: 30px;
    }

    /*
        상용 한글틀
     */
    .commercial {
        padding: 43px 0 59px
    }

    .commercial .embed .play-btn {
        top: 33%;
        width: 20%;
    }
    .commercial .guide ul {
        display: flex;
        flex-direction: column;
    }
    .commercial .guide ul>li {
        flex-grow: 1;
        width: auto;
    }
    .commercial .guide ul>li+li {
        padding: 10px 0 0;
    }
    .commercial .contents {
        flex-wrap: wrap;
    }
    .commercial .contents>div {
        width: 100%;
        flex-basis: 100%;
    }
    .commercial .contents .download {
        margin-bottom: 30px;
    }

    /*
        폰트 등록 가이드
     */
    .reg-guide .guide {
        padding: 43px 0 45px;
    }
    .reg-guide .guide-pictures {
        padding: 69px 0 79px;
        flex-direction: column;
    }
    .reg-guide .guide-pictures .flow li:nth-child(2) {
        transform: rotate(90deg);
    }
    .reg-guide .step .step-list {
        flex-direction: column;
    }
    .reg-guide .step .step-order {
        flex-basis: auto;
    }
    .reg-guide .step .flow {
        padding: 39px 20px;
        align-self: center;
        transform: rotate(90deg);
    }

    /*
        폰트 등록
     */
    .font-reg {
        padding: 44px 0;
    }

    /*
        한글틀 고딕
     */
    .hangulteul {
        padding: 43px 0;
    }
    .hangulteul .row {
        flex-direction: column;
    }
    .hangulteul .col-6 {
        width: 100%;
    }
    .hangulteul .summary .concept .text-group {
        flex-direction: column;
    }
    .hangulteul .summary .concept .text-group .before+p {
        transform: rotate(90deg);
    }
    .hangulteul .summary .concept .img-group>div {
        flex-direction: column;
    }

    /*
        한글마을
     */
    .introduce .contents {
        padding: 61px 0;
    }
    .introduce .contents div {
        margin-right: 20px;
    }

    /*
        공지사항
     */
    #notice_board {
        padding: 43px 0;
    }
    /*
        회원 정보
     */
    #post-269 {
        padding: 43px 0;
    }
    div.uimob800 .um-account-main {
        max-width: none !important;
    }
    /*
        상용폰트(내가 등록한 폰트)
     */
    .font-manage {
        padding: 43px 0;
    }
    /*
        폰트 검색
     */
    .font-search{
        padding: 0;
    }
    .font-search .search-list {
        flex-basis: 100%;
    }
    .font-search .search-list .search-box {
        height: auto;
        flex-wrap: wrap;
    }
    .font-search .search-list .filter-group {

    }
    .font-search .search-list .filter-group .keyword {
        display: flex;
        flex-basis: 100%;
        margin-bottom: 10px;
    }
    .font-search .search-list .search-box>div {
        padding: 10px 0;
    }
    .font-search .search-list .search-box .select{
        display: none;
    }
    .font-search .search-list .search-box .input {
        flex-basis: 100%;
    }
    .font-search .search-list .search-box .input input{
        width: 100%;
    }
    .font-search .search-list .search-box .range {
        flex-basis: 100%;
    }
    .font-search .search-list .search-box .sort {
        display: block;
        flex-basis: 100%;
    }
    .font-search .search-list .search-box .sort select{
        width: 100%;
    }
    .font-search .search-list .default {
        margin: 50px 0;
    }
    .font-search .search-list ul li {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }
    .font-search .search-list .title-group .title input {
        width: 100%;
    }
    .font-search .search-list .title-group .desc {
        display: flex;
    }

    .font-search .search-form{
        display: none;
    }
    .font-search .search-pagination {
        flex-wrap: wrap;
    }
    .font-search .search-pagination .total-page {
        flex-basis: 100%;
        margin: 0;
        text-align: center;
        padding: 10px 0;
    }
    .font-search .search-pagination .pagination-box {
        flex-basis: 100%;
        padding: 0;
    }
    .font-search .search-pagination .pagination {
        display: none;
    }
    .font-search .search-pagination .pagination-mobile {
        display: flex !important;
        text-align: center;
        justify-content: center;
    }
    .footer-widgets-wrapper {
        display: none;
    }
    /**
        폰트 상세 보기
     */
    .font-detail {
        padding: 36px 0 0;
    }
    .font-detail .article.size{
        display: none;
    }
    .font-detail .contents {
        flex-direction: column;
    }
    .font-detail .section {
        width: 100%;
    }
    .font-detail .aside {
        width: 100%;
    }
    .font-detail .font-list .search-box{
        flex-wrap: wrap;
        height: auto;
    }
    .font-detail .font-list .search-box>div {
        margin: 10px 0;
    }
    .font-detail .font-list .search-box .select {
        display: none;
    }
    .font-detail .font-list .search-box .input {
        flex-basis: 100%;
    }
    .font-detail .font-list .search-box .input input {
        width: 100%;
    }
    .font-detail .font-list .search-box .range {
        flex-basis: 100%;
    }
    .font-detail .font-list .button-group {
        display: none;
    }
    #snackbar {
        left: 0;
        right: 0;
        width: inherit;
        transform: none;
    }
}