@charset "utf-8";

/* 
#========================================# 
 * CSS CONTENTS:
 *
 * 01. Web Font
 * 02. Reset
 * 03. Accessibility Navigation
 * 04. Layout Selector
 *     - Common
 *     - Header
 *     - GNB
 *     - Search
 *     - Footer
 *     - Quick
 * 05. Home Cover
 *     - Slider
 *     - Contents
 * 06. List Type
 *     - Gallery
 *     - News
 *     - Search
 * 07. Page
 *     - Not found
 *     - Post
 *     - Tag
 *     - Related articles
 * 08. Components
 *     - Button
 *     - Pagination
 *     - Comments
 * 09. Entry Content
 * 10. ETC
 * 11. Media Query
 *     - Laptop
 *     - Tablet
 *     - Mobile
#========================================# 
*/


/* ---------------------------------------
    01 Web Font
--------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap');


/* ---------------------------------------
    02 Reset
--------------------------------------- */
body { font-weight: 400; font-family: 'Play', 'Noto Sans KR', sans-serif; font-size: 1em; line-height: 1.25; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
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; }

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


/* ---------------------------------------
    03 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: nowrap; }
#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; }


/* ---------------------------------------
    04 Layout Selector
--------------------------------------- */
/* ----------- Common ----------- */
body.modal-open { overflow: hidden; }
#wrap { width: 100%; position: relative; }
.container { padding: 80px 0 100px; }
.inner { max-width: 1280px; margin: 0 auto; padding:0 40px; }
#content .inner:after { content: ""; clear: both; display: block; height: 0; visibility: hidden; }
#content .contents-inner { width: 100%; background-color: #fff; }
#tt-body-index .container { padding: 0; }
#tt-body-page .container {}
#tt-body-page #content > .inner { max-width: 960px; background-color: #fff; }
#tt-body-page .list-cont-wrap { margin-left: 0; }

/* ----------- Header ----------- */
#header { width: 100%; height: 80px; margin: 0 auto; border-bottom: 1px solid rgba(255, 255, 255, 0.5); background-color: transparent; box-sizing: border-box; position: fixed; z-index: 5; left: 50%; transform: translateX(-50%); -ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); transition: .2s; z-index: 30; }
#header .header-wrap { width: 100%; max-width: 1920px; margin: 0 auto; position: relative; }
#header .header-wrap:after { content: ''; display: block; clear: both; }
#header .header-title { display: block; position:absolute; left: 60px; top:29px; font-size: 0; }
#header h1 { width: 320px; height: 22px; background: url('./images/logo_wh.svg') no-repeat center / auto 20px; transition: .2s; }
#header h1 a { width: 100%; height: 100%; display: block; font-size: 0; text-indent: -9999px; }
#header .menu  { position:absolute; top:15px; left: 50%; transform: translateX(-50%);-ms-transform: translateX(-50%); -webkit-transform: translateX(-50%); }
#header .mobile-menu { display: none; }
#header .mobile-search { position: absolute; top: 24px; right: 220px; cursor: pointer; }
#header .mobile-search span { display: block; width: 32px;height: 32px; background: url('./images/ico_search_wh.svg') no-repeat center / auto 24px; transition: .2s; }

/* ------------- GNB ------------ */
#gnb {}
#gnb:after { content: ''; display: block; clear: both; }
#gnb > ul:after { content: ''; display: block; clear: both; }
#gnb > ul > li > a { display: none; }
#gnb .category_list { display: inline-block; text-align: center; font-size: 0; }
#gnb .category_list > li { display: inline-block; position: relative; margin:22px 35px 0; }
#gnb .category_list > li > a { display: inline-block; padding: 0 0 25px; font-size: 18px; line-height: 1em; color: #fff; text-decoration: none; font-weight: bold; cursor: pointer; letter-spacing: -0.028em; transition: color .3s; text-shadow: 0 0 5px rgba(0, 0, 0, 0.6); }
#gnb .category_list > li > ul { display:none; }
#gnb .category_list > li > a:after { content:''; position:absolute; left:0; bottom:0; display:block; width:0; height:3px; background:#f37320; transition:.3s; }
#gnb .category_list > li > a:hover:after { width:100%; }

/* ------------- HEADER ON ------------ */
#header.on { border-bottom: 1px solid #eee; background-color: #fff; }
#header.on h1 { background: url('./images/logo_bk.svg') no-repeat center / auto 20px; }
#header.on .mobile-search span { background: url('./images/ico_search_bk.svg') no-repeat center / auto 24px; }
#header.on #gnb .category_list > li > a { color: #111; text-shadow: 0 0 0; }
#header.on #gnb .category_list > li > a:hover { color:#f37320; }

/* ------------- HEADER active ------------ */
#header.active { border-bottom: 1px solid #eee; background-color: #fff; }
#header.active h1 { background: url('./images/logo_bk.svg') no-repeat center / auto 20px; }
#header.active .mobile-search span { background: url('./images/ico_search_bk.svg') no-repeat center / auto 24px; }
#header.active #gnb .category_list > li > a { color: #111; text-shadow: 0 0 0; }
#header.active #gnb .category_list > li > a:hover { color:#f37320; }

/* ------------- HEADER:hover ------------ */
#header:hover { border-bottom: 1px solid #eee; background-color: #fff; }
#header:hover h1 { background: url('./images/logo_bk.svg') no-repeat center / auto 20px; }
#header:hover .mobile-search span { background: url('./images/ico_search_bk.svg') no-repeat center / auto 24px; }
#header:hover #gnb .category_list > li > a { color: #111; text-shadow: 0 0 0; }
#header:hover #gnb .category_list > li > a:hover { color:#f37320; }

