* {
  font-family: 'Noto Sans';
}

.pointer {
  cursor: pointer;
}

[v-cloak] {
  display: none;
}

/* app */
@media (min-width: 0px) and (max-width: 640px) {

  /*-------------------- component tagbtn -------------------- start*/
  .tagbtn-btn {
    width: 90px;
    height: 30px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .talkAbout-avatar-child-imgUp {
    margin-top: 30px;
    display: flex;
    align-items: center;
  }

  .tagbtn-btn-active {
    color: #fff;
    background-color: #5A5A5A;
    border-radius: 20px;
  }

  /*-------------------- component  tagbtn -------------------- end*/

  /*-------------------- component viewitem -------------------- start*/
  .viewitem-view-box {
    padding: 20px;
    margin-bottom: 40px;
  }

  .viewitem-view-box-FF {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 4px 12px #00000029;
    opacity: 1;
    cursor: pointer;
  }

  .viewitem-view-body {
    display: flex;
    flex-direction: column;
    padding: 0 0.5rem 0;
  }

  .viewitem-view-box-F2 {
    background-color: #F2F2F2;
    margin: 1rem 1rem;
  }

  .viewitem-view-flex-w-h {
    /* width: 300px; */
    height: 200px;
  }

  .viewitem-view-img-view {
    /* width: 290px; */
    height: 200px;
    background-size: contain;
  }

  .viewitem-view-title {
    /* flex: 1;
      padding-left: 30px; */
  }

  .viewitem-view-status-boxDiv {
    /* display: flex;
      align-items: center; */
    margin-top: 10px;
  }

  .viewitem-view-title-div {
    font-size: 22px;
    font-weight: bold;
    margin-top: 0.5rem;
  }

  .viewitem-view-status-box {
    color: #fff;
    background-color: #656565;
    padding: .3rem;
    font-size: .7rem;
    width: fit-content;
    text-align: center;
  }

  .viewitem-view-status-box-div {
    font-size: .7rem;
    font-weight: bold;
    color: #59A5CC;
  }

  .viewitem-view-status-box-lastdiv {
    color: #FF0000;
    font-weight: bold;
    font-size: 16px;
    margin-left: 5px;
  }

  .viewitem-view-description {
    /* width: 590px; */
    height: 40px;
    line-height: 20px;
    font-family: 'Noto Sans';
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .viewitem-view-isshow-statue-btnkjs {
    width: 280px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 20px;
    cursor: pointer;
  }

  .viewitem-view-heartFlex {
    display: flex;
    flex: 1;
    align-items: center;
    margin-top: 10px;
  }

  .viewitem-view-heartFlex-div {
    display: flex;
    flex: 1;
    align-items: center;
  }

  .viewitem-view-textHeart {
    margin-left: 5px;
    color: #59A5CC;
  }

  .viewitem-view-heart {
    margin-left: 5px;
  }

  .viewitem-view-heart-m-l {
    margin-left: 20px;
  }

  .viewitem-view-heartGood {
    margin-left: 5px;
    color: #CE9898;
  }

  .viewitem-view-comment-heart {
    display: flex;
    align-items: center;
  }

  .comment-img {
    background-size: contain;
    width: 25px;
    height: 25px;
  }

  .viewitem-view-comment-img {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }

  .viewitem-view-bottom-time {
    display: flex;
    justify-content: space-between;
  }


  .viewitem-view-horizontal {
    display: flex;
    /* justify-content: flex-end; */
    align-items: center;
    /* width: 120px;
      margin-left: 20px;
      margin-top: 10px; */
  }

  .viewitem-view-publish_time {
    /* margin-right: 80px; */
    margin-top: 15px;
  }

  .viewitem-view-objdata-latest {
    width: 80px;
  }

  .viewitem-view-new-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 30px;
    background-color: #FF0000;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
  }

  .viewitem-view-isshow {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
  }

  .viewitem-view-isshow-divbtn {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .8rem;
    font-weight: bold;
  }

  .viewitem-view-isshow-statue-btn {
    width: 10rem;
    height: 2rem;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 1rem;
    cursor: pointer;
  }

  .viewitem-view-isshow-statue-btn-stop {
    width: 280px;
    height: 45px;
    color: #fff;
    border: 1px solid #707070;
    background: #3A3A3A;
    border-radius: 20px;
    cursor: pointer;
  }

  .viewitem-view-objdata-latest-new {
    display: flex;
    justify-content: flex-end;
    width: 80px;
    margin-top: 10px;
  }

  .viewitem-view-iszd {
    color: #333333;
  }

  .text-disabled {
    width: 280px;
    height: 45px;
    border: 1px solid #707070;
    color: #fff;
    background: #BEBEBE;
    border-radius: 20px;
  }

  /*-------------------- component  viewitem -------------------- end*/

  /*-------------------- component  heart -------------------- start*/

  .like-img {
    background-image: url('../img/like.svg');
    background-size: contain;
    width: 25px;
    height: 25px;
  }

  .liked-img {
    background-image: url('../img/liked.svg');
    background-size: contain;
    width: 25px;
    height: 25px;
  }

  .like-img-big {
    width: 40px;
    height: 40px;
  }

  .comment-img {
    background-image: url('../img/comment.svg');
    background-size: contain;
    width: 25px;
    height: 25px;
  }


  /*-------------------- component  heart -------------------- end*/

  /*-------------------- component  showmore -------------------- start*/
  .btn-showmore-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100vw - 5rem);
    height: 64px;
    background: #FFFFFF;
    border: 1px solid #707070;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
  }

  .btn-showmore-box:hover {
    background-color: #fafafa;
  }

  .down-img {
    background-image: url('../img/down.svg');
    background-size: contain;
    width: 30px;
    height: 16px;
  }

  /*-------------------- component  showmore -------------------- end*/

  /*-------------------- component  divider -------------------- start*/
  .divider-dashed {
    display: block;
    height: 1px;
    width: 100%;
    margin: 12px 0;
    border-top: 1px dashed #a8a8a8;
  }

  .divider {
    display: block;
    height: 1px;
    width: 100%;
    margin: 16px 0;
    border-top: 1px solid #707070;
  }

  /*-------------------- component  divider -------------------- end*/

  /*-------------------- component  talkAbout -------------------- start*/
  .talkAbout-iszdinput {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
  }

  .talkAbout-commentOnThisPost {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 12rem;
    border: 1px solid #707070;
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
    font-size: 16px;
  }

  .talkAbout-inputFull {
    height: 40px;
    width: 100%;
    font-size: 16px;
    padding-left: 10px;
    margin-top: 10px;
    background-color: #F3F3F3;
    border: 1px solid #E6E6E6;
  }

  .talkAbout-span-reflectYourTypeInComments {
    padding-left: 10px;
  }

  .talkAbout-view-btn2 {
    font-size: 20px;
    width: calc(100vw - 5rem);
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 20px;
    font-weight: 800;
    cursor: pointer;
  }

  .talkAbout-iszdinput2 {
    margin-bottom: 40px;
  }

  .talkAbout-dvddetail-hid {
    padding: .5rem;
    /* margin-left: -30px; */
  }

  .talkAbout-typeChild {
    border: 1px solid #2D2D2D;
    box-sizing: border-box;
    width: 100%;
    margin: 0 auto;
  }

  .talkAbout-avatar-imgUp {
    display: flex;
    align-items: center;
  }

  .talkAbout-avatar-img {
    background-image: url('../img/03.png');
    background-size: cover;
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }

  .talkAbout-user-nickname {
    margin-left: 20px;
    white-space: pre-line;
    word-break: break-all;
    word-wrap: break-word;
    flex: 1;
  }

  .talkAbout-iszd {
    color: #6b5f5f77;
  }

  .talkAbout-talkComment-div {
    margin: 5px 0 0 60px;
  }

  .talkAbout-talkComment {
    font-size: 16px;
    margin-top: 20px;
    /* width: 718px; */
    /* word-break: break-word; */
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-line;
  }

  .talkAbout-talkComment-create {
    display: flex;
    margin-top: 10px;
    flex-wrap: wrap;
  }

  .talkAbout-createTime-div {
    display: flex;
    align-items: center;
    margin-right: 30px;
  }

  .talkAbout-createTime-span {
    white-space: nowrap;
    color: #999d9d;
  }

  .talkAbout-div-heart {
    display: flex;
    align-items: center;
    margin-left: 1.2rem;
  }

  .talkAbout-thumbCount {
    margin-left: 5px;
    color: #999d9d;
  }

  .talkAbout-span-good {
    margin-left: 5px;
    color: #CE9898;
  }

  .talkAbout-span-good2 {
    margin-left: 5px;
    color: #999d9d;
  }

  .talkAbout-flex-type {
    display: flex;
    align-items: center;
    margin-left: 30px;
  }

  .talkAbout-loginId {
    display: flex;
    margin-top: 10px;
  }

  .talkAbout-back-home {
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .talkAbout-back {
    display: flex;
    align-items: center;
    margin-right: 10px;
    margin-bottom: 10px;
  }

  .talkAbout-talkIsBack {
    margin-left: 10px;
    font-size: 14px;
  }

  .talkAbout-comment-userId {
    display: flex;
    align-items: center;
  }

  .tallAbout-typeChild {
    margin-top: 40px;
  }

  .talkAbout-showChildBtn {
    display: flex;
    justify-content: flex-end;
  }

  .talkAbout-showdownmore {
    min-width: 100px;
    height: 24px;
  }

  .talkAbout-divider {
    margin-top: 30px;
  }

  .talkAbout-showmore {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }

  .edit-img {
    background-image: url('../img/edit.svg');
    background-size: contain;
    width: 20px;
    height: 20px;
  }

  .delete-img {
    background-image: url('../img/delete.svg');
    background-size: contain;
    width: 20px;
    height: 20px;
  }

  .back-img {
    background-image: url('../img/back.svg');
    background-size: contain;
    width: 20px;
    height: 20px;
  }

  .cancel-img {
    background-image: url('../img/cancel.svg');
    background-size: contain;
    width: 20px;
    height: 20px;
  }

  .talkAbout-view-btnDiv {
    text-align: center;
  }


  /*-------------------- component  talkAbout -------------------- end*/

  /*-------------------- component  talkheader -------------------- start*/
  .talkheader-body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
  }

  .talkheader-istwitter {
    display: flex;
    /* align-items: center; */
    width: 100%;
    height: 2rem;
    margin: auto;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
  }

  .talkheader-vertical {
    /* margin-bottom: 80px; */
  }

  .talkheader-publicize {
    font-size: 1rem;
    font-weight: bold;
  }

  .talkheader-isbig {
    margin-left: 50px;
  }

  .talkheader-isbig-text {
    font-size: 18px;
    display: flex;
    align-items: center;
  }

  .talkheader-good-thumbup {
    margin-left: 5px;
    color: #999d9d;
  }

  .talkheader-good-thumbup-s {
    margin-left: 5px;
    color: #CE9898;
  }

  .talkheader-directions-istwitter {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 30px;
  }

  .talkheader-istwitter-text {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 246px;
    height: 47px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    opacity: 1;
    margin-bottom: 20px;
    position: relative;
  }

  .san-triangle {
    position: absolute;
    z-index: 100;
    left: 119px;
    top: 40px;
    width: 13px;
    height: 13px;
    transform: rotate(45deg);
    background: #fff;
  }

  .ts-triangle {
    position: absolute;
    z-index: 100;
    left: 120px;
    top: 42px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background: black;
  }

  .talkheader-border-isteitter {
    text-align: left;
    font: normal normal bold 20px/25px "Noto Sans JP";
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
  }

  .talkheader-bird {
    display: flex;
    justify-content: center;
    width: 283px;
    height: 59px;
    background: #1D9BF0 0% 0% no-repeat padding-box;
    border-radius: 5px;
    opacity: 1;
    margin-bottom: 50px;
    text-align: center;
    cursor: pointer;
  }

  .talkheader-bird-img {
    width: 35px;
    margin-top: 10;
  }

  .talkheader-bird-commenttitle {
    width: 100%;
    font-size: 1rem;
    margin-bottom: 20px;
    font-weight: 600;
  }

  .talkheader-Preferential {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 9.5rem;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    border-radius: 20px;
    opacity: 1;
    margin-bottom: 40px;
  }

  .talkheader-btn-text {
    margin-top: 20px;
    font-size: 16px;
  }

  .talkheader-talkheaderinfo {
    margin-top: 20px;
  }

  .talkheader-talkheaderinfo-input {
    width: 100%;
    height: 2rem;
    border: 1px solid #E6E6E6;
    background: #F3F3F3 0% 0% no-repeat padding-box;
    padding-left: 10px;
    border-radius: 2px;
    font-size: 18px;
  }

  .talkheader-sou-btn-title {
    margin-top: 20px;
    line-height: 45px;
    font-size: 20px;
    font-weight: 800;
    width: 300px;
    height: 45px;
    background: #FFFFFF;
    border: 1px solid #707070;
    border-radius: 30px;
    cursor: pointer;
  }

  .talkheader-comment-title {
    width: 526px;
    height: 40px;
    margin: auto;
    margin-bottom: 20px;
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  /*-------------------- component  talkheader -------------------- end*/

  /*-------------------- component  comment -------------------- start*/
  .comment-type {
    font-size: 16px;
  }

  .comment-type2 {
    font-size: 14px;
    color: #949494;
  }

  .textareaaa {
    width: 100%;
    height: 1.3rem;
    font-size: 16px;
    max-height: 300px;
    border: 1px solid #E6E6E6;
    border-radius: 2px;
    background: #F3F3F3;
    padding: 8px 10px 0 10px;
    /* box-sizing: border-box; */
  }

  .comment-textarea1 {
    margin-top: 20px;
    width: 800px;
  }

  .comment-textarea2 {
    margin-top: 10px;
    width: 7rem;
  }

  .comment-isvotecomment {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .8rem;
    margin-left: 10px;
    width: 70vw!important;
    height: 1.4rem;
    background: #FFFFFF;
    border: 1px solid #707070;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
  }

  .comment-isvotecommentdisab {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    margin-left: 10px;
    width: 70vw!important;
    height: 45px;
    background-color: #BEBEBE;
    color: #fff;
    border: 1px solid #707070;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
  }

  .comment-isvotecommentTrue {
    width: 300px;
  }

  .comment-isvotecommentTrue-center {
    margin-top: 20px;
  }

  .comment-isvotecommentTrueq {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .comment-isvotecommentT {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /*-------------------- component  comment -------------------- end*/

  /*-------------------- component  showdownmore -------------------- start*/
  .showdownmore-toggleText {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #333;
    align-items: center;
  }

  .down-img-2 {
    background-image: url('../img/down.svg');
    background-size: contain;
    width: 24px;
    height: 12px;
  }

  .showdownmore-text {
    margin-left: 12px;
  }

  /*-------------------- component  showdownmore -------------------- end*/



  /*-------------------- index -------------------- start*/
  .special-tagbtn {
    margin: 1.4rem 0 ;
    display: flex;
    justify-content: flex-end;
  }

  .special-hasMore {
    margin-top: 30px;
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
  }

  /*-------------------- index -------------------- end*/



  
  /*-------------------- component  carousel2 -------------------- start*/
  .carousel2-flexslider {
    position: relative;
    height: 400px;
    width: 90vw;
    overflow: hidden;
    background-color: #fff;
  }

  .flexslidermini {
    position: relative;
    height: 238px;
    overflow: hidden;
    background-color: #fff;
  }


  .slidesmini {
    position: relative;
    z-index: 1;
  }

  .ver-align {
    vertical-align: top;
  }

  .carousel2-flexslider ul {
    position: relative;
    z-index: 1;
  }

  .carousel2-flexslider ul .li {
    height: 400px;
  }


  .flex-control-nav {
    position: absolute;
    bottom: 10px;
    z-index: 2;
    width: 100%;
    text-align: center;
  }

  .flex-control-nav li {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 5px;
    display: inline;
    zoom: 1;
  }

  .flex-control-nav a {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 40px;
    overflow: hidden;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/dot.png) right 0 no-repeat;
    cursor: pointer;
  }

  .flex-control-nav .flex-active {
    background-position: 0 0;
  }

  .flex-direction-nav {
    position: absolute;
    z-index: 3;
    width: 100%;
    top: 45%;
  }

  .flex-direction-nav li a {
    display: block;
    width: 50px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
  }

  .flex-direction-nav li a.flex-prev {
    left: 40px;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/prev.png) center center no-repeat;
  }

  .flex-direction-nav li a.flex-next {
    right: 40px;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/next.png) center center no-repeat;
  }


  .flex-control-nav {
    position: absolute;
    bottom: 10px;
    z-index: 2;
    width: 100%;
    text-align: center;
  }

  .flex-control-nav li {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 5px;
    display: inline;
    zoom: 1;
  }

  .flex-control-nav a {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 40px;
    overflow: hidden;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/dot.png) right 0 no-repeat;
    cursor: pointer;
  }

  .flex-control-nav .flex-active {
    background-position: 0 0;
  }

  /*-------------------- component  carousel2 -------------------- end*/

  /*-------------------- specialDetails -------------------- start*/
  .specialDetails-tagbtn {
    /* display: flex;
    justify-content: center; */
    width: 100%;
    margin: 20px auto 0;
  }

  .specialDetails-carousel {
    width: 100%;
    margin: 0 auto;
  }

  .specialDetails-carousel-title {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 700;
  }

  .specialDetails-carousel-title-expiration {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
  }

  .specialDetauls-view-status-box {
    padding: 5px 15px;
    color: #fff;
    background-color: #656565;
    font-size: 16px;
    width: fit-content;
  }

  .specialDetauls-view-fromStatus {
    font-size: 16px;
    font-weight: 700;
    color: #59A5CC;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
  }

  .specialDetauls-viewformStart-time {
    margin-left: 5px;
  }

  .specialDetauls-viewformstart-over {
    margin-left: 5px;
    font-size: 18px;
    margin-top: 5px;
    color: #FF0000;
    font-weight: bold;
  }

  .specialDetails-viewform-description {
    margin-top: 10px;
    font-size: 16px;
    white-space: pre-line;
  }

  .specialDetails-view-fat-thumbup-count {
    margin-top: 10px;
    display: flex;
  }

  .specialDetails-view-thumbup-count {
    margin-left: 5px;
  }

  .specialDetails-thumbup-div {
    display: flex;
    align-items: center;
    flex: 1;
  }


  .specialDetails-thumbup-divHeart {
    display: flex;
    align-items: center;
  }

  .specialDetails-form-comment-count1 {
    margin-left: 5px;
    color: #999D9D;
  }

  .specialDetails-form-comment-count2 {
    margin-left: 5px;
    color: #CE9898;
  }

  .specialDetails-form-vote-num {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }

  .specialDetails-form-publish-time {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 120px;
    margin-left: 20px;
  }

  .specialDetails-form-lastest-on {
    display: flex;
    justify-content: flex-end;
    width: 80px;
  }

  .specialDetails-form-comment-count {
    color: #999D9D;
  }

  .specialDetails-new-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 30px;
    background-color: #FF0000;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
  }

  .specialDetails-Summary {
    margin: 3rem 0 1rem 0;
  }

  .specialDetails-vote-result {
    background-color: #EBEAEA;
    height: 90px;
    line-height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 46px;
  }

  .specialDetails-vote-result-title {
    font-weight: bold;
    font-size: 26px;
    width: 100%;
    margin: 0 auto;
  }

  .video-position {
    width: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .video-position-div {
    /* min-width: 960px; */
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #FFFFFF;
    background: #999D9D 0% 0% no-repeat padding-box;
    opacity: 1;
    font-size: 0.8rem;
  }

  .specialDetauls-data {
    border: 1px solid #FFFFFF;
    font-size: 0.8rem;
  }

  .specialDetauls-data-text {
    min-width: 5rem;
    padding: .6rem;
    color: #fff;
    text-align: center;
  }

  .specialDetauls-data-textData {
    /* line-height: 26px; */
    padding: .6rem;
    color: #000000;
    background-color: #F2F2F2;
    flex: 1;
  }

  .specialDetauls-isShowQrcode {
    width: 960px;
    height: 400px;
    position: absolute;
    top: 10px;
    z-index: 998;
    width: 100%;
    display: none;
    background: rgba(0, 0, 0, .5);
    background-color: #F2F2F2;
  }

  .specialDetauls-isShowQrcode-getClick {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #F2F2F2;
    /* width: 21rem; */
    height: 100%;
  }


  .specialDetails-qrcode {
    /* width: 9rem; */
    height: 9rem;
    border: 1px solid black;
    margin: 1rem 0 0;
    padding: .5rem;
    box-sizing: border-box;
  }

  .specialDetails-qrcode-text {
    margin-top: 1rem;
    /* width: 14rem; */
  }

  .specialDetails-qrcodeinfo {
    color: #1592E6;
    word-wrap: break-word;
    word-break: break-all;
    margin-top: 0.5rem;
    padding: 0 1rem;
    text-align: center;
  }

  .specialDetails-list {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    border: 1px solid #FFFFFF;
    font-size: 0.8rem;
    /* background: #999D9D 0% 0% no-repeat padding-box; */
    background-color: #F2F2F2;
    opacity: 1;
  }

  .specialDetails-list-left {
    min-width: 5rem;
    font-size: 18px;
    padding: .6rem;
    color: #fff;
    background: #999D9D 0% 0% no-repeat padding-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .specialDetails-list-right {
    flex: 1;
    color: #000000;
    background-color: #F2F2F2;
    min-width: 3rem;
    padding: .6rem;
    white-space: pre-line;
  }

  .specialDetails-exploit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 3rem;
    margin: 2rem auto 0;
  }

  .specialDetails-exploit-text {
    width: 12rem;
    height: 2rem;
    line-height: 2rem;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    border-radius: 91px;
    opacity: 1;
    font-size: .8rem;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
  }

  .specialDetails-exploit-disabled {
    width: 11rem;
    height: 2rem;
    line-height: 2rem;
    background: #BEBEBE 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    border-radius: 91px;
    opacity: 1;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    cursor: not-allowed;
    pointer-events:none;
  }

  .specialDetails-talkabout {
    margin-top: 3rem;
  }

  .specialDetails-talkabout-text {
    /* margin-top: 40px; */
  }

  .specialDetails-data {
    margin-top: 30px;
  }

  .back-curtain_mask {
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  /*-------------------- specialDetails -------------------- end*/


  /*-------------------- benefitImage -------------------- start*/
  .benefitImage-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 20rem;
    margin: auto;
    margin-top: 1rem;
    background-color: #141414;
  }

  .benefitImage-imgDiv {
    width: 100%;
    height: 12rem;
    margin-top: 2rem;
    cursor: pointer;
  }

  .benefitImage-imgDiv-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* background-image: url('../img/03.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat; */

  }

  .benefitImage-div-size {
    display: flex;
    font-size: 22px;
    margin-top: 20px;
    color: #ffffff;
    align-items: center;
  }

  .benefitImage-div-size-span {
    margin-left: 5px;
  }

  .benefitImage-carousel1 {
    display: none;
    width: 100%;
    /* height: 40rem; */
    overflow: hidden;
  }

  .layui-layer-ico {
    z-index: 99999;
  }

  /*-------------------- benefitImage -------------------- end*/



  /*-------------------- benefitVideo -------------------- start*/
  .benefitVideo-body {
    position: relative;
    /* margin-top: 20px; */
    cursor: pointer;
    width: 100%;
    margin: 1rem auto 0;
  }

  .benefitVideo-body video {
    width: 100%;
    height: 10rem;
    margin: 0 auto;
  }


  /*-------------------- benefitVideo -------------------- end*/

  /*-------------------- benefitScreen -------------------- start*/
  .benefitScreen-body {
    display: flex;
    justify-content: center;
    align-items: center;
    /* height: 26rem */
    width: 100%;
    border: 1px solid #707070;
    margin: 1rem auto 0;
    box-sizing: border-box;
    flex-direction: column;
    padding: 0.5rem;
  }

  .benefitScreen-divImage {
    width: 100%;
    /* height: 13rem; */
    margin: 0 auto;
  }

  .benefitScreen-divText {
    width: 100%;
    /* height: 10rem; */
    margin: 0 auto;
    /* margin-left: 66px; */
  }

  .benefitScreen-divText-tdnameName {
    font-size: 24px;
    color: #333333;
    font-weight: bold;
  }

  .benefitScreen-divText-tdnameExp {
    margin-top: 10px;
    color: #6cbaff;
  }

  .benefitScreen-divText-tdnameTime {
    margin-top: 10px;
  }

  .benefitScreen-divText-tdnameData {
    margin-top: 10px;
  }

  .benefitScreen-divText-tdnameRedeem {
    width: 100%;
    height: 2.5rem;
    line-height: 2.5rem;
    background: #229500;
    color: #FFFFFF;
    text-align: center;
    font-size: 1.2rem;
    margin: 1rem auto 0;
    cursor: pointer;
    border: none;
  }

  .benefitImage-body-detail {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: 1rem auto 0;
    width: 100%;
  }

  /*-------------------- benefitScreen -------------------- end*/

  .layui-layer-btn {
    display: flex;
    justify-content: space-around;
    flex-direction: row-reverse;
  }

  .layui-layer-btn a {
    font-size: 16px;
  }
}

