/* 텍스트 */
h1,
h1[data-ke-size] {
  font-size: 2em;
}
h2,
h2[data-ke-size] {
  font-size: 1.62em;
}
h3,
h3[data-ke-size] {
  font-size: 1.44em;
}
h4,
h4[data-ke-size] {
  font-size: 1.25em;
}

#tt-body-page p[data-ke-size="size18"],
p[data-ke-size="size18"] {
  font-size: 1.12em;
}

#tt-body-page p[data-ke-size="size14"],
p[data-ke-size="size14"] {
  font-size: 0.87em;
}

#tt-body-page h2[data-ke-size],
#tt-body-page h3[data-ke-size],
#tt-body-page h4[data-ke-size] {
  font-weight: normal;
}

/* 첨부 */
figure {
  margin: 0 0 20px;
  max-width: 100%;
  clear: both;
}
figure figcaption {
  font-size: 13px;
  word-break: break-word;
  padding-top: 10px;
  min-height: 20px;
  caption-side: bottom;
  text-align: center;
}

#tt-body-page iframe,
figure img,
figure iframe {
  max-width: 100%;
}

figure img:not([width]),
figure iframe:not([width]) {
  width: 100%;
}

#tt-body-page figure img,
figure img {
  display: inline-block;
}

span[data-lightbox] {
  cursor: pointer;
}

/* 첨부: 이미지 */
figure.imageblock,
#tt-body-page figure.imageblock {
  display: table;
  position: relative;
}
figure.imageblock.alignLeft {
  text-align: left;
}
figure.imageblock.alignCenter {
  margin: 0 auto 20px;
  text-align: center;
}
figure.imageblock.alignRight {
  text-align: right;
  margin-left: auto;
}
figure.imageblock.floatLeft {
  float: left;
  margin-right: 20px;
}
figure.imageblock.floatRight {
  float: right;
  margin-left: 20px;
}
figure.imageblock.widthContent,
#tt-body-page figure.imageblock.widthContent {
  display: block;
}
figure.imageblock.widthContent img {
  width: 100%;
}

figure.imageblock.floatLeft figcaption,
figure.imageblock.floatRight figcaption {
  text-align: left;
}
#tt-body-page figure.imageblock img,
figure.imageblock img {
  display: inline-block;
  max-width: 100% !important;
  margin: 0;
  height: auto;
}

figure.imagegridblock,
#tt-body-page figure.imagegridblock {
  position: relative;
  margin: 20px 0;
  background-color: transparent;
}
figure.imagegridblock .image-container {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
}

figure.imagegridblock .image-container > span {
  margin-right: 0 !important;
  margin-top: 2px !important;
}

figure.imagegridblock img {
  margin: 0;
  height: inherit;
}
figure.imagegridblock span img {
  width: 100%;
}

/* 첨부: 파일 */
figure.fileblock,
#tt-body-page figure.fileblock {
  margin-top: 28px;
  margin-bottom: 20px;
  width: 470px;
  height: 71px;
  border: 1px solid #e9e9e9;
  position: relative;
  border-radius: 1px;
}

figure.fileblock.censorship,
#tt-body-page figure.fileblock.censorship {
  opacity: 56%;
}

figure.fileblock a,
#tt-body-page figure.fileblock a {
  display: block;
  height: 71px;
}

figure.fileblock a.censorship::after,
#tt-body-page figure.fileblock a.censorship::after {
  background-image: none;
}

figure.fileblock .desc,
#tt-body-page figure.fileblock .desc {
  position: absolute;
  left: 70px;
  right: 60px;
  top: 0;
  bottom: 0;
}

figure.fileblock .censorship-guide,
#tt-body-page figure.fileblock .censorship-guide {
  color: #333333;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 14px;
  line-height: 19px;
  word-wrap: break-word;
}

figure.fileblock .filename,
#tt-body-page figure.fileblock .filename {
  color: #333333;
  font-size: 14px;
  text-overflow: ellipsis;
  height: 20px;
  margin: 17px 0 0;
}

figure.fileblock .name,
#tt-body-page figure.fileblock .name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 272px;
  height: 20px;
  display: block;
}

figure.fileblock .type,
#tt-body-page figure.fileblock .type {
  height: 20px;
  display: block;
  float: left;
}

figure.fileblock .size,
#tt-body-page figure.fileblock .size {
  font-family: Avenir Next, sans-serif;
  font-size: 12px;
  color: #777;
  height: 16px;
  margin: 2px 0 0;
}

figure[data-ke-align="alignCenter"].fileblock {
  margin-left: auto;
  margin-right: auto;
}

figure[data-ke-align="alignRight"].fileblock {
  margin-left: auto;
}

hr[data-ke-style="style1"],
#tt-body-page hr[data-ke-style="style1"] {
  background-position: 0 0;
  width: 64px;
  background-repeat: no-repeat;
}

hr[data-ke-style="style2"],
#tt-body-page hr[data-ke-style="style2"] {
  background-position: 0 -20px;
  width: 64px;
  background-repeat: no-repeat;
}

hr[data-ke-style="style3"],
#tt-body-page hr[data-ke-style="style3"] {
  background-position: 0 -40px;
  width: 64px;
  background-repeat: no-repeat;
}

hr[data-ke-style="style4"],
#tt-body-page hr[data-ke-style="style4"] {
  background-position: 0 -60px;
  width: 2px;
  height: 60px;
  background-repeat: no-repeat;
}

hr[data-ke-style="style4"] + hr[data-ke-style="style4"],
#tt-body-page hr[data-ke-style="style4"] + hr[data-ke-style="style4"] {
  margin-top: 0;
}

hr[data-ke-style="style5"],
#tt-body-page hr[data-ke-style="style5"] {
  background-position: 0 -120px;
}

