#shareContent > div > div { width: 380px; }

@media screen and (min-width: 320px) and (max-width: 480px) {
    #shareContent > div > div { width: 320px; }
    .share-btn { pointer-events: none; }
}

.share { width: 600px; overflow: hidden; display: none; max-height: 986.32px; background: #ccc; }

.card { display: flex; justify-content: center; align-items: center; flex-direction: column; background: #fff; padding: 10px 10px 0 10px; border-radius: 3px; }

.card .share { width: 100%; height: 100%; }

.card-header { width: 100%; overflow: hidden; max-height: 386.32px; min-height: 386.32px }

.card-body { max-height: 600px; min-height: 600px; position: relative; }

.card-body .content { padding: 10px 45px 0px 45px; color: #989898; max-height: 150px; min-height: 150px; font-size: 22px; }

.card-body .content p { position: relative; margin-top: 0px; margin-bottom: 10px; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }

.card-body .title { font-size: 26px; padding: 5px 45px 0px 45px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font-weight: bold; }

.card-body .date { font-size: 22px; padding: 25px 45px 0px 45px; color: #989898; }

.card-body .footer { position: absolute; width: 100%; bottom: 0; height: 210px; padding: 0; }

.card-body .footer .footer1 { position: relative; height: 160px; margin: 0px 45px; bottom: 80px; top: 0; }

.card-body .footer .footer2 { position: absolute; height: 50px; bottom: 0px; width: 100%; }

.card-body .footer2 .left { width: 60%; position: absolute; }

.card-body .footer2 .right { width: 40%; position: absolute; right: 0; text-align: center; color: #989898; font-size: 18px }

.card-body .logo { width: 60%; position: absolute; top: 32%; }

.card-body .qrcode { position: absolute; background-color: #fff; right: 0; width: 132px; height: 132px; padding: 10px; }

.card-footer { width: 100%; height: 50px; text-align: center; display: flex; justify-content: center; align-items: center; }

.share-btn { height: 32px; background: #ee7800; opacity: 1; border-radius: 31px; color: #fff; border: 0px solid #fff; position: absolute; left: 3%; right: 3%; line-height: 32px; }

.share-btn:active { background: #9f5102; }

.detailBtn { background: #FFF; display: flex; justify-content: center; padding-bottom: 60px; }

.detailBtn .btn { background: #ff7300; display: flex; justify-content: center; align-items: center; color: #FFF; font-size: 16px; line-height: 45px; width: 200px; }

.detailBtn .btn img { margin: 0 3px; }

.detailBtn .btn:hover { background: #9f5102; }

.shareInfo { border: 1px solid #eee; position: fixed; top: 48vh; right: 10vw; display: flex; flex-direction: column; background: #FFF; padding: 18px 18px 0 18px; align-items: center; justify-content: center; z-index: 99999; transition: all 500ms; z-index: 998 }

.shareInfo a { margin-bottom: 20px; width: 35px; height: 35px; transition: all 500ms; }

.shareInfo a img:nth-child(1) { opacity: 1; }

.shareInfo a img:nth-child(2) { opacity: 0; }

.shareInfo a:hover img:nth-child(1) { opacity: 0; }

.shareInfo a:hover img:nth-child(2) { opacity: 1; }

.shareInfo .t { color: #ff7300; margin-bottom: 20px; }

@media screen and (max-width: 1650px) {
    .shareInfo { top: 49.5vh; right: 4vw; }
}

@media screen and (max-width: 1550px) {
    .shareInfo { top: 49.5vh; right: 2vw; }
}

@media screen and (max-width: 1440px) {
    .shareInfo { top: 49.5vh; right: 8vw; }
}

@media screen and (max-width: 1340px) {
    .shareInfo { top: 40.5vh; right: 9vw; }
}

@media screen and (max-width: 1280px) {
    .shareInfo { top: 50.5vh; right: 9vw; padding: 10px 10px 0 10px; }
}

@media screen and (max-width: 800px) {
    .shareInfo { top: 33.7vh; right: 20px; -webkit-transform: scale(0.8); transform: scale(0.8); -ms-transform: scale(0.8); -webkit-transform-origin: top right; transform-origin: top right; -ms-transform-origin: top right; padding: 10px 10px 0 10px; }
}

@media screen and (min-width: 375px) and (max-width: 600px) {
    .shareInfo { top: 35.5vh; padding: 10px 10px 0 10px; }
}

@media screen and (min-width: 0px) and (max-width: 375px) {
    .shareInfo { top: 45.5vh; padding: 10px 10px 0 10px; }
}

.wordbreak { word-break: break-all; }

.disabled { cursor: not-allowed; opacity: 0.5 !important; }
.disabled > div { pointer-events: none; opacity: 0.5 !important; }
.disabled a { pointer-events: none; opacity: 0.5 !important; }
.disabled:hover > img { pointer-events: none; opacity: 1 !important }