@charset "utf-8";

/*
 *
 * CSS CONTENTS:
 *
 * 01. Web Font
 * 02. Type Selector Reset
 * 03. Accessibility Navigation
 * 04. Layout Selector
 * 05. Components
 * 06. Entry Content
 * 07. Comment
 * 08. Aside(sidebar)
 * 09. ETC
 * 10. Option(Color Type & List Type)
 * 11. Retina Display
 * 12. Media Screen
 *
 */

/* Web Font Load */
@import url('https://fonts.googleapis.com/css?family=Nanum+Myeongjo:800&subset=korean');
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');

/* Type Selector Reset */
body {
   -webkit-text-size-adjust: 100%;
   font-weight: 400;
   font-family: 'AppleSDGothicNeo', 'Noto Sans KR', sans-serif;
   font-size: 1em;
   line-height: 1.8; /* modify */
   color: #555;
}
html, body {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
   font-size: 100%;
}
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, figure {
   margin: 0;
   padding: 0;
}
header, footer, section, article, aside, nav, hgroup, details, menu, figure, figcaption {
   display: block;
}
button, input[type=submit], input[type=reset], input[type=button] {
   overflow: visible;
   cursor: pointer;
}
input[type=text], input[type=email], input[type=password], input[type=submit], textarea {
   -webkit-appearance: none;
}
input, select, textarea, button {
   font-family: 'Noto Sans KR', sans-serif;
   font-size: 100%;
   border-radius: 0;
}
button {
   overflow: visible;
   margin: 0;
   padding: 0;
   border: 0;
   background: transparent;
}
ul li {
   list-style: none;
}
img, fieldset {
   border: none;
   vertical-align: top;
}
hr {
   display: none;
}
a, a:link {text-decoration:none; color:#555;}
a:visited {text-decoration:none;}
a:hover, a:focus {text-decoration:underline; color: #222;}
a:active {text-decoration:none;}

/* Accessibility Navigation */
#acc-nav {
   position: absolute;
   top: 0;
   left: 0;
   z-index: 1000;
   width: 100%;
   height: 0;
}
#acc-nav a {
   display: block;
   position: absolute;
   left: 0;
   top: 0;
   overflow: hidden;
   width: 1px;
   height: 1px;
   margin-left: -1px;
   margin-bottom: -1px;
   text-align: center;
   font-weight: bold;
   font-size: 0.875em;
   color: #000;
   white-space: normal;
}
#acc-nav a:focus, #acc-nav a:hover, #acc-nav a:active {
   width: 100%;
   height: auto;
   padding: 10px 0;
   background: #000;
   color: #fff;
   z-index: 1000;
}

/* Layout Selector */
#header {
   border-bottom: 1px solid #eee;
}
#header .inner {
   position: relative;
   max-width: 1080px;
   margin: 0 auto;
}
#header h1 {
   padding: 23px 0 ;
   font-family: 'Nanum Myeongjo';
   font-weight: 800;
   font-size: 1.75em;
   line-height: 32px;
   letter-spacing: -0.2px;
   color: #333;
}
#header h1 a {
   display: inline-block;
   height: 32px;
   text-decoration: none;
   color: #333;
   vertical-align: top;
}
#header h1 img {
   width: auto;
   height: 32px;
}

#header .util {
   position: absolute;
   top: 24px;
   right: 0;
}
#header .util .search {
   position: relative;
   float: left;
   overflow: hidden;
   width: 32px;
   background-color: #fff;
   box-sizing: border-box;
   transition: width 0.5s;
   -webkit-transition: width 0.5s;
}
#header .util .search:before {
   content: "";
   position: absolute;
   top: 0;
   right: 0;
   z-index: 20;
   width: 32px;
   height: 32px;
   border: 1px solid #eee;
   border-radius: 50%;
   text-indent: -999em;
   background: #fff url(./images/ico_package.png) no-repeat 0 0;
   vertical-align: top;
   box-sizing: border-box;
   outline: none;
   cursor: pointer;
}
#header .util .search input {
   width: 32px;
   height: 32px;
   padding: 5px 15px;
   border: 0;
   background-color: transparent;
   font-size: 0.875em;
   line-height: 1;
   outline: none;
   box-sizing: border-box;
}
#header .util .search input:focus {
   border-color: #484848;
}
#header .util .search input::placeholder {
   color: #969696;
}
#header .util .search button {
   position: absolute;
   top: 1px;
   right: 1px;
   z-index: 10;
   width: 30px;
   height: 30px;
   text-indent: -999em;
   border: 1px solid #eee;
   border-radius: 50%;
   background: #fff url(./images/ico_package.png) no-repeat -1px -1px;
   vertical-align: top;
   outline: none;
}
#header .util .search.on {width: 200px;}
#header .util .search.on:before {content: none;}
#header .util .search.on input {
   display: block;
   width: 100%;
   border: 1px solid #eee;
   border-radius: 32px;
}
#header .util .search.on button {border-color: transparent;}

#header .util .profile {
   position: relative;
   float: left;
   margin-left: 14px;
}
#header .util .profile button {
   display: block;
   overflow: hidden;
   width: 32px;
   height: 32px;
   border: 1px solid #eee;
   border-radius: 50%;
}
#header .util .profile img {
   width: 100%;
   height: 100%;

}
#header .util .profile nav {
   display: none;
   position: absolute;
   top: 100%;
   left: 50%;
   z-index: 30;
   width: 96px;
   margin: 0 0 0 -48px;
   padding-top: 12px;
}
#header .util .profile ul {
   box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}
#header .util .profile ul li a {
   display: block;
   margin-top: -1px;
   border: 1px solid #eee;
   background-color: #fff;
   text-align: center;
   text-decoration: none;
   font-size: 0.875em;
   line-height: 2.3125rem;
   color: #777;
}
#header .util .profile ul li a:focus,
#header .util .profile ul li a:hover {
   background-color: #fafafa;
   color: #333;
}
#header .util .menu {
   display: none;
}
#gnb {
   height: 66px;
   overflow-x: auto;
   overflow-y: hidden;
   -ms-overflow-style: none;
}
#gnb::-webkit-scrollbar {
   display: none;
}

#gnb ul {
   display: inline-block;
   margin-left: -30px;
   vertical-align: top;
}
#gnb ul li {
   float: left;
   padding: 0 26px;
}
#gnb ul li a {
   position: relative;
   display: block;
   text-decoration: none;
   padding: 22px 4px 24px;
   color: #777;
}
#gnb ul li a:hover,
#gnb ul li.current a {
   color: #333;
}
#gnb ul li.current a:after,
#gnb ul li a:hover:after,
#gnb ul li a:focus:after {
   content: "";
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 4px;
   background-color: #333;
}
#container {
   position: relative;
}
#container .content-wrap {
   max-width: 1080px;
   margin: 0 auto;
   padding: 0 20px;
}
#container .content-wrap:before {
   content: "";
   position: absolute;
   top: 0;
   left: 50%;
   z-index: 10;
   width: 1px;
   height: 100%;
   margin-left: 255px;
   background-color: #eee;
}
#container .content-wrap:after {
   content: "";
   clear: both;
   display: block;
   height: 0;
   visibility: hidden;
}
#content {
   float: left;
   width: 68.518518518518519%;
   padding: 72px 0 60px;
   box-sizing: border-box;
}
#content>.inner:after {
   content: "";
   clear: both;
   display: block;
   height: 0;
   visibility: hidden;
}

#aside {
   float: right;
   width: 21.296296296296296%;
   padding: 75px 0 32px;
   box-sizing: border-box;
}
#aside .close,
#aside .profile {
   display: none;
}

#footer {
   padding: 38px 0 28px;
   border-top: 1px solid #eee;
}
#footer .inner {
   position: relative;
   max-width: 1080px;
   margin: 0 auto;
}
#footer p {
   margin-bottom: 10px;
   font-size: 0.875em;
   color: #777;
}
#footer .order-menu a {
   display: inline-block;
   margin-bottom: 23px;
   font-size: 0.8125em;
   vertical-align: middle;
   color: #555;
}
#footer .order-menu a:hover,
#footer .order-menu a:focus {
   color: #333;
}
#footer .order-menu a:before {
   content: "";
   display: inline-block;
   width: 2px;
   height: 2px;
   margin: 0 20px 2px 15px;
   background-color: #d2d2d2;
   vertical-align: middle;
}
#footer .order-menu a:first-child::before {
   content: none;
}
#footer .page-top {
   position: absolute;
   top: 0;
   right: 0;
   width: 30px;
   height: 30px;
   border: 1px solid #eee;
   border-radius: 50%;
   background: #fff url(./images/ico_package.png) no-repeat -100px -200px;
   text-indent: -999em;
}
#footer .page-top:focus,
#footer .page-top:hover {
   background-color: #757575;
   background-position-x: -150px;
}

