* {
    margin: 0;
    padding: 0;
}
body {
    background-color: #ddd;
}
li, ol, ul {
    margin: 0;
    list-style-type: none;
}
:after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.clearfix:after, .clearfix:before {
    display: table;
    content: " ";
    clear:both;
}
/**
头部内容
**/
.fix{
    position:absolute;
    top:0px;
    width: 100%;
    z-index: 100;
    /* background: #00000061; */
}
.header {
    position: relative;
    width: calc(100% - 5%);
    z-index: 100;
    margin: 0 auto;
    max-width: 100%;
    /* border-bottom: 2px solid #fff; */
}
.header .logo{
        width: 148px;
        position: relative;
        line-height: 88px;
        transition: all 0.36s;
        float: left;
}
.logo a {
    width: 100%;
    /* position: relative; */
    display: inline-block;
}
.logo a img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.header .content{
    /* padding: 26px 0 0px; */
    transition: all 0.36s;
    float: right;
}
.header .he_nv_ul {
    
    display: flex;
    justify-content: flex-end;
}
.he_nv_li:first-child {
    margin-left: 0;
}
.he_nv_a {
    font-size: 16px;
    /* line-height: 52px; */
    color: #fff;
    transition: all 0.36s;
}
.he_hd_bx {
    width: 100%;
    position: relative;
}
.clearfix {
    zoom: 1;
}
.he_nv_li {
    width: 148px;
    /* line-height: 128px; */
    margin-left: 54px;
    position: relative;
}
.last{
    margin-left: 54px;

}
.last img{
    margin-top: 10px;
    height:64px;
    width: 64px;
}
.he_nv_li a img {

    width: 100%;
    height: 100%;
}
@media screen and (min-width: 1200px){
    .he_nv_a:hover {
        color: #00FF9A;
    }
    a:hover {
        text-decoration: none;
    }
}

h1 {
    text-align: center;
    color: aliceblue;
    font-size: 20px;
    line-height: 50px;
}



.wrapper {
    /* background: #252854; */
    width: 100%;
    height: 100vh;
    border-radius: 5px;
    position: relative;
}
.text {
    z-index: 1;
    flex: 0 0 100%;
    font-size: 14rem;
    font-weight: 900;
    color: #00000000;
    text-align: center;
    font-family: 'Lato', sans-serif;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: inherit;
    background: url(./img/move.gif);
    background-size: 100%;
    background-repeat: no-repeat;
    /* background-size: cover; */
    background-position: center;
    -moz-animation: cssAnimation 0s ease-in 9s forwards;
    -webkit-animation: cssAnimation 0s ease-in 9s forwards;
    -o-animation: cssAnimation 0s ease-in 9s forwards;
    animation: cssAnimation 0s ease-in 9s forwards;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}



@keyframes cssAnimation {
    to {
        width: 0;
        height: 0;
        overflow: hidden;
    }
}

@-webkit-keyframes cssAnimation {
    to {
        width: 0;
        height: 0;
        visibility: hidden;
    }
}
.loading-mask {
    position: fixed;
  
    background-color: #000;
    z-index: 999;
    height: 100%!important;
    width: 100%;
    -webkit-transition: .2s all ease;
    -o-transition: .2s all ease;
    transition: .2s all ease;
    -webkit-transition-delay: .5s;
    -o-transition-delay: .5s;
    transition-delay: .5s;
}
/* 加载动画 */
.arlo_tm_preloader {
    position: fixed;
    /* background-color: #fff; */
    z-index: 99;
    height: 100%;
    width: 100%;
    /* -webkit-transition: .2s all ease;
    -o-transition: .2s all ease;
    transition: .2s all ease;
    -webkit-transition-delay: .5s;
    -o-transition-delay: .5s;
    transition-delay: .5s; */
}

.begin{
    width: 574px;
    height: 150px;
    position: absolute;
    left: 50%;
    top: 90%;
    transform: translate(-50%, -50%);
    z-index: 3;
    background: url(img/click.svg);
    background-repeat: no-repeat;
    background-size:100% 90%;
    cursor: pointer;
}


.end{
    display: none;
    width: 300px;
    height: 83px;
    position: absolute;
    cursor: pointer;
    left: 50%;
    top: 10%;
    background-color: rgba(221, 221, 221, 0.642);
    transform: translate(-50%, -50%);
    z-index: 4;
    background: url(img/contract.svg);
    background-repeat: no-repeat;
    background-size:100% 90%;
}
/* 英文版 */
.en .begin{
    background: url(img/en/click.svg);
    background-repeat: no-repeat;
    background-size:100% 90%;
 }
.en .end{
    background: url(img/en/contract.svg);
    background-repeat: no-repeat;
    background-size:100% 90%;
 }


