@-ms-viewport { width: device-width; }
@media only screen and (min-device-width: 800px) { html { overflow:hidden; } }
*{margin:0;padding:0;}
html,body { height:100%; overflow: hidden;font-size: 10px;}
body { position: relative; overflow:hidden; font-family:"PingFang SC", "Hiragino Sans GB","Microsoft Yahei",sans-serif; font-size:16px; color:#FFFFFF; background-color:#000000; }
#pano {position:relative;width:100%;height:100%;}
.subtitle-box{
    position: absolute;
    left: 50%; bottom:36px;
    margin-left: -50%;
    width:100%;
    z-index: 100;
    text-align: center;
    font-size: 16px;
    -webkit-transition: bottom .5s ease;
            transition: bottom .5s ease;
}
.subtitle-box.hide-controller{
    bottom:0;
}
#subtitle span{
    display: inline-block;
    margin-bottom: 3px;
    padding: 3px 6px;
    background-color: rgba(15, 22, 30, 0.8);
    text-shadow: rgb(34, 34, 34) 0px 0px 4px, rgb(34, 34, 34) 0px 0px 4px, rgb(34, 34, 34) 0px 0px 4px, rgb(34, 34, 34) 0px 0px 4px;
}
.fl{float:left;}
.cl:after{ content:'.'; display:block; clear:both; height:0; visibility:hidden;}
.caption-box{
    background-color: rgba(0, 25, 50, 0.7);
    position:absolute; top:0px; right: 0; width:100%; height: 100%; font-size: 14px;z-index: 4000;
    -webkit-transform:translate3d(100%,0,0);
    transform:translate3d(100%,0,0);
    transition-duration: 200ms;
}
.caption-show{
    -webkit-transform:translate3d(0,0,0) !important;
    transform:translate3d(0,0,0) !important;
}
.caption{
    color:white; line-height:2em; text-align:justify;
    padding: 36px 16px 16px;
    border-top: 1px solid rgba(0, 25, 50, 0.2);
}
.caption-box .btn-close {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 10px;
    bottom: 10px;
    z-index: 100;
    background: transparent url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA4RpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo4M2JmMDlkOS0yNzdhLWI0NDMtOTg1Mi1jNDFmYjBmZWQzNGMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MzU5RUFGNUQ0QTk5MTFFN0I3MjBFQ0I1Nzg4MEI4REYiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MzU5RUFGNUM0QTk5MTFFN0I3MjBFQ0I1Nzg4MEI4REYiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NzQ3MGNmMWYtYmZjYi1jMTQzLWFiNzctOGJjMTE0NDAwZmU0IiBzdFJlZjpkb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6MmFiNTg3MzQtNGE5OS0xMWU3LWE5NTAt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") no-repeat 0 0;
    -webkit-background-size: 40px;
    background-size: 40px;
    font-size: 0;
    color: transparent;
    text-align: center;
    line-height: 40px;
}
.btn-caption {
    position: absolute; right:15px; top:60px; z-index: 100;
    width: 38px; height: 38px;
    background: transparent url(controlIcons.png) 0 -335px no-repeat;
    -webkit-background-size: 150px;
    background-size: 150px;
}
.btn-comment {
    position: absolute; right:15px; top:105px; z-index: 100;
    width: 38px; height: 38px;
    background: transparent url(controlIcons.png) -38px -335px no-repeat;
    -webkit-background-size: 150px;
    background-size: 150px;
    font-size: 0; color: transparent;
}
#android-video video{display: block;width: 100%; }
.drag-tip{
    display: none;
    position: absolute;
    left: 50%;bottom: 10%;
    margin-left:-100px;
    width:200px;height: 37px;
    background:url(drag.png) no-repeat;
    -webkit-animation: dragTip 1s linear infinite alternate;
    animation: dragTip 1s linear infinite alternate;
}
.jiathis_button {
        display: none;
        position: absolute;
        top: 150%;left: 50%;
        margin-left: -150px;
        margin-top: -50px;
        padding-top: 20px;
        width: 300px;height: 80px;
        border-radius: 3px;
        background-color: rgba(0, 25, 50, 0.8);
        text-align: center;
        -webkit-transition:all .5s;
        transition:all .5s;
        z-index: 10;
    }
.jiathis_button.show{
    top: 50%;
}
.share-close,.jiathis_button span{
    background-image:url(http://image.thepaper.cn/html/pano/sources/controlIcons.png);
}
.share-close{
    position: absolute;
    right: -32px;
    top: -32px;
    width: 64px;
    height: 64px;
    background-repeat: no-repeat;
    background-position: -128px 0;
    -webkit-transform: scale(.8);
    transform: scale(.8);
    -webkit-transition:all .5s;
    transition:all .5s;
}
.share-close:hover{
    -webkit-transform: scale(.8) rotate(90deg);
    transform: scale(.8) rotate(90deg);
}
.jiathis_button a{
    display: inline-block;
}
.jiathis_button span{
    display: inline-block;
    border-radius: 50%;
    width: 64px;height: 64px;
    -webkit-transition: all .5s;
    transition: all .5s;}
.jiathis_button span:hover{
    border-radius: 0;
}
.jiathis_button_weixin span{background-position: -256px 0;}
.jiathis_button_tsina span{  background-position: -320px 0;}
.jiathis_button_cqq span{  background-position: -384px 0;}
.jiathis_button_qzone span{  background-position: -448px 0;}

.linklayer {position: absolute; width: 100%; left: 0; bottom: 20%; z-index: 999; text-align: center; display: none;}
.linklayer a {
    display: inline-block; text-decoration: none;
    color: #fff; margin:0 10px; border-radius: 30px; padding: 5px 20px;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

@media only screen and (min-width: 640px) {
    .drag-tip,.jiathis_button{display: block;}
    .caption-box {
        width: 300px;
        -webkit-transform:translate3d(300px,0,0);
        transform:translate3d(300px,0,0);
    }
    .caption{line-height: 24px;}

}
@media only screen and (min-width: 768px){
    .subtitle-box{
        width:30%; margin-left: -15%; bottom:45px;
        font-size: 20px;
    }
    #subtitle span{
        margin-bottom: 3px;
        padding: 5px 10px;
    }
}
@media only screen and (min-width: 1300px){
    .subtitle-box{
        width:30%; margin-left: -15%; bottom:45px;
        font-size: 24px;
    }
}
@-webkit-keyframes dragTip{
    0%{-webkit-transform:translateX(-10px);}
    0%{-webkit-transform:translateX(10px);}
}
@keyframes dragTip{
    0%{transform:translateX(-10px);}
    0%{transform:translateX(10px);}
}