#tt-body-index .main-slider {
   display: block;
}
#tt-body-index #content {
   padding-bottom: 43px;
}
#tt-body-index .post-cover.notice {
   height: auto;
   background-color: transparent;
}
#tt-body-index .post-cover.notice h1 {
   margin: 0;
   font-size: 1.6875em;
   line-height: 1.5;
   color: #000;
}
#tt-body-index .post-cover.notice h1 a {
   color: #000;
}
#tt-body-index .post-cover.notice .meta {
   margin: 0 0 30px;
   color: rgba(0,0,0,0.6);
}
#tt-body-page #container {
   padding-top: 339px;
}
#tt-body-page.post-cover-hide #container {
   padding-top: 0;
}
#tt-body-page .post-cover {
   position: absolute;
   top: -1px;
   left: 0;
   width: 100%;
}
#tt-body-tag .tags {
   margin-top: 0;
}

/* Components */
.btn, a.btn {
   display: inline-block;
   width: 100px;
   height: 36px;
   background-color: #c4c4c4;
   text-align: center;
   font-weight: 400;
   font-size: 14px;
   line-height: 36px;
   color: #fff;
   vertical-align: middle;
}
.btn:hover {
   background-color: #676767;
}
.main-slider {
   display: none;
   position: relative;
   top: -1px;
   z-index: 20;
   overflow: hidden;
   width: 100%;
   background-color: #cbcbcb;
}
.main-slider ul {
   position: relative;
}
.main-slider ul li {
   display: table;
   width: 100%;
   height: 340px;
   background-position: 50% 50%;
   background-size: cover;
}
.main-slider ul li a {
   display: table;
   width: 100%;
   height: 100%;
   text-decoration: none;
   background-color: rgba(0,0,0,0.15);
}
.main-slider ul li .inner {
   display: table-cell;
   vertical-align: middle;
}
.main-slider ul li .box {
   display: block;
   max-width: 910px;
   margin: 0 auto;
   padding: 0 24px 6px;
}
.main-slider ul li .text {
   display: block;
   overflow: hidden;
   max-width: 65%;
   text-overflow: ellipsis;
   font-weight: 300;
   font-size: 2.125em;
   line-height: 1.2352;
   color: #fff;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}
.main-slider ul li .btn {
   display: block;
   width: 118px;
   height: 35px;
   margin-top: 32px;
   border-radius: 35px;
   line-height: 35px;
   background-color: #fff;
   color: #555;
}
.main-slider ul li .btn:hover {
   background-color: #04beb8;
   color: #fff;
}
.main-slider .prev,
.main-slider .next {
   display: none;
}
.main-slider .paging {
   position: absolute;
   top: 50%;
   left: 50%;
   z-index: 10;
   margin-left: 447px;
   transform: translateY(-50%);
   -webkit-transform: translateY(-50%);
   -ms-transform: translateY(-50%);
}
.main-slider .paging button {
   display: block;
   width: 8px;
   height: 8px;
   margin: 10px 0;
   text-indent: -999em;
   border-radius: 50%;
   background-color: rgba(255,255,255,0.4);
}
.main-slider .paging .current {
   background-color: rgba(255,255,255,1);
}

.cover-thumbnail-1 {
   position: relative;
   margin-bottom: 77px;
}
.cover-thumbnail-1 h2 {
   margin-bottom: 19px;
   font-weight: 500;
   font-size: 1em;
   color: #555;
}
.cover-thumbnail-1 ul {
   display: inline-block;
   width: 103.378378378378378%;
   margin-left: -3.378378378378378%;
   margin-bottom: -40px;
   vertical-align: top;
}
.cover-thumbnail-1 ul li {
   float: left;
   width: 33.333333333333333%;
   padding-left: 3.26797385620915%;
   margin: 0 0 38px;
   box-sizing: border-box;
}
.cover-thumbnail-1 ul li a {
   display: block;
   text-decoration: none;
}
.cover-thumbnail-1 ul li a:hover .title,
.cover-thumbnail-1 ul li a:focus .title {
   text-decoration: underline;
}
.cover-thumbnail-1 ul li figure {
   display: block;
   height: 0;
   margin-bottom: 9px;
   padding-bottom: 130.434782608695652%;
   background-color: #f8f8f8;
}
.cover-thumbnail-1 ul li figure img {
   width: 100%;
   height: auto;
}
.cover-thumbnail-1 ul li .title {
   display: block;
   overflow: hidden;
   width: 95%;
   margin-bottom: 2px;
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: 1.75;
}
.cover-thumbnail-1 ul li .date {
   display: block;
   font-size: 0.75em;
   color: #999;
}
.cover-thumbnail-1 .more {
   position: absolute;
   top: 4px;
   right: 0;
   font-weight: 300;
   font-size: 0.875em;
   color: #999;
}

.cover-thumbnail-2 {
   position: relative;
   overflow: hidden;
   width: 100%;
   margin-bottom: 77px;
}
.cover-thumbnail-2 h2 {
   margin-bottom: 28px;
   padding-bottom: 19px;
   border-bottom: 1px solid #eee;
   font-weight: 500;
   font-size: 1em;
   color: #555;
}
.cover-thumbnail-2 ul li {
   overflow: hidden;
   margin-top: 28px;
}
.cover-thumbnail-2 ul li a {
   display: block;
   text-decoration: none;
}
.cover-thumbnail-2 ul li a:hover .title,
.cover-thumbnail-2 ul li a:focus .title {
   text-decoration: underline;
}
.cover-thumbnail-2 ul li figure {
   float: right;
   width: 128px;
   margin-left: 57px;
}
.cover-thumbnail-2 ul li figure img {
   width: 100%;
   height: auto;
   border: 1px solid #f1f1f1;
   box-sizing: border-box;
}
.cover-thumbnail-2 ul li .title {
   display: block;
   overflow: hidden;
   max-width: 95%;
   margin-bottom: 10px;
   padding-top: 7px;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 1.25em;
   line-height: 1.4;
}
.cover-thumbnail-2 ul li .excerpt {
   display: block;
   overflow: hidden;
   max-width: 95%;
   margin-bottom: 20px;
   text-overflow: ellipsis;
   font-size: 0.875em;
   line-height: 1.5rem;
   color: #999;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
}
.cover-thumbnail-2 ul li .meta {
   display: block;
   font-size: 0.75em;
   color: #999;
}
.cover-thumbnail-2 ul li .meta span:before {
   content: "";
   display: inline-block;
   width: 2px;
   height: 2px;
   margin: 0 8px 0 5px;
   background-color: #d2d2d2;
   vertical-align: middle;
}
.cover-thumbnail-2 ul li .meta span:first-child:before {
   content: none;
}
.cover-thumbnail-2 .more {
   display: block;
   width: 100%;
   margin-top: 28px;
   padding: 12px 0 11px;
   border: 1px solid #eee;
   text-align: center;
   font-size: 0.875em;
   color: #999;
}

.cover-thumbnail-3 {
   position: relative;
   margin-bottom: 77px;
}
.cover-thumbnail-3 h2 {
   margin-bottom: 19px;
   font-weight: 500;
   font-size: 1em;
   color: #555;
}
.cover-thumbnail-3 ul {
   position: relative;
   display: inline-block;
   width: 103.378378378378378%;
   margin-left: -3.378378378378378%;
   margin-bottom: -25px;
   vertical-align: top;
}
.cover-thumbnail-3 ul li {
   float: left;
   width: 20%;
   margin-bottom: 22px;
   padding-left: 3.26797385620915%;
   box-sizing: border-box;
}
.cover-thumbnail-3 ul li a {
   display: block;
   text-decoration: none;
}
.cover-thumbnail-3 ul li a:hover .title,
.cover-thumbnail-3 ul li a:focus .title {
   text-decoration: underline;
}
.cover-thumbnail-3 ul li figure {
   display: block;
   width: 100%;
   height: 0;
   margin-bottom: 11px;
   padding-bottom: 129.6875%;
   background-color: #f8f8f8;
}
.cover-thumbnail-3 ul li figure img {
   width: 100%;
   height: auto;
   border: 1px solid #f1f1f1;
   box-sizing: border-box;
}
.cover-thumbnail-3 ul li .title {
   display: block;
   overflow: hidden;
   width: 95%;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 0.8125em;
   line-height: 1.4;
}
.cover-thumbnail-3 button {
   position: absolute;
   top: -1px;
   width: 24px;
   height: 24px;
   border: 1px solid #eee;
   border-radius: 50%;
   background: url(./images/ico_package.png) no-repeat 0 -50px;
   text-indent: -999em;
   outline: none;
}
.cover-thumbnail-3 .prev {
   right: 30px;
}
.cover-thumbnail-3 .next {
   right: 0;
   background-position-x: -50px;
}
.cover-thumbnail-3 button:focus,
.cover-thumbnail-3 button:hover {
   background-color: #757575;
   background-position-y: -74px;
}

.cover-thumbnail-4 {
   position: relative;
   margin-bottom: 17px;
}
.cover-thumbnail-4 h2 {
   margin-bottom: 19px;
   font-weight: 500;
   font-size: 1em;
   color: #555;
}
.cover-thumbnail-4 ul {
   position: relative;
   display: inline-block;
   width: 103.378378378378378%;
   margin-left: -3.378378378378378%;
   vertical-align: top;
}
.cover-thumbnail-4 ul li {
   float: left;
   width: 33.333333333333333%;
   min-height: 283px;
   padding-left: 3.26797385620915%;
   margin: 0 0 55px;
   box-sizing: border-box;
}
.cover-thumbnail-4 ul li a {
   display: block;
   text-decoration: none;
}
.cover-thumbnail-4 ul li a:hover .title,
.cover-thumbnail-4 ul li a:focus .title {
   text-decoration: underline;
}
.cover-thumbnail-4 ul li figure {
   display: block;
   width: 100%;
   height: 0;
   margin-bottom: 5px;
   padding-bottom: 60.869565217391304%;
   background-color: #f8f8f8;
}
.cover-thumbnail-4 ul li figure img {
   width: 100%;
   height: auto;
}
.cover-thumbnail-4 ul li .title {
   display: block;
   overflow: hidden;
   max-width: 95%;
   margin-bottom: 4px;
   padding-top: 9px;
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: 1.4;
}
.cover-thumbnail-4 ul li .excerpt {
   display: block;
   overflow: hidden;
   max-width: 95%;
   margin-bottom: 15px;
   text-overflow: ellipsis;
   font-size: 0.8125em;
   line-height: 1.5rem;
   color: #999;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
}
.cover-thumbnail-4 ul li .meta {
   display: block;
   font-size: 0.75em;
   color: #999;
}
.cover-thumbnail-4 ul li .meta span:before {
   content: "";
   display: inline-block;
   width: 2px;
   height: 2px;
   margin: 7px 8px 9px 5px;
   background-color: #d2d2d2;
   vertical-align: top;
}
.cover-thumbnail-4 ul li .meta span:first-child:before {
   content: none;
}
.cover-thumbnail-4 button {
   position: absolute;
   top: -1px;
   width: 24px;
   height: 24px;
   border: 1px solid #eee;
   border-radius: 50%;
   background: url(./images/ico_package.png) no-repeat 0 -50px;
   text-indent: -999em;
   outline: none;
}
.cover-thumbnail-4 .prev {
   right: 30px;
}
.cover-thumbnail-4 .next {
   right: 0;
   background-position-x: -50px;
}
.cover-thumbnail-4 button:focus,
.cover-thumbnail-4 button:hover {
   background-color: #757575;
   background-position-y: -74px;
}

.cover-list {
   position: relative;
   overflow: hidden;
   width: 100%;
   margin-bottom: 42px;
}
.cover-list h2 {
   margin-bottom: 35px;
   padding-bottom: 19px;
   border-bottom: 1px solid #eee;
   font-weight: 500;
   font-size: 1em;
   color: #555;
}
.cover-list ul li {
   overflow: hidden;
   margin-bottom: 33px;
}
.cover-list ul li a {
   display: block;
   text-decoration: none;
}
.cover-list ul li a:hover .title,
.cover-list ul li a:focus .title {
   text-decoration: underline;
}
.cover-list ul li .title {
   display: block;
   overflow: hidden;
   max-width: 95%;
   margin-bottom: 6px;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 1.25em;
   line-height: 1.4;
}
.cover-list ul li .excerpt {
   display: block;
   overflow: hidden;
   max-width: 95%;
   margin-bottom: 18px;
   text-overflow: ellipsis;
   font-size: 0.875em;
   line-height: 1.5rem;
   color: #999;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
}
.cover-list ul li .date {
   display: block;
   font-size: 0.75em;
   color: #999;
}
.cover-list .more {
   position: absolute;
   top: 4px;
   right: 0;
   font-weight: 300;
   font-size: 0.875em;
   color: #999;
}

.cover-event {
   margin-bottom: 57px;
}
.cover-event h2 {
   margin-bottom: 19px;
   font-weight: 500;
   font-size: 1em;
   color: #555;
}
.cover-event ul {
   display: inline-block;
   width: 102.702702702702703%;
   margin-left: -2.702702702702703%;
   vertical-align: top;
}
.cover-event ul li {
   float: left;
   width: 50%;
   padding-left: 2.631578947368421%;
   margin: 0 0 20px;
   box-sizing: border-box;
}
.cover-event ul li a {
   position: relative;
   display: block;
   padding-bottom: 33.333333333333333%;
   border: 1px solid #eee;
   background-color: #757575;
   background-repeat: no-repeat;
   background-position: 50% 50%;
   background-size: cover;
   text-decoration: none;
   color: #555;
}
.cover-event ul li a:hover,
.cover-event ul li a:focus {
   color: #333;
}
.cover-event ul li a:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.15);
}
.cover-event ul li .title {
   position: absolute;
   top: 15%;
   left: 24px;
   z-index: 30;
   overflow: hidden;
   max-width: 60%;
   margin-bottom: 7px;
   padding-top: 9px;
   text-overflow: ellipsis;
   line-height: 1.4;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   color: #fff;
}
.cover-event ul li .more {
   position: absolute;
   bottom: 20.833333333333333%;
   left: 24px;
   z-index: 30;
   text-decoration: underline;
   font-size: 0.875em;
   color: rgba(255,255,255,0.6);
}

