@charset "UTF-8";

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */



.clearfix {

  content: "";

  clear: both;

  display: table;

}



html {

  line-height: 1.15;

  /* 1 */

  -webkit-text-size-adjust: 100%;

  /* 2 */

}



body {

  margin: 0;

}



h1 {

  font-size: 2em;

  margin: 0.67em 0;

}



hr {

  box-sizing: content-box;

  /* 1 */

  height: 0;

  /* 1 */

  overflow: visible;

  /* 2 */

}



pre {

  font-family: monospace, monospace;

  /* 1 */

  font-size: 1em;

  /* 2 */

}



a {

  background-color: transparent;

}



abbr[title] {

  border-bottom: none;

  /* 1 */

  text-decoration: underline;

  /* 2 */

  text-decoration: underline dotted;

  /* 2 */

}



b,

strong {

  font-weight: bolder;

}



code,

kbd,

samp {

  font-family: monospace, monospace;

  /* 1 */

  font-size: 1em;

  /* 2 */

}



small {

  font-size: 80%;

}



sub,

sup {

  font-size: 75%;

  line-height: 0;

  position: relative;

  vertical-align: baseline;

}



sub {

  bottom: -0.25em;

}



sup {

  top: -0.5em;

}



img {

  border-style: none;

}



button,

input,

optgroup,

select,

textarea {

  font-family: inherit;

  /* 1 */

  font-size: 100%;

  /* 1 */

  line-height: 1.15;

  /* 1 */

  margin: 0;

  /* 2 */

  outline: none;

}



button,

input {

  /* 1 */

  overflow: visible;

}



button,

select {

  /* 1 */

  text-transform: none;

}



button,

[type="button"],

[type="reset"],

[type="submit"] {

  -webkit-appearance: button;

}



button::-moz-focus-inner,

[type="button"]::-moz-focus-inner,

[type="reset"]::-moz-focus-inner,

[type="submit"]::-moz-focus-inner {

  border-style: none;

  padding: 0;

}



button:-moz-focusring,

[type="button"]:-moz-focusring,

[type="reset"]:-moz-focusring,

[type="submit"]:-moz-focusring {

  outline: 1px dotted ButtonText;

}



fieldset {

  padding: 0.35em 0.75em 0.625em;

}



legend {

  box-sizing: border-box;

  /* 1 */

  color: inherit;

  /* 2 */

  display: table;

  /* 1 */

  max-width: 100%;

  /* 1 */

  padding: 0;

  /* 3 */

  white-space: normal;

  /* 1 */

}



progress {

  vertical-align: baseline;

}



textarea {

  overflow: auto;

}



[type="checkbox"],

[type="radio"] {

  box-sizing: border-box;

  /* 1 */

  padding: 0;

  /* 2 */

}



[type="number"]::-webkit-inner-spin-button,

[type="number"]::-webkit-outer-spin-button {

  height: auto;

}



[type="search"] {

  -webkit-appearance: textfield;

  /* 1 */

  outline-offset: -2px;

  /* 2 */

}



[type="search"]::-webkit-search-decoration {

  -webkit-appearance: none;

}



::-webkit-file-upload-button {

  -webkit-appearance: button;

  /* 1 */

  font: inherit;

  /* 2 */

}



details {

  display: block;

}



summary {

  display: list-item;

}



template {

  display: none;

}



[hidden] {

  display: none;

}



/* common */

article,

aside,

canvas,

details,

figcaption,

figure,

footer,

header,

main,

nav,

section,

summary {

  display: block;

}



body {

  font-family: Pretendard-Regular, Arial, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Nanum Gothic", Dotum, '돋움', Helvetica, sans-serif;

  text-rendering: optimizeLegibility;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}



.blind {

  position: absolute;

  overflow: hidden;

  clip: rect(0 0 0 0);

  margin: -1px;

  width: 1px;

  height: 1px;

}



/* html */

html, body {

  position: relative;

  height: 100%;

  -webkit-text-size-adjust: 100%;

  color: #333;

}



html {

  box-sizing: border-box;

}



*,

*:before,

*:after {

  box-sizing: inherit;

}



#wrap {

  position: relative;

  overflow: hidden;

}



/**-------------------------------------

*						media query - pc

-------------------------------------**/

@media screen and (min-width: 1061px) {



  /* wrap-right */

  .wrap-right .main {

    display: flex;

    justify-content: space-between;

  }



  .wrap-right .area-aside {

    margin: 32px 0 0 80px;

  }





  /* wrap-drawer */

  .wrap-drawer .header {

    padding-top: 80px;

  }



  .wrap-drawer .header.border-none {

    border-bottom: none;

  }



  .wrap-drawer .header .inner-header {

    position: initial;

    max-width: 780px;

  }



  .wrap-drawer .header .title-logo {

    position: absolute;

    top: -1px;

    left: 80px;

  }



  .wrap-drawer .header .area-align {

    display: flex;

    flex-wrap: wrap;

    flex-direction: column-reverse;

  }



  .wrap-drawer .header .area-slogun {

    width: 780px;

    margin: 30px 0 -3px 0;

  }



  .wrap-drawer .header .area-gnb {

    position: absolute;

    top: 31px;

    width: 100%;

    max-width: 780px;

  }



  .wrap-drawer .header .area-gnb>nav>ul {

    text-align: center;

  }



  .wrap-drawer .header .tt_category .category_list {

    text-align: center;

  }



  .wrap-drawer .header .button-menu {

    display: block;

  }



  .wrap-drawer .header .box-log {

    display: none;

  }



  .wrap-drawer .area-main {

    max-width: 780px;

    margin: 0 auto;

  }



  .wrap-drawer .area-promotion .inner-promotion {

    max-width: 780px;

  }



  .wrap-drawer .article-type-poster {

    width: 25%;

    max-width: 180px;

    margin-right: 16px;

  }



  .wrap-drawer .article-type-poster:nth-of-type(3n) {

    margin-right: 17px;

  }



  .wrap-drawer .article-type-poster:nth-of-type(4n) {

    margin-right: -3px;

  }



  .wrap-drawer .area-cover>.article-type-poster:nth-of-type(4n) {

    margin-right: 0;

  }



  .wrap-drawer .area-aside {

    position: fixed;

    top: 0;

    right: -381px;

    width: 381px;

    height: 100%;

    padding: 0 40px;

    border-left: 1px solid #efefef;

    background: #fff;

    overflow-x: hidden;

    overflow-y: auto;

    z-index: 20;

  }



  .wrap-drawer .area-aside .box-profile {

    border-left: none;

    border-right: none;

  }





  .wrap-drawer .area-aside .box-profile .img-profile {

    margin: 80px 0 13px 0;

  }



  .wrap-drawer .area-aside .box-profile-invert {

    position: relative;

    height: 430px;

    margin: 0 -40px 43px -41px;

    z-index: 21;

  }



  .wrap-drawer .area-aside .box-log {

    display: table;

    margin-top: 55px;

    margin-bottom: 47px;

    text-align: center;

  }



  .wrap-drawer .area-aside-on {

    right: 0;

    transition: .2s ease-out;

  }



  .wrap-drawer .article-related .item-related {

    width: 25%;

  }



  .wrap-drawer .article-related .item-related:last-child {

    display: block;

  }



  .wrap-right #footer .inner-footer {

    max-width: 1060px;

  }



  .wrap-drawer .article-header .inner-header {

    max-width: 780px;

  }

}



/* tt-body */

#tt-body-tag:not(.wrap-drawer) .header,

#tt-body-page:not(.wrap-drawer) .header,

#tt-body-category:not(.wrap-drawer) .header,

#tt-body-search:not(.wrap-drawer) .header,

#tt-body-archive:not(.wrap-drawer) .header {

  border-bottom: 1px solid #efefef;

}







#tt-body-index #container,

#tt-body-tag #container,

#tt-body-page #container,

#tt-body-category #container,

#tt-body-search #container,

#tt-body-archive #container,

#tt-body-guestbook #container {

  margin-top: 0;

}



#tt-body-page .area-promotion {

  display: none;

}



#tt-body-tag .area-main,

#tt-body-page .area-main,

#tt-body-category .area-main,

#tt-body-search .area-main,

#tt-body-archive .area-main {

  margin-top: 0;

}





#tt-body-page .area-slogun {

  display: none;

}



#tt-body-page .main {

  padding-top: 470px;

}



#tt-body-page .area-view img {

  display: inline-block;

  max-width: 100% !important;

  margin: 0;

  height: auto;

}



#tt-body-page .area-view .map_attach img {

  max-width: none !important;

}



#tt-body-page .area-paging {

  display: block;

}



@media screen and (max-width: 1060px) {

  #tt-body-page .main {

    padding-top: 440px;

  }

}



#tt-body-page .area-aside {

  margin-top: 0px;

}



/* // tt-body-page */

/* 미디어 로그 티스토리 스타일 수정 */

#mediaLogNest {

  max-width: 106x;

  height: auto !important;

  margin: 0 auto 0 auto;

  padding: 0 20px;

}



/* 카테고리의 다른글 티스토리 스타일 수정 */

.another_category {

  margin-bottom: 56px !important;

}



.article-view .another_category table,

.article-view .another_category table * {

  border: none;

}



#article-view .another_category table td {

  font-size: 11px;

}



/* area_paging */

/* media query - pc 페이징 스타일 제어 */

@media screen and (min-width: 1061px) {

  .listmorebutton .area-paging {

    display: none;

  }



  .listmorenumber .area-paging-more {

    display: none;

  }

}



/* media query - 모바일 페이징 스타일 제어 */

@media screen and (max-width: 1060px) {

  .listmorebuttonmobile .area-paging {

    display: none;

  }



  .listmorenumbermobile .area-paging-more {

    display: none;

  }

}



.paging-more {

  display: block;

  width: 100%;

  height: 42px;

  border: 1px solid #e8e8e8;

  font-size: 13px;

  line-height: 42px;

  color: #777;

  text-align: center;

  text-decoration: none;

}



.area-paging {

  text-align: center;

}



.area-paging a {

  text-decoration: none;

}



.area-paging .link_page {

  display: inline-block;

  font-size: 24px;

  color: #000;

}



.area-paging .link_page:hover {

  color: #ef402f;

}



.area-paging .paging_num {

  display: inline-block;

  vertical-align: top;

}



.area-paging .link_num span {

  display: inline-block;

  min-width: 26px;

  height: 26px;

  margin: 0 2px;

  padding: 0 8px;

  font-size: 14px;

  font-weight: 400;

  font-family: Arial;

  line-height: 26px;

  text-align: center;

  letter-spacing: -0.3px;

  color: #333;

}



.area-paging .link_num:hover span {

  border-radius: 999em;

  background: #ddd;

  color: #333;

}



.area-paging .selected {

  display: block;

  border-radius: 999em;

  background: #000;

  color: #fff !important;

  font-size: 13px;

  line-height: 32px;

}



.area-paging .link_num:hover .selected {

  background: #000;

  color: #fff;

  text-decoration: none;

}



.area-paging .paging_slash {

  display: none;

}



.area-paging .link_page.no-more-prev,

.area-paging .link_page.no-more-next {

  display: none;

}



/* ----- media query - mobile ----- */

@media screen and (max-width: 1023px) {

  .area-paging .link_page {

    color: rgba(0, 0, 0, 0.75);

  }



  .area-paging .link_page.no-more-prev,

  .area-paging .link_page.no-more-next {

    color: rgba(0, 0, 0, 0.15);

  }



  .area-paging .link_page span {

    font-size: 24px;

    font-weight: 600;

  }



  .area-paging .link_num {

    font-size: 14px;

    font-weight: 900;

  }



  .area-paging .link_num span {

    position: relative;

  }



  .area-paging .selected {

    position: relative;

    width: auto;

    font-size: 14px;

    color: #fff;

  }



  .area-paging .link_num:last-child span:before {

    content: '/';

    position: absolute;

    top: 0;

    left: -10px;

    width: 10px;

    height: 29px;

  }



  .area-paging .link_num:last-child span.selected:before {

    content: '';

  }



  .area-paging .link_num span:not(.selected) {

    display: inline-block;

  }



  .area-paging .link_num:last-child span {

    display: inline-block;

  }



  .area-paging .link_ellipsis {

    display: none;

  }



  .area-paging .selected {

    margin-right: 8px !important;

    color: #fff !important;

  }

}



/* // area_paging */

/* media query - only mobile */

@media screen and (max-width: 768px) {

  .area_common {

    margin-top: 36px;

  }

}







/* header */

.header {

  position: relative;

  width: 100%;

  border-bottom: 1px solid #efefef;

  z-index: 10;

  transition: top 0.2s ease-in-out;

}



.header .inner-header {

  position: relative;

  max-width: 1020px;

  margin: 0 auto;

}



/* .header .box-header:after {

  content:'';

  position: absolute;

  left: 50%;

  width: 100vw;

  height: 1px;

  margin-left: -50vw;

  border-bottom: 1px solid #efefef;}

.header .borderbottomline:after {

  border-bottom: none;} */

.header .title-logo {

  display: flex;

  flex-direction: column;

  justify-content: center;

  margin: 30px 0;

}



.header .link_logo {

  display: block;

  max-width: 220px;

  font-size: 18px;

  font-weight: 600;

  color: #333;

  text-decoration: none;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

  min-height: 22px;

}



.header .link_logo img {

  max-height: 18px;

}



.header .box-log {

  position: absolute;

  top: -1px;

  right: 0;

}



.header .button-menu {

  display: none;

  position: absolute;

  top: 21px;

  right: 80px;

  padding: 10px;

  border: none;

  background: none;

  cursor: pointer;

  opacity: 1;

}



.header .button-menu:hover {

  opacity: .7;

  transition: .2s ease-out;

}



.header .area-slogun {

  padding-top: 33px;

  padding-bottom: 36px;

}



.header .area-slogun strong {

  margin-bottom: 9px;

  font-size: 36px;

  font-family: Arial;



  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  max-height: 82px;

  overflow: hidden;

  white-space: normal;

  word-break: keep-all;

}



.header .area-slogun p {

  width: 500px;

  margin: 0;

  font-size: 13px;

  line-height: 19px;

  color: #999;

  word-break: keep-all;

}



.header .area-gnb .topnavnone {

  display: none;

}



.header .tt_category {

  margin: 0;

  padding: 0;

}



.header .tt_category ul {

  padding: 0;

  list-style: none;

}



.header .tt_category li {

  list-style: none;

  margin: 0;

  padding: 0;

}



.header .tt_category .link_tit {

  display: none;

}



.header .tt_category .category_list,

.header .topnavmenu>ul {

  font-size: 0;

  text-align: left;

  margin: 0;

  margin-bottom: -3px;

  padding: 0;

  list-style: none;

  white-space: nowrap;

  -webkit-overflow-scrolling: touch;

}



.header .tt_category .category_list li,

.header .topnavmenu>ul>li {

  display: inline-block;

  margin-right: 61px;

}



.header .topnavmenu>ul>li {

  /* padding-bottom: 32px; */

}



.header .tt_category .category_list li:last-child,

.header .topnavmenu>ul>li:last-child {

  margin-right: 0;

}



.header .tt_category .category_list .link_item,

.header .topnavmenu>ul>li>a {

  position: relative;

  display: block;

  font-size: 16px;

  font-weight: 500;

  color: #333 !important;

  text-decoration: none;

  white-space: nowrap;

  z-index: 2;

}



.header .tt_category .category_list .c_cnt {

  display: none;

}



/* ----- media query - pc ----- */

@media screen and (min-width: 1061px) {

  .header .category_list li:hover .sub_category_list {

    display: flex;

  }



  .header .tt_category .category_list .sub_category_list {

    position: absolute;

    display: none;

    top: 258px;

    left: 0;

    width: 100%;

    height: 94px;

    padding-top: 36px;

    font-size: 13px;

    color: #333;

    z-index: 100;

  }



  .header .tt_category .category_list .sub_category_list:before {

    content: '';

    position: absolute;

    top: 0;

    left: 50%;

    width: 100vw;

    height: 94px;

    margin-left: -50vw;

    border-top: 1px solid #efefef;

    background: #fff;

    z-index: -1;

  }



  .header .link_sub_item {

    font-size: 13px;

    text-decoration: none;

    color: #333;

  }



  .header .link_sub_item:hover {

    text-decoration: underline;

  }



  .wrap-right .header .category_list>li,

  .wrap-right .header .t_menu_home,

  .wrap-right .header .t_menu_guestbook,

  .wrap-right .header .t_menu_tag,

  .wrap-right .header .t_menu_link_1,

  .wrap-right .header .t_menu_category {

    padding: 32px 0 32px 0;

  }



  .wrap-drawer .header .tt_category .category_list .sub_category_list {

    top: 49px;

  }



  #tt-body-tag.headerslogundisplayon .wrap-right .sub_category_list,

  #tt-body-archive.headerslogundisplayon .wrap-right .sub_category_list,

  #tt-body-category.headerslogundisplayon .wrap-right .sub_category_list,

  #tt-body-search.headerslogundisplayon .wrap-right .sub_category_list,

  #tt-body-guestbook.headerslogundisplayon .wrap-right .sub_category_list {

    top: 263px;

  }



  #tt-body-page .wrap-right .sub_category_list {

    top: 103px;

  }



  .header .tt_category .category_list>li:hover>a:after,

  .header .topnavmenu>ul>li:hover>a:after {

    content: '';

    position: absolute;

    top: 16px;

    left: 0;

    bottom: -1px;

    width: 100%;

    height: 4px;

    background: #ef402f;

    z-index: 1;

  }



  .wrap-drawer .header .tt_category .category_list .link_item,

  .wrap-drawer .header .topnavmenu>ul>li>a {

    padding-bottom: 40px;

  }

}



.header .topnavmenu .tt_category {

  display: none;

}



.header .topnavmenu>ul {

  margin: 0;

}



/* ----- media query - mobile ----- */

@media screen and (max-width: 1060px) {

  .wrap-right .header .topnavmenu>ul {

    padding: 0 0 37px 0;

  }

}



.header .slogun-use .area-slogun:before, .header .slogun-use nav:before {

  border-top: none !important;

}



.header .slogun-use .tt_category .category_list,

.header .slogun-use .topnavmenu>ul {

  margin-top: -1px;

  padding-top: 0;

}



/* ----- media query - pc ----- */

@media screen and (min-width: 1061px) {

  .headerslogundisplayoff.headerbannerdisplayoff .wrap-right .sub_category_list {

    top: 134px;

  }



  .headerslogundisplayoff.headerbannerdisplayoff .wrap-right .slogun-use .sub_category_list {

    top: 290px;

  }



  .wrap-right .header .area-gnb .topnavmenu:before {

    content: '';

    position: absolute;

    left: 50%;

    width: 100vw;

    height: 1px;

    margin-left: -50vw;

    border-top: 1px solid #efefef;

  }

}



/* ----- media query - mobile ----- */

