@charset "utf-8";



body,



div,



dl,



dt,



dd,



ul,



ol,



li,



h1,



h2,



h3,



h4,



h5,



h6,



pre,



form,



fieldset,



input,



textarea,



p,



blockquote,



th,



td,



button {



    padding: 0;



    margin: 0;



}







fieldset,



img {



    border: 0;



}







input,



label,



select,



option,



textarea,



button,



fieldset,



legend {



    font-size: 15px;



    line-height: 24px;



}







table {



    border-collapse: collapse;



    border-spacing: 0;



    font-size: 15px;



    line-height: 24px;



}







ul {



    list-style: none;



}







ol,



li {



    list-style: none;



    margin: 0;



    padding: 0;



}







body {



    color: #4b4c4d;



    font-size: 15px;



    line-height: 24px;



    margin: 0 auto;



    width: 100%;



}







h1,



h2,



h3,



h4,



h5,



h6 {



    font-size: 100%;



}







img {



    border: 0;



}







.clear {



    clear: both;



}







.left {



    float: left;



}







.right {



    float: right;



}







.listimg {



    cursor: pointer;



    padding-bottom: 10px;



}







button,



input,



select,



textarea {



    font-family: inherit;



    font-size: 100%;



    margin: 0;



}







button,



input {



    line-height: normal;



}







button,



select {



    text-transform: none;



}







button,



html input[type="button"],



input[type="reset"],



input[type="submit"] {



    -webkit-appearance: button;



    cursor: pointer;



}







button[disabled],



html input[disabled] {



    cursor: default;



}







input[type="checkbox"],



input[type="radio"] {



    box-sizing: border-box;



    padding: 0;



}







input[type="search"] {



    -webkit-appearance: textfield;



    -moz-box-sizing: content-box;



    -webkit-box-sizing: content-box;



    box-sizing: content-box;



}







input[type="search"]::-webkit-search-cancel-button,



input[type="search"]::-webkit-search-decoration {



    -webkit-appearance: none;



}







button::-moz-focus-inner,



input::-moz-focus-inner {



    border: 0;



    padding: 0;



}







textarea {



    overflow: auto;



    vertical-align: top;



}







table {



    border-collapse: collapse;



    border-spacing: 0;



}











/*字体*/







* {



    font-family: "Arial";



    margin: 0;



    padding: 0;



}







.font2 {



    font-family: "Arial";



}







.font3 {



    font-family: "宋体";



}







.font8 {



    font-size: 8px;



}







.font12 {



    font-size: 15px;



}







.font14 {



    font-size: 14px;



}











/*链接字体颜色*/







.page {



    display: inline-block;



    padding: 2px 9px 20px 9px;



    margin: 0 3px;



    line-height: 30px;



    /*background: #ddd;*/



    color: #fff;



}







.page a {



    float: left;



    /*border:1px solid #ccc;*/



    padding: 2px 9px;



    margin: 0 3px;



    line-height: 30px;



    background: #3E3A39;



    color: #fff;



    display: inline-block;



    height: 30px;



}







.page .thisclass {



    background: #192e6d;



    color: #fff;



}







@media screen and (max-width: 640px) {



    .page {



        display: inline-block;



        padding: 2px 9px;



        margin: 0 3px;



        line-height: 30px;



        background: #fff;



        color: #fff;



    }



    .page a {



        float: left;



        /*border:1px solid #ddd;*/



        padding: 1px 5px;



        margin: 0 1px;



        line-height: 30px;



        background: #3E3A39;



        color: #fff;



        display: inline-block;



        height: 30px;



    }



    .page .thisclass {



        background: #192e6d;



        color: #fff;



    }



}







a {



    color: #4b4c4d;



    text-decoration: none;



}







a:hover {



    text-decoration: none;



    color: #192e6d



}







.width1506 {



    margin: 0 auto;



    width: 1280px;



}







.width1080 {



    margin: 0 auto;



    width: 1080px;



}







.head_nav {



    height: 35px;



    line-height: 35px;



    background: #3E3A39;



}







.head_nav .ico {



    float: right;



}







.head_nav .ico a {



    position: relative;



    margin-left: 16px;



    line-height: 1px;



    margin-top: 11px;



    display: block;



    float: left;



}