@-webkit-keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1.0);
        opacity: 0
    }
}

@keyframes sk-scaleout {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0)
    }
    100% {
        -webkit-transform: scale(1.0);
        transform: scale(1.0);
        opacity: 0
    }
}

/* 二级动画 */
.secord {
    /* display: none; */
    /* opacity: 0; */
    /* flex: 0 0 100%; */
    text-align: center;
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    display: flex;
}
.secord .item{
    width: 50%;
    height: 100vh;
    position: relative;
    z-index: 3;
}

.secord .item a.sz{
    width: 50%;
    margin-left: 15%;
    display: flex;
    height: 100%;
}
.secord .item a.sh{
    width: 50%;
    position: absolute;
    right: 15%;
    height: 100%;
}

.secord .item a:hover{
    cursor: pointer;
}
/**
视频
**/
.first_video{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;

}
.ys_ban_video {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
  
}



/* 结束效果 */
.end_video{
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;

}
video {
    /* background: #000; */
    outline: 0;
    max-width: 100%;
    vertical-align: middle;
}


.ys_phnav_menu {
    display: none;
    position: fixed;
    left: 0;
    top: 64px;
    width: 100%;
    height: calc(100% - 64px);
    padding: 20px;
    /* background: #ddd; */
    color: #fff;
}
.ys_phnav_menu .he_nv_li:first-child{
    margin-left: -10px;
}
.ys_phnav_menu  .he_nv_li{
    margin-left: 0px;
}


