@charset "UTF-8";

[data-redirect-url] {
    cursor: pointer;
}

.postCard .postContent {
    padding: 0 10px;
}

/* 瀑布流布局樣式 */

#social-container {
    overflow: hidden;
}

#social-container #social-container-inside, #social-container #social-container-inside .waterfall-container {
    width: 1900px;
  }

#social-container {
    overflow: scroll;
    /* iOS 平滑滾動 */
    -webkit-overflow-scrolling: touch;
}

@media(max-width: 992px) {
    #social-container #social-container-inside, #social-container #social-container-inside .waterfall-container {
        width: 1400px;
    }
}

.waterfall-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

.social-post-card,
.social-post-card-build {
    background: #fff !important;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
    overflow: hidden;
}

.social-post-card .social-post-header {
    display: flex;
    align-items: center;
    padding: 12px;
}

.social-post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    object-fit: cover;
    border: 3px solid #0056b3;
}

.social-post-info {
    flex: 1;
}

.social-post-name {
    font-weight: bold;
    margin: 0 0 0 5px;
    text-shadow: 0px 0px 3px rgba(0, 0, 0, 1);
    color: #fff;
}


.social-post-content {
    padding: 0 12px 12px;
    word-break: break-word;
}

.social-post-media {
    width: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 280px;
}

.social-post-footer {
    position: absolute;
    bottom: 5px;
}

.comment_guest_pic {
    background-color: rgb(204, 204, 204);
    color: rgb(170, 170, 170);
    text-align: center;
    padding-top: 17px;
    font-size: 12px;
    background-image: none;
    border-radius: 50%;
    width: 50px;
    margin-right: 10px;
    height: 50px;
}

.ce-toolbar__content, .ce-block__content {
    max-width: 90%;  /* example value, adjust for your own use case */
}

.pagination {
    display: flex;
    justify-content: center;
    padding: 10px 0;
    list-style: none;
}

.pagination .page-item {
    margin: 0 5px;
}

.pagination .page-item .page-link {
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
    padding: 8px 12px;
    border-radius: 5px;
    transition: all 0.2s ease-in-out;
}

.pagination .page-item .page-link:hover {
    background-color: #007bff;
    color: #fff;
    border-color: #007bff;
}

.pagination .page-item.active .page-link {
    background-color: #007bff;
    border-color: #007bff;
    color: #fff;
}

.pagination .page-item.disabled .page-link {
    color: #6c757d;
    pointer-events: none;
    background-color: #f8f9fa;
    border-color: #dee2e6;
}

.discussion-comments img{
    width: 50px;
    height: 50px;
    object-fit: cover;
}

@media (max-width: 576px) {
    .social-post-media {
        height: 200px;
    }
}
@charset "UTF-8";

/*關於我們*/
#footer {
    background-color: #1d1d1d;
}

#footer .container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 1000px;
    padding-top: 40px;
    padding-bottom: 15px;
}

#footer .container .logo img {
    margin-bottom: 15px;
    width: 180px;
}

#footer .container .contact {
    margin: 15px 0;
}

#footer .container .contact .footer,
#footer .container .menu .footer {
    display: inline-block;
    margin: 0 20px;
    font-size: 14px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.5;
}

#footer .container .contact .mail:before,
#footer .container .contact .address:before,
#footer .container .menu .mail:before,
#footer .container .menu .address:before {
    content: "";
    display: inline-block;
    vertical-align: sub;
    margin-right: 5px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#footer .container .contact .mail:before,
#footer .container .menu .mail:before {
    height: 15px;
    width: 20px;
    background-image: url(../img/footer/MailIcon.svg);
}

#footer .container .contact .address:before,
#footer .container .menu .address:before {
    height: 20px;
    width: 15px;
    background-image: url(../img/footer/AddressIcon.svg);
}

#footer .container .copyrightbar .copyright {
    text-align: center;
    font-size: 10px;
    font-weight: 400;
    color: #727272;
    margin-top: 30px;
}

@media (max-width: 1050px) {
    #footer .container {
        width: 100%;
    }
}

@media (max-width: 767px) {
    #footer .container {
        width: 100%;
        padding-top: 30px;
        padding-bottom: 15px;
    }

    #footer .container .logo img {
        margin-bottom: 15px;
        width: 180px;
    }

    #footer .container .contact {
        margin: 15px 0;
        width: 100%;
    }

    #footer .container .contact:before,
    #footer .container .contact:after {
        content: "";
        display: block;
        height: 1px;
        width: 100%;
        background-color: #FFF;
    }

    #footer .container .contact:before {
        margin-bottom: 15px;
    }

    #footer .container .contact:after {
        margin-top: 15px;
    }

    #footer .container .contact .footer {
        display: block;
        margin: 0;
    }

    #footer .container .contact .mail {
        margin-bottom: 10px;
    }

    #footer .container .menu .footer {
        margin: 0 10px;
    }
}

@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Rubik", "Noto Sans TC", "微軟正黑體", sans-serif;
  word-break: break-word;
}

h1 {
  font-size: 36px;
  color: #000000;
}

h2 {
  font-size: 28px;
  color: #000000;
}

h3 {
  font-size: 24px;
  color: #1d1d1d;
}

h4 {
  font-size: 20px;
  color: #1d1d1d;
}

h5 {
  font-size: 18px;
  color: #727272;
}

h6 {
  font-size: 14px;
  color: #BBBBBB;
  font-weight: 300;
}

p {
  font-size: 16px;
  color: #000000;
  letter-spacing: 1px;
  line-height: 26px;
}

@-webkit-keyframes fade-right {
  0% {
    -webkit-transform: translate3d(-350px, 0px, 0px);
            transform: translate3d(-350px, 0px, 0px);
  }
  100% {
    -webkit-transform: translate3d(0, 0px, 0);
            transform: translate3d(0, 0px, 0);
  }
}

@keyframes fade-right {
  0% {
    -webkit-transform: translate3d(-350px, 0px, 0px);
            transform: translate3d(-350px, 0px, 0px);
  }
  100% {
    -webkit-transform: translate3d(0, 0px, 0);
            transform: translate3d(0, 0px, 0);
  }
}
@-webkit-keyframes fade-left {
  0% {
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
  }
  100% {
    -webkit-transform: translate3d(-350px, 0px, 0);
            transform: translate3d(-350px, 0px, 0);
  }
}
@keyframes fade-left {
  0% {
    -webkit-transform: translate3d(0px, 0px, 0px);
            transform: translate3d(0px, 0px, 0px);
  }
  100% {
    -webkit-transform: translate3d(-350px, 0px, 0);
            transform: translate3d(-350px, 0px, 0);
  }
}
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes fade-out {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
/*Background*/
.bg-gray {
  background: #1d1d1d !important;
}

/*Position*/
.bottom-0 {
  bottom: 0 !important;
}

.h-40px {
  height: 40px !important;
}

.h-25px {
  height: 25px !important;
}

#navbar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 50px;
  width: 100%;
  background-color: #fff;
  position: fixed;
  top: 0;
  z-index: 100;
  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
}
#navbar a, #navbar #searchbtn {
  cursor: pointer;
}
#navbar a.memberlogin img {
  height: 30px;
}
#navbar .navbarcontainer {
  padding-left: 10px;
  padding-right: 10px;
  position: relative;
}
#navbar #navbarMenuBtn {
  cursor: pointer;
}
#navbar #navbarMenuBtn img {
  height: 22px;
}
#navbar #navbarBrandLogo {
  margin-left: 10px;
  margin-top: 9px;
}
#navbar #navbarBrandLogo img {
  height: 32px;
  -o-object-fit: contain;
     object-fit: contain;
}
#navbar .iconBlock {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
#navbar .iconBlock img {
  padding: 0px 5px;
  height: 25px;
}
#navbar #navbar-go-to-social-btn {
  height: 30px;
}
#navbar .profile-image {
  width: 25px;
  height: 25px;
  border-radius: 100%;
  background-size: cover;
  margin: 0 5px;
}

#navbarSearchPage {
  position: relative;
  z-index: 200;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(46, 48, 47, 0.9);
}
#navbarSearchPage .closebtn {
  position: relative;
  cursor: pointer;
}
#navbarSearchPage #navbarSearchCloseBtn {
  position: absolute;
  right: 30px;
  top: 20px;
}
#navbarSearchPage #navbarSearchCloseBtn img {
  width: 20px;
}
#navbarSearchPage .searchBar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  width: 100%;
  height: 100%;
}
#navbarSearchPage form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#navbarSearchPage input.searchform {
  background-color: #1d1d1d;
  color: #FFF;
  font-size: 18px;
  outline: none;
  padding-left: 25px;
  height: 60px;
  width: 300px;
  border-radius: 100px 0px 0px 100px;
  border: 0px;
}
#navbarSearchPage input.searchform::-webkit-input-placeholder {
  color: #727272;
  font-size: 18px;
}
#navbarSearchPage input.searchform::-moz-placeholder {
  color: #727272;
  font-size: 18px;
}
#navbarSearchPage input.searchform:-ms-input-placeholder {
  color: #727272;
  font-size: 18px;
}
#navbarSearchPage input.searchform::-ms-input-placeholder {
  color: #727272;
  font-size: 18px;
}
#navbarSearchPage input.searchform::placeholder {
  color: #727272;
  font-size: 18px;
}
#navbarSearchPage input.submitbtn {
  background-color: #1d1d1d;
  color: #FFF;
  padding-right: 30px;
  border-radius: 0px 100px 100px 0px;
  border: 0px;
  height: 60px;
  width: 60px;
  background-image: url(../img/navbar/SearchPageIcon.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 25px;
}

#navbarMenuContent {
  position: relative;
  z-index: 200;
}
#navbarMenuContent #navbarMenubg {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 350px;
  height: 100vh;
  padding: 30px 20px;
  background-color: #2E302F;
}
#navbarMenuContent #navbarMenuText {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 350px;
  min-height: 100%;
  padding: 30px 20px;
  background-color: #2E302F;
}
#navbarMenuContent .closebtn {
  position: relative;
  cursor: pointer;
}
#navbarMenuContent #navbarMenuCloseBtn {
  position: absolute;
  right: 0px;
  top: 0px;
}
#navbarMenuContent #navbarMenuCloseBtn img {
  width: 20px;
}
#navbarMenuContent a {
  text-decoration: none;
}
#navbarMenuContent h3 {
  font-size: 24px;
  font-weight: 400;
  line-height: 48px;
  color: #FFF;
}
#navbarMenuContent h5 {
  font-size: 16px;
  line-height: 24px;
  font-weight: 300;
  color: #FFF;
}
#navbarMenuContent h5.first {
  margin-top: 10px;
}
#navbarMenuContent hr {
  background-color: #FFF;
  width: 100%;
  height: 1px;
  margin-left: 0;
}

@media (max-width: 768px) {
  #navbar #navbarMenuBtn img {
    width: 25px;
  }
  #navbar #navbarBrandLogo {
    margin-top: 8px;
  }
  #navbar #navbarBrandLogo img {
    height: 28px;
    width: auto;
  }
  #navbar .iconBlock img {
    height: 25px;
  }
  #navbarSearchPage input.searchform {
    height: 60px;
    width: 80%;
  }
  #navbarSearchPage input.submitbtn {
    height: 60px;
    width: 20%;
    background-image: url(../img/navbar/SearchPageIcon.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: 25px;
  }
  #navbarMenuContent #navbarMenuText, #navbarMenuContent #navbarMenubg {
    width: 300px;
  }
  #navbarMenuContent #navbarMenuText .menu h3 {
    font-size: 22px;
    line-height: 44px;
  }
}
/*社群功能*/
/*20220606更新*/
.social .memberlogin img {
  padding: 0 !important;
  width: 30px;
  border-radius: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

#navbar .icon {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-appearance: none;
  cursor: pointer;
  height: 25px;
  margin-right: 24px;
}
#navbar #navbar-back-to-media-btn {
  height: 30px;
}

@media (max-width: 1199.98px) {
  #navbar .icon {
    cursor: pointer;
    height: 25px;
    margin-right: 12px;
  }
  #navbar #messagebtn {
    margin-right: 0px !important;
  }
  #navbar .mr-mb-0 {
    margin-right: 0px !important;
  }
}
#navbar-lg-social {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  z-index: 1300;
  border-top: 1px solid #333333;
}
#navbar-lg-social .navbar-lg-icon {
  -webkit-box-flex: 20%;
      -ms-flex: 20%;
          flex: 20%;
  height: 25px;
}
#navbar-lg-social .memberlogin img {
  width: 25px;
  border-radius: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#navbar-lg-social #postbtn {
  -webkit-filter: drop-shadow(6px 6px 20px rgba(0, 0, 0, 0.24));
          filter: drop-shadow(6px 6px 20px rgba(0, 0, 0, 0.24));
}

/*固定廣告*/
.advertise-fixed-block {
  position: fixed;
  right: 24px;
  bottom: 40px;
  z-index: 200;
  display: none;
}

.advertise-fixed {
  position: relative;
  z-index: 100;
  cursor: pointer;
  width: 150px;
  height: auto;
  border-radius: 8px;
  -webkit-filter: drop-shadow(0px 4px 12px 0px rgba(0, 0, 0, 0.15));
  filter: drop-shadow(0px 4px 12px 0px rgba(0, 0, 0, 0.15));
}

#advertise-fixed-close-button {
  position: absolute;
  width: 16px;
  height: 16px;
  top: -16px;
  right: -16px;
  z-index: 101;
  cursor: pointer;
}

@media (max-width: 767.98px) {
  .advertise-fixed-block {
    right: 24px;
    bottom: 40px;
    display: none;
  }
  .advertise-fixed {
    width: 88px;
  }
  #advertise-fixed-close-button {
    width: 24px;
    height: 24px;
    top: -20px;
    right: -20px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 100px;
    padding: 4px;
  }
}

@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Rubik", "Noto Sans TC", "微軟正黑體", sans-serif;
  word-break: break-word;
}

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  padding-top: 50px;
}

h1 {
  font-size: 36px;
  color: #000000;
}

h2 {
  font-size: 28px;
  color: #000000;
}

h3 {
  font-size: 24px;
  color: #1d1d1d;
}

h4 {
  font-size: 20px;
  color: #1d1d1d;
}

h5 {
  font-size: 18px;
  color: #727272;
}

h6 {
  font-size: 14px;
  color: #BBBBBB;
  font-weight: 300;
}

p {
  font-size: 16px;
  color: #000000;
  letter-spacing: 1px;
  line-height: 26px;
}

a {
  color: #1d1d1d;
}
a:hover {
  text-decoration: none !important;
  color: #836fff;
}

img {
  width: auto;
  max-width: 100%;
  height: auto;
}

iframe {
  max-width: 100%;
}

blockquote {
  padding-left: 10px;
  border-left: 5px solid #BBBBBB;
}

textarea {
  resize: none;
}

.container {
  width: 1000px;
}

.containerForm {
  width: 100%;
}

/*spacing*/
.px-96px {
  padding-left: 96px !important;
  padding-right: 96px !important;
}

.py-36px {
  padding-top: 36px !important;
  padding-bottom: 36px !important;
}

.pdlr10 {
  padding: 0 10px;
}

.r-10 {
  right: 10px !important;
}

/*templete*/
.modal-content-basic-white {
  border-radius: 10px;
  border: none;
  -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.16);
          box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.16);
}

/*幻燈片*/
#slider .swiper {
  width: 100%;
  height: 100%;
}
#slider .swiper-slide {
  text-align: center;
  font-size: 18px;
  background-color: #1d1d1d;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
#slider .swiper-slide .mbbanner {
  display: none;
}
#slider .swiper-slide .mbbanner img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
#slider .swiper-button-next, #slider .swiper-button-prev {
  color: #FFF;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 100%;
  height: 50px;
  width: 50px;
}
#slider .swiper-button-next:hover, #slider .swiper-button-prev:hover {
  background-color: rgba(0, 0, 0, 0.7);
}
#slider .swiper-button-next:after, #slider .swiper-button-prev:after {
  font-size: 28px;
}
#slider .swiper-button-next {
  right: 20px;
}
#slider .swiper-button-next:after {
  position: absolute;
  right: 30%;
}
#slider .swiper-button-prev {
  left: 20px;
}
#slider .swiper-button-prev:after {
  position: absolute;
  left: 30%;
}
#slider .swiper-pagination-bullet-active {
  background-color: #fff;
}

/*九大分類置頂選單*/
#categorysection {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  background: #F5F5F5;
}

.category-social-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  background-color: #1d1d1d;
  padding: 8px 24px;
}
.category-social-btn img {
  width: 36px;
  height: 36px;
}
.category-social-btn .category-social-btn-text {
  margin-left: 8px;
  color: #FFF;
}