.head_nav .ico .yc {



    display: none;



}







.head_nav .ico a:hover .yc {



    display: block;



    margin-top: 0;



    position: absolute;



    left: 0;



    top: 0px;



    z-index: 99;



}







.head_nav .search {



    float: right;



    color: #b5b5b5;



    margin-right: 16px;



    width: 146px;



    height: 18px;



    line-height: 18px;



    border-radius: 4px;



    background: #4c4c4c;



    margin-top: 8px;



}







.head_nav .search input.put {



    float: left;



    background: 0;



    text-indent: 2px;



    font: size 15;



    px;



    border: 0;



    height: 18px;



    line-height: 18px;



    width: 120px;



}







.head_nav .search input.btn {



    float: left;



    width: 26px;



    border: 0;



    background: url(../images/search_btn.png) no-repeat center;



    cursor: pointer;



    height: 18px;



    line-height: 18px;



}







.header {



    width: 100%;



    height: 41px;



    background: #fff;



    box-shadow: 0px 3px 12px #ccc;



    margin: 0 auto 0 auto;



    z-index: 99999;



    position: fixed;



    transition-property: background-color, padding-top, top;



    transition-duration: 100ms, 100ms, 300ms;



    transition-timing-function: linear, linear, ease-in-out;



    -webkit-transition-delay: 0ms;



    -moz-transition-delay: 0ms;



    transition-delay: 0ms;



    -webkit-backface-visibility: hidden;



    backface-visibility: hidden;



    padding-bottom: 13px;



    margin: 0px;



    /* background-image: url(../images/orange_bar_top.jpg); */



    background-position: bottom;



    background-repeat: repeat-x;



}







.logo_bar {



    margin: 0 auto;



    position: relative;



}







.logo_bar .logo {



    float: left;



}







.logo_bar .logo a {



    width: 162px;



    height: 162px;



    display: block;



    background: url(../images/logo.png) no-repeat #fff;



    margin-top: -35px;

    border-radius:0 0 50% 50%;



}







.logo_bar .menu {



    float: right;



    margin-right: -21px;



}







.logo_bar .menu ul li {



    float: left;



    line-height: 54px;



    height: 54px;



}







.logo_bar .menu ul li a {



    padding: 0 11px;



    display: block;



    float: left;



}







.logo_bar .menu ul li span {



    float: left;



}







.logo_bar .menu ul li:hover a {



    color: #192e6d



}







.logo_bar .menu ul li .hover_menu {



    position: absolute;



    /*8left: 300px;*/



    top: 54px;



    width: 300px;



    background: #fff url(../images/menu_bg.jpg) repeat-x;



    display: none;



}







.logo_bar .menu ul li:hover .hover_menu {



    display: block;



}







.logo_bar .menu ul li:hover .hover_menu ul li a {



    display: block;



    width: 290px;



    padding: 0 0 0 35px;



    float: none;



    color: #383838;



}







.logo_bar .menu ul li:hover .hover_menu ul li a:hover {



    color: #192e6d;



}







.logo_bar .menu ul li:hover .hover_menu .tab {



    position: relative;



}







.logo_bar .menu ul li:hover .hover_menu .tab_menu {



    float: left;



    width: 300px;



    background: #efefef url(../images/menu_bg.png) repeat-x;



}







.logo_bar .menu ul li:hover .hover_menu .tab_menu li {



    float: none;



    width: 325px;



    height: 38px;



    line-height: 38px;



    border-bottom: 1px solid #fff;



    width: 100%;



    float: left;



}







.logo_bar .menu ul li:hover .hover_menu .tab_menu li.hover {



    background: #dcdddd;



    border-bottom: 1px solid #fff;



    width: 100%;



    float: left;



}







.logo_bar .menu ul li:hover .hover_menu .tab_menu li.selected {



    background: #dcdddd;



    border-bottom: 1px solid #fff;



}







.logo_bar .menu ul li:hover .hover_menu .tab_menu li.border0.hover {



    background: #dcdddd;



    border-bottom: 1px solid #dcdddd;



}







