//浏览器重置样式
html, body, div, span, nav, header, iframe,
h1, h2, h3, h4, h5, h6, p, section, footer,
a, form, address, big, cite, code,
del, dfn, em, img, ins, fieldset, q, s, samp,
small, strike, strong, sub, sup, label, var,
b, u, i, input, dl, dt, dd, ol, ul, li{
  margin:0;
  padding:0;
  border:0;
  vertical-align:baseline;
}
html, body{
  font:{
    size:14px;
    family:"SimHei";
  }
  color:#333;
}
form, fieldset{
  border:0 none;
}
ol, ul{
  list-style:none;
}
img{
  border:0 none;
  max-width:100%;
}
input{
  outline:none;
}
button{
  border:0;
  font-family:"SimHei";
}
i, em{
  font-style:normal;
}
a{
  color:#535353;
  text-decoration:none;
  &:hover{
    text-decoration:none;
  }
}
header{
  height:80px;
  background:#5ebbc2;
  color:#fff;
  padding:0 30px;
  position:fixed;
  width:100%;
  z-index:99;
  top:0;
  .h-wrap{
    display:flex;
    justify-content:space-between;
    align-items:center;
    .logo{
      width:60px;
      height:60px;
      margin:10px 20px;
      img{
        width:100%;
        height:100%;
      }
    }
    .head-r{
      margin-right:50px;
      height:60px;
      display:flex;
      align-items:center;
      .logout{
        display:flex;
        flex-direction:column;
        align-items:center;
        width:50px;
        height:40px;
        font-size:14px;
        font-family:"Microsoft YaHei";

        img{
          margin-bottom:1px;
        }
      }
      .user-wrap{
        padding-right:30px;
        width:40px;
        height:40px;
        position:relative;
        .user{
          display:flex;
          flex-direction:column;
          align-items:center;
          width:50px;
          font-size:14px;
          font-family:"Microsoft YaHei";
          img{
            margin-bottom:5px;
          }
        }
        .user-list{
          position:absolute;
          top:50px;
          left:-100px;
          display:none;
          width:180px;

          ul{
            display:flex;
            flex:0 0 100%;
            justify-content:center;
            align-items:center;
            flex-direction:column;
            background:rgba(255,252,255,1);
            box-shadow:0 0 10px rgba(71,71,71,0.3);
            max-height:273px;
            overflow-y:auto;
            li{
              height:32px;
              display:flex;
              width:94%;
              justify-content:space-between;
              align-items:center;
              padding:0 5px;
              &:last-child{
                .followName{border-bottom:1px solid transparent;}

              }
              a{
                display:flex;
                height:100%;
                align-items:center;
              }
              .sort{
               a:first-child{
                 margin-bottom:8px;
               }
              }
              .followName{
                display:inline-block;
                line-height:32px;
                height:31px;
                width:100px;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                border-bottom:1px solid #c9d8d9;
                text-indent:5px;

              }
              .del-fol{

                img{
                  width:20px;
                }
              }
              img{
                width:12px;
              }
              &:hover{
                background:#c9d8d9;
                .followName{
                  border-bottom:1px solid transparent;
                  color:#fff;
                }

              }
            }
          }
        }

      }

    }
  }

}
#containal{
  width:1000px;
  margin:80px auto 0;
  padding:20px 0;
  .item-list{
    display:flex;
    flex-wrap:wrap;
    .item{
      flex:0 0 20%;
      border:1px solid #ccc;
      margin:20px;
      padding:20px 0;
      position:relative;

      div{
        display:flex;
        justify-content:center;
        margin:10px 0;
        &.icon{
          a{
            height:70px;
            display:flex;
            justify-content:center;
            img{
              height:100%;
            }
          }

        }
        strong{
          font-size:16px;
        }
        &.item-info{
          display:flex;
          justify-content:space-around;
          margin:0 30px;
          span{
            color:#6c6c6c;
            display:flex;
            justify-content:center;
            flex:1;
            align-items:center;
            &.time{
              width:110px;
            }
          }
        }
        &.detailed{
          display:flex;
          flex:1;
          a{
            display:flex;
            flex:1;
            justify-content:center;
            border:1px solid #ccc;
            margin:0 30px;
            padding:5px 0;
            border-radius:20px;
            &:hover{
              background:#5ebbc2;
              color:#fff;
              border:1px solid transparent;
            }
          }
        }
      }
      .des{
        position:absolute;
        top:35%;
        width:95%;
        max-height:65%;
        background:#fff;
        opacity:0.9;
        display:none;
        padding:5px;
        color:#000;
      }
      .follow{
        width:30px;
        height:30px;
        position:absolute;
        right:10px;
        top:0;
        a{
          display:inline-block;
          width:30px;
          height:30px;
          background:url("/images/grayheart.png");
          background-size:100% 100%;
          &.flwed{
            background:url("/images/redheart.png");
            background-size:100% 100%;
          }
        }
      }
    }
  }
  .load{
    display:flex;
    justify-content:center;
    margin-top:160px;
  }
}
#pages{
  section{
    width:20%;
    margin:30px auto;
    display:flex;
    justify-content:center;
    button{
      margin:0 20px;
      background:none;
      flex:0 0 60px;
      display:flex;
      &:hover{
        color:#5ebbc2;
        cursor:pointer;
      }
      &:active{
        color:#000;
      }
      &.disabled{
        color:#ccc;
        cursor:default;
      }
    }
  }

}