.cd-intro {
  width: 90%; font-family:"Microsoft YaHei"; margin:0px auto;
}

.cd-headline{text-align:center;font-size:46px;line-height:60px;font-weight:bold;color:#383838;}
.cd-headline em{color:#818181;font-weight:normal;}
.cd-words-wrapper {
  display: inline-block;
  position: relative;
  text-align: left;
}
.cd-words-wrapper b {
  display: inline-block;
  position: absolute;
  white-space: nowrap;
  left: 0;
  top: 0;
}
.cd-words-wrapper b.is-visible {
  position: relative;
}
.no-js .cd-words-wrapper b {
  opacity: 0;
}
.no-js .cd-words-wrapper b.is-visible {
  opacity: 1;
}

/* -------------------------------- 

xrotate-1 

-------------------------------- */
.cd-headline.rotate-1 .cd-words-wrapper {
  -webkit-perspective: 300px;
  -moz-perspective: 300px;
  perspective: 300px;
}
.cd-headline.rotate-1 b {
  opacity: 0;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
}
.cd-headline.rotate-1 b.is-visible {
  opacity: 1;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  -webkit-animation: cd-rotate-1-in 1.2s;
  -moz-animation: cd-rotate-1-in 1.2s;
  animation: cd-rotate-1-in 1.2s;
}
.cd-headline.rotate-1 b.is-hidden {
  -webkit-transform: rotateX(180deg);
  -moz-transform: rotateX(180deg);
  -ms-transform: rotateX(180deg);
  -o-transform: rotateX(180deg);
  transform: rotateX(180deg);
  -webkit-animation: cd-rotate-1-out 1.2s;
  -moz-animation: cd-rotate-1-out 1.2s;
  animation: cd-rotate-1-out 1.2s;
}

@-webkit-keyframes cd-rotate-1-in {
  0% {
    -webkit-transform: rotateX(180deg);
    opacity: 0;
  }
  35% {
    -webkit-transform: rotateX(120deg);
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(360deg);
    opacity: 1;
  }
}
@-moz-keyframes cd-rotate-1-in {
  0% {
    -moz-transform: rotateX(180deg);
    opacity: 0;
  }
  35% {
    -moz-transform: rotateX(120deg);
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  100% {
    -moz-transform: rotateX(360deg);
    opacity: 1;
  }
}
@keyframes cd-rotate-1-in {
  0% {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
    opacity: 0;
  }
  35% {
    -webkit-transform: rotateX(120deg);
    -moz-transform: rotateX(120deg);
    -ms-transform: rotateX(120deg);
    -o-transform: rotateX(120deg);
    transform: rotateX(120deg);
    opacity: 0;
  }
  65% {
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -o-transform: rotateX(360deg);
    transform: rotateX(360deg);
    opacity: 1;
  }
}
@-webkit-keyframes cd-rotate-1-out {
  0% {
    -webkit-transform: rotateX(0deg);
    opacity: 1;
  }
  35% {
    -webkit-transform: rotateX(-40deg);
    opacity: 1;
  }
  65% {
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(180deg);
    opacity: 0;
  }
}
@-moz-keyframes cd-rotate-1-out {
  0% {
    -moz-transform: rotateX(0deg);
    opacity: 1;
  }
  35% {
    -moz-transform: rotateX(-40deg);
    opacity: 1;
  }
  65% {
    opacity: 0;
  }
  100% {
    -moz-transform: rotateX(180deg);
    opacity: 0;
  }
}
@keyframes cd-rotate-1-out {
  0% {
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
    opacity: 1;
  }
  35% {
    -webkit-transform: rotateX(-40deg);
    -moz-transform: rotateX(-40deg);
    -ms-transform: rotateX(-40deg);
    -o-transform: rotateX(-40deg);
    transform: rotateX(-40deg);
    opacity: 1;
  }
  65% {
    opacity: 0;
  }
  100% {
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
    opacity: 0;
  }
}
/* -------------------------------- 

xtype 

-------------------------------- */
.cd-headline.type .cd-words-wrapper {
  vertical-align: top;
  overflow: hidden;
}
.cd-headline.type .cd-words-wrapper::after {
  /* vertical bar */
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height: 90%;
  width: 1px;
  background-color: #aebcb9;
}
.cd-headline.type .cd-words-wrapper.waiting::after {
  -webkit-animation: cd-pulse 1s infinite;
  -moz-animation: cd-pulse 1s infinite;
  animation: cd-pulse 1s infinite;
}
.cd-headline.type .cd-words-wrapper.selected {
  background-color: #f3f3f3;
   
}
.cd-headline.type .cd-words-wrapper.selected::after {
  visibility: hidden;
}
.cd-headline.type .cd-words-wrapper.selected b {
  color: #f3f3f3;
}
.cd-headline.type b {
  visibility: hidden;
}
.cd-headline.type b.is-visible {
  visibility: visible;
}
.cd-headline.type i {
  position: absolute;
  visibility: hidden;
}
.cd-headline.type i.in {
  position: relative;
  visibility: visible;
}

@-webkit-keyframes cd-pulse {
  0% {
    -webkit-transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-50%) scale(0.9);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-50%) scale(0);
    opacity: 0;
  }
}
@-moz-keyframes cd-pulse {
  0% {
    -moz-transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  40% {
    -moz-transform: translateY(-50%) scale(0.9);
    opacity: 0;
  }
  100% {
    -moz-transform: translateY(-50%) scale(0);
    opacity: 0;
  }
}
@keyframes cd-pulse {
  0% {
    -webkit-transform: translateY(-50%) scale(1);
    -moz-transform: translateY(-50%) scale(1);
    -ms-transform: translateY(-50%) scale(1);
    -o-transform: translateY(-50%) scale(1);
    transform: translateY(-50%) scale(1);
    opacity: 1;
  }
  40% {
    -webkit-transform: translateY(-50%) scale(0.9);
    -moz-transform: translateY(-50%) scale(0.9);
    -ms-transform: translateY(-50%) scale(0.9);
    -o-transform: translateY(-50%) scale(0.9);
    transform: translateY(-50%) scale(0.9);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateY(-50%) scale(0);
    -moz-transform: translateY(-50%) scale(0);
    -ms-transform: translateY(-50%) scale(0);
    -o-transform: translateY(-50%) scale(0);
    transform: translateY(-50%) scale(0);
    opacity: 0;
  }
}
/* -------------------------------- 

xrotate-2 

-------------------------------- */
.cd-headline.rotate-2 .cd-words-wrapper {
  -webkit-perspective: 300px;
  -moz-perspective: 300px;
  perspective: 300px;
}
.cd-headline.rotate-2 i, .cd-headline.rotate-2 em {
  display: inline-block;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.cd-headline.rotate-2 i {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: translateZ(-20px) rotateX(90deg);
  -moz-transform: translateZ(-20px) rotateX(90deg);
  -ms-transform: translateZ(-20px) rotateX(90deg);
  -o-transform: translateZ(-20px) rotateX(90deg);
  transform: translateZ(-20px) rotateX(90deg);
  opacity: 0;
}
.is-visible .cd-headline.rotate-2 i {
  opacity: 1;
}
.cd-headline.rotate-2 i.in {
  -webkit-animation: cd-rotate-2-in 0.4s forwards;
  -moz-animation: cd-rotate-2-in 0.4s forwards;
  animation: cd-rotate-2-in 0.4s forwards;
}
.cd-headline.rotate-2 i.out {
  -webkit-animation: cd-rotate-2-out 0.4s forwards;
  -moz-animation: cd-rotate-2-out 0.4s forwards;
  animation: cd-rotate-2-out 0.4s forwards;
}
.cd-headline.rotate-2 em {
  -webkit-transform: translateZ(20px);
  -moz-transform: translateZ(20px);
  -ms-transform: translateZ(20px);
  -o-transform: translateZ(20px);
  transform: translateZ(20px);
}

.no-csstransitions .cd-headline.rotate-2 i {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
  opacity: 0;
}
.no-csstransitions .cd-headline.rotate-2 i em {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
}

.no-csstransitions .cd-headline.rotate-2 .is-visible i {
  opacity: 1;
}

@-webkit-keyframes cd-rotate-2-in {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(-20px) rotateX(90deg);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateZ(-20px) rotateX(-10deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(-20px) rotateX(0deg);
  }
}
@-moz-keyframes cd-rotate-2-in {
  0% {
    opacity: 0;
    -moz-transform: translateZ(-20px) rotateX(90deg);
  }
  60% {
    opacity: 1;
    -moz-transform: translateZ(-20px) rotateX(-10deg);
  }
  100% {
    opacity: 1;
    -moz-transform: translateZ(-20px) rotateX(0deg);
  }
}
@keyframes cd-rotate-2-in {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(-20px) rotateX(90deg);
    -moz-transform: translateZ(-20px) rotateX(90deg);
    -ms-transform: translateZ(-20px) rotateX(90deg);
    -o-transform: translateZ(-20px) rotateX(90deg);
    transform: translateZ(-20px) rotateX(90deg);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateZ(-20px) rotateX(-10deg);
    -moz-transform: translateZ(-20px) rotateX(-10deg);
    -ms-transform: translateZ(-20px) rotateX(-10deg);
    -o-transform: translateZ(-20px) rotateX(-10deg);
    transform: translateZ(-20px) rotateX(-10deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(-20px) rotateX(0deg);
    -moz-transform: translateZ(-20px) rotateX(0deg);
    -ms-transform: translateZ(-20px) rotateX(0deg);
    -o-transform: translateZ(-20px) rotateX(0deg);
    transform: translateZ(-20px) rotateX(0deg);
  }
}
@-webkit-keyframes cd-rotate-2-out {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(-20px) rotateX(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateZ(-20px) rotateX(-100deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateZ(-20px) rotateX(-90deg);
  }
}
@-moz-keyframes cd-rotate-2-out {
  0% {
    opacity: 1;
    -moz-transform: translateZ(-20px) rotateX(0);
  }
  60% {
    opacity: 0;
    -moz-transform: translateZ(-20px) rotateX(-100deg);
  }
  100% {
    opacity: 0;
    -moz-transform: translateZ(-20px) rotateX(-90deg);
  }
}
@keyframes cd-rotate-2-out {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(-20px) rotateX(0);
    -moz-transform: translateZ(-20px) rotateX(0);
    -ms-transform: translateZ(-20px) rotateX(0);
    -o-transform: translateZ(-20px) rotateX(0);
    transform: translateZ(-20px) rotateX(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateZ(-20px) rotateX(-100deg);
    -moz-transform: translateZ(-20px) rotateX(-100deg);
    -ms-transform: translateZ(-20px) rotateX(-100deg);
    -o-transform: translateZ(-20px) rotateX(-100deg);
    transform: translateZ(-20px) rotateX(-100deg);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateZ(-20px) rotateX(-90deg);
    -moz-transform: translateZ(-20px) rotateX(-90deg);
    -ms-transform: translateZ(-20px) rotateX(-90deg);
    -o-transform: translateZ(-20px) rotateX(-90deg);
    transform: translateZ(-20px) rotateX(-90deg);
  }
}
/* -------------------------------- 

xloading-bar 

-------------------------------- */
.cd-headline.loading-bar span {
  display: inline-block;
  padding:0;
}
.cd-headline.loading-bar .cd-words-wrapper {
  overflow: hidden;
  vertical-align: top;
}
.cd-headline.loading-bar .cd-words-wrapper::after {
  /* loading bar */
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #2344a7;
  z-index: 2;
  -webkit-transition: width 0.3s -0.1s;
  -moz-transition: width 0.3s -0.1s;
  transition: width 0.3s -0.1s;
}
.cd-headline.loading-bar .cd-words-wrapper.is-loading::after {
  width: 100%;
  -webkit-transition: width 3s;
  -moz-transition: width 3s;
  transition: width 3s;
}
.cd-headline.loading-bar b {
  top: .2em;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  -moz-transition: opacity 0.3s;
  transition: opacity 0.3s;
}
.cd-headline.loading-bar b.is-visible {
  opacity: 1;
  top: 0;
}

/* -------------------------------- 

xslide 

-------------------------------- */
.cd-headline.slide span {
  display: inline-block;
  padding: .2em 0;
}
.cd-headline.slide .cd-words-wrapper {
  overflow: hidden;
  vertical-align: top;
}
.cd-headline.slide b {
  opacity: 0;
  top: .2em;
}
.cd-headline.slide b.is-visible {
  top: 0;
  opacity: 1;
  -webkit-animation: slide-in 0.6s;
  -moz-animation: slide-in 0.6s;
  animation: slide-in 0.6s;
}
.cd-headline.slide b.is-hidden {
  -webkit-animation: slide-out 0.6s;
  -moz-animation: slide-out 0.6s;
  animation: slide-out 0.6s;
}

@-webkit-keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
}
@-moz-keyframes slide-in {
  0% {
    opacity: 0;
    -moz-transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -moz-transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
}
@keyframes slide-in {
  0% {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    -moz-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    -o-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -ms-transform: translateY(20%);
    -o-transform: translateY(20%);
    transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
}
@-webkit-keyframes slide-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
  }
}
@-moz-keyframes slide-out {
  0% {
    opacity: 1;
    -moz-transform: translateY(0);
  }
  60% {
    opacity: 0;
    -moz-transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -moz-transform: translateY(100%);
  }
}
@keyframes slide-out {
  0% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateY(120%);
    -moz-transform: translateY(120%);
    -ms-transform: translateY(120%);
    -o-transform: translateY(120%);
    transform: translateY(120%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateY(100%);
    -moz-transform: translateY(100%);
    -ms-transform: translateY(100%);
    -o-transform: translateY(100%);
    transform: translateY(100%);
  }
}
/* -------------------------------- 

xclip 

-------------------------------- */
.cd-headline.clip span {
  display: inline-block;
  padding:0;
}
.cd-headline.clip .cd-words-wrapper {
  overflow: hidden;
  vertical-align: top;
}
.cd-headline.clip .cd-words-wrapper::after {
  /* line */
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background-color: #aebcb9;
}
.cd-headline.clip b {
  opacity: 0;
}
.cd-headline.clip b.is-visible {
  opacity: 1;
}

/* -------------------------------- 

xzoom 

-------------------------------- */
.cd-headline.zoom .cd-words-wrapper {
  -webkit-perspective: 300px;
  -moz-perspective: 300px;
  perspective: 300px;
}
.cd-headline.zoom b {
  opacity: 0;
}
.cd-headline.zoom b.is-visible {
  opacity: 1;
  -webkit-animation: zoom-in 0.8s;
  -moz-animation: zoom-in 0.8s;
  animation: zoom-in 0.8s;
}
.cd-headline.zoom b.is-hidden {
  -webkit-animation: zoom-out 0.8s;
  -moz-animation: zoom-out 0.8s;
  animation: zoom-out 0.8s;
}

@-webkit-keyframes zoom-in {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
  }
}
@-moz-keyframes zoom-in {
  0% {
    opacity: 0;
    -moz-transform: translateZ(100px);
  }
  100% {
    opacity: 1;
    -moz-transform: translateZ(0);
  }
}
@keyframes zoom-in {
  0% {
    opacity: 0;
    -webkit-transform: translateZ(100px);
    -moz-transform: translateZ(100px);
    -ms-transform: translateZ(100px);
    -o-transform: translateZ(100px);
    transform: translateZ(100px);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
  }
}
@-webkit-keyframes zoom-out {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateZ(-100px);
  }
}
@-moz-keyframes zoom-out {
  0% {
    opacity: 1;
    -moz-transform: translateZ(0);
  }
  100% {
    opacity: 0;
    -moz-transform: translateZ(-100px);
  }
}
@keyframes zoom-out {
  0% {
    opacity: 1;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateZ(-100px);
    -moz-transform: translateZ(-100px);
    -ms-transform: translateZ(-100px);
    -o-transform: translateZ(-100px);
    transform: translateZ(-100px);
  }
}
/* -------------------------------- 

xrotate-3 

-------------------------------- */
.cd-headline.rotate-3 .cd-words-wrapper {
  -webkit-perspective: 300px;
  -moz-perspective: 300px;
  perspective: 300px;
}
.cd-headline.rotate-3 i {
  display: inline-block;
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.is-visible .cd-headline.rotate-3 i {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
}
.cd-headline.rotate-3 i.in {
  -webkit-animation: cd-rotate-3-in 0.6s forwards;
  -moz-animation: cd-rotate-3-in 0.6s forwards;
  animation: cd-rotate-3-in 0.6s forwards;
}
.cd-headline.rotate-3 i.out {
  -webkit-animation: cd-rotate-3-out 0.6s forwards;
  -moz-animation: cd-rotate-3-out 0.6s forwards;
  animation: cd-rotate-3-out 0.6s forwards;
}

.no-csstransitions .cd-headline.rotate-3 i {
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  transform: rotateY(0deg);
  opacity: 0;
}

.no-csstransitions .cd-headline.rotate-3 .is-visible i {
  opacity: 1;
}

@-webkit-keyframes cd-rotate-3-in {
  0% {
    -webkit-transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(0deg);
  }
}
@-moz-keyframes cd-rotate-3-in {
  0% {
    -moz-transform: rotateY(180deg);
  }
  100% {
    -moz-transform: rotateY(0deg);
  }
}
@keyframes cd-rotate-3-in {
  0% {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
  }
  100% {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    transform: rotateY(0deg);
  }
}
@-webkit-keyframes cd-rotate-3-out {
  0% {
    -webkit-transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(-180deg);
  }
}
@-moz-keyframes cd-rotate-3-out {
  0% {
    -moz-transform: rotateY(0);
  }
  100% {
    -moz-transform: rotateY(-180deg);
  }
}
@keyframes cd-rotate-3-out {
  0% {
    -webkit-transform: rotateY(0);
    -moz-transform: rotateY(0);
    -ms-transform: rotateY(0);
    -o-transform: rotateY(0);
    transform: rotateY(0);
  }
  100% {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
  }
}
/* -------------------------------- 

xscale 

-------------------------------- */
.cd-headline.scale i {
  display: inline-block;
  opacity: 0;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
}
.is-visible .cd-headline.scale i {
  opacity: 1;
}
.cd-headline.scale i.in {
  -webkit-animation: scale-up 0.6s forwards;
  -moz-animation: scale-up 0.6s forwards;
  animation: scale-up 0.6s forwards;
}
.cd-headline.scale i.out {
  -webkit-animation: scale-down 0.6s forwards;
  -moz-animation: scale-down 0.6s forwards;
  animation: scale-down 0.6s forwards;
}

.no-csstransitions .cd-headline.scale i {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  opacity: 0;
}

.no-csstransitions .cd-headline.scale .is-visible i {
  opacity: 1;
}

@-webkit-keyframes scale-up {
  0% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
  60% {
    -webkit-transform: scale(1.2);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}
@-moz-keyframes scale-up {
  0% {
    -moz-transform: scale(0);
    opacity: 0;
  }
  60% {
    -moz-transform: scale(1.2);
    opacity: 1;
  }
  100% {
    -moz-transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-up {
  0% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
  60% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes scale-down {
  0% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  60% {
    -webkit-transform: scale(0);
    opacity: 0;
  }
}
@-moz-keyframes scale-down {
  0% {
    -moz-transform: scale(1);
    opacity: 1;
  }
  60% {
    -moz-transform: scale(0);
    opacity: 0;
  }
}
@keyframes scale-down {
  0% {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
  60% {
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    transform: scale(0);
    opacity: 0;
  }
}
/* -------------------------------- 

xpush 

-------------------------------- */
.cd-headline.push b {
  opacity: 0;
}
.cd-headline.push b.is-visible {
  opacity: 1;
  -webkit-animation: push-in 0.6s;
  -moz-animation: push-in 0.6s;
  animation: push-in 0.6s;
}
.cd-headline.push b.is-hidden {
  -webkit-animation: push-out 0.6s;
  -moz-animation: push-out 0.6s;
  animation: push-out 0.6s;
}

@-webkit-keyframes push-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(10%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
}
@-moz-keyframes push-in {
  0% {
    opacity: 0;
    -moz-transform: translateX(-100%);
  }
  60% {
    opacity: 1;
    -moz-transform: translateX(10%);
  }
  100% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
}
@keyframes push-in {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    transform: translateX(-100%);
  }
  60% {
    opacity: 1;
    -webkit-transform: translateX(10%);
    -moz-transform: translateX(10%);
    -ms-transform: translateX(10%);
    -o-transform: translateX(10%);
    transform: translateX(10%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
}
@-webkit-keyframes push-out {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateX(110%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%);
  }
}
@-moz-keyframes push-out {
  0% {
    opacity: 1;
    -moz-transform: translateX(0);
  }
  60% {
    opacity: 0;
    -moz-transform: translateX(110%);
  }
  100% {
    opacity: 0;
    -moz-transform: translateX(100%);
  }
}
@keyframes push-out {
  0% {
    opacity: 1;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  60% {
    opacity: 0;
    -webkit-transform: translateX(110%);
    -moz-transform: translateX(110%);
    -ms-transform: translateX(110%);
    -o-transform: translateX(110%);
    transform: translateX(110%);
  }
  100% {
    opacity: 0;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
}

.case_top { width:1380px; overflow:hidden; margin:0 auto; text-align:center;}
.case_top a { float:left; width:650px; margin:0 20px; display:inline;height:400px;overflow:hidden;}
.case-theme-box{width:100%;height:100%;position:relative;top:0px;left:0px;}
.case-fst{background:#cb461b;}
.case-ago{background:#ffd200;}
.case-clj{background:#ca2820;}
.duck{position:absolute;top:15%;left:50%;margin-left:-135px;}
.duck_text{position:absolute;left:50%;margin-left:-135px;bottom:18%;background:url("../../images/duck_02.png") no-repeat 0px 0px;width:0;height:70px;
-webkit-animation-name:showWidth;
  animation-name: showWidth;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
  -webkit-animation-delay:1s;
            animation-delay:1s;
}

@-webkit-keyframes showWidth {
  0% {
    width:0px;
    opacity: 0;
  }
  100% {
    width:270px;
    opacity: 1;
  }
}
@keyframes showWidth{
  0% {
    width:0px;
    opacity: 0;
  }
  100% {
    width:270px;
    opacity: 1;
  }
}

.flower{position:absolute;top:-10%;left:0px;
-webkit-animation-name:pulseShowly;
  animation-name: pulseShowly;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 4s;
          animation-duration: 4s;
}
@-webkit-keyframes pulseShowly {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02);
    transform: scale3d(1.02, 1.02, 1.02);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulseShowly {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02);
    -ms-transform: scale3d(1.02, 1.02, 1.02);
    transform: scale3d(1.02, 1.02, 1.02);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}


.case-theme-text{position:absolute;top:50%;left:0px;width:100%;margin-top:-60px;}
.case-theme-text .cd-headline{font-weight:lighter;font-size:16px;color:#fff;line-height:20px;margin:20px 0px 0px;}
.case-theme-text .cd-headline.type b.is-visible{font-weight:normal;}
.case-theme-text .cd-headline.type i.in{padding:0 8px;}
.case-fst .case-theme-text .cd-headline.type .cd-words-wrapper.selected {
  background-color:#d34d22;
}
.case-fst .cd-headline.type .cd-words-wrapper.selected b {
  color:#fff
}
.case-ago .case-theme-text .cd-headline.type .cd-words-wrapper.selected {
  background-color:#ffd200;
}
.case-ago .cd-headline.type .cd-words-wrapper.selected b {
  color:#000;
}
.case-dbn .case-theme-text .cd-headline.type .cd-words-wrapper.selected,.case-mslin .case-theme-text .cd-headline.type .cd-words-wrapper.selected{
  background:none;
}

.case-dbn .case-theme-text .cd-headline,.case-dbn .cd-headline.type .cd-words-wrapper.selected b {
  color:#c99462
}

.case-dbn .case-theme-text .cd-headline.type b.is-visible,.case-mslin .case-theme-text .cd-headline.type b.is-visible{font-size:20px;}
.case-dbn .case-theme-text .cd-headline.type i.in{padding:0 2px;}
.case-dbn .case-theme-text{margin-top:-70px;}

.case-mslin{background:#f09199;}
.case-mslin .case-theme-text .cd-headline.type i.in{padding:0 1px;}
.mslin_logo{
  -webkit-animation: on_tl_item2 1.5s 0.5s ease both;
          animation: on_tl_item2 1.5s 0.5s ease both;
}
.mpos{position:absolute;}
.mslin_pic1{top:-20px;left:105px;
-webkit-animation: in_fall 2s 0.5s ease-out backwards,in_float2 10s 2.5s linear infinite alternate;
  animation: in_fall 2s 0.5s ease-out backwards,in_float2 10s 2.5s linear infinite alternate;
}
.mslin_pic2{top:30px;right:-30px;
-webkit-animation: in_fall 1.4s 0.5s ease-out backwards,in_float10 10s 1.9s linear infinite alternate;
          animation: in_fall 1.4s 0.5s ease-out backwards,in_float10 10s 1.9s linear infinite alternate;
}
.mslin_pic3{bottom:-50px;right:135px;
-webkit-animation: in_fall 1.4s 0.5s ease-out backwards,in_float9 10s 1.9s linear infinite alternate;
         animation: in_fall 1.4s 0.5s ease-out backwards,in_float9 10s 1.9s linear infinite alternate;
}
.mslin_pic4{bottom:45px;left:-40px;
-webkit-animation: in_fall 1.4s 0.5s ease-out backwards,in_float4 10s 1.9s linear infinite alternate;
          animation: in_fall 1.4s 0.5s ease-out backwards,in_float4 10s 1.9s linear infinite alternate;
}

.case-t-tip{position:absolute;top:0px;left:5%;width:20px;padding:20px 14px 0px;height:120px;color:#222;line-height:15px;text-align:center;font-size:14px;text-align:center;vertical-align:middle;background:#fedd00; overflow:hidden;
 -webkit-border-radius:0 0 30px 30px;
  -moz-border-radius:0 0 30px 30px;
  -ms-border-radius:0 0 30px 30px;
  -o-border-radius:0 0 30px 30px;
  border-radius:0 0 30px 30px;
  -webkit-animation-name:showHeight;
  animation-name: showHeight;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}

@-webkit-keyframes in_fall {
  0% {
    -webkit-transform: translateY(-25.7185rem);
            transform: translateY(-25.7185rem);
    opacity: 0;
  }
  30% {
    -webkit-transform: translateY(1.4815rem);
            transform: translateY(1.4815rem);
    opacity: 1;
  }
  50% {
    -webkit-transform: translateY(-0.4444rem);
            transform: translateY(-0.4444rem);
  }
  100% {
    -webkit-transform: translateY(0.4445rem);
            transform: translateY(0.4445rem);
  }
}
@keyframes in_fall {
  0% {
    -webkit-transform: translateY(-25.7185rem);
            transform: translateY(-25.7185rem);
    opacity: 0;
  }
  30% {
    -webkit-transform: translateY(1.4815rem);
            transform: translateY(1.4815rem);
    opacity: 1;
  }
  50% {
    -webkit-transform: translateY(-0.4444rem);
            transform: translateY(-0.4444rem);
  }
  100% {
    -webkit-transform: translateY(0.4445rem);
            transform: translateY(0.4445rem);
  }
}
@-webkit-keyframes in_float {
  0% {
    -webkit-transform: translateY(0.4445rem);
            transform: translateY(0.4445rem);
  }
  100% {
    -webkit-transform: translateY(-0.4444rem);
            transform: translateY(-0.4444rem);
  }
}
@keyframes in_float {
  0% {
    -webkit-transform: translateY(0.4445rem);
            transform: translateY(0.4445rem);
  }
  100% {
    -webkit-transform: translateY(-0.4444rem);
            transform: translateY(-0.4444rem);
  }
}

@-webkit-keyframes in_float1 {
  0% {
    -webkit-transform: translateY(0.4445rem);
            transform: translateY(0.4445rem);
  }
  100% {
    -webkit-transform: translateY(-0.4444rem);
            transform: translateY(-0.4444rem);
  }
}
@keyframes in_float1 {
  0% {
    -webkit-transform: translateY(0.4445rem);
            transform: translateY(0.4445rem);
  }
  100% {
    -webkit-transform: translateY(-0.4444rem);
            transform: translateY(-0.4444rem);
  }
}

@-webkit-keyframes in_float2 {
  0% {
    -webkit-transform: translate3d(0, 0.4445rem, 0);
            transform: translate3d(0, 0.4445rem, 0);
  }
  100% {
    -webkit-transform: translate3d(4.4445rem, -2rem, 0);
            transform: translate3d(4.4445rem, -2rem, 0);
  }
}
@keyframes in_float2 {
  0% {
    -webkit-transform: translate3d(0, 0.4445rem, 0);
            transform: translate3d(0, 0.4445rem, 0);
  }
  100% {
    -webkit-transform: translate3d(4.4445rem, -2rem, 0);
            transform: translate3d(4.4445rem, -2rem, 0);
  }
}

@-webkit-keyframes in_float3 {
  0% {
    -webkit-transform: translateY(0.4445rem);
            transform: translateY(0.4445rem);
  }
  100% {
    -webkit-transform: translateY(-0.4445rem);
            transform: translateY(-0.4445rem);
  }
}
@keyframes in_float3 {
  0% {
    -webkit-transform: translateY(0.4445rem);
            transform: translateY(0.4445rem);
  }
  100% {
    -webkit-transform: translateY(-0.4445rem);
            transform: translateY(-0.4445rem);
  }
}

@-webkit-keyframes in_float4 {
  0% {
    -webkit-transform: translate3d(0, 0.4445rem, 0);
            transform: translate3d(0, 0.4445rem, 0);
  }
  100% {
    -webkit-transform: translate3d(-5.1851rem, -4rem, 0);
            transform: translate3d(-5.1851rem, -4rem, 0);
  }
}
@keyframes in_float4 {
  0% {
    -webkit-transform: translate3d(0, 0.4445rem, 0);
            transform: translate3d(0, 0.4445rem, 0);
  }
  100% {
    -webkit-transform: translate3d(-5.1851rem, -4rem, 0);
            transform: translate3d(-5.1851rem, -4rem, 0);
  }
}

@-webkit-keyframes in_float5 {
  0% {
    -webkit-transform: translate3d(0, 0.4445rem, 0);
            transform: translate3d(0, 0.4445rem, 0);
  }
  100% {
    -webkit-transform: translate3d(-0.4445rem, 0, 0);
            transform: translate3d(-0.4445rem, 0, 0);
  }
}
@keyframes in_float5 {
  0% {
    -webkit-transform: translate3d(0, 0.4445rem, 0);
            transform: translate3d(0, 0.4445rem, 0);
  }
  100% {
    -webkit-transform: translate3d(-0.4445rem, 0, 0);
            transform: translate3d(-0.4445rem, 0, 0);
  }
}

@-webkit-keyframes in_float9 {
  0% {
    -webkit-transform: translate3d(0, 0.4445rem, 0);
            transform: translate3d(0, 0.4445rem, 0);
  }
  100% {
    -webkit-transform: translate3d(-4.4445rem, 2.2223rem, 0);
            transform: translate3d(-4.4445rem, 2.2223rem, 0);
  }
}
@keyframes in_float9 {
  0% {
    -webkit-transform: translate3d(0, 0.4445rem, 0);
            transform: translate3d(0, 0.4445rem, 0);
  }
  100% {
    -webkit-transform: translate3d(-4.4445rem, 2.2223rem, 0);
            transform: translate3d(-4.4445rem, 2.2223rem, 0);
  }
}

@-webkit-keyframes in_float10 {
  0% {
    -webkit-transform: translate3d(0, 0.4445rem, 0);
            transform: translate3d(0, 0.4445rem, 0);
  }
  100% {
    -webkit-transform: translate3d(3.1852rem, 2.8889rem, 0);
            transform: translate3d(3.1852rem, 2.8889rem, 0);
  }
}
@keyframes in_float10 {
  0% {
    -webkit-transform: translate3d(0, 0.4445rem, 0);
            transform: translate3d(0, 0.4445rem, 0);
  }
  100% {
    -webkit-transform: translate3d(3.1852rem, 2.8889rem, 0);
            transform: translate3d(3.1852rem, 2.8889rem, 0);
  }
}

@-webkit-keyframes on_tl_item2{
  0% {
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 1;
  }
}
@keyframes on_tl_item2{
  0% {
    -webkit-transform: scale(0, 0);
            transform: scale(0, 0);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
    opacity: 1;
  }
}

@-webkit-keyframes show-height {
  0% {
    height:0px;
    opacity: 0;
  }
  100% {
    height:120px;
    opacity: 1;
  }
}
@keyframes show-height {
  0% {
    height:0px;
    opacity: 0;
  }
  100% {
    height:120px;
    opacity: 1;
  }
}
.animate-element.start-animation.show-height{
  -webkit-animation: show-height 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: show-height 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: show-height 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: show-height 1.5s 1 cubic-bezier(0.77, 0, 0.175, 1);
  opacity: 1;
}

@-webkit-keyframes pulseOnly {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02);
    transform: scale3d(1.02, 1.02, 1.02);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulseOnly {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  50% {
    -webkit-transform: scale3d(1.02, 1.02, 1.02);
    -ms-transform: scale3d(1.02, 1.02, 1.02);
    transform: scale3d(1.02, 1.02, 1.02);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    -ms-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.animate-element.start-animation.pulseOnly{
  -webkit-animation: bounceIn 2s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: bounceIn 2s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: bounceIn 2s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: bounceIn 2s 1 cubic-bezier(0.77, 0, 0.175, 1);
  opacity: 1;
}

.animate-element.start-animation.swingOnly{
  -webkit-animation: bounceIn 2s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: bounceIn 2s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: bounceIn 2s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: bounceIn 2s 1 cubic-bezier(0.77, 0, 0.175, 1);
  opacity: 1;
}

@-webkit-keyframes zoomInDownShort {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3) translate3d(0, -200px, 0);
    transform: scale3d(0.3, 0.3, 0.3) translate3d(0, -200px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomInDownShort {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3) translate3d(0, -200px, 0);
    transform: scale3d(0.3, 0.3, 0.3) translate3d(0, -200px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@-webkit-keyframes swingShort{
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 9deg);
    transform: rotate3d(0, 0, 1, 9deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -6deg);
    transform: rotate3d(0, 0, 1, -6deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 3deg);
    transform: rotate3d(0, 0, 1, 3deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -3deg);
    transform: rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swingShort{
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 9deg);
    -ms-transform: rotate3d(0, 0, 1, 9deg);
    transform: rotate3d(0, 0, 1, 9deg);
  }

  40%{
    -webkit-transform: rotate3d(0, 0, 1, -6deg);
    -ms-transform: rotate3d(0, 0, 1, -6deg);
    transform: rotate3d(0, 0, 1, -6deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 3deg);
    -ms-transform: rotate3d(0, 0, 1, 3deg);
    transform: rotate3d(0, 0, 1, 3deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -3deg);
    -ms-transform: rotate3d(0, 0, 1, -3deg);
    transform: rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    -ms-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.case-ago .case-t-tip,.case-zhy .case-t-tip{background:#000;color:#fedd00;}
.case-ago .loader-inner{position:absolute;top:50%;left:50%;margin:-216px 0px 0px -216px;}
@-webkit-keyframes ball-scale-ripple {
  0% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 1; }

  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7; }

  100% {
    opacity: 0.0; } }

@keyframes ball-scale-ripple {
  0% {
    -webkit-transform: scale(0.1);
            transform: scale(0.1);
    opacity: 1; }

  70% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0.7; }

  100% {
    opacity: 0.0; } }

.ball-scale-ripple > div {
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  height: 400px;
  width: 400px;
  border-radius: 100%;
  border: 16px solid #ffdc00;
  -webkit-animation: ball-scale-ripple 2s 0s infinite cubic-bezier(.21, .53, .56, .8);
          animation: ball-scale-ripple 2s 0s infinite cubic-bezier(.21, .53, .56, .8); }

.bottom-file{background:#1f1f1f;color:#fff;overflow:hidden;padding:0 0 4%;}
.view-list{width:1380px;margin:0 auto 4%;overflow:hidden;border-bottom:1px solid #363636;padding-bottom:4%;}
.view-list li{float:left;width:45%;margin:5% 5% 0 0;overflow:hidden;color:#aaa;font:16px/100% "Verdana";text-transform:capitalize;}
.view-list li dt{float:left;width:60px;overflow:hidden;border-right:1px solid #fff;}
.view-list li dt b{display:block;font:bold 30px/100% "Verdana";margin-bottom:10px;}
.view-list li dt span{padding-left:10px;}
.view-list li dd{float:right;width:87%;overflow:hidden;}
.view-list li dd a{color:#fff;}
.view-list li dd h1{font-size:18px;height:24px;line-height:24px;overflow:hidden;margin-bottom:10px;}
.view-list li dd p{color:#666;font:14px/150% "Verdana";}
.view-list li dd p i{width:8px;height:8px; background:#666;display:inline-block; margin-right:5px; 
-webkit-border-radius:50%;
-ms-border-radius:50%;
-moz-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
}
.view-list li dd a:hover p{color:#f72832;}
.view-list li dd a:hover i{background:#f72832;}
.foot-information{width:1380px;margin:0px auto;overflow:hidden;font-size:14px;}
.f-infor-address{float:left;width:48.5%;overflow:hidden;line-height:120%;}
.f-infor-address img{float:left;margin-right:10px;}
.f-infor-address span{display:block;margin-bottom:10px;}
.f-infor-address p{font-family:"Verdana";color:#555;font-size:12px;}
.f-infor-link{width:25%;float:left;overflow:hidden;color:#666;line-height:160%;}
.f-infor-link span{border-left:1px solid #363636;border-right:1px solid #363636;padding:0 5% 0 20%;margin-bottom:5%;display:block;}
.f-infor-link p{overflow:hidden;padding-left:20%;}
.f-infor-link p a{color:#aaa;padding-right:7%;}
.f-infor-link p a:hover{color:#fff;}
.f-infor-copyright{width:21.5%;overflow:hidden;float:right;color:#666;line-height:160%;}
.f-infor-copyright em{color:#fff;}
.f-infor-copyright span{color:#aaa;}

.side-open{position:fixed;right:0px;bottom:90px;width:165px;z-index:99;display:none;}
.side-open ul{position:relative;height:195px;}
.side-open li{position:absolute;top:0px;right:0px;overflow:hidden;
  width:155px;height:60px;line-height:60px;background:#3782ff;cursor:pointer;font-size:18px;font-weight:bold;
  color:#fff;margin-bottom:5px;
  -webkit-border-radius:30px 0px 0px 30px;
  -ms-border-radius:30px 0px 0px 30px;
  -moz-border-radius:30px 0px 0px 30px;
  -o-border-radius:30px 0px 0px 30px;
  border-radius:30px 0px 0px 30px;
  -webkit-transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
  transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.side-open li:nth-child(2){background:#fedd00;color:#000;top:65px;}
.side-open li:nth-child(3){background:#f72832;top:130px;}
.side-open li img{position:absolute;top:6px;left:6px;z-index:100;}
.side-open li:nth-child(3) img{left:8px;}
.side-open li em{font-family:"Verdana";font-size:20px;width:100%;display:block;
filter:alpha(opacity=0);
-moz-opacity:0;
-khtml-opacity:0;
opacity: 0;
transform:translateX(40px);
-webkit-transform:translateX(40px);
visibility:hidden;
}
.side-open li.current span{display:none;}
.side-open li.current em{
  visibility:visible;
  transform:translateX(0px);
  -webkit-transform:translateX(0px); 
  filter:alpha(opacity=100);
   -moz-opacity:1;
   -khtml-opacity:1;
   opacity: 1;
}
.mask-bg{position:fixed;top:0px;left:0px;width:100%;height:100%;bottom:0px;z-index:1000;background:rgba(0,0,0,.6);visibility:hidden;opacity:0;
-webkit-transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
  transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.mask-bg.open-out{opacity:1;visibility:visible;}
.demand-box{
  position:fixed;top:50%;left:50%;margin:-300px 0 0 -450px;width:840px;height:555px;padding:50px 0px 0px 60px;background:#f2f2f2;color:#1f1f1f;z-index:1080;
 -webkit-transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
  transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
  -webkit-transform: scale(0.7);
  -moz-transform: scale(0.7);
  -ms-transform: scale(0.7);
  transform: scale(0.7);
  opacity: 0;
  visibility:hidden;
}
.demand-box.open-out{visibility:visible;opacity:1;
-webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}
.demand-box h1{font-size:36px;color:#1f1f1f;font-weight:bold;line-height:120%;}
.demand-box h2{padding:15px 0px 30px;font-size:16px;}
.demand-box h2 span{color:#c6c6c6;font-size:14px;font-family:"Verdana";text-transform:uppercase;padding:0 0 0 5px;}
.demand-box p{margin-bottom:20px;}
.demand-text{border:1px solid #e6e6e6;font-size:16px;color:#1f1f1f;padding:5px 0px 5px 20px;line-height:38px;width:358px;margin-right:20px;font-family:"Microsoft YaHei";}
.demand-textarea{border:1px solid #e6e6e6;font-size:16px;color:#1f1f1f;padding:10px 0px 10px 20px;line-height:38px;width:758px;height:220px;font-family:"Microsoft YaHei";}
.demand-btn{background:#1f1f1f;color:#fff;width:380px;text-align:center;height:48px;border:none;font:bold 16px/48px "Microsoft YaHei";margin-right:20px;cursor:pointer;}
.demand-submit{background:#f72832;}
input.demand-text::-moz-placeholder, textarea.demand-textarea::-moz-placeholder {
    color: #1f1f1f;
}

input.demand-text:-ms-input-placeholder, textarea.demand-textarea:-ms-input-placeholder {
    color: #1f1f1f;
}

input.demand-text::-webkit-input-placeholder, textarea.demand-textarea::-webkit-input-placeholder {
    color: #1f1f1f;
}

textarea{outline: none;}
.demand-submit:hover{background:#f80410;}
.demand-close{position:absolute;width:30px;height:30px;background:url(../../images/x_close.png) no-repeat center center #e0e0e0;top:20px;right:20px;
-webkit-border-radius:50%;
-ms-border-radius:50%;
-moz-border-radius:50%;
-o-border-radius:50%;
border-radius:50%;
cursor:pointer;
}
.demand-close:hover{background-color:#1f1f1f;}

@-webkit-keyframes ball-scale-multiple {
  0% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
    opacity:0;}

  5% {
    opacity: 1; }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

@keyframes ball-scale-multiple {
  0% {
    -webkit-transform: scale(0.6);
            transform: scale(0.6);
    opacity: 0; }

  5% {
    opacity: 1; }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

.ball-scale-multiple {
  position: relative;width:48px;height:48px; float:left;margin-right:15px;
}
  .ball-scale-multiple > div:nth-child(2) {
    -webkit-animation-delay: 0.2s;
            animation-delay: 0.2s; }
  .ball-scale-multiple > div:nth-child(3) {
    -webkit-animation-delay: 0.4s;
            animation-delay: 0.4s; }
  .ball-scale-multiple > div {
    background-color: #fff;
    width: 15px;
    height: 15px;
    border-radius: 100%;
    margin: 2px;
    -webkit-animation-fill-mode: both;
            animation-fill-mode: both;
    position: absolute;
    left: 0px;
    top: 0px;
    opacity: 0;
    margin: 0;
    width: 60px;
    height: 60px;
    -webkit-animation: ball-scale-multiple 1s 0s linear infinite;
            animation: ball-scale-multiple 1s 0s linear infinite; 
    }

  @-webkit-keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); 
  }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0; } }

@keyframes ball-scale {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0); }

  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 0;} 
  }
.footer_telephone .telephone_input_2{position:relative;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
}
.footer_telephone .telephone_input_2:before{
    content: "";
    position: absolute;
    z-index:-1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:rgba(255,255,255,.6);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
    -webkit-border-radius:5px;
    -ms-border-radius:5px;
    -moz-border-radius:5px;
    -o-border-radius:5px;
    border-radius:5px;
}
.footer_telephone .telephone_input_2:hover:before,.footer_telephone .telephone_input_2:focus:before,.footer_telephone .telephone_input_2:active:before {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
  -webkit-transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
  transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66);
}
.footer_telephone .telephone_input_3{position:relative;overflow:hidden;}
.footer_telephone .telephone_input_3:before{
  background:rgba(255,255,255,.2);
  content:"";position:absolute;top:50%;left:50%;margin:-75px 0px 0px -75px;
  -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  display: inline-block;
  -webkit-border-radius:50%;
  -ms-border-radius:50%;
  -moz-border-radius:50%;
  -o-border-radius:50%;
  border-radius:50%;
  width:150px;
  height:150px;
  -webkit-animation: ball-scale 1s 0s ease-in-out infinite;
  animation: ball-scale 1s 0s ease-in-out infinite; 
}

.classic-case{margin-bottom:3%;}
.classic-case a{margin:0 20px 40px;}
.case_ele01-content{position:absolute;top:35%;width:840px;height:175px;left:50%;margin-left:-420px;}
.case-banner-content .swiper-slide .case_b1_pic{position:absolute;top:0;left:0px;width:215px;height:175px;
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
  -webkit-animation-duration: 5s;
          animation-duration: 5s;
}
.case-banner-content .swiper-slide a{display:block;}
.case-banner-content .swiper-slide.swiper-slide-active .case_b1_pic{
  -webkit-animation-name:bounceIn;
  animation-name: bounceIn;
}
.case-banner-content .swiper-slide .case_b1_text01{
  position:absolute;top:45px;left:245px;width:480px;height:45px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.case-banner-content .swiper-slide.swiper-slide-active .case_b1_text01{
  -webkit-animation-name:fadeInDown;
  animation-name: fadeInDown;
}
.case-banner-content .swiper-slide .case_b1_text02{
  position:absolute;bottom:10px;left:245px;width:588px;height:60px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.case-banner-content .swiper-slide.swiper-slide-active .case_b1_text02{
  -webkit-animation-name:fadeInUp;
  animation-name: fadeInUp;
}

.case_ele02-content{position:absolute;top:19%;width:790px;height:305px;left:50%;margin-left:-395px;}
.case-banner-content .swiper-slide .case_b2_pic{position:absolute;top:0px;left:120px;width:278px;
 -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
 -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.case-banner-content .swiper-slide.swiper-slide-active .case_b2_pic{
  -webkit-animation-name:bounceIn;
  animation-name: bounceIn;
}

.case-banner-content .swiper-slide .case_b2_ico{
  position:absolute;top:52px;left:442px;width:40px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
 -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.case-banner-content .swiper-slide.swiper-slide-active .case_b2_ico{
  -webkit-animation-name:rotateIn;
  animation-name: rotateIn;
}
.case-banner-content .swiper-slide .case_b2_logo{
  position:absolute;top:5px;right:120px;width:156px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
 -webkit-animation-delay: 1.5s;
          animation-delay: 1.5s;
  -webkit-animation-duration: 3s;
          animation-duration: 3s;
}
.case-banner-content .swiper-slide.swiper-slide-active .case_b2_logo{
  -webkit-animation-name:fadeInRight;
  animation-name: fadeInRight;
}
.case-banner-content .swiper-slide .case_b2_text01{
  position:absolute;top:148px;left:0px;width:100%;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.case-banner-content .swiper-slide.swiper-slide-active .case_b2_text01{
  -webkit-animation-name:fadeInDown;
  animation-name: fadeInDown;
}
.case-banner-content .swiper-slide .case_b2_text02{
  position:absolute;bottom:2px;left:125px;width:520px;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.case-banner-content .swiper-slide.swiper-slide-active .case_b2_text02{
  -webkit-animation-name:fadeInUp;
  animation-name: fadeInUp;
}

.case_ele03-content{position:absolute;top:50%;width:915px;left:50%;margin:-100px 0px 0px -457.5px;text-align:center;}
.case-banner-content .swiper-slide .case_b3_logo{width:385px;}
.case-banner-content .swiper-slide.swiper-slide-active .case_b3_logo{
  -webkit-animation: on_tl_item2 1.5s 1s ease both;
          animation: on_tl_item2 1.5s 1s ease both;
}
.case-banner-content .swiper-slide .case_b3_text01{margin:15px 0 5px;
-webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.case-banner-content .swiper-slide.swiper-slide-active .case_b3_text01{
  -webkit-animation-name:fadeInDown;
  animation-name: fadeInDown;
}
.case-banner-content .swiper-slide .case_b3_text02{width:570px;
-webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-delay: 0.5s;
          animation-delay: 0.5s;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
}
.case-banner-content .swiper-slide.swiper-slide-active .case_b3_text02{
  -webkit-animation-name:fadeInUp;
  animation-name: fadeInUp;
}
.case-banner-content .swiper-slide .case_b3_pic1{left:300px;top:-70px;width:370px;}
.case-banner-content .swiper-slide.swiper-slide-active .case_b3_pic1{
  -webkit-animation: in_fall 2s 0.5s ease-out backwards,in_float1 10s 2.5s linear infinite alternate;
  animation: in_fall 2s 0.5s ease-out backwards,in_float1 2s 2.5s linear infinite alternate;
}
.case-banner-content .swiper-slide .case_b3_pic2{right:-20px;bottom:-20px;width:365px;}
.case-banner-content .swiper-slide.swiper-slide-active .case_b3_pic2{
  -webkit-animation: in_fall 1.4s 0.5s ease-out backwards,in_float5 2s 1.9s linear infinite alternate;
          animation: in_fall 1.4s 0.5s ease-out backwards,in_float5 2s 1.9s linear infinite alternate;
}
.case-banner-content .swiper-slide .case_b3_pic3{right:595px;bottom:-65px;width:400px;}
.case-banner-content .swiper-slide.swiper-slide-active .case_b3_pic3{
  -webkit-animation: in_fall 1.5s 0.5s ease-out backwards,in_float3 2s 2s linear infinite alternate;
         animation: in_fall 1.5s 0.5s ease-out backwards,in_float3 2s 2s linear infinite alternate;
}
.case-banner-content .swiper-slide .case_b3_pic4{left:-40px;bottom:45px;width:245px;}
.case-banner-content .swiper-slide.swiper-slide-active .case_b3_pic4{
  -webkit-animation: in_fall 1.5s 0.5s ease-out backwards,in_float3 2s 2s linear infinite alternate;
          animation: in_fall 1.5s 0.5s ease-out backwards,in_float3 2s 2s linear infinite alternate;
}

.case-banner-content .swiper-slide .case_banner{display:block;width:auto;}

.case-banner-content .swiper-pagination-bullet-active{background:#1f1f1f;}
.case-banner-content .swiper-pagination{display:none;}

.case-banner-content .swiper-button-prev, .case-banner-content .swiper-button-next { width:80px; height:80px; background:url(../../images/images/arrow.png) no-repeat; display:none; }
.case-banner-content .swiper-button-prev { left:5%; background-position:0 0; }
.case-banner-content .swiper-button-next { right:5%; background-position:-80px 0; }


.case-clj .case-theme-text{margin-top:-112px;}
.case-clj .case-theme-text .cd-headline{background:url(../../images/clj_tip.png) no-repeat top center;width:230px;height:30px;line-height:30px;padding:8px 0;margin:25px auto 0;color:#ca2820;}
.case-clj .case-theme-text .cd-headline.type i.in{padding:0 2px;font-weight:bold;}

.case-clj .case-theme-text .cd-headline.type .cd-words-wrapper.selected {
  background-color:#ffcc00;
}
.case-clj .case-theme-text .cd-headline.type .cd-words-wrapper.selected b {
  color:#ca2820;
}

.clj_more{position:absolute;top:0;left:0px;
  -webkit-animation-name:pulse;
  animation-name: pulse;
  -webkit-animation-timing-function: ease;
          animation-timing-function: ease;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
}

@media screen and (max-width:1440px){
  
  .case_ele01-content{top:30%;}
  .case_ele02-content{top:10%;}
  .case_ele03-content{margin-top:-120px;}
  .case-banner-content .swiper-slide .case_b3_pic1{width:330px}
  .case-banner-content .swiper-slide .case_b3_pic2{width:305px}
  .case-banner-content .swiper-slide .case_b3_pic3{width:330px;right:370px;}
  .case-banner-content .swiper-slide .case_b3_pic4{width:215px}
}