.post-cover {
   position: relative;
   z-index: 20;
   display: table;
   width: 100%;
   height: 340px;
   background-color: #cbcbcb;
   background-position: 50% 50%;
   background-size: cover;
   box-sizing: border-box;
}
.post-cover:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   z-index: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.10);
}
.post-cover .inner {
   display: table-cell;
   position: relative;
   z-index: 10;
   vertical-align: bottom;
   padding-bottom: 30px;
}
.post-cover .category {
   display: block;
   max-width: 1080px;
   margin: 0 auto 13px;
   font-size: 0.875em;
   color: #fff;
}
.post-cover h1 {
   max-width: 1080px;
   margin: 0 auto;
   font-weight: 500;
   font-size: 2.125em;
   line-height: 1.2352;
   color: #fff;
}
.post-cover a {
   text-decoration: none;
   color: #fff;
}
.post-cover .meta {
   display: block;
   max-width: 1080px;
   margin: 34px auto 0;
   font-size: 0.875em;
   color: rgba(255,255,255,0.6);
}
.post-cover .meta a {
   color: rgba(255,255,255,0.6);
}
.post-cover .meta a:before,
.post-cover .meta span:before {
   content: "";
   display: inline-block;
   width: 2px;
   height: 2px;
   margin: 0 8px 0 4px;
   background-color: rgba(255,255,255,0.6);
   vertical-align: middle;
}
.post-cover .meta span:first-child:before {
   content: none;
}

.post-header {padding-top: 4px;}
.post-header h1 {
   margin-bottom: 18px;
   font-size: 1em;
   line-height: 1.375;
}
#tt-body-archive .post-header span:before {content: "'";}
#tt-body-archive .post-header span:after {content: "' 에 등록된 글";}
#tt-body-tag .post-header span:before {content: "#";}
#tt-body-search .post-header span:before {content: "'";}
#tt-body-search .post-header span:after {content: "'의 검색결과";}

.post-header h1 em {
   margin-left: 7px;
   font-style: normal;
   color: #04beb8;
}

.post-item {
   float: left;
   width: 31.081081081081081%;
   margin: 0 0 58px 3.378378378378378%;
}
.post-item:nth-child(3n+1) {
   clear: both;
   margin-left: 0;
}
.post-item a {
   display: block;
   text-decoration: none;
}
.post-item a:hover .title,
.post-item a:focus .title {
   text-decoration: underline;
}
.post-item .thum {
   position: relative;
   display: block;
   overflow: hidden;
   width: 100%;
   height: 0;
   margin-bottom: 5px;
   padding-bottom: 100%;
   background-color: #f8f8f8;
   border-radius: 25px;
}
.post-item .thum img {
   width: 100%;
   height: auto;
   transform: translateY(0%);
   -webkit-transform: translateY(0%);
   -ms-transform: translateY(0%);
}
.post-item .title {
   display: block;
   overflow: hidden;
   max-width: 98%;
   margin-bottom: 4px;
   padding-top: 9px;
   text-overflow: ellipsis;
   white-space: nowrap;
   line-height: 1.4;
}
.post-item .excerpt {
   display: block;
   overflow: hidden;
   max-width: 95%;
   margin-bottom: 15px;
   text-overflow: ellipsis;
   font-size: 0.8125em;
   line-height: 1.5rem;
   color: #999;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
}
.post-item .meta {
   display: block;
   font-size: 0.75em;
   color: #999;
}
.post-item .meta span:before {
   content: "";
   display: inline-block;
   width: 2px;
   height: 2px;
   margin: 0 8px 0 5px;
   background-color: #d2d2d2;
   vertical-align: middle;
}
.post-item .meta span:first-child:before {
   content: none;
}
.post-item.protected .thum:before {
   content: "";
   position: absolute;
   top: 50%;
   left: 50%;
   width: 34px;
   height: 47px;
   margin: -24px 0 0 -17px;
   background: url(./images/ico_package.png) no-repeat 0 -120px;
   background-size: 120px auto;
}