.logo_bar .menu ul li:hover .hover_menu .tab_menu li.border0 {



    border-bottom: 1px solid #efefef;



}







.logo_bar .menu ul li:hover .hover_menu .tab_box {



    padding: 10px 36px 0 36px;



    width: 400px;



    overflow: hidden;



    float: right;



}







.logo_bar .menu ul li:hover .hover_menu .hide {



    display: none;



}







.logo_bar .menu ul li:hover .hover_menu .tab_box img {



    float: right;



}







.logo_bar .menu ul li:hover .hover_menu .tab_box a {



    padding: 0;



    height: 27px;



    line-height: 27px;



    border-bottom: 1px solid #f1f1f1;



    color: #383838;



    width: 100%;



    float: left;



    max-width: 192px;



}







.logo_bar .menu ul li:hover .hover_menu .tab_box a:hover {



    color: #192e6d;



}







.logo_bar .menu ul li:hover .hover_menu .tab_box .list {



    float: left;



    width: 387px;



}







.footer {}







.footer .foot_nav {



    height: 41px;



    line-height: 41px;



    background: #4c4c4c;



    color: #DEDEDE;



    /*padding: 13px 0px 0px;



     background-image: url(../images/orange_bar_top.jpg); */



    background-position: left top;



    background-repeat: repeat-x;



}







.footer .foot_nav p {



    line-height: 41px;



    font-size: 14px;



}







.footer .foot_nav .ico a {



    position: relative;



    margin-left: 16px;



    line-height: 1px;



    margin-top: 15px;



    display: block;



    float: left;



}







.footer .foot_nav .ico .yc {



    display: none;



}







.footer .foot_nav .ico a:hover .yc {



    display: block;



    margin-top: 0;



    position: absolute;



    left: 0;



    top: 0px;



    z-index: 99;



}







.footer .foot_menu {



    padding: 30px 0;



    clear: both;



    overflow: hidden;



}







.footer .foot_menu .foot_logo {



    float: left;



    width: 160px;



}







.footer .foot_menu ul {



    float: left;



    width: 1120px;



}







.footer .foot_menu ul li {



    float: left;



    padding-left: 30px;



    width: 250px;
    color: #4b4c4d;



}







.footer .foot_menu ul li h5 a {



    width: 100%;



    height: 42px;



    line-height: 42px;



    border-bottom: 1px solid #D3D3D3;



    margin-bottom: 10px;



    font-size: 16px;



    font-weight: normal;



    font-weight: 600;



}







.footer .foot_menu ul li a {



    display: block;



    float: left;



    width: 100%;



    line-height: 23px;
    font-size: 14px;



}







.footer .foot_menu ul li.proli h5 a {



    width: 100%;



}







.footer .foot_menu ul li.proli a {



    display: block;



    float: left;



    width: 100%;



    line-height: 23px;



}







.footer .copyright {



    height: 41px;



    line-height: 41px;



    border-top: 2px solid #ececec;



    text-align: center;



}







.pc_foot {



    display: block;



}







.sj_foot {



    display: none;



}







header {



    display: block;



}







.sj_header {



    display: none;



}