@media screen and (max-width: 1060px) {

  .header .inner-header {

    max-width: initial;

    padding-top: 50px;

  }



  .header .title-logo {

    position: absolute;

    top: 15px;

    left: 20px;

    margin: 0;

  }



  .header .link_logo {

    font-size: 16px;

  }



  .header .area-slogun {

    display: none;

    padding: 0 20px 0 20px;

  }



  .header .area-slogun strong {

    display: block;

    overflow: inherit;

    max-height: 100%;

    font-size: 30px;

    margin-bottom: 10px;

    line-height: 1.05;

  }



  .header .area-slogun p {

    width: auto;

    font-size: 12px;

  }



  .header .area-slogun.slogunmobileoff {

    display: block;

  }



  .header .area-promotion {

    display: none;

  }



  .header .area-promotion.bannermobile-on {

    display: block;

  }



  .header .area-gnb {

    width: 100%;

    margin-bottom: 0;

    border-top: 1px solid #efefef;

    margin-top: 30px;

  }



  .header .tt_category .category_list,

  .header .topnavmenu>ul {

    overflow-x: auto;

    overflow-y: hidden;

  }



  .header .tt_category .category_list li,

  .header .topnavmenu>ul>li {

    margin-right: 24px;

  }



  .header .tt_category .category_list li:first-child,

  .header .topnavmenu>ul>li:first-child {

    margin-left: 20px;

    float: left;

  }



  .header .tt_category .category_list li:last-child,

  .header .topnavmenu>ul>li:last-child {

    margin-right: 20px;

  }



  .header .tt_category .category_list .link_item,

  .header .topnavmenu>ul>li>a {

    padding: 20px 0 19px 0;

    font-size: 13px;

    font-weight: 400;

  }



  .header .button-menu {

    display: block;

    top: 5px;

    right: 10px;

  }



  .header .button-menu svg {

    width: 17px;

    height: 12px;

  }



  .header .box-log {

    display: none;

  }



  .header .topnavmenu>ul {

    padding: 0;

  }



  .wrap-right .header .topnavmenu>ul {

    padding: 0;

  }

}



/* // header */

/* footer */

#footer {

  margin-top: 120px;

  padding: 35px 0 60px 0;

  border-top: 1px solid #efefef;

}



#footer .inner-footer {

  position: relative;

  max-width: 1180px;

  margin: 0 auto;

  padding: 0 20px;

}



#footer .box-policy {

  margin-bottom: 36px;

}



#footer .link-footer {

  position: relative;

  display: inline-block;

  margin-right: 17px;

  font-size: 13px;

  text-decoration: none;

  color: #333;

  white-space: nowrap;

}



#footer .link-footer:hover {

  text-decoration: underline;

}



#footer .link-footer:before {

  content: '';

  position: absolute;

  top: 7px;

  left: -13px;

  width: 2px;

  height: 2px;

  background: #999;

  border-radius: 2px;

}



#footer .link-footer:first-child:before {

  width: 0;

}



#footer .text-info,

#footer address {

  font-size: 13px;

  color: #999;

}



#footer .text-info {

  margin: 0 0 9px 0;

  line-height: 18px;

  padding-top: 2px;

}



#footer address {

  font-style: normal;

}



#footer .box-site {

  position: absolute;

  top: -5px;

  right: 20px;

}



#footer .box-site button {

  position: relative;

  width: 140px;

  height: 32px;

  padding-left: 12px;

  background: url(./images/icon-more.svg) no-repeat 116px center;

  border: 1px solid #efefef;

  font-size: 13px;

  text-align: left;

  color: #999;

  cursor: pointer;

}



#footer .box-site button.on {

  background: url(./images/icon-close.svg) no-repeat 116px center;

}



#footer .box-site ul {

  position: absolute;

  bottom: 31px;

  width: 100%;

  height: auto;

  margin: 0;

  padding: 0;

  background: #fff;

  border: 1px solid #efefef;

  font-size: 13px;

  line-height: 32px;

  list-style: none;

  opacity: .0;

  overflow: hidden;

}



#footer .box-site ul li {

  margin: 0;

  padding-left: 13px;

}



#footer .box-site ul li a {

  display: block;

  background: #fff;

  color: #999;

  text-decoration: none;

}



#footer .box-site ul li a:hover {

  color: #333;

}



#footer .box-site ul.on {

  opacity: 1;

  transition: opacity .2s ease-out;

}



/* ----- media query - tablet ----- */

@media screen and (max-width: 1060px) {

  #footer {

    margin-top: 40px;

    padding: 36px 0 26px 0;

  }



  #footer .box-policy {

    margin-top: 34px;

    margin-bottom: 21px;

  }



  #footer .link-footer {

    display: block;

    margin-bottom: 8px;

    font-size: 11px;

  }



  #footer .link-footer:before {

    width: 0;

  }



  #footer .text-info,

  #footer address {

    font-size: 11px;

  }



  #footer .box-site {

    top: -71px;

    left: 0;

    width: 100%;

  }



  #footer .box-site button {

    width: 100%;

    height: 40px;

    padding-left: 20px;

    border-left: none;

    border-left: right;

    background-position: calc(100% - 20px) center;

  }



  #footer .box-site button.on {

    background-position: calc(100% - 20px) center;

  }



  #footer .box-site ul {

    top: 37px;

    bottom: auto;

  }



  #footer .box-site ul li {

    padding-left: 20px;

  }

}



/* // footer */

/* area-promotion */

.area-promotion {

  position: relative;

  left: 50%;

  width: 100vw;

  margin-left: -50vw;

  background-size: cover;

  background-position: 50% 50%;

  z-index: 11;

}



.area-promotion:before {

  content: '';

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background-color: rgba(58, 58, 58, 0.3);

  z-index: 1;

}



.area-promotion .inner-promotion {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  max-width: 1020px;

  height: 100%;

  margin: 0 auto;

  z-index: 2;

}



.area-promotion .inner-promotion strong {

  display: block;

  word-break: keep-all;

  width: 760px;

  font-size: 48px;

  font-family: Arial;

  line-height: 1.08;

  color: #fff;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  white-space: normal;

  word-break: keep-all;

}



.area-promotion .inner-promotion .link-promotion {

  display: block;

  width: 160px;

  height: 40px;

  border-radius: 40px;

  font-size: 14px;

  text-align: center;

  text-decoration: none;

  line-height: 40px;

  color: #333;

  margin-top: 32px;

}



.area-promotion .box-promotion {

  margin-top: -4px;

}



/* ----- media query - pc ----- */

@media screen and (min-width: 1061px) {

  .area-promotion.height200 {

    height: 200px;

  }



  .area-promotion.height300 {

    height: 300px;

  }



  .area-promotion.height400 {

    height: 400px;

  }



  .area-promotion.height500 {

    height: 500px;

  }

}



/* ----- media query - mobile ----- */

@media screen and (max-width: 1061px) {

  .area-promotion {

    height: 350px;

  }



  .area-promotion .inner-promotion {

    position: relative;

    padding: 0 20px;

  }



  .area-promotion .inner-promotion .box-promotion {

    position: absolute;

    bottom: 40px;

  }



  .area-promotion .inner-promotion strong {

    width: 270px;

    font-size: 30px;

    line-height: 33px;

    -webkit-line-clamp: 3;

  }



  .area-promotion .inner-promotion .link-promotion {

    width: 120px;

    height: 28px;

    font-size: 12px;

    line-height: 28px;

    margin-top: 22px;

  }

}



/* // area-promotion */

/* container */

#container {

  position: relative;

  margin-top: 78px;

}



/* main */

.main {

  width: 100%;

  max-width: 1020px;

  margin: 0 auto;

}



/* area-main */

.area-main {

  width: 100%;

  max-width: 640px;

}



/* ----- media query - mobile ----- */

@media screen and (max-width: 1061px) {

  #container {

    margin-top: 0;

  }



  .area-main {

    max-width: 100%;

    padding: 0 20px;

  }

}



/* area-aside */

.area-aside {

  width: 300px;

  /* box-profile */

  /* box-category */

  /* box-tag */

  /* box-recent */

  /* box-plugin */

  /* plugin */

  /* box-calendars */

  /* box-visit */

  /* box-search */

}



.area-aside>div {

  margin-bottom: 43px;

}



.area-aside ul {

  margin: 0;

  padding: 0;

}



.area-aside li {

  list-style: none;

  padding: 0;

}



.area-aside .item-sidebar {

  margin-bottom: 6px;

}



.area-aside .link-sidebar {

  display: block;

  font-size: 13px;

  line-height: 1.69;

  color: #777;

  text-decoration: none;

}



.area-aside .link-sidebar span {

  display: block;

  font-size: 12px;

  line-height: 1.67;

  color: #999;

}



.area-aside .title-sidebar {

  display: block;

  margin: 0 0 7px 0;

  font-size: 14px;

  font-weight: 500;

  line-height: normal;

  color: #333;

}



.area-aside .box-profile {

  position: relative;

  margin-bottom: 43px;

  border: 1px solid #e8e8e8;

  border-bottom: 2px solid #333;

  text-align: center;

}



.area-aside .box-profile .img-profile {

  width: 140px;

  height: 140px;

  margin: 49px 0 14px 0;

  border-radius: 140px;

}



.area-aside .box-profile .text-profile {

  max-width: 210px;

  margin: 0 auto 33px auto;

  font-size: 14px;

  line-height: 1.54;

  color: #777;

  word-wrap: break-word;

}



.area-aside .box-profile .button-subscription {

  width: 84px;

  height: 30px;

  margin: 0 auto 28px auto;

  background: none;

  border: 1px solid #ddd;

  border-radius: 50px;

  font-size: 13px;

  color: #333;

  cursor: pointer;

}



.area-aside .box-profile .box-sns {

  font-size: 0;

  text-align: center;

  margin-bottom: 40px;

  margin-top: 34px;

}



.area-aside .box-profile .link-sns {

  display: inline-block;

  width: 34px;

  height: 34px;

  margin-right: 10px;

  background-repeat: no-repeat;

  background-position: center;

  border: 1px solid #ddd;

  border-radius: 36px;

  vertical-align: top;

}



.area-aside .box-profile .link-sns:last-child {

  margin-right: 0;

}



.area-aside .box-profile .link-facebook {

  line-height: 48px;

}



.area-aside .box-profile .link-youtube {

  line-height: 44px;

}



.area-aside .box-profile .link-insta {

  line-height: 49px;

}



.area-aside .box-profile .link-twitter {

  line-height: 46px;

}



.area-aside .box-profile-invert {

  border-left: none;

  border-right: none;

  border-bottom: 2px solid #fff;

  ;

  background-size: cover;

  background-position: 50% 50%;

}



.area-aside .box-profile-invert:before {

  content: '';

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background-color: rgba(0, 0, 0, 0.3);

  z-index: 1;

}



.area-aside .box-profile-invert .inner-box {

  position: relative;

  height: 100%;

  z-index: 2;

}



.area-aside .box-profile-invert .text-profile {

  color: #fff;

}



.area-aside .box-profile-invert .button-subscription {

  color: #fff;

}



.area-aside .box-profile-invert .link-sns {

  border: 1px solid rgba(255, 255, 255, 0.7);

}



.area-aside .box-profile-invert .svg path {

  fill: #fff !important;

}



.area-aside .box-category {

  margin-bottom: 40px;

  padding-bottom: 33px;

  border-bottom: 1px solid #e8e8e8;

}



.area-aside .box-category .tt_category a {

  display: block;

  text-decoration: none;

}







.area-aside .box-category .tt_category .c_cnt {

  display: inline-block;

  font-size: 12px;

  vertical-align: 1px;

}



.area-aside .box-category .tt_category .link_tit,

.area-aside .box-category .tt_category .category_list .link_item {

  margin-bottom: 11px;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.64;

  color: #777;

}



.area-aside .box-category .tt_category .link_tit:hover,

.area-aside .box-category .tt_category .category_list .link_item:hover {

  font-size: 14px;

  font-weight: 500;

  color: #333 !important;

  text-decoration: underline;

}



.area-aside .box-category .tt_category .category_list .link_sub_item.selected,

.area-aside .box-category .tt_category .category_list .link_item.selected {

  font-weight: 500;

  color: #333;

}



.area-aside .box-category .tt_category .category_list .link_sub_item {

  position: relative;

  display: none;

  margin-bottom: 5px;

  margin-left: 22px;

  font-size: 13px;

  line-height: normal;

  color: #999;

}



.area-aside .box-category .tt_category .category_list .link_sub_item:before {

  content: '';

  position: absolute;

  top: 10px;

  left: -13px;

  width: 7px;

  height: 1px;

  background: #999;

}



.area-aside .box-category .tt_category .category_list .link_sub_item:hover {

  font-weight: 600;

  color: #333;

}



.area-aside .box-category .tt_category .category_list .sub_category_list li:last-child a {

  margin-bottom: 10px;

}



.area-aside .box-category-2depth .tt_category .category_list .link_sub_item {

  display: block;

}



.area-aside .sub_category_list {

  margin-top: -4px;

  margin-bottom: 12px;

}



.area-aside .box-tag a {

  position: relative;

  display: inline-block;

  max-width: 300px;

  margin-right: 4px;

  margin-bottom: 4px;

  font-size: 13px;

  line-height: 1.69;

  text-decoration: none;

  text-overflow: ellipsis;

  color: #777;

  white-space: nowrap;

  overflow: hidden;

}



.area-aside .box-tag a:last-child:after {

  content: '';

  position: absolute;

  top: 14px;

  right: -2px;

  width: 5px;

  height: 5px;

  background: #fff;

}



.area-aside .box-recent .tab-recent {

  display: flex;

  margin-bottom: 13px;

}



.area-aside .box-recent .tab-recent li {

  position: relative;

  margin-right: 20px;

}



.area-aside .box-recent .tab-recent li span {

  display: block;

}



.area-aside .box-recent .tab-recent li:last-child {

  margin-right: 0;

}



.area-aside .box-recent .tab-recent li:last-child:before {

  content: '';

  position: absolute;

  top: 9px;

  left: -10px;

  width: 2px;

  height: 10px;

  background: url(./images/bullet-tab.svg) no-repeat;

}



.area-aside .box-recent .tab-recent li.on a {

  color: #333;

  font-weight: 500;

}



.area-aside .box-recent .tab-recent li a {

  display: block;

  font-size: 14px;

  line-height: 1.64;

  color: #999;

  text-decoration: none;

}



.area-aside .box-recent .list-recent li {

  margin-bottom: 20px;

}



.area-aside .box-recent .list-recent li:last-child {

  margin-bottom: 0;

}



.area-aside .box-recent .list-recent .link-recent {

  display: flex;

  width: 100%;

  flex-wrap: nowrap;

  text-decoration: none;

}



.area-aside .box-recent .list-recent .thumbnail {

  width: 64px;

  height: 64px;

  margin: 0 12px 0 0;

  background-size: cover;

  background-position: 50% 50%;

}



.area-aside .box-recent .list-recent .thumbnail+.box-recent {

  width: 70%;

}



.area-aside .box-recent .list-recent .box-recent {

  width: 100%;

  margin-top: 2px;

  font-size: 13px;

  line-height: 1.54;

  color: #333;

}



.area-aside .box-recent .list-recent .box-recent strong {

  display: block;

  margin-bottom: 2px;

  font-weight: 400;

}



.area-aside .box-recent .list-recent .box-recent span {

  color: #999;

}



/** -- media query mobile -- **/

@media screen and (max-width: 1061px) {

  .area-aside .box-recent .list-recent .box-recent strong {

    display: -webkit-box;

    text-overflow: ellipsis;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    word-break: break-all;

    overflow: hidden;

  }



  .box-notice .link-sidebar a,

  .box-reply .link-sidebar strong {

    display: -webkit-box;

    text-overflow: ellipsis;

    -webkit-line-clamp: 1;

    -webkit-box-orient: vertical;

    word-break: break-all;

    overflow: hidden;

  }



}







.area-aside .box-plugins {

  padding-bottom: 44px;

  border-bottom: 1px solid #e8e8e8;

}



.area-aside .box-plugins .tab-sns {

  display: flex;

  margin-bottom: 12px;

}



.area-aside .box-plugins .tab-sns li {

  position: relative;

  margin-right: 20px;

}



.area-aside .box-plugins .tab-sns li span {

  display: block;

}



.area-aside .box-plugins .tab-sns li:last-child {

  margin-right: 0;

}



.area-aside .box-plugins .tab-sns li:last-child:before {

  content: '';

  position: absolute;

  top: 9px;

  left: -10px;

  width: 2px;

  height: 10px;

  background: url(./images/bullet-tab.svg) no-repeat;

}



.area-aside .box-plugins .tab-sns li.on a {

  color: #333;

  font-weight: 500;

}



.area-aside .box-plugins .tab-sns li a {

  display: block;

  font-size: 14px;

  line-height: 1.64;

  color: #999;

  text-decoration: none;

}



.area-aside .box-plugins .plugin-facebook {

  max-height: 410px;

  overflow: hidden;

}



.area-aside .box-plugins .plugin-twitter {

  max-height: 410px;

  overflow: auto;

}



.area-aside .box-calendar .inner-calendar {

  padding: 23px 28px 24px 28px;

  border: 1px solid #e8e8e8;

  font-size: 13px;

}



.area-aside .box-calendar .inner-calendar table caption a {

  display: inline-block;

  margin-bottom: 12px;

  font-size: 14px;

  line-height: 1.57;

  color: #333;

  text-decoration: none;

}



.area-aside .box-calendar .inner-calendar table th,

.area-aside .box-calendar .inner-calendar table td {

  font-weight: 400;

  line-height: 1.81;

  color: #999;

  text-align: center;

}



.area-aside .box-calendar .inner-calendar table th {

  margin-bottom: 10px;

}



.area-aside .box-visit .text-total {

  margin: -10px 0 3px 0;

  line-height: 1.64;

  font-size: 24px;

  font-weight: 600;

  color: #333;

}



.area-aside .box-visit .item-visit {

  font-size: 13px;

  line-height: 1.71;

  color: #999;

}



.area-aside .box-search {

  width: 100%;

  margin-top: -3px;

  border-bottom: 2px solid #333;

}



.area-aside .box-search .inp-search {

  display: inline-block;

  width: calc(100% - 34px);

  padding-bottom: 7px;

  border: none;

  font-size: 14px;

  color: #999;

}



.area-aside .box-search .button-search {

  display: inline-block;

  width: 24px;

  height: 16px;

  background: url(./images/icon-search.svg) no-repeat center;

  border: none;

  cursor: pointer;

}



.area-aside .box-log {

  display: none;

}



.box-reply .list-sidebar li {

  margin-bottom: 8px;

}



.box-reply .link-sidebar strong {

  font-size: 13px;

  font-weight: 400;

  line-height: 1.54;

}



.box-reply .list-sidebar p {

  margin: 0;

  font-size: 12px;

  color: #999;

}



.box-notice .list-sidebar li {

  margin-bottom: 8px;

}



.box-calendar .cal_click {

  font-weight: 700;

  color: #333;

}



.area-aside .box-calendar .inner-calendar .cal_month {

  position: relative;

  margin-bottom: -6px;

}



.area-aside .box-calendar .inner-calendar .cal_month a {

  font-size: 15px;

  font-weight: 600;

  color: #333;

}



.area-aside .box-calendar .inner-calendar .cal_month a:first-child:before {

  content: '〈';

  position: absolute;

  top: -3px;

  left: 60px;

  width: 30px;

  height: 24px;

  background-color: transparent;

  font-size: 12px;

  padding-top: 5px;

}



.area-aside .box-calendar .inner-calendar .cal_month a:last-child:before {

  content: '〉';

  position: absolute;

  top: -3px;

  right: 60px;

  width: 34px;

  height: 24px;

  background-color: transparent;

  font-size: 12px;

  padding-top: 5px;

}



.area-aside .box-calendar .inner-calendar thead tr th {

  padding-bottom: 8px;

}



/* ----- media query - tablet ----- */

