*{margin:0;padding:0;}
body{font-family: PingFang SC, PingFang SC;background-color:#f9f9f9;padding-bottom:100px;}
.clr{clear:both;}
.loginlogo{width:303px;background-image:url(../img/logo.png);height:174px;margin:60px auto 50px;}
.loginpan{width: 470px;height: 500px;background: #FFFFFF;box-shadow: 0px 0px 40px 0px rgba(0,0,0,0.05);border-radius: 24px 24px 24px 24px;margin:0 auto;}
.loginpan .loginimg{width:115px;height:73px;background-image:url(../img/login.png);margin:10px auto;}
.loginpan .title{font-weight: 600;font-size: 18px;color: #000000;font-style: normal;width:422px;margin:15px auto;}
.loginpan .input{width:422px;margin:10px auto;background-color:#f9f9f9;border-radius: 8px 8px 8px 8px;height:48px;}
.loginpan .input input{display:block;border:0;width:100%;height:100%;background-color:transparent;padding:10px;box-sizing: border-box;font-size: 16px;outline: none;}
.loginpan .loginbtn{width:422px;height:48px;background-color:#fff047;border-radius: 30px;font-size:18px;font-weight: 600;color: #22200A;text-align: center;line-height:48px;margin:35px auto 0;}
.logintip{width:422px;line-height:40px;text-align: center;color:red;margin:0 auto;}
.copyright{margin-top:50px;width:100%;text-align: center;color:#777;font-size:14px;}
.copyright a{color:#779;text-decoration: none;}

.head{width:100%;height:68px;background-color:#22200a;min-width:1440px;}
.main{width:1440px;margin:0 auto;}
.head .logo{width:86px;height:49px;background-image:url(../img/logoy.png);float:left;margin-top:9px;}
.head .searchpan{float:right;width:270px;height:48px;border-radius:30px;border:2px solid #fff047;margin-top:10px;box-sizing: border-box;background-color:white;}
.head .searchpan .searchbtn{display: block;width:24px;height:24px;background-image:url(../img/search.png);content:"";margin:12px;float:left;cursor:pointer;}
.head .searchpan input{display:block;height:28px;margin:9px 0 5px;width:200px;border:0;outline: none;font-size:18px;line-height:30px;box-sizing: border-box;}

.info{background-color:#fff047;margin-top:50px;border-radius: 12px;border:2px solid black;border-width: 2px 5px 5px 2px;box-sizing: border-box;height:216px;}
.info .userinfo{float:left;}
.info .userinfo .userhead{width:120px;height:120px;border-radius: 60px;overflow: hidden;margin:48px 0 48px 38px;float:left;}
.info .userinfo .userhead img{width:120px;height:120px;}
.info .userinfo .userother{float:left;margin-left:12px;}
.info .userinfo .userother .usernamepan{margin-top:72px;}
.info .userinfo .userother .usernamepan .username{float:left;font-size:24px;font-weight: 600;color: #22200A;font-style: normal;}
.info .userinfo .userother .usernamepan .logout{background-image:url(../img/logout.png);width:20px;height:20px;float:left;margin:7px 0 0 10px;cursor: pointer;}
.info .userinfo .userother .viptime{margin-top:16px;color:#6b6b6b;}
.info .total{width:923px;height:192px;background-image:url(../img/total.png);margin-top:7px;float:right;margin-right:40px;display:flex;justify-content: space-evenly;align-items: flex-end;}
.info .total .totalone{margin-bottom:32px;text-align: center;}
.info .total .totalone .hour{font-size:28px;font-weight: 600;color: #22200A;font-style: normal;margin-bottom:16px;}
.info .total .totalone .totalname{font-size:16px;color:#999;font-weight: 400;}

.shengyu{height:54px;background-color:#FFECEC;margin-top:48px;display:flex;justify-content: center;align-items: center;color:#CE2F2F;margin-bottom:24px;}
.shengyu::before{display:block;content:"";background-image:url(../img/tishi.png);width:32px;height:32px;margin-right:16px;}

.main .title{margin-top:24px;height:28px;line-height:28px;font-size:20px;font-weight: 600;color: #22200A;margin-bottom:24px;}
.main .title::before{display:block;content:"";background-image: url(../img/title.png);width:4px;height:28px;float:left;margin-right:8px;}
.left{width:317px;margin-right:48px;float:left;}
.dakadate{background-color:white;margin-top:24px;border-radius: 12px;padding:14px;}
.monthchoose{display:flex;justify-content: center;align-items: center;height:34px;width:317px;}
.monthchoose .tmonth{font-size:24px;font-weight: 600;color: #22200A;margin:0 24px;}
.monthchoose .prev img,.monthchoose .next img{margin-top:7px;}
.datelist{width:100%;}
.datelist table{width:100%;margin-top:24px;}
.datelist table td{text-align:center;height:60px;}
.datelist table td img{width:26px;cursor: pointer;}
.datelist table td .timetip{position:absolute;background-color:white;padding:5px;border:1px solid #22200A;border-radius: 6px;cursor: pointer;}
.historyone{background-color:white;margin:10px 0;border-radius: 12px;height:80px;display: flex;justify-content: center;align-items: center;cursor:pointer;}
.historyone .face{width:52px;height:52px;border-radius: 4px;overflow: hidden;}
.historyone .face img{width: 100%;height: 100%;object-fit: cover;}
.historyone .historyinfo{width:140px;margin:0 10px;}
.historyone .historyinfo .name{color:#22200A;font-size:18px;font-weight: 600;white-space:nowrap;overflow:hidden;text-overflow: ellipsis;}
.historyone .historyinfo .time{color:#666;font-size:14px;font-weight: 400;}
.historyone .btn{width:72px;height:33px;background-image:url(../img/goon.png);}
.historyone .btn::after {content: '继续';display: block;line-height: 33px;text-align: right;margin-right: 10px;}

.right{float:left;width:1075px;}
.typelist,.taglist{display:flex;justify-content: left;align-items: flex-start;flex-wrap: wrap;margin-bottom:12px;}
.taglist{margin-bottom:0;}
.typetitle,.tagtitle{line-height:32px;margin-right:10px;font-size:18px;font-weight: 600;}
.typelist .typeone,.taglist .tagone{background-color:white;margin-right:16px;border-radius: 20px;height:32px;padding:0 16px;line-height:32px;font-size:14px;color:#666;margin-bottom:12px;cursor: pointer;font-weight: 400;}
.typelist .typeone.ck,.taglist .tagone.ck{background-color:#fff047;color:#22200A;cursor:auto;font-weight: 600;}
.audiolist{display:flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
.audiolist .audioone{width:165px;margin-bottom:24px;cursor:pointer;}
.audiolist .audioone .face{width:165px;height:165px;overflow:hidden;border-radius: 8px;}
.audiolist .audioone .face img{width:100%;height:100%;object-fit: cover;}
.audiolist .audioone .audioname{margin:8px 0;font-size:18px;font-weight: 600;color:#22200A;white-space: nowrap;overflow:hidden;text-overflow: ellipsis;}
.audiolist .audioone .audioinfo{font-size:14px;font-weight: 400;color:#666;white-space: nowrap;overflow:hidden;text-overflow: ellipsis;}
.audiolist .audioempty{width:165px;}
.error{width:100%;text-align: center;padding-top:100px;display:none;}
.error .text{font-size:14px;color:#ccc;}
.condition .sub{background-color:#fff047;width:100px;text-align: center;height:30px;line-height:30px;border-radius: 20px;font-weight: 600;cursor:pointer;color:#22200A;margin-bottom:10px;}

.player{width:100%;height:100px;background-color:rgba(0,0,0,.68);position:fixed;bottom:0;backdrop-filter: blur(8.2px);}
.player .main{display:flex;justify-content: space-between;color:white;align-items: center;height:100px;}
.player .audiointro{display:flex;justify-content: left;align-items: center;}
.player .audiointro .face{width:52px;height:52px;border-radius: 4px;overflow: hidden;margin-right:12px;}
.player .audiointro .face img{width:100%;height:100%;object-fit: cover;}
.player .audiointro .audioinfo .audiotitle{font-size:18px;font-weight: 600;}
.player .audiointro .audioinfo .audiodesc{font-size:14px;color:rgba(255,255,255,.58);}
.player .control{width:702px;display:flex;flex-direction: column;align-items: center;}
.player .control .playbtn{width:48px;height:48px;background-image:url(../img/play.png);border-radius: 24px;cursor: pointer;}
.player .control .playbtn.playing{background-image:url(../img/pause.png);}
.player .control .playbtn:hover{transform: scale(1.05);box-shadow:  0 5px 20px rgba(255, 248, 47, 0.5);}
.player .control .progressbar{display:flex;justify-content: space-between;align-items: center;font-size:14px;width:100%;}
.player .control .progressbar .progress-bar{height: 6px;width: 605px;background: rgba(255, 255, 255, 0.3);border-radius: 10px;cursor: pointer;position: relative;}
.player .control .progressbar .progress-bar .progress {height: 100%;width: 0%;background: linear-gradient(90deg, #00dbde, #FFF047);border-radius: 10px;position: relative;}
.player .control .progressbar .progress-bar #progresspoint {position: absolute;height: 12px;width: 12px;background: #fff;border-radius: 50%;top: 50%;right: -5px;transform: translateY(-50%);box-shadow: 0 0 10px rgb(233, 243, 87);opacity: 1;transition: opacity 0.2s ease;}
.player .volume-area {display: flex;align-items: center;margin-top: 15px;width:144px;}
.player .volume-area .volumeicon{width:32px;height:32px;background-image:url(../img/volume2.png);margin-right:5px;cursor: pointer;}
.player .volume-area .volumeicon.vol0{background-image:url(../img/volume0.png);}
.player .volume-area .volumeicon.vol1{background-image:url(../img/volume1.png);}
.player .volume-area .volumeicon.vol2{background-image:url(../img/volume2.png);}
.player .volume-area .volumeicon.vol3{background-image:url(../img/volume3.png);}
.player .volume-slider {flex: 1;height: 5px;background: rgba(255, 255, 255, 0.1);border-radius: 10px;position: relative;cursor: pointer;}
.player .volume-slider .volume-progress {height: 100%;width: 70%;background: white;border-radius: 10px;position: relative;}
.player .volume-slider .volume-progress .volumepoint {position: absolute;height: 10px;width: 10px;background: #fff;border-radius: 50%;top: 50%;right: -5px;transform: translateY(-50%);transition: opacity 0.2s ease;}