#categorybar {
  background: #F5F5F5;
  padding: 10px 0px;
  overflow-x: auto;
}
#categorybar > div {
  width: 900px;
  margin: 0 auto;
}
#categorybar a {
  position: relative;
  text-align: center;
  font-size: 16px;
  font-weight: 400;
  color: #1d1d1d;
}
#categorybar a:hover {
  color: #836fff;
}
#categorybar a:not(:first-child):before {
  position: absolute;
  left: 0;
  top: 1px;
  content: "|";
  font-size: 13.5px;
}

/*精選視頻文章幻燈片*/
#youtubepost {
  position: relative;
}
#youtubepost .swiper {
  width: 100%;
  height: 100%;
}
#youtubepost .swiper-slide {
  font-size: 18px;
  padding-right: 5px;
  /* Center slide text vertically*/
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
#youtubepost .swiper-slide .swiper-slide > img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}
#youtubepost .swiper-button-next, #youtubepost .swiper-button-prev {
  color: #1d1d1d;
}
#youtubepost .swiper-button-next:hover, #youtubepost .swiper-button-prev:hover {
  color: #836fff;
}
#youtubepost .swiper-button-next:after, #youtubepost .swiper-button-prev:after {
  font-size: 32px;
}
#youtubepost .swiper-button-next {
  right: -60px;
}
#youtubepost .swiper-button-prev {
  left: -60px;
}

/*九大分類區塊*/
.categoryBlock, .categoryListBlock {
  margin-top: 50px;
}

.categoryListBlock .container:nth-child(2n+1) {
  padding-top: 56px;
}

.categoryListBlock .container:first-child {
  padding-top: 0px;
}

/*九大分類標題區塊*/
.categoryTitleBlock {
  padding: 0 10px;
}

.categoryTitle {
  font-family: "Noto Serif TC";
  font-size: 36px;
  font-weight: 600;
  color: #000000;
  line-height: 0.9;
  letter-spacing: 2px;
  display: inline-block;
  border-right: 1px solid #1d1d1d;
  padding: 0px 10px 1px 0px;
  margin: 0px 10px 20px 0px;
}

.categorySubTitle {
  display: inline-block;
  font-size: 16px;
  font-weight: 400;
  color: #727272;
  line-height: 1;
}

/*文章卡片區塊*/
.postCard-first, .postCard-other, .postCard-collection {
  padding: 0 10px;
  margin-bottom: 30px;
}

#youtubepost {
  height: 100%;
}

.youtubecontainer {
  padding: 0 10px;
  height: 100%;
}

.postCard-youtube {
  height: 100%;
  margin-bottom: 30px;
  width: 100%;
}
.postCard-youtube .postCard {
  height: 340px;
}
.postCard-youtube .postCard300 {
  height: 300px;
}
.postCard-youtube .postCard, .postCard-youtube .postCard300 {
  position: relative;
}
.postCard-youtube .postCard:hover, .postCard-youtube .postCard300:hover {
  -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.1);
  box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.postCard-youtube .postCard .postImage, .postCard-youtube .postCard300 .postImage {
  height: 200px;
}
.postCard-youtube .postCard .postImage150, .postCard-youtube .postCard300 .postImage150 {
  height: 150px;
}

.postCard {
  height: 100%;
  position: relative;
  cursor: pointer;
}
.postCard:hover {
  -webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.postCardh3 {
  height: 330px;
}

.postCardh4 {
  height: 430px;
  position: relative;
}

.postCardh5 {
  height: 590px;
  position: relative;
}

.postImage {
  height: 300px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.postImage:hover {
  border-radius: 10px 10px 0 0;
}

.postImage150 {
  height: 150px;
}

.postImage200 {
  height: 200px;
}

.postImage450 {
  height: 450px;
}

.postImage400 {
  height: 400px;
}

.postImage500 {
  height: 500px;
}

.postCard-mb10 {
  margin-bottom: 10px;
}

#posts > .container:not(:first-child) {
  margin-top: 50px;
}

.postCollectionRounded {
  border-radius: 0.25rem 0.25rem 0 0;
}
.postCollectionRounded:hover {
  border-radius: 0.25rem 0.25rem 0 0;
}

/*文章標題區塊*/
.postTitle, .postTitle-first {
  font-family: "Noto Serif TC";
  font-size: 16px;
  font-weight: 700;
  color: #1d1d1d;
  line-height: 1.5;
  letter-spacing: 1.5px;
  margin: 10px 0 10px 0;
  text-overflow: ellipsis;
  -moz-text-align-last: left;
       text-align-last: left;
}

.ellipsis {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.ellipsis1 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.ellipsis4 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  white-space: normal;
}

.metaBlock {
  position: absolute;
  bottom: 0;
}

.meta {
  font-size: 14px;
  font-weight: 300;
  color: #BBBBBB;
  letter-spacing: 1.2;
  display: inline-block;
  padding: 0px 10px 0px 0px;
  margin-bottom: 20px;
  height: 14px;
}

.metacategory {
  border-left: 1px solid #BBBBBB;
  padding: 0 0 0 10px;
}

.saveBlock {
  position: absolute;
  right: 10px;
  bottom: 18px;
}

.saveIcon {
  width: 17px;
  height: 17px;
  background-image: url(../img/saveFullIcon.svg);
  background-size: contain;
}

.unsavedIcon {
  width: 17px;
  height: 17px;
  background-image: url(../img/saveOutlineIcon.svg);
  background-size: contain;
}

.postCard-collection .saveBlock {
  right: 10px;
}

/*文章內頁*/
.postContentTitle {
  font-family: "Noto Serif TC";
  font-size: 36px;
  font-weight: 600;
  color: #000000;
  line-height: 1.3;
  letter-spacing: 1px;
  left: 100%;
}

.postCard-content {
  padding: 30px 10px 0;
}

.postContentImage {
  margin: 0 0 15px;
}
.postContentImage img {
  width: 100%;
}

.postContentTitleBlock {
  margin: 0 0 10px;
}

/*互動按鈕*/
.postContentInteractive {
  margin-bottom: 30px;
  text-align: right;
}

.likeButton, .commentButton, .saveButton, .shareButton {
  color: #1d1d1d;
  font-size: 16px;
  display: inline-block;
  padding: 5px 15px;
  border: 1px solid #BBBBBB;
  border-radius: 5px;
  cursor: pointer;
  margin: 0 5px;
}
.likeButton span, .commentButton span, .saveButton span, .shareButton span {
  margin-left: 10px;
  color: #727272;
}
.likeButton:before, .commentButton:before, .saveButton:before, .shareButton:before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 13px;
  margin-right: 10px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-size: contain;
}
.likeButton:hover, .commentButton:hover, .saveButton:hover, .shareButton:hover {
  border: 1px solid #1d1d1d;
}
.likeButton:hover span, .commentButton:hover span, .saveButton:hover span, .shareButton:hover span {
  color: #1d1d1d;
}
.likeButton:active, .commentButton:active, .saveButton:active, .shareButton:active {
  color: #FFF;
  background-color: #1d1d1d;
}
.likeButton:active span, .commentButton:active span, .saveButton:active span, .shareButton:active span {
  color: #FFF;
}
.likeButton:first-child, .commentButton:first-child, .saveButton:first-child, .shareButton:first-child {
  margin-left: 0px;
}
.likeButton:last-child, .commentButton:last-child, .saveButton:last-child, .shareButton:last-child {
  margin-right: 0px;
}

.likeButton:before {
  background-image: url(../img/likeIcon.svg);
}
.likeButton:hover:before {
  background-image: url(../img/likeHoverIcon.svg);
}
.likeButton:active:before {
  background-image: url(../img/likeClickIcon.svg);
}

.commentButton:before {
  background-image: url(../img/commentIcon.svg);
}
.commentButton:hover:before {
  background-image: url(../img/commentHoverIcon.svg);
}
.commentButton:active:before {
  background-image: url(../img/commentClickIcon.svg);
}

.saveButton:before {
  background-image: url(../img/saveIcon.svg);
}
.saveButton:hover:before {
  background-image: url(../img/saveHoverIcon.svg);
}
.saveButton:active:before {
  background-image: url(../img/saveClickIcon.svg);
}

.shareButton:before {
  background-image: url(../img/shareIcon.svg);
}
.shareButton:hover:before {
  background-image: url(../img/shareHoverIcon.svg);
}
.shareButton:active:before {
  background-image: url(../img/shareClickIcon.svg);
}

.likeButtonClick, .saveButtonClick, .commentButtonClick {
  background-color: #1d1d1d;
  border: 1px solid #1d1d1d;
  color: #fff;
}
.likeButtonClick span, .saveButtonClick span, .commentButtonClick span {
  color: #FFF;
}
.likeButtonClick:hover:before, .saveButtonClick:hover:before, .commentButtonClick:hover:before {
  background-image: url(../img/likeClickIcon.svg);
}
.likeButtonClick:hover span, .saveButtonClick:hover span, .commentButtonClick:hover span {
  color: #FFF;
}
.likeButtonClick:before, .saveButtonClick:before, .commentButtonClick:before {
  background-image: url(../img/likeClickIcon.svg);
}

.commentButtonClick:hover:before {
  background-image: url(../img/commentClickIcon.svg);
}
.commentButtonClick:before {
  background-image: url(../img/commentClickIcon.svg);
}

.saveButtonClick:hover:before {
  background-image: url(../img/saveClickIcon.svg);
}
.saveButtonClick:before {
  background-image: url(../img/saveClickIcon.svg);
}

/*編輯器字體設定*/
.postContentEditor {
  margin-bottom: 30px;
}
.postContentEditor h2, .postContentEditor h3, .postContentEditor h4, .postContentEditor h5, .postContentEditor p, .postContentEditor span {
  color: #424242;
  font-family: Tahoma;
}
.postContentEditor h4, .postContentEditor h5 {
  font-weight: 700;
}
.postContentEditor h6 {
  font-size: 12px;
  color: #cec6ce;
  font-family: Tahoma;
}
.postContentEditor p {
  margin-bottom: 5px;
}

/*社群分享*/
#shareModal, #memberInvite, .shareModal {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  position: fixed;
}
#shareModal .modal-content, #memberInvite .modal-content, .shareModal .modal-content {
  padding: 20px 40px;
  border-radius: 10px;
  -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.16);
          box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.16);
}
#shareModal .modal-body, #memberInvite .modal-body, .shareModal .modal-body {
  text-align: left;
  padding: 15px 0;
}
#shareModal .modal-header, #memberInvite .modal-header, .shareModal .modal-header {
  padding: 5px 0;
}
#shareModal .modalSubTitle, #memberInvite .modalSubTitle, .shareModal .modalSubTitle {
  font-size: 18px;
}
#shareModal .shareCloseBtn, #shareModal .memberInviteCloseBtn, #memberInvite .shareCloseBtn, #memberInvite .memberInviteCloseBtn, .shareModal .shareCloseBtn, .shareModal .memberInviteCloseBtn {
  height: 20px;
  width: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../img/closeIcon.svg);
  display: block;
  margin-top: 10px;
}
#shareModal .facebookShareBtn, #shareModal .lineShareBtn, #memberInvite .facebookShareBtn, #memberInvite .lineShareBtn, .shareModal .facebookShareBtn, .shareModal .lineShareBtn {
  display: inline-block;
  text-align: left;
  height: 50px;
  width: 50px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../img/facebookShareIcon.png);
}
#shareModal .facebookShareBtn:hover, #shareModal .lineShareBtn:hover, #memberInvite .facebookShareBtn:hover, #memberInvite .lineShareBtn:hover, .shareModal .facebookShareBtn:hover, .shareModal .lineShareBtn:hover {
  background-image: url(../img/facebookShareHoverIcon.png);
}
#shareModal .lineShareBtn, #memberInvite .lineShareBtn, .shareModal .lineShareBtn {
  margin-left: 10px;
  background-image: url(../img/lineShareIcon.png);
}
#shareModal .lineShareBtn:hover, #memberInvite .lineShareBtn:hover, .shareModal .lineShareBtn:hover {
  background-image: url(../img/lineShareHoverIcon.png);
}
#shareModal .copyLink, #memberInvite .copyLink, .shareModal .copyLink {
  padding: 5px 20px;
  border: 1px solid #8CCCCC;
  border-radius: 5px;
  width: 80%;
}
#shareModal .copyLinkBtn, #memberInvite .copyLinkBtn, .shareModal .copyLinkBtn {
  padding: 5px 20px;
  background-color: #1d1d1d;
  color: #FFF;
  border: 1px solid #1d1d1d;
  border-radius: 5px;
  -webkit-appearance: none;
}

.content-copy-link-complete-img {
  height: 80px;
  width: 80px;
}

.content-copy-link-complete-text {
  font-size: 18px;
  font-weight: 500;
  margin-top: 8px;
}

/*作者區塊*/
.postAuthorBlock {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  padding: 30px 50px;
  margin-top: 30px;
  border: 1px solid #836fff;
  border-radius: 10px;
}

.postYoutubeAuthorBlock {
  margin-top: 0px;
}

.postAuthorImageBlock {
  -webkit-box-flex: 30%;
  -ms-flex: 30%;
  flex: 30%;
}

.postAuthorImage {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 190px;
  height: 190px;
  border-radius: 100%;
}

.postAuthorContent {
  -webkit-box-flex: 70%;
  -ms-flex: 70%;
  flex: 70%;
  margin-left: 30px;
}

.postAuthorTitle {
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 0;
}

.postAuthorName {
  font-size: 28px;
  font-weight: 400;
  color: #836fff;
}

.postAuthorIntor {
  text-overflow: ellipsis;
  margin-bottom: 0;
}

/*延伸閱讀區塊*/
.readAroundBlock {
  margin-top: 30px;
}

.readAroundTitle, .surveyTitle {
  font-size: 18px;
  color: #836fff;
}

.readAroundPost ul {
  padding-left: 0;
}

.readAroundPostTitle {
  list-style: none;
  font-family: "Noto Serif TC";
  font-size: 16px;
  font-weight: 500;
  color: #1d1d1d;
  line-height: 1.5;
  letter-spacing: 1.5px;
  margin: 5px 0;
  text-overflow: ellipsis;
}
.readAroundPostTitle:hover {
  color: #836fff;
}
.readAroundPostTitle:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background-color: #836fff;
  margin-right: 10px;
}

/*文章標籤*/
.postTag {
  margin-top: 30px;
}
.postTag ul {
  padding-left: 0;
}

.postTagTilte {
  font-size: 16px;
  display: inline-block;
  margin-right: 10px;
  margin-bottom: 10px;
  padding: 4px 16px;
  color: #1d1d1d;
  border: 1px solid #1d1d1d;
  border-radius: 6px;
}
.postTagTilte:hover {
  color: #FFF;
  background-color: #1d1d1d;
}

/*留言區塊*/
.commentSection {
  margin-bottom: 30px;
  position: relative;
}

.commentTilte {
  font-size: 18px;
}

.commentImage {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../img/navbar/MemberLoginIcon.svg);
  background-color: #727272;
  border-radius: 100%;
  height: 80px;
  width: 80px;
  position: relative;
  z-index: 200;
}

.commentLine {
  height: 100%;
}
.commentLine:before {
  content: "";
  display: block;
  position: absolute;
  height: calc(100% - 90px);
  border-left: 1px solid #BBBBBB;
  left: 40px;
  top: 100px;
  z-index: 10;
}
.commentLine:last-child:before {
  border-left: 0px solid #BBBBBB;
}

.commentUser {
  margin-left: 15px;
  width: calc(100% - 80px);
}

.commentAuthorName {
  font-weight: 400;
  margin-bottom: 5px;
  font-size: 24px;
}

