@font-face {font-family: 'iconfont';
    src: url('../iconfont/iconfont.eot'); /* IE9*/
    src: url('../iconfont/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('../iconfont/iconfont.woff') format('woff'), /* chrome、firefox */
    url('../iconfont/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('../iconfont/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
body{
    overflow-x: hidden;
}
.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;}
.iconfonts{
    font-family:"iconfonts" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
#works .container {
    max-width: 1090px;
    margin: 20px auto;
    position:relative;
    font-family: "微软雅黑";
}
#works ul.classify{
    overflow: hidden;
    width:100%;
    margin:0 auto;
}
#works ul.classify li{
    cursor: pointer;
    float:left;
    font-size: 26px;
    color:#333;
    width:25%;
    height:60px;
    line-height:60px;
    text-align: center;
    border-bottom:1px solid rgba(38, 31, 23, 0.86);
}
#works ul.classify li.active{
    color:#90adff;
    border-bottom:3px solid #016FBA;
}
#works .container .screen{
    width:80%;
    height:400px;
    position:relative;
    top:10px;
    left:50%;
    margin-left:-40%;
    background:#fff;
    z-index:3;
    perspective:1000000000000px;
    perspective-origin:bottom center;
}
/*ui作品展示*/
#works .container .screen .ui-works{
    display: none;
    height:100%;
    width:100%;
}
/*-------------------------这儿为了布局隐藏---------------------------------*/
#works .container .screen .ui-works .ui{
    display: none;
    float:left;
    position:relative;
    top:-150px;
    width:75%;
}
#works .container .screen .ui-works ol{
    width:100%;
    height:100px;
    position:relative;
    /*background:blue;*/
    transform-style:preserve-3d;
}
#works .container .screen .ui-works ol li{
    height:100px;
    width:100%;
    position:absolute;
    left:0;top:0;
    background:#fff;
}
#works .container .screen .ui-works ol li:nth-of-type(1){
    top:-500%;
    background:url(../images/web.png) no-repeat;
    display: none;
}
#works .container .screen .ui-works ol li:nth-of-type(2){
    transform-origin:right;
    left:400%;
    transform:translateZ(-600px) rotateY(90deg) ;
    background:url(../images/app.png) no-repeat;
}
#works .container .screen .ui-works ol li:nth-of-type(3){
    left:-400%;
    transform-origin:left;
    transform: translateZ(-600px) rotateY(-90deg);
    background:url(../images/game.png) no-repeat;
}
#works .container .screen .ui-works ol li:nth-of-type(4){
    top:500%;
    transform-origin:center;
    transform:translateZ(-600px) rotateY(180deg);
    background:url(../images/tubiao.png) no-repeat;
    display: none;
}
#works .container .screen .ui-works ol li:nth-of-type(5){
    width:600px;height:600px;
    background:#000;
    top:100px;
    transform-origin:top;
    transform:rotateX(-90deg);
}
#works .container .screen .ui-works .content{
    float:right;
    width:25%;
    height:100%;
    text-align: center;
    position: relative;
    left:0;top:0;
    padding-top:20px;
    margin:0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#works .container .screen .ui-works .content dl{
    height:100%;
    /*background:red;*/
}
#works .container .screen .ui-works .content dd{
    color:#666;
    position: absolute;
    left:0;top:0;
    height:100%;
    margin:0;
    display: none;
}
#works .container .screen .ui-works .content dl h3{
    color:#E03D25;
    font-size: 36px;
    line-height: 50px;
}
#works .container .screen .ui-works .content dl p{
    padding:40px 15px;line-height: 1.5rem;
}
#works .container .screen .ui-works .content dl span{
    color: #e0034f;
}
#works .container .screen .ui-works .content div.btn{
    width:100px;padding:0.5em 0.6em;
    background:#108541;
    text-align: center;
    font-size: 14px;
    color:#fff;
    border:1px solid #31C8E8;
    position:absolute;
    left:0;bottom:25px;right:0;
    margin:auto;
    cursor:pointer;
}
#works .container .screen .ui-works .content div.btn:hover{
    background:#fff;
    color:#666;
}
/*UI作品遮照*/
.works_zhezhao{
    width:100%;height:100%;
    background:rgba(0,0,0,0.9);
    position:absolute;
    left:0;top:68px;
    z-index:99999999999;
    display: none;
}
.works_zhezhao>div{
    width:55%;
    background: rgb(191, 191, 191);
    margin:0 auto;
    height:600px;
    position: relative;
    overflow:hidden;
}
.works_zhezhao div img{
    width:80%;
    display: block;
   margin-left:auto;
    margin-right:auto;
    position:absolute;
    top:0;
    left:10%;
}
.works_zhezhao .callback,.works_zhezhao .next,.works_zhezhao .prev,.works_zhezhao .close{
    width:30px;height:26px;
    position: absolute;
    right:15px;
    cursor:pointer;
}
@keyframes up {
    0%{
       transform:translateY(0);
        opacity:0.2;
    }
    70%{
        opacity:1;
    }
    100%{
        transform:translateY(10px);
    }
}
@keyframes down {
    0%{
        transform:translateY(0);
        opacity:0.2;
    }
    70%{
        opacity:1;
    }
    100%{
        transform:translateY(-10px);
    }
}
.works_zhezhao .callback{
    bottom:15px;
}
.works_zhezhao .callback:after{
    content:"\e600";
    color:#fff;
    font-size: 30px;
}
.works_zhezhao .next{
    bottom:66px;
    background:url(../images/prePage.png);
    opacity:1;
    animation:down 1.5s infinite alternate linear;
}
.works_zhezhao .prev{
    bottom:117px;
    background:url(../images/nextPage.png);
    opacity:1;
    animation:up 1.5s infinite alternate linear;
}
.works_zhezhao .close{
    top:15px;
}
.works_zhezhao .close:after{
    content:"\e601";
    color:#fff;
}

