@charset "utf-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.css");
body { text-size-adjust: 100%; font-weight: 400; font-family: "Pretendard Variable", 맑은고딕, "Malgun Gothic", Dotum, 돋움, Helvetica, sans-serif; font-size: 1em; line-height: 1.25; color: rgb(51, 51, 51); background: rgb(247, 248, 249); }
header { background: rgb(255, 255, 255); padding: 0px 40px; }
body, html { width: 100%; height: 100%; margin: 0px; padding: 0px; font-size: 100%; }
blockquote, code, dd, div, dl, dt, fieldset, figure, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0px; padding: 0px; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
button, input, select, textarea { font-size: 100%; border-radius: 0px; }
button { overflow: visible; margin: 0px; padding: 0px; border: 0px; background: 0px 0px; }
ul li { list-style: none; }
fieldset, img { border: none; vertical-align: top; }
a, a:link { text-decoration: none; color: rgb(56, 88, 233); }
a:visited { text-decoration: none; }
a:active { text-decoration: none; }
.inner { margin-bottom: 0px; color: rgb(51, 51, 51); }
#header .inner { position: relative; max-width: 1200px; margin: 0px auto; display: flex; }
#header .inner .logo { font-size: 25px; line-height: 32px; letter-spacing: -1px; color: rgb(51, 51, 51); font-weight: 700; padding: 20px 40px; }
#header .inner .logo a { display: inline-block; height: 32px; text-decoration: none; color: rgb(51, 51, 51); vertical-align: top; }
#header .inner .logo img { width: auto; height: 32px; }
#container { position: relative; }
#container .content-wrap { max-width: 1200px; margin: 20px auto; }
#container .content-wrap::after { content: ""; clear: both; display: block; height: 0px; visibility: hidden; }
#content { float: left; width: 68.5185%; box-sizing: border-box; }
#content > .inner::after { content: ""; clear: both; display: block; height: 0px; visibility: hidden; }
#sidebar { float: right; width: 30%; box-sizing: border-box; background: rgb(255, 255, 255); padding: 40px; }
#footer { padding: 2px 0px; background: rgb(255, 255, 255); }
#footer .inner { position: relative; max-width: 1080px; margin: 0px auto; }
#footer p { margin-bottom: 10px; font-size: 0.875em; color: rgb(119, 119, 119); }
#footer .page-top { position: absolute; bottom: -40px; right: 0px; width: 30px; height: 30px; border-radius: 50%; background: url("images/ico_package.png") -100px -200px no-repeat rgb(255, 255, 255); text-indent: -999em; border: 1px solid rgb(238, 238, 238); margin-bottom: 40px; }
#footer .page-top:focus, #footer .page-top:hover { background-color: rgb(117, 117, 117); background-position-x: -150px; }
#tt-body-index #content { padding-bottom: 20px; }
.btn, a.btn { display: inline-block; width: 100px; height: 36px; background-color: rgb(196, 196, 196); text-align: center; font-weight: 400; font-size: 14px; line-height: 36px; color: rgb(255, 255, 255); vertical-align: middle; }
.btn:hover { background-color: rgb(103, 103, 103); }
.post-header h1 { margin-bottom: 18px; font-size: 1.4em; line-height: 1.375; }
.post-header h1 em { margin-left: 7px; font-style: normal; color: rgb(4, 190, 184); }
.post-item { float: left; margin: 0px 0px 20px 3.37838%; }
.post-item:nth-child(3n+1) { clear: both; margin-left: 0px; }
.post-item a { display: block; text-decoration: none; }
.post-item .thum { position: relative; display: block; overflow: hidden; width: 100%; height: 0px; margin-bottom: 5px; padding-bottom: 100%; background-color: rgb(248, 248, 248); border-radius: 10px; }
.post-item .thum img { width: 100%; height: auto; }
.post-item .title { display: block; overflow: hidden; max-width: 100%; margin-bottom: 4px; padding-top: 9px; text-overflow: ellipsis; line-height: 1.4; }
.post-item .excerpt { overflow: hidden; max-width: 100%; margin-bottom: 15px; text-overflow: ellipsis; font-size: 0.9125em; line-height: 1.5; color: rgb(34, 34, 34); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; }
.post-item.protected .thum::before { content: ""; position: absolute; top: 50%; left: 50%; width: 34px; height: 47px; margin: -24px 0px 0px -17px; background: url("images/ico_package.png") 0px -120px / 120px no-repeat; }
#tt-body-archive .not-found ul, #tt-body-category .not-found ul, #tt-body-tag .not-found ul { display: none; }
#tt-body-archive .not-found .archive, #tt-body-category .not-found .category, #tt-body-tag .not-found .tag { display: block; }
.pagination { margin-bottom: 60px; text-align: center; background: rgb(255, 255, 255); padding: 50px 40px; }
.pagination a { display: inline-block; margin: 0px 12px; font-size: 0.875em; line-height: 1.5rem; vertical-align: top; color: rgb(51, 51, 51); }
.pagination .selected { color: rgb(51, 51, 51); }
.pagination .next, .pagination .prev { width: 22px; height: 22px; background: url("images/ico_package.png") 0px -50px no-repeat; text-indent: -999em; }
.pagination .next { background-position-x: -50px; }
.pagination .view-more { display: block; margin: 0px; padding: 12px 0px 11px; border: 1px solid rgb(238, 238, 238); text-align: center; font-size: 0.875em; color: rgb(153, 153, 153); }
.inner h1 { font-size: 34px; background: rgb(255, 255, 255); padding: 40px 40px 0px; font-weight: bold !important; }
.entry-content h1 { clear: both; margin: 29px 0px 22px; font-size: 40px; line-height: 1.5; color: rgb(0, 0, 0); }
.entry-content h2 { clear: both; margin: 29px 0px 22px; font-size: 29px; line-height: 1.5; color: rgb(0, 0, 0); font-weight: 500 !important; }
.entry-content h3 { clear: both; margin: 29px 0px 22px; font-size: 25px; line-height: 1.5; color: rgb(0, 0, 0); font-weight: 500 !important; }
.entry-content h4 { clear: both; margin: 29px 0px 22px; font-weight: 400; font-size: 1.125em; line-height: 1.5; color: rgb(0, 0, 0); }
.entry-content a { color: rgb(56, 88, 233); }
.entry-content p { word-break: break-all; font-size: 17px; line-height: 25.5px; color: rgb(51, 51, 51); margin-block-end: 1em; }
.entry-content p img { max-width: 100%; height: auto; }
.entry-content figure { margin-top: 8px !important; }
.entry-content pre { word-break: break-all; white-space: pre-wrap; overflow-wrap: break-word; }
.entry-content ul {list-style: hangul!important;margin-bottom: 20px;padding: 0px;}
ul[data-ke-list-type='disc'], ul[data-ke-list-type='disc'] li, #tt-body-page ul[data-ke-list-type='disc'], #tt-body-page ul[data-ke-list-type='disc'] li {
    list-style-type: hangul!important;
}
.entry-content ul li {position: relative;font-size: 17px;line-height: 1.5714;list-style-type: inherit;margin-left: 40px;margin-bottom: 4px;}
.entry-content ol {margin-bottom: 4px;}
.entry-content ol li {position: relative;margin-bottom: 4px;font-size: 17px;line-height: 1.5714;color: rgb(51, 51, 51);list-style-type: hangul!important;margin-left: 22px;}
.entry-content img.alignleft { float: left; margin: 0px 22px 22px 0px; }
.entry-content img.aligncenter { display: block; margin: 0px auto 22px; }
.entry-content img.alignright { float: right; margin: 0px 0px 22px 22px; }
.entry-content blockquote { padding: 16px 20px; border-left: 4px solid rgb(230, 230, 230); margin-bottom: 40px !important; }
.entry-content blockquote p { margin: 22px 0px 0px; }
.entry-content blockquote p:first-child { margin-top: 0px; }
.entry-content table { width: 100%; margin-bottom: 22px; border: 1px solid rgb(230, 230, 230); border-collapse: collapse; text-align: center; font-size: 0.9375em; line-height: 1.5714; color: rgb(102, 102, 102); }
.entry-content table thead th { padding: 7px 0px 11px; border-left: 1px solid rgb(230, 230, 230); }
.entry-content table tbody td { padding: 7px 0px 11px; border-left: 1px solid rgb(230, 230, 230); border-top: 1px solid rgb(230, 230, 230); }
.entry-content input { height: 36px; padding: 0px 10px; border: 1px solid rgb(230, 230, 230); font-size: 0.875em; line-height: 1.25; color: rgb(102, 102, 102); box-sizing: border-box; vertical-align: middle; }
.entry-content .entry-content .protected_form { margin-bottom: 40px; padding: 120px 0px 200px; border-bottom: 1px solid rgb(122, 88, 58); 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: 0px; padding-bottom: 56.25%; }
.entry-content .iframe-wrap iframe { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
.entry-content .protected_form { display: block; width: 100%; padding: 98px 0px 120px; text-align: center; }
.entry-content .protected_form h2 { margin: 0px 0px 8px; font-weight: 600; font-size: 1.625em; line-height: 2.125rem; color: rgb(85, 85, 85); }
.entry-content .protected_form p { margin-bottom: 34px; font-weight: 300; font-size: 1em; line-height: 1.75; color: rgb(153, 153, 153); }
.entry-content .protected_form input { width: 183px; padding: 0px 23px; border: 1px solid rgb(238, 238, 238); font-size: 0.9125em; line-height: 2.125rem; }
.entry-content .protected_form input:focus { border-color: rgb(72, 72, 72); }
.entry-content .protected_form .btn { margin-left: 5px; }
.sidebar ul li { padding: 4px 0px 5px; font-size: 0.8125em; line-height: 1.25rem; color: rgb(51, 51, 51); }
.sub_category_list li::before { content: ""; position: absolute; top: 0.8em; left: 0px; width: 8px; height: 1px; background-color: rgb(153, 153, 153); }
.sidebar ul li a { color: rgb(51, 51, 51); }
.sidebar ul li a:hover { color: rgb(51, 51, 51); }
.sidebar .sidebar-2 { margin-top: 38px; padding-top: 46px; border-top: 1px solid rgb(238, 238, 238); }
.sidebar .category { margin-bottom: 36px; }
.sidebar .category ul li { padding: 0px; font-size: 1.075em; font-weight: 600; }
.sidebar .category ul li ul { padding-top: 8px; }
.sidebar .category ul li ul li { padding: 6px 0px 7px; font-weight: 400; font-size: 0.9rem; }
.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 0px 3px 15px; font-size: 0.9rem; }
.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: 0px; }
.sidebar .post-list ul li img { float: right; width: 58px; height: 58px; margin: 2px 0px 0px 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: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sidebar .tab-ui h2 a { color: rgb(153, 153, 153); }
.sidebar .tab-ui h2 a.current { color: rgb(85, 85, 85); }
.sidebar .tab-ui h2 a::before { content: ""; display: inline-block; width: 1px; height: 5px; margin: 0px 10px; vertical-align: middle; background: url("images/ico_package.png") -100px -50px no-repeat; }
.sidebar .tab-ui h2 a:first-child::before { content: none; }
.slide-wrap { overflow: hidden; }
.container_postbtn { margin: 49px 0px 55px; padding: 0px !important; }
.absent_post::before { content: ""; display: block; margin-bottom: 7px; font-weight: 700; font-size: 1.75em; line-height: 1.28571; color: rgb(85, 85, 85); white-space: pre; }
.absent_post { line-height: 1.75; padding: 98px 0px !important; background: 0px 0px !important; font-weight: 400 !important; font-size: 1em !important; color: rgb(153, 153, 153) !important; }
.layout-aside-left #content { float: right; }
.layout-aside-left #aside { float: left; margin-left: 0px; padding: 80px 0px; }
.layout-aside-left #container .content-wrap::before { margin-left: -256px; }
.list-type-text .post-header { margin-bottom: 38px; padding-bottom: 18px; border-bottom: 1px solid rgb(238, 238, 238); }
.list-type-text .post-header h1 { margin-bottom: 0px; }
.list-type-text .post-item { float: none; overflow: hidden; margin: 0px 0px 20px; padding: 40px; background: rgb(255, 255, 255); }
.list-type-text .post-item .thum { display: none; }
.list-type-text .post-item .title { max-width: 100%; margin-bottom: 10px; padding-top: 0px; font-size: 34px; color: rgb(34, 34, 34); }
.list-type-text .post-item .excerpt { max-width: 100%; margin-bottom: 20px; font-size: 17px; user-select: text; margin-top: 2em; }
.list-type-text .pagination { }
@media screen and (max-width: 1080px) {
  #footer, #header h1 { padding-left: 24px; padding-right: 24px; }
  #container .content-wrap::before { left: 72.7%; margin-left: 0px; }
  .layout-aside-left #container .content-wrap::before { left: 27.3%; margin-left: 0px; }
  #header .inner .logo { padding: 24px 20px 0px; }
}
@media screen and (max-width: 767px) {
  #header h1 { position: relative; z-index: 10; padding: 40px 24px 0px; background-color: rgb(255, 255, 255); margin: 0px; }
  #container .content-wrap { padding: 0px; margin: 0px; }
  ul.category_list { display: none !important; }
  #container .content-wrap::before { content: none; }
  #content { float: none; width: auto; padding: 0px 40px; }
  #aside { position: fixed; top: 0px; right: -278px; z-index: 400; float: none; overflow: auto; width: 278px; height: 100%; padding: 94px 24px 40px; background-color: rgb(255, 255, 255); box-sizing: border-box; transition: right 0.5s ease 0s; }
  #footer { padding: 32px 24px 26px; }
  #footer p { margin-bottom: 11px; font-size: 0.8125em; }
  #header { padding: 0px 30px; }
  #header .inner .logo { padding: 24px 0px; background: rgb(255, 255, 255); margin-bottom: 20px; }
  #tt-body-index #content { padding: 0px; }
  #tt-body-index #content > .inner { padding: 0px 50px; }
  #tt-body-index #content > .inner:first-child { padding-top: 30px; }
  #tt-body-index.list-type-text #content > .inner:first-child { padding: 0px; }
  #tt-body-index .pagination { margin: 0px 0px 20px; }
  #tt-body-page #content { padding-left: 0px; padding-right: 0px; }
  .layout-aside-left #aside { padding: 80px 20px 40px; }
  .post-header { padding-top: 2px; }
  .post-item { float: none; width: auto; margin-left: 0px; margin-bottom: 30px; }
  .post-item .thum { margin-bottom: 7px; }
  .post-item .title { margin-bottom: 12px; }
  .post-item .excerpt { margin-bottom: 12px; }
  .pagination { margin-bottom: 0px; }
  .pagination a { margin: 0px 4px; }
  .list-type-text .post-header { margin-bottom: 28px; }
  .list-type-text .post-item { margin-bottom: 26px; padding: 30px; }
  .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; }
  .date { padding: 0px 20px !important; }
  .inner h1 { margin-top: 20px; color: rgb(51, 51, 51); line-height: 1.5; letter-spacing: -1px; padding: 0px 20px !important; }
  .entry-content { background: rgb(255, 255, 255); padding: 20px !important; }
  .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 0px 37px !important; }
  .container_postbtn { margin: 35px 0px 37px; }
  .layout-aside-left #content { float: none; }
  #content .another_category th { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
  #sidebar { float: none; width: 100%; box-sizing: border-box; background: rgb(255, 255, 255); padding: 40px; }
}
@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; }
.adsense { width: 100%; height: 100%; }
.site-description { margin: 0px; line-height: 1.5; font-weight: 400; text-transform: none; font-size: 15px; color: rgb(87, 87, 96); }
.inside-site-info { display: flex; align-items: center; justify-content: center; padding: 20px 40px; }
.copyright { text-align: center; font-size: 15px; }
.site a { text-decoration: underline; }
.date { color: rgb(87, 87, 96); line-height: 1.5; font-size: 16px; padding: 5px 40px 10px; background: rgb(255, 255, 255); }
.author-name { text-decoration: underline; }
.entry-content { padding: 20px 40px 40px; background: rgb(255, 255, 255); }
.related-articles { background: rgb(255, 255, 255); padding: 0px 40px 140px; }
.related-articles img { display: none !important; }
.related-articles span { font-size: 14px; line-height: 20px; margin: 0px; display: block; max-width: 90%; overflow: hidden; text-overflow: ellipsis; }
.related-articles li { float: left; width: 33%; }
.related-articles li:nth-child(4) { display: none; }
.related-title { font-style: normal; font-weight: 700; padding-bottom: 12px; font-size: 13px !important; }
.related-date { color: rgb(34, 34, 34); opacity: 0.6; }
.category { display: block; float: right; position: relative; z-index: 100; padding: 0px; margin-left: auto; align-self: center; }
.category a { color: rgb(51, 51, 51); padding-left: 10px; padding-right: 10px; }
ul.category_list { display: inline-flex; padding: 0px; }
input[type="text"] { padding: 4px; color: var(--contrast); background-color: rgb(247, 248, 249); border-color: transparent; width: 80%; }
.search { padding: 4px; border: 1px solid rgb(148, 148, 148); display: flex; flex: 1 1 auto; flex-wrap: nowrap; max-width: 100%; }
input.submit { background: rgb(247, 247, 247); border: 1px solid rgb(204, 204, 204); padding: 0.375em 0.625em; color: rgb(50, 55, 60); margin-left: 0.625em; word-break: normal; font-size: inherit; font-family: inherit; line-height: inherit; }
figure[data-ke-type="opengraph"] a, #tt-body-page figure[data-ke-type="opengraph"] a { border: 1px solid rgb(247, 248, 249) !important; }
figure[data-ke-type="opengraph"] a, #tt-body-page figure[data-ke-type="opengraph"] a:hover { border-color: rgb(247, 248, 249) !important; }
figure[data-ke-type="opengraph"] div.og-text p.og-title, #tt-body-page figure[data-ke-type="opengraph"] div.og-text p.og-title { font-family: "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", Dotum, sans-serif; font-weight: bold; }
figure[data-ke-type="opengraph"] div.og-text p.og-desc, #tt-body-page figure[data-ke-type="opengraph"] div.og-text p.og-desc { color: rgb(0, 16, 43); font-family: "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", Dotum, sans-serif; line-height: 1.7; width: 90%; }
figure[data-ke-type="opengraph"] div.og-text p.og-host, #tt-body-page figure[data-ke-type="opengraph"] div.og-text p.og-host { text-transform: uppercase; font-size: 10px; font-family: GongGothicLight; letter-spacing: 0px; }
figure[data-ke-type="opengraph"] div.og-text { background: whitesmoke !important; }
figure[data-ke-type="opengraph"], #tt-body-page figure[data-ke-type="opengraph"] { margin-top: 0px !important; margin-bottom: 20px !important; }
.container_postbtn .postbtn_like { margin-right: 5px !important; }
.container_postbtn { padding: 0px !important; }
.entry-content figure[data-ke-type="opengraph"] a *, .entry-content #tt-body-page figure[data-ke-type="opengraph"] a * { border-color: inherit !important; color: inherit !important; }
.entry-content figure[data-ke-type="opengraph"] a:hover, .entry-content #tt-body-page figure[data-ke-type="opengraph"] a:hover { border-color: var(--point); color: rgb(56, 88, 233) !important; }
figure[data-ke-type="opengraph"] div.og-text { }
figure.imageblock.alignCenter { margin: 0px auto; text-align: center; }
a.link_tit { display: none; }
.book-toc { }
.book-toc ul { }
.book-toc p { font-weight: 550; margin-bottom: 7px; }
.toc * { text-decoration: none; font-size: inherit; color: rgb(56, 88, 233); margin-bottom: 0px; list-style-type: decimal !important; }
.toc a:hover { text-decoration: underline; color: rgb(75, 75, 75); opacity: 1; }
.toc ul { margin-bottom: 0px; margin-top: 0px; }
.toc li a { margin-bottom: 0px; margin-top: 0px; }
.toc { background: rgb(245, 245, 245); position: relative; width: 780px; margin: 0px auto; font-family: "Pretendard Variable", "Apple SD Gothic Neo", "Malgun Gothic", Dotum, sans-serif; line-height: 1.8; font-size: 1.1em; border: 1px solid rgb(170, 170, 170); box-sizing: border-box; max-width: 100%; padding: 20px 50px !important; }
.button.dark { --background: #2F3545; --shadow: 0 2px 8px -1px rgba(21, 25, 36, 0.32); --shadow-hover: 0 4px 20px -2px rgba(21, 25, 36, 0.5); }
.button.white { --background: #fff; --text: #275efe; --shadow: 0 2px 8px -1px rgba(18, 22, 33, 0.04); --shadow-hover: 0 4px 20px -2px rgba(18, 22, 33, 0.12); }
.button.fast { --duration: 0.32s; }
.button { --background: #275efe; --text: #fff; --font-size: 16px; --duration: 0.44s; --move-hover: -4px; --shadow: 0 2px 8px -1px rgba(39, 94, 254, 0.32); --shadow-hover: 0 4px 20px -2px rgba(39, 94, 254, 0.5); --font-shadow: var(--font-size); padding: 16px 32px; font-family: Roboto; font-weight: 500; line-height: var(--font-size); border-radius: 24px; display: block; outline: none; text-decoration: none; font-size: var(--font-size); letter-spacing: 0.5px; background: var(--background); box-shadow: var(--shadow); transform: translateY(var(--y)) translateZ(0); transition: transform var(--duration) ease, box-shadow var(--duration) ease; max-width: fit-content; margin: 0px auto; color: var(--text)  !important; }
.button div { display: flex; overflow: hidden; text-shadow: 0 var(--font-shadow) 0 var(--text); }
.button div span { display: block; backface-visibility: hidden; font-style: normal; transition: transform var(--duration) ease; transform: translateY(var(--m)) translateZ(0); }
.button div span:nth-child(1) { transition-delay: 0.05s; }
.button div span:nth-child(2) { transition-delay: 0.1s; }
.button div span:nth-child(3) { transition-delay: 0.15s; }
.button div span:nth-child(4) { transition-delay: 0.2s; }
.button div span:nth-child(5) { transition-delay: 0.25s; }
.button div span:nth-child(6) { transition-delay: 0.3s; }
.button div span:nth-child(7) { transition-delay: 0.35s; }
.button div span:nth-child(8) { transition-delay: 0.4s; }
.button div span:nth-child(9) { transition-delay: 0.45s; }
.button div span:nth-child(10) { transition-delay: 0.5s; }
.button div span:nth-child(11) { transition-delay: 0.55s; }
.button:hover { --y: var(--move-hover); --shadow: var(--shadow-hover); }
.button:hover span { --m: calc(var(--font-size) * -1); }
.button.reverse { --font-shadow: calc(var(--font-size) * -1); }
.button.reverse:hover span { --m: calc(var(--font-size)); }
.comments {
	margin-bottom: 60px;
	margin-top: 20px;
}
.comments h2 {
	margin-bottom: 15px;
	font-size: 24px;
	font-weight: bold !important;
}
.comments h2 .count{
	margin-left: 4px;
	color: #3858e9;
}
.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: 1em;
	color: #777;
	box-sizing: border-box;
	resize: none;
	font-family: "Pretendard Variable", 맑은고딕, "Malgun Gothic", Dotum, 돋움, Helvetica, sans-serif;
}
.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;
}

#sidebar {
    float: right;
    width: 30%;
    padding: 0px 0px 32px;
    box-sizing: border-box;
    background: #fff;
    padding: 40px;
    position: sticky;
    top: 40px;
}