hr[data-ke-style="style6"],
#tt-body-page hr[data-ke-style="style6"] {
  background-position: 0 -140px;
}

hr[data-ke-style="style7"],
#tt-body-page hr[data-ke-style="style7"] {
  background-position: 0 -160px;
  background-repeat: no-repeat;
  width: 200px;
}

hr[data-ke-style="style8"],
#tt-body-page hr[data-ke-style="style8"] {
  background-position: 0 -180px;
  background-repeat: no-repeat;
  width: 200px;
}

/* 테이블 */
.contents_style table td {
  word-break: break-word;
}
table[data-ke-style],
#tt-body-page table[data-ke-style] {
  margin-bottom: 20px;
}
table[data-ke-style] th,
table[data-ke-style] td,
#tt-body-page table[data-ke-style] th,
#tt-body-page table[data-ke-style] td {
  padding: 8px;
}

table[data-ke-style="style1"] tr:first-child td {
  border-bottom: 1px solid #6ed3d8;
}

table[data-ke-style="style2"] tr:first-child td {
  border-bottom: 1px solid #008300;
}

table[data-ke-style="style3"] tr:first-child td {
  border-bottom: 1px solid #006dbe;
}

table[data-ke-style="style4"] tr:nth-child(2n) td {
  background-color: #f7f7f7;
}

table[data-ke-style="style5"] tr:nth-child(2n) td {
  background-color: #eff6f6;
}

table[data-ke-style="style6"] tr:nth-child(2n) td {
  background-color: #e6f0e6;
}

table[data-ke-style="style7"] tr:nth-child(2n) td {
  background-color: #f0f4f7;
}

table[data-ke-style="style8"] tr:first-child td {
  border-bottom: 2px solid #797979;
}

table[data-ke-style="style8"] {
  border-left: 0 none;
  border-right: 0 none;
}

table[data-ke-style="style8"] td {
  border-right-color: transparent;
  border-left-color: transparent;
}

table[data-ke-style="style9"] tr:first-child td {
  border-bottom: 2px solid #6ed3d8;
}

table[data-ke-style="style9"] {
  border-left: 0 none;
  border-right: 0 none;
}

table[data-ke-style="style9"] td {
  border-right-color: transparent;
  border-left-color: transparent;
}

table[data-ke-style="style10"] tr:first-child td {
  border-bottom: 2px solid #008300;
}

table[data-ke-style="style10"] {
  border-left: 0 none;
  border-right: 0 none;
}

table[data-ke-style="style10"] td {
  border-right-color: transparent;
  border-left-color: transparent;
}

table[data-ke-style="style11"] tr:first-child td {
  border-bottom: 2px solid #2780d4;
}

table[data-ke-style="style11"] {
  border-left: 0 none;
  border-right: 0 none;
}

table[data-ke-style="style11"] td {
  border-right-color: transparent;
  border-left-color: transparent;
}

table[data-ke-style="style12"] tr:nth-child(odd) td {
  background-color: #f0f0f0;
}

table[data-ke-style="style12"] tr td:first-child {
  background-color: #dcdddd;
}

table[data-ke-style="style12"] tr:first-child td {
  background-color: #9b9b9b;
  border: 1px solid #9b9b9b;
  color: #fff;
}

table[data-ke-style="style13"] tr:nth-child(odd) td {
  background-color: #f0f0f0;
}

table[data-ke-style="style13"] tr td:first-child {
  background-color: #dcdddd;
}

table[data-ke-style="style13"] tr:first-child td {
  background-color: #6ed3d8;
  border: 1px solid #6ed3d8;
  color: #fff;
}

table[data-ke-style="style14"] tr:nth-child(odd) td {
  background-color: #f0f0f0;
}

table[data-ke-style="style14"] tr td:first-child {
  background-color: #dcdddd;
}

table[data-ke-style="style14"] tr:first-child td {
  background-color: #008300;
  border: 1px solid #008300;
  color: #fff;
}

table[data-ke-style="style15"] tr:nth-child(odd) td {
  background-color: #f0f0f0;
}

table[data-ke-style="style15"] tr td:first-child {
  background-color: #dcdddd;
}

table[data-ke-style="style15"] tr:first-child td {
  background-color: #2780d4;
  border: 1px solid #2780d4;
  color: #fff;
}

table[data-ke-style="style16"] {
  border-color: transparent;
}

.article_view table[data-ke-style="style16"] {
  border-color: transparent;
  border-bottom: transparent;
}
.article_view table[data-ke-style="style16"] tr {
  border-bottom: transparent;
}
.article_view table[data-ke-style="style16"] tr td {
  border-left: transparent;
}

/* 오픈 그래프 */
figure[data-ke-type="opengraph"],
#tt-body-page figure[data-ke-type="opengraph"] {
  margin-top: 30px;
  margin-bottom: 30px;
}

figure[data-ke-type="opengraph"] a,
#tt-body-page figure[data-ke-type="opengraph"] a {
  position: relative;
  box-sizing: border-box;
  display: block;
  height: 200px;
  border: 1px solid #d9d9d9;
  text-decoration: none;
  color: #000;
  z-index: 1;
}

figure[data-ke-type="opengraph"] a:hover,
#tt-body-page figure[data-ke-type="opengraph"] a:hover {
  opacity: 1;
}

figure[data-ke-type="opengraph"] div {
  position: relative;
}

figure[data-ke-type="opengraph"] a::before,
#tt-body-page figure[data-ke-type="opengraph"] a::before,
#tt-body-page .blogview_content figure[data-ke-type="opengraph"] a::before {
  background: none;
}

figure[data-ke-type="opengraph"] div.og-image {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 200px;
  border-right: 1px solid #d9d9d9;
  background-size: cover;
  background-position: center;
}