/*侧边效果*/
aside{
    display:none;
}
aside>div.tx{
    position:fixed;
    right:20px;
    top:0;bottom:0;
    margin-top:auto;
    margin-bottom:auto;
    width:82px;height:60px;
    border-radius: 5px;
    -webkit-box-shadow: 3px 3px 5px #ccc;
    -moz-box-shadow: 3px 3px 5px #ccc;
    box-shadow: 3px 3px 5px #ccc;
    border:1px solid #cacaca;
    cursor:pointer;
    z-index:999999;
    transition:all 1s linear;
}
aside>div.active img{
    transition:all 1s linear;
}
aside>div:hover>img{
    transform:rotate(360deg);
}
aside>div.tx>div{
    width:50px;height:50px;
    position:absolute;
    left:0;bottom:0;
    opacity:0;
    z-index:-1;
    background:#fff;
    border:1px solid #ccc;
    border-radius:50%;
    text-align: center;
    line-height: 50px;
    font-size: 15px;
    font-weight:400;
}
aside>div.tx>div:hover{
    background:#bbb;
}
aside>div.tx>div:nth-of-type(1){
    transition:all 0.9s;
}
aside>div.tx>div:nth-of-type(2){
    transition:all 1.2s;
}
aside>div.tx>div:nth-of-type(2){
    transition:all 1.5s;
}
aside>div.active .h5{
    left:-72px;bottom:0;
    z-index:1;
    opacity:1;
}
aside>div.active .css3{
    left:-15px;bottom:77px;
    z-index:1;
    opacity:1;
}
aside>div.active .other{
    left:-15px;bottom:-77px;
    z-index:1;
    opacity:1;
}
aside div.show{
    position:fixed;
    left:0;top:0;
    width:100%;height:100%;
    z-index:88888;
    display:none;
    background:rgba(0,0,0,0.9);
}
aside div.show .play{
    width:100%;height:100%;
    position:absolute;
    left:0;top:0;
}





/*静态网页作品*/
#works .container .screen .static_web_page_start{
    width:80%;height:100%;
    margin:0 auto;
    perspective: 1000px;
    position:relative;
    display:none;
}
/*--------------------------这儿为了布局隐藏--------------------------------------*/
#works .container .screen .static_web_page_start div{
    width:33.3333%;height:50%;
    position:absolute;
    left:50%;top:0;
    margin-left:-16.66667%;
    background:blue;
    transition:all 1s;
    perspective: 1000px;
}
#works .container .screen .static_web_page_start div:nth-of-type(1){
    background:url(../images/2.1.jpg) top center no-repeat;
    background-size:100% 200%;
    z-index:2;
}
#works .container .screen .static_web_page_start div:nth-of-type(2){
    background:url(../images/2.1.jpg) bottom center no-repeat;
    background-size:100% 200%;
    z-index:2;
}
#works .container .screen .static_web_page_start div:nth-of-type(3){
    background:url(../images/1.0.jpg) top center no-repeat;
    background-size:100% 200%;
    z-index:4;
}
#works .container .screen .static_web_page_start div:nth-of-type(4){
    background:url(../images/1.0.jpg) bottom center no-repeat;
    background-size:100% 200%;
    z-index:4;
}
#works .container .screen .static_web_page_start div:nth-of-type(5){
    background:url(../images/3.0.jpg) top center no-repeat;
    background-size:100% 200%;
    z-index:3;
}
#works .container .screen .static_web_page_start div:nth-of-type(6){
    background:url(../images/3.0.jpg) bottom center no-repeat;
    background-size:100% 200%;
    z-index:3;
}