.commentContent {
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.commentTime {
  font-size: 14px;
}

.commentReply {
  cursor: pointer;
  margin-left: 5px;
  font-weight: 400;
}
.commentReply:hover {
  color: #1d1d1d;
}

.commentReplySections .commentReplySection {
  position: relative;
  margin-top: 20px;
  border-bottom: 1px solid #BBBBBB;
}
.commentReplySections .commentReplySection:first-child {
  margin-top: 30px;
}
.commentReplySections .commentReplySection:last-child {
  border-bottom: 0px solid #BBBBBB;
}
.commentReplySections .commentReplySection:last-child .commentTime {
  padding-bottom: 0px;
}

.commentReplySection .commentImage {
  height: 60px;
  width: 60px;
}
.commentReplySection .commentAuthorName {
  font-size: 20px;
}
.commentReplySection .commentTime {
  padding-bottom: 20px;
}

.commentbtn {
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  margin: 5px 0;
  color: #000000;
  letter-spacing: 1.5px;
  text-decoration: none;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  position: relative;
  margin-top: 20px;
  padding: 0;
}
.commentbtn:before, .commentbtn:after {
  position: absolute;
  top: 50%;
  content: "";
  display: inline-block;
  height: 1px;
  background-color: #BBBBBB;
  width: 43%;
}
.commentbtn:hover {
  color: #836fff;
}
.commentbtn:before {
  left: 0px;
}
.commentbtn:after {
  right: 0px;
}

.commentEdit {
  position: absolute;
  right: 0px;
  top: 0px;
  cursor: pointer;
}
.commentEdit:hover {
  color: #1d1d1d;
}

.commentEditBlock {
  border: 1px solid #BBBBBB;
  border-radius: 5px;
  position: absolute;
  width: 100px;
  right: 0px;
  top: 20px;
  overflow: hidden;
  background-color: #fff;
  -webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.16);
  z-index: 1;
}
.commentEditBlock h6 {
  cursor: pointer;
  color: #1d1d1d;
  padding: 10px 20px;
  margin-bottom: 0;
  font-weight: 400;
}
.commentEditBlock h6:first-child {
  border-bottom: 1px solid #BBBBBB;
}
.commentEditBlock h6:hover {
  background-color: #F5F5F5;
}

.commentFormControl {
  margin-top: 15px;
}
.commentFormControl:focus {
  border-color: #1d1d1d;
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0);
          box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0);
}

.btnEdit {
  margin-top: 8px;
  background-color: #1d1d1d;
  padding: 5px 20px;
}
.btnEdit:hover {
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/*查看更多按鈕*/
.postbtn {
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  margin: 5px 0;
  color: #000000;
  letter-spacing: 1.5px;
  text-decoration: none;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  position: relative;
  margin: 0;
  padding: 0;
}
.postbtn:hover {
  color: #836fff;
}
.postbtn:before {
  position: absolute;
  left: -5px;
  top: 50%;
  content: "";
  display: inline-block;
  width: 45%;
  height: 1px;
  background-color: #BBBBBB;
}
.postbtn:after {
  position: absolute;
  left: -5px;
  top: 50%;
  content: "";
  display: inline-block;
  width: 45%;
  height: 1px;
  background-color: #BBBBBB;
  right: -5px;
  top: 50%;
  left: auto;
}

/*廣告區塊*/
.advertiseBlock {
  padding: 20px 0;
  margin-top: 50px;
}

@media (max-width: 767px) {
  .advertiseBlock .container {
    padding-left: 0px;
    padding-right: 0px;
  }
}
.advertiseBlock .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}
.advertiseBlock .container img {
  max-width: 500px;
}

.mt0 {
  margin-top: 0;
}

.postAdvertiseBlock {
  height: 100%;
}
.postAdvertiseBlock .postAdvertise {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: calc(100% - 30px);
}

.postAdvertiseImage img {
  width: 100%;
}
.postAdvertiseImage img:hover {
  border-radius: 10px;
}

.postAdvertiseBlock .couponAdvertise {
  height: calc(100% - 15px);
}

/*關於我們*/
#aboutus {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: relative;
  text-align: center;
  padding: 40px 15px;
  margin-top: 50px;
  background-image: url(../img/aboutusbg.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
#aboutus:after {
  height: 100%;
  width: 100%;
  content: "";
  display: blcok;
  position: absolute;
  z-index: 100;
  background-color: rgba(0, 0, 0, 0.5);
}
#aboutus .logo, #aboutus .content, #aboutus .aboutusTitle {
  position: relative;
  z-index: 101;
}
#aboutus .logo h2, #aboutus .content h2, #aboutus .aboutusTitle h2 {
  font-size: 36px;
  font-weight: 500;
  color: #FFF;
  margin-bottom: 15px;
}
#aboutus .logo img, #aboutus .content img, #aboutus .aboutusTitle img {
  margin-bottom: 30px;
}
#aboutus .logo p, #aboutus .content p, #aboutus .aboutusTitle p {
  color: #FFF;
  margin-bottom: 0;
}

/*表單*/
.formBlock {
  background-color: #E5E5E5;
  padding: 80px 0 120px;
}

.formContent {
  width: 500px;
  padding: 0 50px 15px;
  border: solid 1px rgba(0, 0, 0, 0);
  border-radius: 10px;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  background-color: #fff;
}

.KeepLogin {
  margin-top: -5px;
}

.loginBlock button.btn, .registerBlock button.btn, .passwordForgotBlock button.btn {
  width: 100%;
  background-color: #1d1d1d;
  margin-top: 10px;
  margin-bottom: 10px;
}

.loginBlock button.btn:hover, .registerBlock button.btn:hover, .passwordForgotBlock button.btn:hover {
  background-color: #000000;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.facebookLogin, .instagramLogin {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  position: relative;
  margin-top: 10px;
  height: 36px;
  border-radius: 5px;
  color: #FFF;
  background-color: #3D6AD6;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.facebookLogin:before, .instagramLogin:before {
  content: "";
  position: absolute;
  display: inline-block;
  height: 23px;
  width: 23px;
  left: 20px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../img/FacebookLogin.svg);
}

.facebookLogin:hover {
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}

.instagramLogin {
  background: #f09433;
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
}
.instagramLogin:hover {
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}
.instagramLogin:before {
  background-image: url(../img/InstagramLogin.svg);
}

.loginOther .container.containerForm .forgotPassWord, .loginOther .container.containerForm .register {
  color: #727272;
  font-weight: 400;
  font-size: 16px;
  text-align: center;
  margin-top: 40px;
  display: block;
}
.loginOther .container.containerForm .forgotPassWord:hover, .loginOther .container.containerForm .register:hover {
  color: #1d1d1d;
}

/*搜尋頁面*/
.searchTitle {
  font-family: "Noto Serif TC";
  text-align: center;
  margin-bottom: 20px;
}

.searchFailBlock {
  text-align: center;
}
.searchFailBlock .searchFailEng {
  font-size: 160px;
  font-weight: 400;
  margin: 80px 0;
}

/*會員頁面*/
.profileBlock {
  padding: 145px 0 120px;
}

.profileContent {
  width: 600px;
  padding: 100px 30px 30px;
  border: solid 1px rgba(0, 0, 0, 0);
  border-radius: 10px;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  position: relative;
  text-align: center;
}

.profileImgBlock {
  height: 150px;
  width: 150px;
  background-image: url(../img/navbar/MemberLoginIcon.svg);
  background-color: #BBBBBB;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  top: 0px;
  border-radius: 100%;
}

.profileName {
  text-align: center;
  color: #1d1d1d;
}

.profileBirth {
  font-weight: 300px;
}

.profileIntro {
  margin: 20px 0 30px;
}

.profileBlock .editProfile button.btn, .profileBlock .logout button.btn {
  width: 100%;
}

/*編輯會員頁面*/
.profileEditContent {
  width: 1000px;
  padding: 30px 30px 30px 10px;
}

.profileImagesUpload {
  position: relative;
}

.profileBannerEdit {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 200px;
  width: 100%;
  background-image: url(../img/aboutusbg.jpg);
  background-color: #BBBBBB;
  border-radius: 10px 10px 0 0;
}

.uploadImgBlock [type=file], .uploadBannerBlock [type=file] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  width: 100%;
}

.uploadBannerBlock {
  position: absolute;
  right: 12px;
  bottom: 8px;
  margin: 0;
  padding: 8px 16px;
  color: #FFFFFF;
  background-color: #1d1d1d;
  border: 1px solid #FFFFFF;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}
.uploadBannerBlock img {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  margin-bottom: 4px;
}

@media (max-width: 767.98px) {
  .uploadBannerBlock {
    border-radius: 100px;
    height: 36px;
    width: 36px;
    padding: 0;
  }
  .uploadBannerBlock img {
    position: relative;
    left: 50%;
    top: 34%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    margin-right: 0px;
    margin-bottom: 0px;
  }
}
.profileImg {
  position: absolute;
  top: 120px;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

.mb100 {
  margin-bottom: 100px;
}

.profileImgEdit {
  height: 120px;
  width: 120px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../img/navbar/MemberLoginIcon.svg);
  background-color: #BBBBBB;
  border-radius: 100%;
  margin: 0 auto;
}

.uploadImgBlock {
  position: absolute;
  bottom: 0px;
  right: 0px;
  margin: 0;
  height: 36px;
  width: 36px;
  background-color: #1d1d1d;
  border: 1px solid #FFFFFF;
  border-radius: 100px;
  cursor: pointer;
}
.uploadImgBlock img {
  position: relative;
  left: 50%;
  top: 35%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.profileEditMenu ul {
  padding: 0;
}
.profileEditMenu li {
  list-style: none;
  padding: 8px 0 8px 10px;
  margin-left: 10px;
  border-bottom: 1px solid #BBBBBB;
}
.profileEditMenu .pdt0 {
  padding-top: 0;
}
.profileEditMenu .active {
  color: #836fff;
}

.mbmenu {
  display: none;
}

.passwordSendIcon {
  width: 300px;
  display: block;
  margin: 20px auto 15px;
}

.editBlock {
  margin-top: 10px;
}

.btn-dark {
  background-color: #1d1d1d;
}
.btn-dark:hover {
  background-color: #000000;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

.btn-outline-dark {
  background-color: #FFF;
}
.btn-outline-dark:hover {
  background-color: #1d1d1d;
  -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/*條款頁面*/
.termsBannerTitle {
  font-size: 80px;
  margin: 0;
  padding: 0;
  color: #fff;
  font-weight: 400;
}

.termsBannerSubTitle {
  font-size: 36px;
  margin: 0;
  padding: 0;
  color: #fff;
}

#terms #bannersection {
  position: relative;
}
#terms #bannersection .termsContain {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 300px;
  background-image: url(../img/aboutusbg.jpg);
  opacity: 1;
  margin-bottom: 30px;
}
#terms #bannersection .termsContain:after {
  height: 100%;
  width: 100%;
  content: "";
  display: blcok;
  position: absolute;
  z-index: 1;
  background-color: rgba(16, 16, 15, 0.5);
}
#terms #bannersection .termsContain .termsTitleControl {
  position: relative;
  z-index: 2;
  text-align: center;
}

@media (max-width: 1050px) {
  .container {
    max-width: 100%;
  }

  .formContent, .profileContent {
    width: 500px;
  }

  .profileEditContent {
    width: 95%;
  }

  .swiper-button-next, .swiper-button-prev {
    display: none;
  }
}
@media (max-width: 767px) {
  .formContent {
    width: 100%;
  }

  #slider .swiper-slide {
    font-size: 10px;
  }
  #slider .swiper-slide .swiper-button-next, #slider .swiper-slide .swiper-button-prev, #slider .swiper-slide .pcbanner {
    display: none;
  }
  #slider .swiper-slide .mbbanner {
    display: block;
  }

  #youtubepost .swiper-button-next, #youtubepost .swiper-button-prev {
    display: none;
  }
  #youtubepost .saveBlock {
    right: 10px;
    bottom: 24px;
  }

  /*九大分類區塊*/
  .categoryBlock, .categoryListBlock {
    margin-top: 30px;
  }

  /*九大分類標題*/
  .categoryTitle {
    font-size: 24px;
    line-height: 1;
    letter-spacing: 1px;
    margin: 0px 10px 10px 0px;
  }

  .categorySubTitle {
    font-size: 16px;
  }

  /*文章卡片區塊*/
  .postCard {
    height: 100%;
  }
  .postCard:hover {
    -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);
    border-radius: 0px;
  }
  .postCard:hover .postImage:hover {
    border-radius: 0;
  }

  .postCard430, .postCard590 {
    position: static;
  }

  .postCard-first, .postCard-other {
    margin-bottom: 20px;
  }

  .postCard-content {
    padding: 0;
  }

  .postCard-first {
    padding: 0;
  }
  .postCard-first .postCard .postImage450 {
    height: 300px;
  }
  .postCard-first .postCard .postContent {
    padding: 0px 10px;
  }

  .postCard-other .postCard {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #BBBBBB;
  }
  .postCard-other .postCard .postImage {
    -webkit-box-flex: 30%;
    -ms-flex: 30%;
    flex: 30%;
    height: 120px;
    width: 120px;
  }
  .postCard-other .postCard .postContent {
    -webkit-box-flex: 70%;
    -ms-flex: 70%;
    flex: 70%;
    margin-left: 10px;
  }

  .postCard-Content {
    display: none;
  }

  .categoryLessBlock .postCard-other:nth-child(n+5) {
    display: block;
  }

  .categoryBlock .postCard-other:nth-child(n+7), .categoryLessBlock .postCard-other:nth-child(n+7) {
    display: none;
  }

  .categoryMoreBlock .postCard-other {
    display: block;
  }

  #posts > .container:not(:first-child) {
    margin-top: 20px;
  }

  .shadow2:hover {
    -webkit-box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.16);
            box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.16);
  }

  .postCardCalc1 {
    height: calc(100% + 10px);
  }

  /*文章標題*/
  .postTitle-first {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 1.5px;
  }

  .metaBlock {
    position: static;
    display: inline-block;
  }

  .saveBlock {
    display: inline-block;
    right: 0px;
    bottom: initial;
  }

  .collectionSaveBlock {
    right: 10px;
  }

  .postCard-first .saveBlock {
    right: 9px;
  }

  #youtubepost .metaBlock {
    position: absolute;
    bottom: 20px;
    left: 0;
  }

  .meta {
    font-size: 12px;
    margin-bottom: 0;
  }

  /*文章內頁*/
  .postContentImage {
    margin: 0 0 30px;
  }
  .postContentImage iframe {
    height: 250px;
  }

  .postContentTitleBlock {
    margin: 0 10px 10px;
  }

  /*互動按鈕*/
  .postContentInteractive {
    text-align: left;
  }

  .likeButton, .commentButton, .saveButton, .shareButton {
    font-size: 14px;
    padding: 5px 10px;
    margin: 0 2px;
    -webkit-appearance: none;
  }
  .likeButton span, .commentButton span, .saveButton span, .shareButton span {
    margin-left: 5px;
  }
  .likeButton:before, .commentButton:before, .saveButton:before, .shareButton:before {
    width: 12px;
    height: 11px;
    margin-right: 5px;
  }

  .shareButton {
    position: absolute;
    right: 10px;
  }

  /*社群分享*/
  #shareModal .copyLink, #shareModal .copyLinkBtn, #memberInvite .copyLink, #memberInvite .copyLinkBtn {
    width: 100%;
  }
  #shareModal .copyLinkBtn, #memberInvite .copyLinkBtn {
    margin-top: 8px;
  }

  /*作者區塊*/
  .postAuthorBlock {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 20px 15px;
  }

  .postAuthorImageBlock {
    -webkit-box-flex: 100%;
    -ms-flex: 100%;
    flex: 100%;
  }

  .postAuthorImage {
    width: 160px;
    height: 160px;
  }

  .postAuthorContent {
    -webkit-box-flex: 100%;
    -ms-flex: 100%;
    flex: 100%;
    margin-left: 0px;
    text-align: center;
  }

  .postAuthorTitle {
    margin-top: 20px;
  }

  /*留言區塊*/
  .commentSection {
    margin-bottom: 20px;
  }

  .commentImage {
    height: 50px;
    width: 50px;
  }

  .commentLine:before {
    height: calc(100% - 50px);
    left: 25px;
    top: 60px;
  }

  .commentUser {
    margin-left: 10px;
    width: calc(100% - 50px);
  }

  .commentAuthorName {
    font-size: 18px;
  }

  .commentReplySection {
    margin-top: 15px;
  }
  .commentReplySection:first-child {
    margin-top: 15px;
  }
  .commentReplySection .commentImage {
    height: 40px;
    width: 40px;
  }
  .commentReplySection .commentAuthorName {
    font-size: 18px;
  }
  .commentReplySection .commentTime {
    padding-bottom: 10px;
  }

  .commentbtn {
    margin-top: 10px;
  }
  .commentbtn:before, .commentbtn:after {
    width: 38%;
  }

  .commentEdit {
    top: -5px;
  }

  .commentFormControl {
    margin-top: 10px;
  }

  .btnEdit {
    width: 100%;
  }

  /*查看更多按鈕*/
  .postbtn:before, .postbtn:after {
    width: 38%;
  }

  /*廣告區塊*/
  .advertiseBlock {
    margin-top: 20px;
  }
  .advertiseBlock img {
    width: 100%;
  }

  .postAdvertise {
    display: none;
  }

  .mt0 {
    margin-top: 0px;
  }

  /*表單*/
  .formBlock {
    background-color: #E5E5E5;
    padding: 60px 10px 100px;
  }

  .formContent {
    width: 100%;
    padding: 0 10px 15px;
    border: solid 1px rgba(0, 0, 0, 0);
    border-radius: 10px;
    -webkit-box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    background-color: #fff;
  }

  .loginOther .container.containerForm {
    margin-top: 30px;
  }

  /*搜尋頁面*/
  .searchTitle {
    font-size: 24px;
    margin-bottom: 10px;
  }

  .searchFailBlock .searchFailEng {
    font-size: 80px;
    margin: 60px 0;
  }

  /*會員頁面*/
  .profileBlock {
    padding: 145px 10px 100px;
  }

  .profileContent {
    padding: 100px 15px 15px;
  }

  .profileBlock .editProfile button.btn, .profileBlock .logout button.btn {
    margin-top: 5px;
    margin-bottom: 5px;
  }

  .profileEditContent .pcmenu {
    display: none;
  }
  .profileEditContent .mbmenu {
    display: block;
    margin-bottom: 30px;
    border-bottom: 1px solid #BBBBBB;
  }
  .profileEditContent #dropdownProfileMenu {
    width: 100%;
    border-radius: 0;
    -moz-text-align-last: right;
    text-align-last: right;
  }
  .profileEditContent .btnLightGray {
    color: #BBBBBB;
  }
  .profileEditContent .btn:focus {
    -webkit-box-shadow: none;
    box-shadow: none;
  }
  .profileEditContent .active {
    color: #836fff;
  }
  .profileEditContent .dropdown-menu {
    width: 100%;
    padding: 0;
    -webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.15);
  }
  .profileEditContent li {
    padding: 0;
    margin-left: 0px;
    border-bottom: 1px solid #BBBBBB;
  }
  .profileEditContent li:last-child {
    border-bottom: 0px;
  }
  .profileEditContent .dropdown-item {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .profileEditContent .dropdown-item:hover {
    background-color: #fff;
    color: #836fff;
  }

  .passwordSendIcon {
    width: 50%;
    display: block;
    margin: 20px auto 15px;
  }

  .searchFailSubTilte {
    line-height: 1.4;
  }

  .editBlock {
    margin-top: 10px;
  }

  /*條款頁面*/
  #terms #bannersection .termsContain {
    height: 300px;
  }
  #terms #bannersection .termsBannerTitle {
    font-size: 54px;
    line-height: 70px;
  }
  #terms #bannersection .termsBannerSubTitle {
    font-size: 28px;
  }
}
@charset "UTF-8";
/*Colors*/
.white {
  color: #FFFFFF !important;
}