.not-found {
   display: block;
   width: 100%;
   margin-bottom: 35px;
}
.not-found li {
   position: relative;
   padding-left: 10px;
   font-size: 0.9375em;
   line-height: 2;
   color: #999;
}
.not-found li:before {
   content: "";
   position: absolute;
   top: 15px;
   left: 0;
   width: 2px;
   height: 2px;
   background-color: #999;
}
.not-found .tag,
.not-found .category,
.not-found .archive {
   display: none;
}
#tt-body-tag .not-found ul,
#tt-body-category .not-found ul,
#tt-body-archive .not-found ul {display: none;}
#tt-body-tag .not-found .tag,
#tt-body-category .not-found .category,
#tt-body-archive .not-found .archive {display: block;}

.pagination {
   margin-bottom: 60px;
   text-align: center;
}
.pagination a {
   display: inline-block;
   margin: 0 12px;
   font-size: 0.875em;
   line-height: 1.5rem;
   vertical-align: top;
   color: #999;
}
.pagination .selected {
   color: #333;
}
.pagination .prev,
.pagination .next {
   width: 22px;
   height: 22px;
   border: 1px solid #eee;
   border-radius: 50%;
   background: url(./images/ico_package.png) no-repeat 0 -50px;
   text-indent: -999em;
}
.pagination .next {
   background-position-x: -50px;
}
.pagination .view-more {
   display: block;
   margin: 0;
   padding: 12px 0 11px;
   border: 1px solid #eee;
   text-align: center;
   font-size: 0.875em;
   color: #999;
}

.tags {
   margin-bottom: 45px;
   font-size: 0;
}
.tags:after {
   content: "";
   clear: both;
   display: block;
   height: 0;
   visibility: hidden;
}
.tags h2 {
   margin-bottom: 15px;
   font-weight: 600;
   font-size: 16px;
}
.tags a {
   display: inline-block;
   margin: 0 8px 12px 0;
   padding: 0 17px;
   border: 1px solid #eee;
   border-radius: 32px;
   font-size: 14px;
   line-height: 30px;
   vertical-align: middle;
   color: #555;
}
.tags a:hover,
.tags a:focus {
   color: #333;
}

.page-nav {
   margin: 52px 0 60px 0;
   padding: 23px 0 20px;
   border-top: 1px solid #eee;
   border-bottom: 1px solid #eee;
}
.page-nav a {
   display: block;
   overflow: hidden;
   padding-left: 58px;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 0.875em;
   line-height: 2.125rem;
   color: #555;
}
.page-nav a:hover,
.page-nav a:focus {
   color: #333;
}
.page-nav a strong {
   float: left;
   width: 58px;
   margin-left: -58px;
   font-weight: 400;
   color: #999;
}
.page-nav a strong:after {
   content: "";
   display: inline-block;
   width: 1px;
   height: 5px;
   margin: 0 8px;
   background: url(./images/ico_package.png) no-repeat -150px -50px;
   vertical-align: middle;
}

.related-articles {
   margin-bottom: 55px;
}
.related-articles h2 {
   margin-bottom: 15px;
   font-weight: 600;
   font-size: 1em;
}
.related-articles ul {
   display: inline-block;
   width: 101.621621621621622%;
   margin-left: -1.621621621621622%;
   vertical-align: top;
}
.related-articles ul li {
   float: left;
   width: 25%;
   padding-left: 1.621621621621622%;
   box-sizing: border-box;
}
.related-articles ul li:first-child {
   margin-left: 0;
}
.related-articles ul li a {
   color: #555;
}
.related-articles ul li a:hover,
.related-articles ul li a:focus {
   color: #333;
}
.related-articles ul li figure {
   display: block;
   width: 100%;
   height: 3rem;
   margin-bottom: 9px;
   padding-bottom: 68.181818181818182%;
   background-color: #f8f8f8;
}
.related-articles ul li figure img {
   width: 100%;
   height: auto;
}
.related-articles ul li .title {
   display: block;
   overflow: hidden;
   max-width: 95%;
   text-overflow: ellipsis;
   white-space: nowrap;
   font-size: 0.875em;
   line-height: 1.4;
}
/* Entry Content */
.entry-content h1 {
   /* clear: both; */ /* bonmun */
   margin: 29px 0 22px;
   font-size: 1.6875em;
   line-height: 1.5;
   color: #000;
}
.entry-content h2 {
   clear: both;
   margin: 29px 0 22px;
   font-size: 1.5em;
   line-height: 1.5;
   color: #000;
}
.entry-content h3 {
   clear: both;
   margin: 29px 0 22px;
   font-size: 1.3125em;
   line-height: 1.5;
   color: #000;
}
.entry-content h4 {
   clear: both;
   margin: 29px 0 22px;
   font-weight: 400;
   font-size: 1.125em;
   line-height: 1.5;
   color: #000;
}
.entry-content a {
   color: #04beb8;
}
.entry-content p {
   margin-bottom: 32px;
   word-break: break-all;
   font-size: 1em;;
   line-height: 1.8;
   color: #555;
}
.entry-content p img {
   max-width: 100%;
   height: auto;
}
.entry-content figure {
   margin-top: 8px !important;
}
.entry-content hr {
   display: block;
   height: 0;
   border: 0;
   border-bottom: 1px solid #000;
}
.entry-content pre {
   word-break:break-all;
   white-space:pre-wrap;
   word-wrap:break-word;
}
.entry-content ul {
   list-style: disc inside;
   margin-bottom: 22px;
}
.entry-content ul li {
   position: relative;
   margin-bottom: 10px;
   padding-left: 22px;
   font-size: 0.9375em;
   line-height: 1.5714;
   color: #666;
   text-indent: -22px;
   list-style: inherit;
}
.entry-content ol {
   list-style: decimal inside;
   margin-bottom: 22px;
}
.entry-content ol li {
   position: relative;
   margin-bottom: 10px;
   padding-left: 16px;
   font-size: 0.9375em;
   line-height: 1.5714;
   color: #666;
   text-indent: -15px;
   list-style: inherit;
}
.entry-content img.alignleft {
   float: left;
   margin: 0 22px 22px 0;
}
.entry-content img.aligncenter {
   display: block;
   margin: 0 auto 22px;
}
.entry-content img.alignright {
   float: right;
   margin: 0 0 22px 22px;
}
.entry-content blockquote {
   margin-bottom: 40px;
   padding: 16px 20px;
   border-left: 4px solid #e6e6e6;
}
.entry-content blockquote p {
   margin: 22px 0 0;
}
.entry-content blockquote p:first-child {
   margin-top: 0;
}
.entry-content table {
   width:100%;
   margin-bottom: 22px;
   border: 1px solid #e6e6e6;
   border-collapse: collapse;
   text-align: center;
   font-size: 0.9375em;
   line-height: 1.5714;
   color: #666;
}
.entry-content table thead th {
   padding:7px 0 11px;
   border-left: 1px solid #e6e6e6;
}
.entry-content table tbody td {
   padding:7px 0 11px;
   border-left: 1px solid #e6e6e6;
   border-top: 1px solid #e6e6e6;
}
/* half-img */
.entry-content table.half-img {
		border:none;
	  margin:0;
}