figure[data-ke-type="opengraph"] div.og-text {
  position: absolute;
  left: 201px;
  right: 0;
  top: 0;
  bottom: 0;
  box-sizing: border-box;
  padding: 33px 46px 0 39px;
}

figure[data-ke-type="opengraph"] div.og-text p.og-title,
#tt-body-page figure[data-ke-type="opengraph"] div.og-text p.og-title {
  color: #000000;
  font-size: 22px;
  line-height: 28px;
  max-width: 467px;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0 0 10px 0 !important;
  overflow: hidden;
  font-family: "Noto Sans DemiLight", "Noto Sans KR", sans-serif;
}

figure[data-ke-type="opengraph"] div.og-text p.og-desc,
#tt-body-page figure[data-ke-type="opengraph"] div.og-text p.og-desc {
  margin: 0px;
  text-overflow: ellipsis;
  overflow: hidden;
  font-family: "Noto Sans DemiLight", "Noto Sans KR", sans-serif;
  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;
}

figure[data-ke-type="opengraph"] div.og-text p.og-host,
#tt-body-page figure[data-ke-type="opengraph"] div.og-text p.og-host {
  position: absolute;
  bottom: 24px;
  font-family: AvenirNext, sans-serif;
  font-size: 14px;
  color: #909090;
  margin: 0;
}

@media (max-width: 600px) {
  figure[data-ke-type="opengraph"] a,
  #tt-body-page figure[data-ke-type="opengraph"] a {
    height: 90px;
  }
  figure[data-ke-type="opengraph"] a::before,
  #tt-body-page figure[data-ke-type="opengraph"] a::before {
    left: 44px;
  }

  figure[data-ke-type="opengraph"] div.og-image {
    width: 88px;
  }

  figure[data-ke-type="opengraph"] div.og-text,
  #tt-body-page figure[data-ke-type="opengraph"] div.og-text {
    left: 89px;
    padding: 13px 12px 0 20px;
  }

  figure[data-ke-type="opengraph"] div.og-text p.og-title,
  #tt-body-page figure[data-ke-type="opengraph"] div.og-text p.og-title {
    font-size: 16px;
    -webkit-line-clamp: 1;
  }

  figure[data-ke-type="opengraph"] div.og-text p.og-desc,
  #tt-body-page figure[data-ke-type="opengraph"] div.og-text p.og-desc {
    display: none;
  }

  figure[data-ke-type="opengraph"] div.og-text p.og-host,
  #tt-body-page figure[data-ke-type="opengraph"] div.og-text p.og-host {
    bottom: 10px;
  }
}

/* 비디오 */
figure[data-ke-type="video"] {
  display: block;
  justify-content: center;
  align-items: center;
  position: relative;
  text-align: center;
  color: #bdbdbd;
  letter-spacing: -0.7px;
  font-size: 16px;
  line-height: 30px;
}
figure[data-ke-type="video"][data-ke-style="alignLeft"] {
  text-align: left;
}

figure[data-ke-type="video"][data-ke-style="alignCenter"] {
  margin: 0 auto 20px;
  text-align: center;
}

figure[data-ke-type="video"][data-ke-style="alignRight"] {
  text-align: right;
  margin-left: auto;
}

figure[data-ke-type="video"] img {
  display: block;
  max-width: 100%;
}

figure[data-ke-type="video"] figcaption {
  text-align: center;
  color: #666;
  font-size: 14px;
}

figure[data-ke-type="video"][data-video-host="vimeo"] span {
  display: none;
}

figure[data-ke-type="video"][data-video-host] iframe {
  margin: 0px;
}

figure[data-ke-type="video"] > iframe[width="0"][height="0"] {
  width: 860px;
  height: 484px;
  max-width: 100%;
}

/* 인용 */
blockquote,
blockquote p {
  font-size: 16px;
  line-height: 1.6;
  color: #666;
  letter-spacing: 0px;
}

#tt-body-page blockquote {
  margin: 20px auto 0;
}

blockquote[data-ke-style="box"],
#tt-body-page blockquote[data-ke-style="box"],
blockquote[data-ke-style="style3"],
#tt-body-page blockquote[data-ke-style="style3"] {
  border: 1px solid #dddddd;
  background: #fcfcfc;
  text-align: left;
  padding: 21px 25px 20px 25px;
  color: #666;
  line-height: 1.75;
}

/* 코드 블럭 */
pre {
  overflow: auto;
}

/* moreless */
div[data-ke-type="moreLess"] .moreless-content,
#tt-body-page div[data-ke-type="moreLess"] .moreless-content {
  display: none;
}

div[data-ke-type="moreLess"].open .moreless-content,
#tt-body-page div[data-ke-type="moreLess"].open .moreless-content {
  display: block;
}

div[data-ke-type="moreLess"] .btn-toggle-moreless,
#tt-body-page div[data-ke-type="moreLess"] .btn-toggle-moreless {
  color: #909090;
  font-size: 16px;
  line-height: 26px;
  font-family: "Noto Sans DemiLight", sans-serif;
  cursor: pointer;
  text-decoration: none;
}

/* 지도 */
figure[data-ke-type="map"],
iframe[data-ke-type="map"] {
  display: block;
  margin: 0 auto;
}

/* 리스트 */
ul[data-ke-list-type="disc"],
ul[data-ke-list-type="disc"] li,
#tt-body-page ul[data-ke-list-type="disc"],
#tt-body-page ul[data-ke-list-type="disc"] li {
  list-style-type: disc;
}
ul[data-ke-list-type="square"],
ul[data-ke-list-type="square"] li,
#tt-body-page ul[data-ke-list-type="square"],
#tt-body-page ul[data-ke-list-type="square"] li {
  list-style-type: square;
}

.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;
}

figure[data-ke-type="emoticon"][data-ke-align="alignCenter"] {
  text-align: center;
}