#works .container .screen .static_web_page{
    width:80%;height:100%;
    /*background:red;*/
    margin:0 auto;
    perspective: 1000px;
    display: none;
    position:relative;
}
#works .container .screen .static_web_page ol{
    width:100%;height:100%;
    position: relative;
    transform-style:preserve-3d;
    padding-bottom:20px;
    background:url(../images/shadow.png) center bottom no-repeat;
    background-size:90% 20px;
}
#works .container .screen .static_web_page ol li{
    width:0;height:100%;
    opacity:0;
    float:left;
    background:url(../images/bg.jpg) center no-repeat;
    background-size:cover;
    position:relative;
}
#works .container .screen .static_web_page ol li img{
    width:100%;height:100%;

}
#works .container .screen .static_web_page ol li img.start{
    width:0;height:100%;
    position: absolute;
    right:0;top:0;
}
#works .container .screen .static_web_page ol li img.startR{
    width:0;height:100%;
    position: absolute;
    left:0;top:0;
}
#works .container .screen .static_web_page .btn{
    width:33.3333%;height:10%;
    position:absolute;
    left:0;right:0;bottom:15px;
    margin:auto;
    /*background:red;*/
}
#works .container .screen .static_web_page  .btnL,#works .container .screen .static_web_page .btnR{
    width:13px;height:20px;
    position:absolute;
    bottom:10px;
    right:0;
    background: #9e9e9e url(../images/arrow.png);
    cursor:pointer;
    z-index:9999999;
}
#works .container .screen .static_web_page  .btnL{
    margin-right:14.66667%;
}
#works .container .screen .static_web_page  .btnR{
    margin-right:5.66667%;
    transform:rotate(180deg);
    -webkit-transform:rotate(180deg);
}
#works .container .screen .static_web_page  .btnL:hover,#works .container .screen .static_web_page  .btnR:hover{
    background-color: #484848;
}
#works .container .screen .static_web_page ol li:nth-of-type(1){
    width:33.33333%;
    transform-origin:right;
    transform:rotateY(-20deg);
    opacity:1;
    transition:transform 1s;
}
#works .container .screen .static_web_page ol li:nth-of-type(1):hover{
    transform:rotateY(-5deg);
}
#works .container .screen .static_web_page ol li:nth-of-type(2){
    width:33.3333333%;
    opacity:1;
}
#works .container .screen .static_web_page ol li:nth-of-type(3){
    width:33.3333333%;
    transform-origin:left;
    opacity:1;
    transition:transform 1s;
    -webkit-transition: transform 1s;
    -moz-transition: transform 1s;
    -ms-transition: transform 1s;
    -o-transition: transform 1s;
    transform:rotateY(20deg);
}
#works .container .screen .static_web_page ol li:nth-of-type(3):hover{
    transition:transform 1s;
    -webkit-transition: transform 1s;
    -moz-transition: transform 1s;
    -ms-transition: transform 1s;
    -o-transition: transform 1s;
    transform:rotateY(5deg);
}
/*静态网页遮照*/
.static_web_page_left_top{
    position:absolute;
    width:0;height:0;
    left:0;top:0;
    background:rgba(0,0,0,0.7);
    z-index: 2;
}
.static_web_page_left_bottom{
    position:absolute;
    width:0;height:0;
    left:0;bottom:0;
    background:rgba(0,0,0,0.7);
    z-index: 2;
}
.static_web_page_right_bottom{
    position:absolute;
    width:0;height:0;
    right:0;bottom:0;
    background:rgba(0,0,0,0.7);
    z-index: 2;
}
.static_web_page_right_top{
    position:absolute;
    width:0;height:0;
    right:0;top:0;
    background:rgba(0,0,0,0.7);
    z-index: 2;
}
/*静态网页遮照内容*/
#works .container .screen .static_web_page dl{
    /*display: none;*/
    width:33.333333%;height:50%;
    position:absolute;left:0;top:0;right:0;bottom:0;
    margin:auto;
    font-family:"微软雅黑";
    color:#FBFBFB;
    text-align: center;
    z-index:-111;
    background: rgba(0,0,0,0.6);
    transform:scaleX(0.3);
}
#works .container .screen .static_web_page dl dd{
    width:100%;height:100%;
    position:absolute;
    display: none;
}
#works .container .screen .static_web_page dl dd a{
    width:100%;height:200%;
    position:absolute;
    left:0;top:-50%;
    text-decoration: none;
    z-index:999;
}
#works .container .screen .static_web_page dl dd h2{
    font-size: 30px;
    line-height:2em;
}
#works .container .screen .static_web_page dl dd .fengge{
    width:90%;height:0;
    margin:0 auto;
    border-top:1px solid rgba(103, 103, 103, 0.71);
    border-bottom:1px solid rgba(180, 180, 180, 0.72);
    overflow: hidden;
}
#works .container .screen .static_web_page dl dd  span{
    font-size: 12px;
    padding-top:20px;
    display:inline-block;
    word-break: break-all;
}

/*整站*/
#works .container .screen .full_station{
    width:100%;
    height:130%;
    margin:0 auto;
    position:relative;
    display: none;
}
/*-------------------这儿为了布局方便隐藏----------------------------------------*/
#works .container .screen .full_station .slide_bars li.active,#works .container .screen .full_station .slide_bars li:hover{
    color:#333;;
    background: #fff;
}
#works .container .screen .full_station div:nth-of-type(1)~div{
    max-height:100%;
    /*overflow:hidden;*/
    width:100%;
    /*这儿如果不设值的话，在js中获取的时候可能为0*/
    position:absolute;
    left:0;top:0;
    z-index:-1;
     /*display:none;*/
     opacity:0;
    transition:all 0.5s;
    transform:rotate(360deg) scale(0.3);
}
#works .container .screen .full_station div:nth-of-type(1)~div.actives{
    display:block;
    opacity:1;
    transform:rotate(0deg) scale(1);
    z-index: 2;

}
#works .container .screen .full_station div img{
    width:96%;
    float:left;
    position:relative;
    left:0;top:0;
    -webkit-box-shadow:0 3px 27px #4a4a4a;
    -moz-box-shadow:0 3px 27px #4a4a4a;
    box-shadow:0 3px 27px #4a4a4a;
}
#works .container .screen .full_station div.index,#works .container .screen .full_station div.about{
    width:80%;
    right:0;bottom:0;
    margin:auto;
}
#works .container .screen .full_station div.slide_bars{
    width:12%;height:auto;
    position:absolute;
    right:-12%;
    top:0;
    background: #99989d;
    z-index:999999999999999999999999;
}
#works .container .screen .full_station .slide_bars li{
    height:40px;text-align: center;
    line-height: 40px;
    color:#FD8000;;
    background: #0b80c5;
    border-bottom:1px solid #27ba64;
    cursor:pointer;
}
#works .container .screen .full_station .slide_bars li a{
    color:red;
}
.full_station_zhezhao{
    width:100%;height:100%;
    position:absolute !important;
    left:0 !important;
    top:30px !important;
    opacity:1 !important;
    transition: all 0s !important;
    transform: rotate(0deg) scale(1) !important;
    z-index:8888;
}
/*游戏场景*/
#works .container .screen .game{
    width:100%;
    margin:0 auto;
    position:relative;
    display: none;
}
#works .container .screen .game>div{
    width:100%;
    background:#fff;
    position:absolute;
    left:0;top:0;
    margin:10% 0;
}
#works .container .screen .game>div a{
    width:100%;
    display: block;
}
#works .container .screen .game>div h3{
    text-align: center;
    color: #ff8e29;
    line-height: 40px;
    font-size: 26px;
}
#works .container .screen .game>div img.main{
    width:80%;
    margin:0% auto;
    display: block;
}