@media screen and (max-width: 1060px) {

  .area-aside {

    position: fixed;

    top: 0;

    right: -100%;

    width: calc(100% - 104px);

    max-width: 380px;

    height: 100%;

    padding: 0 24px;

    border-left: 1px solid #efefef;

    background: #fff;

    overflow-x: hidden;

    overflow-y: auto;

    z-index: 20;

    /* box-tag */

  }



  .area-aside .box-profile {

    width: 100%;

    border-left: none;

    border-right: none;

  }



  .area-aside .box-profile .img-profile {

    width: 100px;

    height: 100px;

  }



  .area-aside .box-profile .link-sns {

    width: 30px;

    height: 30px;

  }



  .area-aside .box-profile .link-facebook {

    line-height: 43px;

  }



  .area-aside .box-profile .link-facebook .svg {

    width: 12px;

    height: 14px;

  }



  .area-aside .box-profile .link-youtube {

    line-height: 40px;

  }



  .area-aside .box-profile .link-youtube .svg {

    width: 14px;

    height: 11px;

  }



  .area-aside .box-profile .link-insta {

    line-height: 42px;

  }



  .area-aside .box-profile .link-insta .svg {

    width: 14px;

    height: 14px;

  }



  .area-aside .box-profile .link-twitter {

    line-height: 42px;

  }



  .area-aside .box-profile .link-twitter .svg {

    width: 14px;

    height: 11px;

  }



  .area-aside .box-profile-invert {

    position: relative;

    margin: 0 -40px 40px -41px;

    z-index: 21;

    width: auto;

  }



  .area-aside .box-profile-invert .img-profile {

    margin: 50px 0 10px 0;

  }



  .area-aside .box-log {

    display: table;

    margin-top: 55px;

    text-align: center;

  }



  .area-aside .box-tag a {

    max-width: 100%;

  }



  .area-aside-on {

    right: 0;

    transition: .2s ease-out;

  }



  .area-aside .box-profile .text-profile {

    margin-bottom: 22px;

  }

}



.bg-dimmed:before {

  content: '';

  position: absolute;

  top: 0;

  left: 50%;

  width: 100vw;

  height: 100vh;

  margin-left: -50vw;

  background: rgba(255, 255, 255, 0.8);

  z-index: 19;

}



/* // area-aside */

/* box-log */

.box-log a {

  display: inline-block;

  margin-right: 12px;

  font-size: 13px;

  text-decoration: none;

  color: #777;

  float: left;

}



.box-log .last {

  margin-right: 0;

}



.box-log .link-log {

  position: relative;

  margin-left: 25px;

  margin-right: 0;

}



.box-log .link-log:before {

  content: '';

  position: absolute;

  top: 1px;

  left: -15px;

  width: 1px;

  height: 12px;

  background: #ddd;

}



/* article-type-common */

.article-type-common {

  width: 100%;

}



.article-type-common .thumbnail {

  margin: 0;

  background-image: url(./images/no-image.jpg);

  background-size: cover;

  background-position: 50% 50%;

}



.article-type-common .thumbnail .img-thumbnail {

  display: none;

}



.article-type-common .link-article {

  text-decoration: none;

}



.article-type-common .title {

  display: block;

  max-height: 54px;

  margin-bottom: 13px;

  font-size: 24px;

  font-weight: 500;

  line-height: 1.15;

  overflow: hidden;

  color: #333;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  white-space: normal;

}



.article-type-common .summary {

  margin: 0 0 12px 0;

  color: #777;

}



.article-type-common .link-category {

  margin-right: 14px;

  font-size: 12px;

  line-height: 1.67;

  color: #333;

  text-decoration: none;

}



.article-type-common .date {

  position: relative;

  margin-right: 15px;

  font-size: 12px;

  line-height: 1.67;

  color: #999;

}



.article-type-common .date:before {

  content: '';

  position: absolute;

  top: 9px;

  left: -10px;

  width: 2px;

  height: 2px;

  background: #999;

  border-radius: 2px;

}



.article-type-common .reply {

  position: relative;

  padding-left: 19px;

  background: url(./images/icon-reply.svg) no-repeat left center;

  font-size: 12px;

  line-height: 1.67;

  color: #999;

}



.article-type-common .reply:before {

  content: '';

  position: absolute;

  top: 9px;

  left: -10px;

  width: 2px;

  height: 2px;

  background: #999;

  border-radius: 2px;

}



.article-type-common:hover .title {

  text-decoration: underline;

}



.box-cover-title {

  display: flex;

  justify-content: space-between;

}



.box-cover-title .link-title {

  position: relative;

  padding-right: 10px;

  padding-bottom: 16px;

  font-size: 13px;

  text-decoration: none;

  color: #999;

  line-height: 14px;





}



.box-cover-title .link-title:after {

  content: '';

  position: absolute;

  top: 6.3px;

  right: 2px;

  width: 5px;

  height: 5px;

  border-top: 1px solid #999;

  border-left: 1px solid #999;

  transform: rotate(135deg);

}



.area-cover-thumbnail .box-cover-title {

  border-bottom: 1px solid #e8e8e8;

  margin-bottom: 28px;

}



/* ----- media query - mobile ----- */

@media screen and (max-width: 1060px) {

  .article-type-common .title {

    max-height: 24px;

    margin-bottom: 7px;

    font-size: 21px;

    font-weight: 400;

    -webkit-line-clamp: 1;

  }



  .article-type-common .summary {

    margin-bottom: 7px;

  }

}



/* // article-type-common */

/* article-type-crop */

.article-type-crop {

  margin-bottom: 58px;

}



.article-type-crop .thumbnail {

  height: 460px;

  margin-bottom: 20px;

}



.article-type-crop .link-article {

  display: block;

}



.article-type-crop .title {

  height: 28.5px;

  margin-top: -4px;

  -webkit-line-clamp: 1;

}



.article-type- .title>img,

.article-type-thumbnail .title>img,

.article-type-resize .title>img,

.article-type-poster .title>img,

.article-type-crop .title>img {

  width: 15px !important;

}



.article-type-crop .summary {

  max-height: 69px;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.65;

  -webkit-line-clamp: 3;

  overflow: hidden;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  word-break: break-word;

}



/* ----- media query - mobile ----- */

@media screen and (max-width: 1060px) {

  .article-type-crop {

    margin-bottom: 28px;

  }



  .article-type-crop .thumbnail {

    height: auto;

    padding-top: 59.4%;

  }



  .article-type-crop .title {

    margin-bottom: 8px;

  }



  .article-type-crop .summary {

    font-size: 13px;

    line-height: 1.6;

  }

}



/* // article-type-crop */

/* article-type-resize */

.article-type-resize {

  margin-bottom: 57px;

}



.article-type-resize .thumbnail {

  margin-bottom: 20px;

  padding-top: 0;

  background: none;

}



.article-type-resize .thumbnail .img-thumbnail {

  display: block;

  width: 100%;

  height: auto;

}



.article-type-resize .title {

  height: 28px;

  -webkit-line-clamp: 1;

}







.article-type-resize .summary {

  max-height: 69px;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.65;

  -webkit-line-clamp: 3;

  overflow: hidden;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  word-break: break-word;

}



/* ----- media query - mobile ----- */

@media screen and (max-width: 1060px) {

  .article-type-resize {

    margin-bottom: 28px;

  }



  .article-type-resize .summary {

    font-size: 13px;

    line-height: 1.38;

  }

}



.article-type-,

.article-type-thumbnail {

  display: flex;

  flex-direction: row-reverse;

  justify-content: space-between;

  margin-bottom: 28px;

}



.article-type- .thumbnail,

.article-type-thumbnail .thumbnail {

  width: 160px;

  height: 108px;

  margin-left: 40px;

}



.article-type- .article-content,

.article-type-thumbnail .article-content {

  width: 100%;

  padding-top: 4px;

}



.article-type- .title,

.article-type-thumbnail .title {

  word-break: break-all;

  margin-bottom: 5px;

  font-size: 16px;

  font-weight: 500;

  line-height: 1.67;

}



.article-type- .summary,

.article-type-thumbnail .summary {

  max-width: 620px;

  max-height: 40px;

  margin-bottom: 5px;

  font-size: 13px;

  font-weight: 400;

  line-height: 1.53;

  -webkit-line-clamp: 2;

  overflow: hidden;

  display: -webkit-box;

  -webkit-box-orient: vertical;

  word-break: break-word;

}



.article-type- .reply,

.article-type-thumbnail .reply {

  display: none;

}



/* ----- media query - mobile ----- */

@media screen and (max-width: 1060px) {



  .article-type-,

  .article-type-thumbnail {

    margin-bottom: 19px;

  }



  .article-type- .thumbnail,

  .article-type-thumbnail .thumbnail {

    width: 80px;

    height: 80px;

    margin-left: 18px;

  }



  .article-type- .article-content,

  .article-type-thumbnail .article-content {

    padding-top: 2px;

  }



  .article-type- .title,

  .article-type-thumbnail .title {

    font-size: 15px;

    font-weight: 400;

    line-height: 1.27;

  }



  .article-type- .summary,

  .article-type-thumbnail .summary {

    margin-bottom: 0;

    font-size: 12px;

    line-height: 1.42;

  }

}



.article-type-poster {

  display: inline-block;

  width: 33%;

  margin-right: 16px;

  margin-bottom: 30px;

  vertical-align: top;

}



.article-type-poster .thumbnail {

  position: relative;

  margin-bottom: 10px;

  padding-top: 132.5%;

}



.article-type-poster .thumbnail:before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: rgba(0, 0, 0, 0.05);

}



.article-type-poster .title {

  width: 95%;

  margin-bottom: 2px;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.43;

  white-space: initial;

  word-break: keep-all;

}



.article-type-poster .date:before {

  position: relative;

}



.article-type-poster .summary,

.article-type-poster .link-category,

.article-type-poster .reply {

  display: none;

}



/* ----- media query - pc ----- */

@media screen and (min-width: 1061px) {

  .article-type-poster {

    max-width: 200px;

  }



  .wrap-right .area-cover>.article-type-poster:nth-child(3n),

  .wrap-right .area-view>.article-type-poster:nth-child(3n) {

    margin-right: 0;

  }

}



/* ----- media query - tablet ----- */

@media screen and (min-width: 761px) and (max-width: 1060px) {

  .article-type-poster {

    width: calc(33.3% - 13px);

  }



  .article-type-poster:nth-of-type(3n) {

    margin-right: 0;

  }

}



/* ----- media query - mobile ----- */

@media screen and (max-width: 760px) {

  .article-type-poster {

    width: calc(50% - 5px);

    max-width: initial;

    margin-right: 6px;



  }



  .article-type-poster:nth-of-type(2n) {

    margin-right: 0;

  }

}





.box-cover-poster {

  margin-bottom: -40px;

  white-space: nowrap;

  overflow-x: auto;

  overflow-y: hidden;

  -webkit-overflow-scrolling: touch;

}



/* ----- media query - pc ----- */

@media screen and (min-width: 1061px) {

  .box-cover-poster {

    white-space: inherit;

  }

}





/* ----- media query - mobile ----- */

@media screen and (max-width: 850px) {

  .box-cover-poster .article-type-poster {

    width: 190px;

    margin-right: 6px;

  }



  .box-cover-poster .article-type-poster .thumbnail {

    width: 190px;

    height: 250px;

    padding-top: 0;

  }

}



/* // article-type-poster */

/* article-type-text */

.article-type-text {

  margin-bottom: 10px;

}



.article-type-text .thumbnail {

  display: none;

}



.article-type-text .title {

  height: auto;

  margin-bottom: 0;

  font-size: 14px;

  line-height: 1.57;

  text-overflow: ellipsis;

  white-space: normal;

  overflow: hidden;

  font-weight: 400;

}



.article-type-text .date:before {

  position: relative;

}



.article-type-text .summary,

.article-type-text .link-category,

.article-type-text .reply {

  display: none;

}



/* area-cover */

.area-cover {

  margin-bottom: 56px;

}



.area-cover:last-of-type {

  margin-bottom: 0;

}



.area-cover .title-cover {

  margin: 0;

  padding: 0 0 16px 0;

  font-size: 14px;

  color: #333;

}





.area-cover .button-more {

  display: none;

  width: 100%;

  height: 42px;

  background: none;

  border: 1px solid #e8e8e8;

  font-size: 13px;

  color: #777;

  text-align: center;

  cursor: pointer;

  outline: none;

}



.area-cover .article-type-crop:nth-child(n+4) {

  display: none;

}



.area-cover .article-type-resize:nth-child(n+4) {

  display: none;

}







.category-list {

  display: none;

}



/* ----- media query - mobile ----- */

@media screen and (max-width: 1060px) {

  .area-cover {

    margin-bottom: 36px;

  }



  .area-cover .title-cover {

    font-size: 13px;

    font-weight: 500;

    padding: 0 0 11px 0;

  }



  .title-search {

    margin: 10px 0 10px 0;

  }



  .title-search.title-border {

    margin-bottom: 19px;

    padding-bottom: 9px;

    border-bottom: 1px solid #e8e8e8;

    margin-top: 0;

  }

}



/* // area-cover */

/* area-tag */

.area-tag {

  min-height: 350px;

}



.area-tag .title-other {

  margin: 0 0 14px 0;

  font-size: 14px;

  font-weight: 600;

  color: #333;

}



.area-tag .box-tag a {

  display: inline-block;

  max-width: 100%;

  margin: 0 12px 9px 0;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.57;

  color: #777;

  text-decoration: none;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

}



.area-tag .box-tag a:hover {

  font-weight: 600;

  color: #ef402f;

  text-decoration: underline;

}



/* area-view - 상세 페이지 */

/* article-header */

.article-header {

  position: absolute;

  top: 0;

  left: 50%;

  width: 100vw;

  height: 400px;

  margin-left: -50vw;

  padding: 0 20px;

  background-size: cover;

  background-position: 50% 50%;

}



.article-header:before {

  content: '';

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background-color: rgba(0, 0, 0, 0.5);

  z-index: 1;

}



.article-header .inner-header {

  max-width: 1020px;

  margin: 0 auto;

  color: #fff;

}



.article-header .box-meta {

  position: absolute;

  bottom: 56px;

  width: 100%;

  max-width: 780px;

  z-index: 2;

}



.article-header .box-meta p {

  margin: 0;

}



.article-header .box-meta .category {

  margin-bottom: 12px;

  font-size: 14px;

  font-weight: 600;

}



.article-header .title-article {

  display: block;

  width: 100%;

  max-width: 760px;

  margin: 0 0 33px 0;

  font-size: 48px;

  font-weight: 400;

  line-height: 1.4;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  white-space: normal;

  word-break: keep-all;

}



.article-header .box-info {

  font-size: 13px;

  line-height: 1.54;

  opacity: .7;

}



.article-header .box-info .writer {

  margin-right: 15px;

}



.article-header .box-info .date {

  position: relative;

}



.article-header .box-info .date:before {

  content: '';

  position: absolute;

  top: 10px;

  left: -10px;

  width: 2px;

  height: 2px;

  background: #fff;

  border-radius: 2px;

}



@media screen and (max-width: 1060px) {

  .article-header .box-meta {

    bottom: 36px;

  }



  .article-header .box-meta .category {

    font-size: 12px;

    font-weight: 400;

  }



  .article-header .title-article {

    padding-right: 30px;

    font-size: 30px;

  }



  .article-header .box-info {

    font-size: 11px;

    font-weight: 400;

  }



  .article-header .box-info .date:before {

    top: 8px;

  }

}



/* // article-header */

/* article-footer */

.article-footer .title-footer {

  margin: 0;

  font-size: 14px;

  font-weight: 500;

}



@media screen and (max-width: 1060px) {

  .article-footer .title-footer {

    font-size: 13px;

  }

}



/* // article-footer */

/* article-tag - 상세페이지 태그  */

.article-tag {

  display: flex;

  margin-bottom: 46px;

  padding-bottom: 43px;

  border-bottom: 2px solid #333;

}



.article-tag .title-footer {

  margin-right: 30px;

  padding-top: 8px;

}



.article-tag .box-tag {

  font-size: 0;

}



.article-tag .box-tag a {

  position: relative;

  display: inline-block;

  max-width: 100%;

  margin-right: 10px;

  margin-bottom: 5px;

  padding: 5px 12px;

  border: 1px solid #e8e8e8;

  border-radius: 50px;

  font-size: 13px;

  line-height: 1.69;

  color: #777;

  text-decoration: none;

  text-overflow: ellipsis;

  white-space: nowrap;

  overflow: hidden;

}



.article-tag .box-tag a:after {

  content: '';

  position: absolute;

  bottom: 6px;

  right: -10px;

  width: 5px;

  height: 5px;

  background: #fff;

}



.article-tag .box-tag a:hover {

  text-decoration: underline;

}



/* ----- media query - mobile ----- */

@media screen and (max-width: 1060px) {

  .article-tag {

    display: block;

    margin-bottom: 38px;

    padding-bottom: 30px;

  }



  .article-tag .title-footer {

    margin: 0 0 10px 0;

  }



  .article-tag .box-tag a {

    margin: 0 8px 9px 0;

    padding: 3px 10px;

    font-size: 12px;

  }



  .article-tag .box-tag a:after {

    bottom: 4px;

    right: -7px;

  }

}



/* // article-tag */

/* article-page - 상세페이지 이전다음글  */

.article-page {

  margin-bottom: 46px;

  border-bottom: 1px solid #e8e8e8;

}



.article-page .title-footer {

  margin-bottom: 15px;

}



.article-page ul {

  list-style: none;

  margin: 0 0 45px 0;

  padding: 0;

}



.article-page ul li {

  position: relative;

  margin-bottom: 7px;

  padding: 0;

  font-size: 13px;

  line-height: 1.69;

  color: #999;

}



.article-page ul li:nth-child(2) {

  color: #333;

}



.article-page ul li:nth-child(2):after {

  content: ':';

  position: absolute;

  top: 3px;

  left: 45px;

  font-size: 9px;

  opacity: .7;

}



.article-page ul li:last-child {

  margin-bottom: 0;

}



.article-page ul li span {

  padding-right: 23px;

}



.article-page ul li a {

  color: #999;

  text-decoration: none;

}



.article-page ul li a:hover {

  text-decoration: underline;

}



.article-page ul li strong {

  font-weight: 400;

}



/* ----- media query - mobile ----- */

@media screen and (max-width: 1060px) {

  .article-page {

    margin-bottom: 39px;

  }



  .article-page .title-footer {

    margin-bottom: 10px;

  }



  .article-page ul {

    margin: 0 0 36px 0;

  }



  .article-page ul li {

    margin-bottom: 5px;

    font-size: 12px;

  }



  .article-page ul li a {

    display: block;

    text-overflow: ellipsis;

    white-space: nowrap;

    overflow: hidden;

  }

}



/* //article-page - 상세페이지 이전다음글  */

/* article-related - 상세페이지 관련글 */

.article-related {

  margin-bottom: 42px;

}



.article-related a {

  text-decoration: none;

}



.article-related .title-footer {

  margin-bottom: 16px;

}



.article-related .list-related {

  display: flex;

  list-style: none;

  margin: 0 -10px;

  padding: 0;

  border: none;

  box-sizing: border-box;

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

}



.article-related .item-related {

  width: 33.3%;

}



.article-related .item-related:last-child {

  display: none;

}



.article-related .thumnail {

  display: block;

  width: 100%;

  height: 120px;

  margin-bottom: 10px;

  background-size: cover;

  background-position: 50% 50%;

}