figure[data-ke-type="emoticon"][data-ke-align="alignLeft"] {
  text-align: left;
}

figure[data-ke-type="emoticon"][data-ke-align="alignRight"] {
  text-align: right;
}

.box-timeline-content {
  word-break: break-all;
}

@charset "UTF-8";
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
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;
}

/* custom */
article,
aside,
canvas,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
  display: block;
}

body {
  font-family: "Noto Sans", "Noto Sans KR", "Montserrat", 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 {
  overflow: hidden;
  position: relative;
  margin: 0 auto;
}

body {
  background-size: cover;
}

/* 스킨옵션 */
.body-backgourd-use:before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  background: #000;
}

.body-backgourd-use.backgrounddimmed0:before {
  opacity: 0;
}

.body-backgourd-use.backgrounddimmed10:before {
  opacity: 0.1;
}

.body-backgourd-use.backgrounddimmed20:before {
  opacity: 0.2;
}

.body-backgourd-use.backgrounddimmed30:before {
  opacity: 0.3;
}

.body-backgourd-use.backgrounddimmed40:before {
  opacity: 0.4;
}

.body-backgourd-use.backgrounddimmed50:before {
  opacity: 0.5;
}

.body-backgourd-use.backgrounddimmed60:before {
  opacity: 0.6;
}

.body-backgourd-use.backgrounddimmed70:before {
  opacity: 0.7;
}

.body-backgourd-use.backgrounddimmed80:before {
  opacity: 0.8;
}

.body-backgourd-use.backgrounddimmed90:before {
  opacity: 0.9;
}

/* // 스킨옵션 */
/* wrap-left, righ custom */
.wrap-left.outline-use .main,
.wrap-right.outline-use .main {
  width: 1240px;
  padding: 59px 59px 60px 59px;
}

.wrap-left.outline-use .headerimagecropcenter,
.wrap-right.outline-use .headerimagecropcenter {
  width: 1220px;
}
.wrap-left.outline-use .headerimagecropcenter .inner-header,
.wrap-right.outline-use .headerimagecropcenter .inner-header {
  max-width: 100%;
}

.wrap-left.outline-use .inner-header,
.wrap-right.outline-use .inner-header {
  width: 1120px;
}

.wrap-left.outline-use .article-type-newspaper,
.wrap-right.outline-use .article-type-newspaper {
  max-width: 256px;
}

.wrap-left.outline-use .article-type-cardstack,
.wrap-right.outline-use .article-type-cardstack {
  max-width: 316px;
}

.wrap-left.outline-use .article-type-timeline .box-timeline-date:after,
.wrap-right.outline-use .article-type-timeline .box-timeline-date:after {
  width: 7px;
  height: 7px;
  right: -4px;
}

.wrap-left.outline-use #footer,
.wrap-right.outline-use #footer {
  border-top: none;
}

.wrap-left .inner-header,
.wrap-right .inner-header {
  width: 1120px;
}

.wrap-left .main,
.wrap-right .main {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 1120px;
}

.wrap-left #footer,
.wrap-right #footer {
  width: 1120px;
}

.wrap-left .area-main,
.wrap-right .area-main {
  width: 832px;
}

.wrap-left .area-aside,
.wrap-right .area-aside {
  width: 230px;
}
.wrap-left .area-aside .box-profile,
.wrap-right .area-aside .box-profile {
  margin-bottom: 36px;
}
.wrap-left .area-aside .box-category,
.wrap-right .area-aside .box-category {
  border-bottom: 1px solid rgba(51, 51, 51, 0.1);
}
.wrap-left .area-aside .box-category .toggle-button,
.wrap-right .area-aside .box-category .toggle-button {
  top: 11px;
  right: 0;
}
.wrap-left .area-aside .tt_category .category_list li,
.wrap-right .area-aside .tt_category .category_list li {
  display: block;
}
.wrap-left .area-aside .box-category,
.wrap-right .area-aside .box-category {
  margin-bottom: 36px;
  padding-bottom: 36px;
}
.wrap-left .area-aside .box-recent,
.wrap-right .area-aside .box-recent {
  margin-bottom: 28px;
}
.wrap-left .area-aside .box-recent .list-recent .thumbnail,
.wrap-right .area-aside .box-recent .list-recent .thumbnail {
  width: 64px;
  height: 64px;
}
.wrap-left .area-aside .box-recent .toggle-button,
.wrap-left .area-aside .box-notice .toggle-button,
.wrap-right .area-aside .box-recent .toggle-button,
.wrap-right .area-aside .box-notice .toggle-button {
  display: none;
}
.wrap-left .area-aside .box-notice,
.wrap-right .area-aside .box-notice {
  margin-bottom: 22px;
}
.wrap-left .area-aside .box-tag,
.wrap-right .area-aside .box-tag {
  margin-bottom: 26px;
}
.wrap-left .area-aside .box-calendar,
.wrap-right .area-aside .box-calendar {
  margin-bottom: 28px;
  padding: 23px 19px;
}
.wrap-left .area-aside .box-search,
.wrap-right .area-aside .box-search {
  margin: 0 0 28px 0;
}
/*
    .wrap-left .area-aside .box-search .inp-search,
    .wrap-right .area-aside .box-search .inp-search {
      background-position: 199px center; }
*/
.wrap-left .area-aside .box-search,
.wrap-left .area-aside .box-calendar,
.wrap-right .area-aside .box-search,
.wrap-right .area-aside .box-calendar {
  border: 1px solid rgba(51, 51, 51, 0.1);
}
.wrap-left .area-aside .box-visit,
.wrap-right .area-aside .box-visit {
  margin-bottom: 28px;
}

.wrap-left .area-view,
.wrap-right .area-view {
  width: 832px;
}

.wrap-left .article-type-cardstack,
.wrap-right .article-type-cardstack {
  max-width: 400px;
}