/*掌握技能*/
.bk-page nav{
    position:absolute;
    bottom:50px;
    left:0;right:0;
}
.book-3 .bk-content p.main{
    font-size: 15px;
    color:#333;
}
.book-2 .bk-content p.main{
    font-size: 15px;
    color:#333;
}
.bk-content{
    top:0px;
}
/*联系我*/
@keyframes border {
    0%{
        border:2px solid #00A8F6;

    }
    50%{
        border:7px solid rgba(66, 174, 246, 0.54);
    }
    51%{
        border:7px solid rgba(30, 128, 203, 0.51);
    }
    100%{
        border:12px solid #1e80cb;

    }
}
@keyframes borderHover {
    0%{
        border:2px solid #00A8F6;
    }
    100%{
        border:2px solid #00A8F6;
    }
}
#contacts{
    width:90%;
    background:url('../images/bg.png');
    margin:20px auto;
    height:500px;
    overflow: hidden;
    text-align: center;
    animation:border 1s infinite alternate linear ;
    /*background:red;*/

}
#contacts:hover{
    animation:borderHover 1s forwards;
}
#contacts .box{
    width:50%;
    height:auto;
    float:left;
}
#contacts .box1{
    width:50%;
    height:auto;
    float:left;
    /*background: #fff219;*/
}
#contacts .box1 h3{
    line-height: 1.5em;
    color: #E54D26;
}
#contacts .box1 img{
    width:100px;height:100px;
    background:blue;
    margin-top:20px;
}
#contacts h2{
    font-size: 30px;
    font-weight:700;
    text-align: center;
    line-height: 40px;
    height:40px;
    text-shadow:2px 2px 4px #653913;
    margin-top:3px;
    background:url(../images/mingpai.png) center no-repeat;
    background-size:150px 51px;

}
#contacts span.name{
   color:#E54D26;
    font-size: 20px;
    font-weight:400;
}
#contacts .message{
    width:250px;
    height:auto;
    margin:20px auto;
    text-align:left;
}
#contacts .message span{
    display: block;
    font-size:18px;
}
#contacts .box2{
    width:100%;
    margin:10px 0;
    height:auto;
}
#contacts .box2 h5{
    color: #E54D26;
    line-height: 26px;
    font-size: 18px;
    text-align: left;
    padding-left:15%;
}
#contacts .box2 li{
    height:26px;
    border-bottom:1px solid #ccc;
    width:60%;
    margin:5px auto;
    text-align: left;
}
#contacts .box2 li span{
    float:right;
}

@media screen and (max-width:400px) {
    #contacts .box2 li span{
        display:none;
    }
}
#contacts .box2 textarea{
    width:70%;
    max-width:70%;
    min-width:70%;
    height:130px;
    max-height:130px;
    font-size: 14px;
    padding:12px;
}
#contacts .box2 input{
    width:88px;height:23px;
    color:#fff;
    background:#108541;
    font-size: 16px;
    border:2px solid #31C8E8;
    vertical-align: bottom;
    cursor:pointer;
}
#contacts .box2 input:hover{
    background:#fff;
    color: #E54D26;
}
/*侧边导航*/
/*盒子*/
.banner {
    width: 100%;
    height: 400px;
    /*border: 1px solid red;*/
    perspective: 1000px;
    overflow: hidden;
    display:none;
    position:absolute;
    left:0;top:0;right:0;bottom:0;
    margin:auto;
}
.smallScreen,.h5play{
    width:100%;height:100%;
    display: none;
   overflow: auto;
}
.smallScreen a{
   float:left;
    width:30%;
    height:30%;
    margin:30px 10%;
    /*background:#fff;*/
    overflow: hidden;
}
.h5play a{
    float:left;
    width:20%;
    height:30%;
    margin:30px 6%;
    position:relative;
    /*line-height:80%;*/
    /*margin的百分比是相对于父元素的宽度而定*/
}
/*@keyframes spans{*/
    /*0%{*/
        /*-webkit-transform: rotate(0deg);*/
        /*-moz-transform: rotate(0deg);*/
        /*-ms-transform: rotate(0deg);*/
        /*-o-transform: rotate(0deg);*/
        /*transform: rotate(0deg);}*/
    /*100%{*/
        /*-webkit-transform: rotate(360deg);*/
        /*-moz-transform: rotate(360deg);*/
        /*-ms-transform: rotate(360deg);*/
        /*-o-transform: rotate(360deg);*/
        /*transform: rotate(360deg);}*/
/*}*/
.h5play a  span {
    position:absolute;
    left:0;top:0;right:0;bottom:0;
    margin:auto;
    z-index: 1;
    color:#fff;
    width:80px;height:20px;
    font-weight:400;
    text-align: center;
    /*-webkit-animation:span 1s infinite;*/
    /*-o-animation:span 1s infinite;*/
    /*animation:span 1s infinite;*/
}
.h5play a:nth-last-of-type(1) span,.h5play a:nth-last-of-type(2) span{
    color:#000;
}
.smallScreen a img,.h5play a img{
    width:100%;
}
.banner ul {
    width: 660px;
    height: 440px;
    margin: 0 auto;
    position: relative;
    list-style: none;
    padding: 0;
    transform-style: preserve-3d;
    transform-origin: center center -800px;
}
.banner ul li {
    width: 100%;
    height:100%;
    text-align: center;
    line-height: 440px;
    font-size: 80px;
    background: #ecc126;
    position: absolute;
    left: 0;
    top: 0;
    transform-origin: center center -800px;
}
.banner ul li:nth-child(2) {
    background: #EEEEEE;
    transform: rotateY(60deg);
}

.banner ul li:nth-child(3) {
    background: #808080;
    transform: rotateY(120deg);
    overflow: hidden;
}