/* ----------- Search ----------- */
.search { display:none; position:absolute; top:80px; left:0; width: 100%; padding: 50px 0; background:#fff; z-index: 1; }
.search.active { display: block; }

.search .search-inner { width:540px; margin:0 auto; }
.search-wrap { position: relative; width: 100%; height: 48px; overflow: hidden; box-sizing: border-box; background-color: #fff; border: 1px solid #f37320; border-radius: 5em; }
.search-wrap input { width: calc(100% - 48px); height: 46px; padding: 0 24px; box-sizing: border-box; background-color: transparent; font-size: 16px; line-height: 46px; color: #000; text-align: left; border: 0; }
.search-wrap input:focus { outline: none; }
.search-wrap input::placeholder { color: #999; }
.search-wrap button { position: absolute; top: 13px; right: 24px; width: 20px; height: 20px; text-indent: -999em; font-size: 0; outline: none; background:url('./images/ico_search_or.svg') no-repeat center / 20px auto; }

/* tag */
.search .cover-tag { width: 100%; margin: 40px auto; font-size: 0; }
.search .cover-tag h5 { margin:0 0 5px; font-size: 18px; line-height: 1em; color: #111; letter-spacing: -0.056em; font-weight:normal; }
.search .cover-tag ul { margin-left:-14px; }
.search .cover-tag ul li { display:inline-block; margin-left:14px; margin-top:20px; border:1px solid #e1e1e1; border-radius: 20px; background:#fff; transition:.3s; }
.search .cover-tag ul li a { display:inline-block; padding:10px 12px; font-size:16px; color:#111; letter-spacing: -0.056em; line-height:1em; text-decoration: none; transition:.3s; }
.search .cover-tag ul li:hover { border-color:#f37320; background:#f37320; }
.search .cover-tag ul li:hover a { color:#fff; }

/* popular */
.search .cover-popular { }
.search .cover-popular h5 { margin:0 0 5px; font-size: 18px; line-height: 1em; color: #111; letter-spacing: -0.056em; font-weight:normal; }
.search .cover-popular ul li { margin-top:20px; }
.search .cover-popular ul li:before { content:''; display:inline-block; width:4px; height:4px; vertical-align: middle; background:#777; border-radius: 50%; }
.search .cover-popular ul li a { display:inline-block; width:calc(100% - 20px); padding-left:5px; font-size:16px; letter-spacing:-0.056em; color:#777; vertical-align: middle; text-decoration: none; text-overflow:ellipsis; overflow:hidden; white-space: nowrap; }

/* ----------- Footer ----------- */
#footer { width: 100%; }
.cover-footer { margin: 0 auto; padding: 40px 60px; border-top:1px solid #eee; }
.cover-footer .footer-inner { position: relative; }
.cover-footer .footer-menu {}
.cover-footer .footer-menu ul { font-size: 0; }
.cover-footer .footer-menu ul li { display: inline-block; }
.cover-footer .footer-menu ul li:first-child:after { content: ''; display: inline-block; width: 3px; height: 3px; background-color: #ddd; margin: 0px 16px; vertical-align: 5px; }
.cover-footer .footer-menu ul li a { font-size: 15px; letter-spacing: -0.056em; color: #333; text-decoration: none; }
.cover-footer .footer-menu .copyright { margin:30px 0 0; color: #a1a1a1; font-size: 14px; line-height: 1em; }
.cover-footer .footer-menu .copyright br { display:none; }

/* footer sns */
.cover-footer .footer-sns { position: absolute; top: 0px; right: 0px; }
.cover-footer .footer-sns ul {}
.cover-footer .footer-sns li { float: left; margin-left: 14px; }
.cover-footer .footer-sns li a { display: block; width: 50px; height: 50px; text-indent: -9999px; font-size: 0; box-sizing:border-box; border:1px solid #ddd; border-radius: 50%; }
.cover-footer .footer-sns .homepage a { background:url('./images/icon_footer_homepage.svg') no-repeat center / 20px auto; }
.cover-footer .footer-sns .kakao a { background:url('./images/icon_footer_kakao.svg') no-repeat center / 20px auto; }
.cover-footer .footer-sns .youtube a { background:url('./images/icon_footer_youtube.svg') no-repeat center / 20px auto; }
.cover-footer .footer-sns .facebook a { background:url('./images/icon_footer_facebook.svg') no-repeat center / 20px auto; }


/* ---------------------------------------
    05 Home Cover
--------------------------------------- */
/* ----------- Slider ----------- */
.cover-slider { position: relative; }
.cover-slider .slick-list { margin: 0 auto; padding:0; overflow: visible; font-size:0; }
.cover-slider .slick-slide {}
.cover-slider li { display: none; }
.cover-slider .slick-slide li { position: relative; width: 100%; min-height:770px; }
.cover-slider .slick-slide .slide_contents { position:absolute; top:50%; left: 50%; width:100%; max-width:1280px; margin:40px 0 0; transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); /* IE 9 */ -webkit-transform: translate(-50%, -50%); /* Safari */ text-align:center; }
.cover-slider .slick-slide .slide_contents a { display:inline-block; text-decoration: none; }
.cover-slider .slick-slide .slide_contents .txt_box {}
.cover-slider .slick-slide .slide_contents .txt_box span { font-size:40px; line-height: 1.4em; font-weight:bold; letter-spacing: -0.056em; color:#fff; }
.cover-slider .slick-slide .slide_contents .btn_box { display:block; width: 194px; margin:42px auto 0; padding:14px 24px; text-align:left; border-radius: 30px; box-sizing:border-box; border: 2px solid #fff;
background: url('./images/ico_arrow-right_wh.svg') no-repeat center right 24px / 16px auto; transition:.2s; }
.cover-slider .slick-slide .slide_contents .btn_box span { font-size:14px; font-weight:bold; line-height: 1; color:#fff; }
.cover-slider .slick-slide .slide_contents .btn_box:hover { background: url('./images/ico_arrow-right_wh.svg') no-repeat center right 16px / 16px auto, #f37320; border-color:#f37320; }

/* ---------- Contents ---------- */
.cover-list-thumb { padding: 80px 0; background: #fff; }
.cover-list-thumb .inner { position: relative; }
.cover-list-thumb h2 { position: relative; font-size: 36px; font-weight: 700; line-height: 1em; letter-spacing: -0.056em; color: #111; z-index: 1; }
.cover-list-thumb ul li .img_box:before { content:''; position:absolute; right:0; bottom:0; display:block; width:56px; height:56px; background:url('./images/ico_plus_or.svg') no-repeat center / 24px auto, #fff; z-index: 2; transition:.2s; }
.cover-list-thumb ul li .img_box:after { content:'VIEW MORE'; position:absolute; left:50%; top:50%; display:inline-block; padding:15px 60px 15px 24px; border:2px solid #fff; border-radius: 24px; font-size:14px; font-weight:bold; line-height:1; color:#fff; background:url('./images/ico_arrow-right_wh.svg') no-repeat center right 24px / 16px auto; transform: translate(-50%, -50%); opacity: 0; transition:.4s; z-index: 2; }
.cover-list-thumb ul li:hover .img_box:before { width:100%; height:100%; background:rgba(243, 115, 32, 0.85); }
.cover-list-thumb ul li:hover .img_box:after { opacity: 1; }

/* cover-list-thumb 01 */
.cover-list-thumb01 {}
.cover-list-thumb01 h2 { display: inline-block; margin-bottom:12px; }
.cover-list-thumb01 ul { margin-left: -31px; vertical-align: top; }
.cover-list-thumb01 ul:after { content: ''; display: block; clear: both; }
.cover-list-thumb01 ul li { float: left; width: calc(33.3333% - 31px); margin-left: 31px; margin-top: 40px; box-sizing: border-box; overflow: hidden; border:1px solid #e2e2e2; }
.cover-list-thumb01 ul li a { text-decoration: none; overflow: hidden; background-color: transparent; }
.cover-list-thumb01 ul li .img_box { position:relative; width:100%; height:0; padding-bottom:66.6666%; overflow: hidden; }
.cover-list-thumb01 ul li .img_box img { position:absolute; left:0; top:0; width:100%; height: auto; }
.cover-list-thumb01 ul li .txt_box { position:relative; padding:30px; }
.cover-list-thumb01 ul li .txt_box span {}
.cover-list-thumb01 ul li .txt_box .category { margin:0 0 10px; font-size:14px; color:#f37320; font-weight:bold; }
.cover-list-thumb01 ul li .txt_box .title { display:block; margin: 10px 0 30px; font-size:18px;color:#111; font-weight:bold; line-height: 1.6em; height: 3.2em; letter-spacing: -0.056em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cover-list-thumb01 ul li .txt_box .date { position: absolute; left:30px; bottom:30px; font-size:14px; color:#aaa; }

/* cover-list-thumb 02 */
.cover-list-thumb02 { background:#fafafa; }
.cover-list-thumb02 .popular-slider { margin-top:52px; }
.cover-list-thumb02 .slick-list { margin: 0 -16px; }
.cover-list-thumb02 .slick-slide { margin: 0 16px; }
.cover-list-thumb02 ul li { width:100%; box-sizing: border-box; overflow: hidden; }
.cover-list-thumb02 ul li a { text-decoration: none; overflow: hidden; background-color: transparent; }
.cover-list-thumb02 ul li .img_box { position:relative; width:100%; height:0; padding-bottom:66.6666%; overflow: hidden; }
.cover-list-thumb02 ul li .img_box img { position:absolute; left:0; top:0; width:100%; height: auto; }
.cover-list-thumb02 ul li .txt_box { position:relative; padding:20px 0 32px; }
.cover-list-thumb02 ul li .txt_box span {}
.cover-list-thumb02 ul li .txt_box .category { margin:0 0 10px; font-size:14px; color:#f37320; font-weight:bold; }
.cover-list-thumb02 ul li .txt_box .title { display:block; margin: 10px 0 10px; font-size:18px; color:#111; font-weight:bold; line-height: 1.6em; height: 1.6em; letter-spacing: -0.056em; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.cover-list-thumb02 ul li .txt_box .date { position: absolute; left:0px; bottom:0px; font-size:14px; color:#aaa; }
.cover-list-thumb02 .slick-arrow { width:50px; height:50px; text-indent: -9999px; font-size:0; margin-top:-65px; }
.cover-list-thumb02 .slick-arrow.slick-prev { left:-80px; background:url('./images/icon_chevron-left_gy.svg') no-repeat center / 50px auto; }
.cover-list-thumb02 .slick-arrow.slick-next { right:-80px; background:url('./images/icon_chevron-right_gy.svg') no-repeat center / 50px auto; }

/* cover-list-sns */
.cover-list-sns { padding:80px 0; background:#fff; border-bottom:1px solid #ddd; }
.cover-list-sns h2 { position: relative; font-size: 36px; font-weight: 700; line-height: 1em; letter-spacing: -0.056em; color: #111; z-index: 1; }
.cover-list-sns ul { margin:50px 0 0; display:flex; justify-content: center; }
.cover-list-sns li { margin:0 25px; }
.cover-list-sns li a {  display:block; padding:36px 50px 15px; text-decoration: none; }
.cover-list-sns li a img { width:112px; height:112px; }
.cover-list-sns li a span { display:block; margin: 30px 0 0; text-align: center; font-size:16px;  color:#111; }

/* cover-list-keyword */
.cover-list-keyword { padding:80px 0; background:#fff; }
.cover-list-keyword h2 { position: relative; font-size: 36px; font-weight: 700; line-height: 1em; letter-spacing: -0.056em; color: #111; z-index: 1; }
.cover-list-keyword ul { margin:34px 0 0 -10px; font-size:0; }
.cover-list-keyword ul li { display:inline-block; margin-top:16px; margin-left:10px; }
.cover-list-keyword ul li a { display:inline-block; padding:12px 24px; line-height:1; font-size:16px; color:#111; border:1px solid #e1e1e1; border-radius: 20px; text-decoration: none; letter-spacing: -0.056em; }
.cover-list-keyword ul li a:hover { color:#fff; background:#f37320; border-color:#f37320; transition: .3s; }


/* ---------------------------------------
    06 List Type
--------------------------------------- */
/* ----- List Type : Gallery ---- */
.cate-style-gallery .container { background-color: #fff; }
.cate-style-gallery #content:after { content: ''; display: block; clear: both; }
.cate-style-gallery .list-cont-wrap { margin-left: -30px; }
.cate-style-gallery .list_content { width: calc(33.3333% - 30px); margin: 0 0 40px 30px; float: left; border:1px solid #eee; box-sizing:border-box; }
.cate-style-gallery .list_content:nth-child(3n+1) { clear: left; }
.cate-style-gallery .link_post { text-decoration: none; display: block; }
.cate-style-gallery .list-thumbnail { position: relative; width: 100%; height: 0px; padding-bottom: 66.6666%; overflow: hidden; }
.cate-style-gallery .thumbnail_img { position: absolute; left:0; top:0; width:100%; height:auto; }
.cate-style-gallery .list_info { position:relative; padding: 30px; }
.cate-style-gallery .list_info .list_category { margin:0 0 10px; font-size:14px; color:#f37320; font-weight:bold; }
.cate-style-gallery .list_info .list_title { display:block; margin: 10px 0 30px; font-size:18px;color:#111; font-weight:bold; line-height: 1.6em; height: 3.2em; letter-spacing: -0.056em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cate-style-gallery .list_info .list_summary { display: none; }
.cate-style-gallery .list_info .list_date { position: absolute; left:30px; bottom:30px; font-size:14px; color:#aaa; }

/* hover */
.cate-style-gallery .list-thumbnail:before { content:''; position:absolute; right:0; bottom:0; display:block; width:56px; height:56px; background:transparent; z-index: 2; transition:.2s; }
.cate-style-gallery .list-thumbnail:after { content:'VIEW MORE'; position:absolute; left:50%; top:50%; display:inline-block; padding:15px 60px 15px 24px; border:2px solid #fff; border-radius: 24px; font-size:14px; font-weight:bold; line-height:1; color:#fff; background:url('./images/ico_arrow-right_wh.svg') no-repeat center right 24px / 16px auto; transform: translate(-50%, -50%); opacity: 0; transition:.4s; z-index: 2; }
.cate-style-gallery .link_post:hover .list-thumbnail:before { width:100%; height:100%; background:rgba(243, 115, 32, 0.85); }
.cate-style-gallery .link_post:hover .list-thumbnail:after { opacity: 1; }


.cover-list-thumb ul li .img_box:before { content:''; position:absolute; right:0; bottom:0; display:block; width:56px; height:56px; background:url('./images/ico_plus_or.svg') no-repeat center / 24px auto, #fff; z-index: 2; transition:.2s; }
.cover-list-thumb ul li .img_box:after { content:'VIEW MORE'; position:absolute; left:50%; top:50%; display:inline-block; padding:15px 60px 15px 24px; border:2px solid #fff; border-radius: 24px; font-size:14px; font-weight:bold; line-height:1; color:#fff; background:url('./images/ico_arrow-right_wh.svg') no-repeat center right 24px / 16px auto; transform: translate(-50%, -50%); opacity: 0; transition:.4s; z-index: 2; }
.cover-list-thumb ul li:hover .img_box:before { width:100%; height:100%; background:rgba(243, 115, 32, 0.85); }
.cover-list-thumb ul li:hover .img_box:after { opacity: 1; }


/* protected article */
.cate-style-gallery .protected .list-thumbnail { background:#e2e2e2; }
.cate-style-gallery .protected .list-thumbnail span { position: absolute; left:50%; top:50%; display:block; width:100%; height:auto; text-align:center; font-size:14px; color:#666; font-weight: bold; letter-spacing:-0.056em; transform:translate(-50%, -50%); }
.cate-style-gallery .protected .list-thumbnail span:before { content: ""; display: inline-block; width: 9px; height: 13px;margin-right: 10px; background: url(./images/ico_package.png) no-repeat -0 -100px; vertical-align: baseline; }


/* ---------------------------------------
    07 Page
--------------------------------------- */
/* ---------- Not found --------- */
.not-found { padding: 14% 0; }
.not-found ul { display: none; margin: 0 auto; text-align: center; }
.search-empty .pagination { display: none; }
.search-empty .not-found ul li { text-align: center; font-size: 18px; color: #777; line-height: 1.5em; }
#tt-body-search .search-empty .not-found ul.keyword { display: block; }
#tt-body-category .search-empty .not-found ul.category { display: block; }
#tt-body-tag .search-empty .not-found ul.tag { display: block; }
#tt-body-archive .search-empty .not-found ul.archive { display: block; }

/* ------------ Post ------------ */
/* post header -- default */
.post-header { position: relative; margin: 100px auto 60px; text-align: left; overflow: hidden; }
.post-header h1 { text-align:left; }
.post-header h1 span { line-height:1em; font-size: 48px; font-weight: 700; color: #31231a; }
.post-header h1 em { display:none; }
.post-header .article-count { display: none; }

/* post header -- search */
#tt-body-search .post-header h1 em { display:inline-block; font-style: normal; color: #31231a; }

/* hgroup */
.hgroup { position:relative; margin: 100px auto 60px; padding: 0 0 50px; text-align: left; }
.hgroup:after { content:''; position:absolute; left:50%; bottom:0; display:block; width:100vw; height:1px; background:#eee; transform:translateX(-50%); -webket-transform:translateX(-50%); }
.hgroup .category {}
.hgroup .category span { font-size: 18px; font-weight: bold; color:#f37320; }
.hgroup h1 { display: block; margin: 10px 0 20px; font-size: 44px; line-height: 1.5em; font-weight: bold; color: #111; letter-spacing: -0.056em; }
.hgroup .post-meta { display: block; }
.hgroup .post-meta span { font-size: 16px; color: #999; }
.hgroup .post-meta a { text-decoration: none; color: #999; }
.hgroup .post-meta a:hover { text-decoration: underline; }
.hgroup .post-meta span:before { content: ""; display: inline-block; width: 1px; height: 10px; margin: 0 10px 0 10px; background-color: #ebebeb; vertical-align: baseline; }
.hgroup .post-meta span:first-child:before { content: none; }

/* ------------ Tag ------------- */
.tags { padding:60px 0; }
.tags h2 { margin:0 0 10px; font-size:18px; color:#222; font-weight:bold; }
.tags .items { margin-left:-10px; font-size:0; }
.tags .items a { display: inline-block; padding:12px 16px; margin-left:10px; margin-top:16px; text-decoration: none; font-size: 14px; line-height: 1em; color: #999; background:#f1f1f1; border-radius: 20em; transition:.3s; }
.tags .items a:hover { text-decoration: none; color:#fff; background:#f37320; }
.tags .items a:before { content: "#"; }

/* ------------ Button ------------- */
.btn-list { padding: 60px 0; text-align:center; border-top:1px solid #eee; }
.btn-list a { display: inline-block; padding:20px 70px 18px; font-size: 16px; line-height:1em; color: #111; text-decoration: none; border: 1px solid #ddd; border-radius: 20em; }

/* ------ Related articles ------ */
.related-articles { overflow: hidden; width: 100%; margin: 0px 0px 60px; }
.related-articles h2 { margin-bottom: 20px; font-weight: bold; font-size: 18px; color: #31231a; }
.related-articles ul { margin-left: -34px; }
.related-articles ul li { display:none; float: left; width: calc(33.3333% - 34px); margin-left: 34px; border:1px solid #eee; box-sizing:border-box; }
.related-articles ul li:nth-of-type(-n+3) { display:block; }
.related-articles ul li a { display: block; text-decoration: none; }
.related-articles ul li .thum { display: block; position: relative; overflow: hidden; height: 0; padding-bottom: 66.6666%;background-color: #ebebeb; }
.related-articles ul li .thum:before { content: "NO IMAGE"; position: absolute; top: 50%; left: 0; z-index: 0; width: 100%; height: 18px; margin: -9px 0 0 0; text-align: center; font-weight: bold; font-size: 0.875em; color: #cbcbcb; }
.related-articles ul li .thum img { position: absolute; top: 0; left: 0; z-index: 1; width: 100%; height: 100%; }
.related-articles ul li .txt_box { padding:30px; }
.related-articles ul li .txt_box .title { display: block; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; height: 3.2em; line-height: 1.6em; letter-spacing: -0.056em; font-size: 18px; color: #111; font-weight:bold; }
.related-articles ul li .date { display: block; margin: 20px 0 0; font-size: 14px; color: #aaa; }


/* ---------------------------------------
    08 Components
--------------------------------------- */

/* ----------- Button ----------- */
#move-top { position: fixed; right: 60px; bottom: 180px; display: none; z-index: 999; width: 72px; height: 72px; padding:16px 0; color: #fff; font-size:14px; text-align:center; background:#000; border-radius: 50%; text-decoration: none; box-sizing:border-box; }
#move-top:before { content:''; width:20px; height:20px; display:block; margin:0 auto 4px; background:url('./images/icon_arrow-up_wh.svg') no-repeat center / 20px auto; }

/* ----------- Toolbar ----------- */
.menu_toolbar.on .btn_menu_toolbar { height: 40px; padding: 0 24px; border-radius: 20px; box-shadow: 0 0 0; background-color: transparent; font-family: 'Play', 'Noto Sans KR', sans-serif; border:2px solid #fff; }
.menu_toolbar.on .btn_menu_toolbar { border-color:#f37320; background-color:#f37320; }
.menu_toolbar.on .txt_tool_id { padding: 0 3px 0 0; font-size:0px; line-height:24px; }
.menu_toolbar.on .txt_tool_id:before { content:'한화 Blog'; display:inline-block; font-size:16px; vertical-align: top; color:#fff; }
.menu_toolbar.on .txt_state { font-size: 16px; color: #fff; line-height:24px; }

/* --------- Pagination --------- */
.pagination { max-width: 860px; margin: 60px auto 0; text-align: center; font-size: 0; }
.pagination a { display: inline-block; margin: 0 8px; text-decoration: none; vertical-align: middle; }
.pagination a span { font-size: 16px; line-height: 1em; color: #999; }
.pagination .selected { font-weight: bold; color:#111; }
.pagination .prev, .pagination .next { font-size:14px; color:#777; }
.pagination .prev { margin-right:30px; }
.pagination .next { margin-left:30px; }
.pagination .no-more-prev, .pagination .no-more-next { display: none; }

/* ---------- Comments ---------- */
.comments {
/*	max-width: 860px;*/
	margin: 0 auto 30px;
}

.comments h2 {
	font-weight: 400;
	font-size: 1em;
	color: #000;
}

.comments .comment-list {
	font-size: 16px;
	margin-bottom: 6px;
	overflow: hidden;
}

.comments .comment-list ul li {
	padding: 30px 0 25px;
	border-top: 1px solid #e6e6e6;
	position: relative;
	min-height: 48px;
}

.comments .comment-list ul li:first-child {
	border: none;
}

.comments .comment-list ul li ul li {
	padding: 26px 0 0 60px;
	border-top: 0;
	border-bottom: 0;
}

.comments .comment-list ul li .author-meta {
	position: absolute;
	overflow: hidden;
	top: 30px;
	height: 48px;
	left: 0;
	right: 0;
	padding: 4px 0 0 60px;
}

.comments .comment-list ul li ul li .author-meta {
	top: 26px;
	left: 60px;
}

.comments .comment-list ul li .author-meta .avatar {
	position: absolute;
	left: 0;
	top: 0;
	width: 48px;
	height: 48px;
	border-radius: 50%;
}

.comments .comment-list ul li .author-meta span {
	display: inline-block;
}

.comments .comment-list ul li .author-meta a {
	text-decoration: none;
	color: #000;
}

.comments .comment-list ul li .author-meta .nickname {
	float: left;
	font-size: 0.875em;
	line-height: 20px;
}

.comments .comment-list ul li .author-meta .nickname .tistoryProfileLayerTrigger {
	margin-bottom: 3px;
	margin-right: 0;
	vertical-align: bottom;
}

.comments .comment-list ul li .author-meta .date {
	float: left;
	margin-left: 10px;
	font-size: 0.75em;
	color: #999;
	line-height: 20px;
}

.comments .comment-list ul li .author-meta .date:before,
.comments .comment-list ul li .author-meta .date a:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 9px;
	margin-right: 10px;
	background-color: #b2b2b2;
}

.comments .comment-list ul li .author-meta .date a {
	margin-left: 10px;
}

.comments .comment-list ul li .control {
	position: absolute;
	top: 33px;
	right: 0;
}

.comments .comment-list ul li ul li .control {
	top: 29px;
}

.comments .comment-list ul li .control a {
	margin: 0 2px;
	text-decoration: none;
	font-size: 12px;
	color: #999;
}

.comments .comment-list ul li p {
	position: relative;
	margin: 29px 0 0 60px;
	font-size: 0.875em;
	line-height: 1.5714;
	color: #666;
}

.comments .comment-form .field {
	position: relative;
	overflow: hidden;
	width: 100%;
	margin-bottom: 8px;
}

.comments .comment-form input[type=text],
.comments .comment-form input[type=password],
.comments .comment-form textarea {
	border: 1px solid #e6e6e6;
	font-size: 0.9375em;
	line-height: 1.25;
	color: #666;
	background-color: transparent;
}

.comments .comment-form input[type=text],
.comments .comment-form input[type=password] {
	width: 140px;
	height: 52px;
	margin-right: 6px;
	padding: 10px;
	box-sizing: border-box;
}

.comments .comment-form input::-webkit-input-placeholder,
.comments .comment-form textarea::-webkit-input-placeholder {
	color: #d6d6d6;
}

.comments .comment-form textarea {
	display: block;
	width: 100%;
	margin-bottom: 10px;
	padding: 10px;
	resize: none;
	box-sizing: border-box;
}

.comments .comment-form .field .secret {
	display: inline-block;
	margin-left: 15px;
	vertical-align: middle;
}

.comments .comment-form .field .secret input {
	display: none;
}

.comments .comment-form .field .secret label {
	font-size: 0.8125em;
	line-height: 52px;
	color: #b5b5b5;
	outline: none;
	cursor: pointer;
}

.comments .comment-form .field .secret label:before {
	content: "";
	display: inline-block;
	width: 19px;
	height: 18px;
	margin-right: 9px;
	border: 1px solid #e1e1e1;
	vertical-align: middle;
	background-color: #fff;
}

.comments .comment-form .field .secret input[type=checkbox]:checked + label:before {
	background-image: url(./images/ico_package.png);
	background-repeat: no-repeat;
	background-position: -151px -101px;
}

.comments .comment-form .submit {}

.comments .comment-form .submit button {
	width: 160px;
	height: 60px;
	line-height: 60px;
	color: #000;
	font-weight: normal;
	font-size: 16px;
	text-align: center;
	border: 1px solid #e6e6e6;
	box-sizing: border-box;
}


/* ---------------------------------------
    09 Entry Content
--------------------------------------- */
.entry-content {
	font-family: 'Noto Sans KR', AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, '돋움', sans-serif;
	-webkit-font-smoothing: antialiased;
	font-size: 16px;
	word-wrap: break-word;
	color: #333;
}

.entry-content h1 {
	clear: both;
	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: 0.9375em;
	line-height: 2;
	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;
	margin-bottom: 22px;
	padding: revert;
}
.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;
}
.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;
}


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


/* ---------------------------------------
    11 MEDIA QUERY
--------------------------------------- */

/* ----------- Laptop ----------- */
@media (min-width: 1025px) and (max-width: 1280px) {}

/* ----------- Mobile ----------- */
@media (min-width: 320px) and (max-width: 1024px) {

    /* ----------- Common ----------- */ 
    .container { padding: 52px 0 50px; }
    .inner { max-width: 100%; padding:0 24px; box-sizing:border-box; }
    #content > .inner { width: 100%; }
    #tt-body-page #content > .inner { width: 100%; }
    
    /* ----------- Header ----------- */
    #header { height: 52px; border-bottom: 1px solid #eee; background-color: #fff; }
    #header .header-title { left: 24px; top:19px; }
    #header h1 { width: 204px; height: 14px; background: url('./images/logo_bk.svg') no-repeat center / auto 14px!important; }

    #header .menu { display:none; position:absolute; top:52px; width:100%; height:calc(100vh - 52px); margin:0 auto; background:#fff; z-index: 10;}

    #header .mobile-menu { position: absolute; top: 12px; right: 16px; display: block; padding:4px; cursor: pointer; }
    #header .mobile-menu .menu-trigger { position:relative; width:20px; height:20px; }
    #header .mobile-menu .menu-trigger span { position:absolute; left:0; display: inline-block; width:100%; height:2px; background-color:#000; transition: all .4s; box-sizing: border-box; }
    #header .mobile-menu .menu-trigger span:nth-of-type(1) { top:3px; }
    #header .mobile-menu .menu-trigger span:nth-of-type(2) { top:9px; }
    #header .mobile-menu .menu-trigger span:nth-of-type(3) { bottom:3px; }
    /* active */
    .navon #header .mobile-menu .menu-trigger span:nth-of-type(1) { -webkit-transform: translateY(6px) rotate(-45deg); transform: translateY(6px) rotate(-45deg); }
    .navon #header .mobile-menu .menu-trigger span:nth-of-type(2) { opacity: 0; }
    .navon #header .mobile-menu .menu-trigger span:nth-of-type(3) { -webkit-transform: translateY(-6px) rotate(45deg); transform: translateY(-6px) rotate(45deg); }
    
    #header .mobile-search { position: absolute; top: 12px; right: 52px; cursor: pointer; }
    #header .mobile-search span { display: block; width: 28px; height: 28px; background: url('./images/ico_search_bk.svg') no-repeat center / auto 20px; }

    /* ------------- HEADER:hover ------------ */
    #header:hover h1 { background: url('./images/logo_bk.svg') no-repeat center / auto 14px; }
    #header:hover .mobile-search span { background: url('./images/ico_search_bk.svg') no-repeat center / auto 20px; }
    #header:hover #gnb .category_list > li > a { color: #111; text-shadow: 0 0 0; }
    #header:hover #gnb .category_list > li > a:hover { color:#111; }

    /* ------------- GNB ------------ */
    #gnb { padding:50px 24px 0; }
    #gnb .category_list { display: block; text-align: left; }
    #gnb .category_list > li { display: block; margin:0 0 40px; }
    #gnb .category_list > li > a { display: inline-block; margin: 0; padding: 0; font-size: 24px; color: #111; text-shadow: 0 0 0; }
    #gnb .category_list > li > a:hover { color:#f37320; }
    #gnb .category_list > li > ul { display:none; }
    #gnb .category_list > li > a:after { display: none; }
    #gnb .category_list > li > a:hover:after { display: none; }

    /* ----------- Search ----------- */
    .search { top:52px; }
    .search .search-inner { width:100%; padding:0 48px; box-sizing:border-box; }
    .search-wrap { height: 40px; }
    .search-wrap input { width: calc(100% - 40px); height: 40px; padding: 0 16px; font-size: 14px; line-height: 40px; }
    .search-wrap button { position: absolute; top: 12px; right: 16px; width: 16px; height: 16px; background:url('./images/ico_search_or.svg') no-repeat center / 18px auto; }

    /* tag */
    .search .cover-tag { margin: 50px auto; }
    .search .cover-tag h5 { margin:0 0 10px; font-size: 16px; }
    .search .cover-tag ul { margin-left:-8px; }
    .search .cover-tag ul li { margin-left: 8px; margin-top:10px; }
    .search .cover-tag ul li a { padding:10px 14px; font-size:13px; }

    /* popular */
    .search .cover-popular { }
    .search .cover-popular h5 { margin:0 0 20px; font-size: 16px; }
    .search .cover-popular ul li { margin-top:10px; }
    .search .cover-popular ul li a { font-size:12px;}


    /* ----------- Footer ----------- */
    #footer {}
    .cover-footer { padding: 50px 40px; border-top:1px solid #eee; }
    .cover-footer .footer-inner { text-align:center; }
    .cover-footer .footer-menu {}
    .cover-footer .footer-menu ul {}
    .cover-footer .footer-menu ul li {}
    .cover-footer .footer-menu ul li:first-child:after { margin: 0px 12px; vertical-align: 5px; }
    .cover-footer .footer-menu ul li a { font-size: 14px; }
    .cover-footer .footer-menu .copyright { margin:20px 0; line-height: 1.5em; word-break: keep-all; }

    /* footer sns */
    .cover-footer .footer-sns { position: static; text-align:center; font-size:0; }
    .cover-footer .footer-sns ul { display:inline-block; }
    .cover-footer .footer-sns li { float: left; margin-left: 14px; }
    .cover-footer .footer-sns li:first-of-type { margin-left:0; }
    .cover-footer .footer-sns li a { width: 48px; height: 48px; border:1px solid #e5e5e5; }


    /* ---------------------------------------
        05 Home Cover
    --------------------------------------- */
    /* ----------- Slider ----------- */
    .cover-slider .slick-slide { font-size:0; }
    .cover-slider .slick-slide li { min-height:480px; }
    .cover-slider .slick-slide .slide_contents { margin-top:20px; }
    .cover-slider .slick-slide .slide_contents .txt_box { padding:0 36px; }
    .cover-slider .slick-slide .slide_contents .txt_box span { font-size:27px; }
    .cover-slider .slick-slide .slide_contents .btn_box { display: none; }
    
    /* ---------- Contents ---------- */
    .cover-list-thumb { padding: 50px 0; }
    .cover-list-thumb .inner { }
    .cover-list-thumb h2 { display:inline-block; font-size: 22px; }
    .cover-list-thumb ul li .img_box:before { display:none; }
    .cover-list-thumb ul li .img_box:after { display:none; }

    /* cover-list-thumb 01 */
    .cover-list-thumb01 {}
    .cover-list-thumb01 .inner { padding:0 24px; }
    .cover-list-thumb01 h2 { margin-bottom:26px; }
    .cover-list-thumb01 ul { margin-left: 0; }
    .cover-list-thumb01 ul li { float: none; width: 100%; margin:24px 0 0; }
    .cover-list-thumb01 ul li:first-of-type { margin-top:0; }
    .cover-list-thumb01 ul li .txt_box { padding:20px; }
    .cover-list-thumb01 ul li .txt_box span { line-height:1; }
    .cover-list-thumb01 ul li .txt_box .category { font-size:12px; }
    .cover-list-thumb01 ul li .txt_box .title { height:auto; max-height: 3.5em; margin: 10px 0 20px; font-size:16px; line-height: 1.75em; }
    .cover-list-thumb01 ul li .txt_box .date { position: static; font-size:12px; }

    /* cover-list-thumb 02 */
    .cover-list-thumb02 { }
    .cover-list-thumb02 .inner { position:relative; padding:0 0 0 24px; }
    .cover-list-thumb02 .popular-slider { position:static; margin-top:25px; }
    .cover-list-thumb02 .slick-list { width:calc(100% - 24px); margin: 0 -12px; overflow:visible; }
    .cover-list-thumb02 .slick-slide { margin: 0 12px; }
    .cover-list-thumb02 ul li .txt_box { padding:20px 0 0; }
    .cover-list-thumb02 ul li .txt_box span { line-height:1; }
    .cover-list-thumb02 ul li .txt_box .category { font-size:12px; }
    .cover-list-thumb02 ul li .txt_box .title { height:auto; max-height: 3.5em; margin: 10px 0 20px; font-size:16px; line-height: 1.75em; -webkit-line-clamp: 2; }
    .cover-list-thumb02 ul li .txt_box .date { position: static; font-size:12px; }
    .cover-list-thumb02 .slick-arrow { width:20px; height:20px; margin:0; transform: translate(0); }
    .cover-list-thumb02 .slick-arrow.slick-prev { top:0; left:auto; right:54px; background-size:32px; }
    .cover-list-thumb02 .slick-arrow.slick-next { top:0; right:24px; background-size:32px; }

    /* cover-list-sns */
    .cover-list-sns { padding:50px 0; border-bottom:1px solid #eee; }
    .cover-list-sns .inner { padding:0 24px; }
    .cover-list-sns h2 { font-size: 22px; }
    .cover-list-sns ul { margin:25px 0 0; justify-content: space-evenly; }
    .cover-list-sns li { margin:0; }
    .cover-list-sns li a { padding:15px 0 0; text-align:center; }
    .cover-list-sns li a img { width:36px; height:36px; margin:0 20px; }
    .cover-list-sns li a span { margin: 15px 0 0; font-size:12px; letter-spacing: -0.056em; }

    /* cover-list-keyword */
    .cover-list-keyword { padding:50px 0; }
    .cover-list-keyword .inner { padding:0 24px; }
    .cover-list-keyword h2 { font-size: 22px; }
    .cover-list-keyword ul { margin:15px 0 0 -10px; }
    .cover-list-keyword ul li { margin-top:10px; margin-left:8px; }
    .cover-list-keyword ul li a { padding:10px 16px; font-size:14px; }


    /* ---------------------------------------
        List Type
    --------------------------------------- */
    /* ----- List Type : Gallery ---- */
    .cate-style-gallery .list-cont-wrap { margin-left: 0px; }
    .cate-style-gallery .list_content { width: 100%; margin: 0 0 24px; float: none; }
    .cate-style-gallery .list_info { padding: 20px; }
    .cate-style-gallery .list_info .list_category { font-size:12px; }
    .cate-style-gallery .list_info .list_title { height:auto; max-height: 3.5em; margin: 10px 0 20px; font-size:16px; line-height: 1.75em; }
    .cate-style-gallery .list_info .list_summary { display: none; }
    .cate-style-gallery .list_info .list_date { position: static; font-size:12px; }


    /* ---------------------------------------
        Page
    --------------------------------------- */

    /* ---------- Not found --------- */

    .not-found {
        padding: 50% 20px 30%;
    }

    .search-empty .not-found ul li {
        font-size: 14px;
    }


    /* ------------ Post ------------ */
    /* post header -- default */
    .post-header { position: relative; margin: 40px auto 20px; }
    .post-header h1 span { font-size: 28px; }

    /* hgroup */
    .hgroup { margin: 50px auto 24px; padding: 0 0 40px; text-align: left; }
    .hgroup .category span { font-size: 12px; }
    .hgroup h1 { margin: 10px 0; font-size: 28px; }
    .hgroup .post-meta { display: block; }
    .hgroup .post-meta span { font-size: 12px; }

    /* ------------ Tag ------------- */
    .tags { padding:0 0 30px; }
    .tags h2 { margin:0 0 10px; font-size:16px; }
    .tags .items { margin-left:-8px; }
    .tags .items a { display: inline-block; padding:10px 16px; margin-left:8px; margin-top:10px; font-size: 13px; }

    /* ------------ Button ------------- */
    .container_postbtn { margin:15px 0; }
    .btn-list { padding: 40px 0; }


    /* ------ Related articles ------ */

    .related-articles {
        overflow: hidden;
        width: 100%;
        margin: 50px 0px 40px;
    }

    .related-articles h2 {
        font-size: 18px;
        display: block;
    }

    .related-articles ul {
        margin-left: 0px;
    }

    .related-articles ul li {
        float: none;
        width: 100%;
        margin: 0 0 40px;
    }

    .related-articles ul li .thum {
        margin-bottom: 15px;
    }

    .related-articles ul li .title {
        font-weight: 500;
        font-size: 16px;
    }
    
    .related-articles ul li a:hover .title {
        text-decoration: none;
    }
    .related-articles ul li .date {
        margin:15px 0 0;
    }


    /* ---------------------------------------
        Components
    --------------------------------------- */
    /* ----------- Button ----------- */
    #move-top { right: 24px; bottom: 24px; width: 48px; height: 48px; padding:0; text-indent: -9999px; background:url('./images/icon_arrow-up_wh.svg') no-repeat center / 20px auto, #000; z-index: 10; }
    #move-top:before { display: none; }


    /* --------- Pagination --------- */

    /* ---------- Comments ---------- */

    .comments .comment-list {
        font-size: 14px;
    }

    .comments .comment-list ul li ul li {
        padding: 26px 0 0 30px;
    }

    .comments .comment-list ul li ul li .author-meta {
        left: 30px;
    }

    .comments .comment-form input[type=text],
    .comments .comment-form input[type=password] {
        width: calc(100%);
        height: 52px;
        margin-right: 0px;
        margin-bottom: 6px;
    }

    .comments .comment-form {
        position:relative;
    }

    .comments .comment-form .field {
        position:static;
    }

    .comments .comment-form .field .secret {
        position:absolute;
        left:0;
        bottom:10px;
        margin-left: 0px;
    }

    .comments .comment-form .submit {
        text-align: right;
    }

    .comments .comment-form .submit button {
        font-size: 14px;
    }  

}



/* ----------- Tablet ----------- */

@media (min-width: 768px) and (max-width: 1024px) {
}