@import "../../iconfont.ttss";

/* .top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10 80;
  padding-bottom: 200rpx;
} */

page {
  background: #f8f8fa;
}
.img{
  display: block;
  width: 160rpx;
  margin: 0 auto;
}
@font-face {
  font-family: 'iconfont';  /* project id 1353693 */
  src: url('//at.alicdn.com/t/font_1353693_mi95v4vvx8n.eot');
  src: url('//at.alicdn.com/t/font_1353693_mi95v4vvx8n.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_1353693_mi95v4vvx8n.woff2') format('woff2'),
  url('//at.alicdn.com/t/font_1353693_mi95v4vvx8n.woff') format('woff'),
  url('//at.alicdn.com/t/font_1353693_mi95v4vvx8n.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_1353693_mi95v4vvx8n.svg#iconfont') format('svg');
}
.iconfonts {
  display: inline-block;
  vertical-align: middle;
  width: 40rpx;
  height: 40rpx;
  margin-top: -7rpx;
  margin-right: -26rpx;
}

.firstPage {
  width: 100%;
  height: 100%;
}

.location {
  position: relative;
  width: 100%;
  font-size: 30rpx;
  text-align: left;
  color: #fff;
}
.fix image {
  position: absolute;
  top: 0;
  width: 100%;
  height: 168rpx;
  left: 0;
  right: 0;
  z-index: 10;
}
.location image {
  position: absolute;
  top: 0;
  width: 100%;
  height: 168rpx;
  left: 0;
  right: 0;
  z-index: 10;
}

.location text {
  display: block;
  text-align: left;
  position: relative;
  z-index: 100;
  font-size: 30rpx;
  color: #000;
  letter-spacing: 1.16rpx;
}
.fix{
  margin-bottom: 10rpx;
}
.writeOff {
  width: 100%;
  height: 24.5%;
  margin-top: 10rpx;
}
.writeOff>text {
  width: 92%;
  height: 50rpx;
  display: block;
  font-size: 30rpx;
  font-weight: bold;
  padding-top: 1.4%;
  margin: 0 auto;
}
.topBox{
  position: relative;
  z-index: 1000;
  background: #fff;
  width: 570rpx;
  margin: 20rpx  auto 0;
  border-top: 1px solid #f6f5f5;
  padding: 30rpx 70rpx;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.05);
  color: #000;
  border-radius:32rpx;
}
.topBox view{
  display: flex;
  flex-direction: column;
  text-align: center; 
}
.topBox2{
  position: relative;
  z-index: 1000;
  background: #fff;
  height: 240rpx;
  width: 710rpx;
  margin: 20rpx  auto;
  color: #000099;
  display: flex;
  flex-direction: column;
  text-align: center; 
  border-radius:32rpx;
}
.imgBox{
  width: 120rpx;
  height: 120rpx;
  margin: 20rpx auto;
}
.topBox2 image{
  width: 120rpx;
  height: 120rpx;
  margin: 20rpx auto;
}
.name{
  font-size: 30rpx;
  text-align: center;
  height: 60rpx;
  line-height: 60rpx;
}
.left>text:nth-child(2), .right>text:nth-child(2){
  font-size: 80rpx;
  margin: 10rpx 0;
  color:#FD782D;
}
.left>text,.right>text{
  width: 255rpx;  
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  color: #475669;
}

.left>text:nth-child(3),.right>text:nth-child(3){
  color:#475669;
}
.classification {
  position: relative;
  z-index: 1000;
  width: 710rpx;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}

