html {
    position: relative;
    overflow: hidden;
    height: 100vh;
    margin: 0;
    padding: 0;
}

body {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

#container {
    position: fixed;
    z-index: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#container:-webkit-full-screen { background-color: #fff; }
#container:-moz-full-screen { background-color: #fff; }
#container:fullscreen { background-color: #fff; }

/* fix改为relative，修复手百搜索框显示隐藏后，封面图和分块图高度不一致问题 */
body.app-baidu #container {
    position: relative;
}

#loading-container {
    position: fixed;
    z-index: 1001;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    background: linear-gradient(180deg, #0d0d0d 0%, #1e1d25 48%, #1f2535 100%);
    background: -o-linear-gradient(180deg, #0d0d0d 0%, #1e1d25 48%, #1f2535 100%);
    background: -ms-linear-gradient(180deg, #0d0d0d 0%, #1e1d25 48%, #1f2535 100%);
    background: -moz-linear-gradient(180deg, #0d0d0d 0%, #1e1d25 48%, #1f2535 100%);
    transition: background-image 0.3s, opacity 2s;
}

#loading-container.hide {
    opacity: 0;
    pointer-events: none;
}

#loading-container .loading-content {
    position: relative;
    line-height: 20px;
    height: 20px;
    width: 200px;
    text-align: center;
}

#loading-container .loading-name {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#loading-container .loading-logo {
    position: absolute;
    left: 0;
    bottom: -30px;
    width: 200px;
    height: 200px;
    background: url("../icon/loading.svg") no-repeat center;
}

@keyframes logo-breathe {
    from {
        filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.5));
        transform: scale3d(1, 1, 1);
    }

    50% {
        filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.8));
        transform: scale3d(1.03, 1.03, 1);
    }
}

@-webkit-keyframes logo-breathe {
    from {
        -webkit-filter: drop-shadow(0px 0px 3px rgba(255, 255, 255, 0.5));
        /* -webkit-transform: scale3d(1, 1, 1); Safari 冲突 */
    }

    50% {
        -webkit-filter: drop-shadow(0px 0px 10px rgba(255, 255, 255, 0.8));
        /* -webkit-transform: scale3d(1.03, 1.03, 1); Safari 冲突 */
    }
}

#loading-container .loading-progress {
    position: absolute;
    width: 200px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    left: 50%;
    transform: translateX(-50%);
    top: 44px;
}

#loading-container .loading-progress > b {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    content: "";
    width: 0;
    height: 100%;
    background: #fff;
    border-radius: 2px;
}

#loading-container .loading-progress > em {
    position: absolute;
    top: 16px;
    left: 0;
    width: 100%;
    text-align: center;
    font-style: normal;
    line-height: 20px;
    height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}

#share-token-container {
    position: fixed;
    z-index: 1002;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(../media/img/share-token-bg.pc.svg) no-repeat center/cover;
    opacity: 0;
    transition: opacity .5s;
    display: none;
    align-items: center;
    justify-content: center;
}

@media only screen and (max-device-aspect-ratio: 1/1) {
    #share-token-container {
        background-image: url(../media/img/share-token-bg.mb.svg);
    }
}

#share-token-container .share-token-box {
    width: 327px;
    min-height: 246px;
    background: #fff;
    box-shadow: 0 8px 16px 0 rgba(32, 26, 161, .05);
    border-radius: 4px;
    text-align: center;
    overflow: hidden;
}

#share-token-container .share-token-box h3 {
    height: 54px;
    line-height: 54px;
    padding: 0 21px;
    margin: 0 0 24px;
    text-align: left;
    font-size: 16px;
    background: url(../media/img/share-token-head.svg) no-repeat center/contain;
    color: #fff;
    font-weight: normal;
}

#share-token-container .share-token-box input {
    color: #333;
    width: 285px;
    height: 32px;
    font-size: 16px;
    padding: 4px 11.5px;
    font-family: PingFangSC-Regular;
    line-height: 20px;
    border: 1px solid #e0e0e0;
    border-radius: 2px;
    box-sizing: border-box;
    transition: all .3s;
    outline: none;
    background-color: transparent;
    -webkit-appearance: none;
}