.bb::before {
    animation-delay: -4s;
}
.bb::before, .bb::after {
    content: '';
    z-index: -1;
    margin: -5%;
    box-shadow: inset 0 0 0 2px;
    animation: clipMe 8s linear infinite;
}
 .bb::before, .bb::after {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
@keyframes clipMe {
    0%, 100% {
      clip: rect(0px, 220.0px, 2px, 0px);
    }
    25% {
      clip: rect(0px, 2px, 220.0px, 0px);
    }
    50% {
      clip: rect(218.0px, 220.0px, 220.0px, 0px);
    }
    75% {
      clip: rect(0px, 220.0px, 220.0px, 218.0px);
    }
  }
  video {
    object-fit: cover;
}
.top-tools{
    position: fixed;
    z-index: 999;
    height: 3.666rem;
    right: 1.333rem;
    margin-top: 3px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
.mic{
    width: 2rem;
    height: 2rem;
    background-position: 50%;
    background-size: 2.3rem 2.3rem;
    background-repeat: no-repeat;
}
.mic.mic-off-btn {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA7tJREFUaEPtmIFN3UAMhu0NygSFDcoElAkKExQmKExQmKAwQWGCwgSFCcoGZYN2A1dfZEfHvdzl7uWpCOmdFCEgufPv//dvJypvfOkbj1+2AF6bwS0DWwYWZmAroTSBZvZBRA5EhJ+7ft2p6nncZ2bvVPXvwsSPjy9mgIBE5ExEPnngeWw3qnqaADgRka8iciEij6r6vATMIgBmdiQi30UEEOl6EhEu1r2q3mUAeIZF8BeqersuiC4AZvbLgz1W1Sczi0xy/oOIEOhtTSJmBgMBIOK+EZHzdaTVC+CPA0DDhw7iC9lW1ceWLGYAYIBaCTbYs0tSvQAozp85iJbACxLa8XqghgLEfg8TXQA4wZ1mbRApA6o6nJ9JEdc6bk1KMwA/eFdVL5aAmALgIKiN9x44ddQkpR4Av12vuMbluiBKAFoznt/XBCArvJOwvRII/ztOQ4FisVgqLnUtIh/DhUJC6wbPc60AIvsPqnqYHlgBkVpsPIIsAEP/kP8CwAPE/1lj9htBhK7JOteLNQXAz6Ors2ZrYZYBM8Pnr3zDnZLFzdWEmSEn3Ct8f5IBH03oN6wzVUV2xdUC4IdTTrPan9qJ4L2pVfuEmcECIIZVkpB3fPZ6MUdNnd0CgAM5uOjPfiAzz6zFmlnsVwOAASC/lZpbkWGNHv5nZlHAxWyYmfk+R6p6X5NTKskKAwHgWVX3lkqoB8Co2Yo7UaDDdNoAoCjbUYYNDATlNQYmbXbGYnG0yeyaWdTdRiQUdNaKOPV8Jkqa1rAqIA5KE2xSxLNzUUsRz9qoWx8s0HVpVsP7whyIgqNhs+y1MRvFzqqNzDOdv6jAAheFeDvBBGPzysCWjS17c0PdLAMeHAAAUtWkmTHXI6f8FfMysVj0TZYJfuUFJnG92QIejGCuiB1AUeP5895xkR29A9As5HTqzS7tyC9AlIbGRTbqAMhoaJxgyNzan0aysWIE4Qx+c9lV/b/ZRpNCTDV+lX7raWGxwFTMRikI2B7qpmXfJgklIPh68Nl/H3TdckjpnhITPXv2AkBKZC20/eogugB4PeRjMfRToGPzasmgT6ZMsVcZE03u010DaVDeuCg26iIWAJAYU+lkgftzSJA3snjBCYslMVgs3feyJQnNNlrRcHznHF9S/F7AAAJ2oicgu5BebMk9sDd+emwNfBEDE45SAlKKBysm6OsldryYgQkg8XkdeZD5uGAiXuj5Ij3OSb0Zz+/vLuKlB276+S2ATWe0d78tA70Z2/T9WwY2ndHe/d48A/8AOa0qT4P0KvEAAAAASUVORK5CYII=);
}
.mic.mic-btn {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAA5VJREFUaEPtmI9RFUEMxpMOtAOpQKhAqECpQKhArECpQKhAqECsQKxAqEA60A7i/G6SN8t6u7d7x8NhvJ15M/De/sn35UuyWZUnPvSJ2y8rgH/twdUDqwcWMrBKKCXQzPZF5KWI7IrIC/9cqer7mGdmz1T190LiN8sXewCDRORERN6JCH/n40JVjxMARyLyQUQ+qurlUiCLAJgZhmNMbviNiPBhfFXVqwzAZ///bimQWQCc9S8igmRiXGOMiNzWJGJmeCAAxNozETmdI61uAGaGtr+5vjEApk9U9XuLHDIAeID9Yp+DXhBdAEaMP0sDdAaAHRH5JCJv5oLoBfDDMwznEYSnLUZnmWojIVUdzjezIah9XhcpzQDMjAM4aLbxbuxfAPz7NIudt0qpCYBLB/bJNneqiutnjTQGwgOzNvJFrQDIGjDH2FXV29KhSV14mwUoWercM9eQhR4TwE835lpVDyrGA5KgHCtoLCPrkLWGoH0UAGbGYeR8xlGpenpRw/gYFC9YZ1AvItNsJowBMDOuIa990qWqAro4JiVkZhhFxWU8HwuuPEZE5FBVoxIPC0dS8KgHXIK//DzqC7JbBICiBYNF+ZhZGiM7JdacXZLBMEoSMrOQ7L171BiKFg/EZtwqD8c2MbOoD8U5sc7MkGM1BpI51ZgbSKi5x11vPqdYYMws5ky63MzI99x9ah4Ij06m7P8CwKQeE832SOhGVfcKkgyZPYiEQt+1A9O7zF6egRL9c/OEEEZNks0x1SKhljRK4cKw4aohIlyL7+Vvz0AwC4jROUm6DZCTMdUCIG1AMCyK0z3vdxYy6sSmS0s3yvqF/ak+owVAyu7UVaLUYoaNNPOwWuyFk5Q8mYGa0qi7NZVR0QuJBEiVFD+uBQyqMoxXr8kZ+8VrS+qxSQ+M6BJjulu/hnqDpwneaozk+zQBcBCzu6Yp431/ihueYzSx3ywhPyBliK94RYg2sMXG4pys25vM/d0SigUP0dRnGQdSYJ7mh1FMryX0zRKqgODQ41J6LR3sz5DceeJZpdv4LgllzOVvQ/xMfbjwl7jRt0+/68M2t9H8UQwSqs3LGBndHsiApIGd/kSmwpgUCAYH2zGX33meqTYttQBbBMCDG6MAEk1/S0BjONpvfj55sBioaJqAfJUUsHhej+CMhp6CVn0/bWEg5iz2QM9h25i7AtgGqz17rh7oYWsbc1cPbIPVnj2fvAf+AIvuv0AK0OnUAAAAAElFTkSuQmCC);
}
/* PC客户端或大屏幕设备: 1028px 至更大 */
@media only screen and (min-width: 1029px) {
 
    }
    /* 竖屏 */
    @media screen and (orientation:portrait) and (max-width: 720px) {
        .first_video,.end_video,.ys_ban_video{
            object-fit:fill;
          }
        /* 手机竖屏自适应 */
        .begin{
            /* width: 100%; */
            height: 50px;
            /* z-index: 9999; */
        }
        .end{
            height: 43px;
        }
        .header .logo{
            width: 30%;
        }
        .he_nv_ul >.he_nv_li {
            display:none;
        }
        /* 加载动画 */
        .arlo_tm_preloader{
            /* background: url(img/mloading.webp); */
            background: url(img/mloading.gif); 
            background-size:100% auto;
            background-repeat: no-repeat;
            background-position: center;
        }
        /* 内容 */
        .mcontent{
            display: none;
            position: absolute;
            left: 50%;
            top: 50%;
            z-index: 1;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            /* background: url(img/mcontent.webp); */
            background: url(img/mcontent.gif); 
            background-size:100% auto;
            background-repeat: no-repeat;
            background-position: center;
        }
    /* 结束 */  
        .secord{
            /* background: url(img/mend.webp); */
            background: url(img/mend.gif); 
            background-size:100% auto;
            background-repeat: no-repeat;
            background-position: center;
        }

        .en  .arlo_tm_preloader{
            background: url(img/en/1.gif); 
            background-size:100% auto;
            background-repeat: no-repeat;
            background-position: center;
        }
        .en  .mcontent{
            background: url(img/en/2.gif); 
            background-size:100% auto;
            background-repeat: no-repeat;
            background-position: center;
        }
        .en  .secord{
            background: url(img/en/3.gif); 
            background-size:100% auto;
            background-repeat: no-repeat;
            background-position: center;
        }
    }
    /* 横屏 */
    @media screen and (orientation:landscape){

    }


    /*
修改人:刘泉森
参考地址：
loading:
http://www.cnblogs.com/lhb25/archive/2013/12/28/loading-spinners-animated-with-css3.html
*/
/*
旋转平面效果
*/
.rotating-plane {
    min-width : 60px ;
    min-height : 60px ;
    width : 60px ;
    height : 60px ;
    background-color : #fff ;

    -webkit-animation: rotateplane 1.2s infinite ease-in-out;
    -moz-animation: rotateplane 1.2s infinite ease-in-out;
    -o-animation: rotateplane 1.2s infinite ease-in-out;
    animation: rotateplane 1.2s infinite ease-in-out;
}

@-webkit-keyframes rotateplane {
    0% { -webkit-transform: perspective( 120px) }
    50% { -webkit-transform: perspective( 120px ) rotateY( 180deg) }
    100% { -webkit-transform: perspective( 120px ) rotateY( 180deg)  rotateX( 180deg) }
}
@-moz-keyframes rotateplane{
    0% { -moz-transform: perspective( 120px) }
    50% { -moz-transform: perspective( 120px ) rotateY( 180deg) }
    100% { -moz-transform: perspective( 120px ) rotateY( 180deg)  rotateX( 180deg) }
}
@-o-keyframes rotateplane{
    0% { -o-transform: perspective( 120px) }
    50% { -o-transform: perspective( 120px ) rotateY( 180deg) }
    100% { -o-transform: perspective( 120px ) rotateY( 180deg)  rotateX( 180deg) }
}
@keyframes rotateplane {
    0% {
        transform: perspective( 120px ) rotateX( 0deg) rotateY( 0deg);
    } 50% {
          transform: perspective( 120px ) rotateX( -180.1deg) rotateY( 0deg);
      } 100% {
            transform: perspective( 120px ) rotateX( -180deg) rotateY( -179.9deg);
        }
}
/*
双反弹圆效果
*/
.double-bounce {
    min-width: 60px;
    min-height: 60px;

    position: relative;
}

.double-bounce1, .double-bounce2 {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #fff;
    opacity: 0.6;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: bounce 2.0s infinite ease-in-out;
    -moz-animation: bounce 2.0s infinite ease-in-out;
    -o-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
    -webkit-animation-delay: -1.0s;
    -moz-animation-delay: -1.0s;
    -o-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
}
@-moz-keyframes bounce {
    0%, 100% { -moz-transform: scale(0.0) }
    50% { -moz-transform: scale(1.0) }
}
@-o-keyframes bounce {
    0%, 100% { -o-transform: scale(0.0) }
    50% { -o-transform: scale(1.0) }
}
@keyframes bounce {
    0%, 100% {
        transform: scale(0.0);
    } 50% {
          transform: scale(1.0);
      }
}
/*
波纹效果
*/
.wave {
    min-width : 60px ;
    min-height : 60px ;
    width : 60px ;
    height : 60px ;
}

.wave > div {
    background-color : #fff ;
    min-height : 60px;
    height : 100% ;
    width : 10%;
    margin-left: 10%;
    display : inline-block ;

    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    -moz-animation: stretchdelay 1.2s infinite ease-in-out;
    -o-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
}

.wave .rect2 {
    -webkit-animation-delay: -1.1s;
    -moz-animation-delay: -1.1s;
    -o-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.wave .rect3 {
    -webkit-animation-delay: -1.0s;
    -moz-animation-delay: -1.0s;
    -o-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.wave .rect4 {
    -webkit-animation-delay: -0.9s;
    -moz-animation-delay: -0.9s;
    -o-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.wave .rect5 {
    -webkit-animation-delay: -0.8s;
    -moz-animation-delay: -0.8s;
    -o-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
    0% , 40% , 100% { -webkit-transform: scaleY( 0.4 ) }
    20% { -webkit-transform: scaleY( 1.0 ) }
}
@-moz-keyframes stretchdelay {
    0% , 40% , 100% { -moz-transform: scaleY( 0.4 ) }
    20% { -moz-transform: scaleY( 1.0 ) }
}
@-o-keyframes stretchdelay {
    0% , 40% , 100% { -o-transform: scaleY( 0.4 ) }
    20% { -o-transform: scaleY( 1.0 ) }
}
@keyframes stretchdelay {
    0% , 40% , 100% {
        transform: scaleY( 0.4 );
    }  20% {
           transform: scaleY( 1.0 );
       }
}
/*
旋转立方体效果
*/
.wandering-cubes {
    min-width:  60px;
    min-height: 60px;
    position: relative;
}

.cube1, .cube2 {
    background-color: #fff;
    width: 50%;
    height: 50%;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: cubemove 1.8s infinite ease-in-out;
    -moz-animation: cubemove 1.8s infinite ease-in-out;
    -o-animation: cubemove 1.8s infinite ease-in-out;
    animation: cubemove 1.8s infinite ease-in-out;
}

.cube2 {
    -webkit-animation-delay: -0.9s;
    -moz-animation-delay: -0.9s;
    -o-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

@-webkit-keyframes cubemove {
    25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
    50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
    75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
    100% { -webkit-transform: rotate(-360deg) }
}
@-moz-keyframes cubemove {
    25% { -moz-transform: translateX(42px) rotate(-90deg) scale(0.5) }
    50% { -moz-transform: translateX(42px) translateY(42px) rotate(-180deg) }
    75% { -moz-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
    100% { -moz-transform: rotate(-360deg) }
}
@-o-keyframes cubemove {
    25% { -o-transform: translateX(42px) rotate(-90deg) scale(0.5) }
    50% { -o-transform: translateX(42px) translateY(42px) rotate(-180deg) }
    75% { -o-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
    100% { -o-transform: rotate(-360deg) }
}
@keyframes cubemove {
    25% {
        transform: translateX(42px) rotate(-90deg) scale(0.5);
    } 50% {
            transform: translateX(42px) translateY(42px) rotate(-180deg);
        } 75% {
              transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
          } 100% {
                transform: rotate(-360deg);
            }
}
/*
脉冲效果
*/
.pulse {
    min-width: 60px;
    min-height: 60px;
    background-color: #fff;

    border-radius: 100%;
    -webkit-animation: scaleout 1.0s infinite ease-in-out;
    -moz-animation: scaleout 1.0s infinite ease-in-out;
    -o-animation: scaleout 1.0s infinite ease-in-out;
    animation: scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes scaleout {
     0% { -webkit-transform: scale(0.0) }
     100% {
         -webkit-transform: scale(1.0);
         opacity: 0;
     }
 }
@-moz-keyframes scaleout {
    0% { -moz-transform: scale(0.0) }
    100% {
        -moz-transform: scale(1.0);
        opacity: 0;
    }
}
@-o-keyframes scaleout {
    0% { -o-transform: scale(0.0) }
    100% {
        -o-transform: scale(1.0);
        opacity: 0;
    }
}
@keyframes scaleout {
    0% {
        transform: scale(0.0);
    } 100% {
          transform: scale(1.0);
          opacity: 0;
      }
}
/*
追逐点效果
*/
.chasing-dots {
    min-width: 60px;
    min-height: 60px;
    position: relative;
    text-align: center;

    -webkit-animation: rotate 2.0s infinite linear;
    -moz-animation: rotate 2.0s infinite linear;
    -o-animation: rotate 2.0s infinite linear;
    animation: rotate 2.0s infinite linear;
}

.dot1, .dot2 {
    width: 50%;
    height: 50%;
    display: inline-block;
    position: absolute;
    top: 0;
    background-color: #fff;
    border-radius: 100%;

    -webkit-animation: bounce 2.0s infinite ease-in-out;
    -moz-animation: bounce 2.0s infinite ease-in-out;
    -o-animation: bounce 2.0s infinite ease-in-out;
    animation: bounce 2.0s infinite ease-in-out;
}

.dot2 {
    top: auto;
    bottom: 0px;
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
@-moz-keyframes rotate { 100% { -moz-transform: rotate(360deg) }}
@-o-keyframes rotate { 100% { -o-transform: rotate(360deg) }}
@keyframes rotate { 100% { transform: rotate(360deg); }}

@-webkit-keyframes bounce {
    0%, 100% { -webkit-transform: scale(0.0) }
    50% { -webkit-transform: scale(1.0) }
}
@-moz-keyframes bounce {
    0%, 100% { -moz-transform: scale(0.0) }
    50% { -moz-transform: scale(1.0) }
}
@-o-keyframes bounce {
    0%, 100% { -o-transform: scale(0.0) }
    50% { -o-transform: scale(1.0) }
}
@keyframes bounce {
    0%, 100% {
        transform: scale(0.0);
    } 50% {
          transform: scale(1.0);
      }
}
/*
三反弹球
*/
.three-bounce {
    min-width: 90px;
    min-height: 60px;
    text-align: center;

    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;

    /* Safari、Opera 以及 Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;

    -o-box-pack:center;
    -o-box-align:center;

}

.three-bounce > div {
    width: 30%;
    height: 30%;
    min-height: 30px;
    min-width: 30px;
    background-color: #fff;

    border-radius: 100%;
    display: inline-block;
    -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
    -moz-animation: bouncedelay 1.4s infinite ease-in-out;
    -o-animation: bouncedelay 1.4s infinite ease-in-out;
    animation: bouncedelay 1.4s infinite ease-in-out;
    /* 防止动画第一帧开始闪烁*/
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

.three-bounce .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
}

.three-bounce .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
}

@-webkit-keyframes bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0.0) }
    40% { -webkit-transform: scale(1.0) }
}
@-moz-keyframes bouncedelay {
    0%, 80%, 100% { -moz-transform: scale(0.0) }
    40% { -moz-transform: scale(1.0) }
}
@-o-keyframes bouncedelay {
    0%, 80%, 100% { -o-transform: scale(0.0) }
    40% { -o-transform: scale(1.0) }
}
@keyframes bouncedelay {
    0%, 80%, 100% {
        transform: scale(0.0);
    } 40% {
          transform: scale(1.0);
      }
}
/*
缓存追逐球
*/
.circle {
    min-width: 60px;
    min-height: 60px;
    position: relative;
}

.container1 > div, .container2 > div, .container3 > div {
    width: 20%;
    height: 20%;
    background-color:#fff;

    border-radius: 100%;
    position: absolute;
    -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
    -moz-animation: bouncedelay 1.2s infinite ease-in-out;
    -o-animation: bouncedelay 1.2s infinite ease-in-out;
    animation: bouncedelay 1.2s infinite ease-in-out;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}

.circle .spinner-container {
    position: absolute;
    width: 100%;
    height: 100%;
}

.container2 {
    -webkit-transform: rotateZ(45deg);
    -moz-transform: rotateZ(45deg);
    -o-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}

.container3 {
    -webkit-transform: rotateZ(90deg);
    -moz-transform: rotateZ(90deg);
    -o-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}

.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {
    -webkit-animation-delay: -1.1s;
    -moz-animation-delay: -1.1s;
    -o-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.container3 .circle1 {
    -webkit-animation-delay: -1.0s;
    -moz-animation-delay: -1.0s;
    -o-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.container1 .circle2 {
    -webkit-animation-delay: -0.9s;
    -moz-animation-delay: -0.9s;
    -o-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.container2 .circle2 {
    -webkit-animation-delay: -0.8s;
    -moz-animation-delay: -0.8s;
    -o-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

.container3 .circle2 {
    -webkit-animation-delay: -0.7s;
    -moz-animation-delay: -0.7s;
    -o-animation-delay: -0.7s;
    animation-delay: -0.7s;
}

.container1 .circle3 {
    -webkit-animation-delay: -0.6s;
    -moz-animation-delay: -0.6s;
    -o-animation-delay: -0.6s;
    animation-delay: -0.6s;
}

.container2 .circle3 {
    -webkit-animation-delay: -0.5s;
    -moz-animation-delay: -0.5s;
    -o-animation-delay: -0.5s;
    animation-delay: -0.5s;
}

.container3 .circle3 {
    -webkit-animation-delay: -0.4s;
    -moz-animation-delay: -0.4s;
    -o-animation-delay: -0.4s;
    animation-delay: -0.4s;
}

.container1 .circle4 {
    -webkit-animation-delay: -0.3s;
    -moz-animation-delay: -0.3s;
    -o-animation-delay: -0.3s;
    animation-delay: -0.3s;
}

.container2 .circle4 {
    -webkit-animation-delay: -0.2s;
    -moz-animation-delay: -0.2s;
    -o-animation-delay: -0.2s;
    animation-delay: -0.2s;
}

.container3 .circle4 {
    -webkit-animation-delay: -0.1s;
    -moz-animation-delay: -0.1s;
    -o-animation-delay: -0.1s;
    animation-delay: -0.1s;
}
/*
舞动的方块效果
*/
/*
     * Spinner positions
     * 1 2 3
     * 4 5 6
     * 7 8 9
*/
.cube-grid{
    min-width: 60px;
    min-height: 60px;
    width: 60px;
    height: 60px;
}
.cube-grid .sk-cube {
    width: 33%;
    height: 33%;
    min-width: 20px;
    min-height: 20px;
    background-color: #fff;
    float: left;
    -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
    -moz-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
    -o-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
    animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}
.cube-grid .sk-cube:nth-child(1) {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s; }
.cube-grid .sk-cube:nth-child(2) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    animation-delay: 0.3s; }
.cube-grid .sk-cube:nth-child(3) {
    -webkit-animation-delay: 0.4s;
    -moz-animation-delay: 0.4s;
    -o-animation-delay: 0.4s;
    animation-delay: 0.4s; }
.cube-grid .sk-cube:nth-child(4) {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    -o-animation-delay: 0.1s;
    animation-delay: 0.1s; }
.cube-grid .sk-cube:nth-child(5) {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s; }
.cube-grid .sk-cube:nth-child(6) {
    -webkit-animation-delay: 0.3s;
    -moz-animation-delay: 0.3s;
    -o-animation-delay: 0.3s;
    animation-delay: 0.3s; }
.cube-grid .sk-cube:nth-child(7) {
    -webkit-animation-delay: 0s;
    -moz-animation-delay: 0s;
    -o-animation-delay: 0s;
    animation-delay: 0s; }
.cube-grid .sk-cube:nth-child(8) {
    -webkit-animation-delay: 0.1s;
    -moz-animation-delay: 0.1s;
    -o-animation-delay: 0.1s;
    animation-delay: 0.1s; }
.cube-grid .sk-cube:nth-child(9) {
    -webkit-animation-delay: 0.2s;
    -moz-animation-delay: 0.2s;
    -o-animation-delay: 0.2s;
    animation-delay: 0.2s; }

@-webkit-keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
        -webkit-transform: scale3D(1, 1, 1);
    }
    35% {
        -webkit-transform: scale3D(0, 0, 1);
    }
}
@-moz-keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
        moz-transform: scale3D(1, 1, 1);
    }
    35% {
        -moz-transform: scale3D(0, 0, 1);
     }
}
@-o-keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
        -o-transform: scale3D(1, 1, 1);
    }
    35% {
        -o-transform: scale3D(0, 0, 1);
    }
}
@keyframes sk-cubeGridScaleDelay {
    0%, 70%, 100% {
        transform: scale3D(1, 1, 1);
    }
    35% {
        transform: scale3D(0, 0, 1);
    }
}
/*
运动的球效果
*/
.run-ball {
    background-color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    position: relative;
    -webkit-animation: sk-innerCircle 1s linear infinite;
    -moz-animation: sk-innerCircle 1s linear infinite;
    -o-animation: sk-innerCircle 1s linear infinite;
    animation: sk-innerCircle 1s linear infinite; }
.run-ball .sk-inner-circle {
    display: block;
    background-color: #fff;
    width: 25%;
    height: 25%;
    position: absolute;
    border-radius: 100%;
    top: 5px;
    left: 5px;
}

@-webkit-keyframes sk-innerCircle {
    0% {
        -webkit-transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
     }
}
@-moz-keyframes sk-innerCircle {
    0% {
        -moz-transform: rotate(0deg);
    }
    100% {
        -moz-transform: rotate(360deg);
    }
}
@-o-keyframes sk-innerCircle {
    0% {
        -o-transform: rotate(0deg);
    }
    100% {
        -o-transform: rotate(360deg);
    }
}
@keyframes sk-innerCircle {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/*
虚落球效果
*/
.fading-circle {
    min-width: 60px;
    min-height: 60px;
    position: relative;
}
.sk-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; }
.sk-circle:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 18%;
    height: 18%;
    background-color: #fff;
    border-radius: 100%;
    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
    -moz-animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
    -o-animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
    animation: sk-circleFadeDelay 1.2s infinite ease-in-out;
    /* Prevent first frame from flickering when animation starts */
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both; }
.sk-circle2 {
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg); }
.sk-circle3 {
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -o-transform: rotate(60deg);
    transform: rotate(60deg); }
.sk-circle4 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg); }
.sk-circle5 {
    -webkit-transform: rotate(120deg);
    -moz-transform: rotate(120deg);
    -o-transform: rotate(120deg);
    transform: rotate(120deg); }
