html{
    -webkit-tap-highlight-color: transparent;
}
.music span{
    font-size: 15px;
}
.gn1{
            display:inline-block;
        
            background-image:url('../img/退出.png');
            background-size:100% 100%;
            background-repeat:no-repeat;
        }
        .gn2{
            display:inline-block;
        
            background-image:url('../img/重启.png');
            background-size:100% 100%;
            background-repeat:no-repeat;
        }
        .gn3{
            display:inline-block;
        
            background-image:url('../img/多任.png');
            background-size:100% 100%;
            background-repeat:no-repeat;
        }
        .gn4{
            display:inline-block;
        
            background-image:url('../img/剪切板.png');
            background-size:100% 100%;
            background-repeat:no-repeat;
        }
        .gn5{
            display:inline-block;
        
            background-image:url('../img/主页.png');
            background-size:100% 100%;
            background-repeat:no-repeat;
        }
        .gn6{
            display:inline-block;
        
            background-image:url('../img/触控.png');
            background-size:100% 100%;
            background-repeat:no-repeat;
        }
        .gn7{
            display:inline-block;
        
            background-image:url('../img/旋转手机.png');
            background-size:100% 100%;
            background-repeat:no-repeat;
        }
        .gn8{
            display:inline-block;
        
            background-image:url('../img/客.png');
            background-size:100% 100%;
            background-repeat:no-repeat;
        }
        .gn88{
            display:inline-block;
        
            background-image:url('../img/平台托管.png');
            background-size:100% 100%;
            background-repeat:no-repeat;
        }
        .gn9{
            display:inline-block;
        
            background-image:url('../img/清理.png');
            background-size:100% 100%;
            background-repeat:no-repeat;
        }
        .xh1{
            display:inline-block;
        
            background-image:url('../img/信号.png');
            background-size:100% 100%;
            background-repeat:no-repeat;
        }
        .xh2{
            display:inline-block;
        
            background-image:url('../img/ww2.png');
            background-size:100% 100%;
            background-repeat:no-repeat;
        }
        .anys1 {
			border-radius: 25px;
			
			background: rgba(255,255,255,0);
			border: none;
			outline: none;
		
		}
        
        /*body{*/
        /*    overflow:hidden;*/
        /*}*/
        
