@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.25; 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: 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; } /* 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: 3; -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.25); } .post-cover .inner { display: table-cell; position: relative; z-index: 10; vertical-align: bottom; padding-bottom: 78px; } .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: 300; 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: 60.869565217391304%; background-color: #f8f8f8; } .post-item .thum img { width: 100%; height: auto; transform: translateY(-25%); -webkit-transform: translateY(-25%); -ms-transform: translateY(-25%); } .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: 0; 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; 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 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; } .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: 126px; height: auto; 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: 3.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 { 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; } .layout-aside-left #aside { padding: 80px 20px 40px; } .mobile-menu #aside { right: 0; } .main-slider ul li { height: 400px; } .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; 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; } .post-cover .inner { padding-bottom: 38px; 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: 300; } .post-cover .meta { margin-top: 33px; 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 { 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; } } .revenue_unit_wrap.position_list{ max-width: 740px; margin: 30px auto } /* 목차 스타일 */ .book-toc { position: relative; width: fit-content; border: 1px solid #b0d197; padding: 10px 20px 10px 15px; z-index: 1; } .book-toc:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #b0d197; z-index: -1; opacity: 0.1; } .book-toc p { font-weight: bold; font-size: 1.2em !important; color: #396120; } #toc * { font-size: 20px; color: #000; } #toc { margin-bottom: 0; padding-left: 0; } #toc a:hover { color: #000; } #toc ul { margin-top: 5px; margin-bottom: 0px; } #toc > li { padding-left: 0; text-indent: 0; list-style-type: disc; margin-bottom: 10px; } #toc > li > a { text-decoration:none; } #toc > li > ul { padding-left: 20px; margin-top: 0; margin-bottom: 0; } #toc > li > ul > li { font-size: 0.87em; padding-left: 0; text-indent: 0; list-style-type: disc; margin-bottom: 0; margin-top: 5px; } #toc > li > ul > li > a { font-size: 1em; text-decoration:none; } #toc > li > ul > li > ul { padding-left: 10px; margin-top: 0; margin-bottom: 0; } #toc > li > ul > li > ul > li { font-size: 0.87em; padding-left: 0; text-indent: 0; list-style-type: disc; margin-bottom: 0; margin-top: 3px; } #toc > li > ul > li > ul > li > a { font-size: 0.875em; text-decoration:none; } /* 글 제목1,2,3 스타일 */ .tt_article_useless_p_margin h2 { text-align: left; border-left: #517135 12px solid; border-bottom: 1px solid #517135; padding: 3px 0 10px 10px; margin: 30px 0 20px 0; } .tt_article_useless_p_margin h3 { text-align: left; border-left: #548a25 8px solid; border-bottom: 1px solid #548a25; padding: 3px 0 10px 10px; margin-bottom: 15px; } .tt_article_useless_p_margin h4 { text-align: left; border-left: #71b932 6px solid; border-bottom: 1px solid #71b932; padding: 3px 0 10px 10px; margin-bottom: 15px; }