.sk-circle6 {
    -webkit-transform: rotate(150deg);
    -moz-transform: rotate(150deg);
    -o-transform: rotate(150deg);
    transform: rotate(150deg); }
.sk-circle7 {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg); }
.sk-circle8 {
    -webkit-transform: rotate(210deg);
    -moz-transform: rotate(210deg);
    -o-transform: rotate(210deg);
    transform: rotate(210deg); }
.sk-circle9 {
    -webkit-transform: rotate(240deg);
    -moz-transform: rotate(240deg);
    -o-transform: rotate(240deg);
    transform: rotate(240deg); }
.sk-circle10 {
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg); }
.sk-circle11 {
    -webkit-transform: rotate(300deg);
    -moz-transform: rotate(300deg);
    -o-transform: rotate(300deg);
    transform: rotate(300deg); }
.sk-circle12 {
    -webkit-transform: rotate(330deg);
    -moz-transform: rotate(330deg);
    -o-transform: rotate(330deg);
    transform: rotate(330deg); }
.sk-circle2:before {
    -webkit-animation-delay: -1.1s;
    -moz-animation-delay: -1.1s;
    -o-animation-delay: -1.1s;
    animation-delay: -1.1s; }
.sk-circle3:before {
    -webkit-animation-delay: -1s;
    -moz-animation-delay: -1s;
    -o-animation-delay: -1s;
    animation-delay: -1s; }
