html,
body {
    margin:0;
    padding:0;
}

.prod_bg{
    background: #fff;
}

.prelude_show {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 100%;
    color: white;
    height: 80px;
    background: #2d303a;
    font: normal bold 6rem "Microsoft Yahei", sans-serif;
    white-space: nowrap;
}
.version_ie .prelude_show{
    height:90px;
}
.prelude_show img{
    width: 150px;
    margin: 5px 50px;
}

.prelude_show .loginEvent{
    position: absolute;
    right: 40px;
    top: 20px;
    font-size: 19px;
    padding: 7px;
    font-weight: 500;
    border: 1px solid #fff;
    font-family: 'Microsoft Yahei';
    border-radius: 5px;
    color:#fff;
    text-decoration: none;
}
.prelude_show .loginEvent:hover {
    text-decoration: none;
    filter: alpha(opacity:90);
    opacity:0.9;
}
.letter {
    animation: bounce 0.75s cubic-bezier(0.01, 0, 0.9, 1) infinite alternate;
    display: inline-block;
    transform: translate3d(0, 0, 0);
    margin-top: 0.5em;
    text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
    font: normal 500 6rem 'Microsoft Yahei', sans-serif;
    font-size: 40px;
}
.letter:nth-child(1) {
    animation-delay: 0s;
    margin-left:20px;
}
.letter:nth-child(2) {
    animation-delay: 0.08s;
}
.letter:nth-child(3) {
    animation-delay: 0.16s;
}
.letter:nth-child(4) {
    animation-delay: 0.25s;
}
.letter:nth-child(5) {
    animation-delay: 0.33s;
}
.letter:nth-child(6) {
    animation-delay: 0.42s;
}
.letter:nth-child(7) {
    animation-delay: 0.51s;
}
.letter:nth-child(8) {
    animation-delay: 0.62s;
}
.letter:nth-child(9) {
    animation-delay: 0.74s;
}
.letter:nth-child(10) {
    animation-delay: 0.82s;
}
.letter:nth-child(11) {
    animation-delay: 0.93s;
}
.letter:nth-child(12) {
    animation-delay: 1s;
}

/*@keyframes bounce {
    0% {
        transform: translate3d(0, 0, 0);
        text-shadow: rgba(255, 255, 255, 0.4) 0 0 0.05em;
    }
    100% {
        transform: translate3d(0, -1em, 0);
        text-shadow: rgba(255, 255, 255, 0.4) 0 1em 0.35em;
    }
}*/

.bgCover{
    width:100%;
    height:100%;
    background: url(../images/background.png) no-repeat center center;
}
.bgCover .ilayer{
    width: 35%;
    position: absolute;
    top: 15%;
    left: 10%;
}
.wrap .copy{
    width:100%;
    height:50px;
    background: #fff;
    position: fixed;
    left: 0;
    bottom: 0px;
    text-align: center;
    line-height: 50px;
}
.wrap .copy a{
    text-decoration: none;
}
.wrap .copy a:hover{
    text-decoration: underline;
}


.wrap {
    padding-top:1px;
    width:100%;
    overflow-x:hidden;
    background:#fff
}
.logo_area {
    display:block;
    height:128px;
    width:576px;
    border-bottom:1px solid #b9c0cb;
    margin:40px auto 25px;
    text-align:center
}
.logo_area .logo {
    display:block;
    height:60px;
    width:293px;
    background:url(../images/sf-logo.png) no-repeat 0 0;
    margin:0 auto;
    text-indent:-9999px;
    overflow:hidden
}
.logo_area .logo_slogan {
    color: #0F367B;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 10px;
}
.company_title {
    position:relative;
    top:55px
}
.company_detail {
    position:relative;
    top:55px
}
.company_detail .detail_slogan {
    display:block;
    height:30px;
    line-height: 30px;
    width:700px;
    overflow:hidden;
    margin:0 auto 10px;
    color: #0F367B;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: 2px;
    text-align: center;
}
.company_detail .txt {
    display:block;
    height:23px;
    width:575px;
    font-size:16px;
    font-family:'microsoft yahei';
    color:#666;
    margin:0 auto 50px
}
.ocupy_area {
    position:relative;
    display:block;
    height:547px;
    width:1118px;
    margin:0 auto 90px
}
.phone_wrap {
    display:block;
    height:547px;
    width:1118px;
    background:url(../images/phone_bg.png) no-repeat 0 0;
    background-size:100% 100%;
    -moz-transition:-moz-transform .1s linear;
    -webkit-transition:-webkit-transform .2s linear
}
.phone_screen {
    display:block;
    height:488px;
    width:863px;
    position:absolute;
    left:123px;
    top:30px
}
.sea_bg {
    display:block;
    height:80%;
    width:100%;
    position:absolute;
    left:0;
    top:0;
    z-index:1
}


