@charset "utf-8";
/* CSS Document */


* {
	margin: 0;
	padding: 0;
}
html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	font-size: 16px;
	width: 100%;
	height: 100%;
}
body {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: none;
	font-family: Arial, Helvetica, sans-serif, "微软雅黑";
	background-attachment: fixed;/*必要，防抖动*/
	font-size: 16px;
	margin: 0 auto;
	height: 100%;
	position:relative;
}

a {
	text-decoration: none;
	color: #7c7c7c;
}
ul, li {
	list-style: none
}
a:focus {
	outline: thin dotted;
}
a:active, a:hover {
	outline: 0;
}
a:hover {
	color: #7c7c7c;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
img {
	border: 0;
	-ms-interpolation-mode: bicubic;
	display: block;
	max-width: 100%;
}
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden
}
.clearfix {
	display: inline-block;
	clear: both;
}
/* hides from IE-mac */
* html .clearfix {
	height: 1%
}
.clearfix {
	display: block
}
/*去掉苹果手机input内阴影*/
input{
   appearance:button;
   -moz-appearance:button;  /*Firefox */
   -webkit-appearance:button; /* Safari 和 Chrome */
}

.left_show {
	position: absolute;
	top: 50%;
	margin-top: -22px;
	left: 1rem;
	z-index: 9999;
	opacity:0!important;
	-webkit-animation: left_show 1.5s infinite ease-in-out;
}
.right_show {
	position: absolute;
	top: 50%;
	margin-top: -22px;
	right: 1rem;
	z-index: 9999;
	opacity:0!important;
	-webkit-animation: right_show 1.5s infinite ease-in-out;
}
.up_show {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	margin-left: -25px;
	z-index: 9997;
	-webkit-animation: up_show 1.5s infinite ease-in-out
}
/* 黑色背景 */
.black_bg {
	background: #000;
}
@-webkit-keyframes left_show {
0%, 30% {
opacity:0;
-webkit-transform:translate(10px, 0)
}
60% {
opacity:1;
-webkit-transform:translate(0, 0)
}
100% {
opacity:0;
-webkit-transform:translate(-8px, 0)
}
}
@-webkit-keyframes right_show {
0%, 30% {
opacity:0;
-webkit-transform:translate(-10px, 0)
}
60% {
opacity:1;
-webkit-transform:translate(0, 0)
}
100% {
opacity:0;
-webkit-transform:translate(8px, 0)
}
}
@-webkit-keyframes up_show {
0%, 30% {
opacity:0;
-webkit-transform:translate(0, 10px)
}
60% {
opacity:1;
-webkit-transform:translate(0, 0)
}
100% {
opacity:0;
-webkit-transform:translate(0, -8px)
}
}