.wrap-left .article-type-timeline .box-timeline-content,
.wrap-right .article-type-timeline .box-timeline-content {
  max-width: 640px;
}

.wrap-left .article-type-timeline .box-timeline .title,
.wrap-right .article-type-timeline .box-timeline .title {
  max-width: 580px;
}

.wrap-left .article-type-timeline .link-thumbnail,
.wrap-right .article-type-timeline .link-thumbnail {
  height: auto;
}

.wrap-left .article-type-timeline .thumbnail,
.wrap-right .article-type-timeline .thumbnail {
  height: 382px;
}

.wrap-left .article-type-magazine,
.wrap-right .article-type-magazine {
  max-width: 400px;
}

.wrap-left .article-type-newspaper,
.wrap-left .article-type-poster,
.wrap-left .article-type-tilegallery,
.wrap-right .article-type-newspaper,
.wrap-right .article-type-poster,
.wrap-right .article-type-tilegallery {
  width: 33.3%;
  max-width: 256px;
}
.wrap-left .article-type-newspaper:nth-of-type(3n),
.wrap-left .article-type-poster:nth-of-type(3n),
.wrap-left .article-type-tilegallery:nth-of-type(3n),
.wrap-right .article-type-newspaper:nth-of-type(3n),
.wrap-right .article-type-poster:nth-of-type(3n),
.wrap-right .article-type-tilegallery:nth-of-type(3n) {
  margin-right: -4px !important;
}
.wrap-left .article-type-newspaper:nth-of-type(4n),
.wrap-left .article-type-poster:nth-of-type(4n),
.wrap-left .article-type-tilegallery:nth-of-type(4n),
.wrap-right .article-type-newspaper:nth-of-type(4n),
.wrap-right .article-type-poster:nth-of-type(4n),
.wrap-right .article-type-tilegallery:nth-of-type(4n) {
  margin-right: 28px;
}

.wrap-left .article-type-poster .link-thumbnail,
.wrap-right .article-type-poster .link-thumbnail {
  height: 345px;
}

.wrap-left .article-type-poster .thumbnail,
.wrap-right .article-type-poster .thumbnail {
  height: 345px;
}

.wrap-left .article-type-memodiary,
.wrap-right .article-type-memodiary {
  width: 33.3%;
  max-width: 256px;
}

.wrap-left .article-type-tilegallery,
.wrap-right .article-type-tilegallery {
  max-width: 256px;
  height: 256px;
}
.wrap-left .article-type-tilegallery:hover:before,
.wrap-right .article-type-tilegallery:hover:before {
  height: 256px;
}
.wrap-left .article-type-tilegallery .thumbnail,
.wrap-right .article-type-tilegallery .thumbnail {
  width: 256px;
  height: 256px;
}

.wrap-left .area-aside-top,
.wrap-right .area-aside-top {
  display: none;
}

.wrap-left .article-header,
.wrap-right .article-header {
  border-bottom: none;
}

.wrap-left .box-profile,
.wrap-right .box-profile {
  padding: 28px;
}
.wrap-left .box-profile .img-profile,
.wrap-right .box-profile .img-profile {
  background-position: center;
  background-size: cover;
  width: 172px;
  height: 172px;
}

.wrap-left .area-reply .item-reply,
.wrap-right .area-reply .item-reply {
  width: auto;
}

.backgroundtextcolorwhite .box-category {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.wrap-left .main {
  flex-direction: row-reverse;
}

.wrap-left .area-aside {
  margin: 0 58px 0 0;
}

.wrap-left .area-paging-timeline,
.wrap-right .area-paging-timeline {
  padding-bottom: 60px;
}

/* wrap-right */
.wrap-right .area-aside {
  margin: 0 0 0 58px;
}

/* wrap-drawer custom */
.wrap-drawer.outline-use .main,
.wrap-drawerbottom.outline-use .main {
  width: 1184px;
  padding: 59px 59px 60px 59px;
}

.wrap-drawer.outline-use .inner-header,
.wrap-drawerbottom.outline-use .inner-header {
  width: 1064px;
}

.wrap-drawer.outline-use .article-type-newspaper,
.wrap-drawer.outline-use .article-type-poster,
.wrap-drawer.outline-use .article-type-memodiary,
.wrap-drawer.outline-use .article-type-tilegallery,
.wrap-drawerbottom.outline-use .article-type-newspaper,
.wrap-drawerbottom.outline-use .article-type-poster,
.wrap-drawerbottom.outline-use .article-type-memodiary,
.wrap-drawerbottom.outline-use .article-type-tilegallery {
  max-width: 241px;
}

.wrap-drawer.outline-use .article-type-cardstack,
.wrap-drawerbottom.outline-use .article-type-cardstack {
  max-width: 433px;
}

.wrap-drawer.outline-use .article-type-magazine,
.wrap-drawerbottom.outline-use .article-type-magazine {
  max-width: 516px;
}

.wrap-drawer.outline-use .article-type-tilegallery,
.wrap-drawerbottom.outline-use .article-type-tilegallery {
  height: 241px;
}
.wrap-drawer.outline-use .article-type-tilegallery:hover:before,
.wrap-drawerbottom.outline-use .article-type-tilegallery:hover:before {
  height: 241px;
}
.wrap-drawer.outline-use .article-type-tilegallery .thumbnail,
.wrap-drawerbottom.outline-use .article-type-tilegallery .thumbnail {
  width: 241px;
  height: 241px;
}

.wrap-drawer.outline-use .article-type-timeline .box-timeline-date:after,
.wrap-drawerbottom.outline-use .article-type-timeline .box-timeline-date:after {
  width: 7px;
  height: 7px;
  right: -6px;
}

.wrap-drawer.outline-use #footer,
.wrap-drawerbottom.outline-use #footer {
  border-top: none;
}

