html {height: 100%;font-size: 62.5%;}
body{margin: 0px;padding: 0px;width: 100%;height: 100%;font-family: Arial, Helvetica, Verdana;background-color: #fff;-webkit-text-size-adjust: none;}
p,ul,ol,img,h1,h2,h3,h4{margin: 0px;padding: 0px;}
#page{height: 100%;}
#p1{background-image: url("bg.jpg");}
.content{height: -webkit-calc(100% - 40px);height: -moz-calc(100% - 40px);height:calc(100% - 40px);}
.page_block{width: 100%;height: 100%;position: relative;background-size:cover;background-repeat: no-repeat;}
.header a{background: url("back.png") no-repeat center center;display: block;width: 40px;height: 40px;position: absolute;top: 0;left: 10px;}
.header{background: #F7F7F7;font-size: 1.6rem;font-weight: bold;color: #000;line-height: 40px;-moz-box-sizing: border-box;box-sizing: border-box; width: 100%;height: 40px;padding: 0 50px;overflow: hidden;text-align: center;}

.player_container{height: 250px;width: 90%;margin: 0px auto;}
.player_blank{height: -webkit-calc(100% - 250px);height: -moz-calc(100% - 250px);height:calc(100% - 250px);}
.player_container .main_panel{width: 147px;height: 147px;border-radius:50%;-moz-border-radius:50%;background: #4c4c4c;margin:0px auto;position: relative;}
.player_container .main_panel h3{padding-top: 32px;font-size: 1.2rem;color: #fff;text-align: center;}
.player_container .play_btn {padding-top: 12px;text-align: center;padding-bottom: 14px;}
.player_container .play_time {text-align: center;color: #fff;}
.player_container .play_pre_btn{position: absolute;display: block;background-image: url("pre.png");background-size:cover;width: 36px;height: 20px;left: -72px;top:63px;}
.player_container .play_next_btn{position: absolute;display: block;background-image: url("next.png");background-size:cover;width: 36px;height: 20px;right:-72px;top:63px;}
#playswitch1{position: absolute;width: 74px;height:32px;left: -72px;bottom: -34px;}
#playswitch2{position: absolute;width: 74px;height:32px;right: -72px;bottom: -34px;}
.player_container .play_bg_panel{width: 100%;height: 27px;border-radius:15px;-moz-border-radius:15px;background: #919191;color: #fff;line-height: 27px;}
.player_container .play_off_panel .play_bg_panel p{text-align: right;padding-right: 15px;}
.player_container .play_on_panel .play_bg_panel p{text-align: left;padding-left: 15px;}
.player_container .play_panel_btn{width:32px;height: 32px;border-radius:50%;-moz-border-radius:50%;background-color:#545454;position: absolute;top: -2px;}
.player_container .play_off_panel .play_panel_btn{left: 0px;}
.player_container .play_on_panel .play_panel_btn{right: 0px;}
.player_container .play_on_panel .play_bg_panel{background: #ff6000;}
.player_container .play_off_panel .play_bg_panel{background: #919191;}

.play_panel_btn{background-position:center center;background-repeat: no-repeat;}
.player_container .player_progressbar{width: 248px;background: #919191;height: 7px;margin: 0px auto;margin-top: 57px;border-radius:15px;-moz-border-radius:15px;}
.player_activeprogress{height: 7px;width: 100%;background: #ff6000;border-radius:15px;-moz-border-radius:15px;position: relative;}
.player_activeprogress span{width:20px;height: 20px;background: #4c4c4c;position: absolute;right: 0px;top: -7px;display: block;border-radius:50%;-moz-border-radius:50%;}
.triangle {width:0px;height: 0px;border-top: 13px solid transparent;border-left: 26px solid #e6e6e6;border-bottom: 13px solid transparent;display:block;margin: 0px auto;}
.square{width: 26px;height: 26px;background: #e6e6e6;display:block;margin: 0px auto;}