@media (max-width: 768px) {



    body {



        font-size: 13px;



    }



    header {



        display: none;



    }



    .sj_header {



        display: block;



        padding: 0 3%;



        margin: 0 auto;



        width: 94%;



        height: 4.5em;



        background: #4b4c4d;



        position: relative;



    }



    .sj_header .sjlogo {



        position: absolute;



        right: 3%;



        top: 0px;



        z-index: 99999;



        display: none;



    }



    .sj_header .sjlogo img {



        width: 100%;



        max-width: 65px;



    }



    .sj_header .sj_search {



        position: absolute;



        left: 0;



        top: 13px;



        width: 100%;



        z-index: 99998;



    }



    .sj_header .sj_search img {



        width: 100%;



        max-width: 16px;



        margin-left: 50px;



    }



    .sj_header .sj_search form {



        background: #fff;



        height: 4em;



        width: 94%;



        padding: 0 3%;



        box-shadow: 0 0 3px #ccc;



    }



    .sj_header .sj_search form .btn {



        width: 26px;



        float: left;



    }



    .sj_header .sj_search form .put {



        float: left;



        width: calc(100% - 26px)



    }



    .sj_header .sj_search form input.btn {



        border: 0;



        height: 4em;



        line-height: 4em;



        width: 100%;



        background: url(../images/sjsearch2.png) no-repeat left center;



        background-size: 14px;



    }



    .sj_header .sj_search form input.put {



        border: 0;



        height: 4em;



        line-height: 4em;



        width: 100%;



    }



    .sj_header .sj_search2 {



        position: absolute;



        width: 100%;



        left: 0%;



        top: 60px;



        ;



        z-index: 999999;



    }



    #box {



        position: absolute;



        left: 0;



        top: 0px;



        width: 100%;



        ;



    }



    .sj_header .sj_search2 .sousuo {



        width: 25px;



        float: right;



        padding-right: 3%;



        height: 50px;



        line-height: 50px;



        background: url(../images/sjsearch.png) no-repeat center;



        background-size: 16px;



        margin-top: -60px;



    }



    .sj_header .sj_search2 .sousuo a {



        display: block;



    }



    .sj_header .sj_search2 form {



        background: #fff;



        height: 4em;



        width: 100%;



        padding: 0;



        box-shadow: 0 0 3px #ccc;



    }



    .sj_header .sj_search2 form .btn {



        width: 26px;



        float: left;



        margin-left: 3%;



        display: inline;



    }



    .sj_header .sj_search2 form .put {



        float: left;



        width: calc(97% - 26px)



    }



    .sj_header .sj_search2 form input.btn {



        border: 0;



        height: 4em;



        line-height: 4em;



        width: 100%;



        background: url(../images/sjsearch2.png) no-repeat left center;



        background-size: 14px;



    }



    .sj_header .sj_search2 form input.put {



        border: 0;



        height: 4em;



        line-height: 4em;



        width: 100%;



    }



    a.meanmenu-reveal {



        display: none



    }



    .mean-container .mean-bar {



        float: left;



        width: 100%;



        position: relative;



        min-height: 50px;



        z-index: 999999



    }



    .mean-container a.meanmenu-reveal {



        width: 22px;



        height: 22px;



        padding: 16px 11px 0px 3%;



        position: absolute;



        top: 0;



        left: 0;



        cursor: pointer;



        color: #fff;



        text-decoration: none;



        font-size: 16px;



        text-indent: -9999em;



        line-height: 22px;



        font-size: 1px;



        display: block;



        font-weight: 700;



    }



    .mean-container a.meanmenu-reveal span {



        display: block;



        background: #fff;



        height: 3px;



        margin-top: 3px



    }



    .mean-container .mean-nav {



        float: left;



        width: 100%;



        background: #fff;



        margin-top: 60px



    }



    .mean-container .mean-nav ul {



        padding: 0;



        margin: 0;



        width: 100%;



        list-style-type: none



    }



    .mean-container .mean-nav ul li {



        position: relative;



        float: left;



        width: 100%



    }



    .mean-container .mean-nav ul li a {



        display: block;



        float: left;



        width: 94%;



        padding: 0.75em 3%;



        margin: 0;



        text-align: left;



        color: #969696;



        border-bottom: 1px solid #f3f3f3;



        text-decoration: none;



        text-transform: uppercase



    }



    .mean-container .mean-nav ul li li a {



        background: #F1F1F1;



        width: 88%;



        padding: 0.75em 6%;



        border-top: 1px solid #DEDEDD;



        text-shadow: none!important;



        visibility: visible;



        border-bottom: 0;



    }



    .mean-container .mean-nav ul li.mean-last a {



        border-bottom: 0;



        margin-bottom: 0



    }



    .mean-container .mean-nav ul li a:hover {



        background: #dddddd;



    }



    .mean-container .mean-nav ul li a.mean-expand,



    .mean-container .mean-nav ul li a.mean-clicked {



        width: 94%;



        height: 100%;



        text-align: center;



        position: absolute;



        right: 0;



        top: 0;



        z-index: 2;



        background: url(../images/sjx.png) no-repeat right 3% center;



        background-size: 10px;



        padding: 0 3%;



    }



    .mean-container .mean-nav ul li a.mean-expand:hover {



        background: #DEDEDD url(../images/sjx2.png) no-repeat right 3% top 16px;



        background-size: 16px;



        height: 44px;



    }



    .mean-container .mean-push {



        float: left;



        width: 100%;



        padding: 0;



        margin: 0;



        clear: both



    }



    .mean-nav .wrapper {



        width: 100%;



        padding: 0;



        margin: 0



    }



    .mean-container .mean-bar,



    .mean-container .mean-bar * {



        -webkit-box-sizing: content-box;



        -moz-box-sizing: content-box;



        box-sizing: content-box



    }



    .mean-remove {



        display: none!important



    }



    .sj_logo2 {



        position: absolute;



        right: 0%;



        top: 0;



        height: 50px;



        background: #4b4c4d;



        width: 90%;



        text-align: center;



    }



    .sj_logo2 img {



        width: 100%;



        max-width: 120px;



        margin-top: 7px;



        margin-left: -30px;



    }



    .sj_logo3 {



        position: absolute;



        left: 50%;



        top: 0;



        z-index: 9999999;



        height: 50px;



        background: #4b4c4d;



        width: 120px;



        text-align: center;



    }



    .sj_logo3 img {



        width: 100%;



        max-width: 160px;



        margin-top: 9px;



        margin-left: -75%;



    }



    .pc_foot {



        display: none;



    }



    .sj_foot {



        display: block;



    }



    .sj_foot .foot {



        padding: 0 3%;



        margin: 0 auto;



        width: 94%;



    }



    .sj_foot .foot .foot_nav {



        background: #f4f4f4;



        margin: 1em 0;



    }



    .sj_foot .foot .foot_nav a {



        display: block;



        font-size: 1.1em;



        line-height: 30px;



    }



    .sj_foot .foot .foot_nav ul {



        padding: 10px 3%;



        margin: 0 auto;



        width: 94%;



    }



    .sj_foot .foot .foot_nav ul .libot {



        border-bottom: 1px solid #dadada;



    }



    .sj_foot .foot .foot_nav ul li .nav_menu {



        padding: 5px 3%;



        width: 94%;



        margin: 0 auto;



        border-top: 1px solid #dadada;



    }



    .sj_foot .foot .foot_nav ul li .nav_menu a {



        font-size: 1.1em;



        float: left;



        line-height: 30px;



    }



    .sj_foot .foot .foot_nav ul li .nav_menu span {



        display: block;



        float: left;



        width: 3em;



        text-align: center;



        line-height: 30px;



    }



    .sj_foot .foot .company {



        border-top: 2px solid #e6e6e6;



        line-height: 36px;



        font-size: 14px;



    }



}