.article-related .link-related {

  display: block;

  margin: 0 10px;

}



.article-related .link-related strong {

  display: block;

  max-height: 40px;

  margin: 0 0 3px 0;

  font-size: 14px;

  font-weight: 400;

  line-height: 1.43;

  color: #333;

  overflow: hidden;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  white-space: normal;

  word-break: keep-all;

}



.article-related .date {

  display: block;

  font-size: 12px;

  line-height: 1.83;

  color: #999;

}



/* ----- media query - mobile ----- */

@media screen and (max-width: 760px) {

  .article-related {

    margin-bottom: 34px;

  }



  .article-related .title-footer {

    margin-bottom: 11px;

  }



  .article-related .item-related {

    min-width: 145px;

  }



  .article-related .link-related {

    margin: 0 5px;

  }



  .article-related .thumnail {

    margin-bottom: 8px;

  }



  .article-related .link-related strong {

    margin-bottom: 0;

    font-size: 13px;

  }

}



.article-related .thumnail {

  height: auto;

  padding-top: 60%;

}



/* // article-related */

/* article-reply - 상세페이지 댓글*/

.article-reply {

  width: 100%;

  margin-bottom: 32px;

}



.article-reply ul {

  list-style: none;

  margin: 0;

  padding: 0;

}



.article-reply a {

  text-decoration: none;

}



.article-reply .box-total {

  margin: 0 0 3px 0;

  padding-bottom: 16px;

  border-bottom: 1px solid #e8e8e8;

  font-size: 14px;

  font-weight: 500;

}



.article-reply .box-total a {

  color: #333;

}



.article-reply .box-total span {

  color: #ef402f;

}



.article-reply .tt_more_preview_comments_wrap {

  width: 100%;

  height: 42px;

  margin-top: -14px;

  margin-bottom: 4px;

  background-color: transparent;

  border: 1px solid #e8e8e8;

  font-size: 13px;

  font-weight: 400;

  line-height: 39px;

  color: #777;

}



/* ----- media query - mobile ----- */

@media screen and (max-width: 1060px) {

  .article-reply .box-meta strong {

    display: block;

  }



  .article-reply .box-total {

    font-size: 13px;

  }



  .article-reply .tt_more_preview_comments_wrap {

    height: 32px;

    font-size: 12px;

    line-height: 30px;

  }

}



/* area-reply - 상세페이지 댓글*/

.area-reply {

  margin-bottom: 60px;

}





.area-reply .item-reply {

  position: relative;

  display: flex;

  flex-wrap: wrap;

  width: 100%;

  padding: 25px 0 24px 0;

  border-bottom: 1px solid #eee;

}



.area-reply .thumbnail {

  display: block;

  width: 48px;

  height: 48px;

  margin-right: 10px;

  background-size: cover;

  background-position: 50% 50%;

  border-radius: 50px;

}



.area-reply .box-content {

  width: calc(100% - 64px);

}



.area-reply .box-content .box-meta {

  margin-bottom: 4px;

  font-size: 13px;

  line-height: 1.69;

}



.area-reply .box-content .box-meta strong a {

  font-weight: 400;

  color: #333;

}



.area-reply .box-content .box-meta .date {

  position: relative;

  padding-left: 18px;

  color: #909090;

}



.area-reply .box-content .box-meta .date:before {

  content: '';

  position: absolute;

  top: 9px;

  left: 7px;

  width: 2px;

  height: 2px;

  background: #c5c5c5;

}



.area-reply .box-content .box-meta .date a {

  position: relative;

  padding-left: 18px;

  color: #909090;

}



.area-reply .box-content .box-meta .date a:before {

  content: '';

  position: absolute;

  top: 10px;

  left: 7px;

  width: 2px;

  height: 2px;

  background: #c5c5c5;

}



.area-reply .box-content .text {

  margin: 0 100px 9px 0;

  font-size: 14px;

  line-height: 1.43;

  color: #777;

  word-break: break-all;

}



.area-reply .list-reply-comment .box-content .text {}



.area-reply .box-content .link-comment {

  font-size: 13px;

  line-height: 1.69;

  color: #909090;

}



.area-reply .box-content .box-modify {

  position: absolute;

  top: 24px;

  right: -9px;

  font-size: 13px;

}



.area-reply .box-content .button-modify {

  width: 20px;

  height: 20px;

  padding: 10px 0 10px 10px;

  background: url(./images/icon-modify.svg) no-repeat;

  background-size: 14px;

  background-position: 50% 50%;

  border: none;

  cursor: pointer;

}



.area-reply .box-content .list-modify {

  display: none;

  position: absolute;

  top: 6px;

  left: -76px;

  width: 80px;

  border: 1px solid #e8e8e8;

}



.area-reply .box-content .list-modify li {

  border-bottom: 1px solid #e8e8e8;

}



.area-reply .box-content .list-modify li:last-child {

  border-bottom: none;

}



.area-reply .box-content .list-modify a {

  display: block;

  line-height: 29px;

  text-align: center;

  color: #333;

  background-color: #fff;

}



.area-reply .list-reply-comment {

  width: 100%;

  margin: 30px 0 -30px 0;

  padding: 40px 0 28px 60px;

  background-color: #fafafa;

  border-top: 1px solid #f0f0f0;

  border-bottom: 1px solid #f0f0f0;

}



.area-reply .list-reply-comment .item-reply {

  margin-bottom: 28px;

  padding: 0;

  border-bottom: none;

}



.area-reply .list-reply-comment .item-reply:last-child {

  margin-bottom: 0;

}



.area-reply .list-reply-comment .box-modify {

  top: -4px;

  right: 15px;

}



.area-reply .list-reply-other {

  margin-bottom: 20px;

}



/* ----- media query - mobile ----- */

@media screen and (max-width: 1060px) {

  .area-reply {

    margin-bottom: 30px;

  }



  .area-reply .item-reply {

    padding: 25px 0 19px 0;

  }



  .area-reply .thumbnail {

    width: 38px;

    height: 38px;

    margin-right: 10px;

  }



  .area-reply .box-content {

    margin-top: -3px;

  }



  .area-reply .box-content .box-meta {

    line-height: 1.59;

  }



  .area-reply .box-content .box-meta strong a {

    font-size: 12px;

  }



  .area-reply .box-content .box-meta .date {

    padding-left: 0;

    font-size: 12px;

  }



  .area-reply .box-content .box-meta .date:before {

    background: none;

    ;

  }



  .area-reply .box-content .text {

    width: 100%;

    margin-bottom: 8px;

    font-size: 12px;

  }



  .area-reply .box-content .list-modify {

    background: #fff;

  }



  .area-reply .list-reply-comment {

    width: 100vw;

    margin: 20px -20px -20px -20px;

    padding: 20px 20px 13px 68px;

  }



  .area-reply .list-reply-comment .box-modify {

    right: -9px;

  }



  .area-reply .list-reply-comment .box-meta {

    margin-top: 6px;

  }

}



/* // area-reply - 상세페이지 댓글*/

/* area-write - 상세페이지 댓글 입력 부분*/

.area-write .box-account {

  display: flex;

  justify-content: space-between;

  margin-bottom: 12px;

}



.area-write .box-account input {

  width: calc(50% - 6px);

  padding: 11px 20px 12px 20px;

  border: 1px solid #e8e8e8;

  font-size: 13px;

  color: #999;

}



.area-write .box-account input:hover {

  border-color: #333;

}



.area-write .box-homepage {

  margin-bottom: 12px;

}



.area-write .box-homepage input {

  width: 100%;

  padding: 11px 20px 12px 20px;

  border: 1px solid #e8e8e8;

  font-size: 13px;

  color: #999;

}



.area-write .box-homepage input:hover {

  border-color: #333;

}



.area-write .box-textarea {

  margin-bottom: 14px;

}



.area-write .box-textarea textarea {

  width: 100%;

  height: 122px;

  padding: 21px 70px 19px 19px;

  border: 1px solid #e8e8e8;

  font-size: 13px;

  color: #999;

}



.area-write .box-textarea textarea:hover {

  border-color: #333;

}



.area-write .box-write {

  display: flex;

  justify-content: space-between;

}



.area-write .box-write .xe-label {

  display: flex;

  position: relative;

  margin-top: 5px;

  min-width: 20px;

  min-height: 20px;

  text-align: left;

  cursor: pointer;

}



.area-write .box-write .xe-label input[type="checkbox"] {

  overflow: hidden;

  position: absolute;

  width: 0;

  height: 0;

  border: 0;

  font-size: 0;

  line-height: 0;

  left: -9999px;

}



.area-write .box-write .xe-label>input[type="checkbox"]+.xe-input-helper {

  display: block;

  position: absolute;

  left: 0;

  top: 0;

  width: 20px;

  height: 20px;

  background-color: #fff;

  border: 1px solid #BEBFC5;

  border-radius: 2px;

}



.area-write .box-write .xe-label>input[type="checkbox"]:checked+.xe-input-helper:after {

  position: absolute;

  left: 50%;

  top: 50%;

  width: 7px;

  height: 11px;

  margin-top: -7px;

  margin-left: -3px;

  border-right: 2px solid #fff;

  border-bottom: 2px solid #fff;

  -webkit-transform: rotate(40deg);

  transform: rotate(40deg);

  content: "";

}



.area-write .box-write .xe-label>input[type="checkbox"]:checked+.xe-input-helper {

  border-color: transparent;

  background-color: #333;

}



.area-write .box-write .xe-label .xe-label-text {

  display: block;

  padding: 3px 0 0 27px;

  font-size: 13px;

  color: #333;

}



.area-write .box-write .btn_register {

  width: 68px;

  height: 30px;

  background: #000;

  border: none;

  border-radius: 30px;

  font-size: 13px;

  color: #fff;

  cursor: pointer;

}



.area-write .box-write .btn_register:hover {

  background: #ef402f;

}



/* ----- media query - mobile ----- */

@media screen and (max-width: 1060px) {

  .area-write .box-textarea textarea {

    height: 140px;

    font-size: 12px;

  }

}



/* // area-write */

/* area-protected */

.area-protected {

  max-width: 280px;

  margin: 0 auto;

  text-align: center;

}



.area-protected .text-protected {

  margin: 0 0 21px 0;

  padding-top: 112px;

  background: url(./images/icon-exclamation.svg) no-repeat center top;

  font-size: 18px;

  color: #333;

}



.area-protected .text-protected span {

  font-size: 14px;

  line-height: 2;

  color: #777;

}



.area-protected input {

  width: 100%;

  height: 42px;

  margin-bottom: 10px;

  font-size: 13px;

  padding-left: 20px;

  border: 1px solid #e8e8e8;

}



.area-protected input:hover, .area-protected input:focus {

  border: 1px solid #333;

}



.area-protected input.active+button {

  background: #333;

  color: #fff;

  cursor: pointer;



}



.area-protected button {

  display: block;

  width: 100%;

  height: 42px;

  background: #ddd;

  border: none;

  font-size: 13px;

}



.article-header-noimg {

  background: none !important;

  background-size: 50% 50% !important;

}



.article-header-protected {

  background: url(./images/icon-exclamation.svg) no-repeat center !important;

  background-size: 50% 50% !important;

}



.title-other {

  margin: 0;

  font-size: 14px;

  font-weight: 600;

  white-space: nowrap;

}



.article-view {

  margin-bottom: 12px;

  word-break: break-word;

}



.article-view p {

  font-size: 16px;

  line-height: 26px;

  color: #222;

}



.article-view h1,

.article-view h2,

.article-view h3,

.article-view h4 {

  margin-bottom: 24px;

  font-weight: 900;

  color: rgba(0, 0, 0, 0.87);

}



.article-view h1 {

  font-size: 32px;

  line-height: 1.33;

}



.article-view h2 {

  font-size: 24px;

  line-height: 1.38;

}



.article-view h3 {

  font-size: 20px;

  line-height: 1.4;

}



.article-view h4 {

  font-size: 18px;

  line-height: 1.33;

}



.article-view blockquote {

  margin: 0;

  padding-left: 19px;

  border-left: 1px solid;

  font-size: 16px;

  line-height: 1.75;

  color: rgba(0, 0, 0, 0.54);

}



.article-view ul,

.article-view ol {

  margin: 0;

  padding: 0 0 0 19px;

}



.article-view ul {

  margin-top: 18px;

}



.article-view ul li {

  font-size: 16px;

  line-height: 24px;

  color: rgba(0, 0, 0, 0.87);

  word-break: break-all;

}



.article-view ol {

  margin-bottom: 32px;

}



.article-view ol li {

  margin-bottom: 6px;

  font-size: 16px;

  line-height: 1.75;

  color: rgba(0, 0, 0, 0.87);

  word-break: break-all;

}



.article-view table {

  border-collapse: collapse;

}



.article-view table thead tr {

  background: rgba(0, 0, 0, 0.05);

  font-size: 16px;

  color: #000;

}



.article-view table tr th,

.article-view table tr td {

  padding: 7px;

}



.article-view pre {

  background: rgba(0, 0, 0, 0.05);

  font-size: 16px;

  color: rgba(34, 85, 51, 0.87);

  white-space: pre-wrap;

}



.article-view .cap1 {

  font-size: 14px;

  color: rgba(0, 0, 0, 0.54);

}



.article-view hr {

  margin: 30px 0;

}



.article-view a {

  display: inline-block;

  color: #3d62ce;

}



.article-view a:hover {

  opacity: 0.7;

}



.article-view .moreless_fold span,

.article-view .moreless_top span {

  font-size: 16px;

  line-height: 2.5;

}



.article-view .moreless_content {

  padding-top: 40px;

}



.article-view .moreless_top {

  border-bottom: 1px solid rgba(0, 0, 0, 0.15);

}



.article-view .moreless_bottom {

  border-top: 1px solid rgba(0, 0, 0, 0.15);

}



.article-view .moreless_bottom span {

  display: none;

}



.article-view .footnote a {

  color: #4167d9 !important;

  text-decoration: none;

}



.article-view .footnotes li {

  font-size: 12px;

  color: rgba(0, 0, 0, 0.38);

}



.article-view .table-overflow {

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

}



.article-view .table-overflow {

  overflow-x: auto;

  -webkit-overflow-scrolling: touch;

}



.article-view img {

  max-width: 100%;

}



/* area_view - 유튜브 사이즈 제어 */

@media screen and (max-width: 743px) {

  .article-view iframe {

    width: 100%;

    height: 56vw;

    -ms-height: 56vmax;

  }

}



/* media query - only mobile */

@media screen and (max-width: 768px) {

  .article-view {

    margin-top: 0px;

  }

}





.container_postbtn {

  padding: 43px 0 36px 0 !important;

}



@media screen and (max-width: 1060px) {

  .container_postbtn {

    padding: 36px 0 18px 0 !important;

  }

}



@media screen and (max-width: 1060px) {



  /* 검색리스트 타이틀 간격 */

  #tt-body-tag .title-search {

    font-size: 13px;

  }



  #tt-body-tag .title-search.title-search.title-border {

    padding-bottom: 11px;

  }

}





/* area-search */

.title-search {

  margin: 10px 0 0 0;

  padding-bottom: 14px;

  font-size: 14px;

}



.title-search span {

  color: #ef402f;

}



.title-search.title-border {

  margin-bottom: 29px;

  padding-bottom: 15px;

  border-bottom: 1px solid #e8e8e8;

}



.article-title-crop,

.article-title-resize,

.article-title-poster {

  margin-bottom: 0px;

  border-bottom: none;



}





/* 검색 결과 없을때 */

.box-no-search {

  display: none;

  margin-bottom: 40px;

  font-size: 14px;



  color: rgba(51, 51, 51, 0.5);

}



.box-no-search span {

  position: relative;

  display: block;

  padding-left: 7px;

  line-height: 2;

  vertical-align: middle;

}



.box-no-search span:before {

  content: '';

  position: absolute;

  top: 15px;

  left: 0;

  width: 2px;

  height: 2px;

  background: rgba(0, 0, 0, 0.2);

  border-radius: 2px;

}



#tt-body-search .type-search {

  display: block;

}



#tt-body-search .title-search .search {

  display: inline !important;

}



#tt-body-category .type-category {

  display: block;

}



#tt-body-tag .type-tag {

  display: block;

}



#tt-body-tag .title-search .tag {

  display: inline !important;

}



#tt-body-archive .type-archive {

  display: block;

}



#tt-body-archive .title-search .search {

  display: inline !important;

}





/* additional style */

#tt-body-archive .archives:before {

  content: "'";

}



#tt-body-archive .archives:after {

  content: "'에 등록된 글";

}



#tt-body-tag .archives:before {

  content: "#";

}



#tt-body-search .archives:before {

  content: "'";

}



#tt-body-search .archives:after {

  content: "'의 검색결과";

}





/* Search box */

.util {

  position: absolute;

  top: 0;

  right: 0;

}



.util .search {

  position: relative;

  float: left;

  overflow: hidden;

  background-color: #fff;

  box-sizing: border-box;

  transition: width 0.5s;

  -webkit-transition: width 0.5s;

}



.util .search input {

  width: 100%;

  padding-bottom: 7px;

  background: url(./images/icon-search.svg) no-repeat 98% 0;

  border: none;

  border-bottom: 2px solid #333;

  font-size: 14px;

  color: #999;

}



.util .search input::placeholder {

  color: #969696;

}



.util .search button {

  position: absolute;

  top: 1px;

  right: 1px;

  z-index: 20;

  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;

  cursor: pointer;

}







/**-----------------------------

*           SearchBox

*-----------------------------*/



.util.use-sidebar {

  position: initial;

  margin: 0 auto;

  float: none;

  margin: 24px auto;

}



.util.use-sidebar .search {

  float: none;

}



.util.use-top {

  width: 222px;

  margin-top: -6px;

}



.util.use-top .search {

  width: 100%;

}



/* ----- media query - pc ----- */

@media screen and (min-width: 1061px) {

  .util:not(.use-top) {

    display: none

  }



  .wrap-drawer .util.use-sidebar {

    display: block

  }



  .wrap-drawer .util.use-top {

    display: none

  }



  .article-type-poster:nth-of-type(3n) {

    margin-right: 0;

  }

}



/* ----- media query - tablet ----- */

@media screen and (max-width: 1060px) {

  .util:not(.use-sidebar) {

    display: none

  }



  .wrap-drawer .util.use-sidebar {

    display: block

  }



  .wrap-drawer .util.use-top {

    display: none

  }

}



/* ----- media query - mobile ----- */

@media screen and (max-width: 1060px) {

  .util:not(.use-sidebar) {

    display: none

  }



  .wrap-drawer .util.use-sidebar {

    display: block

  }



  .wrap-drawer .util.use-top {

    display: none

  }



  .util.use-sidebar .searchInput {

    font-size: 11px

  }

}







/* ----- 404 페이지 ----- */

.absent_post {

  display: none;

}



.notfoundpage .absent_post {

  display: block;

}



.notfoundpage#tt-body-page.notfoundpage .main {

  padding-top: 39px;

}



.notfoundpage .absent_post:before {

  content: "혹시 다른 글이지 않을까요?";

  display: block;

  margin-bottom: 25px;

  font-weight: bold;

  font-size: 18px;

  line-height: 1.285714285714286;

  color: #555;

  white-space: pre;

  background: url(./images/icon-no-img.svg) no-repeat center !important;

  height: 90px;

  padding-top: 122px;

}



