@import url("//fonts.googleapis.com/css?family=Lato:400,400italic");
@font-face {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: normal;
  src: url("font/fontawesome-webfont.eot?#iefix") format('embedded-opentype'), url("font/fontawesome-webfont.woff") format('woff'), url("font/fontawesome-webfont.ttf") format('truetype'), url("font/fontawesome-webfont.svg#FontAwesomeRegular") format('svg');
}
* {
  margin: 0;
  padding: 0;
}
body {
  background: #dfeeea;
  color: #444;
  font-family: "Roboto", "Noto Sans TC", "Helvetica", Arial, sans-serif;
  font-size: 16px;
  text-shadow: 0 0 1px transparent;
  letter-spacing: 0.6px;
}
@media screen and (max-width: 1260px) {
  body {
    margin: 0 20px;
  }
}
@media screen and (max-width: 600px) {
  body {
    font-size: 16px;
  }
}
@media screen and (max-device-width: 480px) {
  body {
    -webkit-text-size-adjust: 100%;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Roboto", "Noto Sans TC", Helvetica, Arial, sans-serif;
}
h1 {
  font-size: 1.8em;
}
h2 {
  font-size: 1.5em;
}
h3 {
  font-size: 1.3em;
}
a {
  text-decoration: none;
  color: #22a779;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
a:hover {
  text-decoration: underline;
}
.alignleft {
  float: left;
}
.alignright {
  float: right;
}
.clearfix {
  zoom: 1;
}
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.inner {
  width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 1260px) {
  .inner {
    width: 100%;
  }
}
#main-col {
  width: 900px;
}
@media screen and (max-width: 1260px) {
  #main-col {
    width: 100%;
    margin-right: -300px;
  }
}
@media screen and (max-width: 900px) {
  #main-col {
    margin-right: 0;
    float: none;
  }
}
@media screen and (max-width: 1260px) {
  #wrapper {
    margin-right: 300px;
  }
}
@media screen and (max-width: 900px) {
  #wrapper {
    margin-right: 0;
  }
}
.table-wrap {
  width: 100%;
  overflow-x: auto;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
@media screen and (max-width: 960px) {
  .table-wrap::after {
    content: '';
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: box;
    display: flex;
    width: 1px;
    -webkit-box-shadow: 0 0 45px 10px rgba(0,0,0,0.1);
    box-shadow: 0 0 45px 10px rgba(0,0,0,0.1);
    position: sticky;
    right: 0;
    top: 0;
  }
}
.table-wrap table {
  min-width: 720px;
}
#header {
  text-shadow: 0 0 1px #fff;
  margin: 50px auto;
}
@media (max-width: 480px) {
  #header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-column-gap: 12px;
    -moz-column-gap: 12px;
    column-gap: 12px;
    row-gap: 8px;
    margin: 18px auto 14px auto;
  }
}
@media (max-width: 480px) {
  #header > .alignleft {
    float: none;
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }
}
@media (max-width: 480px) {
  #header > .clearfix {
    display: none;
  }
}
#header a {
  color: #22a779;
  font-weight: bold;
}
#header a:hover {
  color: #22a779;
  text-decoration: none;
}
#header .logo {
  max-width: 140px;
}
@media (max-width: 480px) {
  #header .logo {
    max-width: 118px;
  }
}
#header .logo a {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
#header .logo a img {
  width: 100%;
  height: auto;
}
#header h1 {
  font-weight: normal;
  font-size: 2.5em;
  line-height: 1;
}
#header h2 {
  font-weight: normal;
  font-size: 0.9em;
  line-height: 1;
  margin-top: 10px;
}
@media (max-width: 480px) {
  #header h2 {
    display: none;
  }
}
#header #main-nav {
  font-family: "Roboto", "Noto Sans TC", Helvetica, Arial, sans-serif;
  line-height: 2.5em;
}
@media (max-width: 480px) {
  #header #main-nav {
    float: none;
    grid-column: 1/-1;
    grid-row: 2;
    width: 100%;
    line-height: 1;
  }
}
#header #main-nav ul {
  list-style: none;
}
@media (max-width: 480px) {
  #header #main-nav ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    -webkit-box-align: center;
    -moz-box-align: center;
    -o-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    gap: 4px;
  }
}
#header #main-nav ul li {
  float: left;
  margin-left: 30px;
}
@media (max-width: 480px) {
  #header #main-nav ul li {
    float: none;
    margin: 0;
    min-width: 0;
    text-align: center;
  }
}
#header #main-nav ul li a {
  font-size: 18px;
  color: #3f3f3f;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media (max-width: 480px) {
  #header #main-nav ul li a {
    display: block;
    padding: 10px 4px;
    font-size: 16px;
    line-height: 20px;
  }
}
#header #main-nav ul li a:hover {
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}
#header .language-switcher {
  float: right;
  position: relative;
  z-index: 30;
  margin-left: 30px;
  white-space: nowrap;
  line-height: 1;
}
@media (max-width: 480px) {
  #header .language-switcher {
    float: none;
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    margin: 0;
  }
}
#header .language-switcher .language-switcher__menu {
  position: relative;
}
#header .language-switcher .language-switcher__menu[open] summary {
  color: #177c5d;
  border-color: rgba(34,167,121,0.55);
  background: rgba(255,255,255,0.96);
  -webkit-box-shadow: 0 8px 24px rgba(28,91,70,0.14);
  box-shadow: 0 8px 24px rgba(28,91,70,0.14);
}
#header .language-switcher .language-switcher__menu[open] .language-switcher__chevron {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
#header .language-switcher .language-switcher__menu[open] .language-switcher__panel {
  -webkit-animation: language-menu-in 160ms ease-out;
  -moz-animation: language-menu-in 160ms ease-out;
  -o-animation: language-menu-in 160ms ease-out;
  -ms-animation: language-menu-in 160ms ease-out;
  animation: language-menu-in 160ms ease-out;
}
#header .language-switcher summary {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  min-width: 112px;
  min-height: 40px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  gap: 8px;
  padding: 0 12px;
  color: #31564b;
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(34,167,121,0.25);
  border-radius: 999px;
  -webkit-box-shadow: 0 4px 14px rgba(44,105,85,0.08);
  box-shadow: 0 4px 14px rgba(44,105,85,0.08);
  cursor: pointer;
  list-style: none;
  -webkit-transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  -moz-transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  -o-transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  -ms-transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