.gray {
  color: #1d1d1d !important;
}

.dgray {
  color: #242424 !important;
}

.mdgray {
  color: #808080 !important;
}

.mgray {
  color: #727272 !important;
}

.lightgrat {
  color: #BBBBBB !important;
}

.red {
  color: #F22D2D !important;
}

.tag-yellow {
  color: #FFDC00;
}
.tag-yellow:hover {
  color: #FFDC00;
}

.linkblue {
  color: #CEDAF2 !important;
}
.linkblue:hover {
  color: #CEDAF2 !important;
  text-decoration: none !important;
}

/*Background*/
.bg-basic {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-333333 {
  background-color: #333333;
}

.bg-dark-gray {
  background: #242424;
}

.bg-gray {
  background: #1d1d1d;
}

@media (max-width: 1098.99px) {
  .bg-tb-gray-1d1d1d {
    background-color: #1d1d1d !important;
  }
}
/*Position*/
.flex-center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.r-0 {
  right: 0 !important;
}

.t-0 {
  top: 0 !important;
}

.t-8px {
  top: 8px !important;
}

/*Spacing*/
.mr-8px {
  margin-right: 8px !important;
}

.mr-16px {
  margin-right: 16px !important;
}

.ml-8px {
  margin-left: 8px !important;
}

.ml-12px {
  margin-left: 12px !important;
}

.mb-16px {
  margin-bottom: 16px !important;
}

.mb-40px {
  margin-bottom: 40px !important;
}

.mt-8px {
  margin-top: 8px !important;
}

.mt-16px {
  margin-top: 16px !important;
}

.mt-24px {
  margin-top: 24px !important;
}

.mt-50px {
  margin-top: 50px !important;
}

.mt-74px {
  margin-top: 74px !important;
}

.mx-32px {
  margin-left: 32px;
  margin-right: 32px;
}

.pl-12px {
  padding-left: 12px !important;
}

.px-16px {
  padding-left: 16px;
  padding-right: 16px;
}

.py-40px {
  padding-top: 40px;
  padding-bottom: 40px;
}

@media (max-width: 1098.99px) {
  .mb-tb-8px {
    margin-bottom: 8px !important;
  }

  .m-tb-0 {
    margin: 0 !important;
  }
}
@media (max-width: 767.98px) {
  .mr-mb-0 {
    margin-right: 0 !important;
  }

  .ml-mb-0 {
    margin-left: 0 !important;
  }

  .px-mb-4px {
    padding-left: 4px;
    padding-right: 4px;
  }
}
/*Sizing*/
.w-20px {
  width: 20px !important;
}

.w-60px {
  width: 60px;
}

.w-350px {
  width: 350px;
}

.w-400px {
  width: 400px;
}

.w-600px {
  width: 600px;
}

.w-750px {
  width: 750px;
}

.w-mxw-100pc {
  max-width: 100%;
}

.h-20px {
  height: 20px !important;
}

.h-25px {
  height: 25px !important;
}

.h-35px {
  height: 35px !important;
}

.h-37px {
  height: 37px !important;
}

.h-60px {
  height: 60px;
}

.h-200px {
  height: 200px !important;
}

.h-750px {
  height: 750px;
}

@media (max-width: 767.98px) {
  .w-mb-80vw {
    width: 80vw !important;
  }

  .h-mb-250px {
    height: 250px !important;
  }
}
/*Image*/
.object-fit-contain {
  -o-object-fit: contain;
     object-fit: contain;
}

.object-fit-cover {
  -o-object-fit: cover;
     object-fit: cover;
}

/*Border*/
.rounded-5 {
  border-radius: 5px;
}

@media (min-width: 1098.99px) {
  .rounded-pc-5-0-0-0 {
    border-radius: 5px 0px 0px 0px !important;
  }
}
/*Font-Size*/
.fz-14 {
  font-size: 14px !important;
}

.fz-24 {
  font-size: 24px !important;
}

/*Display*/
@media (min-width: 1098.99px) {
  .d-tb-block {
    display: block !important;
  }

  .d-tb-inline-block {
    display: inline-block !important;
  }

  .d-tb-none {
    display: none !important;
  }

  .d-tb-flex {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }

  .d-tb-inline-flex {
    display: -webkit-inline-box !important;
    display: -ms-inline-flexbox !important;
    display: inline-flex !important;
  }
}
/*滑鼠狀態*/
.cursor-pointer {
  cursor: pointer;
}

/*社群所有頁面統一使用*/
.social {
  background-color: #1d1d1d;
}

@media (max-width: 1098.99px) {
  .social {
    padding-bottom: 56px;
  }
}
/*社群首頁*/
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  font-family: sans-serif;
}

#social-index {
  margin-top: 16px;
}

/*社群頁標題*/
.social-index-title-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 8px;
}

.social-index-title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  font-size: 20px;
  color: #FFFFFF;
  margin-bottom: 0;
  margin-left: 8px;
}

.social-index-title-line {
  height: 18px;
  width: 1px;
  margin-left: 8px;
  background-color: #FFFFFF;
}

.social-index-title-hr {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-flex: 1;
      -ms-flex: auto;
          flex: auto;
  height: 1px;
  margin: 0 16px;
  background-color: #FFFFFF;
}

/*動態文章顯示區塊*/
.social-index-grid {
  max-width: 1000px;
  counter-reset: grid-item;
}
.social-index-grid:after {
  content: "";
  display: block;
  clear: both;
}

.social-index-grid-item {
  width: 33%;
}
.social-index-grid-item:before {
  counter-increment: grid-item;
  display: block;
}

.social-post-card {
  cursor: pointer;
  border-radius: 10px;
  margin: 0 4px 8px;
  overflow: hidden;
  background-color: #333333;
}

/*動態文章滑到底*/
.social-post-bottom {
  margin-bottom: 0;
  color: #808080;
}

.social-post-bottom-hr {
  background-color: #808080;
  width: 100px;
  max-width: 100%;
  -webkit-box-flex: initial;
      -ms-flex: initial;
          flex: initial;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 1px;
  margin: 0 8px;
}

/*動態文章影片與圖片區塊*/
.social-post-card-media {
  position: relative;
}

.social-post-card-image-plural, .video_play_fill_black_white {
  position: absolute;
  width: 24px;
  height: 24px;
  right: 10px;
  top: 10px;
}

.social-post-card-video, .social-post-card-image {
  width: 100%;
}

.social-post-card-video::-webkit-media-controls-enclosure {
  display: none;
}

/*動態文章內容區塊*/
.socail-post-card-content {
  padding: 8px 8px 4px;
}

.social-post-card-title {
  font-size: 16px;
  color: #FFFFFF;
  font-weight: 400;
  margin-bottom: 16px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.social-post-card-title:hover {
  color: #FFFFFF;
}

.social-post-card-follow-block {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  margin-bottom: 8px;
}

.social-post-card-follow-pic {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 100px;
}

.social-post-card-follow {
  color: #808080;
  font-size: 14px;
}

.social-post-card-meta-section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.social-post-card-author-block {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 70%;
}

.social-post-card-author-pic {
  width: 20px;
  height: 20px;
  margin-right: 4px;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 100px;
}

.social-post-card-author {
  color: #808080;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.social-post-card-like {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  float: right;
  height: 24px;
}

.social-post-card-unlike-btn, .social-post-card-like-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  height: 16px;
  width: 16px;
  cursor: pointer;
  background-image: url(../img/like_outline_808080.svg);
  background-size: contain;
}

.social-post-card-like-btn {
  background-image: url(../img/like_fill_red.svg);
}

.social-post-card-like-count {
  color: #808080;
  margin-left: 4px;
}

/*新會員卡片*/
.social-post-card-member-block {
  background-color: #FFFFFF;
  position: relative;
}

.social-post-card-member-title {
  position: absolute;
  padding: 4px 12px;
  background-color: #FFDC00;
  left: 0;
  top: 0;
  border-radius: 10px 0 10px 0;
  z-index: 1;
  color: #1d1d1d;
}

.avatar.social-post-card-member-image-block {
  height: 200px;
}

.avatar-pic.social-post-card-member-image {
  height: 140px;
  width: 140px;
  border: 3px solid #FFFFFF;
}

.social-post-card-member-name {
  font-size: 24px;
  font-weight: 400;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  padding: 0 20px;
}

.social-post-card-member-name-description {
  color: #1d1d1d;
}

@media (max-width: 998.99px) {
  .social-index-title-hr {
    margin: 0 12px;
  }
}
@media (max-width: 767.98px) {
  /*社群頁標題*/
  .social-index-title-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin-bottom: 8px;
  }

  .social-index-title {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-flex: initial;
        -ms-flex: initial;
            flex: initial;
    font-size: 20px;
    color: #FFFFFF;
    margin-bottom: 0;
    margin-left: 4px;
  }

  .social-index-title-line {
    height: 18px;
    width: 1px;
    margin-left: 8px;
    background-color: #FFFFFF;
  }

  .social-index-title-hr {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-flex: 1;
        -ms-flex: auto;
            flex: auto;
    height: 1px;
    margin: 0 4px;
    background-color: #FFFFFF;
  }

  /*動態文章內容區塊*/
  .social-index-grid-item {
    width: 50%;
  }

  .social-post-card-title {
    font-size: 14px;
  }

  .social-post-card-follow-block {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .social-post-card-follow-pic {
    width: 12px;
    height: 12px;
  }

  .social-post-card-follow {
    font-size: 12px;
    padding-top: 1px;
  }

  .social-post-card-author-block {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 70%;
  }

  .social-post-card-author-pic {
    width: 16px;
    height: 16px;
  }

  .social-post-card-author {
    font-size: 12px;
    padding-top: 3px;
  }

  .social-post-card-unlike-btn, .social-post-card-like-btn {
    height: 12px;
    width: 12px;
  }

  .social-post-card-like-count {
    font-size: 12px;
    margin-left: 2px;
  }

  /*新會員卡片*/
  .avatar-pic.social-post-card-member-image {
    width: 120px;
    height: 120px;
  }

  .social-post-card-member-name-description {
    font-size: 14px;
  }
}
/*社群首頁-精選會員*/
.social-index-user-block, .social-index-featured-member-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  padding: 8px 12px;
}
.social-index-user-block:hover, .social-index-featured-member-block:hover {
  padding: 8px 12px;
  border-radius: 5px;
  background-color: #333333;
}

.social-index-user-img, .social-index-featured-member-img, .social-tag-list-user-image {
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  height: 50px;
  min-height: 50px;
  max-height: 50px;
  border-radius: 100px;
  -o-object-fit: cover;
     object-fit: cover;
}

.social-index-user-data, .social-index-featured-member-data {
  width: 48%;
  margin-left: 8px;
}

.social-index-user-name, .social-index-featured-member-name {
  font-size: 18px;
  font-weight: 400;
  color: #FFFFFF;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.social-index-user-name:hover, .social-index-featured-member-name:hover {
  color: #FFFFFF;
}

.social-index-user-birthday, .social-index-featured-member-birthday {
  font-size: 14px;
  font-weight: 300;
  color: #BBBBBB;
}

.btn-social-index-user-personal-page, .btn-social-index-featured-member-unfollow, .btn-social-index-featured-member-follow {
  color: #FFDC00;
  font-size: 14px;
  font-weight: 400;
  position: absolute;
  right: 12px;
}
.btn-social-index-user-personal-page:hover, .btn-social-index-featured-member-unfollow:hover, .btn-social-index-featured-member-follow:hover {
  color: #FFDC00;
}

.btn-social-index-featured-member-unfollow {
  color: #FFFFFF;
}
.btn-social-index-featured-member-unfollow:hover {
  color: #FFDC00;
}

.social-index-featured-member-block-title {
  color: #FFFFFF;
  margin-top: 16px;
  margin-bottom: 8px;
  margin-left: 12px;
}

@media (max-width: 992px) {
  .social-index-featured-member-swiper {
    width: 100%;
    height: 100%;
  }

  .social-index-featured-member-block {
    width: 60px !important;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }

  .social-index-featured-member-img {
    width: 60px;
    height: 60px;
    border: 2px solid #FFFFFF;
  }

  .social-index-featured-member-name {
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    width: 60px;
  }
}
/*編輯器-上傳檔案*/
#edit-social-upload .btn-social-upload {
  display: inline-block;
  color: #242424;
  background-color: #FFFFFF;
  padding: 4px 12px;
  cursor: pointer;
  position: relative;
  border-radius: 3px;
}

.edit-social-post-modal input[type=file] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

/*彈跳視窗-取消按紐*/
.btn-edit-social-close-bottom {
  background-color: #242424;
  padding: 8px 16px;
  color: #FFFFFF;
  margin-top: 12px;
  border-radius: 5px;
  border: 0;
}

@media (max-width: 1098.99px) {
  #edit-social-upload .modal-content, #edit-social-upload .btn-edit-social-close-bottom {
    width: 500px !important;
    max-width: 100%;
  }
}
@media (max-width: 767.98px) {
  #edit-social-upload .modal-content, #edit-social-upload .btn-edit-social-close-bottom {
    width: 350px !important;
    max-width: 100%;
  }
}
/*編輯器左右變上下斷點*/
@media (min-width: 1099.99px) {
  .flex-1100-row {
    -webkit-box-orient: horizontal !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: row !important;
            flex-direction: row !important;
  }
}
/*編輯器-影片預覽區塊*/
.video-social-preview-block {
  width: 750px;
  max-width: 100%;
  height: 100%;
  border-right: 1px solid #808080;
}

.video-social-preview {
  height: 650px;
  width: 100%;
  background: #1d1d1d;
}

.video-social-preview-sizing {
  max-width: 100%;
  max-height: 100%;
}

@media (max-width: 1098.99px) {
  .video-social-preview-block {
    width: 750px;
    max-width: 100%;
    height: 100%;
    border-right: 0px solid #808080;
    border-bottom: 1px solid #808080;
  }
}
/*編輯器-圖片預覽區塊*/
.img-social-preview-block {
  width: 750px;
  max-width: 100%;
  border-right: 1px solid #808080;
}

.img-social-preview {
  height: 580px;
  width: 100%;
  background: #1d1d1d;
}
.img-social-preview img, .img-social-preview video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.img-social-preview-bar-swiper {
  height: 70px;
  width: 80%;
}
.img-social-preview-bar-swiper .swiper-slide {
  height: 50px;
  opacity: 0.4;
}
.img-social-preview-bar-swiper .swiper-slide-thumb-active {
  opacity: 1;
}

.img-social-preview-bar-image {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 3px;
}