.wrap-drawer .inner-header,
.wrap-drawer .main,
.wrap-drawerbottom .inner-header,
.wrap-drawerbottom .main {
  width: 1064px;
}

.wrap-drawer #footer,
.wrap-drawerbottom #footer {
  width: 1064px;
}

.wrap-drawer .area-main,
.wrap-drawerbottom .area-main {
  margin: 0 auto;
}

.wrap-drawer .area-paging,
.wrap-drawerbottom .area-paging {
  padding-bottom: 60px;
}

.wrap-drawer .area-aside,
.wrap-drawerbottom .area-aside {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto;
}
.wrap-drawer .area-aside-bottom,
.wrap-drawerbottom .area-aside-bottom {
  padding-top: 40px;
  border-top: 2px solid #333;
}
.wrap-drawer .area-aside > div,
.wrap-drawerbottom .area-aside > div {
  width: 25%;
  max-width: 242px;
  margin-right: 32px;
}
.wrap-drawer .area-aside > div:nth-child(4),
.wrap-drawerbottom .area-aside > div:nth-child(4) {
  margin-right: 0;
}
.wrap-drawer .area-aside > div > div,
.wrap-drawerbottom .area-aside > div > div {
  margin-bottom: 24px;
  padding: 28px;
}
.wrap-drawer .area-aside > div > div.close,
.wrap-drawerbottom .area-aside > div > div.close {
  padding: 16px 28px;
}
.wrap-drawer .area-aside > div > div.close .toggle-button,
.wrap-drawerbottom .area-aside > div > div.close .toggle-button {
  top: 27px;
}
.wrap-drawer .area-aside .tt_category .category_list li,
.wrap-drawerbottom .area-aside .tt_category .category_list li {
  display: block;
}
.wrap-drawer .area-aside .box-calendar,
.wrap-drawer .area-aside .box-category,
.wrap-drawer .area-aside .box-recent,
.wrap-drawer .area-aside .box-notice,
.wrap-drawer .area-aside .box-tag,
.wrap-drawer .area-aside .box-search,
.wrap-drawer .area-aside .box-visit,
.wrap-drawerbottom .area-aside .box-calendar,
.wrap-drawerbottom .area-aside .box-category,
.wrap-drawerbottom .area-aside .box-recent,
.wrap-drawerbottom .area-aside .box-notice,
.wrap-drawerbottom .area-aside .box-tag,
.wrap-drawerbottom .area-aside .box-search,
.wrap-drawerbottom .area-aside .box-visit {
  border: 1px solid rgba(51, 51, 51, 0.1);
}

.wrap-drawer .box-category,
.wrap-drawer .box-recent,
.wrap-drawer .box-notice,
.wrap-drawerbottom .box-category,
.wrap-drawerbottom .box-recent,
.wrap-drawerbottom .box-notice {
  padding: 16px 28px !important;
}

.wrap-drawer .area-aside .box-tag,
.wrap-drawerbottom .area-aside .box-tag {
  padding-top: 16px;
}

.wrap-drawer .area-aside .box-visit,
.wrap-drawerbottom .area-aside .box-visit {
  padding-top: 16px;
  padding-bottom: 23px;
}

.wrap-drawer .box-profile .img-profile,
.wrap-drawerbottom .box-profile .img-profile {
  width: 184px;
  height: 184px;
}

.wrap-drawer .box-recent .list-recent .thumbnail,
.wrap-drawerbottom .box-recent .list-recent .thumbnail {
  width: 48px;
  height: 48px;
}

.wrap-drawer .box-recent .list-recent .date,
.wrap-drawerbottom .box-recent .list-recent .date {
  display: none;
}
/*
.wrap-drawer .box-search .inp-search,
.wrap-drawerbottom .box-search .inp-search {
  max-width: 232px;
  background-position: 211px center;
}
*/
.wrap-drawer .article-related .item-related,
.wrap-drawerbottom .article-related .item-related {
  width: 25%;
}
.wrap-drawer .article-related .item-related:last-child,
.wrap-drawerbottom .article-related .item-related:last-child {
  display: block;
}

.wrap-drawer .inner-article-header,
.wrap-drawer .article-view,
.wrap-drawer .article-footer,
.wrap-drawerbottom .inner-article-header,
.wrap-drawerbottom .article-view,
.wrap-drawerbottom .article-footer {
  max-width: 832px;
  margin: 0 auto;
}

.wrap-drawer .article-header,
.wrap-drawerbottom .article-header {
  margin-top: 47px;
  margin-bottom: 56px;
  padding-bottom: 57px;
}
.wrap-drawer .article-header .title-article,
.wrap-drawerbottom .article-header .title-article {
  margin-bottom: 18px;
  text-align: center;
}
.wrap-drawer .article-header .box-info,
.wrap-drawerbottom .article-header .box-info {
  justify-content: center;
}

.wrap-drawer .article-tag,
.wrap-drawerbottom .article-tag {
  justify-content: center;
}

.wrap-drawer .area-aside-top {
  display: none;
}

.wrap-drawerbottom .article-book,
.wrap-drawer .article-book {
  max-width: none;
}

/*
.wrap-drawer,
  .wrap-drawerbottom {
    width: 1064px;
    overflow-x: auto;
	}
  .wrap-right,
  .wrap-left {
    width: 1120px;
	}

	.wrap-drawer.outline-use,
  .wrap-drawerbottom.outline-use {
    width: 1184px;
    overflow-x: auto; }
  .wrap-right.outline-use,
  .wrap-left.outline-use {
    width: 1240px;
    overflow-x: auto; }
*/

/* media query - mobile */
@media screen and (max-width: 1060px) {
  .wrap-drawer,
  .wrap-drawerbottom {
    width: 1064px;
    overflow-x: auto;
  }
}

