@charset "utf-8";
* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}html {
    font-size: 36px;
    font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', STHeitiSC-Light, 'Microsoft YaHei', Arial, sans-serif;
}body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tbody, tfoot, thead, tr, th, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video, button {
    font-family: 'PingFang SC', 'Helvetica Neue', Helvetica, 'Hiragino Sans GB', STHeitiSC-Light, 'Microsoft YaHei', Arial, sans-serif;
    font-weight: 300;
}ul, ol, li {
    list-style: none;
}header.header{
    width: 100%;
    height:1.28rem;
    background-color: #ffffff;
    z-index: 200;
}.header-nav{
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 200;
    border-bottom: 0.028rem solid #f0efee;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .35s;
    transition-duration: .35s;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    background-color: #ffffff;
}.header-logo{
    width: 1.96rem;
    height: 100%;
    position: relative;
    float: left;
    margin-left: 0.44rem;
}.header-logo div{
    width: 100%;
    height: 100%;
    background: linear-gradient(transparent,transparent),url("../imgs/fiil-logo-cn.png") center center no-repeat;
    background-size: contain;
}.header-out-menu{
    width: 1.2rem;
    height: 100%;
    position: relative;
    float: right;
}.header-menu{
    width: 1.2rem;
    height: 100%;
    position: relative;
    float: right;
    background-color: #ffffff;
}.header-menu-bread-t{
    width: 100%;
    height: 100%;
    position: absolute;
}.header-menu-bread-mt{
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 1;
}.header-menu-bread-mb{
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 1;
}.header-menu-bread-b{
    width: 100%;
    height: 100%;
    position: absolute;
}.header-menu-bread-crack{
    background-color: #000000;
    position: absolute;
    top: 0.44rem;
    right: 0.36rem;
}.header-menu-bread-crackl{
    width: 0.493rem;
    height: 0.053rem;
}.header-menu-bread-cracks{
    width: 0.4rem;
    height: 0.053rem;
}.header-menu-bread-t span{
    -webkit-transform: translateY(0rem);
    transform: translateY(0rem);
}.header-menu-bread-mt span{
    -webkit-transform: translateY(0.133rem);
    transform: translateY(0.133rem);
}.header-menu-bread-mb span{
    -webkit-transform: translateY(0.266rem);
    transform: translateY(0.266rem);
}.header-menu-bread-b span{
    -webkit-transform: translateY(0.399rem);
    transform: translateY(0.399rem);
}.header-menu span{
    -webkit-transition: -webkit-transform .25s,opacity .25s;
    transition: transform .25s,opacity .25s;
    -webkit-transition-timing-function: cubic-bezier(0.4,.01,.165,.99);
    transition-timing-function: cubic-bezier(0.4,.01,.165,.99);
}.header-user {
    width: 1.2rem;
    height: 100%;
    position: relative;
    float: right;
    background-color: #ffffff;
    border-radius: 50%;
    z-index: 2;
    text-align: center;
    line-height: 1.28rem;
}.header-user-img {
    width: 100%;
    height: 100%;
    background: url(../imgs/user123.png) center no-repeat;
    background-size: 40%;
}.head-menu-open .header-menu{
    /*box-shadow: -5px -5px 17px -8px #c5c1c1;*/
}.head-menu-open .header-menu-bread-t{
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
}.head-menu-open .header-menu-bread-mb{
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}.head-menu-open .header-menu-bread-mt,.head-menu-open .header-menu-bread-b{
    opacity: 0;
}.head-menu-open .header-menu-bread-t .header-menu-bread-crack{
    -webkit-transform: translateY(0.17rem);
    transform: translateY(0.17rem);
}.head-menu-open .header-menu-bread-mb .header-menu-bread-crack{
    -webkit-transform: translateY(0.16rem);
    transform: translateY(0.16rem);
}.head-menu-open {
    overflow: hidden!important;
    height: 100%;
}.head-menu-open body {
    overflow: hidden!important;
    height: 100%;
}.header-menuLayer{
    position: absolute;
    width: 100%;
    height: 1.28rem;
    top: 0;
    /*left: 50%;*/
    z-index: 199;
    background-color: #fff;
    overflow-y: auto;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .25s;
    transition-duration: .25s;
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    visibility: hidden;
    opacity: 0;
}.head-menu-open .header-menuLayer {
    visibility: visible;
    opacity: 1;
    height: 100%;
}.head-menu-open .header-nav {
    /*box-shadow: 0 -7px 16px -12px #c5c1c1 inset;*/
    /*background-color: #f0efee;*/
}.header-menuLayer-list{
    overflow: hidden;
    width: 8rem;
    margin: 1.5rem 1.0rem 0;
}.header-menuLayer .header-menuLayer-list .header-menuLayer-list-item{
    position: relative;
    height: 1.40rem;
    line-height: 1.40rem;
    font-size: 0.347rem;
    font-weight: 300;
    border-bottom: 1px solid #f0efee;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: .45s;
    transition-duration: .45s;
    -webkit-transition-timing-function: cubic-bezier(0.4,.01,.165,.99);
    transition-timing-function: cubic-bezier(0.4,.01,.165,.99);
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
    visibility: visible;
    opacity: 1;
}.header-menuLayer .header-menuLayer-list .header-menuLayer-list-item:nth-last-child(1){
    border-bottom: 0px solid #f0efee;
}.animate-delay1 {
    -moz-transition-delay: .1s;
    -o-transition-delay: .1s;
    -webkit-transition-delay: .1s;
    transition-delay: .1s;
}.animate-delay2 {
    -moz-transition-delay: .15s;
    -o-transition-delay: .15s;
    -webkit-transition-delay: .15s;
    transition-delay: .15s;
}.animate-delay3 {
    -moz-transition-delay: .2s;
    -o-transition-delay: .2s;
    -webkit-transition-delay: .2s;
    transition-delay: .2s;
}.animate-delay4 {
    -moz-transition-delay: .25s;
    -o-transition-delay: .25s;
    -webkit-transition-delay: .25s;
    transition-delay: .25s;
}.animate-delay5 {
    -moz-transition-delay: .3s;
    -o-transition-delay: .3s;
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
}.animate-delay6 {
    -moz-transition-delay: .35s;
    -o-transition-delay: .35s;
    -webkit-transition-delay: .35s;
    transition-delay: .35s;
}.animate-delay7 {
    -moz-transition-delay: .4s;
    -o-transition-delay: .4s;
    -webkit-transition-delay: .4s;
    transition-delay: .4s;
}.animate-delay8 {
    -moz-transition-delay: .45s;
    -o-transition-delay: .45s;
    -webkit-transition-delay: .45s;
    transition-delay: .45s;
}.animate-delay9 {
     -moz-transition-delay: .5s;
     -o-transition-delay: .5s;
     -webkit-transition-delay: .5s;
     transition-delay: .5s;
}.header-menuLayer .header-menuLayer-list .header-menuLayer-list-item.animate-back {
    transform: translate3d(25%,0,0);
    -webkit-transform: translate3d(25%,0,0);
    visibility: hidden;
    opacity: 0;
}.header-menuLayer .header-menuLayer-list .header-menuLayer-list-item.animate-scale {
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    animation: scaleBtn .35s linear 0s;
    -webkit-animation: scaleBtn .35s linear 0s;
}.btnAnimate{
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
    -webkit-animation: scaleBtn 0.35s linear 0s;
    -o-animation: scaleBtn 0.35s linear 0s;
    animation: scaleBtn 0.35s linear 0s;
}

@-webkit-keyframes scaleBtn {
    0%{-webkit-transform: scale(1);}
    50%{-webkit-transform: scale(0.9);}
    100%{-webkit-transform: scale(1);}
}
@-moz-keyframes scaleBtn {
    0%{-moz-transform: scale(1);}
    50%{-moz-transform: scale(0.9);}
    100%{-moz-transform: scale(1);}
}
@-o-keyframes scaleBtn {
    0%{-o-transform: scale(1);}
    50%{-o-transform: scale(0.9);}
    100%{-o-transform: scale(1);}
}
@keyframes scaleBtn {
    0%{transform: scale(1);}
    50%{transform: scale(0.9);}
    100%{transform: scale(1);}
}