*{margin: 0; padding: 0; box-sizing: border-box;-webkit-tap-highlight-color:transparent;}
/* html{height: 100%;background: url('../images/bg.jpg') no-repeat ;background-size:cover;} */
html{height: 100%}
body{height:100%; margin: 0;overflow: hidden;}
body { margin: 0; overflow: hidden; /* 溢出隐藏 */}
a {text-decoration: none;color: #ccc;}
input,button,select,textarea{outline: none;}
.label {font-size: 16px;color: #999;}
.line{width: 100%;height: 1px; background: #ccc;margin: 5px 0;}
.tj{position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%); color: #FFFFFF;font-size: 20px;}
#block{width: 100%;height: 100%;z-index: 99;position: absolute;top: 0;left: 0;background: url('../images/bg1.jpg') no-repeat ;background-size:cover;}

.title{ position: fixed; top: 15%; left: 50%; transform: translateX(-50%); z-index: 99; user-select: none;}
.title span{ font-size: 16px; color: #fff; white-space: nowrap;}

.top{ position: fixed; top: 10px;width: 100%;display: none;user-select: none; }
.top .top-left{ float: left; padding-left: 20px;}
.top .top-left .logo{zoom:0.8}
.top .top-right{ float: right; padding-right: 20px;font-size: 14px;}

.bottom{position: fixed; bottom: 10px; z-index: 9;width: 100%;}
.bottom .bottom-left{float: left;padding-left: 10px;}
.bottom .bottom-right{float: right;padding-right: 10px;}

.icons{font-size:0;display: none;}
.icons a,.help-layer i,.closeLayer{position:relative;display: inline-block;width:40px;height:40px;margin:0 3px; background-size:320px auto;background-image:url('../images/icon.png');}
.icons a{width: 32px; height: 32px; background-size: 256px auto;}
.icons a div{position: absolute;top:-38px;left:50%;display: none;height: 27px;line-height: 26px;text-align: center;font-size: 12px;color: #C0C0C0;background: rgba(0,0,0,0.7);border-radius: 5px;padding: 0 12px;transform: translate(-50%,0);-webkit-transform: translate(-50%,0);-moz-transform: translate(-50%,0);-ms-transform: translate(-50%,0);white-space: nowrap;}
.icons a div:after{position:absolute;bottom:-3px;left:50%;content: '';display: block;border-width: 3px 4px 0 4px;border-style: solid;border-color: rgba(0,0,0,0.7) transparent;margin-left: -4px;}

.icon1{background-position:-32px -96px;}
.icon2{background-position:-96px 0;}
.icon3{background-position:-160px 0;}
.icon3.on{background-position:-160px -32px;}
.icon4{background-position:-192px -32px;}
.icon5{background-position:-224px -32px;}
.icon5.on{background-position:-224px -96px;}
.icon6{background-position:-160px -96px;}
.icon7{background-position:-32px 0;}
.icon7.on{background-position:-32px -32px;}
.icon8{background-position:0 -80px;}
.icon9{background-position:0 -80px;}
.icon10{background-position:0 -80px;}

/* @media screen and (min-width: 415px){ */
/*手机横屏后宽度会变化，所以不能单纯的根据宽度来判断*/

.js_pc .icons a{opacity: 0.8;}
.js_pc .icons a:hover{opacity: 1;}

.js_pc .icon1:hover{background-position:-32px -64px;}
.js_pc .icon2:hover{background-position:-64px -0;}
.js_pc .icon3:hover{background-position:-128px 0;}
.js_pc .icon3.on:hover{background-position:-128px -32px;}
.js_pc .icon4:hover{background-position:-192px 0;}
.js_pc .icon5:hover{background-position:-224px 0;}
.js_pc .icon5.on:hover{background-position:-224px -64px;}
.js_pc .icon6:hover{background-position:-128px -96px;}
.js_pc .icon7:hover{background-position:0 0;}
.js_pc .icon7.on:hover{background-position:0 -32px;}

/* } */

.mobFull { transform-origin: 0 0; transform: rotateZ(90deg) translateY(-100%);}
.clickAnnot{color: rgba(204, 204, 204,0.5); position: fixed; left:50%;transform: translateX(-50%); bottom: 100px; text-align: center;z-index: 999;}
.moveHand{display: flex;flex-direction: column; justify-content: center;align-items: center;transform: translateX(0px);cursor: pointer;-webkit-animation:moveme 5s infinite linear; animation: moveme 5s infinite linear; }

/* 弹窗背景 */
.layer{ display: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.7); z-index: 100; text-align: center;}

/* 关闭按钮 */
.close{position: fixed;bottom: 30px; left: 50%;transform: translateX(-50%); background: rgba(255, 255, 255,0.2); width:35px; height:35px;border-radius: 50%;display: flex;justify-content: center;align-items: center;}
.closeLayer{background-position:-75px -50px;background-size:200px auto;width:25px; height:25px;}
.closeLayer:hover{background-position: -50px -50px;}

/* 帮助 弹窗 */
.help-layer{position: fixed; top: 50%; right: 0; left: 0; display: none; margin-top: -36px;}
.help-layer div{display: inline-block; color: #999; line-height: 1.5;width: 25%;}
.help-layer p{margin: 5px 0 0;font-size:14px;}

/* 技术支持 弹窗 */
.jishu-layer{ display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 10px 20px; background: rgba(255, 255, 255, 1); opacity: 0.8; border-radius: 5px; width: 220px; height: 100px;text-align: center;}
.jishu-layer .desc {height: 50px; display: flex;justify-content: center;align-items: center;}
.jishu-layer .desc img {width: 20px ;height: 20px; margin-right: 10px;}
.jishu-layer .desc a {font-weight: bold; text-decoration: none; color: #000;}

/* 分享 弹窗 */
.share-layer{ display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); padding: 10px 20px; background: rgba(255, 255, 255, 1); opacity: 0.8; border-radius: 5px; width: 220px;height: 250px;text-align: center;}
.share-layer p{ color: #999; font-size: 12px; line-height: 1.5;}

/* 查看 弹出层 */
.popover{position: fixed;bottom: 50px;right: 12px;display: none; padding: 5px 10px; background: #000;border-radius: 5px;}
.popover::after{ content: ''; position: fixed; bottom: 42px; right: 22px; width:0; height: 0; border:8px solid #000; border-right: 8px solid transparent; border-left: 8px solid transparent; border-bottom: 0;}
.popover-title{ color: #999; font-size: 12px; padding-bottom: 5px;}
.popover-imgs{display: flex;justify-content: center;align-items: center;}
.popover-imgs a img{width: 25px;height: 25px;}
.popover-imgs a:nth-child(1) img {margin-right: 5px;}

@media screen and (max-width: 415px){
    .help-layer{margin: 0;transform: translate(0,-50%);-webkit-transform: translate(0,-50%);}
    .help-layer div{display: block; margin-bottom: 30px; padding: 10px 0; width: auto;}
    /*.icons a{transform: scale(0.8); -webkit-transform: scale(0.8);margin:0;}*/
}

@keyframes moveme {
  0% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }

  25% {
    -webkit-transform: translateX(-20px);
    transform: translateX(-20px);
  }

  50% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }

  75% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
  }
}