.entry-content table.half-img td {
	width:50%;
	padding:0;
	border:none;
}
.entry-content table.half-img .imageblock {
	width:100% !important;
}
/* // half-img */
.entry-content input {
   height: 36px;
   padding: 0 10px;
   border: 1px solid #e6e6e6;
   font-size: 0.875em;
   line-height: 1.25;
   color: #666;
   box-sizing: border-box;
   vertical-align: middle;
}
.entry-content .entry-content .protected_form {
   margin-bottom: 40px;
   padding: 120px 0 200px;
   border-bottom: 1px solid #7a583a;
   text-align: center;
}
.entry-content .entry-content .protected_form input {
   width: 200px;
   margin-bottom: 10px;
   vertical-align: top;
}
.entry-content .cap1 {
   text-align: center;
   font-size: 0.875em;
   font-style: italic;
}
.entry-content .iframe-wrap {
   position: relative;
   height: 0;
   padding-bottom: 56.25%;
}
.entry-content .iframe-wrap iframe {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

.entry-content .protected_form {
   display: block;
   width: 100%;
   padding: 98px 0 120px;
   text-align: center;
}
.entry-content .protected_form h2 {
   margin: 0 0 8px;
   font-weight: 600;
   font-size: 1.625em;
   line-height: 2.125rem;
   color: #555;
}
.entry-content .protected_form p {
   margin-bottom: 34px;
   font-weight: 300;
   font-size: 1em;
   line-height: 1.75;
   color: #999;
}
.entry-content .protected_form input {
   width: 183px;
   padding: 0 23px;
   border: 1px solid #eee;
   font-size: 0.9125em;
   line-height: 2.125rem;
}
.entry-content .protected_form input:focus {
   border-color: #484848;
}
.entry-content .protected_form .btn {
   margin-left: 5px;
}

/* Comment */
.comments {
   margin-bottom: 60px;
}
.comments h2 {
   margin-bottom: 15px;
   font-weight: 600;
   font-size: 1em;
}
.comments h2 .count{
   margin-left: 4px;
   color: #04beb8;
}
.comment-list {
   margin-bottom: 60px;
   border-top: 1px solid #eee;
}
.comment-list ul li {
   display: inline-block;
   width: 100%;
   padding: 32px 0 28px;
   border-bottom: 1px solid #eee;
   vertical-align: top;
   box-sizing: border-box;
}
.comment-list .tt_more_preview_comments_wrap {
   padding: 0;
   border: 0;
}
.comment-list .tt_more_preview_comments_text {
   display: block;
   margin: -1px 0 0;
   padding: 12px 0 11px;
   border: 1px solid #eee;
   text-align: center;
   font-size: 0.875em;
   color: #999;
}
.comment-list .tt_more_preview_comments_text:hover {
   text-decoration: underline;
}
.comment-list ul li .author-meta {
   position: relative;
   margin-bottom: 7px;
   padding: 2px 0 0 60px;
   font-size: 0.8125em;
   color: #999;
}
.comment-list ul li .author-meta a {
   color: #999;
}
.comment-list ul li .author-meta a:before,
.comment-list ul li .author-meta span:before {
   content: "";
   display: inline-block;
   width: 2px;
   height: 2px;
   margin: 0 7px 0 5px;
   background-color: #e3e3e3;
   vertical-align: middle;
}
.comment-list ul li .author-meta .nickname {
   font-weight: 700;
   color: #555;
}
.comment-list ul li .author-meta .nickname a {
   color: #555;
}
.comment-list ul li .author-meta .avatar {
   float: left;
   width: 46px;
   margin: -2px 0 0 -60px;
   border: 1px solid #eee;
   border-radius: 50%;
}
.comment-list ul li .author-meta .control {
   position: absolute;
   top: 0;
   right: -9px;
   border-bottom: 0;
}
.comment-list ul li .author-meta .control button {
   content: "";
   display: block;
   width: 20px;
   height: 20px;
   background: url(./images/ico_package.png) no-repeat -141px 5px;
   text-indent: -999em;
}
.comment-list ul li .author-meta .control .link {
   display: none;
   position: absolute;
   top: 100%;
   left: -65px;
   width: 70px;
   text-align: center;
}
.comment-list ul li .author-meta .control .link a {
   display: block;
   margin-top: -1px;
   border: 1px solid #e0e0e0;
   background-color: #fff;
   text-decoration: none;
   font-size: 0.875em;
   line-height: 1.5rem;
   color: #333;
}
.comment-list ul li .author-meta .control .link a:focus,
.comment-list ul li .author-meta .control .link a:hover {
   background-color: #fafafa;
   color: #222;
}
.comment-list ul li .author-meta .nickname:before,
.comment-list ul li .author-meta .nickname a:before,
.comment-list ul li .author-meta .control:before,
.comment-list ul li .author-meta .control a:before {
   content: none;
}
.comment-list ul li p {
   max-width: 85%;
   padding: 0 0 0 60px;
   font-size: 0.875em;
   line-height: 1.3125rem;
   color: #777;
   box-sizing: border-box;
}
.comment-list ul li .reply {
   display: inline-block;
   margin-top: 10px;
   font-size: 0.8125rem;
   color: #999;
}
.comment-list ul li ul {
   margin: 28px 0 -32px 0;
   padding: 26px 0 21px;
   border-top: 1px solid #eee;
   background-color: #fafafa;
}
.comment-list ul li ul li {
   padding: 14px 0 15px 60px;
   border-bottom: 0;
}
.comment-list ul li ul li .author-meta {
   margin-bottom: 8px;
}
.comment-list ul li ul li .author-meta .control {
   right: 15px;
}
.comment-list ul li ul li .author-meta .avatar {
   width: 42px;
}
.comment-list ul li ul li p {
   max-width: 80%;
}
.comment-list ul li ul .tt_more_preview_comments_wrap {
   display: block;
}
.comment-list ul li ul .tt_more_preview_comments_text {
   margin-bottom: 16px;
   border-top: 0;
   border-left: 0;
   border-right: 0;
}
.comment-list ul li ul .tt_more_preview_comments_text:first-child {
   margin-top: -24px;
   padding: 12px 0 11px;
}

.comment-form {
   position: relative;
   margin-bottom: 60px;
}
.comment-form .field {
   overflow: hidden;
   margin-bottom: -1px;
   border: 1px solid #eee;
}
.comment-form .field input[type=text],
.comment-form .field input[type=password] {
   float: left;
   width: 50%;
   padding: 12px 16px;
   border: 0;
   border-left: 1px solid #eee;
   font-size: 0.875em;
   color: #777;
   box-sizing: border-box;
}
.comment-form .field input:first-child {
   border-left: 0;
}
.comment-form textarea {
   display: block;
   width: 100%;
   margin-bottom: 20px;
   padding: 16px 100px 16px 16px;
   border: 1px solid #eee;
   font-size: 0.875em;
   color: #777;
   box-sizing: border-box;
   resize: none;
}
.comment-form input::-webkit-input-placeholder,
.comment-form textarea::-webkit-input-placeholder {
   color: #999;
}
.comment-form .secret {
   position: absolute;
   left: 0;
   bottom: 8px;
}
.comment-form .secret input {
   display: none;
}
.comment-form .secret label {
   display: inline-block;
   font-size: 0.8125em;
   line-height: 1.25rem;
   color: #666;
   outline: none;
   cursor: pointer;
}
.comment-form .secret label:before {
   content: "";
   display: inline-block;
   width: 19px;
   height: 18px;
   margin-right: 12px;
   border: 1px solid #e1e1e1;
   vertical-align: top;
   background-color: #fff;
}
.comment-form .secret input[type=checkbox]:checked+label:before {
   background: url(./images/ico_package.png) no-repeat -47px 4px;
}
.comment-form .submit {
   text-align: right;
}
.comment-form .submit button {
   background-color: #333;
   color: #fff;
}
.comment-form .submit button:hover,
.comment-form .submit button:focus {
   background-color: #04beb8;
}

/* Aside(sidebar) */
.sidebar h2 {
   margin-bottom: 7px;
   font-weight: 500;
   font-size: 0.875em;
   color: #555;
}
.sidebar ul li {
   padding: 4px 0 5px;
   font-size: 0.8125em;
   line-height: 1.25rem;
   color: #777;
}
.sidebar ul li a {
   color: #777;
}
.sidebar ul li a:hover {
   color: #333;
}
.sidebar .sidebar-2 {
   margin-top: 38px;
   padding-top: 46px;
   border-top: 1px solid #eee;
}

.sidebar .category {
   margin-bottom: 36px;
}
.sidebar .category ul li {
   padding: 0;
   font-size: 0.875em;
   font-weight: 600;
}
.sidebar .category ul li a {
   color: #555;
}
.sidebar .category ul li a:hover {
   color: #333;
}
.sidebar .category ul li ul {
   padding-top: 8px;
}
.sidebar .category ul li ul li {
   padding: 6px 0 7px;
   font-weight: 400;
   font-size: 1em;
}
.sidebar .category ul li ul li ul {
   overflow: hidden;
   margin-bottom: -4px;
   padding-top: 6px;
}
.sidebar .category ul li ul li ul li {
   position: relative;
   padding: 3px 0 3px 9px;
   /* border-left: 2px solid #eee; */
   font-size: 0.8125rem;
}
.sidebar .category ul li ul li ul li:before {
   content: "";
   position: absolute;
   bottom: 7px;
   left: 0;
   width: 2px;
   height: 100%;
   background-color: #eee;
}
.sidebar .category ul li ul li ul li:first-child:before {
   top: 7px;
   bottom: auto;
}
.sidebar .category ul li ul li ul li a {
   color: #999;
}
.sidebar .notice {
   margin-bottom: 37px;
}
.sidebar .recent-comment {
   margin-bottom: 36px;
}
.sidebar .recent-comment ul li a {
   display: block;
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
}
.sidebar .post-list {
   margin-bottom: 46px;
}
.sidebar .post-list h2 {
   margin-bottom: 12px;
}
.sidebar .post-list ul li {
   overflow: hidden;
   margin-bottom: 18px;
   padding: 0;
}
.sidebar .post-list ul li img {
   float: right;
   width: 58px;
   height: 58px;
   margin: 2px 0 0 20px;
}
.sidebar .post-list ul li a {
   display: block;
   overflow: hidden;
   text-decoration: none;
}
.sidebar .post-list ul li a:hover .title {
   text-decoration: underline;
}
.sidebar .post-list ul li .title {
   display: block;
   display: -webkit-box;
   overflow: hidden;
   text-overflow: ellipsis;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}
.sidebar .post-list ul li .date {
   display: block;
   margin-top: 6px;
   font-size: 0.75rem;
   line-height: 1;
}
.sidebar .social-list {
   margin-bottom: 46px;
}
.sidebar .social-list h2 {
   margin-bottom: 18px;
}
.sidebar .social-list .tab-list {
   overflow: hidden;
   width: 100%;
}
.sidebar .social-list ul li {
   margin-bottom: 15px;
   padding: 0 0 0 48px;
}
.sidebar .social-list ul li a {
   display: block;
   text-decoration: none;
}
.sidebar .social-list ul li a:hover .text {
   text-decoration: underline;
}
.sidebar .social-list ul li .avatar {
   float: left;
   overflow: hidden;
   width: 40px;
   height: 40px;
   margin-left: -48px;
   border-radius: 50%;
}
.sidebar .social-list ul li .title {
   display: block;
}
.sidebar .social-list ul li .date {
   display: block;
   margin-top: 6px;
   font-size: 0.75rem;
   color: #777;
}
#aside .tags {
   margin: 0 0 41px;
   padding: 0;
   font-size: 1em;
}
#aside .tags h2 {
   margin-bottom: 8px;
   font-size: 0.875em;
}
#aside .tags a {
   float: none;
   margin: 0 4px 0 0;
   padding: 0;
   border: 0;
   font-size: 0.8125em;
   line-height: 2;
   color: #555;
}
#aside .tags a:after {
   content: ", ";
}
#aside .tags a:last-child:after {
   content: none;
}
#aside .tags a:hover,
#aside .tags a:focus {
   color: #333;
}
.sidebar .count {
   margin-bottom: 46px;
}
.sidebar .count h2 {
   margin-bottom: 3px;
}
.sidebar .count h2:before {
   content: "";
   display: block;
   width: 17px;
   height: 1px;
   margin-bottom: 18px;
   background-color: #555;
}
.sidebar .count p {
   margin-bottom: 6px;
   font-size: 0.8125em;
   color: #777;
}
.sidebar .count .total {
   margin-bottom: 12px;
   font-weight: 700;
   font-size: 1.875em;
   color: #555;
}
.sidebar .social-channel {
   margin-bottom: 48px;
}
.sidebar .social-channel ul {
   overflow: hidden;
   width: 100%;
}
.sidebar .social-channel ul li {
   float: left;
   margin-left: 10px;
   padding: 0;
}
.sidebar .social-channel ul li:first-child {
   margin-left: 0;
}
.sidebar .social-channel ul li a {
   display: block;
   width: 34px;
   height: 34px;
   border: 1px solid #eee;
   border-radius: 50%;
   text-indent: -999em;
   background: url(./images/ico_package.png) no-repeat 0 -100px;
}
.sidebar .social-channel ul li.youtube a {
   background-position-x: -50px;
}
.sidebar .social-channel ul li.instagram a {
   background-position-x: -100px;
}
.sidebar .social-channel ul li.twitter a {
   background-position-x: -150px;
}
.sidebar .social-channel ul li a:focus,
.sidebar .social-channel ul li a:hover {
   background-color: #757575;
   background-position-y: -150px;
}
.sidebar .tab-ui h2 a {
   color: #999;
}
.sidebar .tab-ui h2 a.current {
   color: #555;
}
.sidebar .tab-ui h2 a:before {
   content: "";
   display: inline-block;
   width: 1px;
   height: 5px;
   margin: 0 10px;
   vertical-align: middle;
   background: url(./images/ico_package.png) no-repeat -100px -50px;
}
.sidebar .tab-ui h2 a:first-child:before {
   content: none;
}