.btn-delete-social-image {
  width: 15px;
  height: 15px;
  position: absolute;
  z-index: 100;
  border-radius: 100px;
  right: -5px;
  top: -5px;
  background-color: #808080;
  background-image: url(../img/close_outline_white.svg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 55%;
}

.img-social-preview-add {
  height: 50px;
  margin-left: -15px;
}

.swiper-slide {
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media (max-width: 1098.99px) {
  .img-social-preview-block {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #808080;
  }

  .img-social-preview {
    height: 400px;
  }

  .img-social-preview-bar-swiper {
    width: 50%;
  }
}
/*編輯器-撰寫內容頁面*/
.edit-social-block {
  width: 350px;
  max-width: 100%;
  height: 100%;
  position: relative;
  overflow-y: auto;
}

.edit-social-title, .edit-social-content {
  background-color: #242424;
  border: none;
  border-bottom: 1px solid #808080;
  color: #FFFFFF;
  padding: 8px 12px 4px;
  border-radius: 0 !important;
}

.edit-social-title {
  font-size: 18px;
}

.edit-social-title::-webkit-input-placeholder {
  color: #FFFFFF;
}

.edit-social-title::-moz-placeholder {
  color: #FFFFFF;
}

.edit-social-title:-ms-input-placeholder {
  color: #FFFFFF;
}

.edit-social-title::-ms-input-placeholder {
  color: #FFFFFF;
}

.edit-social-title::placeholder {
  color: #FFFFFF;
}

.edit-social-content::-webkit-input-placeholder {
  color: #808080;
}

.edit-social-content::-moz-placeholder {
  color: #808080;
}

.edit-social-content:-ms-input-placeholder {
  color: #808080;
}

.edit-social-content::-ms-input-placeholder {
  color: #808080;
}

.edit-social-content::placeholder {
  color: #808080;
}

.edit-social-title:focus-visible, .edit-social-content:focus-visible {
  outline: #808080 solid 1px;
}

.edit-social-friend, .edit-social-check-in {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  color: #FFFFFF;
  padding: 8px 12px;
  font-size: 18px;
  width: 100%;
  -webkit-appearance: none;
}
.edit-social-friend img, .edit-social-check-in img {
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  float: right;
  height: 15px !important;
  -webkit-appearance: none;
}

.edit-social-friend {
  border-bottom: 1px solid #808080;
}

.edit-social-check-in-suggest-block {
  padding-left: 10px;
}

.edit-social-check-in-suggest {
  cursor: pointer;
  display: inline-block;
  color: #FFFFFF;
  padding: 4px 8px;
  background-color: #333333;
  margin: 4px;
  border-radius: 3px;
  font-size: 14px;
}

@media (max-width: 1098.99px) {
  .edit-social-block {
    height: calc(var(--vh, 1vh) * 70);
    min-height: 100%;
    width: 100%;
    padding: 0 16px 8px;
    margin-bottom: 56px;
  }
  .edit-social-block .edit-social-title:focus-visible, .edit-social-block .edit-social-content:focus-visible {
    outline: #808080 solid 0px;
  }
}
@media (max-width: 767.99px) {
  .edit-social-block {
    height: 100%;
  }
}
/*文章上傳 - 上傳中反饋*/
@-webkit-keyframes bounce {
  from {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  to {
    -webkit-transform: translateY(-75%);
            transform: translateY(-75%);
  }
}
@keyframes bounce {
  from {
    -webkit-transform: translateY(0%);
            transform: translateY(0%);
  }
  to {
    -webkit-transform: translateY(-75%);
            transform: translateY(-75%);
  }
}
.edit-social-post-uploading-animation {
  --height:10px;
  --loader-color: $white;
  --animation-duration:0.5s;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  gap: calc(var(--height) / 2);
  height: calc(var(--height) * 1.75);
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin-bottom: 24px;
}
.edit-social-post-uploading-animation:before, .edit-social-post-uploading-animation:after {
  content: "";
}
.edit-social-post-uploading-animation > div, .edit-social-post-uploading-animation:before {
  height: var(--height);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #FFFFFF;
  -webkit-animation: bounce var(--animation-duration) ease-in-out infinite alternate;
          animation: bounce var(--animation-duration) ease-in-out infinite alternate;
}
.edit-social-post-uploading-animation:after {
  height: var(--height);
  aspect-ratio: 1;
  border-radius: 50%;
  background-color: #FFFFFF;
  -webkit-animation: bounce var(--animation-duration) ease-in-out infinite alternate;
          animation: bounce var(--animation-duration) ease-in-out infinite alternate;
  -webkit-animation-delay: calc(var(--animation-duration) / 2);
          animation-delay: calc(var(--animation-duration) / 2);
}
.edit-social-post-uploading-animation > div {
  -webkit-animation-delay: calc(var(--animation-duration) / 4);
          animation-delay: calc(var(--animation-duration) / 4);
}

/*編輯器公版、文章內頁*/
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

.modal {
  overflow-x: hidden;
  overflow-y: auto;
}

/*針對編輯器所設定的modal-header置頂*/
@media (max-width: 1098.99px) {
  .modal-header-fixed-top {
    position: fixed;
    z-index: 100;
    width: 100%;
  }

  .modal-body-fixed-top {
    margin-top: 47px;
  }
}
.edit-social-post-modal {
  background-color: rgba(0, 0, 0, 0.6);
}

@media (max-width: 998.99px) {
  .edit-social-post-modal {
    height: calc(100% - 56px);
  }
}
.edit-social-post-modal .modal-block {
  max-width: 1100px;
}
.edit-social-post-modal .modal-content {
  border: 0;
  background-color: #242424 !important;
  border-radius: 5px;
}
.edit-social-post-modal .modal-header {
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: solid 1px #808080;
  border-radius: 5px 5px 0 0;
}
.edit-social-post-modal .modal-title {
  width: 100%;
  text-align: center;
  color: #FFFFFF;
}
.edit-social-post-modal .modal-body {
  height: 650px;
  border-radius: 0 0 5px 5px;
}

@media (max-width: 1098.99px) {
  .edit-social-post-modal .modal-body {
    height: 100%;
  }
  .edit-social-post-modal .modal-header, .edit-social-post-modal .modal-body {
    border-radius: 0;
  }
}
@media (max-width: 767.98px) {
  .edit-social-post-modal .modal-body {
    height: 100%;
    padding-top: 40px;
    padding-bottom: 24px;
  }
}
/*彈跳視窗 - 手機版全螢幕公版*/
.social-modal-min-full, .social-modal-personal-page {
  background-color: rgba(0, 0, 0, 0.6);
}
.social-modal-min-full .modal-block, .social-modal-personal-page .modal-block {
  max-width: 600px;
}
.social-modal-min-full .modal-content, .social-modal-personal-page .modal-content {
  border: 0;
  background-color: #242424 !important;
  border-radius: 5px;
  height: 500px;
}
.social-modal-min-full .modal-header, .social-modal-personal-page .modal-header {
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: solid 1px #808080;
  border-radius: 5px 5px 0 0;
}
.social-modal-min-full .modal-title, .social-modal-personal-page .modal-title {
  width: 100%;
  text-align: center;
  color: #FFFFFF;
}
.social-modal-min-full .modal-body, .social-modal-personal-page .modal-body {
  border-radius: 0 0 5px 5px;
}

@media (max-width: 1098.99px) {
  .social-modal-min-full .modal-block, .social-modal-personal-page .modal-block {
    max-width: 100%;
  }
  .social-modal-min-full .modal-body, .social-modal-personal-page .modal-body {
    height: calc(var(--vh, 1vh) * 100 - 56px);
  }
  .social-modal-min-full .modal-header, .social-modal-min-full .modal-body, .social-modal-min-full .modal-content, .social-modal-personal-page .modal-header, .social-modal-personal-page .modal-body, .social-modal-personal-page .modal-content {
    border-radius: 0;
  }
  .social-modal-min-full .modal-content, .social-modal-personal-page .modal-content {
    height: calc(var(--vh, 1vh) * 100 - 56px);
  }
  .social-modal-min-full .modal-dialog-centered, .social-modal-personal-page .modal-dialog-centered {
    -webkit-box-align: stretch;
        -ms-flex-align: stretch;
            align-items: stretch;
  }
}
/*彈跳視窗公版*/
.social-modal {
  background-color: rgba(0, 0, 0, 0.6);
}
.social-modal .modal-content {
  border: 0;
  background-color: #242424 !important;
  border-radius: 5px;
}
.social-modal .modal-title {
  width: 100%;
  text-align: center;
  color: #FFFFFF;
}
.social-modal .modal-body {
  border-radius: 5px !important;
  padding-top: 24px !important;
  padding-bottom: 8px !important;
}
.social-modal .modal-body p {
  margin-top: 4px;
  margin-bottom: 0;
}

@media (max-width: 767.98px) {
  .social-modal .modal-content {
    width: 80vw;
  }
}
/*彈跳視窗-返回按紐*/
.btn-social-back {
  background: none;
  border: 0;
  position: absolute;
  left: 8px;
}

/*彈跳視窗-發佈按紐*/
.btn-social-release {
  position: absolute;
  color: #242424;
  background-color: #FFFFFF;
  padding: 4px 12px;
  right: 8px;
  border: 0;
  border-radius: 3px;
}
.btn-social-release input[type=submit] {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
}

/*彈跳視窗-右上關閉彈跳視窗按紐*/
.btn-edit-social-close {
  position: fixed;
  right: 16px;
  top: 8px;
  opacity: 1;
  -webkit-filter: drop-shadow(6px 6px 20px rgba(0, 0, 0, 0.2));
          filter: drop-shadow(6px 6px 20px rgba(0, 0, 0, 0.2));
  z-index: 1;
}

/*彈跳視窗-右上關閉彈跳視窗Icon*/
.edit-social-close-icon {
  height: 25px;
  width: 25px;
}

/*彈跳視窗-選單按鈕*/
.btn-social-action-sheets-content {
  border: 0;
  border-top: 1px solid #808080;
  background-color: #242424;
  padding: 8px 16px;
  color: #FFFFFF;
  border-radius: 0 0 5px 5px;
}

.btn-social-action-sheets-content:first-child {
  border-radius: 5px;
  border-top: 0;
}

/*彈跳視窗-選單取消按鈕*/
.btn-social-close-action-sheets {
  margin-top: 12px;
  background-color: #242424;
  padding: 8px 16px;
  color: #FFFFFF;
  border-radius: 5px;
  border: 0;
}

/*彈跳視窗-警示取消按鈕*/
.btn-social-close-alerts {
  background-color: #242424;
  padding: 8px 16px;
  color: #FFFFFF;
  margin-top: 12px;
  border: 0;
  border-top: 1px solid #808080;
  border-radius: 0 0 5px 5px;
}

/*彈跳視窗-完成反饋*/
.social-modal-complete {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

.social-modal-complete-img {
  width: 100px;
  height: 100px;
}

.social-modal-complete-text {
  color: #FFFFFF;
  margin-top: 8px;
}

/*文章內頁*/
.social-post .social-post-om-block, #social-personal-page .social-post-om-block, #social-message .social-post-om-block, #social-hashtag .social-post-om-block {
  max-width: 1000px;
  margin: 0 auto;
}
.social-post .social-post-om-content, #social-personal-page .social-post-om-content, #social-message .social-post-om-content, #social-hashtag .social-post-om-content {
  border: 0;
  background-color: #242424 !important;
  border-radius: 5px;
}
.social-post .social-post-om-header, #social-personal-page .social-post-om-header, #social-message .social-post-om-header, #social-hashtag .social-post-om-header {
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: solid 1px #808080;
  border-radius: 5px 5px 0 0;
}
.social-post .social-post-om-title, #social-personal-page .social-post-om-title, #social-message .social-post-om-title, #social-hashtag .social-post-om-title {
  width: 100%;
  text-align: center;
  color: #FFFFFF;
  margin-bottom: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.social-post .social-post-om-body, #social-personal-page .social-post-om-body, #social-message .social-post-om-body, #social-hashtag .social-post-om-body {
  height: calc(var(--vh, 1vh) * 80);
  border-radius: 0 0 5px 5px;
  padding: 0;
}

@media (max-width: 1098.99px) {
  .social-post, #social-personal-page, #social-message, #social-hashtag {
    padding-bottom: 56px;
    background-color: #242424;
    top: 0;
    position: absolute;
    width: 100%;
    min-height: 100%;
    min-height: -moz-available;
    min-height: -webkit-fill-available;
    min-height: fill-available;
    z-index: 200;
  }
  .social-post .social-post-om-body, #social-personal-page .social-post-om-body, #social-message .social-post-om-body, #social-hashtag .social-post-om-body {
    height: 100%;
  }
  .social-post .social-post-om-header, .social-post .social-post-om-body, #social-personal-page .social-post-om-header, #social-personal-page .social-post-om-body, #social-message .social-post-om-header, #social-message .social-post-om-body, #social-hashtag .social-post-om-header, #social-hashtag .social-post-om-body {
    border-radius: 0;
  }
}
@media (max-width: 767.98px) {
  .social-post .social-post-om-body {
    height: 100%;
  }
}
/*文章內頁-影片預覽區塊*/
.social-post-video-block {
  width: 650px;
  max-width: 100%;
  height: 100%;
  border-right: 1px solid #808080;
}