@media screen and (max-width: 1120px) {
  .wrap-right,
  .wrap-left {
    width: 1120px;
    overflow-x: auto;
  }
}

@media screen and (max-width: 1184px) {
  .wrap-drawer.outline-use,
  .wrap-drawerbottom.outline-use {
    width: 1184px;
    overflow-x: auto;
  }
}

@media screen and (max-width: 1240px) {
  .wrap-right.outline-use,
  .wrap-left.outline-use {
    width: 1240px;
    overflow-x: auto;
  }
}

/* 뷰페이지 사진 밑 여백 티스토리 스타일 수정 */
figure.imageblock.alignCenter {
  margin: 0 auto 39px !important;
}

/* container */
#container {
  position: relative;
}

/* main */
.main {
  width: 100%;
  margin: 0 auto;
}
.main.outline-use,
.main.bordercolorwhite,
.main.bordercolorblack {
  /* box-sizing: initial; */
  box-sizing: border-box;
}
.main.outline-use {
  border: 1px solid transparent;
}
.main.bordercolorwhite {
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.main.bordercolorblack {
  border: 1px solid rgba(51, 51, 51, 0.1);
}

/* 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;
}

/* // article-type-basic */

/* area-view - 상세 페이지 */
.area-view:after {
  content: "";
  display: block;
  clear: both;
}

/* article-header */
.article-header {
  margin-bottom: 52px;
  border-bottom: 1px solid rgba(51, 51, 51, 0.1);
}
.article-header .title-article {
  display: block;
  width: 100%;
  margin: 7px 0 8px 0;
  font-size: 36px;
  font-weight: 400;
  line-height: normal;
}
.article-header .box-info {
  display: flex;
  font-size: 13px;
  color: rgba(51, 51, 51, 0.5);
  line-height: normal;
  text-align: center;
}
.article-header .box-info > p {
  position: relative;
  margin: 0 18px 0 0;
}
.article-header .box-info > p:after {
  content: "";
  position: absolute;
  top: 9px;
  right: -10px;
  width: 2px;
  height: 2px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

.article-header .box-info .visibility-label:before {
  content: "";
  position: absolute;
  top: 9px;
  left: -10px;
  width: 2px;
  height: 2px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2px;
}

.article-header .box-info .visibility-label:after,
.article-header .box-info .date:after,
.article-header .box-info .visibility-label:empty {
  display: none !important;
}

.article-header .box-info .reply {
  color: rgba(0, 0, 0, 0.9);
}

.article-header .box-info .reply span {
  color: rgba(51, 51, 51, 0.9);
}

/* article-tag - 상세페이지 태그  */
.article-tag {
  display: flex;
  margin-top: 27px;
}
.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 6px 22px;
  border: 1px solid rgba(51, 51, 51, 0.1);
  font-size: 13px;
  line-height: normal;
  color: rgba(51, 51, 51, 0.7);
  text-decoration: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.article-tag .box-tag a:before {
  content: "#";
  position: absolute;
  left: 12px;
  top: 6px;
  width: 5px;
  height: 5px;
}
.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;
}

/* // article-tag */
/* article-page - 상세페이지 이전다음글  */
.article-page {
  margin-bottom: 44px;
  padding: 37px 41px;
  border: 1px solid rgba(51, 51, 51, 0.1);
}
.article-page .title-footer {
  font-weight: 500;
  margin-bottom: 17px;
}
.article-page ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.article-page ul li {
  position: relative;
  margin-bottom: 5px;
  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: 0.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;
}

/* //article-page - 상세페이지 이전다음글  */
/* article-related - 상세페이지 관련글 */
.article-related {
  margin-bottom: 39px;
}
.article-related a {
  text-decoration: none;
}
.article-related .title-footer {
  margin-bottom: 14px;
}
.article-related .list-related {
  display: flex;
  list-style: none;
  margin: 0 -8px;
  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%;
  margin-bottom: 10px;
  padding-top: 50%;
  background-size: cover;
  background-position: 50% 50%;
}
.article-related .link-related {
  display: block;
  margin: 0 8px;
}
.article-related .link-related strong {
  display: block;
  max-height: 40px;
  margin: 0 0 2px 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;
}
.article-related .date {
  display: block;
  font-size: 12px;
  line-height: 1.83;
  color: #999;
}

/* // article-related */
/* article-reply - 상세페이지 댓글*/
.article-reply {
  width: 100%;
  margin-bottom: 60px;
}
.article-reply ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.article-reply a {
  text-decoration: none;
}
.article-reply .box-total {
  padding: 39px 40px 19px 40px;
  border: 1px solid rgba(51, 51, 51, 0.1);
  border-bottom: none;
  font-size: 14px;
  font-weight: 600;
}
.article-reply .box-total a {
  color: #333;
}
.article-reply .tt_more_preview_comments_wrap {
  width: calc(100% - 80px);
  height: 40px;
  margin: 0 40px;
  background-color: transparent;
  border: 1px solid rgba(51, 51, 51, 0.1);
  font-size: 13px;
  font-weight: 400;
  line-height: 42px;
  color: rgba(51, 51, 51, 0.7);
}
.article-reply.close .box-total {
  padding-bottom: 39px;
  border-bottom: 1px solid rgba(51, 51, 51, 0.1);
}
.article-reply.no-reply {
  margin: 0 0 18px 0;
  padding: 0;
  border: none !important;
}
.article-reply.no-reply .box-total {
  padding: 0 0 19px 0;
  border: none;
}
.article-reply.no-reply .area-reply {
  display: none;
}

/* area-reply - 상세페이지 댓글*/
.area-reply {
  margin-bottom: 40px;
  padding: 0 0 4px 0;
  border: 1px solid rgba(51, 51, 51, 0.1);
  border-top: none;
}
.area-reply .item-reply {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  width: auto;
  padding: 24px 22px 24px 40px;
  border-bottom: 1px solid #eaeaea;
}
.area-reply .item-reply:last-child {
  border-bottom: none;
}
.area-reply .item-reply:last-child .list-reply-comment {
  margin-bottom: -28px;
}
.area-reply .thumbnail {
  display: block;
  width: 48px;
  height: 48px;
  margin-top: 4px;
  margin-right: 11px;
  background-size: cover;
  background-position: 50% 50%;
  border-radius: 50px;
  border: solid 1px rgba(51, 51, 51, 0.1);
}
.area-reply .box-content {
  position: relative;
  width: calc(100% - 62px);
}
.area-reply .box-content .box-meta {
  margin-top: 9px;
  margin-bottom: 7px;
  font-size: 13px;
  line-height: 1.69;
}
.area-reply .box-content .box-meta strong,
.area-reply .box-content .box-meta strong a {
  font-weight: 400;
  color: #333;
}
.area-reply .box-content .box-meta .date {
  position: relative;
  display: block;
  color: rgba(51, 51, 51, 0.4);
}
.area-reply .box-content .box-meta .date a {
  position: relative;
  margin-left: 14px;
  color: rgba(51, 51, 51, 0.4);
}
.area-reply .box-content .box-meta .date a:before {
  content: "";
  position: absolute;
  top: 9px;
  left: -9px;
  width: 2px;
  height: 2px;
  background: rgba(51, 51, 51, 0.2);
  border-radius: 2px;
}
.area-reply .box-content .box-meta .date a:hover {
  text-decoration: underline;
}
.area-reply .box-content .text {
  width: 591px;
  margin: 0 0 18px 0;
  font-size: 15px;
  line-height: 26px;
  color: rgba(0, 0, 0, 0.7);
  word-break: break-all;
}
.area-reply .box-content .link-comment {
  display: block;
  width: 40px;
  height: 28px;
  margin-left: 1px;
  border: solid 1px rgba(0, 0, 0, 0.1);
  font-size: 13px;
  line-height: 26px;
  color: rgba(51, 51, 51, 0.7);
  text-align: center;
}
.area-reply .box-content .list-modify {
  position: absolute;
  display: flex;
}
.area-reply .box-content .list-modify li {
  position: relative;
  margin-right: 14px;
}
.area-reply .box-content .list-modify li:after {
  content: "";
  position: absolute;
  top: 3px;
  right: -8px;
  width: 1px;
  height: 10px;
  background: rgba(51, 51, 51, 0.1);
}
.area-reply .box-content .list-modify li:last-child:after {
  background: none;
}
.area-reply .box-content .list-modify a {
  display: block;
  font-size: 13px;
  color: rgba(51, 51, 51, 0.4);
}
.area-reply .box-content .list-modify a:hover {
  text-decoration: underline;
}
.area-reply .box-content > .list-modify {
  bottom: 5px;
  right: 0px;
}
.area-reply .list-reply-comment {
  width: 830px;
  margin: 30px -22px -24px -40px;
  padding: 24px 0 18px 100px;
  background-color: #fafafa;
}
.area-reply .list-reply-comment .item-reply {
  margin-bottom: 30px;
  padding: 0;
  border-bottom: none;
}
.area-reply .list-reply-comment .item-reply:last-child {
  margin-bottom: 0;
}
.area-reply .list-reply-comment .list-modify {
  bottom: 9px;
  right: 22px;
}
.area-reply .list-reply-comment .text {
  width: 531px;
  margin: 0 0 4px 0;
}
.area-reply .list-reply-comment .box-modify {
  top: -6px;
  right: 15px;
}
/*
		.area-reply .list-reply-other {
    margin-bottom: 20px;
	}
*/

/* // area-reply - 상세페이지 댓글*/
/* area-write - 상세페이지 댓글 입력 부분*/
.area-write .box-account {
  display: flex;
  justify-content: space-between;
  margin-bottom: 16px;
}
.area-write .box-account input {
  width: calc(50% - 8px);
  padding: 16px 20px 16px 20px;
  background: none;
  border: 1px solid #e8e8e8;
  font-size: 15px;
  color: #707070;
}
.area-write .box-account input:hover,
.area-write .box-account input:focus {
  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: 15px;
  color: #707070;
}
.area-write .box-homepage input:hover,
.area-write .box-homepage input:focus {
  border-color: #333;
}

.area-write .box-textarea {
  margin-bottom: 16px;
  box-sizing: border-box;
}
.area-write .box-textarea textarea {
  width: 100%;
  height: 160px;
  padding: 20px;
  background: transparent;
  border: 1px solid #e8e8e8;
  line-height: 26px;
  font-size: 15px;
  box-sizing: border-box;
  color: #707070;
}
.area-write .box-textarea textarea:hover,
.area-write .box-textarea textarea:focus {
  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: 18px;
  min-height: 18px;
  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: 16px;
  height: 16px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2px;
}
.area-write
  .box-write
  .xe-label
  > input[type="checkbox"]:checked
  + .xe-input-helper:after {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 6px;
  height: 10px;
  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: 1px 0 0 22px;
  font-size: 13px;
  color: rgba(51, 51, 51, 0.4);
}
.area-write .box-write .btn_register {
  width: 148px;
  height: 42px;
  background: #333;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
}

/* // area-write */

.article-view p {
  margin-bottom: 28px;
  font-size: 16px;
  line-height: 26px;
  color: rgba(51, 51, 51, 0.7);
}

.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 figure {
  margin: 0;
}

.article-view table {
  border: 1px solid #dadce0;
  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;
  border-left: 1px solid #dadce0;
}

.article-view table tr {
  border-bottom: 1px solid #dadce0;
}

.article-view pre {
  padding: 20px;
  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: 40px;
  }
}