/* ETC */
#dimmed {
   position: fixed;
   top: 0;
   left: 0;
   z-index: 300;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.6);
}

.mobile-menu {
   overflow: hidden;
   height: 100%;
}

.slide-wrap {
   overflow: hidden;
}

/* Overwrite */
#content .another_category {
   margin: 60px 0 57px !important;
   padding: 16px 20px 14px;
}
#content .another_category h4 {
   margin: 0 0 13px !important;;
   padding: 0 !important;
   border-bottom: 0 !important;
   font-size: 0.875em !important;
}
#content .another_category table {
   margin: 0 !important;
   border: 0;
}
#content .another_category th {
   padding: 2px 0 !important;
   font-size: 0.875rem !important;
}
#content .another_category th a.current {
   text-decoration: underline !important;
   font-weight: 400;
   color: #333 !important;
   border: 0 !important;
}
#content .another_category td {
   padding: 2px 0 !important;
   border: 0;
   font-size: 0.75rem !important;
}

.container_postbtn {
   margin: 53px 0 55px;
   padding: 0 !important;
}

.absent_post:before {
   content: "죄송합니다만 \A글을 찾지 못했습니다.";
   display: block;
   margin-bottom: 7px;
   font-weight: bold;
   font-size: 1.75em;
   line-height: 1.285714285714286;
   color: #555;
   white-space: pre;
}
.absent_post {
   padding: 98px 0 !important;
   background: none !important;
   font-weight: normal !important;
   font-size: 1em !important;
   line-height: 1.75;
   color: #999 !important;
}

/* Option(Color Type & List Type) */
.layout-aside-left #content {
   float: right;
}
.layout-aside-left #aside {
   float: left;
   margin-left: 0;
   padding: 80px 0;
}
.layout-aside-left #container .content-wrap:before {
   margin-left: -256px;
}

.list-type-vertical .post-item {
   margin-bottom: 38px;
}
.list-type-vertical .post-item .thum {
   margin-bottom: 3px;
   padding-bottom: 130.434782608695652%;
}
.list-type-vertical .post-item .thum img {
   transform: translateY(0);
   -webkit-transform: translateY(0);
   -ms-transform: translateY(0);
}
.list-type-vertical .post-item .title {
   margin-bottom: 5px;
}
.list-type-vertical .post-item .excerpt,
.list-type-vertical .post-item .meta .comment {
   display: none;
}
.list-type-vertical .post-item .meta span:before {
   content: none;
}

.list-type-thumbnail .post-header {
   margin-bottom: 28px;
   padding-bottom: 18px;
   border-bottom: 1px solid #eee;
}
.list-type-thumbnail .post-header h1 {
   margin-bottom: 0;
}
.list-type-thumbnail .post-item {
   float: none;
   overflow: hidden;
   width: 100%;
   margin: 0 0 28px;
}
.list-type-thumbnail .post-item .thum {
   display: inline;
   width: auto;
   height: auto;
   margin: 0;
   padding: 0;
}
.list-type-thumbnail .post-item .thum img {
   float: right;
   width: 150px;
   height: 150px;
   margin-left: 57px;
   border: 1px solid #f1f1f1;
   transform: translateY(0);
   -webkit-transform: translateY(0);
   -ms-transform: translateY();
}
.list-type-thumbnail .post-item.protected .thum {
   float: right;
   width: 126px;
   height: 166px;
   margin-left: 57px;
   border: 1px solid #f1f1f1;
   background-color: #f8f8f8;
}
.list-type-thumbnail .post-item .title {
   max-width: 95%;
   margin-bottom: 12px;
   padding-top: 7px;
   font-size: 1.25em;
}
.list-type-thumbnail .post-item .excerpt {
   overflow: hidden;
   height: 2.75rem;
   margin-bottom: 20px;
   font-size: 0.875em;
   line-height: 1.25rem;
}
.list-type-thumbnail .post-item .meta .comment {
   display: none;
}
.list-type-thumbnail .post-item .meta span:before {
   content: none;
}