.sk-circle4:before {
    -webkit-animation-delay: -0.9s;
    -moz-animation-delay: -0.9s;
    -o-animation-delay: -0.9s;
    animation-delay: -0.9s; }
.sk-circle5:before {
    -webkit-animation-delay: -0.8s;
    -moz-animation-delay: -0.8s;
    -o-animation-delay: -0.8s;
    animation-delay: -0.8s; }
.sk-circle6:before {
    -webkit-animation-delay: -0.7s;
    -moz-animation-delay: -0.7s;
    -o-animation-delay: -0.7s;
    animation-delay: -0.7s; }
.sk-circle7:before {
    -webkit-animation-delay: -0.6s;
    -moz-animation-delay: -0.6s;
    -o-animation-delay: -0.6s;
    animation-delay: -0.6s; }
.sk-circle8:before {
    -webkit-animation-delay: -0.5s;
    -moz-animation-delay: -0.5s;
    -o-animation-delay: -0.5s;
    animation-delay: -0.5s; }
.sk-circle9:before {
    -webkit-animation-delay: -0.4s;
    -moz-animation-delay: -0.4s;
    -o-animation-delay: -0.4s;
    animation-delay: -0.4s; }
.sk-circle10:before {
    -webkit-animation-delay: -0.3s;
    -moz-animation-delay: -0.3s;
    -o-animation-delay: -0.3s;
    animation-delay: -0.3s; }
