@charset "UTF-8";
/* CSS Document */
.tagBox .moreBtn {
  -webkit-transition: all .5s;
  -o-transition: all .5s;
  transition: all .5s; }

/*****列表*****/
@media (min-width: 1181px) {
  .indexPage .contentBox .wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start; } }

@media (min-width: 1181px) {
  .indexPage .tagBox {
    -webkit-box-ordinal-group: 3;
    -ms-flex-order: 2;
    order: 2;
    width: 320px; } }

@media (min-width: 1181px) {
  .indexPage .blogList {
    width: calc(100% - 320px);
    padding-right: 50px; } }

@media (min-width: 501px) {
  .tagBox {
    padding: 35px 35px 40px; } }

@media (max-width: 500px) {
  .tagBox {
    padding: 25px 20px; } }

@media (min-width: 1181px) {
  .tagBox {
    background-color: #f6f6f6; } }

@media (max-width: 1180px) {
  .tagBox {
    border: 1px solid #e5e5e5;
    background-color: #f2f2f2; } }

.tagBox > .title {
  padding-top: 15px;
  border-top: 1px solid #ccc; }

.tagBox > .moreBtn {
  width: 100%;
  margin-top: 25px; }

.tagBox .moreBtn {
  height: 35px;
  border: none;
  font-family: "Roboto", Arial, "Noto Sans TC", "微軟正黑體", Helvetica, Heiti TC, "メイリオ", sans-serif;
  color: #fff;
  background-color: #af8442;
  outline: none;
  cursor: pointer; }
  .tagBox .moreBtn:hover {
    color: #e0dace;
    background-color: #837a72; }

.blogSearchBox {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 20px; }
  .blogSearchBox ::-webkit-input-placeholder {
    /* Chrome */
    color: #959595; }
  .blogSearchBox :-ms-input-placeholder {
    /* IE 10+ */
    color: #959595; }
  .blogSearchBox ::-moz-placeholder {
    /* Firefox 19+ */
    color: #959595;
    opacity: 1; }
  .blogSearchBox :-moz-placeholder {
    /* Firefox 4 - 18 */
    color: #959595;
    opacity: 1; }
  @media (max-width: 500px) {
    .blogSearchBox {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; } }
  .blogSearchBox input {
    width: 100%;
    height: 35px;
    padding-left: 50px;
    color: #959595;
    outline: none;
    border: none;
    font-family: "Roboto", Arial, "Noto Sans TC", "微軟正黑體", Helvetica, Heiti TC, "メイリオ", sans-serif;
    background-color: #fefefe; }
    @media (min-width: 501px) {
      .blogSearchBox input {
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1; } }
  @media (min-width: 501px) {
    .blogSearchBox .moreBtn {
      -ms-flex-negative: 0;
      flex-shrink: 0;
      width: 60px;
      min-width: auto; } }
  @media (max-width: 500px) {
    .blogSearchBox .moreBtn {
      width: 100%;
      margin-top: 15px; } }
  .blogSearchBox svg {
    position: absolute;
    left: 18px;
    top: 10px;
    z-index: 1;
    width: 17px;
    height: 17px;
    fill: #b0acac; }

@media (max-width: 1180px) {
  .blogList {
    margin-top: 40px; } }

.blogList > li {
  padding-bottom: 30px; }
  @media (min-width: 961px) {
    .blogList > li {
      border-bottom: 1px solid #e5e5e5; } }
  .blogList > li + li {
    margin-top: 30px; }

@media (min-width: 961px) {
  .blogList .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; } }

@media (min-width: 961px) {
  .blogList .Img {
    width: 390px;
    padding-right: 30px; } }

@media (min-width: 1181px) and (max-width: 1300px) {
  .blogList .Img {
    width: 320px; } }

.blogList .Img img {
  display: block;
  width: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden; }

@media (min-width: 961px) {
  .blogList .Txt {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    width: calc(100% - 390px); } }

@media (min-width: 1181px) and (max-width: 1300px) {
  .blogList .Txt {
    width: calc(100% - 320px); } }

@media (max-width: 960px) {
  .blogList .Txt {
    padding-top: 15px; } }

.blogList h3 {
  margin-bottom: 15px;
  font-weight: 400;
  font-size: 18px; }
  @media (max-width: 960px) {
    .blogList h3 {
      padding-bottom: 15px;
      border-bottom: 1px solid #af8442; } }
  .blogList h3 a {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis; }

.blogList .txtExp {
  height: 50px;
  line-height: 23px;
  margin-bottom: 15px;
  font-size: 13px; }

.itemDataBox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 15px;
  font-size: 13px; }
  .itemDataBox .date, .itemDataBox em {
    color: #959595; }
  .itemDataBox .date::before {
    content: '';
    display: inline-block;
    vertical-align: middle;
    width: 55px;
    height: 1px;
    margin-left: 5px;
    margin-right: 5px;
    background-color: #e5e5e5; }
    @media (max-width: 500px) {
      .itemDataBox .date::before {
        width: 10px; } }
  .itemDataBox .viewBox {
    margin-left: auto;
    color: #2a2a2a;
    letter-spacing: 1px; }
    .itemDataBox .viewBox svg {
      display: inline-block;
      vertical-align: middle;
      width: 20px;
      height: 20px;
      margin-right: 10px;
      fill: #656565; }
      @media (max-width: 360px) {
        .itemDataBox .viewBox svg {
          display: none; } }

.itemTagList {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-top: auto; }
  .itemTagList::before {
    content: 'TAGS';
    display: inline-block;
    padding: 0 8px;
    margin-right: 15px;
    line-height: 22px;
    font-size: 12px;
    color: #fff;
    letter-spacing: 1px;
    background-color: #af8442; }
  .itemTagList li {
    margin-right: 15px;
    font-size: 13px;
    line-height: 25px;
    color: #918e8e; }
    .itemTagList li::before {
      content: '#';
      display: inline-block;
      margin-right: 3px; }
    .itemTagList li a:not(:hover) {
      color: #918e8e; }

/*****內頁*****/
.articleMainArea .wrap {
  position: relative; }

.articleMainArea .bread {
  position: absolute;
  top: 0;
  right: 0; }
  @media (min-width: 1181px) and (max-width: 1300px) {
    .articleMainArea .bread {
      right: 50px; } }

@media (max-width: 1180px) {
  .articleMainArea .itemDataBox {
    display: block;
    text-align: center; } }

@media (min-width: 1181px) {
  .articleMainArea .itemDataBox + .itemDataBox {
    margin-top: 30px; } }

@media (max-width: 1180px) {
  .articleMainArea .itemDataBox .date, .articleMainArea .itemDataBox em {
    display: inline-block; } }

@media (max-width: 1180px) {
  .articleMainArea .itemDataBox .viewBox {
    margin-top: 10px; } }

.articleMainArea .textEditor {
  margin-top: 20px;
  padding-top: 50px;
  border-top: 1px solid #e5e5e5; }
  .articleMainArea .textEditor a.linkBtn:not(:hover) {
    color: #fff; }

.articleMainArea .itemTagList {
  margin-top: 40px; }

.author {
  display: block;
  margin-bottom: 15px;
  font-size: 15px;
  font-weight: 400;
  font-style: italic;
  color: #000;
  font-family: "Cardo", "Noto Sans TC", "微軟正黑體", Helvetica, Heiti TC, "メイリオ", sans-serif; }
  @media (max-width: 1180px) {
    .author {
      text-align: center;
      margin-bottom: 40px; } }
  .author::before {
    content: 'by';
    margin-right: 5px; }

.blogIntro {
  margin-bottom: 55px;
  line-height: 1.8; }

.articleInfo {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 10px; }