#share-token-container .share-token-box input::-webkit-input-placeholder {
    color: #999;
}

@media (hover: hover) {
    #share-token-container .share-token-box input:hover {
        border-color: #999;
    }
}

#share-token-container .share-token-box input:focus {
    outline: 0;
    border-color: #0457f7;
    box-shadow: 0 0 0 2px rgba(4, 87, 247, .2);
}

#share-token-container .error-message {
    visibility: hidden;
    height: 24px;
    line-height: 24px;
    text-align: left;
    font-size: 12px;
    margin: 0 21px;
    color: #e64552;
}

#share-token-container .share-token-box button {
    font-size: 16px;
    color: #fff;
    cursor: pointer;
    border: none;
    width: 94px;
    height: 32px;
    background-color: #0457f7;
    border-radius: 3px;
    transition: all .3s;
}

#share-token-container .share-token-box button[disabled] {
    background-color: #b4cdfd;
    cursor: not-allowed;
}

#share-token-container .share-token-box button:not([disabled]):hover {
    background-color: #82aaff;
}

#share-token-container .error input {
    border-color: #e64552;
    box-shadow: 0 0 0 2px rgba(230, 69, 82, .2);
}

#share-token-container .error .error-message {
    visibility: visible;
}

#share-token-container .captcha-box {
    display: flex;
    align-items: center;
    padding-left: 21px;
}

#share-token-container .captcha-box .captcha-code {
    width: 120px;
}

.captcha-box .captcha-img {
    width: 98px;
    height: 32px;
    margin: 0px 12px;
}

.captcha-box .refresh-btn {
    cursor: pointer;
}

#share-error-container {
    position: fixed;
    z-index: 1003;
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #fff;
}

.pv-limit-error .share-error-text-hint {
    text-align: center;
    line-height: 20px;
    height: unset;
}

.pv-limit-error .share-error-btn-refresh {
    display: none;
}

.share-error-image {
    display: inline-block;
    height: 162px;
    width: 162px;
    background-size: contain;
}