@-moz-keyframes a_wave_1 {
    0% {
        opacity:0;
        -moz-transform:translate(0px,-1px)
    }
    50% {
        opacity:1;
        -moz-transform:translate(-1px,-1px)
    }
    100% {
        opacity:0;
        -moz-transform:translate(0px,0px)
    }
}@-moz-keyframes a_wave_2 {
     0% {
         opacity:0;
         -moz-transform:translate(0px,1px)
     }
     50% {
         opacity:1;
         -moz-transform:translate(1px,1px)
     }
     100% {
         opacity:0;
         -moz-transform:translate(0px,0px)
     }
 }@-webkit-keyframes a_wave_1 {
      0% {
          opacity:0;
          -webkit-transform:translate(0px,-1px)
      }
      50% {
          opacity:1;
          -webkit-transform:translate(-1px,-1px)
      }
      100% {
          opacity:0;
          -webkit-transform:translate(0px,0px)
      }
  }@-webkit-keyframes a_wave_2 {
       0% {
           opacity:0;
           -webkit-transform:translate(0px,1px)
       }
       50% {
           opacity:1;
           -webkit-transform:translate(1px,1px)
       }
       100% {
           opacity:0;
           -webkit-transform:translate(0px,0px)
       }
   }.ship_wrap {
        display:block;
        height:174px;
        width:85px;
        position:absolute;
        left:150px;
        bottom:35px;
        z-index:2;
        -moz-animation:a_ship 2.5s linear infinite;
        -webkit-animation:a_ship 2.5s linear infinite
    }

@-moz-keyframes a_ship {
    0% {
        -moz-transform:translate(0px,0px)
    }
    20% {
        -moz-transform:translate(-1px,-1px)
    }
    40% {
        -moz-transform:translate(-2px,0px)
    }
    55% {
        -moz-transform:translate(-1px,0px)
    }
    70% {
        -moz-transform:translate(-1px,-1px)
    }
    85% {
        -moz-transform:translate(0px,1px)
    }
    100% {
        -moz-transform:translate(0px,0px)
    }
}@-moz-keyframes a_ship_shadow {
     0% {
         -moz-transform:translate(0px,0px) scale(1,1) skew(0,0)
     }
     20% {
         -moz-transform:translate(-1px,1px) scale(1,.96) skew(3deg,0)
     }
     40% {
         -moz-transform:translate(-1px,1px) scale(1,.98) skew(-2deg,0)
     }
     55% {
         -moz-transform:translate(-1px,1px) scale(1,.96) skew(1deg,0)
     }
     70% {
         -moz-transform:translate(-1px,1px) scale(1,.99) skew(-1deg,0)
     }
     85% {
         -moz-transform:translate(-1px,1px) scale(1,.97) skew(1deg,0)
     }
     100% {
         -moz-transform:translate(0px,0px) scale(1,1) skew(0,0)
     }
 }@-webkit-keyframes a_ship {
      0% {
          -webkit-transform:translate(0px,0px)
      }
      20% {
          -webkit-transform:translate(-1px,-1px)
      }
      40% {
          -webkit-transform:translate(-2px,0px)
      }
      55% {
          -webkit-transform:translate(-1px,0px)
      }
      70% {
          -webkit-transform:translate(-1px,-1px)
      }
      85% {
          -webkit-transform:translate(0px,1px)
      }
      100% {
          -webkit-transform:translate(0px,0px)
      }
  }@-webkit-keyframes a_ship_shadow {
       0% {
           -webkit-transform:translate(0px,0px) scale(1,1) skew(0,0)
       }
       20% {
           -webkit-transform:translate(-1px,1px) scale(1,.96) skew(3deg,0)
       }
       40% {
           -webkit-transform:translate(-1px,1px) scale(1,.98) skew(-2deg,0)
       }
       55% {
           -webkit-transform:translate(-1px,1px) scale(1,.96) skew(1deg,0)
       }
       70% {
           -webkit-transform:translate(-1px,1px) scale(1,.99) skew(-1deg,0)
       }
       85% {
           -webkit-transform:translate(-1px,1px) scale(1,.97) skew(1deg,0)
       }
       100% {
           -webkit-transform:translate(0px,0px) scale(1,1) skew(0,0)
       }
   }.footer {
        background:#363737;
        min-width:1100px;
        width:100%;
        height:90px;
        line-height:90px;
        color:#747b80;
        text-align:center;
        font-family:"Arial"
    }
.footer .link {
    color:#747b80
}