.list-type-text .post-header {
   margin-bottom: 38px;
   padding-bottom: 18px;
   border-bottom: 1px solid #eee;
}
.list-type-text .post-header h1 {
   margin-bottom: 0;
}
.list-type-text .post-item {
   float: none;
   overflow: hidden;
   width: 100%;
   margin: 0 0 35px;
}
.list-type-text .post-item .thum {
   display: none;
}
.list-type-text .post-item .title {
   max-width: 96%;
   margin-bottom: 10px;
   padding-top: 0;
   font-size: 1em;
}
.list-type-text .post-item .excerpt {
   max-width: 96%;
   margin-bottom: 20px;
   font-size: 0.875em;
   line-height: 1.25rem;
}
.list-type-text .post-item .meta .comment {
   display: none;
}
.list-type-text .post-item .meta span:before {
   content: none;
}
.list-type-text .pagination {
   margin-top: 36px;
}

/* Retina Display */
@media  only screen and (-webkit-min-device-pixel-ratio:1.5) {
   #header .util .search:before,
   #header .util .search button,
   #footer .page-top,
   .cover-thumbnail-3 button,
   .cover-thumbnail-4 button,
   .page-nav a strong:after,
   .entry-content .protected_form h2:before,
   .comment-list ul li .author-meta .control button,
   .comment-form .secret input[type=checkbox]:checked+label:before,
   .sidebar .social-channel ul li a,
   .sidebar .tab-ui h2 a:before {
      background-image: url(./images/ico_package_2x.png);
      background-size: 200px auto;
   }
   .post-item.protected .thum:before {
      background-image: url(./images/ico_package_2x.png);
      background-size: 120px auto;
   }
}

/* Media Screen */
@media screen and (max-width:1080px) {
   #header h1,
   #footer {
      padding-left: 24px;
      padding-right: 24px;
   }
   #header .util {
      right: 24px;
   }
   #header .util .profile nav {
      left: auto;
      right: 0;
      margin: 0;
   }
   #gnb ul {
      margin-left: -6px;
   }
   #container .content-wrap:before {
      left: 72.7%;
      margin-left: 0;
   }
   .layout-aside-left #container .content-wrap:before {
      left: 27.3%;
      margin-left: 0;
   }
   .main-slider .paging {
      left: auto;
      right: 20px;
      margin-left: 0;
   }
   .cover-event ul li .title {
      -webkit-line-clamp: 1;
   }
   .post-cover {
      padding-left: 24px;
      padding-right: 24px;
   }
}