.banner ul li:nth-child(4) {
    background: #06ff00;
    transform: rotateY(180deg);
}

.banner ul li:nth-child(5) {
    background: #00f0ff;
    transform: rotateY(240deg);
}

.banner ul li:nth-child(6) {
    background: #0600ff;
    transform: rotateY(300deg);
}
/*<!--表盘-->*/
  /*  <style>*/
    .biaopanBox {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        background: url(../biaopan.jpg) no-repeat top center;
        background-size: contain;
        border: 1px solid transparent;
    }

.biaopan {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    position: relative;
    left: 0;
    top: 0;
    transform: scale(0.5) translate(-49px, -85px);
    background-image: radial-gradient(circle at center center, #fbfbfb 0, #ddd 125px, #ccc 136px, #524b7f 142px, #756f7f 144px, #111 144px, #111 146px, #999 146px, #999 150px);
}
/*</style>
<!--表盘结束-->
<!--机器猫-->
    <style>*/
    .maobox {
        width: 328px;
        height: 422px;
        background-color: #eee;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        /*bottom: 0;*/
        margin: auto;
        /*border-top-width:0;*/
        /*border-bottom-width:30px;*/
        /*border-image-width:30px;*/
        /*border-image-source:url(bottom.png);*/
        /*border-image-slice:33;*/
        /*border-image-repeat:round;*/
    }

.maobox .head {
    width: 250px;
    height: 230px;
    border: 1px solid #33788e;
    border-radius: 100px;
    background-image: radial-gradient(at 218px 40px, #90e6e5 0, #05b8df 40px, #05b8df 150px, #125061);
    box-shadow: -10px 10px 10px #9ea1a8;
    margin: 20px auto;
    position: relative;
}

.maobox .head .mouth {
    width: 213px;
    height: 165px;
    border: 3px solid #2a5a72;
    border-radius: 48%;
    background-color: #fff;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -108px;
}

.maobox .head .mouth .eye:nth-child(1) {
    width: 57px;
    height: 71px;
    border: 3px solid #2a5a72;
    border-radius: 30px/32px;
    border-right-width: 0;
    background-image: radial-gradient(circle at 40px 50px, #1f1c20 0, #1f1c20 5px, #fff 8px);
    position: absolute;
    left: 50%;
    margin-left: -60px;
    top: -35px;
    z-index: 2;
}

.maobox .head .mouth .eye:nth-child(2) {
    width: 57px;
    height: 71px;
    border: 3px solid #2a5a72;
    border-left-width: 0;
    border-radius: 30px/32px;
    background-image: radial-gradient(circle at 17px 50px, #1f1c20 0, #1f1c20 5px, #fff 8px);
    position: absolute;
    left: 50%;
    margin-left: 3px;
    top: -35px;
    z-index: 2;
}

.maobox .head .mouth .nose {
    width: 30px;
    height: 30px;
    border: 2px solid #682f17;
    border-radius: 50%;
    background-image: radial-gradient(circle at 22px 14px, #fff 0, #e08e53 6px, #ce3c0b);
    position: absolute;
    left: 50%;
    top: 27px;
    margin-left: -16px;
    z-index: 1;
}

.maobox .head .mouth .nose div.nose_top {
    width: 6px;
    border-top: 6px solid #67625f;
    border-radius: 50%;
    margin: -20px auto;
}

.maobox .head .mouth .nose div.nose_bottom {
    width: 8px;
    height: 74px;
    background-image: linear-gradient(to right, #d7d7d7 2px, #898989 2px, #898989 4px, #9c9c9c 4px, #9c9c9c 6px, #d7d7d7 6px);
    position: absolute;
    left: 50%;
    bottom: -76px;
    margin-left: -4px;
}

.maobox .head .mouth .nose div.nose_bottom div:only-child {
    width: 122px;
    border-bottom: 2px solid #363636;
    height: 60px;
    border-radius: 51px/30px;
    position: absolute;
    left: 50%;
    bottom: 0;
    margin-left: -61px;
}

.maobox .head .mouth .whiskers {
    width: 50px;
    height: 54px;
    position: absolute;
    left: 50%;
    top: 50px;
}

/*.head .mouth .whiskers:nth-of-type(1){*/
/*margin-left:-86px;*/
/*}*/
.maobox .head .mouth .whiskers:nth-child(4) {
    margin-left: -86px;
}

.maobox .head .mouth .whiskers:nth-child(5) {
    margin-left: 36px;
}

.maobox .head .mouth .whiskers div:nth-child(2) {
    width: 50px;
    height: 6px;
    background-image: linear-gradient(to bottom, #dcdcdc 2px, #6a6a6a 2px, #6a6a6a 4px, #dcdcdc 4px);
    transform: translateY(14px);
}

.maobox .head .mouth .whiskers div:nth-child(odd) {
    width: 50px;
    height: 6px;
    background: #b1b1b1;
    background-image: linear-gradient(to right, #99af9a 8px, #a09b9f 10px, #c6c6c6 40px, #99af9a);
}

.maobox .head .mouth .whiskers:nth-child(4) div:nth-child(1) {
    transform: skewY(22deg);
}

.maobox .head .mouth .whiskers:nth-child(4) div:nth-child(3) {
    transform: skewY(-22deg) translateY(29px);
}

.maobox .head .mouth .whiskers:nth-child(5) div:nth-child(1) {
    transform: skewY(-22deg);
}

.maobox .head .mouth .whiskers:nth-child(5) div:nth-child(3) {
    transform: skewY(22deg) translateY(29px);
}

/*围巾*/
.maobox div.scarf {
    width: 192px;
    height: 22px;
    border: 2px solid #4d140d;
    border-radius: 10px;
    background-image: radial-gradient(circle at center top, #a23a2e 14%, #7c1e09 80%);
    box-shadow: 0 2px 5px #470b0e;
    position: absolute;
    left: 50%;
    margin-left: -96px;
    top: 230px;
}

/*身体*/
.maobox div.body {
    width: 172px;
    height: 132px;
    border-left: 2px solid #0d5b71;
    border-right: 2px solid #0d5b71;
    background-image: radial-gradient(circle at 86px 36px, #fff 62px, #274b5f 66px, #255068 68px, #2680A1 74px, #00D1FE);
    box-shadow: -10px 0px 10px #9ea1a8;
    position: absolute;
    left: 50%;
    margin-left: -86px;
    top: 252px;
    z-index: 5;
}

.maobox div.body .dudou {
    width: 100px;
    height: 50px;
    border: 4px solid #9b9597;
    border-radius: 0 0 50% 50%/50% 50% 93% 93%;
    position: absolute;
    left: 50%;
    margin-left: -53px;
    top: 30px;
}

.maobox div.body .suo {
    width: 30px;
    height: 30px;
    border: 3px solid rgba(140, 134, 95, 0.6);
    border-radius: 50%;
    background-image: linear-gradient(to bottom, #f3f56c 6px, #96910b 12px, #96910b 16px, #f3f56c 24px);
    position: absolute;
    left: 50%;
    top: -20px;
    margin-left: -19px;
}

.maobox div.body .suo .point {
    width: 10px;
    height: 6px;
    background: rgba(0, 0, 0, 0.6);
    border-radius: 3px;
    margin: 17px auto 0;
}

.maobox div.body .suo .xian {
    width: 6px;
    height: 7px;
    background: #666600;
    margin: 0 auto
}

.maobox .hand {
    width: 70px;
    height: 80px;
    position: absolute;
    left: 50%;
    top: 252px;
    z-index: 8;
    /*transform-style:preserve-3d;*/
    perspective: 50px;
}

.maobox .handl {
    margin-left: -155px;
}

.maobox .handr {
    margin-left: 85px;
}

.maobox .hand .mauler {
    width: 46px;
    height: 46px;
    border-radius: 18px/17px;
    background: #fff;
    box-shadow: 0 0 4px 3px #787878;
    position: absolute;
    bottom: 0;
    z-index: 999999;
}

.maobox .handl .arm {
    width: 44px;
    height: 36px;
    position: absolute;
    left: 18px;
    bottom: 0px;
    -webkit-transform-origin: left;
    -moz-transform-origin: left;
    -ms-transform-origin: left;
    -o-transform-origin: left;
    transform-origin: left;
    -webkit-transform: rotateY(-20deg) skewY(-36deg);
    -moz-transform: rotateY(-20deg) skewY(-36deg);
    -ms-transform: rotateY(-20deg) skewY(-36deg);
    -o-transform: rotateY(-20deg) skewY(-36deg);
    transform: rotateY(-20deg) skewY(-36deg);
    border-top: 2px solid #286779;
    border-bottom: 2px solid #24626f;
    background-image: linear-gradient(to right, #2a748a, #1E90B4);
}

.maobox .handr .arm {
    width: 44px;
    height: 36px;
    position: absolute;
    right: 18px;
    bottom: 0px;
    transform-origin: right;
    transform: rotateY(20deg) skewY(36deg);
    border-top: 2px solid #286779;
    border-bottom: 2px solid #24626f;
    background-image: linear-gradient(to left, #2a748a, #1E90B4);
}

.maobox .handl .mauler {
    left: 0;
}

.maobox .handr .mauler {
    right: 0;
}

/*脚*/
.maobox .footl, .footr {
    width: 96px;
    height: 22px;
    border-top: 2px solid #9ebdc9;
    border-bottom: 2px solid #9ebdc9;
    box-shadow: 0 2px 4px 1px rgba(199, 199, 201, 1);
    position: absolute;
    top: 386px;
    z-index: 99;
    left: 50%;
}

.maobox .footl {
    margin-left: -98px;
    border-top-left-radius: 14px 22px;
    border-top-right-radius: 11px;
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
    background-image: radial-gradient(circle at top right, #fff 85%, #A09B9F);
}

.maobox .footr {
    margin-left: 2px;
    border-top-left-radius: 11px;
    border-top-right-radius: 14px 22px;
    border-bottom-left-radius: 11px;
    border-bottom-right-radius: 11px;
    background-image: radial-gradient(circle at top left, #fff 85%, #A09B9F);
}

.maobox .footc {
    width: 16px;
    height: 16px;
    border: 2px solid #205371;
    border-bottom: 0;
    border-radius: 50%;
    position: absolute;
    left: 50%;
    bottom: 26px;
    z-index: 10;
    margin-left: -8px;
    background-image: radial-gradient(circle at top right, #b7b6b9 4px, #edebec 8px);
    box-shadow: -1px 3px 5px 2px #858585;
}

.maobox .zdang1 {
    width: 3px;
    height: 48px;
    background: #1A93BA;
    position: absolute;
    left: 78px;
    top: 253px;
    border-radius: 3px;
    z-index: 99999;
}

.maobox .zdang2 {
    width: 3px;
    height: 48px;
    background: #1e8fb2;
    position: absolute;
    right: 78px;
    top: 253px;
    border-radius: 3px;
    z-index: 99999;
}

/*</style>
<!--机器猫结束-->
<!--雨滴-->
    <style>*/
    .yudibox {
        width: 100%;
        height: 100%;
        background: url(../yudi.gif) no-repeat;
        background-size: cover;
    }

.yudi {
    width: 5px;
    height: 10px;
    background: #e4f8ff;
}
/*</style>
<!--雨滴结束-->
<!--阿里运动-->
    <style>*/
@keyframes circle {
    0% {
        transform: translate(0px, 0px);
    }
    1% {
        transform: translate(-0.6279052px, -0.01973272px);
    }
    2% {
        transform: translate(-1.25333234px, -0.07885299px);
    }
    3% {
        transform: translate(-1.87381315px, -0.17712749px);
    }
    4% {
        transform: translate(-2.48689887px, -0.31416839px);
    }
    5% {
        transform: translate(-3.09016994px, -0.48943484px);
    }
    6% {
        transform: translate(-3.68124553px, -0.70223514px);
    }
    7% {
        transform: translate(-4.25779292px, -0.95172948px);
    }
    8% {
        transform: translate(-4.81753674px, -1.2369332px);
    }
    9% {
        transform: translate(-5.35826795px, -1.55672074px);
    }
    10% {
        transform: translate(-5.87785252px, -1.90983006px);
    }
    11% {
        transform: translate(-6.3742399px, -2.29486757px);
    }
    12% {
        transform: translate(-6.84547106px, -2.71031373px);
    }
    13% {
        transform: translate(-7.28968627px, -3.15452894px);
    }
    14% {
        transform: translate(-7.70513243px, -3.6257601px);
    }
    15% {
        transform: translate(-8.09016994px, -4.12214748px);
    }
    16% {
        transform: translate(-8.44327926px, -4.64173205px);
    }
    17% {
        transform: translate(-8.7630668px, -5.18246326px);
    }
    18% {
        transform: translate(-9.04827052px, -5.74220708px);
    }
    19% {
        transform: translate(-9.29776486px, -6.31875447px);
    }
    20% {
        transform: translate(-9.51056516px, -6.90983006px);
    }
    21% {
        transform: translate(-9.68583161px, -7.51310113px);
    }
    22% {
        transform: translate(-9.82287251px, -8.12618685px);
    }
    23% {
        transform: translate(-9.92114701px, -8.74666766px);
    }
    24% {
        transform: translate(-9.98026728px, -9.3720948px);
    }
    25% {
        transform: translate(-10px, -10px);
    }
    26% {
        transform: translate(-9.98026728px, -10.6279052px);
    }
    27% {
        transform: translate(-9.92114701px, -11.25333234px);
    }
    28% {
        transform: translate(-9.82287251px, -11.87381315px);
    }
    29% {
        transform: translate(-9.68583161px, -12.48689887px);
    }
    30% {
        transform: translate(-9.51056516px, -13.09016994px);
    }
    31% {
        transform: translate(-9.29776486px, -13.68124553px);
    }
    32% {
        transform: translate(-9.04827052px, -14.25779292px);
    }
    33% {
        transform: translate(-8.7630668px, -14.81753674px);
    }
    34% {
        transform: translate(-8.44327926px, -15.35826795px);
    }
    35% {
        transform: translate(-8.09016994px, -15.87785252px);
    }
    36% {
        transform: translate(-7.70513243px, -16.3742399px);
    }
    37% {
        transform: translate(-7.28968627px, -16.84547106px);
    }
    38% {
        transform: translate(-6.84547106px, -17.28968627px);
    }
    39% {
        transform: translate(-6.3742399px, -17.70513243px);
    }
    40% {
        transform: translate(-5.87785252px, -18.09016994px);
    }
    41% {
        transform: translate(-5.35826795px, -18.44327926px);
    }
    42% {
        transform: translate(-4.81753674px, -18.7630668px);
    }
    43% {
        transform: translate(-4.25779292px, -19.04827052px);
    }
    44% {
        transform: translate(-3.68124553px, -19.29776486px);
    }
    45% {
        transform: translate(-3.09016994px, -19.51056516px);
    }
    46% {
        transform: translate(-2.48689887px, -19.68583161px);
    }
    47% {
        transform: translate(-1.87381315px, -19.82287251px);
    }
    48% {
        transform: translate(-1.25333234px, -19.92114701px);
    }
    49% {
        transform: translate(-0.6279052px, -19.98026728px);
    }
    50% {
        transform: translate(0px, -20px);
    }
    51% {
        transform: translate(0.6279052px, -19.98026728px);
    }
    52% {
        transform: translate(1.25333234px, -19.92114701px);
    }
    53% {
        transform: translate(1.87381315px, -19.82287251px);
    }
    54% {
        transform: translate(2.48689887px, -19.68583161px);
    }
    55% {
        transform: translate(3.09016994px, -19.51056516px);
    }
    56% {
        transform: translate(3.68124553px, -19.29776486px);
    }
    57% {
        transform: translate(4.25779292px, -19.04827052px);
    }
    58% {
        transform: translate(4.81753674px, -18.7630668px);
    }
    59% {
        transform: translate(5.35826795px, -18.44327926px);
    }
    60% {
        transform: translate(5.87785252px, -18.09016994px);
    }
    61% {
        transform: translate(6.3742399px, -17.70513243px);
    }
    62% {
        transform: translate(6.84547106px, -17.28968627px);
    }
    63% {
        transform: translate(7.28968627px, -16.84547106px);
    }
    64% {
        transform: translate(7.70513243px, -16.3742399px);
    }
    65% {
        transform: translate(8.09016994px, -15.87785252px);
    }
    66% {
        transform: translate(8.44327926px, -15.35826795px);
    }
    67% {
        transform: translate(8.7630668px, -14.81753674px);
    }
    68% {
        transform: translate(9.04827052px, -14.25779292px);
    }
    69% {
        transform: translate(9.29776486px, -13.68124553px);
    }
    70% {
        transform: translate(9.51056516px, -13.09016994px);
    }
    71% {
        transform: translate(9.68583161px, -12.48689887px);
    }
    72% {
        transform: translate(9.82287251px, -11.87381315px);
    }
    73% {
        transform: translate(9.92114701px, -11.25333234px);
    }
    74% {
        transform: translate(9.98026728px, -10.6279052px);
    }
    75% {
        transform: translate(10px, -10px);
    }
    76% {
        transform: translate(9.98026728px, -9.3720948px);
    }
    77% {
        transform: translate(9.92114701px, -8.74666766px);
    }
    78% {
        transform: translate(9.82287251px, -8.12618685px);
    }
    79% {
        transform: translate(9.68583161px, -7.51310113px);
    }
    80% {
        transform: translate(9.51056516px, -6.90983006px);
    }
    81% {
        transform: translate(9.29776486px, -6.31875447px);
    }
    82% {
        transform: translate(9.04827052px, -5.74220708px);
    }
    83% {
        transform: translate(8.7630668px, -5.18246326px);
    }
    84% {
        transform: translate(8.44327926px, -4.64173205px);
    }
    85% {
        transform: translate(8.09016994px, -4.12214748px);
    }
    86% {
        transform: translate(7.70513243px, -3.6257601px);
    }
    87% {
        transform: translate(7.28968627px, -3.15452894px);
    }
    88% {
        transform: translate(6.84547106px, -2.71031373px);
    }
    89% {
        transform: translate(6.3742399px, -2.29486757px);
    }
    90% {
        transform: translate(5.87785252px, -1.90983006px);
    }
    91% {
        transform: translate(5.35826795px, -1.55672074px);
    }
    92% {
        transform: translate(4.81753674px, -1.2369332px);
    }
    93% {
        transform: translate(4.25779292px, -0.95172948px);
    }
    94% {
        transform: translate(3.68124553px, -0.70223514px);
    }
    95% {
        transform: translate(3.09016994px, -0.48943484px);
    }
    96% {
        transform: translate(2.48689887px, -0.31416839px);
    }
    97% {
        transform: translate(1.87381315px, -0.17712749px);
    }
    98% {
        transform: translate(1.25333234px, -0.07885299px);
    }
    99% {
        transform: translate(0.6279052px, -0.01973272px);
    }
    100% {
        transform: translate(0px, 0px);
    }
}

@keyframes sin {
    0% {
        transform: translate(0px, 0px);
    }
    5% {
        transform: translate(8px, 5.14230088px);
    }
    10% {
        transform: translate(16px, 7.87846202px);
    }
    15% {
        transform: translate(24px, 6.92820323px);
    }
    20% {
        transform: translate(32px, 2.73616115px);
    }
    25% {
        transform: translate(40px, -2.73616115px);
    }
    30% {
        transform: translate(48px, -6.92820323px);
    }
    35% {
        transform: translate(56px, -7.87846202px);
    }
    40% {
        transform: translate(64px, -5.14230088px);
    }
    45% {
        transform: translate(72px, 0px);
    }
    50% {
        transform: translate(80px, 5.14230088px);
    }
    55% {
        transform: translate(88px, 7.87846202px);
    }
    60% {
        transform: translate(96px, 6.92820323px);
    }
    65% {
        transform: translate(104px, 2.73616115px);
    }
    70% {
        transform: translate(112px, -2.73616115px);
    }
    75% {
        transform: translate(120px, -6.92820323px);
    }
    80% {
        transform: translate(128px, -7.87846202px);
    }
    85% {
        transform: translate(136px, -5.14230088px);
    }
    90% {
        transform: translate(144px, 0px);
    }
    95% {
        transform: translate(152px, 5.14230088px);
    }
    100% {
        transform: translate(160px, 7.87846202px);
    }
}

@keyframes circle1 {
    0% {
        transform: rotate(0deg);
    }
    5% {
        transform: rotate(18deg);
    }
    10% {
        transform: rotate(36deg);
    }
    15% {
        transform: rotate(54deg);
    }
    20% {
        transform: rotate(72deg);
    }
    25% {
        transform: rotate(90deg);
    }
    30% {
        transform: rotate(108deg);
    }
    35% {
        transform: rotate(126deg);
    }
    40% {
        transform: rotate(144deg);
    }
    45% {
        transform: rotate(162deg);
    }
    50% {
        transform: rotate(180deg);
    }
    55% {
        transform: rotate(198deg);
    }
    60% {
        transform: rotate(216deg);
    }
    65% {
        transform: rotate(234deg);
    }
    70% {
        transform: rotate(252deg);
    }
    75% {
        transform: rotate(270deg);
    }
    80% {
        transform: rotate(288deg);
    }
    85% {
        transform: rotate(306deg);
    }
    90% {
        transform: rotate(324deg);
    }
    95% {
        transform: rotate(342deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

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

.alibox {
    width: 100%;
    height: 100%;
    position: relative;
    background: #00e8c9;
    /*text-align: justify;*/
}

.alibox .alibox:after {
    content: "";
    display: inline-block;
    width: 100%;
}

.alibox .item {
    width: 33.333333%;
    height: 100%;
    box-sizing: border-box;
    border: 1px solid red;
    float: left;
    position: relative;
    overflow: hidden;
}

.alibox .bg, .fg {
    font-family:"iconfonts";
}

.alibox .bg {
    font-size: 220px;
    color: #262634;
    text-align: center;
    line-height: 400px;
}

.alibox .fg {
    position: absolute;
    font-size: 70px;
    color: #E74C27;
    right: 15px;
    bottom: -50px;
}

.alibox .fg.fg-2 {
    left: -130px;
    bottom: -50px;
}

.alibox .item:hover .fg-1 {
    transform-origin: center -10px;
    animation: circle 1s infinite linear;
}

.alibox .item:hover .fg-2 {
    animation: sin 1s linear backwards;
}

.alibox .item:hover .fg-3 {
    /*transform-origin: center -10px;*/
    animation: circle1 3s infinite linear;
}
/*
</style>
<!--阿里运动结束-->*/