.cd-top {



    display: none;



}







@media (max-width: 768px) {



    .cd-top {



        display: block;



        height: 32px;



        width: 32px;



        z-index: 999999;



        position: fixed;



        top: 50%;



        right: 3%;



        overflow: hidden;



        text-indent: 100%;



        background: url(../images/top.png) no-repeat center 50%;



        background-size: 32px;



        opacity: 0;



        -webkit-transition: all 0.3s;



        -moz-transition: all 0.3s;



        transition: all 0.3s;



    }



    .cd-top.cd-is-visible {



        opacity: 1;



    }



    .cd-top.cd-fade-out {



        opacity: 1;



    }



    .no-touch .cd-top:hover {



        opacity: 1;



    }



}







.page {



    text-align: center;



}







.page a {



    margin: 0 6px;



    font-size: 15px;



    color: #c1c1c1;



    height: 24px;



    line-height: 24px;



}







.page a:hover,



.page a.dq {



    color: #7a7a7a;



    border-bottom: 1px solid #7a7a7a;



}







[data-show=on-scroll0] {



    opacity: 0;



    -webkit-transform: translate(0, -90px);



    -ms-transform: translate(0, -90px);



    transform: translate(0, -90px);



    -webkit-transition: opacity .6s .1s, -webkit-transform .6s ease;



    transition: opacity .6s .1s, transform .6s ease;



}







.in-view {



    opacity: 1;



    -webkit-transform: translate(0, 0);



    -ms-transform: translate(0, 0);



    transform: translate(0, 0);



}