.notfoundpage .absent_post {

  padding: 0px 0px 98px 0 !important;

  background: none !important;

  font-weight: normal !important;

  font-size: 14px !important;

  line-height: 1.75;

  color: #999 !important;

}







/* -- 슬로건 섹션, 메뉴, 배너 노출 위치 -- */

/* 공통 */

#tt-body-category.headerslogundisplayon .area-slogun,

#tt-body-search.headerslogundisplayon .area-slogun,

#tt-body-archive.headerslogundisplayon .area-slogun,

#tt-body-tag.headerslogundisplayon .area-slogun,

#tt-body-media.headerslogundisplayon .area-slogun,

#tt-body-location.headerslogundisplayon .area-slogun,

#tt-body-guestbook.headerslogundisplayon .area-slogun,

#tt-body-page.headerslogundisplayon .area-slogun {

  display: none;

}



#tt-body-category.headerbannerdisplayon .area-promotion,

#tt-body-search.headerbannerdisplayon .area-promotion,

#tt-body-archive.headerbannerdisplayon .area-promotion,

#tt-body-tag.headerbannerdisplayon .area-promotion,

#tt-body-media.headerbannerdisplayon .area-promotion,

#tt-body-location.headerbannerdisplayon .area-promotion,

#tt-body-guestbook.headerbannerdisplayon .area-promotion,

#tt-body-page.headerbannerdisplayon .area-promotion {

  display: none;

}







#tt-body-index .main,

#tt-body-category .main,

#tt-body-search .main,

#tt-body-tag .main,

#tt-body-archive .main,

#tt-body-guestbook .main {

  padding-top: 56px;

}





/* ------------------ 2단형 ------------------ */

.wrap-right .title-search {

  margin: 2px 0 0 0;

}



.wrap-right .title-search.article-title-thumbnail {

  margin-bottom: 28px;

}





.use-slogan-wrp .wrap-right .area-slogun.topnavmenu {

  padding-bottom: 0px;

}





/* ------------------ 1단형 ------------------ */

.wrap-drawer .header {

  border: none;

}





#tt-body-page .wrap-drawer .main {

  margin-top: 0px;

}





/* media query - only pc */

@media screen and (min-width: 1061px) {



  .wrap-drawer .header .line-bottom {

    top: 80px;

    display: block;

    width: 100%;

    position: absolute;

    border-bottom: solid 1px #efefef;

  }



  .wrap-drawer .header .area-slogun,

  .wrap-drawer .header .topnavmen {

    margin-top: 0px;

    padding-top: 0px;

  }



  .wrap-drawer .header .area-slogun {

    margin-top: 65px;

    margin-bottom: 0px;

    padding-top: 0px;

    padding-bottom: 0px;

  }





  .wrap-drawer .main {

    margin-top: 56px;

  }

}



/* media query - only mobile */

@media screen and (max-width: 768px) {



  .header .line-bottom {

    display: none;

  }



  .header .area-gnb {

    margin-top: 0px;

  }



  .header .area-gnb .topnavmenu {

    border-bottom: 1px solid #efefef;

  }



  .header .area-slogun {

    padding-top: 0px;

    margin-top: 30px;

    margin-bottom: 30px;

  }



  #tt-body-tag .main,

  #tt-body-media .main,

  #tt-body-index .main,

  #tt-body-category .main,

  #tt-body-search .main,

  #tt-body-archive .main,

  #tt-body-guestbook .main {

    padding-top: 0px;

    margin-top: 36px;

  }



}



/* ----- media query - pc ----- */

@media screen and (min-width: 1061px) {



  #tt-body-index .wrap-drawer .main,

  #tt-body-category .wrap-drawer .main,

  #tt-body-search .wrap-drawer .main,

  #tt-body-tag .wrap-drawer .main,

  #tt-body-archive .wrap-drawer .main,

  #tt-body-location .wrap-drawer .main,

  #tt-body-guestbook .wrap-drawer .main {

    padding-top: 0;

  }

}





/* ----- media query - tablet ----- */

@media screen and (max-width: 1060px) {



  #tt-body-tag .header,

  #tt-body-media .header,

  #tt-body-search .header,

  #tt-body-location .header,

  #tt-body-guestbook .header,

  #tt-body-archive .header,

  #tt-body-page .header,

  #tt-body-category .header {

    margin-bottom: 0;

  }



  #tt-body-page .header .title-logo,

  #tt-body-category .header .title-logo,

  #tt-body-archive .header .title-logo,

  #tt-body-search .header .title-logo {

    margin: 0;

  }

}







/* no 이미지 */

.not-found-img .thumbnail {

  text-align: center;

}



.not-found-img .img-thumbnail {

  content: url(./images/no-image.jpg);

}









/* --- 보호글 Image & Not found Image --- */

.protected-img .thumbnail {

  background-color: #fafafa;

  background-image: url(./images/icon-exclamation.svg);

  background-repeat: no-repeat;

  background-size: inherit;

}



.protected-img .img-thumbnail {

  content: url(./images/icon-exclamation.svg);

}





.article-type-resize .not-found-img .thumbnail {

  background-image: url(./images/no-image.jpg);

  background-size: cover;

  background-position: 50% 50%;

}



.article-type- .protected-img .thumbnail,

.article-type-thumbnail .protected-img .thumbnail {

  background-size: 50%;

}



.article-type-resize .protected-img .thumbnail {

  background-image: none;

  background-color: #fafafa;

  height: 200px;

  line-height: 200px;



}



.article-type-resize .not-found-img:not(.protected-img) .img-thumbnail {

  display: none;

}



.article-type-resize .protected-img .img-thumbnail {

  display: inline-block;

  vertical-align: middle;

}



.article-type-resize .not-found-img:not(.protected-img) .thumbnail,

.article-type-crop .not-found-img .thumbnail {

  height: 200px;

}



.article-type-resize .not-found-img .thumbnail .img-thumbnail {

  width: 77px;

}



.article-type-resize .protected-img .thumbnail .img-thumbnail {

  height: 90px;

}





/* --- 보호글 Form --- */



#tt-body-page.protected-view .article-header,

#tt-body-page.protected-view .area-paging,

#tt-body-page.protected-view .area-aside {

  display: none

}



#tt-body-page.protected-view .area-main {

  max-width: 100%;

}



#tt-body-page.protected-view .article-view {

  margin-bottom: 310px;

}



#tt-body-page.protected-view .main {

  padding-top: 70px;

}



/* -- spinner -- */

.area-paging-more {

  position: relative;

}



@keyframes spinner {

  to {

    transform: rotate(360deg);

  }

}



.paging-more-loading {

  color: #fff;

  pointer-events: none;

}



.paging-more-loading:before {

  content: '';

  box-sizing: border-box;

  position: absolute;

  top: 50%;

  left: 50%;

  width: 20px;

  height: 20px;

  margin-top: -10px;

  margin-left: -15px;

  border-radius: 50%;

  border: 1px solid #ccc;

  border-top-color: #07d;

  animation: spinner .6s linear infinite;

}





/* -- init display none */

.display-none {

  display: none;

}



/* -- category style -- */

.use-category-banner .category-banner-wrp {

  display: block;

}



.use-category-banner .category-banner:before {

  content: '';

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background-color: rgba(58, 58, 58, 0.3);

  z-index: 1;

}





#tt-body-category.use-category-banner #container {

  margin-top: 400px;

}



.use-category-banner .category-banner-wrp {

  display: block;

  width: 100%;

  height: 400px;

  position: absolute;

  top: -400px;

  left: 0px;

}



.use-category-banner .category-banner {

  width: 100%;

  height: 100%;

  position: relative;

  left: 0;

  background-size: cover;

  background-position: 50% 50%;

  z-index: 11;

}



.use-category-banner .category-banner .category-banner-inner {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: flex-start;

  max-width: 1020px;

  height: 100%;

  margin: 0 auto;

  z-index: 2;

}



.use-category-banner .category-banner .category-description-box {

  margin-top: -4px;

}



.use-category-banner .category-banner .category-description-box strong {

  font-weight: bolder;

  width: 760px;

  font-size: 48px;

  font-family: Arial;

  line-height: 1.10;

  color: #fff;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  white-space: normal;

  word-break: keep-all;

}





/* 1단형 카테고리*/

.use-category-banner .wrap-drawer .category-banner .category-banner-inner {

  max-width: 780px;

}







/* ----- media query - pc ----- */

@media screen and (min-width: 1061px) {

  .use-category-banner .wrap-drawer .category-banner-wrp {

    top: -456px;

  }



  #tt-body-category.use-category-banner .wrap-drawer #container {

    margin-top: 456px;

  }



  #tt-body-category.use-slogan-wrp.headerslogundisplayoff.use-category-banner .wrap-drawer #container {

    margin-top: 512px;

  }

}





/* ----- media query - mobile ----- */

@media screen and (max-width: 1061px) {

  #tt-body-category.use-category-banner #container {

    margin-top: 386px;

  }



  .use-category-banner .category-banner-wrp {

    height: 350px;

    top: -386px;

  }



  .use-category-banner .category-banner .category-description-box {

    position: absolute;

    bottom: 40px;

  }



  .use-category-banner .category-banner .category-banner-inner {

    position: relative;

    padding: 0 20px;

  }



  .use-category-banner .category-banner .category-description-box strong {

    width: 270px;

    margin-bottom: 22px;

    font-size: 30px;

    line-height: 30px;

    -webkit-line-clamp: 3;

  }



  .border-none {

    border: none;

  }

}



/* --- 공지 --- */

#tt-body-index.notice-index .area-view .notice-title:first-child {

  display: block;

}





/* --- no-image --- */

.article-type-common.article-type- .thumbnail:not([has-thumbnail]),

.article-type-common.article-type-thumbnail .thumbnail:not([has-thumbnail]) {

  display: none;

}





/* --- 방명록 Header --- */

#tt-body-guestbook .title-search {

  border-bottom: 1px solid #e8e8e8;

}



/* --- Cover Title --- */

.area-cover .title-cover {

  min-height: 32px;

}



.area-cover .title-cover:empty {

  min-height: auto;

  padding-bottom: 0px;

}





@media screen and (min-width: 1061px) {

  .wrap-right .area-cover:first-child .title-cover:empty {

    min-height: 32px;

  }

}





@media screen and (max-width: 760px) {

  .area-cover .box-cover-poster {

    margin-bottom: 0px;

  }



  .area-cover .article-type-poster {

    margin-bottom: 0px;



  }

}





#tt-body-guestbook .area-reply form {

  padding-top: 20px;

}





#tt-body-guestbook .area-reply .list-reply+form {

  padding-top: 0;

}



.revenue_unit_wrap.position_list {

  max-width: 1020px;

  margin: 30px auto

}



.my_edit .ico_more {

  fill: #fff !important;

}



/* 전체 공통 */

#article-view {

  margin: 0;

  padding: 20px 20px 50px;

  word-wrap: break-word;

  color: #333;

  min-height: 370px;

  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Apple SD Gothic Neo", Arial, sans-serif;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  letter-spacing: 0;

}



.contents_style>* {

  margin: 20px 0 0 0;

}



/* 텍스트 관련 */

#article-view h2[data-ke-size] {

  font-size: 1.62em;

  line-height: 1.46;

}



#article-view h3[data-ke-size] {

  font-size: 1.44em;

  line-height: 1.48;

}



#article-view h4[data-ke-size] {

  font-size: 1.25em;

  line-height: 1.55;

}



#article-view p[data-ke-size='size18'] {

  font-size: 1.12em;

  line-height: 1.67;

}



#article-view p[data-ke-size='size16'] {

  line-height: 1.75;

}



#article-view p[data-ke-size='size14'] {

  font-size: 0.87em;

  line-height: 1.71;

}



#article-view h2,

#article-view h3,

#article-view h4 {

  font-weight: normal;

  letter-spacing: -1px;

  color: #000;

  margin: 1em 0 20px;

}



#article-view p+p, #article-view p {

  margin-bottom: 30px;

}



#article-view h2+h2,

#article-view h3+h3,

#article-view h4+h4 {

  margin: 0;

}



#article-view h2+h3,

#article-view h2+h4,

#article-view h3+h4 {

  margin-top: 10px;

}



#article-view h2+p,

#article-view h3+p,

#article-view h4+p,

#article-view h5+p,

#article-view h6+p {

  margin-top: 10px;

}



#article-view div[data-ke-type='moreLess'] {

  caret-color: auto;

  background-color: #fafafa;

  padding: 20px 20px 22px;

  margin: 20px 0;

  border: 1px dashed #dddddd;

  color: #333333;

}



#article-view a {

  color: #0070d1;

  text-decoration: underline;

}



#article-view figure[data-ke-type='contentSearch'] a {

  text-decoration: none;

}



/* 인용문 */

#article-view blockquote[data-ke-style='style1'] {

  text-align: center;

  background: url(https://t1.daumcdn.net/keditor/dist/0.7.21/image/blockquote-style1.svg) no-repeat 50% 0;

  padding: 34px 0 0 0;

  font-size: 1.12em;

  color: #333;

  line-height: 1.67;

  border: 0 none;

  font-family: "Noto Serif KR";

}



#article-view blockquote[data-ke-style='style2'] {

  border-color: #d0d0d0;

  border-width: 0 0 0 4px;

  border-style: solid;

  padding: 1px 0 0 12px;

  color: #666;

  line-height: 1.75;

  font-size: 1em;

  text-align: left;

}



#article-view blockquote[data-ke-style='style3'] {

  border: 1px solid #dddddd;

  background-color: #fcfcfc;

  text-align: left;

  padding: 21px 25px 20px 25px;

  color: #666;

  font-size: 1em;

  line-height: 1.75;

}



#article-view blockquote {

  display: block;

  margin: 20px auto 0;

  letter-spacing: 0px;

}



/* 첨부: 공통 */



/* 이미지 클릭 관련 - lightbox */

#article-view span[data-lightbox] {

  cursor: pointer;

}



/* 첨부: 파일 */

#article-view figure.fileblock {

  width: 470px;

  height: 73px;

  box-sizing: border-box;

  position: relative;

  border-radius: 1px;

  margin-top: 20px;

  margin-bottom: 0px;

  box-shadow: 0 1px 4px 0 rgb(0 0 0 / 7%);

  border: solid 1px rgba(0, 0, 0, 0.1);

}



#article-view figure.fileblock a {

  display: block;

}



#article-view figure.fileblock .image {

  float: left;

  width: 30px;

  height: 30px;

  background-image: url('https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg');

  margin: 22px 17px 21px 22px;

  background-position: 0 0;

}



#article-view figure.fileblock .desc {

  position: absolute;

  left: 70px;

  right: 60px;

  top: 4px;

  bottom: 0;

}



#article-view figure.fileblock .filename {

  color: #333333;

  font-size: 14px;

  text-overflow: ellipsis;

  width: 100%;

  height: 20px;

  margin: 16px 0 0;

}



#article-view figure.fileblock .size {

  font-family: Pretendard-Regular;

  font-size: 12px;

  color: #777;

  height: 16px;

}



#article-view figure[data-ke-align=alignCenter].fileblock {

  margin-left: auto;

  margin-right: auto;

}



#article-view figure[data-ke-align=alignRight].fileblock {

  margin-left: auto;

}



#article-view figure.fileblock .name {

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

  max-width: 272px;

  height: 20px;

  display: block;

}



#article-view figure.fileblock a::after {

  content: '';

  background-image: url('https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg');

  background-position: -40px 0;

  width: 30px;

  height: 30px;

  position: absolute;

  right: 24px;

  top: 19px;

}



/* 첨부: 이미지 */

#article-view figure.imageblock {

  display: table;

  position: relative;

}



#article-view figure.imageblock.alignLeft {

  text-align: left;

}



#article-view figure.imageblock.alignCenter {

  margin: 20px auto 0;

  text-align: center;

}



#article-view figure.imageblock.alignRight {

  text-align: right;

  margin-left: auto;

}



#article-view figure.imageblock.floatLeft {

  float: left;

  margin-right: 20px;

}



#article-view figure.imageblock.floatRight {

  float: right;

  margin-left: 20px;

}



#article-view figure.imageblock.widthContent {

  display: block;

}



#article-view figure.imageblock.widthContent img {

  width: 100%;

}



#article-view figure.imageblock.floatLeft figcaption,

#article-view figure.imageblock.floatRight figcaption {

  text-align: left;

}



#article-view figure.imageblock img {

  display: inline-block;

  max-width: 100%;

  margin: 0;

  height: auto;

}



#article-view iframe,

#article-view figure img,

#article-view figure iframe {

  max-width: 100%;

}



#article-view figure img:not([width]),

#article-view figure iframe:not([width]) {

  width: 100%;

}



#article-view figure {

  max-width: 100%;

  clear: both;

}



#article-view figure img {

  display: inline-block;

}



#article-view figure.imagegridblock+figure.imagegridblock,

#article-view figure.imagegridblock+figure.imageblock,

#article-view figure.imageblock+figure.imagegridblock {

  margin-top: 10px;

}



/* 캡션 텍스트 */

#article-view figure figcaption {

  font-size: 13px;

  color: #777;

  word-break: break-word;

  padding-top: 10px;

  min-height: 20px;

  caption-side: bottom;

  text-align: center;

  caret-color: auto;

  width: 100%;

  box-sizing: content-box;

}



/* 첨부: 이미지 그리드 */

#article-view figure.imagegridblock {

  position: relative;

  caret-color: transparent;

  background-color: transparent;

  width: 100%;

  height: auto;

  margin: 20px 0 0 0;

}



#article-view figure.imagegridblock .image-container {

  display: flex;

  justify-content: space-between;

  align-items: baseline;

  flex-wrap: wrap;

}



#article-view figure.imagegridblock .image-container>span {

  margin-right: 0;

  margin-top: 2px;

}



#article-view figure.imagegridblock img {

  margin: 0;

  height: inherit;

}



#article-view figure.imagegridblock span img {

  width: 100%;

}



hr[data-ke-style],

#article-view hr[data-ke-style] {

  border: none;

  font-size: 0;

  line-height: 0;

  margin: 20px auto;

  background: url(https://t1.daumcdn.net/keditor/dist/0.7.21/image/divider-line.svg);

  background-size: 200px 420px;

  cursor: default !important;

}



hr[data-ke-style='style1'],

#article-view hr[data-ke-style='style1'] {

  background-position: center 0;

  width: 64px;

  height: 4px;

  padding: 20px;

}



hr[data-ke-style='style2'],

#article-view hr[data-ke-style='style2'] {

  background-position: center -48px;

  width: 64px;

  height: 3px;

  padding: 20px;

}



hr[data-ke-style='style3'],

#article-view hr[data-ke-style='style3'] {

  background-position: center -96px;

  width: 64px;

  height: 8px;

  padding: 18px 20px;

}



hr[data-ke-style='style4'],

#article-view hr[data-ke-style='style4'] {

  background-position: center -144px;

  width: 2px;

  height: 60px;

  padding: 0 51px;



}



hr[data-ke-style='style4']+hr[data-ke-style='style4'],

#article-view hr[data-ke-style='style4']+hr[data-ke-style='style4'] {

  margin-top: 0;

}



hr[data-ke-style='style5'],

#article-view hr[data-ke-style='style5'] {

  background-position: center -208px;

  background-repeat: repeat-x;

  height: 2px;

  padding: 21px 0;

}



hr[data-ke-style='style6'],

#article-view hr[data-ke-style='style6'] {

  background-position: center -256px;

  background-repeat: repeat-x;

  height: 2px;

  padding: 21px 0;

}