@media screen and (max-width:767px) {
   #header h1 {
      position: relative;
      z-index: 10;
      padding: 24px;
      background-color: #fff;
   }
   #header .util {
      top: 0;
      right: 0;
      width: 100%;
      padding: 24px 68px 24px 24px;
      box-sizing: border-box;
   }
   #header .util .search {
      float: right;
   }
   #header .util .search.on {
      z-index: 20;
      width: 100%;
   }
   #header .util .search.on input {
      float: right;
      width: 100%;
   }

   #header .util .profile {
      display: none;
   }
   #header .util .menu {
      position: absolute;
      top: 24px;
      right: 24px;
      z-index: 300;
      display: inline-block;
      width: 30px;
      height: 30px;
      border: 1px solid #eee;
      border-radius: 50%;
      text-indent: -999em;
      outline: none;
   }
   #header .util .menu span,
   #header .util .menu:before,
   #header .util .menu:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 16px;
      height: 1px;
      margin: 0 0 0 -8px;
      background-color: #7f7f7f;
      transition: transform .5s;
      -webkit-transition: transform .5s;
   }
   #header .util .menu:before {
      margin-top: -6px;
   }
   #header .util .menu:after {
      margin-top: 6px;
   }
	
   #gnb {
		 display:none; /* mobile hide menu */
      height: 69px;
   }
   #gnb ul {
      margin-left: 0;
   }
   #gnb ul li {
      padding: 0 24px;
   }
   #gnb ul li a {
      padding: 25px 0 24px;
   }

   #container .content-wrap {
      padding: 0;
   }
   #container .content-wrap:before {
      content: none;
   }
   #content {
      float: none;
      width: auto;
      padding: 34px 24px 40px;
   }

   #aside {
      position: fixed;
      top: 0;
      right: -278px;
      z-index: 400;
      float: none;
      overflow: auto;
      width: 278px;
      height: 100%;
      padding: 94px 24px 40px;
      background-color: #fff;
      box-sizing: border-box;
      transition: left .5s;
      -webkit-transition: right .5s;
   }
   #aside .close {

   }
   #aside .close {
      position: absolute;
      top: 24px;
      right: 24px;
      z-index: 300;
      display: inline-block;
      width: 30px;
      height: 30px;
      border: 1px solid #eee;
      border-radius: 50%;
      text-indent: -999em;
      outline: none;
   }
   #aside .close span {display: none;}
   #aside .close:before,
   #aside .close:after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 16px;
      height: 1px;
      margin: 0 0 0 -8px;
      background-color: #7f7f7f;
   }
   #aside .close:before {
      transform: rotate(-45deg);
   }
   #aside .close:after {
      transform: rotate(45deg);
   }

   #aside .profile {
      display: block;
      position: relative;
      margin-bottom: -40px;
   }
   #aside .profile:before {
      content: "";
      position: absolute;
      top: 0;
      left: -24px;
      z-index: 0;
      width: 100%;
      height: 100%;
      padding: 0 24px;
      background-color: #f5f5f5;
   }
   #aside .profile ul {
      position: relative;
      z-index: 10;
      text-align: center;
   }
   #aside .profile ul li {
      display: inline-block;
      padding: 16px 0 18px;
      font-size: 0.875em;
      color: #555;
      vertical-align: middle;
   }
   #aside .profile ul li a {
      display: inline-block;
      vertical-align: middle;
   }
   #aside .profile ul li:before {
      content: "";
      display: inline-block;
      width: 1px;
      height: 7px;
      margin: 0 20px 0 16px;
      background: url(./images/ico_package_2x.png) -100px -50px;
      background-size: 200px auto;
      vertical-align: middle;
   }
   #aside .profile ul li:first-child:before {
      content: none;
   }

   #footer {
      padding: 32px 24px 26px;
   }
   #footer p {
      margin-bottom: 11px;
      font-size: 0.8125em;
   }
   #footer .order-menu {
      margin-bottom: 29px;
   }
   #footer .order-menu a {
      display: block;
      margin-bottom: 0;
      line-height: 1.75rem;
   }
   #footer .order-menu a:before {
      content: none;
   }

   #tt-body-index #content {
      padding: 0;
   }
   #tt-body-index #content>.inner {
      padding: 0 24px;
   }
   #tt-body-index #content>.inner:first-child {
      padding-top: 40px;
   }
   #tt-body-index.list-type-text #content>.inner:first-child {
      padding-top: 36px;
   }
   #tt-body-index .pagination {
      margin: 0 20px 40px;
   }
   #tt-body-page #content {
      padding-left: 0;
      padding-right: 0;
   }
   #tt-body-tag .tags,
   #tt-body-guestbook #content {
      padding-left: 0;
      padding-right: 0;
   }
   #tt-body-guestbook .post-header {
      margin: 0 24px 28px;
   }

   /* modify header */
   #tt-body-page #container {
     padding-top: 124px;
   }
   /* //modify header */

   .layout-aside-left #aside {
      padding: 80px 20px 40px;
   }
   .mobile-menu #aside {
      right: 0;
   }

   .main-slider ul li {
      height: 200px; /* mobile main height */
   }
   .main-slider ul li .inner {
      padding-bottom: 40px;
      vertical-align: bottom;
   }
   .main-slider ul li .text {
      max-width: 100%;
      font-weight: 300;
      font-size: 1.75em;
      line-height: 2.25rem;
      -webkit-line-clamp: 3;
   }
   .main-slider ul li .btn {
      margin-top: 15px;
   }
   .main-slider .paging {
      top: 40px;
      left: 0;
      right: auto;
      bottom: 20px;
      width: 100%;
      height: 8px;
      padding: 0 19px;
      text-align: left;
      box-sizing: border-box;
   }
   .main-slider .paging button {
      display: inline-block;
      margin: 0 5px;
      vertical-align: top;
   }

   .cover-thumbnail-1 {
      margin-bottom: 40px;
      padding: 36px 24px 7px;
      border-top: 8px solid #f5f5f5;
   }
   .cover-thumbnail-1 h2 {
      font-weight: 600;
   }
   .cover-thumbnail-1 .more {
      top: 40px;
      right: 24px;
   }
   .cover-thumbnail-1 ul {
      display: block;
      width: 100%;
      margin-left: 0;
      margin-bottom: -39px;
   }
   .cover-thumbnail-1 ul li {
      float: none;
      width: 100%;
      margin-bottom: 30px;
      padding-left: 0;
   }
   .cover-thumbnail-1 ul li .title {
      margin-bottom: 4px;
   }

   .cover-thumbnail-2 {
      width: auto;
      margin: 0;
      padding: 37px 24px 38px;
      border-top: 8px solid #f5f5f5;
   }
   .cover-thumbnail-2 h2 {
      font-weight: 600;
   }
   .cover-thumbnail-2 ul li figure {
      width: 98px;
      margin-left: 24px;
   }
   .cover-thumbnail-2 ul li .title {
      margin-bottom: 7px;
      padding-top: 3px;
      font-size: 1.125em;
   }
   .cover-thumbnail-2 ul li .excerpt {
      margin-bottom: 9px;
   }

   .cover-thumbnail-3 {
      width: auto;
      margin: 0;
      padding: 37px 24px 15px;
      border-top: 8px solid #f5f5f5;
   }
   .cover-thumbnail-3 h2 {
      font-weight: 600;
   }
   .cover-thumbnail-3 .prev {
      top: 37px;
      right: 54px;
   }
   .cover-thumbnail-3 .next {
      top: 37px;
      right: 24px;
   }
   .cover-thumbnail-3 ul {
      display: block;
      width: auto;
      margin-left: -16px;
   }
   .cover-thumbnail-3 ul li {
      width: 50%;
      padding-left: 16px;
      box-sizing: border-box;
   }

   .cover-thumbnail-4 {
      width: auto;
      margin: 0;
      padding: 37px 24px 9px;
      border-top: 8px solid #f5f5f5;
   }
   .cover-thumbnail-4 h2 {
      font-weight: 600;
   }
   .cover-thumbnail-4 .prev {
      top: 37px;
      right: 54px;
   }
   .cover-thumbnail-4 .next {
      top: 37px;
      right: 24px;
   }
   .cover-thumbnail-4 ul {
      width: 100%;
      margin-left: 0;
   }
   .cover-thumbnail-4 ul li {
      width: 100%;
      margin-bottom: 27px;
      padding-left: 0;
   }
   .cover-thumbnail-4 ul li figure {
      margin-bottom: 7px;
   }
   .cover-thumbnail-4 ul li .title {
      margin-bottom: 8px;
   }
   .cover-thumbnail-4 ul li .excerpt {
      margin-bottom: 12px;
   }

   .cover-list {
      width: auto;
      margin: 0;
      padding: 37px 24px 12px;
      border-top: 8px solid #f5f5f5;
   }
   .cover-list h2 {
      margin-bottom: 28px;
      font-weight: 600;
   }
   .cover-list .more {
      top: 37px;
      right: 24px
   }
   .cover-list ul li {
      margin-bottom: 26px;
   }
   .cover-list ul li .title {
      margin-bottom: 8px;
      font-size: 1em;
   }
   .cover-list ul li .excerpt {
      margin-bottom: 9px;
      -webkit-line-clamp: 4;
   }

   .cover-event {
      width: auto;
      margin: 0;
      padding: 37px 24px 24px;
      border-top: 8px solid #f5f5f5;
   }
   .cover-event h2 {
      font-weight: 600;
   }
   .cover-event ul {
      display: block;
      width: auto;
      margin-left: 0;
   }
   .cover-event ul li {
      float: none;
      width: auto;
      margin-bottom: 16px;
      padding-left: 0;
   }
   .cover-event ul li a {
      padding-bottom: 43.382352941176471%;
   }
   .cover-event ul li .title {
      -webkit-line-clamp: 3;
   }
   .cover-event ul li .more {
      display: none;
   }

   .cover-thumbnail-1:first-child {
      border-top: 0;
   }

   .post-header {
      padding-top: 2px;
   }
   .post-item {
      float: none;;
      width: auto;
      margin-left: 0;
      margin-bottom: 30px;
   }
   .post-item .thum {
      margin-bottom: 7px;
   }
   .post-item .title {
      margin-bottom: 12px;
   }
   .post-item .excerpt {
      margin-bottom: 12px;
   }

   .pagination {
      margin-bottom: 0;
   }
   .pagination a {
      margin: 0 5px;
   }

   .list-type-vertical .post-item {
      margin-bottom: 30px;
   }
   .list-type-vertical .post-item .title {
      margin-bottom: 7px;
   }

   .list-type-thumbnail .post-item .thum img {
      width: 96px;
      height: auto; /* modify main thumb */
      margin-left: 25px;
   }
   .list-type-thumbnail .post-item .title {
      margin-bottom: 9px;
      padding-top: 3px;
      font-size: 1.125em;
   }
   .list-type-thumbnail .post-item .excerpt {
      margin-bottom: 11px;
   }
   .list-type-thumbnail .post-item.protected .thum {
      width: 96px;
      height: 128px;
      margin-left: 25px;
   }

   .list-type-text .post-header {
      margin-bottom: 28px;
   }
   .list-type-text .post-item {
      margin-bottom: 26px;
   }
   .list-type-text .post-item .title {
      margin-bottom: 10px;
   }
   .list-type-text .post-item .excerpt {
      margin-bottom: 12px;
      -webkit-line-clamp: 4;
   }
   .list-type-text .pagination {
      margin-top: 30px;
   }

   .post-cover {
      padding-left: 24px;
      padding-right: 24px;
      height: 124px; /* modify header */
   }
   .post-cover .inner {
      padding-bottom: 10px; /* mobile writing */
      vertical-align: bottom;
   }

   .post-cover .inner > h1 {
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
   }

   .post-cover .category {
      margin-bottom: 13px;
   }
   .post-cover h1 {
      font-weight: 500; /* mobile name size */
		 font-size: 20px; /* mobile name size */
   }
   .post-cover .meta {
      margin-top: 10px; /* mobile writing blank */
      font-size: 0.8125em;
   }

   .entry-content {
      padding: 0 24px;
   }
   .entry-content p {
      margin-bottom: 22px;
      line-height: 1.625rem;
   }
   .entry-content figure {
      margin-top: 6px !important;
   }
   .entry-content .protected_form input {
      width: 163px;
   }

   #content .another_category {
      margin: 40px 0 37px !important;
   }

   .container_postbtn {
      margin: 35px 0 37px;
   }

   .tags {
      margin-bottom: 25px;
      padding: 0 24px;
   }
   .tags h2 {
      margin-bottom: 19px;
   }

   .page-nav {
      margin: 32px 24px 32px;
      padding: 25px 0 25px;
   }
   .page-nav a {
      line-height: 1.6875rem;
   }

   .related-articles {
      margin-bottom: 21px;
      padding: 0 24px;
   }
   .related-articles h2 {
      margin-bottom: 19px;
   }
   .related-articles ul {
      width: 103.571428571428571%;
      margin-left: -3.571428571428571%;
   }
   .related-articles ul li {
      width: 50%;
      margin-bottom: 15px;
      padding-left: 3.448275862068966%;
   }
   .related-articles ul li figure {
      margin-bottom: 9px;
   }
   .related-articles ul li .title {
      height: 2.8em;
      white-space: normal;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
   }

   .comments {
      margin: 0;
   }
   .comments iframe {
      position: absolute;
      bottom: 0;
      left: 0;
   }
   .comments h2 {
      margin: -3px 0 -1px;
      padding: 0 24px;
   }
   .comment-list {
      margin-bottom: 32px;
      border: 0;
   }
   .comment-list>ul>.tt_more_preview_comments_wrap {
      margin-top: 21px;
      padding: 0 24px;
   }
   .comment-list ul li {
      padding: 34px 0 28px;
   }
   .comment-list ul li .author-meta {
      margin-bottom: 6px;
      padding-right: 35px;
   }
   .comment-list ul li .author-meta .avatar {
      width: 30px;
      height: 30px;
      margin-left: -42px;
   }
   .comment-list ul li .author-meta .nickname {
      font-weight: 400;
   }
   .comment-list ul li .author-meta .control {
      top: -2px;
      right: 13px;
   }
   .comment-list ul li .author-meta,
   .comment-list ul li p {
      max-width: none;
      padding: 0 66px;
   }
   .comment-list ul li ul {
      margin-top: 27px;
      padding: 19px 0 12px;
   }
   .comment-list ul li ul li {
      padding: 15px 0 16px;
   }
   .comment-list ul li ul li p {
      max-width: none;
   }
   .comment-list ul li ul li .author-meta {media screen and
      margin-bottom: 6px;
   }
   .comment-list ul li ul li .author-meta .avatar {
      width: 30px;
   }
   .comment-form {
      margin-bottom: 40px;
      padding: 0 24px;
   }
   .comment-form textarea {
      padding-right: 32px;
   }
   .comment-form .secret {
      left: 24px;
   }

   .layout-aside-left #content {
      float: none;
   }

   #tt-body-index.promotion-mobile-hide .main-slider {
      display: none;
   }

   #content .another_category th {
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
   }
}

@media screen and (max-width: 767px){
   #tt-body-index .post-header {
      padding-top: 36px;
      padding-left: 24px;
   }
}