#header .language-switcher summary::-webkit-details-marker {
  display: none;
}
#header .language-switcher summary:hover {
  color: #177c5d;
  border-color: rgba(34,167,121,0.5);
  background: rgba(255,255,255,0.92);
}
#header .language-switcher summary:focus-visible {
  outline: 3px solid rgba(34,167,121,0.25);
  outline-offset: 3px;
}
#header .language-switcher .language-switcher__globe {
  width: 18px;
  height: 18px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  color: #22a779;
}
#header .language-switcher .language-switcher__globe svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#header .language-switcher .language-switcher__current {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
#header .language-switcher .language-switcher__chevron {
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: -webkit-transform 160ms ease;
  -moz-transition: -moz-transform 160ms ease;
  -o-transition: -o-transform 160ms ease;
  -ms-transition: -ms-transform 160ms ease;
  transition: transform 160ms ease;
}
#header .language-switcher .language-switcher__panel {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: 226px;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  padding: 7px;
  background: rgba(255,255,255,0.98);
  border: 1px solid rgba(34,167,121,0.2);
  border-radius: 15px;
  -webkit-box-shadow: 0 18px 42px rgba(30,75,60,0.18), 0 3px 10px rgba(30,75,60,0.08);
  box-shadow: 0 18px 42px rgba(30,75,60,0.18), 0 3px 10px rgba(30,75,60,0.08);
  overflow: hidden;
}
#header .language-switcher .language-switcher__panel::before {
  content: '';
  position: absolute;
  top: 7px;
  bottom: 7px;
  left: 7px;
  width: 3px;
  border-radius: 99px;
  background: -webkit-linear-gradient(top, #22a779 0 50%, #89d6bb 50% 100%);
  background: -moz-linear-gradient(top, #22a779 0 50%, #89d6bb 50% 100%);
  background: -o-linear-gradient(top, #22a779 0 50%, #89d6bb 50% 100%);
  background: -ms-linear-gradient(top, #22a779 0 50%, #89d6bb 50% 100%);
  background: linear-gradient(to bottom, #22a779 0 50%, #89d6bb 50% 100%);
}
#header .language-switcher a.language-switcher__option {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  min-height: 44px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  gap: 10px;
  margin-left: 5px;
  padding: 0 10px 0 12px;
  color: #3f4d48;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  border-radius: 10px;
  -webkit-transition: color 140ms ease, background 140ms ease, -webkit-transform 140ms ease;
  -moz-transition: color 140ms ease, background 140ms ease, -moz-transform 140ms ease;
  -o-transition: color 140ms ease, background 140ms ease, -o-transform 140ms ease;
  -ms-transition: color 140ms ease, background 140ms ease, -ms-transform 140ms ease;
  transition: color 140ms ease, background 140ms ease, transform 140ms ease;
}
#header .language-switcher a.language-switcher__option > span:first-child {
  min-width: 0;
}
#header .language-switcher a.language-switcher__option:hover {
  color: #177c5d;
  background: #f1faf7;
  opacity: 1;
  -ms-filter: none;
  filter: none;
  text-decoration: none;
  -webkit-transform: translateX(2px);
  -moz-transform: translateX(2px);
  -o-transform: translateX(2px);
  -ms-transform: translateX(2px);
  transform: translateX(2px);
}
#header .language-switcher a.language-switcher__option:focus-visible {
  outline: 2px solid rgba(34,167,121,0.5);
  outline-offset: -2px;
}
#header .language-switcher a.language-switcher__option.is-active {
  color: #126b50;
  background: #eaf7f2;
  font-weight: 700;
}
#header .language-switcher a.language-switcher__option.is-active .language-switcher__code {
  color: #fff;
  background: #22a779;
}
#header .language-switcher .language-switcher__code {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
  min-width: 38px;
  padding: 4px 5px;
  color: #71817b;
  background: #f1f5f3;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.08em;
  text-align: center;
}
@media (max-width: 480px) {
  #header .language-switcher summary {
    min-width: 112px;
    min-height: 44px;
    padding: 0 12px;
  }
  #header .language-switcher .language-switcher__panel {
    width: calc(100vw - 40px);
    max-width: 226px;
    top: calc(100% + 48px);
  }
  #header .language-switcher a.language-switcher__option {
    min-height: 48px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #header .language-switcher .language-switcher__menu[open] .language-switcher__panel {
    -webkit-animation: none;
    -moz-animation: none;
    -o-animation: none;
    -ms-animation: none;
    animation: none;
  }
  #header .language-switcher .language-switcher__chevron,
  #header .language-switcher a.language-switcher__option,
  #header .language-switcher summary {
    -webkit-transition: none;
    -moz-transition: none;
    -o-transition: none;
    -ms-transition: none;
    transition: none;
  }
}
@-moz-keyframes language-menu-in {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-5px) scale(0.98);
    -moz-transform: translateY(-5px) scale(0.98);
    -o-transform: translateY(-5px) scale(0.98);
    -ms-transform: translateY(-5px) scale(0.98);
    transform: translateY(-5px) scale(0.98);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0) scale(1);
    -moz-transform: translateY(0) scale(1);
    -o-transform: translateY(0) scale(1);
    -ms-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}