[data-show=on-scroll2] {



    opacity: 0;



    -webkit-transform: translate(-90px, 0);



    -ms-transform: translate(-90px, 0);



    transform: translate(-90px, 0);



    -webkit-transition: opacity .6s .1s, -webkit-transform .6s ease;



    transition: opacity .6s .1s, transform .6s ease;



}







.in-view {



    opacity: 1;



    -webkit-transform: translate(0, 0);



    -ms-transform: translate(0, 0);



    transform: translate(0, 0);



}







[data-show=on-scroll3] {



    opacity: 0;



    -webkit-transform: translate(90px, 0);



    -ms-transform: translate(90px, 0);



    transform: translate(90px, 0);



    -webkit-transition: opacity .8s .3s, -webkit-transform .8s ease;



    transition: opacity .8s .3s, transform .8s ease;



}







.in-view {



    opacity: 1;



    -webkit-transform: translate(0, 0);



    -ms-transform: translate(0, 0);



    transform: translate(0, 0);



}







[data-show=on-scroll] {



    opacity: 0;



    -webkit-transform: translate(0, 90px);



    -ms-transform: translate(0, 90px);



    transform: translate(0, 90px);



    -webkit-transition: opacity .6s .1s, -webkit-transform .6s ease;



    transition: opacity .6s .1s, transform .6s ease;



}







.in-view {



    opacity: 1;



    -webkit-transform: translate(0, 0);



    -ms-transform: translate(0, 0);



    transform: translate(0, 0);



}











/* data-show="on-scroll"*/







.xiangshang1 {



    position: relative;



    animation: myfirst 1s;



    -moz-animation: myfirst 1s;



    /* Firefox */



    -webkit-animation: myfirst 1s;



    /* Safari and Chrome */



    -o-animation: myfirst 1s;



    /* Opera */



    -ms-animation: myfirst 1s;



    -webkit-animation-duration: 3s;



    animation-duration: 3s;



    -webkit-animation-fill-mode: both;



    animation-fill-mode: both



}