/* pc */
@media (min-width: 640px) {

  /*-------------------- component tagbtn -------------------- start*/
  .tagbtn-btn {
    width: 150px;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .tagbtn-btn-active {
    color: #fff;
    background-color: #5A5A5A;
    border-radius: 20px;
  }

  /*-------------------- component  tagbtn -------------------- end*/

  /*-------------------- component viewitem -------------------- start*/
  .viewitem-view-box {
    padding: 20px;
    margin-bottom: 40px;
  }

  .viewitem-view-box-FF {
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 4px 12px #00000029;
    opacity: 1;
    cursor: pointer;
  }

  .viewitem-view-body {
    display: flex;
  }

  .viewitem-view-box-F2 {
    background-color: #F2F2F2;
  }

  .viewitem-view-flex-w-h {
    width: 300px;
    height: 200px;
  }

  .viewitem-view-img-view {
    width: 290px;
    height: 200px;
    background-size: contain;
  }

  .viewitem-view-title {
    flex: 1;
    padding-left: 30px;
  }

  .viewitem-view-status-boxDiv {
    display: flex;
    align-items: center;
    margin-top: 10px;
  }

  .viewitem-view-title-div {
    font-size: 22px;
    font-weight: bold;
  }

  .viewitem-view-status-box {
    color: #fff;
    background-color: #656565;
    padding: 5px 8px;
    font-size: 16px;
  }

  .viewitem-view-status-box-div {
    display: flex;
    align-items: center;
    font-size: 16px;
    margin-left: 10px;
    font-weight: bold;
    color: #59A5CC;
  }

  .viewitem-view-status-box-lastdiv {
    color: #FF0000;
    font-weight: bold;
    font-size: 16px;
    margin-left: 5px;
  }

  .viewitem-view-description {
    width: 590px;
    height: 40px;
    line-height: 20px;
    font-family: 'Noto Sans';
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
  }

  .viewitem-view-heartFlex {
    display: flex;
    flex: 1;
    align-items: center;
    margin-top: 16px;
  }

  .viewitem-view-heartFlex-div {
    display: flex;
    flex: 1;
    align-items: center;
  }

  .viewitem-view-textHeart {
    margin-left: 5px;
    color: #59A5CC;
  }

  .viewitem-view-heart {
    margin-left: 5px;
    color: #999D9D;
  }

  .viewitem-view-heartGood {
    margin-left: 5px;
    color: #CE9898;
  }

  .viewitem-view-comment-heart {
    display: flex;
    align-items: center;
  }

  .comment-img {
    background-size: contain;
    width: 25px;
    height: 25px;
  }

  .viewitem-view-comment-img {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }

  .viewitem-view-horizontal {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 120px;
    margin-left: 20px;
  }

  .viewitem-view-publish_time {
    margin-right: 80px;
    margin-top: 15px;
  }

  .viewitem-view-objdata-latest {
    width: 80px;
  }

  .viewitem-view-new-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 30px;
    background-color: #FF0000;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
  }

  .viewitem-view-isshow {
    margin-top: 20px;
  }

  .viewitem-view-isshow-divbtn {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 330px;
    font-size: 18px;
    font-weight: bold;
  }

  .viewitem-view-isshow-statue-btn {
    width: 280px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 20px;
    cursor: pointer;
  }

  .viewitem-view-isshow-statue-btn-stop {
    width: 280px;
    height: 45px;
    color: #fff;
    border: 1px solid #707070;
    background: #3A3A3A;
    border-radius: 20px;
    cursor: pointer;
  }

  .viewitem-view-objdata-latest-new {
    display: flex;
    justify-content: flex-end;
    width: 80px;
  }

  .viewitem-view-iszd {
    color: #333333;
  }

  .text-disabled {
    width: 280px;
    height: 45px;
    border: 1px solid #707070;
    color: #fff;
    background: #BEBEBE;
    border-radius: 20px;
  }

  /*-------------------- component  viewitem -------------------- end*/

  /*-------------------- component  heart -------------------- start*/
  .like-img {
    background-image: url('../img/like.svg');
    background-size: contain;
    width: 25px;
    height: 25px;
  }

  .liked-img {
    background-image: url('../img/liked.svg');
    background-size: contain;
    width: 25px;
    height: 25px;
  }

  .like-img-big {
    width: 40px;
    height: 40px;
  }


  .comment-img {
    background-image: url('../img/comment.svg');
    background-size: contain;
    width: 25px;
    height: 25px;
  }

  /*-------------------- component  heart -------------------- end*/

  /*-------------------- component  showmore -------------------- start*/
  .btn-showmore-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 450px;
    height: 64px;
    background: #FFFFFF;
    border: 1px solid #707070;
    border-radius: 10px;
    font-size: 20px;
    cursor: pointer;
  }

  .btn-showmore-box:hover {
    background-color: #fafafa;
  }

  .down-img {
    background-image: url('../img/down.svg');
    background-size: contain;
    width: 30px;
    height: 16px;
  }

  /*-------------------- component  showmore -------------------- end*/

  /*-------------------- component  divider -------------------- start*/
  .divider-dashed {
    display: block;
    height: 1px;
    width: 100%;
    margin: 12px 0;
    border-top: 1px dashed #a8a8a8;
  }

  .divider {
    display: block;
    height: 1px;
    width: 100%;
    margin: 16px 0;
    border-top: 1px solid #707070;
  }

  /*-------------------- component  divider -------------------- end*/

  /*-------------------- component  carousel -------------------- start*/
  .flexslider {
    position: relative;
    height: 400px;
    overflow: hidden;
    background-color: #fff;
  }

  .flexslidermini {
    position: relative;
    height: 238px;
    overflow: hidden;
    background-color: #fff;
  }


  .slidesmini {
    position: relative;
    z-index: 1;
  }

  .ver-align {
    vertical-align: top;
  }

  .slides {
    position: relative;
    z-index: 1;
  }

  .slides li {
    height: 400px;
  }


  .flex-control-nav {
    position: absolute;
    bottom: 10px;
    z-index: 2;
    width: 100%;
    text-align: center;
  }

  .flex-control-nav li {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 5px;
    display: inline;
    zoom: 1;
  }

  .flex-control-nav a {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 40px;
    overflow: hidden;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/dot.png) right 0 no-repeat;
    cursor: pointer;
  }

  .flex-control-nav .flex-active {
    background-position: 0 0;
  }

  .flex-direction-nav {
    position: absolute;
    z-index: 3;
    width: 100%;
    top: 45%;
  }

  .flex-direction-nav li a {
    display: block;
    width: 50px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
  }

  .flex-direction-nav li a.flex-prev {
    left: 40px;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/prev.png) center center no-repeat;
  }

  .flex-direction-nav li a.flex-next {
    right: 40px;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/next.png) center center no-repeat;
  }


  .flex-control-nav {
    position: absolute;
    bottom: 10px;
    z-index: 2;
    width: 100%;
    text-align: center;
  }

  .flex-control-nav li {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 5px;
    display: inline;
    zoom: 1;
  }

  .flex-control-nav a {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 40px;
    overflow: hidden;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/dot.png) right 0 no-repeat;
    cursor: pointer;
  }

  .flex-control-nav .flex-active {
    background-position: 0 0;
  }

  /*-------------------- component  carousel -------------------- end*/


  
  /*-------------------- component  carousel2 -------------------- start*/
  .carousel2-flexslider {
    position: relative;
    height: 800px;
    overflow: hidden;
    background-color: #fff;
  }

  .flexslidermini {
    position: relative;
    height: 238px;
    overflow: hidden;
    background-color: #fff;
  }


  .slidesmini {
    position: relative;
    z-index: 1;
  }

  .ver-align {
    vertical-align: top;
  }

  .carousel2-flexslider ul {
    position: relative;
    z-index: 1;
  }

  .carousel2-flexslider ul .li {
    height: 800px;
  }


  .flex-control-nav {
    position: absolute;
    bottom: 10px;
    z-index: 2;
    width: 100%;
    text-align: center;
  }

  .flex-control-nav li {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 5px;
    display: inline;
    zoom: 1;
  }

  .flex-control-nav a {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 40px;
    overflow: hidden;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/dot.png) right 0 no-repeat;
    cursor: pointer;
  }

  .flex-control-nav .flex-active {
    background-position: 0 0;
  }

  .flex-direction-nav {
    position: absolute;
    z-index: 3;
    width: 100%;
    top: 45%;
  }

  .flex-direction-nav li a {
    display: block;
    width: 50px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
  }

  .flex-direction-nav li a.flex-prev {
    left: 40px;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/prev.png) center center no-repeat;
  }

  .flex-direction-nav li a.flex-next {
    right: 40px;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/next.png) center center no-repeat;
  }


  .flex-control-nav {
    position: absolute;
    bottom: 10px;
    z-index: 2;
    width: 100%;
    text-align: center;
  }

  .flex-control-nav li {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 5px;
    display: inline;
    zoom: 1;
  }

  .flex-control-nav a {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 40px;
    overflow: hidden;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/dot.png) right 0 no-repeat;
    cursor: pointer;
  }

  .flex-control-nav .flex-active {
    background-position: 0 0;
  }

  /*-------------------- component  carousel2 -------------------- end*/

  /*-------------------- component  talkAbout -------------------- start*/
  .talkAbout-iszdinput {
    display: flex;
    justify-content: center;
    margin-bottom: 40px;
  }

  .talkAbout-commentOnThisPost {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    width: 900px;
    height: 233px;
    border: 1px solid #707070;
    border-radius: 20px;
    padding: 20px 50px;
    box-sizing: border-box;
    font-size: 16px;
  }

  .talkAbout-inputFull {
    height: 40px;
    width: 100%;
    font-size: 16px;
    padding-left: 10px;
    margin-top: 10px;
    background-color: #F3F3F3;
    border: none;
  }

  .talkAbout-span-reflectYourTypeInComments {
    padding-left: 10px;
  }

  .talkAbout-view-btn2 {
    font-size: 20px;
    width: 300px;
    height: 45px;
    background-color: #fff;
    border: 1px solid #707070;
    border-radius: 20px;
    font-weight: 800;
    cursor: pointer;
  }

  .talkAbout-iszdinput2 {
    margin-bottom: 40px;
  }

  .talkAbout-dvddetail-hid {
    padding: 30px;
    margin-top: 30px;
  }

  .talkAbout-typeChild {
    border: 1px solid #2D2D2D;

  }

  .talkAbout-avatar-imgUp {
    display: flex;
    align-items: center;
  }

  .talkAbout-avatar-child-imgUp {
    margin-top: 30px;
    display: flex;
    align-items: center;
  }

  .talkAbout-avatar-img {
    background-image: url('../img/03.png');
    background-size: cover;
    width: 36px;
    height: 36px;
    border-radius: 50%;
  }

  .talkAbout-user-nickname {
    margin-left: 20px;
    white-space: pre-line;
    word-break: break-all;
    word-wrap: break-word;
    flex: 1;
  }

  .talkAbout-iszd {
    color: #6b5f5f77;
  }

  .talkAbout-talkComment-div {
    margin: 5px 0 0 60px;
  }

  .talkAbout-talkComment {
    font-size: 16px;
    word-wrap: break-word;
    word-break: break-all;
    white-space: pre-line;
  }

  .talkAbout-talkComment-create {
    display: flex;
    margin-top: 10px;
  }

  .talkAbout-createTime-div {
    display: flex;
    align-items: center;
  }

  .talkAbout-createTime-span {
    white-space: nowrap;
    color: #999d9d;
  }

  .talkAbout-div-heart {
    display: flex;
    align-items: center;
    margin-left: 30px;
  }

  .talkAbout-thumbCount {
    margin-left: 5px;
    color: #999d9d;
  }

  .talkAbout-span-good {
    margin-left: 5px;
    color: #CE9898;
  }

  .talkAbout-span-good2 {
    margin-left: 5px;
    color: #999d9d;
  }

  .talkAbout-flex-type {
    display: flex;
    align-items: center;
    margin-left: 30px;
  }

  .talkAbout-loginId {
    display: flex;
    margin-top: 10px;
  }

  .talkAbout-back-home {
    display: flex;
    align-items: center;
  }

  .talkAbout-back {
    display: flex;
    align-items: center;
    margin-left: 30px;
  }

  .talkAbout-child-back {
    margin-left: 62px;
  }

  .talkAbout-talkIsBack {
    margin-left: 10px;
    font-size: 14px;
    cursor: pointer;
  }

  .talkAbout-commentinput-box {
    margin-bottom: 20px;
    margin-left: 60px;
  }

  .talkAbout-comment-userId {
    display: flex;
    align-items: center;
  }

  .tallAbout-typeChild {
    margin-top: 40px;
  }

  .talkAbout-showChildBtn {
    display: flex;
    justify-content: flex-end;
  }

  .talkAbout-showdownmore {
    min-width: 100px;
    height: 24px;
  }

  .talkAbout-divider {
    margin-top: 30px;
  }

  .talkAbout-showmore {
    display: flex;
    justify-content: center;
    margin-top: 30px;
  }

  .edit-img {
    background-image: url('../img/edit.svg');
    background-size: contain;
    width: 20px;
    height: 20px;
  }

  .delete-img {
    background-image: url('../img/delete.svg');
    background-size: contain;
    width: 20px;
    height: 20px;
  }

  .back-img {
    background-image: url('../img/back.svg');
    background-size: contain;
    width: 20px;
    height: 20px;
  }

  .cancel-img {
    background-image: url('../img/cancel.svg');
    background-size: contain;
    width: 20px;
    height: 20px;
  }

  .talkAbout-view-btnDiv {
    text-align: center;
  }


  /*-------------------- component  talkAbout -------------------- end*/

  /*-------------------- component  talkheader -------------------- start*/
  .talkheader-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .talkheader-istwitter {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 526px;
    height: 40px;
    margin: auto;
  }

  .talkheader-vertical {
    margin-bottom: 80px;
  }

  .talkheader-publicize {
    font-size: 24px;
    font-weight: bold;
  }

  .talkheader-isbig {
    margin-left: 50px;
  }

  .talkheader-isbig-text {
    font-size: 18px;
    display: flex;
    align-items: center;
  }

  .talkheader-good-thumbup {
    margin-left: 5px;
    color: #999d9d;
  }

  .talkheader-good-thumbup-s {
    margin-left: 5px;
    color: #CE9898;
  }

  .talkheader-directions-istwitter {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-top: 30px;
  }

  .talkheader-istwitter-text {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 246px;
    height: 47px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    opacity: 1;
    margin-bottom: 20px;
    position: relative;
  }

  .san-triangle {
    position: absolute;
    z-index: 100;
    left: 119px;
    top: 40px;
    width: 13px;
    height: 13px;
    transform: rotate(45deg);
    background: #fff;
  }

  .ts-triangle {
    position: absolute;
    z-index: 100;
    left: 120px;
    top: 42px;
    width: 12px;
    height: 12px;
    transform: rotate(45deg);
    background: black;
  }

  .talkheader-border-isteitter {
    text-align: left;
    font: normal normal bold 20px/25px "Noto Sans JP";
    letter-spacing: 0px;
    color: #333333;
    opacity: 1;
  }

  .talkheader-bird {
    display: flex;
    justify-content: center;
    width: 283px;
    height: 59px;
    background: #1D9BF0 0% 0% no-repeat padding-box;
    border-radius: 5px;
    opacity: 1;
    margin-bottom: 50px;
    text-align: center;
    cursor: pointer;
  }

  .talkheader-bird-img {
    width: 35px;
    margin-top: 10;
  }

  .talkheader-bird-commenttitle {
    font-size: 28px;
    margin-bottom: 20px;
    font-weight: 600;
    margin-top: 30;
  }

  .talkheader-Preferential {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 900px;
    height: 189px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    border-radius: 20px;
    opacity: 1;
    margin-bottom: 20px;
  }

  .talkheader-btn-text {
    margin-top: 20px;
    font-size: 16px;
  }

  .talkheader-talkheaderinfo {
    margin-top: 20px;
    width: calc(960px - 180px);
  }

  .talkheader-talkheaderinfo-input {
    width: 800px;
    height: 40px;
    border: 1px solid #E6E6E6;
    background: #F3F3F3 0% 0% no-repeat padding-box;
    padding-left: 10px;
    border-radius: 2px;
    font-size: 18px;
  }

  .talkheader-sou-btn-title {
    margin-top: 20px;
    line-height: 45px;
    font-size: 20px;
    font-weight: 800;
    width: 300px;
    height: 45px;
    background: #FFFFFF;
    border: 1px solid #707070;
    border-radius: 30px;
    cursor: pointer;
  }

  .talkheader-sou-btn-title2 {
    margin-top: 20px;
    line-height: 45px;
    font-size: 20px;
    font-weight: 800;
    width: 300px;
    height: 45px;
    background: #707070;
    border: 1px solid #707070;
    border-radius: 30px;
    color: #ffffff;
  }

  .talkheader-comment-title {
    width: 526px;
    height: 40px;
    margin: auto;
    margin-bottom: 20px;
    font-size: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  /*-------------------- component  talkheader -------------------- end*/

  /*-------------------- component  comment -------------------- start*/
  .comment-type {
    font-size: 16px;
  }

  .comment-type2 {
    font-size: 14px;
    color: #949494;
  }

  .textareaaa {
    width: 650px;
    height: 30px;
    max-height: 300px;
    border: 1px solid #E6E6E6;
    border-radius: 2px;
    background: #F3F3F3 0% 0% no-repeat;
    padding: 8px 0 0 10px;
    font-size: 16px;
  }

  .comment-textarea1 {
    margin-top: 20px;
    width: 800px;
  }

  .comment-textarea2 {
    margin-top: 10px;
    width: 550px;
  }

  .comment-isvotecommentT {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .comment-isvotecomment {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    margin-left: 10px;
    width: 160px;
    height: 45px;
    background: #FFFFFF;
    border: 1px solid #707070;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
  }


  .comment-isvotecommentdisab {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    margin-left: 10px;
    width: 160px;
    height: 45px;
    background-color: #BEBEBE;
    color: #fff;
    border: 1px solid #707070;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
  }

  .comment-isvotecommentTrue {
    width: 300px;
  }

  .comment-isvotecommentTrue1 {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .comment-isvotecommentTrue-center {
    margin-top: 20px;
  }

  .comment-isvotecommentTrueq {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  /*-------------------- component  comment -------------------- end*/

  /*-------------------- component  showdownmore -------------------- start*/
  .showdownmore-toggleText {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #333;
    align-items: center;
  }

  .down-img-2 {
    background-image: url('../img/down.svg');
    background-size: contain;
    width: 24px;
    height: 12px;
  }

  .showdownmore-text {
    margin-left: 12px;
  }

  /*-------------------- component  showdownmore -------------------- end*/


  /*-------------------- component  carousel1 -------------------- start*/
  .flexslider {
    position: relative;
    /* height: 800px; */
    overflow: hidden;
    background-color: #fff;
  }

  .flexslider2 {
    position: relative;
    height: 800px;
    overflow: hidden;
    background-color: #fff;
  }

  .layui-layer-close,.layui-layer-close2 {
    z-index: 999999999;
  }

  .ver-align {
    vertical-align: top;
  }

  .slides {
    position: relative;
    z-index: 1;
  }


  .slides li {
    height: 400px;
  }

  .flex-control-nav {
    position: absolute;
    bottom: 10px;
    z-index: 2;
    width: 100%;
    text-align: center;
  }

  .flex-control-nav li {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 5px;
    display: inline;
    zoom: 1;
  }

  .flex-control-nav a {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 40px;
    overflow: hidden;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/dot.png) right 0 no-repeat;
    cursor: pointer;
  }

  .flex-control-nav .flex-active {
    background-position: 0 0;
  }

  .flex-direction-nav {
    position: absolute;
    z-index: 3;
    width: 100%;
    top: 45%;
  }

  .flex-direction-nav li a {
    display: block;
    width: 50px;
    height: 50px;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
  }

  .flex-direction-nav li a.flex-prev {
    left: 40px;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/prev.png) center center no-repeat;
  }

  .flex-direction-nav li a.flex-next {
    right: 40px;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/next.png) center center no-repeat;
  }


  .flex-control-nav {
    position: absolute;
    bottom: 10px;
    z-index: 2;
    width: 100%;
    text-align: center;
  }

  .flex-control-nav li {
    display: inline-block;
    width: 14px;
    height: 14px;
    margin: 0 5px;
    display: inline;
    zoom: 1;
  }

  .flex-control-nav a {
    display: inline-block;
    width: 14px;
    height: 14px;
    line-height: 40px;
    overflow: hidden;
    background: url(../../assets/js/plug_js/jqueryflexslider/images/dot.png) right 0 no-repeat;
    cursor: pointer;
  }

  .flex-control-nav .flex-active {
    background-position: 0 0;
  }


  /*-------------------- component  carousel1 -------------------- end*/


  /*------------------------------------------------------------------------------------------------------------------------*/




  /*-------------------- special -------------------- start*/
  .special-tagbtn {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
  }

  .special-viewitem {
    margin-top: 30px;
  }

  .special-hasMore {
    display: flex;
    justify-content: center;
    margin-top: 30px;
    margin-bottom: 20px;
  }

  /*-------------------- special -------------------- end*/

  /*-------------------- specialDetails -------------------- start*/
  .specialDetails-tagbtn {
    display: flex;
    justify-content: center;
    margin-top: 20px;
  }

  .specialDetails-carousel {
    width: 600px;
    height: 400px;
  }

  .specialDetails-carousel-title {
    width: 600px;
    height: 46px;
    margin-top: 10px;
    font-size: 26px;
    font-weight: bold;
  }

  .specialDetails-carousel-title-expiration {
    display: flex;
    margin-top: 10px;
  }

  .specialDetauls-view-status-box {
    padding: 5px 15px;
    color: #fff;
    background-color: #656565;
    font-size: 16px;
  }

  .specialDetauls-view-fromStatus {
    display: flex;
    /* align-items: center; */
    font-size: 24px;
    margin-left: 10px;
    font-weight: bold;
    color: #59A5CC;
  }

  .specialDetauls-viewformStart-time {
    margin-left: 5px;
  }

  .specialDetauls-viewformstart-over {
    margin-left: 5px;
    font-size: 18px;
    margin-top: 5px;
    color: #FF0000;
    font-weight: bold;
  }

  .specialDetails-viewform-description {
    width: 600px;
    margin-top: 10px;
    font-size: 16px;
    white-space: pre-line;
  }

  .specialDetails-view-fat-thumbup-count {
    display: flex;
    width: 600px;
    margin-top: 22px;
  }

  .specialDetails-view-thumbup-count {
    margin-left: 5px;
  }

  .specialDetails-thumbup-div {
    display: flex;
    flex: 1;
    align-items: center;
  }


  .specialDetails-thumbup-divHeart {
    display: flex;
    align-items: center;
  }

  .specialDetails-form-comment-count1 {
    margin-left: 5px;
    color: #999D9D;
  }

  .specialDetails-form-comment-count2 {
    margin-left: 5px;
    color: #CE9898;
  }

  .specialDetails-form-vote-num {
    display: flex;
    align-items: center;
    margin-left: 20px;
  }

  .specialDetails-form-publish-time {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 120px;
    margin-left: 20px;
  }

  .specialDetails-form-lastest-on {
    display: flex;
    justify-content: flex-end;
    width: 80px;
  }

  .specialDetails-form-comment-count {
    color: #999D9D;
  }

  .specialDetails-new-box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 30px;
    background-color: #FF0000;
    color: #fff;
    border-radius: 4px;
    font-size: 14px;
  }

  .specialDetails-Summary {
    margin: 65px 0 20px 0;
  }

  .specialDetails-vote-result {
    background-color: #EBEAEA;
    height: 90px;
    line-height: 40px;
    padding-top: 10px;
    padding-bottom: 10px;
    height: 46px;
  }

  .specialDetails-vote-result-title {
    font-weight: bold;
    margin-left: 20px;
    font-size: 26px;
    height: 46px;
  }

  .video-position {
    display: flex;
    flex-direction: column;
    position: relative;
  }

  .video-position-div {
    min-width: 960px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #FFFFFF;
    background: #999D9D 0% 0% no-repeat padding-box;
    opacity: 1;
    font-size: 18px;
  }

  .specialDetauls-data {
    border: 1px solid #FFFFFF;
    font-size: 18px;
  }

  .specialDetauls-data-text {
    width: 242px;
    height: 26px;
    line-height: 26px;
    padding: 20px 0;
    color: #fff;
    text-align: center;
  }

  .specialDetauls-data-textData {
    width: 670px;
    line-height: 26px;
    padding: 20px 24px;
    color: #000000;
    background-color: #F2F2F2;
    padding: 20px 24px;
  }

  .specialDetauls-isShowQrcode {
    width: 960px;
    height: 400px;
    position: absolute;
    top: 10px;
    z-index: 998;
    width: 100%;
    display: none;
    background: rgba(0, 0, 0, .5);
    background-color: #F2F2F2;
  }

  .specialDetauls-isShowQrcode-getClick {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #F2F2F2;
    width: 900px;
    height: 408px;
    margin: 0 auto 0;
  }

  .specialDetails-qrcode {
    width: 180px;
    height: 180px;
    border: 1px solid black;
    margin: 52px 0 0;
    padding: 10px;
    box-sizing: border-box;
  }

  .specialDetails-qrcode-text {
    font-size: 20px;
    margin-top: 46px;
  }

  .specialDetails-qrcodeinfo {
    display: inline-block;
    width: 800px;
    margin-top: 24px;
    color: #1592E6;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 20px;
    text-align: center;
  }

  .specialDetails-list {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    border: 1px solid #FFFFFF;
    font-size: 0.8rem;
    /* background: #999D9D 0% 0% no-repeat padding-box; */
    background-color: #F2F2F2;
    border: 1px solid #FFFFFF;
  }

  .specialDetails-list-left {
    width: 242px;
    /* height: 26px; */
    line-height: 26px;
    font-size: 18px;
    padding: 20px 0;
    color: #fff;

    background: #999D9D 0% 0% no-repeat padding-box;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .specialDetails-list-right {
    flex: 1;
    color: #000000;
    background-color: #F2F2F2;
    width: 670px;
    line-height: 26px;
    padding: 34px 24px;
    white-space: pre-line;
  }

  .specialDetails-exploit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 960px;
    height: 45px;
    margin-top: 40px;
  }

  .specialDetails-exploit-text {
    width: 300px;
    height: 29px;
    padding: 8px 18px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    border-radius: 91px;
    opacity: 1;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
  }

  .specialDetails-exploit-disabled {
    width: 300px;
    height: 29px;
    padding: 8px 18px;
    background: #BEBEBE 0% 0% no-repeat padding-box;
    border: 1px solid #707070;
    border-radius: 91px;
    opacity: 1;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    cursor: not-allowed;
    pointer-events:none;
  }

  .specialDetails-talkabout {
    margin-top: 100px;
  }

  .specialDetails-talkabout-text {
    margin-top: 40px;
  }

  .specialDetails-data {
    margin-top: 30px;
  }

  .back-curtain_mask {
    display: none;
    width: 100%;
    height: 408px;
    overflow: hidden;
  }

  /*-------------------- specialDetails -------------------- end*/

  /*-------------------- benefitImage -------------------- start*/
  .benefitImage-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 960px;
    height: 744px;
    margin: auto;
    margin-top: 20px;
    background-color: #141414;
  }

  .benefitImage-imgDiv {
    width: 800px;
    height: 585px;
    margin-top: 46px;
    cursor: pointer;
  }

  .benefitImage-imgDiv-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* background-image: url('../img/03.png');
        background-size: contain;
        background-position: center;
        background-repeat: no-repeat; */

  }

  .benefitImage-div-size {
    display: flex;
    font-size: 22px;
    margin-top: 20px;
    color: #ffffff;
    align-items: center;
  }

  .benefitImage-div-size-span {
    margin-left: 5px;
  }

  .benefitImage-carousel1 {
    display: none;
    width: 1100px;
    height: 800px;
    overflow: hidden;
  }

  /*-------------------- benefitImage -------------------- end*/

  /*-------------------- benefitVideo -------------------- start*/
  .benefitVideo-body {
    position: relative;
    margin-top: 20px;
    cursor: pointer;
  }

  /*-------------------- benefitVideo -------------------- end*/

  /*-------------------- benefitScreen -------------------- start*/
  .benefitScreen-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 320px;
    border: 1px solid #707070;
    margin-top: 40px;
    box-sizing: border-box;
  }

  .benefitScreen-divImage {
    width: 347px;
    height: 239px;
  }

  .benefitScreen-divText {
    width: 507px;
    height: 235px;
    margin-left: 66px;
  }

  .benefitScreen-divText-tdnameName {
    font-size: 24px;
    color: #333333;
    font-weight: bold;
  }

  .benefitScreen-divText-tdnameExp {
    margin-top: 10px;
    color: #6cbaff;
  }

  .benefitScreen-divText-tdnameTime {
    margin-top: 10px;
  }

  .benefitScreen-divText-tdnameData {
    margin-top: 10px;
  }

  .benefitScreen-divText-tdnameRedeem {
    width: 363px;
    height: 60px;
    line-height: 60px;
    background: #229500;
    color: #FFFFFF;
    text-align: center;
    font-size: 24px;
    margin-top: 20px;
    cursor: pointer;
    border: none;
  }

  .benefitScreen-divText-tdnameRedeem-disabled {
    width: 363px;
    height: 60px;
    line-height: 60px;
    background: #707070;
    color: #FFFFFF;
    text-align: center;
    font-size: 24px;
    margin-top: 20px;
    cursor: pointer;
    border: none;
  }

  .benefitImage-body-detail {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin-top: 20px;
  }

  /*-------------------- benefitScreen -------------------- end*/

  .layui-layer-btn {
    display: flex;
    justify-content: space-around;
    flex-direction: row-reverse;
  }

  .layui-layer-btn a {
    font-size: 16px;
  }
}