hr[data-ke-style='style7'],

#article-view hr[data-ke-style='style7'] {

  background-position: center -304px;

  width: 200px;

  height: 19px;

  padding: 18px 20px 17px 20px;

}



hr[data-ke-style='style8'],

#article-view hr[data-ke-style='style8'] {

  background-position: center -362px;

  width: 200px;

  height: 19px;

  padding: 18px 20px 17px 20px;

}



/* 테이블 */

#article-view table[data-ke-style] {

  margin-bottom: 0px;

}



#article-view table {

  border-color: #ddd;

  margin-bottom: 0px;

}



#article-view table tbody tr {

  box-sizing: content-box;

}



#article-view table td {

  word-break: break-word;

  padding: 8px;

  font-size: 15px;

}



#article-view table[data-ke-style='style1'] tr:first-child td {

  border-bottom: 1px solid #6ed3d8;

}



#article-view table[data-ke-style='style2'] tr:first-child td {

  border-bottom: 1px solid #008300;

}



#article-view table[data-ke-style='style3'] tr:first-child td {

  border-bottom: 1px solid #006dbe;

}



#article-view table[data-ke-style='style4'] tr:nth-child(2n) td {

  background-color: #f9f9f9;

}



#article-view table[data-ke-style='style5'] tr:nth-child(2n) td {

  background-color: #f8fbfb;

}



#article-view table[data-ke-style='style6'] tr:nth-child(2n) td {

  background-color: #f5f7f5;

}



#article-view table[data-ke-style='style7'] tr:nth-child(2n) td {

  background-color: #f6f8fb;

}



#article-view table[data-ke-style='style8'] tr:first-child td {

  border-bottom: 2px solid #797979;

}



#article-view table[data-ke-style='style8'] {

  border-left: 0 none;

  border-right: 0 none;

}



#article-view table[data-ke-style='style8'] td {

  border-right-color: transparent;

  border-left-color: transparent;

}



#article-view table[data-ke-style='style9'] tr:first-child td {

  border-bottom: 2px solid #6ed3d8;

}



#article-view table[data-ke-style='style9'] {

  border-left: 0 none;

  border-right: 0 none;

}



#article-view table[data-ke-style='style9'] td {

  border-right-color: transparent;

  border-left-color: transparent;

}



#article-view table[data-ke-style='style10'] tr:first-child td {

  border-bottom: 2px solid #008300;

}



#article-view table[data-ke-style='style10'] {

  border-left: 0 none;

  border-right: 0 none;

}



#article-view table[data-ke-style='style10'] td {

  border-right-color: transparent;

  border-left-color: transparent;

}



#article-view table[data-ke-style='style11'] tr:first-child td {

  border-bottom: 2px solid #2780d4;

}



#article-view table[data-ke-style='style11'] {

  border-left: 0 none;

  border-right: 0 none;

}



#article-view table[data-ke-style='style11'] td {

  border-right-color: transparent;

  border-left-color: transparent;

}



#article-view table[data-ke-style='style12'] tr:nth-child(odd) td {

  background-color: #f9f9f9;

}



#article-view table[data-ke-style='style12'] tr td:first-child {

  background-color: #efefef;

}



#article-view table[data-ke-style='style12'] tr:first-child td {

  background-color: #9b9b9b;

  border: 1px solid #888;

  color: #fff;

}



#article-view table[data-ke-style='style13'] tr:nth-child(odd) td {

  background-color: #f9f9f9;

}



#article-view table[data-ke-style='style13'] tr td:first-child {

  background-color: #efefef;

}



#article-view table[data-ke-style='style13'] tr:first-child td {

  background-color: #6ed3d8;

  border: 1px solid #5cbcc1;

  color: #fff;

}



#article-view table[data-ke-style='style14'] tr:nth-child(odd) td {

  background-color: #f9f9f9;

}



#article-view table[data-ke-style='style14'] tr td:first-child {

  background-color: #efefef;

}



#article-view table[data-ke-style='style14'] tr:first-child td {

  background-color: #008300;

  border: 1px solid #006d00;

  color: #fff;

}



#article-view table[data-ke-style='style15'] tr:nth-child(odd) td {

  background-color: #f9f9f9;

}



#article-view table[data-ke-style='style15'] tr td:first-child {

  background-color: #efefef;

}



#article-view table[data-ke-style='style15'] tr:first-child td {

  background-color: #2780d4;

  border: 1px solid #1568b7;

  color: #fff;

}



#article-view table[data-ke-style='style16'],

#article-view table[data-ke-style='style16'] tr,

#article-view table[data-ke-style='style16'] tr td {

  border-color: transparent;

}



/* 오픈 그래프 */

#article-view figure[data-ke-type='opengraph'] {

  margin: 10px 0;

}



#article-view figure[data-ke-type='opengraph'] a {

  box-sizing: initial;

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.07);

  border: solid 1px rgba(0, 0, 0, 0.1);

  text-decoration: none;

  color: #000;

}



#article-view figure[data-ke-type='opengraph'] a:hover {

  opacity: 1;

}



#article-view figure[data-ke-type='opengraph'] div.og-image {

  border-right: solid 1px rgba(0, 0, 0, 0.06);

  width: 200px;

  height: 200px;

  background-size: cover;

  background-position: center;

}



#article-view figure[data-ke-type='opengraph'] div.og-image button {

  display: none;

}



#article-view figure[data-ke-type='opengraph']:hover div.og-image button {

  cursor: pointer;

  border: none;

  display: block;

  position: absolute;

  top: 0px;

  right: 0px;

  background-color: #000;

  width: 15px;

  height: 15px;

}



#article-view figure[data-ke-type='opengraph'] p.og-title {

  color: #000000;

  font-size: 22px;

  padding-bottom: 10px;

  max-width: 467px;

  text-overflow: ellipsis;

  white-space: nowrap;

  margin: 0px;

  overflow: hidden;

  font-family: Pretendard-Regular;

}



#article-view figure[data-ke-type='opengraph'] .og-desc {

  margin: 0px;

  max-width: 467px;

  text-overflow: ellipsis;

  overflow: hidden;

  font-family: Pretendard-Regular;

  font-size: 14px;

  font-weight: 300;

  font-style: normal;

  font-stretch: normal;

  line-height: normal;

  letter-spacing: normal;

  color: #909090;

  max-height: 42px;

  -webkit-line-clamp: 2;

  -webkit-box-orient: vertical;

  display: -webkit-box;

}



@media (max-width: 600px) {

  #article-view figure[data-ke-type='opengraph'] a {

    height: 90px;

  }



  #article-view figure[data-ke-type='opengraph'] a::before {

    left: 44px;

  }



  #article-view figure[data-ke-type='opengraph'] div.og-image {

    width: 90px;

    height: 90px;

  }



  #article-view figure[data-ke-type='opengraph'] div.og-text {

    padding: 13px 12px 0 20px;

    height: 90px;

  }



  #article-view figure[data-ke-type='opengraph'] div.og-text p.og-title {

    font-size: 16px;

    -webkit-line-clamp: 1;

  }



  #article-view figure[data-ke-type='opengraph'] div.og-text p.og-desc {

    display: none;

  }



  #article-view figure[data-ke-type='opengraph'] div.og-text p.og-host {

    bottom: 10px;

  }

}



/* 비디오 첨부 */

#article-view figure[data-ke-type='video'] {

  display: block;

  table-layout: fixed;

  justify-content: center;

  align-items: center;

  position: relative;

  text-align: center;

  color: #bdbdbd;

  font-size: 16px;

  line-height: 30px;

}



#article-view figure[data-ke-type='video'][data-ke-style='alignLeft'] {

  text-align: left;

}



#article-view figure[data-ke-type='video'][data-ke-style='alignCenter'] {

  margin: 20px auto 0;

  text-align: center;

}



#article-view figure[data-ke-type='video'][data-ke-style='alignRight'] {

  text-align: right;

  margin-left: auto;

}



#article-view figure[data-ke-type='video'] img {

  display: block;

  max-width: 100%;

  margin: 0 auto;

}



#article-view figure[data-ke-type='video'][data-video-host] iframe {

  margin: 0px;

  display: block;

}



#article-view figure[data-ke-type='video']>iframe[width='0'][height='0'] {

  width: 860px;

  height: 484px;

  max-width: 100%;

}



/* 코드 블럭 */

#article-view pre code.hljs {

  font-size: 14px;

  padding: 20px;

  font-family: SF Mono, Menlo, Consolas, Monaco, monospace;

  border: solid 1px #ebebeb;

  line-height: 1.71;

  overflow: auto;

}



/* 접은 글 */

#article-view .moreless-content :first-child {

  margin-top: 0;

  margin-bottom: 0;

}



#article-view div[data-ke-type='moreLess'] .moreless-content {

  display: none;

}



#article-view div[data-ke-type='moreLess'].open .moreless-content {

  display: block;

}



#article-view div[data-ke-type='moreLess'] .btn-toggle-moreless {

  color: #909090;

  font-size: 16px;

  line-height: 26px;

  font-family: Pretendard-Regular, sans-serif;

  cursor: pointer;

  text-decoration: none;

}



/* 리스트 */

#article-view ul li,

#article-view ol li {

  margin: 0 0 3px 22px;

  line-height: 1.7;

}



#article-view ul,

#article-view ol {

  margin: 14px auto 24px;

  padding: 0 0 0 10px;

}



/* 이모티콘 */

#article-view figure[data-ke-type=emoticon][data-ke-align=alignCenter] {

  text-align: center;

}



#article-view figure[data-ke-type=emoticon][data-ke-align=alignLeft] {

  text-align: left;

}



#article-view figure[data-ke-type=emoticon][data-ke-align=alignRight] {

  text-align: right;

}



/* 지도 */

#article-view figure[data-ke-type='map'],

#article-view iframe[data-ke-type='map'] {

  display: block;

  margin: 0 auto;

}



/* 첨부: 이미지 슬라이드 */

#article-view figure.imageslideblock {

  clear: both;

  position: relative;

  font-size: 0;

  outline: 0 none;

}



#article-view figure.imageslideblock .btn {

  display: none;

  outline: none;

}



#article-view figure.imageslideblock.ready .btn {

  display: inline-block;

}



#article-view figure.imageslideblock.ready .mark {

  opacity: 1;

}



#article-view figure.imageslideblock div.image-container {

  position: relative;

  min-width: 480px;

  max-width: 100%;

  min-height: 300px;

  max-height: 860px;

  background-color: #000;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  margin: 0 auto;

}



#article-view figure.imageslideblock div.image-container span.image-wrap {

  display: none;

}



#article-view figure.imageslideblock div.image-container span.image-wrap.selected {

  display: inline;

}



#article-view figure.imageslideblock div.image-container img {

  max-width: 100%;

  max-height: 100%;

}



#article-view figure.imageslideblock div.image-container .btn {

  position: absolute;

  border: 0;

  background: transparent;

  width: 60px;

  height: 60px;

  top: 50%;

  margin-top: -20px;

}



#article-view figure.imageslideblock div.image-container .btn-prev {

  left: 0;

}



#article-view figure.imageslideblock div.image-container .btn-next {

  right: 0;

}



#article-view figure.imageslideblock div.image-container:hover .btn span {

  opacity: 0.3;

}



#article-view figure.imageslideblock div.image-container .btn span {

  background-image: url('https://t1.daumcdn.net/tistory_admin/static/manage/post-editor/img_editor_content.svg');

  text-indent: -10000px;

  overflow: hidden;

  width: 40px;

  height: 40px;

  opacity: 0;

  transition: opacity ease-in-out 0.2s;

  display: inline-block;

}



#article-view figure.imageslideblock div.image-container .btn:hover span {

  opacity: 1;

}



#article-view figure.imageslideblock div.image-container .btn .ico-prev {

  background-position: -220px 0;

}



#article-view figure.imageslideblock div.image-container .btn .ico-next {

  background-position: -260px 0;

}



#article-view figure.imageslideblock div.mark {

  display: block;

  height: 44px;

  text-align: center;

  opacity: 0;

  transition: opacity ease-in-out 0.2s;

}



#article-view figure.imageslideblock div.mark span {

  width: 30px;

  height: 4px;

  display: inline-block;

  margin: 20px 1px;

  background-color: #d6d6d6;

  text-indent: -10000px;

  overflow: hidden;

  cursor: pointer;

}



#article-view figure.imageslideblock div.mark span:first-child {

  background-color: #000;

  margin-left: 0;

}



#article-view figure.imageslideblock div.mark span:last-child {

  margin-right: 0;

}



#article-view figure.imageslideblock figcaption {

  text-align: center;

  color: #666;

  font-size: 14px;

}



#article-view figure.imageslideblock.alignLeft {

  text-align: left;

}



#article-view figure.imageslideblock.alignCenter {

  margin: 0 auto 20px;

  text-align: center;

}



#article-view figure.imageslideblock.alignRight {

  text-align: right;

  margin-left: auto;

}



@media (max-width: 600px) {

  #article-view figure.imageslideblock div.image-container {

    min-width: 100%;

    width: 100%;

    max-height: 100%;

  }



  #article-view figure.imageslideblock div.image-container .btn span {

    opacity: 0.3;

  }

}



/* 구 에디터 속성 */

.btn_more, .btn_less {

  border: 0;

  background: transparent;

  display: block;

  height: 21px;

  margin: 20px 0;

  font-size: 14px;

  line-height: 14px;

  color: #888;

  position: relative;

  width: 100%;

  text-align: left;

}



.btn_less::before,

.btn_more::before {

  content: "...";

  display: inline-block;

  padding-right: 5px;

  font-size: 14px;

  line-height: 6px;

  vertical-align: top;

}



.box-timeline-content {

  word-break: break-all;

}



.area-aside .box-profile .btn_subscription,

.btn-g {

  display: inline-block;

  min-width: 120px;

  height: 40px;

  padding: 0 23px;

  border-radius: 20px;

  border: 1px solid #D0D0D0;

  font-weight: 400;

  font-size: 13px;

  color: #222;

  line-height: 38px;

  box-sizing: border-box;

  text-align: center;

  background-color: #fff;

  cursor: pointer;

  vertical-align: middle;

  outline: none;

  -webkit-transition: background-color .1s linear,border-color .1s linear;

  -moz-transition: background-color .1s linear,border-color .1s linear;

  transition: background-color .1s linear,border-color .1s linear;

}



.area-aside .box-profile .btn_subscription:hover,

.btn-g:hover {

  color: #fff;

  background-color: #f54;

  border: 1px solid #f54;

  text-decoration: none;

}



.area-aside .box-profile .btn_subscription:active,

.btn-g:active {

  color: #fff;

  background-color: #cc4436;

  border: 1px solid #cc4436;

  text-decoration: none;

}



.area-aside .box-profile .btn_subscription:not(.following),

.btn-primary {

  border-color: #000;

  background-color: #000;

  color: #fff;

  text-decoration: none;

}



.group-btn {

  font-size: 0;

  line-height: 0;

  text-align: center;

}



.btn_subscription strong {

  display: none;

}



.btn_subscription em {

  font-style: normal;

  font-weight: normal;

}



.area-aside .box-profile {

  border-bottom: 1px solid #e8e8e8;

}



.area-aside .box-profile .img-profile {

  margin: 40px 0 16px;

}



.area-aside .box-profile .tit-g {

  display: block;

  padding: 0 40px;

  font-weight: 600;

  font-size: 14px;

  word-break: break-word;

  margin: 0 0 10px 0;

}



.area-aside .box-profile .btn_tool + .profile-btn-group.member {

 margin-top: 33px;

}



.area-aside .box-profile .profile-btn-group:not(.member) {

  display: none;

}



.area-aside .box-profile .btn-g {

  min-width: 125px;

}



.area-aside .box-profile .btn_subscription:only-of-type {

  width: calc(100% - 40px);

}



.area-aside .box-profile .btn-g + .btn-g {

  margin-left: 10px;

}



.area-aside .box-profile .group-btn {

  padding: 33px 0 40px;

}



.cont-empty {

  text-align: center;

}



.cont-empty .tit-g {

  display: block;

  margin-top: 78px;

  font-weight: 500;

  font-size: 18px;

  line-height: 1.15;

  color: #000000;

  letter-spacing: -1.2px;

}



.cont-empty .desc-g {

  margin: 9px 0 0 0;

  font-size: 13px;

  line-height: 1.15;

  color: #777;

}



.cont-empty .group-btn {
  margin-top: 30px;
}


/* =========================================================
   TTJ Tistory skin refinement
   Based on aftercinema_skin_fixed visual direction.
   Paste this file as the full skin CSS, or copy this section
   to the bottom of an existing Tistory CSS file.
   ========================================================= */

:root {
  --ttj-bg: #ffffff;
  --ttj-bg-soft: #f7f7f5;
  --ttj-bg-warm: #fbfaf7;
  --ttj-text: #1f1f1f;
  --ttj-text-soft: #666666;
  --ttj-text-muted: #8a8a8a;
  --ttj-line: #e7e2d9;
  --ttj-line-strong: #d8cfbf;
  --ttj-navy: #0b1f5e;
  --ttj-navy-soft: #132b73;
  --ttj-gold: #c9a45c;
  --ttj-gold-soft: #f4ead7;
  --ttj-red: #9c2f22;
  --ttj-green: #2f6240;
  --ttj-card: #ffffff;
  --ttj-shadow: 0 12px 28px rgba(16, 24, 40, 0.08);
  --ttj-radius: 10px;
  --ttj-max: 820px;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  color: var(--ttj-text);
  background: var(--ttj-bg);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  letter-spacing: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  height: auto;
}

::selection {
  color: #ffffff;
  background: var(--ttj-navy);
}

/* Skin frame */

#wrap,
#container,
#content,
.main,
.area-main {
  background: var(--ttj-bg);
}

.header,
#header {
  border-bottom: 1px solid var(--ttj-line);
  background: rgba(255, 255, 255, 0.96);
  box-shadow: none;
}

@supports (backdrop-filter: blur(10px)) {
  .header,
  #header {
    backdrop-filter: blur(12px);
  }
}

.header .title-logo,
.header .title-logo a,
#header .title-logo,
#header .title-logo a {
  color: #111111;
  font-weight: 800;
  letter-spacing: 0;
}

.header .link-menu,
.header .link-search,
.header .link-menu span,
#header .link-menu,
#header .link-search {
  color: var(--ttj-text);
}

.area-aside,
.sidebar,
.box-profile,
.box-category,
.box-recent,
.box-tag {
  color: var(--ttj-text);
}

.area-aside .box-profile,
.area-aside .box-category,
.area-aside .box-recent,
.area-aside .box-tag {
  border: 1px solid var(--ttj-line);
  border-radius: var(--ttj-radius);
  background: var(--ttj-card);
  box-shadow: none;
}

.area-aside .tit-g,
.area-aside h2,
.area-aside h3 {
  color: var(--ttj-navy);
  font-weight: 800;
  letter-spacing: 0;
}

.footer,
#footer {
  color: #d7d7d7;
  background: #111111;
}

.footer a,
#footer a {
  color: #ffffff;
}

/* Article header and list */

.article-header,
.area-cover .cover-thumbnail-list .box-article,
.article-type-common .thumbnail {
  background-color: var(--ttj-bg-soft);
}