@-webkit-keyframes language-menu-in {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-5px) scale(0.98);
    -moz-transform: translateY(-5px) scale(0.98);
    -o-transform: translateY(-5px) scale(0.98);
    -ms-transform: translateY(-5px) scale(0.98);
    transform: translateY(-5px) scale(0.98);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0) scale(1);
    -moz-transform: translateY(0) scale(1);
    -o-transform: translateY(0) scale(1);
    -ms-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}
@-o-keyframes language-menu-in {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-5px) scale(0.98);
    -moz-transform: translateY(-5px) scale(0.98);
    -o-transform: translateY(-5px) scale(0.98);
    -ms-transform: translateY(-5px) scale(0.98);
    transform: translateY(-5px) scale(0.98);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0) scale(1);
    -moz-transform: translateY(0) scale(1);
    -o-transform: translateY(0) scale(1);
    -ms-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}
@keyframes language-menu-in {
  from {
    opacity: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -webkit-transform: translateY(-5px) scale(0.98);
    -moz-transform: translateY(-5px) scale(0.98);
    -o-transform: translateY(-5px) scale(0.98);
    -ms-transform: translateY(-5px) scale(0.98);
    transform: translateY(-5px) scale(0.98);
  }
  to {
    opacity: 1;
    -ms-filter: none;
    filter: none;
    -webkit-transform: translateY(0) scale(1);
    -moz-transform: translateY(0) scale(1);
    -o-transform: translateY(0) scale(1);
    -ms-transform: translateY(0) scale(1);
    transform: translateY(0) scale(1);
  }
}
article {
  background: #fff;
  border-radius: 10px;
}
article.page {
  padding-left: 20px;
}
article.page .icon {
  display: none;
}
article.post .icon:before {
  content: '\f016';
}
article.photo .icon:beforeheaderlink {
  content: '\f030';
}
article.link .icon:before {
  content: '\f0c1';
}
article.link .title a:after {
  content: '\f08e';
  color: #878787;
  font: 12px FontAwesome;
  padding-left: 10px;
  vertical-align: super;
}
article .post-content {
  padding: 20px 20px 15px 20px;
  margin-bottom: 50px;
  position: relative;
}
@media screen and (max-width: 600px) {
  article .post-content {
    padding-left: 20px;
  }
}
article .post-content header>.title {
  font-size: 28px;
  font-weight: 500;
}
@media screen and (max-width: 480px) {
  article .post-content header>.title {
    font-size: 24px;
  }
}
article .post-content .link-button {
  margin-left: 10px;
}
article .post-content img {
  border-radius: 10px;
}
article .post-content .toc {
  background: #f4f4f4;
  border-radius: 10px;
  padding: 10px 14px;
  margin-top: 10px;
}
article .post-content .toc .toc-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 3px;
}
article .post-content .toc ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
article .post-content .toc ul li {
  position: relative;
  padding-left: 16px;
  line-height: 1.5;
  letter-spacing: 0.7px;
}
article .post-content .toc ul li:before {
  content: '';
  width: 5px;
  height: 5px;
  background: #3f3f3f;
  border-radius: 50%;
  position: absolute;
  left: 0;
  top: 11px;
}
article .gallery {
  overflow: hidden;
  position: relative;
}
article .gallery:hover .control {
  opacity: 1;
  -ms-filter: none;
  filter: none;
}
article .gallery img {
  min-width: 100%;
  max-width: 100%;
  height: auto;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}
article .gallery .control {
  opacity: 0;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -ms-transition: 0.3s;
  transition: 0.3s;
}
article .gallery .prev,
article .gallery .next {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  cursor: pointer;
}
article .gallery .prev:before,
article .gallery .next:before {
  position: absolute;
  font: 24px/1 FontAwesome;
  text-align: center;
  width: 24px;
  text-shadow: 0 0 15px rgba(0,0,0,0.5);
  color: #fff;
  margin-top: -12px;
  top: 50%;
}
article .gallery .prev {
  left: 0;
}
article .gallery .prev:before {
  content: '\f053';
  left: 10px;
}
article .gallery .next {
  right: 0;
}
article .gallery .next:before {
  content: '\f054';
  right: 10px;
}
article header .icon {
  width: 32px;
  height: 32px;
  margin-right: 25px;
  position: absolute;
  top: 20px;
  left: 20px;
  color: #22a779;
}
@media screen and (max-width: 600px) {
  article header .icon {
    display: none;
  }
}
article header .icon:before {
  position: absolute;
  font: 32px FontAwesome;
  top: 0;
  left: 0;
  width: 32px;
  text-align: center;
}
article header time {
  color: #22a779;
  font: 0.9em "Roboto", "Noto Sans TC", Helvetica, Arial, sans-serif;
  margin-bottom: 5px;
  display: block;
  line-height: 1;
}
article header time a {
  color: #22a779;
  font-size: 20px;
  font-weight: bold;
}
article header .title {
  font-weight: normal;
}
article header .title a {
  color: #444;
}
article header .title a:hover {
  color: #22a779;
  text-decoration: none;
}
article .entry {
  text-align: justify;
  line-height: 1.6;
}
article .entry p,
article .entry blockquote,
article .entry ul,
article .entry ol,
article .entry dl,
article .entry table,
article .entry iframe,
article .entry h3,
article .entry h4,
article .entry h5,
article .entry h6,
article .entry .video-container {
  margin-top: 15px;
  font-size: 18px;
  letter-spacing: 0.6px;
  line-height: 1.8;
  text-align: left;
}
article .entry .topImgWrap {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
}
article .entry h2 {
  font-size: 24px;
}
article .entry hr {
  border: 0;
  border-top: solid 1px #ddd;
}
article .entry .tableWrap {
  width: 100%;
  overflow: auto;
}
article .entry .mermaid-box {
  position: relative;
  margin: 28px 0;
  background: #fff !important;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  -webkit-box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  box-shadow: 0 4px 14px rgba(0,0,0,0.04);
  overflow: hidden;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  -o-transition: all 0.2s ease;
  -ms-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
article .entry .mermaid-box:hover {
  border-color: #38bdf8;
  -webkit-box-shadow: 0 6px 20px rgba(56,189,248,0.12);
  box-shadow: 0 6px 20px rgba(56,189,248,0.12);
}
article .entry .mermaid-box .mermaid-header {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -o-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 10px 14px;
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0;
  font-size: 13px;
  color: #64748b;
  font-weight: 500;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
article .entry .mermaid-box .mermaid-header .mermaid-title {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #334155;
}
article .entry .mermaid-box .mermaid-header .mermaid-tools {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  gap: 6px;
}
article .entry .mermaid-box .mermaid-header .mermaid-tools .zoom-level {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  min-width: 40px;
  text-align: right;
  margin-right: 2px;
}
article .entry .mermaid-box .mermaid-header .mermaid-tools .mermaid-btn {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-box;
  display: inline-flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -o-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  height: 26px;
  padding: 0 8px;
  background: #e2e8f0;
  color: #1e293b;
  border: 0;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  -webkit-transition: all 0.15s ease;
  -moz-transition: all 0.15s ease;
  -o-transition: all 0.15s ease;
  -ms-transition: all 0.15s ease;
  transition: all 0.15s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
article .entry .mermaid-box .mermaid-header .mermaid-tools .mermaid-btn:hover {
  background: #cbd5e1;
  color: #0f172a;
}
article .entry .mermaid-box .mermaid-header .mermaid-tools .mermaid-btn:active {
  background: #94a3b8;
}
article .entry .mermaid-viewport {
  width: 100%;
  background: #fff !important;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
  padding: 24px 12px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  -webkit-overflow-scrolling: touch;
}
article .entry pre.mermaid,
article .entry .mermaid {
  text-align: center;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  font-size: 15px;
  line-height: 1.4;
  white-space: normal;
  font-family: inherit;
}
article .entry pre.mermaid svg,
article .entry .mermaid svg {
  display: inline-block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
article .entry table {
  border-collapse: collapse;
  border-spacing: 0;
  empty-cells: show;
  border: 1px solid #e2e2e2;
  width: 100%;
}
article .entry table th {
  white-space: nowrap;
  color: #444;
  font-weight: 600;
}
article .entry table td,
article .entry table th {
  border: 1px solid #e2e2e2;
  padding: 8px 16px;
  text-align: left;
}
@media screen and (max-width: 600px) {
  article .entry table td,
  article .entry table th {
    padding: 8px;
  }
}
article .entry table td span.material-icons,
article .entry table th span.material-icons {
  vertical-align: top;
  cursor: pointer;
}
article .entry figure.highlight table {
  border: none;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  overflow-wrap: break-word;
}
article .entry blockquote {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  font-style: italic;
  font-family: "Georgia", serif;
  font-size: 1.2em;
  padding: 0 30px 15px;
  text-align: center;
}
article .entry blockquote footer {
  border-top: none;
  font-size: 0.8em;
  line-height: 1;
  margin: 20px 0 0;
  padding-top: 0;
}
article .entry blockquote footer cite:before {
  content: '—';
  color: #ccc;
  padding: 0 0.5em;
}
article .entry code,
article .entry pre {
  font-family: Monaco, Menlo, Consolas, Courier New, monospace;
}
article .entry code {
  background: rgba(0,0,0,0.06);
  color: #c7254e;
  padding: 2px 5px;
  margin: 0 2px;
  font-size: 0.9em;
  border-radius: 3px;
  word-break: break-word;
}
article .entry pre {
  background: #1f1f1f;
  border: 1px solid #ddd;
  margin-top: 15px;
  overflow: auto;
  padding: 7px 15px;
  border-radius: 2px;
}
article .entry pre code {
  background: none;
  color: inherit;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
}
article .entry ul,
article .entry ol,
article .entry dl {
  margin-left: 20px;
}
article .entry ul ul,
article .entry ol ul,
article .entry dl ul,
article .entry ul ol,
article .entry ol ol,
article .entry dl ol,
article .entry ul dl,
article .entry ol dl,
article .entry dl dl {
  margin-top: 0;
}
article .entry h1,
article .entry h2 {
  font-weight: 500;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-top: 20px;
  text-align: left;
}
article .entry h3,
article .entry h4,
article .entry h5,
article .entry h6 {
  font-weight: normal;
}
article .entry h3 {
  font-weight: bold;
  padding-top: 6px;
}
article .entry img,
article .entry video {
  max-width: 100%;
  height: auto;
  border: none;
  display: block;
  margin: 15px auto;
}
article .entry .img-group {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-lines: multiple;
  -moz-box-lines: multiple;
  -o-box-lines: multiple;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
  -webkit-box-align: start;
  -moz-box-align: start;
  -o-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
}
article .entry .img-group img {
  width: auto;
}
article .entry .img-group a {
  width: auto;
}
@media screen and (max-width: 600px) {
  article .entry .img-group {
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -o-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  article .entry .img-group img {
    width: 100% !important;
  }
  article .entry .img-group a {
    width: 100%;
  }
}
article .entry a {
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-box;
  display: inline-flex;
  width: 100%;
}
article .entry .post-cover-frame {
  aspect-ratio: 16/9;
  overflow: hidden;
  border-radius: 10px;
}
article .entry .post-cover-frame > .topImgWrap {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  width: 100%;
  height: 100%;
}
article .entry .post-cover-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
article .entry iframe {
  border: none;
}
article .entry .caption {
  display: block;
  margin-top: 5px;
  color: #878787;
  position: relative;
  font-size: 0.9em;
  padding-left: 25px;
}
article .entry .caption:before {
  content: '\f040';
  position: absolute;
  font: 1.3em FontAwesome;
  position: absolute;
  left: 0;
  top: 3px;
}
article .entry .video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
article .entry .video-container iframe,
article .entry .video-container object,
article .entry .video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin-top: 0;
}
article .entry .pullquote {
  float: right;
  border: none;
  padding: 0;
  margin: 1em 0 0.5em 1.5em;
  text-align: left;
  width: 45%;
  font-size: 1.5em;
}
article footer {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid #ddd;
  color: #878787;
  font-size: 0.9em;
  line-height: 16px;
  position: relative;
  min-height: 16px;
}
article footer a {
  color: #878787;
}
article footer a:hover {
  color: #22a779;
  text-decoration: none;
}
article footer a:before {
  font: 1.1em FontAwesome;
  padding-right: 10px;
  vertical-align: middle;
}
article footer a.more-link {
  font-size: 16px;
  padding-top: 10px;
  display: inline-block;
}
article footer a.more-link:before {
  content: '\f054';
}
article footer a.comment-link:before {
  content: '\f075';
}
article footer .categories,
article footer .tags {
  position: relative;
  padding-left: 25px;
  margin: 5px 0;
}
article footer .categories:before,
article footer .tags:before {
  position: absolute;
  font: 1.1em FontAwesome;
}
article footer .categories:before {
  content: '\f07b';
  top: 2px;
  left: 1px;
}
article footer .tags:before {
  content: '\f02b';
  top: 3px;
  left: 2px;
}
article footer .addthis {
  margin-top: 15px;
}
article footer .addthis iframe {
  margin-top: 0;
}
#comment {
  padding: 20px;
  background: #fff;
  border-radius: 10px;
  margin-bottom: 50px;
}
#comment .fb-comments {
  width: 100% !important;
}
#comment .title {
  font-weight: normal;
  margin-bottom: 15px;
}
#comment iframe {
  width: 100% !important;
}
#pagination a {
  display: block;
  padding: 8px 14px;
  border-radius: 5px;
  background: #22a779;
  color: #fff;
  font-family: "Roboto", "Noto Sans TC", Helvetica, Arial, sans-serif;
  font-weight: 500;
  text-shadow: 0 0 1px #fff;
  margin-bottom: 50px;
}
#pagination a:hover {
  background: #3f3f3f;
  color: #22a779;
  text-decoration: none;
  text-shadow: none;
}
#pagination .prev:before {
  content: '\f053';
  padding-right: 10px;
  font-family: FontAwesome;
}
#pagination .next:after {
  content: '\f054';
  padding-left: 10px;
  font-family: FontAwesome;
}
.archive-title {
  color: #878787;
  font-weight: normal;
  margin-bottom: 30px;
  text-shadow: 0 0 1px #fff;
  color: #3f3f3f;
}
.archive-title.tag:before {
  content: '';
}
.archive-title.category:before {
  content: '';
}
.archive {
  border-bottom: 1px solid #ddd;
  margin-bottom: 50px;
}
.archive article {
  -webkit-box-shadow: none;
  box-shadow: none;
}
.archive article .post-content {
  margin-bottom: 20px;
}
.archive article .post-content .title a {
  font-size: 24px;
}
#sidebar {
  width: 270px;
  line-height: 1.8em;
  position: sticky;
  top: 20px;
}
@media screen and (max-width: 900px) {
  #sidebar {
    position: static;
    float: none;
    width: 100%;
  }
}
#sidebar .widget {
  background: #fff;
  margin-bottom: 30px;
  border-radius: 10px;
  word-wrap: break-word;
}
#sidebar .widget .title {
  padding: 15px 20px;
  font-size: 1em;
  border-bottom: 1px solid #ddd;
  font-weight: normal;
}
#sidebar .widget .entry {
  font-size: 1.2em;
  padding: 15px 20px;
}
#sidebar .widget .entry li a {
  color: #22a779;
}
#sidebar .widget ul,
#sidebar .widget ol,
#sidebar .widget dl {
  list-style: none;
}
#sidebar .widget ul ul,
#sidebar .widget ol ul,
#sidebar .widget dl ul,
#sidebar .widget ul ol,
#sidebar .widget ol ol,
#sidebar .widget dl ol,
#sidebar .widget ul dl,
#sidebar .widget ol dl,
#sidebar .widget dl dl {
  list-style: disc;
  margin-left: 20px;
}
#sidebar .search {
  margin-bottom: 30px;
}
#sidebar .search input {
  height: 52px;
  outline: 0;
  background: #fff;
  font-family: "Roboto", "Noto Sans TC", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-size: 1em;
  padding: 10px 15px;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  color: #878787;
  border-radius: 10px;
  border: 0;
}
#sidebar .search input:focus {
  color: #444;
}
#sidebar .tag small {
  margin-left: 15px;
  color: #878787;
}
#sidebar .tag small:before {
  content: '(';
}
#sidebar .tag small:after {
  content: ')';
}
#sidebar .twitter li {
  border-bottom: 1px solid #ddd;
  padding: 15px 20px;
  font-size: 0.9em;
}
#sidebar .twitter li:last-of-type {
  border-bottom: none;
}
#sidebar .twitter small {
  display: block;
  margin-top: 10px;
  color: #878787;
  line-height: 1;
}
#sidebar .tagcloud .entry {
  padding-right: 5px;
}
#sidebar .tagcloud a {
  margin-right: 10px;
  display: inline-block;
}
#footer {
  color: #878787;
  margin-bottom: 50px;
  font: 0.9em/1.6 "Roboto", "Noto Sans TC", Helvetica, Arial, sans-serif;
  text-shadow: 0 0 1px #fff;
}
#footer .alignleft {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: box;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -o-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  line-height: 24px;
}
#footer .alignleft .copyright {
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  margin-left: 10px;
}
.entry .gist {
  background: #1f1f1f;
  border: 1px solid #ddd;
  margin-top: 15px;
  padding: 7px 15px;
  border-radius: 2px;
  text-shadow: 0 0 1px #fff;
  line-height: 1.6;
  overflow: auto;
  color: #666;
}
.entry .gist .gist-file {
  border: none;
  font-family: inherit;
  margin: 0;
  font-size: 0.9em;
}
.entry .gist .gist-file .gist-data {
  background: none;
  border-bottom: none;
}
.entry .gist .gist-file .gist-data pre {
  padding: 0 !important;
  font-family: Monaco, Menlo, Consolas, Courier New, monospace;
}
.entry .gist .gist-file .gist-meta {
  background: none;
  color: #878787;
  margin-top: 5px;
  padding: 0;
  text-shadow: 0 0 1px #fff;
  font-size: 100%;
}
.entry .gist .gist-file .gist-meta a {
  color: #22a779;
}
.entry .gist .gist-file .gist-meta a:visited {
  color: #22a779;
}
figure.highlight {
  background: #1f1f1f;
  border: 1px solid #ddd;
  margin-top: 15px;
  padding: 7px 7px;
  border-radius: 2px;
  line-height: 1.6;
  overflow: auto;
  position: relative;
  font-size: 16px;
  border-radius: 10px;
}
@media (max-width: 767px) {
  figure.highlight {
    font-size: 14px;
  }
}
figure.highlight figcaption {
  color: #878787;
  margin-bottom: 5px;
  text-shadow: 0 0 1px #fff;
}
figure.highlight figcaption a {
  position: absolute;
  right: 15px;
}
figure.highlight pre {
  border: none;
  padding: 0;
  margin: 0;
}
@media (max-width: 767px) {
  figure.highlight pre {
    font-size: 14px;
  }
}
figure.highlight table {
  margin-top: 0;
  border-spacing: 0;
}
figure.highlight .gutter {
  color: #878787;
  padding: 0;
  padding-right: 10px;
  border: 0;
  border-right: 1px solid #ddd;
  text-align: right;
  width: 24px;
}
figure.highlight .code {
  padding-left: 15px;
  border: 0;
  border-left: 1px solid #fff;
  color: #fff;
  font-weight: 500;
}
@media (max-width: 767px) {
  figure.highlight .code {
    font-size: 14px;
  }
}
figure.highlight .line {
  height: 20px;
}
figure.highlight .line.marked {
  background: #d6d6d6;
}
pre .comment,
pre .template_comment,
pre .diff .header,
pre .doctype,
pre .pi,
pre .lisp .string,
pre .javadoc {
  color: #6a9955;
  font-style: italic;
}
pre .keyword,
pre .winutils,
pre .method,
pre .addition,
pre .css .tag,
pre .request,
pre .status,
pre .nginx .title {
  color: #3f9cd6;
}
pre .number,
pre .command,
pre .string,
pre .tag .value,
pre .phpdoc,
pre .tex .formula,
pre .regexp,
pre .hexcolor {
  color: #2aa198;
}
pre .title,
pre .localvars,
pre .chunk,
pre .decorator,
pre .built_in,
pre .identifier,
pre .vhdl,
pre .literal,
pre .id {
  color: #dcdcaa;
}
pre .attribute,
pre .variable,
pre .lisp .body,
pre .smalltalk .number,
pre .constant,
pre .class .title,
pre .parent,
pre .haskell .type {
  color: #b58900;
}
pre .preprocessor,
pre .preprocessor .keyword,
pre .shebang,
pre .symbol,
pre .symbol .string,
pre .diff .change,
pre .special,
pre .attr_selector,
pre .important,
pre .subst,
pre .cdata,
pre .clojure .title {
  color: #cb4b16;
}
pre .deletion {
  color: #dc322f;
}