.sk-circle11:before {
    -webkit-animation-delay: -0.2s;
    -moz-animation-delay: -0.2s;
    -o-animation-delay: -0.2s;
    animation-delay: -0.2s; }
.sk-circle12:before {
    -webkit-animation-delay: -0.1s;
    -moz-animation-delay: -0.1s;
    -o-animation-delay: -0.1s;
    animation-delay: -0.1s; }

@-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
}
@-moz-keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
}
@-o-keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
}
@keyframes sk-circleFadeDelay {
    0%, 39%, 100% {
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
}
section[class^=mop-load]{
    height: 100px;
    -webkit-transition: height 1s linear 0s;
    -moz-transition:height 1s linear 0s;
    -o-transition:height 1s linear 0s;
    transition: height 1s linear 0s;
    overflow: hidden;
}
.flip{
    height: 0px;
}
.mop-load-div{
    box-pack:center;
    box-align:center;
    /* Firefox */
    height: 100px;



    display:-moz-box;
    -moz-box-pack:center;
    -moz-box-align:center;

    /* Safari、Opera 以及 Chrome */
    display:-webkit-box;
    -webkit-box-pack:center;
    -webkit-box-align:center;

    -o-box-pack:center;
    -o-box-align:center;
}

.loading  {
    background-position:0 100%;
    -webkit-transform:rotate(0deg) translateZ(0);
    -webkit-transition-duration:0ms;

    -webkit-animation-name:loading;
    -webkit-animation-duration:2s;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-timing-function:linear;
}

@-webkit-keyframes loading {
    from { -webkit-transform:rotate(0deg) translateZ(0); }
    to { -webkit-transform:rotate(360deg) translateZ(0); }
}
.mop-load-text{
    font-weight:bold;
    margin-left: 1.2em;
    font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
}