* {margin: 0;border: none;padding: 0;}
body {background: #181818;}
a:link {color: white;}
a:visited {color: #fffefe;}
a:hover {color: #00ccff;}
#MP4 {position: relative;margin: 0 auto;height: 650px;width: 100%;}
#video {float: left;background: #181818;position: relative;z-index: 99;width: 100%;}
MP4list {float: left;height: 100%;width: 100%;background: #181818;opacity: 0.9;position: relative;}
MP4list Nav h4 {color: white;margin-bottom: 25px;margin-top: 18px;text-align: center;width: 100%;}
MP4list Nav h4 {height: 30px;}
MP4list Nav h4 span {display: none;}
MP4list Nav h4 select {height: 30px;padding: 0 5px;}
MP4list Nav h4 .ui-select {float: left;}
MP4list Nav h4 form {float: right;position: relative;}
MP4list Nav h4 form input {float: left;height: 30px;padding-left: 10px;}
MP4list Nav h4 form button {position: absolute;top: 0;right: 0;height: 30px;padding: 0 10px;}
MP4list ul {background: #181818;list-style: none;text-align: center;width: 100%;}
MP4list ul li {color: white;font-size: 18px;line-height: 30px;width: 100%;}
MP4list ul li:hover {background-color: lightgray;color: red;font-weight: bold;}
MP4list #playList-hidden {position: absolute;bottom: 50%;right: 0;width: 20px;height: 32px;background: red;font-size: 16px;font-weight: bold;border-top-left-radius: 10px;border-bottom-left-radius: 10px;opacity: 0.5;z-index: 10000;cursor: pointer;}
#MP4 #playList-show1 {position: absolute;bottom: 50%;right: 0;width: 20px;height: 32px;background: #FF0000;font-size: 16px;font-weight: bold;border-top-right-radius: 10px;border-bottom-right-radius: 10px;opacity: 1;visibility: hidden;cursor: pointer;}
#MP4 #playList-show1:hover,MP4list #playList-hidden:hover {opacity: 0.7;}
.select {color: lightcoral;}


.tags { position: absolute; top: 33px; left: 0; width: 100%; padding:10px 15px; background: #fff; display: none; box-sizing: border-box; text-align: left;}
.tags a { margin-right: 10px; color: #000; font-size: 12px; text-decoration: none; display: inline-block;}
/*电脑端*/
@media (min-width:750px) {MP4list {float: right;width: 355px;height: 800px;margin-left: 10px;text-align: left;padding-left: 25px;}
	.cm-list {float: right;overflow-y: scroll;width: 355px;height: 700px;text-align: left;padding-left: 25px;}
	#MP4 {width: 1200px;}
	#video {width: 800px;height: 800px;}
	MP4list ul {text-align: left;}
}
/*手机端*/
@media (max-width:750px) {#video {width: 100%;height: 98%;}
	
	MP4list button {display: none;}
	MP4list {height: 48%;overflow-y: scroll;overflow-x: hidden;margin-top: -10px;}
	MP4list ul {text-align: left;margin-left: 18px;margin-top: -20px;}
	/*手机端列表闪烁*/
	@keyframes fade {from {opacity: 1.0;}
		50% {opacity: 0.2;}
		to {opacity: 1.0;}
	}
	@-webkit-keyframes fade {from {opacity: 1.0;}
		50% {opacity: 0.2;}
		to {opacity: 1.0;}
	}
	MP4list Nav h4 {color: #fff;/* animation: fade 300ms infinite;-webkit-animation: fade 600ms infinite; */}
	MP4list nav h4 { padding: 0 10px; box-sizing: border-box;}
	MP4list nav h4 button { display: block;}
}
/*手势滑屏*/
.hand-box {position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: rgba(0, 0, 0, 0.7);display: none;justify-content: center;align-items: center;z-index: 9999;}
.hand-box .txt-box {width: 137px;height: 300px;}
.hand-box .txt-box .txt {text-align: center;color: #fff;margin-top: 15px;font-size: 16px;}
.hand-box .hand {opacity: 0;transform: rotateZ(30deg);transform-origin: 50% 100%;width: 137px;height: 150px;animation: handSwipeAnimate 1.5s 1s infinite ease-in-out;}
.hand-box .hand img {width: 137px;height: 150px;display: block;}
@-webkit-keyframes handSwipeAnimate {0% {opacity: 0;-webkit-transform: rotateZ(30deg);transform: rotateZ(30deg);}
	25% {opacity: 1;-webkit-transform: rotateZ(30deg);transform: rotateZ(30deg);}
	75% {opacity: 1;-webkit-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}
	100% {opacity: 0;-webkit-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}
}
@keyframes handSwipeAnimate {0% {opacity: 0;-webkit-transform: rotateZ(30deg);transform: rotateZ(30deg);}
	25% {opacity: 1;-webkit-transform: rotateZ(30deg);transform: rotateZ(30deg);}
	75% {opacity: 1;-webkit-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}
	100% {opacity: 0;-webkit-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}
}
@-webkit-keyframes handSwipeAnimate_Right {0% {opacity: 0;-webkit-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}
	25% {opacity: 1;-webkit-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}
	75% {opacity: 1;-webkit-transform: rotateZ(30deg);transform: rotateZ(30deg);}
	100% {opacity: 0;-webkit-transform: rotateZ(30deg);transform: rotateZ(30deg);}
}
@keyframes handSwipeAnimate_Right {0% {opacity: 0;-webkit-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}
	25% {opacity: 1;-webkit-transform: rotateZ(-30deg);transform: rotateZ(-30deg);}
	75% {opacity: 1;-webkit-transform: rotateZ(30deg);transform: rotateZ(30deg);}
	100% {opacity: 0;-webkit-transform: rotateZ(30deg);transform: rotateZ(30deg);}
}