/* 音乐 */
.music_wrap{position: fixed; bottom: 1rem; left: 20px; display: -webkit-box; -webkit-box-align: center; -webkit-box-pack: center; z-index:9999;}
.music_wrap .text{width: 57px; margin:0 5px; color: #fff; font-size: 1rem; opacity: 1;text-shadow: 1px 1px 1px #000;	letter-spacing: 2px;	-webkit-transition: all .2s linear;	-webkit-transform: translateX(-20px)}
.music_wrap .move{transition: opacity 0.5s;}
.music_wrap .hide{opacity: 0;}
.btn_music, .btn_music1{display: block; width: 28px; height: 28px; background-position: 0 0;}
.btn_music.on{-webkit-animation: reverseRotataZ 1.2s linear infinite;}
@-webkit-keyframes reverseRotataZ{
    0%{-webkit-transform: rotateZ(0deg);}
    100%{-webkit-transform: rotateZ(-360deg);}
}

.btn_music1{position: relative; overflow: hidden; width: 54px; height: 43px; background: rgba(0, 0, 0, 0);}

.btn_music1 span{position: absolute; bottom: 0; width: 6px; height: 43px; background-color: #fff; border-radius: 2px 2px 0 0;}
.btn_music1 .line1{left: 0; height: 24px;}
.btn_music1 .line2{left: 16px; height: 43px;}
.btn_music1 .line3{left: 32px; height: 30px;}
.btn_music1 .line4{left: 48px; height: 16px;}


.btn_music1.on .line1{-webkit-animation : case1 1.75s infinite;}
.btn_music1.on .line2{-webkit-animation : case2 1.5s infinite;}
.btn_music1.on .line3{-webkit-animation : case3 1.25s infinite;}
.btn_music1.on .line4{-webkit-animation : case3 2s infinite;}

@-webkit-keyframes case1 {
  0% {height : 0}
  50% {height : 33px;}
  100% {height : 0}
}

@-webkit-keyframes case2 {
  0% {height : 0}
  50% {height : 38px;}
  100% {height : 0}
}

@-webkit-keyframes case3 {
  0% {height : 0}
  50% {height : 35px;}
  100% {height : 0}
}

.btn_music{
	background-image: url(//cdn.xuansiwei.com/liboy12642/public/static/img/music.png); 
	background-repeat: no-repeat;
	background-size:100% auto;
	position:relative;
	z-index:99999;
}


.m_img{
	position:absolute;
	top:-3rem;
	right:0;
	height:4.5rem;
	width:1rem;
	z-index:333;
	display:none;
}
.m_img1{
	width:0.25rem;
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	opacity : 0;
	-webkit-animation : m_img1 3s ease-out infinite;
}
.m_img2{
	width:0.35rem;
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	opacity : 0;
	-webkit-animation : m_img3 4s ease-out 1s infinite;
}
.m_img3{
	width:0.45rem;
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	opacity : 0;
	-webkit-animation : m_img1 3s ease-out 3s infinite;
}
.m_img4{
	width:0.5rem;
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	opacity : 0;
	-webkit-animation : m_img2 2s ease-out 5s infinite;
}
.m_img5{
	width:0.65rem;
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	opacity : 0;
	-webkit-animation : m_img1 3s ease-out 4s infinite;
}
@-webkit-keyframes m_img1 {
  0% {opacity: 1;-webkit-transform: rotateZ(0deg);}
  100% {opacity : 0;bottom:3rem; left:-1rem;-webkit-transform: rotateZ(90deg);}
}
@-webkit-keyframes m_img2 {
  0% {opacity: 1;-webkit-transform: rotateZ(0deg);}
  100% {opacity : 0;bottom:3.5rem; left:-0.5rem;-webkit-transform: rotateZ(90deg);}
}
@-webkit-keyframes m_img3 {
  0% {opacity: 1;-webkit-transform: rotateZ(0deg);}
  100% {opacity : 0;bottom:2rem; left:-1.5rem;-webkit-transform: rotateZ(120deg);}
}



.musickg{ width: 24px; height: 24px; background:#fff; position: fixed; bottom: 15px; left: 15px; box-shadow: 0px 2px 5px -2px rgba(0,0,0,0.4); border-radius: 5px; z-index: 9999;}
.musickg:after{ position: absolute; content: ""; display: block; width: 4px; height: 4px; background:#e60012; border-radius: 100%; right: 2px; top: 2px; z-index:9; -webkit-animation:opa 0.8s linear 0s infinite;}
.musickg .yinliang{ width: 24px; height:24px; background: rgba(237, 112, 26, 0.98); border-radius: 5px; position: relative; z-index: 9; padding-top: 7px; padding-left: 1px; box-sizing: border-box;}

.yinfu{ margin: 0px auto 0px; width: 4px; height: 6px; border:2px solid #fff; border-bottom: none; position: relative; -webkit-animation:flashhh 4s ease 0s infinite; -webkit-animation-play-state:paused;}
.yinfu:before{ position: absolute; content:""; display: block; width: 4px; height:4px; background: #fff; border-radius: 100%; bottom: -2px; left: -4px;}
.yinfu:after{ position: absolute; content:""; display: block; width: 4px; height:4px; background: #fff; border-radius: 100%; bottom: -1px; right: -2px;}

.yuanhu{ width: 18px; height:18px; display: flex; position:absolute; top:3px; left: 3px;}
.yuanhu:after{ position: absolute; content: ""; box-sizing: border-box; display: block; width: 18px; height: 18px; border-radius: 100%; top: 0px; left: 0px; border:1px solid rgba(255,255,255,0.3);}
.yuanhu .yuanhu_left{ width: 9px; height: 18px; overflow: hidden; position: relative;}
.yuanhu .yuanhu_left .yh_l_con{ position: absolute; top: 0px; left:0px; width: 18px; height: 18px; box-sizing: border-box;  border:1px solid rgba(255,255,255,1); border-right:1px solid transparent; border-top:1px solid transparent; border-radius: 50%;  transform: rotate(-135deg); -webkit-animation: yh_l_con 20s linear infinite; -webkit-animation-play-state:paused;}
.yuanhu .yuanhu_right{ width: 9px; height: 18px; overflow: hidden; position: relative;}
.yuanhu .yuanhu_right .yh_r_con{ position: absolute; top: 0px; right:0px; width: 18px; height: 18px; box-sizing: border-box; border:1px solid rgba(255,255,255,1); border-left:1px solid transparent; border-bottom:1px solid transparent; border-radius: 50%;  transform: rotate(-135deg); -webkit-animation: yh_r_con 20s linear infinite; -webkit-animation-play-state:paused;}
.yuanhu .yh_dian{ width: 100%; height: 100%; position: absolute; top: 0%; left: 0%; -webkit-animation: zhuan 20s linear infinite; -webkit-animation-play-state:paused;}
.yuanhu .yh_dian .yh_dian_yuan{ position: absolute; width: 3px; height: 3px; background: #fff; border-radius: 5em; top: -1px; left: 50%; margin-left: -2px;}

.musickg .cd{ position: absolute; width: 24px; height:24px; top: 0%; left: 0%; display:flex; align-items: center; justify-content: center;  -webkit-animation:ka 0.8s linear 0s infinite; transform-origin: 100% 50%; z-index: 8;}
.musickg .cd_con{ transform: translateX(12px); transition: transform 0.5s;}
.musickg .cd .cd_con .yuan1{ background: #040000; border-radius: 100%; width: 20px; height: 20px; display:flex; align-items: center; justify-content: center;}
.musickg .cd .cd_con .yuan2{ border-radius: 100%; width: 10px; height: 10px; border:2px solid #e60012; border-top-color: transparent; border-bottom-color: transparent; display:flex; align-items: center; justify-content: center;}
.musickg .cd .cd_con .yuan3{ border-radius: 100%; width: 5px; height: 5px; background: #fff;}

@-webkit-keyframes zhuan {
0% { transform: rotate(0deg);}
100% { transform: rotate(360deg);}
}
@-webkit-keyframes ka {
0% { transform: rotate(0deg);}
25% { transform: rotate(15deg);}
50% { transform: rotate(0deg);}
75% { transform: rotate(-15deg);}
100% { transform: rotate(0deg);}
}
@-webkit-keyframes opa {
0% { opacity: 1;}
50% { opacity: 0;}
100% { opacity: 1;}
}
@-webkit-keyframes flashhh {
0%,100%,50% {opacity:1; transform: scale(0.8);}
25%,75% {opacity:0.4; transform: scale(0.7);}
}
@-webkit-keyframes yh_r_con{
0%{-webkit-transform: rotate(-135deg);}
50%,100%{-webkit-transform: rotate(45deg);}
}
@-webkit-keyframes yh_l_con{
0%,50%{-webkit-transform: rotate(-135deg);}
100%{-webkit-transform: rotate(45deg);}
}

.musickg_on{}
.musickg_on .yinfu{ -webkit-animation-play-state:running;}
.musickg_on .yuanhu .yuanhu_left .yh_l_con{ -webkit-animation-play-state:running;}
.musickg_on .yuanhu .yuanhu_right .yh_r_con{ -webkit-animation-play-state:running;}
.musickg_on .yuanhu .yh_dian{ -webkit-animation-play-state:running;}
.musickg_on:after{ width: 3px; height: 3px; background: #00bd00; -webkit-animation:inherit;}
.musickg_on .cd{ -webkit-animation:inherit;}
.musickg_on .cd_con{ transform: translateX(0px)!important; transition: transform 0.5s;}
.musickg_on .cd .cd_con .yuan1{ -webkit-animation:zhuan 2s linear 0s infinite;}

/* .musickg{ left: inherit; right: 15px;}
.musickg .cd{  transform-origin: 0px 50%;}
.musickg .cd_con{ transform: translateX(-12px);} */