@keyframes xiangshang1 {



    0% {



        left: 90px;



        top: 90px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(0, -0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(0, -0, 0)



    }



    100% {



        left: 90px;



        top: 90px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







@-webkit-keyframes xiangshang1 {



    0% {



        left: 90px;



        top: 90px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(-0, 0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(-0, 0, 0)



    }



    100% {



        left: 90px;



        top: 90px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







@-moz-keyframes xiangshang1 {



    0% {



        left: 90px;



        top: 90px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(-0, 0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(-0, 0, 0)



    }



    100% {



        left: 90px;



        top: 90px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







@-ms-keyframes xiangshang1 {



    0% {



        left: 90px;



        top: 90px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(-0, 0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(-0, 0, 0)



    }



    100% {



        left: 90px;



        top: 90px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







@-o-keyframes xiangshang1 {



    0% {



        left: 90px;



        top: 90px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(-0, 0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(-0, 0, 0)



    }



    100% {



        left: 90px;



        top: 90px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







.xiangshang1 {



    -webkit-animation-name: xiangshang1;



    animation-name: xiangshang1;



    position: absolute;



}







.xiangshang11 {



    position: relative;



    animation: myfirst 1s;



    -moz-animation: myfirst 1s;



    /* Firefox */



    -webkit-animation: myfirst 1s;



    /* Safari and Chrome */



    -o-animation: myfirst 1s;



    /* Opera */



    -webkit-animation-duration: 3s;



    animation-duration: 3s;



    -webkit-animation-fill-mode: both;



    animation-fill-mode: both



}







@keyframes xiangshang11 {



    0% {



        left: 90px;



        top: 390px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(0, -0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(0, -0, 0)



    }



    100% {



        left: 90px;



        top: 390px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







@-webkit-keyframes xiangshang11 {



    0% {



        left: 90px;



        top: 390px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(-0, 0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(-0, 0, 0)



    }



    100% {



        left: 90px;



        top: 390px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







@-moz-keyframes xiangshang11 {



    0% {



        left: 90px;



        top: 390px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(-0, 0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(-0, 0, 0)



    }



    100% {



        left: 90px;



        top: 390px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







@-ms-keyframes xiangshang11 {



    0% {



        left: 90px;



        top: 390px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(-0, 0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(-0, 0, 0)



    }



    100% {



        left: 90px;



        top: 390px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







@-o-keyframes xiangshang11 {



    0% {



        left: 90px;



        top: 390px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(-0, 0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(-0, 0, 0)



    }



    100% {



        left: 90px;



        top: 390px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







.xiangshang11 {



    -webkit-animation-name: xiangshang11;



    animation-name: xiangshang11;



    position: absolute;



}







.xiangshang2 {



    position: relative;



    animation: myfirst 1s;



    -moz-animation: myfirst 1s;



    /* Firefox */



    -webkit-animation: myfirst 1s;



    /* Safari and Chrome */



    -o-animation: myfirst 1s;



    /* Opera */



    -webkit-animation-duration: 3s;



    animation-duration: 3s;



    -webkit-animation-fill-mode: both;



    animation-fill-mode: both



}







@keyframes xiangshang2 {



    0% {



        left: 0px;



        top: 380px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(-0, -0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(-0, -0, 0)



    }



    100% {



        left: 0px;



        top: 380px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







@-webkit-keyframes xiangshang2 {



    0% {



        left: -0;



        top: 380px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(-0, -0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(-0, -0, 0)



    }



    100% {



        left: 0px;



        top: 380px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







@-moz-keyframes xiangshang2 {



    0% {



        left: -0;



        top: 380px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(-0, -0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(-0, -0, 0)



    }



    100% {



        left: 0px;



        top: 380px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







@-ms-keyframes xiangshang2 {



    0% {



        left: -0;



        top: 380px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(-0, -0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(-0, -0, 0)



    }



    100% {



        left: 0px;



        top: 380px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







@-o-keyframes xiangshang2 {



    0% {



        left: -0;



        top: 380px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(-0, -0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(-0, -0, 0)



    }



    100% {



        left: 0px;



        top: 380px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







.xiangshang2 {



    -webkit-animation-name: xiangshang2;



    animation-name: xiangshang2;



    position: absolute;



}







.xiangshang3 {



    position: relative;



    animation: myfirst 1s;



    -moz-animation: myfirst 1s;



    /* Firefox */



    -webkit-animation: myfirst 1s;



    /* Safari and Chrome */



    -o-animation: myfirst 1s;



    /* Opera */



    -webkit-animation-duration: 3s;



    animation-duration: 3s;



    -webkit-animation-fill-mode: both;



    animation-fill-mode: both



}







@keyframes xiangshang3 {



    0% {



        left: 292px;



        top: 378px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(0, -0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(0, -0, 0)



    }



    100% {



        left: 292px;



        top: 378px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







@-webkit-keyframes xiangshang3 {



    0% {



        left: 292px;



        top: 378px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(0, -0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(0, -0, 0)



    }



    100% {



        left: 292px;



        top: 378px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







@-moz-keyframes xiangshang3 {



    0% {



        left: 292px;



        top: 378px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(0, -0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(0, -0, 0)



    }



    100% {



        left: 292px;



        top: 378px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







@-ms-keyframes xiangshang3 {



    0% {



        left: 292px;



        top: 378px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(0, -0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(0, -0, 0)



    }



    100% {



        left: 292px;



        top: 378px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







@-o-keyframes xiangshang3 {



    0% {



        left: 292px;



        top: 378px;



        opacity: 0;



        z-index: 9999;



        -webkit-transform: translate3d(0, -0, 0);



        -moz-transform: translate3d(0, -0, 0);



        -ms-transform: translate3d(0, -0, 0);



        -o-transform: translate3d(0, -0, 0);



        transform: translate3d(0, -0, 0)



    }



    100% {



        left: 292px;



        top: 378px;



        opacity: 1;



        z-index: 9999;



        -webkit-transform: none;



        -moz-transform: none;



        -ms-transform: none;



        -o-transform: none;



        transform: none



    }



}







.xiangshang3 {



    -webkit-animation-name: xiangshang3;



    animation-name: xiangshang3;



    position: absolute;



}