.article-header {
  background: linear-gradient(135deg, #111111 0%, #182033 54%, var(--ttj-navy) 100%);
}

.article-header .title-article,
.article-header .title-article a {
  color: #ffffff;
  font-weight: 800;
  letter-spacing: 0;
}

.article-header .category,
.article-header .date,
.article-header .txt-date {
  color: var(--ttj-gold);
}

.article-type-common,
.article-type-thumbnail,
.article-type-resize {
  border-color: var(--ttj-line);
}

.article-type-common .title,
.article-type-thumbnail .title,
.article-type-resize .title {
  color: var(--ttj-text);
  font-weight: 800;
  letter-spacing: 0;
}

.article-type-common .summary,
.article-type-thumbnail .summary,
.article-type-resize .summary {
  color: var(--ttj-text-soft);
  line-height: 1.75;
}

/* Base article typography */

#article-view,
.article-view,
.contents_style {
  max-width: var(--ttj-max);
  margin-right: auto;
  margin-left: auto;
  color: var(--ttj-text);
  font-size: 18px;
  line-height: 1.9;
  letter-spacing: 0;
}

#article-view p,
.article-view p,
.contents_style p {
  margin: 0 0 1.15em;
  color: var(--ttj-text);
  line-height: 1.9;
}

#article-view strong,
.article-view strong,
.contents_style strong {
  color: #111111;
  font-weight: 800;
}

#article-view h2,
#article-view h2[data-ke-size],
.article-view h2,
.article-view h2[data-ke-size],
.contents_style h2 {
  margin: 2.4em 0 1em;
  padding: 14px 18px;
  color: #ffffff;
  border: 0;
  border-radius: var(--ttj-radius);
  background: var(--ttj-navy);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
}

#article-view h3,
#article-view h3[data-ke-size],
.article-view h3,
.article-view h3[data-ke-size],
.contents_style h3 {
  margin: 2em 0 0.85em;
  padding: 0 0 0 14px;
  color: var(--ttj-text);
  border: 0;
  border-left: 4px solid var(--ttj-gold);
  background: transparent;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0;
}

#article-view h4,
#article-view h4[data-ke-size],
.article-view h4,
.article-view h4[data-ke-size],
.contents_style h4 {
  margin: 1.7em 0 0.7em;
  color: var(--ttj-navy);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0;
}

#article-view ul,
#article-view ol,
.article-view ul,
.article-view ol,
.contents_style ul,
.contents_style ol {
  margin: 1em 0 1.4em;
  padding-left: 1.25em;
}

#article-view li,
.article-view li,
.contents_style li {
  margin: 0.45em 0;
  line-height: 1.85;
}

#article-view blockquote,
.article-view blockquote,
.contents_style blockquote {
  margin: 1.6em 0;
  padding: 18px 20px;
  color: var(--ttj-text);
  border: 1px solid var(--ttj-line);
  border-left: 5px solid var(--ttj-gold);
  border-radius: var(--ttj-radius);
  background: var(--ttj-bg-warm);
  font-style: normal;
}

#article-view table,
.article-view table,
.contents_style table {
  border-collapse: collapse;
  overflow: hidden;
  width: 100%;
  margin: 1.4em 0;
  border: 1px solid var(--ttj-line);
  border-radius: var(--ttj-radius);
  background: #ffffff;
  font-size: 15px;
}

#article-view th,
.article-view th,
.contents_style th {
  color: #ffffff;
  border: 1px solid var(--ttj-navy-soft);
  background: var(--ttj-navy);
  font-weight: 800;
}

#article-view td,
.article-view td,
.contents_style td {
  border: 1px solid var(--ttj-line);
  color: var(--ttj-text);
  background: #ffffff;
}

#article-view figure,
.article-view figure,
.contents_style figure {
  margin: 1.5em auto;
}

#article-view figcaption,
.article-view figcaption,
.contents_style figcaption {
  margin-top: 9px;
  color: var(--ttj-text-muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: center;
}

#article-view pre,
.article-view pre,
.contents_style pre {
  border: 1px solid var(--ttj-line);
  border-radius: var(--ttj-radius);
  background: #111827;
  box-shadow: none;
}

#article-view code,
.article-view code,
.contents_style code {
  border-radius: 5px;
  background: var(--ttj-bg-soft);
  color: var(--ttj-red);
}

#article-view pre code,
.article-view pre code,
.contents_style pre code {
  background: transparent;
  color: inherit;
}

/* Generated commerce/article modules */

.cp-notice,
#article-view .cp-notice,
.article-view .cp-notice {
  margin: 18px 0;
  padding: 13px 15px;
  color: #7c2d12;
  border: 1px solid #f1d1bd;
  border-radius: var(--ttj-radius);
  background: #fff8f3;
  font-size: 14px;
  line-height: 1.65;
  box-shadow: none;
}

.cp-h2,
#article-view .cp-h2,
.article-view .cp-h2 {
  margin: 2.2em 0 1em;
  padding: 14px 18px;
  color: #ffffff;
  border: 0;
  border-radius: var(--ttj-radius);
  background: var(--ttj-navy);
  font-size: 25px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
}

.cp-h3,
#article-view .cp-h3,
.article-view .cp-h3 {
  margin: 2em 0 0.85em;
  padding: 0 0 0 14px;
  color: var(--ttj-text);
  border: 0;
  border-left: 4px solid var(--ttj-gold);
  background: transparent;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: 0;
}

.cp-summary-box,
.cp-rating-box,
.cp-price-box,
.cp-recommend-box,
.cp-checklist,
.cp-tip-box,
.cp-warning-box,
.cp-footer,
#article-view .cp-summary-box,
#article-view .cp-rating-box,
#article-view .cp-price-box,
#article-view .cp-recommend-box,
#article-view .cp-checklist,
#article-view .cp-tip-box,
#article-view .cp-warning-box,
#article-view .cp-footer,
.article-view .cp-summary-box,
.article-view .cp-rating-box,
.article-view .cp-price-box,
.article-view .cp-recommend-box,
.article-view .cp-checklist,
.article-view .cp-tip-box,
.article-view .cp-warning-box,
.article-view .cp-footer {
  margin: 22px 0;
  padding: 22px;
  color: var(--ttj-text);
  border: 1px solid var(--ttj-line);
  border-radius: var(--ttj-radius);
  background: var(--ttj-card);
  box-shadow: none;
}

.cp-summary-box,
#article-view .cp-summary-box,
.article-view .cp-summary-box {
  border-top: 4px solid var(--ttj-navy);
  background: var(--ttj-bg-warm);
}

.cp-summary-title,
.cp-recommend-title,
.cp-checklist-title,
.cp-tip-title,
.cp-warning-title,
#article-view .cp-summary-title,
#article-view .cp-recommend-title,
#article-view .cp-checklist-title,
#article-view .cp-tip-title,
#article-view .cp-warning-title,
.article-view .cp-summary-title,
.article-view .cp-recommend-title,
.article-view .cp-checklist-title,
.article-view .cp-tip-title,
.article-view .cp-warning-title {
  margin: 0 0 12px;
  color: var(--ttj-navy);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: 0;
}

.cp-summary-content,
.cp-tip-content,
.cp-warning-content,
#article-view .cp-summary-content,
#article-view .cp-tip-content,
#article-view .cp-warning-content,
.article-view .cp-summary-content,
.article-view .cp-tip-content,
.article-view .cp-warning-content {
  color: var(--ttj-text);
  line-height: 1.85;
}

.cp-image-box,
#article-view .cp-image-box,
.article-view .cp-image-box {
  margin: 24px auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  text-align: center;
}

.cp-product-img,
#article-view .cp-product-img,
.article-view .cp-product-img {
  display: inline-block;
  max-width: 100%;
  height: auto;
  padding: 0;
  border: 1px solid var(--ttj-line);
  border-radius: var(--ttj-radius);
  background: transparent;
  box-shadow: none;
}

.cp-price-box,
#article-view .cp-price-box,
.article-view .cp-price-box {
  border-top: 4px solid var(--ttj-gold);
  background: #ffffff;
  text-align: left;
}

.cp-price-original,
#article-view .cp-price-original,
.article-view .cp-price-original {
  color: var(--ttj-text-muted);
  font-size: 15px;
  text-decoration: line-through;
}

.cp-price-sale,
#article-view .cp-price-sale,
.article-view .cp-price-sale {
  color: var(--ttj-red);
  font-size: 28px;
  font-weight: 900;
  line-height: 1.25;
}

.cp-price-discount,
#article-view .cp-price-discount,
.article-view .cp-price-discount {
  display: inline-block;
  margin-top: 8px;
  padding: 5px 10px;
  color: #ffffff;
  border-radius: 999px;
  background: var(--ttj-red);
  font-size: 14px;
  font-weight: 800;
}

.cp-cta,
#article-view .cp-cta,
.article-view .cp-cta {
  margin: 26px 0;
  text-align: center;
}

.cp-cta-link,
#article-view .cp-cta-link,
.article-view .cp-cta-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 15px 30px;
  color: #ffffff;
  border: 1px solid var(--ttj-navy);
  border-radius: 8px;
  background: var(--ttj-navy);
  box-shadow: none;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
  transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
}

.cp-cta-link:hover,
#article-view .cp-cta-link:hover,
.article-view .cp-cta-link:hover {
  color: #ffffff;
  border-color: var(--ttj-navy-soft);
  background: var(--ttj-navy-soft);
  text-decoration: none;
  transform: translateY(-1px);
}

.cp-rating-box,
#article-view .cp-rating-box,
.article-view .cp-rating-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  align-items: center;
  border-color: var(--ttj-gold-soft);
  background: #fffdf8;
}

.cp-rating-stars,
#article-view .cp-rating-stars,
.article-view .cp-rating-stars {
  color: var(--ttj-gold);
  font-size: 20px;
  letter-spacing: 0;
}

.cp-rating-score,
#article-view .cp-rating-score,
.article-view .cp-rating-score {
  color: var(--ttj-text);
  font-size: 18px;
  font-weight: 800;
}

.cp-rating-text,
#article-view .cp-rating-text,
.article-view .cp-rating-text {
  color: var(--ttj-text-soft);
  font-size: 14px;
}

.cp-feature-cards,
#article-view .cp-feature-cards,
.article-view .cp-feature-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0;
}

.cp-feature-card,
#article-view .cp-feature-card,
.article-view .cp-feature-card {
  padding: 18px;
  border: 1px solid var(--ttj-line);
  border-radius: var(--ttj-radius);
  background: #ffffff;
  box-shadow: none;
}

.cp-feature-icon,
#article-view .cp-feature-icon,
.article-view .cp-feature-icon {
  color: var(--ttj-gold);
  font-size: 24px;
  line-height: 1;
}

.cp-feature-title,
#article-view .cp-feature-title,
.article-view .cp-feature-title {
  margin: 10px 0 6px;
  color: var(--ttj-navy);
  font-size: 17px;
  font-weight: 800;
}

.cp-feature-desc,
#article-view .cp-feature-desc,
.article-view .cp-feature-desc {
  margin: 0;
  color: var(--ttj-text-soft);
  font-size: 15px;
  line-height: 1.65;
}

.cp-table-wrap,
#article-view .cp-table-wrap,
.article-view .cp-table-wrap {
  overflow-x: auto;
  margin: 22px 0;
  border: 1px solid var(--ttj-line);
  border-radius: var(--ttj-radius);
  background: #ffffff;
}

.cp-table,
#article-view .cp-table,
.article-view .cp-table {
  width: 100%;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  box-shadow: none;
}

.cp-table th,
#article-view .cp-table th,
.article-view .cp-table th {
  padding: 13px 14px;
  color: #ffffff;
  border: 1px solid var(--ttj-navy-soft);
  background: var(--ttj-navy);
  font-weight: 800;
  white-space: nowrap;
}

.cp-table td,
#article-view .cp-table td,
.article-view .cp-table td {
  padding: 13px 14px;
  color: var(--ttj-text);
  border: 1px solid var(--ttj-line);
  background: #ffffff;
}

.cp-pros-cons,
#article-view .cp-pros-cons,
.article-view .cp-pros-cons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0;
}

.cp-pros,
.cp-cons,
#article-view .cp-pros,
#article-view .cp-cons,
.article-view .cp-pros,
.article-view .cp-cons {
  padding: 20px;
  border: 1px solid var(--ttj-line);
  border-radius: var(--ttj-radius);
  background: #ffffff;
  box-shadow: none;
}

.cp-pros {
  border-top: 4px solid var(--ttj-green);
}

.cp-cons {
  border-top: 4px solid var(--ttj-red);
}

.cp-pros-title,
#article-view .cp-pros-title,
.article-view .cp-pros-title {
  margin: 0 0 10px;
  color: var(--ttj-green);
  font-weight: 800;
}

.cp-cons-title,
#article-view .cp-cons-title,
.article-view .cp-cons-title {
  margin: 0 0 10px;
  color: var(--ttj-red);
  font-weight: 800;
}

.cp-faq,
#article-view .cp-faq,
.article-view .cp-faq {
  margin: 22px 0;
}

.cp-faq-item,
#article-view .cp-faq-item,
.article-view .cp-faq-item {
  margin: 0 0 12px;
  padding: 18px 20px;
  border: 1px solid var(--ttj-line);
  border-radius: var(--ttj-radius);
  background: #ffffff;
}

.cp-faq-q,
#article-view .cp-faq-q,
.article-view .cp-faq-q {
  margin: 0 0 8px;
  color: var(--ttj-navy);
  font-weight: 800;
}

.cp-faq-a,
#article-view .cp-faq-a,
.article-view .cp-faq-a {
  margin: 0;
  color: var(--ttj-text);
  line-height: 1.8;
}

.cp-recommend-box,
#article-view .cp-recommend-box,
.article-view .cp-recommend-box {
  border-top: 4px solid var(--ttj-gold);
  background: var(--ttj-bg-warm);
}

.cp-recommend-list,
#article-view .cp-recommend-list,
.article-view .cp-recommend-list {
  margin: 0;
  padding-left: 1.2em;
}

.cp-recommend-list li,
#article-view .cp-recommend-list li,
.article-view .cp-recommend-list li {
  margin: 0.45em 0;
  line-height: 1.8;
}

.cp-checklist,
#article-view .cp-checklist,
.article-view .cp-checklist {
  border-top: 4px solid var(--ttj-navy);
}

.cp-checklist ul,
#article-view .cp-checklist ul,
.article-view .cp-checklist ul {
  margin-bottom: 0;
}

.cp-tip-box,
#article-view .cp-tip-box,
.article-view .cp-tip-box {
  border-color: var(--ttj-gold-soft);
  background: #fffdf8;
}

.cp-warning-box,
#article-view .cp-warning-box,
.article-view .cp-warning-box {
  border-color: #f1d1bd;
  background: #fff8f3;
}

.cp-warning-title,
#article-view .cp-warning-title,
.article-view .cp-warning-title {
  color: var(--ttj-red);
}

.cp-quote,
#article-view .cp-quote,
.article-view .cp-quote {
  margin: 24px 0;
  padding: 22px;
  color: var(--ttj-text);
  border: 1px solid var(--ttj-line);
  border-left: 5px solid var(--ttj-gold);
  border-radius: var(--ttj-radius);
  background: var(--ttj-bg-warm);
  font-size: 18px;
  font-style: normal;
  line-height: 1.85;
}

.cp-quote-author,
#article-view .cp-quote-author,
.article-view .cp-quote-author {
  display: block;
  margin-top: 10px;
  color: var(--ttj-text-soft);
  font-size: 14px;
  font-style: normal;
  text-align: right;
}

.cp-footer,
#article-view .cp-footer,
.article-view .cp-footer {
  color: var(--ttj-text-soft);
  background: var(--ttj-bg-soft);
  font-size: 14px;
  line-height: 1.7;
}

/* Responsive tuning */

@media screen and (max-width: 860px) {
  #article-view,
  .article-view,
  .contents_style {
    max-width: none;
    padding-right: 18px;
    padding-left: 18px;
    font-size: 16px;
    line-height: 1.85;
  }

  #article-view h2,
  #article-view h2[data-ke-size],
  .article-view h2,
  .article-view h2[data-ke-size],
  .contents_style h2,
  .cp-h2 {
    padding: 13px 15px;
    font-size: 22px;
  }

  #article-view h3,
  #article-view h3[data-ke-size],
  .article-view h3,
  .article-view h3[data-ke-size],
  .contents_style h3,
  .cp-h3 {
    font-size: 19px;
  }

  .cp-feature-cards,
  #article-view .cp-feature-cards,
  .article-view .cp-feature-cards,
  .cp-pros-cons,
  #article-view .cp-pros-cons,
  .article-view .cp-pros-cons {
    grid-template-columns: 1fr;
  }

  .cp-summary-box,
  .cp-rating-box,
  .cp-price-box,
  .cp-recommend-box,
  .cp-checklist,
  .cp-tip-box,
  .cp-warning-box,
  .cp-footer,
  #article-view .cp-summary-box,
  #article-view .cp-rating-box,
  #article-view .cp-price-box,
  #article-view .cp-recommend-box,
  #article-view .cp-checklist,
  #article-view .cp-tip-box,
  #article-view .cp-warning-box,
  #article-view .cp-footer,
  .article-view .cp-summary-box,
  .article-view .cp-rating-box,
  .article-view .cp-price-box,
  .article-view .cp-recommend-box,
  .article-view .cp-checklist,
  .article-view .cp-tip-box,
  .article-view .cp-warning-box,
  .article-view .cp-footer {
    padding: 18px;
  }

  .cp-cta-link,
  #article-view .cp-cta-link,
  .article-view .cp-cta-link {
    width: 100%;
    padding-right: 18px;
    padding-left: 18px;
    font-size: 16px;
  }

  .cp-price-sale,
  #article-view .cp-price-sale,
  .article-view .cp-price-sale {
    font-size: 24px;
  }
}

@media screen and (max-width: 420px) {
  #article-view,
  .article-view,
  .contents_style {
    padding-right: 14px;
    padding-left: 14px;
  }

  .cp-table th,
  .cp-table td,
  #article-view .cp-table th,
  #article-view .cp-table td,
  .article-view .cp-table th,
  .article-view .cp-table td {
    padding: 11px 12px;
    font-size: 14px;
  }
}

/* ======================================================================
   TTJ_Tistory_CP 상품 글 전용 CSS
   티스토리: 꾸미기 > 스킨 편집 > HTML 편집 > CSS 탭의 맨 아래에 붙여넣기
   이 코드는 #article-view 안의 cp-* 클래스에만 적용됩니다.
   ====================================================================== */

/* BEGIN TTJ AFFILIATE PRODUCT UI v1.1 */

#article-view {
  --cp-page: #fffdf9;
  --cp-card: #ffffff;
  --cp-soft: #fff4e8;
  --cp-orange: #f97316;
  --cp-orange-hover: #e85d04;
  --cp-price: #e84118;
  --cp-orange-border: #fed7aa;
  --cp-text: #1f2937;
  --cp-muted: #6b7280;
  --cp-border: #e5e7eb;
  --cp-radius: 14px;
  color: var(--cp-text);
}

#article-view .tt_article_useless_p_margin,
#article-view .contents_style {
  max-width: 980px;
  margin-right: auto;
  margin-left: auto;
  color: var(--cp-text);
}

#article-view .cp-notice,
#article-view .cp-provider-row,
#article-view .cp-product-title,
#article-view .cp-product-overview,
#article-view .cp-rating-box,
#article-view .cp-feature-cards,
#article-view .cp-table-wrap,
#article-view .cp-pros-cons,
#article-view .cp-cta,
#article-view .cp-faq,
#article-view .cp-recommend-box,
#article-view .cp-checklist,
#article-view .cp-tip-box,
#article-view .cp-warning-box,
#article-view .cp-quote,
#article-view .cp-related-box,
#article-view .cp-footer {
  box-sizing: border-box;
}