.share-not-exist {
    background: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%0A%3Csvg%20width%3D%22162px%22%20height%3D%22162px%22%20viewBox%3D%220%200%20162%20162%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3C!--%20Generator%3A%20Sketch%2058%20(84663)%20-%20https%3A%2F%2Fsketch.com%20--%3E%0A%20%20%20%20%3Ctitle%3EImg%2FLoadingFail%3C%2Ftitle%3E%0A%20%20%20%20%3Cdesc%3ECreated%20with%20Sketch.%3C%2Fdesc%3E%0A%20%20%20%20%3Cg%20id%3D%22V2.0%22%20stroke%3D%22none%22%20stroke-width%3D%221%22%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%0A%20%20%20%20%20%20%20%20%3Cg%20id%3D%22PC%E7%AB%AF%2F03%E8%BE%B9%E7%95%8C%E7%8A%B6%E6%80%81%2F04%22%20transform%3D%22translate(-639.000000%2C%20-237.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Group%22%20transform%3D%22translate(639.000000%2C%20237.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Img%2FWrong%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22Img%2FLoadingFail%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Crect%20id%3D%22space%22%20fill-rule%3D%22nonzero%22%20x%3D%220%22%20y%3D%220%22%20width%3D%22162%22%20height%3D%22162%22%3E%3C%2Frect%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cg%20id%3D%22%E7%BC%96%E7%BB%84%22%20transform%3D%22translate(6.000000%2C%209.000000)%22%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M50.6096273%2C139.355776%20L24.9409938%2C144.343975%20C22.5065217%2C144.817267%2020.1409938%2C143.222236%2019.6686335%2C140.787764%20L6.98571429%2C75.537764%20C6.51242236%2C73.1032919%208.10838509%2C70.7386957%2010.5428571%2C70.2654037%20L55.8773292%2C61.4536025%20L48.3521739%2C78.358882%20L70.3052795%2C94.4796894%20L50.6096273%2C139.355776%20Z%22%20id%3D%22Fill-1%22%20fill%3D%22%23EFF6FF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M126.143758%2C143.682112%20L55.9987267%2C137.544224%20L86.9117702%2C100.304161%20L70.2384783%2C78.7377019%20L82.510528%2C64.1103727%20L132.722329%2C68.5041615%20C135.192205%2C68.7193789%20137.026677%2C70.9050932%20136.810528%2C73.3759006%20L131.015497%2C139.593913%20C130.80028%2C142.06472%20128.614565%2C143.898261%20126.143758%2C143.682112%22%20id%3D%22Fill-3%22%20fill%3D%22%23EFF6FF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M85.8545963%2C10.7142857%20L73.742795%2C10.7142857%20C72.4617391%2C10.7142857%2071.4136025%2C9.66614907%2071.4136025%2C8.38509317%20C71.4136025%2C7.10403727%2072.4617391%2C6.05590062%2073.742795%2C6.05590062%20L85.8545963%2C6.05590062%20C87.1356522%2C6.05590062%2088.1837888%2C7.10403727%2088.1837888%2C8.38509317%20C88.1837888%2C9.66614907%2087.1356522%2C10.7142857%2085.8545963%2C10.7142857%22%20id%3D%22Fill-5%22%20fill%3D%22%23CCE2FF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M82.1278882%2C2.32919255%20L82.1278882%2C14.4409938%20C82.1278882%2C15.7220497%2081.0797516%2C16.7701863%2079.7986957%2C16.7701863%20C78.5176398%2C16.7701863%2077.4695031%2C15.7220497%2077.4695031%2C14.4409938%20L77.4695031%2C2.32919255%20C77.4695031%2C1.04813665%2078.5176398%2C0%2079.7986957%2C0%20C81.0797516%2C0%2082.1278882%2C1.04813665%2082.1278882%2C2.32919255%22%20id%3D%22Fill-7%22%20fill%3D%22%23CCE2FF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M149.674472%2C30.7453416%20C149.674472%2C33.8319876%20147.171056%2C36.3354037%20144.08441%2C36.3354037%20C140.997764%2C36.3354037%20138.494348%2C33.8319876%20138.494348%2C30.7453416%20C138.494348%2C27.6586957%20140.997764%2C25.1552795%20144.08441%2C25.1552795%20C147.171056%2C25.1552795%20149.674472%2C27.6586957%20149.674472%2C30.7453416%20Z%22%20id%3D%22Stroke-9%22%20stroke%3D%22%23CCE2FF%22%20stroke-width%3D%223.72670807%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Fill-11%22%20fill%3D%22%23B0C0F7%22%20points%3D%2223.8139441%20124.532702%2022.9325776%20125.511894%2023.8623913%20125.463447%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M26.2568944%2C127.950932%20L47.9780124%2C123.729503%20L64.6960248%2C85.6369565%20L42.7242857%2C69.5021739%20L47.7134161%2C58.2913043%20L13.9913665%2C64.8465839%20L26.2568944%2C127.950932%20Z%20M51.9190062%2C128.658075%20L26.2513043%2C133.646273%20C23.8168323%2C134.119565%2021.4513043%2C132.524534%2020.9780124%2C130.090062%20L8.29602484%2C64.8400621%20C7.82273292%2C62.4046584%209.41776398%2C60.0400621%2011.852236%2C59.5677019%20L57.1867081%2C50.7568323%20L49.6624845%2C67.6621118%20L71.6146584%2C83.7829193%20L51.9190062%2C128.658075%20Z%22%20id%3D%22Fill-13%22%20fill%3D%22%2376B1FF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Fill-15%22%20fill%3D%22%23CCE2FF%22%20points%3D%2242.9492857%2083.0156832%2024.8281677%20120.599534%2026.2564286%20127.950466%2047.9775466%20123.729037%2060.2654348%2095.7312112%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Fill-17%22%20fill%3D%22%23CCE2FF%22%20points%3D%2284.6836646%20102.620963%2068.4240373%20122.207609%20132.420932%20127.807919%20107.417516%2094.5451863%2090.7507453%20110.467547%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M68.4243168%2C122.208075%20L126.852578%2C127.320186%20L132.456615%2C63.2795031%20L86.2323913%2C59.2341615%20L78.7249379%2C68.1847826%20L95.383323%2C89.731677%20L68.4243168%2C122.208075%20Z%20M127.453509%2C132.983851%20L57.3084783%2C126.846894%20L88.2215217%2C89.6068323%20L71.5482298%2C68.039441%20L83.8202795%2C53.4121118%20L134.032081%2C57.8059006%20C136.501957%2C58.0220497%20138.336429%2C60.207764%20138.12028%2C62.6776398%20L132.32618%2C128.896584%20C132.109099%2C131.367391%20129.924317%2C133.200932%20127.453509%2C132.983851%20L127.453509%2C132.983851%20Z%22%20id%3D%22Fill-19%22%20fill%3D%22%2376B1FF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpath%20d%3D%22M122.038043%2C75.4613665%20C121.768789%2C78.5368323%20119.057609%2C80.8119876%20115.982143%2C80.5427329%20C112.906677%2C80.2734783%20110.631522%2C77.5622981%20110.899845%2C74.4868323%20C111.169099%2C71.4104348%20113.881211%2C69.1362112%20116.956677%2C69.4054658%20C120.032143%2C69.6737888%20122.307298%2C72.3859006%20122.038043%2C75.4613665%22%20id%3D%22Fill-21%22%20fill%3D%22%2376B1FF%22%3E%3C%2Fpath%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3Cpolygon%20id%3D%22Stroke-23%22%20stroke%3D%22%23CCE2FF%22%20stroke-width%3D%223.72670807%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20points%3D%226.5215528%2025.3209317%20-0.000186335404%2036.6175155%2013.0432919%2036.6175155%22%3E%3C%2Fpolygon%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%20%20%20%20%3C%2Fg%3E%0A%20%20%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
}

.share-not-support-ie .share-error-text-hint {
    font-size: 16px;
    color: #333;
    height: 22px;
    margin-top: 32px;
}

.share-not-support-ie .share-error-image {
    background: url("../icon/ie-error.svg") no-repeat center/contain;
    width: 182px;
    height: 116px;
}

.pv-limit-error .share-error-image,
.share-audit-error {
    background: url("../icon/share-audit-error.gif") no-repeat center bottom/105px;
}

.share-loading {
    width: 486px;
    height: 486px;
    background-repeat: no-repeat;
    background-image: url(../icon/creating.png);
    background-size: auto;
    animation: frame 1s steps(25) both infinite;
}

.share-loading-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(calc(1 / 3));
    display: flex;
    flex-direction: column;
    align-items: center;
}

.share-loading-wrapper .share-error-text-hint {
    height: 60px;
    font-size: 42px;
    font-weight: 400;
    color: #000;
    line-height: 60px;
    margin-top: 51px;
    white-space: nowrap;
}

.share-loading-wrapper .share-error-btn-refresh {
    color: #fff;
    width: 384px;
    height: 132px;
    background: #006eff;
    box-shadow: 0 8px 24px 0 rgba(0, 59, 137, .25);
    border-radius: 66px;
    text-align: center;
    vertical-align: middle;
    margin-top: 96px;
    line-height: 132px;
    pointer-events: all;
    font-size: 48px;
}

@keyframes frame {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -12150px 0;
    }
}

@-webkit-keyframes frame {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: -12150px 0;
    }
}

.share-error-text-hint {
    height: 20px;
    font-size: 14px;
    font-weight: 400;
    color: #000;
    line-height: 20px;
    margin-top: 17px;
}

.share-error-btn-refresh {
    color: #fff;
    width: 128px;
    height: 44px;
    background: #006eff;
    box-shadow: 0 8px 24px 0 rgba(0, 59, 137, .25);
    border-radius: 22px;
    text-align: center;
    vertical-align: middle;
    margin-top: 32px;
    line-height: 44px;
    pointer-events: all;
}

.share-error-btn-refresh:hover {
    cursor: pointer;
    opacity: .6;
}

.share-error-btn-refresh:active {
    cursor: pointer;
    opacity: .8;
}