*{ margin:0 auto; padding:0; font-size:16px; line-height:30px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;font-family: '黑体';}
img{ border:none;}
li{ list-style:none;}
a{ text-decoration:none;}
body{ max-width:640px;}
/* 通用 */
::-webkit-input-placeholder { color:#d1d1d1; }
::-moz-placeholder { color:#d1d1d1; } /* firefox 19+ */
:-ms-input-placeholder { color:#d1d1d1; } /* ie */
input:-moz-placeholder { color:#d1d1d1; }

/* webkit专用 */
/*#field2::-webkit-input-placeholder { color:#00f; }
#field3::-webkit-input-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-webkit-input-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }*/

/* mozilla专用 */
/*#field2::-moz-placeholder { color:#00f; }
#field3::-moz-placeholder { color:#090; background:lightgreen; text-transform:uppercase; }
#field4::-moz-placeholder { font-style:italic; text-decoration:overline; letter-spacing:3px; color:#999; }*/

.menu, .cover, .wap_inner{transition:left 0.2s;-moz-transition:left 0.2s; /* Firefox 4 */-webkit-transition:left 0.2s; /* Safari and Chrome */-o-transition:left 0.2s; /* Opera */ }

.wap{ width:100%; overflow:hidden; margin-bottom:40px;}
.wap_inner{ position:relative; left:0px;}
.cover{ position:fixed; z-index:1; width:100%; height:100%; left:0px; display:none;}
.menu{  position:absolute; left:-70%; top:0px; width:70%; color:#fff; background:#333; height:100%; font-size:24px;}
.menu ul{}
.menu ul li{ border-bottom:1px solid #000;}
.menu ul li a{ color:#fff; display:block; padding:13px 0; padding-left:10px;}
.menu ul li a span{ padding-left:30px; display:block;}

.h_icon{ background:url(../images/h_icon.png) 0px 0px no-repeat;  background-position:5px center;}
.project_icon{ background:url(../images/project_icon.png) 0px 0px no-repeat;  background-position:5px center;}
.method_icon{ background:url(../images/method_icon.png) 0px 0px no-repeat;  background-position:5px center;}
.faq_icon{ background:url(../images/faq_icon.png) 0px 0px no-repeat;  background-position:5px center;}
.about_icon{ background:url(../images/about_icon.png) 0px 0px no-repeat;  background-position:5px center;}
.login_icon{ background:url(../images/login_icon.png) 0px 0px no-repeat;  background-position:5px center;}

.header{ border-bottom:1px solid #ccc;}
.top{ height:50px; position:relative;}
.top .menu_btn{ position:absolute; width:100px; height:50px; top:0px; left:0px; background-image:url(../images/menu.png); background-position:15px center; background-repeat:no-repeat; background-size:20px; cursor:pointer;}
.top .menu_btn span{    line-height: 50px;    margin-left: 55px;}
.top p{ text-align:center; line-height:50px; font-size:20px; color:#3d95d4; font-weight:bold;}
.top .logo_btn{ position:absolute; top:15px; right:10px; padding-right:20px; line-height:20px; color:#a4a4a4; height:20px; background-image:url(../images/login_icon.jpg); background-repeat:no-repeat; background-position:right center;}
.top_img{ width:100%; border-top:1px solid #e6e6e6;}
.top_img img{ width:100%;}

.menu_order{}
.menu_order a{ display:block; float:right; padding:5px;}

.area{ padding:20px 15px 15px;}
.area img{ width:100%;}
.area h4{ font-size:20px;}
.area p{ font-size:16px; line-height:24px;}
.music_list{ margin:0 -1.5%;}
.music_list li{ width:30%; margin:0 1.5%;  text-align:center; float:left; position:relative;}
.music_list li img{ border-radius:50%;  width:75%;}
.music_list li a{ display:block; padding:10px 0;  color:#000;}

.music_list2{ margin:0 -1.5%; width:100%;}
.music_list2 li{ width:100%; margin:0 1.5%;  text-align:center; float:left; position:relative;}
.music_list2 li img{ border-radius:50%; width: 45px; float: left;}
.music_list2 li a{ display:block; padding:5px 20px;  color:#000;}
.music_list2 li h4{float: left;  text-align: left; margin-left: 5%; font-size:16px; line-height:45px; color:#0070c3;}
.music_list2 li.c0{ background:#fff;}
.music_list2 li.c1{ background:#efefef;}
.music_list2 li.c2{ background:#ccc;}
.music_list2 li.c3{ background:#efefef;}


.single_img{ text-align:center; padding:20px 0;}
.single_img img{ border-radius:50%; width:25%;}
.single{ /*position:absolute; left:0px; bottom:0px;*/ width:80%;}
.single_inner{ /*width:320px;*/}
.single h3{ text-align:center; font-size:30px; line-height:40px; color:#0070c3; margin-bottom:20px;}
.single p{ text-align:center; font-size:14px; line-height:20px; margin-bottom:24px;}
.single span{ text-align:center; color:#0070c3; font-size:14px; line-height:14px; display:block;margin-bottom:24px; font-weight:bold;}
.single .time_box{ margin-bottom:20px;}
.single .time_box p{ text-align:center; line-height:30px; margin-bottom:0px;}
.single .time_box select{ width:30%; text-align:left; margin:0; display:block; height:30px;}
.pay{ width:140px; height:68px; border:1px solid #9acf7f;cursor:pointer; margin-bottom:20px;}
.pay button{ width:130px; height:58px; background:#9acf7f; border:none; color:#fff; outline:none; margin:5px;}

.login{ margin-top:10px; width:80%;}
.login form{}
.login label{ text-align:center; display:block;}
.login input{ text-align:left; width:95%; padding:0 2.2%; display:block; font-size:16px; height:36px; margin-top:24px;}
.login input#phone_code{ width:40%; float: left;}
.login input#sms{ width:40%; float: right; margin-top:24px;}
.login .login_sub{ text-align:center; width:100%; background:#9acf7f; color:#fff; margin-top:24px; margin-bottom:24px; cursor:pointer; height:36px; line-height:36px;}
.login .regist_sub{ float:left; text-align:center; width:47%; border:1px solid #9acf7f; background:#fff; line-height:36px; height:36px;}
.login .regist_sub a{ display:block; color:#9acf7f; line-height:36px;}
.login .forget_sub{ float:right; text-align:center; width:47%; border:1px solid #9acf7f; background:#fff; line-height:36px; height:36px;}
.login .forget_sub a{ display:block; color:#9acf7f; line-height:36px;}

.regist{ margin-top:10px; width:80%;}
.regist form{}
.regist label{ text-align:center; display:block; line-height:20px; line-height:14px; margin-bottom:10px;}
.regist input{ text-align:left; width:95%; padding:0 2.2%; display:block; font-size:16px; height:36px; margin-top:24px;}
.regist .regist_sub{ text-align:center; width:100%; background:#9acf7f; color:#fff; margin-bottom:34px; cursor:pointer; height:36px; line-height:36px; border:none;}

.play{}
.play h3{ clear:both; text-align:center; font-size:30px; line-height:40px; color:#0070c3; margin-bottom:20px;}
.play p{ text-align:center; font-size:14px; line-height:14px; margin-bottom:24px; width:80%;}
.play span{ text-align:center; color:#0070c3; font-size:10px; line-height:10px; display:block;margin-bottom:24px; font-weight:bold;}
.play .time_box{ margin-bottom:20px;}
.play .time_box p{ float:left; width:50%; text-align:right; line-height:30px; margin-bottom:0px;}
.play .time_box select{ width:30%; text-align:left; margin:0; display:block; height:30px;}

.music_name{ text-align:center; font-size:14px; line-height:20px; height:20px;}
.music_time{ text-align:center; font-size:20px; line-height:30px; height:30px; position:absolute; bottom:60px; width:100%;}
.music_control{  line-height:30px; height:30px; width:95%; left:2.5%;}
.music_bar{ float:left; width:65%; height: 15px; border-radius:6px; margin-top:7px; border:1px solid #0071bd;}
.music_bar_line{ width:0%; height: 15px; border-radius:6px; background-color: #0071bd;text-align:left;  margin:0;}
.music_over_time{ width:30%; float:right; line-height:20px; text-align: center; margin-top:4px; border-radius: 7px; border:1px solid #ccc; }


.tag{ position:absolute; left:67.5%; top:50px; width:60px; height:30px; border:2px solid #09F;  background-color:#FFF; text-align:center; line-height:30px; border-radius:20%; cursor:pointer; display:none;  }
.arrow{ position:absolute; width:10px; height:10px; bottom:13px; left:-15px; }
.arrow *{ display:block; border-width:7px; position:absolute; border-style: dashed  dashed  dashed solid ; font-size:0; line-height:0; }
.arrow em{border-color:  transparent #09F transparent transparent;}
.arrow span{border-color: transparent #fff transparent transparent    ; left:3px;}
.tag.show{ display:block;}

.center{  overflow: hidden; visibility: visible; display: block; position: absolute; z-index: 10; transition: opacity 300ms ease; opacity: 1; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0px); -moz-transform: translate3d(-50%, -50%, 0px); -webkit-transform: translate3d(-50%, -50%, 0px); border-radius: 4px;  text-align: center; font-size: 18px; width: 80%; margin: 0 auto; text-align: center; }

.top_play{ margin:0 auto; height:70vh; overflow:hidden; position:relative;}
.top_play h3{ font-size:32px; line-height:32px; padding:20px 0; color:#0071bf; text-align:center;}
.top_play p{ width:80%; font-size:14px; line-height:18px; color:#333;height: 15vh; overflow:hidden; text-align:center;}
.top_play .music_pic{ width:25%;}
.top_play .music_pic img{ width:100%;}
.music_pic{ /*height:1100px;*/ /*height:calc(100% - 126px);*/  width:100%; text-align:center; padding-top:40px;}
.botton_pay{ position:absolute; bottom:0px; left:0px; width:100%; height:25vh;}
.times{ width:100%; float:left; height:100%; position:relative; background:#f2f2f2;}
.times_inner{    overflow: hidden; visibility: visible; display: block; position: absolute; z-index: 10; transition: opacity 300ms ease; opacity: 1; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0px); -moz-transform: translate3d(-50%, -50%, 0px); -webkit-transform: translate3d(-50%, -50%, 0px); border-radius: 4px;  text-align: center; font-size: 18px; width: 80%; margin: 0 auto; text-align: center; }
.times h3{ color:#0070ba; font-size:26px; line-height:26px; font-weight:normal; padding:10px 0;}
.times p{ font-size:14px; line-height:18px; margin:0; color:#f07748;}
.play_control{/* width:50%; float:right; height:100%; background:#999999; position:relative;*/}
.play_control_inner{ overflow: hidden; visibility: visible; display: block; position: absolute; z-index: 10; transition: opacity 300ms ease; opacity: 1; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0px); -moz-transform: translate3d(-50%, -50%, 0px); -webkit-transform: translate3d(-50%, -50%, 0px); border-radius: 4px;  text-align: center; font-size: 18px; width: 60%; margin: 0 auto; text-align: left;}

.play_on{ height:20px; font-size:20px; line-height:20px; color:#ccc; margin-bottom:20px; background-image:url(../images/on.png); background-repeat:no-repeat; background-position:right center; background-size:20px;}
.play_off{ height:20px; font-size:20px; line-height:20px; color:#ccc; background-image:url(../images/off.png); background-repeat:no-repeat; background-position:right center; background-size:20px;}
.play_on.sel{ color:#fff; background-image:url(../images/on2.png);}
.play_off.sel{ color:#fff; background-image:url(../images/off2.png);}

.order_lists{ border-top:1px solid #ccc;}
.orcer_list{ display:flex; position:relative;flex-direction: row; justify-content: space-between; border-bottom:1px solid #ccc; padding:0px 10px; }
.order_date{ margin:0; width:40%; font-size:12px; padding-right:15px; border-right:1px dashed #ccc; }
.order_name{ padding-left:15px; width:100%; font-size:14px;}
.order_name2{ width:60%; font-size:14px; border-right:1px solid #ccc;}
.order_date2{display:flex; width:40%;flex-direction:column;}
.order_date2 div{ width:100%; text-align:center; border-bottom:1px solid #ccc; height:30px; line-height:30px; font-size:14px;}

.order_by{ height:30px;}
.order_by a{ float:right; font-size:18px; line-height:30px; margin-right:10px; color:#676767;}
.order_by a.sel{ text-decoration:underline;color:#000;}

.foot{ font-size:12px; text-align:center; padding-top:10px;border-top: 1px solid #ccc; position:fixed; width:100%; bottom:0px; left:0px; background:#fff;}
@keyframes myfirst
{
0%   {transform: rotate(0deg);}
25%  {transform: rotate(90deg);}
50%  {transform: rotate(180deg);}
75%  {transform: rotate(270deg);}
100% {transform: rotate(360deg);}
}

@-moz-keyframes myfirst /* Firefox */
{
0%   {-moz-transform: rotate(0deg);}
25%  {-moz-transform: rotate(90deg);}
50%  {-moz-transform: rotate(180deg);}
75%  {-moz-transform: rotate(270deg);}
100% {-moz-transform: rotate(360deg);}
}

@-webkit-keyframes myfirst /* Safari 和 Chrome */
{
0%   {-webkit-transform: rotate(0deg);}
25%  {-webkit-transform: rotate(90deg);}
50%  {-webkit-transform: rotate(180deg);}
75%  {-webkit-transform: rotate(270deg);}
100% {-webkit-transform: rotate(360deg);}
}

@-o-keyframes myfirst /* Opera */
{
0%   {-o-transform: rotate(0deg);}
25%  {-o-transform: rotate(90deg);}
50%  {-o-transform: rotate(180deg);}
75%  {-o-transform: rotate(270deg);}
100% {-o-transform: rotate(360deg);}
}
.music_pic img{ width:25%; border-radius:50%;
animation: myfirst 8s linear 0s infinite ;
/* Firefox: */
-moz-animation: myfirst 8s linear 0s infinite ;
/* Safari 和 Chrome: */
-webkit-animation: myfirst 8s linear 0s infinite ;
/* Opera: */
-o-animation: myfirst 8s linear 0s infinite ;}
.title_message{ text-align:center;}
.music_pic music_1{}
.music_pic music_2{}
.music{ height:30px; position:absolute; left:0px; width:100%; bottom:0px;}
.music audio{ width:100%;}
.back{ height:30px;}
.tc{ text-align:center;}
.ti{ text-indent:37px;}
.color_blue{ color:#3d95d4;}
.color_gary{ color:#a0a0a0;}
.mb20{ margin-bottom:20px;}
.pl32{ padding-left:32px;}
.br1{ border-radius:1px;}

.top:after, .menu_order:after, .music_list:after, .music_control:after, .time_box:after, .login form:after, .music_list2 li a:after, .botton_pay:after, .check_phone:after, .order_by:after{content: ""; display: block; height: 0; clear: both; visibility: hidden;}