* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
    font-size: 16px;
    color: white;
    text-align: justify;
}


/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    background-color: #2d2f33;
}


/*定义滚动条轨道
   内阴影+圆角*/

::-webkit-scrollbar-track {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #2d2f33;
}


/*定义滑块
   内阴影+圆角*/

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background-color: #ffffff;
}

html,
body {
    position: relative;
    width: 100vw;
    height: 100%;
    overflow: hidden;
    background-color: black;
}


/* pano */

#pano {
    position: relative;
    width: 100%;
    height: 100%;
}


/* caption */

.pop-box {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(6 10 24 / 80%);
    z-index: 4000;
    transform: translateX(100%);
    transition: all .2s linear;
}

.show-caption {
    transform: translateX(0);
}

.caption {
    position: absolute;
    top: 30px;
    right: 15px;
    bottom: 55px;
    left: 15px;
    line-height: 2em;
    -webkit-overflow-scrolling: touch;
    overflow: auto;
}

.caption p {
    margin-bottom: 10px;
    text-align: justify;
}

.btn-close-caption,
.btn-close-comment,
.btn-close-media {
    position: absolute;
    left: 15px;
    bottom: 10px;
    width: 40px;
    height: 40px;
    z-index: 8000;
    background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4M2JmMDlkOS0yNzdhLWI0NDMtOTg1Mi1jNDFmYjBmZWQzNGMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzU5RUFGNUQ0QTk5MTFFN0I3MjBFQ0I1Nzg4MEI4REYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzU5RUFGNUM0QTk5MTFFN0I3MjBFQ0I1Nzg4MEI4REYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzQ3MGNmMWYtYmZjYi1jMTQzLWFiNzctOGJjMTE0NDAwZmU0IiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6MmFiNTg3MzQtNGE5OS0xMWU3LWE5NTAt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") no-repeat 0 0;
    background-size: 40px;
    cursor: pointer;
}


/* share */

.qrcode {
    display: none;
    position: absolute;
    top: 40%;
    right: 0;
    width: 140px;
    background-color: #ffffff;
    border-radius: 4px;
    cursor: pointer;
}

.qrcode p {
    margin-bottom: 8px;
    font-size: 12px;
    color: #000;
    text-align: center;
}

.qrcode canvas {
    border-radius: 4px;
}

.qrcode.show {
    display: block;
}


/* video pano */

.drag-tip {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -150px;
    margin-top: -100px;
    width: 300px;
    height: 200px;
    background: url("drag.png") no-repeat left top;
    background-size: 100% auto;
    -webkit-animation: dragTip steps(66) 5s 1 both;
    animation: dragTip steps(66) 5s 1 both;
    transform: scale(.5);
    pointer-events: none;
}


/* comment */

.comment-box {
    background-color: #fff;
}

.ios .comment-box {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.show-comment {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}

.comment-con {
    width: 100%;
    height: 100%;
    position: relative;
}

.ios .comment-con {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.comment-con iframe {
    height: 100%;
    border: 0 none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.media-box {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(0);
    opacity: 0;
    pointer-events: none;
    overflow: auto;
}

.media-box.portrait-video {
    display: block;
}

.show-video,
.show-picture {
    opacity: 1;
    pointer-events: auto;
}

.media-caption {
    margin: 0 20px 40px;
}

.media-caption p {
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.6;
}

.portrait-video .media-caption {
    margin: 0 0 40px;
}

.media-wrap {
    position: relative;
    margin: 0 auto;
    max-width: 960px;
}

.media-wrap video,
.media-wrap .picture-wrap {
    display: none;
}

.show-video video,
.show-picture .picture-wrap,
.picture-wrap img {
    display: block;
}

.picture-wrap {
    margin-bottom: 20px;
    cursor: pointer;
}

.picture-wrap img {
    width: 100%;
}

.media-box.portrait-video .media-wrap {
    margin: 30px;
}

.media-box video {
    margin-bottom: 20px;
    width: 100%;
}

.btn-close-media {
    position: sticky;
    top: 0;
    left: calc(100vw - 60px);
    right: 15px;
}

.btn-close-media img {
    display: block;
    width: 100%;
}

@media screen and (min-width: 640px) {
    .drag-tip {
        display: block;
    }
}

@media screen and (min-width: 768px) {
    .caption p {
        font-size: 15px;
        margin-right: 15px;
    }
    .pop-box {
        background-color: #0508115c;
        transform: translateX(0);
        opacity: 0;
        pointer-events: none;
    }
    .show-video,
    .show-picture {
        opacity: 1;
        pointer-events: auto;
    }
    .media-box {
        background-color: rgba(19, 19, 19, 0.8);
    }
    .media-box.portrait-video {
        display: flex;
        justify-content: center;
        align-content: flex-start;
    }
    .media-box.portrait-video .media-wrap {
        display: flex;
        justify-content: center;
        /* margin: 0 auto; */
        align-content: flex-start;
    }
    .media-box.portrait-video video {
        width: 50%;
        height: auto;
    }
    .media-caption p {
        font-size: 15px;
    }
    .comment-box {
        top: 0;
        right: 0;
        left: auto;
        bottom: 0;
        overflow: hidden;
        pointer-events: none;
    }
    .pop-box.show-caption,
    .pop-box.show-comment {
        opacity: 1;
        pointer-events: auto;
    }
    .caption,
    .comment-con {
        left: auto;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 30px 10px 30px 20px;
        width: 300px;
        line-height: 28px;
        transform: translateX(100%);
        background-color: #0304079c;
        transition: all .2s .2s linear;
    }
    .comment-con {
        position: absolute;
        background-color: #fff;
    }
    .show-caption .caption,
    .show-comment .comment-con {
        transform: translateX(0);
    }
    .btn-close {
        left: auto;
        right: 250px;
        opacity: 0;
    }
    .btn-close-media {
        position: absolute;
        top: -60px;
        right: 0;
        left: auto;
    }
    .media-box.portrait-video .btn-close-media {
        top: 0;
    }
    .media-caption {
        margin-left: 0;
    }
    .media-box.portrait-video .media-caption {
        margin-left: 20px;
        width: 30%;
    }
    .show-caption .btn-close,
    .show-comment .btn-close {
        transition: all .2s .5s linear;
        opacity: 1;
    }
}

@keyframes dragTip {
    to {
        background-position: 0 bottom;
    }
}