#article-view .cp-notice {
  margin: 0 0 18px !important;
  padding: 14px 16px !important;
  border: 1px solid var(--cp-orange-border) !important;
  border-radius: 10px !important;
  color: #9a3412 !important;
  background: var(--cp-soft) !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1.6 !important;
  text-align: center !important;
}

#article-view .cp-provider-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  align-items: center !important;
  margin: 20px 0 12px !important;
}

#article-view .cp-provider-badge {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 30px !important;
  padding: 5px 11px !important;
  border-radius: 999px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

#article-view .cp-provider-badge--naver {
  border: 1px solid var(--cp-orange-border) !important;
  color: #9a3412 !important;
  background: var(--cp-soft) !important;
}

#article-view .cp-provider-badge--coupang {
  border: 1px solid #fecaca !important;
  color: #8b1a1a !important;
  background: #fff1f2 !important;
}

#article-view .cp-provider-store {
  color: var(--cp-muted) !important;
  font-size: 13px !important;
  font-weight: 650 !important;
}

#article-view .cp-product-title {
  margin: 12px 0 26px !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--cp-text) !important;
  background: transparent !important;
  font-size: clamp(27px, 4vw, 39px) !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.035em !important;
  word-break: keep-all !important;
}

#article-view .cp-product-overview {
  display: grid !important;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr) !important;
  gap: 24px !important;
  align-items: stretch !important;
  margin: 24px 0 34px !important;
}

#article-view .cp-product-media,
#article-view .cp-product-info {
  box-sizing: border-box !important;
  min-width: 0 !important;
  border: 1px solid var(--cp-border) !important;
  border-radius: var(--cp-radius) !important;
  background: var(--cp-card) !important;
  box-shadow: none !important;
}

#article-view .cp-product-media {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 360px !important;
  padding: 22px !important;
}

#article-view .cp-product-info {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  padding: 24px !important;
}

#article-view .cp-image-box {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}

#article-view .cp-image-box a {
  display: block !important;
  border: 0 !important;
  text-decoration: none !important;
}

#article-view .cp-product-img {
  display: block !important;
  width: 100% !important;
  max-width: 520px !important;
  height: 330px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  object-fit: contain !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

#article-view .cp-price-box {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
  align-items: baseline !important;
  margin: 0 0 18px !important;
  padding: 0 0 18px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cp-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
}

#article-view .cp-price-original {
  width: 100% !important;
  color: var(--cp-muted) !important;
  font-size: 14px !important;
  text-decoration: line-through !important;
}

#article-view .cp-price-sale {
  color: var(--cp-price) !important;
  font-size: clamp(30px, 4vw, 42px) !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -0.035em !important;
}

#article-view .cp-price-discount {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 28px !important;
  padding: 4px 9px !important;
  border-radius: 999px !important;
  color: #ffffff !important;
  background: var(--cp-orange) !important;
  font-size: 13px !important;
  font-weight: 850 !important;
}

#article-view .cp-cta {
  margin: 22px 0 !important;
  text-align: center !important;
}

#article-view .cp-cta-link,
#article-view .cp-related-link {
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: min(100%, 520px) !important;
  min-height: 52px !important;
  padding: 13px 22px !important;
  border: 1px solid var(--cp-orange) !important;
  border-radius: 10px !important;
  color: #ffffff !important;
  background: var(--cp-orange) !important;
  box-shadow: 0 7px 18px rgba(249, 115, 22, 0.18) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  text-decoration: none !important;
}

#article-view .cp-cta-link:hover,
#article-view .cp-related-link:hover {
  border-color: var(--cp-orange-hover) !important;
  background: var(--cp-orange-hover) !important;
}

#article-view .cp-summary-box,
#article-view .cp-rating-box,
#article-view .cp-feature-card,
#article-view .cp-pros,
#article-view .cp-cons,
#article-view .cp-checklist,
#article-view .cp-tip-box,
#article-view .cp-warning-box,
#article-view .cp-recommend-box,
#article-view .cp-related-box {
  box-sizing: border-box !important;
  border: 1px solid var(--cp-orange-border) !important;
  border-radius: var(--cp-radius) !important;
  background: var(--cp-soft) !important;
  box-shadow: none !important;
}

#article-view .cp-summary-box {
  margin: 18px 0 0 !important;
  padding: 20px !important;
}

#article-view .cp-summary-title,
#article-view .cp-checklist-title,
#article-view .cp-tip-title,
#article-view .cp-warning-title,
#article-view .cp-recommend-title {
  margin: 0 0 10px !important;
  color: #9a3412 !important;
  font-size: 17px !important;
  font-weight: 850 !important;
  line-height: 1.45 !important;
}

#article-view .cp-summary-content,
#article-view .cp-tip-content,
#article-view .cp-warning-content,
#article-view .cp-text,
#article-view .cp-list,
#article-view .cp-pros li,
#article-view .cp-cons li,
#article-view .cp-recommend-list {
  color: var(--cp-text) !important;
  font-size: 16px !important;
  line-height: 1.8 !important;
}

#article-view .cp-summary-content,
#article-view .cp-tip-content,
#article-view .cp-warning-content {
  margin: 0 !important;
}

#article-view .cp-list,
#article-view .cp-recommend-list,
#article-view .cp-checklist ul,
#article-view .cp-pros ul,
#article-view .cp-cons ul {
  margin: 10px 0 0 !important;
  padding-left: 22px !important;
}

#article-view .cp-h2 {
  margin: 46px 0 20px !important;
  padding: 0 0 12px !important;
  border: 0 !important;
  border-bottom: 2px solid var(--cp-orange) !important;
  border-radius: 0 !important;
  color: var(--cp-text) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: clamp(23px, 3vw, 29px) !important;
  font-weight: 850 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.025em !important;
}

#article-view .cp-h3 {
  margin: 30px 0 15px !important;
  padding: 0 0 9px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cp-orange-border) !important;
  border-radius: 0 !important;
  color: var(--cp-text) !important;
  background: transparent !important;
  box-shadow: none !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1.4 !important;
}

#article-view .cp-highlight-green,
#article-view .cp-highlight {
  padding: 1px 3px !important;
  background: linear-gradient(180deg, transparent 62%, #fed7aa 62%) !important;
  font-weight: 700 !important;
}

#article-view .cp-rating-box {
  margin: 26px 0 !important;
  padding: 22px !important;
  text-align: center !important;
}

#article-view .cp-rating-stars {
  color: var(--cp-orange) !important;
  font-size: 30px !important;
  letter-spacing: 4px !important;
}

#article-view .cp-rating-score {
  margin: 8px 0 !important;
  color: var(--cp-price) !important;
  font-size: 34px !important;
  font-weight: 900 !important;
}

#article-view .cp-rating-text {
  margin: 0 !important;
  color: var(--cp-muted) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

#article-view .cp-feature-cards {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 24px 0 !important;
}

#article-view .cp-feature-card {
  min-width: 0 !important;
  padding: 20px !important;
  background: var(--cp-card) !important;
}

#article-view .cp-feature-icon {
  color: var(--cp-orange) !important;
  font-size: 25px !important;
  line-height: 1.2 !important;
}

#article-view .cp-feature-title {
  margin: 10px 0 7px !important;
  color: var(--cp-text) !important;
  font-size: 17px !important;
  font-weight: 850 !important;
}

#article-view .cp-feature-desc {
  color: var(--cp-muted) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

#article-view .cp-table-wrap {
  margin: 20px 0 !important;
  overflow-x: auto !important;
  border: 1px solid var(--cp-border) !important;
  border-radius: var(--cp-radius) !important;
  background: var(--cp-card) !important;
}

#article-view .cp-table {
  width: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-collapse: collapse !important;
}

#article-view .cp-table th,
#article-view .cp-table td {
  padding: 14px 16px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--cp-border) !important;
  color: var(--cp-text) !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

#article-view .cp-table th {
  color: #9a3412 !important;
  background: var(--cp-soft) !important;
  font-weight: 850 !important;
}

#article-view .cp-table td {
  background: var(--cp-card) !important;
}

#article-view .cp-pros-cons {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 24px 0 !important;
}

#article-view .cp-pros,
#article-view .cp-cons {
  min-width: 0 !important;
  padding: 20px !important;
  background: var(--cp-card) !important;
}

#article-view .cp-pros-title,
#article-view .cp-cons-title {
  margin: 0 0 10px !important;
  color: var(--cp-text) !important;
  font-size: 17px !important;
  font-weight: 850 !important;
}

#article-view .cp-faq {
  margin: 24px 0 !important;
  border-top: 1px solid var(--cp-border) !important;
}

#article-view .cp-faq-item {
  border-bottom: 1px solid var(--cp-border) !important;
  background: var(--cp-card) !important;
}

#article-view .cp-faq-q {
  padding: 16px 4px 8px !important;
  color: var(--cp-text) !important;
  font-size: 16px !important;
  font-weight: 850 !important;
}

#article-view .cp-faq-a {
  padding: 0 4px 16px !important;
  color: var(--cp-muted) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
}

#article-view .cp-checklist,
#article-view .cp-tip-box,
#article-view .cp-warning-box,
#article-view .cp-recommend-box {
  margin: 20px 0 !important;
  padding: 20px !important;
}

#article-view .cp-quote {
  margin: 20px 0 !important;
  padding: 22px !important;
  border: 1px solid var(--cp-orange-border) !important;
  border-left: 4px solid var(--cp-orange) !important;
  border-radius: var(--cp-radius) !important;
  color: var(--cp-text) !important;
  background: var(--cp-card) !important;
  box-shadow: none !important;
}

#article-view .cp-quote-author {
  margin: 10px 0 0 !important;
  color: var(--cp-muted) !important;
  font-size: 14px !important;
  text-align: right !important;
}

#article-view .cp-related-box {
  margin: 36px 0 26px !important;
  padding: 24px !important;
  text-align: center !important;
}

#article-view .cp-related-kicker {
  display: block !important;
  margin-bottom: 8px !important;
  color: var(--cp-orange) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
}

#article-view .cp-related-title {
  display: block !important;
  color: var(--cp-text) !important;
  font-size: 24px !important;
  font-weight: 900 !important;
}

#article-view .cp-related-copy {
  margin: 8px 0 18px !important;
  color: var(--cp-muted) !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
}

#article-view .cp-related-link {
  width: auto !important;
  min-width: 210px !important;
}

#article-view .cp-footer {
  margin-top: 28px !important;
  padding: 18px !important;
  border: 0 !important;
  border-top: 1px solid var(--cp-orange-border) !important;
  color: var(--cp-muted) !important;
  background: var(--cp-page) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  text-align: center !important;
}

#article-view .cp-footer p {
  margin: 4px 0 !important;
  color: var(--cp-muted) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

@media (max-width: 820px) {
  #article-view .cp-product-overview,
  #article-view .cp-feature-cards,
  #article-view .cp-pros-cons {
    grid-template-columns: 1fr !important;
  }

  #article-view .cp-product-media {
    min-height: 280px !important;
    padding: 14px !important;
  }

  #article-view .cp-product-info {
    padding: 18px !important;
  }

  #article-view .cp-product-img {
    height: 270px !important;
  }

  #article-view .cp-cta-link,
  #article-view .cp-related-link {
    width: 100% !important;
    min-height: 50px !important;
  }

  #article-view .cp-price-sale {
    font-size: 32px !important;
  }
}

@media (max-width: 420px) {
  #article-view .cp-product-title {
    font-size: 25px !important;
  }

  #article-view .cp-product-img {
    height: 230px !important;
  }

  #article-view .cp-notice,
  #article-view .cp-summary-box,
  #article-view .cp-rating-box,
  #article-view .cp-feature-card,
  #article-view .cp-pros,
  #article-view .cp-cons,
  #article-view .cp-checklist,
  #article-view .cp-tip-box,
  #article-view .cp-warning-box,
  #article-view .cp-recommend-box,
  #article-view .cp-related-box {
    padding: 16px !important;
  }
}

/* END TTJ AFFILIATE PRODUCT UI v1.1 */

/* START TTJ SHOPPING MAP UI v2 */
.ttj-shop-map {
  --shop-orange: #f97316;
  --shop-orange-dark: #e85d04;
  --shop-orange-soft: #fff4e8;
  --shop-orange-line: #fed7aa;
  --shop-page: #fffdf9;
  --shop-card: #ffffff;
  --shop-text: #1f2937;
  --shop-muted: #6b7280;
  --shop-line: #e5e7eb;
  box-sizing: border-box;
  width: 100%;
  max-width: 1040px;
  margin: 0 auto;
  padding: 16px 0 56px;
  color: var(--shop-text);
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  line-height: 1.7;
  word-break: keep-all;
}

.ttj-shop-map *,
.ttj-shop-map *::before,
.ttj-shop-map *::after {
  box-sizing: border-box;
}

.ttj-shop-map a {
  color: inherit;
  text-decoration: none;
}

.ttj-shop-hero {
  position: relative;
  overflow: hidden;
  padding: 42px 38px 36px;
  border: 1px solid var(--shop-orange-line);
  border-top: 6px solid var(--shop-orange);
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff 0%, var(--shop-orange-soft) 100%);
}

.ttj-shop-hero::after {
  position: absolute;
  right: -46px;
  bottom: -62px;
  width: 190px;
  height: 190px;
  border: 34px solid rgba(249, 115, 22, 0.08);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.ttj-shop-kicker {
  margin: 0 0 10px !important;
  color: var(--shop-orange) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
}

.ttj-shop-title {
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--shop-text) !important;
  background: transparent !important;
  font-size: clamp(32px, 5vw, 48px) !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.045em !important;
}

.ttj-shop-lead {
  max-width: 720px;
  margin: 0 !important;
  color: var(--shop-muted) !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
}

.ttj-shop-provider-row {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}

.ttj-shop-provider {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--shop-orange-line);
  border-radius: 999px;
  color: #9a3412;
  background: rgba(255, 255, 255, 0.82);
  font-size: 13px;
  font-weight: 800;
}

.ttj-shop-disclosure {
  position: relative;
  z-index: 1;
  margin: 22px 0 0 !important;
  padding: 15px 0 0 !important;
  border-top: 1px solid var(--shop-orange-line) !important;
  color: #9a3412 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
}

.ttj-shop-jump {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin: 24px 0 40px;
}

.ttj-shop-jump a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid var(--shop-line);
  border-radius: 999px;
  color: var(--shop-text) !important;
  background: var(--shop-card);
  font-size: 14px;
  font-weight: 800;
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.ttj-shop-jump a:hover,
.ttj-shop-jump a:focus-visible {
  border-color: var(--shop-orange);
  color: #9a3412 !important;
  background: var(--shop-orange-soft);
  outline: none;
}

.ttj-shop-section {
  margin-top: 40px;
}

.ttj-shop-section-head {
  display: flex;
  gap: 20px;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px solid var(--shop-text);
}

.ttj-shop-section-title {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--shop-text) !important;
  background: transparent !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.025em !important;
}

.ttj-shop-section-copy {
  margin: 0 !important;
  color: var(--shop-muted) !important;
  font-size: 14px !important;
}

.ttj-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.ttj-shop-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 16px;
  min-width: 0;
  min-height: 190px;
  padding: 24px;
  border: 1px solid var(--shop-line);
  border-radius: 14px;
  color: var(--shop-text) !important;
  background: var(--shop-card);
  box-shadow: 0 8px 24px rgba(31, 41, 55, 0.045);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.ttj-shop-card:hover,
.ttj-shop-card:focus-visible {
  border-color: var(--shop-orange);
  box-shadow: 0 12px 30px rgba(249, 115, 22, 0.11);
  transform: translateY(-2px);
  outline: none;
}

.ttj-shop-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--shop-orange-line);
  border-radius: 12px;
  background: var(--shop-orange-soft);
  font-size: 23px;
}

.ttj-shop-card-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.ttj-shop-card strong {
  display: block;
  margin: 0 0 8px;
  color: var(--shop-text) !important;
  font-size: 19px;
  font-weight: 900;
  line-height: 1.4;
}

.ttj-shop-card span {
  display: block;
  color: var(--shop-muted) !important;
  font-size: 15px;
  line-height: 1.7;
}

.ttj-shop-card em {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-top: auto;
  padding-top: 17px;
  color: var(--shop-orange) !important;
  font-size: 13px;
  font-style: normal;
  font-weight: 900;
}

.ttj-shop-guide {
  margin-top: 42px;
  padding: 28px;
  border: 1px solid var(--shop-orange-line);
  border-radius: 14px;
  background: var(--shop-orange-soft);
}

.ttj-shop-guide h3 {
  margin: 0 0 16px !important;
  padding: 0 !important;
  border: 0 !important;
  color: var(--shop-text) !important;
  background: transparent !important;
  font-size: 22px !important;
  font-weight: 900 !important;
}

.ttj-shop-guide ol {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 0 !important;
  padding: 0 !important;
  counter-reset: shop-step;
  list-style: none !important;
}

.ttj-shop-guide li {
  position: relative;
  min-width: 0;
  padding: 52px 18px 18px;
  border: 1px solid var(--shop-orange-line);
  border-radius: 12px;
  color: var(--shop-muted) !important;
  background: var(--shop-card);
  font-size: 14px;
  line-height: 1.7;
  counter-increment: shop-step;
}

.ttj-shop-guide li::before {
  position: absolute;
  top: 16px;
  left: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: #ffffff;
  background: var(--shop-orange);
  font-size: 12px;
  font-weight: 900;
  content: counter(shop-step);
}

.ttj-shop-guide a {
  color: var(--shop-orange-dark) !important;
  font-weight: 850;
}

.ttj-shop-footer {
  margin: 34px 0 0 !important;
  padding: 20px 0 !important;
  border-top: 1px solid var(--shop-orange-line) !important;
  color: var(--shop-muted) !important;
  background: var(--shop-page) !important;
  font-size: 13px !important;
  line-height: 1.75 !important;
  text-align: center !important;
}

@media (max-width: 760px) {
  .ttj-shop-map {
    padding: 8px 0 44px;
  }

  .ttj-shop-hero {
    padding: 30px 22px 26px;
    border-radius: 14px;
  }

  .ttj-shop-lead {
    font-size: 16px !important;
  }

  .ttj-shop-jump a {
    flex: 1 1 calc(50% - 9px);
  }

  .ttj-shop-section-head {
    display: block;
  }

  .ttj-shop-section-copy {
    margin-top: 7px !important;
  }

  .ttj-shop-grid,
  .ttj-shop-guide ol {
    grid-template-columns: 1fr;
  }

  .ttj-shop-card {
    min-height: 0;
    padding: 20px;
  }

  .ttj-shop-guide {
    padding: 20px;
  }
}

@media (max-width: 420px) {
  .ttj-shop-title {
    font-size: 30px !important;
  }

  .ttj-shop-jump a {
    flex-basis: 100%;
  }

  .ttj-shop-card {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 13px;
    padding: 18px;
  }

  .ttj-shop-card-icon {
    width: 42px;
    height: 42px;
    font-size: 20px;
  }
}
/* END TTJ SHOPPING MAP UI v2 */

/* 아래쪽 중복 쇼핑맵 카드만 숨김 */
#article-view > .cp-related-box {
  display: none !important;
}