#mplayer {  
    overflow:hidden;
        -webkit-touch-callout:none;  
        -webkit-user-select:none;  
        -khtml-user-select:none;  
        -moz-user-select:none;  
        -ms-user-select:none;  
        user-select:none;  
    }
    
    
    
    /*body{*/
    /*    touch-action: manipulation;*/
    /*}*/
    .xzfx-rr{
        transform: rotate(270deg); /*旋转视频 90 度*/
        transform-origin: ; /*设置旋转的原点，默认中心点*/
    }
    .xzfx-qq{

    }
    .xzfx-ww{
        transform: rotate(90deg); /*旋转视频 90 度*/
        transform-origin: ; /*设置旋转的原点，默认中心点*/
    }
    .xzfx-ee{
        transform: rotate(180deg); /*旋转视频 90 度*/
        transform-origin: ; /*设置旋转的原点，默认中心点*/
    }
    
	.xzfx-dss {
		left: 50%;
		position: absolute;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.v {
		position: absolute;
		background-color: grey;
	}
	.kkm{
	    cursor: pointer;
	    color: #fff;
	    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
	}
	.jjm{
	   width: 100%;
    height: 85%;
    display: flex;
    flex-direction: row;
    justify-content: center;
	}
    .cdd{
		display: none;
		width: 280px;
		height: 460px;
		
		
		z-index: 10;
		position: absolute;
		
		
	}
	.jh{
	    background:rgba(0,0,0,0.95);
	    border-radius:10px;
	}
	.xbbf{
	    border-radius:13px;
	    width: 100%;
	    height: 100%;
	    background: rgba(0,0,0,0.95);
	        display: flex;
    flex-direction: column;
    justify-content: center;
	}
	.cdd1{
	    width:42px; 
	    height:42px;
	    background:#4a4a4a;
	    border-radius:50%;
	    
	}
	.cdd1 i{
	    font-size: 25px;
	    
	}
	.cdd1 + span{
	    font-size: 16px;
	    
	}
    .jz {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.vv {
		margin: auto;
		width: 375px;
		height: 667px;
	}
	
    video::-webkit-media-controls-start-playback-button {
          display: none !important;
        }
 .music {
            width: 100px;
            height: 100px;
            display: flex;
                justify-content: center;
        }

        .music span {
            width: 6px;
            border-radius: 18px;
            margin-right: 6px;
        }

        .music span:nth-child(1) {
            /* 时间递增，参差不齐的效果 */
            animation: bar1 0.5s 0.05s infinite linear;
        }

        .music span:nth-child(2) {
            animation: bar2 0.5s 0.1s infinite linear;
        }

        .music span:nth-child(3) {
            animation: bar3 0.5s 0.15s infinite linear;
        }

        .music span:nth-child(4) {
            animation: bar4 0.5s 0.2s infinite linear;
        }

        .music span:nth-child(5) {
            animation: bar5 0.5s 0.25s infinite linear;
        }

        .music span:nth-child(6) {
            animation: bar6 0.5s 0.3s infinite linear;
        }

        .music span:nth-child(7) {
            animation: bar7 0.5s 0.35s infinite linear;
        }

        .music span:nth-child(8) {
            animation: bar8 0.5s 0.4s infinite linear;
        }

        .music span:nth-child(9) {
            animation: bar9 0.5s 0.45s infinite linear;
        }
        :root {
            --bg-color: #00FF00;
            --bg-color1: #00FF00;
            --bg-color2: #ffcc33;
            --bg-color3: #ccff99;
            --bg-color4: #cc66cc;
            --bg-color5: #99ccff;
            --bg-color6: #66a699;
            --bg-color7: #00ffcc;
            --bg-color8: #33ff66;
            --bg-color9: #7CFC00;
        }

        @keyframes bar1 {
            0% {
                background: var(--bg-color1);
                margin-top: 50%;
                height: 10%;
            }

            50% {
                background: var(--bg-color1);
                height: 100%;
                margin-top: 0%;
            }

            100% {
                background: var(--bg-color1);
                height: 10%;
                margin-top: 50%;
            }
        }

        @keyframes bar2 {
            0% {
                background: var(--bg-color2);
                margin-top: 50%;
                height: 10%;
            }

            50% {
                background: var(--bg-color2);
                height: 100%;
                margin-top: 0%;
            }

            100% {
                background: var(--bg-color2);
                height: 10%;
                margin-top: 50%;
            }
        }

        @keyframes bar3 {
            0% {
                background: var(--bg-color3);
                margin-top: 50%;
                height: 10%;
            }

            50% {
                background:var(--bg-color3);
                height: 100%;
                margin-top: 0%;
            }

            100% {
                background:var(--bg-color3);
                height: 10%;
                margin-top: 50%;
            }
        }

        @keyframes bar4 {
            0% {
                background: var(--bg-color4);
                margin-top: 50%;
                height: 10%;
            }

            50% {
                background: var(--bg-color4);
                height: 100%;
                margin-top: 0%;
            }

            100% {
                background: var(--bg-color4);
                height: 10%;
                margin-top: 50%;
            }
        }

        @keyframes bar5 {
            0% {
                background: var(--bg-color5);
                margin-top: 50%;
                height: 10%;
            }

            50% {
                background: var(--bg-color5);
                height: 100%;
                margin-top: 0%;
            }

            100% {
                background:var(--bg-color5);
                height: 10%;
                margin-top: 50%;
            }
        }

        @keyframes bar6 {
            0% {
                background: var(--bg-color6);
                margin-top: 50%;
                height: 10%;
            }

            50% {
                background: var(--bg-color6);
                height: 100%;
                margin-top: 0%;
            }

            100% {
                background: var(--bg-color6);
                height: 10%;
                margin-top: 50%;
            }
        }

        @keyframes bar7 {
            0% {
                background: var(--bg-color7);
                margin-top: 50%;
                height: 10%;
            }

            50% {
                background:var(--bg-color7);
                height: 100%;
                margin-top: 0%;
            }

            100% {
                background:var(--bg-color7);
                height: 10%;
                margin-top: 50%;
            }
        }

        @keyframes bar8 {
            0% {
                background: var(--bg-color8);
                margin-top: 50%;
                height: 10%;
            }

            50% {
                background: var(--bg-color8);
                height: 100%;
                margin-top: 0%;
            }

            100% {
                background:var(--bg-color8);
                height: 10%;
                margin-top: 50%;
            }
        }

        @keyframes bar9 {
            0% {
                background: var(--bg-color9);
                margin-top: 50%;
                height: 10%;
            }

            50% {
                background:var(--bg-color9);
                height: 100%;
                margin-top: 0%;
            }

            100% {
                background: var(--bg-color9);
                height: 10%;
                margin-top: 50%;
            }
        }
        .overLoading {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 10;
       }
        
        .layoutLoading {
    position: relative;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 100px;
}
.jzzz1{
    width:100%;
    height:100%;
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
        color: white;
}
 .wenzi1 {
  display: none;
  position: fixed;
  opacity: 1;
  transition: opacity 1s;
  color: #fff;
  z-index: 22;
  background: #000000f0;
  padding: 8px 12px;
  font-family: serif;
  font-size: 15px;
  border-radius: 5px;
  text-align: center;
      left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    line-height: 1.5;
    letter-spacing: 2px;

}
        
#qxd:checked + label[for="qxd"]::before {
    content: '超清';
    font-size: 14px;
    border: 1px solid #16ffd6;border-radius: 5px;cursor: pointer;
                                padding: 2px 5px;
  }
  label[for="qxd"]::before {
    content: '标清';
    font-size: 14px;
    border: 1px solid #a8f3e6;border-radius: 5px;cursor: pointer;
                                padding: 2px 5px;
  } 
  
#hmcl:checked + label[for="hmcl"]::before {
    content: '启动重连';
    font-size: 14px;
    border: 1px solid #35cbb1;border-radius: 5px;cursor: pointer;
                                padding: 2px 5px;
  }
  label[for="hmcl"]::before {
    content: '禁止重连';
    font-size: 14px;
    border: 1px solid #e32323;
    border-radius: 5px;cursor: pointer;
                                padding: 2px 5px;
  }  


  
 .menu {
    position: relative;
    display: inline-block;
}

.submenu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 66px;
    box-shadow: 0px 4px 5px 3px rgba(0,0,0,0.2);
    z-index: 1;
    padding-bottom: 4px;
}

.submenu span {
    color:#4a4a4acf;
    padding: 10px 4px;
    text-decoration: none;
    
    border-bottom: 1px solid #c9c9c9;
    font-size: 1rem;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.submenu span b{
    font-size: 0.78rem;
    flex:1;
    text-align: center;
}
.submenu span i{
    font-size: 1rem;
    padding: 0px 8px;
}

.submenu span:hover {
    background-color: #e4e4e4;
}

#kz_tg:checked + label[for="kz_tg"]::before {
    content: '自托管';cursor: pointer;
                                
  }
  label[for="kz_tg"]::before {
    content: '云托管';cursor: pointer;
  }