@charset "utf-8";
/* 20180118 by fanbo */
body{ background:#2e3337; font-size: 16px;}

.back_dark{ background-color:#1e2326; }
.back_white{ background-color:#fff; }

.banner{ color:#fff; position: relative;}
.banner .b_g{ width: 956px; height:100%; background:url(../spimages/ban_bj_g.png) center 0 no-repeat; display: block; margin:0 auto; animation: openness 3s linear infinite; -webkit-animation: openness 3s linear infinite;}
.banner .animat{ background:#df4c00 url(../spimages/banner_bj.jpg) center 0 no-repeat; height: 841px; overflow: hidden; position: relative;}
.banner .animat .adorn{ width: 28px; height: 80px; position: absolute; left: 50%; top: 100%; background: url(../spimages/ban_bj_zs.png) no-repeat; animation:up 10s linear infinite; -webkit-animation:up 10s linear infinite;}
.banner .animat .adorn01{ margin-left:-500px; animation-delay:2.5s;}
.banner .animat .adorn02{ margin-left:-434px; animation-delay:6s;}
.banner .animat .adorn03{ margin-left:-125px; }
.banner .animat .adorn04{ margin-left:256px; animation-delay:1s;}
.banner .animat .adorn05{ margin-left:414px; animation-delay:5s;}
.banner .animat .adorn06{ width: 541px; height: 147px; background: url(../spimages/ban_bj_zs02.png) no-repeat; position: absolute; left: 50%; bottom:0; margin: 0 0 330px -289.5px;}
.banner .animat .b_text{ width: 553px; height: 606px; background:url(../spimages/ban_text.png) no-repeat; position: absolute; top:0; left: 50%; margin-left:-271.5px; }
.banner .animat .q{ width: 370px; height: 370px; background: url(../spimages/ban_icon_g.png) no-repeat; position: absolute; top: 0; left: 50%; margin-left: -185px; animation: openness 3s linear infinite; -webkit-animation: openness 3s linear infinite;}
.banner .animat .q_icon{ width: 138px; height: 129px; background: url(../spimages/ban_icon.png) no-repeat; position: absolute; top: 125px; left: 50%; margin-left: -73px;}
.banner .animat .qqiu{ position: absolute; top:0; left: 50%;}
.banner .animat .qqiu i{ position: absolute; top:50%; left: 0; right: 0; margin:0 auto; background:url(../spimages/ban_icon_orter.png) no-repeat;}
.banner .animat .qqiu01{ width: 87px; height: 127px; background: url(../spimages/ban_qq01.png) no-repeat; }
.banner .animat .qqiu02{ width: 115px; height: 165px; background: url(../spimages/ban_qq02.png) no-repeat; }
.banner .animat .qqiu03{ width: 115px; height: 165px; background: url(../spimages/ban_qq03.png) no-repeat; }
.banner .animat .qqiu001{ margin:190px 0 0 -600px; animation:ghostUpdown 7s linear infinite; -webkit-animation:ghostUpdown 7s linear infinite;}
.banner .animat .qqiu001 i{ width: 23px; height: 23px; margin-top:-30px; }
.banner .animat .qqiu002{ margin:210px 0 0 180px; animation:ghostUpdown 7s linear infinite; -webkit-animation:ghostUpdown 7s linear infinite;}
.banner .animat .qqiu002 i{ width: 23px; height: 19px; margin-top:-28px; background-position-y:-33px; }
.banner .animat .qqiu003{ margin:200px 0 0 480px; animation:ghostUpdown 6s linear infinite; -webkit-animation:ghostUpdown 6s linear infinite;}
.banner .animat .qqiu003 i{ width: 31px; height: 31px; margin-top:-40px; background-position-y:-62px; }
.banner .animat .qqiu004{ margin:40px 0 0 -260px; animation:ghostUpdown 5s linear infinite; -webkit-animation:ghostUpdown 5s linear infinite;}
.banner .animat .qqiu004 i{ width: 27px; height: 25px; margin-top:-35px; background-position-y:-103px; }
.banner .animat .qqiu005{ margin:220px 0 0 -420px; animation:ghostUpdown 4s linear infinite; -webkit-animation:ghostUpdown 4s linear infinite;}
.banner .animat .qqiu005 i{ width: 26px; height: 26px; margin-top:-40px; background-position-y:-138px; }
.banner .animat .qqiu006{ margin:70px 0 0 320px; animation:ghostUpdown 5s linear infinite; -webkit-animation:ghostUpdown 5s linear infinite;}
.banner .animat .qqiu006 i{ width: 29px; height: 25px; margin-top:-38px; background-position-y:-174px; }
.banner .con{ position: absolute; left: 0; top: 0; right: 0; z-index: 2;}
.banner .text{ width: 630px; margin:95px auto 0; background:url(../spimages/banner_t_bj.png) no-repeat; text-align: center;}
.banner .text .h2{ padding-top: 30px; height: 105px; overflow: hidden; position: relative;}
.banner .text .h2 h2{ position: absolute; left: 0; right: 0; top:-105px; font-size: 79.5px; opacity: 0;}
.banner .si-hidden{ -webkit-animation: slide-out 0.6s; -moz-animation: slide-out 0.6s; animation: slide-out 0.6s; }
.banner .text .h2 h2.si-visible{ top: 30px; opacity: 1; -webkit-animation: slide-in 0.6s; -moz-animation: slide-in 0.6s; animation: slide-in 0.6s; }
.banner .text h3{ font-size: 28.6px; font-weight: 400; padding-top: 2px;}
.banner .text p{ font-size: 14px; line-height: 23px; padding: 32px 50px 0;}
.banner .odds{ text-align: center; padding-top: 40px;}

.big_data{ border-top:1px solid #fffbf6; background: #fff; height: 625px;}
.title{ text-align: center; padding-top:60px;}
.title h2{ font-size: 30px; color:#2e3337; font-weight: 400;}
.title p{ color:#999; padding-top:17px;}
.big_data .main{ padding-top:80px; }
.big_data ul{ text-align: center; font-size: 0; }
.big_data li{ width: 16.666666666%; display: inline-block; vertical-align: top; _display: inline; *zoom:1; position: relative; text-align: center; height: 285px; border-radius: 3px; margin:0 1.3%;}
.box_super .bd{ display: none; }
.big_data .tubiao{ position: relative; height: 82px; padding-top:60px;}
.big_data .tubiao span{ display: block; margin:0 auto;}
.big_data .tubiao .icon{ width: 61px; height: 60px; background: url(../spimages/data_icon.png) center 0 no-repeat; position: relative; z-index: 2; position: relative; z-index: 1;}
.big_data li.item02 .tubiao .icon{ background-position: center -60px; }
.big_data li.item03 .tubiao .icon{ background-position: center -120px; }
.big_data li.item04 .tubiao .icon{ background-position: center -180px; }
.big_data li.item05 .tubiao .icon{ background-position: center -240px; }
.big_data li.item06 .tubiao .icon{ background-position: center -300px; }
.big_data .tubiao .gyun{ width: 121px; height: 121px; top: 36px; left: 0; right: 0; margin: 0 auto; position: absolute;}
.big_data li h2{ color: #666; font-weight: 700; font-size: 24px; padding: 2px 0 0 0;}
.big_data li p{ font-size: 16px; color: #b2b2b2; line-height: 22px; padding-top: 4px;}
.big_data li.on{ background: #fb6304; box-shadow: 0 0 10px rgba(0, 0, 0, 0.28); transition: all .1s;}
.big_data li.on .tubiao{ background: url(../spimages/data_bj_g.png) center 0 no-repeat; padding-top:40px; height: 144px;}
.big_data li.on .tubiao .icon{ width: 66px; height: 66px; background: url(../spimages/data_icon_h.png) no-repeat; margin-top: 23px; animation:ghostUpdown 3s linear infinite; -webkit-animation:ghostUpdown 3s linear infinite;}
.big_data li.item02.on .tubiao .icon{ background-position: center -66px; }
.big_data li.item03.on .tubiao .icon{ background-position: center -132px; }
.big_data li.item04.on .tubiao .icon{ background-position: center -198px; }
.big_data li.item05.on .tubiao .icon{ background-position: center -264px; }
.big_data li.item06.on .tubiao .icon{ background-position: center -330px; }
.big_data li.on .tubiao .gyun{ background: url(../spimages/icon_q.png) no-repeat; transition: all .1s; animation:ghostOpUpdown 3s linear infinite; -webkit-animation:ghostOpUpdown 3s linear infinite;}
.big_data li.on h2{ color: #fff; transition: all .3s;}
.big_data li.on p{color: #fff; transition: all .3s;}

.advantage{ height: 866px; background:#051314 url(../spimages/ys_bj.jpg) center 0 no-repeat; position: relative;}
.back_dark .title h2{ color:#fff; }
.back_dark .title p{ color:#b3b3b3; }
.advantage .main{ position: relative; }
.advantage .yuansu{ width: 617px; height: 289px; position: absolute; margin-left: -308.5px; left: 50%; top: 187px;}
.advantage .yuansu .dqiu{ position: absolute; left: 160px; right: 0; top: 0; width: 320px; height: 314px; background: url(../spimages/ys_dqiu.png) no-repeat; z-index: 1; }
.advantage .yuansu .dqiu_i{ position: absolute; left: 250px; right: 0; top: 87px; width: 144px; height: 137px; background: url(../spimages/ys_dqiu_i.png) no-repeat; z-index: 1; }
.advantage .yuansu .gji{ position: absolute; left: 0; right: 0; top: 125px; height: 81px; background:url(../spimages/ys_gji.png) no-repeat; z-index: 2;}
.advantage .yuansu .xq_box{ width: 617px; height: 617px; position: absolute; margin-left: -308.5px; left: 50%; top: -143px; z-index: 3; -webkit-transform: rotateX(82.5deg) rotateY(0deg); -moz-transform: rotateX(82.5deg) rotateY(0deg); -o-transform: rotateX(82.5deg) rotateY(0deg); -ms-transform: rotateX(82.5deg) rotateY(0deg); transform: rotateX(82.5deg) rotateY(0deg);}
.advantage .yuansu .ball_base{ position: absolute; top: 0; width: 21px; height: 21px; -webkit-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px); -o-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px); -moz-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px); -ms-transform: rotateX(-90deg) rotateY(0deg) translateY(-70px); transform: rotateX(-90deg) rotateY(0deg) translateY(0);}
.advantage .yuansu .ball_base .xq{ -webkit-animation: cir1 28s linear 0s infinite; -o-animation: cir1 28s linear 0s infinite; -ms-animation: cir1 28s linear 0s infinite; -moz-animation: cir1 28s linear 0s infinite; animation: cir1 28s linear 0s infinite; }
.advantage .yuansu .ball__1{-webkit-animation: cir 28s linear 0s infinite; -o-animation: cir 28s linear 0s infinite; -ms-animation: cir 28s linear 0s infinite; -mozanimation: cir 28s linear 0s infinite; animation: cir 28s linear 0s infinite; }
.advantage .yuansu .ball_1{ left: 230px;}
.advantage .yuansu .ball__2{ width: 491px; height: 491px; margin-left: -235px; top: -85px; -webkit-animation: cir02 28s linear 0s infinite; -o-animation: cir02 28s linear 0s infinite; -ms-animation: cir02 28s linear 0s infinite; -mozanimation: cir02 28s linear 0s infinite; animation: cir02 28s linear infinite; }
.advantage .yuansu .ball_2{ top:475px; right: 230px;}
.advantage .yuansu .ball__3{ width: 344px; height: 344px; margin-left: -166px; top: -14px; -webkit-animation: cir03 28s linear 0s infinite; -o-animation: cir03 28s linear 0s infinite; -ms-animation: cir03 28s linear 0s infinite; -mozanimation: cir03 28s linear 0s infinite; animation: cir03 28s linear infinite; }
.advantage .yuansu .ball_3{ left: 230px;}
.advantage .yuansu .xq{ width: 21px; height: 21px; background: url(../spimages/ys_sxq.png) no-repeat; position: absolute;}
.advantage .yuansu .xq01{ background-position-y: -0px }
.advantage .yuansu .xq02{ background-position-y: -21px }
.advantage .yuansu .xq03{ background-position-y: -42px }
.advantage .item{}
.advantage .item li{ position: absolute; left:50%;}
.advantage .item li a{ padding: 6px; border:1px solid rgba(0, 0, 0, 0); display: block; border-radius: 50%; position: relative; z-index: 2;}
.advantage .item li i{ background: url(../spimages/ys_q.png) no-repeat; display: block;}
.advantage .item li o{ background: url(../spimages/ys_q_icon.png) no-repeat; position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto;}
.advantage .item li span{ position: absolute; top: -57px; left: 50%; margin-left: -32px; font-size: 16px; color: #fff; white-space: nowrap; opacity: 0; visibility: hidden; animation-delay:.6s;}
.advantage .item li hr {border: 0; width: 1px; height: 0; position: absolute; left: 50%; top: 0; background: #25646b; animation-delay:.3s;}
.advantage .item li.item01 { top: 159px; margin-left: 190px;}
.advantage .item li.item01 i{ width: 77px; height: 77px;}
.advantage .item li.item01 o{ width: 23px; height: 23px;}
.advantage .item li.item02 { top: 410px; margin-left: 300px;}
.advantage .item li.item02 i{ width: 100px; height: 100px; background-position-y: -77px;}
.advantage .item li.item02 o{ width: 33px; height: 27px; background-position-y: -23px;}
.advantage .item li.item03 { top: 476px; margin-left: -170px;}
.advantage .item li.item03 i{ width: 100px; height: 100px; background-position-y: -77px;}
.advantage .item li.item03 o{ width: 22px; height: 35px; background-position-y: -51px;}
.advantage .item li.item04 { top: 190px; margin-left: -370px;}
.advantage .item li.item04 i{ width: 120px; height: 120px; background-position-y: -177px;}
.advantage .item li.item04 o{ width: 40px; height: 36px; background-position-y: -86px;}
.advantage .item em{ opacity: 0; }
.advantage .item em,.advantage .item em:before,.advantage .item em:after{ position: absolute; left: 0; right: 0; top: 0; bottom: 0; border-radius: 50%;}
.advantage .item em:before,.advantage .item em:after{ content: ""; border:1px solid #263d40;}
.advantage .item li.on a{ border-color:#263d40; transition: all .3s;}
.advantage .item li.on em{ opacity: 1; transition: all .3s;}
.advantage .item li.on em:before,.advantage .item li.on em:after{ -webkit-animation: scaleout 1.3s infinite ease-in-out; animation: scaleout 1.3s infinite ease-in-out;}
.advantage .item li.on em:after{ animation-delay:.3s;}
.advantage .item li.on span{ opacity: 1; visibility: visible; transition: all .3s;}
.advantage .item li.on hr{ height: 34px; top: -34px; transition: all .3s;}
.advantage .item .tubiao span{ position: absolute; top: 0; left: 0; right: 0; bottom:0; opacity: .5; transition: all .3s;}
.advantage .item li h2{ font-size: 20px; color:#2bd0a2; line-height: 1.1; font-weight: 400; padding-top:6px;}
.advantage .con{ position: absolute; top: 50%; left: 50%; width: 960px; height: 526px; margin: -263px 0 0 -480px; overflow: hidden; visibility: hidden; z-index: 4; transition-delay: .9s;}
.advantage .con_box{ position: absolute; top: 0; left: 100%; width: 100%; height: 100%; background: #181918; transition: transform 0.2s; transition-delay: .4s;}
.advantage .con .close{ width: 34px; height: 34px; background: url(../spimages/page_icon.png) -148px -87px no-repeat; position: absolute; top: 38px; right: 24px; visibility: hidden; opacity: 0; transition: all 0.5s; z-index: 1;}
.advantage .con ul{ opacity: 0; transition: all 0.5s; transform: translateY(10%); }
.advantage .con li{ padding: 67px 61px; padding-bottom: 0; }
.advantage .con .box{}
.advantage .con .box img{ vertical-align: top; margin-bottom: 33px; width: 435px; height: 240px; }
.advantage .con .box h2{ font-size: 30px; color: #fb6304; line-height: 1.1; position: relative; padding-bottom: 50px; }
.advantage .con .box h2 em{ width: 15px; height: 15px; border: 3px solid #fb6304; border-radius: 50%; position: absolute; left: -36px; bottom: 15px; }
.advantage .con .box h2 i{ width: 44px; height: 6px; background: #fb6304; position: absolute; left: 0; bottom: 22px; }
.advantage .con .box p{ font-size: 16px; color: #fff; line-height: 26px; padding-right: 300px; }
.advantage .con.show{ visibility: visible; transition-delay: .0s;}
.advantage .con.show .con_box{ transform: translate3d(-100%,0,0); transition-delay: .0s;}
.advantage .con.show .close{ opacity: 1; visibility: visible; transition-delay: .3s;}
.advantage .con.show ul{ opacity: 1; transform: translateY(0); transition-delay: .3s;}

.matter .title h2{ color:#3d3d3d; }
.matter .title p{ color:#b2b2b2; }

.matter{ height: 860px; }
.matter .main{ text-align: center; padding-top:57px;}
.matter .main .item ul{ display: inline-block; vertical-align: top; _display: inline; *zoom:1;}
.matter .main li{ width: 281px; height: 280px; float: left; border:1px solid #f1f1f1; margin:0 10px 20px; transition: all .3s;}
.matter .main li.item01,.matter .main li.item05{ margin-left:0; }
.matter .main li.item04,.matter .main li.item08{ margin-right:0; }
.matter .main li i{ width: 35px; height: 36px; background: url(../spimages/matter_icon.png) no-repeat; display: block; margin:60px auto 0; }
.matter .main li.item02 i{ background-position: 0 -36px; }
.matter .main li.item03 i{ background-position: 0 -72px; }
.matter .main li.item04 i{ background-position: 0 -108px; }
.matter .main li.item05 i{ background-position: 0 -144px; }
.matter .main li.item06 i{ background-position: 0 -180px; }
.matter .main li.item07 i{ background-position: 0 -216px; }
.matter .main li.item08 i{ background-position: 0 -252px; }
.matter .main li h2{ font-size: 18px; color: #333; line-height: 1.1; padding: 18px 0 15px; font-weight: 400;}
.matter .main li span{ width: 40px; height: 1px; display: block; margin:0 auto; background: #f1f1f1;}
.matter .main li p{ font-size: 14px; color: #999; padding: 20px 30px 0; line-height: 26px;}
.matter .main li:hover{ -webkit-box-shadow:0px 3px 8px rgba(0, 0, 0, 0.05); -moz-box-shadow:0px 3px 8px rgba(0, 0, 0, 0.05); box-shadow:0px 3px 8px rgba(0, 0, 0, 0.05); transform: translateY(-5px);}

.distributed{ height: 930px; }
.distributed .main{ padding-top:50px; text-align: center;}
.distributed .main img{ vertical-align: top; }
.distributed .map {position: relative; }
.news_tishi {position: absolute; left: 50%; top: 50%; visibility: hidden; opacity: 0; -webkit-transform: translateY(-30%); -moz-transform: translateY(-30%); transform: translateY(-30%); -webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s;}
.news_tishi .bzhu {width: 9px; height: 30px; position: relative; }
.news_tishi .bzhu span {width: 9px; height: 9px; background: url(../spimages/page_icon.png) -123px -88px no-repeat; position: absolute; left: 0; bottom: -4px; }
.news_tishi .bzhu i {position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; overflow: hidden; background: #00b477; }
.news_tishi .text {background: rgba(0, 180, 119, .7); height: 30px; line-height: 30px; border-radius: 30px; padding: 0 13px; color: #fff; font-size: 14px; white-space: nowrap; position: absolute; right: -16px; top: -23px; }
.news_tishi .text span {color: #f6ff00; padding-right: 6px; }
.news_tishi.show{ visibility: visible; opacity: 1; -webkit-transform: rotateY(0); -moz-transform: rotateY(0); transform: rotateY(0);}
.tishi01{ margin:-105px 0 0 165px; }
.tishi02{ margin:-68px 0 0 110px; }
.tishi03{ margin:-45px 0 0 172px; }
.tishi04{ margin:-10px 0 0 125px; }
.tishi05{ margin:16px 0 0 216px; }
.tishi06{ margin:74px 0 0 217px; }
.tishi07{ margin:87px 0 0 26px; }
.tishi08{ margin:113px 0 0 116px; }
.tishi09{ margin:182px 0 0 188px; }
.tishi010{ margin:208px 0 0 120px; }
.tishi011{ margin:45px 0 0 176px; }
.tishi012{ margin:56px 0 0 235px; }
.tishi013{ margin:70px 0 0 135px; }
.tishi014{ margin:104px 0 0 157px; }
.tishi015{ margin:143px 0 0 28px; }
.tishi016{ margin:167px 0 0 78px; }
.tishi017{ margin:172px 0 0 -27px; }
.tishi018{ margin:-180px 0 0 307px; }
.tishi019{ margin:-92px 0 0 175px; }
.tishi020{ margin:-79px 0 0 22px; }
.tishi021{ margin:-71px 0 0 137px; }
.tishi022{ margin:-43px 0 0 -41px; }
.tishi023{ margin:-1px 0 0 60px; }
.tishi024{ margin:67px 0 0 -9px; }
.tishi025{ margin:-215px 0 0 307px; }
.tishi026{ margin:-178px 0 0 -238px; }
.tishi027{ margin:-142px 0 0 262px; }
.tishi028{ margin:-123px 0 0 97px; }
.tishi029{ margin:-103px 0 0 -90px; }
.tishi030{ margin:80px 0 0 -190px; }

.u_p3d {-webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; }
@keyframes ghostUpdown{
	0%{ transform: translateY(0);}
	50%{ transform: translateY(-15px);}
	100%{ transform: translateY(0);}
}
@-webkit-keyframes ghostUpdown{
	0%{ transform: translateY(0);}
	50%{ transform: translateY(-15px);}
	100%{ transform: translateY(0);}
}
@keyframes ghostUpdown02{
	0%{ transform: translateY(0);}
	50%{ transform: translateY(-6px);}
	100%{ transform: translateY(0);}
}
@-webkit-keyframes ghostUpdown02{
	0%{ transform: translateY(0);}
	50%{ transform: translateY(-6px);}
	100%{ transform: translateY(0);}
}
@keyframes ghostOpUpdown{
	0%{ transform: translateY(0); opacity: 1;}
	50%{ transform: translateY(-10px); opacity: .7;}
	100%{ transform: translateY(0); opacity: 1;}
}
@-webkit-keyframes ghostOpUpdown{
	0%{ transform: translateY(0); opacity: 1;}
	50%{ transform: translateY(-10px); opacity: .7;}
	100%{ transform: translateY(0); opacity: 1;}
}
@keyframes openness{
	0%{ opacity: 1;}
	50%{ opacity: .6;}
	100%{ opacity: 1;}
}
@-webkit-keyframes openness{
	0%{ opacity: 1;}
	50%{ opacity: .6;}
	100%{ opacity: 1;}
}
@keyframes up{
	100%{ transform: translateY(-1000px);}
}
@-webkit-keyframes up{
	100%{ transform: translateY(-1000px);}
}
@-webkit-keyframes scaleout {
    0% { -webkit-transform: scale(1.0);}
    30% { opacity: 1;}
    100% { -webkit-transform: scale(1.4); opacity: 0;}
}
@keyframes scaleout {
    0% { transform: scale(1.0);}
    30% { opacity: 1;}
    100% { transform: scale(1.4); opacity: 0;}
}

@keyframes cir {
    0% { transform: rotateX(82.5deg) rotateY(0) rotateZ(0deg); z-index: 0;}
    12% {z-index: 2;}
    13% {z-index: 3;}
    87% {z-index: 2;}
    88% {z-index: 0;}
    100% {transform: rotateX(82.5deg) rotateY(0) rotateZ(-360deg);z-index: 0}
}
@-webkit-keyframes cir {
    0% {-webkit-transform: rotateX(82.5deg) rotateY(0) rotateZ(0deg)}
    12% {z-index: 2;}
    13% {z-index: 3;}
    87% {z-index: 2;}
    88% {z-index: 0;}
    100% {-webkit-transform: rotateX(82.5deg) rotateY(0) rotateZ(-360deg)}
}
@keyframes cir02 {
    0% { transform: rotateX(82.5deg) rotateY(0) rotateZ(0deg); z-index: 3;}
    39% { z-index: 3;}
    40% { z-index: 0;}
    60% { z-index: 0;}
    61% { z-index: 3;}
    100% {transform: rotateX(82.5deg) rotateY(0) rotateZ(-360deg); z-index: 3;}
}
@-webkit-keyframes cir02 {
    0% {-webkit-transform: rotateX(82.5deg) rotateY(0)}
    100% {-webkit-transform: rotateX(82.5deg) rotateY(0) rotateZ(-360deg)}
}
@keyframes cir03 {
    0% { transform: rotateX(82.5deg) rotateY(0) rotateZ(0deg); z-index: 0;}
    20% {z-index: 0;}
    21% {z-index: 3;}
    87% {z-index: 2;}
    88% {z-index: 0;}
    100% {transform: rotateX(82.5deg) rotateY(0) rotateZ(-360deg);z-index: 0}
}
@-webkit-keyframes cir03 {
    0% {-webkit-transform: rotateX(82.5deg) rotateY(0) rotateZ(0deg);}
    10% {z-index: 0;}
    13% {z-index: 3;}
    87% {z-index: 2;}
    88% {z-index: 0;}
    100% {-webkit-transform: rotateX(82.5deg) rotateY(0) rotateZ(-360deg)}
}
@-webkit-keyframes cir1 {
    0% {-webkit-transform: rotateY(0deg) rotateZ(10deg);}
    100% {-webkit-transform: rotateY(-360deg) rotateZ(10deg)}
}
@keyframes cir1 {
    0% {transform: rotateY(0deg) rotateZ(10deg)}
    100% {transform: rotateY(-360deg) rotateZ(10deg)}
}