/*banner*/
.designmoma-wrap{width:100%;height:480px;position:relative;background-color:#fff;margin-top:108px;}
.desmoma-con{width:100%;height:100%;position:relative;}
.desmoma-ul li{height:480px;float:left;background-color:#f3f4f6;}
.desmoma-ul li img{width:100%;}
.designmoma-wrap .desmoma-ul li p{font-size:14px;line-height:24px;color:#333;padding:0 20px;text-align:left;}
.designmoma-wrap .desmoma-ul li p span{display:block;color:#262626;font-size:20px;line-height:40px;padding-top:10px;font-weight:bold;text-align:center;}
.nepre{position:absolute;width:46px;height:86px;top:33%;margin-top:-43px;left:-66px;background:url("../images/icon.png") no-repeat -140px 0;z-index:2000;}
.nepre:hover{background-position:-16px 0;}
.nenex{position:absolute;width:46px;height:86px;top:33%;margin-top:-43px;right:-66px;background:url("../images/icon.png") no-repeat -217px 0;z-index:2000;}
.nenex:hover{background-position:-90px 0;}

/*content*/
.fhcontent,.fhwrap,.fhw{width:100%;}
.fhw>li{background-repeat:no-repeat;background-position:center;background-size:cover;text-align:center;position:relative;overflow:hidden;min-height:650px;background-color:#fff;}
.fhw li .fwon{position:absolute;width:100%;height:276px;top:45%;margin-top:-138px;}
.fhw li h3{font-size:60px;line-heght:1;color:#fff;padding-bottom:36px;}
.fhw li h3 span{display:inline-block;position:relative;top:-10px;}
.fhw li p{font-size:26px;line-height:50px;color:#e2e2e2;}
.fhw li a{display:block;}
.fhw li button{display:inline-block;width:168px;height:60px;border-radius:10px;background-color:#d92c2e;font-size:30px;line-height:56px;color:#fff;margin-top:60px;font-family:"Microsoft Yahei";cursor:pointer;}

.fhw li .fwtw{padding-top:60px;}
.fhw li .fwtw h4{font-size:40px;line-height:1;font-weight:normal;padding-bottom:20px;color:#131313;}
.fhw li .fwtw h4 span{display:inline-block;position:relative;top:-10px;}
.fwtw a:hover h4{color:#999!important;}
.anion{width:1200px;position:absolute;bottom:30px;left:50%;margin-left:-600px;}
.aoon li{border-radius:100%;text-align:center;position:absolute;}
.aoon li a{display:block;width:100%;height:100%;color:#fff;font-size:30px;position:relative;z-index:20;}
.aoon li.ao_01{width:210px;height:210px;background-color:rgba(244,68,32,0.9);z-index:20;}
.aoon li.ao_01 img{display:inline-block;margin-top:74px;position:relative;z-index:20;}
.aoon li.ao_02{width:140px;height:140px;line-height:140px;background-color:rgba(244,68,32,0.9);}
.aoon li.ao_03,.aoon li.ao_07{width:200px;height:200px;}
.aoon li.ao_03,.aoon li.ao_07{background-color:rgba(232,54,48,0.8)}
.aoon li.ao_04,.aoon li.ao_06{width:174px;height:174px;background-color:rgba(244,68,32,0.8)}
.aoon li.ao_05,.aoon li.ao_08{width:150px;height:150px;background-color:rgba(244,68,32,0.9)}
.aoon li.ao_01{line-height:210px;left:50%;top:45%;margin-top:-105px;margin-left:-105px;}
.aoon li.ao_02{line-height:140px;top:2%;right:25%;}
.aoon li.ao_03{line-height:200px;right:8%;top:43%;margin-top:-90px;}
.aoon li.ao_04{line-height:174px;right:15%;bottom:36px;}
.aoon li.ao_05{line-height:150px;right:34%;bottom:50px;}
.aoon li.ao_06{line-height:174px;bottom:20px;right:55%;}
.aoon li.ao_07{line-height:200px;left:9%;top:50%;margin-top:-100px;}
.aoon li.ao_08{line-height:150px;top:5%;left:30%;}

.jos dd{width:185px;height:185px;border-radius:100%;background-color:rgba(244,68,32,0.7);position:absolute;z-index:0;}
.joson dd{background-color:rgba(255,255,255,0.7);z-index:0;}

.aotw{margin-top:11.4%;display:block;}
.aotw li{width:25%;height:100%;float:left;text-align: center;position:relative;z-index:6;}
.aotw li a{display:block;}
.aotw li .atbase{width:206px;height:206px;margin:0 auto;border:12px solid #ed1c24;border-radius:100%;background-repeat:no-repeat;background-position:center;background-size:cover;overflow:hidden;position:relative;z-index:5;}
.aotw li .joins{width:92px;height:107px;background:url("../images/fo_02.png") no-repeat center;background-size:100% 100%;position:absolute;top:84%;margin-top:-132px;right:-46px;z-index:2;}
.aotw li h5{font-size:24px;line-height:1;font-weight:normal;padding:48px 0 12px;color:#f0f0f0;}
.aotw li p{font-size:14px;line-height:24px;color:#ccc;}
.aotwoa{margin-top:2%;}

.aoth{width:62.5%;height:100%;margin:0 auto;margin-top:484px;}
.ath{position:relative;left:40px;}
.ath li{width:25%;float:left;}
.alb{width:34px;height:50px;margin-top:7px;margin-left:30px;background:url("../images/icona.png") no-repeat;float:left;}
.albtext{padding-left:80px;text-align:left;font-size:14px;line-height:28px;color:#1a1a1a;}

.awrap{width:62.5%;height:100%;position:absolute;top:0;left:50%;margin-left:-600px;}
.aofo li{width:180px;height:180px;position:absolute;border-radius:100%;left:50%;margin-left:-90px;top:auto;bottom:0;z-index:10;}
.aofo li div{width:100%;height:100%;border-radius:100%;background-color:rgba(255,255,255,0.8);position:relative;z-index:4;}
.aofo li div span{width:180px;height:180px;position:absolute;left:0;top:0;background-image:url("../images/icon.png");background-repeat:no-repeat;z-index:4;}
.aofo li.jostw{z-index:1;}
.aofo li.jostw div{z-index:1;}
.aofo li.jostw div span{z-index:0;}
.aofo li a{display:block;width:100%;height:100%;}
.aofo li.brandjd div span{width:100%;height:100%;background-position:-543px -62px;}
.aofo li.brandtb{width:226px;height:226px;}
.aofo li.brandtb div span{background-position:0px -81px;top:50%;left:50%;margin-top:-70px;margin-left:-90px;}
.aofo li.brandks div span{width:100%;height:100%;background-position:-365px -65px;}
.aofo li.brandin div span{height:150px;top:50%;left:50%;margin-top:-68px;margin-left:-90px;background-position:-175px -80px;}

.aofi{margin-top:7.5%;}
.aofi li{width:340px;margin:0 30px;float:left;text-align:left;}
.aofi li a{display:block;width:100%;height:100%;}
.afitop{}
.aofi li a p{font-size:18px;line-height:30px;padding-top:6px;color:#5d5d5d;}
.afibottom{width:295px;height:280px;margin:0 auto;margin-top:15%;border-radius:10%;border:5px solid #005aaa;overflow:hidden;position:relative;z-index:100;}
.bganiono{width:100%;height:100%;position:absolute;left:0;top:0;z-index:1;background-repeat:no-repeat;background-position:center;}

.bganiono{animation:bganion 8s linear infinite alternate;-webkit-animation:bganion 8s linear infinite alternate; -moz-animation:bganion 8s linear infinite alternate; }
@keyframes bganion{
    to{transform:scale(1.4,1.4);}
}
@-webkit-keyframes bganion{
    to{-webkit-transform:scale(1.4,1.4);}
}
@-moz-keyframes bganion{
    to{-moz-transform:scale(1.4,1.4);}
}
@-o-keyframes bganion{
    to{-o-transform:scale(1.4,1.4);}
}

.aosi{margin-top:0px; margin-left:-55px;}
.aosi li{width:363px;height:460px;margin:0 0px 20px 55px;float:left;background-color:rgba(255,255,255,0.8);overflow:hidden;}
.as_01{width:245px;height:100px;margin:50px auto 14px;border-bottom:1px solid #acacac;text-align:center;}
.as_01 i{display:inline-block;width:99px;height:92px;overflow:hidden;background-repeat:no-repeat;background-image:url(../images/city_icon.png);}
.as_01 i.i1{background-position: 3px 0px; }
.as_01 i.i2{background-position: -130px 0px; }
.as_01 i.i3{background-position: -257px 0px; }
.asia{padding:0 60px;text-align:left;}
.asia h6{font-size:24px;line-height:64px; font-weight:bold;}
.aosi .asia p{font-size:13px;line-height:34px;color:#4d4d4d;}
/*工业设计*/
.indus_box{width:1200px;position:absolute;bottom:200px;left:50%;margin-left:-600px;}
.indus{margin-top:0px; margin-left:-36px;}
.indus li{width:211px;height:258px;margin:0 0px 20px 36px;float:left;background-color:rgba(255,255,255,0.8);overflow:hidden;border-radius:10px;}
.i_as_01{width:80%;height:76px;margin:10px auto 0px;text-align:center;}
.i_as_01 i{display:inline-block;width:100px;height:80px;overflow:hidden;background-repeat:no-repeat;background-image:url(../images/research_icon.png);}
.i_as_01 i.i1{background-position: 25px -118px;}
.i_as_01 i.i2{background-position: -226px -118px;}
.i_as_01 i.i3{background-position: -478px -118px;}
.i_as_01 i.i4{background-position: -732px -118px;}
.i_as_01 i.i5{background-position: -980px -118px;}

.i_asia{padding:0 0px;text-align:left;}
.i_asia h6{font-size:20px;line-height:40px; color:#005aab; font-weight:normal; text-align:center; position:relative;}
.i_asia h6:after{border-bottom:3px solid #005aab; position: absolute;width:80%; top:40px; left:0px; right:0px;margin:auto;background-color: #fff;content: "";}
.indus .i_asia p{font-size:12px;line-height:20px;color:#4d4d4d; width:80%; margin:20px auto 0 auto; display:block; text-align:center;}
/*众创空间*/
.a_m_b{ bottom:40px;}
.a_m_t{ margin-top:435px; border:1px solid #fff;}
.a_m_t a{ color:#fff;}
.aspace{margin-top:0px;}
.aspace li{width:250px;height:305px;margin:0 0px 0px 115px;float:left;background-color:rgba(255,255,255,0.8);border-radius:5px;overflow:hidden;}
.as_02{width:169px;height:80px;margin:25px auto 14px;text-align:center;}
.aspace li .red{border-bottom:3px solid #dd5131;}
.aspace li .blue{border-bottom:3px solid #02a1e9; background:none; color:inherit;}
.aspace li .gray{border-bottom:3px solid #999897; background:none; color:inherit;}
.as_02 i{display:inline-block;width:60px;height:57px;overflow:hidden;background-repeat:no-repeat;background-image:url(../images/public_icon_2.png);}
.as_02 i.i1{background-position: 3px 0px; }
.as_02 i.i2{background-position: -182px 0px; }
.as_02 i.i3{background-position: -366px 0px; }
.aspace .asia{padding:0 30px;text-align:left;}
.aspace .asia h6{font-size:20px;line-height:64px; text-align:center;}
.aspace .asia .red_t { color:#dd5131;}
.aspace .asia .blue_t {color:#02a1e9;}
.aspace .asia .gray_t {color:#999897;}
.aspace .asia p{font-size:14px;line-height:25px;color:#4d4d4d;}

/*设计中心*/
.adesigin{margin-top:0px;}
.adesigin li{width:250px;height:475px;margin:0 0px 0px 40px;float:left;background-color:rgba(255,255,255,0.8);overflow:hidden;}
.adesigin li a:hover{ color:#e8351d;}
.adesigin .as_02{width:169px;height:90px;margin:75px auto 15px;text-align:center;border-bottom:1px solid #434343;}
.adesigin li .red{border-bottom:3px solid #dd5131;}
.adesigin li .blue{border-bottom:3px solid #02a1e9; background:none; color:inherit;}
.adesigin li .yellow{border-bottom:3px solid #fca601; background:none; color:inherit;}
.adesigin li .gray{border-bottom:3px solid #444; background:none; color:inherit;}
.adesigin .as_02 i{display:inline-block;width:65px;height:65px;overflow:hidden;background-repeat:no-repeat;background-image:url(../images/design_c_icon.png);}
.adesigin .as_02 i.i1{background-position: -1px -22px; }
.adesigin .as_02 i.i2{background-position: -159px -22px; }
.adesigin .as_02 i.i3{background-position: -316px -23px; }
.adesigin .as_02 i.i4{background-position: -480px -22px; }
.adesigin .asia{padding:0 30px;text-align:left;}
.adesigin .asia h6{font-size:24px;line-height:75px; text-align:center;}
.adesigin .asia .red_t { color:#dd5131;}
.adesigin .asia .blue_t {color:#02a1e9;}
.adesigin .asia .yellow_t {color:#fca601;}
.adesigin .asia .gray_t {color:#444;}
.adesigin .asia p{font-size:14px;line-height:30px;color:#4d4d4d;}
/*文旅创新平台*/
.atourism{margin-top:0px;}
.atourism li{width:250px;height:305px;margin:0 0px 0px 115px;float:left;background-color:rgba(255,255,255,0.8);border-radius:5px;overflow:hidden;}
.atourism .as_02{width:169px;height:80px;margin:25px auto 14px;text-align:center;}
.atourism li .red{border-bottom:3px solid #dd5131;}
.atourism li .blue{border-bottom:3px solid #02a1e9; background:none; color:inherit;}
.atourism li .gray{border-bottom:3px solid #999897; background:none; color:inherit;}
.atourism .as_02 i{display:inline-block;width:60px;height:60px;overflow:hidden;background-repeat:no-repeat;background-image:url(../images/tourism_c_icon.png);}
.atourism .as_02 i.i1{background-position: 0px -30px; }
.atourism .as_02 i.i2{background-position: -155px -30px; }
.atourism .as_02 i.i3{background-position: -311px -30px; }
.atourism .asia{padding:0 30px;text-align:left;}
.atourism .asia h6{font-size:20px;line-height:64px; text-align:center;}
.atourism .asia .red_t { color:#dd5131;}
.atourism .asia .blue_t {color:#02a1e9;}
.atourism .asia .gray_t {color:#999897;}
.atourism .asia p{font-size:14px;line-height:25px;color:#4d4d4d;}

.bganimate{position:absolute;width:100%;height:100%;left:0;top:0;background:url('../images/fh_01.jpg') no-repeat center;background-size:cover;}
.bganimate{animation:animatedBackground 10s linear infinite alternate;-webkit-animation:animatedBackground 10s linear infinite alternate; -moz-animation:animatedBackground 10s linear infinite alternate; }
@keyframes animatedBackground{
    to{transform:scale(1.1,1.1);}
}
@-webkit-keyframes animatedBackground{
    to{-webkit-transform:scale(1.1,1.1);}
}
@-moz-keyframes animatedBackground{
    to{-moz-transform:scale(1.1,1.1);}
}
@-o-keyframes animatedBackground{
    to{-o-transform:scale(1.1,1.1);}
}
.bgred{position:absolute;width:100%;height:100%;left:0;top:0;/*background:url('../images/fo_03.png') no-repeat left top;*/background-size:contain;}
.bggs{width:100%;height:484px;margin-top:1%;position:relative;}
.bggs li{position:absolute;}
.gs_01{left:0;top:160px;}
.gs_02{left:284px;top:109px;}
.gs_03{left:666px;top:101px;}
.gs_04{left:972px;top:76px;}
.gs_05{left:1253px;top:76px;}
.gs_06{left:1600px;top:-2px;}

.ani{
    animation-name:opac;
    -webkit-animation-name:opac;
    -o-animation-name:opac;
    -moz-animation-name:opac;/*名称*/

    animation-duration:0.5s;
    -webkit-animation-duration:0.5s;
    -o-animation-duration:0.5s;
    -moz-animation-duration:0.5s;/*毫秒*/

    animation-timing-function:linear;
    -webkit-animation-timing-function:linear;
    -o-animation-timing-function:linear;
    -moz-animation-timing-function:linear;

    animation-fill-mode:forwards;
    -o-animation-fill-mode:forwards;
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
}
@keyframes opac/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
{to{opacity:0}
}
@-moz-keyframes opac /* Firefox */
{to{opacity:0}
}
@-webkit-keyframes opac /* Safari and Chrome */
{to{opacity:0}
}
@-o-keyframes opac /* Opera */
{to{opacity:0}
}
.bggs li.an{
    animation:an 4s linear;
    animation-fill-mode:forwards;
    -webkit-animation:an 4s linear;
    -webkit-animation-fill-mode:forwards;
    opacity:0
}
/*@keyframes an{*/
    /*from{transform:rotatey(180deg) translatex(400px);}*/
    /*to{transform:translatex(0px) rotatey(0deg) ;opacity:1;}*/
/*}*/
@keyframes an{
    from{transform:rotatey(180deg);transform-origin:0% 100%;}
    to{transform:rotatey(0deg);transform-origin:0% 0%;opacity:1;}
}
@-webkit-keyframes an{
    from{-webkit-transform:rotatey(180deg);-webkit-transform-origin:0% 100%;}
    to{-webkit-transform:rotatey(0deg);-webkit-transform-origin:0% 0%;opacity:1;}
}
.anscale{
    -webkit-animation-name:animascale;
    -o-animation-name:animascale;
    -moz-animation-name:animascale;/*名称*/

    -webkit-animation-timing-function:ease-in-out;
    -o-animation-timing-function:ease-in-out;
    -moz-animation-timing-function:ease-in-out;

    -o-animation-play-state:running;
    -webkit-animation-play-state:running;
    -moz-animation-play-state:running;/*规定动画正在播放running或paused规定动画已暂停*/}
@keyframes animascale/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
{
    0%{transform:scale3d(1,1,1) translate(-100%,0%);}
    30%{transform:scale3d(1.25,.75,1);}
    40%{transform:scale3d(.75,1.25,1);}
    50%{transform:scale3d(1.15,.85,1);}
    65%{transform:scale3d(.95,1.05,1);}
    75%{transform:scale3d(1.05,.95,1);}
    100%{transform:scale3d(1,1,1) translate(0%,0%);}
}

@-moz-keyframes animascale /* Firefox */
{
    0%{-moz-transform:scale3d(1,1,1) translate(-100%,0%);}
    30%{-moz-transform:scale3d(1.25,.75,1);}
    40%{-moz-transform:scale3d(.75,1.25,1);}
    50%{-moz-transform:scale3d(1.15,.85,1);}
    65%{-moz-transform:scale3d(.95,1.05,1);}
    75%{-moz-transform:scale3d(1.05,.95,1);}
    100%{-moz-transform:scale3d(1,1,1) translate(0%,0%);}
}

@-webkit-keyframes animascale /* Safari and Chrome */
{
    0%{-webkit-transform:scale3d(1,1,1) translate(-100%,0%);}
    30%{-webkit-transform:scale3d(1.25,.75,1);}
    40%{-webkit-transform:scale3d(.75,1.25,1);}
    50%{-webkit-transform:scale3d(1.15,.85,1);}
    65%{-webkit-transform:scale3d(.95,1.05,1);}
    75%{-webkit-transform:scale3d(1.05,.95,1);}
    100%{-webkit-transform:scale3d(1,1,1) translate(0%,0%);}
}

@-o-keyframes animascale /* Opera */
{
    0%{-o-transform:scale3d(1,1,1) translate(-100%,0%);}
    30%{-o-transform:scale3d(1.25,.75,1);}
    40%{-o-transform:scale3d(.75,1.25,1);}
    50%{-o-transform:scale3d(1.15,.85,1);}
    65%{-o-transform:scale3d(.95,1.05,1);}
    75%{-o-transform:scale3d(1.05,.95,1);}
    100%{-o-transform:scale3d(1,1,1) translate(0%,0%);}
}
.anscaleon{
    animation-name:animascaleon;
    -webkit-animation-name:animascaleon;
    -o-animation-name:animascaleon;
    -moz-animation-name:animascaleon;/*名称*/

    -webkit-animation-timing-function:ease-in-out;
    -o-animation-timing-function:ease-in-out;
    -moz-animation-timing-function:ease-in-out;

    -webkit-animation-iteration-count:1;
    -o-animation-iteration-count:1;
    -moz-animation-iteration-count:1;/*规定动画被播放的次数。无限次播放或n*/

    -webkit-animation-direction:normal;
    -o-animation-direction:normal;
    -moz-animation-direction:normal;/*规定动画是否在下一周期逆向地播放；动画应该轮流反向播放alternate或normal*/

    -o-animation-play-state:running;
    -webkit-animation-play-state:running;
    -moz-animation-play-state:running;/*规定动画正在播放running或paused规定动画已暂停*/}
@keyframes animascaleon/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
{
    0%{transform:scale3d(5,.9,1) translate(-40%,0%);}
    40%{transform:scale3d(3,1,1);}
    50%{transform:scale3d(4,.9,1);}
    65%{transform:scale3d(2,1,1);}
    75%{transform:scale3d(1.5,.9,1);}
    100%{transform:scale3d(1,1,1) translate(0%,0%);}
}

@-moz-keyframes animascaleon /* Firefox */
{
    0%{-moz-transform:scale3d(5,.9,1) translate(-40%,0%);}
    40%{-moz-transform:scale3d(3,1,1);}
    50%{-moz-transform:scale3d(4,.9,1);}
    65%{-moz-transform:scale3d(2,1,1);}
    75%{-moz-transform:scale3d(1.5,.9,1);}
    100%{-moz-transform:scale3d(1,1,1) translate(0%,0%);}
}

@-webkit-keyframes animascaleon /* Safari and Chrome */
{
    0%{-webkit-transform:scale3d(5,.9,1) translate(-40%,0%);}
    40%{-webkit-transform:scale3d(3,1,1);}
    50%{-webkit-transform:scale3d(4,.9,1);}
    65%{-webkit-transform:scale3d(2,1,1);}
    75%{-webkit-transform:scale3d(1.5,.9,1);}
    100%{-webkit-transform:scale3d(1,1,1) translate(0%,0%);}
}

@-o-keyframes animascaleon /* Opera */
{
    0%{-o-transform:scale3d(5,.9,1) translate(-40%,0%);}
    40%{-o-transform:scale3d(3,1,1);}
    50%{-o-transform:scale3d(4,.9,1);}
    65%{-o-transform:scale3d(2,1,1);}
    75%{-o-transform:scale3d(1.5,.9,1);}
    100%{-o-transform:scale3d(1,1,1) translate(0%,0%);}
}
.anscaletw{
    animation-name:animascaletw;
    -webkit-animation-name:animascaletw;
    -o-animation-name:animascaletw;
    -moz-animation-name:animascaletw;/*名称*/

    -webkit-animation-timing-function:ease-in-out;
    -o-animation-timing-function:ease-in-out;
    -moz-animation-timing-function:ease-in-out;

    -webkit-animation-iteration-count:1;
    -o-animation-iteration-count:1;
    -moz-animation-iteration-count:1;/*规定动画被播放的次数。无限次播放或n*/

    -webkit-animation-direction:normal;
    -o-animation-direction:normal;
    -moz-animation-direction:normal;/*规定动画是否在下一周期逆向地播放；动画应该轮流反向播放alternate或normal*/

    -o-animation-play-state:running;
    -webkit-animation-play-state:running;
    -moz-animation-play-state:running;/*规定动画正在播放running或paused规定动画已暂停*/}


@keyframes animascaletw/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
{
    0%{transform:scale3d(1,1,1);}
    30%{transform:scale3d(1.1,.9,1);}
    40%{transform:scale3d(0.9,1.1,1);}
    50%{transform:scale3d(1.1,.9,1);}
    65%{transform:scale3d(.95,1.05,1);}
    75%{transform:scale3d(1.05,.95,1);}
    100%{transform:scale3d(1,1,1);}
}

@-moz-keyframes animascaletw /* Firefox */
{
    0%{-moz-transform:scale3d(1,1,1);}
    30%{-moz-transform:scale3d(1.1,.9,1);}
    40%{-moz-transform:scale3d(0.9,1.1,1);}
    50%{-moz-transform:scale3d(1.1,.9,1);}
    65%{-moz-transform:scale3d(.95,1.05,1);}
    75%{-moz-transform:scale3d(1.05,.95,1);}
    100%{-moz-transform:scale3d(1,1,1);}
}

@-webkit-keyframes animascaletw /* Safari and Chrome */
{
    0%{-webkit-transform:scale3d(1,1,1);}
    30%{-webkit-transform:scale3d(1.1,.9,1);}
    40%{-webkit-transform:scale3d(0.9,1.1,1);}
    50%{-webkit-transform:scale3d(1.1,.9,1);}
    65%{-webkit-transform:scale3d(.95,1.05,1);}
    75%{-webkit-transform:scale3d(1.05,.95,1);}
    100%{-webkit-transform:scale3d(1,1,1);}
}

@-o-keyframes animascaletw /* Opera */
{
    0%{-o-transform:scale3d(1,1,1);}
    30%{-o-transform:scale3d(1.1,.9,1);}
    40%{-o-transform:scale3d(0.9,1.1,1);}
    50%{-o-transform:scale3d(1.1,.9,1);}
    65%{-o-transform:scale3d(.95,1.05,1);}
    75%{-o-transform:scale3d(1.05,.95,1);}
    100%{-o-transform:scale3d(1,1,1);}
}
/*------------------*/
.aofo li,.aofo li div{
    animation-timing-function:ease-in-out;
    -webkit-animation-timing-function:ease-in-out;
    -o-animation-timing-function:ease-in-out;
    -moz-animation-timing-function:ease-in-out;
}

.afaon{
    animation-name:afaon;
    -webkit-animation-name:afaon;
    -o-animation-name:afaon;
    -moz-animation-name:afaon;/*名称*/
}

@keyframes afaon/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
{
    0%{transform:translate(0,0);}
    100%{transform:translate(-280%,0);}
}

@-moz-keyframes afaon /* Firefox */
{
    0%{-moz-transform:translate(0,0);}
    100%{-moz-transform:translate(-280%,0);}
}

@-webkit-keyframes afaon  /* Safari and Chrome */
{
    0%{-webkit-transform:translate(0,0);}
    100%{-webkit-transform:translate(-280%,0);}
}

@-o-keyframes afaon  /* Opera */
{
    0%{-o-transform:translate(0,0);}
    100%{-o-transform:translate(-280%,0);}
}
.afaonle{
    animation-name:afaonle;
    -webkit-animation-name:afaonle;
    -o-animation-name:afaonle;
    -moz-animation-name:afaonle;/*名称*/
}
@keyframes afaonle/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
{
    0%{transform:scale3d(.1,.1,1) translate(0,0%);opacity:0;}
    100%{transform:scale3d(1,1,1) translate(0,-210%);opacity:1;}}
@-moz-keyframes afaonle /* Firefox */
{
    0%{-moz-transform:scale3d(.1,.1,1) translate(0,0%);opacity:0;}
    100%{-moz-transform:scale3d(1,1,1) translate(0,-210%);opacity:1;}}
@-webkit-keyframes afaonle /* Safari and Chrome */
{
    0%{-webkit-transform:scale3d(.1,.1,1) translate(0,0%);opacity:0;}
    100%{-webkit-transform:scale3d(1,1,1) translate(0,-210%);opacity:1;}}
@-o-keyframes afaonle /* Opera */
{
    0%{-o-transform:scale3d(.1,.1,1) translate(0,0%);opacity:0;}
    100%{-o-transform:scale3d(1,1,1) translate(0,-210%);opacity:1;}}
/*-------------------------*/
.afatw{
    animation-name:afatw;
    -webkit-animation-name:afatw;
    -o-animation-name:afatw;
    -moz-animation-name:afatw;/*名称*/
}
@keyframes afatw/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
{
    0%{transform:translate(0,0);}
    100%{transform:translate(-120%,0);}}
@-moz-keyframes afatw /* Firefox */
{
    0%{-moz-transform:translate(0,0);}
    100%{-moz-transform:translate(-120%,0);}}
@-webkit-keyframes afatw /* Safari and Chrome */
{
    0%{-webkit-transform:translate(0,0);}
    100%{-webkit-transform:translate(-120%,0);}}
@-o-keyframes afatw/* Opera */
{
    0%{-o-transform:translate(0,0);}
    100%{-o-transform:translate(-120%,0);}}
.afaonletw{
    animation-name:afaonletw;
    -webkit-animation-name:afaonletw;
    -o-animation-name:afaonletw;
    -moz-animation-name:afaonletw;/*名称*/
}

@keyframes afaonletw/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
{
    0%{transform:scale3d(.1,.1,1) translate(0,0%);opacity:0;}
    100%{transform:scale3d(1,1,1) translate(0,-120%);opacity:1;}
}
@-moz-keyframes afaonletw /* Firefox */
{
    0%{-moz-transform:scale3d(.1,.1,1) translate(0,0%);opacity:0;}
    100%{-moz-transform:scale3d(1,1,1) translate(0,-120%);opacity:1;}
}
@-webkit-keyframes afaonletw  /* Safari and Chrome */
{
    0%{-webkit-transform:scale3d(.1,.1,1) translate(0,0%);opacity:0;}
    100%{-webkit-transform:scale3d(1,1,1) translate(0,-120%);opacity:1;}
}
@-o-keyframes afaonletw  /* Opera */
{
    0%{-o-transform:scale3d(.1,.1,1) translate(0,0%);opacity:0;}
    100%{-o-transform:scale3d(1,1,1) translate(0,-120%);opacity:1;}
}
/*---------------------------*/
.afath{
    animation-name:afath;
    -webkit-animation-name:afath;
    -o-animation-name:afath;
    -moz-animation-name:afath;/*名称*/
}
@keyframes afath/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
{
    0%{transform:translate(0,0);}
    100%{transform:translate(100%,0);}
}
@-moz-keyframes afath /* Firefox */
{
    0%{-moz-transform:translate(0,0);}
    100%{-moz-transform:translate(100%,0);}
}
@-webkit-keyframes afath /* Safari and Chrome */
{
    0%{-webkit-transform:translate(0,0);}
    100%{-webkit-transform:translate(100%,0);}
}
@-o-keyframes afath /* Opera */
{
    0%{-o-transform:translate(0,0);}
    100%{-o-transform:translate(100%,0);}
}
.afaonleth{
    animation-name:afaonleth;
    -webkit-animation-name:afaonleth;
    -o-animation-name:afaonleth;
    -moz-animation-name:afaonleth;/*名称*/
}

@keyframes afaonleth/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
{
    0%{transform:scale3d(.1,.1,1) translate(0,0%);opacity:0;}
    100%{transform:scale3d(1,1,1) translate(0,-230%);opacity:1;}
}
@-moz-keyframes afaonleth /* Firefox */
{
    0%{-moz-transform:scale3d(.1,.1,1) translate(0,0%);opacity:0;}
    100%{-moz-transform:scale3d(1,1,1) translate(0,-230%);opacity:1;}
}
@-webkit-keyframes afaonleth /* Safari and Chrome */
{
    0%{-webkit-transform:scale3d(.1,.1,1) translate(0,0%);opacity:0;}
    100%{-webkit-transform:scale3d(1,1,1) translate(0,-230%);opacity:1;}
}
@-o-keyframes afaonleth /* Opera */
{
    0%{-o-transform:scale3d(.1,.1,1) translate(0,0%);opacity:0;}
    100%{-o-transform:scale3d(1,1,1) translate(0,-230%);opacity:1;}
}
/*---------------------------*/
.afafo{
    animation-name:afafo;
    -webkit-animation-name:afafo;
    -o-animation-name:afafo;
    -moz-animation-name:afafo;/*名称*/
}
@keyframes afafo/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
{
    0%{transform:translate(0,0);}
    100%{transform:translate(240%,0);}
}
@-moz-keyframes afafo /* Firefox */
{
    0%{-moz-transform:translate(0,0);}
    100%{-moz-transform:translate(240%,0);}
}
@-webkit-keyframes afafo /* Safari and Chrome */
{
    0%{-webkit-transform:translate(0,0);}
    100%{-webkit-transform:translate(240%,0);}
}
@-o-keyframes afafo /* Opera */
{
    0%{-o-transform:translate(0,0);}
    100%{-o-transform:translate(240%,0);}
}
.afaonlefo{
    animation-name:afaonlefo;
    -webkit-animation-name:afaonlefo;
    -o-animation-name:afaonlefo;
    -moz-animation-name:afaonlefo;/*名称*/
}

@keyframes afaonlefo/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
{
    0%{transform:scale3d(.1,.1,1) translate(0,0%);opacity:0;}
    100%{transform:scale3d(1,1,1) translate(0,-130%);opacity:1;}
}
@-moz-keyframes afaonlefo /* Firefox */
{
    0%{-moz-transform:scale3d(.1,.1,1) translate(0,0%);opacity:0;}
    100%{-moz-transform:scale3d(1,1,1) translate(0,-130%);opacity:1;}
}
@-webkit-keyframes afaonlefo /* Safari and Chrome */
{
    0%{-webkit-transform:scale3d(.1,.1,1) translate(0,0%);opacity:0;}
    100%{-webkit-transform:scale3d(1,1,1) translate(0,-130%);opacity:1;}
}
@-o-keyframes afaonlefo /* Opera */
{
    0%{-o-transform:scale3d(.1,.1,1) translate(0,0%);opacity:0;}
    100%{-o-transform:scale3d(1,1,1) translate(0,-130%);opacity:1;}
}
/*------------------------------------------------------------------------------*/
@media screen and (min-width:1441px){
    .aofo li.afo_03 dl dd:nth-child(8),.aofo li.afo_04 dl dd:nth-child(9){
        display:none!important;
    }
}
@media screen and (max-width:1440px){
    .fhw li .fwon{top:42%;}
    .afibottom{margin-top:8%;}
    .aosi{margin-top:30px;}
    .designmoma-wrap{margin-top:0px;}
    .bggs{left:50%;margin-left:-70%;top:-14%;}
    .aoth{margin-top:360px;}
    .aotw li h5{padding:24px 0 12px;}
    .aotw li .joins{margin-top:-133px;}
    .aotw {margin-top:4.4%;}
    .aotwoa {margin-top:2%;}
    .aofi {margin-top:1.5%;}
    .fhw li .fwtw{padding-top:45px;}
    /*--------*/
    .ao_05 dl dd:nth-child(3){
         width:120px!important;height:120px!important;left:11%!important;bottom:266px!important;
     }
    .ao_03 dl dd:nth-child(2),.ao_03 dl dd:nth-child(3),.ao_08 dl dd:nth-child(4),.ao_06 dl dd:nth-child(2),.ao_05 dl dd:nth-child(1),.ao_06 dl dd:nth-child(2),.ao_04 dl dd:nth-child(3){
        display:none!important;
    }
    .ao_08 dl dd:nth-child(2){
        left:-9%!important;bottom:-57px!important;
    }
    .ao_07 dl dd:nth-child(4){
        top:105%!important;right:-30%!important;
    }
    .ao_01 dl dd:nth-child(1){
         left:14%!important;
     }
    .ao_01 dl dd:nth-child(4){
        left:-79%!important;top:76%!important;
    }
    .ao_07 dl dd:nth-child(1){
        right:-12%!important;top:0%!important;
    }
    /*.ao_04 dl dd:last-child{*/
        /*display:none!important;*/
    /*}*/
    /*-------------*/
    .aofo li:nth-child(2) dl dd:nth-child(7){
        left:260%!important;bottom:71%!important;width:80px!important;height:80px!important;
    }
    .aofo li:nth-child(8) dl dd:nth-child(9),.aofo li:nth-child(8) dl dd:nth-child(6),.aofo li:nth-child(4) dl dd:nth-child(5),.aofo li:nth-child(6) dl dd:nth-child(1),.aofo li:nth-child(6) dl dd:nth-child(2),.aofo li:nth-child(6) dl dd:nth-child(8){
        display:none!important;
    }
    .aofo li:nth-child(4) dl dd:nth-child(3){
        left:-96%!important;
    }
    .aofo li:nth-child(4) dl dd:nth-child(2){
        left:-126%!important;
    }
    .aofo li:nth-child(6) dl dd:nth-child(4){
        top:86%!important;
    }
    .aofo li:nth-child(6) dl dd:nth-child(3){
        bottom:60%!important;
    }
    .aofo li.afo_01 dl dd:nth-child(6){
        left:-144%!important;bottom:-25%!important;width:50px!important;height:50px!important;
    }
    .aofo li.afo_04 dl dd:nth-child(4){
        right:120%!important;top:81%!important;
    }
    /*-------------------*/
    @keyframes afaon/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
    {
        0%{transform:translate(0,0);}
        100%{transform:translate(-250%,0);}
    }

    @-moz-keyframes afaon /* Firefox */
    {
        0%{-moz-transform:translate(0,0);}
        100%{-moz-transform:translate(-250%,0);}
    }

    @-webkit-keyframes afaon /* Safari and Chrome */
    {
        0%{-webkit-transform:translate(0,0);}
        100%{-webkit-transform:translate(-250%,0);}
    }

    @-o-keyframes afaon  /* Opera */
    {
        0%{-o-transform:translate(0,0);}
        100%{-o-transform:translate(-250%,0);}
    }
    @keyframes afaonle/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
    {
        0%{transform:scale3d(.1,.1,1) translate(0,0%);}
        100%{transform:scale3d(1,1,1) translate(0,-120%);}}
    @-moz-keyframes afaonle /* Firefox */
    {
        0%{-moz-transform:scale3d(.1,.1,1) translate(0,0%);}
        100%{-moz-transform:scale3d(1,1,1) translate(0,-120%);}}
    @-webkit-keyframes afaonle /* Safari and Chrome */
    {
        0%{-webkit-transform:scale3d(.1,.1,1) translate(0,0%);}
        100%{-webkit-transform:scale3d(1,1,1) translate(0,-120%);}}
    @-o-keyframes afaonle /* Opera */
    {
        0%{-o-transform:scale3d(.1,.1,1) translate(0,0%);}
        100%{-o-transform:scale3d(1,1,1) translate(0,-120%);}}
    /*-------------------------*/
    @keyframes afatw/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
    {
        0%{transform:translate(0,0);}
        100%{transform:translate(-100%,0);}}
    @-moz-keyframes afatw /* Firefox */
    {
        0%{-moz-transform:translate(0,0);}
        100%{-moz-transform:translate(-100%,0);}}
    @-webkit-keyframes afatw /* Safari and Chrome */
    {
        0%{-webkit-transform:translate(0,0);}
        100%{-webkit-transform:translate(-100%,0);}}
    @-o-keyframes afatw/* Opera */
    {
        0%{-o-transform:translate(0,0);}
        100%{-o-transform:translate(-100%,0);}}

    @keyframes afaonletw/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
    {
        0%{transform:scale3d(.1,.1,1) translate(0,0%);}
        100%{transform:scale3d(1,1,1) translate(0,-60%);}
    }
    @-moz-keyframes afaonletw /* Firefox */
    {
        0%{-moz-transform:scale3d(.1,.1,1) translate(0,0%);}
        100%{-moz-transform:scale3d(1,1,1) translate(0,-60%);}
    }
    @-webkit-keyframes afaonletw  /* Safari and Chrome */
    {
        0%{-webkit-transform:scale3d(.1,.1,1) translate(0,0%);}
        100%{-webkit-transform:scale3d(1,1,1) translate(0,-60%);}
    }
    @-o-keyframes afaonletw  /* Opera */
    {
        0%{-o-transform:scale3d(.1,.1,1) translate(0,0%);}
        100%{-o-transform:scale3d(1,1,1) translate(0,-60%);}
    }
    /*---------------------------*/
    @keyframes afath/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
    {
        0%{transform:translate(0,0);}
        100%{transform:translate(110%,0);}
    }
    @-moz-keyframes afath /* Firefox */
    {
        0%{-moz-transform:translate(0,0);}
        100%{-moz-transform:translate(110%,0);}
    }
    @-webkit-keyframes afath /* Safari and Chrome */
    {
        0%{-webkit-transform:translate(0,0);}
        100%{-webkit-transform:translate(110%,0);}
    }
    @-o-keyframes afath /* Opera */
    {
        0%{-o-transform:translate(0,0);}
        100%{-o-transform:translate(110%,0);}
    }

    @keyframes afaonleth/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
    {
        0%{transform:scale3d(.1,.1,1) translate(0,0%);}
        100%{transform:scale3d(1,1,1) translate(0,-120%);}
    }
    @-moz-keyframes afaonleth /* Firefox */
    {
        0%{-moz-transform:scale3d(.1,.1,1) translate(0,0%);}
        100%{-moz-transform:scale3d(1,1,1) translate(0,-120%);}
    }
    @-webkit-keyframes afaonleth /* Safari and Chrome */
    {
        0%{-webkit-transform:scale3d(.1,.1,1) translate(0,0%);}
        100%{-webkit-transform:scale3d(1,1,1) translate(0,-120%);}
    }
    @-o-keyframes afaonleth /* Opera */
    {
        0%{-o-transform:scale3d(.1,.1,1) translate(0,0%);}
        100%{-o-transform:scale3d(1,1,1) translate(0,-120%);}
    }

    @keyframes afafo/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
    {
        0%{transform:translate(0,0);}
        100%{transform:translate(210%,0);}
    }
    @-moz-keyframes afafo /* Firefox */
    {
        0%{-moz-transform:translate(0,0);}
        100%{-moz-transform:translate(210%,0);}
    }
    @-webkit-keyframes afafo /* Safari and Chrome */
    {
        0%{-webkit-transform:translate(0,0);}
        100%{-webkit-transform:translate(210%,0);}
    }
    @-o-keyframes afafo /* Opera */
    {
        0%{-o-transform:translate(0,0);}
        100%{-o-transform:translate(210%,0);}
    }
@keyframes afaonlefo/*创建动画； 原理是：创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式；为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器*/
    {
        0%{transform:scale3d(.1,.1,1) translate(0,0%);}
        100%{transform:scale3d(1,1,1) translate(0,-70%);}
    }
    @-moz-keyframes afaonlefo /* Firefox */
    {
        0%{-moz-transform:scale3d(.1,.1,1) translate(0,0%);}
        100%{-moz-transform:scale3d(1,1,1) translate(0,-70%);}
    }
    @-webkit-keyframes afaonlefo /* Safari and Chrome */
    {
        0%{-webkit-transform:scale3d(.1,.1,1) translate(0,0%);}
        100%{-webkit-transform:scale3d(1,1,1) translate(0,-70%);}
    }
    @-o-keyframes afaonlefo /* Opera */
    {
        0%{-o-transform:scale3d(.1,.1,1) translate(0,0%);}
        100%{-o-transform:scale3d(1,1,1) translate(0,-70%);}
    }
}