.classification>view {
  background: #FFF;
  text-align: center;
  width: 19.5%;
  border: .1rpx #eee solid;
  display: flex;
  flex-direction: column;
  padding-bottom: 30rpx ;
  border-left: none!important;
}
.classification>view:nth-child(1) {
  border-radius: 16rpx 0 0 0;
}
.classification>view:nth-child(6) {
  border-radius:0 0 0 16rpx;
  border-top: none!important;
}
.classification>view:nth-child(7),.classification>view:nth-child(8) {
  border-top: none!important;
}
.classification>view:nth-child(5) {
  border-right: none!important;
  border-radius:0 16rpx 0 0;
}
.classification>view:nth-child(10) {
  border-top: none!important;
  border-right: none!important;
  border-radius:0 0 16rpx 0;
} 
.classification>view>view {
  width: 110rpx;
  height: 110rpx;
  border-radius: 50%;
  text-align: center;
  margin: 0 auto;
  line-height:110rpx;
}
.icon-shoufukuan{
  color: rgb(91, 115, 255);
}
.icon-hexiao{
  color: #EEAF5C;
}
.icon-shouye1{
  color: #FF3A1D;
}
.icon-shouyintai1{
  color: rgb(33, 158, 214);
}
.icon-jifen{
  color: #00cd00;
}
.icon-quan{
  color: #FF5183;
}
.icon-jiesuan{
  color:#1296db;
}
.icon-lingquanzhongxin{
 color: #EEAF5C;
}
.icon-wuliu{
  color:#1296db;
  font-size: 72rpx !important;
}
.active {
  opacity: 0.6;
}

.actives {
  opacity: 0.6;
}
.classification>view>view icon {
  font-size: 60rpx;
}
.classification>view>text {
  font-size: 24rpx;
  color: #475669;
  letter-spacing: 2rpx;
  line-height: 26rpx;
}

.transaction {
  position: relative;
  height:280rpx;
}
.reportForm {
  background: #fff;
}

.toTransaction {
  width: 92%;
  height: 87rpx;
  display: flex;
  justify-content: space-between;
  padding: 0 4% 20rpx;
  line-height: 87rpx;
  background: #fff;
}

.toTransaction>view:nth-child(1) text {
  font-size: 30rpx;
  color: #000;
  letter-spacing: 1.16rpx;
}

.toTransaction>view:nth-child(2) {
  font-size: 28rpx;
  color: #919191;
  text-align: right;
}

.reportForm {
  position: relative;
  width: 100%;
  height: 245rpx;
}

.Fill {
  color: #fff;
  background: #fff;
}

.jiaoyi {
  position: relative;
  z-index: 1;
  width: 710rpx;
  margin: 0 auto;
  border-radius: 16rpx;
  margin-top: 30rpx;
  overflow: hidden;
  margin-bottom: 30rpx;
  background:#fff;
  padding-bottom: 30rpx;
  box-shadow: 0 6px 20px 0 rgba(0, 0, 0, 0.05);
}

.swiper_container {
  position: relative;
  z-index: 100;
  height: 80rpx;
  line-height: 80rpx;
  width: 100%;
}

.swiper_item {
  position: relative;
  z-index: 1000;
  font-size: 28rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 2px;
  color: #fff;
}

.swiper_item text {
  display: inline-block;
  text-align: left;
}

.title {
  height: 80rpx;
  line-height: 80rpx;
  text-indent: 0.5em;
  font-size: 28rpx;
  color: #fff;
  background: #52a0fd;
}

.number {
  color: red;
}

.message {
  position: absolute;
  z-index: 1000;
  left: 20rpx;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 40rpx;
  height: 40rpx;
}

.message text {
  font-size: 26rpx;
  display: block;
  height: 40rpx;
  line-height: 36rpx;
  width: 100%;
  text-align: center !important;
  position: relative;
  z-index: 10;
  text-indent: 0 !important;
  color: #FFF;
}

.message image {
  position: absolute��important;
  z-index: 1;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.state1 {
  color: red !important;
  margin-left: 80rpx;
  margin-right: 10rpx;
}

.state2 {
  color: #ffce00 !important;
  margin-left: 80rpx;
  margin-right: 10rpx;
}

.billtype {
  margin-right: 10rpx;
}
.nothave{
  text-align: center;
  color: #afd9eb;
  font-size: 30rpx;
  margin-top: 15rpx;
}
.nothave1{
  font-size: 30rpx;
  color: #ffc3c2;
  text-align: center;
  margin-top: 15rpx;
}
.nothave2{
  font-size: 30rpx;
  color: #FFCE00;
  text-align: center;
  margin-top: 15rpx;
}
.container{
  width: 100%;
  height: 240rpx;
  position: relative; 
}

#mychart-pament {
  position: absolute; 
  top: 0;
  height: 100%;
  left: 0;
  right: 0;
}
/* .fix{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
} */
.jiaoyi2{
  /* margin-top: 333rpx; */
  position: relative;
  z-index: 1;
}
