body {
  background: #333333; color: #333333
}
header {
  position: relative; background: #333333; border: 0px; color: #ffffff
}
header box {
  display: block; padding-bottom: 80px; position: relative; z-index: 100
}
header box navicon {
  margin: auto
}
header box navicon span,
header box navicon span::before,
header box navicon span::after {
  background: #ffffff
}
header box navicon.on span {
  background: #333333
}
header div.title {
  padding: var(--page-gap) 0px; display: flex; align-items: flex-end
}
header div.title a {
  font-size: 2.8rem; color: #ffffff; line-height: 100%
}
header div.title a:hover {
  opacity: .8
}
header div.title span {
  display: inline-block; font-size: 1.4rem; color: #d4d4d4; padding-left: 10px; line-height: 100%
}
header div.mainmenu {
  display: block
}
header div.mainmenu ul {
  display: flex; flex-wrap: wrap
}
header div.mainmenu ul li {
  padding-right: 10px
}
header div.mainmenu ul li a {
  display: inline-block; padding: 4px 6px; color: #ffffff; transition: all .2s ease
}
header div.mainmenu ul li a:hover {
  background: #ffffff; color: #333333
}
header div.mainmenu ul li a.on {
  background: #000000
}
header div.mainmenu ul li a.on:hover {
  color: #ffffff
}
header div.search {
  position: absolute; top: 40px; right: 20px; z-index: 100
}
header div.search jtbc-tiny-search {
  width: 200px; --background-color: #d4d4d4
}
headerholder {
  display: none
}
container {
  display: block; width: 100%; background: #ededed; position: relative; z-index: 1100
}
container box main {
  margin-top: -80px
}
container box main div.aboutme {
  display: none; margin-top: -80px; box-sizing: border-box; padding: var(--page-gap); margin-bottom: var(--page-gap); background: #ffffff; border: #e2e2e2 1px solid
}
container box main div.aboutme div.profile {
  width: 100%; display: flex
}
container box main div.aboutme div.profile div.avatar {
  width: 25%; padding-right: 10px
}
container box main div.aboutme div.profile div.avatar[show='0'] {
  display: none
}
container box main div.aboutme div.profile div.avatar img {
  width: 100%; vertical-align: top
}
container box main div.aboutme div.profile div.info {
  flex: 1
}
container box main div.aboutme div.profile div.info p {
  padding-top: 10px; line-height: 160%; color: #666666
}
container box sidebar {
  margin-top: -40px
}
container box sidebar section {
  background: #ffffff; border: #e2e2e2 1px solid
}
container box sidebar div.tags {
  width: 100%; padding-top: 10px; display: flex; flex-wrap: wrap; justify-content: space-between
}
container box sidebar div.tags a {
  display: inline-block; line-height: 100%; padding: 4px; margin: 0px 4px 4px 0px; color: #333333; transition: all .2s ease
}
container box sidebar div.tags a:hover {
  background: #000000; color: #ffffff
}
container box sidebar div.profile {
  width: 100%; display: flex
}
container box sidebar div.profile div.avatar {
  width: 25%; padding-right: 10px
}
container box sidebar div.profile div.avatar[show='0'] {
  display: none
}
container box sidebar div.profile div.avatar img {
  width: 100%; vertical-align: top
}
container box sidebar div.profile div.info {
  flex: 1
}
container box sidebar div.profile div.info p {
  padding-top: 10px; line-height: 160%; color: #666666
}
footer {
  background: #333333
}
.aboutme_detail {
  width: 100%
}
.aboutme_detail div.box {
  width: 100%; box-sizing: border-box; margin-bottom: var(--page-gap); padding: var(--page-gap); background: #ffffff; border: #e2e2e2 1px solid
}
.aboutme_detail div.box h1 {
  font-weight: normal
}
.blog_list {
  width: 100%
}
.blog_list div.item {
  width: 100%; box-sizing: border-box; margin-bottom: var(--page-gap); padding: var(--page-gap); background: #ffffff; border: #e2e2e2 1px solid
}
.blog_list div.item h2 {
  display: flex; justify-content: space-between; flex-wrap: nowrap
}
.blog_list div.item h2 a {
  font-size: 2.4rem; line-height: 140%; font-weight: normal;
}
.blog_list div.item h2 span {
  font-size: 1.2rem; font-weight: normal; color: #999999
}
.blog_list div.item p {
  padding: 20px 0px; font-size: 1.4rem; line-height: 160%; color: #666666
}
.blog_list div.item div.bar {
  display: flex; justify-content: space-between; flex-wrap: nowrap
}
.blog_list div.item div.bar div.tags {
  font-size: 1.2rem
}
.blog_list div.item div.bar div.tags a {
  display: inline-block; line-height: 100%; background: #d4d4d4; padding: 4px; margin-right: 4px; color: #333333; transition: all .2s ease
}
.blog_list div.item div.bar div.tags a:hover {
  background: #333333; color: #d4d4d4
}
.blog_list div.item:last-child {
  margin-bottom: 0px
}
.blog_list div.pagination {
  padding-top: 0px
}
.blog_list_empty {
  width: 100%
}
.blog_list_empty div.item {
  width: 100%; box-sizing: border-box; margin-bottom: var(--page-gap); padding: var(--page-gap); background: #ffffff; border: #e2e2e2 1px solid
}
.blog_list_empty div.item p {
  padding: 20px 0px; text-align: center; font-size: 1.4rem; line-height: 160%; color: #666666
}
.blog_detail {
  width: 100%
}
.blog_detail div.box {
  width: 100%; box-sizing: border-box; margin-bottom: var(--page-gap); padding: var(--page-gap); background: #ffffff; border: #e2e2e2 1px solid
}
.blog_detail div.box h1 {
  font-weight: normal
}
.blog_detail div.box div.info {
  width: 100%; padding-top: var(--page-gap); color: #999999
}
.blog_detail div.box div.related {
  width: 100%; padding-top: var(--page-gap)
}
.blog_detail div.box div.related h3 {
  font-weight: normal
}
.blog_detail div.box div.related ul {
  list-style: disc; margin: 1rem 0rem; padding-left: 2rem
}
.blog_detail div.box div.related ul li {
  line-height: 160%; padding: 0.5rem 0rem
}
.blog_detail div.box div.related ul li a {
  font-weight: bold
}
.blog_detail div.box div.links {
  width: 100%; display: flex; justify-content: space-between; padding-bottom: var(--page-gap)
}
.blog_detail div.box div.links dl dt {
  font-size: 1.4rem; padding-bottom: 1rem
}
.blog_detail div.box div.links dl a {
  font-weight: bold
}
.blog_detail div.box div.links dl dd:empty::after {
  content: attr(empty); color: #999999
}
.blog_detail div.box div.links dl:last-child dt,
.blog_detail div.box div.links dl:last-child dd {
  text-align: right
}
.blog_detail div.box div.bar {
  display: flex; justify-content: space-between; flex-wrap: nowrap
}
.blog_detail div.box div.bar div.tags {
  font-size: 1.2rem
}
.blog_detail div.box div.bar div.tags a {
  display: inline-block; line-height: 100%; background: #d4d4d4; padding: 4px; margin-right: 4px; color: #333333; transition: all .2s ease
}
.blog_detail div.box div.bar div.tags a:hover {
  background: #333333; color: #d4d4d4
}
@media screen and (max-width: 960px) {
  header div.title {
    display: block; text-align: center
  }
  header div.title span {
    display: block; padding: 1rem 0px 0px 0px; text-align: center
  }
  header div.mainmenu {
    margin: var(--page-gap) 0px; max-height: 0px; overflow: hidden; transition: max-height .3s ease
  }
  header div.mainmenu ul {
    display: block
  }
  header div.mainmenu ul li {
    padding: 0px; text-align: center
  }
  header div.mainmenu ul li a {
    display: block; font-size: 1.4rem; text-align: center
  }
  header div.mainmenu.on {
    max-height: 320px
  }
  header div.search {
    display: none
  }
  container box {
    flex-direction: row
  }
  container box main {
    margin-top: 0px
  }
  container box main div.aboutme {
    display: block
  }
  container box sidebar {
    margin-top: 0px
  }
  container box sidebar section ul li {
    width: 100%; padding-right: 0px
  }
  container box sidebar section:first-child {
    display: none
  }
  .blog_list div.item h2 span {
    display: none
  }
}