Skip to content

Instantly share code, notes, and snippets.

@mamboer

mamboer/wr2014.css

Created December 10, 2014 11:44
Show Gist options
  • Save mamboer/0ca152a921d5697d0cbd to your computer and use it in GitHub Desktop.
Save mamboer/0ca152a921d5697d0cbd to your computer and use it in GitHub Desktop.
Download ZIP
css for webrebuild.org/2014
Raw
wr2014.css
/*!
Animate.css - http://daneden.me/animate
Licensed under the MIT license - http://opensource.org/licenses/MIT
Copyright (c) 2013 Daniel Eden
*/
.animated,.conf .conf-time,.conf .conf-title .conf-point,.conf .conf-title .conf-text,.conf .conf-title .conf-ver,.intro .slogan .slogan-bg,.intro .slogan .slogan-drops,.intro .slogan .slogan-text,.intro .slogan .slogan-time,.intro .slogan-tips,.talk .talk-title .talk-circle,.talk .talk-title .talk-text span,.topical .topical-content,.topical .topical-title .topical-circle,.topical .topical-title .topical-text {
-webkit-animation-duration:1s;
animation-duration:1s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
}
.animated.infinite,.conf .conf-title .infinite.conf-point,.conf .conf-title .infinite.conf-text,.conf .conf-title .infinite.conf-ver,.conf .infinite.conf-time,.intro .infinite.slogan-tips,.intro .slogan .infinite.slogan-bg,.intro .slogan .infinite.slogan-drops,.intro .slogan .infinite.slogan-text,.intro .slogan .infinite.slogan-time,.talk .talk-title .infinite.talk-circle,.talk .talk-title .talk-text span.infinite,.topical .infinite.topical-content,.topical .topical-title .infinite.topical-circle,.topical .topical-title .infinite.topical-text {
-webkit-animation-iteration-count:infinite;
animation-iteration-count:infinite
}
.animated.hinge,.conf .conf-title .hinge.conf-point,.conf .conf-title .hinge.conf-text,.conf .conf-title .hinge.conf-ver,.conf .hinge.conf-time,.intro .hinge.slogan-tips,.intro .slogan .hinge.slogan-bg,.intro .slogan .hinge.slogan-drops,.intro .slogan .hinge.slogan-text,.intro .slogan .hinge.slogan-time,.talk .talk-title .hinge.talk-circle,.talk .talk-title .talk-text span.hinge,.topical .hinge.topical-content,.topical .topical-title .hinge.topical-circle,.topical .topical-title .hinge.topical-text {
-webkit-animation-duration:2s;
animation-duration:2s
}
@-webkit-keyframes bounce {
0%,100%,20%,53%,80% {
transition-timing-function:cubic-bezier(0.215,.61,.355,1);
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0)
}
40%,43% {
transition-timing-function:cubic-bezier(0.755,.05,.855,.06);
-webkit-transform:translate3d(0,-30px,0);
transform:translate3d(0,-30px,0)
}
70% {
transition-timing-function:cubic-bezier(0.755,.05,.855,.06);
-webkit-transform:translate3d(0,-15px,0);
transform:translate3d(0,-15px,0)
}
90% {
-webkit-transform:translate3d(0,-4px,0);
transform:translate3d(0,-4px,0)
}
}
@keyframes bounce {
0%,100%,20%,53%,80% {
transition-timing-function:cubic-bezier(0.215,.61,.355,1);
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0)
}
40%,43% {
transition-timing-function:cubic-bezier(0.755,.05,.855,.06);
-webkit-transform:translate3d(0,-30px,0);
transform:translate3d(0,-30px,0)
}
70% {
transition-timing-function:cubic-bezier(0.755,.05,.855,.06);
-webkit-transform:translate3d(0,-15px,0);
transform:translate3d(0,-15px,0)
}
90% {
-webkit-transform:translate3d(0,-4px,0);
transform:translate3d(0,-4px,0)
}
}
.bounce {
-webkit-animation-name:bounce;
animation-name:bounce;
-webkit-transform-origin:center bottom;
transform-origin:center bottom
}
@-webkit-keyframes flash {
0%,100%,50% {
opacity:1
}
25%,75% {
opacity:0
}
}
@keyframes flash {
0%,100%,50% {
opacity:1
}
25%,75% {
opacity:0
}
}
.flash {
-webkit-animation-name:flash;
animation-name:flash
}
@-webkit-keyframes pulse {
0% {
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
}
50% {
-webkit-transform:scale3d(1.05,1.05,1.05);
transform:scale3d(1.05,1.05,1.05)
}
100% {
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
}
}
@keyframes pulse {
0% {
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
}
50% {
-webkit-transform:scale3d(1.05,1.05,1.05);
transform:scale3d(1.05,1.05,1.05)
}
100% {
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
}
}
.pulse {
-webkit-animation-name:pulse;
animation-name:pulse
}
@-webkit-keyframes rubberBand {
0% {
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
}
30% {
-webkit-transform:scale3d(1.25,.75,1);
transform:scale3d(1.25,.75,1)
}
40% {
-webkit-transform:scale3d(0.75,1.25,1);
transform:scale3d(0.75,1.25,1)
}
50% {
-webkit-transform:scale3d(1.15,.85,1);
transform:scale3d(1.15,.85,1)
}
65% {
-webkit-transform:scale3d(0.95,1.05,1);
transform:scale3d(0.95,1.05,1)
}
75% {
-webkit-transform:scale3d(1.05,.95,1);
transform:scale3d(1.05,.95,1)
}
100% {
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
}
}
@keyframes rubberBand {
0% {
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
}
30% {
-webkit-transform:scale3d(1.25,.75,1);
transform:scale3d(1.25,.75,1)
}
40% {
-webkit-transform:scale3d(0.75,1.25,1);
transform:scale3d(0.75,1.25,1)
}
50% {
-webkit-transform:scale3d(1.15,.85,1);
transform:scale3d(1.15,.85,1)
}
65% {
-webkit-transform:scale3d(0.95,1.05,1);
transform:scale3d(0.95,1.05,1)
}
75% {
-webkit-transform:scale3d(1.05,.95,1);
transform:scale3d(1.05,.95,1)
}
100% {
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
}
}
.rubberBand {
-webkit-animation-name:rubberBand;
animation-name:rubberBand
}
@-webkit-keyframes shake {
0%,100% {
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0)
}
10%,30%,50%,70%,90% {
-webkit-transform:translate3d(-10px,0,0);
transform:translate3d(-10px,0,0)
}
20%,40%,60%,80% {
-webkit-transform:translate3d(10px,0,0);
transform:translate3d(10px,0,0)
}
}
@keyframes shake {
0%,100% {
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0)
}
10%,30%,50%,70%,90% {
-webkit-transform:translate3d(-10px,0,0);
transform:translate3d(-10px,0,0)
}
20%,40%,60%,80% {
-webkit-transform:translate3d(10px,0,0);
transform:translate3d(10px,0,0)
}
}
.shake {
-webkit-animation-name:shake;
animation-name:shake
}
@-webkit-keyframes swing {
20% {
-webkit-transform:rotate3d(0,0,1,15deg);
transform:rotate3d(0,0,1,15deg)
}
40% {
-webkit-transform:rotate3d(0,0,1,-10deg);
transform:rotate3d(0,0,1,-10deg)
}
60% {
-webkit-transform:rotate3d(0,0,1,5deg);
transform:rotate3d(0,0,1,5deg)
}
80% {
-webkit-transform:rotate3d(0,0,1,-5deg);
transform:rotate3d(0,0,1,-5deg)
}
100% {
-webkit-transform:rotate3d(0,0,1,0deg);
transform:rotate3d(0,0,1,0deg)
}
}
@keyframes swing {
20% {
-webkit-transform:rotate3d(0,0,1,15deg);
transform:rotate3d(0,0,1,15deg)
}
40% {
-webkit-transform:rotate3d(0,0,1,-10deg);
transform:rotate3d(0,0,1,-10deg)
}
60% {
-webkit-transform:rotate3d(0,0,1,5deg);
transform:rotate3d(0,0,1,5deg)
}
80% {
-webkit-transform:rotate3d(0,0,1,-5deg);
transform:rotate3d(0,0,1,-5deg)
}
100% {
-webkit-transform:rotate3d(0,0,1,0deg);
transform:rotate3d(0,0,1,0deg)
}
}
.swing {
-webkit-transform-origin:top center;
transform-origin:top center;
-webkit-animation-name:swing;
animation-name:swing
}
@-webkit-keyframes tada {
0% {
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
}
10%,20% {
-webkit-transform:scale3d(0.9,.9,.9) rotate3d(0,0,1,-3deg);
transform:scale3d(0.9,.9,.9) rotate3d(0,0,1,-3deg)
}
30%,50%,70%,90% {
-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
}
40%,60%,80% {
-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
}
100% {
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
}
}
@keyframes tada {
0% {
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
}
10%,20% {
-webkit-transform:scale3d(0.9,.9,.9) rotate3d(0,0,1,-3deg);
transform:scale3d(0.9,.9,.9) rotate3d(0,0,1,-3deg)
}
30%,50%,70%,90% {
-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg)
}
40%,60%,80% {
-webkit-transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
transform:scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg)
}
100% {
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
}
}
.tada {
-webkit-animation-name:tada;
animation-name:tada
}
@-webkit-keyframes wobble {
0% {
-webkit-transform:none;
transform:none
}
15% {
-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)
}
30% {
-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);
transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)
}
45% {
-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)
}
60% {
-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);
transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)
}
75% {
-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)
}
100% {
-webkit-transform:none;
transform:none
}
}
@keyframes wobble {
0% {
-webkit-transform:none;
transform:none
}
15% {
-webkit-transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg);
transform:translate3d(-25%,0,0) rotate3d(0,0,1,-5deg)
}
30% {
-webkit-transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg);
transform:translate3d(20%,0,0) rotate3d(0,0,1,3deg)
}
45% {
-webkit-transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg);
transform:translate3d(-15%,0,0) rotate3d(0,0,1,-3deg)
}
60% {
-webkit-transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg);
transform:translate3d(10%,0,0) rotate3d(0,0,1,2deg)
}
75% {
-webkit-transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg);
transform:translate3d(-5%,0,0) rotate3d(0,0,1,-1deg)
}
100% {
-webkit-transform:none;
transform:none
}
}
.wobble {
-webkit-animation-name:wobble;
animation-name:wobble
}
@-webkit-keyframes bounceIn {
0%,100%,20%,40%,60%,80% {
transition-timing-function:cubic-bezier(0.215,.61,.355,1)
}
0% {
opacity:0;
-webkit-transform:scale3d(0.3,.3,.3);
transform:scale3d(0.3,.3,.3)
}
20% {
-webkit-transform:scale3d(1.1,1.1,1.1);
transform:scale3d(1.1,1.1,1.1)
}
40% {
-webkit-transform:scale3d(0.9,.9,.9);
transform:scale3d(0.9,.9,.9)
}
60% {
opacity:1;
-webkit-transform:scale3d(1.03,1.03,1.03);
transform:scale3d(1.03,1.03,1.03)
}
80% {
-webkit-transform:scale3d(0.97,.97,.97);
transform:scale3d(0.97,.97,.97)
}
100% {
opacity:1;
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
}
}
@keyframes bounceIn {
0%,100%,20%,40%,60%,80% {
transition-timing-function:cubic-bezier(0.215,.61,.355,1)
}
0% {
opacity:0;
-webkit-transform:scale3d(0.3,.3,.3);
transform:scale3d(0.3,.3,.3)
}
20% {
-webkit-transform:scale3d(1.1,1.1,1.1);
transform:scale3d(1.1,1.1,1.1)
}
40% {
-webkit-transform:scale3d(0.9,.9,.9);
transform:scale3d(0.9,.9,.9)
}
60% {
opacity:1;
-webkit-transform:scale3d(1.03,1.03,1.03);
transform:scale3d(1.03,1.03,1.03)
}
80% {
-webkit-transform:scale3d(0.97,.97,.97);
transform:scale3d(0.97,.97,.97)
}
100% {
opacity:1;
-webkit-transform:scale3d(1,1,1);
transform:scale3d(1,1,1)
}
}
.bounceIn {
-webkit-animation-name:bounceIn;
animation-name:bounceIn;
-webkit-animation-duration:.75s;
animation-duration:.75s
}
@-webkit-keyframes bounceInDown {
0%,100%,60%,75%,90% {
transition-timing-function:cubic-bezier(0.215,.61,.355,1)
}
0% {
opacity:0;
-webkit-transform:translate3d(0,-3000px,0);
transform:translate3d(0,-3000px,0)
}
60% {
opacity:1;
-webkit-transform:translate3d(0,25px,0);
transform:translate3d(0,25px,0)
}
75% {
-webkit-transform:translate3d(0,-10px,0);
transform:translate3d(0,-10px,0)
}
90% {
-webkit-transform:translate3d(0,5px,0);
transform:translate3d(0,5px,0)
}
100% {
-webkit-transform:none;
transform:none
}
}
@keyframes bounceInDown {
0%,100%,60%,75%,90% {
transition-timing-function:cubic-bezier(0.215,.61,.355,1)
}
0% {
opacity:0;
-webkit-transform:translate3d(0,-3000px,0);
transform:translate3d(0,-3000px,0)
}
60% {
opacity:1;
-webkit-transform:translate3d(0,25px,0);
transform:translate3d(0,25px,0)
}
75% {
-webkit-transform:translate3d(0,-10px,0);
transform:translate3d(0,-10px,0)
}
90% {
-webkit-transform:translate3d(0,5px,0);
transform:translate3d(0,5px,0)
}
100% {
-webkit-transform:none;
transform:none
}
}
.bounceInDown {
-webkit-animation-name:bounceInDown;
animation-name:bounceInDown
}
@-webkit-keyframes bounceInLeft {
0%,100%,60%,75%,90% {
transition-timing-function:cubic-bezier(0.215,.61,.355,1)
}
0% {
opacity:0;
-webkit-transform:translate3d(-3000px,0,0);
transform:translate3d(-3000px,0,0)
}
60% {
opacity:1;
-webkit-transform:translate3d(25px,0,0);
transform:translate3d(25px,0,0)
}
75% {
-webkit-transform:translate3d(-10px,0,0);
transform:translate3d(-10px,0,0)
}
90% {
-webkit-transform:translate3d(5px,0,0);
transform:translate3d(5px,0,0)
}
100% {
-webkit-transform:none;
transform:none
}
}
@keyframes bounceInLeft {
0%,100%,60%,75%,90% {
transition-timing-function:cubic-bezier(0.215,.61,.355,1)
}
0% {
opacity:0;
-webkit-transform:translate3d(-3000px,0,0);
transform:translate3d(-3000px,0,0)
}
60% {
opacity:1;
-webkit-transform:translate3d(25px,0,0);
transform:translate3d(25px,0,0)
}
75% {
-webkit-transform:translate3d(-10px,0,0);
transform:translate3d(-10px,0,0)
}
90% {
-webkit-transform:translate3d(5px,0,0);
transform:translate3d(5px,0,0)
}
100% {
-webkit-transform:none;
transform:none
}
}
.bounceInLeft {
-webkit-animation-name:bounceInLeft;
animation-name:bounceInLeft
}
@-webkit-keyframes bounceInRight {
0%,100%,60%,75%,90% {
transition-timing-function:cubic-bezier(0.215,.61,.355,1)
}
0% {
opacity:0;
-webkit-transform:translate3d(3000px,0,0);
transform:translate3d(3000px,0,0)
}
60% {
opacity:1;
-webkit-transform:translate3d(-25px,0,0);
transform:translate3d(-25px,0,0)
}
75% {
-webkit-transform:translate3d(10px,0,0);
transform:translate3d(10px,0,0)
}
90% {
-webkit-transform:translate3d(-5px,0,0);
transform:translate3d(-5px,0,0)
}
100% {
-webkit-transform:none;
transform:none
}
}
@keyframes bounceInRight {
0%,100%,60%,75%,90% {
transition-timing-function:cubic-bezier(0.215,.61,.355,1)
}
0% {
opacity:0;
-webkit-transform:translate3d(3000px,0,0);
transform:translate3d(3000px,0,0)
}
60% {
opacity:1;
-webkit-transform:translate3d(-25px,0,0);
transform:translate3d(-25px,0,0)
}
75% {
-webkit-transform:translate3d(10px,0,0);
transform:translate3d(10px,0,0)
}
90% {
-webkit-transform:translate3d(-5px,0,0);
transform:translate3d(-5px,0,0)
}
100% {
-webkit-transform:none;
transform:none
}
}
.bounceInRight {
-webkit-animation-name:bounceInRight;
animation-name:bounceInRight
}
@-webkit-keyframes bounceInUp {
0%,100%,60%,75%,90% {
transition-timing-function:cubic-bezier(0.215,.61,.355,1)
}
0% {
opacity:0;
-webkit-transform:translate3d(0,3000px,0);
transform:translate3d(0,3000px,0)
}
60% {
opacity:1;
-webkit-transform:translate3d(0,-20px,0);
transform:translate3d(0,-20px,0)
}
75% {
-webkit-transform:translate3d(0,10px,0);
transform:translate3d(0,10px,0)
}
90% {
-webkit-transform:translate3d(0,-5px,0);
transform:translate3d(0,-5px,0)
}
100% {
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0)
}
}
@keyframes bounceInUp {
0%,100%,60%,75%,90% {
transition-timing-function:cubic-bezier(0.215,.61,.355,1)
}
0% {
opacity:0;
-webkit-transform:translate3d(0,3000px,0);
transform:translate3d(0,3000px,0)
}
60% {
opacity:1;
-webkit-transform:translate3d(0,-20px,0);
transform:translate3d(0,-20px,0)
}
75% {
-webkit-transform:translate3d(0,10px,0);
transform:translate3d(0,10px,0)
}
90% {
-webkit-transform:translate3d(0,-5px,0);
transform:translate3d(0,-5px,0)
}
100% {
-webkit-transform:translate3d(0,0,0);
transform:translate3d(0,0,0)
}
}
.bounceInUp {
-webkit-animation-name:bounceInUp;
animation-name:bounceInUp
}
@-webkit-keyframes bounceOut {
20% {
-webkit-transform:scale3d(0.9,.9,.9);
transform:scale3d(0.9,.9,.9)
}
50%,55% {
opacity:1;
-webkit-transform:scale3d(1.1,1.1,1.1);
transform:scale3d(1.1,1.1,1.1)
}
100% {
opacity:0;
-webkit-transform:scale3d(0.3,.3,.3);
transform:scale3d(0.3,.3,.3)
}
}
@keyframes bounceOut {
20% {
-webkit-transform:scale3d(0.9,.9,.9);
transform:scale3d(0.9,.9,.9)
}
50%,55% {
opacity:1;
-webkit-transform:scale3d(1.1,1.1,1.1);
transform:scale3d(1.1,1.1,1.1)
}
100% {
opacity:0;
-webkit-transform:scale3d(0.3,.3,.3);
transform:scale3d(0.3,.3,.3)
}
}
.bounceOut {
-webkit-animation-name:bounceOut;
animation-name:bounceOut;
-webkit-animation-duration:.75s;
animation-duration:.75s
}
@-webkit-keyframes bounceOutDown {
20% {
-webkit-transform:translate3d(0,10px,0);
transform:translate3d(0,10px,0)
}
40%,45% {
opacity:1;
-webkit-transform:translate3d(0,-20px,0);
transform:translate3d(0,-20px,0)
}
100% {
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
}
}
@keyframes bounceOutDown {
20% {
-webkit-transform:translate3d(0,10px,0);
transform:translate3d(0,10px,0)
}
40%,45% {
opacity:1;
-webkit-transform:translate3d(0,-20px,0);
transform:translate3d(0,-20px,0)
}
100% {
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
}
}
.bounceOutDown {
-webkit-animation-name:bounceOutDown;
animation-name:bounceOutDown
}
@-webkit-keyframes bounceOutLeft {
20% {
opacity:1;
-webkit-transform:translate3d(20px,0,0);
transform:translate3d(20px,0,0)
}
100% {
opacity:0;
-webkit-transform:translate3d(-2000px,0,0);
transform:translate3d(-2000px,0,0)
}
}
@keyframes bounceOutLeft {
20% {
opacity:1;
-webkit-transform:translate3d(20px,0,0);
transform:translate3d(20px,0,0)
}
100% {
opacity:0;
-webkit-transform:translate3d(-2000px,0,0);
transform:translate3d(-2000px,0,0)
}
}
.bounceOutLeft {
-webkit-animation-name:bounceOutLeft;
animation-name:bounceOutLeft
}
@-webkit-keyframes bounceOutRight {
20% {
opacity:1;
-webkit-transform:translate3d(-20px,0,0);
transform:translate3d(-20px,0,0)
}
100% {
opacity:0;
-webkit-transform:translate3d(2000px,0,0);
transform:translate3d(2000px,0,0)
}
}
@keyframes bounceOutRight {
20% {
opacity:1;
-webkit-transform:translate3d(-20px,0,0);
transform:translate3d(-20px,0,0)
}
100% {
opacity:0;
-webkit-transform:translate3d(2000px,0,0);
transform:translate3d(2000px,0,0)
}
}
.bounceOutRight {
-webkit-animation-name:bounceOutRight;
animation-name:bounceOutRight
}
@-webkit-keyframes bounceOutUp {
20% {
-webkit-transform:translate3d(0,-10px,0);
transform:translate3d(0,-10px,0)
}
40%,45% {
opacity:1;
-webkit-transform:translate3d(0,20px,0);
transform:translate3d(0,20px,0)
}
100% {
opacity:0;
-webkit-transform:translate3d(0,-2000px,0);
transform:translate3d(0,-2000px,0)
}
}
@keyframes bounceOutUp {
20% {
-webkit-transform:translate3d(0,-10px,0);
transform:translate3d(0,-10px,0)
}
40%,45% {
opacity:1;
-webkit-transform:translate3d(0,20px,0);
transform:translate3d(0,20px,0)
}
100% {
opacity:0;
-webkit-transform:translate3d(0,-2000px,0);
transform:translate3d(0,-2000px,0)
}
}
.bounceOutUp {
-webkit-animation-name:bounceOutUp;
animation-name:bounceOutUp
}
@-webkit-keyframes fadeIn {
0% {
opacity:0
}
100% {
opacity:1
}
}
@keyframes fadeIn {
0% {
opacity:0
}
100% {
opacity:1
}
}
.conf.active .conf-title .conf-point,.fadeIn,.intro.active .slogan .slogan-drops,.intro.active .slogan .slogan-text,.intro.active .slogan-tips,.talk.active .talk-title .talk-circle,.topical.active .topical-content {
-webkit-animation-name:fadeIn;
animation-name:fadeIn
}
@-webkit-keyframes fadeInDown {
0% {
opacity:0;
-webkit-transform:translate3d(0,-100%,0);
transform:translate3d(0,-100%,0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInDown {
0% {
opacity:0;
-webkit-transform:translate3d(0,-100%,0);
transform:translate3d(0,-100%,0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.conf.active .conf-time,.fadeInDown,.topical.active .topical-title .topical-text {
-webkit-animation-name:fadeInDown;
animation-name:fadeInDown
}
@-webkit-keyframes fadeInDownBig {
0% {
opacity:0;
-webkit-transform:translate3d(0,-2000px,0);
transform:translate3d(0,-2000px,0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInDownBig {
0% {
opacity:0;
-webkit-transform:translate3d(0,-2000px,0);
transform:translate3d(0,-2000px,0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInDownBig {
-webkit-animation-name:fadeInDownBig;
animation-name:fadeInDownBig
}
@-webkit-keyframes fadeInLeft {
0% {
opacity:0;
-webkit-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInLeft {
0% {
opacity:0;
-webkit-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.conf.active .conf-title .conf-ver,.fadeInLeft,.intro.active .slogan .slogan-time,.talk.active .talk-title .talk-text span {
-webkit-animation-name:fadeInLeft;
animation-name:fadeInLeft
}
@-webkit-keyframes fadeInLeftBig {
0% {
opacity:0;
-webkit-transform:translate3d(-2000px,0,0);
transform:translate3d(-2000px,0,0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInLeftBig {
0% {
opacity:0;
-webkit-transform:translate3d(-2000px,0,0);
transform:translate3d(-2000px,0,0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInLeftBig {
-webkit-animation-name:fadeInLeftBig;
animation-name:fadeInLeftBig
}
@-webkit-keyframes fadeInRight {
0% {
opacity:0;
-webkit-transform:translate3d(100%,0,0);
transform:translate3d(100%,0,0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInRight {
0% {
opacity:0;
-webkit-transform:translate3d(100%,0,0);
transform:translate3d(100%,0,0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInRight {
-webkit-animation-name:fadeInRight;
animation-name:fadeInRight
}
@-webkit-keyframes fadeInRightBig {
0% {
opacity:0;
-webkit-transform:translate3d(2000px,0,0);
transform:translate3d(2000px,0,0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInRightBig {
0% {
opacity:0;
-webkit-transform:translate3d(2000px,0,0);
transform:translate3d(2000px,0,0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInRightBig {
-webkit-animation-name:fadeInRightBig;
animation-name:fadeInRightBig
}
@-webkit-keyframes fadeInUp {
0% {
opacity:0;
-webkit-transform:translate3d(0,100%,0);
transform:translate3d(0,100%,0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInUp {
0% {
opacity:0;
-webkit-transform:translate3d(0,100%,0);
transform:translate3d(0,100%,0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.conf.active .conf-title .conf-text,.fadeInUp {
-webkit-animation-name:fadeInUp;
animation-name:fadeInUp
}
@-webkit-keyframes fadeInUpBig {
0% {
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes fadeInUpBig {
0% {
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.fadeInUpBig {
-webkit-animation-name:fadeInUpBig;
animation-name:fadeInUpBig
}
@-webkit-keyframes fadeOut {
0% {
opacity:1
}
100% {
opacity:0
}
}
@keyframes fadeOut {
0% {
opacity:1
}
100% {
opacity:0
}
}
.conf .conf-time,.conf .conf-title .conf-point,.fadeOut,.intro .slogan .slogan-drops,.intro .slogan-tips,.topical .topical-content {
-webkit-animation-name:fadeOut;
animation-name:fadeOut
}
@-webkit-keyframes fadeOutDown {
0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(0,100%,0);
transform:translate3d(0,100%,0)
}
}
@keyframes fadeOutDown {
0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(0,100%,0);
transform:translate3d(0,100%,0)
}
}
.fadeOutDown,.topical .topical-title .topical-text {
-webkit-animation-name:fadeOutDown;
animation-name:fadeOutDown
}
@-webkit-keyframes fadeOutDownBig {
0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
}
}
@keyframes fadeOutDownBig {
0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(0,2000px,0);
transform:translate3d(0,2000px,0)
}
}
.fadeOutDownBig {
-webkit-animation-name:fadeOutDownBig;
animation-name:fadeOutDownBig
}
@-webkit-keyframes fadeOutLeft {
0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0)
}
}
@keyframes fadeOutLeft {
0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(-100%,0,0);
transform:translate3d(-100%,0,0)
}
}
.conf .conf-title .conf-ver,.fadeOutLeft,.intro .slogan .slogan-time {
-webkit-animation-name:fadeOutLeft;
animation-name:fadeOutLeft
}
@-webkit-keyframes fadeOutLeftBig {
0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(-2000px,0,0);
transform:translate3d(-2000px,0,0)
}
}
@keyframes fadeOutLeftBig {
0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(-2000px,0,0);
transform:translate3d(-2000px,0,0)
}
}
.fadeOutLeftBig {
-webkit-animation-name:fadeOutLeftBig;
animation-name:fadeOutLeftBig
}
@-webkit-keyframes fadeOutRight {
0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(100%,0,0);
transform:translate3d(100%,0,0)
}
}
@keyframes fadeOutRight {
0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(100%,0,0);
transform:translate3d(100%,0,0)
}
}
.fadeOutRight {
-webkit-animation-name:fadeOutRight;
animation-name:fadeOutRight
}
@-webkit-keyframes fadeOutRightBig {
0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(2000px,0,0);
transform:translate3d(2000px,0,0)
}
}
@keyframes fadeOutRightBig {
0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(2000px,0,0);
transform:translate3d(2000px,0,0)
}
}
.fadeOutRightBig {
-webkit-animation-name:fadeOutRightBig;
animation-name:fadeOutRightBig
}
@-webkit-keyframes fadeOutUp {
0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(0,-100%,0);
transform:translate3d(0,-100%,0)
}
}
@keyframes fadeOutUp {
0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(0,-100%,0);
transform:translate3d(0,-100%,0)
}
}
.conf .conf-title .conf-text,.fadeOutUp,.intro .slogan .slogan-text,.talk .talk-title .talk-circle {
-webkit-animation-name:fadeOutUp;
animation-name:fadeOutUp
}
@-webkit-keyframes fadeOutUpBig {
0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(0,-2000px,0);
transform:translate3d(0,-2000px,0)
}
}
@keyframes fadeOutUpBig {
0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(0,-2000px,0);
transform:translate3d(0,-2000px,0)
}
}
.fadeOutUpBig {
-webkit-animation-name:fadeOutUpBig;
animation-name:fadeOutUpBig
}
@-webkit-keyframes flip {
0% {
-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);
transform:perspective(400px) rotate3d(0,1,0,-360deg);
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out
}
40% {
-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out
}
50% {
-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in
}
80% {
-webkit-transform:perspective(400px) scale3d(0.95,.95,.95);
transform:perspective(400px) scale3d(0.95,.95,.95);
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in
}
100% {
-webkit-transform:perspective(400px);
transform:perspective(400px);
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in
}
}
@keyframes flip {
0% {
-webkit-transform:perspective(400px) rotate3d(0,1,0,-360deg);
transform:perspective(400px) rotate3d(0,1,0,-360deg);
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out
}
40% {
-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-190deg);
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out
}
50% {
-webkit-transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
transform:perspective(400px) translate3d(0,0,150px) rotate3d(0,1,0,-170deg);
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in
}
80% {
-webkit-transform:perspective(400px) scale3d(0.95,.95,.95);
transform:perspective(400px) scale3d(0.95,.95,.95);
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in
}
100% {
-webkit-transform:perspective(400px);
transform:perspective(400px);
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in
}
}
.animated.flip,.conf .conf-title .flip.conf-point,.conf .conf-title .flip.conf-text,.conf .conf-title .flip.conf-ver,.conf .flip.conf-time,.intro .flip.slogan-tips,.intro .slogan .flip.slogan-bg,.intro .slogan .flip.slogan-drops,.intro .slogan .flip.slogan-text,.intro .slogan .flip.slogan-time,.talk .talk-title .flip.talk-circle,.talk .talk-title .talk-text span.flip,.topical .flip.topical-content,.topical .topical-title .flip.topical-circle,.topical .topical-title .flip.topical-text {
-webkit-backface-visibility:visible;
-ms-backface-visibility:visible;
backface-visibility:visible;
-webkit-animation-name:flip;
animation-name:flip
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);
transform:perspective(400px) rotate3d(1,0,0,90deg);
transition-timing-function:ease-in;
opacity:0
}
40% {
-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);
transform:perspective(400px) rotate3d(1,0,0,-20deg);
transition-timing-function:ease-in
}
60% {
-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);
transform:perspective(400px) rotate3d(1,0,0,10deg);
opacity:1
}
80% {
-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);
transform:perspective(400px) rotate3d(1,0,0,-5deg)
}
100% {
-webkit-transform:perspective(400px);
transform:perspective(400px)
}
}
@keyframes flipInX {
0% {
-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);
transform:perspective(400px) rotate3d(1,0,0,90deg);
transition-timing-function:ease-in;
opacity:0
}
40% {
-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);
transform:perspective(400px) rotate3d(1,0,0,-20deg);
transition-timing-function:ease-in
}
60% {
-webkit-transform:perspective(400px) rotate3d(1,0,0,10deg);
transform:perspective(400px) rotate3d(1,0,0,10deg);
opacity:1
}
80% {
-webkit-transform:perspective(400px) rotate3d(1,0,0,-5deg);
transform:perspective(400px) rotate3d(1,0,0,-5deg)
}
100% {
-webkit-transform:perspective(400px);
transform:perspective(400px)
}
}
.flipInX {
-webkit-backface-visibility:visible!important;
-ms-backface-visibility:visible!important;
backface-visibility:visible!important;
-webkit-animation-name:flipInX;
animation-name:flipInX
}
@-webkit-keyframes flipInY {
0% {
-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);
transform:perspective(400px) rotate3d(0,1,0,90deg);
transition-timing-function:ease-in;
opacity:0
}
40% {
-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);
transform:perspective(400px) rotate3d(0,1,0,-20deg);
transition-timing-function:ease-in
}
60% {
-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);
transform:perspective(400px) rotate3d(0,1,0,10deg);
opacity:1
}
80% {
-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);
transform:perspective(400px) rotate3d(0,1,0,-5deg)
}
100% {
-webkit-transform:perspective(400px);
transform:perspective(400px)
}
}
@keyframes flipInY {
0% {
-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);
transform:perspective(400px) rotate3d(0,1,0,90deg);
transition-timing-function:ease-in;
opacity:0
}
40% {
-webkit-transform:perspective(400px) rotate3d(0,1,0,-20deg);
transform:perspective(400px) rotate3d(0,1,0,-20deg);
transition-timing-function:ease-in
}
60% {
-webkit-transform:perspective(400px) rotate3d(0,1,0,10deg);
transform:perspective(400px) rotate3d(0,1,0,10deg);
opacity:1
}
80% {
-webkit-transform:perspective(400px) rotate3d(0,1,0,-5deg);
transform:perspective(400px) rotate3d(0,1,0,-5deg)
}
100% {
-webkit-transform:perspective(400px);
transform:perspective(400px)
}
}
.flipInY {
-webkit-backface-visibility:visible!important;
-ms-backface-visibility:visible!important;
backface-visibility:visible!important;
-webkit-animation-name:flipInY;
animation-name:flipInY
}
@-webkit-keyframes flipOutX {
0% {
-webkit-transform:perspective(400px);
transform:perspective(400px)
}
30% {
-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);
transform:perspective(400px) rotate3d(1,0,0,-20deg);
opacity:1
}
100% {
-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);
transform:perspective(400px) rotate3d(1,0,0,90deg);
opacity:0
}
}
@keyframes flipOutX {
0% {
-webkit-transform:perspective(400px);
transform:perspective(400px)
}
30% {
-webkit-transform:perspective(400px) rotate3d(1,0,0,-20deg);
transform:perspective(400px) rotate3d(1,0,0,-20deg);
opacity:1
}
100% {
-webkit-transform:perspective(400px) rotate3d(1,0,0,90deg);
transform:perspective(400px) rotate3d(1,0,0,90deg);
opacity:0
}
}
.flipOutX {
-webkit-animation-name:flipOutX;
animation-name:flipOutX;
-webkit-animation-duration:.75s;
animation-duration:.75s;
-webkit-backface-visibility:visible!important;
-ms-backface-visibility:visible!important;
backface-visibility:visible!important
}
@-webkit-keyframes flipOutY {
0% {
-webkit-transform:perspective(400px);
transform:perspective(400px)
}
30% {
-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);
transform:perspective(400px) rotate3d(0,1,0,-15deg);
opacity:1
}
100% {
-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);
transform:perspective(400px) rotate3d(0,1,0,90deg);
opacity:0
}
}
@keyframes flipOutY {
0% {
-webkit-transform:perspective(400px);
transform:perspective(400px)
}
30% {
-webkit-transform:perspective(400px) rotate3d(0,1,0,-15deg);
transform:perspective(400px) rotate3d(0,1,0,-15deg);
opacity:1
}
100% {
-webkit-transform:perspective(400px) rotate3d(0,1,0,90deg);
transform:perspective(400px) rotate3d(0,1,0,90deg);
opacity:0
}
}
.flipOutY {
-webkit-backface-visibility:visible!important;
-ms-backface-visibility:visible!important;
backface-visibility:visible!important;
-webkit-animation-name:flipOutY;
animation-name:flipOutY;
-webkit-animation-duration:.75s;
animation-duration:.75s
}
@-webkit-keyframes lightSpeedIn {
0% {
-webkit-transform:translate3d(100%,0,0) skewX(-30deg);
transform:translate3d(100%,0,0) skewX(-30deg);
opacity:0
}
60% {
-webkit-transform:skewX(20deg);
transform:skewX(20deg);
opacity:1
}
80% {
-webkit-transform:skewX(-5deg);
transform:skewX(-5deg);
opacity:1
}
100% {
-webkit-transform:none;
transform:none;
opacity:1
}
}
@keyframes lightSpeedIn {
0% {
-webkit-transform:translate3d(100%,0,0) skewX(-30deg);
transform:translate3d(100%,0,0) skewX(-30deg);
opacity:0
}
60% {
-webkit-transform:skewX(20deg);
transform:skewX(20deg);
opacity:1
}
80% {
-webkit-transform:skewX(-5deg);
transform:skewX(-5deg);
opacity:1
}
100% {
-webkit-transform:none;
transform:none;
opacity:1
}
}
.lightSpeedIn {
-webkit-animation-name:lightSpeedIn;
animation-name:lightSpeedIn;
-webkit-animation-timing-function:ease-out;
animation-timing-function:ease-out
}
@-webkit-keyframes lightSpeedOut {
0% {
opacity:1
}
100% {
-webkit-transform:translate3d(100%,0,0) skewX(30deg);
transform:translate3d(100%,0,0) skewX(30deg);
opacity:0
}
}
@keyframes lightSpeedOut {
0% {
opacity:1
}
100% {
-webkit-transform:translate3d(100%,0,0) skewX(30deg);
transform:translate3d(100%,0,0) skewX(30deg);
opacity:0
}
}
.lightSpeedOut {
-webkit-animation-name:lightSpeedOut;
animation-name:lightSpeedOut;
-webkit-animation-timing-function:ease-in;
animation-timing-function:ease-in
}
@-webkit-keyframes rotateIn {
0% {
-webkit-transform-origin:center;
transform-origin:center;
-webkit-transform:rotate3d(0,0,1,-200deg);
transform:rotate3d(0,0,1,-200deg);
opacity:0
}
100% {
-webkit-transform-origin:center;
transform-origin:center;
-webkit-transform:none;
transform:none;
opacity:1
}
}
@keyframes rotateIn {
0% {
-webkit-transform-origin:center;
transform-origin:center;
-webkit-transform:rotate3d(0,0,1,-200deg);
transform:rotate3d(0,0,1,-200deg);
opacity:0
}
100% {
-webkit-transform-origin:center;
transform-origin:center;
-webkit-transform:none;
transform:none;
opacity:1
}
}
.rotateIn {
-webkit-animation-name:rotateIn;
animation-name:rotateIn
}
@-webkit-keyframes rotateInDownLeft {
0% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:rotate3d(0,0,1,-45deg);
transform:rotate3d(0,0,1,-45deg);
opacity:0
}
100% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
@keyframes rotateInDownLeft {
0% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:rotate3d(0,0,1,-45deg);
transform:rotate3d(0,0,1,-45deg);
opacity:0
}
100% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
.rotateInDownLeft {
-webkit-animation-name:rotateInDownLeft;
animation-name:rotateInDownLeft
}
@-webkit-keyframes rotateInDownRight {
0% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:rotate3d(0,0,1,45deg);
transform:rotate3d(0,0,1,45deg);
opacity:0
}
100% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
@keyframes rotateInDownRight {
0% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:rotate3d(0,0,1,45deg);
transform:rotate3d(0,0,1,45deg);
opacity:0
}
100% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
.rotateInDownRight {
-webkit-animation-name:rotateInDownRight;
animation-name:rotateInDownRight
}
@-webkit-keyframes rotateInUpLeft {
0% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:rotate3d(0,0,1,45deg);
transform:rotate3d(0,0,1,45deg);
opacity:0
}
100% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
@keyframes rotateInUpLeft {
0% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:rotate3d(0,0,1,45deg);
transform:rotate3d(0,0,1,45deg);
opacity:0
}
100% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
.rotateInUpLeft {
-webkit-animation-name:rotateInUpLeft;
animation-name:rotateInUpLeft
}
@-webkit-keyframes rotateInUpRight {
0% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:rotate3d(0,0,1,-90deg);
transform:rotate3d(0,0,1,-90deg);
opacity:0
}
100% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
@keyframes rotateInUpRight {
0% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:rotate3d(0,0,1,-90deg);
transform:rotate3d(0,0,1,-90deg);
opacity:0
}
100% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:none;
transform:none;
opacity:1
}
}
.rotateInUpRight {
-webkit-animation-name:rotateInUpRight;
animation-name:rotateInUpRight
}
@-webkit-keyframes rotateOut {
0% {
-webkit-transform-origin:center;
transform-origin:center;
opacity:1
}
100% {
-webkit-transform-origin:center;
transform-origin:center;
-webkit-transform:rotate3d(0,0,1,200deg);
transform:rotate3d(0,0,1,200deg);
opacity:0
}
}
@keyframes rotateOut {
0% {
-webkit-transform-origin:center;
transform-origin:center;
opacity:1
}
100% {
-webkit-transform-origin:center;
transform-origin:center;
-webkit-transform:rotate3d(0,0,1,200deg);
transform:rotate3d(0,0,1,200deg);
opacity:0
}
}
.rotateOut {
-webkit-animation-name:rotateOut;
animation-name:rotateOut
}
@-webkit-keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
opacity:1
}
100% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:rotate(0,0,1,45deg);
transform:rotate(0,0,1,45deg);
opacity:0
}
}
@keyframes rotateOutDownLeft {
0% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
opacity:1
}
100% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:rotate(0,0,1,45deg);
transform:rotate(0,0,1,45deg);
opacity:0
}
}
.rotateOutDownLeft {
-webkit-animation-name:rotateOutDownLeft;
animation-name:rotateOutDownLeft
}
@-webkit-keyframes rotateOutDownRight {
0% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
opacity:1
}
100% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:rotate3d(0,0,1,-45deg);
transform:rotate3d(0,0,1,-45deg);
opacity:0
}
}
@keyframes rotateOutDownRight {
0% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
opacity:1
}
100% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:rotate3d(0,0,1,-45deg);
transform:rotate3d(0,0,1,-45deg);
opacity:0
}
}
.rotateOutDownRight {
-webkit-animation-name:rotateOutDownRight;
animation-name:rotateOutDownRight
}
@-webkit-keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
opacity:1
}
100% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:rotate3d(0,0,1,-45deg);
transform:rotate3d(0,0,1,-45deg);
opacity:0
}
}
@keyframes rotateOutUpLeft {
0% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
opacity:1
}
100% {
-webkit-transform-origin:left bottom;
transform-origin:left bottom;
-webkit-transform:rotate3d(0,0,1,-45deg);
transform:rotate3d(0,0,1,-45deg);
opacity:0
}
}
.rotateOutUpLeft {
-webkit-animation-name:rotateOutUpLeft;
animation-name:rotateOutUpLeft
}
@-webkit-keyframes rotateOutUpRight {
0% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
opacity:1
}
100% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:rotate3d(0,0,1,90deg);
transform:rotate3d(0,0,1,90deg);
opacity:0
}
}
@keyframes rotateOutUpRight {
0% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
opacity:1
}
100% {
-webkit-transform-origin:right bottom;
transform-origin:right bottom;
-webkit-transform:rotate3d(0,0,1,90deg);
transform:rotate3d(0,0,1,90deg);
opacity:0
}
}
.rotateOutUpRight {
-webkit-animation-name:rotateOutUpRight;
animation-name:rotateOutUpRight
}
@-webkit-keyframes hinge {
0% {
-webkit-transform-origin:top left;
transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out
}
20%,60% {
-webkit-transform:rotate3d(0,0,1,80deg);
transform:rotate3d(0,0,1,80deg);
-webkit-transform-origin:top left;
transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out
}
40%,80% {
-webkit-transform:rotate3d(0,0,1,60deg);
transform:rotate3d(0,0,1,60deg);
-webkit-transform-origin:top left;
transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out;
opacity:1
}
100% {
-webkit-transform:translate3d(0,700px,0);
transform:translate3d(0,700px,0);
opacity:0
}
}
@keyframes hinge {
0% {
-webkit-transform-origin:top left;
transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out
}
20%,60% {
-webkit-transform:rotate3d(0,0,1,80deg);
transform:rotate3d(0,0,1,80deg);
-webkit-transform-origin:top left;
transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out
}
40%,80% {
-webkit-transform:rotate3d(0,0,1,60deg);
transform:rotate3d(0,0,1,60deg);
-webkit-transform-origin:top left;
transform-origin:top left;
-webkit-animation-timing-function:ease-in-out;
animation-timing-function:ease-in-out;
opacity:1
}
100% {
-webkit-transform:translate3d(0,700px,0);
transform:translate3d(0,700px,0);
opacity:0
}
}
.hinge {
-webkit-animation-name:hinge;
animation-name:hinge
}
@-webkit-keyframes rollIn {
0% {
opacity:0;
-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);
transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
@keyframes rollIn {
0% {
opacity:0;
-webkit-transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg);
transform:translate3d(-100%,0,0) rotate3d(0,0,1,-120deg)
}
100% {
opacity:1;
-webkit-transform:none;
transform:none
}
}
.rollIn {
-webkit-animation-name:rollIn;
animation-name:rollIn
}
@-webkit-keyframes rollOut {
0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);
transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)
}
}
@keyframes rollOut {
0% {
opacity:1
}
100% {
opacity:0;
-webkit-transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg);
transform:translate3d(100%,0,0) rotate3d(0,0,1,120deg)
}
}
.rollOut {
-webkit-animation-name:rollOut;
animation-name:rollOut
}
@-webkit-keyframes zoomIn {
0% {
opacity:0;
-webkit-transform:scale3d(0.3,.3,.3);
transform:scale3d(0.3,.3,.3)
}
50% {
opacity:1
}
}
@keyframes zoomIn {
0% {
opacity:0;
-webkit-transform:scale3d(0.3,.3,.3);
transform:scale3d(0.3,.3,.3)
}
50% {
opacity:1
}
}
.topical.active .topical-title .topical-circle,.zoomIn {
-webkit-animation-name:zoomIn;
animation-name:zoomIn
}
@-webkit-keyframes zoomInDown {
0% {
opacity:0;
-webkit-transform:scale3d(0.1,.1,.1) translate3d(0,-1000px,0);
transform:scale3d(0.1,.1,.1) translate3d(0,-1000px,0);
-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);
animation-timing-function:cubic-bezier(0.55,.055,.675,.19)
}
60% {
opacity:1;
-webkit-transform:scale3d(0.475,.475,.475) translate3d(0,60px,0);
transform:scale3d(0.475,.475,.475) translate3d(0,60px,0);
-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);
animation-timing-function:cubic-bezier(0.175,.885,.32,1)
}
}
@keyframes zoomInDown {
0% {
opacity:0;
-webkit-transform:scale3d(0.1,.1,.1) translate3d(0,-1000px,0);
transform:scale3d(0.1,.1,.1) translate3d(0,-1000px,0);
-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);
animation-timing-function:cubic-bezier(0.55,.055,.675,.19)
}
60% {
opacity:1;
-webkit-transform:scale3d(0.475,.475,.475) translate3d(0,60px,0);
transform:scale3d(0.475,.475,.475) translate3d(0,60px,0);
-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);
animation-timing-function:cubic-bezier(0.175,.885,.32,1)
}
}
.zoomInDown {
-webkit-animation-name:zoomInDown;
animation-name:zoomInDown
}
@-webkit-keyframes zoomInLeft {
0% {
opacity:0;
-webkit-transform:scale3d(0.1,.1,.1) translate3d(-1000px,0,0);
transform:scale3d(0.1,.1,.1) translate3d(-1000px,0,0);
-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);
animation-timing-function:cubic-bezier(0.55,.055,.675,.19)
}
60% {
opacity:1;
-webkit-transform:scale3d(0.475,.475,.475) translate3d(10px,0,0);
transform:scale3d(0.475,.475,.475) translate3d(10px,0,0);
-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);
animation-timing-function:cubic-bezier(0.175,.885,.32,1)
}
}
@keyframes zoomInLeft {
0% {
opacity:0;
-webkit-transform:scale3d(0.1,.1,.1) translate3d(-1000px,0,0);
transform:scale3d(0.1,.1,.1) translate3d(-1000px,0,0);
-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);
animation-timing-function:cubic-bezier(0.55,.055,.675,.19)
}
60% {
opacity:1;
-webkit-transform:scale3d(0.475,.475,.475) translate3d(10px,0,0);
transform:scale3d(0.475,.475,.475) translate3d(10px,0,0);
-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);
animation-timing-function:cubic-bezier(0.175,.885,.32,1)
}
}
.zoomInLeft {
-webkit-animation-name:zoomInLeft;
animation-name:zoomInLeft
}
@-webkit-keyframes zoomInRight {
0% {
opacity:0;
-webkit-transform:scale3d(0.1,.1,.1) translate3d(1000px,0,0);
transform:scale3d(0.1,.1,.1) translate3d(1000px,0,0);
-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);
animation-timing-function:cubic-bezier(0.55,.055,.675,.19)
}
60% {
opacity:1;
-webkit-transform:scale3d(0.475,.475,.475) translate3d(-10px,0,0);
transform:scale3d(0.475,.475,.475) translate3d(-10px,0,0);
-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);
animation-timing-function:cubic-bezier(0.175,.885,.32,1)
}
}
@keyframes zoomInRight {
0% {
opacity:0;
-webkit-transform:scale3d(0.1,.1,.1) translate3d(1000px,0,0);
transform:scale3d(0.1,.1,.1) translate3d(1000px,0,0);
-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);
animation-timing-function:cubic-bezier(0.55,.055,.675,.19)
}
60% {
opacity:1;
-webkit-transform:scale3d(0.475,.475,.475) translate3d(-10px,0,0);
transform:scale3d(0.475,.475,.475) translate3d(-10px,0,0);
-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);
animation-timing-function:cubic-bezier(0.175,.885,.32,1)
}
}
.zoomInRight {
-webkit-animation-name:zoomInRight;
animation-name:zoomInRight
}
@-webkit-keyframes zoomInUp {
0% {
opacity:0;
-webkit-transform:scale3d(0.1,.1,.1) translate3d(0,1000px,0);
transform:scale3d(0.1,.1,.1) translate3d(0,1000px,0);
-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);
animation-timing-function:cubic-bezier(0.55,.055,.675,.19)
}
60% {
opacity:1;
-webkit-transform:scale3d(0.475,.475,.475) translate3d(0,-60px,0);
transform:scale3d(0.475,.475,.475) translate3d(0,-60px,0);
-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);
animation-timing-function:cubic-bezier(0.175,.885,.32,1)
}
}
@keyframes zoomInUp {
0% {
opacity:0;
-webkit-transform:scale3d(0.1,.1,.1) translate3d(0,1000px,0);
transform:scale3d(0.1,.1,.1) translate3d(0,1000px,0);
-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);
animation-timing-function:cubic-bezier(0.55,.055,.675,.19)
}
60% {
opacity:1;
-webkit-transform:scale3d(0.475,.475,.475) translate3d(0,-60px,0);
transform:scale3d(0.475,.475,.475) translate3d(0,-60px,0);
-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);
animation-timing-function:cubic-bezier(0.175,.885,.32,1)
}
}
.zoomInUp {
-webkit-animation-name:zoomInUp;
animation-name:zoomInUp
}
@-webkit-keyframes zoomOut {
0% {
opacity:1
}
50% {
opacity:0;
-webkit-transform:scale3d(0.3,.3,.3);
transform:scale3d(0.3,.3,.3)
}
100% {
opacity:0
}
}
@keyframes zoomOut {
0% {
opacity:1
}
50% {
opacity:0;
-webkit-transform:scale3d(0.3,.3,.3);
transform:scale3d(0.3,.3,.3)
}
100% {
opacity:0
}
}
.intro .slogan .slogan-bg,.topical .topical-title .topical-circle,.zoomOut {
-webkit-animation-name:zoomOut;
animation-name:zoomOut
}
@-webkit-keyframes zoomOutDown {
40% {
opacity:1;
-webkit-transform:scale3d(0.475,.475,.475) translate3d(0,-60px,0);
transform:scale3d(0.475,.475,.475) translate3d(0,-60px,0);
-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);
animation-timing-function:cubic-bezier(0.55,.055,.675,.19)
}
100% {
opacity:0;
-webkit-transform:scale3d(0.1,.1,.1) translate3d(0,2000px,0);
transform:scale3d(0.1,.1,.1) translate3d(0,2000px,0);
-webkit-transform-origin:center bottom;
transform-origin:center bottom;
-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);
animation-timing-function:cubic-bezier(0.175,.885,.32,1)
}
}
@keyframes zoomOutDown {
40% {
opacity:1;
-webkit-transform:scale3d(0.475,.475,.475) translate3d(0,-60px,0);
transform:scale3d(0.475,.475,.475) translate3d(0,-60px,0);
-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);
animation-timing-function:cubic-bezier(0.55,.055,.675,.19)
}
100% {
opacity:0;
-webkit-transform:scale3d(0.1,.1,.1) translate3d(0,2000px,0);
transform:scale3d(0.1,.1,.1) translate3d(0,2000px,0);
-webkit-transform-origin:center bottom;
transform-origin:center bottom;
-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);
animation-timing-function:cubic-bezier(0.175,.885,.32,1)
}
}
.zoomOutDown {
-webkit-animation-name:zoomOutDown;
animation-name:zoomOutDown
}
@-webkit-keyframes zoomOutLeft {
40% {
opacity:1;
-webkit-transform:scale3d(0.475,.475,.475) translate3d(42px,0,0);
transform:scale3d(0.475,.475,.475) translate3d(42px,0,0)
}
100% {
opacity:0;
-webkit-transform:scale(0.1) translate3d(-2000px,0,0);
transform:scale(0.1) translate3d(-2000px,0,0);
-webkit-transform-origin:left center;
transform-origin:left center
}
}
@keyframes zoomOutLeft {
40% {
opacity:1;
-webkit-transform:scale3d(0.475,.475,.475) translate3d(42px,0,0);
transform:scale3d(0.475,.475,.475) translate3d(42px,0,0)
}
100% {
opacity:0;
-webkit-transform:scale(0.1) translate3d(-2000px,0,0);
transform:scale(0.1) translate3d(-2000px,0,0);
-webkit-transform-origin:left center;
transform-origin:left center
}
}
.zoomOutLeft {
-webkit-animation-name:zoomOutLeft;
animation-name:zoomOutLeft
}
@-webkit-keyframes zoomOutRight {
40% {
opacity:1;
-webkit-transform:scale3d(0.475,.475,.475) translate3d(-42px,0,0);
transform:scale3d(0.475,.475,.475) translate3d(-42px,0,0)
}
100% {
opacity:0;
-webkit-transform:scale(0.1) translate3d(2000px,0,0);
transform:scale(0.1) translate3d(2000px,0,0);
-webkit-transform-origin:right center;
transform-origin:right center
}
}
@keyframes zoomOutRight {
40% {
opacity:1;
-webkit-transform:scale3d(0.475,.475,.475) translate3d(-42px,0,0);
transform:scale3d(0.475,.475,.475) translate3d(-42px,0,0)
}
100% {
opacity:0;
-webkit-transform:scale(0.1) translate3d(2000px,0,0);
transform:scale(0.1) translate3d(2000px,0,0);
-webkit-transform-origin:right center;
transform-origin:right center
}
}
.zoomOutRight {
-webkit-animation-name:zoomOutRight;
animation-name:zoomOutRight
}
@-webkit-keyframes zoomOutUp {
40% {
opacity:1;
-webkit-transform:scale3d(0.475,.475,.475) translate3d(0,60px,0);
transform:scale3d(0.475,.475,.475) translate3d(0,60px,0);
-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);
animation-timing-function:cubic-bezier(0.55,.055,.675,.19)
}
100% {
opacity:0;
-webkit-transform:scale3d(0.1,.1,.1) translate3d(0,-2000px,0);
transform:scale3d(0.1,.1,.1) translate3d(0,-2000px,0);
-webkit-transform-origin:center bottom;
transform-origin:center bottom;
-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);
animation-timing-function:cubic-bezier(0.175,.885,.32,1)
}
}
@keyframes zoomOutUp {
40% {
opacity:1;
-webkit-transform:scale3d(0.475,.475,.475) translate3d(0,60px,0);
transform:scale3d(0.475,.475,.475) translate3d(0,60px,0);
-webkit-animation-timing-function:cubic-bezier(0.55,.055,.675,.19);
animation-timing-function:cubic-bezier(0.55,.055,.675,.19)
}
100% {
opacity:0;
-webkit-transform:scale3d(0.1,.1,.1) translate3d(0,-2000px,0);
transform:scale3d(0.1,.1,.1) translate3d(0,-2000px,0);
-webkit-transform-origin:center bottom;
transform-origin:center bottom;
-webkit-animation-timing-function:cubic-bezier(0.175,.885,.32,1);
animation-timing-function:cubic-bezier(0.175,.885,.32,1)
}
}
.zoomOutUp {
-webkit-animation-name:zoomOutUp;
animation-name:zoomOutUp
}
@-webkit-keyframes upDown {
0% {
bottom:25px
}
50% {
bottom:15px
}
100% {
bottom:25px
}
}
.upDown,.webrebuild section:after {
-webkit-animation:upDown 1s infinite both;
animation:upDown 1s infinite both
}
@-webkit-keyframes chu-1 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:78px;
opacity:1
}
}
@keyframes chu-1 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:78px;
opacity:1
}
}
@-webkit-keyframes chu-2 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:168px;
opacity:1
}
}
@keyframes chu-2 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:168px;
opacity:1
}
}
@-webkit-keyframes chu-3 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:142px;
opacity:1
}
}
@keyframes chu-3 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:142px;
opacity:1
}
}
@-webkit-keyframes chu-4 {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:154px;
opacity:1
}
}
@keyframes chu-4 {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:154px;
opacity:1
}
}
@-webkit-keyframes chu-5 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:120px;
opacity:1
}
}
@keyframes chu-5 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:120px;
opacity:1
}
}
@-webkit-keyframes chu-6 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:92px;
opacity:1
}
}
@keyframes chu-6 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:92px;
opacity:1
}
}
@-webkit-keyframes chu-7 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:122px;
opacity:1
}
}
@keyframes chu-7 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:122px;
opacity:1
}
}
@-webkit-keyframes xin-1 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:64px;
opacity:1
}
}
@keyframes xin-1 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:64px;
opacity:1
}
}
@-webkit-keyframes xin-2 {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:94px;
opacity:1
}
}
@keyframes xin-2 {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:94px;
opacity:1
}
}
@-webkit-keyframes xin-3 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:62px;
opacity:1
}
}
@keyframes xin-3 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:62px;
opacity:1
}
}
@-webkit-keyframes xin-4 {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:32px;
opacity:1
}
}
@keyframes xin-4 {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:32px;
opacity:1
}
}
@-webkit-keyframes xin-5 {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:61px;
opacity:1
}
}
@keyframes xin-5 {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:61px;
opacity:1
}
}
@-webkit-keyframes xin-6 {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:32px;
opacity:1
}
}
@keyframes xin-6 {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:32px;
opacity:1
}
}
@-webkit-keyframes chu-1-m {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:39px;
opacity:1
}
}
@keyframes chu-1-m {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:39px;
opacity:1
}
}
@-webkit-keyframes chu-2-m {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:84px;
opacity:1
}
}
@keyframes chu-2-m {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:84px;
opacity:1
}
}
@-webkit-keyframes chu-3-m {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:71px;
opacity:1
}
}
@keyframes chu-3-m {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:71px;
opacity:1
}
}
@-webkit-keyframes chu-4-m {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:77px;
opacity:1
}
}
@keyframes chu-4-m {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:77px;
opacity:1
}
}
@-webkit-keyframes chu-5-m {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:60px;
opacity:1
}
}
@keyframes chu-5-m {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:60px;
opacity:1
}
}
@-webkit-keyframes chu-6-m {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:46px;
opacity:1
}
}
@keyframes chu-6-m {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:46px;
opacity:1
}
}
@-webkit-keyframes chu-7-m {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:61px;
opacity:1
}
}
@keyframes chu-7-m {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:61px;
opacity:1
}
}
@-webkit-keyframes xin-1-m {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:32px;
opacity:1
}
}
@keyframes xin-1-m {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:32px;
opacity:1
}
}
@-webkit-keyframes xin-2-m {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:47px;
opacity:1
}
}
@keyframes xin-2-m {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:47px;
opacity:1
}
}
@-webkit-keyframes xin-3-m {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:31px;
opacity:1
}
}
@keyframes xin-3-m {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:31px;
opacity:1
}
}
@-webkit-keyframes xin-4-m {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:16px;
opacity:1
}
}
@keyframes xin-4-m {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:16px;
opacity:1
}
}
@-webkit-keyframes xin-5-m {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:31px;
opacity:1
}
}
@keyframes xin-5-m {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:31px;
opacity:1
}
}
@-webkit-keyframes xin-6-m {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:16px;
opacity:1
}
}
@keyframes xin-6-m {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:16px;
opacity:1
}
}
.sign-txt {
display:block;
height:167px;
width:29px;
background:url(../image/intro-time.png) no-repeat 0 0;
position:absolute;
left:50%;
top:50%;
margin-left:-190px;
margin-top:20px;
z-index:3;
opacity:0
}
.spot-bg {
display:block;
height:400px;
width:391px;
background:url(../image/intro-bg.png) no-repeat 0 0;
position:absolute;
left:50%;
top:50%;
margin-left:-255px;
margin-top:-190px;
z-index:1;
opacity:0
}
.spot-bg .spot-inner {
display:block;
height:400px;
width:391px;
background:url(../image/intro-bg.png) no-repeat 0 0;
position:absolute;
left:0;
top:0xp;
z-index:1;
opacity:0
}
.spot-bg-2 {
display:block;
height:475px;
width:441px;
background:url(../image/intro-drops.png) no-repeat 0 0;
position:absolute;
left:50%;
top:50%;
margin-left:-220px;
margin-top:-237px;
z-index:2
}
.spot-1 {
display:block;
height:42px;
width:37px;
background:url(../image/spot-1.png) no-repeat 0 0;
position:absolute;
left:171px;
top:221px;
z-index:2;
opacity:0
}
.spot-2 {
display:block;
height:17px;
width:17px;
background:url(../image/spot-2.png) no-repeat 0 0;
position:absolute;
left:293px;
top:273px;
z-index:2;
opacity:0
}
@-webkit-keyframes a-spot-bg {
0% {
opacity:.8;
-webkit-transform:scale(0.15);
transform:scale(0.15)
}
100% {
opacity:.9;
-webkit-transform:scale(1);
transform:scale(1)
}
}
@keyframes a-spot-bg {
0% {
opacity:.8;
-webkit-transform:scale(0.15);
transform:scale(0.15)
}
100% {
opacity:.9;
-webkit-transform:scale(1);
transform:scale(1)
}
}
@-webkit-keyframes a-spot-bg-after {
0% {
opacity:1;
-webkit-transform:scale(0.55);
transform:scale(0.55)
}
100% {
opacity:0;
-webkit-transform:scale(1);
transform:scale(1)
}
}
@keyframes a-spot-bg-after {
0% {
opacity:1;
-webkit-transform:scale(0.55);
transform:scale(0.55)
}
100% {
opacity:0;
-webkit-transform:scale(1);
transform:scale(1)
}
}
@-webkit-keyframes a-spot-bg-2 {
0% {
opacity:0
}
100% {
opacity:1
}
}
@keyframes a-spot-bg-2 {
0% {
opacity:0
}
100% {
opacity:1
}
}
@-webkit-keyframes a-spot-1 {
0% {
opacity:0;
-webkit-transform:scale(0.2);
transform:scale(0.2)
}
100% {
opacity:1;
-webkit-transform:scale(1);
transform:scale(1)
}
}
@keyframes a-spot-1 {
0% {
opacity:0;
-webkit-transform:scale(0.2);
transform:scale(0.2)
}
100% {
opacity:1;
-webkit-transform:scale(1);
transform:scale(1)
}
}
@-webkit-keyframes a-sign-txt {
0% {
opacity:0;
-webkit-transform:translate(-20px,0);
transform:translate(-20px,0)
}
100% {
opacity:1;
-webkit-transform:translate(0px,0);
transform:translate(0px,0)
}
}
@keyframes a-sign-txt {
0% {
opacity:0;
-webkit-transform:translate(-20px,0);
transform:translate(-20px,0)
}
100% {
opacity:1;
-webkit-transform:translate(0px,0);
transform:translate(0px,0)
}
}
@keyframes chu-1 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:78px;
opacity:1
}
}
@keyframes chu-2 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:167px;
opacity:1
}
}
@keyframes chu-3 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:142px;
opacity:1
}
}
@keyframes chu-4 {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:153px;
opacity:1
}
}
@keyframes chu-5 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:119px;
opacity:1
}
}
@keyframes chu-6 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:92px;
opacity:1
}
}
@keyframes chu-7 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:121px;
opacity:1
}
}
@keyframes xin-1 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:64px;
opacity:1
}
}
@keyframes xin-2 {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:94px;
opacity:1
}
}
@keyframes xin-3 {
0% {
height:0;
opacity:0
}
1% {
height:0;
opacity:1
}
100% {
height:62px;
opacity:1
}
}
@keyframes xin-4 {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:32px;
opacity:1
}
}
@keyframes xin-5 {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:61px;
opacity:1
}
}
@keyframes xin-6 {
0% {
width:0;
opacity:0
}
1% {
width:0;
opacity:1
}
100% {
width:32px;
opacity:1
}
}
.sign-txt {
-webkit-animation:a-sign-txt .5s 7.4s linear both;
animation:a-sign-txt .5s 7.4s linear both;
-webkit-transform:translate(-20px,0);
transform:translate(-20px,0)
}
.spot-bg {
-webkit-animation:a-spot-bg 3.6s ease-in both;
animation:a-spot-bg 3.6s ease-in both;
-webkit-transform:scale(0.15);
transform:scale(0.15)
}
.spot-bg .spot-inner {
-webkit-animation:a-spot-bg 3s .5s ease-in both;
animation:a-spot-bg 3s .5s ease-in both;
-webkit-transform:scale(0.15);
transform:scale(0.15)
}
.spot-bg-2 {
-webkit-animation:a-spot-bg-2 .5s 3.6s linear both;
animation:a-spot-bg-2 .5s 3.6s linear both
}
.spot-1 {
-webkit-animation:a-spot-1 .2s 4s linear both;
animation:a-spot-1 .2s 4s linear both;
-webkit-transform:scale(0.2);
transform:scale(0.2)
}
.spot-2 {
-webkit-animation:a-spot-1 .2s 3.9s linear both;
animation:a-spot-1 .2s 3.9s linear both;
-webkit-transform:scale(0.2);
transform:scale(0.2)
}
@keyframes a-spot-bg {
0% {
opacity:0;
-webkit-transform:scale(0.15);
transform:scale(0.15)
}
15% {
opacity:1;
-webkit-transform:scale(0.2);
transform:scale(0.2)
}
20% {
opacity:1;
-webkit-transform:scale(0.22);
transform:scale(0.22)
}
100% {
opacity:.9;
-webkit-transform:scale(1);
transform:scale(1)
}
}
@keyframes a-spot-bg-after {
0% {
opacity:0;
-webkit-transform:scale(0.15);
transform:scale(0.15)
}
30% {
opacity:.8;
-webkit-transform:scale(0.2);
transform:scale(0.2)
}
35% {
opacity:.8;
-webkit-transform:scale(0.22);
transform:scale(0.22)
}
100% {
opacity:0;
-webkit-transform:scale(1);
transform:scale(1)
}
}
@keyframes a-spot-bg-2 {
0% {
opacity:0
}
100% {
opacity:1
}
}
@keyframes a-spot-1 {
0% {
opacity:0;
-webkit-transform:scale(0.2);
transform:scale(0.2)
}
100% {
opacity:1;
-webkit-transform:scale(1);
transform:scale(1)
}
}
@keyframes a-sign-txt {
0% {
opacity:0;
-webkit-transform:translate(-20px,0);
transform:translate(-20px,0)
}
100% {
opacity:1;
-webkit-transform:translate(0px,0);
transform:translate(0px,0)
}
}
body {
font-family:'helvetica neue',arial,'hiragino sans gb','microsoft yahei',sans-serif;
color:#333;
background:url(../images/70badbd0.bg.jpg) no-repeat center center #ebebeb;
background-size:cover
}
.browsehappy {
margin:.2em 0;
background:#ccc;
color:#000;
padding:.2em 0
}
.conf .conf-time,.conf .conf-title .conf-text,.conf .conf-title .conf-ver,.hide-text,.intro .slogan .slogan-text,.intro .slogan .slogan-time,.intro .slogan-tips {
display:block;
white-space:nowrap;
text-indent:100%;
overflow:hidden;
font-size:0
}
.webrebuild section {
position:relative;
background-color:transparent
}
.webrebuild section:after {
content:' ';
width:35px;
height:20px;
background:url(../images/b68ac720.down.png) no-repeat 0 0 transparent;
position:absolute;
bottom:15px;
left:50%;
margin-left:-17px;
display:none
}
.webrebuild section.active:after {
display:block
}
.webrebuild section:last-child:after {
-webkit-transform:rotate(180deg);
transform:rotate(180deg)
}
.onepage-pagination {
top:50%;
right:20px;
margin-top:-84px
}
.onepage-pagination li a {
width:22px;
height:22px
}
.onepage-pagination li a:before {
width:22px;
height:22px;
background:url(../images/b3953c08.scroll_item.png) no-repeat 0 -22px transparent
}
.onepage-pagination li a.active:before {
width:22px;
height:22px;
margin:0;
left:auto;
background:url(../images/b3953c08.scroll_item.png) no-repeat 0 0 transparent;
border:none
}
#fullPage-nav {
top:50%;
right:20px;
margin-top:-84px
}
#fullPage-nav li {
width:22px;
height:22px;
margin:18px 0
}
#fullPage-nav li a span {
width:22px;
height:22px;
background:url(../images/b3953c08.scroll_item.png) no-repeat 0 -22px transparent;
border:none;
position:static;
display:block
}
#fullPage-nav li a.active span {
background:url(../images/b3953c08.scroll_item.png) no-repeat 0 0 transparent
}
.intro {
position:relative
}
.intro .container {
width:100%
}
.intro .main {
margin-right:auto;
margin-left:auto;
max-width:1004px
}
.intro .slogan {
position:absolute;
top:50%;
left:50%;
width:460px;
height:475px;
margin:-260px 0 0 -237px
}
.intro .slogan .slogan-bg {
opacity:0;
-webkit-transform:scale(0.15);
transform:scale(0.15);
width:391px;
height:400px;
background:url(../images/1faad0d3.intro_bg.png) no-repeat 0 0 transparent;
position:absolute;
top:27px;
left:38px;
z-index:7
}
.intro .slogan .slogan-bg .slogan-bg-inner {
opacity:0;
-webkit-transform:scale(0.15);
transform:scale(0.15);
display:block;
height:400px;
width:391px;
background:url(../images/1faad0d3.intro_bg.png) no-repeat 0 0 transparent
}
.intro .slogan .slogan-drops {
width:441px;
height:475px;
background:url(../images/524edc46.intro_drops.png) no-repeat 0 0 transparent;
position:absolute;
top:0;
left:56px;
z-index:8
}
.intro .slogan .slogan-text {
width:277px;
height:307px;
background:url(../images/0b953e3c.intro_text.png) no-repeat 0 0 transparent;
position:absolute;
top:60px;
left:154px;
z-index:9
}
.intro .slogan .slogan-text .word-chu {
display:block;
height:230px;
width:182px;
position:absolute;
top:0;
left:0
}
.intro .slogan .slogan-text .chu {
display:block;
background:url(../images/46bd70ad.word.png) no-repeat 0 0 transparent;
position:absolute
}
.intro .slogan .slogan-text .chu-1 {
width:76px;
height:78px;
height:0;
background-position:0 0;
left:0;
top:0
}
.intro .slogan .slogan-text .chu-2 {
width:74px;
height:168px;
height:0;
background-position:-80px 0;
left:0;
top:63px
}
.intro .slogan .slogan-text .chu-3 {
width:88px;
height:142px;
height:0;
background-position:-158px 0;
left:0;
top:63px
}
.intro .slogan .slogan-text .chu-4 {
height:76px;
width:0;
background-position:-252px 0;
left:24px;
top:92px
}
.intro .slogan .slogan-text .chu-5 {
width:46px;
height:120px;
height:0;
background-position:-410px 0;
left:137px;
top:92px
}
.intro .slogan .slogan-text .chu-6 {
width:34px;
height:92px;
height:0;
background-position:0 bottom;
left:112px;
bottom:20px
}
.intro .slogan .slogan-text .chu-7 {
width:68px;
height:122px;
height:0;
background-position:-460px 0;
top:107px;
left:70px
}
.intro .slogan .slogan-text .word-xin {
display:block;
height:86px;
width:172px;
position:absolute;
left:106px;
top:221px
}
.intro .slogan .slogan-text .xin {
display:block;
background:url(../images/46bd70ad.word.png) no-repeat 0 0 transparent;
position:absolute
}
.intro .slogan .slogan-text .xin-1 {
width:43px;
height:0;
background-position:-252px -80px;
left:0;
top:16px
}
.intro .slogan .slogan-text .xin-2 {
height:36px;
width:0;
background-position:-300px -80px;
left:31px;
top:50px
}
.intro .slogan .slogan-text .xin-3 {
height:0;
width:43px;
background-position:-300px bottom;
left:82px;
bottom:0
}
.intro .slogan .slogan-text .xin-4 {
height:32px;
width:0;
background-position:-252px -150px;
left:63px;
top:11px
}
.intro .slogan .slogan-text .xin-5 {
height:39px;
width:0;
background-position:-348px -138px;
left:110px;
top:0
}
.intro .slogan .slogan-text .xin-6 {
height:27px;
width:0;
background-position:right 0;
right:0;
top:12px
}
.intro .slogan .slogan-time {
width:29px;
height:167px;
background:url(../images/bdfed0e3.intro_time.png) no-repeat 0 0 transparent;
position:absolute;
top:237px;
left:109px;
z-index:9
}
.intro .slogan-tips {
position:absolute;
bottom:90px;
left:50%;
margin-left:-153px;
width:306px;
height:24px;
background:url(../images/180ccd14.slogan_tips.png) no-repeat 0 0 transparent
}
.intro.active .slogan .slogan-bg {
-webkit-animation:a-spot-bg 3.6s ease-in both;
animation:a-spot-bg 3.6s ease-in both
}
.intro.active .slogan .slogan-bg-inner {
-webkit-animation:a-spot-bg-after 3s 100ms linear both;
animation:a-spot-bg-after 3s 100ms linear both
}
.intro.active .slogan .slogan-drops {
-webkit-animation-delay:3.6s;
animation-delay:3.6s;
-webkit-animation-duration:500ms;
animation-duration:500ms
}
.intro.active .slogan .slogan-text {
background:0 0;
-webkit-animation-duration:10ms;
animation-duration:10ms
}
.intro.active .slogan .slogan-text .chu-1 {
-webkit-animation:chu-1 .3s 4.1s linear both;
animation:chu-1 .3s 4.1s linear both
}
.intro.active .slogan .slogan-text .chu-2 {
-webkit-animation:chu-2 .3s 4.4s linear both;
animation:chu-2 .3s 4.4s linear both
}
.intro.active .slogan .slogan-text .chu-3 {
-webkit-animation:chu-3 .3s 4.7s linear both;
animation:chu-3 .3s 4.7s linear both
}
.intro.active .slogan .slogan-text .chu-4 {
-webkit-animation:chu-4 .2s 5s linear both;
animation:chu-4 .2s 5s linear both
}
.intro.active .slogan .slogan-text .chu-5 {
-webkit-animation:chu-5 .3s 5.2s linear both;
animation:chu-5 .3s 5.2s linear both
}
.intro.active .slogan .slogan-text .chu-6 {
-webkit-animation:chu-6 .2s 5.5s linear both;
animation:chu-6 .2s 5.5s linear both
}
.intro.active .slogan .slogan-text .chu-7 {
-webkit-animation:chu-7 .3s 5.7s linear both;
animation:chu-7 .3s 5.7s linear both
}
.intro.active .slogan .slogan-text .xin-1 {
-webkit-animation:xin-1 .3s 6.1s linear both;
animation:xin-1 .3s 6.1s linear both
}
.intro.active .slogan .slogan-text .xin-2 {
-webkit-animation:xin-2 .2s 6.4s linear both;
animation:xin-2 .2s 6.4s linear both
}
.intro.active .slogan .slogan-text .xin-3 {
-webkit-animation:xin-3 .2s 6.6s linear both;
animation:xin-3 .2s 6.6s linear both
}
.intro.active .slogan .slogan-text .xin-4 {
-webkit-animation:xin-4 .3s 6.8s linear both;
animation:xin-4 .3s 6.8s linear both
}
.intro.active .slogan .slogan-text .xin-5 {
-webkit-animation:xin-5 .2s 7.1s linear both;
animation:xin-5 .2s 7.1s linear both
}
.intro.active .slogan .slogan-text .xin-6 {
-webkit-animation:xin-6 .1s 7.3s linear both;
animation:xin-6 .1s 7.3s linear both
}
.intro.active .slogan .slogan-time {
-webkit-animation-delay:7.5s;
animation-delay:7.5s;
-webkit-animation-duration:1.4s;
animation-duration:1.4s
}
.intro.active .slogan-tips {
-webkit-animation-delay:8s;
animation-delay:8s;
-webkit-animation-duration:3s;
animation-duration:3s
}
.topical .container {
width:100%;
height:100%
}
.topical .main {
position:relative;
margin-right:auto;
margin-left:auto;
max-width:860px;
height:100%
}
.topical .topical-title {
position:absolute;
right:30px;
top:50%;
width:66px;
height:265px;
margin-top:-132px
}
.topical .topical-title .topical-text {
position:absolute;
top:0;
left:0;
width:66px;
height:265px;
background:url(../images/ae879ecd.topical_text.png) no-repeat 0 0 transparent;
z-index:9
}
.topical .topical-title .topical-circle {
position:absolute;
top:-20px;
left:-20px;
width:103px;
height:95px;
background:url(../images/88f8a008.topical_circle.png) no-repeat 0 0 transparent;
z-index:8
}
.topical .topical-content {
position:absolute;
top:50%;
left:0;
height:300px;
margin-top:-150px;
font-size:18px;
line-height:1.8;
color:#333;
margin-right:160px
}
.topical .topical-content p {
margin-bottom:40px
}
.topical .topical-content .author {
display:block;
text-align:right;
color:#666;
font-size:14px
}
.topical.active .topical-title .topical-text {
-webkit-animation-delay:300ms;
animation-delay:300ms
}
.topical.active .topical-title .topical-circle {
-webkit-animation-delay:800ms;
animation-delay:800ms;
-webkit-animation-duration:1.2s;
animation-duration:1.2s
}
.topical.active .topical-content {
-webkit-animation-delay:1800ms;
animation-delay:1800ms;
-webkit-animation-duration:3.5s;
animation-duration:3.5s
}
.talk .container {
position:relative;
width:100%;
height:100%
}
.talk .talk-title {
position:absolute;
width:234px;
height:333px;
top:20%;
left:50%;
margin-left:-104px
}
.talk .talk-title .talk-text {
width:234px;
height:333px;
position:absolute;
top:0;
left:0;
z-index:9
}
.talk .talk-title .talk-text span {
width:58px;
height:100%;
float:right;
overflow:hidden;
background:url(../images/f90e7154.talk_text.png) no-repeat 0 0 transparent
}
.talk .talk-title .talk-text span.w1 {
background-position:-200px 0
}
.talk .talk-title .talk-text span.w2 {
background-position:-133px 0
}
.talk .talk-title .talk-text span.w3 {
background-position:-66px 0
}
.talk .talk-title .talk-text span.w4 {
background-position:0 0
}
.talk .talk-title .talk-circle {
width:198px;
height:168px;
position:absolute;
top:-25px;
right:-60px;
background:url(../images/5b105a9f.talk_circle.png) no-repeat 0 0 transparent;
z-index:8
}
.talk.active .talk-title .talk-text span {
-webkit-animation-duration:1800ms;
animation-duration:1800ms
}
.talk.active .talk-title .talk-text span.w1 {
-webkit-animation-delay:800ms;
animation-delay:800ms
}
.talk.active .talk-title .talk-text span.w2 {
-webkit-animation-delay:1.6s;
animation-delay:1.6s
}
.talk.active .talk-title .talk-text span.w3 {
-webkit-animation-delay:2.4s;
animation-delay:2.4s
}
.talk.active .talk-title .talk-text span.w4 {
-webkit-animation-delay:3.2s;
animation-delay:3.2s
}
.talk.active .talk-title .talk-circle {
-webkit-animation-delay:1200ms;
animation-delay:1200ms;
-webkit-animation-duration:6s;
animation-duration:6s
}
.conf .container {
position:relative;
height:100%;
width:100%
}
.conf .conf-title {
position:absolute;
top:20%;
left:50%;
margin-left:-75px;
width:149px;
height:151px
}
.conf .conf-title .conf-ver {
position:absolute;
top:37px;
left:33px;
width:20px;
height:118px;
background:url(../images/10f650f3.conf_ver.png) no-repeat 0 0 transparent;
z-index:9
}
.conf .conf-title .conf-text {
position:absolute;
top:-3px;
left:64px;
width:138px;
height:131px;
background:url(../images/838c1cfd.conf_text.png) no-repeat 0 0 transparent;
z-index:8
}
.conf .conf-title .conf-point {
position:absolute;
top:0;
left:0;
width:149px;
height:151px;
background:url(../images/955d0117.conf_point.png) no-repeat 0 0 transparent;
z-index:7
}
.conf .conf-time {
position:absolute;
top:50%;
left:50%;
margin-left:-158px;
width:315px;
height:105px;
background:url(../images/b629ea1a.conf_time.png) no-repeat 0 0 transparent
}
.conf.active .conf-title .conf-ver {
-webkit-animation-delay:1400ms;
animation-delay:1400ms
}
.conf.active .conf-title .conf-text {
-webkit-animation-delay:800ms;
animation-delay:800ms
}
.conf.active .conf-title .conf-point {
-webkit-animation-duration:6s;
animation-duration:6s;
-webkit-animation-delay:1800ms;
animation-delay:1800ms
}
.conf.active .conf-time {
-webkit-animation-duration:3s;
animation-duration:3s;
-webkit-animation-delay:2000ms;
animation-delay:2000ms
}
.conf .footer {
position:absolute;
bottom:60px;
width:100%;
left:0;
line-height:1.6;
font-size:14px;
color:#999;
text-align:center
}
.conf .footer p {
margin:0
}
.conf .footer a {
color:#666;
text-decoration:none
}
.conf .footer a:hover {
text-decoration:underline
}
.conf .footer .term {
margin:0 3px
}
@media (min-width:768px) and (max-width:979px) {
.topical .main {
margin:0 40px;
max-width:auto
}
}
@media (max-width:767px) {
.webrebuild section:after {
width:18px;
height:10px;
background-size:18px 10px;
bottom:10px;
left:50%;
margin-left:-9px
}
.onepage-pagination {
top:10px;
right:10px;
margin-top:auto
}
.onepage-pagination li a {
width:11px;
height:11px;
padding:5px
}
.onepage-pagination li a:before {
width:11px;
height:11px;
background-size:11px 22px;
background-position:0 -11px
}
.onepage-pagination li a.active:before {
width:11px;
height:11px;
background-size:11px 22px
}
#fullPage-nav {
top:60px;
right:10px;
margin-top:auto
}
#fullPage-nav li {
width:11px;
height:11px;
margin:10px 0
}
#fullPage-nav li a span {
width:11px;
height:11px;
background-size:11px 22px;
background-position:0 -11px
}
#fullPage-nav li a.active span {
background-size:11px 22px
}
.intro .slogan {
width:230px;
height:237px;
margin:-135px 0 0 -118px
}
.intro .slogan .slogan-bg {
width:195px;
height:200px;
background-size:195px 200px;
top:13px;
left:19px
}
.intro .slogan .slogan-bg .slogan-bg-inner {
width:195px;
height:200px;
background-size:195px 200px
}
.intro .slogan .slogan-drops {
width:220px;
height:237px;
background-size:220px 237px;
top:0;
left:28px
}
.intro .slogan .slogan-text {
width:138px;
height:153px;
background-size:138px 153px;
top:30px;
left:77px
}
.intro .slogan .slogan-text .word-chu {
height:115px;
width:91px
}
.intro .slogan .slogan-text .word-xin {
height:43px;
width:86px;
left:53px;
top:110px
}
.intro .slogan .slogan-text .chu {
background-size:282px 100px
}
.intro .slogan .slogan-text .chu-1 {
width:38px;
height:39px
}
.intro .slogan .slogan-text .chu-2 {
width:37px;
height:0;
background-position:-40px 0;
top:31px
}
.intro .slogan .slogan-text .chu-3 {
width:44px;
height:0;
background-position:-79px 0;
left:0;
top:31px
}
.intro .slogan .slogan-text .chu-4 {
height:38px;
width:0;
background-position:-126px 0;
left:12px;
top:46px
}
.intro .slogan .slogan-text .chu-5 {
width:23px;
height:0;
background-position:-205px 0;
left:68px;
top:46px
}
.intro .slogan .slogan-text .chu-6 {
width:17px;
height:0;
background-position:0 bottom;
left:56px;
bottom:10px
}
.intro .slogan .slogan-text .chu-7 {
width:34px;
height:0;
background-position:-230px 0;
top:53px;
left:35px
}
.intro .slogan .slogan-text .xin {
background-size:282px 100px
}
.intro .slogan .slogan-text .xin-1 {
width:21px;
height:0;
background-position:-126px -40px;
left:0;
top:8px
}
.intro .slogan .slogan-text .xin-2 {
height:18px;
width:0;
background-position:-150px -40px;
left:15px;
top:25px
}
.intro .slogan .slogan-text .xin-3 {
height:0;
width:21px;
background-position:-150px bottom;
left:41px;
bottom:0
}
.intro .slogan .slogan-text .xin-4 {
height:16px;
width:0;
background-position:-126px -75px;
left:31px;
top:5px
}
.intro .slogan .slogan-text .xin-5 {
height:19px;
width:0;
background-position:-174px -69px;
left:55px;
top:0
}
.intro .slogan .slogan-text .xin-6 {
height:13px;
width:0;
background-position:right 0;
right:0;
top:6px
}
.intro .slogan .slogan-time {
width:14px;
height:83px;
background-size:14px 83px;
top:118px;
left:54px
}
.intro .slogan-tips {
bottom:50px;
width:153px;
height:12px;
background-size:153px 12px;
margin-left:-72px
}
.intro.active .slogan .slogan-bg .slogan-bg-inner {
-webkit-animation:a-spot-bg-after 3s ease-in both;
animation:a-spot-bg-after 3s ease-in both
}
.intro.active .slogan .slogan-text .chu-1 {
-webkit-animation:chu-1-m .3s 4.1s linear both;
animation:chu-1-m .3s 4.1s linear both
}
.intro.active .slogan .slogan-text .chu-2 {
-webkit-animation:chu-2-m .3s 4.4s linear both;
animation:chu-2-m .3s 4.4s linear both
}
.intro.active .slogan .slogan-text .chu-3 {
-webkit-animation:chu-3-m .3s 4.7s linear both;
animation:chu-3-m .3s 4.7s linear both
}
.intro.active .slogan .slogan-text .chu-4 {
-webkit-animation:chu-4-m .2s 5s linear both;
animation:chu-4-m .2s 5s linear both
}
.intro.active .slogan .slogan-text .chu-5 {
-webkit-animation:chu-5-m .3s 5.2s linear both;
animation:chu-5-m .3s 5.2s linear both
}
.intro.active .slogan .slogan-text .chu-6 {
-webkit-animation:chu-6-m .2s 5.5s linear both;
animation:chu-6-m .2s 5.5s linear both
}
.intro.active .slogan .slogan-text .chu-7 {
-webkit-animation:chu-7-m .3s 5.7s linear both;
animation:chu-7-m .3s 5.7s linear both
}
.intro.active .slogan .slogan-text .xin-1 {
-webkit-animation:xin-1-m .3s 6.1s linear both;
animation:xin-1-m .3s 6.1s linear both
}
.intro.active .slogan .slogan-text .xin-2 {
-webkit-animation:xin-2-m .2s 6.4s linear both;
animation:xin-2-m .2s 6.4s linear both
}
.intro.active .slogan .slogan-text .xin-3 {
-webkit-animation:xin-3-m .2s 6.6s linear both;
animation:xin-3-m .2s 6.6s linear both
}
.intro.active .slogan .slogan-text .xin-4 {
-webkit-animation:xin-4-m .3s 6.8s linear both;
animation:xin-4-m .3s 6.8s linear both
}
.intro.active .slogan .slogan-text .xin-5 {
-webkit-animation:xin-5-m .2s 7.1s linear both;
animation:xin-5-m .2s 7.1s linear both
}
.intro.active .slogan .slogan-text .xin-6 {
-webkit-animation:xin-6-m .1s 7.3s linear both;
animation:xin-6-m .1s 7.3s linear both
}
.topical .main {
max-width:320px
}
.topical .topical-title {
width:33px;
height:132px;
right:30px;
top:50%;
margin-top:-66px
}
.topical .topical-title .topical-text {
top:0;
left:0;
width:33px;
height:132px;
background-size:33px 132px
}
.topical .topical-title .topical-circle {
top:-10px;
left:-10px;
width:52px;
height:47px;
background-size:52px 47px
}
.topical .topical-content {
position:absolute;
top:50%;
left:0;
height:300px;
margin-top:-150px;
margin-right:93px;
padding-left:30px;
font-size:14px
}
.topical .topical-content p {
margin-bottom:40px
}
.topical .topical-content p:first-child {
display:none
}
.topical .topical-content .author {
display:block;
text-align:right;
color:#666;
font-size:14px
}
.talk .talk-title {
width:117px;
height:163px;
top:50%;
left:50%;
margin-left:-52px;
margin-top:-81px
}
.talk .talk-title .talk-text {
width:117px;
height:163px
}
.talk .talk-title .talk-text span {
width:28px;
height:100%;
float:right;
overflow:hidden;
background-size:117px 163px
}
.talk .talk-title .talk-text span.w1 {
background-position:-100px 0
}
.talk .talk-title .talk-text span.w2 {
background-position:-66px 0
}
.talk .talk-title .talk-text span.w3 {
background-position:-33px 0
}
.talk .talk-title .talk-text span.w4 {
background-position:0 0
}
.talk .talk-title .talk-circle {
width:99px;
height:84px;
background-size:99px 84px;
top:-12px;
right:-30px
}
.conf .conf-title {
top:20%;
left:50%;
margin-left:-37px;
width:75px;
height:76px
}
.conf .conf-title .conf-ver {
top:18px;
left:16px;
width:10px;
height:59px;
background-size:10px 59px
}
.conf .conf-title .conf-text {
top:-1px;
left:32px;
width:69px;
height:65px;
background-size:69px 65px
}
.conf .conf-title .conf-point {
top:0;
left:0;
width:75px;
height:76px;
background-size:75px 76px
}
.conf .conf-time {
top:50%;
left:50%;
margin-left:-79px;
width:158px;
height:54px;
background-size:158px 54px
}
.conf .footer {
display:none
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment