@media (max-width: 768px) {
  ol, ul {
    padding-left: 1.3rem;
  }
}



/*文章目錄list*/

/* c_widget文章標題下方的目錄(mobile) */
.blog .c_widget {
  margin: 0 0 20px 0;
  padding:10px;
  background-color: #fefefe;
  border-radius: 8px;
  width: 100%;
  border: #ccc 1px solid;
}

/*文章目錄*/
body[data-layout-mode=dark] .blog .c_widget {
  background-color: #333;
  color:#fff;
  height:100%;
}
.blog .c_widget a {
  text-decoration: none;
}
body[data-layout-mode=dark] .blog .c_widget a {
  text-decoration: none;
}
.blog .c_widget .c_h1 { padding:2px 0 5px 0; }/*增加間距 方便手指點擊*/
.blog .c_widget .c_h2 { padding:2px 0 5px 0; }
.blog .c_widget .c_h3 { padding:2px 0 5px 0; }

.h_category {
  white-space:nowrap;
  overflow: hidden;
  max-height: 350px;
  overflow-y: auto;
}
@media (max-width: 767px) {
  .h_category { max-height: 100%; }
}

body[data-layout-mode=dark] .h_category {
  color:#444;
}
.h_category .c_h1 {
  margin:0 0 2px 2px;
  font-size:15px;
  font-weight: 600;
  color:#444;
}
.h_category .c_h2 {
  margin:0 0 2px 15px;
  font-weight: 600;
  color:#444;
}
.h_category .c_h3 {
  margin:0 0 2px 30px;
  font-size:14px;
  color:#444;
}
.h_category .c_h1:hover,
.h_category .c_h2:hover,
.h_category .c_h3:hover {
  color:#006699;
}
body[data-layout-mode=dark] .h_category .c_h1,
body[data-layout-mode=dark] .h_category .c_h2,
body[data-layout-mode=dark] .h_category .c_h3 {
  color:#eee;
}


body[data-layout-mode=dark] .h_category .c_h1:hover,
body[data-layout-mode=dark] .h_category .c_h2:hover,
body[data-layout-mode=dark] .h_category .c_h3:hover {
  color:#85c7e8;
}

/*end.文章目錄list*/

.blog_block {
  border-radius: 6px;
  padding: 15px 35px 15px 35px;
  margin:0 0 20px 0;
  background-color: #fff;
  word-wrap:break-word;
  color:#111;
}
body[data-layout-mode=dark] .blog_block {
  background-color: #222;
  color:#eee
}
@media (max-width: 768px) {
  .blog_block {
    border-radius: 6px;
    padding: 10px;
    margin:0 0 20px 0;
    background-color: #fff;
  }
}

.blog {
  line-height: 1.64;
}

.blog h1,
.blog h2 {
  border-bottom: 1px solid #ccc;
  margin: 30px 0 16px 0;
}
.blog h3,.blog h4 {
  margin: 30px 0 10px 0;
}
body[data-layout-mode=dark] .blog h1,
body[data-layout-mode=dark] .blog h2,
body[data-layout-mode=dark] .blog h3,
body[data-layout-mode=dark] .blog h4 {
  border-bottom: 1px solid #333;
}


.blog a {
  text-decoration-line: underline;
}
body[data-layout-mode=dark] .blog a { text-decoration: underline}

.blog p {
  margin-bottom: 10px;
}

.blog .thumb {
  margin:10px 0;
  max-height:550px;
  overflow: hidden;
}

.blog .title {
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.04em;
}
.blog .pubdate {
  font-size: 13px;
  text-align: right;
  margin:0 0 5px 0;
  color:#777;
}
body[data-layout-mode=dark] .pubdate {
  color:#aaa;
}

.blog .blogbody {

}

.blog code {
  background-color: #ececec;
  border: 1px solid #d9d9d9;
  color: #dd1144;
  padding: 3px 3px 1px 0;
  margin: 0 2px 0 2px;
  font-size: 90%;
}
body[data-layout-mode=dark] .blog code {
  background-color: #aaa;
  border: 0px;
}

.blog blockquote {
  border: #c0c4dd 1px solid;
  border-left: 4px solid #90b3db;
  border-radius: 5px;
  background-color: #f5f5f5;
  padding: 10px;
  margin-left:20px;
}
.blog blockquote p {
  margin-bottom: 0;
}
body[data-layout-mode=dark] .blog blockquote {
  background-color: #242b35;
  color:#eee;
  border-left: 4px solid #86beff;
}
@media (max-width: 768px) {
  .blog blockquote {
    padding: 10px;
    margin-left:0;
  }
}

.blog pre {
  border-radius: 6px;
  padding: 15px;
  background-color: #222;
  margin: 10px 0 10px 20px;
  color:#eee;
  border: 1px solid #444;
}
.blog pre code {
  font-size: 100%;
  word-break: normal;
  color:#eee;
  background-color: #222;
  border: 0;
}
body[data-layout-mode=dark] .blog pre code {
  background-color: #222;

}
.blog li {
  margin:2px 0 5px 0;
}
.blog table {
  /* border-collapse: collapse;
  border-spacing: 0px;
  border: 1px solid #999;
  *border-radius:13px;
  margin:10px 0;
  overflow: auto; */

  display: block;
  width: 100%;
  overflow: auto;
  word-break: normal;
  word-break: keep-all;
}

.blog th,
.blog td {
  padding: 5px;
  border: 1px solid #888;
}
.blog td {
  background-color: #fafafa;
}
.blog th {
  background-color: #ddd;
}
body[data-layout-mode=dark] .blog th {
  background-color: #666;
}
body[data-layout-mode=dark] .blog td {
  background-color: #444;
}

@media (max-width: 768px) {
  .blog .blogbody {
    line-height: 1.7;
    font-size:16px;
  }

}

.blog .blogbody hr {
  height: 2px;
  padding: 0;
  margin: 20px 0;
  background-color: #aaa;
  border: 0;
}
.h4_label {
  margin:5px 0 5px 0;
  border-bottom: 1px solid #dddddd;
  font-size:17px;
  font-weight: 600;
}
body[data-layout-mode=dark] .h4_label {
  border-bottom: 1px solid #666;
}
@media (max-width: 768px) {
  .h4_label {
    font-size:16px;
  }
}


.thumbnail {
  border: #cecece 1px solid;
  border-radius: 7px;
  margin:0 0 10px 0;
}
.thumbnail .thumb {
  height:117px;
  overflow: hidden;
  border-radius: 7px 7px 2px 2px;
}
.thumbnail .caption {
  line-height: 1.2;
  padding:4px;
  max-height:43px;
  overflow: hidden;
}
.thumbnail a {
  color:#000
}
.thumbnail a:hover {
  color:#0e80b9
}
.thumbnail .desc {
  height:33px;
  font-size:14px;
  overflow: hidden;
  line-height: 1.2;
  color:#555;
  padding:4px;
}
@media (max-width: 768px) {
  .thumbnail {
    margin:0 0 20px 0;
  }
  .thumbnail .thumb {
  height:137px;
  overflow: hidden;
  }
  .thumbnail .caption {
  font-size:17px;
  line-height: 1.2;
  margin:5px 0;
  }
  .thumbnail .desc {
  height:33px;
  font-size:14px;
  margin:5px 0;
  overflow: hidden;
  line-height: 1.2;
  }

}