@charset "UTF-8";
.blogger-wrap {
  max-width: 1366px;
  width: 100%;
  margin: 0 auto;
  position: relative;
  background-color: #ededed;
  font-family: "Microsoft JhengHei", "微軟正黑體"; }
  .blogger-wrap .hashtag {
    position: absolute;
    top: 236px;
    text-align: right;
    width: 30%; }
    .blogger-wrap .hashtag .text {
      font-size: 15px;
      line-height: 1.5;
      letter-spacing: 3.5px;
      display: block;
      color: #353535; }
    .blogger-wrap .hashtag .line {
      height: 0.8px;
      position: relative;
      padding-top: 20px; }
      .blogger-wrap .hashtag .line:before {
        content: "";
        display: inline-block;
        margin-right: 1em;
        width: 100%;
        position: absolute;
        background-color: #353535;
        height: 0.8px;
        left: 0;
        top: 50%; }
  .blogger-wrap .blogger-tit-wrap {
    position: absolute;
    z-index: 2;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    top: 96px;
    left: 12.3%; }
    .blogger-wrap .blogger-tit-wrap .tit {
      padding-bottom: 10px; }
      .blogger-wrap .blogger-tit-wrap .tit svg {
        width: 408px;
        height: 50px; }
    .blogger-wrap .blogger-tit-wrap .sub-tit {
      background-color: rgba(128, 128, 128, 0.6);
      width: 157px;
      height: 36px;
      padding: 5px 18px 5px 73px;
      text-align: right; }
      .blogger-wrap .blogger-tit-wrap .sub-tit svg {
        width: 100%;
        height: 100%; }
  .blogger-wrap .blogger-slider-wrap {
    width: 53.1%;
    padding-top: 186px;
    padding-left: 32%;
    padding-bottom: 100px; }
    .blogger-wrap .blogger-slider-wrap .owl-carousel {
      width: 100%; }
      .blogger-wrap .blogger-slider-wrap .owl-carousel .item {
        width: 100%; }
        .blogger-wrap .blogger-slider-wrap .owl-carousel .item .photo img {
          width: 100%; }
        .blogger-wrap .blogger-slider-wrap .owl-carousel .item .line {
          width: 1px;
          height: 50px;
          position: relative;
          margin: 0 auto;
          text-align: center; }
          .blogger-wrap .blogger-slider-wrap .owl-carousel .item .line::before {
            content: "";
            position: absolute;
            top: -25px;
            width: 100%;
            height: 100%;
            background-color: #353535; }
        .blogger-wrap .blogger-slider-wrap .owl-carousel .item .txt-wrap {
          text-align: center;
          letter-spacing: 1.5px;
          line-height: 1.5;
          color: #353535; }
          .blogger-wrap .blogger-slider-wrap .owl-carousel .item .txt-wrap .name {
            font-size: 16px;
            padding-bottom: 1.2em; }
          .blogger-wrap .blogger-slider-wrap .owl-carousel .item .txt-wrap .txt {
            font-size: 14px;
            color: #5e5e5e;
            display: block;
            height: 50px; }
        .blogger-wrap .blogger-slider-wrap .owl-carousel .item .more-btn-wrap {
          text-decoration: none;
          display: block;
          margin-left: 25%; }
          .blogger-wrap .blogger-slider-wrap .owl-carousel .item .more-btn-wrap:hover .more-btn:before {
            width: 4em;
            background-color: #a0a0a0; }
          .blogger-wrap .blogger-slider-wrap .owl-carousel .item .more-btn-wrap:hover .more-btn .more-btn-icon {
            -webkit-transform: translate3d(1.1em, 0, 0);
            transform: translate3d(1.1em, 0, 0); }
          .blogger-wrap .blogger-slider-wrap .owl-carousel .item .more-btn-wrap:hover .more-btn .more-btn-text {
            -webkit-transform: translate3d(1.2em, 0, 0);
            transform: translate3d(1.2em, 0, 0); }
          .blogger-wrap .blogger-slider-wrap .owl-carousel .item .more-btn-wrap .more-btn {
            font-size: 10px;
            line-height: 14px;
            position: relative;
            display: block;
            font-family: "Raleway", sans-serif;
            letter-spacing: 0.2em;
            margin-top: 0.75em;
            padding-left: 4em;
            overflow: hidden; }
            .blogger-wrap .blogger-slider-wrap .owl-carousel .item .more-btn-wrap .more-btn:before {
              content: "";
              display: inline-block;
              margin-right: 1em;
              width: 3em;
              vertical-align: 0.3em;
              position: absolute;
              background-color: #353535;
              height: 1px;
              left: 0;
              top: 50%;
              margin-top: -1px;
              -webkit-transition: width 0.35s cubic-bezier(0.46, 0.1, 0.29, 1), background-color 0.35s cubic-bezier(0.46, 0.1, 0.29, 1);
              -o-transition: width 0.35s cubic-bezier(0.46, 0.1, 0.29, 1), background-color 0.35s cubic-bezier(0.46, 0.1, 0.29, 1);
              transition: width 0.35s cubic-bezier(0.46, 0.1, 0.29, 1), background-color 0.35s cubic-bezier(0.46, 0.1, 0.29, 1); }
            .blogger-wrap .blogger-slider-wrap .owl-carousel .item .more-btn-wrap .more-btn .more-btn-text,
            .blogger-wrap .blogger-slider-wrap .owl-carousel .item .more-btn-wrap .more-btn .more-btn-icon {
              -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.46, 0.1, 0.29, 1);
              transition: -webkit-transform 0.35s cubic-bezier(0.46, 0.1, 0.29, 1);
              -o-transition: transform 0.35s cubic-bezier(0.46, 0.1, 0.29, 1);
              transition: transform 0.35s cubic-bezier(0.46, 0.1, 0.29, 1);
              transition: transform 0.35s cubic-bezier(0.46, 0.1, 0.29, 1), -webkit-transform 0.35s cubic-bezier(0.46, 0.1, 0.29, 1);
              display: inline-block; }
            .blogger-wrap .blogger-slider-wrap .owl-carousel .item .more-btn-wrap .more-btn .more-btn-text {
              color: #5e5e5e; }
            .blogger-wrap .blogger-slider-wrap .owl-carousel .item .more-btn-wrap .more-btn .more-btn-icon {
              fill: #353535;
              width: 1.25em;
              height: 1.25em;
              vertical-align: -0.2em; }
      .blogger-wrap .blogger-slider-wrap .owl-carousel .owl-prev,
      .blogger-wrap .blogger-slider-wrap .owl-carousel .owl-next {
        width: 20px;
        margin: -10px; }

@media screen and (max-width: 1024px) {
  .blogger-wrap .blogger-slider-wrap .owl-carousel .owl-nav {
    margin-bottom: -50px; } }

@media screen and (max-width: 800px) {
  .blogger-wrap .hashtag {
    top: 67%;
    left: -24%;
    z-index: 2;
    width: 454px; }
    .blogger-wrap .hashtag .text {
      text-align: right;
      color: #fff;
      text-shadow: 0.1em 0 0.2em #000; }
    .blogger-wrap .hashtag .line {
      display: none; }
  .blogger-wrap .blogger-tit-wrap {
    top: 85px;
    width: 100%;
    left: -13%;
    right: 0; }
    .blogger-wrap .blogger-tit-wrap .tit {
      padding-bottom: 36px; }
      .blogger-wrap .blogger-tit-wrap .tit svg {
        width: 591px;
        height: 80px; }
    .blogger-wrap .blogger-tit-wrap .sub-tit {
      width: 240px;
      height: 52px;
      padding: 8px 18px 8px 112px; }
      .blogger-wrap .blogger-tit-wrap .sub-tit svg {
        width: 100%;
        height: 100%; }
  .blogger-wrap .blogger-slider-wrap {
    width: 70%;
    padding-left: 0;
    padding-top: 31%;
    margin: 0 auto; }
    .blogger-wrap .blogger-slider-wrap .owl-carousel .item .more-btn-wrap {
      margin-left: 36%; }
      .blogger-wrap .blogger-slider-wrap .owl-carousel .item .more-btn-wrap .more-btn {
        font-size: 14px; }
    .blogger-wrap .blogger-slider-wrap .owl-carousel .owl-prev,
    .blogger-wrap .blogger-slider-wrap .owl-carousel .owl-next {
      display: none; }
    .blogger-wrap .blogger-slider-wrap .owl-carousel .owl-dots {
      margin-top: 80px;
      text-align: center; }
      .blogger-wrap .blogger-slider-wrap .owl-carousel .owl-dots .owl-dot {
        width: 10px;
        height: 10px;
        border: 0.8px solid #b3b3b3;
        border-radius: 10px;
        background-color: #ededed;
        margin: 0 5px; }
      .blogger-wrap .blogger-slider-wrap .owl-carousel .owl-dots .owl-dot.active {
        width: 10px;
        height: 10px;
        border: 0.8px solid #b3b3b3;
        border-radius: 10px;
        background-color: #b3b3b3; } }

@media screen and (max-width: 414px) {
  .blogger-wrap .hashtag {
    top: 58%;
    left: -49%; }
    .blogger-wrap .hashtag .text {
      font-size: 14px; }
  .blogger-wrap .blogger-tit-wrap {
    top: 55px;
    width: 100%;
    left: -14%;
    right: 0; }
    .blogger-wrap .blogger-tit-wrap .tit {
      width: 302px;
      padding-bottom: 0; }
      .blogger-wrap .blogger-tit-wrap .tit svg {
        width: 302px;
        height: 80px; }
    .blogger-wrap .blogger-tit-wrap .sub-tit {
      width: 40%;
      height: 51px;
      padding: 0.1em 1em 0.1em 6em; }
      .blogger-wrap .blogger-tit-wrap .sub-tit svg {
        width: 100%;
        height: 100%; }
  .blogger-wrap .blogger-slider-wrap {
    width: 75%;
    padding-left: 0;
    padding-top: 42%;
    margin: 0 auto; }
    .blogger-wrap .blogger-slider-wrap .owl-carousel .item .more-btn-wrap {
      margin-left: 30%; }
      .blogger-wrap .blogger-slider-wrap .owl-carousel .item .more-btn-wrap .more-btn {
        margin-top: 0.75em; } }

@media screen and (max-width: 375px) {
  .blogger-wrap .hashtag {
    left: -45%;
    top: 56%; }
    .blogger-wrap .hashtag .text {
      font-size: 12px; }
  .blogger-wrap .blogger-tit-wrap {
    left: -13%; }
    .blogger-wrap .blogger-tit-wrap .tit {
      width: 277px; }
      .blogger-wrap .blogger-tit-wrap .tit svg {
        width: 100%; }
    .blogger-wrap .blogger-tit-wrap .sub-tit {
      height: 46px;
      width: 32%; }
  .blogger-wrap .blogger-slider-wrap {
    width: 75%;
    padding-top: 47%; }
    .blogger-wrap .blogger-slider-wrap .owl-carousel .item .line {
      margin-top: 1em;
      height: 30px; }
    .blogger-wrap .blogger-slider-wrap .owl-carousel .item .more-btn-wrap {
      margin-left: 29%; }
    .blogger-wrap .blogger-slider-wrap .owl-carousel .owl-dots {
      margin-top: 90px; } }