.social-post-video {
  height: calc(var(--vh, 1vh) * 80);
  width: 100%;
  background: #1d1d1d;
}
.social-post-video img, .social-post-video video {
  display: block;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.social-post-video::-webkit-media-controls-enclosure {
  display: none;
}

.video-social-preview-sizing {
  max-width: 100%;
  max-height: 100%;
}

@media (max-width: 1098.99px) {
  .social-post-video-block {
    width: 100%;
    border-right: 0px solid #808080;
    border-bottom: 0px solid #808080;
  }

  .social-post-video {
    max-width: 100%;
    height: 100%;
  }
}
/*文章內頁-圖片*/
.social-post-img-block {
  width: 650px;
  max-width: 100%;
  border-right: 1px solid #808080;
}

.social-post-img {
  height: calc(var(--vh, 1vh) * 80);
  width: 100%;
}
.social-post-img img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.social-post-img .modal-body {
  padding: 0;
}

.social-post-swiper-pagination, .social-notify-report-article-swiper-pagination {
  bottom: 10px;
  position: absolute;
  z-index: 1;
}
.social-post-swiper-pagination .swiper-pagination-bullet, .social-post-swiper-pagination .swiper-pagination-bullet-active-prev-prev, .social-post-swiper-pagination .swiper-pagination-bullet-active-prev, .social-post-swiper-pagination .swiper-pagination-bullet-active-next, .social-post-swiper-pagination .swiper-pagination-bullet-active-next-next, .social-notify-report-article-swiper-pagination .swiper-pagination-bullet, .social-notify-report-article-swiper-pagination .swiper-pagination-bullet-active-prev-prev, .social-notify-report-article-swiper-pagination .swiper-pagination-bullet-active-prev, .social-notify-report-article-swiper-pagination .swiper-pagination-bullet-active-next, .social-notify-report-article-swiper-pagination .swiper-pagination-bullet-active-next-next {
  background-color: rgba(0, 0, 0, 0);
  border: 1px solid #FFFFFF;
  opacity: 1;
}
.social-post-swiper-pagination .swiper-pagination-bullet-active, .social-notify-report-article-swiper-pagination .swiper-pagination-bullet-active {
  background-color: #FFFFFF;
  opacity: 1;
}

@media (max-width: 1098.99px) {
  .social-post-img-block {
    width: 100%;
    border-right: none;
    position: relative;
  }

  .social-post-img {
    height: auto;
    width: 100%;
    position: static;
  }

  .social-post-swiper-pagination {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    bottom: -28px !important;
  }
}
/*文章內頁-內容區塊*/
.social-post-content-block {
  width: 350px;
  max-width: 100%;
  height: calc(var(--vh, 1vh) * 80);
  overflow-y: scroll;
  overflow-x: hidden;
}

.social-post-content-block::-webkit-scrollbar {
  display: none;
}

@media (max-width: 1098.99px) {
  .social-post-content-block {
    height: calc(100% + 48px);
    min-height: 100%;
    width: 100%;
    padding: 0;
  }
}
/*文章內頁-標頭區塊*/
.social-post-header {
  position: relative;
  min-height: 50px;
  max-height: 100%;
  width: 100%;
  padding: 8px 12px;
  border-bottom: 1px solid #808080;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.social-post-author-block {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.social-post-author-img {
  height: 35px;
  width: 35px;
  border-radius: 100px;
  -o-object-fit: cover;
     object-fit: cover;
}

.social-post-author-name, .social-post-check-in {
  font-size: 16px;
  color: #FFFFFF;
  margin-left: 8px;
  margin-right: 12px;
  font-weight: 500;
  display: inline-block;
}
.social-post-author-name:hover, .social-post-check-in:hover {
  color: #FFFFFF;
}

.social-post-check-in {
  font-size: 12px;
}

.social-post-other-block {
  float: right;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.social-post-follow {
  background-color: #333333;
  color: #FFFFFF;
}
.social-post-follow:hover {
  color: #FFFFFF;
}

.social-post-more {
  font-size: 12px;
  color: #FFFFFF;
  padding: 0;
  letter-spacing: 3px;
}
.social-post-more:hover {
  color: rgba(255, 255, 255, 0.5);
}

/*文章內頁-文字內容區塊*/
@media (min-width: 1098.99px) {
  .social-post-body {
    min-height: calc(var(--vh, 1vh) * 100 - 176px);
  }
}
.social-post-body-user {
  position: relative;
  max-height: 100%;
  width: 100%;
  padding: 0px 12px 4px;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.social-post-title, .social-post-content {
  background-color: #242424;
  border: none;
  color: #FFFFFF;
  padding: 12px 12px 4px;
  border-radius: 0 !important;
  font-weight: 300;
}

.social-post-title {
  font-size: 18px;
  font-weight: 400;
  padding-bottom: 0;
}

.social-post-content {
  font-size: 16px;
  padding-top: 0;
  font-weight: 300;
}

@media (max-width: 1098.99px) {
  .social-post-title {
    font-size: 18px;
    padding-top: 0;
  }

  .social-post-content {
    font-size: 16px;
  }
}
/*文章內頁-資訊區塊*/
.social-post-meta {
  color: #808080;
  padding: 0 12px 8px;
  border-bottom: 1px solid #808080;
  font-size: 14px;
  margin-top: 16px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.social-post-date {
  margin-top: 2px;
}

@media (max-width: 1098.99px) {
  .social-post-date {
    margin-top: 6px;
  }
}
.social-post-tag-friend {
  float: right;
  border: 1px solid #808080;
  border-radius: 100px;
  padding: 6px 12px !important;
  cursor: pointer;
  line-height: 100%;
  -webkit-appearance: none;
}
.social-post-tag-friend:hover {
  background-color: #808080;
  color: #242424;
}

/*文章內頁-互動區塊*/
.social-post-interaction-block {
  position: sticky;
  bottom: -1px;
  width: 100%;
  z-index: 1;
}

/*文章內頁-回文提醒區塊*/
.social-post-comment-reply-remind {
  color: #FFFFFF;
  background-color: #1d1d1d;
  border-bottom: 1px solid #808080;
  padding: 4px 0 4px 12px;
}

.social-post-comment-reply-remind-close {
  width: 12px;
  height: 12px;
  float: right;
  margin: 6px 12px;
  cursor: pointer;
}

/*文章內頁-互動按鈕區塊*/
.social-post-interaction {
  width: 100%;
  border-top: 1px solid #808080;
  padding: 12px;
  background-color: #242424;
}

@media (max-width: 1098.99px) {
  .social-post-interaction {
    padding-bottom: 8px;
  }
}
.social-post-like {
  float: left;
  height: 100%;
}

.social-post-unlike-btn, .social-post-like-btn, .social-post-comment-btn, .social-post-share-btn {
  height: 27px;
  width: 27px;
  margin-right: 10px;
}
.social-post-unlike-btn:hover, .social-post-like-btn:hover, .social-post-comment-btn:hover, .social-post-share-btn:hover {
  opacity: 0.6;
}

@media (max-width: 1098.99px) {
  .social-post-unlike-btn, .social-post-like-btn, .social-post-comment-btn, .social-post-share-btn {
    height: 34px;
    width: 34px;
    background-size: contain;
  }
}
.social-post-like-btn {
  background-image: url(../img/like_fill_red_social_post.svg);
}

.social-post-unlike-btn {
  background-image: url(../img/like_outline_white.svg);
}

.social-post-comment-btn {
  background-image: url(../img/comment_outline_white.svg);
}

.social-post-share-btn {
  background-image: url(../img/share_outline_white.svg);
}

.social-post-like-number {
  color: #FFFFFF;
  margin-top: 8px;
  font-size: 14px;
}

@media (max-width: 1098.99px) {
  .social-post-like-number {
    color: #808080;
  }
}
/*文章內頁-留言區塊*/
.social-post-comment-block {
  padding: 0 12px;
  padding-bottom: 12px;
}

@media (max-width: 1098.99px) {
  .social-post-comment-block {
    min-height: 100%;
  }
}
.social-post-comment-count {
  color: #FFFFFF;
  padding: 8px 0 0 12px;
  font-size: 14px;
}

.social-post-comment-single {
  padding-top: 12px;
  padding-bottom: 12px;
  margin-bottom: 0;
}

.social-post-comment-all > .social-post-comment-single:not(:last-child), .social-post-comment-reply-all > .social-post-comment-single:not(:last-child) {
  border-bottom: 1px solid #808080;
}

/* .social-post-comment-single:nth-last-child(-n+2)
 * border-bottom: 0*/
.social-post-comment-user-image {
  width: 50px;
  height: 50px;
  border-radius: 100%;
}

.social-post-comment-user-block {
  margin-left: 12px;
  width: calc(100% - 50px);
}

.social-post-comment-user-name {
  font-size: 18px;
  font-weight: 400;
  color: #808080;
  margin-bottom: 4px;
}

.social-post-comment-edit {
  font-size: 8px;
  float: right;
  cursor: pointer;
  letter-spacing: 3px;
}
.social-post-comment-edit:hover {
  color: #FFFFFF;
}

.social-post-comment-user-content {
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 300;
  margin-bottom: 4px;
  line-height: 1.5;
  letter-spacing: 1px;
}

@media (max-width: 1098.99px) {
  .social-post-comment-user-content {
    font-size: 16px;
  }
}
.social-post-comment-time {
  color: #808080;
  font-size: 14px;
}

.social-post-comment-input-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-top: 8px;
  background-color: #333333;
  border-radius: 100px;
}

.social-post-comment-read-more {
  margin: 0;
  color: #808080;
  font-weight: 300;
  font-size: 14px;
  cursor: pointer;
}
.social-post-comment-read-more:hover {
  color: #FFFFFF;
}
.social-post-comment-read-more:before, .social-post-comment-read-more:after {
  width: 38%;
  background-color: #808080;
}

@media (max-width: 1098.99px) {
  .social-post-comment-read-more:before, .social-post-comment-read-more:after {
    width: 45%;
    background-color: #808080;
  }
}
@media (max-width: 767.99px) {
  .social-post-comment-read-more:before, .social-post-comment-read-more:after {
    width: 38%;
    background-color: #808080;
  }
}
.social-post-comment-input {
  display: inline-block;
  width: 80%;
  background-color: #333333;
  border-radius: 100px;
  padding: 8px 16px;
  color: #FFFFFF;
  border: 0;
  font-size: 14px;
}
.social-post-comment-input:focus-visible {
  outline: 0px;
}

.social-post-comment-submit {
  width: 20%;
  color: #808080;
  background-color: #333333;
  vertical-align: top;
  border-radius: 100px;
  padding: 8px 0;
  border: 0;
  font-size: 14px;
}
.social-post-comment-submit:hover {
  color: #FFFFFF !important;
}

@media (max-width: 1098.99px) {
  .social-post-comment-input, .social-post-comment-submit, .social-post-comment-read-more {
    font-size: 16px;
  }

  .social-post-comment-input {
    width: 90%;
  }

  .social-post-comment-submit {
    width: 10%;
  }
}
@media (max-width: 767.99px) {
  .social-post-comment-input, .social-post-comment-submit, .social-post-comment-read-more {
    font-size: 16px;
  }

  .social-post-comment-input {
    width: 80%;
  }

  .social-post-comment-submit {
    width: 20%;
  }
}
/*文章內頁-回文區塊*/
.social-post-comment-reply {
  color: #808080;
  cursor: pointer;
  margin-left: 8px;
  font-weight: 300;
}
.social-post-comment-reply:hover {
  color: #FFFFFF;
}

.social-post-comment-reply-user-image {
  width: 40px;
  height: 40px;
}

.social-post-comment-reply-user-block {
  margin-left: 8px;
  width: calc(100% - 48px);
}

/*彈跳視窗 - 動態文章分享*/
#social-post-share .social-post-share-modal-cotent {
  padding: 20px;
}
#social-post-share .social-post-share-modal-title {
  text-align: left;
  border-bottom: 1px solid #FFFFFF;
}
#social-post-share .modal-body {
  padding: 0 !important;
  border-radius: 0;
}
#social-post-share .social-post-share-modal-sub-title {
  color: #FFFFFF;
  margin-top: 12px;
  margin-bottom: 4px;
}
#social-post-share .social-post-share-copy-link {
  padding: 4px 8px;
  background-color: #333333;
  border: 0;
  border-radius: 5px;
  width: 84%;
  color: #FFFFFF;
}
#social-post-share .btn-social-post-share-copy-link {
  margin-left: 4px;
  right: 0;
}
#social-post-share .btn-social-post-share-close {
  position: absolute;
  top: 6px;
  right: 0;
  width: 20px;
  height: 20px;
}
#social-post-share .facebookShareBtn {
  background-image: url(../img/facebook_outline_white.svg);
}
#social-post-share .facebookShareBtn:hover {
  background-image: url(../img/facebookShareHoverIcon.png);
}

@media (max-width: 767.99px) {
  #social-post-share .social-post-share-copy-link {
    width: 100%;
  }
  #social-post-share .btn-social-post-share-copy-link {
    width: 100%;
    margin-left: 0px;
    margin-top: 8px;
  }
  #social-post-share .btn-social-post-share-close {
    width: 16px;
    height: 24px !important;
  }
}
/*文章內頁 - 錯誤*/
.social-post-error-block {
  height: calc(var(--vh, 1vh) * 90);
  color: #FFFFFF;
  text-align: center;
}

@media (max-width: 1098.99px) {
  .social-post-error-block {
    height: calc(var(--vh, 1vh) * 100 - 105px);
  }
}
.social-post-error-img {
  margin-bottom: 32px;
  width: 200px;
}

.social-post-error-title {
  font-size: 20px;
  font-weight: 500;
  margin-bottom: 8px;
}

.btn-social-post-error {
  background-color: #FFFFFF;
  color: #1d1d1d;
  padding: 4px 12px;
  border-radius: 5px;
  margin-top: 16px;
}
.btn-social-post-error:hover {
  color: #1d1d1d;
}

.btn-social-post-error-text {
  color: #FFFFFF;
  margin-top: 12px;
}
.btn-social-post-error-text:hover {
  color: #FFDC00;
}

@media (max-width: 767.99px) {
  .social-post-error-img {
    width: 150px;
  }
}
/*檢舉功能*/
.social-post-report-declare-block, .social-notify-report-content-block, .social-personal-page-block, .social-message-select-user-block {
  margin-left: 16px;
  margin-right: 16px;
  padding-top: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid #808080;
}

.social-post-report-options-section {
  overflow: auto;
  height: 272px;
}

.social-notify-report-content-block {
  overflow: auto;
  height: 300px;
  border-bottom: 0px solid #808080;
}

@media (max-width: 1098.99px) {
  .social-notify-report-content-block {
    height: calc(var(--vh, 1vh) * 60);
  }
}
.social-post-report-options-block {
  padding-left: 16px;
  padding-right: 16px;
}

.social-post-report-options {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #808080;
  cursor: pointer;
  -webkit-appearance: none;
}

.social-post-report-options:last-child {
  border-bottom: 0px solid #808080;
}

.social-post-report-last-hr {
  border-bottom: 1px solid #808080;
  margin-bottom: 24px;
}

.social-post-report-title {
  color: #FFFFFF;
  font-size: 18px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.social-post-report-content {
  color: #808080;
  font-size: 16px;
}

.btn-social-post-report-next {
  color: #FFFFFF;
}

.social-post-report-radio {
  width: 15px;
  height: 15px;
  accent-color: #1d1d1d;
}

.social-post-report-user-img {
  height: 40px;
  width: 40px;
  border-radius: 100px;
  -o-object-fit: cover;
     object-fit: cover;
}

.social-post-report-user-name {
  color: #FFFFFF;
  margin-left: 8px;
  font-size: 20px;
}

.social-post-report-form {
  background-color: #242424;
  border: 1px solid #808080;
  margin-bottom: 40px;
}

.social-post-report-user-search {
  background: #333333;
  border: 1px solid #333333;
  color: #FFFFFF;
  padding: 8px 12px 4px;
  border-radius: 5px;
  font-size: 18px;
  margin-top: 8px;
}

.social-post-report-user-search::-webkit-input-placeholder {
  color: #808080;
}

.social-post-report-user-search::-moz-placeholder {
  color: #808080;
}

.social-post-report-user-search:-ms-input-placeholder {
  color: #808080;
}

.social-post-report-user-search::-ms-input-placeholder {
  color: #808080;
}

.social-post-report-user-search::placeholder {
  color: #808080;
}

.btn-social-post-report-block {
  padding-left: 16px;
  padding-right: 16px;
  position: absolute;
  bottom: 4px;
  width: auto;
  right: 0px;
  left: 0px;
  background-color: #242424;
}

.btn-social-post-report {
  margin-top: 8px;
  margin-bottom: 16px;
  padding-top: 4px;
  padding-bottom: 4px;
  border: none;
  background-color: #FFFFFF;
  color: #1d1d1d;
  border-radius: 5px;
  width: 100%;
}

.btn-social-post-report-un-fill-in {
  background-color: rgba(255, 255, 255, 0.3);
}

@media (max-width: 1098.99px) {
  .btn-social-post-report-block {
    bottom: 8px;
  }

  .social-post-report-options-section {
    height: calc(var(--vh, 1vh) * 66);
  }
}
@media (max-width: 1098.99px) and (max-height: 700px) {
  .social-post-report-options-section {
    height: calc(var(--vh, 1vh) * 60);
  }
}
/*社群通知數字*/
.social-notify-count {
  background-color: #F22D2D;
  border-radius: 100%;
  width: 18px;
  height: 18px;
  color: #FFFFFF;
  position: absolute;
  font-size: 12px;
  right: -10px;
  top: -5px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.social-notify-more {
  width: 27px;
  border-radius: 10px;
  right: -16px;
}

@media (max-width: 1098.99px) {
  .social-notify-count {
    right: 18px;
  }

  .social-notify-more {
    right: 10px;
  }

  .social-message-count {
    right: -8px;
  }

  .social-message-count-more {
    right: -16px;
  }
}
/*社群通知彈跳視窗*/
#social-notify-modal {
  background-color: rgba(0, 0, 0, 0);
}

@media (min-width: 1098.99px) {
  #social-notify-modal .modal-content {
    height: 100%;
  }
  #social-notify-modal .modal-body {
    height: calc(var(--vh, 1vh) * 80);
    overflow: auto;
  }
  #social-notify-modal .modal-block {
    max-width: 450px;
    right: -330px;
    top: 20px;
  }
}
.social-notify-list-section {
  overflow: auto;
}

@media (max-width: 1098.99px) {
  .social-notify-list-section {
    height: calc(var(--vh, 1vh) * 100 - 104px);
  }
}
.social-notify-list-block {
  padding-left: 16px;
  padding-right: 16px;
  margin-top: 8px;
  margin-bottom: 8px;
}

.social-notify-list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-top: 8px;
  padding-bottom: 8px;
}
.social-notify-list:hover {
  text-decoration: none;
}

.social-notify-content {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  margin-left: 16px;
}

.social-notify-text-block {
  margin-right: 16px;
}

.social-notify-text {
  color: #FFFFFF;
}

.social-notify-time {
  color: #808080;
}

