sceneLoc/scene/hottemp/css/style.css

button{background:transparent;}
html,body {
    width: 100%;
    height: 100%;
    font-family: "Microsoft YaHei";
    margin:0px;
    overflow: hidden;
}
body{ overflow-y:scroll; -webkit-overflow-scrolling:touch;}
.wrapper{width: 64%;height: 100%;margin:  0 auto; padding-top: 100px;}
.contioner{ overflow: hidden;}
.wrap-img, .wrap-video, .wrap-model{ background: rgba(0,0,0,0.8); width: 100%; height: 100%; display: none; display: flex; justify-content: center; align-items: center;}
.wrap-img img{ max-width: 100%; max-height: 100%; }
.wrap-img > div, .wrap-video > video, .wrap-model > div{width: 100%; height: 100%;}
.footer-title{ display: flex; justify-content: space-between; margin-top: 20px;  }
.footer-text{margin-top: 20px;}
.footer-title h3 { font-size: 20px; color: #fff; font-weight: 600;}
.wrap-iframe{ height: 100%; overflow-x:hidden; -webkit-overflow-scrolling:touch;}
.wrap-iframe iframe, .wrap-model iframe { width: 100%; height: 99%;} 
.footer-btn button{ font-size: 14px; color: #fff; width: 90px; height: 32px; line-height: 32px; cursor: pointer; border-radius: 10px; border: solid 1px #fff; margin-right: 10px; }
.footer-btn button.active{background: #19bbed; border: none;}
.footer-text{ color: #fff; line-height: 120%; position: relative; text-align: justify;}
.img-icon{background: url("https://super.4dage.com/data/388/hot/images/img-icon.png")no-repeat left top;}
.video-icon{background: url("https://super.4dage.com/data/388/hot/images/video-icon.png")no-repeat left top;}
.model-icon{background: url("https://super.4dage.com/data/388/hot/images/model-icon.png")no-repeat left top;}
.iframe-icon{background: url("https://super.4dage.com/data/388/hot/images/iframe-icon.png")no-repeat left top;}
.footer-btn i{ display: inline-block; position: relative; top: 4px; background-size: 100%; width: 18px; position: relative;  height: 18px; margin-right: 5px;}
 .footer-mask{position: absolute;/* background: linear-gradient(rgba(61,61,61,0) 0%, rgba(61,61,61,0.9) 40%,  rgba(61,61,61,1) 60%,rgba(61,61,61,0) 100%);*/  z-index: 10;bottom: -16px;left: 0;width: 100%;height: 50%;} 

 .pinch-zoom-container{height: 100%;}

 @media screen and (max-width: 1600px) {
    .wrapper{ width: 76%; padding-top: 70px;}
    
}
@media screen and (max-width: 1000px) {
    .wrapper{ width: 86%; padding-top: 50px;}
}
@media screen and (max-width: 700px) {
    .footer-title h3{ font-size: 16px;}
    .footer-text{ font-size: 14px; margin-top: 10px; padding: 0 6px; line-height: 150%;}
    .footer-text p { text-indent: 28px;}
    .wrapper{ width: 94%; padding-top: 30px;}
    .footer-title{flex-direction:column-reverse; align-items:center; margin-top: 10px; }
    .footer-btn{margin-bottom: 10px;}
    .ui-icon-before:before{left: 4px;}
    
}
@media screen and (max-width: 600px) {
    .wrapper{ width: 100%; padding-top: 34px; }
    .o-slider--item{background: rgba(0,0,0,0.4);}
}
@media screen and (max-width: 400px) {
}


::-webkit-scrollbar/*整体部分*/
{
    width: 10px;
    height:10px;
}

::-webkit-scrollbar-track/*滑动轨道*/
{
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    border-radius: 0px;
    background: rgba(0,0,0,0.1);
}

::-webkit-scrollbar-thumb/*滑块*/
{
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(192,192,192,0.2);
    background: rgba(192,192,192,0.2);
}

::-webkit-scrollbar-thumb:hover/*滑块效果*/
{
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.4);
}