html{font-family:"Helvetica Neue", Helvetica, STHeiTi, sans-serif; font-size: 62.5%;}
body{font-size: 1.4rem; word-wrap:break-word; -webkit-text-size-adjust:none; color:#444; }
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,div,img,input,textarea,button,select{margin:0;padding:0;border:0; list-style:none;}
em,i{font-style:normal}
a{color:#444;text-decoration:none;}
a:hover,a:focus{ display:inline-block; text-decoration:none;}
.clear{clear:both; font-size:0; line-height:0; width:0; height:0; visibility:hidden;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
img { max-width: 100%; vertical-align: middle; }

.left{float:left;}
.right{float:right; }

/*块状*/
.db{display:block;}
.di{display:inline;}
.dib{display:inline-block;}
.dn{display:none;}
.oh{overflow:hidden;}

.tl{text-align:left;}
.tc{text-align:center;}
.tr{text-align:right;}

.bb-dot{border-bottom:dotted 1px #e6e6e6;}

.pr{position:relative; }
.pa{position:absolute;}

/*文字*/
.f12{font-size:12px}
.f13{font-size:13px}
.f14{font-size:14px}
.f15{font-size:15px}
.f16{font-size:16px}
.f18{font-size:18px}
.f20{font-size:20px}
.f24{font-size:24px}

/*单行文本溢出*/
.ellipsis{display:block; text-overflow: ellipsis; white-space: nowrap; overflow:hidden;}

.fwn{font-weight:normal;}
.fwb{font-weight:bold;}

.red{ color: #CC251D;}
.yellow{ color:#F5775A;}
.gray{ color:#b2b2b2;}

html,body{width: 100%;height: 100%; min-height: 100%;background: #e8e9ed;}
.main{width: 100%; max-width: 768px; min-height:100%; box-sizing: border-box; padding-bottom: 48px; margin: 0 auto; position: relative;}
.myRoom{ position: absolute;
  left:0;right: 0;background: #000;
  bottom:48px;
  min-width: 100%;
  min-height: 100%;
  width: 100%;
  /*height: 100%;*/
  z-index: 0;
}


.my-head{ width: 100%; height: 280px; background: url(../images/ubg@2x.png) no-repeat; background-size: 100% 80%;}
.user-p{display: -webkit-flex; display: flex;color: #fff; padding: 40px 30px;}
.u-pic{ width: 75px; height: 75px; margin-right: 20px;}
.u-pic>img{ width: 100%; border-radius: 50%; overflow: hidden;}

.user-p2{display: -webkit-flex; display: flex;color: #fff; padding: 40px 30px 28px 30px;}
.u-pic2{ width: 110px; margin: 0 auto; text-align: center; }
.u-pic2>img{height: 75px;}

.u-text p{ padding-top: 5px; }
.u-text .u-level{ margin-top: 12px; display: block; text-align: center; width: 100px; line-height: 25px; height: 25px;background: url(../images/level@2x.png) no-repeat; background-size: 100%;}
.u-text .u-level>img{ width: 20%; }

.my-hbox{ margin: 0 15px; background: #fff; border-radius: 10px; box-shadow: 0 3px 6px 0 rgba(32, 33, 36, .1);}
.my-hbox ul{display: -webkit-flex; display: flex;}
.my-hbox ul li{ text-align: center; width: 50%; padding: 12px 0;}
.my-hbox ul li a,.my-hbox ul li a span{ display: block;}
.my-hbox ul li:first-child a{ border-right: solid 1px #ddd;}
.my-hbox ul li a img{ width: 50px;}

.my-list{ padding:0 15px;}
.my-list li{background: #fff; border-radius: 7px; margin: 10px 0;box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .1);}
.my-list li a{ display: block; padding: 12px 20px;}
.my-list li a img{ width: 24px; margin-right:5px;}
.my-list li a span{ float: right; width: 10px; height: 18px; margin: 2px 0 0 0; display: block;background: url(../images/next@2x.png) no-repeat; background-size: 100% 100%;}

.dpage{background: url(../images/backbg@2x.png) no-repeat; background-size: 100% 100%; width: 100%; height: 100%; box-sizing: border-box; position: relative;}
.dpage1{background: url(../images/frontbg@2x.png) no-repeat; background-size: 100% 100%; width: 100%; height: 100%; box-sizing: border-box;position: absolute; left: 0; top: 0; z-index: 1;}
.dibox{ position: absolute; left: 50%; top: 0; margin-left:-137px; width: 275px; height: 485px;background: url(../images/letterbg@2x.png) no-repeat; background-size: 100% 100%; z-index: 0;}
.dibox-letter{ position: absolute; top: 52%; left: 10%; right: 10%; text-align: center; z-index: 2;} 
.dibox-letter h2{ font-size: 2rem; color: #5d3c2d;margin-top: 5%;}
.dibox-letter h3{font-size: 2.4rem; color: #a40102;margin-top: 5%;}
.dibox-letter img{ width: 80%; margin-top: 2%;}

.head-tip{ position: absolute; top: 15px; left: 20px;}
.head-tip span{ display: inline-block; text-align: center; color: #fff; padding: 5px 15px;}
.head-tip span:first-child{ background:rgba(52, 52, 47, 0.8); border-radius: 10px 0 0 0;}
.head-tip span:last-child{ background:rgba(188, 127, 69, 0.8);border-radius: 0 0 10px 0;}

.feed-bot{ position: absolute; left: 50%; margin-left: -67px; bottom: 75px; width: 135px; height: 135px;background: url(../images/yuan@2x.png) no-repeat; background-size: 100% 100%;}
.feed-bg{width: 135px; height: 135px;background: url(../images/yuan1@2x.png) no-repeat; background-size: 100% 100%; }
.feed-bot a{width: 135px; height: 135px;display: block; padding: 48px 0 0 0; text-align: center; background: url(../images/yuan2@2x.png) no-repeat; background-size: 100% 100%; box-sizing: border-box;}
.feed-bot a span{ font-size: 1.5rem; color: #7C563C; font-weight: bold;}
.feed-bot a p{ font-size: 1.4rem; color: #FADBB5; padding-top: 5px;}

.feed-bot.active .feed-bg{animation: externalHalo 3s linear; animation-iteration-count:infinite;}
.feed-bot.active a{animation: internalAvatar 3s linear;  animation-iteration-count:infinite;}

  @keyframes externalHalo {
    0%{
      transform: rotate(0deg);
    }
    25%{
      transform: rotate(90deg);
    }
    50%{
      transform: rotate(180deg);
    }
    100%{
      transform: rotate(360deg);
    }
  }
   
 
  @keyframes internalAvatar {
    0%{
      transform: rotate(0deg);
    }
    25%{
      transform: rotate(-90deg);
    }
    50%{
      transform: rotate(-180deg);
    }
    100%{
      transform: rotate(-360deg);
    }
  }



.feed-right{ position: absolute; right: 20px; bottom: 65px;}
.feed-right a{ display: block; color: #fff; text-align: center; margin-bottom: 20px;cursor: pointer;}
.feed-right a img{ width: 48px;}

/* Tab切换 */
.myrecord{background: url(../images/rec@2x.png) no-repeat; background-size: 100% 258px;}
.record-head{ width: 220px; height: 218px; line-height: 218px; text-align: center; font-size: 1.8rem; font-weight: bold; margin: 0 auto; background: url(../images/rec_1@2x.png) no-repeat; background-size: 100% 100%;}
.honor-head{background: url(../images/rec_2@2x.png) no-repeat; background-size: 100% 100%;}

.myrecord .hd{ height:40px; line-height:40px; font-size:1.6rem; overflow:hidden; padding:0 10px;  }
.myrecord .hd ul{display: -webkit-flex; display: flex;}
.myrecord .hd ul li{ display: inline-block; width: 33.333%; text-align: center; }
.myrecord .hd ul li a{ display: block;height:38px; line-height:38px;  border-bottom:2px solid #fff; }
.myrecord .hd ul li.on a{ color:#029938; border-bottom:2px solid #029938;  }
.myrecord .i-conbox{ padding:12px 10px;}
.myrecord .lett-bar{ padding: 12px;display: -webkit-flex; display: flex; background: #fff; border-radius: 7px; box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .1);}
.myrecord .lett-bar span{ display: block; width: 50%; text-align: center;}
.myrecord .lett-bar span strong{ font-size: 2rem;}
.myrecord .i-conbox ul{background: #fff; border-radius: 7px; box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .1); overflow: hidden; margin-top: 12px;}
.myrecord .i-conbox ul li{ padding: 12px 0; margin: 0 12px;}
.myrecord .i-conbox ul li+li{ border-top: solid 1px #efefef;}
.myrecord .i-conbox ul li a{ display: block; overflow: hidden;}
.myrecord .i-conbox ul li a h3,.feed-botm h3{ padding-bottom: 5px; font-weight: normal;}
.myrecord .i-conbox ul li a strong,.feed-botm strong{ display: inline-block; padding-top: 10px; font-size: 2rem;}

.feed-ibox{background: #fff; padding: 12px 15px; margin-bottom: 15px; border-radius: 7px; box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .1); overflow: hidden; min-height: 280px;}
.feed-ibox:last-child{ margin-bottom: 0;}
.feed-tpic{ background: #327651; min-height: 200px;text-align: center;}
.feed-tpic>img{ max-width: 90%;}
.feed-botm{ padding-top: 12px; overflow: hidden;}
a.save-btn{ display: inline-block; padding: 10px 20px; border: solid 1px #d6e0da; font-size: 1.6rem; color: #327550;border-radius: 3px;}


.footer{position: fixed; right: 0; bottom: 0; left: 0; height: 48px;  padding-right: 10px;  padding-left: 10px;  border-bottom: 0; background-color: #fff;  box-shadow: 1px 0 44px rgba(0,78,151,.1);z-index: 10;}
.footer ul{display: -webkit-flex; display: flex;}
.footer ul li{ display: inline-block; width: 50%; position: relative;text-align: center;font-size: 1.4rem; color: #999;}
.footer ul li a,.footer ul li a i{ display: block;}
.footer ul li a i{ width: 20px; height: 20px; margin: 5px auto 2px auto;}
.footer ul li a i.i-home{ background: url(../images/home@2x.png) no-repeat; background-size: 100% auto;}
.footer ul li a i.i-my{background: url(../images/my@2x.png) no-repeat; background-size: 100% auto;}
.footer ul li s{display:block;position: absolute; right: 35%; top: 8px;width:8px; height:8px; border-radius: 50%; background:#ff0000;}
.footer ul li.active a{ color: #212121;}
.footer ul li.active a i.i-home{ background: url(../images/home_hover@2x.png) no-repeat; background-size: 100% auto;}
.footer ul li.active a i.i-my{ background: url(../images/my_hover@2x.png) no-repeat; background-size: 100% auto;}

.wraing{ position: absolute; bottom: 49px; left: 0; width: 100%; box-sizing: border-box; padding:7px; color: #fff; background: rgba(0, 0, 0, .3);}
.wraing a{ display: inline-block; background: #ffd524; color: #000; padding: 2px 5px; border-radius: 3px; margin-left: 5px;}

.popmodal{background: #fff; border-radius: 7px; box-shadow: 0 1px 6px 0 rgba(32, 33, 36, .1); position: fixed; top: 50%;margin-top: -12%; left: 25%; right: 25%; z-index: 12;}
.popmodal a.close{ display: block; position: absolute; top: -74px; right: 10px; width: 32px; height: 74px;}
.popmodal a.close>img{ width: 100%;}
.logincontent{ padding: 20px;}
.logincontent h2{ font-size: 2rem;}
.logincontent ul.login{ padding: 30px 0 20px 0;}
.logincontent ul.login li{ border-bottom:solid 1px #dedede; height:40px;margin-bottom: 12px; position: relative;}
.logincontent ul.login li:first-child{background: url(../images/tel@2x.png)no-repeat left center; background-size: 24px 24px;}
.logincontent ul.login li:last-child{background: url(../images/pwd@2x.png)no-repeat left center; background-size: 24px 24px;}
.logincontent ul.login li input{border:none; background: none; width: 100%; padding-left: 30px; height: 40px; line-height: 40px; outline: none;  box-sizing: border-box;}
.sendyzm{position: absolute; top: 0; right: 0; border:none;outline: none; width: 100px; background: #cf946a; color: #fff; height: 30px; line-height: 30px;  border-radius: 30px; cursor: pointer; }
.sendyzm:disabled{ cursor: default; background: #ccc;}

.login-sub{ text-align: center; padding-bottom: 15px;}
.login-sub button{border:none;outline: none; width: 200px; background: #3c382f; color: #fff; height: 40px; line-height: 40px;  border-radius: 40px; cursor: pointer; }

.elephant-col{ width: 100%; height: 90px; position: relative;margin-top: 20px;}
.elephant-col a{ display: -webkit-flex; display: flex;position: absolute; top: 28px; left: 0; width: 180px; height: 36px; line-height: 36px;font-size: 1.2rem; color: #181F21; background: url(../images/bq@2x.png) no-repeat; background-size: 100% 100%;}
.elephant-col a span{ font-size: 1.4rem; color: #FFC194; margin: 0 25px 0 10px; display: inline-block;white-space: nowrap;}
.elephant-col a span:first-child{min-width: 100px;overflow: hidden;text-overflow: ellipsis;}
.elephant-col a span:last-child{ margin-left:-15px;  }

.feed-ibox-1{ margin-top: 20px;}
.feed-ibox-1 a.conting{ font-size: 1.6rem; margin-right: 20px; display: inline-block;}

ul.feedlist,ul.play-ary{display: -webkit-flex; display: flex; padding: 20px 0; margin: 0 -10px;}
ul.feedlist li{display: inline-block; width: 33.333%; text-align: center; margin: 0 10px; }
ul.feedlist li a p{ padding-top: 5px;}
ul.feedlist li a,ul.play-ary li a{ display: block; padding: 10px; border: solid 1px #dedede; border-radius: 5px;}
ul.feedlist li a span{ display: block; padding-top: 5px;}
ul.feedlist li a span strong{ font-size: 1.8rem;}
ul.feedlist li.active a{ border-color: #1b3826;}

ul.play-ary li{display: inline-block; width: 50%; text-align: center; margin: 0 10px; }
ul.play-ary li a img{ width:80%;}
ul.play-ary li.active a{ border-color: #21af39;}

.play-botm{ border-top: solid 1px #dedede; margin: 0 -20px; text-align: right; padding: 20px  10px 0  10px;}
.play-botm span strong{ font-size: 2rem;}
.play-botm a{display: inline-block; padding:7px 25px;background-image:linear-gradient(to right, #e02401, #c41c01); font-size: 1.6rem; color: #fff;border-radius: 5px; margin-left: 20px;}

.mask{
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}
@media screen and (max-width:768px){
  .popmodal{margin-top: -38%;left: 5%; right: 5%; }
  .zhifu{margin-top: -55%;}
  .zhengshu{margin-top: -55%;}
}