.social-notify-post-image {
  width: 50px;
  height: 50px;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.social-notify-button {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  right: 0 !important;
  -webkit-appearance: none;
}

/*社群檢舉通知彈跳視窗*/
.social-notify-report-img-block, .social-notify-report-video-block {
  width: 100%;
  margin-top: 8px;
  margin-bottom: 8px;
}

.social-notify-report-img, .social-notify-report-video {
  width: 100%;
  height: 100%;
}

.video-social-preview-sizing::-webkit-media-controls-enclosure {
  display: none;
}

.social-notify-report-article-swiper-pagination {
  position: static;
  margin-top: 10px;
  -webkit-transform: translateX(0) !important;
          transform: translateX(0) !important;
}

.social-post-report-account-user-img {
  width: 80px;
  height: 80px;
  display: block;
  border-radius: 100%;
  margin-top: 8px;
  margin-bottom: 4px;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.social-post-report-account-user-name {
  font-size: 18px;
  color: #FFFFFF;
}

.social-post-report-account-user-intro {
  color: #FFFFFF;
  font-size: 16px;
  margin-bottom: 8px;
}

.social-post-report-grid-item {
  width: 50%;
}

.btn-social-post-report-term {
  background: rgba(0, 0, 0, 0);
  border: 0;
  color: #FFFFFF;
}
.btn-social-post-report-term:hover {
  color: #FFFFFF;
}

/*個人主頁*/
#social-personal-page {
  min-height: 100%;
}

.social-personal-page-block {
  border-bottom: 0px solid #808080;
  padding-top: 0px;
}

.social-personal-page-more {
  position: relative;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  padding-left: 8px;
}

@media (max-width: 1098.99px) {
  .social-personal-page-more {
    -ms-flex-negative: 0;
        flex-shrink: 0;
    right: 8px;
    position: absolute;
  }
}
.social-personal-page-user-traffic-block {
  color: #FFFFFF;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

@media (max-width: 1098.99px) {
  .social-personal-page-user-traffic-block {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
}
.social-personal-page-user-traffic {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 350px;
  margin-top: 24px;
  margin-bottom: 24px;
}

@media (max-width: 1098.99px) {
  .social-personal-page-user-traffic {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
  }
}
.social-personal-page-traffic-number-block {
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
}

.social-personal-page-traffic-name {
  margin-left: 4px;
}

@media (max-width: 1098.99px) {
  .social-personal-page-traffic-name {
    margin-left: 0px;
  }
}
@media (min-width: 1098.99px) {
  .social-personal-page-user-data-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
}
.social-personal-page-user-img {
  width: 140px;
  height: 140px;
  display: block;
  border-radius: 100%;
  margin-right: 24px;
  -o-object-fit: cover;
     object-fit: cover;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.social-personal-page-user-name {
  color: #FFFFFF;
  font-size: 24px;
  margin-right: 8px;
}

@media (max-width: 1098.99px) {
  .social-personal-page-user-name {
    font-size: 16px;
    margin-right: 0;
  }
}
.social-personal-page-user-intro {
  color: #FFFFFF;
  font-size: 16px;
}

@media (max-width: 1098.99px) {
  .social-personal-page-user-intro {
    font-size: 14px;
  }
}
.edit-social-personal-page-name, .edit-social-personal-page-intro {
  background-color: #333333;
  border: none;
  border-radius: 5px;
  margin-top: 4px;
  color: #FFFFFF;
  padding: 8px 12px 4px;
}

@media (max-width: 1098.99px) {
  .social-personal-page-interaction-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    margin-top: 8px;
  }
}
.btn-social-personal-page-interaction {
  -ms-flex-negative: 0;
      flex-shrink: 0;
  right: 0;
  font-size: 14px;
}

@media (max-width: 1098.99px) {
  .btn-social-personal-page-interaction {
    width: 50%;
    margin-right: 4px;
    -ms-flex-negative: 1;
        flex-shrink: 1;
  }
}
.btn-social-personal-page-interaction:last-child {
  margin-right: 0;
}

.social-personal-page-no-articles-block {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: 300px;
}
.social-personal-page-no-articles-block img {
  width: 120px;
}

@media (max-width: 1098.99px) {
  .social-personal-page-no-articles-block {
    height: calc(var(--vh, 1vh) * 70);
  }
}
.social-modal-user-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-right: 8px;
}

.social-modal-follow-block {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

.social-modal-user-options-section {
  height: 453px;
}

@media (max-width: 1098.99px) {
  .social-modal-user-options-section {
    height: calc(100% - 50px);
  }
}
/*私訊頁*/
.social-message-header, .social-message-chat-header {
  border-radius: 5px 0 0 0 !important;
  width: 400px;
  padding-left: 16px;
  padding-right: 16px;
}

.social-message-chat-header {
  width: 600px;
  border-radius: 0 5px 0 0 !important;
}

@media (max-width: 1098.99px) {
  .social-message-header, .social-message-chat-header {
    width: 100%;
    border-radius: 0;
  }
}
.social-message-edit {
  width: 22px;
}

.social-message-list-page {
  width: 400px;
  border-right: 1px solid #808080;
  display: inline-block;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

@media (max-width: 1098.99px) {
  .social-message-list-page {
    border-right: 0px;
    width: 100%;
  }
}
.social-message-search-block, .social-message-list {
  border-bottom: 0px;
}

.social-message-list {
  padding-left: 16px;
  padding-right: 16px;
}

@media (max-width: 1098.99px) {
  .social-message-list {
    padding-left: 0px;
    padding-right: 0px;
    margin-left: 16px;
    margin-right: 16px;
    border-bottom: 1px solid #808080;
  }

  .social-message-list:nth-last-child(-n+2) {
    border-bottom: 0px;
  }
}
.social-message-list-section {
  overflow-y: auto;
  overflow-x: hidden;
  height: calc(100% - 74px);
}

.social-message-logs-content, .social-message-logs-user-name {
  color: #808080;
  margin-left: 8px;
  font-size: 14px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  width: 250px;
  max-width: 80%;
}

.social-message-logs-user-name {
  color: #FFFFFF;
  font-size: 18px;
  margin-bottom: -4px;
}

.social-message-more {
  color: #808080;
  font-size: 24px;
}

.social-no-message {
  width: 120px;
}

/*沒有搜尋結果*/
.social-message-list-search-not {
  text-align: center;
  color: #808080;
  font-size: 14px;
}

/*撰寫新私訊 - 彈跳視窗*/
.social-message-edit-section {
  height: 204px;
}

.social-message-edit-form {
  background-color: #242424;
  border: 1px solid #808080;
  color: #FFFFFF;
  border-radius: 5px;
  font-size: 18px;
  margin-top: 8px;
  width: 100%;
  padding: 8px;
}

.social-message-edit-form::-webkit-input-placeholder {
  color: #808080;
}

.social-message-edit-form::-moz-placeholder {
  color: #808080;
}

.social-message-edit-form:-ms-input-placeholder {
  color: #808080;
}

.social-message-edit-form::-ms-input-placeholder {
  color: #808080;
}

.social-message-edit-form::placeholder {
  color: #808080;
}

@media (max-width: 1098.99px) {
  .social-message-edit-section {
    height: calc(var(--vh, 1vh) * 56);
  }
}
@media (max-width: 1098.99px) and (max-height: 700px) {
  .social-message-edit-section {
    height: calc(var(--vh, 1vh) * 51);
  }
}
input.social-post-report-radio[type=checkbox] {
  accent-color: #1d1d1d;
}

.social-message-select-user-block {
  border-bottom: 0px;
  padding-top: 0;
  max-height: 72px;
  overflow: auto;
}

.social-message-select-user {
  color: #FFFFFF;
  display: inline-block;
  background: url(../img/close_outline_white.svg) center right no-repeat;
  background-size: 30% 30%;
  background-position-x: 105%;
  background-color: #333333;
  padding: 4px 25px 4px 10px;
  cursor: pointer;
  border-radius: 5px;
  margin: 0 8px 8px 0;
}

/*私訊聊天室窗*/
.social-message-chat-block {
  height: 100%;
  width: 600px;
  max-width: 100%;
  position: relative;
  background-color: #242424;
}

.social-message-chat-content-block {
  padding: 0px 16px 16px;
  overflow-y: auto;
  overflow-x: hidden;
}

/*私訊聊天時間區塊*/
.social-message-chat-time {
  color: #808080;
  text-align: center;
  font-size: 14px;
  padding: 12px 0;
}

@media (max-width: 1098.99px) {
  .social-message-chat-time {
    font-size: 12px;
  }
}
/*私訊分享按鈕*/
.social-message-chat-share-block {
  border-radius: 100px;
  background-color: #333333;
  margin-left: 8px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  background-image: url(../img/message_share_outline_white.svg);
  background-size: 16px;
  background-position: center;
  background-repeat: no-repeat;
}

/*私訊使用者區塊*/
.social-message-chat-user, .social-message-chat-personal {
  margin: 8px 0;
}

.social-message-chat-personal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}
.social-message-chat-personal .social-message-chat-content {
  background-color: #FFFFFF;
  color: #1d1d1d;
}

.social-message-chat-user .social-message-chat-content {
  background-color: #333333;
  color: #FFFFFF;
}

.social-message-chat-content-link-title {
  font-size: 14px;
}

.social-message-chat-personal .social-message-chat-content-link-title {
  color: #333333;
}

.social-message-chat-user .social-message-chat-content-link-title {
  color: #FFFFFF;
}

.social-message-chat-content-link-description {
  font-size: 12px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.social-message-chat-user .social-message-chat-content-link-description {
  color: #BBBBBB;
}

.social-message-chat-personal .social-message-chat-content-link-description {
  color: #808080;
}

/*私訊聊天對方大頭照*/
.social-message-chat-user-img {
  width: 32px;
  height: 32px;
  border-radius: 100px;
}

/*私訊區塊樣式*/
.social-message-chat-content {
  display: inline-block;
  margin-left: 8px;
  border-radius: 10px;
  max-width: 250px;
}

@media (max-width: 1098.99px) {
  .social-message-chat-content {
    max-width: 200px;
  }
}
/*私訊傳送文字*/
.social-message-chat-content-part {
  padding: 8px;
  text-align: left;
}

/*私訊傳送文字顏色*/
.social-message-chat-personal .social-message-chat-content-part a {
  color: #836FFF;
}

.social-message-chat-user .social-message-chat-content-part a {
  color: #CEDAF2;
}

/*私訊傳送影片*/
.social-message-chat-content-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  cursor: pointer;
}

.social-message-chat-content-video::-webkit-media-controls-enclosure {
  display: none;
}

.social-message-chat-content-post-user-img {
  width: 24px;
  height: 24px;
  border-radius: 100px;
}

.social-message-chat-content-post-user-name {
  font-size: 14px;
  margin-left: 4px;
}

.social-message-chat-content-post-title {
  padding: 8px;
  font-size: 14px;
}

/*私訊傳送個人主頁*/
.social-message-chat-content-personal-page-img-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 0px 4px 4px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.social-message-chat-content-personal-page-img {
  width: 50%;
  height: 120px;
  padding: 4px;
  border-radius: 10px;
  -o-object-fit: cover;
     object-fit: cover;
}

.social-message-chat-content-personal-page {
  width: 250px;
}

@media (max-width: 1098.99px) {
  .social-message-chat-content-personal-page {
    width: 200px;
  }
}
/*私訊傳送網址*/
.social-message-chat-user-content-link, .social-message-chat-user-content-text a {
  padding-left: 8px;
  padding-right: 8px;
  display: inline-block;
}

.social-message-chat-user-content-link {
  color: #CEDAF2;
}
.social-message-chat-user-content-link:hover {
  color: #CEDAF2;
}

.social-message-chat-user-content-text a {
  color: #836FFF;
}
.social-message-chat-user-content-text a:hover {
  color: #836FFF;
}

.social-message-chat-content-link {
  padding: 8px;
  -moz-text-align-last: left;
       text-align-last: left;
}

/*已讀*/
.social-message-chat-read {
  font-size: 14px;
  color: #BBBBBB;
}

/*私訊輸入框*/
.social-message-chat-input-block {
  position: sticky;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  background-color: #242424;
  padding: 12px 16px 16px;
}

.social-message-chat-input-upload {
  margin-right: 12px;
  width: 28px;
  height: 28px;
  background-image: url(../img/picture_outline_white.svg);
  background-size: contain;
}

.social-message-chat-input {
  width: 88%;
}

@media (max-width: 1098.99px) {
  .social-message-chat-input {
    width: 80%;
  }
}
.social-message-chat-submit {
  width: 12%;
}

@media (max-width: 1098.99px) {
  .social-message-chat-submit {
    width: 20%;
  }
}
@media (max-width: 1098.99px) {
  #social-message-chat-block .modal-content {
    height: calc(var(--vh, 1vh) * 100 - 56px);
  }
}
/*封鎖後輸入框樣式*/
.social-message-chat-input-blockade-block {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 8px 16px;
  color: #FFFFFF;
  background-color: #333333;
}

.social-message-chat-input-blockade-btn-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.social-message-chat-input-blockade-cancel {
  color: #FFFFFF;
}
.social-message-chat-input-blockade-cancel:hover {
  color: #FFFFFF;
}

/*私訊詳情頁*/
.social-message-chat-more-block {
  width: 100%;
}

.social-message-chat-more {
  padding: 16px;
}

.social-message-chat-more-title {
  font-size: 20px;
  color: #FFFFFF;
}

.social-message-chat-more-btn-block {
  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: start;
      -ms-flex-align: start;
          align-items: flex-start;
  padding-top: 8px;
}

.social-message-more-close {
  top: 12px;
}

/*私訊傳送圖片 - 全螢幕預覽*/
.social-message-chat-img-full {
  max-height: calc(var(--vh, 1vh) * 90);
  max-width: 100vw;
  -o-object-fit: contain;
     object-fit: contain;
  background: rgba(0, 0, 0, 0);
}

/*分享彈跳視窗 - 私訊ICON*/
#social-post-share .social-message-share-btn {
  background-image: url(../img/message_share_outline_white_circle.svg);
  cursor: pointer;
}
#social-post-share .social-message-share-btn:hover {
  background-image: url(../img/message_share_outline_white_circle_hover.svg);
}

@media (max-width: 1098.99px) {
  .social-message-chat-block {
    width: 100%;
    position: absolute;
    height: calc(var(--vh, 1vh) * 100 - 97px);
  }
}
/*私訊按鈕與已讀功能放置區塊*/
.social-message-chat-interaction-block {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  height: 100%;
}

/*搜尋功能彈跳視窗*/
.social-search-options-section {
  height: 354px;
}

@media (max-width: 1098.99px) {
  .social-search-options-section {
    height: calc(var(--vh, 1vh) * 100 - 202px);
  }
}
.social-search-check-in-block, .social-search-hashtag-name {
  margin-left: 8px;
  line-height: 1.4;
}

.social-search-check-in-name, .social-search-hashtag-name {
  font-size: 18px;
  color: #FFFFFF;
}

.social-search-check-in-address {
  font-size: 14px;
  color: #808080;
}

.social-search-list-delete-btn {
  height: 16px;
  width: 16px;
  background-image: url(../img/close_outline_808080.svg);
  background-size: auto;
}
.social-search-list-delete-btn:hover {
  background-image: url(../img/close_outline_white.svg);
}

.social-search-list-block {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin: 0px 16px 4px 16px;
}

/*標註與打卡頁*/
.social-hashtag-title-image {
  width: 50px;
  height: 50px;
}

.social-hashtag-content-title, .social-hashtag-content-post-count {
  display: inline-block;
  font-size: 18px;
  margin-left: 16px;
  color: #FFFFFF;
}

.social-hashtag-content-post {
  margin-left: 8px;
}

.social-hashtag-block {
  max-width: 1000px;
  margin: 24px auto;
}

@media (max-width: 1098.99px) {
  .social-hashtag-block {
    margin: 16px;
  }
}
.social-hashtag-no-articles-block, .social-check-in-no-articles-block {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  height: calc(var(--vh, 1vh) * 85);
}

.social-check-in-no-articles-block {
  height: calc(var(--vh, 1vh) * 65);
}

@media (max-width: 1098.99px) {
  .social-check-in-no-articles-block {
    height: calc(var(--vh, 1vh) * 55);
  }
}
.social-check-in-iframe {
  width: 1000px;
  height: 250px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: auto;
  border: 0;
}

/*# @ 選擇視窗*/
.social-tag-block {
  border: 0;
  background-color: #333333;
  padding: 0px 8px;
  max-height: 250px;
  overflow-y: auto;
  position: absolute;
  width: 100%;
  z-index: 1;
}

