body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,fieldset,button,input,textarea,th,td{ margin: 0; padding: 0;}
ul,ol{ list-style: none;}
img{ border: none;}
input{ outline: none;}
a{ outline: none; text-decoration: none; -webkit-tap-highlight-color: rgba(0,0,0,0);}
table{ border-collapse: collapse; border-spacing: 0;}
html,body{height:100%;}
body{ font:12px/22px 微软雅黑,Arial, Helvetica, sans-serif; -webkit-text-size-adjust: none; background-color: #fff; min-width: 1280px;}

header{ width: 100%; height: 80px; line-height: 80px; background-color: #fff; box-shadow: 0 0 5px #ccc;}
header h1{ display: block; height: 80px; line-height: 80px; font-weight: normal; font-size: 20px; padding-left: 100px; float: left; background: url(/assets/img/logo.jpg) 20px 0 no-repeat;}
header strong{ font-weight: normal; color: #f77b6f;}
#login{ color: #777; font-size: 16px; float: right; margin-right: 20px;}

.banner{ width: 100%; height: 400px; line-height: 480px; text-align: center; background-color: #475168; overflow: hidden;}
.banner span{ display: inline-block; line-height: 80px; font-size: 100px; color: #f77b6f; 
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -webkit-animation: jump 3.6s ease-in-out infinite;
  -moz-animation: jump 3.6s ease-in-out infinite;
}
.banner span:nth-child(2){ -webkit-animation-delay: .2s; -moz-animation-delay: .2s;}
.banner span:nth-child(3){ -webkit-animation-delay: .4s; -moz-animation-delay: .4s;}
.banner span:nth-child(4){ -webkit-animation-delay: .6s; -moz-animation-delay: .6s;}
.banner span:nth-child(5){ -webkit-animation-delay: .8s; -moz-animation-delay: .8s;}
.banner span:nth-child(6){ -webkit-animation-delay: 1s; -moz-animation-delay: 1s;}
.banner span:nth-child(7){ -webkit-animation-delay: 1.2s; -moz-animation-delay: 1.2s;}
.banner span:nth-child(9){ -webkit-animation-delay: 1.4s; -moz-animation-delay: 1.4s;}
.banner span:nth-child(10){ -webkit-animation-delay: 1.6s; -moz-animation-delay: 1.6s;}
.banner span:nth-child(12){ -webkit-animation-delay: 1.8s; -moz-animation-delay: 1.8s;}
.banner span:nth-child(13){ -webkit-animation-delay: 2s; -moz-animation-delay: 2s;}
.banner span:nth-child(14){ -webkit-animation-delay: 2.2s; -moz-animation-delay: 2.2s;}

.wrap h3{ height: 50px; line-height: 50px; padding-top: 60px; font-size: 36px; font-weight: normal;}
.tips{ font-size: 12px; line-height: 24px; padding-top: 10px;}
.items{ width: 100%; padding: 30px 0 50px 0; overflow: hidden;}
.items .tips{ width: 350px; padding: 10px 20px; text-align: left;}
.items li{ width: 390px; margin: 30px 15px; float: left;}
.item{ width: 100%; height: 160px; padding: 20px 0; border-radius: 8px; background-color: #f4f4f4; font-size: 16px; -webkit-perspective: 100; -moz-perspective: 100; position: relative;}
.item:hover{ background: #f77b6f; color: #fff;}
.item i{ display: block; width: 70px; height: 70px; line-height: 61px; font-size: 60px; margin: 20px auto; color: #f77b6f;}
.item:hover i{ color: #fff;}
.account:hover i{ -webkit-animation: bounce 3s ease-in-out infinite; -moz-animation: bounce 3s ease-in-out infinite;}
.system:hover i{ -webkit-animation: rotate 3s linear infinite; -moz-animation: rotate 3s linear infinite;}
.service:hover i{ -webkit-animation: jello 2s ease-in-out infinite; -moz-animation: jello 2s ease-in-out infinite;}
.message i{ -webkit-transform-origin: 50% 0%; -moz-transform-origin: 50% 0%;}
.message:hover i{ -webkit-animation: swing 3s ease-in-out infinite; -moz-animation: swing 3s ease-in-out infinite;}
.safe:hover i{ -webkit-animation: rollY 3s ease-in-out infinite; -moz-animation: rollY 3s ease-in-out infinite;}
.open:hover i{ -webkit-animation: tada 3s ease-in-out infinite;}

footer{ width: 100%; height: 180px; line-height: 180px; background-color: #333333;}
.desc{ padding: 0 20px; font-size: 14px;}
.desc i{ padding-right: 10px; font-size: 22px;}
.fastEntrance{ float: right;}
.fastEntrance h4{ height: 55px; line-height: 55px; font-size: 16px; font-weight: normal; color: #d0d0d0;}
.entrances{ overflow: hidden; width: 290px;}
.entrances li{ float: left; margin-right: 10px; margin-bottom: 10px;}
.entrances a{ display: block; width: 48px; height: 48px; line-height: 48px; text-align: center; background-color: #484848; color: #c2c2c2; font-size: 22px;}

.wrap{ width: 1280px; margin: 0 auto; color: #777; overflow: hidden;}
.tc{ text-align: center;}

@font-face {font-family: "iconfont";
  src: url('iconfont.eot'); /* IE9*/
  src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('iconfont.woff') format('woff'), /* chrome、firefox */
  url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.icon-xitong:before { content: "\e600"; }
.icon-kefu:before { content: "\e602"; }
.icon-duanxin:before { content: "\e603"; }
.icon-zhuce:before { content: "\e60a"; }
.icon-tongji:before { content: "\e60b"; }
.icon-zhanghao:before { content: "\e601"; }
.icon-location:before { content: "\e604"; }
.icon-renwu:before { content: "\e60c"; }
.icon-people:before { content: "\e605"; }
.icon-pingtai:before { content: "\e606"; }
.icon-zhifu:before { content: "\e608"; }
.icon-anquan:before { content: "\e607"; }
.icon-chongzhi:before { content: "\e60d"; }
.icon-shensu:before { content: "\e609"; }


@-webkit-keyframes jump{
  0%{ -webkit-transform: scale(1);}
  10%{ -webkit-transform: scaleX(1.25) scaleY(0.75);}
  20%{ -webkit-transform: scaleX(0.75) scaleY(1.25) translate3d(0, -50px, 0);}
  30%{ -webkit-transform: scaleX(1.1) scaleY(0.9) translate3d(0, 0, 0);}
  35%{ -webkit-transform: scale(1);}
}
@-moz-keyframes jump{
  0%{ -moz-transform: scale(1);}
  10%{ -moz-transform: scaleX(1.25) scaleY(0.75);}
  20%{ -moz-transform: scaleX(0.75) scaleY(1.25) translate3d(0, -50px, 0);}
  30%{ -moz-transform: scaleX(1.1) scaleY(0.9) translate3d(0, 0, 0);}
  35%{ -moz-transform: scale(1);}
}


@-webkit-keyframes rotate{
  form{ -webkit-transform: rotate(0deg);}
  to{ -webkit-transform: rotate(360deg);}
}
@-moz-keyframes rotate{
  form{ -moz-transform: rotate(0deg);}
  to{ -moz-transform: rotate(360deg);}
}

@-webkit-keyframes jello{
  10%{ -webkit-transform: scaleX(1.25) scaleY(0.75);}
  20%{ -webkit-transform: scaleX(0.75) scaleY(1.25);}
  30%{ -webkit-transform: scaleX(1.1) scaleY(0.9);}
  40%{ -webkit-transform: scaleX(0.9) scaleY(1.1);}
  50%{ -webkit-transform: scale(1);}
}
@-moz-keyframes jello{
  10%{ -moz-transform: scaleX(1.25) scaleY(0.75);}
  20%{ -moz-transform: scaleX(0.75) scaleY(1.25);}
  30%{ -moz-transform: scaleX(1.1) scaleY(0.9);}
  40%{ -moz-transform: scaleX(0.9) scaleY(1.1);}
  50%{ -moz-transform: scale(1);}
}

@-webkit-keyframes swing{
  10%{ -webkit-transform: rotate(-20deg);}
  20%{ -webkit-transform: rotate(12deg);}
  28%{ -webkit-transform: rotate(-6deg);}
  34%{ -webkit-transform: rotate(2deg);}
  38%{ -webkit-transform: rotate(0deg);}
}
@-moz-keyframes swing{
  10%{ -moz-transform: rotate(-20deg);}
  20%{ -moz-transform: rotate(12deg);}
  28%{ -moz-transform: rotate(-6deg);}
  34%{ -moz-transform: rotate(2deg);}
  38%{ -moz-transform: rotate(0deg);}
}

@-webkit-keyframes rollY{
  0%{ -webkit-transform: rotateY(0deg);}
  60%{ -webkit-transform: rotateY(-360deg);}
  100%{ -webkit-transform: rotateY(-360deg);}
}
@-moz-keyframes rollY{
  0%{ -moz-transform: rotateY(0deg);}
  60%{ -moz-transform: rotateY(-360deg);}
  100%{ -moz-transform: rotateY(-360deg);}
}

@-webkit-keyframes tada{
  5%{ -webkit-transform: scale(0.9) rotate(-3deg);}
  10%, 20%, 30%, 40%{ -webkit-transform: scale(1.1) rotate(3deg);}
  15%, 25%, 35%, 45%{ -webkit-transform: scale(1.1) rotate(-3deg);}
  50%{ -webkit-transform: scale(1) rotate(0deg);}
}
@-moz-keyframes tada{
  5%{ -moz-transform: scale(0.9) rotate(-3deg);}
  10%, 20%, 30%, 40%{ -moz-transform: scale(1.1) rotate(3deg);}
  15%, 25%, 35%, 45%{ -moz-transform: scale(1.1) rotate(-3deg);}
  50%{ -moz-transform: scale(1) rotate(0deg);}
}

@-webkit-keyframes bounce{
  5%{ -webkit-transform: translate3d(0, -15px, 0);}
  10%, 20%{ -webkit-transform: translate3d(0, 0, 0);}
  15%{ -webkit-transform: translate3d(0, -10px, 0);}
}
@-moz-keyframes bounce{
  5%{ -moz-transform: translate3d(0, -15px, 0);}
  10%, 20%{ -moz-transform: translate3d(0, 0, 0);}
  15%{ -moz-transform: translate3d(0, -10px, 0);}
}