@media (max-width: 1098.99px) {
  .social-tag-block {
    max-height: 160px;
  }

  .edit-social-tag-block {
    width: calc(100% - 32px);
  }
}
.social-tag-list {
  color: #FFFFFF;
  font-size: 18px;
  border-bottom: 1px solid #808080;
  padding: 8px 0;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.social-tag-list:last-child {
  border: 0;
}

.social-tag-list-user-image {
  width: 32px;
  height: 32px;
  margin-right: 8px;
}

/*編輯器 - 打卡與標註朋友*/
.edit-social-check-in-select-block {
  padding: 8px 35px 8px 12px;
  background-position-x: 96%;
  background-size: 15px;
}

.edit-social-post-check-in-options-section {
  height: 379px;
}

@media (max-width: 1098.99px) {
  .edit-social-post-check-in-options-section {
    height: calc(var(--vh, 1vh) * 100 - 177px);
  }
}
.social-tag-list-user-name, .social-tag-list-user-name-id {
  line-height: 1.1;
}

.social-tag-list-user-name-id {
  font-size: 16px;
  color: #808080;
}
/*
1.變數
2.定義會員整個區塊
3.會員首頁  左邊區塊
4.會員首頁  右上區塊
5.會員首頁  右下區塊 文章收藏 
6.文章收藏頁面
7.全站贈品列表
8.搜尋
9.coupon介紹頁
10.點數通知
11.共用
12.off canvas
*/



/*1.變數*/
:root {
	--main-color: #1d1d1d;
	--text-title-color: #1d1d1d;
	--text-p-color: #070707;
	--text-gray-color: #bbb;
	--fs-large: 32px;
	--fs-normal: 18px;
	--fs-small: 14px;
}


/*2.定義會員整個區塊*/

.member-area {
	display: grid;
	gap: 20px;
	grid-template-columns: 390px 590px;
	font-family: "Noto Serif TC";
}

@media (max-width:768px) {
	.member-area {
		grid-template-columns: 1fr;
	}
}



/*3.會員首頁  左邊區塊*/
.member-profile {
	grid-column: 1;
	grid-row: 1/3;
	overflow: hidden;
}

/*20220726 調整手機版顯示順序*/
@media (max-width:768px) {
	.member-profile {
		grid-area: 2;
	}
}

.avatar {
	position: relative;
	height: 284px;
}

.avatar-pic {
	width: 180px;
	height: 180px;
	margin: 0 auto;
	border: 5px solid #fff;
	box-sizing: border-box;
	transform: translateY(-50%);
}

.avatar-bg-pic {
	width: 100%;
	height: 200px;
	object-fit: cover;
}

.avatar-bg img {
	width: 100%;
}

.section-count {
	display: flex;
	justify-content: center;
	gap: 10px;
}

/*20220726 手機版隱藏數字區塊*/
@media (max-width: 768px){
	.section-count {
		display: none;
	}
}

.member-birth{
	color:#bbb;
	font-weight:300;
	font-size:var(--fs-normal);
}

.count-num1,
.count-num2,
.count-num3 {
	flex-basis: 64px;
	position: relative;
	font-weight: 300;
}

.count-num1::after,
.count-num2:after,
.count-num3:after {
	display: block;
	position: absolute;
	bottom: 0;
	color: #bbb;
	font-size: 16px;
	content: '文章收藏';
}

.count-num2::after {
	content: '會員登入';
}

.count-num3::after {
	content: '邀請會員';
}





/*4.會員首頁  右上區塊*/
.member-card {
	font-weight: 300;
}

.member-card-cover {
	border-radius: 3px;
	color: #fff;
	min-height: 200px;
	background-size: cover;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	background-image: url(../img/memberCard.jpg); 
	/*background-position: top -10px right 10% ;*/
}
/*@media (max-width:768px) {
	.member-card-cover {
		background-position: top -10px right -80px;
		background-size: 65%;
	}
}*/

.member-card-cover-title {
	color: #fff;
	font-size: var(--fs-normal);
	display: flex;
}

.member-card-cover-title .card-number {
	margin-left: auto;
	font-size: 16px;
}

.member-card-cover-slogan {
	color: #fff;
	font-size: var(--fs-large);
	font-weight: 500;
}

.topic-collection {
	background-color: #fff;
	overflow: hidden;
}

.topic-collection h2 {
	font-size: 20px;
	color: var(--main-color);
}

.inviteBtn{
	box-shadow: 3px 3px 10px rgba(0,0,0,0.16);
}
.inviteBtn:before{
	content: "";
	display: inline-block;
	height: 20px;
	width: 25px;
	background-image: url('../img/shareInvite.svg');
	background-size: contain;
	vertical-align: sub;
	margin-right: 10px;
}


/*5.會員首頁  右下區塊 文章收藏  */
.collection {
	max-width: 263px;
	width: 100%;
	overflow: hidden;
}
@media (max-width:768px) {
	.collection {
		max-width: 100%;
		width: 100%;
		overflow: hidden;
	}
}


.collection-title {
	min-height: 70px;
}

.collection-title,
.collection-title a {
	font-family: "Noto Serif TC";
	font-size: var(--text-normal);
	color: var(--text-title-color);
	font-weight: 700;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	letter-spacing: 2px;
}

.collection img {
	width: 263px;
	height: 150px;
	object-fit: cover;
}
@media (max-width:768px) {
	.collection img {
		max-width: 100%;
		width: 100%;
	}
}
.collection-type {
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--text-gray-color);
	font-size: var(--fs-small);
}

.collection-button-prev i,
.collection-button-next i {
	color: var(--main-color);
}

.member-area .title {
	font-size: 32px;
}


/*6.文章收藏頁面*/
.collections-list {
	position: relative;
}

.collections-list-collection {
	min-height: 330px;
	overflow: hidden;
}

.collections-list-collection img {
	width: 320px;
	height: 200px;
	object-fit: cover;
}

@media (max-width:992px) {
	.collections-list-collection img {
		width: 100%;
		height: 200px;
		object-fit: cover;
	}
}

.addFavrite-icon,
.addFavrite-icon:hover {
	width: 30px;
	height: 30px;
	background: url("../img/saveOutlineIcon.svg") center center no-repeat;
	background-size: 50%;
	cursor: pointer;
}

.addFavrite-icon:hover,
.addFavrite-icon.add {
	background: url("../img/saveFullIcon.svg") center center no-repeat;
	background-size: 50%;
}

.collections-list .filter-section {
	width: 200px;
	position: absolute;
	top: 0;
	left: -230px;
}
@media (max-width:1500px) and (min-width:1200px){
	.collections-list .filter-section {
		display:none!important;
	}
	.filter-btn{
		display:block!important;
	}

}

@media (min-width:1501px) {
	.filter-btn{
		display:none!important;
	}
	.filter-select{
		margin-left:auto;
	}

}


/*7.全站贈品列表*/

.coupon-list-collection {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.coupon-list-collection img {
	width: 320px;
	height: 150px;
	object-fit: cover;
}

@media (max-width:992px) {
	.coupon-list-collection img {
		width: 100%;

		/*20221128 因客戶需求，更改成188px*/
		height: 188px;
		object-fit: cover;
	}
}

.coupon-title,
.coupon-title a {
	font-family: "Noto Serif TC";
	font-size: var(--text-normal);
	color: var(--text-title-color);
	font-weight: 700;
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	letter-spacing: 2px;
}

.coupon-description,
.coupon-time {
	font-size: var(--fs-small);
	color: var(--text-gray-color);
}

.coupon-detail {
	position: relative;
}

.coupon-detail .status {
	position: absolute;
	top: 116px;
	right: 0;
}

/*20221128 因客戶需求 top更改成152px*/
@media (max-width:992px) {
	.coupon-detail .status {
		top: 152px;
	}
}


.mark {
	display: inline-block;
	border-radius: 100px;
	box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.25);
	background-color: #f5f5f5;
	font-size: var(--fs-small);
}

.get-coupon {
	display: flex;
	justify-content: space-between;
}
.btn-getcoupon{
	border-radius: 3px;
	background-color: #1c1c1c;
	color: #fff;
	font-size: var(--fs-small);
	transition:  .3s ease-out box-shadow;
	display: flex;
	align-items: center;
}

.btn-getcoupon:hover {
	color: #fff;
	box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.25);
}

.btn-coupon-not-enough{
	background-color: #1c1c1c;
	opacity: 0.6;
}

.btn-delete-coupon-block{
	height: 26px;
    width: 26px;
    background-color: #FFF;
    border-radius: 100px;
    cursor: pointer;
	position: absolute;
	z-index: 500;
	right: 24px;
    top: 8px;
    box-shadow: 3px 3px 10px rgba(0,0,0,0.6)
}


.btn-delete-coupon{
	height: 14px;
    width: 14px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
	background-image: url(../img/closeIcon.svg);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
}

.point {
	color: var(--text-gray-color);
}

.coupon-code{
	color: #FF0000;
	font-size: 14px;
	margin-top: 8px;
}

.point-num {
	color: #f00;
	font-size: 24px;
	font-weight: 300;
}
.use-limit{
	color:#727272;
	font-size:16px;
}
.use-limit-big{
	color: #f00;
	font-size:20px;

}
/*8.搜尋*/
.search-result,
.search-result .btn-link {
	font-size: 16px;
	color: var(--text-gray-color);
}

.search-item {
	border: 1px solid #bbb;
	color: var(--text-title-color);
	display: inline-block;
	cursor: pointer;
	background: url(../img/close.svg) center right no-repeat;
	background-size: 30% 30%;
	background-position-x: 105%;
	padding-right: 25px;
	padding-left: 10px;
	cursor: pointer;
}
.clear-allitem{
	display:inline-block;
}
.search-bar {
	width: 200px;
	height: 34px;
	border-radius: 5px;
	border: solid 1px #bbb;
	background-color: #fff;
	display: flex;
}
.search-bar:hover{
	border: solid 1px #1d1d1d;
}
.search-bar .btn-link {
	color: #1b1b1b;
}
.search-bar:hover{
	border: solid 1px #1d1d1d;
}
.search-bar:hover >  .search-icon{
	background: url("../img/searchClickIcon.svg") center center no-repeat;
	background-size: 50%;
}
.search-bar input {
	height: 100%;
}

.search-icon,
.search-icon:hover {
	display: inline-block;
	width: 30px;
	height: 30px;
	background: url("../img/searchIcon.svg") center center no-repeat;
	background-size: 50%;
	cursor: pointer;
}

.search-icon:hover {
	background: url("../img/searchClickIcon.svg") center center no-repeat;
	background-size: 50%;
}

.search-by-type {
	font-size: var(--fs-normal);
	display: flex;
	justify-content: space-between;
}

.search-by-type-checkbox {
	font-size: 16px;
	color: #bbb;
	padding-left: 0;
}


/*9.coupon介紹頁*/
.coupon-content {
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	border-radius: 15px;
	overflow: hidden;
}

.coupon-content img {
	width: 100%;
	max-width: 800px;
	max-height: 350px;
	height: auto;
	object-fit: cover;
}

.single-coupon-detail {
	padding: 0 100px;
}

@media (max-width:768px) {
	.single-coupon-detail {
		padding: 0 20px;
	}
}

.single-coupon-detail-img {
	position: relative;
}
.single-coupon-detail-img img{
	display:block;
}
.single-coupon-detail-img .detail-status {
	position: absolute;
	bottom: 10px;
	right: 10px;
}
.single-coupon-detail .coupon-time,
.single-coupon-detail .coupon-store,
.single-coupon-detail .coupon-description {
	color: var(--text-title-color);
	font-size: 16px;
}



.single-coupon-detail .point-num {
	color: #f00;
	font-size: 42px;
}
@media (max-width:768px) {
	.single-coupon-detail .point-num {
		font-size: 30px;
	}
}

.coupon-detail-title {
	font-family: "Noto Serif TC";
	font-weight: 700;
	font-size: 24px;
	color: var(--text-title-color);
}

/*10.點數通知*/
.notification {
	position: relative;
	z-index: 1501;
	margin-top: 48px;
	display: none;
}

.notification-pop {
	width: 340px;
	min-height: 137px;
	border-radius: 3px;
	box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.16);
	border: solid 1px #bbb;
	background-color: #fff;
	position: absolute;
    right: 0;
}
@media (max-width:768px) {
	.notification-pop {
		width: 320px;
	}
}

.notification-title {
	border-bottom: 1px solid #8ccccc;
	display: flex;
	justify-content: space-between;
	align-items: center;
	font-size: var(--fs-normal);
	color: var(--text-title-color);
}

.notification-content {
	display: flex;
	align-items: center;
	border-bottom: 1px solid #8ccccc;
}
.notification-content:last-of-type{
	border-bottom: none;
}

.points {
	background: #ff3939;
	color: #fff;
	font-size: 24px;
	width: 60px;
	height: 60px;
	display: flex;
	justify-content: center;
	align-items: center;
}
@media (max-width:768px) {
	.points {
		background: #ff3939;
		color: #fff;
		font-size: 16px;
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}
.close-notification {
	width: 21px;
	height: 21px;
	background: #efefef;
	border-radius: 100%;
	position: relative;
	transform: rotate(45deg);
}

.close-notification::before {
	content: '';
	width: 1px;
	height: 9px;
	background: #727272;
	position: absolute;
	top: 6px;
	left: 10px;
	z-index: 999;
}

.close-notification::after {
	content: '';
	width: 9px;
	height: 1px;
	background: #727272;
	position: absolute;
	top: 10px;
	left: 6px;
}

/*11.共用*/
.mycontainer {
	min-height: 800px;
	margin-top:50px;
}
@media (max-width:768px) {
	.mycontainer {
		margin-top:30px;
	}
}
.fs20 {
	font-size: 20px;
}

.fs28 {
	font-size: 28px;
}

.gray {
	color: var(--text-gray-color);
}

.yellow {
	color: #fee406;
}

.member-area .rounded {
	border-radius: 15px !important;
}

.member-area .shadow {
	box-shadow: 10px 10px 30px 0 rgba(0, 0, 0, 0.16) !important;
}

.shadow2 {
	box-shadow: 3px 3px 6px 0 rgba(0, 0, 0, 0.16);
}


.myselect,
.mybutton {
	width: 190px;
	height: 34px;
	border-radius: 3px;
	border: solid 1px #bbb;
	background-color: #fff;
	display: inline-block;
	color:#1d1d1d;
}
.myselect{
	display:flex;
	align-items: center;
}
.myselect img{
	margin-left:auto;
	width:12px;
}

.ok,
.failure {
	font-size: var(--fs-small);
	color: #5fad58;
}

.failure {
	color: #ff0000;
}

.link-small {
	font-size: var(--fs-small);
	color: var(--text-gray-color);
}


.icon-success{
	width:60px;
	height:60px;
	background:url("../img/successIcon.svg") center center no-repeat;
	background-size: cover;
	display:inline-block;
}
@media (max-width:768px) {
	.myselect,
	.mybutton {
		width: 100%;
		height: 34px;
		border-radius: 5px;
		border: solid 1px #bbb;
		background-color: #fff;
		color: #1d1d1d;
		font-size: var(--fs-small)
	}

}

.collapse input[type=checkbox]:checked+label {
	color: #1b1b1b;
	background: #fff;

}

.collapse input[type=checkbox] {
	display: none;
}

.collapse input[type=checkbox]+label {
	display: inline-block;
	padding-left: 22px;
	line-height: 15px;
	background: url(../img/not-checked.svg) no-repeat;
	user-select: none;
}

.collapse input[type=checkbox]:checked+label {
	background: url(../img/checked.svg) no-repeat;
}

.collapse input[type=radio] {
	display: none;
}

.collapse input[type=radio]+label {
	display: inline-block;
	padding-left: 22px;
	line-height: 15px;
	background: url(../img/not-radio.svg) no-repeat;
	user-select: none;
}

.collapse input[type=radio]:checked+label {
	background: url(../img/radio.svg) no-repeat;
	color: #1b1b1b;
}

.white-header {
	background: #fff;
}

.filter-header a {
	display: flex;
	justify-content: space-between;
	font-size:18px;
}

.filter-header a img {
	transform: rotate(180deg);
	transition: 0.3s transform ease-in-out;
	width: 10px;
}

.filter-header a.collapsed img {
	transform: rotate(0);
}

.bottom-green-line {
	border-bottom: 1px solid #8ccccc;
}

.red {
	color: #ff0000;
}
.dropdown-item:focus, .dropdown-item:hover{
	background-color:#f5f5f5!important;
	color:var(--text-title-color)!important;
}
.dropdown-menu.show{
	width:190px;
}
@media (max-width:768px) {
	.dropdown-menu.show{
		width:100%;
	}
}

.dropdown-menu.show .dropdown-item{
	padding: 0.25rem 0.75rem;
}
/*12.off canvas*/
.bs-canvas-overlay {
	opacity: 0;
	z-index: -1;
}

.bs-canvas-overlay.show {
	opacity: 0.85;
	z-index: 1100;

}

.bs-canvas {
	top: 0;
	width: 0;
	z-index: 1500;
	overflow-x: hidden;
	overflow-y: auto;
	background-color: #fff;
}

.bs-canvas-left {
	left: 0;
	box-shadow: 3px 3px 10px 0 rgba(0, 0, 0, 0.16);
}

.bs-canvas-right {
	right: 0;
}

.bs-canvas-anim {
	transition: all .4s ease-out;
	-webkit-transition: all .4s ease-out;
	-moz-transition: all .4s ease-out;
	-ms-transition: all .4s ease-out;
}

.bg-black {
	z-index: 1009;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, .3);
	position: fixed;
	top: 0;
	left: 0;
	display: none;
}

.btn-link>.postbtn:hover{
	color: #0056b3;
	text-decoration: none;
}

.dropdown-toggle-couponlist::after {
	display:none;
}